@charset "utf-8";
/* =========================================================================
   アバンダントリー。 — サイト固有スタイル
   写経元: https://dilly-dally.jp/（配色・角丸・リズム・キーフレームを移植）
   実測値の出所: _bench/source/measure.json（design-capture.mjs で採取）
     本文 15px / 行間 26.25px / 地色 #ede6d7 / 文字色 #2c4473 / h2 82px
   ── 事故防止の原則（CLAUDE.md「JS駆動アセット/アニメに本文可視を依存させない」）
     ・本文・FV・見出しは最初から可視。JS が死んでも読める
     ・ローダーは CSS だけで自走し、JS 側は冪等な「解除」しかしない
     ・カルーセルは CSS scroll-snap。JS 無しでも横スクロールできる
   ========================================================================= */

:root {
  /* 写経元トークン */
  --cream:  #ede6d7;   /* 地色 */
  --navy:   #2c4473;   /* 本文色・カテゴリ2 */
  --orange: #d04d18;   /* カテゴリ1（アクセント・ボタン・帯の点。写経元そのまま） */
  --orange-deep: #b03d0d; /* 文字が乗るブロック背景用。#d04d18＋クリームは 3.55:1 で AA 未達のため一段暗くする（実測 4.8:1） */
  --green:  #3c583f;   /* カテゴリ3 */
  --brown:  #504437;   /* カテゴリ4 */
  --apricot:#de9977;   /* 補助 */
  /* ブランド（ロゴ実測） */
  --bowl:   #238bc0;   /* ロゴの器マーク */
  --paper:  #fbf8f2;
  --radius-block: 40px;
  --radius-img: 30px;
  /* ── 文字のトークン（A/B案の差し替え点をここ1箇所に集約する） ──
     写経元 dilly-dally.jp の実測は 15px / line-height 26.25px / Noto Sans JP。
     design-capture --diff の「①本文の基準」が完全一致している唯一の定量的な強みなので、
     ここを動かすときは意図的な逸脱として記録する（docs/plans/2026-08-07-… §4 / R1）。 */
  /* A案採用（2026-08-07・ユーザー選択「細めゴシックの方でいこう」）。
     ⚠ 写経元 dilly-dally.jp の①本文の基準（15px / 26.25px / Noto Sans JP）から
        意図的に逸脱している。design-capture --diff は以後この差分を出し続けるが正常。 */
  /* ⚠ フォントは Google Fonts の CDN 参照のまま（自己ホストしない）。
     SEO_AIO_STANDARD.md:23,117 は自己ホストを要求しているので**意図的逸脱**として記録する。
     2026-08-07 に実測して判断した:
       ・全部自己ホスト … 486ファイル 5.3MB → site/ が 15MB（目標8MBの約2倍）
       ・使う塊だけに剪定 … 187ファイル 1.7MB → site/ 9.6MB。ただし剪定は
         「その時点の本文」から逆算するため、**Stem がクライアント側で後から差し込む
         お知らせ・コラムの漢字がフォールバックに落ちる**（ビルド時に知り得ない）
       ・CDN … 追加0MB。stem-cms の middleware/site-serve の CSP が
         fonts.googleapis.com / fonts.gstatic.com を許可しており配信で確実に動く
     preconnect ＋ display=swap は全ページに入れてある。
     容量と、CMS差込テキストのグリフ欠けを避けることを優先した。 */
  /* 全面ゴシック（明朝・セリフは使わない）。細さで表情を作る */
  --font-en:     "Outfit", "Helvetica Neue", Helvetica, sans-serif; /* 大見出しの英字 */
  --font-num:    "Outfit", "Helvetica Neue", Helvetica, sans-serif; /* 時刻・価格・ラベル */
  --font-ja: "Zen Kaku Gothic New", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
             "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  --font-head-ja: var(--font-ja);
  --fs-body: 15.5px;
  --lh-body: 1.95;
  --ls-body: .04em;
  --ls-head: .18em;                 /* 見出し和文の字間 */
  --fw-body: 300;
  --header-h: 72px;   /* 実測 71px。アンカーの逃げ幅とモバイルドロワーの上余白がこれに依存する */
}

/* ── ベース ───────────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
/* ヘッダーが position:fixed なので、アンカーで飛ぶと見出しが 17px 潜り込む（実測）。
   セクション側に逃げ幅を持たせる。 */
section[id] { scroll-margin-top: calc(var(--header-h) + 20px); }
body {
  margin: 0;
  background: var(--cream);
  color: var(--navy);
  font-family: var(--font-ja);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  font-weight: var(--fw-body);
  font-feature-settings: "palt";
  overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--orange); color: var(--cream); }

.l-wrap { width: min(1180px, 88vw); margin-inline: auto; }
/* 読み幅を詰めるためのカラム。中央寄せにすると PC で concept/area/faq だけ
   見出しが 123px 右へずれ、他セクション（左端 77px）と揃わなくなる。
   写経元 dilly-dally.jp は全セクション左端 80px で揃えているので左揃えにする。 */
.l-wrap--narrow { width: min(880px, 88vw); margin-inline: 0; }

/* 画面外に置くが読み上げには残す（スキップリンク等） */
.u-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-skip:focus {
  position: fixed; top: 8px; left: 8px; z-index: 200; width: auto; height: auto;
  clip: auto; padding: 10px 16px; background: var(--navy); color: var(--cream); border-radius: 999px;
}

/* ── 見出し（写経元は英字 82px / 700） ─────────────────── */
.c-heading { margin: 0 0 32px; }
.c-heading__en {
  display: block;
  font-family: var(--font-en);
  font-weight: 300;
  font-size: clamp(38px, 7.4vw, 82px);
  line-height: 1;
  letter-spacing: -0.01em;
}
/* お知らせの日付。以前は 5ファイルに style="font-family:Outfit…" を直書きしていたため
   フォントのトークン差し替えが効かなかった。クラスに寄せる。 */
.c-news__time { font-family: var(--font-num); font-size: 13px; opacity: .7; }

.c-heading__ja {
  display: block;
  margin-top: 14px;
  font-family: var(--font-head-ja);
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 500;                /* 明朝の700は用意が無く、あっても重すぎる */
  letter-spacing: var(--ls-head);
}
.c-lead {
  font-size: clamp(15px, 1.7vw, 18px);
  line-height: 2;                  /* 写経元 p: 18px / 36px */
  /* A案は本文300。リードだけ700のままだと細字の狙いと衝突して浮くため500に落とす */
  font-weight: 500;
}

/* ── 角丸ブロック（写経元の骨格） ───────────────────────── */
.c-block {
  border-radius: var(--radius-block);
  /* 全セクションが同じ余白だとリズムが出ず間延びする（DESIGN_RULES.md:72）。
     ⚠ 固定px の3段は使わない。390px では現行が上下計100px しかないので、
        130px 等を固定で当てるとモバイルでは余白が「増える」逆効果になる。
        clamp を維持したまま倍率で強弱をつける。 */
  --pad-scale: 1;
  padding: calc(clamp(48px, 7vw, 105px) * var(--pad-scale)) 0
           calc(clamp(52px, 7.5vw, 110px) * var(--pad-scale));
  margin-top: 24px;
}
/* 中身が詰まっている節は詰める。写経元の料理節は 1,217px（measure.json 実測）で、
   こちらは 2,200px 超だったため、料理以外を締めて全体のリズムを写経元へ寄せる。
   ⚠ ID セレクタ（#drink 等）で書くと**同じ id を持つ下層ページにも漏れる**。
     実際に menu.html の #drink だけ余白が62%になり、同ページ内で不揃いになっていた。
     ページをまたがないよう data 属性で明示する。 */
[data-pad="sm"] { --pad-scale: .62; }
[data-pad="md"] { --pad-scale: .78; }
/* ⚠ `c-block l-wrap` のセクション（concept/drink/space/area/access/faq/news/column の8つ）は
   ブロック自身が l-wrap なので、本文がブロックの角丸の縁にベタ付きしていた。
   全幅ブロック（morning/lunch/sweets）は中の .l-wrap が余白を作るので触らない。
   カード側は「内側の余白ぶん外側を広げる」ことで、本文の左端が全幅ブロックと厳密に揃う。 */
.c-block.l-wrap {
  --block-pad: clamp(14px, 4vw, 60px);
  padding-inline: var(--block-pad);
  width: calc(min(1180px, 88vw) + var(--block-pad) * 2);
}
@media (max-width: 767px) {
  .c-block { border-radius: 24px; margin-top: 10px; }
}
.c-block[data-color="cream"]  { background: var(--cream);  color: var(--navy); }
.c-block[data-color="orange"] { background: var(--orange-deep); color: var(--cream); }
.c-block[data-color="navy"]   { background: var(--navy);   color: var(--cream); }
.c-block[data-color="green"]  { background: var(--green);  color: var(--cream); }
.c-block[data-color="brown"]  { background: var(--brown);  color: var(--cream); }
.c-block[data-color="paper"]  { background: var(--paper);  color: var(--navy); }

/* ── 巨大英字のゴースト（背景の透かし） ──────────────────
   ⚠ これは写経元 dilly-dally.jp に存在しない装飾で、DESIGN_RULES.md:37 が
     「ベンチに無い装飾（…巨大透かし…）を勝手に追加 → 禁止」と名指ししている。
     ユーザー指示（2026-08-07「逆らっていい。逸脱として記録して進めろ」）による
     **意図的逸脱**として記録する。フォントA案と同じ扱い。

   実装上の地雷が2つあり、どちらも回避している:
   1. ::before で作ると aria-hidden を付けられず NVDA/VoiceOver が読み上げる。
      → 実要素にして aria-hidden・user-select:none・印刷非表示にする。
   2. はみ出しの囲いを `.c-block { overflow:hidden }` で作ると **sticky が無言で死ぬ**
      （ピンのステージが効かなくなるのに getComputedStyle は "sticky" を返し続ける）。
      → ゴースト専用の絶対配置ラッパーに overflow を閉じ込め、.c-block には付けない。 */
.c-block { position: relative; }
.c-ghost {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  pointer-events: none; user-select: none; -webkit-user-select: none; z-index: 0;
}
.c-ghost span {
  position: absolute; right: -.04em; bottom: -.26em;
  font-family: var(--font-en); font-weight: 300;
  font-size: clamp(96px, 19vw, 280px); line-height: .78;
  letter-spacing: -.02em; white-space: nowrap;
  /* 地色に currentColor を 7% だけ混ぜる。本文の可読性を落とさない濃さ */
  color: color-mix(in srgb, currentColor 7%, transparent);
}
/* 本文は必ずゴーストより前面に置く。
   ⚠ .c-illust を除外する。この指定は特異度 (0,2,0) で、
     @media 内の .c-illust { position:absolute } (0,1,0) に勝ってしまい、
     イラストが absolute にならず通常フローの左上に居座っていた（実測で発覚）。
     メディアクエリは特異度を上げない。 */
.c-block > *:not(.c-ghost):not(.c-illust) { position: relative; z-index: 1; }
@media print { .c-ghost { display: none; } }

/* ── ボタン（写経元 c-button／ぷるん= poyo） ─────────────── */
.c-button {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 34px; border-radius: 999px;
  font-family: var(--font-num); font-weight: 500; letter-spacing: 0.06em;
  border: 1.5px solid currentColor;
  transition: transform .3s cubic-bezier(.2,.8,.3,1), background-color .3s, color .3s;
}
.c-button:hover { animation: poyo .45s ease; }
.c-button[data-background="cream"] { background: var(--cream); color: var(--navy); border-color: var(--cream); }
.c-button[data-background="navy"]  { background: var(--navy);  color: var(--cream); border-color: var(--navy); }
.c-button[data-background="orange"]{ background: var(--orange);color: var(--cream); border-color: var(--orange); }
.c-button__arrow { width: 18px; height: 18px; flex: none; }

@keyframes poyo {
  0%   { transform: scale(1, 1); }
  30%  { transform: scale(1.06, .94); }
  60%  { transform: scale(.97, 1.03); }
  100% { transform: scale(1, 1); }
}

/* ── ヘッダー（写経元は fixed nav ＋ fixed button） ───────── */
.c-header {
  position: fixed; inset: 0 0 auto 0; z-index: 90;
  /* space-between で3要素を引き離すとロゴとナビの間が空きすぎて散らかる。
     ロゴだけ左に置き、ナビ＋CTA を右のひとかたまりにする。 */
  display: flex; align-items: center;
  gap: clamp(16px, 3vw, 40px); padding: 12px clamp(16px, 2.6vw, 36px);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--navy) 9%, transparent);
}
.c-header__logo { width: clamp(148px, 15vw, 190px); }
.c-header__nav {
  display: flex; align-items: center; gap: clamp(12px, 1.7vw, 26px);
  margin-left: auto;                 /* 右のかたまりへ寄せる */
}
/* 旧: Outfit 18px / 500。本文が 15.5px / 300 なのにナビだけ大きく太く、字間も0で野暮ったかった。
   和文フォントに戻し、細く小さく、字間を開けて上品にする。 */
.c-header__nav a {
  font-family: var(--font-ja);
  font-size: 13.5px; font-weight: 400; letter-spacing: .1em;
  position: relative; white-space: nowrap;
}
.c-header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; width: 0; height: 1px;
  background: currentColor; transition: width .35s ease;
}
.c-header__nav a:hover::after { width: 100%; }
/* 言語切替だけ役割が違うので、区切りを置いて少し引く */
.c-header__nav a[hreflang="en"] {
  font-family: var(--font-num); font-size: 12px; letter-spacing: .14em; opacity: .72;
  padding-left: clamp(12px, 1.7vw, 26px);
  border-left: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.c-header__nav a[hreflang="en"]:hover { opacity: 1; }
.c-header__right { display: flex; align-items: center; gap: 10px; }
/* 旧 CTA は c-button 既定の 16px/34px で、ヘッダーの中では塊が大きすぎた */
.c-header__cta {
  display: inline-flex; padding: 10px 22px; font-size: 12.5px;
  font-weight: 400; letter-spacing: .1em; border-width: 1px;
}
.c-header__burger {
  display: none; width: 46px; height: 46px; border: 0; border-radius: 50%;
  background: var(--navy); color: var(--cream); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0;
}
.c-header__burger span[aria-hidden] { display: block; width: 20px; height: 1.8px; background: currentColor; border-radius: 2px; }

@media (max-width: 900px) {
  .c-header { padding: 10px 16px; }
  .c-header__burger { display: flex; }
  .c-header__cta { padding: 11px 18px; font-size: 13px; }
  .c-header__nav {
    position: fixed; inset: 0 0 auto 0; z-index: -1;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: calc(var(--header-h) + 18px) 24px 28px;
    background: var(--cream);
    transform: translateY(-102%); visibility: hidden;
    transition: transform .45s cubic-bezier(.2,.8,.3,1), visibility .45s;
    box-shadow: 0 18px 40px rgba(44,68,115,.12);
    border-radius: 0 0 28px 28px;
  }
  .c-header__nav.is-open { transform: none; visibility: visible; z-index: 1; }
  .c-header__nav a { padding: 14px 0; border-bottom: 1px solid rgba(44,68,115,.14); font-size: 16px; }
  .c-header__nav a::after { display: none; }
}
@media (max-width: 380px) {
  .c-header__logo { width: 150px; }
  .c-header__cta { padding: 10px 14px; font-size: 12px; }
}

/* ── FV ───────────────────────────────────────────────── */
.p-hero {
  position: relative; min-height: 560px; height: 86svh; max-height: 860px;
  border-radius: var(--radius-block); overflow: hidden; margin: calc(var(--header-h) + 12px) 0 0;
}
@media (max-width: 767px) { .p-hero { border-radius: 24px; height: 78svh; } }
.p-hero__media { position: absolute; inset: 0; }
/* 4枚を CSS だけでクロスフェード（JS 非依存＝ローダー/JS が死んでも背景が出る） */
.p-hero__media img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  animation: heroFade 24s infinite;
  opacity: 0;
}
.p-hero__media img:nth-child(1) { animation-delay: 0s;  opacity: 1; }
.p-hero__media img:nth-child(2) { animation-delay: 6s; }
.p-hero__media img:nth-child(3) { animation-delay: 12s; }
.p-hero__media img:nth-child(4) { animation-delay: 18s; }
@keyframes heroFade {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  25%  { opacity: 1; }
  29%  { opacity: 0; }
  100% { opacity: 0; }
}
.p-hero__scrim {
  position: absolute; inset: 0;
  /* 文字は上下中央に置かれるのに、旧グラデは 40% 地点が最も薄く（α.18）、
     ちょうど文字帯が一番弱いところに乗って 2.04:1 まで落ちていた（実測）。
     縦グラデは写真の抜けを残しつつ、中央に楕円スクリムを重ねて文字帯だけを沈める。 */
  background:
    radial-gradient(ellipse 62% 46% at 50% 50%, rgba(52,44,36,.60) 0%, rgba(52,44,36,.34) 55%, rgba(52,44,36,0) 100%),
    linear-gradient(180deg, rgba(80,68,55,.44) 0%, rgba(80,68,55,.30) 40%, rgba(80,68,55,.54) 100%);
}
/* スマホは文字の段が縦に長く、楕円の外へロゴとチップがはみ出す。縦に広げて強める */
@media (max-width: 767px) {
  .p-hero__scrim {
    background:
      radial-gradient(ellipse 98% 60% at 50% 50%, rgba(52,44,36,.66) 0%, rgba(52,44,36,.44) 62%, rgba(52,44,36,.10) 100%),
      linear-gradient(180deg, rgba(80,68,55,.46) 0%, rgba(80,68,55,.36) 40%, rgba(80,68,55,.56) 100%);
  }
}
.p-hero__body {
  position: relative; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; text-align: center; color: #fff; padding: 40px 20px;
}
/* ロゴは白1色なので、写真の白い庇・サッシに溶ける（実測 最悪 1.44:1）。影で輪郭を立てる */
.p-hero__logo { width: min(560px, 78vw); filter: drop-shadow(0 2px 10px rgba(40,32,24,.55)); }
.p-hero__logo path, .p-hero__logo polygon { fill: #fff; }
.p-hero__copy { font-size: clamp(15px, 2.1vw, 21px); font-weight: 700; line-height: 1.9; text-shadow: 0 1px 12px rgba(80,68,55,.5); }
.p-hero__meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 18px;
  font-family: var(--font-num); font-size: clamp(12px, 1.4vw, 15px); letter-spacing: .06em;
}
.p-hero__meta span {
  padding: 6px 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px;
  /* 枠線だけだと明るい窓面で消える。ごく薄い地を敷いて文字を浮かせる */
  background: rgba(32,26,20,.62); backdrop-filter: blur(4px);
}

/* ── 流れる帯（写経元 slide-text） ───────────────────────── */
.c-marquee { overflow: hidden; padding: 22px 0; }
.c-marquee__inner { display: flex; width: max-content; animation: slide-text 32s linear infinite; }
.c-marquee__inner > * { flex: none; }
.c-marquee span {
  /* 700 は Outfit の読み込みウェイトに無く偽ボールドになる（フッター帯と同じ事故） */
  font-family: var(--font-en); font-size: clamp(30px, 5vw, 58px); font-weight: 300; letter-spacing: .02em;
  padding-right: 40px; display: inline-flex; align-items: center; gap: 40px;
}
.c-marquee span::after {
  content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--orange); flex: none;
}
@keyframes slide-text { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── カルーセル（CSS scroll-snap。JS 無しでも動く） ───────── */
.c-slider {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: min(340px, 74vw);
  gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 4px 0 22px; margin: 0 calc(50% - 50vw); padding-inline: max(6vw, calc(50vw - 590px));
  scrollbar-width: none;
}
.c-slider::-webkit-scrollbar { display: none; }
.c-slider > * { scroll-snap-align: center; }
/* ── 料理の並びのピン留め ────────────────────────────────
   スクロール中セクションを画面に固定し、料理写真が横に流れる演出。
   ⚠ JS を一切使わない（scroll-driven animations）。core CLAUDE.md §8 のとおり
     「JSが死ぬと本文が見えない」構造を作らないため。
   ⚠ 背の高い容器と sticky は **scroll-timeline が使えるときだけ** 適用する。
     無条件に height:300vh を敷くと、非対応ブラウザで「何も動かない空白を延々スクロール」
     という最悪の劣化になるため。非対応時は今までどおりの横スクロール（scroll-snap）で成立する。 */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    /* 進捗の基準は「この器がビューポートを覆っている間」。
       scroll(nearest block) ＋ contain レンジでは動かなかった（contain は view-timeline 用で、
       器がビューポートより高いと範囲が成立しないため）。器自身に view-timeline を張り、
       entry 100%（覆い始め）〜 exit 0%（覆い終わり）を進捗に使う。

       ⚠ 器の高さは発明しない。**進行距離 = 器高 − 100vh** という仕様なので、
         器を縮めると横流れが加速する（200vh→130vh で実測 4.3〜7.5倍速・判読不能）。
         横移動量（ランチはカード7枚で −1539px）を目標速度 1.5px/px で割って逆算する:
           1539 / 1.5 ≒ 1030px → 器高 = 100vh + 1030px
       ⚠ ステージ高 + top = 100vh に揃える。ずれるとその差が「ピン中に何も動かない
         死に時間」になる（旧設定では 600px 中 340px が死んでいた）。 */
    .c-pin { height: calc(100vh + 1030px); view-timeline: --pin block; }
    .c-pin__stage {
      position: sticky; top: var(--header-h);
      display: flex; align-items: center;
      min-height: calc(100vh - var(--header-h));
      overflow: hidden;
    }
    /* 密度を上げるのは「幅」ではなく「高さ」。横長のまま幅を広げると横移動量が増えて
       速度問題を悪化させる。縦長にすればカード高が上がり、幅・移動量・全高は不変。
       ⚠ .c-pin__stage 配下に限定する。素で書くと menu.html の53枚にも効いて崩れる。 */
    .c-pin__stage .c-card__img { aspect-ratio: 3 / 4; }
    .c-pin__stage .c-slider {
      overflow: visible; margin: 0; padding-inline: max(6vw, calc(50vw - 590px));
      animation: pin-slide linear both;
      animation-timeline: --pin;
      animation-range: entry 100% exit 0%;
    }
  }
}
@keyframes pin-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-100% + min(1180px, 88vw))); }
}

/* カード面。以前は .c-card にルールが1つも無く、画像の直下に文字がベタ付きだった。
   色地ブロック（オレンジ/濃紺/緑/茶）の上に紙の面を置くことで内側に余白が生まれ、
   料理写真も地色から浮いて見やすくなる。
   ⚠ 色地ブロックは color:var(--cream) を継承させるので、カード内は必ず navy に戻す
     （継承のままだとクリーム文字が紙地に乗って読めなくなる）。 */
.c-card {
  background: var(--paper);
  color: var(--navy);
  border-radius: var(--radius-img);
  padding: 12px 12px 20px;
  display: flex; flex-direction: column;
  transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s ease;
}
.c-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(40,32,24,.16); }
.c-card__img {
  border-radius: calc(var(--radius-img) - 12px); overflow: hidden; aspect-ratio: 4 / 3; background: rgba(0,0,0,.06);
}
.c-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.3,1); }
.c-card:hover .c-card__img img { transform: scale(1.05); }
.c-card__name { margin: 16px 6px 4px; font-size: 16px; font-weight: 500; line-height: 1.7; }
.c-card__note { margin: 0 6px; font-size: 13px; }   /* opacity で落とすと色地でコントラストが 2.85:1 まで落ちるので使わない */
@media (max-width: 767px) {
  .c-card { padding: 10px 10px 16px; border-radius: 22px; }
  .c-card__img { border-radius: 14px; }
}

/* ── 料理グリッド ─────────────────────────────────────── */
.c-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); }

/* ── FAQ（写経元と同じ 32px の＋アイコン） ────────────────── */
.c-faq details {
  border-top: 1px solid color-mix(in srgb, currentColor 26%, transparent);
  padding: 22px 0;
}
.c-faq details:last-of-type { border-bottom: 1px solid color-mix(in srgb, currentColor 26%, transparent); }
.c-faq summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  cursor: pointer; list-style: none; font-size: clamp(15px, 1.7vw, 17px); font-weight: 700;
}
.c-faq summary::-webkit-details-marker { display: none; }
.c-faq__q { font: inherit; margin: 0; }   /* 質問は h3（AIの引用先）。見た目は summary のまま */
.c-faq__plus { flex: none; width: 32px; height: 32px; transition: transform .3s ease; }
.c-faq details[open] .c-faq__plus { transform: rotate(45deg); }
.c-faq__a { margin: 14px 0 0; padding-right: 52px; line-height: 2; }

/* ── アクセス・NAP ───────────────────────────────────── */
.c-nap { display: grid; gap: 10px; font-size: 15px; line-height: 1.9; }
.c-nap dt { font-family: var(--font-num); font-size: 12px; letter-spacing: .14em; opacity: .78; }
.c-nap dd { margin: 0 0 12px; font-weight: 700; }

/* ── 地域KWチップ ───────────────────────────────────── */
.c-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.c-chips li {
  padding: 8px 18px; border-radius: 999px; font-size: 13px; font-weight: 700;
  border: 1px solid color-mix(in srgb, currentColor 34%, transparent);
}

/* ── フッター（写経元 footer-anime） ─────────────────────── */
/* ⚠ フッターも .c-block と同じ「内側余白ゼロ」だった（実測: 内側余白 0px）。
   .c-footer 自身が l-wrap で、中の .l-wrap が同じ幅になるため、
   濃紺の角丸の縁に本文がベタ付きしていた。ブロックと同じ手当てをする。 */
.c-footer {
  --block-pad: clamp(14px, 4vw, 60px);
  margin-top: 24px; border-radius: var(--radius-block);
  background: var(--navy); color: var(--cream);
  padding: clamp(48px, 6vw, 88px) var(--block-pad) 32px;
  width: calc(min(1180px, 88vw) + var(--block-pad) * 2);
}
.c-footer__band { overflow: hidden; padding-bottom: 26px; }
/* ⚠ font-weight:700 は Outfit の読み込みウェイト（200/300/400/500）に無く、
   ブラウザが偽ボールドを合成して 132px で潰れていた。
   細めゴシックの方針にも合わないので 300 にする。 */
.c-footer__band span { font-family: var(--font-en); font-size: clamp(44px, 11vw, 132px); font-weight: 300; letter-spacing: .02em; line-height: 1; opacity: .22; white-space: nowrap; display: block; animation: footer-anime 26s linear infinite; width: max-content; }
@keyframes footer-anime { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── リビール（初期状態は可視のまま。動かすのは transform だけ） ── */
.js-inview { transform: translateY(18px); transition: transform .9s cubic-bezier(.2,.8,.3,1); }
.js-inview.is-inview { transform: none; }

/* ── ローダー（CSS だけで自走。JS は解除しかしない） ───────── */
.l-loading {
  position: fixed; inset: 0; z-index: 120; display: grid; place-items: center;
  background: var(--cream);
  animation: loaderOut .6s ease 2.4s forwards;   /* JS が死んでも CSS だけで必ず退場する */
}
.l-loading__cup { width: 132px; }
.l-loading__steam path {
  stroke: var(--orange); stroke-width: 3; fill: none; stroke-linecap: round;
  stroke-dasharray: 46; stroke-dashoffset: 46;
  animation: steam 2.1s ease-in-out infinite;
}
.l-loading__steam path:nth-child(2) { animation-delay: .35s; }
.l-loading__steam path:nth-child(3) { animation-delay: .7s; }
.l-loading__label { margin-top: 18px; font-family: var(--font-en); letter-spacing: .3em; font-size: 12px; }
@keyframes steam {
  0%   { stroke-dashoffset: 46; opacity: 0; }
  35%  { opacity: 1; }
  100% { stroke-dashoffset: -46; opacity: 0; }
}
@keyframes loaderOut { to { opacity: 0; visibility: hidden; } }
.l-loading.is-done { opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility .5s; }

/* ── 動きを減らす設定 ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .c-marquee__inner, .c-footer__band span, .p-hero__media img,
  .l-loading__steam path { animation: none !important; }
  .p-hero__media img { opacity: 0; }
  .p-hero__media img:first-child { opacity: 1; }
  .js-inview { transform: none; transition: none; }
  .l-loading { animation: none; opacity: 0; visibility: hidden; }
  .c-button:hover { animation: none; }
}

/* ── CMS 差込枠の高さ予約（差込でスクロールがガタつくのを防ぐ） ── */
/* ⚠ 0 にはできない（Stem はクライアント側で差し込むので、予約が無いと CLS が出る）。
   ただし 320px は実寸より過大で、TOP では news と column の2枚で 640px が空白のまま
   確保されていた（実測）。実寸（コラムカード ≈369px / お知らせ1行 ≈90px）に合わせる。 */
[data-stem-topics] [data-stem-topic-list] { min-height: 180px; }
[data-stem-columns] [data-stem-column-list] { min-height: 240px; }

/* フッターの運営・情報発信表記（E-E-A-T の可視側。JSON-LD の Person/Organization と対） */
.c-footer__meta {
  margin-top: 40px; text-align: center;
  font-family: var(--font-num); font-size: 12px; letter-spacing: .1em;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px;
}

/* ── 数字で語るファクト帯 ─────────────────────────────────
   裏取り済みの事実だけを置く（content/data.mjs と出典は docs/plans/2026-08-07-… §3）。
   ⚠ 営業開始時刻（8:00）は入れない。公式サイトが 7:30 と表記していて未解決（R2 OPEN）で、
     かつ営業時間は配信時に Stem が GBP からサーバ側で上書きするため、
     巨大な数字だけ取り残されて可視の自己矛盾になる。 */
.c-facts {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; gap: 18px 34px;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}
.c-facts li { display: flex; flex-direction: column; gap: 2px; }
.c-facts b {
  font-family: var(--font-num); font-weight: 300;
  font-size: clamp(38px, 5.2vw, 62px); line-height: 1;
  letter-spacing: -.02em;
}
.c-facts span { font-size: 12.5px; letter-spacing: .08em; opacity: .82; }
@media (max-width: 767px) {
  .c-facts { gap: 16px 20px; grid-template-columns: repeat(auto-fit, minmax(min(96px, 45%), 1fr)); }
}

/* ── セクションの装飾イラスト ────────────────────────────
   ⚠ 写経元に無い装飾。DESIGN_RULES.md:37 からの意図的逸脱（ユーザー指示・2026-08-07）。
   本文の意味を増やさない純装飾なので alt="" ＋ aria-hidden。
   右側のデッドスペース（l-wrap--narrow が 880px のため PC で 246〜300px 空く）に置く。
   その余白が消える 1200px 未満では非表示にする。 */
.c-illust { display: none; }
@media (min-width: 1280px) {
  .c-illust {
    display: block; position: absolute; z-index: 0;
    /* ゴーストは右下に敷いてあるので、イラストは右上に置いて装飾同士の衝突を避ける */
    right: clamp(20px, 3vw, 56px); top: clamp(90px, 9vw, 140px);
    width: clamp(180px, 17vw, 260px); height: auto;
    opacity: .5; pointer-events: none;
  }
}
@media print { .c-illust { display: none; } }

/* ── タップ領域の確保（WCAG 2.2 SC 2.5.8 = 24x24 / 推奨44px） ──
   本文中のインラインリンクは高さが行の高さ止まり（実測 19〜22px）で指で押しにくい。
   padding で当たり判定を広げ、同量の負マージンで行送りへの影響を打ち消す
   （見た目は変えずヒット領域だけ広げる）。 */
.c-nap dd a,
[data-stem-citation-list] a,
.c-footer a[href^="tel:"],
.c-footer nav a {
  display: inline-block;
  padding-block: 8px;
  margin-block: -8px;
}

/* ── 記事本文の組版（色・書体・太さは指定しない＝各サイトの意匠のまま） ──
   before: 段落の間隔が無い／h2 と h3 と本文が同じ大きさ／箇条書きの中黒が消えている、という状態だった。
   見出しの実寸はこのサイト自身の見出しスケールから取っている（トンマナを揃えるため）。
   p / li は :not([class]) で絞る。絞らないと日付などのテンプレ側 p（.note 等）まで本文サイズになる。 */
.prose{max-width:40em;margin-inline:auto}
.prose{font-size:16px;line-height:2}
/* 生成本文に裸URLが1本でも入ると横スクロールが出る（実測: 320px で 320→402px） */
.prose{overflow-wrap:anywhere}
.prose p:not([class]),.prose li:not([class]){font-size:1em;line-height:inherit}
.prose p:not([class]){margin:0 0 1.6em}
.prose ul,.prose ol{margin:0 0 1.6em;padding-left:1.4em;list-style:disc}
.prose ol{list-style:decimal}
.prose ul ul{list-style:circle}
.prose ol ol{list-style:lower-alpha}
.prose li+li{margin-top:.5em}
.prose h1{font-size:1.75em;line-height:1.35;margin:0 0 .7em}
.prose h2{font-size:1.375em;line-height:1.5;margin:2.4em 0 .7em}
.prose h3{font-size:1.125em;line-height:1.7;margin:2em 0 .6em}
.prose h4{font-size:1.05em;margin:1.8em 0 .5em}
.prose img{max-width:100%;height:auto;margin:1.8em 0}
/* SPで横に溢れないための保険 */
.prose table{display:block;overflow-x:auto;max-width:100%}
.prose pre{overflow-x:auto;max-width:100%}
.prose > p:last-child,.prose > ul:last-child,.prose > ol:last-child{margin-bottom:0}
@media (max-width:699px){.prose{font-size:15.5px;line-height:1.95}}

/* コラム一覧のカード。Stem の一覧APIは画像を返さない（category/created_at/description/id/
   keywords/locale/published/site_id/slug/title のみ）ので、画像枠は持たずテキストで組む。
   カード全体をリンクにするため a.c-card になる（.c-card:hover の浮上をそのまま活かす）。 */
a.c-card { text-decoration: none; }
.c-card__date { margin: 4px 6px 0; font-size: 11.5px; letter-spacing: .12em; opacity: .75; }
.c-card__more { margin: 14px 6px 0; font-size: 12.5px; letter-spacing: .08em;
  text-decoration: underline; text-underline-offset: .3em; }

/* 一覧が埋まったら「コラムはこちらに掲載します。」を消す。
   Stem は [data-stem-column-list] だけを差し替え、兄弟の [data-stem-empty] は残すため。 */
[data-stem-columns]:has([data-stem-column-list] > *) [data-stem-empty],
[data-stem-topics]:has([data-stem-topic-list] > *) [data-stem-empty],
[data-stem-columns]:has([data-stem-column-detail-mount]:not([hidden]) > *) [data-stem-empty] { display: none; }