@charset "UTF-8";
/*
===============================================================================
 css/sub-menu.css — MENU関連ページ専用CSS（design-to-theme Stage4統合）
 2026-08-03 CSS分割（docs/plans/2026-08-02-css-js-php-refactor.plan.md Step4-5）:
 css/sub.cssから「MENU扉ページ」「GRAND MENUカテゴリ商品一覧（ANGUS/CLASSIC/SIDES/DESSERT）」の
 セレクタをそのまま移設（セレクタ・プロパティ値は無変更）。functions.php側でMENU扉ページ＋
 各カテゴリページ（JP/EN計10ページ）でのみ読み込む。
 商品詳細ポップアップ（.product-modal-*）はcss/sub-product-modal.cssへ分離。
===============================================================================
*/

/*
===============================================================================
 GRAND MENU カテゴリ商品一覧（ANGUS BURGERSページ）
 jp-angus-burgers / en-angus-burgers 共通（差分はfont-familyのみ。8箇所は末尾でhtml[lang]出し分け）
 出典: stage1_drafts/02_jp_angus_location.md §8-A（A-1〜A-7）・§4-1・§4-2・§9
       / stage1_drafts/05_en_angus_location.md 8-A・8-B章
===============================================================================
*/

/*
---menu-heading（H1「GRAND MENU」＋★★★。section-heading共通コンポーネントを流用）
---------------------------------------------------------------------------*/
.menu-heading {
  padding-top: 90px;
  padding-bottom: 0; /* 変更: 35px→0（2026-08-03 C4対応）。この.menu-headingは.menu-heading自身（H1+★★★）ではなく
  layout-section.phpが出力する外側<section>（con リピーター全体＝section-heading/category-tabs/menu-grid/
  menu-note-and-cta全部）に付くACF classである（DOM調査で裏取り済み）。旧35pxはA-2「見出し下余白」の値だが、
  そのA-2の役割（見出し→タブ間の余白）は既にC3対応で.category-tabs{margin-top:35px}側に実装済みのため、
  ここでの35pxは実際にはページ最後の要素（.menu-note-and-cta、A-5仕様で自身が下余白PC51px/SP60pxを
  既に持つ）の直後に二重加算されるだけだった（PC 51+35=86px、design実測は約51-52px相当）。
  0にすることでCTA→フッター間はmenu-note-and-cta自身のpadding-bottomのみで決まり、
  PC 51px・SP 60pxとA-5の実測値に一致する。影響範囲はACF class="menu-heading"を使う
  ANGUS/CLASSIC/SIDES/DESSERT各カテゴリページ（JP/EN計8ページ）のみ（wp postmeta検索で確認済み）。 */
}
@media (max-width: 767px) {
  .menu-heading {
    padding-top: 35px;
  }
}

/*
---category-tabs（カテゴリ切替タブ）／menu-tabs（MENU扉タブ）共通構造
---------------------------------------------------------------------------*/
/* 【2026-08-19統合】前澤さん指摘: MENU扉ページ(.menu-tabs)とカテゴリページ(.category-tabs-list)の
   4項目タブが、SP表示でページごとに整列・区切り線・中央寄せがズレて見える不具合。
   原因は2つのコンポーネントが別々にCSSを書いていたための実装ドリフト:
   - 区切り線: .menu-tabsは区切り線専用<li>+::after疑似要素という壊れやすい方式
     （position:relativeの要素がグリッド内で意図せず縦に伸び、行をまたいで線が繋がって見える
     不具合の原因だった）。.category-tabsはborder-leftベースのシンプルな方式で問題なし
   - 列幅: .menu-tabsはgrid-template-columns:1fr 1fr（固定等幅）、.category-tabsは
     repeat(2, auto)（内容に応じた可変幅）で、そもそも列の決まり方が違っていた
   - JA/EN間: .menu-tabsはhtml[lang="ja"]/[lang="en"]で構造をほぼ丸ごと複製しており
     paddingが28px対27.5pxとわずかに食い違っていた（jp-en-lang-scoped-css-drift）
   これらを解消するため、構造（グリッド・区切り線・余白）を1箇所の非lang-scoped共通ルールに
   統合し、.menu-tabs側のPHPテンプレート（layout-menu_category_cards.php）も区切り線専用<li>を
   廃止してborder-left方式に合わせた。文字色（現在地表示の有無）は意味が異なるため
   各コンポーネント側の定義のまま個別に残置。 */
.category-tabs {
  /* 2026-08-05: 見出し→タブ間の margin-top（PC旧15px / SP旧35px）は css/sub.css の
     「見出し(H1＋★★★) → カテゴリ/アンカーナビ の共通レイアウト」ブロックへ移設。
     PC35px / SP20px に統一され、MENU扉・LOCATIONと同値になる。 */
  padding-bottom: 65px; /* 出典: A-3 下余白 PC65px */
}
@media (max-width: 767px) {
  .category-tabs {
    padding-bottom: 40px; /* 出典: A-3 下余白 SP40px */
  }
}
.category-tabs-list,
.menu-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  row-gap: 35px; /* 出典: 「タブ1行目→2行目35px」。767px超の折返し発生時のみ効く（通常幅では1行に収まる） */
}
.category-tab,
.menu-tabs-item {
  padding: 0 20px; /* 出典: A-3 区切り線左右余白 各20px */
  border-left: 1px solid var(--color-black);
}
.category-tab:first-child,
.menu-tabs-item:first-child {
  border-left: none;
  /* 2026-08-23修正: padding-left:0 を削除（実効 padding: 0 20px に戻す）。等倍デザイン
     (angus_burgers_pc.png / CJ_HP_menu_E_v1_pc.png / menu_pc.png とも同値)のタブ文字インク全域は
     x=368..1029＝中心698.5でコンテナ中心700とほぼ一致するが、先頭だけ左paddingを0にすると
     行全体が右に20px非対称となり中央寄せが10px片寄る（ライブ実測 ink 346.5..1018.5／中心682.5、
     コンテナ中心692.5＝-10px）。SPは下の@media(max-width:767px)で padding:0 15px を明示上書き済み。 */
}
@media (max-width: 767px) {
  .category-tabs-list,
  .menu-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2026-08-23修正: 等倍デザイン(menu_smp.png / angus_burgers_smp.png)の
    区切り線は x=186..188（中心187）＝ul左右端 x=28..347 の中心187.5と一致するが、repeat(2,auto)は
    列幅が内容依存（実測 160.34px / 166.27px）になり区切り線が x=185 へ2.5pxずれていたため等幅化する */
    justify-content: center;
    row-gap: 8px; /* 2026-08-23修正: 0.7rem(7px)→8px（R2でrem→px置換も同時に実施）。デザインの区切り線は
    1行目 y=158..173・2行目 y=181..196 で行ピッチ23px・線長15px。line-height側を15pxにするため
    残り8pxをrow-gapで持たせる（線と線の隙間8pxは2026-08-19に前澤さんが求めた「明確な隙間」を満たす） */
    /* 【2026-08-19再修正の経緯・保存】row-gap:0pxだと1行目と2行目の区切り線（border-left、各行の
       高さぶんだけの短い縦線）が隙間なく接触し、1本の連続した縦線に見えてしまう不具合があり、
       区切り線の視認できる離隔を優先して0px→0.7rem(7px)に変更した。今回の8pxはその意図を維持したまま
       デザイン実測（行ピッチ23px＝線長15px＋隙間8px）へ合わせた値である。 */
  }
  /* 【2026-08-19追記】ベース(PC)側の:first-child{padding-left:0}はSPでは:first-child
     （＝1行目左列のみ）にしか効かず、2行目左列（3番目のアイテム）には効かないため、
     行によって左列の見た目の余白が異なりズレて見えていた。SPでは:first-childかどうかに
     関わらず、偶数番目だけに罫線を付ける方式に統一して両アイテムの余白を揃える。 */
  .category-tab,
  .menu-tabs-item,
  .category-tab:first-child,
  .menu-tabs-item:first-child {
    padding: 0 15px; /* 2026-08-23修正: 20px→15px。デザイン実測（menu_smp.png）で左列文字の右端171〜172と
    区切り線の左端186、右列文字の左端202〜203と区切り線の右端188 → 文字と線の間隔は左右とも約14px、
    区切り線中心187からは15.5px。20pxでは5px広かった */
    border-left: none;
  }
  .category-tab:nth-child(even),
  .menu-tabs-item:nth-child(even) {
    border-left: 1px solid var(--color-black);
  }
  .category-tab a,
  .menu-tabs-item a {
    text-align: center;
    white-space: normal; /* 2列グリッドの狭いセル内で長いラベルでも折返しを許可（PCのnowrapを打ち消す） */
  }
  /* 2026-08-23追記: デザイン（menu_smp.png / angus_burgers_smp.png とも同一）は左列が右揃え・
     右列が左揃えで区切り線に対して揃う。実測: 1行目 文字右端171 / 区切り線187 / 文字左端202、
     2行目 文字右端172 / 区切り線187 / 文字左端203。center揃えのままだと左列の右端が
     1行目163・2行目156（7pxズレ）、右列の左端が212・207（5pxズレ）とバラついていた。 */
  .category-tab:nth-child(odd) a,
  .menu-tabs-item:nth-child(odd) a {
    text-align: right;
  }
  .category-tab:nth-child(even) a,
  .menu-tabs-item:nth-child(even) a {
    text-align: left;
  }
}
.category-tab a {
  display: block;
  /* 2026-08-05: font-weight（旧500）と font-size（旧1.6rem・出典A-3 16px）は css/sub.css の
     共通レイアウトブロックへ移設し、JA/EN別（JA 600・1.6rem / EN 700・2.3rem）に分離した。
     旧定義は言語スコープが無くEN版にもJA用の値が当たっていた。 */
  /* ⚠️【番人コメント 2026-08-05】ナビリンクの font-family / font-size / font-weight を
     ここに書いてはならない。3種のナビ（.menu-tabs-item a / .category-tab a /
     .anchor-nav-item a）の文字仕様は css/sub.css の共通ブロックに集約済みで、そこが
     唯一の定義元。このセレクタ単体は詳細度 (0,1,1) なので共通ブロック (0,2,1) には
     負けるが、html[lang="ja"] / html[lang="en"] のネストで囲むと (0,2,2) になって
     勝ってしまい、エラーも警告も出ないまま JA/EN の統一が静かに崩れる。
     変更が必要な場合は css/sub.css の共通ブロックを直すこと。 */
  color: var(--color-gray);
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}
.category-tab--current a {
  color: var(--color-black);
}
.category-tab:not(.category-tab--current) a:hover {
  color: var(--color-yellow);
}

/*
---menu-grid（商品カードグリッド）
---------------------------------------------------------------------------*/
.menu-grid {
  padding-bottom: 35px;
}
@media (max-width: 767px) {
  .menu-grid {
    padding-bottom: 0; /* 2026-08-23修正: 40px→0。等倍デザイン(jp/angus_burgers_smp.png・
    eng/CJ_HP_menu_E_v1_smp.png)の「最終カード下端→※価格注記のインク上端」はJP 40px／EN 41.4pxだが、
    ライブは85.6〜87.4pxあった。原因はここの40pxと.menu-note-and-cta{padding-top:40px}の二重加算。
    間隔は下の.menu-note-and-cta側のpadding-top 1本で作る（PC側の35pxはSPスコープ外のため据え置き）。 */
  }
}
.menu-grid-list {
  display: grid;
  grid-template-columns: repeat(4, 245px);
  justify-content: center;
  gap: 40px; /* 出典: A-4 列・行ガター PC40px */
  list-style: none;
}
@media (max-width: 1100px) {
  .menu-grid-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
}
@media (max-width: 767px) {
  .menu-grid-list {
    grid-template-columns: repeat(2, 150px);
    gap: 20px 20px;
  }
}

.menu-card-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  padding: 27px 0 16px; /* 2026-08-23修正: 15px 0 → 27px 0 16px。等倍デザインの商品写真インクは
  jp/angus_burgers_pc.png・eng/CJ_HP_menu_E_v1_pc.png とも y=447..556 で完全同値なのに対し、
  ライブは 435..544 と12px上にあった（写真は同一アセット・同一スケール）。カード実高もデザイン245px
  （枠 y=402..646）に対しライブ244px。内訳 27+135(写真)+0(名前mt)+41(名前2行)+2(価格mt)+24(価格lh)+16 = 245px。
  SPは下の@media(max-width:767px)で padding:11px 0 9px を明示上書き済みのため不変。 */
  background-color: var(--color-white);
  border: none;
  border-radius: 10px; /* 出典: A-4 角丸10px */
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2); /* 2026-08-23再修正: 16px/0.22 → 6px/0.2。
  等倍デザインのカード右辺の輝度プロファイル（x=395から外側へ）は jp/angus_burgers_pc.png・
  eng/CJ_HP_menu_E_v1_pc.png とも 214,220,226,233,239,245,249,252,254,254,255 で可視域は約10px。
  16px時のライブは約20px伸びて全体がぼやけていた。候補12通りを実機に当てて総誤差最小だった
  3px 3px 6px rgba(0,0,0,0.2) を採る（適用後の実測 216,221,227,233,239,244,248,251,253,255＝各点最大2/255差）。
  ★2026-08-23午前の16px化はSP等倍からの逆算だったが、SP等倍(CJ_HP_menu_E_v1_smp.png)のカード右辺も
  218,222,227,232,237,241,245,248,251,252,254＝可視域11pxで、6pxのほうがSPでも近い（SP上書きは追加しない）。 */
  cursor: pointer;
  font: inherit;
  text-align: center;
  transition: opacity 0.2s ease;
}
.menu-card-trigger:hover {
  opacity: 0.6;
}
.menu-card-photo {
  position: relative;
  display: block;
  width: 185px; /* 出典: 4-2 商品写真 PC 185×135px */
  height: 135px;
}
.menu-card-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.menu-card-name {
  display: block;
  min-height: 4.1rem; /* 出典: C6 商品名2行時の実高さ41px（line-height 2.05rem×2行）に合わせて3.7rem→4.1remへ引き上げ */
  margin-top: 0; /* 2026-08-23修正: 7px→0（上の padding-top 15px→27px とセット）。デザイン(jp/angus_burgers_pc.png)の
  商品名1行目インク帯は y=566..582。line-height 20.5px時のインク上端オフセットは実測2.72pxなので
  行ボックス上端の目標は563.3、写真ボックス下端が 402.28+27+135=564.28 のため margin-top は0が最小誤差（実測ink 567..582）。 */
  font-weight: 700;
  font-size: 16px; /* 2026-09-11修正: 1.6rem→16px（R2: remをpxへ置換）。html 62.5%基準のため実効値16pxは不変で、記述単位のみ規約へ揃えた */
  line-height: 2.05rem;
  color: var(--color-black);
}
.menu-card-price {
  display: block;
  margin-top: 2px; /* 2026-08-23修正: 7px→2px。デザインの価格インク帯 y=614..627。line-height 24px時の
  インク上端オフセットは実測6.72pxなので価格ボックス上端の目標は607.28、商品名ボックス下端 564.28+41=605.28
  との差が2px。SPは下の@media(max-width:767px)の margin-top:2px が上書きするため不変。 */
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--color-black);
}
/* ★このブロックは必ず @media (min-width: 768px) の中に置くこと: html[lang="en"] を前置すると詳細度が
   (0,2,1)以上になり、SP用の @media (max-width: 767px) 内の同名セレクタ(0,1,0〜0,2,0)を無言で潰して
   SPレイアウトが崩れる（実測でEN SPのページ全高が1509→1582pxに変化した）。 */
@media (min-width: 768px) {
  /* 2026-08-23追記: カード内テキストのPC寸法はJP/ENで異なるため言語スコープで分岐する（上の宣言はJP基準）。
     幅一致法（インク外接矩形）の実測: EN「WESTERN BACON」デザイン146px/ライブ16px時131px → 17.83px、
     「ANGUS BURGER」135/119 → 18.15px、「FAMOUS STAR」118/106 → 17.81px の平均17.93px＝18px。
     JPは同法で17px相当だが、html[lang="ja"] body に font-feature-settings:"palt" 1（2026-08-12 前澤さん指示）が
     掛かっており和文の字送りが詰まっているだけで字面サイズは16pxが正のため、JP側は変更しない。
     ※詳細度は (0,1,1)+(0,1,0)=0,2,1 でベース(0,1,0)に勝つ。 */
  html[lang="en"] .menu-card-name {
    min-height: 42px; /* 2026-08-23修正: 4.1rem(41px)→42px（line-height 21px×2行）。R1に従いpxで記述 */
    margin-top: 1px; /* デザインの商品名1行目インク帯 y=568..581。写真ボックス下端564.28＋1pxで行ボックス565.28→インク568 */
    font-size: 16px; /* 2026-09-11修正: 18px→16px（文字が大きいとの指摘による）。2026-08-23にデザイン実測の幅一致法で18pxとしたが、JPベース(16px)と同値へ揃える。line-heightは単位なし1.1667のため21.0px→18.7pxへ自動追随し、min-height 42px（2行37.4px）は維持される */
    line-height: 1.1667; /* 2026-08-23修正: 2.05rem(20.5px)→1.1667(=21.0px)。デザインの行送りは L1インク上端568→L2 589＝21px。R3に従い単位なし */
  }
  html[lang="en"] .menu-card-price {
    margin-top: 3px; /* デザインの価格インク帯 y=614..627。商品名ボックス下端 565.28+42=607.28 に+3pxで行ボックス610.28 */
    font-size: 16px; /* 2026-09-11修正: 18px→16px（前澤さん指示。商品名を16pxへ戻したのに合わせて価格も揃える）。line-heightは単位なし1.1667のため21.0px→18.7pxへ自動追随 */
    line-height: 1.1667; /* 2026-08-23追記: 宣言が無くbody継承の単位なし1.5（＝18px時27px）になりカード高245pxに収まらないため
    明示して親から独立させる（18px×1.1667＝21.0px。R3に従い単位なし） */
  }
}
@media (max-width: 767px) {
  .menu-card-trigger {
    padding: 11px 0 9px; /* 2026-08-23修正: 7px 0 11px→11px 0 9px。等倍デザインのカードは
    上端234.5・下端384.5＝高さ150px（ライブ154px）。テキスト基準では商品名1行目インク上端が
    カード上端から デザイン89.5px／ライブ85.27px（デザインが約4px下）、価格インク下端→カード下端が
    デザイン14.4px／ライブ17.6px（デザインが約3px小）で、上を厚く下を薄くする配分が正しい。
    内訳 11+69(写真)+6(名前margin)+32(名前2行)+2(価格margin)+21(価格lh)+9 = 150px。 */
  }
  .menu-card-photo {
    width: 100px;
    height: 69px;
  }
  .menu-card-name {
    min-height: 32px; /* 2026-08-23修正: 3.4rem(34px)→32px。下記line-height 16px×2行に追随させる
    （1行の商品でも価格の縦位置が揃うよう2行分を予約する仕様は維持。R1に従いpxで記述）。 */
    margin-top: 6px; /* 出典: C5 150x150px調整 段階2（8px→6px） */
    font-size: 1.3rem;
    line-height: 1.23; /* 2026-08-23修正: 1.7rem(17px)→1.23(=15.99px)。等倍デザイン
    eng/CJ_HP_menu_E_v1_smp.png の商品名2行のインク上端差が6段すべて16px（324→340 ほか）。
    R3に従い単位なし比率で記述する。※jp/angus_burgers_smp.png（和文の商品名）だけは同区間が17px
    （322→339）でコンプ内に1pxの不統一があり、カード高150pxを両言語で満たすためEN実測の16pxに揃えた。 */
  }
  .menu-card-price {
    margin-top: 2px; /* 2026-08-23修正: 6px→2px。商品名2行目インク上端→価格インク上端は
    デザイン20px（JP/ENとも6段すべて 339→359 等）に対しライブ25px。行送り16px化後の内訳
    12.86+m+4.65=20 → m≒2px。 */
    font-size: 14px; /* 2026-09-18修正: 15px→14px（0918改修リスト。前澤さん確認: JP/EN両方のSPに適用・PCは16pxのまま据え置き）。
    line-heightは1.4のままなので行ボックスは21px→19.6pxへ縮む。下のコメントにある「カード高150pxに収める」制約は
    小さくなる方向なので影響しない。
    旧: 2026-08-23修正: 1.4rem(14px)→15px。同一書体内の比率で判定（デザイン画像の
    カード文字はサイト本文と別書体のため幅の直接比較は不可）。デザインの商品名キャップ高8.96pxに対し
    価格の数字高10.48px＝比1.170、ライブは9.35/9.72＝1.040。13px×1.170≒15.2px。
    JP版デザインの価格インク帯も y=359..369（11px）で、14px時のライブ10pxより15px時10.7pxが近い。 */
    line-height: 1.4; /* 2026-08-23追記: font-sizeを上げるとbody継承の単位なし1.5では21px→22.5pxになり
    カード高が150pxに収まらないため、従前と同じ21px（15px×1.4）を明示して親から独立させる（R3: 単位なし）。 */
  }
}

/*
---menu-note-and-cta（価格注記＋アレルゲンボタン）
---------------------------------------------------------------------------*/
.menu-note-and-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding-top: 57px; /* 2026-08-23修正: 92px→57px（JP基準。ENは下のhtml[lang="en"]ブロックで上書き）。
  等倍デザイン(jp/angus_burgers_pc.png)の黄色ピル矩形は y=1309..1338（yellowマスク R>225,G>160,B<130 実測、
  x=535..864）、最終行カード下端は y=1217（影の立ち上がり）。.menu-grid{padding-bottom:35px}と合算した
  グリッド下端→ピル上端はデザイン92pxに対しライブ127pxだった。ライブのグリッド下端1217.28＋35＋57＝
  ピル上端1309.28でデザイン1309と一致する（実測）。 */
  padding-bottom: 51px; /* 据え置き: デザインのピル下端1339→フッター黒帯上端1390＝51pxと一致 */
}
.menu-note-and-cta-note {
  position: absolute;
  right: 0;
  font-weight: 400;
  font-size: 1.4rem; /* 出典: 3-2 14px */
  color: var(--color-black);
}
/* ★このブロックは必ず @media (min-width: 768px) の中に置くこと: html[lang="en"] を前置すると詳細度が
   (0,2,1)以上になり、SP用の @media (max-width: 767px) 内の同名セレクタ(0,1,0〜0,2,0)を無言で潰して
   SPレイアウトが崩れる（実測でEN SPのページ全高が1509→1582pxに変化した）。 */
@media (min-width: 768px) {
  /* 2026-08-23追記: 注記＋CTAセクションの上下余白はJP/ENで異なる（黄色ピルの縦位置が等倍デザインで
     JP y=1309..1338／EN y=1295..1327 と14px違うため）。JP/ENとも上下合計110pxでページ全高1590px（デザイン同値）になる。 */
  html[lang="en"] .menu-note-and-cta {
    padding-top: 43px; /* 2026-08-23修正: 92px→43px。デザイン(CJ_HP_menu_E_v1_pc.png)の黄色ピル上端 y=1295。
    ライブのグリッド下端1217.28＋.menu-grid の padding-bottom 35px＋43px＝ピル上端1295.28（実測）。 */
    padding-bottom: 65px; /* 2026-08-23修正: 51px→65px。ピル下端1325.28→フッター黒帯上端1390（デザイン1390）。 */
  }
}
/* pill-button--wide は common.css の .pill-button を拡張するページ固有モディファイア */
/* 2026-08-04: デザイン仕様変更によりPC固定幅330pxを廃止。common.cssのpadding 0 35pxで可変幅化 */
.menu-note-and-cta .pill-button {
  font-size: 15px; /* 2026-08-23修正: 1.6rem(16px)→15px（R2でrem→px置換）。JP等倍のピル内文字インク幅は
  x=581..818＝238px（ピル内 max<100 で実測）に対しライブ16px時248px → 16×238/248＝15.35px。EN等倍は326px
  （x=514..883のピル内）に対しライブ16px時359px → 14.49px。支給PDF CJ_PC_back_0821.pdf p.2 の
  「Noto Sans JP 文字15pt SemiBold」とも整合するため両言語の中間となる15pxを採る。
  2026-08-05の経緯: 共通の.pill-buttonは他ページ（TOP・MENU扉・404）と共有のため触らずコンテナ限定で上書きする。
  font-weightは700据え置き（600を当てるとインク幅がEN331/JP230となり700時のEN337/JP233より等倍から遠ざかるため）。 */
}
@media (max-width: 767px) {
  .menu-note-and-cta {
    flex-direction: column;
    gap: 9px; /* 2026-08-23修正: 15px→9px。注記インク下端→黄色ピル上端はデザインJP 16px（1286→1302）／
    EN 15px（1288→1303）に対しライブ21.6〜23px。注記の行ボックス下半（JP 6.77px／EN 6.57px）を
    差し引くとJP 9.2px・EN 8.4pxとなり、両言語の誤差が最小になる9pxを共通値とする。 */
    padding-top: 35px; /* 2026-08-23修正: 40px→35px（上の.menu-grid{padding-bottom:0}とセット）。
    最終カード下端→注記インク上端はデザインJP 40.5px（1234.5→1275）・EN 41.5px（1234.5→1276）。
    注記の行ボックス上端〜インク上端は適用後の実測で両言語とも5.6px → 必要padding JP 34.9px・EN 35.9px。
    共通値35pxで実測 JP 40.6px（+0.1）・EN 40.6px（−0.9）に収まる。 */
    padding-bottom: 60px;
  }
  .menu-note-and-cta-note {
    position: static;
    font-size: 1.4rem; /* EN据え置き: デザイン(CJ_HP_menu_E_v1_smp.png)の "* All prices include tax" の
    インク帯は y=1275..1288 の14行でライブ14px時と完全一致するため変更しない（JPのみ下でSP 13pxへ） */
  }
  html[lang="ja"] .menu-note-and-cta-note {
    font-size: 13px; /* 2026-08-23修正: JPのみ1.4rem(14px)→13px。和文は全角送り＝font-sizeそのものなので
    書体差の影響を受けない。デザイン(angus_burgers_smp.png)の「※価格は全て税込み表示」インク幅139px
    （12文字）に対しライブ14px時は150px、13px時は139pxで完全一致（インク高もデザイン12px＝13px時12px）。
    ENは上記のとおり14pxが正のため、共通ルールではなく言語スコープで分ける。 */
  }
  .menu-note-and-cta .pill-button {
    /* 2026-08-23修正: JP基準の値。ENは長文のため直下のhtml[lang="en"]ブロックで上書きする。 */
    min-height: 26px; /* 2026-08-23修正: .pill-button--wideの33pxを上書き（詳細度0,2,0>0,1,0）。
    デザインの黄色ピルの外接矩形はJP y=1302..1327／EN y=1303..1328＝高さ26pxでJP/EN共通。
    --wide自体は他ページ共有の可能性があるため触らずコンテナ限定で上書きする。 */
    padding: 0 54px; /* 2026-08-23修正: common.cssの 0 35px を上書き。デザインJPのピル幅310px
    （x=34..343）に対し内部インク幅206px → 左右余白 (310-206)/2 = 52px。13px時の実測送り幅202.95pxと
    合わせて 202.95+108 = 310.95px ≒ 310px。 */
    font-size: 13px; /* 2026-08-23修正: 1.5rem(15px)→13px。デザインJPの「エネルギー・アレルゲン情報は
    こちら」のインク幅206px（x=85..290）に対しライブ15px時は233px → 15×206/233＝13.26px。
    13px適用時のインク実測は201px/高12px（デザイン206/12）。同セクションの注記も13pxで一致するため揃えた。 */
  }
  html[lang="en"] .menu-note-and-cta .pill-button {
    /* 2026-08-23追記: EN専用。デザイン(CJ_HP_menu_E_v1_smp.png)ではENのCTAも1行（ピル 320×26px、
       x=29..348 / y=1303..1328）だが、ライブは15px＋左右35pxで2行（高さ45px）になっていた。 */
    padding: 0 16px; /* デザインの左右余白は18〜19px（ピルx=29..348 に対し文字インクx=47..328）。
    ボタン幅は親コンテンツ幅319pxで固定のため18pxだと内寸283pxに対し文字送り282.28pxで余裕0.7pxしかなく、
    フォント読込差で容易に2行へ折り返す。安全側の16px（内寸287px）を採用する。 */
    font-size: 12.5px; /* デザインの文字インク幅282px（x=47..328）。Noto Sans JP 700 で
    "Click here for energy and allergen information" をレンダリングすると 12.5px で送り282.28px・
    インク282×14pxとなりデザインと一致（13px:293.58 / 12px:270.98）。逆算 15×282/338.73＝12.49pxとも一致。 */
  }
  .pill-button--wide {
    min-height: 33px; /* 2026-08-04: height固定→min-heightに変更。折り返して2行になった場合に
    高さが自動で伸びるようにする（デザイン仕様 SP例外値・PC36pxと異なる）
    ※2026-08-23: MENU下層のCTAは上の.menu-note-and-cta .pill-button{min-height:26px}が優先される。 */
  }
}


/*
===============================================================================
 MENU扉ページ（GRAND MENU カテゴリ一覧） — JP版 html[lang="ja"]
 出典: stage1_drafts/01_jp_top_menu.md §8 S-11〜S-12
===============================================================================
*/
/* 2026-08-18 Phase3-a: JP/EN完全一致（PC 90px・SP 30px）のため html[lang="ja"]/html[lang="en"] の
   重複ブロックを統合。出典(JP): 2026-08-02修正: 誤ってSP用の値をPC(無指定)ブロックに適用していた
   バグを修正。S-11仕様PC欄「ヘッダー→見出し90px」が正しいPC値（margin-topだと共通CSSの
   .container > :first-child { margin-top: 0 !important; }に打ち消されるためpadding-topを継続使用） */
.menu-page-title {
  padding-top: 90px;
  text-align: center;
}
@media (max-width: 767px) {
  .menu-page-title {
    padding-top: 37px; /* 2026-08-23修正: 等倍デザイン(jp/menu_smp.png・eng/CJ_HP_menu_tobira_E_v1_smp.png)
    でヘッダー黒帯下端y=64・GRAND MENUインク上端y=100。ライブは30pxでインク上端y=93だったため+7px
    （JP/EN/カテゴリページの3デザインとも同一実測値。旧「ピンク注記30px」より実測を優先） */
  }
}
/* 【2026-08-19】.menu-tabsの構造（display/grid/区切り線/padding/row-gap）とその区切り線専用
   <li>(.menu-tabs-divider)は上の「category-tabs／menu-tabs共通構造」ブロックへ統合したため、
   ここには文字色（ホバー・現在地表示）のみを残す。 */
html[lang="ja"] {
  .menu-tabs-item a {
    display: block;
    /* 2026-08-05: font-family・font-weight（600）・font-size（1.6rem）は css/sub.css の
       共通レイアウトブロックへ移設（ナビ書体はJA/EN共通の単一情報源にした）。 */
    /* ⚠️【番人コメント 2026-08-05】ナビリンクの font-family / font-size / font-weight を
       ここに書いてはならない。3種のナビ（.menu-tabs-item a / .category-tab a /
       .anchor-nav-item a）の文字仕様は css/sub.css の共通ブロックに集約済みで、そこが
       唯一の定義元。この位置は html[lang="ja"] のネスト内で詳細度 (0,2,2) となり、
       共通ブロックの (0,2,1) に勝ってしまうため、1行書くだけでエラーも警告も出ないまま
       JA/EN の統一が静かに崩れる（今回の改修が潰したのと同種の事故の再発経路）。
       変更が必要な場合は css/sub.css の共通ブロックを直すこと。 */
    color: var(--color-black);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
  }
  .menu-tabs-item a.is-current {
    color: var(--color-yellow);
  }
  .menu-tabs-item a:hover {
    /* 2026-08-21修正: EN側に既にある.menu-tabs-item a:hoverと同じパターンをJP側にも追加(ホバーで黄色に) */
    color: var(--color-yellow);
  }
}

/*
---menu-category-cards（カテゴリカード 2×2）
---------------------------------------------------------------------------*/
/* 2026-08-18 Phase3-a: JP/EN完全一致のため html[lang="ja"]/html[lang="en"] の重複ブロックを統合
   （margin-top/padding-bottom/gap・.menu-category-card border-radius・.menu-category-card-badge全体・
   .menu-category-card-body padding）。出典(JP margin-top): S-11仕様PC欄「タブ→カード85px」 */
.menu-category-cards {
  margin-top: 85px;
  padding-bottom: 110px;
  gap: 60px;
}
.menu-category-card {
  border-radius: 15px;
  position: relative; /* 2026-08-21追記: SPの.menu-category-card-full-link(ストレッチリンク)を
  絶対配置するための基準にするため追加(既存のposition指定は無かったため確認のうえ追加) */
}
.menu-category-card-media-link {
  /* 2026-08-21追記: 写真部分をVIEW ALLと同じ遷移先のリンクにする(ストレッチリンク)。
     カーソルをポインタ表示にするだけで半透明化等の視覚効果は追加しない。
     .menu-category-card-mediaは各lang-scopedブロックでposition:relative指定済みのためここでは追加しない。 */
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  cursor: pointer;
}
.menu-category-card-full-link {
  display: none; /* 2026-08-21追記: SP専用ストレッチリンク(classic-burgersカードのみ)。PCでは非表示 */
}
.menu-category-card-badge {
  /* 2026-08-23修正(PC): SP側(2026-08-23に70→80px)と同じ「object-fit:containのため箱寸法より円が
     小さくなる」不具合がPC側に残っていた。デザイン(jp/menu_pc.png・eng/CJ_HP_menu_tobira_E_v1_pc.png
     は当該領域が同一画素)のCLASSICカードのバッジ黒円を黄色地に出ている部分(y=723..752)の左右エッジで
     最小二乗円フィットすると 中心(598.05, 701.26)・直径103.05px(残差0.43px)。ライブ(箱100px)は直径91.4px。
     箱112px/right17px/bottom-36px を当てて同一手順で再フィットすると直径103.09px・カード右端からの
     中心距離73.00px(デザイン72.95px)・本文ブロック上端からの中心オフセット−20.66px(デザイン−20.57px)で
     3指標とも一致する（箱114/right15/bottom-37 は直径103.44・72.48・−19.96で劣る）。 */
  position: absolute;
  right: 17px;
  bottom: -36px;
  width: 112px;
  height: 112px;
  object-fit: contain; /* 2026-08-02修正: バッジ画像(AUSSIE_BEEF_icon.png等)が
  正方形でない元画像比率を持つため、固定サイズの正方形枠にfill(既定値)で
  引き伸ばされ縦横比が崩れて表示されていた。containで元画像比率を保持する */
}
.menu-category-card-body {
  padding: 27px 30px 30px; /* 2026-08-23修正: 上paddingのみ 25px→27px。等倍デザインの本文ブロック上端721.83に対し
  英名タイトル(.menu-category-card-title-en, text-box-trim:trim-both)のインク上端は JP(jp/menu_pc.png)・
  EN(CJ_HP_menu_tobira_E_v1_pc.png)とも y=748＝相対26.17で、ライブは相対24.17だった。左右30px・下30pxは変更しない。
  ※JP扉は英名タイトルの下に和名サブタイトルがあり、+2pxがそのまま下の要素へ伝播するため、
  下の html[lang="ja"] .menu-category-card-title-ja の margin-top を 5px→3px にして相殺する
  （和名以下の相対値 58.17/85.17/170.17 は現状で等倍デザインと一致しているため動かさない）。
  SPは@media(max-width:767px)の .menu-category-card-body{padding:20px 30px 25px} が後置・同詳細度で勝つため不変。 */
}
.menu-category-card-btn-wrap .pill-button {
  min-width: 162px; /* 2026-08-23追記: デザインのカード内ピルは JP(menu_pc.png)・EN(CJ_HP_menu_tobira_E_v1_pc.png)
  とも x=330..491 ＝ 幅162px固定で、文字幅が違っても幅が変わらない（top_pc.pngの黄ピルも162px）。
  ライブは142.06px（文字インク72px＋左右padding35px）だった。common.css の .pill-button 本体の
  padding:0 35px はTOP・404・カテゴリと共用のため触らず、幅だけをここで下限指定する。
  SPは下の@media(max-width:767px)で min-width:0 を明示維持（SPデザインの実測幅は120px）。 */
}
@media (max-width: 767px) {
  .menu-category-cards {
    margin-top: 39px; /* 2026-08-23修正: 40px→39px。デザイン実測（menu_smp.png）タブ2行目の区切り線下端 y=196 →
    カード1上端 y=235。タブのline-height/row-gap変更後、39pxでカード上端rectが235.38pxとなり一致する */
    padding-bottom: 58px; /* 2026-08-23修正: デザイン実測（menu_smp.png）最終カード下端 y=2087 →
    フッター黒帯上端 y=2146 ＝白58px（ライブは60px） */
    gap: 50px; /* デザイン実測 51/50/50px。現行のままで一致するため変更しない */
  }
  .menu-category-card {
    border-radius: 5px;
  }
  .menu-category-card-badge {
    /* 2026-08-23修正: バッジ円の直径がデザインより約14%小さかった。デザイン(menu_smp.png)の
       円弧を弦幅から最小二乗フィットすると直径71.9px・円右端x=330.1、ライブは直径62.9px。
       object-fit:contain のため箱70pxでも円は62.9px(比率0.899)にしかならないので
       箱を 70×71.9/62.9 ≒ 80px にする。right は箱中心のずれから 347−294.1−40 ≒ 13px。 */
    width: 80px;
    height: 80px;
    right: 13px;
    bottom: -18px; /* 2026-08-23修正: -20px→-18px。円の弦幅実測でデザインの円下端はカード本文ブロック上端の
    14px下（JP menu_smp.png・EN CJ_HP_menu_tobira_E_v1_smp.png とも y=449 で本文上端435）。
    object-fit:contain の上下余白約4pxを差し引くと箱下端は本文上端+18px */
    object-fit: contain; /* 2026-08-02修正: PC版と同様、非正方形の元画像比率を保持 */
  }
  .menu-category-card-body {
    padding: 20px 30px 25px; /* 2026-08-23修正: 左右27px→30px。デザイン(EN CJ_HP_menu_tobira_E_v1_smp.png)の
    カード左端 x=28 に対し説明文インク左端 x=58〜59 ＝ 左右padding 30px。上下(20px/25px)は
    デザインと一致済みのため据え置き。※JP版は本文の折返し行数の都合で26pxへ上書きする（下記 html[lang="ja"] SPブロック） */
  }
  .menu-category-card-btn-wrap .pill-button {
    /* 2026-08-23追記: カード内VIEW ALLボタンのSP寸法。デザイン実測で白/黄ピルとも
       4枚すべて y高26px・x=128..247（幅120px）、文字「VIEW ALL」のインクは68×11px。
       ライブは 145×36px・インク76×13px だったため 17×68/76 ≒ 15px、左右paddingは
       (120−67.6)/2 ≒ 26px。common.css の .pill-button 本体はTOP/404/カテゴリと共用のため触らず、
       カード内に限定したスコープ（詳細度0,2,0）で上書きする。 */
    min-height: 26px;
    padding: 0 26px;
    font-size: 15px;
    min-width: 0; /* 2026-08-23追記: 上のPC共通ブロックへ min-width:162px を追加したため、
    SPの従来値（padding由来の実測幅119.55px＝デザイン120px）を明示的に維持する。 */
  }
  .menu-category-card--outline .menu-category-card-body {
    /* 2026-08-21修正: SPでは.menu-category-card自身のborder-radiusが5pxになるため、
       罫線側のbottom radiusもPC(15px)からSP(5px)へ合わせる */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
  }
  .menu-category-card--yellow .menu-category-card-full-link {
    /* 2026-08-21追記: SPのみclassic-burgersカード(--yellow)をカード全体クリック可能にする
       ストレッチリンク。PCでは項目2の通り写真部分のみリンク(media)のまま。
       2026-08-21修正(動作確認で判明): body/mediaのz-indexをfull-linkより高くすると、
       本文(タイトル・説明文)の背景が持つ透明な当たり判定がfull-linkより手前に来てしまい、
       写真とVIEW ALLボタン以外の範囲(本文の余白部分)がクリックできなくなる実測不具合があったため、
       z-indexの前後関係を逆にした(full-linkを最前面にする)。VIEW ALL/写真リンクもfull-linkと
       同じ遷移先のため、マウスでfull-linkが優先的にヒットしても遷移結果は変わらず、
       キーボード操作(Tab+Enter)は要素そのものにフォーカスするためz-indexの影響を受けない。 */
    display: block;
    position: absolute;
    inset: 0;
    z-index: 2;
  }
  .menu-category-card--yellow .menu-category-card-body,
  .menu-category-card--yellow .menu-category-card-media {
    position: relative;
    z-index: 1;
  }
}
html[lang="ja"] {
  .menu-category-cards {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 520px));
    justify-content: center;
    list-style: none;
  }
  .menu-category-card {
    overflow: hidden;
    height: 100%; /* 2026-08-05修正(カード高さ揃え): 親ul.menu-category-cardsはdisplay:gridで
    align-items:normal(=stretch)のため、グリッドアイテムであるliは行内で既に高さが揃っている。
    しかしその内側のこの.menu-category-cardがheight:autoだとliの高さを埋めず、説明文の行数差が
    そのままカード下端の段差になっていた。height:100%でliの行高を継承する。
    ※PC2列表示(1100px以上)でのみ効く。SP/タブレットは1列grid＝行内に他カードが無いため実質no-op */
    display: flex; /* 2026-08-05修正: 上のheight:100%で確保した余剰高さをbody→descへ配分するための
    フレックスコンテナ化。blockのままだと子が余剰高さを受け取れずカード下部に空白が残る。
    ※子の.menu-category-card-mediaにflex-shrink:0を付けていないのは、height:100%がgridアイテム(li)の
    stretch由来でコンテナ高がコンテンツ高を下回る状況が構造上起きず（JA側mediaはmin-height:300px）、
    実測35ケースで写真が潰れなかったため。将来.menu-category-cardsのgridに固定row heightや
    align-items:startを入れるとこの前提が崩れるのでflex-shrink:0の付与を検討すること */
    flex-direction: column;
    text-decoration: none;
    transition: opacity 0.2s ease;
  }
  .menu-category-card-media {
    position: relative;
    min-height: 300px;
    background-color: rgba(0, 0, 0, 0.08);
  }
  .menu-category-card-photo {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
  }
  .menu-category-card-body {
    flex: 1 1 auto; /* 2026-08-05修正(カード高さ揃え): 親.menu-category-cardのflex余剰高さを
    このbodyが受け取る。mediaは固定高さ(300px)なので余剰は必ずbody側に来る */
    display: flex; /* 2026-08-05修正: 受け取った余剰高さをさらに子のdescへ渡すためのコンテナ化 */
    flex-direction: column;
    text-align: center;
  }
  .menu-category-card-title-en {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 3.2rem;
    text-transform: uppercase;
    text-align: center; /* 2026-08-02修正: SP版で親.menu-category-card-bodyがtext-align:leftに
    切り替わり左寄せになっていたため、要素自体に明示指定してPC/SP共通で中央揃えにする */
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  .menu-category-card-title-ja {
    margin-top: 3px; /* 2026-08-23修正: 5px→3px。上の .menu-category-card-body の padding-top を 25→27px に
    したぶんを相殺し、和名サブタイトル以下（和名インク上端 相対58.17・説明文85.17・ピル170.17＝いずれも
    jp/menu_pc.png の実測値と一致）の位置を維持する。 */
    font-family: var(--font-body-jp);
    font-weight: 500;
    font-size: 1.3rem;
    text-align: center; /* 2026-08-02修正: 同上（SP版の親text-align:left継承による左寄せを解消） */
  }
  .menu-category-card-desc {
    flex: 1 1 auto; /* 2026-08-05修正(カード高さ揃え): カードの余剰高さの最終的な吸収先。
    ★btn-wrap側に margin-top:auto を置く実装は禁止（実測で回帰確認済み）。あれは既存の
    margin-top:20px を打ち消すため、余剰高さがゼロのカードで説明文→ボタン間が20px→0pxに潰れる
    （JA PC 545.8→525.8 等、全ビューポートで-20pxの回帰を実測）。desc側に吸収させれば
    btn-wrapのmargin-top:20pxは無傷のまま、説明文ブロックだけが伸びる。 */
    margin-top: 4px; /* 2026-08-23修正: 9px→4px。PC等倍デザイン(jp/menu_pc.png)のカード1は本文ブロック上端721.83に対し
    和文サブタイトルのインク上端 y=780(相対58.17)・説明文1行目のインク上端 y=807(相対85.17)。ライブは 766(58.17)・
    798(90.17) で説明文だけが5px下だった。カード3(SIDES)でも同じ相対値(57.17/85.17)。
    ※2026-08-03の9pxは docs/design-pixel-check/ の縮小画像基準で、等倍デザインでの再実測により改訂。 */
    font-family: var(--font-body-jp);
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 2.5rem; /* 2026-08-03確認(design-pixel-fix M3): デザイン画像実測の結果、本文3行の
    行送り（行頭〜次行頭の距離）はデザイン・実装とも25px相当で一致していたため変更していない
    （計画書のM3は「line-height 25px相当が広すぎる」という前提だったが、実測では現状値が既に
    デザインと一致しており根拠が無かった。受入契約2026-08-03-design-pixel-fix.contract.mdでも
    M3/M7のline-height具体的目標値は対象外と明記済み）。 */
  }
  .menu-category-card-btn-wrap {
    margin-top: 15px; /* 2026-08-23修正: 20px→15px。PC等倍デザイン(jp/menu_pc.png)のカード1は本文ブロック上端721.83に対し
    白ピル上端 y=892(相対170.17)、ライブは 888(180.17)。M5(説明文margin-top 9→4px)と合わせると
    本文ブロック高が 239.8→229.8px となりデザインの黄色地230px(y=722..951)・カード高530pxに一致する。 */
    text-align: center; /* 2026-08-05修正: SP版で親.menu-category-card-bodyがtext-align:leftに
    切り替わりVIEW ALLボタン(inline-flex)が左寄せになるため、要素自体に明示指定してPC/SP共通で中央揃えにする */
  }
  .menu-category-card--yellow {
    background-color: var(--color-yellow);
  }
  .menu-category-card--yellow .menu-category-card-title-en,
  .menu-category-card--yellow .menu-category-card-title-ja,
  .menu-category-card--yellow .menu-category-card-desc {
    color: var(--color-black);
  }
  .menu-category-card--black {
    background-color: var(--color-black);
  }
  .menu-category-card--black .menu-category-card-title-en,
  .menu-category-card--black .menu-category-card-title-ja,
  .menu-category-card--black .menu-category-card-desc {
    color: var(--color-white);
  }
  .menu-category-card--outline {
    background-color: var(--color-white);
  }
  .menu-category-card--outline .menu-category-card-body {
    /* 2026-08-21修正: 罫線がカード全体(写真部分にも)掛かって見えていたため.menu-category-card--outline
       自身からborderを外し、写真より下の.menu-category-card-body側にのみ掛かるよう移動。border-topは
       付けず写真と地続きに見せる。bottom側のradiusは.menu-category-card自身のborder-radius:15pxに合わせ、
       親のoverflow:hiddenによる角の切り抜きと線の角がずれないようにする。
       2026-08-23修正: 1px→2px。PC等倍デザイン(jp/menu_pc.png)の y=1400/1450/1500 水平走査で
       左罫線が x=150,151 の2列・右罫線が x=670,671 の2列とも完全な(255,199,44)＝2px。
       ライブは左右とも1列(1px)だった。EN(CJ_HP_menu_tobira_E_v1_pc.png)も同一。
       SPデザイン(menu_smp.png)は x=27,28 の2列が被覆率0.75＝実効1.5pxで現行1pxとの差が小さいため、
       下の@media(max-width:767px)ブロックで従来の1pxを明示維持する。 */
    border-left: 2px solid var(--color-yellow);
    border-right: 2px solid var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .menu-category-card--outline .menu-category-card-title-en,
  .menu-category-card--outline .menu-category-card-title-ja,
  .menu-category-card--outline .menu-category-card-desc {
    color: var(--color-black);
  }
}
@media (max-width: 767px) {
  html[lang="ja"] .menu-category-cards {
    grid-template-columns: 1fr;
    max-width: 319px;
    margin-left: auto;
    margin-right: auto;
  }
  html[lang="ja"] .menu-category-card-photo {
    height: 200px;
  }
  html[lang="ja"] .menu-category-card-media {
    min-height: 200px;
  }
  html[lang="ja"] .menu-category-card-body {
    text-align: left;
    padding-left: 26px; /* 2026-08-23修正: 共通SPの30pxをJPのみ26pxへ。デザイン実測の左右paddingは約30pxだが、
    30pxのままだと説明文がCLASSIC/SIDESで4行になり最終行に「す。」等が1〜2文字だけ落ちる（前澤さん指摘M2）。
    font-size 15px（下記）と26pxの組合せで CLASSIC/ANGUS/SIDES が3行に収まり孤立行が解消することを実測。 */
    padding-right: 26px;
  }
  html[lang="ja"] .menu-category-card--outline .menu-category-card-body {
    /* 2026-08-23修正(M4): 上の非lang-scoped SP指定（詳細度0,2,0）が html[lang="ja"] ネスト内の
       PC用15px指定（実効詳細度0,3,1）に負けており、SPでも実効値が15pxのままだった。
       デザイン(menu_smp.png)のSIDES&SALADSカード左下は曲率区間約4px＝角丸4〜5px相当のため、
       同じ詳細度(0,3,1)＋後置でSPの5pxを効かせる。 */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-width: 1px; /* 2026-08-23追記: 上のPC共通指定を1px→2pxへ変えたため、SPは従来の1pxを明示維持する
    （SPデザイン(menu_smp.png)の罫線は2列×被覆率0.75＝実効1.5pxで、現行1pxとの差が0.5pxと小さいため据え置き）。 */
  }
  html[lang="ja"] .menu-category-card-title-en {
    font-size: 25px; /* 2026-08-23修正: 3.2rem(32px)→25px。デザイン(menu_smp.png)の
    "CLASSIC BURGERS" インク幅159px(x=108..266)に対しライブ203px(x=86..288) → 32×159/203＝25.06px。
    4カードすべてで一致（24.83〜25.12px）。キャップ高もデザイン18pxに対しライブ23px → 32×18/23＝25.0px。
    PC(3.2rem)はSPスコープ外のため据え置く。 */
  }
  html[lang="ja"] .menu-category-card-title-ja {
    margin-top: 3px; /* 2026-08-23修正: 5px→3px。英字タイトルのインク上端→和文サブタイトルのインク上端は
    デザイン27px（3カードとも）に対しライブ34px。うち4.91pxは英字タイトル箱高の縮小(22.41→17.5px)で解消し、
    残差約2pxをここで吸収する。 */
  }
  html[lang="ja"] .menu-category-card-desc {
    margin-top: 5px; /* 2026-08-23修正: 9px→5px。和文サブタイトルのインク上端→説明文1行目のインク上端は
    デザイン27〜28px（menu_smp.png カード1 y=482→510 / カード2 970→997 / カード4 1901→1928）に対し
    ライブ31〜32pxで一貫して+4〜5px広かった。 */
    font-size: 15px; /* 2026-08-23修正(M2主因): 1.6rem(16px)→15px。デザイン(menu_smp.png)ANGUSカード
    説明文1行目の和文アドバンス（グリフ開始位置の間隔）は一貫して15pxだが、ライブは16pxだった
    （デザイン x=59,74,89,104… / ライブ x=56,72,88,104…）。1行あたり1文字少なくなるため
    CLASSIC/ANGUSが4行に溢れ最終行に2文字だけ落ちていた。 */
    line-height: 1.6667; /* 2026-08-23修正: 2.5rem(25px)→単位なし1.6667（15px×1.6667＝25.0px）。
    行送り25pxはデザイン（カード1 y=510→535→560、カード4 y=1928→1953→1978）と既に一致しており、
    font-size変更後も25pxを維持する必要があるため比率へ置き換えた（R3: line-heightは単位なし）。 */
  }
  html[lang="ja"] .menu-category-card-btn-wrap {
    margin-top: 14px; /* 2026-08-23修正: 20px→14px。説明文最終行のインク上端→ボタンピル上端は
    デザインの4行カードで33〜34px（カード1 y=586→619 / カード4 y=2004→2038）に対しライブ39px。
    ※デザイン画像は3行カード（ANGUS/SIDES）だけ同区間が38px前後とコンプ内で不統一のため、
    4行カード基準で決定している。 */
  }
  html[lang="ja"] .menu-category-card-desc br {
    display: none; /* 2026-08-05修正: SPでは改行せず繋げて表示する（左寄せは親.menu-category-card-bodyのtext-align:leftで既に適用済み） */
  }
}


/*
===============================================================================
 MENU扉ページ（GRAND MENU カテゴリ一覧） — EN版 html[lang="en"]
 出典: stage1_drafts/04_en_top_menu.md 8-8・8-9
===============================================================================
*/
/* 【2026-08-19】.menu-tabsの構造は上の「category-tabs／menu-tabs共通構造」ブロックへ統合したため、
   ここには文字色（ホバー）のみを残す。 */
html[lang="en"] {
  .menu-tabs-item a {
    display: block;
    color: var(--color-black);
    text-decoration: none;
    text-transform: uppercase;
    /* 2026-08-05: font-family（旧--font-body-en）・font-weight（旧700）・font-size（旧2.3rem）は
       css/sub.css の共通レイアウトブロックへ移設し、JAと同値（Noto Sans JP / 600 / 1.6rem）に
       統一した。この宣言は後発かつ詳細度0,2,2で統合ルール(0,2,1)を上書きするため削除必須。 */
    /* ⚠️【番人コメント 2026-08-05】ナビリンクの font-family / font-size / font-weight を
       ここに書いてはならない。3種のナビ（.menu-tabs-item a / .category-tab a /
       .anchor-nav-item a）の文字仕様は css/sub.css の共通ブロックに集約済みで、そこが
       唯一の定義元。この位置は html[lang="en"] のネスト内で詳細度 (0,2,2) となり、
       共通ブロックの (0,2,1) に勝ってしまうため、1行書くだけでエラーも警告も出ないまま
       JA/EN の統一が静かに崩れる（今回の改修が潰したのと同種の事故の再発経路）。
       変更が必要な場合は css/sub.css の共通ブロックを直すこと。 */
    white-space: nowrap;
  }
  .menu-tabs-item a:hover {
    color: var(--color-yellow);
  }
}

/*
---menu-category-cards（8-9・P6）
---------------------------------------------------------------------------*/
html[lang="en"] {
  .menu-category-cards {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 520px));
    justify-content: center;
    list-style: none;
  }
  .menu-category-card {
    overflow: hidden;
    height: 100%; /* 2026-08-05修正(カード高さ揃え): 親ul.menu-category-cardsはdisplay:gridで
    align-items:normal(=stretch)のため、グリッドアイテムであるliは行内で既に高さが揃っている。
    しかしその内側のこの.menu-category-cardがheight:autoだとliの高さを埋めず、説明文の行数差
    （EN版は2行=50px / 3行=75pxが混在）がそのままカード下端の25px段差になっていた。
    height:100%でliの行高を継承する。※PC2列表示(1100px以上)でのみ効く。
    1099px以下は1列grid＝行内に他カードが無いため実質no-op。
    ※JA版ブロックにも同内容を書いている。このセクションはhtml[lang="ja"]/html[lang="en"]の
    ネスト構造で実効詳細度(0,2,1)（html[lang="x"]=属性1+型1で(0,1,1) ＋ .menu-category-cardの(0,1,0)）
    のため、非スコープの共通ブロックは後置しても負ける（クラス単体(0,1,0)はもちろん、
    .menu-category-cards .menu-category-card のようなクラス2個だけの組でも足りない）。
    後置で上書きするには(0,2,1)以上（例 ul.menu-category-cards .menu-category-card）が必要なので、
    共通ブロックへ切り出さず既存のJA/EN 2ブロック内へ書いている（2026-08-05 実測検証済み） */
    display: flex; /* 2026-08-05修正: 上のheight:100%で確保した余剰高さをbody→descへ配分するための
    フレックスコンテナ化。blockのままだと子が余剰高さを受け取れずカード下部に空白が残る。
    ※子の.menu-category-card-mediaにflex-shrink:0を付けていないのは、height:100%がgridアイテム(li)の
    stretch由来でコンテナ高がコンテンツ高を下回る状況が構造上起きず（EN側mediaはheight:300px固定）、
    実測35ケースで写真が潰れなかったため。将来.menu-category-cardsのgridに固定row heightや
    align-items:startを入れるとこの前提が崩れるのでflex-shrink:0の付与を検討すること
    ※堅牢性はEN<JAで非対称: JA側mediaはmin-height:300pxで下限が直接守られるのに対し、EN側はheight:300px＋
    min-height既定auto＋flex-shrink既定1のため、潰れない保証がgrid stretch由来のheight:100%という間接的な
    前提1本だけに依存する。上記のgrid変更リスクはEN側に偏在するので、触るならEN側から確認すること */
    flex-direction: column;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s ease;
  }
  .menu-category-card--yellow {
    background-color: var(--color-yellow);
  }
  .menu-category-card--yellow .menu-category-card-title-en,
  .menu-category-card--yellow .menu-category-card-desc {
    color: var(--color-black);
  }
  .menu-category-card--black {
    background-color: var(--color-black);
  }
  .menu-category-card--black .menu-category-card-title-en,
  .menu-category-card--black .menu-category-card-desc {
    color: var(--color-white);
  }
  .menu-category-card--outline {
    background-color: var(--color-white);
  }
  .menu-category-card--outline .menu-category-card-body {
    /* 2026-08-21修正: 罫線がカード全体(写真部分にも)掛かって見えていたため.menu-category-card--outline
       自身からborderを外し、写真より下の.menu-category-card-body側にのみ掛かるよう移動。border-topは
       付けず写真と地続きに見せる。bottom側のradiusは.menu-category-card自身のborder-radius:15pxに合わせ、
       親のoverflow:hiddenによる角の切り抜きと線の角がずれないようにする。
       2026-08-23修正: 1px→2px（JP側と同値・同根拠）。EN等倍デザイン(CJ_HP_menu_tobira_E_v1_pc.png)の
       y=1400/1450 水平走査で左罫線 x=150,151・右罫線 x=670,671 の2列とも完全な(255,199,44)＝2px。
       SPは下の@media(max-width:767px)で従来の1pxを明示維持する。 */
    border-left: 2px solid var(--color-yellow);
    border-right: 2px solid var(--color-yellow);
    border-bottom: 2px solid var(--color-yellow);
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
  }
  .menu-category-card--outline .menu-category-card-title-en,
  .menu-category-card--outline .menu-category-card-desc {
    color: var(--color-black);
  }
  .menu-category-card-media {
    position: relative;
    width: 100%;
    height: 300px;
    background-color: rgba(0, 0, 0, 0.06);
    line-height: 0;
  }
  .menu-category-card-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 2026-08-05修正(写真の左右余白): containだと画像の比率(4枚とも約1.62)と
    枠の比率(PC 520x300=1.733)が食い違い、実描画幅が487.4pxに縮んで左右各16.3pxのレターボックスが
    発生していた（そこに.menu-category-card-mediaの背景rgba(0,0,0,0.06)が覗く。黄/黒カードでは
    地色と同化して見えず、白カード--outlineでのみ白帯として顕在化していたが実際は4枚とも同じ状態）。
    1099px以下の1列表示では枠幅が1059pxまで広がるため左右各285pxという極端な余白になっていた。
    枠幅いっぱいに合わせるcoverへ変更し、JA版(:360)と挙動を統一する。
    トリミング量は幅で大きく変わる（2026-08-05 実測）。以下、縦方向の%は「上下合計の欠落 ÷ cover拡大後の
    描画高」＝合計基準。横方向は基準が変わるので片側・合計を都度明記する。
    1100px以上の2列表示では上下各約3.7〜10.0px(合計で描画高の2.4〜6.3%)と軽微。ただし枠幅は帯域内で動き、
    vw=1100では枠500x300で上下各3.69〜3.89px(2.4〜2.5%)、枠が520pxで頭打ちになる概ね1140px以上で
    上下各9.84〜10.04px(6.2〜6.3%)。「1100px以上は一律10.04px(6%)」ではない。
    ★【2026-08-06追記・obsolete注記】旧EN版は@media(max-width:1099px)で768〜1099px帯だけ1列化しており、
    枠が横長のまま幅だけ伸びるため上下各74.06px〜175.93px(描画高の33〜54%)という大幅クロップが発生し、
    2026-08-05に前澤さんが「このままで良い」と一旦承認していた。しかしJP版には同breakpointが無く
    767px超は常に2列shrink表示だったため、JP/EN非対称バグとして2026-08-06に本ファイル下部
    .menu-category-cardsのbreakpoint統一コメントの通り@media(max-width:1099px)ブロック自体を削除した。
    結果EN版も767px超は2列shrink表示（上の「1100px以上の2列表示」と同様に軽微なクロップ）になり、
    この768〜1099px帯33〜54%クロップの問題自体が発生しなくなった（object-fitはcoverのまま変更なし）。
    containへ戻すのは禁止（左右各285pxの極端な余白が復活し、本コメント冒頭のレターボックス問題が
    そのまま再発する）。将来この判断を覆す必要が生じた場合は、containではなく
    .menu-category-card-media側にaspect-ratioを与えて枠比率を画像比率(約1.62)へ寄せる方法を採ること。
    SP 390pxはここまでと違い幅方向のトリミングで（縦の欠落は0px）、左右各約30px＝片側で画像幅
    (cover拡大後の描画幅)の約9%／左右合計で約18%（実測 左右各29.96〜30.50px・片側9.22〜9.41%・
    合計18.44〜18.83%）。この帯域の欠落が問題になる場合はcontainへ戻さず、
    枠の高さをaspect-ratioで画像比率(約1.62)へ寄せて解決すること。焼き込み余白はPILで実測0pxのため
    画像差し替えは不要。バッジ(AUSSIE BEEF/ANGUS BEEF)は.menu-category-card-mediaに対する
    position:absoluteでobject-fitの影響を受けない（rect実測がbefore/after完全一致）。
    ※画像全体を必ず見せる必要が出た場合はcontainではなく枠比率を画像比率(約1.62)へ寄せること */
  }
  .menu-category-card-body {
    flex: 1 1 auto; /* 2026-08-05修正(カード高さ揃え): 親.menu-category-cardのflex余剰高さを
    このbodyが受け取る。mediaは固定高さ(300px)なので余剰は必ずbody側に来る */
    display: flex; /* 2026-08-05修正: 受け取った余剰高さをさらに子のdescへ渡すためのコンテナ化 */
    flex-direction: column;
    text-align: center;
  }
  .menu-category-card-title-en {
    font-family: var(--font-heading);
    font-weight: 900;
    font-size: 3.2rem;
    text-transform: uppercase;
    text-align: center; /* 2026-08-02修正: SP版で親.menu-category-card-bodyがtext-align:leftに
    切り替わり左寄せになっていたため、要素自体に明示指定してPC/SP共通で中央揃えにする */
    line-height: 1;
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
  }
  /* jp-menuの.menu-category-card-title-ja相当はEN版では英語重複表示になるため実装しない */
  .menu-category-card-desc {
    flex: 1 1 auto; /* 2026-08-05修正(カード高さ揃え): カードの余剰高さの最終的な吸収先。
    ★btn-wrap側に margin-top:auto を置く実装は禁止（実測で回帰確認済み）。あれは既存の
    margin-top:20px を打ち消すため、余剰高さがゼロのカードで説明文→ボタン間が20px→0pxに潰れる
    （JA PC 545.8→525.8 等、全ビューポートで-20pxの回帰を実測）。desc側に吸収させれば
    btn-wrapのmargin-top:20pxは無傷のまま、説明文ブロックだけが伸びる。 */
    margin-top: 16px; /* 2026-08-23修正: 20px→16px。EN等倍デザイン(CJ_HP_menu_tobira_E_v1_pc.png)は
    本文ブロック上端721.83に対し英名タイトルのインク 748..770・説明文1行目のインク上端 792(相対70.17)・
    2行目 817(95.17)・白ピル上端 877(155.17)・黄色地の高さ215px。タイトルはtext-box-trim:trim-bothのため
    箱下端＝キャップ下端。16/17pxを当てて再撮影した実測は 17px→(71.72, 96.72, 155.72, 215.41)、
    16px→(70.72, 95.72, 154.72, 214.41) で16pxのほうが4指標合計の誤差が小さい（2.14px対4.06px）。
    ※下の font-size 18px→16.5px により説明文の箱上端→インク上端が 4.77→5.31px に増えたぶん、
    18px時点の逆算値17pxから1px縮める必要がある。 */
    font-family: var(--font-body-en);
    font-weight: 400;
    font-size: 16.5px; /* 2026-08-23修正: 1.8rem(18px)→16.5px（R1でpx化）。デザイン/ライブのインク幅比は
    ANGUS L3 369/404・L2 309/334、SIDES L1 287/310、DESSERT L1 275/303・L2 309/332・L3 332/359 ＝
    0.908〜0.931（平均0.921）→ 18×0.921≒16.58px。16/16.5/17pxを当てて再撮影したインク幅は
    174/297/359・180/306/370・185/315/382 で、デザインの 181/309/369 に16.5pxが最も近い。 */
    line-height: 1.5152; /* 2026-08-23修正: 1.39→1.5152（16.5px×1.5152＝25.0px）。デザインの説明文行ピッチは
    ANGUSカード 793/818/843・DESSERTカード 1368/1393/1418 ＝25.0pxで、ライブも現状25.02pxで一致しているため、
    font-size変更に追随させて25pxを維持する係数変更（R3: 単位なしを維持）。 */
  }
  .menu-category-card-btn-wrap {
    margin-top: 14px; /* 2026-08-23修正: 20px→14px。EN等倍デザイン(CJ_HP_menu_tobira_E_v1_pc.png)のカード1は
    本文ブロック上端721.83に対し白ピル上端 y=877(相対155.17)、ライブは 870(相対162.17)。
    説明文の箱下端からの実測差は14.0px。 */
    text-align: center; /* 2026-08-05修正: SP版で親.menu-category-card-bodyがtext-align:leftに
    切り替わりVIEW ALLボタン(inline-flex)が左寄せになるため、要素自体に明示指定してPC/SP共通で中央揃えにする */
  }
}
/* 2026-08-06修正(backlog: grand-menuページのJP/EN breakpoint統一): 従来ここに
   @media(max-width:1099px) { html[lang="en"] .menu-category-cards { grid-template-columns:1fr; gap:50px; } }
   というEN版だけの中間breakpointがあり、768〜1099pxの帯だけEN版が1列表示になっていた。
   JP版（本ファイル上部 html[lang="ja"] ブロック）は同等のbreakpointを持たず767px超は
   常に2列shrink表示のため、JP/ENで挙動が非対称になっていた（2026-08-06 バックログ指摘・
   前澤さんの指示でJP側に統一）。このbreakpointを削除したことで、EN版も767px超は
   grid-template-columns: repeat(2, minmax(0, 520px))（PC共通ブロック）による2列shrink表示に
   統一される。副次効果として、下の.menu-category-card-photoコメントに記録されていた
   768〜1099px帯での33〜54%の大幅画像クロップ（2026-08-05に一旦「このままで良い」と
   承認されていた挙動）も、1列表示自体が無くなるため解消される。 */
@media (max-width: 767px) {
  html[lang="en"] .menu-category-card-media {
    height: 200px;
  }
  html[lang="en"] .menu-category-cards {
    grid-template-columns: 1fr;
    max-width: 319px;
    margin-left: auto;
    margin-right: auto;
  }
  html[lang="en"] .menu-category-card-body {
    text-align: left;
  }
  html[lang="en"] .menu-category-card--outline .menu-category-card-body {
    /* 2026-08-23修正(M4のEN対応): JP側と同じ詳細度事故。非lang-scoped SPの5px指定（0,2,0）が
       html[lang="en"] ネスト内のPC用15px指定（実効0,3,1）に負けてSPでも15pxのままだった。
       .menu-category-card 自身のSP border-radius が5pxのため罫線側も5pxへ揃える。 */
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-width: 1px; /* 2026-08-23追記: 上のPC共通指定を1px→2pxへ変えたため、SPは従来の1pxを明示維持する
    （JP側SPブロックと同じ扱い）。 */
  }
  html[lang="en"] .menu-category-card-title-en {
    font-size: 25px; /* 2026-08-23修正: 3.2rem(32px)→25px。デザイン(CJ_HP_menu_tobira_E_v1_smp.png)の
    キャップ高は4カードとも18px（y=455..472 ほか）に対しライブ23px → 32×18/23＝25.04px。
    "CLASSIC BURGERS" インク幅もデザイン159px対ライブ203px → 32×159/203＝25.06px でキャップ高法と一致。
    PC(3.2rem)はSPスコープ外のため据え置く。 */
  }
  html[lang="en"] .menu-category-card-desc {
    margin-top: 13px; /* 2026-08-23修正: 15px→13px。デザインのbody高から逆算すると
    「見出し→説明文」＋「説明文→ボタン」の合計が26〜27px（ライブは15+20=35px）。均等配分で13px。 */
    font-size: 15.7px; /* 2026-08-23修正: 1.8rem(18px)→15.7px。デザインの同一文字列
    "Cooked carefully over an open fire" の単語開始位置 x=58/115/178/213/234/273 に対し
    18pxでは1行に収まらず折返していた。15.7pxで x=59/115/179/213/234/272 と最大1pxで一致し、
    DESSERT & DRINKSカードもデザインと同じ4行になる。 */
    line-height: 1.592; /* 2026-08-23修正: 1.39→1.592（15.7px×1.592＝24.99px）。行送り25pxは
    デザイン（ink top 908→933→958→983 等）と現状で既に一致しているため、font-size変更に追随させて
    25pxを維持するための係数変更（R3: 単位なしを維持）。 */
  }
  html[lang="en"] .menu-category-card-btn-wrap {
    margin-top: 13px; /* 2026-08-23修正: 20px→13px。上記の合計26〜27pxの残り。デザインでは
    説明文最終行インク下端531→ピル上端549＝18px、ライブは540→567＝27pxだった。 */
  }
  html[lang="en"] .menu-category-card-desc br {
    display: none; /* 2026-08-05修正: SPでは改行せず繋げて表示する（左寄せは親.menu-category-card-bodyのtext-align:leftで既に適用済み） */
  }
}