@charset "UTF-8";
/*
===============================================================================
 css/sub.css — カールスJr. サイトリニューアル 下層ページ「共通」CSS（design-to-theme Stage4統合）
 2026-08-03 CSS分割（docs/plans/2026-08-02-css-js-php-refactor.plan.md Step4-5）:
 ページ種別ごとの内容は下記の各ファイルへ分割済み。functions.php側で該当ページのみ
 条件付きenqueueする。本ファイル(sub.css)は複数ページ種別で共有される、または
 ページ種別の判定が曖昧なルールのみを残す（無理に分割しない方針）。
  - css/sub-menu.css          … MENU扉ページ・GRAND MENUカテゴリ商品一覧（ANGUS/CLASSIC/SIDES/DESSERT）
  - css/sub-product-modal.css … 商品詳細ポップアップ（GRAND MENUカテゴリページのみ）
  - css/sub-store.css         … LOCATIONページ（店舗一覧）
  - css/sub-news.css          … NEWS一覧・NEWS詳細
 分割前の出典: stage2_output/{jp-menu,en-menu,jp-angus-burgers,en-angus-burgers,jp-location,
       en-location,jp-news-list,jp-news-detail}/css/style.css の「→ sub.css候補」ブロック
===============================================================================
*/

/*
===============================================================================
 下層ページ共通コンテナ（jp-angus-burgers / en-angus-burgers / jp-location で共有）
 出典: 各ページ「→ sub.css候補: 下層ページ共通コンテナ」
===============================================================================
*/
.page-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}
@media (max-width: 1100px) {
  /* 768〜1100px区間の余白値は資料に無いための暫定値 */
  .page-container {
    padding: 0 20px;
  }
}
@media (max-width: 767px) {
  .page-container {
    padding: 0 8px; /* 変更: 28px→8px（2026-08-03 C9対応。外側.container.container--1100の20pxと合算し実効28px相当にする。design_sp_01.pngで左余白28px実測済み） */
  }
}


/*
===============================================================================
 言語別font-family出し分け（menu-grid / product-modal 共通）
 2026-08-03 CSS分割（docs/plans/2026-08-02-css-js-php-refactor.plan.md Step4-5）:
 このルールはGRAND MENUカテゴリ商品一覧（.category-tab/.menu-card-name等。→sub-menu.css）と
 商品詳細ポップアップ（.product-modal-name等。→sub-product-modal.css）のセレクタを
 1つのコンマ区切りセレクタリストにまとめて定義しているため、page種別横断（曖昧）と判断し
 分割せずこの共通ファイルに残す（計画書の「分類が曖昧なセレクタは共通として残す」方針）。
===============================================================================
*/
/* font-familyのみ言語別（jp-angus-burgers=Noto Sans JP / en-angus-burgers=Roboto） */
/* 2026-08-05: .category-tab a はページ内ナビとしてJA/EN共通化したため、この言語別リストから
   除外し下の共通レイアウトブロックへ移設した（商品カード・モーダルは従来どおり言語別）。 */
html[lang="ja"] .menu-card-name,
html[lang="ja"] .menu-card-price,
html[lang="ja"] .menu-note-and-cta-note,
html[lang="ja"] .product-modal-name,
html[lang="ja"] .product-modal-price,
html[lang="ja"] .product-modal-desc,
html[lang="ja"] .product-modal-ingredients {
  font-family: var(--font-body-jp);
}
html[lang="en"] .menu-card-name,
html[lang="en"] .menu-card-price,
html[lang="en"] .menu-note-and-cta-note,
html[lang="en"] .product-modal-name,
html[lang="en"] .product-modal-price,
html[lang="en"] .product-modal-desc,
html[lang="en"] .product-modal-ingredients {
  font-family: var(--font-body-en);
}


/*
===============================================================================
 見出し(H1＋★★★) → カテゴリ/アンカーナビ の共通レイアウト
 2026-08-05: MENU扉(/menu/)を基準に、カテゴリ8本・LOCATION・EN版を含む全12ページで
 縦間隔とナビ文字を統一。ギャップの作り方が「親のpadding-bottom」「navのmargin-top」
 「★★★のmargin-top」の3通りに分裂して不整合が再発していたため、ここへ集約し
 各ページ固有CSS(sub-menu.css / sub-store.css)の対応宣言は削除した。
 ラッパー3種(.menu-page-title=扉 / .menu-heading=カテゴリ / #location)は相互排他で、
 実出力上も 扉→.menu-tabs / カテゴリ→.category-tabs / #location→.store-anchor-nav の
 1:1対応であることを全12ページのDOMで確認済み（2026-08-05）。
 【2026-08-05追記】前澤さん指示により EN のページ内ナビを JA と完全同一にした
 （font-family / font-size / font-weight のすべて）。これにより言語分岐が不要となり
 html[lang="ja"] / html[lang="en"] の2系統を1本へ統合した。EN側で使っていた
 Roboto Bold700・2.3rem/1.5rem は廃止。font-family も各ページ固有CSSから
 ここへ集約したため、ナビリンクの書体・太さ・サイズはこのブロックが唯一の定義元。
 【2026-08-05追記】文字規則にもラッパー3種の先祖セレクタを付けてスコープを限定した。
 従来は .menu-tabs-item / .category-tab / .anchor-nav-item を持つページへ無条件に
 適用され、パーツ見本ページ(/layout/)のように意図しない対象へ効いていたため。
 :is() はこのコードベースに前例が無いためカンマ区切りで明示列挙する。
 ---
 移設元の知見（削除した宣言のコメントから引き継ぎ）:
  ・JA 600 の根拠 … デザインカンプのステム幅実測（LOCATION "AKIHABARA" 3.06px に対し
    fw600=3.04px が最近似。旧500=2.76px・700=3.74px はいずれも不一致。
    MENU扉 "CLASSIC BURGERS" 3.45px に対しても fw600=3.37px が最近似）。
  ・旧EN 700 の根拠（廃止） … header-en.php の Google Fonts が wght@400;700 のみで、
    さらに旧 fw500 は実体が無く400へ丸められ機能していなかったため700にしていた。
    JA統一により書体が Noto Sans JP（400/500/600/700 の4段階がセルフホストで実在）に
    変わったので、Robotoの2段階制約は無関係となり600をそのまま使える。
  ・旧EN 2.3rem の根拠（廃止） … EN版はデザインカンプが無いため LOCATION扉(2.3rem)に
    合わせていたが、JA基準(1.6rem/1.35rem)へ統一する指示に置き換えた。
  ・SP 1.35rem の根拠 … カンプSPのキャップ高10px＝13.5px相当。
  ・SP ★★★ 7px / nav 20px の根拠 … 2026-08-03 design-pixel-fix M4/M5 で
    docs/design-pixel-check/menu/sp_design_top.png を実測した値（旧60px/35pxは大幅超過）。
  ・PC nav 35px の根拠 … カンプ再実測で LOCATION扉と MENU扉の★★★→ナビのギャップが
    完全同一と確定（旧145px/27px、および #location .section-heading の padding-bottom 35px
    による実装はすべてここへ一本化）。
 ※ 区切り線・グリッド/フレックス配置・padding-bottom はページごとに異なるため
   各固有CSS側に残置している（font-family は2026-08-05にここへ集約済み）。
===============================================================================
*/
/* ★★★ の上余白（common.cssのベース値と同値だが、TOP・NEWSと共有する
   common.css を触らずにこの12ページの取り決めを1箇所で読めるよう明示的に固定する） */
.menu-page-title .section-heading-stars,
.menu-heading .section-heading-stars,
#location .section-heading-stars {
  margin-top: 12px; /* 2026-08-23修正: 15px→12px。common.css の .section-heading-stars ベース値が同日 15px→12px に変わった際、
  この12ページ側の上書きだけ15pxのまま取り残されていた。デザイン実測(menu_pc.png / CJ_HP_menu_tobira_E_v1_pc.png
  とも同値)はH1インク下端 y=254 →★インク上端 y=267 ＝白12行、ライブは 253→269 ＝白15行で3px広い。 */
}
/* 見出しブロック → ナビ の縦ギャップ（構造値） */
.menu-page-title .menu-tabs,
.menu-heading .category-tabs,
#location .store-anchor-nav {
  margin-top: 38px; /* 2026-08-23修正: 15px→38px（2026-08-06 前澤さん指示の35pxを、★★★のmargin-top 12px化に
  合わせて再算出した値。★★★の箱下端が280.83になるため 318.83 でナビ上端が立つ）。デザイン実測: 区切り線
  (menu_pc.png / CJ_HP_menu_tobira_E_v1_pc.png とも1本目は x=529列)の被覆率は y=319 が0.733・320〜336が1.0・337が0.733
  ＝上端319.27／線長18.47px。ライブは 298.83／24px だった。angus_burgers_pc.png・location_pc.png も同一区間。
  ★この値は2026-08-06「35px→15px」指示の巻き戻しに当たるため、前澤さんの確認が必要。 */
}
/* ★このブロックは必ず @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追記: ★★★の縦位置だけEN版が等倍デザインより4px上にある。同じ box(y=264.83 / h=16)・
     同じ font-size 16px・letter-spacing 6.4px なのに、★(U+2605)が言語別font-familyのフォールバック先違いで
     描画され、Rangeの行矩形が EN h=19/y=262.83、JP h=24/y=260.83 とベースライン位置が3px違うため。
     支給等倍6点（jp/menu_pc.png・eng/CJ_HP_menu_tobira_E_v1_pc.png・jp/angus_burgers_pc.png・
     eng/CJ_HP_menu_E_v1_pc.png・jp/location_pc.png・eng/CJ_HP_location_E_v1.png）すべてで
     H1インク y=209..254／★インク y=268..283 と同値。JPライブは 267..280 で一致しているため
     共通ブロックの12px/38pxは変えず、EN側だけ +4px／-4px の相殺ペアで上書きする
     （ナビ上端 318.83 は不変。この2ブロックは必ずセットで適用すること）。 */
  html[lang="en"] .menu-page-title .section-heading-stars,
  html[lang="en"] .menu-heading .section-heading-stars,
  html[lang="en"] #location .section-heading-stars {
    margin-top: 16px; /* 2026-08-23修正: EN実効12px→16px。適用後の★インクは 268..282（設計 268..283） */
  }
  html[lang="en"] .menu-page-title .menu-tabs,
  html[lang="en"] .menu-heading .category-tabs,
  html[lang="en"] #location .store-anchor-nav {
    margin-top: 34px; /* 2026-08-23修正: EN実効38px→34px。上の★★★+4pxをそのまま相殺し、
    タブ/アンカーナビのインク帯を 319..336（デザイン 319..337）に据え置く */
  }
}
/* ナビ文字（JA/EN共通） */
.menu-page-title .menu-tabs-item a,
.menu-heading .category-tab a,
#location .anchor-nav-item a {
  font-family: var(--font-body-jp);
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 1.1538; /* 2026-08-23追記: 16px×1.1538＝18.46px。従来はbody由来の単位なし1.5を継承して24pxとなり、
  行の高さぶんだけ引かれる区切り線（border-left）がデザインの18.47pxより5.5px長かった。SP側(下の
  @media(max-width:767px))で既に使っている係数と同一。R3に従い単位なしで指定する。 */
}
@media (max-width: 767px) {
  .menu-page-title .section-heading-stars,
  .menu-heading .section-heading-stars,
  #location .section-heading-stars {
    margin-top: 7px;
  }
  .menu-page-title .menu-tabs,
  .menu-heading .category-tabs,
  #location .store-anchor-nav {
    margin-top: 19px; /* 2026-08-23修正: 20px→19px。デザイン(menu_smp.png)のタブ1行目の区切り線は
    y=158..173。★★★の箱下端からの距離を19pxにするとナビ上端が158.4pxとなり一致する
    （MENU扉のpadding-top 30→37px、下のline-height明示と併せて調整した値） */
  }
  .menu-page-title .menu-tabs-item a,
  .menu-heading .category-tab a,
  #location .anchor-nav-item a {
    font-size: 13px; /* 2026-08-23修正: 1.35rem(13.5px)→13px（R1でpx化）。幅一致法4文字列の平均で
    デザイン相当12.88px（CLASSIC BURGERS デザインインク幅114px対ライブ119px → 13.5×114/119＝12.93px、
    ANGUS 12.77 / SIDES 12.86 / DESSERT 12.95）。13pxなら予測インク幅が114.6/107.9/101.1/118.4で
    デザイン114/106/100/118と最大2px差に収まる。 */
    line-height: 1.1538; /* 2026-08-23追記: 13px×1.1538＝15.0px。従来はbody由来の単位なし1.5を継承して
    20.25pxとなり、行の高さぶんだけ引かれる区切り線（border-left）がデザインより6px長かった。
    デザインの区切り線はMENU扉 y=158..173／カテゴリページ（angus_burgers_smp.png）も同一、
    LOCATION（location_smp.png）も y=160..174 で、いずれも線長15px。R3に従い単位なしで指定する。 */
  }
}