/* ===============================================================
   non — メニューページ固有のスタイル
   すべて .menu 配下に閉じてある。ページが増えても、li や h2 の
   見た目がメニュー用の指定に引きずられない。
   =============================================================== */

.menu section{padding-top:38px}
.menu h2{
  font-size:12.5px;font-weight:400;letter-spacing:.2em;text-transform:uppercase;
  line-height:20px;          /* 言語で見出しの高さが変わらないようpx固定 */
  padding-bottom:12px;border-bottom:1px solid var(--ink);
}
.menu h2 .ja{letter-spacing:.14em}

/* 品目 ---------------------------------------------------------- */
.menu ul{list-style:none}
/* 行の高さを言語に依存させない --------------------------------------
   line-height を 1.35 のような相対値で指定すると、行箱の高さがフォントの
   ascent / descent に左右される。和文フォントと欧文フォントではこの値が
   違うので、EN / JA を切り替えるたびに1行ずつ高さが変わる。使うフォントが
   端末で違うため症状も端末依存になる（AndroidはRobotoとNoto Sans CJK JPで
   差が大きく、iOS/macOSのSFとHiraginoでは目立たない）。

   対策：行に関わる line-height をすべて px 固定にする。あわせて li の
   align-items を baseline から flex-start に変える。baseline揃えは行箱の中の
   ベースライン位置に依存し、これもフォントメトリクス次第で動くため。
   名前側と価格側に同じ line-height を与えているので flex-start でも1行目は揃う。 */
.menu li{
  display:flex;align-items:flex-start;gap:12px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
.menu .name{flex:1;min-width:0;line-height:22px}
/* 直接の子だけを対象にする。子孫セレクタにすると .note や .star の
   中の .en / .ja まで巻き込んで、切替表示が壊れる。
   品名は実寸指定なので site.css の .ja{font-size:.94em} を上書きしてしまう。
   そのため和文側の実寸をここで別に持たせている。 */
.menu .name > .en{font-size:15.5px}
.menu .name > .ja{font-size:14.6px}
.menu .note{display:block;font-size:11px;color:var(--muted);line-height:16px;margin-top:3px}
.menu .star{
  display:inline-flex;align-items:center;gap:4px;
  font-size:10px;line-height:22px;color:var(--muted);letter-spacing:.06em;
  margin-left:8px;white-space:nowrap;
}
.menu .star svg{width:11px;height:11px;flex:none}

/* 価格（原本どおり 税抜メイン + 括弧内 税込） ---------------------
   数字しか入らないので、和文を含まないスタックに固定する（EN/JAで字面が
   変わらないように）。字送りは税抜・税込で同じ値にして、原本の「5 0 0 (5 5 0)」の
   均一なリズムに揃える。 */
.menu .price{
  flex:none;display:flex;align-items:baseline;gap:8px;
  font-family:var(--font-latin);
  font-variant-numeric:tabular-nums;
  letter-spacing:.16em;
  line-height:22px;          /* 品名側と同じ値。flex-start でも1行目が揃う */
}
.menu .p-main{font-size:16px}
.menu .p-tax{font-size:12px;color:var(--muted)}

/* イラスト ------------------------------------------------------
   スマホ：各セクションの末尾に1点ずつ／PC：下部に4点まとめて横並び。
   両方出ると重複するので、画面幅で必ずどちらか一方に絞る。

   サイズは幅ではなく高さで指定する。幅で揃えると、横長のケトルだけ背が低くなって
   小さく見えてしまう。原本での高さの比は 154 : 226 : 200 : 193（ケトル / ドリッパー /
   アフォガート / マシン）で、下の値はこの比を保ったまま縮めたもの。
   イラストを差し替えて縦横比が変わっても、高さ基準なら見た目の大きさは崩れない。 */
.menu .ill-row{display:none}
.menu .ill{display:block;margin:26px auto 0;opacity:.92;width:auto}
.menu .ill.kettle  {height:89px}
.menu .ill.pourover{height:131px}
.menu .ill.affogato{height:116px}
.menu .ill.machine {height:112px}

.menu .takeout{
  margin-top:22px;text-align:right;
  font-size:11px;line-height:16px;color:var(--muted);letter-spacing:.04em;
}

/* タブレット・PC：原本と同じ2カラム ------------------------------ */
@media (min-width:760px){
  .menu{display:grid;grid-template-columns:1fr 1fr;column-gap:64px;padding-bottom:20px}
  .menu section{padding-top:44px}
  .menu .col-a{grid-column:1}
  .menu .col-b{grid-column:2}
  .menu section > .ill{display:none}
  .menu .ill-row{
    grid-column:1 / -1;display:flex;justify-content:center;align-items:flex-end;
    gap:44px;margin-top:36px;
  }
  .menu .ill-row .ill{margin:0}
  .menu .ill-row .ill.kettle  {height:96px}
  .menu .ill-row .ill.pourover{height:140px}
  .menu .ill-row .ill.affogato{height:124px}
  .menu .ill-row .ill.machine {height:120px}
  .menu .takeout{grid-column:1 / -1}
}

@media print{
  .menu .ill{opacity:1}
}