/* =========================================================
   共通メニュー（全ページ共通）
   各ページの<style>より後に読み込み、メニューまわりを上書きする
   ========================================================= */

/* ハンバーガーボタン（押せる範囲は44px四方、線は28px） */
.menu-trigger {
    position: relative;
    width: 44px;
    height: 44px;
    margin: 0 -8px 0 0;
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
}

.menu-trigger-bar {
    position: absolute;
    left: 8px;
    width: 28px;
    height: 1.5px;
    background-color: currentColor;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s;
}

.menu-trigger-bar:nth-child(1) {
    top: 14px;
}

.menu-trigger-bar:nth-child(2) {
    top: 21px;
}

.menu-trigger-bar:nth-child(3) {
    top: 28px;
}

/* 開いている間は×に変える */
.menu-trigger[aria-expanded="true"] .menu-trigger-bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.menu-trigger[aria-expanded="true"] .menu-trigger-bar:nth-child(2) {
    opacity: 0;
}

.menu-trigger[aria-expanded="true"] .menu-trigger-bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 開いている間は背景をスクロールさせず、ヘッダーを前面に出してMENU→CLOSEで閉じられるようにする */
html.menu-open {
    overflow: hidden;
}

html.menu-open header {
    z-index: 200;
}

/* 閉じている間はTabキーでリンクに入らないよう隠す。画面が低いときはメニュー内でスクロールできるようにする */
#overlay-menu {
    display: flex;
    visibility: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s linear 0.5s;
}

#overlay-menu.active {
    visibility: visible;
    transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0s;
}

.overlay-nav {
    width: 100%;
    max-width: 420px;
    margin: auto;
    padding: 120px 20px 60px;
    text-align: center;
}

.overlay-nav ul {
    list-style: none;
    text-align: center;
}

.overlay-nav li {
    margin: 0;
    overflow: hidden;
}

/* 主要ページ */
.overlay-main a {
    padding: 12px 0;
    font-size: 1.4rem;
    line-height: 1.6;
}

/* いま見ているページ */
.overlay-nav a[aria-current="page"] {
    color: #9a9a9a;
}

/* コラム・Instagram・採用情報（小さめに横並び） */
.overlay-sub {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 28px;
    margin-top: 28px;
    padding-top: 28px;
}

.overlay-sub::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 40px;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.15);
    transform: translateX(-50%);
}

.overlay-sub a {
    padding: 6px 0;
    font-size: 0.9rem;
    line-height: 1.6;
    letter-spacing: 0.15em;
    color: #666;
}

/* ご予約ボタン */
.overlay-nav a.overlay-reserve {
    display: inline-block;
    margin-top: 36px;
    padding: 14px 48px;
    background: var(--text-color);
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.6;
    letter-spacing: 0.15em;
    transform: none;
    transition: opacity 0.3s;
}

.overlay-nav a.overlay-reserve:hover {
    opacity: 0.85;
}

.overlay-nav a.overlay-top {
    margin-top: 24px;
    font-size: 0.85rem;
    line-height: 1.6;
    letter-spacing: 0.15em;
    color: #888;
    transform: none;
}

/* 項目が下から順に出てくる演出の間隔 */
#overlay-menu.active .overlay-main li:nth-child(1) a { transition-delay: 0.08s; }
#overlay-menu.active .overlay-main li:nth-child(2) a { transition-delay: 0.14s; }
#overlay-menu.active .overlay-main li:nth-child(3) a { transition-delay: 0.20s; }
#overlay-menu.active .overlay-main li:nth-child(4) a { transition-delay: 0.26s; }
#overlay-menu.active .overlay-main li:nth-child(5) a { transition-delay: 0.32s; }
#overlay-menu.active .overlay-main li:nth-child(6) a { transition-delay: 0.38s; }
#overlay-menu.active .overlay-sub li a { transition-delay: 0.44s; }

@media (max-width: 768px) {
    .overlay-nav {
        padding: 84px 20px 48px;
    }

    .overlay-main a {
        padding: 9px 0;
        font-size: 1.15rem;
    }

    .overlay-sub {
        gap: 4px 22px;
        margin-top: 18px;
        padding-top: 18px;
    }

    .overlay-sub a {
        font-size: 0.82rem;
    }

    .overlay-nav a.overlay-reserve {
        margin-top: 26px;
        padding: 13px 40px;
    }

    .overlay-nav a.overlay-top {
        margin-top: 18px;
    }
}