@charset "utf-8";

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td,
xmp {
    margin: 0;
    padding: 0
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

fieldset,
img {
    border: 0
}

ol,
ul {
    list-style: none
}

caption,
th {
    text-align: left
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal
}

* {
    box-sizing: border-box;
}

body {
    min-height: 100dvh;
    color: #262626;
    background-color: #f4f5f7;
}

img {
    max-width: 100%;
    vertical-align: bottom;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    font-size: 100%
}

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

a,
button {
    cursor: pointer;
}

/* reset end */

/* root start */

:root {
    /* 文字色 */
    --black-color: #262626;
    --white-color: #f4f5f7;
    --lead-color: #ccc;

    /* 背景色 */
    --body-color: rgb(26, 30, 46);
    --footer-color: rgb(36, 41, 58);
    --logo-color: #f4981e;
    --card-color: #2e3248;

    /* フォントサイズ */
    --font-size-14px: 14px;
    --font-size-16px: 16px;
    --font-size-18px: 18px;
    --font-size-20px: 20px;
    --font-size-24px: 24px;
    --font-size-28px: 28px;
    --font-size-32px: 32px;


    /* 余白サイズ */
    --spacing-8px: 8px;
    --spacing-16px: 16px;
    --spacing-24px: 24px;
    --spacing-32px: 32px;
    --spacing-40px: 40px;
}


/* root end  */


body {
    font-family: 'Noto Sans JP', 'Yu Gothic UI', 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--white-color);
    background-color: var(--body-color);

    header {
        padding: var(--spacing-8px) var(--spacing-16px);
        min-height: 52px;
        background-color: rgba(26, 30, 46, 0.8);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
        display: flex;
        gap: var(--spacing-16px);
        align-items: center;

        @media (width <=1209px) {
            padding: var(--spacing-16px);

        }

        @media (width <=960px) {
            padding: 5px 0 5px 5px;
            min-height: 50px;
        }

        .site-header__branding-link {
            flex-shrink: 0;

            .site-header__branding {
                height: 52px;
                display: flex;
                align-items: center;
                justify-content: center;
                gap: 3px;

                @media (width <=1200px) {
                    gap: 0;
                }

                @media (width <=960px) {
                    height: 40px;
                }

                img {
                    height: 100%;
                }
            }
        }

        .site-header__layout {
            width: 100%;
            display: flex;
            gap: var(--spacing-16px);
            justify-content: space-between;
            align-items: center;

            .site-header__cta-btn {
                flex-shrink: 0;
                display: inline-flex;
                align-items: center;
                gap: 8px;
                padding: 12px 20px;
                border-radius: 9px;
                background-color: #f4981e;
                color: #ffffff;
                font-weight: bold;
                font-size: var(--font-size-16px);
                box-shadow: 0 4px 10px rgba(255, 170, 51, 0.4);
                transition: transform 0.2s ease;

                @media (width <=960px) {
                    padding: 8px;

                }

                &:hover {
                    transform: translateY(-2px);
                }

                .text-span {
                    display: inline;


                    @media (width <=960px) {
                        display: none;
                    }
                }

                .circle-icon {
                    width: 36px;
                    height: 36px;
                    border-radius: 50%;
                    background-color: #fff;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    @media (width <=960px) {
                        width: 24px;
                        height: 24px;
                    }

                    svg {
                        width: 18px;
                        height: 18px;
                        fill: #262626;
                    }
                }
            }



            nav {
                @media (width <=960px) {
                    display: none;
                }

                .site-header__nav-list {
                    font-weight: bold;
                    font-size: var(--font-size-16px);
                    display: flex;
                    flex-wrap: wrap;
                    gap: var(--spacing-32px);

                    @media (width <=1321px) {
                        gap: var(--spacing-16px);

                    }

                    @media (width <=1209px) {
                        row-gap: 4px;
                        column-gap: 32px;
                    }
                }
            }

            .site-header__hamburger {
                display: none;

                @media (width <=960px) {
                    display: inline-block;
                }

                #hamburger {
                    opacity: 0;
                }

                .menu-btn {
                    position: relative;
                    top: 400px;
                    cursor: pointer;

                    .burger {
                        /* バーガーの位置や幅や高さ */
                        position: fixed;
                        top: 9.8px;
                        right: 14px;
                        z-index: 200;
                        width: 32px;
                        height: 2rem;

                        &::before,
                        &::after,
                        .bar {
                            /* バーガーの線（beforeが上、afterが下、barが真ん中の線） */
                            position: absolute;
                            left: 0;
                            width: 32px;
                            height: 4px;
                            border-radius: 6px;
                            background-color: var(--white-color);
                            content: "";
                            transition: all 0.5s;
                        }

                        &::before {
                            top: 0;
                            transform-origin: top left;
                        }

                        &::after {
                            bottom: 0;
                            transform-origin: bottom left;
                        }

                        .bar {
                            top: 43%;
                        }

                    }
                }

                .menu {
                    pointer-events: none;
                    position: fixed;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    display: flex;
                    flex-flow: column nowrap;
                    justify-content: center;
                    align-items: flex-start;

                    &::before {
                        /* munu::beforeに出入りする背景を指定している */
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        z-index: 50;
                        width: 22rem;
                        background: #2e3248;
                        content: "";
                        transform: skewX(-15deg) translateX(100%);
                        transform-origin: bottom right;
                        transition: .3s;
                    }

                    ul {
                        z-index: 100;
                        list-style: none;
                        transform: translateX(100%);
                        transition: all .5s, transform .5s;
                        transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

                        li {
                            a {
                                color: #fff;
                                display: block;
                                text-decoration: none;
                                margin: 2rem 0;
                            }
                        }
                    }
                }

                #hamburger:checked~.menu {
                    pointer-events: auto;
                }


                #hamburger:checked+label .burger::before,
                #hamburger:checked+label .burger::after {
                    /* hamburgerをチェックしたら線が長くなる */
                    width: 2.6rem;
                }

                #hamburger:checked+label .burger::before {
                    transform: rotate(45deg);
                }

                #hamburger:checked+label .burger::after {
                    transform: rotate(-45deg);
                }

                #hamburger:checked+label .burger .bar {
                    /* barが消えるよう指定 */
                    transform: scale(0);
                }

                #hamburger:checked~.menu::before {
                    /* hamburgerがチェックされたら.menu::beforeがどう動くか */
                    transform: skewX(-15deg) translateX(10%);
                }

                @media screen and (min-width:400px) {
                    #hamburger:checked~.menu::before {
                        /* 400px以上でhamburgerがチェックされたら.menu::beforeがどう動くか */
                        transform: skewX(-15deg) translateX(0);
                    }
                }

                #hamburger:checked~.menu ul {
                    /* hamburgerがチェックされたら.menu ulがどう動くか */
                    transform: translateX(0%) translateY(0%);
                }

                @media screen and (min-height:1000px) {

                    #hamburger:checked~.menu ul {
                        /* 縦1000px以上でhamburgerがチェックされたら.menu ulがどう動くか */
                        transform: translateX(0);
                    }
                }

                #hamburger:checked~.light-dark {
                    /* hamburgerがチェックされたらlight-darkがどう動くか */
                    background-color: #000;
                    opacity: .5;
                    width: 100%;
                    height: 100%;
                    position: fixed;
                    top: 0;
                    right: 0;
                    transition: .5s;
                }
            }
        }
    }

    main {
        margin-top: 76px;

        @media (width <=1143px) {
            margin-top: 99px;
        }

        @media (width <=960px) {
            margin-top: 51.59px;
        }



        /* 共通 */
        section .section-title {
            font-size: var(--font-size-28px);
            font-weight: bold;
            text-align: center;
            position: relative;
            color: #fff;
            margin-bottom: var(--spacing-32px);

            &::before {
                content: '';
                position: absolute;
                bottom: -8px;
                left: 0;
                width: 100%;
                height: 4px;
                background: linear-gradient(to right, #f4981e 0%, #ffa733 100%);
                border-radius: 4px;
            }

            @media (width <=600px) {
                font-size: var(--font-size-24px);
            }
        }

        .section-lead {
            margin: 0 auto 32px;
            line-height: 1.7;

            @media (width <=600px) {
                font-size: 15px;
            }
        }

        .news,
        .about,
        .price,
        .trainer,
        .original-menu,
        .review,
        .faq,
        .access,
        .private-room {
            padding: var(--spacing-40px) var(--spacing-16px);
        }
    }

    aside {
        .under-menu {


            li {
                color: var(--black-color);
                font-weight: bold;
                background-color: #ddd;
                text-align: center;
                border-bottom: 1px solid var(--black-color);

                @media (width <=600px) {
                    text-align: left;

                }


                a {
                    position: relative;
                    display: block;
                    padding: .9em;

                    &::before {
                        content: "";
                        width: 10px;
                        height: 10px;
                        border-top: 3px solid #1d1d1d;
                        border-right: 3px solid #1d1d1d;
                        transform: rotate(45deg);
                        position: absolute;
                        right: 10px;
                        top: 20px;
                    }

                    &:hover {
                        background-color: #028391;
                        transition: .5s;
                    }
                }

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

    footer {
        padding: 50px;
        text-align: center;
        background-color: var(--footer-color);
    }
}