/*
Theme Name: サンプルサイト
Author: Hotstaff wada
Description: 練習用テーマ
Version: 1.0
*/


/* 要素のフェードイン */
.fadeInItem {
    opacity: 0; /* 最初は透明 */
    -webkit-transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
    transition: opacity 0.8s ease-out, -webkit-transform 0.8s ease-out;
    -o-transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, -webkit-transform 0.8s ease-out; /* アニメーションの設定 */
}
    /* 初期状態のtransformをそれぞれのクラスで設定 */
.fadeInItem.from-bottom {
    -webkit-transform: translateY(3.125rem);
        -ms-transform: translateY(3.125rem);
            transform: translateY(3.125rem); /* 最初は少し下にずらす */
}
.fadeInItemn.from-left {
    -webkit-transform: translateX(-3.125rem);
        -ms-transform: translateX(-3.125rem);
            transform: translateX(-3.125rem); /* 最初は少し左にずらす */
}
    /* フェードイン */
.fadeInItem.fade-in-up {
    opacity: 1; /* フェードイン後 */
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); /* 上方向に移動 */
}
.fadeInItem.fade-in-left {
    opacity: 1; /* フェードイン後 */
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0); /* 上方向に移動 */
}


/* 共通 */
html, body {
    font-family: "Inter", "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin: 0 auto;
    padding: 0;
    color: #2E425A;
    background: -webkit-gradient(linear, left top, left bottom, from(#FEFEFE), to(#F7F9F8));
    background: -o-linear-gradient(#FEFEFE, #F7F9F8);
    background: linear-gradient(#FEFEFE, #F7F9F8);
}

* {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
}

img {
    width: 100%;
    height: auto;
}

.inter {
    font-family: "Inter", "M PLUS 1", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
    text-transform: uppercase;
}

.container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

.flexContainer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}

.contentsTitle { 
    margin-bottom: 6rem;
}

.contentsTitle >h2 {
    display: inline-block;
    font-size: 3.375rem;
    margin-right: 1rem;
    overflow-wrap:break-word;
}

.contentsTitle >span {
    display: inline-block;
    font-size: 2rem;
    font-weight: 700;
    color: #8698AE;
    margin-top: 1rem;
}



/* ローディング画面 */
.loader {
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: #fff;
    z-index: 555;
    top: 0;
    left: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;

    /* トップロゴ */
    .txt img {
        max-width: 18.75rem;
    }
    /* サイン */
    .sign img {
            width: 30vw;
        }
}



/* ヘッダー + Gナビ */
body.fixed {
    overflow: hidden;
}

#header {
    padding: 2rem 0 1.5rem;
    margin: 0 auto;
    background-color: #FEFEFE;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 99;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}

header.hidden {
    /* 要調整 */
    -webkit-transform: translateY(-23.125rem);
        -ms-transform: translateY(-23.125rem);
            transform: translateY(-23.125rem);
}

.logo img {
    width: 60%;
    max-width: 22.5rem;
    min-width: 10rem;
    height: auto;
    margin-bottom: 2.25rem;
}

#gNavi > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-column-gap: 2rem;
       -moz-column-gap: 2rem;
            column-gap: 2rem;
    font-size: 1.25rem;

    .actionItemHeader {
    position: relative;
    padding-left: 1.25rem;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

        &::before {
            content: "";
            position: absolute;
            top: 0.125rem;
            left: 0;
            height: calc(tan(60deg) * 1.25rem / 2);
            width: 0.75rem;
            -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
            background-color: #E76457;
            -webkit-transition: background-color 0.3s ease, -webkit-clip-path 0.4s ease-in-out;
            transition: background-color 0.3s ease, -webkit-clip-path 0.4s ease-in-out;
            -o-transition: clip-path 0.4s ease-in-out, background-color 0.3s ease;
            transition: clip-path 0.4s ease-in-out, background-color 0.3s ease;
            transition: clip-path 0.4s ease-in-out, background-color 0.3s ease, -webkit-clip-path 0.4s ease-in-out;
        }
    }
/* JavaScriptで追加/削除するクラス */
    .action {
        -webkit-transform: translateY(-0.125rem);
            -ms-transform: translateY(-0.125rem);
                transform: translateY(-0.125rem);
        
        &::before {
            background-color: #023894;
            top: 0.375rem;
            height: 0.625rem;
            width: 0.625rem;
            -webkit-clip-path: polygon(
                50% 0%, 65% 5%, 79% 14%, 90% 27%, 95% 39%, 98% 50%, 95% 61%, 90% 73%,
                79% 86%, 65% 95%, 50% 100%, 35% 95%, 21% 86%, 10% 73%, 5% 61%, 2% 50%,
                5% 39%, 10% 27%, 21% 14%, 35% 5%
            );
                    clip-path: polygon(
                50% 0%, 65% 5%, 79% 14%, 90% 27%, 95% 39%, 98% 50%, 95% 61%, 90% 73%,
                79% 86%, 65% 95%, 50% 100%, 35% 95%, 21% 86%, 10% 73%, 5% 61%, 2% 50%,
                5% 39%, 10% 27%, 21% 14%, 35% 5%
            );
        }
    }
}



/* スクロール時のヘッダー */
#header.test {
    /* 要調整 */
    position: fixed;
    background-color: rgba(255, 255, 255, 0);
    padding-bottom: 0;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;

    > div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .logo {
        background-color: #fff;
        padding: 1.5vh 2vw;
        border-radius: 100vh;
        -webkit-filter: drop-shadow(0 0 0.25rem #ddd);
                filter: drop-shadow(0 0 0.25rem #ddd);
    }
    .logo img {
        width: 100%;
        margin-bottom: 0;
    }

    #gNavi {
        background-color: #fff;
        padding: 1vh 2vw;
        border-radius: 100vh;
        -webkit-filter: drop-shadow(0 0 0.25rem #ddd);
                filter: drop-shadow(0 0 0.25rem #ddd);
        /* 上下センター揃え用 */
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

    #gNavi > ul {
        gap: 2rem;
        font-size: 0.875rem;

        .actionItemHeader {
            padding-left: 0.75rem;

            &::before {
                top: 0.125rem;
                height: calc(tan(60deg) * 0.75rem / 2);
                width: 0.5rem;
            }
        }
        /* JavaScriptで追加/削除するクラス */
        .action {
            &::before {
                top: 0.1875rem;
                height: 0.5rem;
                width: 0.5rem;
            }
        }
    }
}



/* GナビSP用 */
/* PLAYER各選手 */
.gNaviPlayerSP {
    display: none;
}

.hamburger-menu {
    display: none;
}



/* パンくずリスト */
#breadcrumb {
    ul{
        font-weight: 400;
        text-align: right;
        margin: 1.5rem 0 7.5rem;
    }

    li{
        display: inline;
    }

    li a{
        color: inherit;
        text-decoration: none;
    }

    li + li:before{
        content: "—";
        margin:.5em;
    }
}

#breadcrumb:has(+ #top) {
    ul{
        margin: 0;
    }
}



/* フッター */
#footer {
    position: relative;
    margin-top: 10rem;
    padding: 4rem 0;
    color: #F7F9F8;
    background: -webkit-gradient(linear,left top, left bottom,from(#374F6B),to(#2E425A));
    background: -o-linear-gradient(#374F6B,#2E425A);
    background: linear-gradient(#374F6B,#2E425A);
}

.footerTop {
    font-size: 1.5rem;
    margin-bottom: 10rem;
}

.footerLogo {
    width: 80%;
    max-width: 26.625rem;
    height: auto;
}

.footerLinkList > li {
    position: relative;
    margin-bottom: 1.5rem;
    padding-left: 1.25rem;
}

.footerLinkList > li::before {
    content: "";
    position: absolute;
    top: 0.25rem;
    left: 0;
    height: calc(tan(60deg) * 1.25rem / 2);
    width: 0.75rem;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #E76457;
}

.footerPlayerList {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    gap: 3.625rem;
    font-size: 1rem;
    font-weight: 500;
    margin-top: 1rem;
}

/* フッターHOTSTAFFロゴ */
.footerBottom > div:first-child {
    width: 9rem;
    height: auto;
    padding: 0.75rem;
    margin-bottom: 2rem;
    background-color: #F7F9F8;
    border-radius: 0.5rem;
}

/* フッターコピーライツ */
#copyright > p:first-child {
    position: relative;
    margin-bottom: 2rem;
    padding-left: 1.25rem;
}

#copyright > p:first-child::before {
    content: "";
    position: absolute;
    top: 0.125rem;
    left: 0;
    height: calc(tan(60deg) * 1.25rem / 2);
    width: 0.75rem;
    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
            clip-path: polygon(0 0, 100% 50%, 0 100%);
    background-color: #F7F9F8;
}

#copyright > p:not(:first-child) {
    font-weight: 300;
    margin-top: 0.5rem;
}



/* トップに戻る */
/* #re-top {
    position: absolute;
    top: -8rem;
    right: 5%;
} */
#re-top {
	position:fixed; /*画面に固定*/
	bottom:5%; /*画面下へ*/
	right:5%; /*画面右へ*/
	z-index:10; /*レイヤー順序を上に*/
	background-color:transparent; /*領域の背景色（透明）*/
}
#re-top img {
    width: 5rem;
    height: 5rem;
    -webkit-filter: drop-shadow(0 0 0.25rem #ddd);
            filter: drop-shadow(0 0 0.25rem #ddd);
}

#re-top.stopped {
    position: absolute;
    top: -8rem;
    right: 5%;
    bottom: auto;
}


/* トップページ_スライドショー */
.slick_slider {
    position: relative;
    width: 100%;

    .sliderLi {
        position: relative;
        /* overflow: hidden; */
        height: 39vw;
        max-height: 940px;
        min-height: 580px;
        -webkit-clip-path: url(#kvClipCircle);
                clip-path: url(#kvClipCircle);

        img {
            display: block;
            -o-object-fit: cover;
               object-fit: cover;
            -o-object-position: bottom;
               object-position: bottom;
            height: 53vw;
            min-height: 584px;
        }
    }
}

/* スライドショーコピーライツ */
.topSliderCopyrights {
    position: absolute;
    color: #fff;
    right: 1.5rem;
    bottom: 7.5vw;
}

@media screen and (max-width: 1300px) {
    .topSliderCopyrights {
        bottom: 9vw;
    }
}
@media screen and (max-width: 1000px) {
    .topSliderCopyrights {
        bottom: 10vw;
    }
}


    .slick-dots {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-top: 0.5rem;
        height: 1.5rem;

        button {
            display: block;
            width: 0.625rem;
            height: 0.625rem;
            margin: 0.375rem;
            font-size: 0;
            padding: 0;
            border: 0;
            outline: none;
            cursor: pointer;
            background: #C0D1E5;
            border-radius: 50%;
            -webkit-transition: .7s;
            -o-transition: .7s;
            transition: .7s;
        }
        
        .slick-active {
            button {
                height: calc(tan(60deg) * 0.75rem / 2);
                width: 0.75rem;
                background: #E76457;
                border-radius: 0;
                -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                        clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
                -webkit-animation: slick_dot 3s .7s ease-in-out forwards;
                        animation: slick_dot 3s .7s ease-in-out forwards; /* durationはautoplaySpeed､delayはspeedと同じ値に */
                -webkit-transform: scale(1.1);
                    -ms-transform: scale(1.1);
                        transform: scale(1.1);
            }
        }
}



/* トップページ_リード文 */
#topAbout {
    font-size: 1.125rem;
    font-weight: 400;
    text-align: left;
    line-height: 2.5;
    width: 90%;
    max-width: 745px;
    margin: 7rem auto;
    word-break: keep-all;
    overflow-wrap: break-word;
}



/* トップページ_プレイヤー */
#topPlayer {
    margin-bottom: 8.75rem;
}

.topPlayerList {
    font-size: 1.5rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 4.5rem;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;

    li img  {
        display: block;
        width: 12em;
        height: 12em;
        margin-inline: auto;
        border-radius: 100vw;
    }

    .playerCopyrights {
        p {
            position: absolute;
            font-size: 0.75rem;
            margin-top: 0.25rem;
            left: 60%;
        }
    }
}  

.topPlayerListTag {
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    padding: 0.25rem 1rem;
    color: #F7F9F8;
    background-color: #E76457;
    border-radius: 100vw;
}

.topPlayerListName {
    margin: 2.5rem 0 1rem;

    h3 {
        font-size: 2.5rem;
        font-weight: 700;
        margin-bottom: 0.5rem;
    }

    span {
        font-size: 1rem;
        color: #8698AE;
    }
}



/* トップページ_NEWS */
#topNews {
    margin-bottom: 8.75rem;
}

/* スライド */
.newsSlider {
    /* スライドアイテム */
    .slick-slide {
        padding: 0 1em;
        opacity: 1;
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
        -webkit-transition: .5s;
        -o-transition: .5s;
        transition: .5s;

        /* img {
            height: 100%;
            margin-inline: auto;
            object-fit: cover;
            border-radius: 1rem;
        } */

        a {
            width: 100%;
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
        }
    }

    /* スライドアイテム_選択中 */
    .slick-current {
        opacity: 1;
        -webkit-transform: scale(1);
            -ms-transform: scale(1);
                transform: scale(1);
    }

    /* 左右矢印 */
    .slick-arrow {
        width: 3.125rem;
        height: 3.125rem;
        border-radius: 50%;
        border: none;
        outline: none;
        position: absolute;
        top: -2rem;
        z-index: 1;
        /* background-color: rgba($color: #fff, $alpha: .7); */
        color: #fff;
        font-size: 0;
        -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
                transform: translateY(-50%);
    
        &::before {
            content: '';
            display: block;
            width: 0.75rem;
            height: 0.75rem;
            border: 1px solid #2E425A;
            border-width: 0.1875rem 0.1875rem 0 0;
            position: absolute;
        }
    }
    
    .slick-next {
        right: 1rem;
        
        &::before {
            left: 1rem;
            -webkit-transform: translateY(-50%) rotate(45deg);
                -ms-transform: translateY(-50%) rotate(45deg);
                    transform: translateY(-50%) rotate(45deg);
        }
    }

    .slick-prev {
        right: 4.75rem;
        
        &::before {
            left: 1.25rem;
            -webkit-transform: translateY(-50%) rotate(-135deg);
                -ms-transform: translateY(-50%) rotate(-135deg);
                    transform: translateY(-50%) rotate(-135deg);
        }
    }
}


/* リンク_もっと見る */
.linkMore {
    text-align: right;
    text-transform: uppercase;
    margin-top: 4rem;
    -webkit-transition: -webkit-transform 0.3s ease-in-out;
    transition: -webkit-transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out;
    transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;

    a {
        position: relative;
        font-size: 1.5rem;
        font-weight: 700;
        padding-left: 1.25rem;
    }
    
    a::before {
        content: "";
        position: absolute;
        top: 0.375rem;
        left: 0;
        height: calc(tan(60deg) * 1.25rem / 2);
        width: 0.75rem;
        -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
                clip-path: polygon(0 0, 100% 50%, 0 100%);
        background-color: #E76457;
        -webkit-transition: background-color 0.3s ease, -webkit-clip-path 0.4s ease-in-out;
        transition: background-color 0.3s ease, -webkit-clip-path 0.4s ease-in-out;
        -o-transition: clip-path 0.4s ease-in-out, background-color 0.3s ease;
        transition: clip-path 0.4s ease-in-out, background-color 0.3s ease;
        transition: clip-path 0.4s ease-in-out, background-color 0.3s ease, -webkit-clip-path 0.4s ease-in-out;;
    }
}

.linkMore.action {
    -webkit-transform: translateY(-0.25rem);
        -ms-transform: translateY(-0.25rem);
            transform: translateY(-0.25rem);

    a::before {
            background-color: #023894;
            top: 0.5rem;
            height: 0.75rem;
            width: 0.75rem;
            -webkit-clip-path: polygon(
                50% 0%, 65% 5%, 79% 14%, 90% 27%, 95% 39%, 98% 50%, 95% 61%, 90% 73%,
                79% 86%, 65% 95%, 50% 100%, 35% 95%, 21% 86%, 10% 73%, 5% 61%, 2% 50%,
                5% 39%, 10% 27%, 21% 14%, 35% 5%
            );
                    clip-path: polygon(
                50% 0%, 65% 5%, 79% 14%, 90% 27%, 95% 39%, 98% 50%, 95% 61%, 90% 73%,
                79% 86%, 65% 95%, 50% 100%, 35% 95%, 21% 86%, 10% 73%, 5% 61%, 2% 50%,
                5% 39%, 10% 27%, 21% 14%, 35% 5%
            );
        }
}

/* スライド矢印 */
.arrow_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    margin: 1.25rem 0 0;
    position: relative;
}

.prev-arrow,
.next-arrow {
    display: block;
    width: 3.125rem;
    height: 3.125rem;
    background: coral;
    border-radius: 50%;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
    cursor: pointer;
    position:relative;
}

.prev-arrow {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
    margin-right: 1.25rem;
}

.prev-arrow::before,
.next-arrow::before{
    position:absolute;
    content: "";
    width:0.625rem;
    height:0.625rem;
    border-right: 0.125rem solid #FFF;
    border-top: 0.125rem solid #FFF;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    -webkit-transform:rotate(45deg);
        -ms-transform:rotate(45deg);
            transform:rotate(45deg);
}



/* トップページ_SPONSOR */
#topSponsor {
    margin-bottom: 20rem;
}

.topSponsorList {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 4rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(7.5rem, auto);
    row-gap: 7.5rem;
    -webkit-column-gap: 4rem;
       -moz-column-gap: 4rem;
            column-gap: 4rem;
    max-width: 62.5rem;
    margin-inline: auto;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: start;

    li {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        /* align-items: center; */
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        
        
        /* チームロゴ */
        div:first-child {
            width: 40%;
            min-width: 9.5rem;

            .sponsorCredit {
                font-size: 0.75rem;
                word-wrap: break-word;
                text-align: right;
                padding-right: 0.5rem;
                color: #8698AE;
            }
        }

        /* チーム情報 */
        div:last-child {
            width: 55%;
            
            h3 {
                font-size: 1.4rem;
                font-weight: 600;
                line-height: 1.5;
            }
        
            p {
                font-size: 1rem;
                font-weight: 400;
                margin-top: 1rem;
                line-height: 1.5rem;
            }
        
            .actionItemSponsor {
                position: relative;
                padding-left: 1.25rem;
                font-weight: 600;
                translate: transform 0.5s all;

                &::before {
                    content: "";
                    position: absolute;
                    top: 1px;
                    left: 0;
                    height: calc(tan(60deg) * 1.25rem / 2);
                    width: 0.75rem;
                    -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
                            clip-path: polygon(0 0, 100% 50%, 0 100%);
                    background-color: #2E425A;
                }
            }
            
        
            .popupBtn {
                cursor: pointer;
                text-decoration: underline;
            }
        }
    }
}

/* 拠点名ポップアップ */
.branchWrapper {
    background-color: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;

    .branchBox {
        position: relative;
        text-align: center;
        width: 80%;
        max-width: 43rem;
        margin: 30vh auto;
        padding: 3.5rem;
        background: #fff;
        border-radius: 1rem;
    }

    .branchInner {
        section {
            &:not(:last-child) {
                margin-bottom: 3.5rem;
            }

            h4 {
                font-size: 1.5rem;
                font-weight: 600;
                margin-bottom: 2rem;
            }

            ul {
                li {
                    display: inline-block;
                    font-weight: 400;
                    margin: 0;

                    &:not(:first-child)::before {
                        content: "／";
                    }
                }
            }
        }
    }

    /* 拠点名ポップアップ_クローズボタン */
    .branchClose {
        display: block;
        position: absolute;
        top: 1rem;
        right: 1rem;
        cursor: pointer;
        z-index: 1001;
    }

    .branchCloseInner {
        display: block;
        position: relative;
        width: 2rem;
        height: 2rem;
        z-index: 1001;
    }
    
    .branchClose::before, .branchClose::after { /* 共通設定 */
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0.125rem; /* 棒の幅（太さ） */
        height: 2rem; /* 棒の高さ */
        background: #2E425A;
    }
    
    .branchClose::before {
        -webkit-transform: translate(-50%,-50%) rotate(45deg);
            -ms-transform: translate(-50%,-50%) rotate(45deg);
                transform: translate(-50%,-50%) rotate(45deg);
    }
    
    .branchClose::after {
        -webkit-transform: translate(-50%,-50%) rotate(-45deg);
            -ms-transform: translate(-50%,-50%) rotate(-45deg);
                transform: translate(-50%,-50%) rotate(-45deg);
    }
}



/* アーカイブ_ブログカード */
.archiveGrid {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 5rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: minmax(11.25rem, auto);
    gap: 5rem;
    width: 80%;
    margin-inline: auto;
    margin-bottom: 10rem;
}

.archiveCard > a {
    display: inline-block;
    width: 100%;
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
}

.archiveThumbnail {
    width: 100%;
    min-width: 17em;
    height: 17em;
    background-color: #8698AE;
    border-radius: 1rem;

    img {
            height: 100%;
            margin-inline: auto;
            -o-object-fit: cover;
               object-fit: cover;
            border-radius: 1rem;
    }
}

.archiveInner {
    margin: 1.5rem 0.5rem 1rem;

    h3 {
        font-size: 1.5rem;
        font-weight: 600;
        text-align: justify;
        line-height: 1.5;
        overflow-wrap:break-word;
    }
}


/* 投稿日 */
.archiveDate {
    font-size: 1.25rem;
    font-weight: 400;
    color: #8698AE;
    margin-bottom: 1rem;

    /* NEWマーク */
    span {
        color: #E76457;
        margin-left: 1.5rem;
    }
}


/* カテゴリー */
.archiveCatTag {
    margin: 0 0.5rem;
}

.archiveCategory {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 500;
    padding: .7em;
    color: #F7F9F8;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
}
.csr {
    background-color: #78D1A0;
}
.sponsor {
    background-color: #E76457;
}
.player-suzukic,
.player-hattorim {
    color: #2E425A;
    background-color: #FFDA60;
}


/* タグ */
.tagItem {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        gap: 1rem;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        font-size: 0.875rem;
        color: #8698AE;

        li {
            /* padding: 0.375rem 0.75rem; */
            /* background-color: #FEFEFE; */
            /* border: solid 1px #2E425A; */
            /* border-radius: 100vh; */

            &::before {
                content: "#";
                margin-right: 0.25rem;
            }
        }
    }


/* アーカイブ_ページナビゲーション */
.wp-pagenavi,
.nav-links {
    font-family: "Inter", "M PLUS 1", sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    margin: 10rem auto;
    text-align: center;
}

.wp-pagenavi .current,
.nav-links > .current {
    border: none;
    margin: 1rem;
    padding: 0.5rem;
}

.wp-pagenavi a.page,
a.page-numbers {
    border: none;
    margin: 1rem;
    padding: 0.5rem;
    color: #8698AE;
}

.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
.next,
.prev {/* 記号 */
    font-weight: 400;
    margin: 1rem;
    padding: 0.5rem;
    color: #374F6B;
    background-color: none;
    border: none;
}


/* アーカイブ_リスト一覧 */
.archiveListFlex {
    font-family: "Inter", "M PLUS 1", sans-serif;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-column-gap: 15%;
       -moz-column-gap: 15%;
            column-gap: 15%;
    row-gap: 2.5rem;
    width: 100%;
    margin-inline: auto;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;

    h3 {
        font-size: 1.5rem;
        margin-bottom: 2rem; 
    }

    /* カテゴリーリスト */
    .listCategory {

        ul  {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr 1rem 1fr;
            grid-template-columns: repeat(2, 1fr);
            gap: 1rem;

            li {
                display: inline-block;
                text-align: center;
                padding: 0.625rem;
                border-radius: 0.5rem;
                color: #F7F9F8;

                &:nth-child(1) {
                    background-color: #E76457;
                }
                &:nth-child(2) {
                    background-color: #78D1A0;
                }
                &:nth-child(3), &:nth-child(4) {
                    background-color: #FFDA60;
                    color: #2E425A;
                }
            }
        }
    }

    /* タグリスト */
    .listTag {
        width: 30%;

        ul  {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        gap: 1rem;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        font-size: 0.875rem;
        color: #8698AE;

            li {
                /* padding: 0.375rem 0.75rem; */
                /* background-color: #FEFEFE; */
                /* border: solid 1px #2E425A; */
                /* border-radius: 100vh; */
    
                &::before {
                    content: "#";
                    margin-right: 0.25rem;
                }
            }
        }
    }

    /* 年別リスト 2026年から表示 */
    .listYearly {
        ul  {
            line-height: 1.7;
        }
    }

    /* 他の選手リスト */
    .listOtherPlayer {
        
        li {
            position: relative;
            padding-left: 1rem;
        }

        li:before {
            content: "";
            position: absolute;
            top: 0.125rem;
            left: 0;
            height: calc(tan(60deg)* 1.125rem / 2);
            width: 0.625rem;
            -webkit-clip-path: polygon(0 0, 100% 50%, 0 100%);
                    clip-path: polygon(0 0, 100% 50%, 0 100%);
            background-color: #2E425A;
            }
    }
}



/* 記事ページ */
#single {
    article {
        width: 90%;
        max-width: 51rem;
        margin-inline: auto;

        .singleFlex {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: baseline;
                -ms-flex-align: baseline;
                    align-items: baseline;
            margin-bottom: 2.5rem;
            }

        .archiveCategory,
        .archiveDate {
            margin-bottom: 0;
        }

        /* 記事タイトル */
        h1 {
            font-size: 1.75rem;
            font-weight: 600;
            line-height: 1.7;
            margin-bottom: 3.5rem;
            word-break: keep-all;
            overflow-wrap: break-word;
        }
        /* 小見出し */
        h2 {
            font-size: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: solid 0.125rem;
            margin-bottom: 1.5rem;
        }

        .singleContent {
            margin-bottom: 2.5rem;

            img {
                border-radius: 1rem;
            }

            p {
                font-size: 1.125rem;
                font-weight: 400;
                margin-bottom: 2.5rem;
                line-height: 2;
            }

            a {
                font-size: 0.875rem;
                letter-spacing: 0;
                color: #4C89F0;
                text-decoration: underline;
                cursor: pointer;
                word-wrap: break-word;
            }

            .wp-block-group {
                margin-bottom: 2.5rem;
                
                img {
                    margin-bottom: 1rem;
                }

                p {
                    margin-bottom: 0;
                }
            }

            figure {
                margin-bottom: 2.5rem;
                
                .wp-element-caption {
                    font-size: 0.75rem;
                    font-weight: 400;
                    text-align: right;
                    margin: 1rem 0 0;
                }
            }
        }

        .archiveTag {
            margin-bottom: 2.5rem;
        }

        .is-layout-flex {
            -webkit-column-gap: 1.125rem;
               -moz-column-gap: 1.125rem;
                    column-gap: 1.125rem;
            
            figure {
                min-width: 20rem;
            }
        }
    }
}

/* 記事送りリンク */
.clearFix {
    text-align: center;
    margin: 10rem auto;

    .boxContainer {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        gap: 5rem;
        font-size: 1.125rem;
        margin-bottom: 3rem;

        .leftCol {
            position: relative;
            padding-left: 1.25rem;
            
            img {
                position: absolute;
                top: 0.25rem;
                left: 0;
                width: .5em;
            }
        }

        .rightCol {
            position: relative;
            padding-right: 1.25rem;

            img {
                position: absolute;
                top: 0.25rem;
                right: 0;
                width: .5em;
            }
        }
    }
}

.backPrePage {
    font-size: 1.125rem;
    text-align: center;
    margin-inline: auto;
    padding-bottom: 0.125rem;
    color: #8698AE;
    border-bottom: solid 0.125rem;
}




/* プレイヤーページ */
.player {
    width: 90%;
    max-width: 1000px;
    margin-inline: auto;

    > section {
        margin-bottom: 8.75rem;
        
    }

    .contentsTitle {
        font-weight: 3rem;

        span {
            font-size: 1.25rem;
            
        }
    }

    /* 活動予定_戦績 */
    dl {
        font-size: 1.25rem;
        line-height: 1.5;
        /* margin-left: 8%; */

        div {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            border-bottom: solid 0.125rem #8698AE;
            padding: 1.5rem 0;

            
        }
        div:last-child {
            border-bottom: none;
        }

        dt {
            font-weight: 400;
            width: 15%;
            color: #8698AE;
        }

        dd {
            width: 85%;
        }
    }

    /* プロフィール */
    .flexContainer {
        gap: 1.5rem;

        > div:first-child {
            width: 50%;

            p {
                font-size: 1.125rem;
                font-weight: 400;
                text-align: justify;
                line-height: 1.7;
                margin-bottom: 2rem;
            }

            dl {
            width: 100%;
            word-break: keep-all;
            overflow-wrap: break-word;

            > div {
                    -webkit-box-pack: justify;
                        -ms-flex-pack: justify;
                            justify-content: space-between;
                }

                dt {
                    font-size: 1.125rem;
                    width: 45%;
                    min-width: 9rem;
                }

                dd {
                    font-weight: 500;
                    width: 60%;
                }
            }
        }
        
        
        > div:last-child {
            width: 45%;
        }
        
        img {
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            background-color: #8698AE;
            border-radius: 1rem;
        }
    }
}

.playerFlex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    gap: 2rem;
    margin-inline: auto;

    div {
        width: 40vh;
        height: auto;

        img {
            border-radius: 100%;
        }

        p {
            font-size: 0.75rem;
            text-align: right;
            padding-right: 1rem;
        }
    }

    hgroup {
        font-size: 1.5rem;
        font-weight: 600;

        > p:first-child {
            margin-bottom: 2rem;
        }
        > p:not(:first-child) {
            margin: 2rem 0;
        }

        h2 {
        font-size: 3rem;
        font-weight: 800;
        line-height: 0.8;
        }

        h2 > span {
            font-size: 1.25rem;
            margin-left: 1.5rem;
            color: #8698AE;
        }
    }
}

.playerSNS {
    margin-top: 2.5rem;
    display: -ms-grid;
    display: grid;

    li {
        a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }

        div:first-child {
            display: inline-block;
            margin-right: 1.25rem;
            width: 1.875rem;
            height: 1.875rem;
            min-width: 29px;
            min-height: 29px;

            img {
                width: 100%;
                height: auto;
            }
        }

        div:last-child {
            display: inline-block;

            p {
                font-size: 0.875rem;
                color: #8698AE;
            }
        }
    }
}

/* プレイヤー_活動予定_戦績 */
.archiveDl {
    font-size: 1.25rem;
    line-height: 1.5;
    
    div {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        margin-left: 8%;
        padding: 1.5rem 0;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        border-bottom: solid 0.125rem #8698AE;
    }
    div:last-child {
        border-bottom: none;
    }

    div > dt {
        position: relative;
        font-weight: 400;
        width: 15%;
        color: #8698AE;

        span {
            position: absolute;
            left: -50%;
            top: 50%;
            translate: 0 -50%;
            color: #E76457;
        }
    }

    div > dd {
        width: 85%;
    }
}

.customLink {
    display: block;
    /* margin-left: 1rem; */
    color: #8698AE;
    text-decoration: underline;
}

@media screen and (max-width: 1024px) {
    .playerFlex {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        text-align: center;
    
        hgroup {
            font-size: 1.25rem;
            font-weight: 600;
            margin-top: 0.5rem;
    
            h2 {
            font-size: 2.5rem;
            }
    
            h2 > span {
                display: inline-block;
                font-size: 1rem;
                width: 100%;
                margin-left: 0;
            }
        }
    }
}