@charset "utf-8";

/* =========================================================
    ヘッダー（WordPress 化のときは header.php の部分）
    ・ヘッダー（ロゴ・言語・文字サイズ）
    ・MENU ボタン、右下の固定ボタン（AIチャット・ご予約）
    ・メニュー（MENU を押したときの全画面）
    ※文字は rem（カンプ「標準」= 1rem 16px）、それ以外は px 固定
========================================================= */

/* =========================================================
    ヘッダー
========================================================= */
#header {
    position: fixed;
    top: 0;
    left: 0;
    inset: 0 0 auto;
    z-index: 50;
    height: 140px;
}

.header-logo {
    position: absolute;
    top: 16px;
    left: 20px;
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

/* マークと文字の間 15px（カンプ実測） */
.header-logo a {
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-logo img {
    flex-shrink: 0;
    width: 63.25px;
}

/* ロゴの文字：字間なし・カナを詰める（palt）・2 行の間隔を詰める */
.header-logo-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: var(--Mincho);
    font-weight: 600;
    font-feature-settings: "palt";
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

.header-logo-sub {
    font-size: 1.143rem;
    /* 18.29px */
}

.header-logo-main {
    font-size: 1.524rem;
    /* 24p.39x */
}

.header-tools {
    position: absolute;
    top: 12px;
    right: 120px;
}

/* 言語・文字サイズ（ヘッダーとメニューで共通） */
.tools {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.tools-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.tools-row img {
    flex-shrink: 0;
    width: 16px;
}

.tools-label {
    /* width: fit-content; */
    min-width: 5.25em;
    font-size: min(0.75rem, 16px);
    /* 12px～16px */
    line-height: 1.4;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.tools-select {
    width: 103px;
    min-height: 25px;
    padding: 0 22px 0 8px;
    border: 1px solid var(--text);
    border-radius: 3px;
    /* ▼ の矢印 */
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='7'%3E%3Cpath d='M0 0h8L4 7z' fill='%231a1a1a'/%3E%3C/svg%3E") no-repeat right 8px center / 8px auto;
    font-size: 0.875rem;
    /* 14px */
    line-height: 1.6;
    cursor: pointer;
}

/* タブレット：FV のロゴと重なるため、言語・文字サイズはメニューの中だけに表示 */
@media (max-width: 1023px) {
    .header-tools {
        display: none;
    }
}

@media (max-width: 767px) {
    #header {
        height: 100px;
    }

    /* SP カンプ実測：マーク 57px、マークと文字の間 14px */
    .header-logo {
        top: 12px;
        left: 16px;
    }

    .header-logo a {
        gap: 14px;
    }

    .header-logo img {
        width: 57px;
    }

    /* ロゴの名前：大・特大のときの上限（PC 標準と同じ大きさ。これより大きいと MENU ボタンに重なる） */
    html:is([data-text-size="large"], [data-text-size="xlarge"]) .header-logo-sub {
        font-size: 18.29px;
    }

    html:is([data-text-size="large"], [data-text-size="xlarge"]) .header-logo-main {
        font-size: 24.39px;
    }

    /* iPhone Safari：16px 未満だと選択時に画面がズームするため */
    .tools-select {
        font-size: min(0.875rem, 16px);
        /* 14px～16px */
    }
}

/* =========================================================
    MENU ボタン・右下の固定ボタン
========================================================= */
.menu-btn,
.menu-close {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
    border-radius: 0 0 0 20px;
    background: var(--yellow);
    color: var(--text);
}

.menu-btn-lines {
    display: flex;
    flex-direction: column;
    gap: 11px;
    width: 44px;
}

.menu-btn-lines span {
    display: block;
    height: 2px;
    background: var(--text);
}

.menu-btn-text {
    margin-top: 10px;
    font-size: min(1rem, 20px);
    /* 16px～20px */
    line-height: 1;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* 右下に固定：AIチャット・ご予約
    枠でまとめて縦に並べる（特大で予約タブが伸びても、チャットと重ならない） */
.side-fixed {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 150;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
}

.side-fixed>* {
    pointer-events: auto;
}

.side-chat {
    width: 64px;
    margin-right: 4px;
}

/* ご予約タブ：幅は固定、高さは文字に合わせて伸びる */
.side-reserve {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100px;
    padding: 20px 0 28px;
    border-radius: 16px 0 0 0;
    background: var(--green);
    color: var(--white);
}

.side-reserve-icon {
    flex-shrink: 0;
    width: 22px;
}

.side-reserve-text {
    writing-mode: vertical-rl;
    font-size: 1.0625rem;
    /* 17px */
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.08em;
    white-space: nowrap;
}

.side-reserve-deco {
    position: absolute;
    right: 5px;
    bottom: 5px;
    width: 15px;
}

@media (max-width: 767px) {

    .menu-btn,
    .menu-close {
        width: 80px;
        height: 80px;
    }

    .side-reserve {
        width: 80px;
    }

    .menu-btn-lines {
        gap: 9px;
        width: 34px;
    }

    .menu-btn-text {
        margin-top: 8px;
    }

    .side-fixed {
        gap: 10px;
    }

    .side-chat {
        width: 52px;
        margin-right: 10px;
    }

}

/* 500px 以下：ご予約を横長のタブにする（SP でも 501px 以上は縦長のまま）
    高さは固定、幅は文字に合わせて伸びる */
@media (max-width: 500px) {
    .side-reserve {
        flex-direction: row;
        gap: 10px;
        width: auto;
        min-height: 44px;
        padding: 6px 34px 6px 16px;
        border-radius: 14px 0 0 0;
    }

    .side-reserve-icon {
        width: 20px;
    }

    .side-reserve-text {
        writing-mode: horizontal-tb;
        font-size: 1rem;
        /* 16px */
        letter-spacing: 0.05em;
    }

    .side-reserve-deco {
        right: 7px;
        bottom: 7px;
        width: 13px;
    }
}

/* =========================================================
    メニュー
========================================================= */
.menu {
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* ページのスクロールバーは開いている間も出したままにするので、メニュー自身のスクロールバーは隠す（2 本並ばないように）
        中身がはみ出たときは、ホイールやスワイプでスクロールできる */
    scrollbar-width: none;
    background: var(--bg);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

/* 古い Safari 用（scrollbar-width が効かない） */
.menu::-webkit-scrollbar {
    display: none;
}

.menu.is-open {
    opacity: 1;
    visibility: visible;
}

/* 中身はなるべく 1 画面に収める（縦スクロールを出さない）
    PC：カンプの配置をもとに、ロゴ・間隔を少しずつ詰めている。メニュー項目とボタンは折り返さない
    SP：メニュー項目は縦並び。ボタンと白い枠はカンプの幅（352px）より広げない */
.menu-inner {
    position: relative;
    z-index: 1;
    /* 下の余白：山の絵（.menu-bottom）が重ならない程度に空ける */
    padding: 60px 20px 150px;
    text-align: center;
}

.menu-close {
    right: 0;
    z-index: 310;
}

.menu-close-icon {
    position: relative;
    width: 40px;
    height: 40px;
}

.menu-close-icon::before,
.menu-close-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text);
    transform: rotate(45deg);
}

.menu-close-icon::after {
    transform: rotate(-45deg);
}

.menu-close .menu-btn-text {
    margin-top: 4px;
}

.menu-tools {
    position: fixed;
    top: 12px;
    right: 120px;
    text-align: left;
}

.menu-logo {
    width: 130px;
    margin-inline: auto;
}

.menu-insta {
    display: block;
    width: 28px;
    margin: 14px auto 0;
}

/* メニュー項目：1 行に並べる（折り返さない）。画面が狭いときは間隔だけ詰まる */
/* 文字サイズ「大」「特大」などで 1 行に入らないときは折り返す（項目の途中では折り返さない） */
.menu-nav ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px clamp(16px, 8vw - 40px, 60px); /* 768px で約 21px（7 項目が 1 行に入る）、1250px 以上で 60px */
    margin-top: 26px;
}

.menu-nav a {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 500;
    white-space: nowrap;
}

/* ボタン：3 つを 1 行に並べる（折り返さない）。画面が狭いときはボタンの幅が詰まる */
.menu-btns {
    display: flex;
    justify-content: center;
    gap: 16px clamp(16px, 2vw, 28px);
    margin: 32px auto 0;
}

.menu-btns li {
    flex: 0 1 315px;
    min-width: 0;
}

.menu-btns .btn {
    width: 100%;
}

.menu-info {
    display: grid;
    grid-template-columns: 410px 1fr;
    align-items: center;
    width: min(1000px, 100%);
    margin: 48px auto 0;
    padding: 1.6em;
    border-radius: 30px;
    background: var(--white);
    text-align: left;
}

.menu-info-title {
    font-size: 1.25rem;
    /* 20px */
    letter-spacing: 0.05em;
    text-align: center;
}

.menu-info-text {
    font-size: 1rem;
    /* 16px */
    line-height: 1.6;
}

/* 山の絵：画面の下に固定（背景）。1920px で左右中央、はみ出しは切る */
/* 画像のいちばん下の 1px が半透明で、下端に白いすき間があるように見えるので、1px 下へずらして画面の外に出す */
.menu-bottom {
    position: fixed;
    right: 0;
    bottom: -1px;
    left: 0;
    z-index: 0;
    pointer-events: none;
}

.menu-bottom img {
    width: 1920px;
}

/* タブレット：右上の言語・文字サイズとロゴが重ならないよう、ロゴを下げる
    INFORMATION を縦に並べる（文字は左揃えのまま、かたまりを中央に） */
@media (max-width: 1023px) {
    .menu-inner {
        padding-top: 96px;
    }

    .menu-info {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 20px 30px 24px;
    }

    .menu-info-text {
        width: fit-content;
        margin-inline: auto;
    }
}

@media (max-width: 767px) {
    .menu-inner {
        padding: 90px 20px 30px;
    }

    .menu-tools {
        top: 10px;
        left: 20px;
        right: auto;
    }

    /* ロゴはカンプの大きさ（幅 約 99px） */
    .menu-logo {
        width: 99px;
    }

    .menu-insta {
        width: 24px;
        margin-top: 14px;
    }

    /* メニュー項目：縦並び・左揃え。ボタンと同じ幅（最大 352px）で中央に置く */
    .menu-nav ul {
        display: block;
        max-width: 352px;
        margin: 8px auto 0;
        text-align: left;
    }

    .menu-nav a {
        display: block;
        padding: 6px 20px;
    }

    /* ボタン：縦に並べる。画面が広くてもカンプの幅（352px）より広げない */
    .menu-btns {
        flex-direction: column;
        align-items: center;
        gap: 12px;
        margin-top: 24px;
    }

    .menu-btns li {
        flex: none;
        width: 100%;
        max-width: 352px;
    }

    .menu-btns .btn {
        min-height: 40px;
        padding-block: 0.4em;
    }

    /* INFORMATION：白い枠もボタンと同じ幅まで。文字は左揃えのまま、かたまりを左右中央に
        山の絵の上に重なってもよい（白い枠が前に出る） */
    .menu-info {
        gap: 4px;
        max-width: 352px;
        margin-top: 40px;
        padding: 12px 14px;
        border-radius: 16px;
    }

    /* 画面幅いっぱいに広げる（390px より狭い画面では左右を切る） */
    .menu-bottom img {
        width: max(100%, 391px);
    }
}