/*  */

:root {
    /*color*/
    --main_bk: #111;
    --main_blue: #23b7fe;
    --main_red: #FF0000;
    /*色相-彩度(％)-輝度(％-50%中間)*/
    --ex_pale_blue: hsl(202, 65%, 96%);
    --ex_pale_home_blue: hsl(200, 60%, 89%);
    --ex_pale_away_red: hsl(200, 60%, 89%);
    --pale_gray: hsl(0, 0%, 94%);
    --ex_pale_gray: hsl(0, 0%, 96%);
    --ex_pale_gray2: hsl(0, 0%, 98%);

    /*font*/
    --ffDIN_light_cond: "DINNextLTPro-LightCondensed", "Roboto", sans-serif;
    --ffDIN_light: "DINNextLTPro-Light", "Roboto", sans-serif;
    --ffDIN_reg: "DINNextLTPro-Regular", "Roboto", sans-serif;
    --ffDIN_med: "DINNextLTPro-Medium", "Roboto", sans-serif;
    --ffDIN_cond_med: "DINNextLTPro-MediumCond", "Roboto Condensed", sans-serif;
    --ffDIN_cond_reg: "DINNextLTPro-Condensed", "Roboto Condensed", sans-serif;
    --ffNoto_jp: YakuHanJP, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 游ゴシック, YuGothic, メイリオ, Meiryo, "Helvetica Neue", Helvetica, Arial, sans-serif;
    ;
}

[lang='en'] {
    font-family: var(--ffDIN_med);
    font-weight: normal;
}

/* local_nav */

#local_nav {
    margin-top: 20px;
    border-bottom: #DBF4FF solid 5px;

    & ul {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0;
    }

    & ul a {
        display: block;
        font-size: 2.0rem;
        color: var(--main_bk);
        padding: 0.5em 1.7em;
        position: relative;
        text-align: center;
    }

    & ul a::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: -5px;
        width: 100%;
        height: 5px;
        background-color: #25B9FE;

        transform: scaleX(0);
        transform-origin: left;
        opacity: 0;
        transition: transform .25s ease, opacity .25s ease;
    }

    & ul a[aria-current="page"]::after {
        transform: scaleX(1);
        opacity: 1;
    }

    & ul a:hover::after {
        transform: scaleX(1);
        opacity: 1;
    }

    & ul:has(a:hover) a[aria-current="page"]:not(:hover)::after {
        transform: scaleX(0);
        opacity: 0;
    }
}

/* month_nav */

div.month_nav {
    margin-top: 48px;
    max-width: 1280px;
    margin-inline: auto;
    padding-bottom: 30px;
    border-bottom: #AAAAAA solid 1px;

    & div.month_nav_inner {
        display: flex;
        justify-content: center;
        align-items: center;

        & .month_nav_label {
            font-size: 2.0rem;
            color: var(--main_bk);
        }

        & a[class*="month_nav_"] {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
        }

        & a.month_nav_prev::before {
            content: '';
            display: block;
            width: 24px;
            height: 36px;
            background-image: url('/schedule/assets/img/arrow_blue.svg');
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: auto 100%;
            margin-right: 10px;
            transition: transform 0.4s ease;
        }

        & a.month_nav_prev:hover::before {
            transform: translateX(-3px);
        }

        & a.month_nav_next::after {
            content: '';
            display: block;
            width: 24px;
            height: 36px;
            background-image: url('/schedule/assets/img/arrow_blue.svg');
            background-position: 0 0;
            background-repeat: no-repeat;
            background-size: auto 100%;
            transform: rotate(180deg);
            margin-left: 10px;
            transition: transform 0.4s ease;
        }

        & a.month_nav_next:hover::after {
            transform: rotate(180deg) translateX(-3px);
        }

        & div.month_nav_current {
            margin-inline: 48px;

            & span {
                font-family: var(--ffDIN_light_cond);
                font-weight: 100;
                font-size: 8.0rem;
                line-height: 1;
            }

            & .month_nav_month {
                color: var(--main_blue);
            }

        }

    }

    & ul.month_nav_list {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 22px;
        margin-left: 1.8em;

        & li a {
            display: block;
            font-size: 1.6rem;
            padding: 0.4em 0.8em;
            color: var(--main_bk);
        }

        & li.latest a:hover,
        & li:not(.is_current) a:hover {
            color: var(--main_blue);
        }

        & li.latest a {
            color: #999;
            position: relative;
            padding-left: 1.2em;
            margin-left: 0.6em;
        }

        & li.latest a::before {
            content: '';
            display: block;
            width: 1px;
            height: 88%;
            background-color: #999;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            left: 0;
        }

        & .is_current a {
            background-color: var(--main_blue);
            color: #fff;
            border-radius: 4px;
        }

    }

}


/*  */

/* sp */

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

    /* local_nav */
    #local_nav {
        margin-top: 8vw;

        & ul a {
            font-size: 3.75vw;
            /* 12px */
        }

    }

    /* month_nav */

    div.month_nav {
        margin-top: 8vw;
        width: 100vw;
        padding-bottom: 8vw;

        & div.month_nav_inner {

            padding: 0 2vw;

            & a[class*="month_nav_"] {
                margin-bottom: 0;
            }

            & .month_nav_label {
                font-size: 3.75vw;
                /* 12px */
            }

            & a.month_nav_prev::before {
                width: 6vw;
                height: calc(6vw * 1.5);
                margin-right: 2vw;
            }

            & a.month_nav_next::after {
                width: 6vw;
                height: calc(6vw * 1.5);
                margin-left: 2vw;
            }

            & div.month_nav_current {
                margin-inline: auto;

                & span {
                    font-size: 16vw;
                }

            }

        }

        /*  */

        & ul.month_nav_list {
            /* gap: 2vw; */
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            margin-top: 4vw;
            margin-left: 0;
            padding-bottom: 4vw;
        }

        & ul.month_nav_list li {
            flex: 0 0 auto;
        }

        & ul.month_nav_list li a {
            font-size: 4.375vw;
            /* 14px */
            padding: 0.4em 0.8em;
        }

    }
}