@charset "UTF-8";

/* 共通部分
-------------------------------------------------*/
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;
}

@-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;

    &:hover {
        color: #3B4043;
    }
}

.flex {
    display: flex;

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

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

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

h3 {
    width: fit-content;
    color: #000;
    font-size: min(2.96vw, 3.8rem);

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

    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: min(2.19vw, 2.8rem);
    color: #000;
    margin-bottom: 20px;

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

.a_button {
    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;

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

section {
    margin-bottom: 80px;
}

.pc {

    display: block;

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

.sp {
    display: none;

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

main {
    padding-top: 160px;
}

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

  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;

            li {
                margin-left: 25px;

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

    /* ハンバーガーメニュー(メニュー)
    -------------------------------------------------*/
    .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;
            }
        }
    }
}

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

    img {
        width: 100%;
    }
}

/* 重要なお知らせ
-------------------------------------------------*/
.sec_inpotant {
    width: 100%;
    padding: 15px;
    background-color: #fff;

    .wrapper_1040 {
        background-color: #fff;
        border: 2px solid #004ca0;
        padding: 30px;

        h3 {
            display: block;
            text-align: center;
            color: #004ca0;
            width: 100%;

            &::before,
            &::after {
                content: none;
            }
        }

        ul {
            width: 100%;

            li {
                width: 100%;

                time {
                    margin-right: 30px;
                }

                .infotitle {
                    color: #000;
                    font-weight: 500;
                    font-size: min(2.18vw, 2.8rem);
                    margin-bottom: 10px;

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

            }
        }
    }
}

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

#facilityinfo {
    padding-top: 150px;
    margin-top: -150px;

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

        @media (max-width: 1039px) {
            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;
            }

        }
    }

    .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;

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

            }

        }


        .flex_right {
            height: 349px;
            position: relative;
            padding-top: min(5.46vw, 70px);
            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 {
                position: absolute;
                right: 0;
                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;
            }
        }

        @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_white {
    position: relative;
    margin-bottom: 60px;
    margin-top: -160px;
    padding-top: 160px;
}

#access {

    padding-top: 150px;
    margin-top: -150px;

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

    .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;
        }
    }


    .flex {
        justify-content: center;
        margin-bottom: clamp(40px, 5.07vw, 65px);

        .div_h4 {
            width: min(38.28vw, 490px);
            margin-bottom: 40px;

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

            &:nth-of-type(2) {
                margin-left: min(4.68vw, 60px);

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

            h4 {
                width: fit-content;
                margin: 0 auto 15px;

                @media (max-width: 667px) {
                    margin: 0 0 15px;
                    width: 58.93vw;
                }
            }

        }


    }

    .a_button {
        display: block;
        width: clamp(200px, 26.56vw, 340px);
        height: clamp(40px, 6.25vw, 80px);
        line-height: clamp(40px, 6.25vw, 80px);
        text-align: center;
        margin: 0 auto;
        font-size: min(2.65vw, 3.4rem);
        padding: 0;

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

/* フッター
-------------------------------------------------*/
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;
        text-align: center;
        background-color: #004CA0;
        color: #fff;
        width: 100%;

        h3 {
            color: #fff;
            padding: 15px 25px;
            border: 1px solid #fff;
            margin: 0 auto 40px;
            font-size: clamp(1.9rem, 2.96vw, 3.8rem);

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

            &::before,
            &::after {
                content: none;
            }
        }

        p {
            font-weight: 400;
            margin-bottom: 60px;

            span {
                display: block;
            }

            .p_tel {
                font-weight: 900;
                font-size: 3.4rem;
                margin-bottom: 40px;
            }

            .p_contactday {
                font-weight: 600;
                text-indent: -8em;
                padding-left: 8em;
                margin: 10px auto;
            }
        }

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


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

  usage.html 利用案内ページ

-------------------------------------------------*/
.div_h5 {
    margin-bottom: 40px;

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

        li {
            padding-left: 20px;
        }
    }
}

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;
    padding-top: 100px;
    margin-top: -100px;

    .div_h4 {
        padding-top: 120px;
        margin-top: -120px;
    }
}

#fee_budojo,
#fee_kyudojo,
#fee_sumojo,
#fee-gymnasium,
#fee-equipment,
#parking {
    padding-top: 120px;
    margin-top: -120px;
}

.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;
    }
}