@charset "UTF-8";
/* ========================================
   Lien café STAYGOLD - menu.css
   メニューページ

   【方針】
   トップページと同じく、白い角丸ボックス＋影は使わない。
   写真はエッジを立てて置き、テキストは罫線だけで区切る。
======================================== */

/* ========================================
   ページ背景
   ※ 白い紙目テクスチャ（white-bg.webp）を敷く。こだわりセクションのカードや
     sec-linksのパネルと同じ素材・同じタイル幅（600px）。
   ※ 2層目の--img-placeholderは素材未配置のときだけ見えるダミー。

   position: sticky を効かせるための回避もここで行う。
   ※ common.css の body に overflow-x: hidden があると、body自体が
     スクロールコンテナと見なされ、その中の position: sticky（.menu-tabs）が
     追従しなくなる（スクロールするのはbodyではなくhtml側のため）。
   ※ overflow-x: clip にすれば、横のはみ出しを隠す効果はそのままで、
     スクロールコンテナにならないので sticky が効く。
   ※ メニューページ内だけにスコープしている（他ページは従来のまま）。
======================================== */
body.page-menu {
    overflow-x: clip;
    background-color: var(--color-bg);
    background-image: url('../images/white-bg.webp');
    background-size: 600px auto;
    background-repeat: repeat;
    background-position: center;
}

/* page-heroの谷型クリップ（.page-hero--valley、menu.phpは$hero_arc='valley'）で欠けた部分（.page-hero-wrapの背景）の見せ方をブレークポイントで切り替える。
   （.page-hero本体の背景色は常に元の濃茶色のままで、ここでは触らない）。
   1024px以上：透明にし、bodyの背景（white-bg.webp）がそのまま透けて見えるようにする
     （shop/company/news/faq/recruit/contactの7ページグループと同じ手法、common.css参照）。
   1024px未満：透明にせず、.menu-tabsと同じ単色にする。 */
.page-menu .page-hero-wrap {
    background-color: rgba(252, 250, 246, 0.96);
}

@media (min-width: 1024px) {
    .page-menu .page-hero-wrap {
        background-color: transparent;
    }
}

/* ========================================
   レイアウト
   〜1023px … タブを上部に横並びにする1カラム
   1024px〜 … 左にタブ、右にメニューの2カラム

   ※ 他ページのセクション（.section--pad > .inner）と同じ役割分担にしている。
       外側（.menu-layout）       … 上下左右のパディング
       内側（.menu-layout__inner） … max-width と中央寄せだけ
   ※ ただし 1024px未満はカテゴリタブが幅いっぱいの帯（背景色＋下罫線）なので、
     外側には左右パディングを付けず、本文側（.menu-body）が自分で余白を持つ。
======================================== */
.menu-layout__inner {
    width: 100%;
    max-width: 1200px;
    margin-inline: auto;
}

/* 上下パディングは他ページの .section--pad と同じ値に揃える（base 4rem ／ 768px以上 5rem）。
   ※ 1024px未満はカテゴリタブが幅いっぱいの帯なので、外側（.menu-layout）ではなく
     本文側（.menu-body）が余白を持つ。1024px以上は下の @media で .menu-layout 側に移す。 */
.menu-body {
    padding: 4rem var(--gutter);
}

@media (min-width: 768px) {
    .menu-body {
        padding-block: 5rem;
    }
}

@media (min-width: 1024px) {
    .menu-layout {
        padding: 5rem var(--gutter);
    }
    .menu-layout__inner {
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-xl);
    }
    .menu-body {
        flex: 1;
        /* flexアイテムが中身の幅で押し広げられないように */
        min-width: 0;
        padding: 0;
    }
}

/* ========================================
   カテゴリタブ
   ※ 1024px未満はページ上部に置き、ヘッダーの直下に追従させる。
     1024px以上は左サイドバーとして追従させる（下の @media 参照）。
======================================== */
/* 追従の検知用センチネルは廃止した（menu.js でヘッダー下端とタブバーの位置を直接比較する方式に変更）。 */

.menu-tabs {
    /* リストの上下余白。現在地の下線（.menu-tab::after）の位置もこの値を参照するので、
       貼り付き時に帯を薄くする（is-stuck）ときも下線がずれない。 */
    --menu-tabs-pad: 0.5rem;
    /* ヘッダー（position: fixed）の真下に貼り付く。--header-height はブレークポイントごとに
       値が変わる変数なので、これ一本でハンバーガーとSNSリンクの両方をよけられる。
       ※ z-index は 1024px以上のサイドバーと同じ 1。ヘッダー・ドロワーより下、本文より上。 */
    position: sticky;
    top: var(--header-height);
    z-index: 1;
    /* 追従すると常に本文の上に重なるので、半透明（旧0.96）をやめて不透明にする。 */
    background-color: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
}

/* サイドバー見出し（1024px以上のみ） */
.menu-tabs__title {
    display: none;
}

.menu-tabs__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.menu-tabs__scroll::-webkit-scrollbar {
    display: none;
}

.menu-tabs__list {
    display: flex;
    gap: 0.25rem;
    width: max-content;
    min-width: 100%;
    /* 1024px未満（上部の追従バー時）は中央配置にする。
       ※ safe 付きにすることで、タブが画面幅を超える（横スクロールになる）
         ときは自動で左揃えに戻る。中央揃えのままだと左端のタブが
         スクロールしても見えなくなることがあるため。
       ※ safe 未対応ブラウザ向けに通常の center を先に書いている。 */
    justify-content: center;
    justify-content: safe center;
    /* 1024px未満（上部の追従バー時）の上下余白。
       ※ 貼り付き時は .menu-tabs.is-stuck でこの変数を小さくして帯を薄くする。
       ※ 1024px以上の左サイドバー化時は下の@mediaで打ち消す。 */
    padding-block: var(--menu-tabs-pad);
}

.menu-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.0625rem;
    flex-shrink: 0;
    padding: 0.875rem 0.875rem 0.75rem;
    transition: color var(--transition);
}

.menu-tab__ja {
    font-family: var(--font-heading);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    line-height: 1.4;
    color: var(--color-text-light);
    transition: color var(--transition);
}

.menu-tab__en {
    font-family: var(--font-en);
    font-size: 0.6875rem;
    font-style: italic;
    letter-spacing: 0.12em;
    line-height: 1.2;
    color: var(--color-text-light);
    opacity: 0.7;
    transition: color var(--transition), opacity var(--transition);
}

/* 下線（カード化を避け、罫線だけで現在地を示す）
   ※ .menu-tabsの境界線（border-bottom）に重なる位置に置く。
     .menu-tabs__listに上下パディング（0.5rem）がある分、タブの下端は
     境界線より上にあるので、その分（+ 線の1px）だけ下に逃がしている。
   ※ 幅はタブ全幅（左右0）。内側に寄せず、要素の幅いっぱいに伸ばす。 */
.menu-tab::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc((var(--menu-tabs-pad) + 1px) * -1);
    height: 2px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-tab:hover .menu-tab__ja {
    color: var(--color-primary-dark);
}

.menu-tab.is-active .menu-tab__ja {
    color: var(--color-title);
    font-weight: 700;
}

.menu-tab.is-active .menu-tab__en {
    color: var(--color-gold);
    opacity: 1;
}

.menu-tab.is-active::after {
    transform: scaleX(1);
}

/* 上端に貼り付いている間の見せ方（1024px未満のみ）。
   ※ 帯をコンパクトにする案（英字ラベルを隠す・上下の余白を詰める）はいずれも不要とのことで撤回した。
     タブバー自体の見た目は貼り付いても変わらない。
   ※ .menu-tabs の is-stuck は現在CSSでは使っていないが、今後の調整用に menu.js 側で付与は続けている。 */
@media (max-width: 1023.98px) {
    /* 貼り付いている間だけ、ヘッダーをカテゴリタブと同じ地色（--color-bg）にし、
       上部を一枚の帯に見せる（タブバーはもともとこの色なのでここでは触らない）。
       ※ 貼り付いていないときはこの上書きをしない。ページ最上部ではヘッダーの背後に
         濃い茶のページヒーローが来るので、常時不透明だと明るい帯が横切ってしまうため。
       ※ .header は共通クラスなのでメニューページ内（.page-menu）だけにスコープする。
         menu.css は common.css より後に読まれるので、同じ詳細度でもこちらが勝つ。
       ※ is-menu-tabs-stuck は menu.js が body に付与する。 */
    .page-menu.is-menu-tabs-stuck .header {
        background-color: var(--color-bg);
    }

    .page-menu .header {
        /* 表示・非表示で速さが変わらないよう、時間とイージングを明示する。
           ※ 左右対称の ease-in-out にして、出るときと消えるときの見え方を揃えている。 */
        transition: background-color 0.3s ease-in-out;
    }

    /* sec-links に入って sticky が終わったら、タブバーもヘッダーの地色と同じ速さで消す。
       ※ 他のブレークポイント（1024px以上の左サイドバー）にはかからないようこの@media内に置く。
       ※ is-leaving は menu.js が付与する。スクロールを戻すと同じ速さで戻る。 */
    .menu-tabs {
        transition: opacity 0.3s ease-in-out;
    }

    .menu-tabs.is-leaving {
        opacity: 0;
        pointer-events: none;
    }

    /* ドロワーを開いている間はヘッダーの地色を戻す（透明にする）。
       ※ ドロワーは意図的にヘッダーより下に置かれている（開いている間も
         ハンバーガーが閉じるボタンとして押せる必要があるため）。
         これまではヘッダーが透明だったので問題にならなかったが、貼り付き時に地色を付けたことで
         ドロワーの上に帯が重なって見えてしまっていた。
       ※ z-index を触ってドロワーを前面に出すとハンバーガーが隠れるので、地色を消す側で対応する。
       ※ menu-open は animation.js が body に付与する。
       ※ 上の is-menu-tabs-stuck の指定よりクラスを一つ多く重ねて、確実に上書きさせている。 */
    .page-menu.is-menu-tabs-stuck.menu-open .header {
        background-color: transparent;
    }
}

@media (min-width: 1024px) {
    /* 左サイドバー化：帯の背景を外し、縦並びにして追従させる */
    .menu-tabs {
        position: sticky;
        flex: 0 0 13.5rem;
        top: calc(var(--header-height) + 1.5rem);
        z-index: 1;
        padding-right: var(--spacing-md);
        background-color: transparent;
        border-bottom: none;
        border-right: 1px solid var(--color-border);
    }
    .menu-tabs__title {
        display: block;
        margin-bottom: var(--spacing-sm);
        font-family: var(--font-en);
        font-size: 0.875rem;
        font-style: italic;
        letter-spacing: 0.16em;
        color: var(--color-gold);
    }
    .menu-tabs__scroll {
        overflow: visible;
    }
    .menu-tabs__list {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        width: 100%;
        min-width: 0;
        padding-block: 0;
    }
    .menu-tab {
        align-items: flex-start;
        gap: 0.0625rem;
        padding: 0.875rem 0;
        text-align: left;
        white-space: normal;
    }
    .menu-tab:not(:last-child) {
        border-bottom: 1px solid var(--color-border-light);
    }
    .menu-tab__ja {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
    /* 現在地の表示を下線→境界線上の縦バーに変える */
    .menu-tab::after {
        left: auto;
        right: calc((var(--spacing-md) + 1px) * -1);
        top: 0;
        bottom: 0;
        width: 2px;
        height: auto;
        transform: scaleY(0);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .menu-tab.is-active::after {
        transform: scaleY(1);
    }
}

/* ========================================
   パネル（タブごとの中身）
   ※ JSが動かない環境では全部表示される（フォールバック）。
======================================== */
.menu-panel--hidden {
    display: none;
}

.menu-panel__head {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.menu-panel__en {
    font-family: var(--font-en);
    font-size: 1.125rem;
    font-style: italic;
    letter-spacing: 0.16em;
    color: var(--color-gold);
}

.menu-panel__ja {
    margin-top: 0.125rem;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--color-title);
}

.menu-panel__lead {
    max-width: var(--section-width-narrow);
    margin: var(--spacing-sm) auto 0;
    font-size: 0.875rem;
    /* ベース（576未満）は左揃え。576以上で中央寄せに戻す。 */
    text-align: left;
    color: var(--color-text-light);
}

@media (min-width: 576px) {
    .menu-panel__lead {
        text-align: center;
    }
}

@media (min-width: 768px) {
    .menu-panel__ja {
        font-size: 2rem;
    }
    .menu-panel__lead {
        font-size: 0.9375rem;
    }
}

@media (min-width: 1024px) {
    /* 2カラム時は中央寄せをやめて左揃えにする */
    .menu-panel__head {
        text-align: left;
    }
    .menu-panel__lead {
        margin-inline: 0;
    }
}

/* ========================================
   タブ内のジャンプリンク
   ※ 項目名の長さがまちまちだと折り返しがガタつくので、等幅のグリッドで列を揃える。
     auto-fit + minmax なので、幅に応じて列数が自動で変わる。
   ※ リンクの文言は menu.php の 'jump'（短い名前）を使う。小見出しの括弧付きの
     正式名（'name'）をそのまま使うと長すぎて列が揃わないため。
======================================== */
.menu-jump {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.5rem 1rem;
    margin-bottom: var(--spacing-xxl);
    padding-bottom: var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.menu-jump__link {
    position: relative;
    /* グリッドのセル幅いっぱいに下線が伸びないよう、幅はテキスト分にする。 */
    justify-self: start;
    align-self: start;
    padding: 0.3125rem 0.25rem;
    font-size: 0.8125rem;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    transition: color var(--transition);
}

.menu-jump__link::after {
    content: '';
    position: absolute;
    left: 0.25rem;
    right: 0.25rem;
    bottom: 0;
    height: 1px;
    background-color: var(--color-gold);
    transform: scaleX(0);
    transition: transform var(--transition);
}

.menu-jump__link:hover {
    color: var(--color-primary-dark);
}

.menu-jump__link:hover::after {
    transform: scaleX(1);
}

@media (min-width: 768px) {
    .menu-jump {
        grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
        gap: 0.625rem 1.5rem;
    }
    .menu-jump__link {
        font-size: 0.875rem;
    }
}

/* ========================================
   分類ブロック
======================================== */
.menu-block {
    /* ヘッダー（右上のピル）と追従するカテゴリタブの下に見出しが潜らないようにする。
       ※ --menu-tabs-height は menu.js が実測して入れる（貼り付き時はコンパクトな高さ）。
         タブのラベルを変えても自動で追従する。
       ※ ジャンプリンク自体は menu.js がオフセット付きでスクロールさせるので、
         ここは直リンク等のフォールバック。 */
    scroll-margin-top: calc(var(--header-height) + var(--menu-tabs-height, 0px) + 1.5rem);
}

/* 1024px以上はタブが左サイドバーなので本文に重ならない。ヘッダー分だけでよい。 */
@media (min-width: 1024px) {
    .menu-block {
        scroll-margin-top: calc(var(--header-height) + 1.5rem);
    }
}

.menu-block + .menu-block {
    margin-top: var(--spacing-xxl);
}

/* ※ align-items は center ではなく baseline。
     center だと「行の箱」の中心に揃うが、見出し体（Zen Old Mincho）はフォントの上下の余白が
     上側に多いため、円・罫線が文字より少し上にずれて見える。また見出しが2行に折り返すと
     2行の真ん中に来てしまう。
     baseline にすると円・罫線の下端が1行目の文字のベースラインに揃うので、
     そこから文字の見た目の中心（ベースラインの0.38em上＝和文の字面の中央）まで
     translateY で持ち上げている（::before / ::after 参照）。 */
.menu-block__title {
    display: flex;
    align-items: baseline;
    gap: 0.875rem;
    margin-bottom: var(--spacing-md);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--color-title);
}

/* 小見出しの頭のアイキャッチ（ゴールドの枠線の円）。
   ※ 枠線は2px（ヘッダーのピル（.header__bar）のゴールドの縁と同じ太さ）。
     1pxも試したが、2pxの方がアイキャッチとして効くため2pxに戻した。
   ※ 見出しが2行に折り返すときも潰れないよう flex-shrink: 0。
   ※ 円と文字の間は、文字と右の罫線（::after）の間（gap 0.875rem）より少し詰めている。
   ※ 縦位置：親の baseline 揃えで円の下端がベースラインに乗るので、
     円の中心が文字の中心（0.38em）に来るよう「0.38em − 円の半径」だけ持ち上げる。
     円の大きさを変えるときは translateY の半径（ここでは 0.4375rem）も合わせて変える。 */
.menu-block__title::before {
    content: '';
    flex-shrink: 0;
    width: 0.875rem;
    height: 0.875rem;
    margin-right: -0.25rem;
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-full);
    transform: translateY(calc(0.4375rem - 0.38em));
}

/* 右に伸びる罫線も、円と同じく文字の中心の高さまで持ち上げる（線の太さの半分＝0.5pxを差し引く）。 */
.menu-block__title::after {
    content: '';
    flex: 1;
    height: 1px;
    background-color: var(--color-border);
    transform: translateY(calc(0.5px - 0.38em));
}

/* 小見出しの下の代表写真（帯）。
   ※ テキストだけのブロックが続くと文字の壁になるので、区切りとして写真を1枚置けるようにしている。
   ※ 見た目はshop.phpの店舗ギャラリー（.shop-gallery__item）と揃えて、
     白地＋ゴールドの枠線＋小さめの角丸＋淡い影のカードにしている。
     （ページの地が紙目テクスチャなので、縁なしの写真だと地に埋もれやすい）
   ※ 写真未配置の間は animation.js が <img> を .img-ph（斜めストライプの
     プレースホルダ）に入れ替えるので、レイアウトは崩れない。 */
.menu-block__img {
    margin-bottom: var(--spacing-md);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background-color: var(--color-white);
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: var(--radius-sm);
}

.menu-block__img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 帯に切り抜くときの基準位置。商品が写真の下寄りに写っているので、
       中央（50%）ではなく上から75%の位置を見せる。 */
    object-position: center 75%;
}

/* ディッピンドッツアイス（#seasonal-dots-cup）の代表写真だけ、フォーカス位置を個別に上書き。 */
#seasonal-dots-cup .menu-block__img img {
    object-position: center 60%;
}

@media (min-width: 768px) {
    .menu-block__img {
        aspect-ratio: 21 / 9;
    }
}

/* 全品同価格のブロックの価格（「各種¥600」など）。
   ※ 各行に価格がない分、ここが唯一の価格表示になるので、商品の価格
     （.menu-photo__price / .menu-list__price）と同じゴシック体・濃い色で見せる。
   ※ 補足文（.menu-block__note）が続くときは、そちらの負の上マージンを打ち消す。 */
.menu-block__price {
    margin: -0.75rem 0 var(--spacing-md);
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-primary-dark);
}

.menu-block__price+.menu-block__note {
    margin-top: -1.5rem;
}

@media (min-width: 768px) {
    .menu-block__price {
        font-size: 1.0625rem;
    }
}

/* 小見出しの補足（「生クリーム＆カスタードクリーム」など） */
.menu-block__note {
    margin: -0.75rem 0 var(--spacing-md);
    font-size: 0.8125rem;
    line-height: 1.8;
    color: var(--color-text-light);
}

.menu-block__note strong {
    font-weight: 700;
    color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    .menu-block + .menu-block {
        margin-top: var(--spacing-3xl);
    }
    .menu-block__title {
        font-size: 1.375rem;
    }
    /* 見出しの文字が大きくなるのに合わせて、円も少し大きくする。
       → 円の半径が 0.5rem になるので、持ち上げる量も合わせて変える。 */
    .menu-block__title::before {
        width: 1rem;
        height: 1rem;
        transform: translateY(calc(0.5rem - 0.38em));
    }
}

/* ========================================
   写真つき商品
   ※ 箱・影・角丸なし。写真をそのまま置く。
======================================== */
.menu-photos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md) 1rem;
}

/* 登場アニメの時間差（--reveal-delay。common.css の .js-reveal が参照）。
   左の商品から順に現れるよう、1列目=0s、2列目=0.08s…と段差をつける。
   ※ 列数はブレークポイントで変わる（2列 → 768px以上3列 → 1200px以上4列）ので、
     各幅の列数に合わせて下の @media 内で定義し直している。
     以前はPHP側が「3列固定」を前提に $n % 3 で出していたため、2列・4列のときに
     左右の順番が入れ替わって見えていた。
   ※ 行ごとに同じパターンを繰り返すので、上の行が先に視界に入る→先に現れる、
     同じ行の中では左から右へ順に現れる、という見え方になる。 */
.menu-photos .menu-photo:nth-child(2n + 1) {
    --reveal-delay: 0s;
}

.menu-photos .menu-photo:nth-child(2n + 2) {
    --reveal-delay: 0.08s;
}

/* 商品写真。見た目はshop.phpの店舗ギャラリーと揃えて、
   白地＋ゴールドの枠線＋小さめの角丸＋淡い影のカードにする。 */
.menu-photo__img {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    background-color: var(--color-white);
    border: 1px solid rgba(191, 160, 106, 0.45);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
}

.menu-photo__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-photo:hover .menu-photo__img img {
    transform: scale(1.05);
}

/* 商品番号。メニュー資料の番号（No.○）を、写真と商品名の間に小さく見せる。 */
.menu-photo__no {
    margin-top: 0.625rem;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-gold);
}

.menu-photo__name {
    margin-top: 0.25rem;
    font-family: var(--font-heading);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    line-height: 1.6;
    color: var(--color-title);
}

.menu-photo__text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    line-height: 1.9;
    color: var(--color-text-light);
}

.menu-photo__price {
    margin-top: 0.375rem;
    /* 価格は視認性重視でゴシック体に揃える */
    font-family: var(--font-family);
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--color-primary-dark);
}

@media (min-width: 768px) {
    .menu-photos {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg) 1.5rem;
    }
    /* 3列なので、時間差も3周期で定義し直す（ベースの2周期の指定を上書き）。 */
    .menu-photos .menu-photo:nth-child(3n + 1) {
        --reveal-delay: 0s;
    }
    .menu-photos .menu-photo:nth-child(3n + 2) {
        --reveal-delay: 0.08s;
    }
    .menu-photos .menu-photo:nth-child(3n + 3) {
        --reveal-delay: 0.16s;
    }
    .menu-photo__name {
        font-size: 1rem;
    }
    .menu-photo__text {
        font-size: 0.8125rem;
    }
    .menu-photo__price {
        font-size: 1.125rem;
    }
}

@media (min-width: 1200px) {
    .menu-photos {
        grid-template-columns: repeat(4, 1fr);
    }
    /* 4列なので、時間差も4周期で定義し直す。 */
    .menu-photos .menu-photo:nth-child(4n + 1) {
        --reveal-delay: 0s;
    }
    .menu-photos .menu-photo:nth-child(4n + 2) {
        --reveal-delay: 0.08s;
    }
    .menu-photos .menu-photo:nth-child(4n + 3) {
        --reveal-delay: 0.16s;
    }
    .menu-photos .menu-photo:nth-child(4n + 4) {
        --reveal-delay: 0.24s;
    }
}

/* ========================================
   テキストのみ商品
======================================== */
.menu-list {
    margin-top: var(--spacing-md);
}

/* 写真がないブロックでは上余白を詰める */
.menu-photos + .menu-list {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px dashed var(--color-border);
}

.menu-list__row {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0.75rem 0.125rem;
    border-bottom: 1px solid var(--color-border-light);
}

/* 商品番号。行の先頭に小さく見せる（.menu-photo__noと同じ色・フォント）。 */
.menu-list__no {
    flex-shrink: 0;
    font-family: var(--font-en);
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    color: var(--color-gold);
}

.menu-list__name {
    font-size: 0.9375rem;
    letter-spacing: 0.04em;
    color: var(--color-text);
}

.menu-list__dots {
    flex: 1;
    height: 1px;
    border-bottom: 1px dotted var(--color-border);
    transform: translateY(-0.25rem);
}

.menu-list__price {
    /* 価格は視認性重視でゴシック体に揃える */
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    /* トッピングの「+¥250」などが途中で折り返さないようにする。
       （flexアイテムは既定で縮むので flex-shrink: 0 も合わせて指定） */
    flex-shrink: 0;
    white-space: nowrap;
    color: var(--color-primary-dark);
}

/* 576px未満は1列（縦並び）、576px以上は2カラムに並べる。 */
@media (min-width: 576px) {
    .menu-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--spacing-lg);
    }
}

/* 価格行を持たない（全品同価格の）ブロックは、商品名だけの短い行になるので
   576px未満でも2カラムで並べる。
   ※ カラム間は狭い幅だけ詰めて、576px以上は上の共通値に揃える。 */
.menu-list--noprice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: var(--spacing-sm);
}

@media (min-width: 576px) {
    .menu-list--noprice {
        column-gap: var(--spacing-lg);
    }
}

@media (min-width: 768px) {
    .menu-list {
        column-gap: var(--spacing-xxl);
    }
    .menu-list__name {
        font-size: 1rem;
    }
}

/* ========================================
   選べる組み合わせ
   （ドッツンクラッシュのシロップ・フレーバーなど）
   ※ 価格のない選択肢なので、価格行とは別の見せ方にする。
======================================== */
.menu-choices {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding: var(--spacing-sm) 0 0;
    border-top: 1px dashed var(--color-border);
}

.menu-choice__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.625rem;
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: var(--color-primary-dark);
}

.menu-choice__title::before {
    content: '';
    width: 1rem;
    height: 1px;
    background-color: var(--color-gold);
}

.menu-choice__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem 1.25rem;
}

.menu-choice__item {
    position: relative;
    padding-left: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.8;
    color: var(--color-text);
}

.menu-choice__item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.75em;
    width: 0.25rem;
    height: 0.25rem;
    border-radius: var(--radius-full);
    background-color: var(--color-accent);
}

@media (min-width: 768px) {
    .menu-choices {
        gap: var(--spacing-lg);
    }
    .menu-choice__title {
        font-size: 0.875rem;
    }
    .menu-choice__list {
        gap: 0.5rem 2rem;
    }
}

/* ========================================
   注意書き
======================================== */
.menu-note {
    margin-top: 4rem;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
    font-size: 0.8125rem;
    line-height: 2;
    color: var(--color-text-light);
    text-align: center;
}