@charset "UTF-8";
/* ==========================================================================
   焼肉 福朗 — style.css
   --------------------------------------------------------------------------
   デザイン方針
     参考サイト https://otowa-net.com/ の設計言語に準拠。
       ・漆黒（#000）の地に白文字、差し色は淡い金 #cebb93
       ・見出しは明朝・ウェイト軽め・小さめ・字間を広く（0.12〜0.3em）
       ・本文は 13–14px / 行間 2.0–2.4 / 字間 0.12em
       ・欧文ラベルは EB Garamond
       ・枠線・カード・角丸は使わず、髪の毛のような細い罫線と余白だけで構造化
       ・ナビは PC でもハンバーガーのみ。縦組みはヒーローとレールとメニューに限定
       ・写真は非対称に散らし、間の余白を大きく取る

   構成
     1. DESIGN TOKENS
     2. THEME PRESETS      … data-theme の切り替えで別デザインへ
     3. RESET / BASE
     4. UTILITIES
     5. COMPONENTS
     6. RESPONSIVE
     7. MOTION / PRINT

   ▼ ホバー演出について
     リンク・ボタン（a / button）以外にはホバー演出を付けていません。
     図版やカードは静止したままです。
   ========================================================================== */


/* ==========================================================================
   1. DESIGN TOKENS（テーマ非依存 = 骨格）
   ========================================================================== */
:root {

  /* ---- 書体 ------------------------------------------------------------ */
  /* 参考サイトの筑紫Aオールド明朝に近い、無償のオールドスタイル明朝 */
  --ff-serif: "Shippori Mincho", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
              "Noto Serif JP", serif;
  --ff-sans:  "YuGothic", "Yu Gothic", "Zen Kaku Gothic New", "Hiragino Sans",
              "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --ff-en:    "EB Garamond", "Times New Roman", Times, serif;
  /* 本店ロゴ「福朗」の筆文字に寄せるための書体。使うのはヒーローのキャッチだけ。
     Yuji Syuku（佑字 肅）は Google Fonts の無償の毛筆書体。
     Web フォントが落ちてきていない環境では Windows 標準の行書体、
     最後に明朝へ落とす（ゴシックに落ちるとロゴの気配が完全に消えるため）。 */
  --ff-brush: "Yuji Syuku", "HGP行書体", "HG行書体",
              "Hiragino Mincho ProN", "Yu Mincho", serif;

  /* セクション見出しの欧文ラベル専用。Futura 系のジオメトリックサンセリフ。
     Futura は macOS/iOS のみのため、全 OS で同じ見え方になる Jost を先頭に置く。 */
  --ff-label: "Jost", "Futura", "Century Gothic", var(--ff-sans);

  --ff-heading: var(--ff-serif);
  --ff-body:    var(--ff-sans);
  --ff-accent:  var(--ff-en);

  /* 見出しのウェイト（参考サイトは 300／要所のみ 500） */
  --fw-heading: 300;
  --fw-heading-strong: 500;

  /* ---- 文字サイズ ------------------------------------------------------
     参考サイトは総じて小さい。セクション見出しでも 26–31px 程度。       */
  --fs-3xs: 0.625rem;                                          /* 10px */
  --fs-2xs: 0.6875rem;                                         /* 11px */
  --fs-xs:  0.75rem;                                           /* 12px */
  --fs-sm:  0.8125rem;                                         /* 13px 本文 */
  --fs-md:  0.875rem;                                          /* 14px */
  --fs-lg:  clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem);       /* 15–17px */
  --fs-xl:  clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);         /* 17–22px 小見出し */
  --fs-2xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem);          /* 20–26px 中見出し */
  --fs-3xl: clamp(1.375rem, 1.15rem + 0.9vw, 1.9375rem);       /* 22–31px セクション見出し */
  --fs-hero: clamp(1.375rem, 1.05rem + 1.6vw, 2.375rem);       /* 22–38px ヒーロー縦組み */

  /* ---- 行間・字間 ------------------------------------------------------ */
  --lh-tight: 1.5;
  --lh-snug:  1.9;
  --lh-body:  2.2;
  --lh-loose: 2.55;
  --ls-ja:       0.12em;
  --ls-ja-wide:  0.18em;
  --ls-ja-hero:  0.3em;
  --ls-en:       0.16em;
  --ls-en-wide:  0.34em;

  /* ---- 余白スケール ---------------------------------------------------- */
  --space-unit: 8px;
  --sp-1:  calc(var(--space-unit) * 0.5);
  --sp-2:  var(--space-unit);
  --sp-3:  calc(var(--space-unit) * 1.5);
  --sp-4:  calc(var(--space-unit) * 2);
  --sp-5:  calc(var(--space-unit) * 3);
  --sp-6:  calc(var(--space-unit) * 4);
  --sp-7:  calc(var(--space-unit) * 5);
  --sp-8:  calc(var(--space-unit) * 7);
  --sp-9:  calc(var(--space-unit) * 10);
  --sp-10: calc(var(--space-unit) * 14);
  --sp-11: calc(var(--space-unit) * 18);

  /* ---- レイアウト ------------------------------------------------------
     参考サイトはセクション間の余白が非常に大きい                       */
  --container:        1180px;
  --gutter:      clamp(1.5rem, 5vw, 5rem);
  /* ---- 余白のリズム ----------------------------------------------------
     セクション間の余白は --sec-gap ひとつで決まり、
     各セクションはその半分を上下に持つ（隣り合うと合計 = --sec-gap）。
     これで全セクションの間隔が自動的に揃う。

       --head-gap   見出し〜本文     44–88px
       --block-gap  ブロック間       64–136px
       --sec-gap    セクション間     112–256px
     の順に約 1 : 1.5 : 3 の階層になるよう調整している。           */
  --sec-gap:     clamp(7rem, 16vw, 16rem);     /* セクション間（合計） */
  --sec-py:      calc(var(--sec-gap) / 2);     /* 各セクションの上下 */
  --head-gap:    clamp(2.75rem, 6vw, 5.5rem);  /* 見出し〜本文の間 */
  --block-gap:   clamp(4rem, 9vw, 8.5rem);     /* ブロック間 */
  /* お問い合わせ〜フッターの間隔だけ、セクション間の標準（--sec-gap）に
     この分を足して広く取る。本文が終わったことをはっきり示すため。
     ただし 8rem（PC 128px）だと --sec-py 115px と合わせて 243px になり
     送信ボタンとフッターが離れすぎるので、約半分に落としている。      */
  --footer-lead: clamp(1.75rem, 4.5vw, 4rem);
  --nav-h:       88px;
  --nav-h-sm:    64px;
  /* ヘッダーの中身（ロゴ・ハンバーガー）を画面上端から少し下げる余白 */
  --nav-pt:      36px;
  --nav-pt-sm:   22px;
  --hero-h:      100svh;
  --hero-h-min:  580px;
  --rail-inset:  clamp(1rem, 2.6vw, 2.75rem);  /* 画面端〜レール */
  /* ドロワーの幅。全画面ではなく右端から顔を出す程度に留める。
     狭い画面では 78vw で頭打ちにして、背面の幕が必ず左に残るようにする。 */
  --drawer-w:    min(78vw, 21rem);
  --drawer-pad:  var(--sp-6);                  /* パネルの左右余白 */

  /* 固定背景の帯（空間セクション）の高さ。
     窓（帯）と、中で貼り付いている写真（position: fixed / inset: 0）の高さを
     揃えると、スクロールの途中で窓がちょうど画面と重なり、1枚が全画面で
     見える瞬間ができる。そのため 100vh 固定で、ブレイクポイントでも変えない。
     ※ 100svh ではなく 100vh。中の fixed レイヤーはツールバーを含む大きい方の
       ビューポートに広がるので、svh だと窓の方が低くなって全画面にならない。 */
  --band-h: 100vh;
  /* ヒーロー写真の固定＋暗転演出。
     --veil-end は「想い」セクション高さに対する割合で、
     ここで完全に地色（黒）になる。02 のブロックの直後に来るよう調整。 */
  /* 実測（1440px・想い 01/02/03 ＋ 締めの帯）：
     最後の 03 のブロックが 53.8%〜69.1%、締めの帯が 73.2% から始まる。
     03 を通り過ぎた直後、帯に入る手前で暗転しきるよう 72% に設定。

     帯（.pullquote）は全面写真だが、上下 20% は mask で透明に抜いてあり、
     そこは背後（＝この幕）がそのまま見える。幕が未完成のまま帯に入ると、
     抜けた部分から固定のヒーロー映像が薄く覗いてしまうので、
     停止位置は必ず帯の上端より手前に置くこと。
     ※ ブロックを足す／文章量を変えたら、この % を測り直すこと。 */
  --veil-end:    72%;
  /* 見出しが現れるまでの助走。セクション上端は幕がほぼ透明なので、
     ここで少し送ってから文字を出すことで写真の上でも読めるようにする。
     （小さくすると写真がよく見えるが文字は読みにくくなる） */
  --veil-lead:   42vh;
  /* 「その日、いちばんのお肉を。」＝本文が始まる位置までに、白文字が読める
     濃さまで先に落とすための距離と濃さ。距離はセクションの padding-top
     （--sec-py ＋ --veil-lead）に見出しの上余白ぶんを足してあるので、
     本文の 1 行目は必ず --veil-read-op に達したところから始まる。
     この幕は --veil-read を過ぎても濃さを保ち、そこから先は --veil-end の
     全面暗転が引き継いで地色まで持っていく。

     濃さは 0801.mp4 の実測から決めている。本文が乗る画面右側の帯を
     全長 0.5 秒刻みで測ると、相対輝度は上位 1% でも 0.19、いちばん明るい
     1 点（炎のハイライト）でも 0.37 しかない。地色は純黒なので、
       ・上位 1% に対して 7:1（AAA）を確保するには 26%
       ・最も明るい 1 点に対しても 7:1 を保つには 45%
     が要る。動画を読み込まない環境で出るポスター（hero-fv.jpg）は
     これより暗いので、45% あれば両方まかなえる。
     これ以上濃くしても可読性は上がらず、映像が早く消えるだけ。

     動画を現行の hero.mp4（旧 0801(5).mp4）に差し替えたあとも同じ帯を 0.5 秒刻みで測り直したが、
     上位 1% は最悪でも 0.11、いちばん明るい 1 点でも 0.30 と、45% を決めた
     ときの 0.19 / 0.37 を下回る。ポスター（0801.mp4 由来のまま）も
     上位 1% は 0.12 なので、45% のままで三者ともまかなえる。 */
  --veil-read:    calc(var(--sec-py) + var(--veil-lead) + 6rem);
  --veil-read-op: 45%;

  /* ---- 角丸（参考サイトは全て直角） ------------------------------------ */
  --radius-none: 0px;
  --radius-sm:   0px;
  --radius-md:   0px;
  --radius-lg:   0px;
  --radius-pill: 999px;
  --radius-img:  var(--radius-none);
  --radius-card: var(--radius-none);
  --radius-btn:  var(--radius-none);

  /* ---- 写真の上に載る文字 ----------------------------------------------
     ヒーローや写真の上の帯は、テーマ（明暗）に関わらず
     常に白系で表示する。テーマの --c-ink を使うと明るいテーマで
     暗い文字になり読めなくなるため、専用トークンを用意している。   */
  --c-on-media:      #ffffff;
  --c-on-media-2:    rgb(255 255 255 / .76);
  --c-on-media-3:    rgb(255 255 255 / .58);
  --c-on-media-line: rgb(255 255 255 / .48);

  /* ---- 背景の煙（こだわりセクション） ------------------------------------
     写真素材ではなく CSS のグラデーションで描いている。
     煙ひと筋（.smoke__wisp）を 3 枚重ね、それぞれ違う周期で
     「足元から湧いて、斜め上へのぼりながら広がって、消える」を
     繰り返させることで、途切れずに立ちのぼって見える。
     --smoke-size で大きさ、--smoke-opacity で濃さ、
     --smoke-tint で煙の色（rgb の 3 値）、--smoke-speed で速さが変わる。 */
  --smoke-size:    clamp(22rem, 46vw, 48rem);
  --smoke-opacity: .66;
  --smoke-blend:   screen;
  --smoke-tint:    255 255 255;  /* 暗い地色に screen で重ねる白い煙 */
  --smoke-speed:   .42;   /* 小さいほど速い。1 で 31/43/37 秒、.42 で約 4 割の時間
                             （＝約 2.4 倍速）。0 や負の値にはしないこと */
  --smoke-grain:   512px; /* 煙のちぎれ方の細かさ。小さくすると筋が細かくなる */

  /* ---- フォームの面 ------------------------------------------------------
     地色に対して --c-ink（文字色）をごく薄く混ぜて面を作るため、
     暗いテーマでは「薄い白」、明るいテーマでは「薄い墨」になり、
     どちらでも枠が見える。数値を上げるとコントラストが強くなる。   */
  --panel-bg:       color-mix(in srgb, var(--c-ink) 3%,  transparent);
  --field-bg:       color-mix(in srgb, var(--c-ink) 5%,  transparent);
  --field-bg-focus: color-mix(in srgb, var(--c-ink) 9%,  transparent);

  /* ---- 罫線 ------------------------------------------------------------ */
  --line-w: 1px;

  /* ---- 画像比率 -------------------------------------------------------- */
  --ratio-wide:   16 / 9;
  --ratio-photo:  4 / 3;
  --ratio-square: 1 / 1;
  --ratio-tall:   3 / 4;

  /* ---- 動き ------------------------------------------------------------ */
  --dur-fast: 200ms;
  --dur-mid:  420ms;
  /* --dur-slow は出現アニメーション専用（他では使っていない） */
  --dur-slow: 1350ms;
  --ease:      cubic-bezier(.22, .61, .36, 1);
  --ease-out:  cubic-bezier(.16, 1, .3, 1);
  /* 出現アニメーション（下からふわっと）
       --reveal-y      持ち上げる距離
       --reveal-blur   ぼかし。0 にすると純粋なフェードアップになる
       --reveal-step   data-reveal-delay 1 あたりの遅れ（ずらして出す量）
       --ease-reveal   --ease-out より初速を抑え、長く滑らせる曲線。
                       ホバー演出に使う --ease-out とは分けている
                       （あちらを緩めるとボタンの反応が鈍く感じる）。 */
  --reveal-y:     40px;
  --reveal-blur:  9px;
  --reveal-step:  170ms;
  --ease-reveal:  cubic-bezier(.22, .68, .18, 1);

  /* オープニング（初回・リロード時の黒幕とロゴ）
     --opening-total を変えると全体の尺が伸縮する。
     内訳は @keyframes の % で決まる（ロゴ 0-40% 出現／40-62% 保持／
     62-82% 退出、黒幕 62-100% 退出）。 */
  --opening-total: 2900ms;
  /* ヒーローの見出し（.hero__title）を出しはじめる位置。
     --opening-total に対する割合で、JS がこの値を読んでタイマーを張る。
     黒幕が抜けきる 100% を待つと、幕が薄くなって「演出は終わった」と
     見えたあとに 1 秒ほど遅れて文字が出てくるので、黒幕の退出
     （62%〜100%）の途中から重ねて、幕が抜けた瞬間には出そろわせる。
     小さくすると幕の裏で出はじめ、大きくすると幕が抜けてから出る。 */
  --opening-hero-in: 70%;

  /* ---- 影（参考サイトは影を使わない） ---------------------------------- */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* ---- z-index --------------------------------------------------------- */
  --z-base: 1;
  --z-nav: 100;
  --z-nav-top: 101;
  --z-header: 110;
  --z-reserve: 120;   /* ご予約モーダル（ヘッダーより上、オープニングより下） */
  --z-skip: 200;
  --z-opening: 300;
}


/* ==========================================================================
   2. THEME PRESETS
   --------------------------------------------------------------------------
   <html data-theme="sumi">   … 既定（漆黒 × 淡金／参考サイト準拠・現在の納品仕様）
   <html data-theme="kinari"> … 明るい和モダン（生成り × 墨）
   <html data-theme="ebicha"> … 艶やか（海老茶 × 金）

   ★ テーマを増やす場合は [data-theme="xxx"] ブロックをコピーして
     色トークンだけ書き換えてください。HTML 側は data-theme の値を変えるだけ。
   ========================================================================== */

/* ---------- 既定：漆黒（SUMI）／参考サイト準拠 ---------- */
:root,
[data-theme="sumi"] {
  color-scheme: dark;

  /* 面 */
  --c-bg:       #000000;
  --c-bg-2:     #000000;
  --c-bg-3:     #0a0a0a;
  --c-bg-inset: #000000;

  /* 文字 */
  --c-ink:      #ffffff;
  --c-ink-2:    rgb(255 255 255 / .74);
  --c-ink-3:    #8d8d8d;
  --c-ink-on-accent: #ffffff;

  /* アクセント */
  --c-accent:      #a8332a;   /* 予約ボタンなどの朱 */
  --c-accent-hover:#c04034;
  --c-accent-2:    #cebb93;   /* 罫線・欧文ラベルの淡金 */

  /* 罫線（間仕切りが見えるよう、地色に沈まない濃さにしている） */
  --c-line:        rgb(255 255 255 / .30);
  --c-line-strong: rgb(255 255 255 / .50);
  --c-line-faint:  rgb(255 255 255 / .20);

  /* 背景テクスチャ（参考サイトは無地のため既定で無効） */
  --texture-opacity: 0;
  --texture-blend: soft-light;
}

/* ---------- 明るい和モダン：生成り（KINARI） ---------- */
[data-theme="kinari"] {
  color-scheme: light;

  --c-bg:       #f6f2ea;
  --c-bg-2:     #f1ece2;
  --c-bg-3:     #ffffff;
  --c-bg-inset: #ffffff;

  --c-ink:      #1a1917;
  --c-ink-2:    rgb(26 25 23 / .74);
  --c-ink-3:    #8b8478;
  --c-ink-on-accent: #fffdf9;

  --c-accent:      #96271f;
  --c-accent-hover:#b03328;
  --c-accent-2:    #9a7c3c;

  --c-line:        rgb(26 25 23 / .20);
  --c-line-strong: rgb(26 25 23 / .42);
  --c-line-faint:  rgb(26 25 23 / .10);

  /* 煙は CSS で描いているので色を変えられる。明るい地色では
     白い煙が消えてしまうため、墨色にして multiply で重ねる。
     写真素材だった頃はここを --smoke-opacity: 0 にして隠していた。 */
  --smoke-tint:    26 25 23;
  --smoke-blend:   multiply;
  --smoke-opacity: .26;
  /* 明るいテーマは本文が暗色なので、写真の上に文字が乗らないよう
     見出しが現れる前に地色へ到達させる（助走も短くする） */
  --veil-end: 20%;
  --veil-lead: 16vh;

  --texture-opacity: 0;
  --texture-blend: multiply;
}

/* ---------- 艶やか：海老茶（EBICHA） ---------- */
[data-theme="ebicha"] {
  color-scheme: dark;

  --c-bg:       #150c0c;
  --c-bg-2:     #190e0e;
  --c-bg-3:     #22110f;
  --c-bg-inset: #0f0808;

  --c-ink:      #f6ece2;
  --c-ink-2:    rgb(246 236 226 / .74);
  --c-ink-3:    #a08476;
  --c-ink-on-accent: #1a0d0c;

  --c-accent:      #c9a227;
  --c-accent-hover:#dcb63c;
  --c-accent-2:    #c9a227;

  --c-line:        rgb(246 236 226 / .30);
  --c-line-strong: rgb(246 236 226 / .50);
  --c-line-faint:  rgb(246 236 226 / .20);

  --smoke-opacity: .60;

  --texture-opacity: .18;
  --texture-blend: soft-light;
}


/* ==========================================================================
   3. RESET / BASE
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  line-height: var(--lh-body);
  letter-spacing: var(--ls-ja);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* clip は hidden と違いスクロールコンテナを作らないため、
     ヒーロー写真の position: fixed を壊さずに横はみ出しを抑えられる。 */
  overflow-x: clip;
}
html { overflow-x: clip; }

/* ドロワー／ご予約モーダルを開いている間は背面をスクロールさせない。
   ヘッダーの帯（body.is-locked .site-header::after）はドロワー専用なので、
   モーダルは別クラスにしてスクロールの固定だけを共有している。 */
body.is-locked,
body.is-reserve-open { overflow: hidden; }

/* 紙のテクスチャ（既定テーマでは --texture-opacity: 0 のため非表示） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../images/texture.jpg");
  background-size: 620px;
  opacity: var(--texture-opacity);
  mix-blend-mode: var(--texture-blend);
}
body > * { position: relative; z-index: 1; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--ff-heading);
  font-weight: var(--fw-heading);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-ja);
  text-align: left;
}

p { margin: 0 0 var(--sp-5); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              opacity var(--dur-fast) var(--ease);
}

ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

/* <picture> は表示上の箱を持たせず、中の img を親の直接の子として扱う。
   こうしないと img の height:100% や親の aspect-ratio が解決できず、
   画像が縮んだり枠を埋めなかったりする。 */
picture { display: contents; }

button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }

address { font-style: normal; }

:focus-visible {
  outline: 1px solid var(--c-accent-2);
  outline-offset: 4px;
}

::selection { background: var(--c-accent-2); color: #000; }

/* 日本語を文節単位で折り返すためのまとまり。
   inline-block なので、この内部では改行されない。
   「当店だ／けです。」のように語の途中で切れるのを防ぐ用途で使う。
   使うときは <span> 同士の間に空白を入れないこと（半角スペースが出る）。 */
.phrase { display: inline-block; }

/* 画面には出さないが読み上げには残す（見出しを非表示にする箇所で使用） */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: var(--z-skip);
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-accent);
  color: var(--c-ink-on-accent);
  font-size: var(--fs-xs);
  transform: translateY(-160%);
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { transform: translateY(0); }

/* ---- オープニング（初回・リロード時）------------------------------------
   真っ暗 → 中央にロゴがフェードイン → 保持 → 黒幕が抜けて
   ファーストビューが現れる。参考サイト（otowa-net.com）と同じ流れ。

   ▼ 設計の要点
   ・**CSS アニメーションだけで完結**させている。JS でクラスを付けて
     動かす作り方だと、JS が落ちたときに黒幕が残ってサイトが使えなくなる。
     forwards で最終キーフレーム（visibility: hidden）に留まるので、
     何があっても必ず消える。
   ・JS が無効な環境ではそもそも黒幕を出さない（html:not(.js) で display:none）。
     head のインライン script が .js を付けている。
   ・尺は --opening-total ひとつで伸縮する。内訳は下の % を参照。

   ▼ 尺の内訳（--opening-total = 2900ms のとき）
       0 –  40%   1160ms  ロゴがぼけながら下から浮かび上がる
      40 –  62%    640ms  ロゴを保持
      62 –  82%    580ms  ロゴが抜ける
      62 – 100%   1100ms  黒幕が抜ける（ロゴの退出と重ねている）        */
.opening { display: none; }

html.js .opening {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: var(--z-opening);
  background: var(--c-bg);
  animation: opening-veil var(--opening-total) var(--ease) forwards;
}

html.js .opening__brand {
  margin: 0;
  display: block;
  animation: opening-logo var(--opening-total) var(--ease) forwards;
}
/* オープニングのロゴはページ内のロゴより大きく見せる。
   元画像の余白ぶん、字面は指定値の 6 割ほどの高さで出る。 */
html.js .opening__brand .brand__img {
  display: block;
  height: clamp(76px, 12vw, 114px);
  width: auto;
  max-width: min(56vw, 272px);
  object-fit: contain;
}

@keyframes opening-logo {
  0%          { opacity: 0; filter: blur(12px); transform: translateY(18px); }
  40%, 62%    { opacity: 1; filter: blur(0);    transform: none; }
  82%, 100%   { opacity: 0; filter: blur(4px);  transform: translateY(-10px); }
}
@keyframes opening-veil {
  0%, 62% { opacity: 1; visibility: visible; }
  100%    { opacity: 0; visibility: hidden; pointer-events: none; }
}

/* 演出中はスクロールを止める（JS が付け外しする）。
   position: fixed ではなく overflow: hidden なので、
   ヒーローの固定レイヤーを壊さない。 */
body.is-opening { overflow: hidden; }

.ico {
  width: 1.05em;
  height: 1.05em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   4. UTILITIES
   ========================================================================== */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--sec-py);
  /* 固定したヒーローの上に重なるよう、本文側を必ず前面に置く */
  position: relative;
  z-index: 1;
}
.section--kukan,
.section--shops,
.section--company,
.section--contact { background: var(--c-bg); }

/* 本文の最後（お問い合わせ）とフッターのあいだだけ、間隔を広げる。
   セクション間の標準は --sec-gap（= 上下の --sec-py の合計）だが、
   ここはそれに --footer-lead を足す。
   ※ 本文の最後のセクションを入れ替えたら、この指定も移すこと。 */
.section--contact { padding-bottom: calc(var(--sec-py) + var(--footer-lead)); }

/* 帯のセクションは全幅の写真だけで、見出しも本文も持たない。
   上下の余白はセクションでは持たず、帯の手前は先頭の帯
   （.kukan-band--2）の margin-top、帯の後ろは次のセクション側の
   padding-top で作る。 */
.section--kukan { padding-block: 0; }
.section--kukan + .section { padding-top: var(--sec-gap); }

/* ---- 想いセクション：固定されたヒーロー映像の上へ重なり、徐々に暗転する ----
   ヒーローの映像は position: fixed で画面に残り、このセクションが上を流れる。
   背景グラデーションが「透明 → 地色」へ変わることで、
   スクロールにつれて映像が黒へ沈んでいくように見える。

   幕は 2 枚を重ねている（合成なので、見た目の濃さは 2 枚の合算）。

     ① 可読の幕（--veil-read / --veil-read-op）
        セクション上端から padding-top ぶんで --veil-read-op まで一気に落ち、
        以降はその濃さを保つ。「その日、いちばんのお肉を。」から下の白文字が、
        映像の明部に乗っても読めるのはこの 1 枚のおかげ。
        ヒーロー側には幕を置かない（映像を素材のまま見せる）ので、
        暗くする仕事はすべてここから始まる。

     ② 全面暗転の幕（--veil-end）
        ①の濃さを受け取って地色まで持っていく。以下の解説はこちらの話。

   ▼ 境目を見せないための工夫
     セクション上端で少しでも色が付いていると、その境界が
     横一本の線として動いて見えてしまう。そのため
       ・開始は完全な transparent
       ・最初の数%はほぼ透明のまま（0 → 1 → 3 → 7%）
     という緩やかな立ち上がりにして、境目を知覚できないようにしている。
     以降は S 字カーブで濃くなり、--veil-end で地色に到達する。

   ▼ 濃くなる速さ（＝どのくらい動画が見えているか）
     停止位置（--veil-end）を動かさずに速さだけ変えたいので、カーブの形で
     調整している。下の各行の「%」が不透明度、calc の係数が
     「幕の全長のどこか」。係数 0.5 の行の不透明度が、ちょうど道半ばでの濃さ。
       ・最初は 0.500 で 66% ＝ 前半で一気に暗くなり、動画がすぐ消えていた
       ・次に  0.520 で 41% まで後ろへ寄せた
       ・今は  0.520 で 23%（＝道半ばでもまだ 8 割近く動画が見えている）。
         幕の仕事の大半を後半 3 割に寄せ、02 のブロックを流し終わるあたりで
         ようやく濃くなるようにしている。
     もっとゆっくりにしたいときは中盤（係数 0.3〜0.7）の % を下げる。
     ただし下げるほど 02 の白文字が明るい動画の上に乗るので、
     読みにくくならない範囲で。逆に急にしたいときは上げる。
     終盤（係数 0.85 以降）を急にしすぎると、濃さの変わり目が横一本の帯として
     動いて見えるので、1 ステップ 12% 程度までに留めること。

   停止位置は % 指定＝このセクション自身の高さ基準なので、
   文章量が変わっても「02 のブロックを通過したあたりで真っ黒」を保てる。
   --veil-end を小さくすると早く暗転しきり、大きくすると遅くなります。 */
.section--omoi {
  padding-top: calc(var(--sec-py) + var(--veil-lead));
  background-color: transparent;
  background-image:
  /* ② 全面暗転の幕 */
  linear-gradient(
    to bottom,
    transparent 0%,
    color-mix(in srgb, var(--c-bg) 1%,  transparent) calc(var(--veil-end) * 0.050),
    color-mix(in srgb, var(--c-bg) 2%,  transparent) calc(var(--veil-end) * 0.120),
    color-mix(in srgb, var(--c-bg) 4%,  transparent) calc(var(--veil-end) * 0.200),
    color-mix(in srgb, var(--c-bg) 7%,  transparent) calc(var(--veil-end) * 0.280),
    color-mix(in srgb, var(--c-bg) 11%, transparent) calc(var(--veil-end) * 0.360),
    color-mix(in srgb, var(--c-bg) 16%, transparent) calc(var(--veil-end) * 0.440),
    color-mix(in srgb, var(--c-bg) 23%, transparent) calc(var(--veil-end) * 0.520),
    color-mix(in srgb, var(--c-bg) 31%, transparent) calc(var(--veil-end) * 0.600),
    color-mix(in srgb, var(--c-bg) 40%, transparent) calc(var(--veil-end) * 0.670),
    color-mix(in srgb, var(--c-bg) 50%, transparent) calc(var(--veil-end) * 0.740),
    color-mix(in srgb, var(--c-bg) 60%, transparent) calc(var(--veil-end) * 0.800),
    color-mix(in srgb, var(--c-bg) 71%, transparent) calc(var(--veil-end) * 0.860),
    color-mix(in srgb, var(--c-bg) 81%, transparent) calc(var(--veil-end) * 0.910),
    color-mix(in srgb, var(--c-bg) 92%, transparent) calc(var(--veil-end) * 0.960),
    var(--c-bg) var(--veil-end)
  ),
  /* ① 可読の幕。ヒーローの映像から本文へ渡すための一段目。
     セクション上端（＝ヒーローとの境目）は必ず transparent から始め、
     立ち上がりも 2% → 6% と抑えて、境界が横一本の線に見えないようにする。
     最後の停止位置 --veil-read を過ぎた後は、最終色がそのまま下まで続く
     （linear-gradient は最後の色で box の残りを埋める）ので、
     以降の本文はどこでも --veil-read-op の濃さの上に乗る。
     途中の % は --veil-read-op: 45% を終点として配分してある。
     終点を変えるときは中間も同じ比率で引き直すこと。 */
  linear-gradient(
    to bottom,
    transparent 0,
    color-mix(in srgb, var(--c-bg)  1%, transparent) calc(var(--veil-read) * 0.12),
    color-mix(in srgb, var(--c-bg)  3%, transparent) calc(var(--veil-read) * 0.24),
    color-mix(in srgb, var(--c-bg)  7%, transparent) calc(var(--veil-read) * 0.36),
    color-mix(in srgb, var(--c-bg) 12%, transparent) calc(var(--veil-read) * 0.47),
    color-mix(in srgb, var(--c-bg) 18%, transparent) calc(var(--veil-read) * 0.57),
    color-mix(in srgb, var(--c-bg) 25%, transparent) calc(var(--veil-read) * 0.67),
    color-mix(in srgb, var(--c-bg) 32%, transparent) calc(var(--veil-read) * 0.76),
    color-mix(in srgb, var(--c-bg) 38%, transparent) calc(var(--veil-read) * 0.85),
    color-mix(in srgb, var(--c-bg) 42%, transparent) calc(var(--veil-read) * 0.93),
    color-mix(in srgb, var(--c-bg) var(--veil-read-op), transparent) var(--veil-read)
  );
  background-repeat: no-repeat;
}

/* 縦組み（ヒーロー・レール・ラベル限定） */
.vert {
  writing-mode: vertical-rl;
  text-orientation: upright;
  letter-spacing: var(--ls-ja-wide);
}

/* ---- セクション見出し（全セクション共通） --------------------------------
   こだわりセクションの見出しを基準に、全セクションで同じ構成・書式・
   余白・揃え方に統一している。

     <header class="sec-head">
       <p class="sec-head__en">Our Commitment</p>  … 欧文ラベル（Jost・大文字・淡金）
       <h2 class="sec-head__ja">こだわり</h2>       … 和文見出し（明朝・細め・下に細い罫線）
       <p class="sec-head__lead">…</p>             … 補足文（任意）
     </header>

   修飾子はひとつだけ。
     .sec-head--on-media  … 写真の上に置く見出し（ご予約）。和文と補足文が白系    */
.sec-head {
  margin-bottom: var(--head-gap);
  text-align: center;
}
.sec-head__en {
  margin: 0 0 var(--sp-3);
  font-family: var(--ff-label);
  font-size: var(--fs-xs);
  font-weight: 300;
  letter-spacing: var(--ls-en-wide);
  text-transform: uppercase;
  color: var(--c-accent-2);
}
.sec-head__ja {
  margin: 0;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-ja-wide);
  text-align: inherit;   /* h2/h3 の既定（左）を打ち消して .sec-head に従わせる */
}
.sec-head__lead {
  max-width: 44em;
  margin: var(--sp-7) auto 0;
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

/* 写真の上に置く見出し（ご予約）。欧文ラベルは他セクションと同じ淡金のままにし、
   和文と補足文だけ白系へ差し替える */
.sec-head--on-media .sec-head__ja   { color: var(--c-on-media); }
.sec-head--on-media .sec-head__lead { color: var(--c-on-media-2); }

/* ---- ボタン／テキストリンク ----
   参考サイトは塗りのボタンをほぼ使わず、罫線と矢印のテキストリンク。
   ただし予約・送信ボタンのみ視認性を優先して塗りを残しています。      */
.btn {
  --btn-py: var(--sp-4);
  --btn-px: var(--sp-6);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--btn-py) var(--btn-px);
  border-radius: var(--radius-btn);
  font-family: var(--ff-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--ls-ja-wide);
  line-height: 1;
  text-align: center;
  border: var(--line-w) solid transparent;
  transition: background-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn .ico { transition: transform var(--dur-mid) var(--ease-out); }
.btn:hover .ico { transform: translateX(5px); }

.btn--accent {
  background: var(--c-accent);
  color: var(--c-ink-on-accent);
  border-color: var(--c-accent);
}
.btn--accent:hover { background: var(--c-accent-hover); border-color: var(--c-accent-hover); }

.btn--ghost {
  border-color: var(--c-line-strong);
  color: var(--c-ink);
}
.btn--ghost:hover { border-color: var(--c-ink); }

/* 罫線＋矢印のテキストリンク（参考サイトの「WEB予約 →」に相当） */
.btn--line {
  --btn-py: var(--sp-3);
  --btn-px: 0;
  justify-content: space-between;
  min-width: 13rem;
  padding-block: var(--sp-4);
  border: 0;
  border-bottom: var(--line-w) solid var(--c-line);
  color: var(--c-ink-2);
  font-size: var(--fs-xs);
}
.btn--line:hover { color: var(--c-ink); border-bottom-color: var(--c-accent-2); }

/* ネット予約ボタン（店舗情報）。色はテーマに関わらず固定の暗紅 × 白。 */
.btn--reserve {
  --btn-py: var(--sp-5);
  background: #500808;
  border-color: #500808;
  color: #ffffff;
  font-size: var(--fs-sm);
}
.btn--reserve:hover { background: #6b0b0b; border-color: #6b0b0b; }

.btn--sm { --btn-py: var(--sp-3); --btn-px: var(--sp-5); font-size: var(--fs-2xs); }
.btn--lg { --btn-py: var(--sp-5); --btn-px: var(--sp-7); font-size: var(--fs-sm); }

/* ---- スクロール表示アニメーション ----------------------------------------
   「下からふわっと」= 持ち上げ（translateY）＋フェード＋ぼかしの解除。
   ぼかしは --reveal-blur で、0 にすれば純粋なフェードアップになる。

   data-reveal-delay="1" のように整数を入れると --reveal-step ずつ遅れて出る。
   同じブロック内の要素に 0,1,2… と振ると順番に立ち上がる。

   ※ filter は合成レイヤーを作るため、transform / opacity と一緒に
     アニメーションさせても再レイアウトは起きない。
     .is-in で filter: none に戻し、ぼかしを残さないこと。

   ※ html.js を条件にしているのは、**JS が無いと本文が永久に透明のまま**に
     なるのを防ぐため。.is-in を付けるのは JS だけなので、
     条件を外すと JS 無効の環境やスクリプトを実行しないクローラーから見て
     ページが真っ白になる。html への .js 付与は head のインライン script。 */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-y));
  filter: blur(var(--reveal-blur));
  transition: opacity var(--dur-slow) var(--ease-reveal),
              transform var(--dur-slow) var(--ease-reveal),
              filter var(--dur-slow) var(--ease-reveal);
  transition-delay: calc(var(--reveal-delay, 0) * var(--reveal-step));
  will-change: opacity, transform, filter;
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  filter: none;
  /* 出終わったら合成レイヤーの予約を解放する */
  will-change: auto;
}


/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */

/* ------------------------------ ブランドロゴ -----------------------------
   ロゴは画像（assets/images/logo-honten.png）。白抜きの版なので、
   暗い背景（sumi）にそのまま乗る。

   ▼ サイズ指定を height でそろえている理由
   元画像 842×595 には上下左右に余白が入っており、字面は
   横 65%／縦 60% ほどしか占めていない。width を基準にすると
   場所ごとに見た目の大きさがそろわないため、height を基準にして
   width: auto に任せる。見た目の高さは指定値のおよそ 6 割。      */
.brand {
  display: inline-flex;
  align-items: center;
  margin: 0;
}
/* height はボックス（透明余白込み）の高さで、字面はその約 6 割。
   ヘッダーのバー（--nav-h）より大きい値を入れているが、余白が上下を
   吸収するため字面はバー内に収まる。ヘッダーに overflow: hidden を
   足すと切れるので注意。 */
.brand__img {
  display: block;
  height: clamp(48px, 4.8vw, 63px);
  width: auto;
}

/* ------------------------------ ヘッダー --------------------------------
   参考サイトに合わせ、PC でもロゴとハンバーガーのみ。                   */
/* スクロールによる背景色の付与は行わず、常に透明のまま。
   文字の可読性は上端のごく淡いグラデーションだけで確保する。 */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
}
/* 背景色の面は持たせず、上端のグラデーションのみ。
   ヘッダー高さより下まで伸ばして、後ろを流れる本文がロゴと
   ぶつかって見えないよう和らげる。 */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(var(--nav-h) * 2 + var(--nav-pt));
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--c-bg) 92%, transparent) 0%,
    color-mix(in srgb, var(--c-bg) 55%, transparent) 45%,
    transparent 100%
  );
  pointer-events: none;
}
/* ドロワーを開いている間だけ、上端に地色の帯を敷く。店舗情報を入れて
   中身が画面より高くなったため、スクロールすると文字が閉じるボタンに
   重なる。それをこの帯が受け止めて隠す。
   ドロワーは右端のパネルだけなので、帯も同じ幅に揃える（全幅に敷くと
   左半分のヒーローに理由のない帯が出る）。
   ::before ではなく ::after なのは重ね順の都合。ドロワーは .site-header の
   内側にあり z-index: --z-nav なので、同じ値でも「後に描かれる」::after で
   ないと下に潜る。ロゴとボタンは --z-nav-top なのでこの帯より上に残る。 */
body.is-locked .site-header::after {
  content: "";
  position: absolute;
  inset: 0 0 auto auto;
  z-index: var(--z-nav);
  width: var(--drawer-w);
  height: calc(var(--nav-h) + var(--nav-pt) + var(--sp-4));
  background: linear-gradient(
    to bottom,
    var(--c-bg) 0%,
    var(--c-bg) 62%,
    color-mix(in srgb, var(--c-bg) 55%, transparent) 82%,
    transparent 100%
  );
  pointer-events: none;
}

.site-header__inner {
  /* height だと --nav-pt を足した分だけ中身が縮むので min-height にする */
  min-height: var(--nav-h);
  padding-block-start: var(--nav-pt);
  padding-inline: var(--rail-inset);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-5);
}

/* ドロワーは .site-header の内側にあるため、ロゴとボタンを上に重ねる */
.site-header__inner > .brand,
.nav-toggle {
  position: relative;
  z-index: var(--z-nav-top);
}

/* ハンバーガー（参考サイトは 2 本線） */
.nav-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-inline-end: calc(var(--sp-2) * -1);
}
.nav-toggle__bars { display: grid; gap: 7px; width: 26px; }
.nav-toggle__bars i {
  display: block;
  height: var(--line-w);
  background: var(--c-ink);
  transition: transform var(--dur-mid) var(--ease), width var(--dur-mid) var(--ease);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars i:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* ------------------------------ ドロワー --------------------------------
   .gnav 自体は画面全面だが、見えるのは背面の幕だけ。実体のパネルは
   .gnav__inner で、右端から --drawer-w の幅だけスライドして顔を出す。
   幕の余白（左側）をクリックすると閉じる（main.js 側で処理）。         */
.gnav {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  display: flex;
  justify-content: flex-end;
  background: rgb(0 0 0 / .38);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-mid) var(--ease),
              visibility var(--dur-mid) step-end;
}
.gnav.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-mid) var(--ease), visibility 0s;
}
/* パネル本体。リンクは上揃えなので、縦方向の中央寄せはしない。
   中身が画面より高いときはパネルの中だけがスクロールする。 */
.gnav__inner {
  width: var(--drawer-w);
  height: 100%;
  padding: calc(var(--nav-h) + var(--nav-pt) + var(--sp-4))
           var(--drawer-pad) var(--sp-8);
  background: color-mix(in srgb, var(--c-bg) 97%, transparent);
  backdrop-filter: blur(18px);
  border-inline-start: var(--line-w) solid var(--c-line-faint);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform var(--dur-mid) var(--ease);
}
.gnav.is-open .gnav__inner { transform: none; }

.gnav__list { display: grid; }
.gnav__list li { border-bottom: var(--line-w) solid var(--c-line-faint); }
.gnav__list li:first-child { border-top: var(--line-w) solid var(--c-line-faint); }
.gnav__list a {
  display: flex;
  align-items: baseline;
  padding-block: clamp(0.9rem, 2vw, 1.25rem);
}
.gnav__ja {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-ja-wide);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.gnav__list a:hover .gnav__ja { color: var(--c-accent-2); }

/* ドロワー内のご予約。リンクの一覧とは別の導線なので、
   罫線のリストから少し離してボタンとして置く。 */
.gnav__reserve { margin: var(--sp-7) 0 0; }
.gnav__reserve-btn {
  display: flex;
  width: 100%;
  /* SP のドロワー幅（16rem）でも「ご予/約」と割れないよう左右余白を詰める */
  --btn-px: var(--sp-4);
}
/* flex の既定（shrink: 1）だと狭い幅で和文が 2 行に割れるため、縮小も止める */
.gnav__reserve-btn > span { flex: none; white-space: nowrap; }
/* 字間を空けたぶん、中身が右に寄って見えるのを戻す */
.gnav__reserve-ja { margin-inline-end: calc(var(--ls-ja-wide) * -1); }

/* ------------------------------ ヒーロー --------------------------------
   中央に縦組みのキャッチ、左右に縦組みのレール。参考サイトの構成。      */
/* ヒーロー自体は通常の流れ。見出しやレールは普通にスクロールして消える。
   固定するのは「映像」だけ。 */
.hero {
  position: relative;
  z-index: 0;
  min-height: var(--hero-h-min);
  height: var(--hero-h);
  display: grid;
  place-items: center;
}

/* 映像を画面に貼り付けたままにし、後続セクションがその上を流れていく。
   position: fixed なので祖先の overflow では切られない。 */
.hero__media {
  position: fixed;
  inset: 0;
  z-index: 0;
}

/* 動画とポスター画像のどちらも同じ扱いにする
   （object-fit は <video> の poster にも効く） */
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 素材そのままで出す。明るさ・彩度の補正も、上に重ねる幕も持たない。
     暗転は「想い」セクションの背景（.section--omoi）だけが担当する。 */
}

/* 暗転しきったら固定レイヤーの描画を止めて負荷を下げる（JS が付与） */
.hero.is-covered .hero__media { visibility: hidden; }

/* 縦組みでは inline 軸＝縦、block 軸＝右→左。
   flex を使うと row が縦方向になり列が折り返すため、素の block で組む。 */
.hero__title {
  position: relative;
  z-index: 2;
  display: block;
  margin: 0;
  color: var(--c-on-media);
  writing-mode: vertical-rl;
  text-orientation: upright;
  /* 本店ロゴと同じ筆文字にして、キャッチをロゴの延長として読ませる。
     Yuji Syuku は 400 の単一ウェイトしか無いので、太らせようとして
     font-weight を上げても合成太字になり、穂先の抜けが潰れて
     「筆で書いた線」に見えなくなる。400 のまま字面を大きくして見せる。 */
  font-family: var(--ff-brush);
  /* 1 列 4 文字（初志貫徹）なので、2 列組みだったときの --fs-hero 基準では
     画面に対して小さく見える。列が 1 本しか無いぶん字面を大きく取る。 */
  font-size: clamp(2.25rem, 4.3vw, 3.75rem);
  font-weight: 400;
  /* 毛筆は字面が不定形でそれ自体が余白を持つため、明朝 800 のときの
     0.3em ではバラけて 1 本の書に見えない。少し詰める。 */
  letter-spacing: .2em;
  line-height: 1;
  /* 縦組みでは inline 軸＝上下なので、text-align が上下方向の揃えになる。
     短い列（現代焼肉）が長い列（レトロが香る）の中央に来る。 */
  text-align: center;
  /* 映像に幕を掛けなくなったので、可読性は文字側の落ち影だけで作る。
     面ではなく影なので、背後の映像は素材のまま透けて見える。 */
  text-shadow: 0 0 .5em rgb(0 0 0 / .55), 0 1px 3px rgb(0 0 0 / .45);
}
/* 出現は「下からふわっと」ではなく、その場でのフェードだけにする。
   持ち上げ（--reveal-y）とぼかし（--reveal-blur）を殺してある。

   尺は本文の出現（--dur-slow = 1350ms）よりゆっくり取る。ここは黒幕の
   退出と重なるぶん、本文と同じ速さだと幕が抜けるのとほぼ同時に出そろって
   しまい、書としての立ち上がりが見えないため。

   出はじめは JS が --opening-hero-in（黒幕の退出に重なる位置）で合図する
   ので、黒幕が薄くなっていく間に 7 割ほどまで浮かび、幕が抜けたあとに
   残りをゆっくり詰める。尺を変えても出はじめの時刻は動かない
   （時刻は --opening-hero-in、速さはここ、で完全に別）。 */
html.js .hero__title[data-reveal] {
  --reveal-y: 0px;
  --reveal-blur: 0px;
  transition-duration: 1800ms;
}
.hero__title span {
  display: block;
  white-space: nowrap;        /* 列の折り返しを防ぐ */
}
/* 2 列目（＝縦組みでは左側）。block-start は右側の列との間隔。
   上下位置は .hero__title の text-align: center に任せるので
   inline-start（上の余白）は持たせない。
   字の大きさとウェイトは 1 列目とそろえるため、font-size も指定しない。 */
.hero__title span + span {
  margin-block-start: clamp(1.5rem, 4vw, 3.25rem);
}

/* ---- 徳島｜焼肉（画面右下に固定） --------------------------------------
   ご予約（.reserve-rail）と対になるレール。ヒーローの中ではなく
   body 直下に置き、position: fixed で全セクションを通して追従させる。
   z-index はご予約とそろえて、ドロワー（--z-nav）より下・本文より上。 */
.hero__rail {
  position: fixed;
  z-index: 90;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--sp-5);
  color: var(--c-on-media);
  /* ヒーローの幕を廃したので、映像の明部に乗っても読めるよう落ち影で締める */
  text-shadow: 0 1px 4px rgb(0 0 0 / .55);
}
.hero__rail .vert {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  letter-spacing: .28em;
  line-height: 1;
}
.hero__rail--right {
  inset-inline-end: var(--rail-inset);
  inset-block-end: clamp(2.25rem, 7vh, 4.25rem);
}

/* ---- ご予約（画面左下に固定） ------------------------------------------
   ヒーローの中ではなく body 直下に置き、position: fixed で全セクションを
   通して追従させる。z-index はドロワー（--z-nav）より下、本文より上。 */
.reserve-rail {
  position: fixed;
  z-index: 90;
  inset-inline-start: var(--rail-inset);
  inset-block-end: clamp(1.25rem, 4vh, 2.5rem);
  display: grid;
  justify-items: center;
  gap: var(--sp-4);
  color: var(--c-on-media);
  /* 背景は敷かない。padding は当たり判定（幅 44px 以上）の確保だけが目的。 */
  padding: var(--sp-4) 16px;
  /* ヒーローの幕を廃したので、映像の明部に乗っても読めるよう落ち影で締める */
  text-shadow: 0 1px 4px rgb(0 0 0 / .55);
}
.reserve-rail .vert {
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  letter-spacing: .28em;
  line-height: 1;
}
/* ご予約の上下に短い罫線 */
.reserve-rail::before,
.reserve-rail::after {
  content: "";
  width: 18px;
  height: var(--line-w);
  background: var(--c-on-media-line);
  transition: background-color var(--dur-fast) var(--ease);
}
.reserve-rail:hover { color: var(--c-accent-2); }
.reserve-rail:hover::before,
.reserve-rail:hover::after { background: var(--c-accent-2); }

/* ---- ご予約モーダル ------------------------------------------------------
   「ご予約」から開く店舗選択。ドロワー（.gnav）と同じ作りで、
   opacity + visibility の切り替えだけで出し入れする。
   カードは背景写真の上に文字を載せるため、色は常に白系（--c-on-media）。 */
.reserve-modal {
  position: fixed;
  inset: 0;
  /* iOS Safari は fixed の inset: 0 をツールバーを含む「大きい方の」ビューポートで
     解決するため、そのままだとアドレスバーと下部ツールバーの裏に中身が潜る。
     可視領域そのものを指す dvh で高さを取り直す（未対応環境は上の inset: 0 のまま）。
     開いている間は body が overflow: hidden なのでバーは開いた状態で固定され、
     dvh が縮んだり伸びたりしてカードが動くこともない。 */
  block-size: 100dvh;
  z-index: var(--z-reserve);
  display: flex;
  /* ノッチ／ホームインジケータの帯（env）を余白に足して、
     カードや閉じるボタンがその下に潜らないようにする。 */
  padding-inline: var(--gutter);
  padding-block-start: calc(clamp(1.5rem, 5vh, 4rem) + env(safe-area-inset-top, 0px));
  padding-block-end: calc(clamp(1.5rem, 5vh, 4rem) + env(safe-area-inset-bottom, 0px));
  opacity: 0;
  visibility: hidden;
  /* 閉じる間は visibility が visible のまま残る（step-end）ので、
     当たり判定は pointer-events で即座に切る。これが無いと、
     閉じた直後の 0.4 秒だけ幕が「ご予約」へのクリックを飲み込む。 */
  pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease),
              visibility var(--dur-mid) step-end;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.reserve-modal.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity var(--dur-mid) var(--ease), visibility 0s;
}

/* 開いている間、ハンバーガーは閉じるボタン（×）と役割も位置も重なるので隠す。
   ロゴは幕の下でそのまま暗く沈む。 */
body.is-reserve-open .nav-toggle {
  opacity: 0;
  pointer-events: none;
}

/* 背面の幕。カード側にも影を落とさないよう、パネルより下に敷くだけ。 */
.reserve-modal__scrim {
  position: fixed;
  inset: 0;
  background: rgb(0 0 0 / .74);
}

/* 中央寄せは margin: auto で行う。中身が画面より高いときは auto が 0 に
   潰れて上端から始まるので、カードの頭が画面外に切れてスクロールで
   戻れなくなることがない（align-items: center だと上へはみ出す）。 */
.reserve-modal__panel {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 55rem;
}

/* 閉じる（×）。PC は画面右上に固定、スマホはカードの下に置く（下の @media）。 */
.reserve-modal__close {
  position: fixed;
  inset-block-start: clamp(1.25rem, 3.5vh, 2.75rem);
  inset-inline-end: clamp(1.25rem, 3vw, 3.5rem);
  display: grid;
  place-items: center;
  width: clamp(44px, 3.6vw, 56px);
  height: clamp(44px, 3.6vw, 56px);
  /* ボタンの UA 既定 padding（1px 6px）が残っていると、中の × の
     幅だけが削られて小さくなる。ここで消してから % で大きさを決める。 */
  padding: 0;
  border-radius: var(--radius-pill);
  background: rgb(255 255 255 / .92);
  color: #1a1a1a;
  transition: background-color var(--dur-fast) var(--ease);
}
.reserve-modal__close .ico {
  width: 62%;
  height: 62%;
  stroke-width: 1.4;
}
.reserve-modal__close:hover { background: #ffffff; }

.reserve-modal__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.25rem, 7vw, 7.5rem);
}

/* ---- 店舗カード ---- */
.rcard {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 3rem;   /* SP では 2rem（下の @media） */
  display: grid;
  align-content: center;
  min-height: min(66vh, 31rem);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--c-on-media);
}
.rcard__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
}
.rcard__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 切り取り位置を下げる（縦長の写真で使う）。
   カードの形が PC は縦長・SP は横長で切り取られる量が違うため、
   見せたい範囲（焼き台まわり）に合わせて SP では少し戻す（下の @media）。
   scale は寄り（拡大）。はみ出した分は .rcard の overflow: hidden で切れる。 */
.rcard__bg--low img { object-position: center 100%; }
/* 写真を沈めて文字を読ませる幕（#464444 / 不透明度 77%） */
.rcard::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgb(70 68 68 / .77);
}

.rcard__body {
  display: grid;
  justify-items: center;
  gap: clamp(1.125rem, 2.2vw, 1.75rem);
  text-align: center;
}

.rcard__head {
  display: grid;
  justify-items: center;
  gap: clamp(0.75rem, 1.8vw, 1.25rem);
}
.rcard__logo { margin: 0; }
.rcard__logo img { width: auto; }
/* 横長のロゴと正方形のロゴなので、高さではなく見た目の大きさを揃える
   （フッターの .fshop__logo と同じ考え方）。 */
.rcard__logo--honten   img { height: clamp(60px, 6.8vw, 102px); }
.rcard__logo--nibankan img { height: clamp(71px, 7.8vw, 120px); }

.rcard__id { display: grid; gap: var(--sp-3); }
.rcard__name {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: clamp(1.1875rem, 0.95rem + 0.87vw, 1.625rem);
  /* Shippori Mincho は 400/500/600 を読み込んでいる。カードは写真の上に
     載るので、本文まわりより一段太くしてコントラストを稼ぐ。 */
  font-weight: 600;
  letter-spacing: var(--ls-ja-hero);
  line-height: 1.3;
  /* 字間ぶん右に寄るので、その分だけ戻して光学的に中央へ */
  text-indent: var(--ls-ja-hero);
}
.rcard__hours {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  font-weight: 900;
  letter-spacing: var(--ls-ja);
  line-height: 1.6;
  color: var(--c-on-media-2);
}
/* 営業時間と定休日は必ず 2 行に分ける */
.rcard__hours .phrase { display: block; }

.rcard__cta {
  min-width: min(16.5rem, 100%);
  font-weight: 500;
}

.rcard__tel { margin: 0; }
.rcard__tel a {
  display: inline-flex;
  align-items: baseline;
  gap: 3px;
  font-family: var(--ff-accent);
  font-size: clamp(1.25rem, 0.9rem + 1.1vw, 1.75rem);
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--c-on-media);
}
/* ホバーは色を変えず、白い下線だけを引く。下線は番号だけで
   「Tel.」には掛けないので、<a> ではなく番号の span に引く。 */
.rcard__tel a:hover .rcard__tel-num {
  text-decoration: underline;
  text-decoration-color: var(--c-on-media);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}
.rcard__tel-label {
  font-size: .58em;
  letter-spacing: var(--ls-en);
  color: var(--c-on-media-2);
}

/* 右側に落ちる縦のヘアライン（参考サイトの構造線） */
.hero__hairline {
  position: absolute;
  z-index: 2;
  inset-block: 0 0;
  inset-inline-end: calc(var(--rail-inset) + 3.25rem);
  width: var(--line-w);
  background: linear-gradient(transparent, var(--c-on-media-line) 22%,
                              var(--c-on-media-line) 78%, transparent);
}

/* ---- 背景の煙 ------------------------------------------------------------
   参考サイト（otowa-net.com の section03）と同じ考え方で、
   大きな煙を左右の端から半分はみ出させ、低い不透明度で重ねる。
   置いたセクション側に overflow: hidden が必要。

   合成（screen / multiply）と濃さは .smoke にまとめて一度だけ掛ける。
   こうしておくと内側の煙は通常合成のまま動かせるので、
   ブラウザは各層を GPU のテクスチャに焼いたまま transform だけ
   動かせばよく、毎フレーム描き直さずに済む。         */

/* 煙のゆらぎ模様。SVG の feTurbulence（フラクタルノイズ）を data URI で
   持たせた 512×512 の絵で、これを mask に敷いてもやを刻む。
   ・baseFrequency の 2 値は「横 縦」の細かさ。横を大きく・縦を小さく
     すると模様が縦に伸び、煙が立ちのぼる筋に見える。
   ・seed を変えると別のちぎれ方になる（a / b / c で変えている）。
   ・stitchTiles='stitch' が繰り返しの継ぎ目を消す指定。
   ・feColorMatrix の最終行 "1.9 0 0 0 -0.44" は
     「不透明度 ＝ 1.9 × ノイズ − 0.44」の意味。
     第1数値を上げるとコントラストが上がって筋が細くちぎれ、
     第5数値（引く量）を小さくすると穴が埋まって煙が分厚くなる。
   ・512×512 は --smoke-grain と同じ値にしてある。ここを揃えておくと
     拡大縮小されないので、細い筋がぼやけずに出る。      */
:root {
  --smoke-noise-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='0' y='0' width='512' height='512' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.042 0.017' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -0.44'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23s)'/%3E%3C/svg%3E");
  --smoke-noise-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='0' y='0' width='512' height='512' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.034 0.014' numOctaves='4' seed='29' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.8 0 0 0 -0.39'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23s)'/%3E%3C/svg%3E");
  --smoke-noise-c: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='s' filterUnits='userSpaceOnUse' x='0' y='0' width='512' height='512' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.050 0.021' numOctaves='3' seed='47' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.0 0 0 0 -0.48'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23s)'/%3E%3C/svg%3E");
}

.smoke {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: var(--smoke-opacity);
  mix-blend-mode: var(--smoke-blend);
}

/* セクションの上下端で煙を地色に溶かす幕。
   煙は overflow: hidden の境目で切られるため、そのままだと
   端に水平の切り口が出る。地色（--c-bg）で薄く覆って消す。
   ・screen 合成のとき地色は黒 → 黒を screen しても変化しない
   ・multiply 合成のとき地色はほぼ白 → 白を multiply しても変化しない
   どちらの合成でも「煙だけが消えて地色は変わらない」ので、
   テーマを問わずこの指定で足りる。                      */
.smoke::before,
.smoke::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  /* ::before は最初の子なので、そのままだと煙より先に描かれて
     下敷きになってしまう（::after は最後の子なので効く）。
     z-index で前面に出して、どちらの幕も煙の上に載せる。 */
  z-index: 1;
}
.smoke::before {
  inset-block-start: 0;
  height: clamp(8rem, 16vw, 14rem);
  background: linear-gradient(to bottom, var(--c-bg), transparent);
}
.smoke::after {
  inset-block-end: 0;
  height: clamp(7rem, 14vw, 12rem);
  background: linear-gradient(to top, var(--c-bg), transparent);
}

/* 煙 1 本ぶんの箱。横幅は --smoke-size、縦はその 6 割にしている。
   中のグラデーションも移動量も箱に対する % なので、この 1 行で
   「横はそのまま、縦だけ縮める」ができる。
   正方形のままだと 1 本で 976px（1 画面ぶん）を占めてしまう。
   ただし縦だけ詰めすぎると、横移動が縦移動を上回って煙が寝てしまう。
   横（--smoke-size）と縦（--puff-h）は必ずセットで見ること。 */
.smoke__puff {
  --puff-h: calc(var(--smoke-size) * .68);
  position: absolute;
  width: var(--smoke-size);
  height: var(--puff-h);
}

/* 煙ひと筋。1 本が「足元から湧いて、斜め上へのぼりながら広がって、消える」
   を繰り返す。3 枚を別々の周期・別々の出だしで走らせているので、
   途切れずに立ちのぼり続けているように見える。

   回転は使っていない。斜めの傾きは、塊（radial-gradient）を
   「足元は外側・上へいくほど内側」と斜めに並べて出している。
   rotate で箱ごと傾けるとゆらぎ模様まで回ってしまい、
   煙が渦を巻いて見えるため。

   見た目は「もやの塊（background のグラデーション）」を
   「ゆらぎ模様（mask のノイズ）」で刻んで作る。
   ノイズは SVG の feTurbulence を data URI で持たせた小さな絵で、
   stitchTiles を付けて継ぎ目なく敷き詰められるようにしてある。
   --smoke-grain（固定 px）で敷くので、大きさの違う煙どうしでも
   同じ絵を使い回せ、ブラウザは 1 回描くだけで済む。

   動かすのは transform と opacity だけ。ぼかしフィルタや
   mask-position のアニメーションは、動くたびに描き直しになるので使わない。 */
.smoke__wisp {
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
  -webkit-mask-size: var(--smoke-grain) var(--smoke-grain);
          mask-size: var(--smoke-grain) var(--smoke-grain);
  /* のぼる速さは一定にしたいので linear。ease だと途中で止まって見える */
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: calc(var(--wisp-dur) * var(--smoke-speed));
  /* 出だしのずれも --smoke-speed で一緒に縮める。
     こうしておくと速さを変えても 3 枚の間隔の比率が崩れない。 */
  animation-delay: calc((var(--wisp-lag) + var(--puff-lag, 0s)) * var(--smoke-speed));
  /* 足元を支点にして拡大すると、上へ広がりながらのぼる形になる */
  transform-origin: 50% 85%;
  will-change: transform, opacity;
}

/* 3 枚それぞれ、柱の太さ・ゆらぎの種・のぼり方を変えている。
   radial-gradient の「12% 20%」が塊の縦横比、「at 58% 70%」が位置。
   下ほど小さく濃く・外寄り、上ほど大きく薄く・内寄りに置くことで、
   「元は細く、斜め上へ広がりながら薄れる」煙の形になる。
   間を埋める 3 本目があるのは、これが無いと足元と上とが分かれて
   2 つの塊に見え、ひと続きの分厚い煙にならないため。

   ★ どの塊も「中心 ± 半径 × 消える位置」が 3%〜97% に収まっていること。
     はみ出すと、色が残ったまま箱の縁で切られて四角い継ぎ目が出る。
     例：at 36% 26% で半径 36% 26%、消える位置 88% なら
         横 36±31.7 → 4.3〜67.7、縦 26±22.9 → 3.1〜48.9 で収まる。
   feTurbulence の seed を変えると別のちぎれ方になる。       */
.smoke__wisp--a {
  --wisp-dur: 31s;
  --wisp-lag:    0s;   /* 周期の 0/3 */
  background:
    radial-gradient(14% 20% at 62% 74%, rgb(var(--smoke-tint) / 1), rgb(var(--smoke-tint) / 0) 100%),
    radial-gradient(24% 34% at 52% 56%, rgb(var(--smoke-tint) / .95), rgb(var(--smoke-tint) / 0) 80%),
    radial-gradient(22% 26% at 44% 42%, rgb(var(--smoke-tint) / .80), rgb(var(--smoke-tint) / 0) 85%),
    radial-gradient(36% 26% at 36% 26%, rgb(var(--smoke-tint) / .66), rgb(var(--smoke-tint) / 0) 88%);
  -webkit-mask-image: var(--smoke-noise-a);
          mask-image: var(--smoke-noise-a);
  animation-name: smoke-rise-a;
}
.smoke__wisp--b {
  --wisp-dur: 36s;
  --wisp-lag:  -12s;   /* 周期の 1/3 */
  background:
    radial-gradient(13% 18% at 66% 76%, rgb(var(--smoke-tint) / .98), rgb(var(--smoke-tint) / 0) 100%),
    radial-gradient(23% 36% at 54% 56%, rgb(var(--smoke-tint) / .90), rgb(var(--smoke-tint) / 0) 80%),
    radial-gradient(20% 24% at 46% 40%, rgb(var(--smoke-tint) / .74), rgb(var(--smoke-tint) / 0) 85%),
    radial-gradient(34% 24% at 34% 26%, rgb(var(--smoke-tint) / .60), rgb(var(--smoke-tint) / 0) 90%);
  -webkit-mask-image: var(--smoke-noise-b);
          mask-image: var(--smoke-noise-b);
  -webkit-mask-position: 37% 61%;
          mask-position: 37% 61%;
  animation-name: smoke-rise-b;
}
.smoke__wisp--c {
  --wisp-dur: 33.5s;
  --wisp-lag: -22.3s;  /* 周期の 2/3 */
  background:
    radial-gradient(11% 16% at 58% 70%, rgb(var(--smoke-tint) / .92), rgb(var(--smoke-tint) / 0) 100%),
    radial-gradient(20% 32% at 48% 50%, rgb(var(--smoke-tint) / .76), rgb(var(--smoke-tint) / 0) 82%),
    radial-gradient(18% 22% at 40% 36%, rgb(var(--smoke-tint) / .60), rgb(var(--smoke-tint) / 0) 86%),
    radial-gradient(29% 22% at 32% 24%, rgb(var(--smoke-tint) / .52), rgb(var(--smoke-tint) / 0) 90%);
  -webkit-mask-image: var(--smoke-noise-c);
          mask-image: var(--smoke-noise-c);
  -webkit-mask-position: 68% 24%;
          mask-position: 68% 24%;
  animation-name: smoke-rise-c;
}

/* 3 か所の煙が揃ってのぼると作り物に見えるので、場所ごとにもずらす */
.smoke__puff--tr { --puff-lag:  -5s; }
.smoke__puff--bl { --puff-lag: -20s; }

/* 斜め上へのぼる 1 周期。
   足元（translateY プラス・translateX プラス＝外寄り）で細く・透明 →
   濃くなりながら斜め上へ →  広がって薄れ、上で消える。
   X が ＋ から － へ動くぶんが「斜め」で、縦の移動量に対して
   だいたい 30 度ほど内側へ傾く。回転はしていない。
   82% あたりの opacity は「消え際を粘らせる」ための点で、
   これが無いと 3 枚が同時に薄くなる瞬間に煙がほぼ消える。
   0% と 100% はどちらも opacity 0 なので、1 周して先頭に戻る瞬間は見えない。 */
@keyframes smoke-rise-a {
  0%   { transform: translate3d(9%, 16%, 0) scale(.58, .60);      opacity: 0; }
  12%  {                                                          opacity: .95; }
  55%  { transform: translate3d(-5%, -10%, 0) scale(1.02, 1.04);  opacity: .80; }
  82%  {                                                          opacity: .55; }
  100% { transform: translate3d(-22%, -40%, 0) scale(1.30, 1.26); opacity: 0; }
}
@keyframes smoke-rise-b {
  0%   { transform: translate3d(11%, 18%, 0) scale(.54, .56);     opacity: 0; }
  14%  {                                                          opacity: .88; }
  58%  { transform: translate3d(-6%, -12%, 0) scale(1.06, 1.08);  opacity: .74; }
  84%  {                                                          opacity: .50; }
  100% { transform: translate3d(-24%, -42%, 0) scale(1.36, 1.30); opacity: 0; }
}
@keyframes smoke-rise-c {
  0%   { transform: translate3d(7%, 14%, 0) scale(.62, .64);      opacity: 0; }
  12%  {                                                          opacity: .80; }
  55%  { transform: translate3d(-5%, -9%, 0) scale(1.00, 1.02);   opacity: .64; }
  80%  {                                                          opacity: .44; }
  100% { transform: translate3d(-21%, -36%, 0) scale(1.24, 1.22); opacity: 0; }
}

/* 「動きを減らす」設定への対応。
   立ちのぼる動きは 0% も 100% も opacity: 0 なので、共通の指定
   （animation-duration: .01ms）でアニメーションを潰すと煙ごと消える。
   ここではアニメーション自体を切って、のぼりかけの姿で静止させる。 */
@media (prefers-reduced-motion: reduce) {
  .smoke__wisp {
    animation: none !important;
    opacity: .84;
    transform: translate3d(0, -6%, 0) scale(1.00, 1.02);
  }
  .smoke__wisp--b { opacity: .70; transform: translate3d(-10%, -24%, 0) scale(1.22, 1.30); }
  .smoke__wisp--c { opacity: .56; transform: translate3d(-15%, -36%, 0) scale(1.30, 1.40); }
}

/* 2 か所の置き場所。
   煙は「足元は外側・上へいくほど内側」に流れるので、右の 1 本は
   そのまま左上へのぼる。左の 1 本だけ scaleX(-1) で鏡に映して
   右上へのぼらせる（回転ではなく左右反転なので、ゆらぎ模様は回らない）。
   上下端に出る切り口は .smoke::before / .smoke::after の幕で地色に溶かす。 */
/* 右上 */
.smoke__puff--tr {
  inset-inline-end: calc(var(--smoke-size) * -.36);
  inset-block-start: 6%;
}
/* 左下（左右反転して右上へのぼらせる）。
   足元を少しだけ下へはみ出させると、帯の外から立ちのぼって見える。
   出しすぎるとグラデーションがまだ濃いところで切られるので浅めに。
   切り口自体は .smoke::after の幕が地色に溶かしている。 */
.smoke__puff--bl {
  inset-inline-start: calc(var(--smoke-size) * -.40);
  inset-block-end: calc(var(--puff-h) * -.14);
  transform: scaleX(-1);
}

/* ------------------------------ 想い ------------------------------------ */
/* ---- 想い：参考サイト section01 のレイアウト ----------------------------
   実測（1440px / セクション内の位置）を12カラムに置き換えたもの。

     大きな縦長写真   513×647  left 182   top 243
     横組みの見出し            left 841   top 343
     段落             306×314  left 841   top 596

   見出しと段落は left が同じ（＝左端が揃う）ので、同じカラムに乗せている。
   12カラムの明示配置で、この非対称な散らし方を再現している。 */
.omoi {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: start;
  margin-bottom: 12rem;
}

/* 大きな縦長写真（otowa img01 = 513×647 ≒ 4:5） */
.omoi__main {
  grid-column: 1 / 7;
  grid-row: 1 / 4;
  margin: 0;
  overflow: hidden;
}
.omoi__main img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
/* 01 の素材（omoi-grill = 1400×935 の 3:2 横長）は PC の箱（4:5）より横長なので、
   切り取りは「横」に起きる。＝縦は常に全部見えていて object-position の Y は
   効かない。寄せられるのは左右だけで、0%＝左端、100%＝右端。
   60% は肉がほぼ中央、トングが左から入り、右に焼き台の奥行きが残る位置。
   85% まで寄せると右が空きすぎて重心が崩れる。
   901px 未満では箱がこれより横長になり切り取り量が変わるので、
   下の max-width: 900px 側で中央基準に戻している。 */
.omoi:first-of-type .omoi__main img {
  object-position: 60% center;
}

/* 03 の素材（omoi-counter = 1045×1567 の 2:3 縦長）は箱より縦長なので、
   切り取りは「縦」に起きる。0%＝上端、100%＝下端。中央基準だと天井の煙突と
   ランプばかりが残るので、焦点を下へ寄せてカウンターと焼き台を見せる。
   切り取られる量は箱の比で変わり、PC の 4:5 では 144px、SP の 3:2 では 285px。
   同じ % でも SP のほうが 2 倍動くので、値は下の SP 側で個別に調整している。 */
.omoi:nth-of-type(3) .omoi__main img {
  object-position: center 65%;
}

/* PC だけ 01 をズームインさせる。
   この箱（4:5）では cover の倍率が高さ基準で決まるため、object-position をどう
   振っても倍率は変わらず、箱の比を変えると写真の高さ＝セクションの縦位置が動く。
   縦幅を保ったまま寄るには、img を箱より縦に長く描いて、figure の
   overflow: hidden で上下を均等に落とすのがいちばん副作用が小さい。
   絶対配置にして高さを --zoom（箱の高さに対する %）で与え、top で溢れの半分だけ
   上へずらす。倍率は --zoom の 1 箇所で動く。
   1180px コンテナで 576×720px の箱、倍率 0.770 → 0.863（＋12%）、
   可視は素材の x31〜79% / y5〜95%。

   幅ではなく高さで寄せているのは、この箱（4:5）では cover の倍率が高さ基準で
   決まるため。幅を広げても倍率は変わらない（横に切れるだけ）。
   なお inset だけで大きさを決めることはできない。img は置換要素なので
   width: auto が固有サイズ（1400px）になり、right の指定が無視される。

   901px 未満に持ち込むと箱の比（4:3 / 3:2）と噛み合わないので、
   max-width ではなく min-width で PC だけに閉じている。 */
@media (min-width: 901px) {
  .omoi:first-of-type .omoi__main {
    position: relative;
    aspect-ratio: 4 / 5;
  }
  .omoi:first-of-type .omoi__main img {
    --zoom: 112%;
    position: absolute;
    left: 0;
    top: calc((100% - var(--zoom)) / 2);
    width: 100%;
    height: var(--zoom);
    aspect-ratio: auto;
  }

  /* 02 の大きい写真（omoi-wagyu = 1400×934 の 3:2 横長）。素材に対して 4:5 の箱は
     縦に長く左右が 53% しか見えないので、9:10 まで縦を詰める。
     1180px コンテナで 576×720px → 576×640px（−11%）、可視幅は 60%。 */
  .omoi--rev .omoi__main img { aspect-ratio: 9 / 10; }

  /* 02 の 2 枚目（omoi-table）。素材と同じ 3:2 のまま、4 列に絞って小さく置く
     （1180px コンテナで 475×317px → 375×250px）。右に余白が残る。

     margin-block-start は段落との間隔ではなく、右にある大きい写真の下端との
     縦のズレを作るためのもの。大きい写真は rows 1-3 を占めて下端が
     コンテナ上端から 640px、2 枚目の上端はこの margin で 742px あたりに来る
     （＝100px ほど下がった位置から始まる階段になる）。
     大きい写真の縦幅（9:10）を変えたらこの値も見直すこと。 */
  .omoi--rev .omoi__sub {
    grid-column: 1 / 5;
    margin-block-start: clamp(4.5rem, 9vw, 8.5rem);
  }

  /* 見出しの上マージン（写真の上端からの下げ幅）。1440px で約 119px あって
     写真の上端から離れすぎていたので、6.4vw / 上限 5.75rem まで詰める
     （1440px で約 92px、1280px で約 82px）。02 だけに効かせる。 */
  .omoi--rev .omoi__title { --omoi-title-top: clamp(3.5rem, 6.4vw, 5.75rem); }
}

/* 横組みの見出し。左端（X 方向）を下の段落（.omoi__paras）に揃えたいので、
   段落とまったく同じカラムに乗せる。 */
.omoi__title {
  grid-column: 8 / 13;
  grid-row: 1;
  position: relative;
  /* 大きな縦長写真（.omoi__main）と同じ 1 行目に置いているので、
     上マージンで写真の上端から下げて重心をずらす。 */
  --omoi-title-top: clamp(4.75rem, 8.3vw, 7.625rem);
  margin: var(--omoi-title-top) 0 0;
  font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2.25rem);
  font-weight: 600;                 /* 本文と揃えて太く */
  letter-spacing: .26em;
  line-height: 1.9;
  color: var(--c-ink);
}
.omoi__title span { display: block; white-space: nowrap; }

/* 段落（見出しの下） */
.omoi__paras {
  grid-column: 8 / 13;
  grid-row: 2;
  margin-top: clamp(2.5rem, 6vw, 5rem);
}
/* サイトの導入なので、本文ではなくリード文として組む。
   明朝の中太・大きめ・行間を広く取り、字数を絞って余白で見せる。 */
.omoi__paras p {
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  color: var(--c-ink);
  font-family: var(--ff-heading);
  font-size: clamp(.9rem, 0.8rem + 0.4vw, .3rem);
  font-weight: 600;                 /* 導入なので明確に太く */
  line-height: 2.8;                 /* 行間を広く取って余白で見せる */
  letter-spacing: var(--ls-ja-wide);
}
.omoi__paras p:last-child { margin-bottom: 0; }

/* 02 は左右を反転させる */
.omoi--rev .omoi__main  { grid-column: 7 / 13; }
/* 02 も見出しは段落と同じカラム（左端が揃う） */
.omoi--rev .omoi__title { grid-column: 1 / 6; }
.omoi--rev .omoi__paras { grid-column: 1 / 6; }

/* 02 の 2 枚目（卓の引きのカット）。見出し・段落と同じ左カラムの下に続けて、
   段落の下に横長で置く。大きい写真（右・rows 1-3）とは列が別なので重ならない。
   3 列ぶんに絞って、右側にあえて余白を残している。 */
.omoi__sub {
  grid-column: 1 / 5;
  grid-row: 3;
  align-self: end;
  /* .omoi は column-gap しか持たないので、段落との間隔はここで作る */
  margin: clamp(2.5rem, 5vw, 4.5rem) 0 0;
  overflow: hidden;
}
/* 素材（omoi-table = 1400×934）と同じ 3:2 の箱にして、卓に並んだ皿を
   1 枚も切らずに全部見せる（＝いちばん引いた状態）。
   比を変えると必ずどこかが切れるので、ここは素材の比のまま使うこと。 */
.omoi__sub img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---- 想いの締め：全面写真の上に理念を置く帯 ----------------------------
   3 層構造。
     __media  写真。上下を mask で抜いて地色へ溶かす
     __scrim  幕。中央を空けた放射グラデーションで四隅だけ締める
     __inner  文字。写真と幕の上に置く

   ▼ 画面幅いっぱいに敷く方法
     この要素は .container（最大 1180px＋ガター・中央寄せ）の中にいるので、
     margin-inline: calc(50% - 50vw) で左右へ 1 画面分まで押し広げている。
     50% は自分の幅の半分＝コンテナの中心からの距離なので、
     コンテナが画面より狭い PC でも、ガターぶんだけ狭い SP でも、
     この 1 行で必ず画面の端に届く。はみ出しは html/body の
     overflow-x: clip（383 行目）で切られるため横スクロールは出ない。
     文字は padding-inline のガターで内側に戻す。

   ▼ 文字が読めるようにしている手当て
     素材はもともと黒地だが、肉の部分だけは明るく、そこに文字が重なる。
     写真側の brightness と幕の 2 枚で沈めている。
     --quote-fade は上下が地色へ溶ける幅。大きくすると写真の帯が細く見える。 */
.pullquote {
  --quote-fade: 20%;
  position: relative;
  overflow: hidden;
  /* 想いセクションの最後の要素なので、下の余白はセクションの
     padding-block（--sec-py）に任せる。 */
  margin: 0;
  margin-inline: calc(50% - 50vw);
  padding: clamp(7rem, 17vw, 13rem) var(--gutter);
  display: grid;
  align-items: center;
  text-align: center;
  color: var(--c-on-media);
}
/* プルクオートの下（＝固定背景の帯の手前）の間隔。
   標準のセクション間は「想いの padding-bottom（--sec-py）＋ 帯の margin-top
   （--block-gap）」で決まるが、全面写真から全面写真へ続くところなので
   他のセクション間ほど空けなくても切り替わりは分かる。少しだけ詰める。
   --sec-py の値が PC と SP で違うので、詰める量も別に持たせている
   （SP 側は 720px 以下のブロックを参照）。 */
@media (min-width: 721px) {
  .section--omoi { padding-bottom: calc(var(--sec-py) - clamp(2.75rem, 5.5vw, 6rem)); }
}

.pullquote__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* 箱より縦に長く描いて、溢れた分を上下から落とす。
   これで「拡大」と「焦点の縦位置」を別々に決められる。
     --quote-zoom     箱の高さに対する % （100% で拡大なし）
     --quote-focus-y  溢れをどちらから落とすか
                      0   ＝ 上端そろえ（写真の上のほうが見える）
                      0.5 ＝ 上下均等
                      1   ＝ 下端そろえ（写真の下のほうが見える）
   object-fit: cover なので、縦に伸ばした分だけ左右の切り取りも増える。
   height を伸ばす方式にしているのは、素材（3:2）に対して箱が
   PC でも SP でも横長すぎ／縦長すぎで、cover の倍率が高さで決まり
   縦方向の余りがゼロ＝object-position の Y が効かないため。 */
.pullquote__media img {
  --quote-zoom: 108%;
  --quote-focus-y: .68;
  position: absolute;
  left: 0;
  top: calc((100% - var(--quote-zoom)) * var(--quote-focus-y));
  width: 100%;
  height: var(--quote-zoom);
  object-fit: cover;
}
/* 写真の上端・下端を透明へ。前後のブロックとの境目を出さない */
.pullquote__media,
.pullquote__scrim {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--quote-fade),
    #000 calc(100% - var(--quote-fade)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    #000 var(--quote-fade),
    #000 calc(100% - var(--quote-fade)),
    transparent 100%
  );
}
.pullquote__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 肉の明るい部分に理念の文章が重なるので、写真を見せるより
     読めることを優先して濃くしてある。 */
  background: rgba(0, 0, 0, .78);
}
/* PC は箱（1440px 幅で 1440×823）が素材の 3:2 とほぼ同じ比のため、拡大なしでは
   ほとんど切り取りが起きず、肉が小さく収まってしまう。SP より強く寄せる。
   焦点 0.62 で写真の 25%〜85% の帯が見える。

   拡大の上限は素材（2800×1869）が 1x で等倍を超えない範囲。
   img の高さ＝箱の高さ×--quote-zoom がこの 1869px に達するまでは
   縮小表示のままなので、この箱（823px）なら 227% まで上げられる。
   ※ 箱の高さは文章量と余白で変わるので、大きく増減させたら測り直すこと。 */
@media (min-width: 901px) {
  .pullquote__media img {
    --quote-zoom: 165%;
    --quote-focus-y: .62;
  }
}

/* 煙は写真と幕の上・文字の下に敷く。
   .smoke 自身の z-index は 0 なので、ここで幕（__scrim = 1）と同じ 1 に上げる。
   同値なら DOM で後ろにある煙が上に描かれ、文字（__inner = 2）は煙より前に残る。 */
.pullquote .smoke {
  z-index: 1;
  /* 地色（黒）ではなく写真の上に screen で重なるぶん、こだわりセクションに
     敷いていた頃より明るく出る。理念の文章より前に出ないよう濃さを落とす。 */
  --smoke-opacity: .44;
}

.pullquote__inner { position: relative; z-index: 2; }

/* ---- 文字の組みは「想い」のタイトル・リード文がベース --------------------
   もとは .omoi__title / .omoi__paras p の値をそのまま使っていたが、
   ここは全面写真の上に文章 3 段を載せるため、そのままだと帯が伸びすぎる。
   字送り（line-height）・文字サイズ・段落間だけを一段詰めてある。
   書体・字間・太さは「想い」と共通なので、そちらを触るときは見比べること。 */
.pullquote__title {
  margin: 0 0 clamp(1.75rem, 4vw, 3.25rem);
  font-family: var(--ff-heading);
  font-size: clamp(1.25rem, 0.95rem + 1.1vw, 2rem);
  font-weight: 600;                 /* 明朝の細さのままだと写真に負ける */
  line-height: 1.7;
  letter-spacing: .26em;
}
.pullquote__body p {
  margin: 0 0 clamp(1.1rem, 2.5vw, 1.9rem);
  color: var(--c-ink);
  font-family: var(--ff-heading);
  font-size: clamp(.85rem, 0.8rem + 0.3vw, .875rem);
  font-weight: 600;
  line-height: 2.3;
  letter-spacing: var(--ls-ja-wide);
}
.pullquote__body p:last-child { margin-bottom: 0; }

/* --------------------------- 固定背景の帯 -------------------------------- */

/* ---- sec12 相当：スクロールしても固定される全幅の一枚 -------------------
   参考サイトの .bg-parallax と同じ「窓」の見え方。
   写真は画面に対して固定され、この帯が窓として動くため、
   前セクションの地色から現れ、次セクションの地色に隠れていくように見える。

   ※ 以前は background-attachment: fixed で実装していたが、iOS Safari は
     fixed 背景を「文書全体のサイズ」で敷いてしまい破綻する。そのため
     タッチ端末では scroll に落としており、**スマホでは単に画像が
     流れていくだけ**になっていた。

     現在は「中の要素を position: fixed で画面に貼り付け、外側で切り抜く」
     方式に変えて、PC もモバイルも同じ見え方に統一している。

     切り抜きに overflow: hidden は使えない（fixed の子孫は切られない）。
     clip-path なら切れる。しかも clip-path は fixed の包含ブロックを
     作らないので、中の要素は画面に貼り付いたまま矩形だけが抜ける。
     transform / filter / backdrop-filter は包含ブロックを作ってしまうので、
     この帯（と親要素）には使わないこと。                          */
.kukan-band {
  height: var(--band-h);
  background-color: var(--c-bg-3);
  position: relative;
  clip-path: inset(0);
}
/* 余白は見取り図から先頭の帯に入るところだけ。帯どうしは隙間なく接する。
   地色をはさまないことで、スクロールすると次の窓が下から前の写真に
   覆いかぶさってくるように見える。 */
.kukan-band--2 { margin-top: var(--block-gap); }
.kukan-band__media {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
}
/* 写真は画面いっぱいに cover で敷かれるので、切り取られ方は画面比率で決まる。
   PC（横長）では写真の横幅ぜんぶが、スマホ（縦長）では写真の高さぜんぶが
   使われ、余った側が落ちる。つまり **PC の寄り具合は写真の横の写り込み量、
   スマホの寄り具合は縦の写り込み量だけで決まり、1枚で両方を成立させるには
   引きで撮った写真しか使えない**。

   トリミングで寄せると逃げ場がなくなるので、写真は元の画角のまま使うこと。
   background-position の % は「切り出す帯をどこに合わせるか」で、
   写真の向きによって効く向きが変わる（横位置なら上下、縦位置なら PC 側の
   上下だけ。縦位置はスマホでは縦が過不足なく収まるため効かない）。 */

/* 2枚とも横位置。PC では写真のほぼ全体が入り、切られるのは上下わずか。 */
.kukan-band--2 .kukan-band__media {
  background-image: url("../images/band-2.jpg");
  background-image: image-set(
    url("../images/band-2.webp") type("image/webp"),
    url("../images/band-2.jpg")  type("image/jpeg")
  );
}
.kukan-band--3 .kukan-band__media {
  background-image: url("../images/band-3.jpg");
  background-image: image-set(
    url("../images/band-3.webp") type("image/webp"),
    url("../images/band-3.jpg")  type("image/jpeg")
  );
}
/* 縦長の画面では、同じ料理を縦位置で撮ったカットに差し替える。
   横位置のままだと縦長画面では中央の細い一本しか残らず、寄りすぎるため。
   切り替えは幅ではなく画面の比率で判定する。 */
@media (max-aspect-ratio: 1 / 1) {
  .kukan-band--2 .kukan-band__media {
    background-image: url("../images/band-2-sp.jpg");
    background-image: image-set(
      url("../images/band-2-sp.webp") type("image/webp"),
      url("../images/band-2-sp.jpg")  type("image/jpeg")
    );
  }
  .kukan-band--3 .kukan-band__media {
    background-image: url("../images/band-3-sp.jpg");
    background-image: image-set(
      url("../images/band-3-sp.webp") type("image/webp"),
      url("../images/band-3-sp.jpg")  type("image/jpeg")
    );
  }
}
/* 写真は撮ったままを出す。明るさを落とす幕（かつての .kukan-band::after）は
   持たない。もし将来またここへ幕を重ねる場合、filter は使えない
   （包含ブロックを作って中の fixed レイヤーを壊すため）。 */

/* ------------------------------ 店舗情報 --------------------------------
   カードをやめ、縦の細い罫線で 3 店舗を分ける（参考サイトの予約ブロック風）
   SP は 1 カラムで縦積み。auto-fit は使わない（3 店舗だと中間幅で 2＋1 に
   割れて、最後の 1 店舗だけが取り残された見た目になるため）。 */
.shops {
  /* 罫線の位置計算に使うので列の隙間は変数で持つ */
  --shops-gap: clamp(1.75rem, 3.5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  /* 縦（1 カラムのとき）／横 の順。縦は店舗の切れ目が分かる間隔を取る。 */
  gap: clamp(6rem, 14vw, 8rem) var(--shops-gap);
}
@media (min-width: 901px) {
  .shops { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.shop {
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 店舗を縦の細い罫線で分ける。罫線は border ではなく列の隙間の中央に
   絶対配置で置く。border＋padding で作ると、両隣に罫線が来る中央の列だけ
   内容幅が狭くなり、写真の高さと情報の行が左右の店舗とズレてしまう。 */
@media (min-width: 901px) {
  .shop + .shop::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--shops-gap) / -2);
    width: var(--line-w);
    background: var(--c-line-faint);
  }
}
.shop__media img {
  width: 100%;
  aspect-ratio: var(--ratio-wide);
  object-fit: cover;
}

/* 弐番館は開店前で外観写真が無いため、写真の代わりに置く「準備中」の面。
   aspect-ratio を写真と同じにしてあるので、3枚のカードの行の高さが揃う。 */
.shop__soon {
  display: grid;
  place-items: center;
  aspect-ratio: var(--ratio-wide);
  background: var(--panel-bg);
  border: var(--line-w) solid var(--c-line-faint);
  border-radius: var(--radius-img);
  color: var(--c-ink-3);
  font-family: var(--ff-heading);
  font-size: var(--fs-lg);
  letter-spacing: var(--ls-ja-wide);
  text-indent: var(--ls-ja-wide);   /* 字間ぶん右に寄るのを打ち消して中央に */
}

.shop__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: var(--sp-6);
}
.shop__name {
  margin: 0 0 var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: var(--line-w) solid var(--c-line);
  font-size: var(--fs-xl);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-ja-wide);
}

.infolist { display: grid; }
.infolist > div {
  display: grid;
  grid-template-columns: 5.75em 1fr;
  gap: var(--sp-4);
  padding-block: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: 2.1;
}
.infolist dt { color: var(--c-ink-3); letter-spacing: var(--ls-ja); }
/* 3 カラムの 1 列は 1000px 幅で 270px ほどしかない。@mimizuku_teisyokusakaba の
   ような長い Instagram ID は 1 語で折り返せず、そのままだと罫線を越えてはみ出す。 */
.infolist dd { color: var(--c-ink-2); overflow-wrap: anywhere; }
/* 住所・電話・Instagram はリンク。既定では下線を出さず、ホバーで白い下線を引く。
   SP では「ホバー」が無いので、下の 720px 以下で常時下線に切り替えている。 */
.infolist a {
  color: var(--c-ink);
  border-bottom: var(--line-w) solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.infolist a:hover { border-bottom-color: #fff; }

/* PC は横いっぱいに伸ばさず、文字幅ぶんだけの控えめな箱にする（SP では全幅）。
   全幅にしないのは、罫線で区切った縦長のレイアウトの中で
   塗りの面が大きすぎると情報より先にボタンが目に入るため。 */
.shop__actions {
  display: flex;
  justify-content: center;
  margin-top: auto;
  padding-top: var(--sp-7);
}
.shop__actions .btn--reserve { min-width: 15rem; }

/* ------------------------------ 会社概要 --------------------------------
   横罫だけの 1 カラムの表（縦罫は引かない）。罫線は上端・行間・下端
   すべて同じ --c-line-faint。値は本文のゴシックではなく明朝で組み、
   罫線を増やさずに項目名との差をつけている。                       */
.ctable {
  /* 幅は 48rem。1 カラムなので、これ以上広げると「50名」のような短い値の
     右に空きが伸びるだけで、罫線ばかりが長くなる。 */
  max-width: 48rem;
  margin-inline: auto;
  border-top: var(--line-w) solid var(--c-line-faint);
}
/* 1 項目の組み。既定（SP）は「項目名（上）／値（下）」の縦並び。
   横並びにすると項目名の列ぶん値の幅が削られ、狭い画面では
   住所や事業内容が途中で折り返してしまうため。 */
.ctable__item {
  display: grid;
  gap: var(--sp-2);
  padding-block: var(--sp-4);
  border-bottom: var(--line-w) solid var(--c-line-faint);
}
/* 721px 以上は横並び。値の幅に余裕があるので、1 項目 1 行に収まる。 */
@media (min-width: 721px) {
  .ctable__item {
    /* 項目名の列は「事業内容」「取引銀行」の 4 字が基準。
       値の頭を全行で揃えたいので、内容に合わせず一定にしている。 */
    grid-template-columns: 5.5em minmax(0, 1fr);
    align-items: baseline;
    /* 項目名と値のあいだ。画面が広いほど開き、PC（1440px）で約 56px。 */
    gap: clamp(1rem, 4vw, 3.5rem);
    padding-block: var(--sp-3);
  }
}

/* 項目名は値の上に乗る小さな見出し。色を落とし、字間を空けて、
   値より先に読ませない。 */
.ctable dt {
  color: var(--c-ink-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-ja-wide);
  line-height: var(--lh-tight);
}
.ctable dd {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-md);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-ja);
  line-height: var(--lh-snug);
  color: var(--c-ink);
  /* 長い住所や英数字が行の幅を越えないように */
  overflow-wrap: anywhere;
}
/* 住所・電話はリンク。下線の出し方は店舗情報（.infolist a）と揃える。 */
.ctable a {
  color: inherit;
  border-bottom: var(--line-w) solid transparent;
  transition: border-color var(--dur-fast) var(--ease);
}
.ctable a:hover { border-bottom-color: #fff; }
/* 事業内容・取引銀行は「／」で区切った並列。区切りの前で折り返ったときに
   行頭が「／」で始まらないよう、区切りは .phrase の先頭に入れてある。 */
.ctable dd .phrase + .phrase { margin-inline-start: -.15em; }
/* SP の詰め方は下の @media (max-width: 720px) にまとめてある。 */

/* ------------------------------ フォーム --------------------------------
   薄い面と枠線で 入力欄の位置がはっきり分かるようにしている。
   濃さは --panel-bg / --field-bg で調整可能。                          */
/* PC では 2 カラム。左列に短い入力欄、右列にお問い合わせ内容と送信まわり。
   680px 幅の 1 カラムだとフォームだけで 1153px（1.3 画面分）あり、横スペースが
   完全に遊んでいた。900px 以下では下のメディアクエリで 1 カラムに戻す。       */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--sp-7);
  row-gap: var(--sp-5);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--panel-bg);
  border: var(--line-w) solid var(--c-line-faint);
}
/* align-content: start がないと、行数の少ない列の項目が上下に散らばる */
.form__col {
  display: grid;
  gap: var(--sp-5);
  align-content: start;
}
/* 右列は最初の行（お問い合わせ内容）だけを 1fr にし、残りは暗黙の行に任せる。
   行数を固定して書くと、空になった行の gap だけが下端に残ってずれる
   （.form__status:empty は absolute、.field__err:empty は display:none なので
   グリッドのアイテム数が状況で変わる）。1fr が余りを全部吸うので
   右列の下端＝左列の下端、つまり送信ボタンと店舗欄の下端が揃う。        */
.form__col--side { grid-template-rows: 1fr; }
.field--msg { grid-template-rows: auto 1fr; }
/* min-height は「左列がこれより低くなったとき」の下限としてだけ効かせる。
   通常は上の 1fr が左列の高さに合わせて textarea を伸ばすので、
   ここを手で詰める必要はない。1 カラムに戻る 900px 以下では 7em に戻す。
   .field を重ねているのは、後方の .field textarea { min-height: 7em } と
   特異性を並べると打ち負けるため（記述順に依存させない）。               */
.field.field--msg textarea { height: 100%; min-height: 10em; }

.form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
}

/* align-content: start は必須。.form__row は 2 カラムで align-items が stretch
   なので、片方の欄にだけエラー文が出ると、もう片方の .field が行の高さまで
   引き伸ばされる。.field の行はすべて auto なので、既定の align-content:
   normal（＝stretch）だと余った高さがラベル行と入力欄行に分配され、
   エラーの無い側の入力欄だけが縦に太って左右の高さがずれる。
   start にすると余りは下端に落ちるので、横に並ぶ入力欄の上端と高さが揃う。
   .field--msg は 1fr 行が余りを吸うため、この指定の影響を受けない。      */
.field { display: grid; gap: var(--sp-2); align-content: start; }
.field > label {
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-ja-wide);
  color: var(--c-ink-2);
}
.req {
  display: inline-block;
  margin-inline-start: var(--sp-2);
  color: var(--c-accent-2);
  font-family: var(--ff-accent);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-en);
}
.req::before { content: "＊"; }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.field select {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  background: var(--field-bg);
  border: var(--line-w) solid var(--c-line);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-size: var(--fs-md);
  font-family: var(--ff-body);
  line-height: 1.8;
  letter-spacing: var(--ls-ja);
  transition: border-color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
  appearance: none;
}
.field textarea { resize: vertical; min-height: 7em; }
.field input::placeholder,
.field textarea::placeholder { color: var(--c-ink-3); opacity: .6; }
.field input:hover, .field textarea:hover, .field select:hover {
  border-color: var(--c-line-strong);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--c-accent-2);
  background: var(--field-bg-focus);
  outline: none;
}

.select { position: relative; display: grid; }
.select select { padding-inline-end: var(--sp-8); cursor: pointer; }
.select .ico {
  position: absolute;
  inset-inline-end: var(--sp-4);
  inset-block-start: 50%;
  translate: 0 -50%;
  pointer-events: none;
  color: var(--c-ink-3);
}
.select select option { background: #111; color: #fff; }

.field__err {
  margin: 0;
  font-size: var(--fs-2xs);
  line-height: 1.9;
  color: var(--c-accent-hover);
  letter-spacing: var(--ls-ja);
}
/* エラーが無いときは要素自体を消す。中身が空でも .field のグリッドギャップ
   8px が入力欄の下に残り、全欄合わせて 40px を無駄にしていた。
   main.js は textContent = msg || '' で空文字を入れるので :empty が効く。   */
.field__err:empty { display: none; }
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select { border-color: var(--c-accent-hover); }

.field--check { margin-top: var(--sp-3); }
.check {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-4);
  align-items: start;
  cursor: pointer;
  font-size: var(--fs-xs);
  color: var(--c-ink-2);
  line-height: 2;
}
.check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.check__box {
  width: 18px;
  height: 18px;
  margin-top: .4em;
  border: var(--line-w) solid var(--c-line-strong);
  background: var(--field-bg);
  position: relative;
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.check__box::after {
  content: "";
  position: absolute;
  inset-block-start: 2px;
  inset-inline-start: 4.5px;
  width: 4px;
  height: 8px;
  border-inline-end: 1.5px solid #000;
  border-block-end: 1.5px solid #000;
  rotate: 45deg;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
}
.check input:checked + .check__box { background: var(--c-accent-2); border-color: var(--c-accent-2); }
.check input:checked + .check__box::after { opacity: 1; }
.check input:focus-visible + .check__box { outline: 1px solid var(--c-accent-2); outline-offset: 4px; }
.check__txt small { display: inline-block; color: var(--c-ink-3); font-size: var(--fs-2xs); }

.form__honey {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.form__submit { margin-top: var(--sp-5); text-align: center; }
.form__submit .btn { width: 100%; }

.form__status {
  margin: 0;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 2;
  min-height: 2em;
}
/* メッセージが入るまでは見せない。
   display:none は使えない。これは aria-live のライブリージョンで、
   空のうちにアクセシビリティツリーから消えると、文字が入った瞬間に
   スクリーンリーダーが読み上げない（リージョンは中身が変わる前から
   存在している必要がある）。そこで .form__honey と同じ手法で
   「ツリーには残すが画面とレイアウトからは外す」状態にする。
   absolute なのでグリッドの行を作らず、上の 24px のギャップも消える。 */
.form__status:empty {
  position: absolute;
  width: 1px; height: 1px;
  min-height: 0;          /* 上の min-height: 2em を打ち消して 1px に潰す */
  overflow: hidden;
  clip-path: inset(50%);
}
.form__status.is-ok    { color: var(--c-accent-2); }
.form__status.is-error { color: var(--c-accent-hover); }
.form__status.is-note  { color: var(--c-ink-3); }

/* ------------------------------ フッター -------------------------------- */
/* 上の余白はセクション間の標準（--sec-py）より詰める。フッターは本文と違って
   罫線で区切られているので、同じ余白だとロゴまでが空きすぎて見える。
   SP（390px）は 56px で --sec-py と同じまま、PC だけ 128 → 88px に落ちる。 */
.site-footer {
  border-top: var(--line-w) solid var(--c-line-faint);
  padding-block: clamp(3.5rem, 8vw, 5.5rem) var(--sp-6);
}

/* 3 店舗を横に並べる。ロゴ → 店名（＋Instagram）→ 情報 の 3 段構成で、
   店舗情報セクションと同じ内容を最小限の 4 項目に絞って載せている。 */
/* 店舗ごとにロゴの高さが違う（横長 ／ 正方形 ／ 横長）ため、行を親側に持たせて
   subgrid で共有する。こうすると背の高い弐番館のロゴに合わせて行が伸びても、
   店名と情報の行は 3 店舗で同じ高さから始まる。
   subgrid 未対応のブラウザでは各カラムが独立した grid として素直に積まれる。 */
.site-footer__stores {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;   /* ロゴ ／ 店名 ／ 情報 */
  /* 行の間隔は各ブロックの margin が持つので row-gap は 0。
     ここに gap を入れると 3 行すべての間に効いてロゴ〜店名〜情報が離れる。 */
  /* 3 カラムでは 1 列が 1180/3 ＝ 約 330px しかないので、
     2 店舗のときの clamp(2.5rem, 7vw, 6rem) より隙間を詰める。 */
  column-gap: clamp(2rem, 4vw, 3.5rem);
  row-gap: 0;
  padding-bottom: clamp(3rem, 8vw, 5.5rem);
}

/* 店名と Instagram を PC では横並び、SP では情報の下に落とすため、
   DOM 順（ロゴ → 店名 → SNS → 情報）と表示順をエリア名で切り離している。 */
.fshop {
  grid-row: span 3;
  display: grid;
  grid-template-rows: subgrid;
  /* 3 列目の 1fr は余りを吸収するためのダミー。これが無いと、2 列にまたがる
     ロゴ（本店 209px / 弐番館 160px）の幅を満たすために 1・2 列が広げられ、
     店名と Instagram の間が column-gap 以上に開いてしまう。
     店名の列は minmax(0, max-content)。3 カラムになって 1 列が約 330px と
     狭くなったので、「定食酒場みみずく」のような長い店名でも折り返せるように
     下限を 0 にしておく（素の max-content だと折り返さずカラムからはみ出す）。 */
  grid-template-columns: minmax(0, max-content) max-content minmax(0, 1fr);
  grid-template-areas:
    "logo logo logo"
    "name sns  ."
    "info info info";
  column-gap: clamp(0.75rem, 1.4vw, 1.25rem);
}
/* ロゴは行の下端に置く。上端に揃えると、背の低い本店ロゴと店名の間に
   弐番館ぶんの余白が空いてしまう。 */
.fshop__logo {
  grid-area: logo;
  align-self: end;
  margin: 0 0 clamp(1.5rem, 3.5vw, 2.5rem);
}
.fshop__logo img { width: auto; }
/* 横長のロゴと正方形のロゴなので、高さではなく見た目の大きさを揃える。
   本店ロゴは画像の上下に余白を含むので、弐番館との差はこの数値より小さく見える。 */
.fshop__logo--honten   img { height: clamp(80px, 7vw, 96px); }
.fshop__logo--nibankan img { height: clamp(90px, 7.6vw, 105px); }
/* みみずくは 2 行組みで横幅が本店ロゴの 1.3 倍あるため、高さを揃えると
   だいぶ大きく見える。「みみずく」の字面が福朗の字面と近くなる高さにする。 */
.fshop__logo--mimizuku img { height: clamp(66px, 5.6vw, 78px); }

.fshop__name {
  grid-area: name;
  align-self: center;
  margin: 0;
  font-size: var(--fs-xl);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: var(--ls-ja-wide);
  color: var(--c-ink);
}
/* flex にして中のリンクをベースライン揃えから外す。inline-flex のままだと
   行ボックスのディセンダ分の余白がアイコンの下に付き、align-self: center でも
   店名に対してアイコンだけ上にずれて見える。 */
/* align-self: center で箱同士は揃うが、漢字の字面は行ボックスの中心より
   わずかに下（ディセンダぶん）に乗るため、アイコンだけ上に浮いて見える。
   font-size を店名と揃えたうえで、その差ぶんだけ em で押し下げて
   字面の中心とアイコンの中心を合わせる。 */
.fshop__sns {
  grid-area: sns;
  align-self: center;
  display: flex;
  align-items: center;
  margin: 0;
  font-size: var(--fs-xl);   /* 下の translateY を em で書くための基準。.ico は px 指定なので大きさは変わらない */
  line-height: 1;
  transform: translateY(0.04em);
}
.fshop__sns a {
  display: inline-flex;
  color: var(--c-ink-2);
  transition: color var(--dur-fast) var(--ease);
}
.fshop__sns a:hover { color: var(--c-ink); }
.fshop__sns .ico { width: 30px; height: 30px; }

/* 「住所：〜」のように区切り記号を CSS 側で足し、dt / dd を 1 行に見せる。 */
.fshop__info {
  grid-area: info;
  align-self: start;
  display: grid;
  gap: var(--sp-1);
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
}
.fshop__info > div {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-xs);
  line-height: 2.1;
  letter-spacing: var(--ls-ja);
}
.fshop__info dt { color: var(--c-ink-2); }
.fshop__info dt::after { content: "："; }
.fshop__info dd { margin: 0; color: var(--c-ink-2); }
.fshop__info a {
  color: var(--c-ink-2);
  border-bottom: var(--line-w) solid transparent;
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.fshop__info a:hover { color: var(--c-ink); border-bottom-color: #fff; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: var(--line-w) solid var(--c-line-faint);
}
.copy {
  margin: 0;
  font-family: var(--ff-accent);
  font-size: var(--fs-3xs);
  letter-spacing: var(--ls-en);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(1rem, 1.8vw, 1.75rem);
}
.site-footer__nav a {
  /* メインナビ（.gnav__ja）と同じ明朝。11px では --fw-heading（300）だと
     細く沈むので、ウエイトだけ上げて濃さを合わせている。 */
  font-family: var(--ff-heading);
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: var(--ls-ja-wide);
  color: var(--c-ink-2);
  transition: color var(--dur-fast) var(--ease);
}
.site-footer__nav a:hover { color: var(--c-ink); }


/* ==========================================================================
   6. RESPONSIVE
   ========================================================================== */
/* アンカー遷移時のヘッダー分のオフセット（scroll-margin-top）は付けない。
   遷移先はセクションの上端がそのまま画面上端に来る。 */

@media (max-width: 900px) {
  :root { --nav-h: var(--nav-h-sm); --nav-pt: var(--nav-pt-sm); }

  /* 想い：1カラムに積み替える */
  .omoi { grid-template-columns: 1fr; row-gap: var(--sp-7); }
  .omoi__main,
  .omoi__sub,
  .omoi__title,
  .omoi__paras,
  .omoi--rev .omoi__main,
  .omoi--rev .omoi__sub,
  .omoi--rev .omoi__title,
  .omoi--rev .omoi__paras {
    grid-column: 1 / -1;
    grid-row: auto;
    margin-inline: 0;
    margin-block: 0;
  }
  .omoi__main img { aspect-ratio: var(--ratio-photo); }
  /* 1 カラムでは DOM 順（大きい写真 → 小さい写真 → 見出し → 段落）になるが、
     PC と同じ「見出し → 段落 → 小さい写真」の縦順にそろえたいので最後へ送る。 */
  .omoi__sub { order: 1; }
  /* 01 の右寄せは PC の 4:5（可視幅53%）向けの値。ここから下は箱が横長になって
     切り取り量が減るため、そのまま持ち込むと寄りすぎる。中央基準に戻す。 */
  .omoi:first-of-type .omoi__main img { object-position: center; }
  .omoi__title {
    margin-top: var(--sp-5);
  }
  .omoi__paras { margin-top: 0; }
  /* 3 店舗を縦に積む。1 店舗ぶんの情報が 4 行あるので、
     店舗と店舗の間は横並びのときより広く取って区切りを見せる。
     縦積みでは左右で行を揃える必要が無いので subgrid もやめる。 */
  .site-footer__stores {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    row-gap: clamp(4rem, 12vw, 6rem);
  }

  /* 店名の右に置いていた Instagram を、情報の下（画像どおり）に落とす。 */
  .fshop {
    grid-row: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "logo"
      "name"
      "info"
      "sns";
    justify-items: start;
  }
  /* 縦積みでは店名の隣に並ばないので、字面に合わせた押し下げは戻す。 */
  .fshop__sns {
    margin-top: clamp(1.5rem, 5vw, 2rem);
    transform: none;
  }

  /* SP は「ナビ → 罫線 → コピーライト」の縦並び。
     罫線は __bottom の上ではなくコピーライトの上に移す。 */
  .site-footer__bottom {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-top: 0;
    border-top: 0;
  }
  .site-footer__nav { order: -1; }
  .site-footer__nav ul { display: grid; gap: 0; }
  .copy {
    margin-top: clamp(2.5rem, 8vw, 3.5rem);
    padding-top: var(--sp-6);
    border-top: var(--line-w) solid var(--c-line-faint);
    text-align: center;
  }

  /* フォーム：横並びの余裕がなくなるので 1 カラムに戻す。
     form__col が縦に積まれ、DOM 順どおり
     お名前 → … → 店舗 → 内容 → 同意 → 送信 の 1 列になる。 */
  .form { grid-template-columns: 1fr; }
  .form__col--side { grid-template-rows: none; }
  .field--msg { grid-template-rows: none; }
  .field.field--msg textarea { height: auto; min-height: 7em; }

  /* ---- ご予約モーダル：カードを縦積みに ----
     横幅が無くなるので、カードの中も「ロゴ｜店名＋営業時間」の 2 列にして
     高さを抑える。閉じるボタンは画面右上固定をやめ、カードの下に置く
     （縦に並ぶと親指が届く位置が下になるため）。 */
  /* ヘッダーのロゴにカードが重ならないよう、上だけ余分に空ける
     （中身が収まらない高さでは safe center が上寄せに切り替わり、
       その分だけスクロールできる） */
  .reserve-modal {
    /* 左右の余白でカードの幅を決めている（画面いっぱいに広げない） */
    padding-inline: clamp(2rem, 11vw, 3.5rem);
    /* ヘッダー分に加えて、ベースと同じくノッチ／ホームインジケータの帯も足す */
    padding-block-start: calc(var(--nav-h) + var(--nav-pt) + var(--sp-4) + env(safe-area-inset-top, 0px));
  }
  .reserve-modal__panel {
    display: grid;
    justify-items: center;
    max-width: 25rem;
  }
  .reserve-modal__cards {
    grid-template-columns: 1fr;
    gap: clamp(1.75rem, 6vw, 2.5rem);
    width: 100%;
  }
  .rcard {
    min-height: 0;
    border-radius: 2rem;
    padding: clamp(2.5rem, 8.5vw, 3.25rem) clamp(1rem, 4vw, 1.5rem);
  }
  .rcard__bg--low img { object-position: center 88%; }
  .rcard__body { gap: clamp(1.375rem, 4.5vw, 1.875rem); }
  .rcard__head {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    align-items: center;
    justify-content: center;
    gap: clamp(0.875rem, 4vw, 1.75rem);
  }
  /* 店名と営業時間はひとかたまりに見せたいので、ここだけさらに詰める */
  .rcard__id { gap: var(--sp-1); }
  .rcard__logo--honten   img { height: clamp(63px, 16.5vw, 84px); }
  .rcard__logo--nibankan img { height: clamp(71px, 18vw, 96px); }
  /* 横並びで幅が限られるので、店名・営業時間とも一段小さくする
     （営業時間は店名との差を保つため、さらに一段下） */
  .rcard__name  { font-size: clamp(1.125rem, 4.8vw, 1.375rem); }
  .rcard__hours { font-size: var(--fs-xs); }
  .rcard__cta { min-width: min(14rem, 100%); }
  /* --btn-py は .btn--reserve が --sp-5（24px）に上書きしているので、
     ここで戻して背の高さを詰める。
     ドロワーのご予約も同じ背の高さに見せたいので、必ずセットで指定すること。 */
  .rcard__cta,
  .gnav__reserve-btn { --btn-py: var(--sp-4); }
  /* DOM 上は最初に置いてある（読み上げ・Tab の順序を先頭にするため）。
     見た目だけカードの下へ送る。 */
  .reserve-modal__close {
    position: static;
    order: 2;
    margin-block-start: clamp(1.75rem, 6vw, 3rem);
  }
}

/* ---- ご予約モーダル：画面が低いとき（縦の詰め） ----
   iOS でアドレスバーと下部ツールバーが両方出ていると、可視領域は端末の
   画面高より 150〜200px 低い（例：iPhone 14 で 844 → 660 前後）。
   上の指定のままだと 1 画面に収まらず、× や「ネット予約はこちら」に
   スクロールしないと届かない。ここで縦の余白だけを詰めて収める。
   （収まらない端末では引き続きスクロールで届く。横幅・文字サイズは触らない） */
@media (max-width: 900px) and (max-height: 740px) {
  .reserve-modal {
    padding-block-start: calc(var(--nav-h) + env(safe-area-inset-top, 0px));
    padding-block-end: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  }
  .reserve-modal__cards { gap: clamp(1rem, 4.5vw, 1.5rem); }
  .rcard { padding-block: clamp(1.5rem, 5.5vw, 2rem); }
  .rcard__body { gap: clamp(1rem, 3.5vw, 1.5rem); }
  .reserve-modal__close { margin-block-start: var(--sp-4); }
}

/* --------------------------------------------------------------------------
   スマートフォン（720px 以下）
   --------------------------------------------------------------------------
   参考サイト準拠の「小さく・字間を広く」は PC では効くが、390px 幅の実機では
   本文 13px・字間 0.12em が細く読みにくい。ここではコンポーネントを個別に
   触らず、:root のサイズトークンを一段上げることで全体を底上げしている。
   PC（721px 以上）の表示には一切影響しない。
   -------------------------------------------------------------------------- */
@media (max-width: 720px) {
  :root {
    --hero-h-min: 540px;

    /* ドロワーは SP でもう一段細く。背面の幕を広く残して、
       「画面を覆う」のではなく「右から顔を出す」見え方を強める。 */
    --drawer-w: min(72vw, 16rem);
    --drawer-pad: var(--sp-5);

    /* ---- 文字サイズを一段上げる ----
       --fs-md（フォームの入力欄）を 16px にしているのは見た目のためだけでなく、
       iOS Safari が 16px 未満の入力欄にフォーカスすると必ず画面を拡大する
       ためでもある。16px あれば拡大されない。ここは下げないこと。 */
    /* ラベル・キャプション系（--fs-3xs / --fs-2xs）は小ささが意匠の一部なので
       PC と同じサイズのまま。読む量のある本文だけを底上げしている。 */
    --fs-xs:  0.78125rem;  /* 12 → 12.5px 補足・カード本文・店舗情報 */
    --fs-sm:  0.875rem;    /* 13 → 14px 本文 */
    --fs-md:  1rem;        /* 14 → 16px 入力欄（iOS のオートズーム対策） */

    /* ---- 字間と行間 ----
       文字を大きくした分の縦の膨張を行間で吸収する。
       字間は狭い画面だと語が分解して見えるため半分に。
       見出し用の --ls-ja-wide / --ls-ja-hero は据え置き（明朝の佇まいを維持）。 */
    --ls-ja:    0.06em;
    --lh-body:  2.0;
    --lh-loose: 2.3;

    /* ---- 余白 ----
       文字を大きくした分、余白側で総高を相殺する。 */
    --sec-gap:   6rem;   /* 112 → 96px */
    --veil-lead: 20vh;   /* 42vh(354px) → 20vh(169px) */
    /* SP では引用（厳選された希少な…）に画面 1 枚分の高さを与えているため、
       PC と同じ 80% だと幕が引用文の途中で完成し、上部にヒーロー写真が透ける。
       実測（390px・3 ブロック構成）：最後の 03 のブロックが 51.9%〜70.6%、
       締めの帯が 72.4% から始まる。その隙間で完成させる。
       隙間は 2% ほどしか無く、端末差で文章の折り返しが変わると前後する。
       帯の側に食い込むと、mask で抜いた帯の上端からヒーロー映像が覗いて
       目立つので、03 の側（＝写真の下端が少し黒に沈む）に寄せて 70% にしている。
       ※ この値は文章量に依存する。想いセクションの本文を増減したら
         引用ブロックの上端が何 % に来るか測り直すこと。 */
    --veil-end:  70%;

  }

  /* ヒーロー：レールは下端に、キャッチは中央のまま小さく */
  .hero__title { font-size: clamp(2.5rem, 11vw, 3.75rem); max-height: 58vh; }
  .hero__hairline { display: none; }
  .reserve-rail { inset-block-end: clamp(0.75rem, 2.5vh, 1.5rem); }
  .hero__rail--right { inset-block-end: clamp(1.5rem, 5vh, 2.5rem); }
  .hero__rail .vert,
  .reserve-rail .vert { font-size: var(--fs-md); letter-spacing: .22em; }

  .form__row { grid-template-columns: 1fr; }

  /* ---- 情報リストは 2 カラムのまま ----
     dt/dd を縦積みにすると行数が倍になり、店舗情報だけで 450px を超える。
     見出し列を詰めれば 360px 幅でも 2 カラムが成立し、
     「項目：値」の対応も読み取りやすい。 */
  /* 行間は PC ほど広げない（縦に伸びすぎると 1 画面に収まる項目が減る） */
  .infolist > div { grid-template-columns: 5.5em 1fr; gap: var(--sp-4); padding-block: var(--sp-2); }

  /* SP はホバーが無いため、リンクの白い下線を常時表示してタップできると伝える */
  .infolist a { border-bottom-color: #fff; }

  /* 会社概要：SP は文字を 1 段落とす（PC の 14px のままだと
     342px の本文幅に対して大きく、住所が窮屈に見える） */
  .ctable dt { font-size: var(--fs-2xs); }
  .ctable dd { font-size: var(--fs-xs); }
  /* SP はホバーが無いのでリンクの下線を常時表示（.infolist a と同じ扱い） */
  .ctable a { border-bottom-color: #fff; }

  /* SP は指で押す面を確保したいので全幅に戻す */
  .shop__actions .btn--reserve { flex: 1; }


  /* ---- 想い：参考サイト（otowa-net.com）section01 の SP レイアウト ---------
     390px 幅での実測をそのまま写している。

       小さい写真   幅31%  右端フラッシュ
       大きい写真   幅50%  左端フラッシュ・小さい写真の直下に階段状で続く
       見出し       横組み・左から 43px 字下げ
       段落         左から 43px 字下げ

     要点は「写真を全幅にしない」こと。31〜50% の小さい写真を左右交互に
     画面端へフラッシュさせ、あいだを大きな余白で抜くことで散らして見せる。
     見出しと段落は字下げを同じ値にして左端を揃える。

     12 カラムの明示配置で写真の位置と大きさを決め、テキストは
     padding-inline で字下げする（テキストはカラムに乗せない方が調整しやすい）。 */
  .omoi {
    grid-template-columns: repeat(12, 1fr);
    column-gap: 0;
    row-gap: 0;
    margin-bottom: 4rem;
    /* コンテナのガターを打ち消して、画面幅いっぱいを配置の台にする */
    margin-inline: calc(var(--gutter) * -1);
  }

  /* 900px 側の打ち消し規則が `.omoi--rev .omoi__main`（詳細度 0,2,0）で
     書かれているため、こちらも `.omoi` を前置して詳細度を揃える。
     揃えないと 02（.omoi--rev）だけ grid-column/row が効かない。 */

  /* 行2：大きい写真を左端へ（参考 img01 = 幅50%・左フラッシュ） */
  .omoi .omoi__main {
    grid-column: 1 / 7;
    grid-row: 2;
    margin: 0;
  }
  .omoi .omoi__main img { aspect-ratio: 4 / 5; }

  /* 01 だけは横長の帯で見せる。12 カラム中 11（幅92%）で右に余白を残し、
     左端フラッシュは維持する。右余白はカラムの刻みだと 32px（11カラム）と
     65px（10カラム）しか取れず中間が作れないので、margin を足して 48px にしている。
     390px 幅で 342×228px。

     箱は 3:2 ＝ 素材（1400×935）とまったく同じ比。縦幅はこの比で決まる。

     そのうえで img を箱より広く描き、figure の overflow: hidden で溢れた分を
     落としてズームインさせている。箱の比を変えてズームインすると縦幅が動いて
     しまうため（3:2 より縦長にしないと表示倍率は上がらない）、縦幅 228px を
     保ったまま寄るにはこの方法しかない。
     箱と素材が同じ 3:2 なので、この方法だと上下左右が同率で削れる。
     --zoom 130% で表示倍率 0.244 → 0.317、可視は素材の 77%（x12〜88%）。

     img は箱の左端起点なので、溢れた分をそのままにすると右だけが削られて
     可視が左に張り付く。margin-inline-start で溢れの半分だけ左へずらして
     左右均等にしている（--zoom を変えれば calc が追従する）。
     右に寄せたいときはこの値を 0 に近づける（0 で右端そろえ）。
     上下は object-position の Y（900px 側で center）で均等に落ちている。

     ズームは --zoom の 1 箇所だけで動かせる。ただし 145% を超えると、
     3 倍描画の端末で素材幅 1400px を使い切って拡大表示になる（＝甘くなる）。

     箱の形は figure 側で決めるので、img の aspect-ratio は解除する。
     picture は 430 行目で display: contents になっていて img が figure の直接の子
     として扱われるため、picture 側には何も指定しない。 */
  .omoi:first-of-type .omoi__main {
    grid-column: 1 / 12;
    margin-inline-end: var(--sp-4);
    aspect-ratio: 3 / 2;
  }
  .omoi:first-of-type .omoi__main img {
    --zoom: 125%;
    /* 溢れた 30% をどこから削るか。0 ＝ 左端そろえ（可視 x0〜77%）、
       0.5 ＝ 左右均等（x12〜88%）、1 ＝ 右端そろえ（x23〜100%）。
       大きくするほど可視範囲が右へ動く。 */
    --focus-x: 0.7;
    width: var(--zoom);
    /* 424 行目の img { max-width: 100% } が --zoom を 100% に丸めてしまうので外す。
       これが無いと幅は箱と同じままで、margin のぶんだけ横にずれて右に隙間が出る。 */
    max-width: none;
    margin-inline-start: calc((100% - var(--zoom)) * var(--focus-x));
    height: 100%;
    aspect-ratio: auto;
  }

  /* 03 も 01 とまったく同じ箱で見せる（11 カラム＋右 16px、3:2 の横長。
     390px 幅で 342×228px）。上の :first-of-type と同じ値なので、
     どちらかを触るときは両方あわせること。

     素材（omoi-counter = 1045×1567 の 2:3 縦長）は 01 の素材と違って箱より
     はるかに縦長なので、cover の倍率は幅で決まり上下が落ちる（可視は縦 44%）。
     箱の高さいっぱいに描いて中央から抜けば、カウンターと焼き台の帯が残る。
     01 の --zoom による拡大は「素材と箱が同じ 3:2 で切り取りの余地が無い」
     ための措置なので、こちらには要らない（入れると帯がさらに寄る）。 */
  .omoi:nth-of-type(3) .omoi__main {
    grid-column: 1 / 12;
    margin-inline-end: var(--sp-4);
    aspect-ratio: 3 / 2;
  }
  .omoi:nth-of-type(3) .omoi__main img {
    height: 100%;
    aspect-ratio: auto;
    /* 切り取り量が PC の 2 倍（285px）あるので、PC と同じ 78% だと
       カウンターより下（椅子と床）まで下がってしまう。少し戻す。 */
    object-position: center 75%;
  }

  /* 02 は 2 枚あるので、01 の左右を反転した階段にする。
     行1 に小さい写真（左端フラッシュ・横長）、行2 に大きい写真（右端フラッシュ）。
     01 は写真が 1 枚なので行1 は空のまま（大きい写真が行2 から始まる）。 */
  /* 1 枚目は左端フラッシュ。6 列 → 5 列に絞る（390px 幅で 195 → 163px）。
     下の大きい写真は左端が 179px なので、右端との間に 16px 残って
     左右のズレが見える。 */
  /* 箱を 5:4 に起こして縦を伸ばす（390px 幅で 108 → 130px）。
     素材（3:2）より縦長になるので左右が 83% に切り取られ、
     左端の調味料入れと右端の器が少し削れる。
     これ以上起こすと卓の広がりが分からなくなるので、ここで止めている。 */
  .omoi--rev .omoi__sub img { aspect-ratio: 5 / 4; }
  .omoi--rev .omoi__sub {
    grid-column: 1 / 6;
    grid-row: 1;
    margin: 0;
  }
  /* 大きい写真は右端フラッシュのまま、左端を 7 列ぶんから少し戻して横幅を詰める
     （390px 幅で 227 → 211px）。カラムの刻みは 32.5px で中間が作れないので、
     margin で 16px 分だけ削っている。
     row-gap は 0 なので、1 枚目（行1）との縦の間隔もここで作る。
     01 は行1 が空なので、この margin は 02 だけに付ける。 */
  .omoi--rev .omoi__main {
    grid-column: 6 / 13;
    margin-block-start: var(--sp-6);
    margin-inline-start: var(--sp-4);
  }

  /* 行3：見出し。字下げは段落と同じ値にして左端（X 方向）を揃える */
  .omoi .omoi__title {
    grid-column: 1 / -1;
    grid-row: 3;
    position: relative;
    margin: clamp(3.25rem, 13vw, 4.5rem) 0 0;
    padding-inline: calc(var(--gutter) + 1.25rem) var(--gutter);
    font-size: clamp(1.625rem, 1.3rem + 1.5vw, 1.875rem);
    letter-spacing: .19em;
    line-height: 1.85;
    color: var(--c-ink);
  }

  /* 行4：段落は見出しと同じ字下げ */
  .omoi .omoi__paras {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: var(--sp-5);
    padding-inline: calc(var(--gutter) + 1.25rem) var(--gutter);
  }

  /* ---- 想いの締め（日本の食文化に、…）------------------------------------
     PC では上下の余白が大きく、スクロール中にこのブロックだけが画面に残る
     瞬間がある。SP は余白が足りずそうならないため、ブロック自体に画面 1 枚分の
     高さを与え、中身を縦中央に置く。これで「ブロックが画面をちょうど覆う位置」が
     必ず存在する（＝全面写真がいちばん効く見え方になる）。

     svh ではなくアドレスバーが隠れた状態の高さ（lvh）を使う。svh だと
     バーが隠れたときに画面が伸び、前後の要素が覗いてしまう。 */
  .pullquote {
    min-height: 100lvh;
    align-content: center;
    padding-block: 4.5rem;
    /* 直前の「想い 03」との間隔。SP は .omoi の margin-bottom が 4rem まで
       詰まっているので、この帯の手前だけ広げて切り替わりをはっきりさせる
       （PC は .omoi の 12rem がそのまま間隔になるため、ここでは触らない）。

       ※ .omoi の margin-bottom と隣接して相殺されるため、実際の間隔は
         両者の「大きい方」になる。4rem 以下を入れても何も変わらないので、
         広げたい間隔そのものをここに書くこと。 */
    margin-block-start: clamp(7.5rem, 25vw, 10.5rem);
  }
  /* 帯の手前も少し詰める（PC 側は .pullquote の直後の @media を参照）。
     SP の --sec-py は 48px しかないので、詰める量は固定値で持たせている。 */
  .section--omoi { padding-bottom: calc(var(--sec-py) - 2rem); }
  /* 見出しの組みは「想い」のタイトル（.omoi .omoi__title）がベースだが、
     SP は帯が画面 1 枚ぶんしかないので、見出し〜本文の間隔（--sp-5）も
     文字サイズ・行送りもひとまわり詰めている。 */
  .pullquote__title {
    margin-bottom: calc(var(--sp-5));
    font-size: clamp(1.45rem, 1.2rem + 1.3vw, 1.65rem);
    letter-spacing: .19em;
    line-height: 1.7;
  }

  /* ---- 背景の煙 ------------------------------------------------------------
     プルクオートは SP だと画面 1 枚ぶんの高さしかないので、煙も小ぶりにする。
     置き場所（右上・左下）は割合指定なので、ここで動かす必要はない。 */
  .smoke {
    --smoke-size: clamp(20rem, 86vw, 26rem);
    /* 帯が狭いぶん動きも見えにくいので、PC より少しゆっくりにする */
    --smoke-speed: .52;
  }

  /* リード文の行間 2.8 は狭い画面では開きすぎるので 2.5 に詰める。 */
  .omoi__paras p { line-height: 2.5; }
  /* プルクオートは画面 1 枚に収める帯なので、本文の行送りはさらに詰める。
     ただし行間を詰めたぶん段落の切れ目が分かりにくくなるので、
     段落間（PC 側の下限 1.1rem）はここで少し広げ直している。 */
  .pullquote__body p {
    line-height: 2.15;
    margin-bottom: 1.55rem;
  }

  /* 流し込みの本文は幅によって折り返し位置が変わるため .phrase では追えない。
     text-wrap: pretty は最終行が極端に短くなる折り返しを避ける指定で、
     未対応のブラウザでは単に無視される（進歩的強化）。 */
  .infolist dd,
  .sec-head__lead { text-wrap: pretty; }


}

/* --------------------------------------------------------------------------
   タップ領域を 44px 以上に（900px 以下＝1カラムに積み替わる幅すべて）
   --------------------------------------------------------------------------
   タブレットの縦向き（768px など）も指で触るため、文字サイズの底上げとは
   別のブレイクポイントにしている。見た目は動かさず当たり判定だけ広げる。
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  /* ご予約の当たり判定は .reserve-rail の padding で 44px 以上を確保済み。 */

  /* ヘッダーのロゴ。inner が 64px しか無いので画像を縮めて収める。
     画像そのものが 48px あり当たり判定は足りているため、
     文字ロゴの頃に足していた padding-block は不要。 */
  .site-header__inner > .brand > .brand__img { height: 44px; }

  /* インライン要素は行の高さではなく文字の高さ分しか当たり判定が無い。
     フッター内のリンクは ::after を重ねて広げる（下線の位置は動かさない）。 */
  .infolist a,
  .fshop__info a { position: relative; }
  .infolist a::after,
  .fshop__info a::after {
    content: "";
    position: absolute;
    inset: -16px -6px;
  }
  /* block にして列幅いっぱいを当たり判定にする（「TOP」のような
     短いリンクだと inline-block では横が 30px 弱しか無い）。
     縦積みのリンクは padding がそのまま行間になるため、詰めた見た目に合わせて
     11 → 6px。高さは約 33px で、横は列幅いっぱいを当たり判定にしている。 */
  .site-footer__nav li a { display: block; padding-block: 6px; }
  /* アイコンだけのリンクは 30px しか無いので、余白で 44px まで広げる */
  .fshop__sns a { padding: 7px; margin: -7px; }
}

/* ロゴは画像 1 枚（.brand__img）になったため、狭い幅で一部だけ隠す
   といった出し分けはしていない。360px でもヘッダーは
   ロゴ 79px ＋ ハンバーガー 44px ＋ 余白 32px = 155px で収まる。 */


/* ==========================================================================
   7. MOTION / PRINT
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* html.js を付けているのは、隠す側の規則が html.js [data-reveal]（詳細度 0,2,0）
     なので、こちらを [data-reveal]（0,1,0）で書くと打ち消せないため。 */
  html.js [data-reveal] { opacity: 1; transform: none; filter: none; }
  .hero__media { transform: none !important; }
  /* 「動きを減らす」設定ではオープニングそのものを出さない。
     アニメーションを 0.01ms に潰すだけだと黒幕が一瞬フラッシュするため、
     display: none で最初から無かったことにする。 */
  html.js .opening { display: none; }
}

@media print {
  body { background: #fff; color: #000; }
  body::before,
  .opening,
  .site-header, .nav-toggle, .hero__rail, .reserve-rail,
  .reserve-modal,
  .hero__hairline { display: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .section { padding-block: 1.5rem; break-inside: avoid; }
}