@charset "UTF-8";

/* 2023 */
@import url("/goto_game/2023/css/goto_game_add2023.css");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=keyboard_arrow_down");

/* #local_nav */

#local_nav {

    & ul {
        width: 100%;
    }

    & ul li {}

    & ul li a {}
}

/* snav_game */
#snav_game {
    position: static;
    margin-inline: auto;
}

#season_selector {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* body.j_league1_100y { */
#snav_game {
    width: 100%;
    /* max-width: 1280px; */
    margin-inline: auto;
    background-color: #DBF4FF;

    /* season_selector 内の ul を触らないため、直下 ul のみに限定 */
    &>ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0 2em;
        height: auto;
        padding-left: 7em;
    }

    &>ul>li {}

    &>ul>li>a {
        display: block;
        font-size: 1.6rem;
        font-weight: 600;
        color: #020202;
        padding: 0.8em 1em 1.2em;
        height: auto;
    }

    &>ul>li>a:hover {
        color: #25B9FE;
        transition: all 0.15s ease-in;
        /* opacity: 0.8; */
    }

    /* 直下 ul 側の a::after は消す（is_current の下線は後で別定義） */
    &>ul>li>a::after {
        display: none;
    }

    /* current */
    &>ul>li>a.is_current {
        position: relative;
        display: inline-block;
    }

    &>ul>li>a.is_current::after {
        display: block;
        content: "";
        position: absolute;
        left: 0.4em;
        bottom: 0;
        top: auto;
        width: calc(100% - 1em);
        height: 6px;
        background: #020202;
        transform: skewX(-20deg);
        transform-origin: left bottom;
    }

    & #btn_select_season>a {
        display: flex;
        justify-content: center;
        align-items: center;
        padding-right: 22px;
    }

    /* #btn_select_season は除外しない（矢印はここで指定） */
    &>ul>li#btn_select_season>a:before {
        width: 24px;
        height: 24px;
        background-image: url("/assets_global/img/keyboard_arrow_down.svg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        border: none;
        transform: rotate(0deg);
        right: 0;
        /* border-top: 2px solid #25B9FE;
        border-left: 2px solid #25B9FE;
        width: 0.6em;
        height: 0.6em;
        right: 0; */
    }

    /* 過去の記録一時非公開 */
    #btn_select_season a {
        pointer-events: none;
        text-decoration: none;
        cursor: default;
        opacity: 0.6;
    }
}

/* 開催一覧に戻る非表示 */
#btn_back_game_index {
    display: none;
}

/* } */

/*  */

main {
    border-top: #CCCCCC solid 1px;
}

/*  */

div.box_game_date p.date br {
    display: none;
}

/*  */

#btn_back_game_index {
    padding: 1.4em 0;
    text-align: center;

    & svg {
        margin-right: -4px;
        margin-top: 0;
        transition: 0.3s;
        position: relative;
        top: 1px;
    }

    & a {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        color: #020202;
        font-size: 1.6rem;
        line-height: 1;
    }

    & a:hover {
        transition: all 0.1s ease-in;
        opacity: 0.8;
        color: #25B9FE;

        & svg {
            transform: translate(-4px, 0);
        }
    }

}

/*  */

@media screen and (max-width: 768px) {

    main {
        padding-top: 4vw;
    }


    #box_page_main_ttl {
        & h1 {
            font-size: 5vw;
            /* 16px */
        }

        & span[lang='en'] {
            font-size: 3.125vw;
            /* 10px */
        }
    }

    #local_nav {
        & ul {
            width: 100%;
        }
    }

    #snav_game {
        margin-top: 0;

        &>ul {
            width: 88vw;
            margin-inline: auto;
            padding: 2vw 0 4vw 0;
            gap: 0;
        }

        &>ul>li {
            width: calc(100% / 3);
            text-align: center;
        }

        &>ul>li>a {
            padding: 0.2em 0.6em;
            line-height: 1.2;
        }
    }

    #season_selector {

        & p.btn_close a {
            display: inline-flex;
            align-items: center;
        }

    }
}




























/*  */