@charset "utf-8";
/* 天冨羅 幸久 — サイトの見た目（docs/build-site.mjs が出す4ページ＋404 で共通）。2026-10-21 版。
   文章・店の情報は build-site.mjs、動き（目次・予約バー・暖簾・Instagram）は assets/js/site.js。
   英語ページだけの調整は、このファイルの最後の「英語ページ」の欄（html[lang="en"]）。

   完成デザイン（統合案 e-merge から仕上げ）
   配置・余白・冒頭はB案（余白と一行）。店の道具（品書き・控えの紙と落款）はA案（品書きと暖簾）。文字の後ろの木の板（白木の札・木札）は 2026-10-23 にやめた。
   地は生成り。暗い面は「空間と由来」の板とフッターだけで、純黒ではなく濃い焦げ茶。
   朱の塊は「要予約」の短冊・落款・予約の短冊（上の帯の電話と下の予約バー）だけ。冒頭の電話は白い札に朱の小さな点。

   目次（2026-10-21 見直し）：PCの左に固定していた細い目次は、上の細い帯に替えた。
   ・左の目次は、どの欄でも 184〜208px の空いた帯を左に作り、本文の幅を 1024px で 696px まで狭めていた
   ・冒頭では目次の文字が写真（椅子のあたり）に重なっていた
   上の帯なら横幅を使わず、冒頭では写真の上端の暗い天井だけにかかる。電話は右上（予約を探す人が最初に見る所）に常に出る。

   見出し：各欄の h2 は検索語を含む短い名前（「お品書き」「アクセス・店舗情報」など）。
   B案の大きな一文（.line）は h2 とは別の文として、h2 のすぐ下に置く。

   2026-10-22：点検の指摘を反映。冒頭の h1 を「天冨羅 幸久　京都・御所南の天ぷら」にして全幅で見せる（スマホは左上の店名の位置）。
   「30年以上」の一文は h1 の外の p.hero-line。h1 と大きな一文は透明から出さない（LCP を遅らせない）。
   フォントは明朝 500・600、ゴシック 400 だけを読み込む（このファイルでも明朝400・ゴシック500 を使わない）。 */

:root {
  /* 地：軽い和紙（2026-10-23 宮本さん「拾幸のサイトのような軽い和紙の背景に」）。--paper は和紙の画像の平均の色（画像が読み込まれる前もほぼ同じ色） */
  --paper: #f2f0eb;
  --paper-2: #fbf9f3;
  --paper-3: #ece5d7;   /* ご予約の欄の地（一段濃い生成り） */
  --paper-3-tint: #f9f3e9;   /* ご予約の欄：和紙の画像にこの色を掛け合わせて（multiply）、--paper-3 の濃さにする */
  --ink: #221d18;
  --ink-2: #4b443c;
  --ink-3: #6f665a;
  --line: rgba(34, 29, 24, .15);
  --line-2: rgba(34, 29, 24, .26);
  --shu: #bd3a2b;
  --shu-ink: #fff9f1;

  /* 暗い面：濃い焦げ茶（純黒にしない） */
  --koge: #3a3129;
  --on-koge: #efe8dc;
  --on-koge-2: rgba(239, 232, 220, .76);
  --on-koge-3: rgba(239, 232, 220, .62);
  --line-koge: rgba(239, 232, 220, .18);

  /* 長押（お品書きの上の太い線）。2026-10-23：文字の後ろの木の板（白木の札・木札）は「ダサい」のでやめた */
  --nageshi: #6b5139;
  --nageshi-yoru: #47372a;

  /* 写真がまだない所の枠 */
  --empty: #e6dfd2;

  /* 書体：2026-10-23 宮本さん「今のフォントは見にくい」→ 6案から B（Noto Serif JP＋Noto Sans JP）。線がしっかりしてスマホで読みやすい。
     前は しっぽり明朝＋Zen角ゴシックNew（docs/preview/2026-10-23_フォントの候補6案.png） */
  --mincho: "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --gothic: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
  --max: 1240px;   /* 欄の最大幅（左右の余白 --gut を含む）。上の帯・冒頭の文字も同じ線にそろえる */
  --gut: 24px;
  --head: 64px;    /* 上の帯の高さ */
  --bar: 62px;     /* スマホの下の予約バーの高さ */
  --sec-gap: 112px;

  /* 地の和紙：雲のようなムラと繊維の、つなぎ目の出ない 1024px の画像（docs/washi-texture.cjs で作成。拾幸の素材は使っていない）。
     どのページからも同じ場所を指すよう、/ から始まる書き方にする */
  --washi: url("/assets/images/washi-bg.webp");
  /* 控えの紙・意味の札など、地の上に置く白い紙：ごく薄い繊維だけ（下の色が透ける） */
  --washi-fine: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .09' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .42 0 0 0 0 .36 0 0 0 0 .26 0 0 0 -1.6 .9'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23a)' opacity='.04'/%3E%3Crect width='300' height='300' filter='url(%23b)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 0; }
/* ページ内の目次で動くときだけ滑らかに。読み込みの直後（別ページから #menu などで来たとき）は、冒頭の写真の上を流さずにすぐ着く */
html.is-ready { scroll-behavior: smooth; }
/* スマホ・タブレット：キーボードで移ったとき、下の予約バーの下に隠れないように */
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(var(--bar) + env(safe-area-inset-bottom) + 8px); } }
body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--washi);
  color: var(--ink);
  font-family: var(--gothic);
  font-size: 14.5px;
  line-height: 2;
  letter-spacing: .04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; letter-spacing: inherit; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
small { font-size: inherit; }

/* 日本語の改行：Chrome は文節（auto-phrase）で折る。
   Safari は auto-phrase が効かず word-break: normal になり、.nw の外は1字単位で折れる。
   文字を足したら、Safari 相当（auto-phrase なし）でも改行を点検すること（tools/breaks.cjs）。 */
p, li, dt, dd, th, td, summary, figcaption, h1, h2, h3, h4, span {
  word-break: auto-phrase;
  line-break: strict;
  overflow-wrap: break-word;
}
p, li, dd, summary { text-wrap: pretty; }
br.d { display: none; }
.nw { white-space: nowrap; }

/* 約物の手詰め：括弧・中黒は全角の幅のまま組んでいる（palt は使っていない）ため、手で詰める。
   .ks＝行頭の「（の半角の空きを詰める ／ .kt＝）のすぐ後の、を詰める ／ .nk＝見出しの・の前後を詰める */
.ks { margin-left: -.5em; }
.kt { margin-left: -.5em; }
.nk { margin-inline: -.2em; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; padding: 8px 14px; background: var(--ink); color: var(--paper); font-size: 13px; }
.skip:focus { top: 12px; }
/* フォーカスの枠：生成りの地では朱、写真の上・焦げ茶の板・フッターでは明るい色（どちらも 3:1 以上） */
:focus-visible { outline: 2px solid var(--shu); outline-offset: 3px; }
.hero :focus-visible, .shero :focus-visible, .story :focus-visible, .foot :focus-visible, .js body.on-hero .gnav :focus-visible { outline-color: var(--on-koge); }
@media (max-width: 1023px) { .gnav :focus-visible { outline-color: var(--on-koge); } }

/* 目次から各欄へ飛んだとき、欄の上の余白（--sec-gap）を打ち消して、見出しの上の空きを 40px ほどにする */
.sec[id] { scroll-margin-top: calc(40px - var(--sec-gap)); }
.sec.story { scroll-margin-top: 16px; }

/* 朱の短冊（要予約） */
.chip {
  display: inline-block;
  flex: none;
  margin-right: .6em;
  padding: 5px 6px 5px 8px;
  background: var(--shu);
  color: var(--shu-ink);
  font-family: var(--gothic);
  font-size: 11px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: .16em;
  white-space: nowrap;
  vertical-align: 2px;
}

/* よくあるご質問の分類の名前。2026-10-23：白木の木札（文字の後ろの木の板）は「ダサい」のでやめ、短い線を添えた明朝の文字だけに */
.kifuda {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--ink-2);
  font-family: var(--mincho);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .16em;
  white-space: nowrap;
}
.kifuda::before { content: ""; flex: none; width: 20px; height: 1px; background: var(--ink-3); }

/* 電話の札（B案）：生成りの白い札に、朱の小さな点。
   写真の上ではそのまま白い札、生成りの地の上では .is-paper（細い線で縁取る） */
.tel-plate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 20px;
  background: var(--paper-2);
  color: var(--ink);
  text-shadow: none;
  transition: background-color .3s, box-shadow .3s;
}
.tel-plate:hover { background: #fff; }
.tel-plate-k { display: flex; align-items: center; gap: 10px; font-size: 12.5px; line-height: 1.45; letter-spacing: .1em; white-space: nowrap; }
.tel-plate-k::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--shu); }
.tel-plate-n { font-family: var(--mincho); font-weight: 500; font-size: 19px; letter-spacing: .05em; white-space: nowrap; }
.tel-plate.is-paper { box-shadow: inset 0 0 0 1px var(--line-2); }
.tel-plate.is-paper:hover { box-shadow: inset 0 0 0 1px var(--ink-3); }

/* 写真がまだない所の枠：生成りより一段濃い無地に、小さく「写真準備中」 */
/* 2026-10-22：塗りつぶしをやめ、細い線の枠に（未完成の印象を弱める。写真が入ればその大きさのまま写真になる） */
.ph-empty {
  position: relative;
  display: grid;
  place-items: center;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--ink-2);
}
.ph-empty span { font-size: 11px; line-height: 1; letter-spacing: .24em; }

/* ---------------------------------------------------------------- 上の細い帯（スマホ・タブレットは冒頭の写真の上だけ） */
.gnav { position: absolute; z-index: 40; top: 0; left: 0; right: 0; color: #fff; }
.gnav-in {
  height: var(--head);
  padding: 0 var(--gut);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gnav-brand { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mincho); font-size: 15px; font-weight: 500; letter-spacing: .16em; white-space: nowrap; }
/* 店名が「御所南 天ぷら 幸久」と長くなったので（2026-10-30）、375px より狭いスマホでは少し小さく（右のボタンと重ならないように） */
@media (max-width: 374px) { .gnav-brand { font-size: 14px; letter-spacing: .08em; } }
@media (max-width: 349px) { .gnav-brand { font-size: 13px; letter-spacing: .02em; } }
.gnav-nav, .gnav-tel { display: none; }
.gnav-r { display: flex; align-items: center; gap: 2px; margin-right: -8px; font-size: 12.5px; letter-spacing: .18em; }
.gnav-r > a, .gnav-r > button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; }
.gnav a, .gnav button { text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
/* 言語の切り替え（2026-10-23：日本語・English・简体中文・繁體中文・한국어）。地球の印と今の言語、押すと一覧が下に開く。
   開閉は details（JS なしで動く）。外を押す・Esc で閉じるのは site.js */
.gnav-lang { position: relative; }
.gnav-lang > summary { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 44px; min-height: 44px; padding: 0 8px; list-style: none; cursor: pointer; text-shadow: 0 1px 10px rgba(0, 0, 0, .35); }
.gnav-lang > summary::-webkit-details-marker { display: none; }
.gnav-lang > summary svg { flex: none; width: 15px; height: 15px; }
.lang-list { position: absolute; z-index: 60; top: calc(100% + 6px); right: 0; min-width: 156px; margin: 0; padding: 6px 0; list-style: none; background: var(--paper-2); color: var(--ink); box-shadow: 0 0 0 1px var(--line), 0 10px 28px rgba(20, 14, 9, .2); letter-spacing: .04em; }
.lang-list a, .lang-now { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px; font-size: 14px; line-height: 1.4; white-space: nowrap; text-shadow: none; }
.lang-list a:hover, .lang-list a:focus-visible { background: var(--paper); }
.lang-now { color: var(--ink-3); }
.lang-now::before { content: ""; flex: none; width: 5px; height: 5px; margin-left: -12px; border-radius: 50%; background: var(--shu); }

/* ---------------------------------------------------------------- 冒頭（B案） */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  /* iPhone SE の Safari（ツールバーが出ている時の高さ 約553px）でも、電話の札が最初の画面に収まるように */
  min-height: 540px;
  overflow: hidden;
  background: #2a221c;
  color: #fff;
}
.hero picture, .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-img { object-fit: cover; object-position: 50% 50%; }
/* 文字の下だけをわずかに沈める（写真全体にはかけない）。
   2026-10-23 宮本さん「ヒーロー画像が全然見えない」→ 料金の行を外し、予約の札を横に並べて文字を減らしたうえで、
   下の沈みは画面の下から約3分の1まで（カウンターと椅子が見えるように） */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgba(20, 14, 9, .42) 0, rgba(20, 14, 9, 0) 30%),
    linear-gradient(to top, rgba(20, 14, 9, .62) 0, rgba(20, 14, 9, .34) 20%, rgba(20, 14, 9, 0) 36%);
}
.hero-copy, .hero-note { position: absolute; z-index: 2; }
/* 冒頭のロゴ（書と落款）と「京都・御所南」（.hero-mark）
   名刺と同じく、書の右に縦書きの「京都・御所南」を、書の上端にそろえて置く（2026-10-23 宮本さん「名刺みたいにロゴの右上に京都・御所南」）。
   スマホ・タブレット：左下、一文のすぐ上に置き、書・一文・開店日・予約の札をひとまとめにする（6案からC案）。PCは右上。
   真ん中に大きく置く形は「真ん中にドンはいらない」、右の中ほどの小さなロゴは「配置が微妙」でやめた。
   明るいカウンターに重なるので、影を2重にして読みやすくする（写真全体は暗くしない）。
   --mark-h＝書の高さ。「京都・御所南」の字の大きさは書の高さに合わせる（名刺は約6%。画面では読める大きさに少し大きく） */
.hero-mark { --mark-h: 18vh; position: relative; z-index: 2; display: flex; align-items: flex-start; height: var(--mark-h); pointer-events: none; }
.hero-logo { display: block; width: auto; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)) drop-shadow(0 2px 16px rgba(0, 0, 0, .6)); }
.hero-place { writing-mode: vertical-rl; margin: .25em 0 0 .55em; font-family: var(--mincho); font-weight: 500; font-size: max(10.5px, calc(var(--mark-h) * .075)); line-height: 1; letter-spacing: .42em; white-space: nowrap; text-shadow: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 12px rgba(0, 0, 0, .55); }
@media (min-width: 1024px) {
  .hero-mark { --mark-h: clamp(220px, 31vh, 320px); position: absolute; top: 112px; right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); }
  .hero-place { font-size: calc(var(--mark-h) * .064); }
}
.hero-copy {
  top: 100px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  left: var(--gut);
  right: var(--gut);
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .38);
}
/* h1（店名と「京都・御所南の天ぷら」）は、読み上げ・検索のために残して画面には出さない
   （2026-10-23 宮本さん：左上の「天冨羅 幸久／京都・御所南の天ぷら」を消す。店名は書、場所は書の右の「京都・御所南」で見せる） */
.hero-h { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* スマホ・タブレット：冒頭全体を縦の流れにする（上は写真だけ → 書と「京都・御所南」・一文・開店日 → 予約の札）。
   .hero-copy は箱を作らず（display: contents）、中の文字と札を .hero の並びに直接並べる。
   書の上の auto の余白で、書から下を画面の下に寄せる */
@media (max-width: 1023px) {
  .page-home .gnav-brand { visibility: hidden; }
  .hero { display: flex; flex-direction: column; padding: 21px var(--gut) calc(26px + env(safe-area-inset-bottom)); }
  .hero-copy { display: contents; }
  .hero-line, .hero-sub, .hero-open, .hero-cta { position: relative; z-index: 2; }
  .hero-mark { --mark-h: min(18vh, 160px); order: 2; align-self: flex-start; flex: 0 1 auto; min-height: 0; margin: auto 0 16px -4px; }
  @supports (height: 1svh) { .hero-mark { --mark-h: min(18svh, 160px); } }
  .hero-line, .hero-sub, .hero-open { order: 2; }
  .hero-cta { order: 3; }
  .hero-line { text-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 2px 22px rgba(0, 0, 0, .5); }
  /* 左下（書と一文の下）だけを、角から楕円にわずかに沈める */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(20, 14, 9, .42) 0, rgba(20, 14, 9, 0) 30%),
      radial-gradient(115% 48% at 0% 100%, rgba(20, 14, 9, .4) 0, rgba(20, 14, 9, .16) 62%, rgba(20, 14, 9, 0) 100%),
      linear-gradient(to top, rgba(20, 14, 9, .58) 0, rgba(20, 14, 9, .3) 20%, rgba(20, 14, 9, 0) 36%);
  }
}
/* 一文（2026-10-23：「熟練の技で一品ずつ／丁寧にご提供します。」スマホ・タブレットは2行、PCは1行。1行10字が360pxでも収まる大きさ） */
.hero-line {
  display: block;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(24px, 7.6vw, 32px);
  line-height: 1.55;
  letter-spacing: .08em;
}
.hero-row { display: contents; }
.hero-text { display: contents; }
/* 大きな文の下の小さな文（今は出していない：build-site.mjs の hero.sub が ''）。大きな文と同じ明朝で */
.hero-sub { margin-top: 8px; font-family: var(--mincho); font-weight: 500; font-size: clamp(14.5px, 4vw, 17px); line-height: 1.8; letter-spacing: .1em; }
.hero-open { margin-top: 10px; font-size: 12.5px; line-height: 1.8; letter-spacing: .08em; }
/* コース料金の行は外した（2026-10-23 宮本さん「なしでいい」。料金はお店の欄・お品書きにある） */
/* 予約の札：ネット予約（左・主役）と電話（右）を横に並べる（2026-10-23 宮本さん「横並びにできない？」）。
   スマホは2つを同じくらいの幅で。電話の札は番号だけを見せ、「ご予約・お問い合わせ」は読み上げ用に残す（タブレット・PCは見せる） */
.hero-cta { display: flex; gap: 8px; margin-top: 18px; }
.hero-web, .hero-tel { flex: 1 1 0; min-width: 0; height: 54px; }
.hero-tel { flex-grow: 1.12; justify-content: center; gap: 9px; padding: 0 10px; }
/* ネット予約（主役）：朱の札。準備中の間は同じ大きさの薄い朱の枠で、押せない */
.hero-web { display: flex; align-items: center; justify-content: center; gap: 9px; padding: 0 10px; background: var(--shu); color: var(--shu-ink); font-family: var(--mincho); font-weight: 500; font-size: 15.5px; letter-spacing: .1em; white-space: nowrap; text-shadow: none; transition: filter .3s; }
a.hero-web:hover { filter: brightness(.93); }
.hero-web.is-soon { background: rgba(24, 18, 13, .66); box-shadow: inset 0 0 0 1px rgba(214, 86, 64, .9); color: var(--shu-ink); font-size: 14.5px; }
.hero-web.is-soon small { display: inline-flex; align-items: center; height: 21px; padding: 0 7px; border: 1px solid rgba(255, 249, 241, .6); font-size: 10.5px; opacity: 1; }
.hero-web small { font-family: var(--gothic); font-size: 11px; letter-spacing: .1em; opacity: .9; }
.hero-tel .tel-plate-k { gap: 0; font-size: 12px; letter-spacing: .08em; }
.hero-tel .tel-plate-k > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hero-tel .tel-plate-n { font-size: 17.5px; letter-spacing: .03em; }
/* 390px より狭いスマホ：横並びの札の中身に余裕を持たせる（字間と余白を少し詰める） */
@media (max-width: 389px) {
  .hero-web { gap: 6px; padding: 0 6px; letter-spacing: .04em; }
  .hero-web.is-soon small { padding: 0 5px; letter-spacing: .04em; }
  .hero-tel { gap: 7px; padding: 0 6px; }
}
/* ※写真はイメージです：写真の右下（電話の札の下の余白）。最初に読む文字にしない */
.hero-note {
  bottom: calc(5px + env(safe-area-inset-bottom));
  right: var(--gut);
  font-size: 10.5px;
  line-height: 1.6;
  letter-spacing: .08em;
  opacity: .75;
}

/* 冒頭の写真がまだない間（本番の版。AIのサンプル写真は確認用URLの版だけに出す、2026-10-30）：
   暗い地に少しだけ明暗をつけ、写真の場所に小さく「写真準備中」（ほかの欄の枠と同じ言葉）。
   スマホ・タブレットは書から上の空きの真ん中、PCは画面の真ん中 */
.hero.no-photo { background: radial-gradient(75% 60% at 50% 40%, #362c23 0%, #2a221c 55%, #1f1914 100%); }
.hero-empty { position: relative; z-index: 2; align-self: center; margin: auto 0; pointer-events: none; color: rgba(255, 249, 241, .5); }
.hero-empty span { display: block; font-size: 11px; line-height: 1; letter-spacing: .24em; }
@media (max-width: 1023px) { .no-photo .hero-mark { margin-top: 0; } }
@media (min-width: 1024px) { .hero-empty { position: absolute; z-index: 1; inset: 0; display: grid; place-items: center; margin: 0; } }

/* ふわっと出すのは h1・大きな一文以外（説明・開店予定・予約の札）。h1 と大きな一文は最初から見せる（LCP を遅らせない） */
@media (prefers-reduced-motion: no-preference) {
  .hero-sub, .hero-open, .hero-tel, .hero-web { animation: rise 1.2s .2s cubic-bezier(.2, .6, .2, 1) both; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ---------------------------------------------------------------- 共通の欄（B案） */
.sec { position: relative; padding: var(--sec-gap) var(--gut) 0; }
/* 表示の速さ（2026-10-30）：画面の外の欄は、近づくまで描画を後回しにする（content-visibility）。見た目は変わらない。
   スマホの計測（Lighthouse、4倍遅いCPU・3回の中央値）で、点数 63〜75 → 93、操作できるまでの待ち 0.6〜1.4秒 → 0.04秒、いちばん大きな表示 3.0秒 → 2.5秒。
   後回しの欄は大きさが仮（1000px）のままなので、目次で飛ぶと着地がずれる → site.js が読み込みの6秒後から1欄ずつ描いておき（.is-drawn）、
   それより前にページ内のリンクが押されたら、その場で全部を描く（html.cv-all） */
/* フッターは後回しにしない（小さいうえ、後回しだと読み上げの点検が暗い地を見落とし「文字が薄い」と誤って判定するため） */
main > section:not(.hero) { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
.cv-all main > section, main > section.is-drawn { content-visibility: visible; }
/* 各欄の見出し（h2）：細い罫の下に、検索語を含む短い名前 */
.sec-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5em;
  margin-bottom: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--line-2);
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: .2em;
  color: var(--ink);
}
.sec-h-sub { margin-left: -.5em; font-family: var(--gothic); font-weight: 400; font-size: 11.5px; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; }
.line {
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(20px, 6.6vw, 28px);
  line-height: 1.7;
  letter-spacing: .08em;
  text-wrap: balance;
}
.prose { color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.lead { margin-top: 26px; max-width: 30em; }
.note { font-size: 12.5px; line-height: 1.9; color: var(--ink-2); }
.sub-h { margin-bottom: 14px; font-family: var(--mincho); font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: .16em; }

/* 写真は額のように余白に掛ける。添え書きは美術館の札の書き方で */
.work img { width: 100%; background: #ddd5c8; }
/* 写真の枠の比率。写真を差し替えても（比率が違っても）周りが動かないよう、枠の比率に合わせて切り抜く。
   写真がまだない所は、同じ比率の空の枠（.ph-empty）になる */
.ar-45 { aspect-ratio: 4 / 5; }
.ar-23 { aspect-ratio: 2 / 3; }
.ar-11 { aspect-ratio: 1 / 1; }
.ar-43 { aspect-ratio: 4 / 3; }
.ar-169 { aspect-ratio: 16 / 9; }
img.ar-45, img.ar-23, img.ar-11, img.ar-43, img.ar-169 { height: auto; object-fit: cover; }
.work figcaption, .entrance figcaption { display: flex; flex-direction: column; margin-top: 14px; color: var(--ink-3); }
.cap-t { font-family: var(--mincho); font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: .12em; color: var(--ink); }
.cap-d { margin-top: 6px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.cap-n { margin-top: 6px; font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; }

/* ---------------------------------------------------------------- お店 */
.about-title { margin: 8px 0 64px; }
.about-logo { width: auto; height: 300px; }
/* スマホでは書を出さない（縦長の書の右半分が空き、最初の事実が遠くなるため。書は暖簾のオープニングとフッターに出る） */
@media (max-width: 639px) { .about-title { display: none; } }
.about-body { margin-top: 30px; }

/* 店の紹介の一覧（B案）：細い灰色の項目名と線だけ */
.facts { margin-top: 48px; border-top: 1px solid var(--line); }
.facts > div, .info > div { display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.facts dt, .info dt { padding-top: 3px; font-size: 12px; line-height: 1.8; letter-spacing: .12em; color: var(--ink-3); }
.facts dd { font-family: var(--mincho); font-weight: 500; font-size: 15.5px; line-height: 1.85; letter-spacing: .06em; }
.facts small, .info dd small { display: block; margin-top: 2px; font-family: var(--gothic); font-size: 11.5px; line-height: 1.8; color: var(--ink-3); letter-spacing: .04em; }
.info dd small.in { display: inline; margin: 0; }
/* 狭いスマホでは（3コース）が行頭に回るので、はじめから下の段に置いて「（」の空きを詰める */
@media (max-width: 389px) { .info dd small.in { display: block; margin: 2px 0 0 -.5em; } .info dd small.in + br { display: none; } }
.about-photo { width: 74%; margin: 64px 0 0 auto; }

/* ---------------------------------------------------------------- お料理 */
/* 写真は同じ比率・同じ上の線にそろえる（段違いはやめた、2026-10-22）。スマホは1枚の下に2枚 */
.works { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 48px; margin-top: 56px; }
.w1 { grid-column: 1 / -1; }
.w2 .cap-d, .w3 .cap-d { font-size: 12.5px; }

/* ---------------------------------------------------------------- 店主 */
.chef-photo { margin: 40px calc(var(--gut) * -1) 0; }
.chef-photo img { aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
/* 写真がまだない間の枠も写真と同じ比率に。スマホ・タブレットは写真なら幅いっぱいだが、枠の線は本文の幅に（2026-10-30） */
.chef-photo .ph-empty { aspect-ratio: 4 / 5; margin: 0 var(--gut); }
.chef-photo figcaption { padding: 0 var(--gut); align-items: flex-end; }
.sec-h-name { margin-left: .2em; }
/* 見えないが、読み上げと検索には残す文字 */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.chef-name { margin: 30px 0 16px; font-family: var(--mincho); font-weight: 500; font-size: 20px; letter-spacing: .18em; }
.chef-name small { margin-left: 14px; font-family: var(--gothic); font-weight: 400; font-size: 11.5px; letter-spacing: .12em; color: var(--ink-3); }

.letter-wrap { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--line); }
.letter-k { margin-bottom: 24px; font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: .26em; color: var(--ink-3); }
/* ごあいさつだけ縦書き。行は文の切れ目で手で変えている。
   本文と同じ左の線から書き出し、終わりに署名（右に寄せると左が空いて落ち着かない、2026-10-22） */
.letter {
  writing-mode: vertical-rl;
  margin-right: auto;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 17px;
  line-height: 2.2;
  letter-spacing: .14em;
  color: var(--ink);
}
.letter p { margin: 0 0 0 1.1em; word-break: keep-all; }
.letter p.letter-sign { margin: 0; text-align: end; font-size: 16px; letter-spacing: .2em; }
.letter-sign small { margin-bottom: .8em; font-family: var(--gothic); font-weight: 400; font-size: 11.5px; color: var(--ink-3); display: inline-block; }
.tcy { text-combine-upright: all; }
/* スマホ（639px以下）は横書き：縦書きだと10列が画面の幅に収まらない。改行の位置は縦書きと同じ */
@media (max-width: 639px) {
  html[lang="ja"] .letter { writing-mode: horizontal-tb; margin: 0; font-size: 15.5px; line-height: 2; letter-spacing: .06em; }
  html[lang="ja"] .letter p { margin: 0 0 1.1em; }
  html[lang="ja"] .letter p.letter-sign { margin: 1.8em 0 0; text-align: left; font-size: 15.5px; letter-spacing: .14em; }
  html[lang="ja"] .letter-sign small { display: inline; margin: 0 .9em 0 0; }
}
/* 縦書きの1列＝決めた1行（画面の高さが低いときも列を割らない） */
@media (min-width: 640px) {
  html[lang="ja"] .letter { inline-size: max-content; }
}
@media (min-width: 768px) {
  html[lang="ja"] .letter-k { font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .2em; color: var(--ink-2); }
  html[lang="ja"] .letter { font-size: 18px; }
}

/* ---------------------------------------------------------------- 空間と由来（濃い焦げ茶の一枚。端まで塗らず、余白に掛ける） */
/* 板の外 12px＋板の内 12px＝24px で、ほかの欄の文字の左端にそろえる。
   2026-10-23：板の中は 写真 → 見出し「こだわりの空間と店名の由来」→ 由来のページへのボタン だけ（文は由来のページに）。
   スマホ・タブレットは見出しとボタンを板の真ん中に、PCは見出しを左・ボタンを右に */
.story { padding: 0; margin: var(--sec-gap) 12px 0; }
.story-in { padding: 0 12px 44px; background: var(--koge); color: var(--on-koge); text-align: center; }
.story-photo { margin: 0 -12px; }
.story-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 60%; background: #2c241e; }
.story-photo figcaption { margin-top: 10px; padding: 0 12px 0 0; text-align: right; font-size: 10.5px; letter-spacing: .06em; color: var(--on-koge-3); }
/* 写真がまだない間（本番。内装パースは実物ではないので出さない、2026-10-30）：焦げ茶の板の上なので、枠の線と文字は明るく */
.story-ph { aspect-ratio: 16 / 10; box-shadow: inset 0 0 0 1px rgba(255, 249, 241, .22); color: var(--on-koge-3); }
.story-h { margin-top: 30px; font-family: var(--mincho); font-weight: 500; font-size: clamp(22px, 6.6vw, 28px); line-height: 1.65; letter-spacing: .1em; color: var(--on-koge); text-wrap: balance; }
.story-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 52px;
  margin-top: 26px;
  padding: 0 26px 0 30px;
  box-shadow: inset 0 0 0 1px rgba(239, 232, 220, .55);
  font-size: 13.5px;
  letter-spacing: .18em;
  color: var(--on-koge);
  white-space: nowrap;
  transition: background-color .3s, box-shadow .3s;
}
.story-more:hover { background: rgba(239, 232, 220, .07); box-shadow: inset 0 0 0 1px var(--on-koge); }
.story-more svg { flex: none; width: 30px; height: 8px; transition: transform .3s; }
.story-more:hover svg { transform: translateX(4px); }
.story-side { margin-top: 22px; }
.more {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 18px;
  padding: 12px 0 8px;
  border-bottom: 1px solid currentColor;
  font-size: 13.5px;
  letter-spacing: .14em;
  white-space: nowrap;
}
.more svg { width: 32px; height: 8px; transition: transform .3s; }
.more:hover svg { transform: translateX(4px); }

/* ---------------------------------------------------------------- お品書き：長押に掛けた品書きの札（A案） */
/* 海老天の写真：スマホは電話の札の下に幅いっぱい（料金→要予約→電話の流れを切らない） */
.menu-photo { margin: 56px 0 0; }
.boards { display: grid; gap: 56px; }
/* 見出しの下に時刻（幅によって組みが変わらないよう、常に2段） */
.board-head { margin-bottom: 20px; }
.meal-h { display: flex; align-items: baseline; gap: 14px; font-family: var(--mincho); font-weight: 500; font-size: 19px; letter-spacing: .16em; }
.meal-h span { font-family: var(--gothic); font-weight: 400; font-size: 11.5px; letter-spacing: .14em; color: var(--ink-3); }
.meal-time { margin-top: 4px; font-size: 12.5px; letter-spacing: .06em; color: var(--ink-2); white-space: nowrap; }
.meal-time small { font-size: 11px; color: var(--ink-3); }

/* コースは上から安い順に1行ずつ。左にコースの名前（縦書き・読みがなは右）、右に値段・要予約・内容。
   内容（品数など）は後から1〜2行入る（docs/build-site.mjs の COURSE_ITEMS）。入っていない間は値段だけ。
   上の太い線は長押の名残（昼は茶、夜は濃い茶）。
   2026-10-23：名前の後ろの白木の札（木の板）は「ダサい」のでやめ、縦書きの名前だけにした */
.courses { list-style: none; padding: 0; border-top: 3px solid var(--nageshi); }
.board-night .courses { border-top-color: var(--nageshi-yoru); }
.course {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 20px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.fuda {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  color: var(--ink);
}
.fuda-name {
  writing-mode: vertical-rl;
  font-family: var(--mincho);
  font-weight: 600;
  font-size: 25px;
  line-height: 1;
  letter-spacing: .14em;
}
.fuda-name rt { font-family: var(--mincho); font-weight: 500; font-size: 9.5px; letter-spacing: .1em; }
.course-body { display: grid; gap: 6px; }
.course-head { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; }
.course-price { margin-right: 14px; font-family: var(--mincho); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; }
.course-price small { margin-left: 2px; font-size: 12px; font-weight: 500; }
.course-req { margin-right: 0; }
/* 内容は「、」の後でだけ改行する（品名の途中で割らない。Safari も同じ） */
.course-items { font-size: 13px; line-height: 1.85; letter-spacing: .04em; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
/* 内容が入った列は、値段の高さを札の上からそろえる（行ごとに値段の位置がずれないように）。内容がない間は札の真ん中 */
.courses:has(.has-items) .course { align-items: start; }
.courses:has(.has-items) .course-body { padding-top: 12px; }

.notes { list-style: none; padding: 0; font-size: 12.5px; line-height: 1.9; color: var(--ink-2); }
.notes li { position: relative; padding-left: 1.5em; }
.notes li + li { margin-top: 8px; }
.notes li::before { content: ""; position: absolute; left: .2em; top: .95em; width: 6px; height: 1px; background: var(--ink-3); }
.notes li.is-req, .notes li.is-key { padding-left: 0; }
.notes li.is-req::before, .notes li.is-key::before { content: none; }
.notes b, .req-line b { font-weight: 400; color: var(--ink); }
/* 札のすぐ下に「税・サ込 → 要予約」を続けて読ませる */
.menu-notes { margin-top: 32px; }
.menu-notes li.is-key { font-size: 13.5px; color: var(--ink); }
.menu-notes li.is-key + li.is-req { margin-top: 10px; }
.menu-notes li.is-req { margin-bottom: 14px; font-size: 13.5px; color: var(--ink); }

/* 料金のすぐ下の電話 */
.menu-call { margin-top: 36px; }
.sub-h-s { font-family: var(--gothic); font-weight: 400; font-size: 12px; letter-spacing: .08em; color: var(--ink-3); }
.menu-tel { min-height: 64px; padding: 10px 18px; flex-wrap: wrap; row-gap: 2px; }
.menu-tel .tel-plate-n { font-size: 21px; }
.menu-call-more { display: inline-block; margin-top: 4px; padding: 10px 0; font-size: 12.5px; letter-spacing: .08em; color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-2); }

/* お持ち帰り：品物ごとに写真の枠 */
.takeout { margin-top: 80px; padding-top: 36px; border-top: 1px solid var(--line); }
.takeout-note { margin-top: 10px; }
.take-items { list-style: none; padding: 0; margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.take-ph { aspect-ratio: 1 / 1; }
.take-name { margin-top: 12px; font-family: var(--mincho); font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: .1em; }
/* （2サイズ）は名前の下の段に。行頭の「（」の空きを詰める */
.take-name small { display: block; margin-left: -.5em; font-family: var(--gothic); font-weight: 400; font-size: 11.5px; line-height: 1.6; letter-spacing: .06em; color: var(--ink-3); }
.take-price { margin-top: 2px; font-size: 12px; line-height: 1.7; letter-spacing: .06em; color: var(--ink-3); }

/* ---------------------------------------------------------------- ご予約：控えの紙と落款（A案）
   2026-10-22：ここだけ地を一段濃い生成りにして、白い控えの紙を浮かせる（黒と白の交互にはしない。中くらいの明るさで1か所だけ区切る） */
.reserve { isolation: isolate; padding-bottom: 88px; }
.reserve::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: calc(var(--sec-gap) / 2);
  bottom: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  /* 和紙の画像に色を掛け合わせて、同じ柄のまま一段濃く */
  background-color: var(--paper-3-tint);
  background-image: var(--washi);
  background-blend-mode: multiply;
}
.tel-block { margin-top: 36px; }
/* 紙らしさは白い紙と、切り取り線だけで出す（枠・朱の上線は引かない） */
.slip {
  position: relative;
  padding: 26px 18px 20px;
  background-color: var(--paper-2);
  background-image: var(--washi-fine);
  box-shadow: inset 0 0 0 1px rgba(34, 29, 24, .1);
  color: var(--ink);
}
.slip-tel { display: grid; gap: 4px; padding-right: 52px; }
.slip-k { font-size: 12.5px; font-weight: 400; letter-spacing: .12em; color: var(--ink-2); }
.slip-n { font-family: var(--mincho); font-weight: 600; font-size: clamp(30px, 8.8vw, 40px); line-height: 1.25; letter-spacing: .03em; white-space: nowrap; }
.slip-tap { font-size: 11px; letter-spacing: .14em; color: var(--shu); }
.slip-tap::before { content: ""; display: inline-block; width: 16px; height: 1px; margin-right: 8px; background: currentColor; vertical-align: middle; }
/* 落款は、ここに一度だけ */
.inkan { position: absolute; top: 24px; right: 16px; width: 36px; height: auto; mix-blend-mode: multiply; }
/* 控えの切り取り線の下に、お電話でお知らせいただくこと、キャンセル料 */
.slip-ask, .slip-cancel { margin-top: 22px; padding-top: 18px; border-top: 1px dashed rgba(34, 29, 24, .3); }
.mini-h { margin-bottom: 2px; font-family: var(--mincho); font-size: 16px; font-weight: 500; line-height: 1.6; letter-spacing: .14em; }
.ask-list { list-style: none; padding: 0; margin-top: 10px; font-size: 13.5px; line-height: 1.8; }
.ask-list li { position: relative; padding: 7px 0 7px 1.5em; border-top: 1px solid var(--line); }
.ask-list li:last-child { border-bottom: 1px solid var(--line); }
.ask-list li::before { content: ""; position: absolute; left: .2em; top: calc(7px + .9em); width: 6px; height: 1px; background: var(--ink-3); }
.ask-list small { display: block; margin-left: -.5em; font-size: 11.5px; line-height: 1.7; color: var(--ink-3); }
html:not([lang="ja"]) .ask-list small { margin-left: 0; }
.cancel { width: 100%; margin: 12px 0; border-collapse: collapse; border-top: 1px solid var(--line); }
.cancel th { padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; font-size: 13.5px; line-height: 1.7; }
.cancel th small { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.cancel td { padding: 12px 0; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; vertical-align: middle; font-size: 10.5px; color: var(--ink-3); }
.cancel td b { display: block; font-family: var(--mincho); font-weight: 600; font-size: 23px; line-height: 1.25; letter-spacing: .02em; color: var(--ink); }

.before { margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }
.req-line { display: flex; align-items: baseline; font-size: 14px; line-height: 1.9; color: var(--ink); }
.req-line .chip { margin-top: 3px; }
.visit-notes { margin-top: 26px; }
.reserve-photo { margin: 56px 0 0; }
.reserve-photo img.ar-23 { aspect-ratio: 4 / 3; object-position: 50% 56%; }
.reserve-photo .ph-empty { aspect-ratio: 4 / 3; }
@media (min-width: 640px) { .reserve-photo img.ar-23 { object-position: 50% 50%; } }
.reserve .work figcaption { color: var(--ink-2); }

/* ---------------------------------------------------------------- アクセス */

.access-lead { margin-top: 24px; }
/* 「最寄り駅」「店舗情報」の小見出し（h3） */
.access-h { margin-top: 48px; }
.access-h-walk { margin-top: 0; }
.access-h + .stations, .access-h + .info { margin-top: 18px; }
/* 最寄り駅：表の形（駅名と路線、右に徒歩の分数）。前の版の区分けに戻した（2026-10-22） */
.stations { list-style: none; padding: 0; margin-top: 18px; border-top: 1px solid var(--line-2); }
.stations li { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name walk" "line walk"; column-gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
html[lang="ja"] .st-name { margin-left: -.5em; }
.st-name { grid-area: name; font-family: var(--mincho); font-weight: 500; font-size: 16.5px; line-height: 1.6; letter-spacing: .08em; color: var(--ink); }
.st-line { grid-area: line; font-size: 11.5px; line-height: 1.7; letter-spacing: .06em; color: var(--ink-3); }
.st-walk { grid-area: walk; font-size: 12.5px; letter-spacing: .08em; color: var(--ink-2); white-space: nowrap; }
.st-walk b { margin: 0 .15em; font-family: var(--mincho); font-weight: 600; font-size: 26px; line-height: 1; letter-spacing: .02em; color: var(--ink); }
.map { margin-top: 44px; }
.map-box { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--empty); color: var(--ink-3); font-size: 11px; letter-spacing: .24em; }
.map-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.35) sepia(.08); }
.map-links { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 2px; font-size: 12.5px; letter-spacing: .1em; }
.map-links a { display: inline-block; padding: 12px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.entrance { width: 62%; margin-top: 36px; }
.entrance-ph { aspect-ratio: 4 / 5; }
.info { margin-top: 48px; border-top: 1px solid var(--line); }
.info dt small { display: block; font-size: 10.5px; }
.info dd { font-size: 13.5px; line-height: 1.9; }
.info dd a { display: inline-block; padding: 9px 0; margin: -9px 0; font-family: var(--mincho); font-weight: 500; font-size: 16px; letter-spacing: .04em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- よくあるご質問 */
.faq { padding-bottom: 120px; }
.faq-cat { margin-top: 44px; }
.faq .sec-h + .faq-cat { margin-top: 0; }
.faq-cat h3 { margin-bottom: 12px; font-weight: 400; line-height: 1; }
.qs { border-bottom: 1px solid var(--line); }
.qs details { border-top: 1px solid var(--line); }
.qs summary {
  position: relative;
  padding: 17px 36px 17px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.75;
  letter-spacing: .06em;
}
.qs summary::-webkit-details-marker { display: none; }
.qs summary::before, .qs summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 1px; background: var(--ink); transition: transform .3s; }
.qs summary::after { transform: rotate(90deg); }
.qs details[open] summary::after { transform: rotate(0); }
.faq-a { max-width: 38em; padding: 0 0 22px; font-size: 13.5px; line-height: 2; color: var(--ink-2); }
/* 答えは1文ずつ改行（ご予約の前にと同じ組み方） */
.faq-a .s { display: block; }
.faq-a a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* ---------------------------------------------------------------- フッター（濃い焦げ茶）。最初に電話でのご予約をもう一度 */
.foot { padding: 72px var(--gut) calc(var(--bar) + 40px + env(safe-area-inset-bottom)); background: var(--koge); color: var(--on-koge-2); font-size: 12.5px; line-height: 1.95; }
.foot-call { padding-bottom: 48px; margin-bottom: 56px; border-bottom: 1px solid var(--line-koge); }
.foot-call-k { font-family: var(--mincho); font-weight: 500; font-size: 18px; line-height: 1.7; letter-spacing: .1em; color: var(--on-koge); }
.foot-call-n { display: inline-flex; align-items: center; gap: 14px; margin-top: 14px; font-family: var(--mincho); font-weight: 500; font-size: clamp(30px, 8.8vw, 40px); line-height: 1.3; letter-spacing: .04em; color: var(--on-koge); white-space: nowrap; }
.foot-call-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #d4553f; }
.foot-call-s { margin-top: 8px; font-size: 12.5px; letter-spacing: .1em; }
.foot-call .foot-web { display: flex; justify-content: center; width: 100%; min-height: 58px; margin-top: 20px; font-size: 17px; }
.foot-call .foot-web + .foot-call-n { margin-top: 18px; font-size: clamp(24px, 6.6vw, 30px); }
.foot-web.is-soon { gap: 12px; background: transparent; box-shadow: inset 0 0 0 1px rgba(214, 86, 64, .9); color: var(--on-koge); }
.foot-web small { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid rgba(255, 249, 241, .55); font-family: var(--gothic); font-size: 11px; letter-spacing: .1em; }
.foot-web { display: inline-flex; align-items: center; min-height: 52px; margin-top: 18px; padding: 0 26px; background: var(--shu); color: var(--shu-ink); font-family: var(--mincho); font-weight: 500; font-size: 16px; letter-spacing: .12em; }
.foot-logo { width: auto; height: 200px; }
.foot-info { margin-top: 44px; }
.foot-info p + p { margin-top: 14px; }
.foot-name { font-family: var(--mincho); font-weight: 500; font-size: 17px; letter-spacing: .16em; color: var(--on-koge); }
.foot-name small { margin-left: 12px; font-family: var(--gothic); font-weight: 400; font-size: 11px; color: var(--on-koge-3); }
.foot-sep { margin: 0 .1em; }
.foot-map { display: inline-block; margin: -2px 0 -10px; padding: 8px 0 10px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--on-koge-3); }
/* /story/ のフッターの電話：押せる高さを 44px に（見た目の位置は変えない） */
.foot-tel { display: inline-block; padding: 12px 0; margin: -12px 0; font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .04em; color: var(--on-koge); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--on-koge-3); }
.foot-nav { list-style: none; padding: 0; margin-top: 32px; display: flex; flex-wrap: wrap; gap: 0 24px; font-size: 12.5px; letter-spacing: .1em; }
.foot-nav a { display: inline-block; padding: 10px 8px; margin: 0 -8px; }
/* 言語の一覧（フッター） */
.foot-lang { list-style: none; padding: 0; margin-top: 14px; display: flex; flex-wrap: wrap; gap: 0 20px; font-size: 12.5px; letter-spacing: .06em; }
.foot-lang a, .foot-lang-now { display: inline-block; padding: 8px 0; }
.foot-lang-now { color: var(--on-koge); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--on-koge-3); }
/* プライバシーポリシーへのリンク（2026-10-23） */
.foot-photo { margin-top: 28px; font-size: 11px; line-height: 1.8; letter-spacing: .06em; color: var(--on-koge-2); }
.foot-photo + .foot-legal { margin-top: 10px; }
.foot-legal { margin-top: 28px; font-size: 11.5px; letter-spacing: .08em; }
.foot-legal a { display: inline-block; padding: 8px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: var(--on-koge-3); }
.foot-legal + .foot-copy { margin-top: 12px; }
.foot-copy { margin-top: 36px; font-size: 10.5px; letter-spacing: .14em; color: var(--on-koge-3); }

/* ---------------------------------------------------------------- スマホ：下の予約バー（地の色に溶かす） */
.booking-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr);
  height: calc(var(--bar) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  background: var(--paper-2);
  color: var(--ink);
  border-top: 1px solid var(--line);
  visibility: hidden;
  transform: translateY(105%);
  transition: transform .45s cubic-bezier(.2, .6, .2, 1), visibility 0s .45s;
}
body.past-hero .booking-bar, body.menu-open .booking-bar { transform: none; visibility: visible; transition-delay: 0s; }
.bar-menu { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border-right: 1px solid var(--line); }
.bar-menu-k { font-size: 12.5px; line-height: 1.2; letter-spacing: .18em; }
.bar-cur { max-width: 76px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 10px; line-height: 1.2; letter-spacing: .02em; color: var(--ink-3); }
/* 予約の短冊：朱の札に「電話する」、番号は白い地に墨（PCの上の帯の電話も同じ形） */
.bar-tel, .gnav-tel { display: flex; align-items: stretch; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--paper-2); color: var(--ink); text-shadow: none; }
.bar-tel { margin: 8px; }
/* ネット予約の札があるとき：目次｜ネット予約（広い朱の札・主役）｜電話（小さく）。2026-10-23 宮本さん「電話は小さめでいい」
   URL が入るまでは、ほかの場所の準備中の札と同じ朱の細い枠に「準備中」（押せない）。URL が入ると朱の札「ネットで予約」 */
.booking-bar.has-web { grid-template-columns: 78px minmax(0, 1fr) auto; }
.bar-web { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 4px 8px 8px; background: var(--shu); color: var(--shu-ink); font-family: var(--mincho); font-weight: 500; font-size: 15.5px; letter-spacing: .12em; white-space: nowrap; }
.bar-web.is-soon { background: rgba(189, 58, 43, .05); box-shadow: inset 0 0 0 1px var(--shu); color: #a8321f; font-size: 15px; }
.bar-web small { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px solid currentColor; font-family: var(--gothic); font-weight: 400; font-size: 10.5px; letter-spacing: .1em; }
.bar-call { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 8px 8px 8px 4px; padding: 0 14px 0 13px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--paper-2); color: var(--ink); font-size: 12.5px; letter-spacing: .12em; white-space: nowrap; }
.bar-call::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--shu); }
/* 上の帯のネット予約は PC だけ（.gnav-r > a より強く指定する） */
.gnav .gnav-web { display: none; white-space: nowrap; }
.gnav .gnav-tel { display: none; }
.bar-tel-k, .gnav-tel-k { display: flex; align-items: center; padding: 0 calc(12px - .12em) 0 12px; background: var(--shu); color: var(--shu-ink); font-size: 12px; font-weight: 400; letter-spacing: .12em; white-space: nowrap; }
.bar-tel-n, .gnav-tel-n { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0 10px; font-family: var(--mincho); font-weight: 500; font-size: 18.5px; letter-spacing: .05em; white-space: nowrap; }

/* 目次（スマホ・下のバーから開く） */
.drawer { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: 0 var(--gut) calc(var(--bar) + 28px); background-color: var(--paper); background-image: var(--washi); overflow-y: auto; }
.drawer[hidden] { display: none; }
body.menu-open { overflow: hidden; }
.drawer-top { flex: none; height: 64px; display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; letter-spacing: .18em; }
.drawer-brand { font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .16em; }
.js-close { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; margin-right: -12px; }
.drawer-index { list-style: none; padding: 0; margin-top: 36px; }
.drawer-index a { display: flex; align-items: center; gap: 16px; padding: 11px 0; font-family: var(--mincho); font-weight: 500; font-size: 21px; letter-spacing: .14em; }
.drawer-index i { flex: none; width: 7px; height: 7px; border-radius: 50%; }
.drawer-index a.is-on i { background: currentColor; }
/* 言語の一覧（開く目次の下）：横に並べ、今の言語は下線 */
.drawer-lang { display: flex; flex-wrap: wrap; gap: 0 20px; list-style: none; padding: 0; margin-top: 24px; font-size: 13.5px; letter-spacing: .06em; color: var(--ink-2); }
.drawer-lang a, .drawer-lang-now { display: inline-block; padding: 10px 0; }
.drawer-lang-now { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }

/* ================================================================ とても狭いスマホ（〜359px：iPhone SE の拡大表示・Galaxy Fold の外画面） */
@media (max-width: 359px) {
  body { font-size: 14px; }
  .about-logo { height: 260px; }
  .facts > div, .info > div { grid-template-columns: 4.4em minmax(0, 1fr); gap: 10px; }
  .facts dd { font-size: 14.5px; }
  .qs summary { padding-right: 30px; }
  .hero-web, .hero-tel { padding: 0 5px; }
  .hero-web { gap: 5px; letter-spacing: .02em; }
  .hero-web.is-soon { font-size: 13px; }
  .hero-web.is-soon small { padding: 0 4px; font-size: 10px; letter-spacing: 0; }
  .hero-tel { gap: 7px; }
  .hero-tel .tel-plate-n { font-size: 15.5px; letter-spacing: 0; }
  .booking-bar { grid-template-columns: 74px minmax(0, 1fr); }
  .booking-bar.has-web { grid-template-columns: 70px minmax(0, 1fr) auto; }
  .bar-web { gap: 8px; font-size: 14px; letter-spacing: .08em; }
  .bar-web.is-soon { font-size: 13.5px; }
  .bar-call { padding: 0 11px; letter-spacing: .06em; }
  .bar-cur { max-width: 66px; font-size: 9.5px; letter-spacing: 0; }
  .bar-tel-k { padding: 0 9px; font-size: 11.5px; letter-spacing: .06em; }
  .bar-tel-n { padding: 0 8px; font-size: 17px; letter-spacing: 0; }
}

/* ================================================================ タブレット */
@media (min-width: 640px) {
  :root { --gut: 48px; --sec-gap: 128px; }
  /* 冒頭以外の見出しは、幅が足りるので1行に */
  .line br.m, .qs summary br.m, .tel-plate br.m, .foot-call br.m { display: none; }
  .prose, .visit-notes { max-width: 34em; }
  .about-logo { height: 360px; }
  .facts { max-width: 34em; }
  /* お料理：3枚を同じ大きさで横に並べる */
  .works { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; }
  .w1 { grid-column: auto; }
  .chef-photo img, .chef-photo .ph-empty { aspect-ratio: 3 / 2; }
  .story { margin-left: 24px; margin-right: 24px; }
  .story-in { padding-left: 24px; padding-right: 24px; }
  .story-photo { margin: 0 -24px; }
  .story-photo figcaption { padding-right: 24px; }
  .boards { grid-template-columns: 1fr 1fr; grid-template-rows: auto repeat(3, auto); gap: 0 48px; }
  /* 昼と夜の行を同じ高さにそろえる（内容の行数が違っても区切り線が横一列に） */
  .board { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
  .courses { grid-row: 2 / span 3; display: grid; grid-template-rows: subgrid; }
  .menu-call { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; }
  .menu-call-more { margin-top: 0; }
  .take-items { max-width: 34em; gap: 24px; }
  .hero-line { font-size: clamp(30px, 4.4vw, 40px); }
  /* 予約の札：横に2つ（幅は中身に合わせ、左にそろえる）。電話の札には「ご予約・お問い合わせ」も見せる */
  .hero-cta { align-self: flex-start; margin-top: 22px; }
  .hero-web, .hero-tel { flex: none; height: 58px; }
  .hero-web { min-width: 230px; padding: 0 24px; font-size: 16px; letter-spacing: .12em; }
  .hero-tel { gap: 22px; padding: 0 24px; }
  .hero-tel .tel-plate-k { gap: 10px; font-size: 12.5px; letter-spacing: .1em; }
  .hero-tel .tel-plate-k > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
  .hero-tel .tel-plate-n { font-size: 20px; letter-spacing: .05em; }
  .slip { max-width: 34em; }

  .entrance { width: 46%; }
  .foot-call-n { font-size: 40px; }
  .foot-call .foot-web { width: max-content; min-width: 360px; padding: 0 40px; }
}

/* タブレット（640–1023px）：1列のままだと写真が大きくなりすぎ、縦に長くなるので、お店は書と文を横に並べ、写真は小さめに掛ける */
@media (min-width: 640px) and (max-width: 1023px) {
  /* 冒頭の書：一文の上（左下）に、スマホより少し大きく */
  .hero-mark { --mark-h: min(20vh, 190px); margin-bottom: 20px; }
  @supports (height: 1svh) { .hero-mark { --mark-h: min(20svh, 190px); } }
  .about { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 48px; align-items: start; }
  .about > * { grid-column: 2; }
  .about .sec-h { grid-column: 1 / -1; }
  .about-title { grid-column: 1; grid-row: 2 / 5; margin: 6px 0 0; }
  .about .line { grid-row: 2; }
  .about-body { grid-row: 3; }
  .facts { grid-row: 4; }
  .about-photo { grid-column: 1 / -1; grid-row: 5; width: 44%; }
  /* お品書き：札の下で、左に注記と電話、右に海老天の写真 */
  .menu { display: grid; grid-template-columns: minmax(0, 1fr) 36%; column-gap: 36px; align-items: start; }
  .menu > * { grid-column: 1 / -1; }
  .menu .boards { grid-row: 2; }
  .menu .menu-notes { grid-column: 1; grid-row: 3; }
  .menu .menu-call { grid-column: 1; grid-row: 4; display: block; }
  .menu .menu-call-more { margin-top: 4px; }
  .menu-photo { grid-column: 2; grid-row: 3 / 6; margin-top: 32px; }
  .menu .takeout { grid-column: 1 / -1; grid-row: 6; }
  /* ご予約：「ご予約の前に」の横にお席の写真 */
  .reserve { display: grid; grid-template-columns: minmax(0, 1fr) 32%; column-gap: 36px; align-items: start; }
  .reserve > * { grid-column: 1 / -1; }
  .reserve .before { grid-column: 1; grid-row: 5; }
  .reserve-photo { grid-column: 2; grid-row: 5; width: auto; margin-top: 56px; }
  .reserve-photo img.ar-23, .reserve-photo .ph-empty { aspect-ratio: 4 / 5; }
  .reserve .tel-block .slip { max-width: none; }
  /* 地図と入口の枠を横に並べる */
  .map { display: grid; grid-template-columns: minmax(0, 1fr) 30%; column-gap: 28px; align-items: start; max-width: none; }
  .map-box { grid-column: 1; grid-row: 1; }
  .map-links { grid-column: 1; grid-row: 2; }
  .entrance { grid-column: 2; grid-row: 1 / 3; width: auto; margin-top: 0; }
}

/* ================================================================ PC */
@media (min-width: 1024px) {
  :root { --gut: 56px; --sec-gap: 160px; }
  body { font-size: 15px; }
  br.m { display: none; }
  br.d { display: inline; }
  html { scroll-padding-top: var(--head); }

  /* 上の細い帯：画面の上に固定。冒頭の写真の上では透明、過ぎたら生成りの帯 */
  .gnav {
    position: fixed;
    color: var(--ink);
    background: var(--paper-2);
    box-shadow: 0 1px 0 var(--line);
    transition: background-color .35s, color .35s, box-shadow .35s;
  }
  .gnav a, .gnav button { text-shadow: none; transition: text-shadow .35s, opacity .3s; }
  .js body.on-hero .gnav { background: rgba(251, 249, 243, 0); box-shadow: none; color: #fff; }
  .js body.on-hero .gnav a { text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
  .gnav-in { max-width: var(--max); margin: 0 auto; }
  .gnav-nav { display: block; margin-left: auto; }
  .gnav-index { display: flex; gap: 20px; list-style: none; padding: 0; font-size: 12.5px; line-height: 1.6; letter-spacing: .1em; white-space: nowrap; }
  .gnav-index .gnav-wide { display: none; }
  .gnav-index a { position: relative; display: block; padding: 12px 0; opacity: .8; }
  .gnav-index a:hover, .gnav-index a.is-on { opacity: 1; }
  /* 今いる欄：B案の目次と同じ小さな点 */
  .gnav-index a.is-on::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: currentColor; }
  .gnav-r { gap: 14px; margin: 0 0 0 22px; font-size: 11.5px; }
  .gnav-lang > summary { min-width: 28px; padding: 0 4px; opacity: .85; }
  .gnav-rsv, .gnav-menu { display: none !important; }
  .gnav .gnav-tel { display: flex; height: 40px; transition: opacity .35s, visibility 0s; }
  .gnav-tel-k { display: none; }
  .gnav-tel-n { padding: 0 14px 0 12px; font-size: 17px; }
  .gnav-tel-n::before { content: ""; flex: none; width: 6px; height: 6px; margin-right: 10px; border-radius: 50%; background: var(--shu); }
  .js body.on-hero .gnav-tel { visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
  .gnav .gnav-web { display: flex; align-items: center; height: 40px; padding: 0 18px; background: var(--shu); color: var(--shu-ink); text-shadow: none; letter-spacing: .1em; transition: opacity .35s, visibility 0s; }
  .js body.on-hero .gnav-web { visibility: hidden; opacity: 0; transition: opacity .35s, visibility 0s .35s; }
  .js body.page-story.on-hero .gnav-web { visibility: visible; opacity: 1; transition: none; }
  .gnav-index li, .gnav-index a { white-space: nowrap; text-wrap: nowrap; }
  /* /story/ の冒頭には電話の札がないので、冒頭の上でも帯の電話を出す（PCの電話番号は常に見える所に） */
  .js body.page-story.on-hero .gnav-tel { visibility: visible; opacity: 1; transition: none; }

  .booking-bar, .drawer { display: none !important; }

  /* 冒頭：一行と、電話の札。文字の左端は欄の文字の左端と同じ線 */
  .hero::after {
    background:
      linear-gradient(to bottom, rgba(20, 14, 9, .42) 0, rgba(20, 14, 9, 0) 160px),
      linear-gradient(to right, rgba(20, 14, 9, .36) 0, rgba(20, 14, 9, 0) 50%),
      linear-gradient(to top, rgba(20, 14, 9, .66) 0, rgba(20, 14, 9, .3) 30%, rgba(20, 14, 9, 0) 56%);
  }
  .hero-copy { top: auto; right: auto; bottom: 56px; left: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); display: block; }
  /* h1 は大きな一文の上に1行：店名と「京都・御所南の天ぷら」 */
  /* 一文は1行（「熟練の技で一品ずつ丁寧にご提供します。」19字が、1024〜1920px で欄の幅に収まる大きさ） */
  .hero-line { font-size: clamp(36px, 3.6vw, 52px); line-height: 1.45; letter-spacing: .1em; white-space: nowrap; }
  .hero-copy { right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); }
  .hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 48px; margin-top: 22px; }
  .hero-cta { align-self: auto; margin: 0; }
  .hero-text { display: block; }
  .hero-sub { margin: 0 0 4px; font-size: 19px; }
  .hero-open { margin: 0; font-size: 13.5px; }
  .hero-web, .hero-tel { height: 62px; }
  .hero-web { min-width: 250px; font-size: 18px; }
  .hero-tel { gap: 26px; padding: 0 26px; }
  .hero-tel .tel-plate-k { font-size: 13px; letter-spacing: .12em; }
  .hero-tel .tel-plate-n { font-size: 22px; }
  .hero-note { top: auto; bottom: 24px; right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); }

  /* 欄：12列の格子。最大幅 --max を画面の中央に */
  .sec {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: 24px;
    align-items: start;
    max-width: var(--max);
    margin: 0 auto;
  }
  .sec > * { grid-column: 1 / -1; }
  .sec-h { grid-row: 1; margin-bottom: 48px; font-size: 15.5px; }
  .line { font-size: clamp(30px, 2.9vw, 42px); line-height: 1.6; }
  .lead { margin-top: 28px; }

  /* お店：左に書、中に一文と本文と一覧、右にパース */
  .about-title { grid-column: 1 / 4; grid-row: 2 / 6; margin: 4px 0 0; }
  .about-logo { height: 460px; }
  .about .line { grid-column: 5 / 13; grid-row: 2; }
  .about-body { grid-column: 5 / 10; grid-row: 3; margin-top: 36px; }
  .facts { grid-column: 5 / 10; grid-row: 4; margin-top: 52px; }
  .about-photo { grid-column: 10 / 13; grid-row: 3 / 6; width: auto; margin: 44px 0 0 16px; }

  /* お料理：掛け方を変えて三点 */
  .cuisine .line { grid-column: 1 / 10; grid-row: 2; }
  .cuisine .lead { grid-column: 1 / 7; grid-row: 3; }
  .works { grid-row: 4; column-gap: 24px; row-gap: 0; margin-top: 72px; }
  .works .cap-d { font-size: 13px; }

  /* 店主：左に写真、右に一文・経歴・ごあいさつ */
  .chef-photo { grid-column: 1 / 6; grid-row: 2 / 4; margin: 0; }
  .chef-photo img { aspect-ratio: 2 / 3; object-position: 50% 50%; }
  .chef-photo .ph-empty { aspect-ratio: 2 / 3; margin: 0; }
  .chef-photo figcaption { padding: 0; }
  .chef { grid-template-rows: auto auto 1fr; }
  .chef-text { grid-column: 7 / 13; grid-row: 2; }
  .chef-name { margin-top: -6px; font-size: 24px; }
  .chef-text .prose { max-width: 27em; }
  .letter-wrap { grid-column: 7 / 13; grid-row: 3; margin-top: 56px; }
  .letter { font-size: 18px; }
  html[lang="ja"] .letter { font-size: 17px; line-height: 2.05; }

  /* 空間と由来：濃い板を余白の中に掛ける */
  .story { display: block; max-width: var(--max); margin: var(--sec-gap) auto 0; padding: 0 calc(var(--gut) - 32px); }
  .story-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; padding: 32px 32px 56px; text-align: left; }
  .story-in > * { grid-column: 1 / -1; }
  .story-photo { margin: 0; }
  /* 写真の比率（--ar は生成スクリプトが写真の寸法から入れる）。読み込む前から高さを取り、ページ内リンクの着地がずれないように */
  .story-photo img { aspect-ratio: var(--ar, 1787 / 784); }
  .story-ph { aspect-ratio: 1787 / 784; }
  .story-photo figcaption { padding: 0; }
  /* 見出しは左に大きく1行、ボタンは右（見出しの下の線にそろえる） */
  .story-h { grid-column: 1 / 10; grid-row: 2; align-self: end; margin-top: 40px; font-size: clamp(30px, 2.9vw, 42px); line-height: 1.5; text-wrap: nowrap; white-space: nowrap; }
  .story-more { grid-column: 10 / 13; grid-row: 2; justify-self: end; align-self: end; margin: 0 0 6px; }

  /* お品書き：札は左の9列、写真は右の3列 */
  /* お品書き：札は左の8列、海老天の写真は右の4列（一文と札の高さに合わせる） */
  /* 昼・夜・写真の3列（48px 間隔）。下の段（注記・電話・お持ち帰り）もこの3列の線にそろえる */
  .menu { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 48px; }
  .menu-photo { grid-column: 3; grid-row: 2; width: auto; margin: 0; }
  .boards { grid-column: 1 / 3; grid-row: 2; grid-template-columns: 1fr 1fr; column-gap: 48px; margin-top: 0; }
  .course { grid-template-columns: 62px minmax(0, 1fr); column-gap: 22px; padding: 14px 0; }
  .fuda { min-height: 84px; }
  .fuda-name { font-size: 28px; }
  .fuda-name rt { font-size: 10px; }
  .course-price { font-size: 24px; }
  .meal-h { font-size: 21px; }
  .menu-notes { grid-column: 1 / 3; grid-row: 3; margin-top: 40px; }
  .menu-call { grid-column: 3; grid-row: 3; display: block; margin-top: 40px; }
  .menu-tel { justify-content: space-between; }
  .takeout { grid-column: 1 / -1; grid-row: 4; display: grid; grid-template-columns: subgrid; margin-top: 96px; }
  .takeout-head { grid-column: 1; }
  .take-items { grid-column: 2 / 4; max-width: none; margin-top: 4px; gap: 48px; }

  /* ご予約：左に控えの紙、右にご予約の前に */
  .reserve .line { grid-column: 1 / 9; grid-row: 2; }
  .reserve-lead { grid-column: 1 / 9; grid-row: 3; max-width: 34em; }
  .tel-block { grid-column: 1 / 8; grid-row: 4 / 6; margin-top: 52px; }
  .slip { max-width: none; padding: 32px 32px 24px; }
  .rsv-tel { justify-content: space-between; padding: 10px 26px; }
  .rsv-tel .tel-plate-n { font-size: 26px; }
  .slip-tel { padding-right: 72px; }
  .slip-n { font-size: clamp(38px, 3.75vw, 50px); }
  .slip-tap { display: none; }
  .inkan { width: 46px; top: 32px; right: 30px; }
  .before { grid-column: 9 / 13; grid-row: 4; margin-top: 52px; padding-top: 0; border-top: 0; }
  .before .sub-h { margin-top: -4px; }
  .req-line { display: block; }
  .req-line .chip { display: table; margin: 0 0 10px; }
  .reserve { padding-bottom: 112px; }
  /* お席の写真は正方形に切り抜いて小さめに（右の列が控えの紙より長くならないように） */
  .reserve-photo { grid-column: 9 / 12; grid-row: 5; width: auto; margin: 48px 0 0; }
  .reserve-photo img.ar-23, .reserve-photo .ph-empty { aspect-ratio: 1 / 1; }

  /* アクセス */
  .access .line { grid-column: 1 / 10; grid-row: 2; }
  /* 左に最寄り駅の表・場所の説明・地図と入口、右に店舗情報 */
  .access-h-walk { grid-column: 1 / 7; grid-row: 3; margin-top: 0; }
  .stations { grid-column: 1 / 7; grid-row: 4; max-width: none; }
  .access-lead { grid-column: 1 / 7; grid-row: 5; margin-top: 40px; }
  .access-h-info { grid-column: 8 / 13; grid-row: 3; margin-top: 0; }
  .info { grid-column: 8 / 13; grid-row: 4 / 8; max-width: none; margin-top: 18px; }
  .map { grid-column: 1 / 7; grid-row: 6; max-width: none; margin-top: 44px; display: grid; grid-template-columns: minmax(0, 1fr) 36%; column-gap: 24px; align-items: start; }
  .map-box { grid-column: 1; grid-row: 1; }
  .map-links { grid-column: 1; grid-row: 2; }
  .entrance { grid-column: 2; grid-row: 1 / 3; width: auto; margin-top: 0; }

  /* よくあるご質問 */
  .faq { padding-bottom: 168px; }
  .faq-cat { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-top: 40px; }
  .faq .sec-h + .faq-cat { margin-top: 8px; }
  .faq-cat h3 { grid-column: 1 / 4; padding-top: 18px; }
  .faq-cat .qs { grid-column: 4 / 13; }

  /* フッター */
  .foot { padding: 88px var(--gut) 52px; }
  .foot-in { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; max-width: calc(var(--max) - var(--gut) * 2); margin: 0 auto; }
  .foot-call { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: end; padding: 0 0 56px; margin-bottom: 72px; }
  .foot-call-k { grid-column: 1 / 7; font-size: 22px; }
  .foot-call-n { grid-column: 7 / 13; justify-self: end; margin: 0; font-size: 46px; }
  .foot-call-s { grid-column: 1 / 7; grid-row: 2; margin-top: 6px; }
  .foot-call .foot-web { grid-column: 7 / 13; grid-row: 1; justify-self: end; width: auto; min-width: 320px; min-height: 60px; margin: 0; }
  .foot-call .foot-web + .foot-call-n { grid-column: 7 / 13; grid-row: 2; justify-self: end; margin-top: 16px; font-size: 30px; }
  .foot-logo { grid-column: 1 / 4; grid-row: 2 / 5; height: 240px; }
  .foot-info { grid-column: 5 / 10; grid-row: 2; margin-top: 0; }
  .foot-nav { grid-column: 10 / 13; grid-row: 2; flex-direction: column; gap: 0; margin-top: 0; }
  .foot-nav a { padding: 3px 0; margin: 0; }
  .foot-lang { grid-column: 10 / 13; grid-row: 3; flex-direction: column; gap: 0; margin-top: 18px; }
  .foot-lang a, .foot-lang-now { padding: 3px 0; }
  .foot-photo { grid-column: 5 / 13; grid-row: 4; margin-top: 48px; }
  .foot-legal { grid-column: 5 / 13; grid-row: 5; margin-top: 48px; }
  .foot-photo + .foot-legal { margin-top: 6px; }
  .foot-copy { grid-column: 5 / 13; grid-row: 6; margin-top: 56px; }
  .foot-legal + .foot-copy { margin-top: 4px; }
}

/* PCでも幅が狭いとき（1024–1279px）：列が細くなる所の組み方を変える */
@media (min-width: 1024px) and (max-width: 1279px) {
  .gnav-index { gap: 16px; }
  /* お店：本文を溝まで広げ、一覧は写真の下まで広げる */
  .about-body { margin-right: -24px; }
  .facts { grid-column: 5 / 13; }
  .about:not(.has-photo) .about-body { grid-column: 5 / 13; margin-right: 0; }
  .about-photo { grid-row: 3; }
  .menu { grid-template-columns: 1fr 1fr .72fr; }
  /* ご予約：「ご予約の前に」は右の列に残し、お席の写真は出さない（右の列が写真1枚だけで空くため） */
  .reserve-lead { grid-column: 1 / 9; }
  .reserve-photo { display: none; }
}

/* タブレット（768–1023px）：ご予約の控えを幅いっぱいにしたので、中を2列に（間延びしないように） */
@media (min-width: 768px) and (max-width: 1023px) {
  .reserve .slip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; padding: 28px 28px 22px; }
  .reserve .slip-ask { grid-column: 1; grid-row: 1; }
  .reserve .slip-cancel { grid-column: 2; grid-row: 1; margin-top: 0; padding-top: 0; border-top: 0; }
  .reserve .slip-cancel .mini-h, .reserve .slip-cancel .mini-h + .note { padding-right: 52px; }
  .reserve .slip-ask .mini-h, .reserve .slip-ask .ask-note { padding-right: 0; }
}

/* 狭いPC（1024–1279px）：ごあいさつの10列を右の列に収める。地図の下に入口の写真（地図が細くならないように） */
@media (min-width: 1024px) and (max-width: 1279px) {
  html[lang="ja"] .letter { line-height: 1.95; }
  .map { grid-template-columns: minmax(0, 1fr); }
  .entrance { grid-column: 1; grid-row: 3; width: 50%; margin-top: 28px; }
}
/* さらに狭いPC（1024–1179px）：URLありのとき、上の帯の電話は小さな番号だけ（目次と店名がくっつかないように） */
@media (min-width: 1024px) and (max-width: 1179px) {
  .gnav.has-web .gnav-tel { box-shadow: none; background: none; color: inherit; }
  .gnav.has-web .gnav-tel-n { padding: 0; font-family: var(--gothic); font-size: 14px; letter-spacing: .04em; }
  .gnav.has-web .gnav-tel-n::before { margin-right: 8px; }
}
/* URLありのPC：上の帯はネット予約（朱）が主、電話は朱の印なしの番号 */
@media (min-width: 1180px) {
  .gnav.has-web .gnav-web { padding: 0 22px; font-size: 13px; letter-spacing: .12em; }
}

@media (min-width: 1280px) {
  :root { --gut: 72px; }
  /* お店：本文の右に一覧（写真がないとき。右の4列が空かないように） */
  .about:not(.has-photo) .about-body { grid-column: 5 / 9; }
  .about:not(.has-photo) .facts { grid-column: 9 / 13; grid-row: 3; margin: 36px 0 0 8px; }
  .gnav.has-web .gnav-tel-k { display: none; }
  .gnav.has-web .gnav-tel-n::before { content: ""; margin-right: 10px; }
  .gnav.has-web .gnav-tel-n { padding: 0 14px 0 12px; font-size: 15px; }
  html[lang="ja"] .letter { font-size: 19px; line-height: 2.1; }
  .gnav-index .gnav-wide { display: list-item; }
  .gnav-tel-k { display: flex; }
  .gnav-tel-n::before { content: none; }
  .gnav-tel-n { padding: 0 14px; }
}

@media (min-width: 1440px) {
  :root { --gut: 80px; --max: 1280px; }
  .gnav-index { gap: 24px; font-size: 13px; }
  .gnav-brand { font-size: 16px; }
}

/* 大きな画面：欄の幅を少し広げる（中の配置は変えない） */
@media (min-width: 1680px) {
  :root { --max: 1360px; }
}

/* 高さの低いPC（1366×768 を125%表示など）：冒頭の札と開店予定を最初の画面に収める */
@media (min-width: 1024px) and (max-height: 640px) {
  .hero { min-height: 500px; }
  .hero-copy { bottom: 32px; }
  .hero-row { margin-top: 14px; }
  .hero-line { font-size: clamp(30px, 2.9vw, 42px); }
  .hero-mark { --mark-h: clamp(200px, 34vh, 260px); top: 96px; }
  .hero-note { bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}


/* ================================================================================
   空間と店名の由来（/story/ と /en/story/）だけで使う部品
   ================================================================================ */

/* ---------------------------------------------------------------- 冒頭：最終パースを画面いっぱいに */
.shero-img { object-position: 50% 50%; }
.shero-copy {
  position: absolute;
  z-index: 2;
  top: 112px;
  bottom: calc(26px + env(safe-area-inset-bottom));
  left: var(--gut);
  right: var(--gut);
  display: flex;
  flex-direction: column;
  text-shadow: 0 1px 14px rgba(0, 0, 0, .38);
}
.crumb { display: flex; gap: .7em; font-size: 11.5px; line-height: 1.6; letter-spacing: .14em; opacity: .86; }
/* 押しやすさ：上下に 12px ずつ広げる（見た目の位置は変えない） */
.crumb a { display: inline-block; padding: 12px 4px; margin: -12px -4px; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .5); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.shero-title {
  margin-top: 14px;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: clamp(26px, 7.9vw, 34px);
  line-height: 1.5;
  letter-spacing: .1em;
}
.shero-row { display: contents; }
.shero-lead { margin-top: 16px; font-size: 13.5px; line-height: 1.9; letter-spacing: .08em; }
.shero-note { order: 1; margin-top: auto; align-self: flex-end; text-align: right; font-size: 10.5px; line-height: 1.7; letter-spacing: .06em; opacity: .75; }
/* 欄への案内：細い線で区切った三行（スマホ）、横に並べた下線のリンク（PC） */
.shero-toc { order: 2; list-style: none; padding: 0; margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, .34); }
.shero-toc a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 4px 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .34);
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: .14em;
}
.shero-toc svg { flex: none; width: 8px; height: 14px; transition: transform .3s; }
.shero-toc a:hover svg { transform: translateY(3px); }
/* h1 と説明文は最初から見せる（LCP を遅らせない）。ふわっと出すのは案内のリンクと添え書きだけ */
@media (prefers-reduced-motion: no-preference) {
  .shero-toc, .shero-note { animation: rise 1.2s .2s cubic-bezier(.2, .6, .2, 1) both; }
}

/* ---------------------------------------------------------------- 店名の由来：ロゴの書を大きく */
/* スマホ・タブレット：見出しを上に出し、書は小さく（「店名の由来 ↓」で飛んだとき見出しが画面の上に来るように） */
.origin-head { display: flex; flex-direction: column; align-items: flex-start; gap: 32px; }
.origin-mark { flex: none; width: auto; height: 200px; }
.origin .line { padding-bottom: 2px; }
.origin-body { margin-top: 56px; }
/* 名前に込めた意味（2026-10-23）：控えの紙と同じ白い紙に、縦書きの大きな「幸久」（読みは右）、その下に意味を2つ。中央に組む。
   名前の後ろの白木の札（木の板）は「ダサい」のでやめた */
.meaning {
  margin-top: 56px;
  padding: 34px 20px 36px;
  background-color: var(--paper-2);
  background-image: var(--washi-fine);
  box-shadow: inset 0 0 0 1px rgba(34, 29, 24, .1);
  text-align: center;
}
.meaning-k { display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 400; font-size: 12px; line-height: 1.6; letter-spacing: .26em; color: var(--ink-3); }
.meaning-k::before, .meaning-k::after { content: ""; flex: none; width: 22px; height: 1px; background: var(--line-2); }
.meaning-fuda { display: flex; align-items: center; justify-content: center; margin: 26px auto 0; color: var(--ink); }
.meaning-fuda .fuda-name { font-size: 46px; letter-spacing: .14em; }
.meaning-fuda .fuda-name rt { font-size: 10.5px; letter-spacing: .08em; }
.meaning-read { margin-top: 10px; font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .14em; color: var(--ink-2); }
.meaning-list { list-style: none; padding: 0; margin-top: 26px; }
.meaning-list li { position: relative; font-family: var(--mincho); font-weight: 500; font-size: 17px; line-height: 2; letter-spacing: .08em; color: var(--ink); }
.meaning-list li + li { margin-top: 20px; padding-top: 20px; }
.meaning-list li + li::before { content: ""; position: absolute; top: 0; left: 50%; width: 28px; height: 1px; margin-left: -14px; background: var(--line-2); }
.meaning-list em { font-style: normal; font-weight: 600; font-size: 1.1em; }

/* 名前の意味と経緯：確認中なので、点線の枠で場所だけ */
.pending {
  display: flex;
  align-items: center;
  min-height: 132px;
  margin-top: 40px;
  padding: 22px 20px;
  border: 1px dashed rgba(34, 29, 24, .36);
  font-size: 13px;
  line-height: 1.9;
  letter-spacing: .06em;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- こだわりの空間（2026-10-26：杉木さんのデザインコンセプト「2つの異なった空間」）
   宮本さん「構成はがらっとかえてもいい。design任せる」→ コンセプトの順に、1つめ（坪庭のある内玄関）は和紙の明るい地、
   「2つめの戸を開けると」の細い線を下ろし、2つめ（石のカウンターと石の壁の、天ぷら職人のステージ）は暗い帯に切り替える */
.space-intro { margin-top: 28px; }
/* 出典の小さな一行（杉木さんのデザインコンセプトの引用であることを示す） */
.space-src { font-size: 12px; line-height: 1.7; letter-spacing: .16em; color: var(--ink-3); }
.space-lead { margin-top: 12px; font-family: var(--mincho); font-weight: 500; font-size: 17px; line-height: 2; letter-spacing: .08em; color: var(--ink); }
.room { margin-top: 72px; }
.room-k { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; line-height: 1.6; letter-spacing: .24em; color: var(--ink-3); }
.room-k::before { content: ""; flex: none; width: 22px; height: 1px; background: var(--shu); }
.room-h { margin-top: 12px; font-family: var(--mincho); font-weight: 500; font-size: 23px; line-height: 1.6; letter-spacing: .12em; color: var(--ink); }
.room-fig { margin-top: 28px; }
.room-ph { width: 100%; }
img.room-ph { background: var(--empty); }
.room-note { margin-top: 8px; font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; color: var(--ink-3); text-align: right; }
.room-t { margin-top: 28px; }
.room-b { font-size: 14.5px; line-height: 2.1; color: var(--ink-2); }
.room-sub { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
.room-sub-h { font-family: var(--mincho); font-weight: 500; font-size: 16.5px; line-height: 1.6; letter-spacing: .1em; color: var(--ink); }
.room-sub p { margin-top: 8px; font-size: 14px; line-height: 2; color: var(--ink-2); }
/* 2つめの空間：暗い帯（パースの暗い色に近い、焦げ茶がかった墨色） */
.stage-band { background: #24201c; color: var(--on-koge); }
.space-light { padding-bottom: var(--sec-gap); }
.space-dark { padding-bottom: var(--sec-gap); }
.room-2 { margin-top: 0; }
.space-dark .room-k { color: var(--on-koge-2); }
.space-dark .room-h, .space-dark .room-sub-h { color: var(--on-koge); }
.space-dark .room-b, .space-dark .room-sub p { color: var(--on-koge-2); }
.space-dark .room-sub { border-top-color: var(--line-koge); }
.space-dark .room-note { color: var(--on-koge-3); }
.space-dark img.room-ph { background: #1d1a17; }
.space-dark .ph-empty { box-shadow: inset 0 0 0 1px var(--line-koge); color: var(--on-koge-2); }
/* 杉木さんの文の締めの一文（大きくしない） */
.space-close { margin-top: 56px; font-family: var(--mincho); font-weight: 500; font-size: 17px; line-height: 2; letter-spacing: .08em; color: var(--on-koge); text-align: center; }
/* 設計の一文（杉木さんの顔写真つき）と株式会社スペースのサイト */
.space-credit { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--line-koge); text-align: center; }
.space-credit p { color: var(--on-koge-2); }
.designer-photo { width: 120px; margin: 0 auto 22px; }
.designer-photo img { width: 100%; height: auto; background: #1d1a17; }
.designer-link {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 16px 0 6px;
  border-bottom: 1px solid currentColor;
  font-size: 12.5px;
  line-height: 1.6;
  letter-spacing: .1em;
}
.space-dark .designer-link { color: var(--on-koge); }
.designer-link svg { width: 13px; height: 13px; }

/* ---------------------------------------------------------------- 大切にしていること：縦書き */
.values-v {
  writing-mode: vertical-rl;
  margin: 52px auto 0 0;
  font-family: var(--mincho);
  font-weight: 500;
  font-size: 19px;
  line-height: 2.3;
  letter-spacing: .16em;
  color: var(--ink);
  white-space: nowrap;
  word-break: keep-all;
}

/* ---------------------------------------------------------------- トップの欄への案内 */
.next .sub-h { margin-bottom: 0; }
.next-list { list-style: none; padding: 0; margin-top: 24px; border-top: 1px solid var(--line); }
.next-list a {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.next-list img { width: 60px; height: 76px; object-fit: cover; background: #ddd5c8; }
/* 3つとも写真がまだない間（本番の版）は、写真の列を作らず文字だけで並べる（2026-10-30） */
.next-list.no-thumbs a { grid-template-columns: minmax(0, 1fr) auto; }
.next-t { display: flex; flex-direction: column; }
.next-k { font-family: var(--mincho); font-weight: 500; font-size: 17px; line-height: 1.6; letter-spacing: .14em; color: var(--ink); }
.next-s { font-size: 12px; line-height: 1.8; letter-spacing: .06em; color: var(--ink-3); }
.next-list svg { width: 32px; height: 8px; margin-right: 2px; transition: transform .3s; }
.next-list a:hover svg { transform: translateX(4px); }
.next-note { margin-top: 10px; font-size: 10.5px; line-height: 1.6; letter-spacing: .06em; color: var(--ink-3); }

/* ---------------------------------------------------------------- 電話予約（トップの控えの紙をそのまま） */
.call { padding-bottom: 120px; }
.call-open { margin-top: 14px; font-size: 13px; letter-spacing: .1em; color: var(--ink-2); }
.call .slip { margin-top: 36px; }
.call-more { display: flex; flex-wrap: wrap; column-gap: 28px; margin-top: 14px; font-size: 12.5px; letter-spacing: .08em; color: var(--ink-2); }
.call-more a { display: inline-block; padding: 10px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-2); }

/* ---------------------------------------------------------------- 目次：このページの欄は「空間と由来」の下に小さく */
.drawer-index .drawer-sub { list-style: none; padding: 0 0 6px 23px; }
.drawer-index .drawer-sub a { gap: 12px; padding: 5px 0; font-size: 15.5px; letter-spacing: .12em; color: var(--ink-2); }
.drawer-index .drawer-sub i { width: 9px; height: 1px; border-radius: 0; background: currentColor; opacity: .5; }
.drawer-index .drawer-sub a.is-on { color: var(--ink); }
.drawer-index .drawer-sub a.is-on i { width: 14px; opacity: 1; }

/* ================================================================ とても狭いスマホ（〜359px） */
@media (max-width: 359px) {
  .origin-mark { height: 180px; }
  .designer-link { font-size: 11.5px; letter-spacing: .06em; }
  .next-list a { grid-template-columns: 52px minmax(0, 1fr) auto; column-gap: 14px; }
  .next-list img { width: 52px; height: 66px; }
}

/* スマホ・タブレット：このページの冒頭には電話の札がないので、下の予約バーを最初から出す。冒頭の文字はバーの上に */
@media (max-width: 1023px) {
  .shero-copy { bottom: calc(var(--bar) + 22px + env(safe-area-inset-bottom)); }
  /* 内装パースは横長なので、スマホでは高さに合わせて拡大され、明るい天井の板が画面の高さの約31%の所に来る。
     iPhone の Safari（ツールバーが出ている時の高さ 550〜670px）でも説明文が板にかからないよう、
     上の組みを詰め、文字の下（上端から約300pxまで）だけを少し沈める。写真全体にはかけない */
  .shero-copy { top: 84px; }
  .shero-title { margin-top: 8px; line-height: 1.45; }
  .shero-lead { margin-top: 10px; }
  .shero::after {
    background:
      linear-gradient(to bottom, rgba(20, 14, 9, .52) 0, rgba(20, 14, 9, .52) 120px, rgba(20, 14, 9, .66) 200px, rgba(20, 14, 9, .5) 236px, rgba(20, 14, 9, 0) 300px),
      linear-gradient(to top, rgba(20, 14, 9, .5) 0, rgba(20, 14, 9, 0) 22%);
  }
  /* 添え書きは、目次の下（写真の暗い椅子の所）に。低い画面でも明るい壁にかからない */
  .shero-toc { margin-top: auto; }
  .shero-toc a { padding-top: 10px; padding-bottom: 10px; }
  .shero-note { order: 3; margin-top: 10px; }
}

/* ================================================================ タブレット */
@media (min-width: 640px) {
  .origin-mark { height: 240px; }
  .pending, .next-list { max-width: 34em; }
  .call .slip, .call .web-cta { max-width: 34em; }
}

/* スマホ・タブレット：店名の由来・こだわりの空間・大切にしていることは、中央に組む。
   2026-10-23 宮本さん「左寄りになっていて気持ち悪い」→ 左の線から書き出すと、短い行・細い書・縦書きの右側が大きく空いていた。
   見出し・書・名前と写真・意味の札・年表・縦書きを中央の線にそろえ、文も中央に */
@media (max-width: 1023px) {
  .origin, .space, .values { text-align: center; }
  /* 店名の由来：見出し → 書（大きく）→ 由来の文 → 名前に込めた意味 */
  .origin-head { align-items: center; gap: 40px; }
  .origin-mark { height: 260px; }
  .origin-body { margin: 48px auto 0; }
  .meaning { max-width: 30em; margin: 52px auto 0; }
  /* こだわりの空間：見出し → 一文 → 1つめ（小見出し・見出し → 写真 → 文）→ 暗い帯の2つめ → 設計の一文 */
  .room, .space-close, .space-credit { max-width: 34em; margin-left: auto; margin-right: auto; }
  .room-k::after { content: ""; flex: none; width: 22px; height: 1px; background: var(--shu); }
  .room-note { text-align: center; }
  /* 大切にしていること：縦書きの文を真ん中に掛ける（各列の書き出しは上でそろえる。中央揃えを受け継ぐと列の頭がずれる） */
  .values-v { margin: 48px auto 0; text-align: start; }
}

/* ================================================================ PC */
@media (min-width: 1024px) {
  .shero-img { object-position: 50% 56%; }
  .shero::after {
    background:
      linear-gradient(to bottom, rgba(20, 14, 9, .42) 0, rgba(20, 14, 9, 0) 160px),
      linear-gradient(to top, rgba(20, 14, 9, .62) 0, rgba(20, 14, 9, 0) 42%);
  }
  .shero-copy { top: auto; right: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); bottom: 60px; left: max(var(--gut), calc((100% - var(--max)) / 2 + var(--gut))); display: block; }
  .shero-title { margin-top: 12px; font-size: clamp(40px, 3.9vw, 58px); line-height: 1.4; letter-spacing: .12em; white-space: nowrap; }
  .shero-row { display: flex; align-items: flex-end; gap: 64px; margin-top: 24px; }
  .shero-lead { margin: 0; font-size: 14px; }
  .shero-toc { display: flex; gap: 36px; margin: 0; border: 0; }
  .shero-toc a { gap: 14px; justify-content: flex-start; padding: 0 0 8px; border-bottom-color: rgba(255, 255, 255, .6); font-size: 15px; white-space: nowrap; }
  .shero-note { position: absolute; right: 0; bottom: -36px; margin: 0; }
  .shero-note br { display: none; }

  /* 店名の由来：左に書、右に文 */
  .origin-head { display: contents; }
  .origin-mark { grid-column: 1 / 5; grid-row: 1 / 4; height: 520px; margin-top: 6px; }
  .origin .line { grid-column: 6 / 13; grid-row: 1; padding: 0; }
  .origin-body { grid-column: 6 / 11; grid-row: 2; margin-top: 40px; }
  .pending { grid-column: 6 / 11; grid-row: 3; align-self: start; max-width: none; margin-top: 52px; }
  .meaning { grid-column: 6 / 12; grid-row: 3; align-self: start; margin-top: 56px; padding: 40px 32px 42px; }

  /* こだわりの空間：左に見出し、右に一文。1つめは左に写真・右に文、暗い帯の2つめは左に文・右に写真。設計の一文は中央に */
  .space-head { display: contents; }
  .space-light .line { grid-column: 1 / 6; grid-row: 1; }
  .space-intro { grid-column: 7 / 13; grid-row: 1; align-self: end; margin: 0; }
  .space-lead { font-size: 19px; }
  .space-close { grid-column: 1 / -1; margin-top: 88px; font-size: 19px; }
  .room { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; grid-template-rows: auto auto; }
  .room-1 { grid-row: 2; margin-top: 104px; }
  .room-1 .room-fig { grid-column: 1 / 8; grid-row: 1 / 3; margin: 0; }
  .room-1 .room-head { grid-column: 9 / 13; grid-row: 1; align-self: end; }
  .room-1 .room-t { grid-column: 9 / 13; grid-row: 2; align-self: start; }
  .room-2 { margin-top: 0; }
  .room-2 .room-head { grid-column: 1 / 6; grid-row: 1; align-self: end; }
  .room-2 .room-t { grid-column: 1 / 6; grid-row: 2; align-self: start; }
  .room-2 .room-fig { grid-column: 6 / 13; grid-row: 1 / 3; margin: 0; }
  .room-h { font-size: 28px; }
  .room-b { font-size: 15px; }
  .space-credit { grid-column: 1 / -1; justify-self: center; display: flex; align-items: center; gap: 32px; margin-top: 88px; padding: 48px 8px 0; text-align: left; }
  .designer-photo { flex: none; width: 120px; margin: 0; }

  /* 大切にしていること */
  .values .line { grid-column: 1 / 7; grid-row: 1; }
  .values-v { grid-column: 7 / 12; grid-row: 1; justify-self: start; margin: 8px 0 0; font-size: 22px; }

  /* 案内 */
  .next { align-items: start; }
  .next .sub-h { grid-column: 1 / 4; padding-top: 14px; }
  .next-list { grid-column: 5 / 13; max-width: none; margin-top: 0; }
  .next-list a { grid-template-columns: 72px minmax(0, 1fr) auto; column-gap: 28px; padding: 16px 0; }
  .next-list img { width: 72px; height: 92px; }
  .next-t { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 22px; }
  .next-k, .next-s { white-space: nowrap; }
  .next-k { font-size: 18px; }
  .next-note { grid-column: 5 / 13; }

  /* 電話予約 */
  .call { padding-bottom: 168px; }
  .call .line { grid-column: 1 / 10; grid-row: 2; }
  .call-open { grid-column: 1 / 10; grid-row: 3; margin-top: 16px; }
  .call .slip { grid-column: 1 / 8; grid-row: 4; max-width: none; margin-top: 52px; padding: 32px 32px 28px; }
  .call .slip-tel { padding-right: 72px; }
  .call .slip-n { font-size: clamp(38px, 3.75vw, 50px); }
  .call .slip-tap { display: none; }
  .call .inkan { width: 46px; top: 32px; right: 30px; }
  .call-more { grid-column: 1 / 10; grid-row: 5; }
  .call .web-cta { grid-column: 1 / 8; grid-row: 4; max-width: none; margin-top: 52px; }
  .call .web-cta + .slip { grid-row: 5; margin-top: 14px; }
  .call .web-cta ~ .call-more { grid-row: 6; }
}

/* 高さの低いPC：冒頭の文字と添え書きを最初の画面に収める */
@media (min-width: 1024px) and (max-height: 640px) {
  .shero-copy { bottom: 48px; }
  .shero-row { margin-top: 16px; }
}

/* PCでも幅が狭いとき（1024–1279px） */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* 冒頭：案内の3つのリンクは文の下の段に（横に並べると折れるため） */
  .shero-row { flex-direction: column; align-items: flex-start; gap: 22px; }
  .space-light .line { grid-column: 1 / 7; }
}


/* ================================================================================
   写真の中身（img）と空の枠をそろえる
   ================================================================================ */
.take-ph, .entrance-ph { width: 100%; }
img.take-ph, img.entrance-ph { height: auto; object-fit: cover; background: #ddd5c8; }
.take-desc { margin-top: 2px; font-size: 11.5px; line-height: 1.7; letter-spacing: .04em; color: var(--ink-3); }
.foot-updated { margin-top: 14px; font-size: 11px; letter-spacing: .08em; color: var(--on-koge-3); }
/* ネット予約（TableCheck）を始めたら出る札（CONFIG.tablecheckUrl） */
/* ネット予約（主役）の札：朱。準備中の間は同じ大きさの薄い朱で、押せない */
.web-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; min-height: 66px; padding: 12px 24px; background: var(--shu); color: var(--shu-ink); transition: filter .3s; }
a.web-cta:hover { filter: brightness(.93); }
.web-cta-n { font-family: var(--mincho); font-weight: 500; font-size: 19px; line-height: 1.5; letter-spacing: .12em; }
.web-cta-k { font-size: 12px; letter-spacing: .1em; opacity: .9; }
.web-cta.is-soon { background: transparent; box-shadow: inset 0 0 0 1px var(--shu); color: #a8321f; }
.web-cta.is-soon .web-cta-k { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border: 1px solid currentColor; opacity: 1; }
.web-cta.is-soon .web-cta-n { font-size: 16px; }
.tel-block .web-cta { margin-bottom: 12px; }
.rsv-tel { min-height: 64px; padding: 10px 20px; flex-wrap: wrap; row-gap: 2px; }
.rsv-tel .tel-plate-n { font-size: 22px; }
.tel-block .rsv-tel + .slip { margin-top: 14px; }
.reserve .slip .slip-ask { margin-top: 0; padding-top: 0; border-top: 0; }
.reserve .slip-ask .mini-h, .reserve .slip-ask .ask-note { padding-right: 52px; }
.ask-note { margin: 2px 0 6px; font-size: 12px; }
.call .web-cta { margin-top: 36px; }
.call .web-cta + .slip { margin-top: 14px; }
.menu-call .menu-web { margin: 0 0 12px; }
.take-note { color: var(--ink-3); }
html[lang="en"] .take-name small { display: inline; margin-left: 0; }

/* ================================================================================
   ふわっと出る表示（大きな一文だけ。写真は動かさない）。site.js が .rv を付ける。動きを減らす設定では出さない
   ================================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(12px); transition: opacity 1.2s cubic-bezier(.2, .6, .2, 1), transform 1.2s cubic-bezier(.2, .6, .2, 1); }
  .js .rv.is-in { opacity: 1; transform: none; }
}

/* ================================================================================
   暖簾のオープニング（スマホ・タブレットで、セッションに1回だけ。head の小さなスクリプトが .intro-on を付ける）
   書が上から現れ、落款が押され、暖簾が左右に開く。タップで飛ばせる。写真そのものは動かさない
   ================================================================================ */
.intro { display: none; }
.intro-on .intro { display: block; position: fixed; inset: 0; z-index: 200; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.intro-on.intro-done .intro { display: none; }
.noren { position: absolute; top: 0; bottom: 0; width: 50.5%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 6px), linear-gradient(180deg, #3f352c, #3a3129 30%, #2f2720); }
.noren-l { left: 0; transform-origin: 0 0; box-shadow: inset -1px 0 0 rgba(239, 232, 220, .1); }
.noren-r { right: 0; transform-origin: 100% 0; box-shadow: inset 1px 0 0 rgba(0, 0, 0, .35); }
.noren::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: linear-gradient(180deg, rgba(0, 0, 0, .4), transparent); }
.intro-mark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.intro-stack { position: relative; display: inline-block; line-height: 0; }
.intro-logo { display: block; width: auto; height: min(46vh, 380px); height: min(46svh, 380px); }
.intro-seal { position: absolute; left: 89.01%; top: 89.98%; width: 10.53%; }
.intro-seal img { display: block; width: 100%; height: auto; }
/* 2026-10-22：全体を 1.5 秒に縮めた（書 0.1〜0.65 秒、落款 0.55 秒、暖簾は 0.8 秒から 0.7 秒かけて開く） */
@media (prefers-reduced-motion: no-preference) {
  .intro-on .intro-logo {
    -webkit-mask-image: linear-gradient(180deg, #000 40%, transparent 60%); mask-image: linear-gradient(180deg, #000 40%, transparent 60%);
    -webkit-mask-size: 100% 250%; mask-size: 100% 250%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    animation: kk-brush .55s cubic-bezier(.6, .05, .3, 1) .1s both;
  }
  .intro-on .intro-seal { animation: kk-stamp .35s cubic-bezier(.3, 1.5, .5, 1) .55s both; }
  .intro-on .intro-mark { animation: kk-thud .22s ease-out .72s, kk-fadeout .35s ease .9s forwards; }
  .intro-on .noren-l { animation: kk-part-l .7s cubic-bezier(.7, 0, .25, 1) .8s forwards; }
  .intro-on .noren-r { animation: kk-part-r .7s cubic-bezier(.7, 0, .25, 1) .8s forwards; }
  /* 冒頭の説明・料金・電話の札は、暖簾が開きかけたら出す。タップで飛ばしたら（.intro-skip）すぐ出す */
  .intro-on .hero-sub, .intro-on .hero-open, .intro-on .hero-tel, .intro-on .hero-web { animation-delay: 1.2s; }
  .intro-on.intro-skip .hero-sub, .intro-on.intro-skip .hero-open, .intro-on.intro-skip .hero-tel, .intro-on.intro-skip .hero-web { animation-delay: 0s; }
}
@keyframes kk-brush { from { -webkit-mask-position: 0 100%; mask-position: 0 100%; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes kk-stamp { 0% { opacity: 0; transform: scale(2.2) rotate(-14deg); } 55% { opacity: 1; transform: scale(.9) rotate(3deg); } 100% { opacity: 1; transform: none; } }
@keyframes kk-part-l { to { transform: translateX(-104%) skewY(-3deg); } }
@keyframes kk-part-r { to { transform: translateX(104%) skewY(3deg); } }
@keyframes kk-thud { 0% { transform: none; } 35% { transform: translateY(3px) scale(.994); } 100% { transform: none; } }
@keyframes kk-fadeout { to { opacity: 0; transform: scale(.96); } }

/* ================================================================================
   季節の葉（CONFIG.seasonal が 'off' 以外のときだけ、冒頭に .season が出る。今は 'off'）
   ================================================================================ */
.season { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.leaf { position: absolute; top: -40px; left: var(--x); width: var(--s); height: var(--s); color: var(--c); opacity: 0; }
.leaf svg { display: block; width: 100%; height: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .leaf { animation: kk-fall var(--d) linear var(--t) infinite; }
  .leaf svg { animation: kk-flutter calc(var(--d) / 3.5) ease-in-out var(--t) infinite alternate; }
  .season.is-paused .leaf, .season.is-paused .leaf svg { animation-play-state: paused; }
}
@keyframes kk-fall { 0% { opacity: 0; transform: translate(0, 0); } 8%, 82% { opacity: var(--o); } 100% { opacity: 0; transform: translate(var(--dx), 92vh); } }
@keyframes kk-flutter { from { transform: rotate(-40deg) rotateY(0deg); } to { transform: rotate(45deg) rotateY(150deg); } }

/* ================================================================================
   Instagram（季節のお知らせ）。アカウントがつながるまでは隠しておき、Worker（/api/instagram）が
   投稿を返したら site.js が中身を入れて表示する（CONFIG.instagram.account を入れたら最初から表示）
   ================================================================================ */
.insta[hidden] { display: none; }
.faq:has(+ .insta:not([hidden])) { padding-bottom: 0; }
.insta { padding-bottom: 104px; }
.insta-follow { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 8px; font-size: 12.5px; letter-spacing: .1em; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: var(--line-2); }
.insta-follow.is-soon { text-decoration: none; color: var(--ink-3); }
.insta-follow svg { width: 16px; height: 16px; flex: none; }
.insta-handle { font-size: 11.5px; color: var(--ink-3); }
.insta-grid {
  display: flex; gap: 10px; list-style: none;
  margin: 24px calc(var(--gut) * -1) 0; padding: 0 var(--gut) 6px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gut); scrollbar-width: none;
}
.insta-grid::-webkit-scrollbar { display: none; }
.insta-grid:empty { display: none; } /* 写真がない間（CONFIG.instagram.sample）はフォローのリンクだけ */
.insta-grid li { flex: 0 0 38%; max-width: 180px; scroll-snap-align: start; }
.insta-grid a { position: relative; display: block; }
.insta-grid img { width: 100%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; background: #ddd5c8; }
.insta-glyph { position: absolute; right: 8px; top: 8px; color: #fff; opacity: .8; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .5)); }
.insta-glyph svg { display: block; width: 15px; height: 15px; }
.insta-date { display: block; margin-top: 6px; font-size: 10.5px; letter-spacing: .06em; color: var(--ink-3); }
.insta .note { margin-top: 12px; font-size: 11px; color: var(--ink-3); }
@media (min-width: 1024px) {
  .insta { padding-bottom: 168px; }
  .insta-lead { grid-column: 1 / 8; }
  .insta-follow { grid-column: 9 / 13; justify-self: end; align-self: end; }
  .insta-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; margin: 36px 0 0; padding: 0; overflow: visible; }
  .insta-grid li { max-width: none; }
  .insta .note { grid-column: 1 / -1; }
}

/* ================================================================================
   プライバシーポリシー（/privacy/・/en/privacy/）。読みやすい1列の文書
   ================================================================================ */
.legal { max-width: 46em; margin: 0 auto; padding: 48px var(--gut) 96px; color: var(--ink); }
.legal-brand a { font-family: var(--mincho); font-weight: 500; font-size: 15px; letter-spacing: .16em; }
.legal h1 { margin-top: 40px; font-family: var(--mincho); font-weight: 500; font-size: clamp(24px, 6vw, 32px); line-height: 1.5; letter-spacing: .1em; }
.legal-lead { margin-top: 20px; color: var(--ink-2); }
.legal section { margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); }
.legal h2 { font-family: var(--mincho); font-weight: 500; font-size: 17px; line-height: 1.6; letter-spacing: .1em; }
.legal section p, .legal section ul { margin-top: 10px; font-size: 14px; line-height: 2; color: var(--ink-2); }
.legal section ul { padding-left: 1.3em; }
.legal section li + li { margin-top: 6px; }
.legal b { font-weight: 400; color: var(--ink); }
.legal a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.legal-date { margin-top: 40px; font-size: 12.5px; color: var(--ink-3); }
.legal-back { margin-top: 18px; font-size: 13px; letter-spacing: .08em; }
.legal-back a { display: inline-block; padding: 10px 0; margin-right: 1.5em; }
html[lang="en"] .legal h1, html[lang="en"] .legal h2, html[lang="en"] .legal-brand a { letter-spacing: .02em; }

/* ================================================================================
   404
   ================================================================================ */
.nf { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 56px var(--gut); text-align: center; }
.nf-logo { display: inline-block; }
.nf-logo img { width: auto; height: 240px; margin: 0 auto; }
.nf h1 { margin-top: 36px; font-family: var(--mincho); font-weight: 500; font-size: 21px; line-height: 1.6; letter-spacing: .14em; }
.nf p { margin-top: 12px; font-size: 13px; line-height: 1.9; color: var(--ink-2); }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: 32px; margin-top: 22px; font-size: 13px; letter-spacing: .1em; }
.nf-links a { display: inline-block; padding: 12px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* ================================================================================
   準備中（soon/index.html）。公開するまで tempura-kokyu.com で出すページ（2026-10-29）
   書のロゴを中心に置き、「京都・御所南」は名刺・冒頭と同じく書の右に縦書きで
   ================================================================================ */
.soon { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding: 56px var(--gut) calc(48px + env(safe-area-inset-bottom)); text-align: center; }
.soon-mark { position: relative; display: inline-block; margin: 0; }
.soon-mark img { width: auto; height: clamp(190px, 30svh, 260px); margin: 0 auto; }
.soon-place { position: absolute; top: .3em; left: 100%; margin-left: .6em; writing-mode: vertical-rl; font-family: var(--mincho); font-weight: 500; font-size: 14px; line-height: 1; letter-spacing: .42em; white-space: nowrap; color: var(--ink-2); }
.soon-open { margin-top: 40px; font-family: var(--mincho); font-weight: 500; font-size: 19px; line-height: 1.7; letter-spacing: .1em; }
.soon-k { margin-top: 8px; font-size: 14px; letter-spacing: .12em; color: var(--ink-2); }
.soon-info { margin: 36px auto 0; padding-top: 28px; max-width: 22em; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.95; color: var(--ink-2); }
.soon-info a { display: inline-block; padding: 6px 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.soon-tel { margin-top: 4px; font-size: 15px; letter-spacing: .1em; color: var(--ink); }
.soon-en { margin-top: 28px; font-size: 12px; line-height: 1.9; letter-spacing: .03em; color: var(--ink-3); }

/* ================================================================================
   英語ページ（/en/ と /en/story/）。日本語の組み（字間の広さ・縦書き）を英語に合わせて直す
   ================================================================================ */
/* ¥ と “ ” ’ は、和文フォントでは全角幅になって間が空くので、英語ページだけ欧文の字形を使う */
@font-face { font-family: "KK Latin Serif"; src: local("Georgia"), local("Times New Roman"), local("Times"), local("Noto Serif"), local("NotoSerif-Regular"); unicode-range: U+00A5, U+2013-2014, U+2018-201D; }
/* Android には Helvetica・Arial がないので Roboto・Noto Sans も（ないと和文フォントの全角に近い ¥ になり、数字の前が空く） */
@font-face { font-family: "KK Latin Sans"; src: local("Helvetica Neue"), local("Arial"), local("Helvetica"), local("Roboto"), local("Roboto-Regular"), local("Noto Sans"), local("NotoSans-Regular"); unicode-range: U+00A5, U+2013-2014, U+2018-201D; }
html[lang="en"] {
  --mincho: "KK Latin Serif", "Noto Serif JP", "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif;
  --gothic: "KK Latin Sans", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
}
html[lang="en"] body { letter-spacing: .01em; line-height: 1.85; }
/* 国際表記の電話番号は長いので、スマホでは落款に重ならない大きさに */
html:not([lang="ja"]) .slip-n { font-size: clamp(23px, 6.9vw, 34px); letter-spacing: 0; }
html[lang="en"] .letter-k { letter-spacing: .1em; }
html[lang="en"] .more, html[lang="en"] .menu-call-more, html[lang="en"] .map-links, html[lang="en"] .call-more, html[lang="en"] .designer-link, html[lang="en"] .foot-nav, html[lang="en"] .drawer-lang { letter-spacing: .04em; }
html[lang="en"] .slip-tap, html[lang="en"] .cap-n, html[lang="en"] .hero-note, html[lang="en"] .shero-note { letter-spacing: .03em; }
html[lang="en"] .sec-h { letter-spacing: .06em; }
html[lang="en"] .sec-h-sub { margin-left: 0; letter-spacing: .02em; white-space: normal; }
html[lang="en"] .line { font-size: clamp(21px, 5.9vw, 25px); line-height: 1.5; letter-spacing: .01em; }
html[lang="en"] .hero-line { font-size: clamp(25px, 7.2vw, 31px); line-height: 1.4; letter-spacing: .02em; }
html[lang="en"] .hero-sub, html[lang="en"] .hero-open { letter-spacing: .02em; }
/* 英語の電話番号（+81-50-1722-8247）は長いので、スマホの横並びの札では少し小さく */
@media (max-width: 639px) { html:not([lang="ja"]) .hero-tel .tel-plate-n { font-size: 15px; letter-spacing: 0; } html[lang="en"] .hero-web.is-soon { font-size: 14px; } }
/* 320px ほどの狭いスマホ：Noto Serif の欧文は幅が広いので、ネット予約の札の中をさらに詰める */
@media (max-width: 359px) { html[lang="en"] .hero-web.is-soon { gap: 4px; font-size: 12.5px; letter-spacing: 0; } html[lang="en"] .hero-web.is-soon small { padding: 0 3px; font-size: 9.5px; } html:not([lang="ja"]) .hero-tel .tel-plate-n { font-size: 14px; } html:not([lang="ja"]) .gnav-r > a, html:not([lang="ja"]) .gnav-r > button, html:not([lang="ja"]) .gnav-lang > summary { padding: 0 5px; } }
html[lang="en"] .tel-plate-k, html[lang="en"] .gnav-r, html[lang="en"] .bar-tel-k, html[lang="en"] .gnav-tel-k, html[lang="en"] .bar-menu-k, html[lang="en"] .drawer-top { letter-spacing: .04em; }
html[lang="en"] .gnav-brand, html[lang="en"] .drawer-brand { letter-spacing: .08em; }
html:not([lang="ja"]) .bar-tel-n, html:not([lang="ja"]) .gnav-tel-n { font-size: 17px; letter-spacing: .02em; }
html[lang="en"] .cap-t, html[lang="en"] .sub-h, html[lang="en"] .mini-h, html[lang="en"] .meal-h, html[lang="en"] .take-name, html[lang="en"] .chef-name, html[lang="en"] .foot-name, html[lang="en"] .drawer-index a, html[lang="en"] .next-k { letter-spacing: .03em; }
html[lang="en"] .kifuda { letter-spacing: .06em; }
html[lang="en"] .qs summary { font-size: 15px; letter-spacing: .01em; }
html[lang="en"] .facts dd { letter-spacing: .01em; }
html[lang="en"] .facts > div, html[lang="en"] .info > div { grid-template-columns: 6.6em minmax(0, 1fr); }
html[lang="en"] .facts dt, html[lang="en"] .info dt { letter-spacing: .04em; }
/* 札：名前の漢字は縦書きのまま、読み（ローマ字）と意味を値段の上に横書きで */
/* お品書きの英語：ローマ字と意味を1行目、値段と Book 1 day ahead を2行目に */
.course-en { flex-basis: 100%; font-family: var(--mincho); font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: .02em; }
.course-en small { margin-left: 4px; font-family: var(--gothic); font-weight: 400; font-size: 11.5px; color: var(--ink-3); }
/* 要予約の短冊（英語）：札の肩に小さく横書きで。意味は下の注記（前日の20時・日本時間）で説明する */
/* ごあいさつ・大切にしていること：英語は横書き */
html[lang="en"] .letter { writing-mode: horizontal-tb; margin-left: 0; max-width: 30em; font-size: 17px; line-height: 1.85; letter-spacing: .01em; }
html[lang="en"] .letter p { margin: 0 0 1em; }
html[lang="en"] .letter p.letter-sign { margin: 0; text-align: left; font-size: 15px; letter-spacing: .04em; }
html[lang="en"] .letter-sign small { display: inline; margin: 0 0 0 .6em; }
html[lang="en"] .values-v { writing-mode: horizontal-tb; margin: 40px 0 0; font-size: 19px; line-height: 1.9; letter-spacing: .01em; white-space: normal; }
html[lang="en"] :is(.room-h, .room-sub-h, .space-close) { letter-spacing: .02em; }
html[lang="en"] .space-src { letter-spacing: .06em; }
html[lang="en"] .room-k { letter-spacing: .1em; }
html[lang="en"] .space-lead { letter-spacing: .01em; }
html[lang="en"] .shero-title { font-size: clamp(25px, 7.2vw, 31px); letter-spacing: .02em; }
html[lang="en"] .shero-toc a { letter-spacing: .03em; }
html[lang="en"] .slip-k, html[lang="en"] .cancel th { letter-spacing: .02em; }
html[lang="en"] .foot-call-k { letter-spacing: .02em; }
html[lang="en"] .st-name { letter-spacing: .02em; }
html[lang="en"] .hero-web, html[lang="en"] .bar-web, html[lang="en"] .bar-call, html[lang="en"] .gnav-web, html[lang="en"] .foot-web { letter-spacing: .03em; }
html[lang="en"] .web-cta-n, html[lang="en"] .web-cta-k, html[lang="en"] .hero-web small, html[lang="en"] .st-line { letter-spacing: .02em; }
html[lang="en"] .st-name { letter-spacing: 0; }
html[lang="en"] .stations li { column-gap: 12px; }
html[lang="en"] .crumb { letter-spacing: .06em; }
@media (min-width: 1024px) {
  html[lang="en"] .line { font-size: clamp(26px, 2.35vw, 34px); line-height: 1.45; }
  html[lang="en"] .hero-line { font-size: clamp(36px, 3.4vw, 50px); letter-spacing: .02em; }
  html[lang="en"] .shero-title { font-size: clamp(36px, 3.3vw, 48px); white-space: normal; max-width: 15em; }
  html[lang="en"] .gnav-index { letter-spacing: .02em; }
  html[lang="en"] .values-v { margin: 8px 0 0; font-size: 21px; }
  html[lang="en"] .foot-call-k { font-size: 21px; }
  html:not([lang="ja"]) .slip-n { font-size: clamp(34px, 3.4vw, 46px); }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  html[lang="en"] .gnav-index { gap: 14px; }
}
/* 2026-10-22：日本語向けの広い字間が残っていた小さなラベル（英語の小文字は .05em を超えて空けない） */
html[lang="en"] .chip, html[lang="en"] .ph-empty span, html[lang="en"] .map-box, html[lang="en"] .call-open, html[lang="en"] .foot-call-s,
html[lang="en"] .insta-follow, html[lang="en"] .letter-k, html[lang="en"] .shero-lead, html[lang="en"] .st-walk,
html[lang="en"] .foot-updated, html[lang="en"] .meal-time small, html[lang="en"] .sub-h-s { letter-spacing: .02em; }
html[lang="en"] .chip { padding: 5px 8px; }
/* 短い見出しは行の長さをそろえる（最後に1語だけ落とさない） */
html[lang="en"] .sec-h, html[lang="en"] .cap-t, html[lang="en"] .foot-call-k, html[lang="en"] .qs summary { text-wrap: balance; }
/* よくあるご質問の答え：英語は1行65〜70字ほどに。1文ずつの改行はしない */
html[lang="en"] .faq-a { max-width: 32em; }
html[lang="en"] .faq-a .s { display: inline; }
/* 冒頭の開店予定（明るい格子に重なる幅）を読みやすく */
html[lang="en"] .hero-open { opacity: 1; }

/* ================================================================================
   中国語（简体・繁體）・韓国語のページ（/zh-hans/・/zh-hant/・/ko/）。2026-10-23 追加
   書体は言語ごとの Noto（明朝＝Serif、ゴシック＝Sans。build-site.mjs の LANGS で読み込む）。
   漢字・かなの組み方は日本語に近いのでそのまま使い、ごあいさつ・大切にしていることは英語と同じ横書きにする。
   韓国語は単語の間に空白があるので、単語の途中で改行しない（keep-all）・字間を詰める
   ================================================================================ */
html[lang="zh-Hans"] {
  --mincho: "Noto Serif SC", "Songti SC", "SimSun", serif;
  --gothic: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
}
html[lang="zh-Hant"] {
  --mincho: "Noto Serif TC", "Songti TC", "PMingLiU", serif;
  --gothic: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
}
html[lang="ko"] {
  --mincho: "Noto Serif KR", "AppleMyungjo", "Batang", serif;
  --gothic: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
html[lang="ko"] :is(p, li, dt, dd, th, td, summary, figcaption, h1, h2, h3, h4, span, a, small) { word-break: keep-all; overflow-wrap: break-word; }
/* ごあいさつ・大切にしていること：横書き（英語と同じ） */
html:is([lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .letter { writing-mode: horizontal-tb; margin-left: 0; max-width: 30em; font-size: 17px; line-height: 2; letter-spacing: .04em; }
html:is([lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .letter p { margin: 0 0 1em; }
html:is([lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .letter p.letter-sign { margin: 0; text-align: left; font-size: 15px; letter-spacing: .08em; }
html:is([lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .letter-sign small { display: inline; margin: 0 0 0 .6em; }
html:is([lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .values-v { writing-mode: horizontal-tb; margin: 40px 0 0; font-size: 19px; line-height: 2.1; letter-spacing: .06em; white-space: normal; }
/* スマホ・タブレット（中央に組む由来のページ）：横書きの「大切にしていること」も中央に。英語も同じ */
@media (max-width: 1023px) {
  html:not([lang="ja"]) .values-v { margin-left: auto; margin-right: auto; text-align: center; }
}
@media (min-width: 1024px) {
  html:is([lang="zh-Hans"], [lang="zh-Hant"], [lang="ko"]) .values-v { margin: 8px 0 0; font-size: 21px; }
}
/* 韓国語：見出し・大きな文の字間を詰め、半角のかっこの前の詰め（日本語の（用）を外す */
html[lang="ko"] :is(.sec-h, .line, .hero-line, .sub-h, .mini-h, .cap-t, .meal-h, .kifuda, .letter-k, .story-h, .next-k, .chef-name, .room-h, .room-sub-h, .space-lead, .space-close, .take-name, .foot-call-k, .shero-title, .shero-toc a, .drawer-index a, .gnav-index, .meaning-list li, .qs summary) { letter-spacing: .03em; }
html[lang="ko"] .sec-h-sub { margin-left: 0; letter-spacing: .02em; }
html[lang="ko"] .take-name small { display: inline; margin-left: 0; }
html[lang="ko"] .hero-line { line-height: 1.5; }
@media (max-width: 389px) { html[lang="ko"] .hero-web.is-soon { font-size: 13px; letter-spacing: 0; } html[lang="ko"] .hero-web.is-soon small { padding: 0 4px; letter-spacing: 0; } }
@media (max-width: 359px) { html[lang="ko"] .hero-web.is-soon { gap: 4px; font-size: 12px; } html[lang="ko"] .hero-web.is-soon small { font-size: 9.5px; } }

/* 動きを減らす設定：すべて止める（暖簾・ふわっと出る表示・季節の葉も） */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}