/* 共通CSS */
:root {
    --common-bg-color: #EAE0D6;
    --base: #F5F0EB;
    --text: #463832;
    --sub: #8E7458;
    --white: #fff;
    --font-en: "Cormorant Infant", serif;
    --font-gothic: "Zen Kaku Gothic New", sans-serif;
    /* デザイン幅375px基準の1px。750px以上では2pxで固定 */
    --px: min(calc(100vw / 375), 2px);
}

html {
    font-size: 10px;
}

body {
    background-color: var(--common-bg-color);
    font-size: 1.6rem;
    font-family: "Zen Old Mincho", serif;
    font-weight: 400;
    line-height: 180%;
    font-style: normal;
    font-variant: normal;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

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

/* リンクのホバー（グラデ反転の .c-btn は除外）
   opacity 0.8：本文色(--text)のリンクでコントラスト比4.5:1以上を維持する値 */
a:not(.c-btn) {
    transition: opacity 0.3s ease;
}

@media (hover: hover) {
    a:not(.c-btn):hover {
        opacity: 0.8;
    }
}

main {
    background-color: #fff;
    max-width: 750px;
    margin-inline: auto;
}

/* header */
header {
    width: 100%;
    max-width: 750px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: calc(16 * var(--px));
    margin-inline: auto;
    padding-top: calc(16 * var(--px));
    background-color: var(--white);
}

/* ヘッダー・メニュー共通パーツ */
.header_inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: calc(16 * var(--px));
}

.header-logo {
    width: calc(200 * var(--px));
}

.header-band {
    padding: calc(4 * var(--px)) calc(8 * var(--px));
    background: linear-gradient(to left, #A07E4E, #DEB569 50%, #A07E4E);
    font-family: var(--font-en);
    font-weight: 600;
    font-size: calc(19 * var(--px));
    line-height: 1;
    letter-spacing: 0.1em;
    color: var(--base);
    text-align: center;
}

/* メニューボタン（このボタンのみ追従・白い円の背景） */
.header-menu {
    position: fixed;
    /* ロゴ行（上余白16px＋高さ42px）の中央に配置 */
    top: calc(15 * var(--px));
    right: calc(max(0px, (100vw - 750px) / 2) + 8 * var(--px));
    z-index: 110;
    width: calc(44 * var(--px));
    height: calc(44 * var(--px));
    border-radius: 50%;
    background-color: var(--white);
    cursor: pointer;
    transition: all .5s;

    & span {
        position: absolute;
        left: calc(11 * var(--px));
        width: calc(22 * var(--px));
        height: calc(1 * var(--px));
        background-color: var(--text);
        border-radius: 2px;
        display: inline-block;
        transition: all .5s;

        &:nth-of-type(1) {
            top: calc(14 * var(--px));
        }

        &:nth-of-type(2) {
            top: calc(22 * var(--px));
        }

        &:nth-of-type(3) {
            top: calc(30 * var(--px));
        }
    }

    &.active {
        & span {
            &:nth-of-type(1) {
                transform: translateY(calc(8 * var(--px))) rotate(-35deg);
            }

            &:nth-of-type(2) {
                opacity: 0;
            }

            &:nth-of-type(3) {
                transform: translateY(calc(-8 * var(--px))) rotate(35deg);
            }
        }
    }
}

html.is-menu-open {
    overflow: hidden;
}

/* メニュー */
.header-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    background-color: rgba(255, 255, 255, 0.8);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease, visibility .3s ease;

    &.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    & .header-nav_panel {
        max-width: 750px;
        margin-inline: auto;
    }

    & .header-nav_head {
        display: flex;
        flex-direction: column;
        gap: calc(16 * var(--px));
        padding-top: calc(16 * var(--px));
        background-color: var(--white);
    }

    & .header-nav_body {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: calc(32 * var(--px));
        padding: calc(16 * var(--px)) calc(16 * var(--px)) calc(40 * var(--px));
        background-color: var(--base);
    }

    & .header-nav_list {
        width: 100%;

        & a {
            padding-block: calc(20 * var(--px));
            border-bottom: 1px solid #D3C8BD;
            font-weight: 500;
            font-size: calc(14 * var(--px));
            line-height: 1;
            letter-spacing: 0.08em;
        }
    }

    & .header-nav_cta {
        display: flex;
        gap: calc(8 * var(--px));

        & .cta-btn {
            height: calc(40 * var(--px));
        }
    }
}

/* CTAボタン（レッスンご予約・LINE問い合わせ） */
.cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
    border-radius: 4px;
    font-weight: 700;
    font-size: calc(13 * var(--px));
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-align: center;
    white-space: nowrap;
}

.cta-btn--reserve {
    width: calc(144 * var(--px));
    padding: calc(12 * var(--px)) calc(24 * var(--px));
    border-color: var(--white);
    background-color: var(--sub);
    color: var(--white);
}

.cta-btn--line {
    padding: calc(10 * var(--px)) calc(20 * var(--px));
    border-color: var(--sub);
    background-color: var(--white);
    color: var(--sub);
}

/* footer */
footer {
    max-width: 750px;
    margin-inline: auto;

    & .footer_cta {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: calc(13 * var(--px));
        padding: calc(14 * var(--px)) calc(16 * var(--px));
        background-color: rgba(255, 255, 255, 0.8);
    }

    & .footer_inner {
        padding: calc(12 * var(--px)) calc(8 * var(--px));
        background-color: var(--base);
    }

    & .footer_copyright {
        font-family: "Zen Kaku Gothic New", sans-serif;
        font-weight: 500;
        line-height: 1;
        letter-spacing: 0.08em;
        color: var(--sub);
        text-align: center;

        & small {
            font-size: calc(12 * var(--px));
        }
    }
}

/* button（背景グラデ・ホバーでグラデ反転） */
.c-btn {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(16 * var(--px));
    width: 100%;
    padding: calc(20 * var(--px)) calc(16 * var(--px));
    border-radius: 100px;
    overflow: hidden;
    background: var(--btn-bg);
    color: var(--white);

    &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        background: var(--btn-bg-hover);
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    & .c-btn_text {
        font-weight: 700;
        font-size: calc(15 * var(--px));
        line-height: 1;
        letter-spacing: 0.08em;
        white-space: nowrap;
    }

    & .c-btn_arrow {
        width: calc(20.8333 * var(--px));
    }
}

@media (hover: hover) {
    .c-btn:hover::before {
        opacity: 1;
    }
}

.c-btn--brown {
    --btn-bg: linear-gradient(to right, #8E7458, #463832);
    --btn-bg-hover: linear-gradient(to right, #463832, #8E7458);
}

.c-btn--gold {
    --btn-bg: linear-gradient(to left, #B39121, #D4AF37);
    --btn-bg-hover: linear-gradient(to left, #D4AF37, #B39121);
}

/* セクション見出し（アイコン＋英字見出し＋横線） */
.sec-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--px));

    & .sec-heading_icon {
        width: calc(24 * var(--px));
    }

    & .sec-heading_crown {
        display: flex;
        align-items: center;
        justify-content: center;
        width: calc(30 * var(--px));
        height: calc(30 * var(--px));

        & img {
            width: calc(23.9323 * var(--px));
        }
    }

    & .sec-heading_title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(4 * var(--px));
    }

    & .sec-heading_line {
        width: calc(16 * var(--px));
        flex-shrink: 0;
    }

    & .sec-heading_text {
        font-family: var(--font-en);
        font-weight: 500;
        font-size: calc(26 * var(--px));
        line-height: 1;
        letter-spacing: 0.1em;
        text-align: center;
        white-space: nowrap;
    }
}

.sec-heading--white {
    & .sec-heading_title {
        gap: calc(8 * var(--px));
    }

    & .sec-heading_text {
        line-height: 1.2;
        color: var(--white);
    }
}

/* 下層ページ共通 */
.sub-contents {
    background: url(../img/sub_bg.png) left top / calc(375 * var(--px)) calc(531 * var(--px));
}

/* パンくず */
.breadcrumb {
    background-color: var(--base);

    & ol {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: calc(8 * var(--px));
        padding: calc(12 * var(--px)) calc(16 * var(--px));
        font-family: var(--font-gothic);
        font-size: calc(12 * var(--px));
        line-height: 1;
        letter-spacing: 0.08em;
    }

    & li {
        display: flex;
        align-items: center;
        gap: calc(8 * var(--px));

        &:not(:last-child)::after {
            content: "";
            width: calc(7 * var(--px));
            height: calc(4.667 * var(--px));
            background: url(../img/icon_chevron.svg) center / contain no-repeat;
            /* 上向きのchevronを右向きに */
            rotate: 90deg;
        }
    }

    & a {
        color: var(--sub);
    }
}

/* カテゴリラベル */
.cat-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: calc(2 * var(--px)) calc(8 * var(--px));
    border-radius: 100px;
    background-color: var(--sub);
    font-family: var(--font-gothic);
    font-weight: 500;
    font-size: calc(10 * var(--px));
    line-height: 1.5;
    letter-spacing: 0.08em;
    color: var(--white);
    white-space: nowrap;
}

.cat-label--gold {
    background-color: #D4AF37;
}

.grecaptcha-badge {
    visibility: hidden;
}

.logged-in-as a{
    display: inline;
    text-decoration: underline;
}
.required-field-message{
    display: block;
}