@charset "utf-8";

/*
Theme Name: f-budokan_2026
Author: Tsutomu Yamasaki / Risa Kumamoto
Author URI: https://fukuokabudokan.jp/
Description: 福岡武道館
*/


/* 共通部分
-------------------------------------------------*/
html {
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-weight: 300;
    font-size: 62.5%;
    scroll-behavior: smooth;
    /*ページ内リンクをなめらかにスクロール*/
    animation: fadein 1.5s forwards;
    scroll-padding: 160px;
}

@-webkit-keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes fadein {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}


body {
    color: #3B4043;
    font-size: clamp(1.4rem, 1.71vw, 2.2rem);
    background-color: #fff;
    line-height: clamp(2.1rem, 2.57vw, 3.3rem);
}

img {
    -o-object-fit: cover;
    object-fit: cover;
}

a {
    /* color: #C9A333; */
    color: #3B4043;

    &:hover {
        /* color: #3B4043; */
        color: #C9A333;
    }
}

.flex {
    display: flex;

    @media (max-width: 667px) {
        flex-direction: column;

        .flex_left,
        .flex_right {
            width: 100%;
        }
    }
}

/* .adj {
    background-color: transparent;
} */

.wrapper_1040 {
    width: 1040px;
    margin: 0 auto;

    @media (max-width: 1039px) {
        width: 100%;
        padding: 0 15px;
        margin: 0;
    }
}

h2 {
    width: fit-content;
    color: #000;
    font-size: clamp(2.4rem, 2.96vw, 3.8rem);

    font-weight: 900;
    margin-bottom: 65px;
    padding-right: 15px;
    position: relative;

    &::before {
        content: '';
        padding-left: 15px;
    }

    &::after {
        content: '';
        width: 100%;
        height: 2px;
        display: block;
        background-color: #000;
        position: absolute;
        bottom: -13px;
    }
}

h4 {
    width: 475px;
    padding: clamp(8px, 1.17vw, 15px) clamp(15px, 2.1vw, 27px);
    background-color: #fff;
    border: 2px solid #004ca0;
    color: #004ca0;
    font-size: min(2.65vw, 3.4rem);
    font-weight: 900;

    span {
        margin-left: clamp(20px, 2.73vw, 35px);
        font-weight: 500;
        font-size: clamp(1.2rem, 1.875vw, 2.4rem);
    }

    @media (max-width: 667px) {
        font-size: 1.8rem;
        width: 67.46vw;
    }
}

h5 {
    font-weight: 900;
    font-size: clamp(2rem, 2.19vw, 2.8rem);
    color: #000;
    margin-bottom: 20px;

    @media (max-width: 667px) {
        width: 67.46vw;
    }
}

.a_button,
.nextpostslink,
.previouspostslink {
    padding: clamp(5px, 0.78vw, 10px) clamp(25px, 3.125vw, 40px);
    background-color: #004CA0;
    color: #fff;
    font-size: clamp(1.4rem, 1.56vw, 2rem);
    font-weight: 500;
    width: fit-content;
    height: fit-content;

    &:hover {
        background-color: #C9A333;
        color: #fff;
    }
}

/* section {
    margin-bottom: 120px;
} */

.pc {

    display: block;

    @media (max-width: 667px) {
        display: none;
    }
}

.sp {
    display: none;

    @media (max-width: 667px) {
        display: block;
    }
}

h3 {
    width: 100%;
    height: 85px;
    padding: 0 calc((100vw/2) - 520px);
    background-color: #B0CEEF;
    font-weight: 900;
    font-size: 34px;
    line-height: 85px;
    color: #004ca0;
    font-size: clamp(2.4rem, 2.656vw, 3.4rem);

    @media (max-width: 667px) {
        padding: 0 15px;
    }

    span {
        margin-left: clamp(10px, 2.343vw, 30px);
        font-size: clamp(1.6rem, 1.875vw, 2.4rem);
    }
}

/*-------------------------------------------------

  index.html トップページ

-------------------------------------------------*/

/* ヘッダー
-------------------------------------------------*/
header {
    position: fixed;
    background-color: #004CA0;
    width: 100%;
    height: 100px;
    z-index: 999;

    .wrapper_1040 {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100px;

        @media (min-width: 1100px) {
            width: 1040px;
        }

        @media (max-width: 1099px) {
            width: 94.54vw;
            margin: 0 auto;
        }


        img {
            width: min(15.62vw, 200px);

            @media (max-width: 667px) {
                width: 200px;
            }

        }

        a {
            color: #fff;
            font-weight: bold;
            font-size: min(1.25vw, 1.6rem);

            @media(max-width:667px) {
                font-size: 2.2rem;
            }

            &:hover {
                color: #C9A333;
            }
        }

        ul {
            display: flex;
            align-items: center;

            li {
                margin-left: 25px;

                @media(max-width:667px) {
                    margin-left: 0;
                }
            }

            .snslinkarea {
                margin-top: -10px;

                @media(max-width:667px) {
                    margin-top: 0;
                }

                a {
                    display: inline-block;
                    margin-left: 5px;

                    @media(max-width:667px) {
                        padding-left: 5px;
                    }

                    path {
                        width: clamp(10px, 1.562vw, 20px);
                        height: clamp(10px, 1.562vw, 20px);
                    }

                    &:hover {
                        #icon_mail {
                            path {
                                stroke: #C9A333;
                            }
                        }

                        #icon_fb_1,
                        #icon_Instagram_1,
                        #icon_X_1 {
                            fill: #C9A333;
                        }
                    }
                }
            }
        }
    }

    /* ハンバーガーメニュー(メニュー)
    -------------------------------------------------*/
    .hamburger_menu {
        img {
            width: 60px;
        }
    }

    .hamburger_nav {
        width: 100%;
        height: 100%;
        text-align: center;
        position: fixed;
        top: 0;
        left: 100%;
        /*値を変更してメニューを画面外へ*/
        background-color: #004CA0;
        transition: all 0.3s;
        z-index: 999;

        .hamburger_close {
            display: block;
            text-align: end;
            margin: 20px;
        }

        ul {
            display: block;
            width: 100%;
            text-align: center;

            li {
                margin-bottom: 25px;
            }
        }
    }

    #hamburger_icon_check:checked~.hamburger_nav {
        left: 0%;
    }
}

/* トップスライダ―
-------------------------------------------------*/
.topslider {
    padding-top: 100px;
    margin-bottom: 100px;
    position: relative;
    width: 100%;

    @media (max-width: 1039px) {
        margin-bottom: 45px;
    }

    .top_swiper {
        width: 100%;

        .swiper-slide {
            width: 100%;
            aspect-ratio: 1100/664;

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

    .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: -30px;
    }

    .swiper-pagination-bullet {
        background-color: #484747;
    }

    .top_copy {
        position: absolute;
        top: 130px;
        padding-left: max(((100vw - 1100px) / 2) + 30px, 18px);
        z-index: 998;

        @media (max-width: 667px) {
            top: 115px;
        }

        p {
            display: inline-block;
            padding: 0 25px;
            margin-bottom: 15px;
            height: min(7.03%, 90px);
            line-height: 1.69;
            background-color: #004CA0;
            color: #fff;
            font-size: min(4.14vw, 5.3rem);
            font-weight: 900;

            @media (max-width: 667px) {
                font-size: 2.2rem;
                padding: 0 12px;
                height: 38px;
                line-height: 38px;
                margin-bottom: 5px;
            }
        }
    }
}

/* 本日の予定
-------------------------------------------------*/
.dayevent {
    .flex {
        border: 1px solid #004ca0;
        background-color: #fff;
        min-height: 100px;
        margin-bottom: 80px;

        @media (max-width: 667px) {
            height: auto;
        }

        .flex_left {
            background-color: #004CA0;
            color: #fff;
            font-weight: bold;
            align-items: center;
            /* padding: 15px clamp(40px, 4.6875vw, 60px) 15px 0; */
            /* padding: 15px max(5.23vw, 67px) 15px 0; */
            padding: 15px min(2.34vw, 30px) 15px 0;
            margin-bottom: 0;
            /* width: max(37.3%, 366px); */
            /* width: max(57.3%, 366px); */

            @media (max-width: 667px) {
                width: auto;
            }


            .h_dayevent {
                padding: 0 25px;
                font-weight: 900;
                /* font-size: clamp(2.2rem, 1.875vw, 2.4rem); */
                font-size: min(1.875vw, 2.4rem);

                @media (max-width: 667px) {
                    font-size: 2.2rem;
                }

            }

            .today_date {
                font-size: 2rem;

                .p_year {
                    font-size: 1.6rem;

                    @media (max-width: 667px) {
                        margin-bottom: 5px;
                    }
                }

                .today_number {
                    font-size: clamp(3.2rem, 2.8125vw, 3.6rem);
                }

                .today_yobi {
                    font-size: 2.4rem;
                }
            }

            @media (max-width: 667px) {
                flex-direction: row;
                align-items: center;
                padding: 0;
                /* padding:0 追記 */
            }
        }

        .flex_right {
            /* line-height: 100px; */
            padding: 0 clamp(25px, 2.734vw, 35px);
            line-height: 1.5;
            /* height: auto; */
            margin: auto 0;
            max-width: 675px;

            p {
                text-indent: -2.2rem;
            }

            @media (max-width: 667px) {
                line-height: 3.3rem;
                font-size: 2.2rem;
                padding: 15px 25px;
            }
        }
    }
}


/* トップバナー
-------------------------------------------------*/
.top_banner {
    width: 100%;
    margin-bottom: 120px;

    img {
        width: 100%;
    }
}

/* 開催大会・イベントのご案内
-------------------------------------------------*/
.top_event {
    position: relative;

    .buttonlinkarea {
        font-size: clamp(1.4rem 1.25vw, 1.6rem);
        position: absolute;
        right: 0;
        top: 5px;
        z-index: 998;

        @media (max-width: 667px) {
            position: static;
            margin-top: 60px;
            text-align: center;
        }
    }

    .grid_top_event {
        display: grid;
        grid-template-columns: repeat(3, calc(87.5% / 3));
        gap: 6.25%;

        @media (max-width: 667px) {
            grid-template-columns: repeat(2, calc(87.5% / 2));
            gap: 6.25%;
        }

        a {
            display: block;
            color: #3B4043;
            font-weight: bold;
            font-size: clamp(1.4rem, 1.875vw, 2.4rem);

            .event_card_img {
                width: 100%;
                margin-bottom: 8px;
                overflow: hidden;

                img {
                    width: 100%;
                    height: auto;
                    transition: transform .3s ease;
                }
            }

            &:hover {
                color: #C9A333;

                .event_card_img {

                    img {
                        transform: scale(1.1);
                    }
                }
            }
        }
    }

}

time {
    font-weight: 500;
    font-size: clamp(1.2rem, 1.64vw, 2.1rem);
}

/* おすすめ講座
-------------------------------------------------*/

.sec_blue_lesson {
    background-color: #F5F6FA;
    width: 100%;
    padding: 60px max((100vw - 1050px) / 2, 15px);
    margin-bottom: 60px;
}

.top_course {
    .flex {
        .flex_left {
            width: min(23.437vw, 300px);
            margin-right: min(4.296vw, 55px);

            @media (max-width: 667px) {
                width: 100%;
                margin-right: 0;
                margin-bottom: 20px;
            }

            img {
                width: min(23.437vw, 300px);

                @media (max-width: 667px) {
                    width: 100%;
                }
            }
        }

        .flex_right {
            position: relative;
            width: min(53.515vw, 685px);

            @media (max-width: 667px) {
                width: 100%;
            }

            p {
                font-size: clamp(1.6rem, 1.875vw, 2.4rem);
                line-height: clamp(2.1rem, 2.812vw, 3.6rem);
            }

            .buttonlinkarea {
                position: absolute;
                right: 0;
                bottom: 0;

                @media (max-width: 667px) {
                    position: static;
                    margin-top: 20px;
                    text-align: right;
                }
            }
        }
    }
}

/* 武道館からのお知らせ
-------------------------------------------------*/
.top_news {
    .flex {
        justify-content: space-between;

        .flex_left {
            width: min(39.0625vw, 500px);
            margin-bottom: 40px;

            @media (max-width: 667px) {
                width: 100%;
            }

            ul {
                margin-bottom: 50px;

                li {
                    margin-bottom: 18px;

                    a {
                        color: #3B4043;
                        font-size: clamp(1.6rem, 2.03125vw, 2.6rem);
                        line-height: clamp(2.4rem, 3.046vw, 3.9rem);
                        font-weight: bold;

                        time {
                            display: block;
                        }

                        &:hover {
                            color: #C9A333;
                        }
                    }
                }
            }
        }

        .flex_right {
            width: min(35.156vw, 450px);

            @media (max-width: 667px) {
                width: 100%;
            }

            img {
                width: min(35.156vw, 450px);

                @media (max-width: 667px) {
                    width: 100%;
                }
            }
        }
    }
}


/*-------------------------------------------------

  facility.html 施設案内

-------------------------------------------------*/
.sec_blue {
    background-color: #F5F6FA;
    width: 100%;
    padding: 60px max((100vw - 1050px) / 2, 15px) 120px;
    z-index: -1;
}

#facilityinfo {
    background-color: #fff;
    width: 100%;
    height: fit-content;
    padding: 75px max((100vw - 1050px) / 2, 15px) 0;
    z-index: -1;

    .facilityinfo_card {
        position: relative;
        margin-bottom: 108px;

        @media (max-width: 667px) {
            margin-bottom: 65px;
        }

        h4 {
            position: absolute;
            right: 0;
            margin-top: -20px;
            margin-bottom: 15px;
            z-index: 998;
            width: min(45.67vw, 475px);

            @media(max-width:667px) {
                width: 67.46vw;
            }

        }

        ul {
            li {
                text-indent: -1.2em;
                padding-left: 1.2em;

                &::before {
                    content: "◆";
                }
            }
        }
    }

    .img_right {

        h4 {
            left: 0;

        }
    }

    .flex {
        justify-content: space-between;

        .flex_left {
            width: 586px;
            aspect-ratio: 586/349;

            @media(max-width:1100px) {
                width: min(53.27vw, 586px);
            }

            @media (max-width: 667px) {
                width: 80%;
            }

            img {
                width: 100%;
                aspect-ratio: 586 / 349;

            }

            .facility_swiper {
                margin-bottom: 20px;

                .swiper-wrapper {
                    position: relative;

                    .facility_swiper_alt {
                        position: absolute;
                        right: clamp(10px, 1.5625vw, 20px);
                        bottom: clamp(10px, 1.5625vw, 20px);
                        background-color: #fff;
                        /* width: clamp(90px, 10.546vw, 135px); */
                        padding-left: 1.5em;
                        padding-right: 1.5em;
                        height: clamp(25px, 2.5vw, 32px);
                        line-height: clamp(2.5rem, 2.5vw, 3.2rem);
                        font-weight: 500;
                        text-align: center;
                    }
                }

                .swiper-button-prev::after,
                .swiper-button-next::after {
                    color: #fff;
                }
            }


        }


        .flex_right {
            position: relative;
            padding: min(5.46vw, 70px) 0;
            width: 435px;

            @media (max-width: 1100px) {
                width: 39.54vw;
            }

            @media (max-width: 667px) {
                padding-top: 15px;
                width: 100%;
                height: auto;

                p {
                    width: 80%;
                    margin-bottom: 15px;
                }
            }

            .buttonlinkarea {
                display: flex;
                flex-direction: column;
                align-items: end;
                margin-top: min(3.12vw, 40px);

                @media (max-width: 1039px) {
                    position: static;
                    display: flex;
                    flex-direction: column;
                    align-items: end;
                }
            }

            .rev {
                left: 0;
            }
        }

        .a_button {
            display: block;
            margin-bottom: 10px;
        }
    }

    .img_right {

        .flex {
            flex-direction: row-reverse;

            @media (max-width: 667px) {
                flex-direction: column;
                align-items: end;
            }

            .buttonlinkarea {
                align-items: baseline;

                @media (max-width: 1039px) {
                    align-items: baseline;
                }
            }
        }

        @media (max-width: 1039px) {
            .flex_right {
                display: flex;
                flex-direction: column;

                .buttonlinkarea {
                    width: 100%;
                    align-items: baseline;
                }
            }
        }
    }

    .div_h4 {
        margin: 0;

        h4 {
            margin-bottom: 15px;
            width: min(45.67vw, 475px);

            @media(max-width:667px) {
                width: 67.46vw;
            }
        }

        p {
            margin-bottom: 30px;
        }

        .buttonlinkarea {
            display: flex;
            flex-direction: column;

            a {
                margin-bottom: 10px;
            }
        }
    }
}

.sec_floormap {

    img {
        width: 100%;
    }

    .mapiconarea {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: 20px;
        gap: clamp(10px, 1.5625vw, 20px);
        font-weight: 500;
        font-size: clamp(1.2rem, 1.406vw, 1.8rem);

        img {
            width: clamp(25px, 2.8125vw, 36px);
        }
    }

}


/* アクセス
-------------------------------------------------*/
.sec_white {
    position: relative;
    margin-bottom: 120px;
}

#access {
    margin-bottom: 60px;

    iframe {
        width: 100%;
        height: 350px;
        margin-bottom: clamp(20px, 3.125vw, 40px);
    }

    .buttonlinkarea {
        position: absolute;
        right: calc((100vw/2) - 520px);
        top: 5px;

        .a_button {
            font-size: clamp(1.6rem, 1.875vw, 2.4rem);
        }

        @media(max-width:1039px) {
            right: 15px;
        }

        @media(max-width:667px) {
            position: static;
            margin-top: 40px;
            text-align: center;
        }
    }

    .accessinfo {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;

        .adress {
            font-weight: 500;
            font-size: clamp(2rem, 2.656vw, 3.4rem);
            color: #000;
            margin-bottom: 15px;
            text-align: center;
            line-height: clamp(3rem, 3.75vw, 4.8rem);

            span {
                display: inline-block;
            }
        }

        p {
            font-weight: 500;
            font-size: clamp(1.4rem, 1.875vw, 2.4rem);
            line-height: clamp(2.1rem, 2.812vw, 3.6rem);
            color: #000;
            padding: 0 15px;
        }
    }
}

.sec_access {
    margin-bottom: 0;

    .wrapper_1040 {
        margin-bottom: 60px;
    }
}

/* フッター
-------------------------------------------------*/
footer {
    .footer_top {
        display: grid;
        grid-template-columns: repeat(4, min(17.96vw, 230px));
        column-gap: min(3.125vw, 40px);
        row-gap: min(2.34vw, 30px);
        justify-content: center;

        a {
            display: block;

            img {
                aspect-ratio: 230/65;
                width: min(17.96vw, 230px);

                @media(max-width:667px) {
                    width: 41.07vw;
                }
            }

        }

        @media (max-width: 667px) {
            grid-template-columns: repeat(2, 41.07vw);
            column-gap: 25px;
            row-gap: 18px;
        }
    }

    .footer_under {
        padding: 40px 0 50px;
        text-align: center;
        background-color: #004CA0;
        color: #fff;
        width: 100%;

        .fotter_logo {
            display: inline-block;
            margin-bottom: 30px;
        }

        p {
            font-weight: 400;
        }

        a {
            color: #ffffff;
        }
    }

    .footer_copy {
        background-color: #023369;
        padding: 30px 0 50px;
        text-align: center;

        nav {
            ul {
                display: flex;
                justify-content: center;
                gap: clamp(10px, 2.1875vw, 28px);
                margin-bottom: 50px;

                @media (max-width: 667px) {
                    flex-direction: column;
                }

                a {
                    color: #fff;
                    font-weight: bold;
                    font-size: clamp(1.4rem, 1.25vw, 1.6rem);

                    &:hover {
                        color: #C9A333;
                    }
                }
            }

            @media (max-width: 667px) {
                display: none;
            }
        }

        small {
            color: #fff;
            font-size: clamp(1.2rem, 1.25vw, 1.6rem);
            font-weight: normal;
        }
    }

    .footer_img {
        img {
            width: 100%;
            height: min(34.375vw, 440px);
            object-fit: cover;
        }
    }
}

/* トップへ戻る
-------------------------------------------------*/

.topbutton_fixed {
    visibility: hidden;
    transition: 0.3s;
    opacity: 0;
}

.totop {
    position: fixed;
    right: 30px;
    bottom: 20px;
    z-index: 999;
    /* visibility: hidden; */
    /* opacity: 0; */
}

/*このクラスが付与されると表示する*/
.active {
    opacity: 1;
    visibility: visible;
    transition: 0.3s;
}

/*-------------------------------------------------

  usage.html 利用案内ページ

-------------------------------------------------*/
.h2_header {
    width: 100%;
    background-color: #F5F6FA;
    padding: 120px 0 75px;

    h2 {
        margin-bottom: 0;
    }

    .bread_list {
        /* display: flex; */
        display: inline-block;
        color: #000;
        font-size: clamp(1.4rem, 1.25vw, 1.6rem);
        margin-bottom: 60px;

        li {
            float: left;

            a {
                color: #000;
            }

            &::after {
                content: ">";
                margin: 0 15px;
            }

            &:last-child::after {
                content: none;
            }
        }
    }
}

.clear {
    clear: both;
}

.sec_h3 {
    .wrapper_1040 {
        padding-top: 60px;
    }
}

.div_h5 {
    margin-bottom: 40px;

    ol {
        list-style-type: decimal;
        padding-left: 25px;
        margin-bottom: 20px;

        li {
            padding-left: 20px;
        }
    }

    ul {
        li {
            text-indent: -2em;
            padding-left: 2em;

            &::before {
                content: "◆";
                margin-right: 0.7em;
            }
        }
    }
}

ul.fee_caption {
    li {
        padding-left: 30px;
        text-indent: -20px;

        &::before {
            position: relative;
            content: "※";
            top: 0;
            left: -10px;
        }

        ul.ul_disc {
            li {
                &::before {
                    position: relative;
                    content: "・";
                    top: 0;
                    left: 0;
                }
            }
        }
    }
}

/* #fee_gymnasium {
    .div_h5 {
        margin-bottom: 0;
    }
} */

.div_h4 {
    margin-bottom: 80px;

    h4 {
        margin-bottom: 20px;
    }
}

.p_caption {
    font-weight: 500;
    font-size: min(1.875vw, 2.4rem);
    color: #004ca0;
    margin-bottom: 40px;

    @media (max-width: 667px) {
        font-size: 1.6rem;
    }
}

.wrapper_tbl {
    overflow-x: auto;
    margin-bottom: 20px;

    @media(max-width:667px) {
        border: 4px solid #004ca0;
    }

}

.wrapper_tbl_02 {
    overflow-x: auto;
    margin-bottom: 20px;

    table {
        border: 4px solid #004ca0;
    }
}

table {
    border: 4px solid #004ca0;
    font-size: min(1.25vw, 1.6rem);
    line-height: min(1.875vw, 2.4rem);

    @media (max-width: 667px) {
        font-size: 1.2rem;
        line-height: 2.1rem;
        border: none;
        box-sizing: border-box;
    }

    th,
    td {
        background-color: #fff;
        border: 1px solid #004ca0;
        text-align: center;
        vertical-align: middle;
        padding: 15px;

        @media (max-width: 667px) {
            padding: 5px;
            /* box-sizing: border-box; */
            /* box-sizing追記 */
        }
    }

    thead {
        font-weight: 500;
        text-align: center;
        height: 50px;

        th,
        td {
            background: #b0ceef;
        }
    }

    th {
        font-weight: 500;
        position: sticky;
        top: 0;
        left: 0;
    }

    td {
        white-space: nowrap;
        min-width: 80px;
    }

    thead .td_holiday,
    tbody .td_holiday {
        background: #ddd;
    }

    .vertical {
        /* display: inline-block; */

        /* -webkit-writing-mode: vertical-rl;
            -moz-writing-mode: vertical-rl;
            -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl; */

        /* vertical-align: middle; */
        /* text-orientation: upright; */
        /* すべて縦方向に表示 */
        padding: 0 10px;
        /* padding: 0 1rem; */
        width: 35px;

        @media (max-width: 667px) {
            padding: 0;
        }
    }

    span {
        display: inline-block;
        font-weight: bold;

        /* display: inline-block; */
        -webkit-writing-mode: vertical-lr;
        -ms-writing-mode: tb-lr;
        writing-mode: vertical-lr;
        vertical-align: middle;
        text-align: center;
        white-space: nowrap;
        /* padding: 0 10px; */
        /* margin-right: 1.87vw; */

        @media(max-width:667px) {
            /* margin-right: 0; */
        }
    }

    .yoyaku {
        display: block;
        font-weight: bold;
        writing-mode: horizontal-tb;
        -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: horizontal-tb;
    }
}


.tbl_reserve {
    width: 100%;

    th,
    td {
        padding: 15px 10px;
    }
}

@media (max-width: 667px) {

    .tbl_sumo_usagefee,
    .tbl_sumo_extensionfee {

        th,
        td {
            padding: 5px 0;
        }

        thead {

            .th_2 {
                width: 140px;
                top: 0;
                left: 0px;
            }

            .th_3 {
                width: 80px;
                top: 0;
                left: 132px;
            }
        }

        tbody {

            .th_verticla1 {
                width: 35px;
                top: 0;
                left: 0px;
            }

            .th_verticla2 {
                width: 35px;
                top: 0;
                left: 34px;
            }

            .th_2 {
                width: 70px;
                top: 0;
                left: 66px;
            }

            .th_3 {
                width: 80px;
                top: 0;
                left: 132px;
            }
        }
    }

    .tbl_sumo_usagefee {
        width: 700px;
    }

    .tbl_sumo_extensionfee {
        width: 540px;
    }

    .th_sticky,
    .th_sticky_head {
        background: #fff;
        border: none;
        /* box-sizing: content-box; */

        &::before {
            content: "";
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            /* border: 1px solid #004ca0; */
            border-bottom: 1px solid #004ca0;
            border-left: 1px solid #004ca0;
            /* ↑ border変更 */
            background: #fff;
            z-index: -1;
        }
    }

    .th_sticky_head {
        background: #b0ceef;

        &::before {
            background-color: #b0ceef;
        }
    }
}

@media (max-width: 665px) {

    .tbl_usagefee {
        width: 665px;

        th,
        td {
            padding: 5px 0;
        }
    }

    thead {
        .th_2 {
            width: 105px;
            top: 0;
            left: 0px;
        }

        .th_3 {
            width: 80px;
            top: 0;
            left: 100px;
        }
    }

    tbody {
        .th_2 {
            width: 70px;
            top: 0;
            left: 34px;
        }

        .th_3 {
            width: 80px;
            top: 0;
            left: 100px;
        }
    }
}

@media (max-width: 505px) {
    .tbl_extensionfee {
        width: 505px;

        th,
        td {
            padding: 5px 0;
        }
    }
}



#fee {
    margin-bottom: 0;
}

.p_warning {
    font-weight: 300;
    font-size: min(1.25vw, 1.6rem);
    line-height: min(1.875vw, 2.4rem);
    margin-bottom: 20px;

    @media (max-width: 667px) {
        font-size: 1.2rem;
        line-height: 2.1rem;
    }
}

.p_bold {
    font-weight: bold;
}

.hr_img {

    margin-bottom: 80px;

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

/*-------------------------------------------------

  news.html お知らせ

-------------------------------------------------*/
.sec_news {
    padding-top: 60px;

    time {
        display: block;
        width: clamp(60px, 8.9843vw, 115px);
        height: clamp(25px, 2.734vw, 35px);
        line-height: clamp(25px, 2.734vw, 35px);
        background-color: #004CA0;
        font-weight: 300;
        color: #fff;
        text-align: center;
        margin-bottom: 15px;
    }

    .news_header {
        color: #3B4043;
        font-size: clamp(1.8rem, 2.19vw, 2.8rem);
        font-weight: 500;
        margin-bottom: 60px;
    }

    .div_img {
        margin-bottom: 60px;

        @media (max-width: 667px) {
            img {
                width: 100%;
            }
        }
    }

    p {
        font-size: clamp(1.6rem, 1.875vw, 2.4rem);
        line-height: clamp(2.4rem, 2.812vw, 3.6rem);
        margin-bottom: 30px;
    }

}

.a_button.newsbutton {
    display: block;
    margin: 0 auto 60px;
}


/* WP-PageNavi用設定 */

.wp-pagenavi {
    text-align: center;
}

.nextpostslink {
    display: inline-block;
    margin: 0 auto 60px 20px;
}

.previouspostslink {
    display: inline-block;
    margin: 0 auto 60px;
}

/* WP-PageNavi用設定 ここまで */

.sec_newsall {

    ol {

        li {
            margin-bottom: 40px;

            a {
                color: #3B4043;
                font-size: clamp(1.8rem, 2.03125vw, 2.6rem);
                font-weight: 500;

                &:hover {
                    color: #707070;

                    time {
                        background-color: #C9A333;
                    }

                }
            }
        }
    }

}

/*-------------------------------------------------

  event.html イベントカレンダー

-------------------------------------------------*/


.eo-fullcalendar {
    margin-top: 60px;
}

.fc-toolbar .fc-left h2 {
    width: fit-content;
    color: #000;
    font-size: clamp(2.4rem, 2.96vw, 3.8rem);

    font-weight: 900;
    margin-bottom: 65px;
    padding-right: 15px;
    position: relative;

    &::after {
        content: '';
        background-color: transparent;
        /* h2の下線のみ解除 */
    }

}

.fc-time,
.fc-title {
    font-weight: normal !important;
    writing-mode: horizontal-tb;
    display: block;
    white-space: normal;
    text-align: left;
}

.fc-time {
    display: none !important;
}

.fc-content {
    padding: 10px !important;

    @media(max-width:667px) {
        padding: 0 !important;
    }
}

/* } */

/*-------------------------------------------------

  eventpage.html イベント記事

-------------------------------------------------*/
.sec_event {
    margin-top: 60px;

    .event_title {
        font-weight: bold;
        font-size: clamp(1.8rem, 2.19vw, 2.8rem);
        margin-bottom: 60px;
    }

    .flex {
        gap: 40px;

        .flex_left {
            /* max-width: 550px; */
            width: min(42.76% 449px);

            @media (max-width: 667px) {
                width: 100%;

                img {
                    width: 100%;
                }
            }
        }

        .flex_right {
            p {
                font-size: clamp(1.6rem, 1.875vw, 2.4rem);
                line-height: clamp(2.1rem, 2.812vw, 3.6rem);
            }

            .event_header {
                font-weight: 500;
                /* font-size: clamp(1.8rem, 2.19vw, 2.8rem); */
                font-size: clamp(1.8rem, 1.796vw, 2.3rem);
                color: #121440;
                margin-bottom: 25px;

                p {
                    margin-bottom: 15px;
                    /* font-size: clamp(1.8rem, 2.19vw, 2.8rem); */
                    font-size: clamp(1.8rem, 1.796vw, 2.3rem);
                    color: #121440;

                    time {
                        /* font-size: clamp(1.8rem, 2.19vw, 2.8rem); */
                        font-size: clamp(1.8rem, 1.796vw, 2.3rem);
                        color: #121440;
                    }

                    span {
                        color: #fff;
                        /* font-size: clamp(1.6rem, 1.87vw, 2.4rem); */
                        font-size: clamp(1.6rem, 1.796vw, 2.3rem);
                        background: #004ca0;
                        border: 1px solid #707070;
                        padding: 3px 15px;
                        margin-right: 15px;
                    }

                    .adj {
                        display: none;

                        @media(max-width:667px) {
                            background: transparent;
                            border: none;
                            display: inline-block;
                        }
                    }


                }


            }
        }
    }
}

/*-------------------------------------------------

  contact.html お問い合わせページ

-------------------------------------------------*/
.sec_contact {
    padding-top: 60px;
    margin-bottom: 60px;
}

.form_contact {
    .form_item {
        margin-bottom: 40px;

        .label_item {
            display: block;
            color: #004ca0;
            font-weight: 500;
            font-size: clamp(1.6rem, 1.875vw, 2.4rem);
            margin-bottom: 20px;

            .label_require {
                background: #b0ceef;
                font-size: clamp(1.2rem, 1.093vw, 1.4rem);
                padding: 2px 15px;
                margin-left: 15px;
            }
        }

        .single,
        textarea {
            background: #fff;
            border: 1px solid #707070;
            padding: 5px 10px;
        }

        .single {
            width: min(49.218vw, 630px);
            height: clamp(30px, 4.296vw, 55px);

            @media (max-width: 667px) {
                width: 100%;
            }
        }

        textarea {
            resize: none;
            width: 100%;
            height: clamp(100px, 33.203vw, 425px);
        }

        /* ul {
            display: flex;
            @media (max-width: 667px) {
                flex-direction: column;
                gap: 10px;
            }

            li {
                margin-right: 80px;

                input {
                    appearance: auto;
                }
            }
        } */

        .area {
            margin-right: 80px;

            input {
                appearance: auto;
            }
        }
    }

    .a_button {
        display: block;
        margin: 120px auto 0;
    }

}

.grecaptcha-badge {
    /* position: absolute; */
    bottom: 100px !important;
    /* right: 10px !important; */
    /* transform: scale(0.85); */
    /* opacity: 0.6; */
}

/*-------------------------------------------------

  course.html 教室案内

-------------------------------------------------*/

/* 各種教室
-------------------------------------------------*/
.sec_course {
    margin-top: 60px;

    .flex {
        margin-bottom: 40px;
        gap: 20px;

        .flex_left {
            width: 340px;

            @media (max-width: 667px) {
                width: 100%;
            }
        }

        .p_courseintro {
            font-weight: 500;
            font-size: clamp(1.6rem, 1.875vw, 2.4rem);
            line-height: clamp(2.1rem, 2.812vw, 3.6rem);
            margin-bottom: 20px;

            .p_red {
                font-size: clamp(1.4rem, 1.56vw, 2rem);
            }
        }

        .a_button {
            padding: clamp(5px, 0.78vw, 10px) clamp(25px, 2.734vw, 35px);
        }
    }

    .div_h5 {
        .flex {
            justify-content: space-between;
            align-items: end;

            .flex_left {
                width: 660px;

                @media (max-width: 667px) {
                    width: 100%;
                }
            }
        }
    }

    .div_h4 {
        gap: 40px;

        h4 {
            span {
                margin-left: 0;
            }
        }

        .p_course3chara,
        .p_course2chara {
            margin-bottom: 10px;

            span {
                display: inline-block;
                height: clamp(25px, 2.656vw, 34px);
                background: #004ca0;
                font-size: clamp(1.2rem, 1.64vw, 2.1rem);
                line-height: clamp(25px, 2.656vw, 34px);
                color: #fff;
                text-align: center;
                margin-right: clamp(10px, 1.562vw, 20px);
            }
        }

        .p_course3chara {
            span {
                width: clamp(60px, 7.8125vw, 100px);
            }
        }

        .p_course2chara {
            span {
                width: clamp(50px, 6.25vw, 80px);
            }
        }
    }
}

.p_red {
    color: #F46464;
}