/* =========================================================
   美食島観光ガイド - 尼山原島 (Amayamahara-jima)
   共通スタイルシート
   ========================================================= */

/* 書体は Google Fonts の Noto Serif JP(明朝)と Noto Sans JP(ゴシック)(2026-10-09 オーナー採用。はじめは禅オールド明朝と禅角ゴシック New)。
   @import はファイルの先頭に置かないと効かない。ネットにつながらないとき(file:// をオフラインで開くなど)は
   下の --font-serif-yu / --font-sans-yu(游明朝・游ゴシック)で表示される。太さを足すときは wght にも足す */
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;500;600;700&family=Noto+Sans+JP:wght@400;500;600;700&display=swap");

/* 全角の＊(U+FF0A)だけは、端末の游明朝(Mac はヒラギノ明朝)から借りる。Noto Serif JP の＊は大きく太いので、
   サイトがはじめ使っていた游明朝の小さな＊にする(2026-10-20 オーナー指示)。出てくるのは予約確認のメッセージ・結末の手紙・
   Terre et Mer の口コミの「＊サイトオーナーからのメッセージ＊」。unicode-range でこの1文字だけに効き、--font-serif の先頭に置く。
   どちらの書体もない端末では、この指定は無視されて Noto の＊のまま出る(崩れはしない) */
@font-face {
  font-family: "Yu Mincho Asterisk";
  src: local("Yu Mincho Regular"), local("YuMincho-Regular"), local("Yu Mincho"), local("YuMincho"), local("游明朝"),
    local("Hiragino Mincho ProN W3"), local("HiraMinProN-W3"), local("Hiragino Mincho ProN");
  unicode-range: U+FF0A;
}

:root {
  /* ── 地と文字。生成りの紙と焦げ茶の墨(2026-09-29 オーナー採用。Artifact「トップページ 刷新案_20260927」B案の茶色) ──
     RESTAURANT YAMANO(theme-night)・結末直前(theme-muted)・結末(.final)は自前の色を持つので、ここを変えても変わらない */
  --color-bg: #f4f0e7;        /* 紙。全ページ共通の地 */
  --color-bg-deep: #eae4d9;   /* 一段沈めた地(行のホバー・表の見出し) */
  --color-surface: #fcfaf6;   /* 面。ヘッダー・白い板・表・入力欄 */
  --color-ink: #1f1915;
  --color-ink-bold: #3d3530;  /* 本文の中の太字(フーディー賞の受賞者の名前と協賛の店名)。Windows では細字の線が地と混ざって薄く出るので、
                                 墨のままだと太字だけ黒く見える。細字の線が画面で見える濃さ(design-work\foodie-bold\pixels.js で測った)にそろえた */
  --color-ink-soft: #5f5a55;
  --color-ink-faint: #736c64; /* ラベル・日付・注記。生成りの地で 4.55:1、白い板で 4.95:1(2026-10-05 オーナー指示で 4.5 以上に。はじめは #8c857d で 3.2:1) */
  --color-line: #e2dbd0;      /* 1px罫 */

  /* ── 帯。トップページの節ごとに地を切り替え、のっぺり続かないようにする ── */
  --color-band: #eae4d9;      /* 帯(.section--sea)。今はトップで使っていない */
  --color-footer: #e2dbd1;    /* 帯より一段濃い生成り。フッター */

  /* ── 変数でなく直に書いていた地・墨寄りの色。特別な画面(下の theme-night / theme-muted)では前の値に戻す ── */
  --rgb-shade: 31, 25, 21;    /* 影・暗幕・写真の上の膜(焦げ茶) */
  --rgb-shade-2: 31, 25, 21;
  --rgb-shade-3: 31, 25, 21;
  --color-dot: #c5bdb2;       /* お品書きの点線 */
  --color-track: #e5dfd4;     /* 口コミの棒グラフの地 */
  --color-disabled: #d3cbbf;  /* 押せないボタンの地 */
  --color-disabled-ink: #8c857d;
  --color-disabled-ink-2: #aca49a;

  /* ── ヘッダーと検索窓は B案の色(2026-09-29 オーナー指示)。地はページと同じ生成り。
     今いるページと検索ボタンは、島の地図の番号と同じ緑(--color-teal)。藍だったのを 2026-09-29 オーナー指示で緑にした。
     メニューの文字は本文と同じ墨、店名はカーソルを当てても色を変えない(どちらも 2026-09-29 オーナー指示)。
     RESTAURANT YAMANO(theme-night)・結末直前(theme-muted)では下で前の色に戻す ── */
  --color-header-bg: var(--color-bg);
  --color-header-link: var(--color-ink);        /* ナビの今いるページ以外の文字 */
  --color-header-current: var(--color-teal); /* ナビの今いるページ(文字と下の罫) */
  --color-header-hover: var(--color-teal);
  --color-signout: var(--color-ink-soft);
  --color-signout-line: rgba(var(--rgb-shade), 0.35);
  --color-signout-hover: var(--color-teal);
  --color-drawer-mark: var(--color-teal);  /* スマホのメニューで今いるページの印 */
  --color-search-field: var(--color-surface);
  --color-search-line: rgba(var(--rgb-shade), 0.16);
  --color-search-button: var(--color-teal);
  --color-search-button-deep: var(--color-teal-deep);
  --color-search-button-ink: #fbf9f5;

  /* ── 意味を持つ色は三つだけ。一色につき用途はひとつ ──── */
  --color-teal: #24544a;      /* 押せる・進める */
  --color-focus-halo: rgba(36, 84, 74, 0.16);  /* キーボードで来た欄の周りの薄いにじみ(--color-teal を 16%)。配色ごとに同じ名前で定義する */
  --color-teal-deep: #16332e; /*   〃 の hover / active */
  --color-teal-tint: #e6efeb; /*   〃 を薄めた地。分類の札 */
  --color-accent: #a87a22;    /* 評点・星・スマホのメニューで今いるページの印 */
  --color-accent-deep: #8a6118;
  --color-star: var(--color-accent-deep);  /* 星(★)の文字。評点の金のままでは 3.4:1 なので、一段濃い金で 4.85〜5.3:1(2026-10-05 オーナー指示) */
  --color-danger: #97403a;    /* 注意。満席には使わない(満席は異常ではない) */
  --color-danger-tint: #f8eeec; /*  〃 を薄めた地。カーソルを当てた行、閉店済みの札 */
  --color-danger-vivid: #b72024; /* 初回のお知らせ画面の日付だけの鮮やかな赤(--color-danger と #d7000f の中間)。白い板(--color-surface)で 6.2:1 */
  --color-rule-ok: var(--color-teal);  /* 予約の表の十字の線(見出しの下の横線と「時間」の列の縦線)。「空席を確認する」のボタンと同じ緑
                                 (2026-10-07 オーナー指示。はじめは墨、次に墨より明るい緑 #3f8a6b だった。PC・スマホとも) */

  /* ── 暫定解20261004(PC)の縞と罫。あたみニュースを参考にした組み(ファイルの終わり)で使う ── */
  --color-stripe-sea: #cfe3e7;  /* 斜めの縞その1。島の海の色 */
  --color-stripe-sand: #ecdcb4; /* 斜めの縞その2。浜の砂の色 */
  --color-stripe-leaf: #d7e3ce; /* 斜めの縞その3。若草の色(メッセージの縞と、掲載店舗一覧の2・4・6軒めの面)。
                                   はじめの #d5ecc2 から鮮やかさを半分に落とし(3割落としたあと、もう一段落とした)、
                                   明るさを海の色と同じにした(OKLCH の明るさ 0.916 → 0.902。一度 0.885 まで暗くし、黒みを少し戻した)。
                                   色みは同じ(2026-10-05 オーナー指示) */
  --color-stripe-alert: rgba(138, 3, 3, 0.8);  /* 斜めの縞その4。血を思わせる黒い赤(2026-10-09 オーナー指示。はじめは真っ赤 #ff0000、次に黒すぎた #8a0303。黒い赤 #8a0303 を 8 割の濃さで重ね、生成りの地を少し透かして薄く見せる(一度 6 割にした)。間に #a30808・#b52121 も試した)。検索で、検索でしか開けないページ(archive/)に当たったときの検索結果の帯(2026-10-09 オーナー指示) */
  --color-rule-soft: #d6cec2;   /* 行の区切り・店名の下の線 */
  --color-ink-label: #6a635b;   /* 小さな灰色の字(日付・営業時間など)。生成りの上で 5.2:1 */
  --color-frame-line: #b9ad9e;  /* 細い二重の線の枠の外側の線(メッセージの案内) */
  --color-map-sea: #a7ced8;     /* 島の地図の海の色(地図の絵の四隅を拾った値。design-work\terre-fear\sample-sea2.js)。店舗ページのアクセスの帯で、地図のまわりを同じ色で広げる。地図の絵を差し替えたら拾い直す */
  --stripe-w: 8px;              /* 縞1本の太さ。すき間も同じ幅(はじめは 12px。2026-10-04 オーナー指示で全部 8px に) */

  /* 日本語表示を優先させるフォント指定。Windows環境によっては「Yu Gothic」等の
     英語名で認識されず、中華フォントにフォールバックしてしまうことがあるため、
     游ゴシック/メイリオなど日本語名での指定も並べて当たりやすくしている。
     明朝＝意味のある文(見出し・本文・店名)、ゴシック＝数値とラベルとUI。 */
  --font-serif-yu: "Yu Mincho", "游明朝", YuMincho, "Hiragino Mincho ProN", "Noto Serif JP", serif;
  --font-sans-yu: "Yu Gothic Medium", "游ゴシック Medium", "Yu Gothic", "游ゴシック", YuGothic,
    Meiryo, "メイリオ", "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  --font-serif: "Yu Mincho Asterisk", "Noto Serif JP", var(--font-serif-yu);  /* 先頭は＊だけの書体(上の @font-face) */
  --font-sans: "Noto Sans JP", var(--font-sans-yu);

  /* ── 文字の大きさは 1.2 の等比。この七段以外を使わない ──
     1.25 だと段差が急で、一覧の見出しが読み物ではなく看板の大きさになる。 */
  --fs-1: 0.8125rem;  /* 13px ラベル・日付 */
  --fs-2: 0.9375rem;  /* 15px 本文 */
  --fs-3: 1.125rem;   /* 18px 記事タイトル・小見出し */
  --fs-4: 1.3125rem;  /* 21px 店名(一覧) */
  --fs-5: 1.5625rem;  /* 25px 章見出し */
  --fs-6: 1.875rem;   /* 30px ページ見出し */
  --fs-7: 2.25rem;    /* 36px 店名(詳細)・評点 */

  /* 和文の行長。これを超えると目が行頭に戻れなくなる */
  --measure: 40em;

  /* sticky なヘッダーの高さ。ここに書いてあるのはJSが動くまでの初期値で、
     実際の値は main.js が描画後に実測して上書きする(画面幅や検索窓の回り込みで
     変わるため)。この変数を参照しておけば、ヒーローの高さ・タブの貼り付き位置・
     アンカーの着地位置がまとめて追従する。 */
  --header-height: 124px;

  /* 角は丸めない。白い板・ボタン・入力欄・札のどれも角ばった形にそろえる
     (刷新時に一度丸めたが、角ばっている方がよいというオーナーの判断で戻した)。
     板とボタンで丸みを変えたくなったときに備えて、値は二段に分けて持っておく。 */
  --radius: 0;
  --radius-sm: 0;
  /* 中身の最大幅は、左右の余白(--gutter)を含めた値。1440px の画面で余白が約115px(8vw)になる */
  --max-width: 1440px;
  /* PC で画面の端まで伸ばす線と、波のついていない縞・帯は、1600px で切り、それより広い画面(4K など)では外に地の色を見せる
     (2026-10-05 オーナー指示。4K で横いっぱいに広がって間延びしていた。はじめは 1920px で切り、同日 1600px にした)。1600px 以下の見た目は変わらない。
     切るのは、トップと店舗ページの節の見出しの線・トップの丸い写真の後ろの縞(店舗ページの地図の海の色は、端まで広げるのをやめて板と同じ幅にした)。
     波のついた縞と帯(ヘッダーのすぐ下・トップの「一覧へ」・店舗ページの写真の下とご予約状況)・トップの表紙・店舗ページの上の写真・
     ヘッダー・フッターは、今までどおり端まで(波のついたものと写真は一度切ったが、同日オーナー指示で端までに戻した) */
  --bleed-max: 1600px;
  --gutter: 24px;

  /* 影は「本当に浮いているもの」だけに使う。並列の部品には使わない。 */
  --shadow-sm: none;
  --shadow-md: 0 8px 28px rgba(var(--rgb-shade-3), 0.14);
  --shadow-lg: 0 18px 48px rgba(var(--rgb-shade-3), 0.20);

  --transition-base: 0.14s ease-out;

  /* ── 表紙の写真 ───────────────────────────────────────
     素材は暫定。差し替えるときに直すのはこの2つだけでよい。
     --hero-focus は「写真のどの高さを画面に合わせるか」。被写体が
     上寄りの写真なら小さく、下寄りなら大きくする。 */
  --hero-image: url("../images/used/landscape.webp");
  --hero-focus: center 62%;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* iPhone がリンクを押した瞬間に重ねる半透明の灰色を消す。押した行は地が淡い赤になるので、
     その上でタイトル部分だけが濃い赤にパッと光って見えていた(2026-09-26 オーナー指示) */
  -webkit-tap-highlight-color: transparent;
  /* スクロールバーの幅を常に確保しておく。中身が短いページ(メッセージなど)で
     スクロールバーが消えると、その幅だけ中央寄せの中身が右にずれてしまうため。
     写真の拡大表示中に overflow:hidden にしたときのずれも、これで防げる。 */
  scrollbar-gutter: stable;
  /* スマホのブラウザが本文を勝手に拡大するのを止める(Android の Chrome は
     幅の広いまとまりを要素ごとに別々の倍率で膨らませるので、意図した
     大きさで出なくなり、改行の位置も揃わない)。パソコンでは何も起きない。 */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* 中身が短いページ(メッセージ・検索結果など)でも、フッターを画面の下まで下ろす。
   こうしないとフッターの下に地の色の余白が残り、ページごとに見え方が変わってしまう。 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh; /* スマホのアドレスバー分を差し引いた実際の高さ */
}
body > main { flex: 1 0 auto; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--fs-2);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

/* 和文の本文は行長を抑える。容器の幅いっぱいには流さない。 */
p { max-width: var(--measure); }
/* 中央寄せの場所と、すでに幅が絞られている容器の中では効かせない */
.site-footer p,
.visitor-gate p,
.reservation-modal p,
.card p,
.notice p { max-width: none; }

/* sticky化したヘッダーの下にアンカー先が隠れないよう、着地位置に余白を確保 */
[id] {
  scroll-margin-top: var(--header-height);
}

a {
  color: var(--color-teal);
  text-decoration: none;
  transition: color var(--transition-base), border-color var(--transition-base);
}
a:hover { color: var(--color-teal-deep); }

/* キーボードで辿っている人に、いまどこに居るかを見せる。
   マウス操作では出さない(:focus-visible)。 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

img { max-width: 100%; display: block; }

.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
/* 左右の余白は画面幅で三段（24 / 48px / 画面幅の8%・最小96px）。
   読みやすさのため、PC では中身を画面の端から大きく離す（2026-09-22 オーナー指示で拡大）。
   740〜1023px も PC と同じ 48px(2026-10-04 にスマホと PC の2つに分けると決め、タブレットだけの 16px をやめた)。
   「〜以下」の @media は 480.98 / 739.98 / 1023.98 / 1199.98px と書く。Windows の表示倍率 125% などでは画面の幅が 1199.2px のような
   小数になり、1199px と 1200px で区切ると間の幅でどちらの指定も当たらなくなる(2026-10-05。1199px あたりで写真がぐっと大きくなっていた)。
   スマホと PC の境ははじめ 759/760px。2026-10-05 オーナー指示で 749/750px、続けて iPad mini(縦 744px)も PC の見た目にするため 739/740px にした(CSS・JS とも)。
   1024〜1199px は 48px から 96px へ幅に合わせて少しずつ広げる(2026-10-05 オーナー指示。1200px で一気に倍になり、
   中身ががたっと寄っていた)。結末の手紙の画面は変えない決まりで、手紙の幅がこの余白に連動しているので、今までどおり段で切り替える */
@media (min-width: 740px) { :root { --gutter: 48px; } }
@media (min-width: 1024px) and (max-width: 1199.98px) { :root:not(.is-final) { --gutter: calc(48px + (100vw - 1024px) * 48 / 176); } }
/* 画面幅の 8% は 1440px のときの値(115.2px)で止める。中身の箱(--max-width)は 1440px で止まるので、余白だけ伸び続けると
   1440px より広い画面ほど中身が細くなっていた(2026-10-05 オーナー指摘。掲載店舗一覧の店の板が 1800px で 1152px、1440px で 1210px)。
   結末の手紙の画面は変えない決まりなので、今までどおり 8% のまま */
@media (min-width: 1200px) {
  :root { --gutter: max(96px, min(8vw, 115.2px)); }
  :root.is-final { --gutter: max(96px, 8vw); }
}

/* ── スマホの文字まわり（740px 未満だけ。パソコンには掛からない） ──
   文字の大きさ(--fs-1〜7)はパソコンと同じものを使う。本文の明朝は、iPhone では
   游明朝が無くヒラギノ明朝に置き換わり、同じ px でも字面が大きく出るので、
   ここで px を上げると文字だけが浮いて見える（2026-09-25 に一度 16px へ上げて
   オーナーから「絶対に大きい」と指摘を受け、戻した）。
   稼ぐのは大きさではなく本文の列幅のほう。左右の余白の二重取りをやめて、
   1行に入る文字数を増やす。 */
@media (max-width: 739.98px) {
  :root {
    /* 白い板(.notice など)が内側にもう一段余白を持つので、外側は16pxで足りる */
    --gutter: 16px;
  }
  /* 和文の行間。1.8 は画面が狭いと間延びして見える */
  body { line-height: 1.75; }
}
/* 要素ごとの上書きは、元の指定より後ろに置かないと効かないので
   このファイルのいちばん下(「スマホの文字まわり(続き)」)にまとめてある */

/* ---------- Header / Nav ---------- */

/* ヘッダーの左右余白は本文(--gutter)と切り離して持つ。スマホでは 12px。
   481〜739px と 740〜1023px では本文の列にそろえる(ファイル末尾「スマホとパソコンの間の幅」) */
.site-header__inner {
  padding-left: 12px;
  padding-right: 12px;
}

/* 地はページと同じ生成り(--color-header-bg)。本文とは1pxの罫で切り分ける */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-header-bg);
  border-bottom: 1px solid var(--color-line);
  padding: 12px 0 14px;
}
/* 罫が境目を担うので、スクロールしても影は足さない */
.site-header.is-scrolled { box-shadow: none; }

/* 「○○さん、ようこそ」とログアウト。右側の列の一段目に置き、
   ナビや検索窓と同じ右端にそろえる。 */
.site-header__account {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 14px;
  margin: 0;
  padding: 0;
  /* ヘッダーの中で書体を混ぜないよう、ナビや検索窓と同じ明朝にそろえる */
  font-family: var(--font-serif);
  font-size: var(--fs-1);
  color: var(--color-ink-soft);
}

.site-header__welcome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.site-header__signout {
  position: relative;
  flex-shrink: 0;
  padding: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-1);
  color: var(--color-signout);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-signout-line);
  cursor: pointer;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.site-header__signout:hover {
  color: var(--color-signout-hover);
  border-bottom-color: var(--color-signout-hover);
}

.site-header__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-title {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: var(--font-serif);
  font-size: 1.75rem; /* 28px。章見出し(--fs-5)より一段大きく */
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
  white-space: nowrap;
}
/* 全体の a:hover(濃い緑)より強い指定にして、店名の色をカーソルで変えない。
   ふだんと同じ --color-ink なので、RESTAURANT YAMANO・結末直前でもそれぞれの画面の店名の色のまま変わらない(2026-09-30 オーナー指示) */
.site-title:hover { color: var(--color-ink); }
.site-title small {
  font-family: var(--font-sans);
  font-size: 0.875rem; /* 14px */
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--color-ink-faint);
}

@media (max-width: 480.98px) {
  /* スマホではタイトルとメニューボタンが横幅に収まらないため、少し縮めて
     「尼山原島」は必要に応じて次の行に折り返させる */
  .site-title {
    font-size: 1.4375rem; /* 23px */
    flex-wrap: wrap;
    gap: 0 10px;
  }
}
/* スマホでは「尼山原島」の字間を空けない(PC は 0.14em のまま。2026-10-05 オーナー指示) */
@media (max-width: 739.98px) {
  .site-title small { letter-spacing: 0; }
}

/* メニューボタン。面を持たず輪郭だけ。44pxはタップ領域の下限 */
.menu-toggle {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition-base);
}
.menu-toggle:hover { background: var(--color-ink); }
.menu-toggle:hover .bars span { background: var(--color-bg); }
.menu-toggle:active { background: var(--color-ink); transform: translateY(1px); }
.menu-toggle .bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.menu-toggle .bars span {
  width: 18px;
  height: 1.5px;
  background: var(--color-ink);
  display: block;
  transition: background var(--transition-base);
}

.site-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
}

.site-nav ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid var(--color-line);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 現在地は太字と下の罫で示す(色は --color-header-current) */
.site-nav a {
  display: block;
  padding: 11px 4px;
  color: var(--color-header-link);
  /* ゴシックだと字面が詰まって見えるので、店名や本文と同じ明朝にそろえる */
  font-family: var(--font-serif);
  font-size: 1rem;  /* 16px。本文の縮小には連動させない */
  font-weight: 400;
  border-bottom: 2px solid transparent;
}
.site-nav a.is-active {
  color: var(--color-header-current);
  font-weight: 700;
  border-bottom-color: var(--color-header-current);
}
/* .is-active より後に置き、現在地のリンクもホバーで色が変わるようにする */
.site-nav a:hover { color: var(--color-header-hover); }

/* ── スマホのメニュー(右から引き出す面。2026-09-26 オーナー採用 案A) ──
   ≡ を押すと、右から白い面が滑り込み、後ろのページは暗くなる。ヘッダーの中で縦に伸びて
   ページを押し下げていた旧メニュー(.site-nav)は、スマホでは出さない。
   面は main.js が body の直下に置く(ヘッダーの中だと、ヘッダーに filter を掛けたとき(以前の白黒の結末直前の画面)に
   position: fixed が画面に固定されなくなる)。パソコンでは出さない。 */
.menu-drawer { display: none; }
@media (max-width: 739.98px) {
  .site-nav { display: none; }

  .menu-drawer {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60; /* ヘッダー(20)より手前、予約確認・ログアウトの確認(100)より奥 */
    visibility: hidden;
    /* 閉じるときは面が引っ込み終わってから隠す */
    transition: visibility 0s linear 0.34s;
  }
  .menu-drawer.is-open {
    visibility: visible;
    transition-delay: 0s;
  }
  .menu-drawer__shade {
    position: absolute;
    inset: 0;
    background: rgba(var(--rgb-shade), 0.48);
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .menu-drawer.is-open .menu-drawer__shade { opacity: 1; }

  .menu-drawer__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(316px, 84vw);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-surface);
    box-shadow: -14px 0 36px rgba(var(--rgb-shade-2), 0.18);
    transform: translateX(calc(100% + 40px));
    transition: transform 0.34s cubic-bezier(0.22, 0.8, 0.26, 1);
  }
  .menu-drawer.is-open .menu-drawer__panel { transform: none; }

  /* × は ≡ と同じ高さに置く(--menu-close-top は main.js が開くたびに測って入れる) */
  .menu-drawer__bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--menu-close-top, 38px) 12px 0 24px;
  }
  .menu-drawer__title {
    font-family: var(--font-sans);
    font-size: var(--fs-1);
    letter-spacing: 0.16em;
    color: var(--color-ink-faint);
  }
  /* ≡ と同じ輪郭だけの四角。× は2本の線で描く */
  .menu-drawer__close {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    padding: 0;
    background: transparent;
    border: 1px solid var(--color-ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
  }
  .menu-drawer__close::before,
  .menu-drawer__close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 1.5px;
    background: var(--color-ink);
    pointer-events: none;
  }
  .menu-drawer__close::before { transform: translate(-50%, -50%) rotate(45deg); }
  .menu-drawer__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

  .menu-drawer__list {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    border-top: 1px solid var(--color-line);
  }
  .menu-drawer__list li { border-bottom: 1px solid var(--color-line); }
  .menu-drawer__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 0 22px 0 24px;
    font-family: var(--font-serif);
    font-size: 1.2rem; /* 18px。表紙と同じく、本文の縮小には連動させない */
    color: var(--color-ink);
    text-decoration: none;
    transition: background var(--transition-base), color var(--transition-base);
  }
  .menu-drawer__link:hover { color: var(--color-header-hover); }
  .menu-drawer__link:active { background: var(--color-bg-deep); }
  .menu-drawer__label { flex-grow: 1; }
  /* 今いるページは、行ごと「ようこそ」の段と同じ茶色(地 --color-bg・字 --color-ink-soft)の太字(2026-10-07 オーナー指示。一度は薄い緑の地に緑の字)。ほかのページには › を付ける
     (2026-10-07 オーナー指示で Artifact「美食島 スマホのメニュー 今いる場所の印 3案」の案A にした。はじめは文字の左に緑の短い線)。
     印の場所(.menu-drawer__mark)は、どの行も文字の書き出しをそろえるために空けたまま残す */
  .menu-drawer__mark { width: 14px; height: 2px; flex-shrink: 0; }
  .menu-drawer__link.is-active { font-weight: 700; color: var(--color-ink-soft); background: var(--color-bg); }
  .menu-drawer__link::after {
    content: "";
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-top: 1.5px solid var(--color-ink-faint);
    border-right: 1.5px solid var(--color-ink-faint);
    transform: rotate(45deg);
  }
  .menu-drawer__link.is-active::after { display: none; }
  /* メニューの下にあった「○○さん、ようこそ」とログアウトの行は消した(2026-10-21 オーナー指示)。
     ログアウトはヘッダーの右上から行う */

  /* 開いている間は後ろのページをスクロールさせない。html だけに掛ける
     (body にも掛けると body がスクロールの入れ物になり、貼り付いたヘッダーが外れて上へ流れる) */
  html.is-menu-open { overflow: hidden; }
}
@media (max-width: 739.98px) and (prefers-reduced-motion: reduce) {
  .menu-drawer,
  .menu-drawer__shade,
  .menu-drawer__panel { transition: none; }
}

/* ヘッダー右側にまとめる、ナビ+検索の小さめユーティリティ群 */
.site-header__utility {
  /* モバイルでは特別なレイアウトを持たせず、通常のブロックとして積む */
}

/* 検索窓。入力欄とボタンを一つの枠に収め、ボタン側は枠からはみ出さないよう切り落とす。
   色は :root の --color-search-*(RESTAURANT YAMANO・結末直前では前の色に戻す) */
.search-box { margin-top: 12px; }
/* 角は少しだけ落とす(丸くはしない。2026-10-01 オーナー指示)。ボタンの角も枠の overflow で一緒に落ちる */
.search-box form {
  display: flex;
  height: 44px;
  border: 1px solid var(--color-search-line);
  border-radius: 4px;
  overflow: hidden;
  background: var(--color-search-field);
  transition: border-color var(--transition-base);
}
.search-box form:focus-within { border-color: var(--color-search-button); }
.search-box input[type="search"] {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  padding: 0 14px;
  font-size: 0.9rem;
  font-family: var(--font-serif);
  background: transparent;
  color: var(--color-ink);
}
/* 文字を入れると出る消去の ×。Chrome の既定は青なので、検索ボタンと同じ色の × に描き直す(2026-09-30 オーナー指示)。
   色は --color-search-button なので、RESTAURANT YAMANO(theme-night)・結末直前(theme-muted)では
   それぞれの画面の検索ボタンの色になる(同日オーナー指示) */
.search-box input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  background-color: var(--color-search-button);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 2l8 8M10 2l-8 8' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  cursor: pointer;
}
.search-box button {
  border: none;
  background: var(--color-search-button);
  color: var(--color-search-button-ink);
  padding: 0 20px;
  font-family: var(--font-serif);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-base);
}
.search-box button:hover { background: var(--color-search-button-deep); }
.search-box button:active { background: var(--color-search-button-deep); }
/* スマホ(739px 以下)は、幅 340px でも案内の文「島の飲食店やキーワードを検索」が欠けないよう、
   欄の右の余白を 14 → 8px、ボタンの左右を 20 → 16px(「検索」は中央のまま。PC の 740〜1023px と同じ)に詰め、
   欄が空のあいだは消去の × の場所(幅 12px + 左 8px)を取らない(2026-10-06 オーナー指示)。文字を入れると × はこれまでどおり出る。
   案内の文・文字の大きさ・ボタンの文字を変えたら、340px で測り直す */
@media (max-width: 739.98px) {
  .search-box input[type="search"] { padding-right: 8px; }
  .search-box input[type="search"]:placeholder-shown::-webkit-search-cancel-button { display: none; }
  .search-box button { padding: 0 16px; }
  /* 案内の文の色は、ブラウザ既定の灰色(#757575。地との濃さの比 4.42)ではなく、PC で濃くした薄い灰色(--color-ink-faint。4.95)にする
     (2026-10-06 オーナー指示。ふつうのページの文字を 4.5 以上にそろえた PC に合わせる) */
  .search-box input[type="search"]::placeholder { color: var(--color-ink-faint); opacity: 1; }
}
/* PC も、検索窓とお名前の入力欄(受付)の案内の文を、スマホの検索窓と同じ薄い灰色(--color-ink-faint。地との濃さの比 4.95)にする
   (2026-10-06 オーナー指示。はじめはブラウザ既定の灰色 #757575 で 4.42) */
@media (min-width: 740px) {
  .search-box input[type="search"]::placeholder,
  .visitor-gate__input::placeholder { color: var(--color-ink-faint); opacity: 1; }
}

@media (min-width: 740px) {
  .menu-toggle { display: none; }
  .site-nav {
    max-height: none;
    overflow: visible;
  }
  .site-nav ul {
    flex-direction: row;
    border-top: none;
    margin: 0;
    padding: 0;
    gap: 26px;
    align-items: center;
  }
  .site-nav a { padding: 4px 0 6px; }
  .site-header__inner {
    display: flex;
    /* 店名を「受付行 + ナビ行」の高さ全体に対して縦中央に置く */
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
    max-width: none; /* ヘッダーだけは本文の読みやすさ用の最大幅を適用せず、画面幅いっぱいに広げる */
    /* 本文の余白(48px)に合わせると、1024px 未満では店名・ナビ・検索窓が1行に収まらない */
    padding-left: 12px;
    padding-right: 12px;
  }
  .site-header__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    margin-left: auto;
  }
  .site-header__utility {
    display: flex;
    align-items: center;
    gap: 28px;
  }
  .search-box { margin-top: 0; width: 300px; }
}

/* 画面幅いっぱいに広げている分、端に寄りすぎないよう本文より左右を広く取る。
   ただし 1024px 未満では店名・ナビ・検索窓が1行に収まらなくなるので足さない。
   1024〜1199px は、左右の余白を 16px → 32px、検索窓を 320px → 360px へ幅に合わせて少しずつ広げる
   (2026-10-05 オーナー指示。1200px で一気に切り替わり、がたっとなっていた)。広げる量は画面が広がる量の約半分なので、1行に収まる */
@media (min-width: 1024px) {
  /* 下限は 320px(300px だと検索窓の案内が「…を検」で切れる。2026-10-05 オーナー指示) */
  .search-box { width: calc(320px + (100vw - 1024px) * 40 / 176); }
  .site-header__inner {
    padding-left: calc(16px + (100vw - 1024px) * 16 / 176);
    padding-right: calc(16px + (100vw - 1024px) * 16 / 176);
  }
}

/* 広い画面では左右 32px。本文の余白(--gutter)とは連動させない(オーナー指定) */
@media (min-width: 1200px) {
  .search-box { width: 360px; }
  .site-header__inner {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* ---------- Hero (top page) ---------- */

/* 表紙は B案「写真いっぱい＋縦書き」(2026-09-28 オーナー採用)。写真を画面いっぱいに見せ、
   右側だけを暗く落として、物語の文を白の縦書きで重ねる。2段落とも同じ大きさ・同じ色にそろえる(オーナー指定)。
   縦書きでは <br> がそのまま列の区切りになる(index.html の改行位置 = 列の終わり)。スマホは下の「トップページのスマホ表示」 */
.hero {
  position: relative;
  /* ヘッダー分を差し引いた「画面いっぱいの表紙」。--header-height にはアンカーの着地余白 8px が足してある
     (js/main.js の syncHeaderHeight)ので、その 8px は戻す。戻さないと表紙の下に 8px の隙間が出る(2026-09-26 修正) */
  min-height: calc(100svh - var(--header-height) + 8px);
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 縦書きは右から読み始めるので、文の書き出しを右に置く */
  padding: 48px var(--gutter);
  overflow: hidden;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: var(--hero-focus);
}
/* 写真そのものは沈ませず、文字が乗る右側だけを暗くする(色は地の墨と同じ焦げ茶) */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(var(--rgb-shade), 0) 45%, rgba(var(--rgb-shade), 0.62) 88%);
}
@media (max-width: 739.98px) {
  .hero { min-height: 0; }
}

/* 縦書きの文。いちばん長い列は34字あるので、列の高さを 38em(字間込みの34字＋ゆとり)に取る。
   文字の大きさは 18px を基本に、画面の高さが足りないときは列が折れないよう縮める
   (表紙の高さ − 上下の余白 96px を 38 で割った値。下限はスマホ 13.5px、PC 10.5px。PC は下の指定) */
.hero__story {
  position: relative;
  writing-mode: vertical-rl;
  display: flex;
  flex-direction: column; /* 縦書きの中なので、段落は右から左へ並ぶ */
  gap: 2.9em;
  height: 38em;
  font-size: var(--hero-fs);
  font-family: var(--font-serif);
  color: #f7f2e8;
}
.hero { --hero-fs: clamp(0.9rem, calc((100svh - var(--header-height) - 96px) / 38), 1.2rem); }
/* PC では画面の幅でも大きさを抑える。740px で 13.5px、1440px で 18px になるよう幅に合わせて変える
   (2026-10-05 オーナー指示。高さだけで決めていたので、iPad の縦のような縦長の画面では幅が狭いのに 18px・島の名 約130px で大きすぎた)。
   高さで決まる大きさと比べて小さいほうを使う。スマホは文字の大きさを別に決めている。
   高さで決まる側の下限は 10.5px(2026-10-06 オーナー指示。はじめは 13.5px で、ページの見える高さが 688px より低い窓では
   前書きと島の名の下が最初の画面からはみ出していた。1366×768 のノートPC は Chrome で見える高さが約 600〜635px)。
   10.5px なら見える高さ 約598px まで収まる(文字の下の端 = 見える高さ − 20px)。幅で決まる側は今までどおり 13.5px より小さくしない */
@media (min-width: 740px) {
  .hero { --hero-fs: clamp(10.5px, min(calc((100svh - var(--header-height) - 96px) / 38), max(0.9rem, calc(0.643vw + 8.74px))), 1.2rem); }
}

/* 島の名(尼山原島)。Artifact「【トップ】刷新案_20261002」の表紙を参考に、PC だけ前書きの右に大きな縦書きで置く(2026-10-03)。
   大きさは前書きの字の 7.2 倍(1440×900 で約130px。8.6 倍で前書きの列の長さとそろえたが、同日オーナー指示で小さくした)。
   箱の高さも前書きと同じ 38 字分にして、上端をそろえる。前書きと一緒に画面の高さで縮む */
.hero__title { display: none; }
@media (min-width: 740px) {
  .hero {
    flex-direction: row-reverse; /* HTML は島の名 → 前書きの順。右から読むので右から並べる */
    justify-content: flex-start;
    gap: calc(var(--hero-fs) * 3.6);
  }
  /* 写真全体に同じ濃さ(0.62)の膜をかける(スマホも同じ値)。
     はじめは右側だけを暗くする坂(左から 15% の所で 0、62% の所で 0.62)だった。その折れ目が縦の線(黒の段差)に見えたので
     一度 S 字の坂にしたが、2026-10-05 オーナー指示で写真全体を同じ濃さにした */
  .hero::before {
    background: rgba(var(--rgb-shade), 0.62);
  }
  .hero__title {
    position: relative;
    display: block;
    height: calc(var(--hero-fs) * 38);
    margin: 0;
    writing-mode: vertical-rl;
    font-family: var(--font-serif);
    font-size: calc(var(--hero-fs) * 7.2);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.06em;
    color: #f7f2e8;
  }
}
/* 表紙は文字組みそのものが絵なので、本文の縮小には連動させず実寸で持つ */
.hero__story p {
  margin: 0;
  max-width: none;
  font-size: 1em;
  line-height: 2.35;
  letter-spacing: 0.08em;
}

/* SCROLL は表紙の下の中央に横書きで置き、下の線を伸び縮みさせて「下へ続く」ことを示す。
   B案(2026-09-28)で左下・縦書き・動かない線にしていたのを、2026-09-29 オーナー指示で刷新前の形に戻した。
   色だけは今の表紙の文字(生成りの白)にそろえる。動きを減らす設定の人には動かさない */
.hero__scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 0.6875rem;
  letter-spacing: 0.32em;
  color: #f7f2e8;
}
.hero__scroll-line {
  width: 1px;
  height: 44px;
  background: #f7f2e8;
  animation: hero-scroll-line 1.8s ease-in-out infinite;
}
@keyframes hero-scroll-line {
  0%   { transform: scaleY(0.2); transform-origin: top; opacity: 0.4; }
  50%  { transform: scaleY(1);   transform-origin: top; opacity: 1; }
  100% { transform: scaleY(0.2); transform-origin: bottom; opacity: 0.4; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll-line { animation: none; }
}
@media (max-width: 739.98px) {
  .hero__scroll-cue { display: none; }
}

/* ---------- 見出し・節・一覧 ---------- */

/* トップページの節の見出し(掲載店舗・お知らせ・島の地図。.section-heading はトップだけで使う)。
   金の短い罫は置かず、字間を広げた明朝だけで節の始まりを示す(2026-09-28 オーナー採用。
   Artifact「美食島 トップ 夜の刷新案」の案B)。見出しの上の金の短い罫は、このサイトのどの見出しにも置かない
   (ページの見出し .page-header h1・店舗ページの店名 .shop-header・各欄の見出し .section > h2 も同じ)。
   見出しと、その右の MORE を下端でそろえる */
.section-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 40px;
}
.section-heading h2 {
  font-family: var(--font-serif);
  /* 一覧ページのタイトル(.page-header h1)と同じ大きさ。スマホは下の指定で別の値になる */
  font-size: var(--fs-6);
  font-weight: 600;
  letter-spacing: 0.16em;
  /* 本文用のline-height(1.8)を継承すると文字の上下に余白が生まれるため、見出しは詰める */
  line-height: 1.3;
  margin: 0;
}
@media (max-width: 739.98px) {
  .section-heading { margin-bottom: 28px; }
  .section-heading h2 { font-size: var(--fs-5); }
}

.page-header {
  padding: 56px 0 20px;
}
/* 階層表示(パンくず)がある場合は、その下の余白(30px)が見出しまでの間になる。
   ここで 56px を足すと、階層表示の無いページより見出しが下がってしまい、
   同じ作りの店舗ページ(.shop-header は padding 0)とも間が揃わない。 */
.breadcrumb + .page-header { padding-top: 0; }
.page-header h1 {
  font-family: var(--font-serif);
  font-size: var(--fs-6);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin: 0 0 18px;
}
.page-header p.lead {
  color: var(--color-ink-soft);
  margin: 0;
  font-family: var(--font-serif);  /* 見出しの下の一文は本文なので明朝(2026-10-20 オーナー指示。それまでは字の指定がなくゴシック)。検索結果の件数の行(.search-summary)も同じ */
}

/* トップの一覧へのリンク(「掲載店舗一覧へ」「お知らせ一覧へ」)の文字。下線は付けない
   (2026-09-28 オーナー採用の案Bから、下線だけオーナー指示で外した)。押し場所の形は下の .signpost(道しるべ)。
   色は全体のリンクの緑にせず、店名と同じ墨にする。カーソルを当てても色は変わらない(2026-10-01 オーナー指示)。
   文言は「MORE」だったのを、2026-10-01 オーナー指示で「掲載店舗一覧へ」「お知らせ一覧へ」にした。
   和文なので、欧文の MORE 用に広げていた字間(0.3em)は付けない(字間なし。同日オーナー指示) */
.more-link {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  font-weight: 700; /* 記事の「← お知らせ一覧に戻る」と同じ太字(2026-10-01 オーナー指示) */
  letter-spacing: 0;
  line-height: 1;
  color: var(--color-ink);
  white-space: nowrap;
  transition: color var(--transition-base);
}
.more-link:hover { color: var(--color-ink); }

/* 記事の末尾に置く「一覧に戻る」リンク。下線は付けない(2026-10-01 オーナー指示で外した)。
   色はトップの .more-link と同じ墨で、カーソルを当てても変えない(同日オーナー指示) */
.back-link {
  margin: 36px 0 0;
  font-size: var(--fs-2);
  font-weight: 700;
}
.back-link a,
.back-link a:hover { color: var(--color-ink); }

/* トップの「一覧へ」の押し場所「道しるべ」(2026-10-10 オーナー採用。design-work\list-buttons の案2)。
   島の辻に立つ案内板のように、白い札を藍緑の細い縁(2px)で囲み、先をとがらせて行き先を指す。矢印も留め釘(・)も置かない
   (試しでは根元に留め釘を1つ置いていたが、同日オーナー指示で外した)。
   記事の「お知らせ一覧に戻る」は、同日一度これの左向きにしたが、オーナー指示で「二重の枠」(下の .back-link a)にした。
   縁は、藍緑の板(.signpost)の上に一回り小さい白い板(.signpost__face)を同じ形に切って重ねて描く。
   切り抜く(clip-path)のは中の span だけにし、a には掛けない(a に掛けるとキーボードの枠と当たり判定の ::after まで切れる)。
   PC は、文字の左右の白を、とがった所を除いた四角の部分で同じにする(26px。右はとがりの 22px を足す)。
   スマホは左の白を 16px、「へ」からとがりの付け根までを 4px と詰め、とがりの形(18px)はそのまま(2026-10-10 オーナー指示。
   はじめは PC と同じ考えで左 20px・付け根まで 21px)。
   高さは PC 50px・スマホ 40px(スマホははじめ 44px で、同日オーナー指示で上下を詰めた。押せる範囲は .more-link::after で広げてある)。
   高さを変えたら、トップの帯の真ん中に置く bottom も直す */
.signpost {
  display: block;
  height: 50px;
  box-sizing: border-box;
  padding: 2px;
  background: var(--color-teal);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 50%, calc(100% - 22px) 100%, 0 100%);
  transition: transform var(--transition-base);
}
.signpost__face {
  display: flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  padding: 0 48px 0 26px;
  background: var(--color-surface);
  clip-path: polygon(0 0, calc(100% - 21px) 0, 100% 50%, calc(100% - 21px) 100%, 0 100%);
  transition: background var(--transition-base);
}
@media (max-width: 739.98px) {
  .signpost {
    height: 40px;
    clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%);
  }
  .signpost__face {
    padding: 0 21px 0 16px;  /* 右は白い板のとがり 17px + 「へ」から付け根まで 4px */
    clip-path: polygon(0 0, calc(100% - 17px) 0, 100% 50%, calc(100% - 17px) 100%, 0 100%);
  }
}

/* 記事の「お知らせ一覧に戻る」の押し場所「二重の枠」(2026-10-10 オーナー指示。design-work\list-buttons の案5)。
   古い観光案内やお品書きの枠のように、白い札を細い二重の線(--color-frame-line。メッセージの案内の枠と同じ色)で囲み、
   文字の前に藍緑の細い左向きの矢印(.back-link__arrow)を置く。外の線は border、内の線は 3px 内側に box-shadow で描く。
   左右の白は案(PC 34px・スマホ 24px)より詰めて、PC 22px・スマホ 13px(同日オーナー指示で幅を小さく。スマホははじめ 16px)。高さは PC 54px・スマホ 46px */
.back-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  height: 54px;
  box-sizing: border-box;
  padding: 0 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-frame-line);
  box-shadow: inset 0 0 0 3px var(--color-surface), inset 0 0 0 4px var(--color-frame-line);
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.back-link__arrow {
  display: block;
  flex-shrink: 0;
  width: 18px;
  height: 10px;
  fill: none;
  stroke: var(--color-teal);
  stroke-width: 1.5;
  transition: transform var(--transition-base);
}
@media (max-width: 739.98px) {
  .back-link a {
    /* 矢印と文字の間 8px(字の約2/3)、左右 13px(内側の線から墨まで約 10px で、上下の白 約 12px に近い)。
       2026-10-10 オーナー指示で 11px・16px から詰めた。左右を 12px 以下にすると上下より狭くなって窮屈に見える */
    gap: 8px;
    height: 46px;
    padding: 0 13px;
    box-shadow: inset 0 0 0 2.5px var(--color-surface), inset 0 0 0 3.5px var(--color-frame-line);
  }
  .back-link__arrow { width: 15px; height: 8.33px; }
}
/* カーソルを当てると、道しるべは札が薄い藍緑になって 3px 先へ進み、二重の枠は線が藍緑になって矢印が 3px 左へ進む */
@media (min-width: 1024px) and (hover: hover) {
  a:hover > .signpost { transform: translateX(3px); }
  a:hover > .signpost > .signpost__face { background: var(--color-teal-tint); }
  .back-link a:hover {
    border-color: var(--color-teal);
    box-shadow: inset 0 0 0 3px var(--color-surface), inset 0 0 0 4px var(--color-teal);
  }
  .back-link a:hover .back-link__arrow { transform: translateX(-3px); }
}

/* 指で押せるよう、当たり判定だけを広げる。::after を重ねるだけなので
   文字の位置・余白・下線の見た目は一切変わらない。 */
.more-link,
.back-link a,
.site-header__signout {
  position: relative;
}
.more-link::after,
.back-link a::after,
.site-header__signout::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}

.section { padding: 64px 0 0; }

/* .section-heading を使わない節(店舗ページの各欄)の見出し。
   ほかの見出しと同じく、上に金の短い罫は置かない。 */
.section > h2 {
  margin: 0 0 24px;
  font-family: var(--font-serif);
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
}
/* ページ見出しのすぐ下の節は、見出し側の余白と二重になるので詰める */
main > .container + .section,
.page-header + .section { padding-top: 26px; }

@media (max-width: 739.98px) {
  /* スマホではセクション間の余白が空白として目立ち、スクロール量も増えるため詰める */
  .section { padding: 40px 0 0; }
  .page-header { padding: 32px 0 14px; }
}

/* トップページの帯。節ごとに地の色を切り替えて、同じ調子のまま続かないようにする。
   紙色(掲載店舗) → 白(お知らせ) → 紙色(島の地図) → 灰緑(フッター) の順に並べる
   (2026-09-28 オーナー指示。淡い海色の帯は島の地図 → お知らせ → 白、と替わり、今は使っていない) */
.section--band { padding: 96px 0; }
.section--sea { background: var(--color-band); }
.section--white { background: var(--color-surface); }
/* 同じ紙色の帯が続くところは、上下の余白が二重にならないよう後ろの帯の上を詰める */
.section--band:not(.section--sea):not(.section--white) + .section--band:not(.section--sea):not(.section--white) { padding-top: 0; }
@media (max-width: 739.98px) {
  .section--band { padding: 56px 0; }
}

/* ---------- 店舗のカード（トップの掲載店舗） ---------- */

/* .card を使うのはトップ(index.html)だけ。店舗一覧(restaurants.html)は下の .shop-list。
   お知らせの一覧と同じく、続けて並んだ行が一枚の白い板に見えるようにし、
   行どうしは1pxの罫で仕切る。影は付けない。 */
.card-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.card {
  position: relative;
  display: flex;
  gap: 28px;
  padding: 22px 24px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
  cursor: pointer;
  transition: background var(--transition-base);
}
.card:first-child { border-top: none; }
/* 持ち上げない。カーソルを当てた行の地を、お知らせの行と同じ一段沈めた生成りにするだけにする。 */
@media (min-width: 1024px) and (hover: hover) { .card:hover { background: var(--color-bg-deep); } }

.card__photos {
  width: 148px;
  height: 99px;
  flex-shrink: 0;
  overflow: hidden;
}
.card__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card__photo:not(:first-child) { display: none; }

.card__body { flex: 1; min-width: 0; }
.card__title-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}
.card h3 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  font-weight: 700;
  line-height: 1.4;
}
/* 店名は全体のリンクの緑にせず、掲載店舗一覧(.shop-list__name a)と同じ墨にする。
   全体の a:hover より後ろにあるので、カーソルを当てても色は変わらない(2026-09-30 オーナー指示) */
.card h3 a { color: inherit; }
/* 見出しのリンクをカード全体に広げる(どこを押しても開けるようにする) */
.card h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.card .meta {
  margin: 2px 0 8px;
  font-size: var(--fs-1);
  color: var(--color-ink-faint);
}
.card__desc {
  margin: 0;
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  line-height: 1.9;
  color: var(--color-ink-soft);
}

@media (max-width: 480.98px) {
  .card { gap: 14px; padding: 18px 14px; }
  .card__photos { width: 96px; height: 72px; }
  .card h3 { font-size: var(--fs-3); }
}

/* ---------- 一覧（掲載店舗 restaurants.html） ---------- */

/* 740px 以上は1軒に1行。左に写真、右の白い欄に「地区 / 店名と札 /
   紹介文 / 評点・予算・営業時間・定休日」(2026-09-29 オーナー採用。Artifact「美食島 掲載店舗 刷新3案」の案C-2a)。
   案C-2a から、写真を小さくし(5:7・高さ360px → 4:8・320px)、地区の前の番号の黒い四角と、
   右端の「店舗ページを見る →」を外した(同日オーナー指示。行全体がリンクなのは同じ)。
   写真と文の幅は 4:8。写真の高さは文の欄の高さに合わせる(写真の欄の min-height が下限)。
   下限はのちに 290px に下げた(紹介文と4項目の墨の線の間が空きすぎるとのオーナー指示)。中身が一番多い店
   (紹介文2行)の高さが約284px なので、これより下げると店ごとに行の高さがそろわなくなる。紹介文を変えたら測り直すこと。
   スマホ(〜739px)だけは、刷新の前の形(左に正方形の写真、右に店名・札・営業時間)のまま(オーナー指示)。下の 739px の塊 */
.shop-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.shop-list__item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  background: var(--color-surface);
}
.shop-list__photo {
  position: relative;
  min-height: 290px;
}
.shop-list__photo img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 2枚目・3枚目の写真はスマホ(739px 以下)だけで、3枚を横に並べて出す(末尾の「スマホ版 暫定解20261005」の塊)。
   740px 以上は1枚目だけを枠いっぱいに敷く(出すと1枚目の上に重なる) */
.shop-list__photo img:not(:first-child) { display: none; }
.shop-list__body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 36px 44px 34px;
  transition: background var(--transition-base);
}
.shop-list__place {
  max-width: none;
  margin: 0;
  font-size: var(--fs-1);
  line-height: 1.5;
  letter-spacing: 0.04em;
  color: var(--color-ink-soft);
}
/* 店名の右に札。欄が狭くて入らないときは札が次の行に回る */
.shop-list__title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 16px;
}
/* 店名はページ見出し(--fs-6)より一段小さく(2026-09-29 オーナー指示で --fs-6 から下げた) */
.shop-list__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-5);
  font-weight: 700;
  line-height: 1.3;
}
.shop-list__name a { color: inherit; }
/* 見出しのリンクを1軒の行全体に広げる(写真を押しても開ける) */
.shop-list__name a::after {
  content: "";
  position: absolute;
  inset: 0;
}
/* 営業時間の1行はスマホだけ。740px 以上は下の4項目の中に出す */
.shop-list__hours { display: none; }
.shop-list__desc {
  margin: 14px 0 20px;
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  line-height: 1.9;
  color: var(--color-ink-soft);
}
/* 評点・予算・営業時間・定休日を1段に並べ、欄の下の端にそろえる。上の端だけ墨の線にして、紹介文と切り分ける。
   列の幅は中身の長さに合わせて割り振る(予算が一番長く、定休日が一番短い)。等分だと、文の欄が一番狭い 1024px で予算が折り返しかける */
.shop-list__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 0.75fr);
  column-gap: 24px;
  margin: auto 0 0;
  border-top: 1px solid var(--color-ink);
}
.shop-list__facts > div { padding-top: 12px; }
.shop-list__facts dt {
  font-size: var(--fs-1);
  line-height: 1.6;
  color: var(--color-ink-faint);
}
.shop-list__facts dd {
  margin: 3px 0 0;
  font-size: var(--fs-2);
  font-weight: 500;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
/* 掲載店舗一覧の店の欄の値(評点の数・予算・営業時間・定休日の中身)は、項目名(dt)と同じ薄い灰色にする(2026-10-24 オーナー指示)。
   星(.shop-list__star)は金のまま。検索結果の同じ欄は墨色のまま */
body[data-page="restaurants"] .shop-list__facts dd { color: var(--color-ink-label); }
.shop-list__score { font-size: var(--fs-2); }  /* 予算などの欄(dd)と同じ大きさ(2026-10-21 オーナー指示。はじめは --fs-3 で評点だけ大きかった) */
.shop-list__star { color: var(--color-star); }
.shop-list__count {
  font-size: var(--fs-1);
  font-weight: 400;
  color: var(--color-ink-faint);
}
/* 持ち上げない。カーソルを当てた行の白い欄を、ほかの一覧と同じ一段沈めた生成りにする */
@media (min-width: 1024px) and (hover: hover) {
  .shop-list__item:hover .shop-list__body { background: var(--color-bg-deep); }
  .shop-list__item--soldout:hover .shop-list__body { background: none; }  /* 押せないので沈めない */
}
/* 売り切れの店(検索結果。js/search-render.js が --soldout を付け、白黒の --mono も一緒に付ける)。
   白い板に斜めの太い墨の帯をかけ、その中に「終了しました」と白抜きで書く(2026-10-14 オーナー指示。字は 2026-10-18 に「Sold Out」から変えた)。
   帯は板の左右の外まで伸ばし、板の縁で切る。店名のリンクは外してあるので、カードのどこを押しても移らない */
/* PC の検索結果の板は overflow: visible(body[data-page="search"] .shop-list__item)なので、それより重い指定で切る。
   検索結果の板の外にのぞく飾りはない(写真の後ろの縞は出さない)ので、切っても失うものはない */
body[data-page="search"] .shop-list__item.shop-list__item--soldout { overflow: hidden; }
.shop-list__soldout {
  position: absolute;
  z-index: 2;  /* スマホで横に並ぶ写真より手前 */
  top: 50%;
  left: -20%;
  right: -20%;
  max-width: none;  /* p の行長の制限(--measure)があると帯が板より短くなり、左に寄る */
  margin: 0;
  padding: 1.1em 0;  /* 太い帯。字の大きさに合わせて PC 約 37px・スマホ約 28px */
  transform: translateY(-50%) rotate(-8deg);
  background: rgba(var(--rgb-shade), 0.55);  /* 薄い墨。下の写真と板が透けて見える(--mono の板の上では灰色の墨 31,31,31) */
  color: var(--color-surface);
  font-family: var(--font-serif);
  font-size: 34px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-align: center;
  pointer-events: none;
}
/* スマホは刷新の前の形に戻したもの(2026-09-29 オーナー指示。一番上の墨の線も付けない)。
   続けて並んだ行が一枚の白い板に見え、行どうしは1pxの罫で仕切る。白い板は画面の端まで、文字は画面の端から 12px。
   左に正方形の写真、右に店名・札・営業時間、紹介文はその下に行の幅いっぱいに流す(写真の横の細い列に押し込まない)。
   HTML は740px 以上と共通なので、.shop-list__body と .shop-list__title を display: contents で開いて grid に並べ直し、
   番号の行と4項目は隠す。文字の大きさは、末尾の「一律 1px 小さくする」塊でさらに 1px 下がる */
@media (max-width: 739.98px) {
  body[data-page="restaurants"] { --gutter: 12px; }
  .shop-list {
    gap: 0;
    margin: 0 calc(var(--gutter) * -1);
  }
  .shop-list__item {
    grid-template-columns: 120px minmax(0, 1fr);
    /* 写真(120px)の右の3段は上に詰め、余りは最後の段(営業時間)の下に回す */
    grid-template-rows: auto auto 1fr;
    column-gap: 7px;
    row-gap: 6px;
    padding: 16px var(--gutter) 18px;
    border-top: 1px solid var(--color-line);
  }
  .shop-list__item:first-child { border-top: none; }
  .shop-list__body,
  .shop-list__title { display: contents; }
  .shop-list__place,
  .shop-list__facts { display: none; }
  .shop-list__photo {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 120px;
    height: 120px;
    min-height: 0;
  }
  /* 店名はパソコンと同じ墨(刷新の前は緑だった。2026-09-30 オーナー指示でトップの店名とそろえた) */
  .shop-list__name { grid-column: 2; grid-row: 1; font-size: var(--fs-3); line-height: 1.4; }
  .shop-list__title .tag { grid-column: 2; grid-row: 2; justify-self: start; }
  .shop-list__hours {
    display: block;
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    margin: 0;
    font-size: var(--fs-1);
    color: var(--color-ink-faint);
  }
  .shop-list__desc {
    grid-column: 1 / -1;
    grid-row: 4;
    max-width: none;
    margin: 6px 0 0;
    line-height: 1.8;
  }
}

/* 分類の札。藍緑を薄めた地に置く(閉店済みだけは朱を薄めた地) */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  line-height: 1.6;
  background: var(--color-teal-tint);
  color: var(--color-teal);
  border: none;
  border-radius: 0;
  padding: 3px 12px;
}
.tag.tag-closed { color: var(--color-danger); background: var(--color-danger-tint); }
/* 閉店の札(RESTAURANT YAMANO の店舗ページと検索結果)の続きの「・掲載終了」(.tag__more)は、480px 以下では隠して「閉店済み」だけにする
   (2026-10-07 オーナー指示は「440px 以下くらい」。新しい区切りを増やさないため、今ある 480px の区切りを使った。
   一度はスマホで常に隠し、次に店名が折れるときだけ隠す形を試した。検索結果の YAMANO は 387px から全部入る) */
@media (max-width: 480.98px) {
  .tag__more { display: none; }
}

/* ---------- 一覧（お知らせ） ---------- */

/* 記事(個別のお知らせ・隠しページ・初回のお知らせ)は、本文を白い板に載せる */
.notice {
  position: relative;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius);
  padding: 40px 48px;
  margin-bottom: 0;
  box-shadow: none;
  transition: background var(--transition-base);
}
@media (max-width: 739.98px) {
  /* 外側(--gutter)と二重に効くので、板の左右は詰める。本文の列を稼ぐ */
  .notice { padding: 24px 16px; }
}

/* 一覧の行。続けて並んだ行が一枚の白い板に見えるよう、行どうしは1pxの罫で仕切る
   (--radius を付けたときは、最初と最後の行の外側の角だけが丸まる)。
   日付・見出し・本文は上から縦に並べる */
.notice--linked {
  border-radius: 0;
  border-top: 1px solid var(--color-line);
  padding: 30px 36px;
}
.notice--linked:first-of-type {
  border-top: none;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
.notice--linked:last-of-type {
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
/* 押せる行であることを、カーソルを当てたときだけ一段沈めた生成り(茶)の地で示す(どの行も同じ扱い)。
   はじめは淡い赤(--color-danger-tint)で、トップだけ試しにこの色にしていたが、2026-10-04 オーナー指示で全ページこの色にそろえた。
   地の色はPC(1024px 以上で、マウスなどでカーソルを当てられる端末)だけに付ける(2026-09-26 オーナー指示)。
   スマホとタブレット(740〜1023px、iPad は横向きも)ではタップしても色を変えない。そのため地の色の指定はどれも
   @media (min-width: 1024px) and (hover: hover) の囲みに入れる。
   カーソルで地の色が変わる所(掲載店舗・検索結果・メッセージの行、予約表の ○)は
   すべてこの色にそろえている。文字リンクとボタンは藍緑のまま */
@media (min-width: 1024px) and (hover: hover) { .notice--linked:hover { background: var(--color-bg-deep); } }
/* 抜粋は記事の書き出しをそのまま載せ、2行で切って「…」はブラウザに付けさせる(パソコン・スマホ共通。2026-09-26 オーナー指示)。
   手で切って「…」を書くと、記事ごとに「…」の位置がばらばらになるため。抜粋は2行を超える長さにしておく */
.notice--linked p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 739.98px) {
  .notice--linked { padding: 22px 20px; }
}
/* 初回のお知らせ画面だけ、日付を鮮やかな赤にする。お知らせ一覧から開いた記事ページと
   一覧の行では、ほかのお知らせと同じ見た目にし、特別扱いしない(オーナー指定) */
.intro-page .notice.notice-caution time { color: var(--color-danger-vivid); }
/* 見出しのリンクを記事全体に広げる */
.notice--linked h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.notice--linked h3 a { color: inherit; }

.notice time {
  display: block;
  font-size: var(--fs-1);
  letter-spacing: 0.04em;
  color: var(--color-ink-faint);
}
.notice h3 {
  margin: 4px 0 0;
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 600;
  line-height: 1.6;
}
.notice p {
  margin: 8px 0 0;
  max-width: var(--measure);
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  line-height: 1.85;
  color: var(--color-ink-soft);
}
/* 個別のお知らせの白い板は、店舗ページのタブの帯と同じく中身の幅いっぱいに広げる
   (オーナーの判断)。読み物なので、文字の列だけは本文共通の行長(--measure)で折り返し、
   板の右側は空けておく。引用も同じ行長にそろえる。
   トップページと初回のお知らせは別の作りなので、ここでは触らない。 */

/* お知らせ本文の中の区切り。発表と、そのあとの読み物を分ける */
.notice hr {
  margin: 26px 0;
  border: none;
  border-top: 1px solid var(--color-line);
}

/* お知らせ本文に差し込む写真。押すと拡大する(js/photo-viewer.js)。
   店舗の写真(.photo-gallery__item)は 4:3 に切り揃えているが、
   賞状は縦長・記念写真は横長で、切ると中身が読めなくなる。
   ここでは元の縦横比のまま出し、1枚ずつ幅の上限だけを決める。 */
.notice-figure {
  margin: 26px 0 0;
  max-width: 100%;
}
.notice-figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}
.notice-figure figcaption {
  margin-top: 8px;
  font-size: var(--fs-1);
  line-height: 1.7;
  color: var(--color-ink-faint);
}
/* お知らせ本文の中の引用（古い文書の書き起こしなど）。
   本文と地続きに見えないよう、一段沈めた地に置いて行間を広くとる */
.notice blockquote {
  margin: 22px 0 0;
  padding: 20px 22px;
  max-width: var(--measure);
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  line-height: 2.2;
  color: var(--color-ink);
}
.notice blockquote p { margin: 0; max-width: none; color: inherit; }
.notice blockquote p + p { margin-top: 0.5em; }

/* 横長の記念写真と、縦長の賞状で上限を変える */
.notice-figure--wide { width: 520px; }
.notice-figure--tall { width: 330px; }
/* 写真の説明と、そのあとの本文がくっついて一続きに見えないようにする */
.notice-figure + p { margin-top: 26px; }

/* 余白を広めにとった読み物(フーディー賞の表彰と、島に伝わる食の言い伝え。言い伝えは 2026-10-10 オーナー指示でフーディー賞にそろえた)。
   段落どうし・受賞者・写真・区切り線・署名のまわりを広げ、ゆったり読ませる */
.notice--roomy { padding-top: 32px; padding-bottom: 48px; }
.notice--roomy time { margin-bottom: 20px; }
/* 行間は記事のすぐ下の段落だけ。引用(言い伝えの古い文書)の中の段落は、引用の行間のまま */
.notice--roomy > p { line-height: 2.1; }
.notice--roomy p + p { margin-top: 2em; }
.notice--roomy .notice-winner { margin: 64px 0 72px; }
/* 「受賞者」と名前の行の間を字の大きさ1つ分あけ、名前だけを太字にする(2026-10-25 オーナー指示。ハンドルネームは細字のまま)。
   色は太字の墨(--color-ink-bold)。本文と同じ墨では太字だけ黒く見えたので、少し薄くした(同日オーナー指示。太字をやめて真っ黒にする形も試したが戻した) */
.notice-winner > span { display: block; margin-top: 1em; }
.notice-winner strong { font-weight: 700; color: var(--color-ink-bold); }
.notice--roomy .notice-figure { margin: 80px 0; }
.notice--roomy .notice-figure + p { margin-top: 0; }
.notice--roomy .notice-figure figcaption { margin-top: 16px; }
.notice--roomy hr { margin: 80px 0; }
.notice--roomy .notice-figure + hr { margin-top: 0; }
/* フーディー賞の表彰式の写真の下の「協賛」の店(2026-10-18 オーナー指示。「集計の対象店舗」の案と見比べてこちらを採った)。
   一文の下に店名を1行ずつ並べる。字下げはせず、一文と頭をそろえる(2026-10-25 オーナー指示)。
   はじめは「／」でつないだ1行にしたが、折り返しが気になるとして1行ずつにした(2026-10-18 オーナー指示)。
   店名は段落の中の span なので、文字の大きさ・書体・スマホの1px小さくする指定は本文の段落のまま。
   一文と店名の間は字の大きさ1つ分あけ、店名は受賞者の名前と同じく太字にして、色を太字の墨にする(2026-10-25 オーナー指示) */
.notice-sponsors > span { display: block; font-weight: 700; color: var(--color-ink-bold); }
.notice-sponsors > span:first-child { margin-top: 1em; }

.notice dl {
  margin: 12px 0 0;
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 16px;
  font-size: var(--fs-2);
  /* 行方不明のお知らせの特徴の表(名前・年齢・身長…)は、項目名も値も本文と同じ明朝にする。
     ご予約確定のお知らせの並び(.message__booking)と同じく、「数値とラベルはゴシック」の決まりの例外(2026-10-24 オーナー指示) */
  font-family: var(--font-serif);
}
/* 項目名(名前・年齢…)は値と同じ大きさ。色だけ薄くして項目名と分かるようにする(2026-10-24 オーナー指示。それまでは一段小さい --fs-1 で、字の頭をそろえるため 3px 下げていた) */
.notice dt { color: var(--color-ink-faint); font-size: var(--fs-2); }
.notice dd { margin: 0; }
/* 特徴の表のあとに続く追記(※更新情報)は、表から少し離す */
.notice dl + p { margin-top: 28px; }

/* ---------- メニュー ---------- */

/* メニューは白い板に載せる。板はタブの帯と同じ幅いっぱいに広げ、
   品名と価格の列は読みやすい720pxのままにする */
.menu-list {
  margin: 0;
  padding: 28px 32px;
  box-sizing: border-box;
  background: var(--color-surface);
  border-radius: var(--radius);
}
@media (max-width: 739.98px) {
  .menu-list { padding: 20px; }
}
.menu-group {
  list-style: none;
  margin: 0 0 30px;
  padding: 0;
  max-width: 720px;
}
.menu-group:last-child { margin-bottom: 0; }

/* 品名と価格を点線でつなぐ。地に点を敷き、文字の背景で隠す方式。 */
.menu-list li {
  display: flex;
  align-items: baseline;
  padding: 11px 0;
  background-image: radial-gradient(circle, var(--color-dot) 1px, transparent 1px);
  background-position: left bottom 14px;
  background-size: 6px 1px;
  background-repeat: repeat-x;
}
.menu-list li > span {
  background: var(--color-surface);
  font-family: var(--font-serif);
  font-size: 1.125rem;
  line-height: 1.5;
}
.menu-list li > span:first-child { padding-right: 10px; }
.menu-list li .price {
  margin-left: auto;
  padding-left: 10px;
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
  font-variant-numeric: tabular-nums;
}
.menu-list h4 {
  margin: 0 0 8px;
  padding-bottom: 8px;
  max-width: 720px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-serif);  /* 見出しなので明朝、太さはほかの見出しと同じ 600(2026-10-20 オーナー指示。それまではゴシック 400) */
  font-size: var(--fs-1);
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--color-ink-faint);
}

/* ---------- 写真 ---------- */

.photo-gallery {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
}
.photo-gallery__item {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 0;
  transition: filter var(--transition-base);
}
/* 押すと拡大表示する写真だけ(js/photo-viewer.js が role="button" を付ける。今はフーディー賞と言い伝えのページ)。
   店舗ページと YAMANO の写真は拡大しない(2026-10-19 オーナー指示で photo-viewer.js を読み込まなくした)ので、
   虫めがねのカーソルもカーソルを当てたときの寄せ方も付けない */
.photo-gallery__item[role="button"] { cursor: zoom-in; }
/* カーソルを当てると、写真を地の色(--color-bg)に 12% 寄せて少し白っぽくする。
   透かす(opacity)と、店舗ページで写真の後ろに敷いた縞の帯が透けて見えるので、透かさずに色の計算で描く。
   contrast(c) brightness(b) は「b×c×元の色 + b×(1−c)÷2」になるので、b×c = 0.88、b×(1−c)÷2 = 0.12×地の明るさ(#f4f0e7 で 0.935)にした。
   地の色を変えたら測り直す。白黒(.theme-night)と赤い画面(.theme-muted)は、写真の染め方の後ろに同じ寄せ方を足す(下の配色の塊) */
.photo-gallery__item[role="button"]:hover { filter: contrast(0.797) brightness(1.104); }
.photo-gallery__item:focus-visible {
  outline: 2px solid var(--color-teal);
  outline-offset: 2px;
}

@media (max-width: 480.98px) {
  /* 5枚は横に入らないので、横一列に並べて指でスクロールさせる。
     1枚を約4割の幅にし、右端で次の写真が切れて見えることで続きがあると分かるようにする。
     右側だけ画面の端まで伸ばす(本文の左右余白 --gutter ぶん)。 */
  .photo-gallery {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-right: calc(var(--gutter) * -1);
    padding-right: var(--gutter);
    scroll-padding-left: 0;
    scrollbar-width: none;
  }
  .photo-gallery::-webkit-scrollbar { display: none; }
  .photo-gallery__item {
    /* 画像は元の大きさより縮まない(min-width:auto)ので、幅を明示して 0 まで縮めるのを許す */
    flex: 0 0 42%;
    width: 42%;
    min-width: 0;
    aspect-ratio: 1 / 1;
    scroll-snap-align: start;
  }
}

/* 写真の拡大表示。外側(暗い部分)を押すと閉じる */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 110; /* 予約確認モーダル(100)より手前 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(var(--rgb-shade-3), 0.82);
  cursor: zoom-out;
  outline: none;
}
.photo-viewer__image {
  display: block;
  max-width: min(90vw, 1080px);
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: var(--shadow-lg);
  cursor: default;
}
/* display:flex が hidden 属性に勝ってしまうので、閉じた状態を明示する */
.photo-viewer[hidden] { display: none; }
/* 拡大表示のあいだは、後ろのページをスクロールさせない */
html.is-photo-open { overflow: hidden; }

/* ---------- 口コミ ---------- */

/* 口コミは1件ずつ白い板に載せ、要約の白い板のすぐ下から隙間なく続けて並べる。行どうしと、要約との間は1pxの罫で仕切る
   (パソコンもスマホと同じ白い板にし、要約との間の地の色の隙間はどちらも無くした。2026-09-30 オーナー指示)。
   板の幅と内側の左右の余白は要約の板と同じ。本文の行の長さは、白い板にする前の列の幅(メニューと同じ720px)まで */
.review {
  padding: 26px 32px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-line);
}
/* 口コミどうしの間の罫は、板の左右の端から 8px 内側で止める。要約との間の罫(1件めの上)は端から端まで(PC・スマホとも。2026-10-06 オーナー指示)。
   枠線は透明にして太さの分の高さを残し、罫は同じ位置(枠線の所)に背景で描く */
.review + .review {
  border-top-color: transparent;
  background: linear-gradient(var(--color-line), var(--color-line)) 8px 0 / calc(100% - 16px) 1px no-repeat border-box, var(--color-surface);
}
.review__header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
/* 頭文字の札。色分けはやめる(色は「押せる」「評点」「注意」に予約してある)。
   地より一段沈めるだけにする */
.review__avatar {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-deep);
  border: none;
  border-radius: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}
.review__author {
  font-size: 0.9375rem;
  font-weight: 700;
}
.review time { font-size: 0.75rem; color: var(--color-ink-faint); }
.review p {
  margin: 10px 0 0;
  max-width: 720px;
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  line-height: 2;
}

/* 星は琥珀。評点を表す唯一の色(文字の星は、地との濃さの比を取るため一段濃い --color-star) */
.stars {
  color: var(--color-star);
  font-weight: 400;
  letter-spacing: 2px;
}

/* ---------- 店舗ページ ---------- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 22px 0 30px;
  font-size: var(--fs-1);
  color: var(--color-ink-faint);
}
.breadcrumb__sep { color: var(--color-line); }
.breadcrumb__current { color: var(--color-ink-soft); }

/* 箱をやめ、罫と余白だけで組む */
.shop-header {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0 0 2px;
}
/* パンくずを置かない店舗ページ(RESTAURANT YAMANO。2026-10-02 オーナー指示)は、店名の高さを
   パンくずがあったときのまま残す(パンくずの高さ = 上 22px + 1行 + 下 30px を実測した値) */
.container > .shop-header:first-child { padding-top: 74px; }
@media (max-width: 739.98px) {
  .container > .shop-header:first-child { padding-top: 72px; }
}
.shop-header__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 18px;
  margin-bottom: 0;
}
.shop-header__title h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-7);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.shop-rating {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 26px;
  padding-bottom: 24px;
}
/* 評点は塗った札ではなく、数字そのものの大きさで示す */
.shop-rating__score {
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-sans);  /* 数値なのでゴシック(一覧・検索結果の評点と同じ。2026-10-20 オーナー指示。それまでは明朝) */
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: 1;
  padding: 0;
  border-radius: 0;
}
.shop-rating .stars {
  color: var(--color-star);
  font-size: var(--fs-3);
  font-weight: 400;
  letter-spacing: 2px;
  line-height: 1.4;
}
.shop-rating__count {
  font-size: var(--fs-1);
  color: var(--color-ink-faint);
  line-height: 2;
}

/* 予算・営業時間・本土からは、ひとまとまりの白い板に載せる */
.shop-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 24px 32px;
  background: var(--color-surface);
  border-radius: var(--radius);
}
.shop-facts__item {
  padding: 0 32px;
  border-left: 1px solid var(--color-line);
}
.shop-facts__item:first-child { padding-left: 0; border-left: none; }
.shop-facts__item:last-child { padding-right: 0; }
/* PC の店名の下の並びは、項目名 13.0625px(値より 1px 小さい)・値 14.0625px(2026-10-24 オーナー指示。それまでは 11.25px と 16.875px)。
   スマホは末尾の「一律 1px 小さくする」塊で別に決めている */
.shop-facts__label {
  font-size: calc(var(--fs-2) - 1px);
  letter-spacing: 0.14em;
  color: var(--color-ink-faint);
}
.shop-facts__value {
  font-size: var(--fs-2);
  font-weight: 400;
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 739.98px) {
  /* 横に3つ並べる幅がないので縦に積み、仕切りも横罫に変える */
  .shop-header__title h1 { font-size: var(--fs-5); }
  .shop-rating__score { font-size: var(--fs-5); }
  .shop-facts { grid-template-columns: 1fr; gap: 0; padding: 14px 20px; }
  .shop-facts__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 0;
    border-left: none;
    border-top: 1px solid var(--color-line);
  }
  .shop-facts__item:first-child { padding-top: 0; border-top: none; }
  .shop-facts__value { font-size: 1.0625rem; margin-top: 0; }
}

/* 定義の並び。白い板に載せ、行どうしは1pxの罫で分ける */
.info-table {
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 8px 28px;
}
.info-table__row {
  display: flex;
  gap: 28px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-2);
}
.info-table__row:last-child { border-bottom: none; }
/* 項目名(ジャンル・住所…)は値と同じ大きさ。色だけ薄くして項目名と分かるようにする(2026-10-24 オーナー指示。それまでは一段小さい --fs-1 で、字の頭をそろえるため 3px 下げていた) */
.info-table__label {
  width: 170px;
  flex-shrink: 0;
  font-size: var(--fs-2);
  color: var(--color-ink-faint);
}

@media (max-width: 480.98px) {
  .info-table { padding: 4px 20px; }
  .info-table__row { flex-direction: column; gap: 2px; padding: 13px 0; }
  .info-table__label { width: auto; }
}

/* 地図 */
.shop-map {
  display: flex;
  gap: 44px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}
.shop-map__figure {
  position: relative;
  flex: 1.4;
  min-width: 0;
  align-self: flex-start;  /* %指定のピンがずれないよう、画像の実寸に合わせる */
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px var(--color-line);
}
/* ピンの吹き出しは画像の外へはみ出すことがあるので、切り抜きは画像にだけかける */
.shop-map__figure img { border-radius: var(--radius); }
.shop-map__figure img { width: 100%; height: auto; display: block; }
/* 地図の端(PC は右、740〜1023px とスマホは下)を、まわりの面(--color-map-sea)に溶かす。
   地図の絵は端に近いほど海が少し明るく(右の端の真ん中で #b2d2db。面は #a7ced8)、境目が線になって見える(2026-10-21 オーナー指摘)。
   どの配色(ふだん・影・白黒・赤い画面)でも同じに効く。店の札(span)は img の外なので溶けない */
.shop-map__figure img {
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - 48px), transparent 100%);
}
@media (max-width: 1023.98px) {
  .shop-map__figure img {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent 100%);
  }
}
.shop-map__pin {
  position: absolute;
  transform: translate(-50%, calc(-100% - 8px));
  background: var(--color-danger);
  color: #fff;
  font-family: var(--font-serif);  /* 店名なので明朝(ほかの店名と同じ。2026-10-20 オーナー指示。それまでは字の指定がなくゴシック) */
  font-size: 0.75rem;
  font-weight: 700;
  /* 店名の文字を札の上下左右の真ん中に置く(2026-10-06 オーナー指示)。余白は上下 3px・左右 11px のまま、
     店ごとの文字のずれ(--pin-dx・--pin-dy。文字の大きさに対する割合。札の HTML の style に書く)の分だけ、向かい合う余白を差し引きする。
     ずれは字の形で決まる(英字の店名は約 0.09em、日本語の店名は約 0.05em 下に寄る。頭の「ト」「ビ」は左の空きが大きく右に寄る)。
     札を10倍にして、文字の外形の中心と札の中心を比べて測った(design-work\pin-center\measure.js。明朝にしたときは design-work\font-audit\pins.js で測り直した)。
     店名や書体を変えたら測り直す */
  padding: calc(3px - var(--pin-dy, 0em)) calc(11px + var(--pin-dx, 0em)) calc(3px + var(--pin-dy, 0em)) calc(11px - var(--pin-dx, 0em));
  border-radius: 0;
  white-space: nowrap;
}
.shop-map__pin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-danger);
}
.shop-map__body {
  flex: 1;
  min-width: 0;
  border-left: none;
  /* 住所を地図の上端に貼り付けず、表の一行ぶん下げて始める(オーナー指定) */
  padding: 56px 0 0;
}
.shop-map__row {
  display: flex;
  gap: 28px;
  padding: 15px 4px;
  border-bottom: 1px solid var(--color-line);
  font-size: var(--fs-2);
}
.shop-map__row:first-child { padding-top: 0; }
.shop-map__row:last-of-type { border-bottom: none; }
/* 地図の横の項目名(住所・港から・本土から)は値と同じ大きさ。色だけ薄くする(2026-10-24 オーナー指示。それまでは一段小さい --fs-1 で、字の頭をそろえるため 3px 下げていた)。
   スマホは末尾の「一律 1px 小さくする」塊で別に決めている */
.shop-map__label {
  width: 120px;
  flex-shrink: 0;
  font-size: var(--fs-2);
  color: var(--color-ink-faint);
}
.shop-map__value { font-weight: 400; }

@media (max-width: 739.98px) {
  .shop-map { flex-direction: column; gap: 22px; }
  .shop-map__figure { align-self: stretch; }
  .shop-map__body { border-left: none; border-top: none; padding-top: 0; }
  /* 見出しの幅を固定したままだと値が不自然に字下げされるので、縦に積む */
  .shop-map__row { flex-direction: column; gap: 2px; padding: 13px 0; }
  .shop-map__label { width: auto; padding-top: 0; }
}

/* 口コミの要約 */
.review-summary {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 32px;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: none;
  padding: 28px 32px;
  margin-bottom: 0;
}
.review-summary__score {
  flex-shrink: 0;
  text-align: center;
  padding-right: 32px;
  border-right: 1px solid var(--color-line);
}
.review-summary__average {
  font-family: var(--font-sans);  /* 数値なのでゴシック(店名の下の評点と同じ。2026-10-20 オーナー指示。それまでは明朝) */
  font-size: var(--fs-7);
  font-weight: 700;
  line-height: 1;
  color: var(--color-ink);
}
.review-summary__stars {
  color: var(--color-star);
  font-weight: 400;
  letter-spacing: 2px;
  margin-top: 6px;
  display: block;
}
.review-summary__count { font-size: 0.75rem; color: var(--color-ink-faint); }
.review-summary__bars { flex: 1; min-width: 0; max-width: 420px; }

.review-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 6px;
}
.review-bar:last-child { margin-bottom: 0; }
.review-bar__label { width: 34px; flex-shrink: 0; font-size: 0.75rem; color: var(--color-ink-faint); }
.review-bar__track {
  flex: 1;
  height: 7px;
  background: var(--color-track);
  border-radius: 0;
  overflow: hidden;
}
/* 評点の分布はすべて琥珀。低い評価は「注意」ではないので朱にしない */
.review-bar__fill { display: block; height: 100%; background: var(--color-accent); }
.review-bar--low .review-bar__fill { background: var(--color-accent); }
.review-bar__count {
  width: 22px;
  flex-shrink: 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--color-ink-soft);
}

@media (max-width: 480.98px) {
  .review-summary { gap: 24px; padding: 22px 20px; }
  .review-summary__score { padding-right: 24px; }
  .review-summary__average { font-size: var(--fs-6); }
}

/* アンカー移動時に、貼り付いたヘッダーの下に節の先頭が隠れないよう余白を取る
   (節の目次のタブは 2026-10-01 オーナー指示で全幅で外したので、ヘッダー + 余白 8px だけ) */
body[data-page="restaurant"] .section[id] {
  scroll-margin-top: calc(var(--header-height) + 8px);
}
@media (max-width: 739.98px) {
  /* 受付行はこれまで通り一番上に置く。__side は入れ物としての役割だけなので
     display:contents で外し、中の2つを直接 __inner の子として並べる。 */
  .site-header__inner { display: flex; flex-direction: column; }
  .site-header__side { display: contents; }
  .site-header__account { order: -1; margin-bottom: 10px; }
}

@media (max-width: 739.98px) {
  body[data-page="restaurant"] .section[id] {
    /* 逃がすのはヘッダーの高さだけでよい */
    scroll-margin-top: var(--header-height);
  }
}

/* ---------- ご予約状況 ---------- */

.availability-scroll {
  overflow-x: auto;
  margin-bottom: 10px;
  /* 白い板はタブの帯と同じ幅いっぱいに広げ、表は左に寄せて中身の幅で置く。
     画面が狭いときは中の表が横にあふれてスクロールする(モバイルの挙動は従来どおり)。 */
  max-width: 100%;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: 4px 20px;
}

.availability-table {
  /* 罫はマスごとに描く(横罫だけなので、1本にまとめる collapse と見た目は同じ)。collapse だと、
     貼り付けた「時間」のマスの下の線を表の側が描くので、スマホで横に送ったときに線が消えることがあり(Safari など)、
     「時間」の列の右の縦線(下の影)も描かれない(Chrome)。2026-10-05 オーナー指摘・指示 */
  border-collapse: separate;
  border-spacing: 0;
  /* 幅いっぱいに引き伸ばさない。セルは white-space: nowrap なので、
     中身に必要なぶんの幅で収まる。 */
  width: auto;
  font-size: 0.875rem;
}

/* 縦罫を落とし、横罫だけで読ませる。全セルを囲むと格子が主役になってしまう。 */
.availability-table th,
.availability-table td {
  border: none;
  border-bottom: 1px solid var(--color-line);
  padding: 11px 10px;
  text-align: center;
  white-space: nowrap;
}
.availability-table tbody tr:last-child th,
.availability-table tbody tr:last-child td { border-bottom: none; }

/* スマホでは表が横にはみ出す。右へスクロールしてもどの行が何時なのか
   分かるよう、左端の「時間」列を貼り付ける。 */
.availability-table thead th:first-child,
.availability-table tbody th {
  position: sticky;
  left: 0;
  background: var(--color-surface);
}
.availability-table tbody th { z-index: 1; }
.availability-table thead th:first-child { z-index: 2; }
/* 「時間」の列と日付の列の間の縦線(1本。PC・スマホとも)。色は見出しの下の横線と同じ緑 --color-rule-ok
   (2026-10-07 オーナー指示。はじめは墨、次に墨より少し薄い --color-ink-soft だった)で、
   見出しの行の上の端から最後の行の下の端まで、マスの高さぶん全部に引く(2026-10-07 オーナー指示。その前は上下の端から
   16px ずつ短くしていた。2026-10-05 オーナー指示で 8px、さらに 8px 短くしたもの)。
   貼り付いたマスでは border が描画されないことがあるので、マスの右の端のすぐ外に幅 1px の棒を重ねて描く。
   見出しの行の棒は下の横線に、時刻の行の棒は上の横線と次の行の棒にそのままつながる(十字になる) */
.availability-table thead th:first-child::after,
.availability-table tbody th::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: -1px;  /* 行の下の薄い横線の上も通して、次の行の棒とつなぐ */
  right: -1px;
  width: 1px;
  background: var(--color-rule-ok);
  pointer-events: none;
  /* 画面の点の境目に乗るよう、1px 未満だけ横にずらす。量は js/reservation-render.js の snapTimeRule() が測って入れる
     (表示を 125%・150% などに拡大していると、幅によって線が濃く見えたり薄く見えたりしたため。2026-10-06 オーナー指摘) */
  transform: translateX(var(--rule-shift, 0px));
}
.availability-table thead th:first-child::after { bottom: 0; }  /* 見出しの行は、下の横線の上の端で止める */
.availability-table tbody tr:last-child th::after { bottom: 0; }  /* 最後の行は下に線がないので、行の下の端で止める */

.availability-table thead th {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-rule-ok);  /* 十字の線の横。色は :root の --color-rule-ok(緑) */
  color: var(--color-ink-faint);
  font-size: 0.75rem;
  font-weight: 400;
}
/* 日付の見出しの左右の余白は 8px(はじめは 10px。PC・スマホとも。「時間」の見出しは今のまま)。書体を Noto Sans JP にして
   数字が広くなり、日付1つが約 44 → 48px になったので、2026-10-10 オーナー指示で日付の列を 4px ずつ細くした(7日分で 28px)。
   PC は 1024〜1229px で時刻を選んだあとの表が欄から約 11px はみ出していた。スマホは横に流さずに収まる幅が 578px からに上がっていた。
   表が欄より広いときだけ効き、欄いっぱいに伸びているときは列の幅は変わらない */
.availability-table thead th:not(:first-child) { padding-left: 8px; padding-right: 8px; }
.availability-table tbody th {
  /* 見出しの「時間」と時刻を同じ中央ぞろえにする。
     ここだけ左ぞろえだと、上の「時間」が右にずれて見える。 */
  width: 82px;
  color: var(--color-ink-soft);
  font-weight: 400;
}

/* 満席は「異常」ではなく既定の状態なので、朱では示さない */
.availability-table td.is-full {
  color: var(--color-ink-faint);
  font-weight: 400;
}
/* まだコースと時刻を選んでいないときの伏せ字(ハイフン)。× と同じ見た目にそろえる */
.availability-table td.is-blank {
  color: var(--color-ink-faint);
  font-weight: 400;
}
/* 空いている枠だけが藍緑。押せるものが藍緑、という規則をここでも保つ */
.availability-table td.is-available {
  color: var(--color-teal);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition-base);
}
/* カーソルを当てた枠の地は、ほかの行や面と同じ一段沈めた生成りにそろえる */
@media (min-width: 1024px) and (hover: hover) { .availability-table td.is-available:hover { background: var(--color-bg-deep); } }

.availability-note {
  font-size: var(--fs-1);
  color: var(--color-ink-faint);
  margin: 0;
}

/* 空席検索。予約サイトの「日時を選んで空席を確認する」欄の体裁にそろえる。
   入力欄の高さはヘッダーの検索窓(44px)と同じにする。 */
.availability-search {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px 16px;
  margin: 20px 0 0;
}
.availability-search__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.availability-search__label {
  font-size: var(--fs-1);
  color: var(--color-ink-soft);
}
.availability-search select,
.availability-search input[type="text"] {
  height: 44px;
  padding: 0 12px;
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-base);
}
.availability-search select {
  min-width: 9em;
  /* 文字の左余白(オーナー指定で詰めた)。矢印はブラウザ既定のまま */
  padding-left: 6px;
}
.availability-search input[type="text"] { width: 9em; }
/* キーボードの Tab で来たときだけ、縁を緑にして薄い緑をにじませる(受付のお名前の欄と同じ見た目。2026-10-21 オーナー指示)。
   マウスや指で押したときは出さない。ブラウザは選択欄を押したときも :focus-visible にするので CSS だけでは見分けられず、
   js/main.js が Tab キーで <html> に付ける is-keyboard で見分ける。
   店舗ページの縁の色の指定(PC は body[data-page="restaurant"] …、スマホは html:not(.is-final) body[data-page="restaurant"] …)に
   必ず勝つよう :not(#_) で重みを足す(以前は .availability-search select:focus で緑にしていたが、その指定に負けて何も出ていなかった) */
html.is-keyboard:not(#_) .availability-search select:focus,
html.is-keyboard:not(#_) .availability-search input[type="text"]:focus { border-color: var(--color-teal); box-shadow: 0 0 0 3px var(--color-focus-halo); }
.availability-search .btn-primary {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  border-radius: 4px; /* 検索窓と同じく少しだけ角を落とす(2026-10-01 オーナー指示) */
}
/* ボタンと隣の「来店時刻」の間は、欄どうしより少し広く空ける(2026-10-02 オーナー指示)。
   ボタンの左に付けると、幅が足りずボタンが次の行に下りたときに字下げになるので、欄の右に付ける */
label.availability-search__field:last-of-type { margin-right: 8px; }

/* 結末へ向かう予約が開いたあとは、選んだ内容のまま動かせなくする
   (js/reservation-render.js が .is-locked を付ける)。灰色に沈めると
   何を選んだのか読めなくなるので、色は通常のまま据え置く */
.availability-search.is-locked select,
.availability-search.is-locked .btn-primary {
  opacity: 1;
  cursor: default;
}
.availability-search.is-locked select {
  color: var(--color-ink);
  background-color: var(--color-surface);
  -webkit-text-fill-color: var(--color-ink);
}

/* 検索の返答。店の案内として一文で返し、正誤のようには見せない */
.availability-result {
  min-height: 1.8em; /* 空のときも高さを確保し、返答が出た瞬間に表が跳ねないようにする */
  margin: 12px 0 14px;
  font-size: var(--fs-2);
  color: var(--color-ink-soft);
}
.availability-result.is-available { color: var(--color-teal); font-weight: 700; }
.availability-result.is-error { color: var(--color-danger); }
/* スマホでは返答がいちばん長いとき2行になり(「肉コースの 20:00 は、いずれの日も満席です。…」・360〜739px で測った)、
   1行分の高さでは文が出た瞬間に表が下がった(2026-10-05 オーナー指摘)。はじめから2行分(行の高さ 1.75 × 2)を取っておく。
   字の大きさが返答の種類で変わる(「一律 1px 小さくする」塊)ので、em でなく本文の大きさ(--fs-2)から数える */
@media (max-width: 739.98px) {
  .availability-result { min-height: calc(var(--fs-2) * 3.5); }
}

/* 満席の案内で「この枠が近い」と示す印。地は淡い赤(はじめはホバーと同じ色。ホバーは 2026-10-04 に一段沈めた生成りへ変えた) */
.availability-table td.is-focus {
  background: var(--color-danger-tint);
}

/* × から ○ に変わった枠を、一度だけ知らせる */
.availability-table td.is-revealed {
  animation: availability-reveal 1.6s ease-out;
}
@keyframes availability-reveal {
  0%   { background: var(--color-danger-tint); }
  100% { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .availability-table td.is-revealed {
    animation: none;
    background: var(--color-danger-tint);
  }
}

@media (max-width: 480.98px) {
  /* 日付と時刻を横に並べ、ボタンだけ次の行で幅いっぱいにする */
  .availability-search__field { flex: 1 1 0; min-width: 0; }
  .availability-search select,
  .availability-search input[type="text"] { width: 100%; min-width: 0; }
  .availability-search .btn-primary { flex: 1 1 100%; }
  label.availability-search__field:last-of-type { margin-right: 0; }
}

/* ---------- 予約確認モーダル ---------- */

/* クラス名と表示の切り替え方は js/reservation-render.js に合わせること。
   作られるのは __overlay / __dialog / __body / __actions、開閉は .is-open。 */
.reservation-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
}
.reservation-modal.is-open {
  /* 上下左右とも画面の中央に置く。背が低い画面では上下16pxを残して中でスクロールさせる */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}

.reservation-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(var(--rgb-shade-3), 0.55);
}

/* 本当に浮いているものなので、ここだけは影を使う。
   角は少しだけ落とす(丸くはしない。予約確認・ログアウトの確認とも。2026-10-01 オーナー指示)。
   中のボタンは角を落とさず、ほかのボタンと同じ四角のまま(同日オーナー指示) */
.reservation-modal__dialog {
  position: relative;
  width: 100%; /* 左右の余白は外側の padding(16px) が受け持つ */
  max-width: 440px;
  margin: auto; /* 画面より背が高いときに上端が切れないよう、中央寄せは auto で行う */
  background: var(--color-surface);
  border: none;
  border-radius: 6px;
  box-shadow: var(--shadow-lg);
  padding: 32px 30px 28px;
}

.reservation-modal__body p {
  margin: 0 0 14px;
  max-width: none;
  font-size: var(--fs-2);
  line-height: 1.9;
}
.reservation-modal__body p:last-child { margin-bottom: 0; }
/* 予約確認の問いかけも、店名・日時も中央ぞろえ(2026-10-01 オーナー指示)。
   文は js/reservation-render.js の openModal */
.reservation-modal__body .reservation-modal__question,
.reservation-modal__body .reservation-modal__detail { text-align: center; }
.reservation-modal__body strong {
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 700;
}

/* ボタンは中央ぞろえ(予約確認・ログアウトの確認とも。2026-10-01 オーナー指示) */
.reservation-modal__actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
  flex-wrap: wrap;
}
/* 予約確認では、「確定する」を「キャンセル」と同じ幅にそろえる(2026-10-06 オーナー指示。はじめはスマホで 114px と 127px、
   PC で 118px と 132px。はじめにスマホ、同日 PC も)。同じ幅の列を2つ並べ、列の幅を広いほうのボタンに合わせる。
   ログアウトの確認(.confirm-modal)は今のまま(PC では2つとも 132px でそろっている) */
.reservation-modal:not(.confirm-modal) .reservation-modal__actions {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  width: max-content;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 検索結果 ---------- */

/* 件数の行は、一覧の説明文(.page-header p.lead)と同じ位置・同じ見た目。検索した言葉だけ墨にする */
.search-summary strong { color: var(--color-ink); }

/* 結果の1件は、店なら掲載店舗一覧の .shop-list、お知らせならお知らせ一覧の .notice--linked をそのまま使う
   (2026-09-30 オーナー指示。js/search-render.js)。お知らせ一覧だけの形は、下の「お知らせ一覧の行」の塊で
   body[data-page="search"] にも効かせている。店とお知らせが一度に出たときは、店の下にお知らせを置く */
.shop-list + .search-notices { margin-top: 32px; }

.no-results {
  padding: 60px 0;
  color: var(--color-ink-soft);
}

/* 手がかりの一覧 */
.clue-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 0;
  border-bottom: 1px solid var(--color-line);
}
.clue-item .num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-teal);
  color: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.8125rem;
}
.clue-empty-slot .num { border-color: var(--color-line); color: var(--color-ink-faint); background: transparent; }
.clue-empty-slot { opacity: 0.6; }

/* ---------- トップページの地図とACCESS ---------- */

/* 地図は白い板と同じ角(--radius)で切り抜き、帯の色と見分けがつくよう細い輪郭だけ添える */
.map-frame {
  max-width: 720px;
  margin: 0 auto;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(var(--rgb-shade-2), 0.08);
  overflow: hidden;
}
.map-frame { position: relative; }
.map-frame img {
  display: block;
  width: 100%;
  height: auto;
}
/* 地図上の番号。右(スマホでは下)の店の一覧と同じ番号を振る */
.map-frame__marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 26px;
  height: 26px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--color-teal);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  line-height: 1;
  /* 数字を丸の真ん中に置く。行の上下を数字の高さ(大文字の高さから並び線まで)で切ってから、上下・左右の中央に置く。
     flex で中央に寄せていたときは、フォントの上下の空きの差で、どの数字も約 1px 下にずれていた(2026-10-05 オーナー指摘)。
     text-box は flex の中の文字には効かないので、ブロックのまま align-content で上下の中央に置く。
     text-box に対応していないブラウザでは、今までどおり(約 1px 下)になる */
  display: block;
  text-align: center;
  align-content: center;
  text-box: trim-both cap alphabetic;
  box-sizing: border-box;
  /* 丸と数字を同じ層で一緒に描かせる。別々に描くと、丸は 1px 単位の位置に寄せて描かれ、数字は寄せられないので、
     印の位置(地図の幅の割合)の端数しだいで、数字だけ 1px 下に見える印が幅ごとに出る(外すと 740〜1920px の 20px 刻み 60 通りのうち 10 通りと、
     スマホ 375px の印 2・5 でずれる。2026-10-20 測定)。数字のふちは色のにじみから灰色のにじみに変わるが、等倍でもほぼ分からない */
  will-change: transform;
}


/* 地図の横の店の一覧(掲載店舗ページと同じ並び)。墨を薄めた罫で行を分ける
   (以前は淡い海色の帯の上にあったため。2026-09-28 から島の地図は紙色の地だが、罫はそのまま見えるので変えていない) */
.map-shops {
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
}
.map-shops li { border-bottom: 1px solid rgba(var(--rgb-shade-2), 0.12); }
.map-shops a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 52px;
  color: var(--color-ink);
  text-decoration: none;
  transition: color var(--transition-base);
}
.map-shops a:hover { color: var(--color-teal); }
/* パソコンでは、押せるほかの行と同じく、カーソルを当てた行に地の色を付ける(2026-09-26 オーナー指示。色は 2026-10-04 から一段沈めた生成り)。
   行の内側に左右 12px とって同じだけ外へ広げ、文字の位置は変えずに地だけを番号と所要時間の外まで出す。
   地の色はPC(1024px 以上・hover: hover)だけ。行の広げ方も 1024px から(740〜1023px の地図の部分はスマホと同じ形。2026-10-05 オーナー指示) */
@media (min-width: 1024px) {
  .map-shops a { margin: 0 -12px; padding: 0 12px; transition: color var(--transition-base), background var(--transition-base); }
}
@media (min-width: 1024px) and (hover: hover) {
  .map-shops a:hover { background: var(--color-bg-deep); }
}
.map-shops__num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-teal);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  line-height: 1;
  /* 数字を丸の真ん中に置く(上の .map-frame__marker と同じ) */
  display: block;
  text-align: center;
  align-content: center;
  text-box: trim-both cap alphabetic;
}
/* 最長の「トラットリア・ヴォンゴラ」が1行に収まるよう、字間は詰め気味にする */
.map-shops__name { flex-grow: 1; font-family: var(--font-serif); font-size: 1rem; letter-spacing: 0.02em; }

.access {
  margin-top: 40px;
  font-size: 0.9375rem;
  color: var(--color-ink-soft);
}
/* 一文を一行に収めたいので、本文共通の行長(--measure)の制限を外す。
   入りきらない画面幅では、文節の切れ目で折り返させる
   (「ご注/意ください」のように語の途中で割れるのを防ぐ)。 */
.access p {
  max-width: none;
  word-break: auto-phrase;
  line-break: strict;
}
.access h2 {
  margin: 0 0 10px;
  padding-top: 0;
  border-top: none;
  font-family: var(--font-sans);  /* ゴシック(いちど明朝にしたが、2026-10-20 オーナー指示でゴシックに戻した) */
  font-size: var(--fs-1);
  font-weight: 400;
  letter-spacing: 0.16em;
  color: var(--color-ink-faint);
}
@media (max-width: 480.98px) {
  .map-shops a { gap: 12px; }
  .map-shops__name { font-size: 0.9375rem; }
}
.access p + p { margin-top: 10px; }

/* PC(1024px 以上)では地図の右に店の一覧とACCESSを並べる。スマホと 740〜1023px は上の指定のまま縦に積む
   (はじめは 740px から並べていたが、2026-10-05 オーナー指示で 1023px 以下はスマホと同じ形にした) */
@media (min-width: 1024px) {
  .map-access {
    display: grid;
    /* 狭いパソコン幅では右の列を340px残し(店名と所要時間が1行に収まる幅)、地図のほうを縮める */
    grid-template-columns: minmax(0, 600px) minmax(340px, 1fr);
    /* 地図と右の列を離して、それぞれを見分けやすくする(狭い画面では縮める) */
    gap: clamp(48px, 8vw, 96px);
    align-items: start;
  }
  .map-access .map-frame { max-width: none; margin: 0; }
  .map-shops { margin-top: 0; }
}

/* ---------- メッセージ(予約の確認メッセージの受信箱) ---------- */

.message-owner {
  margin: 0;
  font-size: var(--fs-1);
  color: var(--color-ink-faint);
}

/* 予約を確定した直後だけ出す完了の案内。藍緑を薄めた地と文字色で「済んだこと」を示す */
.message-notice {
  margin: 8px 0 0;
  padding: 20px 24px;
  background: var(--color-teal-tint);
  border-radius: var(--radius);
}
.message-notice__title {
  margin: 0;
  max-width: none;
  font-family: var(--font-serif);
  font-size: var(--fs-4);
  font-weight: 700;
  color: var(--color-teal);
}
.message-notice__text {
  margin: 6px 0 0;
  max-width: none;
  font-size: var(--fs-2);
  color: var(--color-ink-soft);
}
/* PC では、1行に入らない幅になったら文の切れ目(「。」)で改行する。2つの文をそれぞれひとまとまりにして折り返す
   (2026-10-06 オーナー指示。はじめは 900px で「す。」だけが2行目に落ちるなど、文の途中で折れていた)。
   スマホは1つめの文も1行に入らず、まとめると「た。」だけの行ができるので、今までどおり続けて流す */
@media (min-width: 740px) {
  .message-notice__sentence { display: inline-block; }
}

.message-section { padding-top: 26px; }

/* 受信箱は白い板に載せ、一通ずつ横罫で区切る。開閉は <details> に任せる。
   板にするのはメッセージが並んでいるときだけ(結末の手紙の画面や、空の案内には敷かない) */
.message-list:has(> .message) {
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
}
.message + .message { border-top: 1px solid var(--color-line); }

.message__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding: 18px 16px 18px 40px;
  position: relative;
  list-style: none;
  cursor: pointer;
  transition: background var(--transition-base);
}
.message__summary::-webkit-details-marker { display: none; }
@media (min-width: 1024px) and (hover: hover) { .message__summary:hover { background: var(--color-bg-deep); } }
/* 開閉の向きを示す小さな矢印。開くと下を向く */
.message__summary::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-right: 1.5px solid var(--color-ink-soft);
  border-bottom: 1.5px solid var(--color-ink-soft);
  transform: rotate(-45deg);
  transition: transform var(--transition-base);
}
.message[open] > .message__summary::before { transform: rotate(45deg); }

.message__from {
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 600;
  color: var(--color-ink);
}
.message__subject {
  font-size: var(--fs-2);
  color: var(--color-ink-soft);
}

.message__body { padding: 6px 16px 28px 40px; }
.message__to {
  margin: 0 0 14px;
  font-family: var(--font-serif);
  font-size: var(--fs-2);
}
.message__booking {
  display: grid;
  grid-template-columns: 4em 1fr;
  gap: 6px 12px;
  margin: 0 0 18px;
  font-size: var(--fs-2);
  /* ご予約確定のお知らせの「店舗／日時」と、本文の中の「お日にち／お時間／店舗／人数」は、項目名も値も本文と同じ明朝にする。
     「数値とラベルはゴシック」の決まりの例外(2026-10-24 オーナー指示。ゴシックの値が明朝の本文の中で大きく濃く見えたため)。
     結末の手紙の同じ並び(.final__booking)は別の指定で、ゴシックのまま */
  font-family: var(--font-serif);
}
.message__booking dt { color: var(--color-ink-faint); font-size: var(--fs-1); padding-top: 2px; }
.message__booking dd { margin: 0; }
.message__text {
  position: relative;
  /* 上の線から本文までは字の 1.6 倍(2026-10-24 オーナー指示。もとは 16px。段落の間を広げたら、ここだけ詰まって見えたため) */
  padding-top: 1.6em;
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  /* 行の高さは、お知らせの記事(フーディー賞のページなど)と同じ 2 倍(2026-10-24 オーナー指示。もとは 1.9) */
  line-height: 2;
}
/* 本文の上の線は、右端の空きを左端の空きにそろえる(2026-10-01 オーナー指示)。
   文の幅は変えず、線だけを右から縮める。縮める量 = 本文の左の余白 − 右の余白
   (.message__body の padding。パソコン 40px − 16px。スマホは左右とも 12px なので縮めない。
   2026-10-07 オーナー指示で本文を画面の端から 12px に寄せるまでは 32px − 12px で、20px 縮めていた)。
   余白を変えたらここも測り直す。はじめは予約確定のお知らせだけで、結末のごあいさつ(.message--credit)は
   線を右端まで引いていたが、2026-10-05 オーナー指示で全部の行を予約確定のお知らせにそろえた */
.message__text::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 24px;
  border-top: 1px solid var(--color-line);
}
@media (max-width: 739.98px) {
  .message__text::before { right: 0; }
}
/* 段落の間は、お知らせの記事(フーディー賞のページなど)と同じ PC 3.3 行分・スマホ 2.5 行分(下の @media)。
   2026-10-24 オーナー指示で、2.2 行分から広げた。本文の中の「お日にち／お時間／店舗／人数」の並びの下も同じだけ空け、
   上(前の段落の下の空き)とそろえる。並びの下ではなく次の段落の上で空けるのは、スマホでは段落の字だけを小さくしていて
   (「一律 1px 小さくする」塊)、並びの em で空けると段落の行分とずれるため。
   結末のごあいさつ(.message--credit)も同じ本文の作りなので、同じ広さになる。記事の段落の間を変えたら、ここも合わせる */
.message__text p { margin: 0 0 3.3em; }
.message__text p:last-child { margin-bottom: 0; }
.message__text .message__booking { margin-bottom: 0; }
.message__text .message__booking + p { margin-top: 3.3em; }
/* ごあいさつの中の作者サイトへのリンク「押原一香.com」(js/puzzle-data.js の ENDING_CREDIT)。
   フッターの「作者サイトはこちら」と同じ装い(薄い墨の字に 1px の下線、カーソルで緑)。全体の a(緑・下線なし)より強い指定。
   ログアウトの変数(--color-signout 〜)は :root で決まった値のまま受け継ぐので、平尾和也の影(html.is-marked)のときに
   ごあいさつの行だけ色を戻す指定(html.is-marked .message--credit)が効かない。ここでは行が戻す変数そのもの(--color-ink-soft 〜)で書く。
   「押原一香.com」は途中で折らない */
.message--credit .message__text a {
  color: var(--color-ink-soft);
  border-bottom: 1px solid rgba(var(--rgb-shade), 0.35);
  white-space: nowrap;
}
.message--credit .message__text a:hover {
  color: var(--color-teal);
  border-bottom-color: var(--color-teal);
}
/* ごあいさつの最後の「Xはこちら →」と X の印(js/puzzle-data.js)。字は押せないただの字で、印(オーナーからもらった角丸の四角)だけがリンク。
   印の大きさは下の --x-badge の 1 か所で変える(押し場所の広げ方も付いてくる)。
   四角は字の色(currentColor → --color-ink)、中の X は板の色(--color-surface)で、平尾和也の影のときも行が戻す色に乗る。カーソルで四角が緑。
   上の a の下線は外す。押し場所は見た目を変えずに ::before で 44px 四方に広げる(印が 44px より大きいときは広げない)。
   字と印の行(.message__x)は一文の次の行に置き、一文との間を字 1 つ分(margin-top 1em)空ける(2026-10-28 オーナー指示で、改行だけの詰まった形から広げた) */
.message--credit .message__text .message__x { display: flex; align-items: center; gap: 0.5em; margin-top: 1em; }
.message--credit .message__text .message__x-link {
  --x-badge: 32px;
  position: relative;
  display: block;
  color: var(--color-ink);
  border-bottom: none;
}
.message--credit .message__text .message__x-link::before { content: ""; position: absolute; inset: min(0px, calc((var(--x-badge) - 44px) / 2)); }
.message--credit .message__text .message__x-link svg { display: block; width: var(--x-badge); height: var(--x-badge); }
.message--credit .message__text .message__x-link:hover { color: var(--color-teal); }
/* 差出人の行の肩書き「（元「RESTAURANT YAMANO」総料理長）」(js/puzzle-data.js)は、ひとかたまりで折る。
   入りきらない幅(スマホ)では肩書きの前で改行し、肩書きは1行で出す(2026-10-24 オーナー指示。「長）」だけが次の行に落ちていた)。
   文面は予約を確定した時点で受信箱に保存されるので、それより前に届いたメッセージには掛からない */
.message__sender-role { display: inline-block; }

.message-empty {
  padding: 40px 0;
  color: var(--color-ink-soft);
}

@media (max-width: 739.98px) {
  .message__summary { padding: 16px 4px 16px 28px; }
  .message__summary::before { left: 6px; }
  .message__body { padding: 4px 4px 24px 28px; }
  .message__text p { margin-bottom: 2.5em; }
  .message__text .message__booking + p { margin-top: 2.5em; }
}

/* ---------- Buttons (共通) ---------- */

/* 五つの状態をすべて決める。角は入力欄と同じ 6px にそろえる */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: 14px 30px;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-base);
}

.btn-primary {
  background: var(--color-teal);
  color: #fff;
  border: 1px solid var(--color-teal);
}
.btn-primary:hover { background: var(--color-teal-deep); border-color: var(--color-teal-deep); }
.btn-primary:active { background: var(--color-teal-deep); border-color: var(--color-teal-deep); transform: translateY(1px); }
.btn-primary:disabled {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-disabled-ink);
  cursor: not-allowed;
  transform: none;
}

/* 面を持たず、輪郭だけ。押すと地と文字が入れ替わる */
.btn-secondary {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-ink);
}
.btn-secondary:hover { background: var(--color-ink); color: var(--color-bg); }
.btn-secondary:active { background: var(--color-ink); color: var(--color-bg); transform: translateY(1px); }
.btn-secondary:disabled {
  border-color: var(--color-disabled);
  color: var(--color-disabled-ink-2);
  background: transparent;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn-primary,
  .btn-secondary,
  .menu-toggle { transition: none; }
  .btn-primary:active,
  .btn-secondary:active,
  .menu-toggle:active { transform: none; }
}

/* ---------- Intro (初回お知らせ画面) ---------- */

.intro-page main {
  padding: 56px 0 80px;
}
/* 同上。main を付けてヘッダーを巻き込まないようにする */
/* 本文の幅は 696px で固定し、左右の余白(--gutter)はその外に足す。
   余白を含めた固定値にすると、余白を広げたぶんだけ本文が細くなるため。
   696px は、白い板の内側(左右 48px を引いた 600px)が文章の行長(--measure = 40em)と
   ちょうど同じになる幅。これより広げても文章は 40em で折り返すので右が空くだけになる */
.intro-page main .container { max-width: calc(696px + var(--gutter) * 2); }
/* 題名の下に罫を引いて本文と切り分け、段落と段落の間も空ける(オーナー指定) */
.intro-page .notice h3 {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--color-line);
}
.intro-page .notice h3 + p { margin-top: 24px; }
.intro-page .notice p + p { margin-top: 28px; }
/* 文章の行長(40em)の制限を外して白い板の内側いっぱいに流し、右の余白を左(48px)とそろえる。
   40em のままだと文字の大きさ次第で板より手前で折り返し、右だけ広く空く */
.intro-page .notice p { max-width: none; }
.intro-page .intro-label {
  font-size: var(--fs-1);
  letter-spacing: 0.16em;
  color: var(--color-ink-faint);
  margin: 0 0 20px;
}
.intro-page .intro-actions {
  margin-top: 36px;
  /* 「閉じる」は本文の幅の中央に置く。p の行長制限(40em)が残っていると、
     本文より狭い箱の中央になって左に寄るので外す */
  max-width: none;
  text-align: center;
}

/* ---------- Footer ---------- */

/* 帯より一段濃い灰緑の面。罫ではなく地の色で本文と切り分ける */
.site-footer {
  margin-top: 80px;
  background: var(--color-footer);
  color: var(--color-ink-soft);
  font-size: var(--fs-1);
  text-align: left;
}
/* トップページは最後の節(島の地図)が帯なので、帯とフッターを隙間なく続ける */
body[data-page="index"] .site-footer { margin-top: 0; }

/* 店名と注記は横に並べず、上から一列に積んで左端にそろえる。
   横並びだと幅によって注記が細い柱に押し込まれ、語の途中で折り返される。
   文字は左詰めのまま、まとまりごと中央へ寄せる(オーナー指定)。
   幅を中身に合わせて左右を auto にし、左右の余白は本文(--gutter)の1.5倍を最低限とる。 */
.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  width: fit-content;
  margin: 0 auto;
  /* いちばん下は 56 → 32px(2026-10-05 オーナー指示)→ 24px(2026-10-07 オーナー指示。一度 16px にしてから 24px に)に詰めた。PC はどの幅でも同じ値。
     スマホは下の 739.98px の塊で別に決めている */
  /* いちばん上は 48 → 36px(2026-10-09 オーナー指示)。PC はどの幅でも同じ値 */
  padding: 36px calc(var(--gutter) * 1.5) 24px;
  text-align: left;
}

/* 店名と著作権表示の2行は中央にそろえる。注記はスマホでは左詰め、740px 以上では中央(下の注記の指定) */
.site-footer__brand {
  align-self: center;
  text-align: center;
}

.site-footer__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--fs-3);
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}
/* 店名との間は 8px(はじめは 4px。2026-10-05 オーナー指示で、PC・スマホとも少しだけ空けた) */
.site-footer__copy {
  margin: 8px 0 0;
  font-size: var(--fs-1);
  color: var(--color-ink-soft);
}

/* フィクションである旨の注記。本文より一段小さく、控えめに置く。
   セレクタを p 付きにしているのは、上の `.site-footer p { max-width: none }`
   と同じ詳細度にして行長の制限を効かせるため。 */
p.site-footer__notice {
  max-width: none; /* 折り返し位置は下の span 側で決める */
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--color-ink-soft);
  /* 日本語は既定だとどの文字の間でも折り返せてしまい、
     「フィクショ / ン作品」のように語の途中で切れる。
     auto-phrase は文節で折る(未対応ブラウザでは既定の挙動に戻るだけ)。 */
  word-break: auto-phrase;
  line-break: strict;
}

/* 一文で一行。入りきらない幅では折り返すが、行の頭は必ず文の頭になる。 */
.site-footer__notice span {
  display: block;
  max-width: 44em; /* 折り返すときだけ効く。1行が長くなりすぎないように */
  margin: 0;
}

/* PC・タブレット(740px 以上)では、注記の行も店名・著作権表示と同じく中央にそろえる(2026-10-07 オーナー指示。はじめは左詰め)。
   折り返したときの続きの行も中央。スマホは左詰めのまま。
   1つめの文は、1行に入らないときは「フィクション作品であり、」の後ろで折る(2026-10-07 オーナー指示)。
   文を前後2つのまとまり(.site-footer__phrase。js/main.js)に分けて、まとまりの途中では折らない。
   上の「一文で一行」の span の指定(display: block)がまとまりにも掛かるので、ここで横に並ぶ形に戻す。スマホは続けて流すまま */
@media (min-width: 740px) {
  p.site-footer__notice { text-align: center; }
  .site-footer__notice .site-footer__phrase { display: inline-block; max-width: none; }
}

/* 一文まるごとを1行に収められる幅でだけ、折り返しを禁じる。
   いちばん長い一文が約730px(「本サイトは…」。2026-10-07 に「本サイトおよび本コンテンツは」から縮めた。それまでは約830px)。フッターの左右余白(48px × 1.5 ずつ)込みで足りるのはここから。 */
@media (min-width: 1024px) {
  .site-footer__notice span {
    max-width: none;
    white-space: nowrap;
  }
}

/* 団体名は語の途中で切らせない。区切れるのは「／」の前後だけ。 */
.site-footer__org { white-space: nowrap; }

/* スマホだけで出す短い注記(js/main.js)。PC・タブレットでは出さない(出し分けはスマホのフッターの指定) */
.site-footer__notice--short { display: none; }

/* 作者サイトへのリンク「作者サイトはこちら」(js/main.js)。注記の下のいちばん下に、著作権の行と同じ字の大きさで中央に置く
   (スマホの字の大きさも著作権の行と同じ指定にそろえてある。下の 739.98px・480.98px の塊)。
   字・下線・カーソルの色はヘッダーのログアウトと同じ変数(--color-signout 〜)にして、赤い画面(theme-muted)でも同じ決まりで変わるようにする。
   全体の a(緑・下線なし)より強い指定。見た目は変えずに、押し場所だけ ::before で上下に 14px ずつ広げて 44px にする(字の箱は約 17px) */
.site-footer__author {
  align-self: center;
  margin: 0;
  font-size: var(--fs-1);
  text-align: center;
}
.site-footer__author a {
  position: relative;
  color: var(--color-signout);
  border-bottom: 1px solid var(--color-signout-line);
}
.site-footer__author a::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.site-footer__author a:hover {
  color: var(--color-signout-hover);
  border-bottom-color: var(--color-signout-hover);
}

@media (max-width: 739.98px) {
  .site-footer__inner { gap: 20px; }
}

/* ---------- お名前入力ゲート ---------- */

/* 未登録のあいだはコンテンツを一切描画せず、受付フォームだけを見せる。
   is-gated は visitor.js が <head> の時点で <html> に付けるので、
   本文が一瞬見えてしまうことがない。 */
html.is-gated body > * { display: none !important; }
html.is-gated body > .visitor-gate { display: flex !important; }
/* 結末のお名前で登録した直後の黒い画面(.visitor-welcome)は、板を閉じる前に出すので、これも隠さない */
html.is-gated body > .visitor-welcome { display: flex !important; }

.visitor-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  /* ソフトキーボードが出ても中身に届くよう、縦はスクロールさせる */
  overflow-y: auto;
  padding: 32px 20px;
  background: var(--color-bg);
}

.visitor-gate__panel {
  width: 100%;
  max-width: 420px;
  padding: 36px 30px 30px;
  background: var(--color-surface);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.visitor-gate__brand {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-ink);
}
.visitor-gate__brand span {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 2px;
  color: var(--color-ink-soft);
}

.visitor-gate__title {
  /* 見出しと説明文の間を少し空ける */
  margin: 26px 0 16px;
  font-family: var(--font-serif);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-teal-deep);
}
/* 題名は「ご利用にあたり、」と「お名前のご登録をお願いします」の 2 つのまとまり(js/visitor.js)。1 行に入らない幅では
   まとまりごと 2 行目へ落とし、まとまりの途中(「お願 / いします」など)では折らない(2026-10-24 オーナー指示) */
.visitor-gate__title .visitor-gate__phrase { display: inline-block; }

.visitor-gate__lead {
  margin: 0 0 22px;
  font-size: 0.82rem;
  font-family: var(--font-serif);  /* 案内の一文は明朝(見出し・店名と同じ。2026-10-20 オーナー指示。それまではゴシック)。下の注意書き(.visitor-gate__note)はゴシックのまま */
  line-height: 1.9;
  color: var(--color-ink-soft);
  /* 狭い画面でも「ご記入いた/だくと」のように語の途中で割れないようにする */
  word-break: auto-phrase;
  line-break: strict;
}

.visitor-gate__form { text-align: left; }

.visitor-gate__label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-ink-soft);
}

.visitor-gate__input {
  width: 100%;
  padding: 12px 14px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.visitor-gate__input:focus {
  border-color: var(--color-teal);
  box-shadow: 0 0 0 3px rgba(36, 84, 74, 0.16);
}

.visitor-gate__submit {
  width: 100%;
  margin-top: 16px;
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  background: var(--color-teal);
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: filter var(--transition-base);
}
.visitor-gate__submit:hover:not(:disabled) { filter: brightness(1.08); }
/* お名前が空のあいだは押せない(ゲストログインだけが空でも進める導線) */
.visitor-gate__submit:disabled {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-disabled-ink);
  cursor: not-allowed;
}

/* 「登録して進む」と「ゲストとしてログイン」の境目。
   小さな文字リンクのままだとゲストの導線を見落とすので、区切りを置いて
   下のボタンと対にする。 */
.visitor-gate__or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  color: var(--color-ink-faint);
}
.visitor-gate__or::before,
.visitor-gate__or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-line);
}

/* 主たる導線(登録して進む)と同じ大きさの、塗らないボタン。
   塗りの有無だけで主従を示し、見落とされないようにする。 */
.visitor-gate__guest {
  display: block;
  /* 主たる導線より少しだけ幅を狭め、見た目でも従であることを示す */
  width: 91%;
  margin: 14px auto 0;
  padding: 13px 16px;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-teal-deep);
  background: none;
  border: 1px solid var(--color-teal);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color var(--transition-base), background var(--transition-base);
}
.visitor-gate__guest:hover,
.visitor-gate__guest:focus-visible {
  color: #fff;
  background: var(--color-teal);
}

.visitor-gate__note {
  margin: 24px 0 0;
  font-size: 0.7rem;
  line-height: 1.8;
  color: var(--color-ink-soft);
}

@media (max-width: 480.98px) {
  .visitor-gate { padding: 20px 8px; }  /* 白い板は画面の端から 8px(ほかの板と同じ。はじめは 16px。2026-10-06 オーナー指示) */
  .visitor-gate__panel { padding: 28px 20px 24px; }
  .visitor-gate__brand { font-size: 1.3rem; }
}
/* スマホでは、案内と注意書きの文中の改行(<br>)を効かせず、文節の切れ目で折る(2026-10-06 オーナー指示。
   PC では一文が一行に収まるので <br> のまま)。入力欄の案内の文字は PC と同じ色(地との濃さの比 4.9。既定の灰色は 4.4) */
@media (max-width: 739.98px) {
  .visitor-gate__lead br,
  .visitor-gate__note br { display: none; }
  .visitor-gate__note {
    word-break: auto-phrase;
    line-break: strict;
  }
  .visitor-gate__input::placeholder { color: var(--color-ink-faint); opacity: 1; }
}

/* =========================================================
   結末の手紙(.is-final)
   驚かせる仕掛けは置かず、丁寧な予約確認のまま灯りが落ちきった画面にする。
   色は 2026-10-21 オーナー採用の案2「消灯」(Artifact「【エンディング】恐怖の配色案_20261021」。design-work\terre-fear\ の palette-final.py が作る):
   地はほぼ黒、形式的な文は血の気のない灰、オーナーの言葉から差出人までは血の赤で、字のまわりに赤いにじみを薄く付ける。
   それまでは地 #0d1210・字 #9aa39d(緑がかった闇に灰緑)だった。字と地の比は 4.5:1 以上(palette-final.py で測った)。
   ========================================================= */

html.is-final,
html.is-final body {
  background: #020403; /* ほぼ黒(わずかに緑がかった闇。#000 にはしない) */
  color: #858f89;      /* 血の気のない灰。地で 5.9:1 */
}

/* この画面に余計なものは出さない。戻り道は手紙の末尾の「閉じる」だけ */
.is-final .site-header,
.is-final .site-footer,
.is-final .page-header,
.is-final .message-notice { display: none; }

.is-final .section {
  border: none;
  padding: 0;
}

/* 画面の端を闇に落とす */
.final {
  /* 結末の手紙の書体は游明朝・游ゴシック(端末の書体。iPhone ではヒラギノ、Android では Noto になる)。
     2026-10-18 に一度サイトと同じ Noto にしたが、見比べたうえで 2026-10-20 オーナー指示で手紙は游に戻し、
     ご予約内容の四角(.final__booking)だけ Noto にした(はじめは Noto Sans JP、2026-10-25 オーナー指示で Noto Serif JP の明朝に)。
     先頭の "Yu Mincho Asterisk" は＊だけの書体(上の @font-face) */
  --font-serif: "Yu Mincho Asterisk", var(--font-serif-yu);
  --font-sans: var(--font-sans-yu);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 20px;
}
.final::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0.95) 100%);
}

.final__sheet {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 41em;
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  line-height: 2.15;
}

/* 文面は上から順に、ゆっくり浮かび上がる。動くのはこの一度だけ。 */
.final__sheet > * {
  margin: 0 0 1.9em;
  max-width: none;
  opacity: 0;
  animation: final-surface 1.8s ease-out forwards;
}
.final__sheet > *:nth-child(1) { animation-delay: 0.3s; }
.final__sheet > *:nth-child(2) { animation-delay: 1.2s; }
.final__sheet > *:nth-child(3) { animation-delay: 1.7s; }
.final__sheet > *:nth-child(4) { animation-delay: 2.2s; }
.final__sheet > *:nth-child(5) { animation-delay: 3.1s; }
.final__sheet > *:nth-child(6) { animation-delay: 3.6s; }
.final__sheet > *:nth-child(7) { animation-delay: 4.1s; }
/* 言い伝えの前で一拍おく */
.final__sheet > *:nth-child(8) { animation-delay: 5.3s; }
.final__sheet > *:nth-child(9) { animation-delay: 6.4s; }
.final__sheet > *:nth-child(10) { animation-delay: 6.9s; }
.final__sheet > *:nth-child(11) { animation-delay: 7.4s; }
/* 差出人。最後に現れて、ここで止まる */
.final__sheet > *:nth-child(12) { animation-delay: 8.6s; }
/* 読み終えたころに「閉じる」が現れる */
.final__sheet > *:nth-child(13) { animation-delay: 10s; }

@keyframes final-surface {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* 表題 */
.final__label {
  font-family: var(--font-sans);
  font-size: var(--fs-1);
  letter-spacing: 0.34em;
  text-indent: 0.34em;
  text-align: center;
  color: #79837d;  /* 本文の灰より一段暗い(地で 4.9:1) */
  padding-bottom: 1.6em;
  border-bottom: 1px solid #212825;
}

/* ご予約内容 */
.final__booking {
  display: grid;
  grid-template-columns: 7em 1fr;
  gap: 0.7em 1.6em;
  margin: 2.4em 0;
  padding: 1.5em 1.8em;
  border: 1px solid #212825;
  font-family: "Noto Serif JP", var(--font-serif-yu);  /* 四角の中だけ Noto の明朝(受信箱の同じ並びとそろえる。2026-10-25 オーナー指示。手紙のほかの所は游) */
  font-size: var(--fs-1);
  line-height: 1.9;
}
.final__booking dt { color: #707a74; }  /* 項目名は値より一段暗い(地で 4.5:1) */
.final__booking dd { margin: 0; color: #858f89; }  /* 値は本文と同じ灰(2026-10-20 オーナー指示で表題と同じ系統にそろえた考え方のまま) */

.final__owner {
  margin-top: 3.2em;
  text-align: center;
  color: #e14b39;
}

/* ★試し: サイトオーナーからのメッセージと、それより下を血の色にする。
   下に並ぶ .final__decree などが自前の色を持っていて、同じ強さだと
   あとから書いたほうが勝つ。:not(#x) を足して強さを1段上げている。
   戻すときはこの規則を消すだけでよい(個々の色指定は下にそのまま残してある)。
   閉じるボタン(.final__close)は読み物ではなく操作なので、ここには含めない。
   血の赤 #e14b39 は地で 4.9:1。字のまわりの赤いにじみ(text-shadow)で、黒の中で赤だけが光って見える(案2「消灯」) */
.final__sheet .final__owner ~ *:not(#x):not(.final__decree),
.final__sheet .final__owner ~ * :not(#x):not(.final__close) {
  color: #e14b39;
  text-shadow: 0 0 0.6em rgba(209, 60, 45, 0.35);
}

/* 言い伝え。手紙の引用ではなく、古いお達しの一節として見せる。
   左の縦罫はやめ、上下の細い朱の罫で挟んで字間を広げる。 */
.final__decree {
  margin: 3.4em 0;
  padding: 2em 1.2em;
  border: none;
  border-top: 1px solid #791a16;
  border-bottom: 1px solid #791a16;
  text-align: center;
  color: #858f89;  /* 本文と同じ灰(赤くしない。2026-10-20 オーナー指示で表題と同じ系統にそろえた考え方のまま) */
  letter-spacing: 0.18em;
  line-height: 2.5;
  text-indent: 0.18em;
  word-break: auto-phrase;
  line-break: strict;
  /* 行の長さをそろえる(2026-10-18 オーナー指示)。書体を Noto にしたら、スマホの 478〜480px・590〜592px で3行になり、
     最後の行が「得ざるべし」」だけになっていた。言葉の切れ目で折る指定(auto-phrase)と一緒に効く */
  text-wrap: balance;
}

.final__from {
  margin-top: 3.6em;
  text-align: right;
  /* 本文と同じ大きさ・太さにそろえる(太字は 2026-10-24 オーナー指示でやめた。下の肩書きも同じ) */
  font-size: var(--fs-2);
  font-weight: 400;
  /* 血の色。黒地の上で読める範囲まで濃くしている
     (これ以上暗くすると、沈んで読めなくなる) */
  color: #e14b39;
  letter-spacing: 0.08em;
}
.final__from span {
  display: block;
  margin-top: 0.5em;
  font-size: var(--fs-2);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: #e14b39;  /* 上の「★試し」の規則(血の色)が勝つので、同じ値にしておく */
}

.final__actions {
  margin-top: 4.5em;
  text-align: center;
}
.final__close {
  font-family: var(--font-serif);
  font-size: var(--fs-2);
  color: #79837d;  /* 表題と同じ暗い灰(地で 4.9:1) */
  background: transparent;
  border: 1px solid #212825;
  border-radius: 0;
  padding: 12px 42px;
  cursor: pointer;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.final__close:hover,
.final__close:focus-visible {
  color: #bec7c1;
  border-color: #46504a;
}

/* 一覧に戻ったときの、結末の手紙の行 */
.message--final .message__summary {
  width: 100%;
  font: inherit;
  text-align: left;
  background: transparent;
  border: none;
  cursor: pointer;
}
/* 上の透明の指定がほかの行のホバーの色を打ち消すので、ここでも同じ色を当てる */
@media (min-width: 1024px) and (hover: hover) { .message--final .message__summary:hover { background: var(--color-bg-deep); } }

@media (max-width: 480.98px) {
  .final { padding: 48px 4px; }
  .final__sheet { line-height: 2.05; }
  .final__booking {
    grid-template-columns: 5.5em 1fr;
    padding: 1.2em 1.3em;
    gap: 0.6em 1em;
  }
  /* 狭い画面で字間を広げたままだと行が割れすぎる */
  .final__decree {
    padding: 1.6em 0.4em;
    letter-spacing: 0.1em;
    text-indent: 0.1em;
    line-height: 2.3;
  }
  .final__close { padding: 12px 32px; }
}

/* 動きを減らす設定のときは、最初から全部見えている状態で出す */
@media (prefers-reduced-motion: reduce) {
  .final__sheet > * {
    opacity: 1;
    animation: none;
  }
}

/* 結末に関わるお名前(平尾和也。値は js/puzzle-data.js)で登録した直後に出す、黒い画面(js/visitor.js の showWelcome)。
   結末の手紙と同じ闇の地・明朝・上から浮かぶ字にし、字は手紙の差出人と同じ血の色にする(2026-10-14 オーナー指示)。
   四隅の影(::after)は置かない。地と同じ色を重ねる影は隅を暗くせず、混ぜるときの丸めで 1 段ずれた画素が楕円の輪に並んで段々に見えた(2026-10-28 オーナー指摘)。
   明朝は手紙と同じ Noto Serif JP(はじめは游明朝。手紙を Noto にしたのに合わせて 2026-10-18 オーナー指示でそろえた)。
   色は結末の手紙の値をそのまま使う(新しい色は足さない)。手紙と同じく、スマホの「一律 1px 小さくする」塊には入れない */
html.is-welcome { background: #0d1210; }  /* 右端のスクロールバーの場所(scrollbar-gutter: stable)も闇にする */
.visitor-welcome {
  position: fixed;
  inset: 0;
  z-index: 200;  /* お名前の登録の板(100)より手前 */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  background: #0d1210;
}
.visitor-welcome__body {
  position: relative;
  z-index: 1;
  text-align: center;
  font-family: var(--font-serif);
}
.visitor-welcome__line {
  max-width: none;
  margin: 0 0 1.2em;
  font-size: 22px;  /* 26px から小さく(2026-10-20 オーナー指示) */
  font-weight: 700;
  line-height: 1.9;
  letter-spacing: 0.12em;
  color: #52140c;  /* 赤黒い字(闇 #0d1210 との明るさの比 1.32:1。2026-10-20 に5段階の見本からオーナーが選んだ。手紙の血 #d13c2d → #a62c22 → 血の縁 #8f2418 → #661a10 でもまだ明るいとのことで、ここだけの色にした。読める限界に近いので、これ以上暗くしない) */
}
/* 最後の行の下の余白を無くし、2行の塊が画面の上下の真ん中に来るようにする(余白が残ると字が 0.6em ほど上に寄る。2026-10-20 オーナー指摘) */
.visitor-welcome__line:last-child { margin-bottom: 0; }
.visitor-welcome:focus { outline: none; }  /* 読み上げのために手元を置くだけで、押すものではない */
/* 上から順に、動かさずにうっすらと浮かび上がる(2026-10-20 オーナー指示。はじめは手紙と同じく 10px 下から上がっていたが、位置は動かさず明るさだけにした)。
   秒数は js/visitor.js の待ち時間(2行目が浮かび終わるのが約 6 秒)と合わせる。2026-10-20 オーナー指示で 1.8 秒から 3 秒に延ばした */
.visitor-welcome__body > * { animation: visitor-welcome-surface 3s ease-in-out 0.4s both; }
.visitor-welcome__body > *:nth-child(2) { animation-delay: 3s; }
@keyframes visitor-welcome-surface {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 消えるときは、先に字が 0.8 秒で消え、続けて闇が 1.2 秒で消えてサイトが見えてくる(秒数は js/visitor.js と合わせる) */
.visitor-welcome__body {
  transition: opacity 0.8s ease;
}
.visitor-welcome__body.is-fading { opacity: 0; }
.visitor-welcome {
  transition: opacity 1.2s ease;
}
.visitor-welcome.is-leaving { opacity: 0; }
/* トップ以外で登録したときは闇のままトップへ移るので、移った先は闇の下で描き始め、同じ 1.2 秒で消す
   (js/visitor.js の startWelcomeReturn が <head> の時点で html に付ける) */
html.is-welcome-return:not(.is-welcome-return-fading) { background: #0d1210; }
html.is-welcome-return body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  background: #0d1210;
  transition: opacity 1.2s ease;
}
html.is-welcome-return-fading body::after { opacity: 0; }
@media (max-width: 739.98px) {
  .visitor-welcome__line { font-size: 18px; letter-spacing: 0.08em; }
}
@media (prefers-reduced-motion: reduce) {
  .visitor-welcome__body > * { animation: none; }
}

/* =========================================================
   ラストロジック
   ラストロジック = Terre et Mer で「お名前が平尾和也」「?course=fish」
   「空席検索に24時」の3つが揃ったときに開く、結末へ向かう一連の仕掛け。
   このうち最初の2つが揃った時点で <html> に is-last-logic が付く
   (判定は restaurants/restaurant-terreetmer.html の<head>)。
   ほかの方には、ほかの店と同じ見た目のまま見える。
   ========================================================= */

/* コースの品書きが「肉」から「魚」へ入れ替わる。
   HTMLには両方置いてあり、ここで出し分ける
   (単品・メイン・ドリンクの並びには触らない)。 */
/* .menu-list li が display:flex を持っているので、打ち消すには同じ強さが要る */
.menu-list li.menu-course--last { display: none; }
.is-last-logic .menu-list li.menu-course--normal { display: none; }
.is-last-logic .menu-list li.menu-course--last { display: flex; }
.menu-list li.menu-course--last > span,
.menu-list li.menu-course--last .price { color: var(--color-danger); }

/* メニューはコースの一行だけを残し、単品・メイン・ドリンクは出さない */
.is-last-logic .menu-list > *:not(.menu-course-head):not(.menu-group--course) {
  display: none;
}
/* 後ろの一覧を隠すとコースの一覧が板の最後になるので、下の余白を残さない */
.is-last-logic .menu-list .menu-group--course { margin-bottom: 0; }
/* 結末直前はメニューに「コース」の見出しと「シビト」の 1 行しか残らない。PC の 2 段(column-count: 2。下の「メニュー: 白い板に2段」)のままだと
   Firefox が見出しを左の段・行を右の段に分ける(Firefox は多段組みで break-after: avoid を効かせない。2026-10-24 オーナー報告)。
   段組みをやめて縦に並べ、幅だけ左の段と同じ(板の内側から段の間を引いた半分)にして、Chrome の見え方(左の段に縦に並ぶ)を保つ。
   段の間の式は下の column-gap と同じ値。あちらを変えたらここも直す */
@media (min-width: 1200px) {
  .is-last-logic body[data-page="restaurant"] .menu-list { column-count: auto; }
  .is-last-logic body[data-page="restaurant"] .menu-list > .menu-course-head,
  .is-last-logic body[data-page="restaurant"] .menu-list > .menu-group--course {
    width: calc((100% - clamp(56px, calc(56px + (100vw - 1185px) * 24 / 240), 80px)) / 2);
  }
}

/* 口コミも出さない。ご予約状況がフッターの手前で最後の内容になる。 */
.is-last-logic #reviews { display: none; }

/* ---------- 血溜まりに入る ----------
   ラストロジックの入り口では、部屋そのものが血に浸かったように、地も文字も血の色に染まる
   (2026-10-20 オーナー採用。Artifact「結末直前の色味 3案」の案2「血溜まり」。design-work\terre-fear\ の palette.py が色を OKLCH で作る)。
   それまでは「赤い灯りの下」(2026-10-02 採用。地 #2b0b0a・字 #f6d9d2・押せるものはサーモン色 #f59482)だったが、
   写真がオレンジに染まりボタンが桃色で暖かく見えたので、血の色に寄せた。
   地は黒ずんだ血、板は固まりかけた血、字は血に濡れた薄桃(白い字は残さない)。動脈の赤(#ea3d35)は店名(染まる前)・魚・札・○・検索ボタン・確定するだけ。
   それまでの白黒の画面は RESTAURANT YAMANO(theme-night)へ移した。
   クラス名は theme-muted のまま(HTML・JS・visitor.js が参照しているため)。
   色はすべて :root のトークンで持っているので、ここで値を差し替える。
   字と地の組は本文 4.5:1 以上、大きい字と ○ は 3.0:1 以上(palette.py で 21 組を測った)。 */

:root.theme-muted {
  --rgb-shade: 37, 0, 1;
  --rgb-shade-2: 37, 0, 1;
  --rgb-shade-3: 37, 0, 1;
  --color-dot: #6f2120;
  --color-track: #460a0b;
  --color-disabled: #3d090a;
  --color-disabled-ink: #935e5a;
  --color-disabled-ink-2: #734844;
  --color-search-field: #150000;
  --color-search-line: var(--color-line);
  --color-search-button: #e2352e;
  --color-search-button-deep: #f45246;
  --color-search-button-ink: #140000;
  --color-header-bg: #170000;
  --color-header-current: var(--color-ink);
  --color-header-hover: var(--color-teal);
  --color-header-link: var(--color-ink-soft);
  --color-signout: var(--color-ink-soft);
  --color-signout-line: rgba(208, 132, 131, 0.35);
  --color-signout-hover: var(--color-ink);
  --color-drawer-mark: var(--color-teal);
  --color-bg: #250001;        /* 黒ずんだ血。血の層(#8f2418〜#d13c2d)より RGB の各値が暗いこと(下の店名の血の決まり) */
  --color-bg-deep: #1b0000;
  --color-surface: #360003;   /* 固まりかけた血の板 */
  --color-ink: #d08483;       /* 血に濡れた薄桃を一段暗くしたもの(明るさ 69%)。地で 6.8:1、板で 6.3:1。
                                 はじめは #f9adae(明るさ 82%)で、太字や数字が白く浮いて見えた(2026-10-21 オーナー指示で落とした) */
  --color-ink-bold: var(--color-ink);  /* 暗い地に明るい字なので、太字も本文の字のまま */
  --color-ink-soft: #bb716f;  /* 地で 5.3:1、板で 4.9:1 */
  --color-ink-faint: #b06a68; /* ラベル。地で 4.7:1、板で 4.4:1(赤い画面は暗さを優先。2026-10-21) */
  --color-line: #581414;
  --color-band: #200001;
  --color-footer: #1b0000;

  /* 押せるもの・金(星)・注意は、動脈の赤にそろえる(字としては地で 4.8:1、札の地で 4.7:1) */
  --color-teal: #ea3d35;
  --color-focus-halo: rgba(234, 61, 53, 0.22);  /* 赤い画面では赤くにじませる(暗い地なので少し濃く) */
  --color-teal-deep: #ff6557;
  --color-teal-tint: #2f0002;
  --color-accent: #ea3d35;
  --color-accent-deep: #ff6557;
  --color-star: #d15e49;      /* 星は動脈の赤より少し沈めた赤(地で 5.0:1) */
  --color-danger: #ea3d35;
  --color-danger-tint: #2f0002;
  --color-danger-vivid: #ea3d35;
  --color-rule-ok: var(--color-ink-soft);   /* 予約の表の十字の線。縦線は下の .theme-muted の指定でも --color-ink-soft */

  /* 暫定解20261004 の縞と罫は、黒と血の縞にする */
  --color-stripe-sea: #0d0000;
  --color-stripe-sand: #380002;
  --color-stripe-leaf: #1f0001;
  --color-stripe-alert: #0d0000;  /* 赤い画面は Terre et Mer だけ。その写真の下の帯(data-band="red")も黒と血の縞の黒のほう */
  --color-rule-soft: #581414;
  --color-ink-label: #b06a68;
  --color-frame-line: #782222;
  --color-map-sea: #702f31;  /* 血の色に染めた地図の海と同じ色(店舗ページのアクセスの面。design-work\terre-fear\sample-sea.js で四隅と中心を拾った。四隅の影を外して測ること)。
                                地図の染め方(下の .shop-map__figure img)を変えたら、海の色を拾い直す。はじめ #5a2426 にしていたが、影ごと拾った暗い値で、地図と面が2つに割れて見えた(2026-10-21 オーナー指摘) */
}

/* 動脈の赤の地に薄桃の字だと読めないので、押せるものの字は黒に近い血の色に落とす(4.6:1) */
.theme-muted .btn-primary { color: #140000; }
.theme-muted .btn-primary:disabled { color: var(--color-disabled-ink); }

/* 入力欄は面よりさらに沈める(検索窓と同じ、黒に近い血) */
.theme-muted input,
.theme-muted select,
.theme-muted textarea {
  background-color: #150000;
  color: var(--color-ink);
  border-color: var(--color-line);
}

/* 結末に関わるお名前の濃い赤(#7a1c16)は、血の地に沈むので動脈の赤に上げる(ヘッダーの地で 5.9:1) */
.theme-muted .site-header__name.is-marked { color: #f45246; }

/* パンくず(トップ › 掲載店舗 › Terre et Mer)は出さない(2026-10-02 オーナー指示)。
   店名の高さは、パンくずがあったときのまま残す(RESTAURANT YAMANO と同じ値) */
.theme-muted .breadcrumb { display: none; }
.theme-muted .shop-header { padding-top: 74px; }
@media (max-width: 739.98px) {
  .theme-muted .shop-header { padding-top: 72px; }
}

/* このページだけ、ヘッダーを貼り付けない(オーナー指定)。
   上に何も残らないので、アンカー移動の着地位置も少しの余白だけにする。 */
.theme-muted .site-header { position: static; }
.theme-muted [id],
.theme-muted body[data-page="restaurant"] .section[id] { scroll-margin-top: 16px; }

/* 写真と地図は、いったん色を抜いてから濃い血の色に染め直し、明暗を強める(血に浸かった皿)。
   元の写真が何色でも、仕上がりは同じ血の色になる。
   「赤い灯り」のときは sepia(1) saturate(4) hue-rotate(-40deg) brightness(0.72) で、オレンジの灯りの色になっていた */
.theme-muted .photo-gallery__item,
.theme-muted .photo-viewer img {
  filter: grayscale(1) sepia(1) hue-rotate(-48deg) saturate(5.5) brightness(0.46) contrast(1.5);
}
/* カーソルを当てたときは、染めた後に地の色へ 12% 寄せる(寄せ方は「写真」の節の .photo-gallery__item:hover) */
.theme-muted .photo-gallery__item[role="button"]:hover {
  filter: grayscale(1) sepia(1) hue-rotate(-48deg) saturate(5.5) brightness(0.46) contrast(1.5) contrast(0.978) brightness(0.9);
}
/* 地図は元が明るく、同じ染め方だと黄土色に浮く。先に暗くしてから染めると赤に寄るので、
   明暗の差を強めて暗くしてから染め、最後にもう一度落とす(順番を変えると黄土色に戻る) */
.theme-muted .shop-map__figure img {
  filter: grayscale(1) contrast(1.25) brightness(0.7) sepia(1) hue-rotate(-50deg) saturate(4) brightness(0.45) contrast(1.2);
  /* 島の形が見える明るさ(2026-10-21 オーナー指示。はじめは brightness(0.34) contrast(1.45) で、ほぼ一色に沈んでいた)。
     染めた海の色は #702f31 で、--color-map-sea にも同じ値を置いている */
}
/* 地図の端を面に溶かす指定は「地図」の節(.shop-map__figure img の mask)で全配色に共通 */
/* 住所などの札の塗りは、黒ずんだ血(#360003)から少し薄い血(#4a1719)に(2026-10-21 オーナー指示「黒をもう少し薄く」)。
   ふちをぼかす作りはそのまま。項目名は塗りの上で読める桃(4.5:1)に上げる。:not(#_) はスマホの指定(同じ重さ)に勝つための重み */
.theme-muted body[data-page="restaurant"] .shop-map__body:not(#_)::before { background: #561f22; }  /* 面(#702f31)との差を小さく(同日オーナー指示「もっと黒を薄めて」。#4a1719 → #3f1012 → #561f22)。値の字は 4.5:1、項目名は 5.0:1 */
.theme-muted body[data-page="restaurant"] .shop-map__label:not(#_) { color: #cc928f; }
/* 予算・営業時間・本土からの板の後ろに敷く砂の色の板(PC の .shop-facts::before)は、赤い画面では板と同じ血の色になり
   四角が2つ重なって見えるので、この画面だけ出さない(2026-10-21 オーナー指示) */
.theme-muted body[data-page="restaurant"] .shop-facts::before { display: none; }
.theme-muted .photo-viewer { background: rgba(37, 0, 1, 0.9); }
/* 地図の吹き出しは、血の中で浮かないよう ○ の枠と同じ沈んだ血にする。
   字も動脈の赤だと地図の中でいちばん目立つので、薄桃を沈めた色・普通の太さに落とす(5.5:1。2026-10-02 オーナー指示の考え方のまま) */
.theme-muted .shop-map__pin { background: #620008; color: #c89792; font-weight: 400; }
.theme-muted .shop-map__pin::after { border-top-color: #620008; }

/* 店名の見出しは、染まる前はいちばん薄い桃(#fed2d0)で現れ、そこへ血が流れる。
   血の層は「暗いほうを残す」重ね方なので、染まる前の字は血の層(#d13c2d・#b8301f)より RGB の各値が明るくないと、
   染まりきった色が血より暗く濁る(#fed2d0 = 254,210,208 ≧ 209,60,45)。
   コースの「魚 ¥120,000」は動脈の赤(板で 4.9:1) */
.theme-muted .shop-header__title h1 { color: #fed2d0; }
.theme-muted .menu-list li.menu-course--last > span,
.theme-muted .menu-list li.menu-course--last .price { color: #f14638; }
/* 「魚 ¥120,000」は太字にもする(オーナー指定) */
.theme-muted .menu-list li.menu-course--last > span,
.theme-muted .menu-list li.menu-course--last .price { font-weight: 700; }

/* 店名の字そのものが、上から血に染まる(オーナー指定。2026-10-10 に、店名の下の血だまりと滴から作り替えた)。
   字の外には何も描かない。店名の上に血の層を重ね、重ね方を「暗いほうの色を残す」(mix-blend-mode: darken)にする。
   薄い桃色の字の上では層の血の色に変わり、地(#250001。血のどの色よりも暗い)の上では地のまま残る。
   層は3枚。下から「筋A」「筋B」(太い縦の線を先に流れ落ちる)、いちばん上が「血の面」(上の端から全部の字に広がり、下りていく)。
   層の形は、画面が切り替わった瞬間に js/reservation-render.js が SVG で作って入れる(通常のページの作りには残さないため。
   筋の位置は表示中の書体で店名を描いて調べるので、書体や店名が変わっても字に合う)。ここは置き場所と動き方だけを持つ。
   値の単位 em は店名の字の大きさ。字の墨は、店名の箱の上から 0.28em〜1.04em にある
   (Noto Serif JP。游明朝に落ちたときは 0.13em〜0.92em。2026-10-10 に実測)。
   層は transform で動かす(背景の位置を動かすと毎回描き直しになり、端末によってはカクつく)。
   どの層も途中で止めない(止まってはまた動くと、カクカク垂れて見える。2026-10-10 オーナー指摘)。
   動きの曲線と位置は design-work\terre-blood\ の fit.js・timing.js で決め、coverage2.js・stall.js で確かめた。
   店名の下には余白を足さない(赤くなる前と同じ間。2026-10-10 オーナー指示) */
.theme-muted .shop-header__title h1 {
  position: relative;
  /* 文字の下端にだけ、にじみ出たように血の赤を薄く落とす */
  text-shadow: 0 0.04em 0.14em rgba(209, 60, 45, 0.5);
}
.shop-title-blood { display: none; }
@supports (mix-blend-mode: darken) {
  /* 重ね方は店名の中で閉じ、店名に地と同じ色を敷く。PC では外側の .shop-header が透明な重なりの区切りを作るので、
     そのままだと層が地と混ざらず、字の外に層の色がそのまま出る。店名の後ろは body の地(--color-bg)だけなので見た目は変わらない。
     店名の後ろに別の色や模様を置いたら、ここも合わせる */
  .theme-muted .shop-header__title h1 {
    isolation: isolate;
    background-color: var(--color-bg);
  }
  .theme-muted .shop-title-blood {
    display: block;
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    mix-blend-mode: darken;
  }
  .theme-muted .shop-title-blood > span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: no-repeat 0 0 / 100% 100%;
  }
  /* 動く前: 血の面も筋も店名の箱の上の外にあり、字は今の明るい赤のまま。
     面の下の端(暗い縁を含めて 0.09em まで)も筋の先(0.06em まで)も、游明朝に落ちたときの字の上の端(0.13em)より上に置く */
  .theme-muted .shop-title-blood__sheet { height: 1.5em; transform: translateY(-1.4em); }
  .theme-muted .shop-title-blood__run { height: 3em; transform: translateY(-2.9em); }
  /* 血の面は 8 秒で染めきる(2026-10-10 オーナー指示)。入ってすぐ全部の字の上の端に広がり(1.2 秒で小文字の上まで)、
     真ん中はゆっくり、終わりに少し速まって 7.4 秒ごろに字の下の端を越える。速さは止まらずに変わる */
  .theme-muted .shop-title-blood.is-running .shop-title-blood__sheet {
    animation: shop-title-stain-sheet 8s cubic-bezier(0.02, 0.65, 0.26, 0.3) both;
  }
  /* 筋A は 0.15 秒後から 3.4 秒、筋B は 0.9 秒後から 3.8 秒かけて流れ落ち、面より先に字の下の端へ届く */
  .theme-muted .shop-title-blood.is-running .shop-title-blood__run {
    animation: shop-title-stain-run 3.4s cubic-bezier(0.3, 0.1, 0.65, 0.95) 0.15s both;
  }
  .theme-muted .shop-title-blood.is-running .shop-title-blood__run--b {
    animation-duration: 3.8s;
    animation-delay: 0.9s;
  }
}
@keyframes shop-title-stain-sheet {
  from { transform: translateY(-1.4em); }
  to { transform: translateY(-0.12em); }  /* 面の下の端の暗い縁(いちばん浅い所で 1.065em)が、字の墨の下の端(1.04em)より下に来る所 */
}
@keyframes shop-title-stain-run {
  from { transform: translateY(-2.9em); }
  to { transform: translateY(-1.5em); }
}
/* 動きを減らす設定のときは、染まりきった形で静かに見せる */
@media (prefers-reduced-motion: reduce) {
  .theme-muted .shop-title-blood__sheet { transform: translateY(-0.12em); }
  .theme-muted .shop-title-blood__run { transform: translateY(-1.5em); }
  .theme-muted .shop-title-blood.is-running .shop-title-blood__sheet,
  .theme-muted .shop-title-blood.is-running .shop-title-blood__run { animation: none; }
}
/* 色を強制する表示(Windows のハイコントラストなど)では重ねない */
@media (forced-colors: active) {
  .theme-muted .shop-title-blood { display: none; }
}


/* 空席検索で開いた 24:00 の ○ は、ふだんは沈んだ血の地に本文と同じ桃の字(4.8:1)、
   カーソルを当てると動脈の赤の面に変わる(オーナー指定の考え方のまま) */
.theme-muted .availability-table td.is-available {
  background: #620008;
  color: #d08483;
}
@media (min-width: 1024px) and (hover: hover) {
  .theme-muted .availability-table td.is-available:hover {
    background: #ea3d35;
    color: #140000;
  }
}
/* 開いた枠が一瞬光る演出は要らないので、上の沈んだ赤のまま出す */
.theme-muted .availability-table td.is-revealed { animation: none; }
/* 赤い画面の縦線は今までどおり、見出しの下の線より少し薄い赤(--color-ink-soft) */
.theme-muted .availability-table thead th:first-child::after,
.theme-muted .availability-table tbody th::after { background: var(--color-ink-soft); }

/* ○ を押して開く予約確認は、珊瑚色の面をやめ、固まりかけた血の板に薄桃の字。「確定する」だけを動脈の赤にする
   (2026-10-20 案2。それまでは明るい赤 #e0604d の面に黒に近い字だった) */
.theme-muted .reservation-modal__overlay { background: rgba(10, 0, 0, 0.75); }
.theme-muted .reservation-modal__dialog {
  background: #360003;
  color: #d08483;
}
.theme-muted .reservation-modal .btn-primary {
  background: #ea3d35;
  border-color: #ea3d35;
  color: #140000;
}
.theme-muted .reservation-modal .btn-primary:hover,
.theme-muted .reservation-modal .btn-primary:active {
  background: #ff6557;
  border-color: #ff6557;
  color: #140000;
}
.theme-muted .reservation-modal .btn-secondary {
  background: transparent;
  border-color: rgba(208, 132, 131, 0.6);
  color: #d08483;
}
.theme-muted .reservation-modal .btn-secondary:hover,
.theme-muted .reservation-modal .btn-secondary:active {
  background: rgba(208, 132, 131, 0.1);
  border-color: #d08483;
  color: #d08483;
}

/* 画面の縁を暗く落とす(レンズの周辺減光。血の黒)。押せない層で、ヘッダー(20)より手前、
   スマホのメニュー(60)と予約確認(100)より奥。中身は下を流れ、縁だけがいつも暗い(2026-10-20 案2) */
html.theme-muted body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 65% at 50% 42%, rgba(0, 0, 0, 0) 35%, rgba(20, 0, 2, 0.7) 100%);
}
@media (forced-colors: active) {
  html.theme-muted body::before { display: none; }
}

/* ---------- RESTAURANT YAMANO の白黒の配色 ---------- */

/* 「山野幸三」で検索して開くこの1ページだけ、色がすべて抜けた白黒の配色にする
   (2026-10-02 オーナー指定。値はそれまでの結末直前の画面(theme-muted)の灰色をそのまま移した。
   その前は暗い茶と金の「夜の食卓」だった)。
   ほかのページには影響しないよう、archive/yamano.html の <html> に付けた
   theme-night の下だけで効かせる。クラス名は theme-night のまま(visitor.js が参照しているため)。
   検索結果に出るこの店の1件(.shop-list__item--mono)も、同じ値で白黒にする(2026-10-02 オーナー指示)。
   色はすべてトークンを通るので、カードの上で値を差し替えれば、カードの中だけが白黒になる */
:root.theme-night,
.shop-list__item--mono {
  --rgb-shade: 31, 31, 31;
  --rgb-shade-2: 31, 31, 31;
  --rgb-shade-3: 31, 31, 31;
  --color-dot: #bbbbbb;
  --color-track: #dedede;
  --color-disabled: #cccccc;
  --color-disabled-ink: #8c8c8c;
  --color-disabled-ink-2: #aaaaaa;
  --color-search-field: var(--color-bg);
  --color-search-line: var(--color-line);
  --color-search-button: var(--color-teal);
  --color-search-button-deep: var(--color-teal-deep);
  --color-search-button-ink: #fff;
  --color-header-bg: var(--color-surface);
  --color-header-current: var(--color-ink);
  --color-header-hover: var(--color-teal);
  --color-header-link: var(--color-ink-soft);
  --color-signout: var(--color-teal);
  --color-signout-line: rgba(31, 31, 31, 0.35);
  --color-signout-hover: var(--color-teal-deep);
  --color-drawer-mark: var(--color-accent);
  --color-bg: #ebebeb;
  --color-bg-deep: #e2e2e2;
  --color-surface: #f7f7f7;
  --color-ink: #1f1f1f;
  --color-ink-soft: #666666;
  --color-ink-faint: #7f7f7f;  /* 閉店の褪せた感じは残し、ふつうのページを濃くしたのと同じ割合(約 1.4 倍)で気持ち濃く。2.4〜2.7:1 → 3.4〜3.7:1(2026-10-05 オーナー指示。はじめは #999999) */
  --color-line: #d9d9d9;
  --color-band: #e2e2e2;
  --color-footer: #dcdcdc;

  /* 押せるもの・金(星)・注意の赤も、すべて墨と灰に落とす */
  --color-teal: #1f1f1f;
  --color-focus-halo: rgba(31, 31, 31, 0.16);
  --color-teal-deep: #000000;
  --color-teal-tint: #e2e2e2;
  --color-accent: #8c8c8c;
  --color-accent-deep: #666666;
  --color-star: #737373;  /* 星も同じ割合で気持ち濃く。2.8〜3.1:1 → 4.0〜4.4:1(2026-10-05 オーナー指示。はじめは --color-accent と同じ #8c8c8c) */
  --color-danger: #1f1f1f;
  --color-danger-tint: #e6e6e6;

  /* 暫定解20261004 の縞と罫も灰色にする */
  --color-stripe-sea: #d4d4d4;
  --color-map-sea: #c6c6c6;  /* 白黒にした地図の海と同じ灰色(店舗ページのアクセスの面) */
  --color-stripe-sand: #c6c6c6;
  --color-stripe-leaf: #cdcdcd;
  --color-stripe-alert: rgba(43, 43, 43, 0.8);  /* 黒い赤(#8a0303 を 8 割)を白黒にした灰色。RESTAURANT YAMANO の写真の下の帯(2026-10-10 オーナー指示) */
  --color-rule-soft: #cfcfcf;
  --color-ink-label: #5e5e5e;
  --color-frame-line: #b0b0b0;
}

/* トークンを通っていない色(写真・地図など)も残さないよう、写真と地図の色を抜く */
.theme-night .photo-gallery__item,
.theme-night .photo-viewer img,
.theme-night .shop-map__figure img { filter: grayscale(1); }
/* カーソルを当てたときは、色を抜いた後に地の色へ 12% 寄せる(地の #ebebeb はふだんの地とほぼ同じ明るさなので、同じ値。寄せ方は「写真」の節) */
.theme-night .photo-gallery__item[role="button"]:hover { filter: grayscale(1) contrast(0.797) brightness(1.104); }
/* 検索結果のカードは、字の色を外のページ(焦げ茶の墨)から受け継いでしまうので、墨も灰色の値で引き直す */
.shop-list__item--mono { color: var(--color-ink); }
.shop-list__item--mono .shop-list__photo img { filter: grayscale(1); }

/* ---------- 結末に関わるお名前(平尾和也)でログインしているあいだの影 ----------
   js/main.js が <html> に is-marked を付ける。専用の画面(赤く染まった画面 theme-muted・結末の手紙 is-final)を除く
   全ページで、紙を一段くすませ、島の緑と金を灰に寄せ、写真の彩度を落とし、画面の四隅に影を落とす(2026-10-21 オーナー採用。
   RESTAURANT YAMANO の白黒(theme-night)と、検索結果のその店のカード(.shop-list__item--mono)は、灰色のまま、同じだけ暗くする(下の灰色の塊)。
   Artifact「【全ページ】平尾和也の配色案_20261021」の案1「影」。影は「もう少し濃く」で 0.22 → 0.34 → 0.46(四隅の濃さ。影の始まりも 42% → 36% に内側へ)。design-work\terre-fear\palette-marked.py が色を作る)。
   色みは増やさない。小窓(予約の確認・ログアウトの確認・写真の拡大)と検索でしか開けないページにも同じ影が落ちる(影の層は小窓より手前)。
   字と地の比は本文 15:1、ラベル 5.2:1、押せるもの 9.2:1(palette-marked.py で測った) */
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) {
  --color-bg: #ebe6dc;        /* くすんだ生成り(ふだんは #f4f0e7) */
  --color-bg-deep: #e0dace;
  --color-surface: #f3efe8;   /* 白い板も一段沈める */
  --color-ink: #15100d;
  --color-ink-bold: #312924;  /* 墨と薄い墨の暗くし方(CIELAB の L)を明るさで割り振った値(design-work\foodie-bold\marked-value.js) */
  --color-ink-soft: #4f4944;
  --color-ink-faint: #655d55;
  --color-line: #d3cbbf;
  --color-band: #e0dace;
  --color-footer: #d6cec2;
  --rgb-shade: 21, 16, 13;
  --rgb-shade-2: 21, 16, 13;
  --rgb-shade-3: 21, 16, 13;
  --color-dot: #b8b0a5;
  --color-track: #d9d3c8;
  --color-disabled: #c8c0b4;
  --color-disabled-ink: #857d75;
  --color-disabled-ink-2: #a39b91;
  --color-search-button-ink: #f5f1ea;
  --color-teal: #203f38;      /* 島の緑を灰に寄せる */
  --color-focus-halo: rgba(32, 63, 56, 0.16);
  --color-teal-deep: #12261f;
  --color-teal-tint: #dde4df;
  --color-accent: #8a6a2a;    /* 金をくすませる */
  --color-accent-deep: #6d5218;
  --color-star: #6d5218;
  --color-danger: #7f3630;
  --color-danger-tint: #f1e4e1;
  --color-stripe-sea: #c2d0d3;   /* 縞も色を抜く */
  --color-stripe-sand: #ddd1b0;
  --color-stripe-leaf: #cbd4c5;
  --color-stripe-alert: rgba(100, 3, 3, 0.8);
  --color-rule-soft: #c9c0b3;
  --color-ink-label: #5a534c;
  --color-frame-line: #a79b8c;
  --color-map-sea: #a1bfc6;  /* 下の膜をかけた地図の海の色(design-work\terre-fear\sample-sea-marked.js で拾った)。はじめ #98b8bf にしていて、地図と面が2つに割れて見えた(2026-10-21 オーナー指摘)。膜を変えたら拾い直す */
}
/* YAMANO(theme-night)と、検索結果のその店のカード(.shop-list__item--mono)は、灰色のまま、ほかのページと同じだけ暗くする(2026-10-21 オーナー指示)。
   1色ずつ、上の「ふだん → 平尾和也」の明るさの差(CIELAB の L)だけ、白黒の灰色を動かした値(色みは付けない)。
   値は design-work\marked-escape-audit\gray-dull.py が作る。上の値か白黒の値を変えたら作り直す。
   地図の横の面(--color-map-sea)だけは、暗くした白黒の地図の海から拾った値(sample-sea-yamano.js。地図の掛け方を変えたら拾い直す) */
html.is-marked:not(.theme-muted):not(.is-final).theme-night,
html.is-marked:not(.theme-muted):not(.is-final) .shop-list__item--mono {
  --rgb-shade: 22, 22, 22;
  --rgb-shade-2: 22, 22, 22;
  --rgb-shade-3: 22, 22, 22;
  --color-dot: #aeaeae;
  --color-track: #d2d2d2;
  --color-disabled: #c1c1c1;
  --color-disabled-ink: #848484;
  --color-disabled-ink-2: #a1a1a1;
  --color-search-button-ink: #f7f7f7;
  --color-signout-line: rgba(22, 22, 22, 0.35);
  --color-bg: #e1e1e1;
  --color-bg-deep: #d8d8d8;
  --color-surface: #ececec;
  --color-ink: #161616;
  --color-ink-soft: #555555;
  --color-ink-faint: #707070;
  --color-line: #c9c9c9;
  --color-band: #d8d8d8;
  --color-footer: #cfcfcf;
  --color-teal: #0d0d0d;
  --color-focus-halo: rgba(13, 13, 13, 0.16);
  --color-teal-deep: #000000;
  --color-teal-tint: #d7d7d7;
  --color-accent: #797979;
  --color-accent-deep: #545454;
  --color-star: #606060;
  --color-danger: #121212;
  --color-danger-tint: #dddddd;
  --color-stripe-sea: #c2c2c2;
  --color-map-sea: #b9b9b9;
  --color-stripe-sand: #bbbbbb;
  --color-stripe-leaf: #bfbfbf;
  --color-stripe-alert: rgba(25, 25, 25, 0.8);
  --color-rule-soft: #c1c1c1;
  --color-ink-label: #4e4e4e;
  --color-frame-line: #9e9e9e;
}
/* 地図の端を面に溶かす指定は「地図」の節(.shop-map__figure img の mask)で全配色に共通 */
/* 写真(店舗の写真・一覧とトップの料理写真・お知らせの写真・地図)の彩度を 2 割落とし、少し暗くする。白黒の YAMANO は除く(灰色のまま) */
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .photo-gallery__item,
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .shop-list__photo img,
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .card img,
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .notice-figure img,
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .map-frame img,
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .shop-map__figure img {
  filter: saturate(0.8) brightness(0.92) contrast(1.04);
}
/* YAMANO のページと検索結果のその店のカードの写真は、白黒のまま、ほかの写真と同じだけ暗くする */
html.is-marked:not(.theme-muted):not(.is-final).theme-night .photo-gallery__item,
html.is-marked:not(.theme-muted):not(.is-final).theme-night .shop-map__figure img,
html.is-marked:not(.theme-muted):not(.is-final) .shop-list__item--mono .shop-list__photo img {
  filter: grayscale(1) brightness(0.92) contrast(1.04);
}
/* 写真の上の明るい字(トップの表紙の見出し・本文・SCROLL の印)もくすませる(2026-10-21 オーナー指示)。
   白い板と同じ幅(#fcfaf6 → #f3efe8。CIELAB で明るさ -3.75)だけ #f7f2e8 を動かした値 */
html.is-marked:not(.theme-muted):not(.is-final) .hero__title,
html.is-marked:not(.theme-muted):not(.is-final) .hero__story,
html.is-marked:not(.theme-muted):not(.is-final) .hero__scroll-cue { color: #eee7da; }
html.is-marked:not(.theme-muted):not(.is-final) .hero__scroll-line { background: #eee7da; }
/* 押せるボタンと地図の番号の白い字も、検索ボタンの字と同じくすんだ白にする(2026-10-21 オーナー指示)。
   :where() で重みを .btn-primary・.shop-map__pin と同じにし、ほかの場面の字の色(押せない時の墨など)はそのまま勝たせる */
:where(html.is-marked:not(.theme-muted):not(.is-final)) .btn-primary,
:where(html.is-marked:not(.theme-muted):not(.is-final)) .shop-map__pin { color: var(--color-search-button-ink); }
/* 表紙の写真の膜(PC は右側だけ、スマホは全体)を一段濃くする */
html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .hero::before {
  background: linear-gradient(90deg, rgba(21, 16, 13, 0.26) 45%, rgba(21, 16, 13, 0.74) 88%);
}
@media (max-width: 739.98px) {
  html.is-marked:not(.theme-muted):not(.theme-night):not(.is-final) .hero::before { background: rgba(21, 16, 13, 0.74); }
}
/* 画面の四隅の影。押せない層で、小窓(予約の確認・ログアウトの確認 100、写真の拡大 110)より手前、
   黒い画面と白い覆い(200)より奥。中身は下を流れ、四隅だけがいつも暗い。
   赤く染まった画面と結末の手紙は自前の影を持つので除く。白黒の YAMANO には落とす。
   影そのものは --marked-veil に置く(受信箱のごあいさつの行を除くとき、ヘッダーに落とす自前の影 .site-header::before も同じ影を使う) */
/* 濃さは、中心から 36% までは何もかけず、そこから 100%(0.46)まで直線で濃くしていたが、36% で急に濃くなり始めるので、
   その境目が中心の白い円に見えた(2026-10-21 オーナー指摘)。折れ目を丸めた曲線にして、どこから始まったか分からないようにした。
   70% から外は前と同じ濃さ。区切りの値は design-work\marked-veil-smooth\stops.py が作る(曲線との差 0.002 未満) */
html.is-marked {
  --marked-veil: radial-gradient(ellipse 80% 70% at 50% 45%,
    rgba(21, 16, 13, 0) 0%, rgba(21, 16, 13, 0.002) 8%, rgba(21, 16, 13, 0.006) 14%, rgba(21, 16, 13, 0.010) 19%,
    rgba(21, 16, 13, 0.015) 23%, rgba(21, 16, 13, 0.023) 27%, rgba(21, 16, 13, 0.032) 31%, rgba(21, 16, 13, 0.045) 35%,
    rgba(21, 16, 13, 0.060) 39%, rgba(21, 16, 13, 0.078) 43%, rgba(21, 16, 13, 0.098) 47%, rgba(21, 16, 13, 0.127) 52%,
    rgba(21, 16, 13, 0.164) 58%, rgba(21, 16, 13, 0.218) 66%, rgba(21, 16, 13, 0.46) 100%);
}
html.is-marked:not(.theme-muted):not(.is-final) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 150;
  pointer-events: none;
  background: var(--marked-veil);
}
@media (forced-colors: active) {
  html.is-marked:not(.theme-muted):not(.is-final) body::before { display: none; }
}

/* 店舗ページの管理者が削除した口コミ(.review--removed)は、このお名前のあいだだけ、削除される前の投稿(鈴木さくらの名前の書き込み)を出す。
   ふだんは空の四角と「削除されました」(.review__deleted)、このお名前のときは四角の字・名前・本文(.review__original)。
   出し分けるだけで、星と日付は両方に共通。上の件数と平均にはどちらでも数えない */
html:not(.is-marked) .review__original,
html.is-marked .review__deleted { display: none; }

/* 受信箱の作り手からのごあいさつ(押原一香、.message--credit)の行だけは、影も色も外して、ふだんの見た目に戻す
   (2026-10-21 オーナー指示)。下に並ぶお店からのお知らせは影のまま。
   色は、ごあいさつの行で使う色を :root と同じ値に戻す(:root の値を変えたらここも合わせる)。
   四隅の影は、行を影の幕(body::before、150)より手前(151)に出して外す。行がスクロールでヘッダーの下にもぐったときに
   行がヘッダーの上に出ないよう、ヘッダーをさらに手前(152)に出し、ヘッダーには自前の同じ影(::before)を落とす。
   (幕に行の形の穴を開ける作りは、穴の縁と継ぎ足した影の縁が同じ画素を半分ずつ塗り、拡大率 125% などで細い線が出たのでやめた)
   スマホのメニュー(60)とログアウトの確認(100)は幕の下にあるので、開いているあいだは --credit-lift を 0 にして、
   行とヘッダーを元の重なりに戻す。閉じるときは、メニューが引っ込み終わる 0.34s(.menu-drawer の visibility と同じ)を待ってから手前に出す。
   待つのは <html> の --credit-lift の切り替えで行う(ヘッダーの transition はスマホの縮む動きが使っているので触らない) */
@property --credit-lift {
  syntax: "<integer>";
  inherits: true;
  initial-value: 1;
}
html.is-marked { transition: --credit-lift 0s linear 0.34s; }
html.is-marked.is-menu-open,
html.is-marked:has(.reservation-modal.is-open) {
  --credit-lift: 0;
  transition: none;
}
html.is-marked .message--credit {
  --color-bg: #f4f0e7;
  --color-bg-deep: #eae4d9;
  --color-surface: #fcfaf6;
  --color-ink: #1f1915;
  --color-ink-soft: #5f5a55;
  --color-ink-faint: #736c64;
  --color-line: #e2dbd0;
  --rgb-shade: 31, 25, 21;
  --color-teal: #24544a;
  --color-focus-halo: rgba(36, 84, 74, 0.16);
  position: relative;
  z-index: calc(151 * var(--credit-lift));
  background: var(--color-surface);
  color: var(--color-ink);
}
html.is-marked:has(.message--credit) .site-header { z-index: calc(20 + 132 * var(--credit-lift)); }
html.is-marked:has(.message--credit) .site-header::before {
  content: "";
  position: absolute;
  z-index: 2;  /* ヘッダーの中身より手前 */
  inset: 0 0 -1px;  /* ヘッダーの外枠どおり(-1px は下の罫の分。スマホは罫がないので下で 0 に戻す) */
  /* 影の絵は、画面の上端から画面の高さぶん(body::before と同じ大きさ)に置き、形をそろえる。
     スマホでヘッダーを上へずらした分(main.js の --compact-shift)は戻す */
  background: var(--marked-veil) 0 calc(var(--compact-shift, 0px) * var(--compact-p, 0)) / 100% 100vh no-repeat;
  opacity: var(--credit-lift);
  pointer-events: none;
}
@media (max-width: 739.98px) {
  html.is-marked:has(.message--credit) .site-header::before { bottom: 0; }
}
/* PC は、ヘッダーの影を下端で切らず、その少し下の画面の画素の境目(--veil-split)まで伸ばし、全体の幕はそこから下だけに掛ける。
   ヘッダーの下端は 102.94px のような半端な所にあり、拡大率 125%・150% では下端の画素をヘッダーの地・罫と影の板が半分ずつ塗る。
   影の板の縁をそこに置くと、その画素だけ影が薄くなり、罫の下に明るい筋が出た。境目を画素にそろえれば、半分だけ塗る画素ができない。
   画面の画素の大きさ(--dpr)は js/messages.js が書く。round() が使えないブラウザでは、上のヘッダーの外枠どおりのまま。
   スマホは、ヘッダーが縮む動きの clip-path が影をヘッダーの外へ出さないので、外枠どおり(罫がないので筋も出ない) */
@supports (top: round(up, 1px, 1px)) {
  @media (min-width: 740px) {
    html.is-marked:has(.message--credit) {
      --veil-split: round(up, calc(var(--header-height) - 8px), calc(1px / var(--dpr, 1)));  /* 8px は --header-height に足してある着地の余白 */
    }
    html.is-marked:has(.message--credit) .site-header::before { bottom: auto; height: var(--veil-split); }
    html.is-marked:has(.message--credit) body::before { clip-path: inset(calc(var(--veil-split) * var(--credit-lift)) 0 0 0); }
  }
}
@media (forced-colors: active) {
  html.is-marked:has(.message--credit) .site-header::before { display: none; }
}

/* 赤く染まる画面へ切り替わる間、画面全体を白で覆って処理中の輪を見せる。
   赤く染まるところと、上端へ飛ぶところを見せないための覆い。
   作るのと消すのは js/reservation-render.js(.page-turn / .is-leaving)。
   写真の拡大(110)より手前に置く。 */
.page-turn {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}
.page-turn.is-leaving {
  opacity: 0;
  transition: opacity 0.45s ease-out;
}
/* 処理中の輪。一周だけ濃くした輪を回す */
.page-turn__spinner {
  width: 34px;
  height: 34px;
  border: 2px solid #dcdcdc;
  border-top-color: #8c8c8c;
  border-radius: 50%;
  animation: page-turn-spin 0.9s linear infinite;
}
@keyframes page-turn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .page-turn__spinner { animation: none; }
  .page-turn.is-leaving { transition: none; }
}

/* 結末に関わるお名前でログインしているときだけ、ヘッダーのお名前を濃い赤で出す
   (オーナー指定。24:00 の ○ と同じ色)。判定は js/main.js、名前は js/puzzle-data.js */
.site-header__name.is-marked { color: #7a1c16; }

/* ログアウトの確認。予約確認と同じ部品を使うが、文言も中央ぞろえにし、
   赤く染まった画面での予約確認の装い(.theme-muted .reservation-modal ...)は掛けない */
.confirm-modal .reservation-modal__body { text-align: center; }
/* 一文とボタンだけなので、板は予約確認より小ぶりにする */
.confirm-modal .reservation-modal__dialog {
  /* ボタン2つ(132px + 12px + 132px = 276px)が1行に収まる幅。
     横は詰めるぶん、上下はゆったり取る */
  max-width: 324px;
  /* 上は詰めて一文を上へ寄せ、下も詰めてボタンを下へ寄せる(オーナー指定) */
  padding: 30px 20px 20px;
}
.confirm-modal .reservation-modal__actions { margin-top: 44px; }
.theme-muted .confirm-modal .reservation-modal__dialog {
  background: var(--color-surface);
  color: var(--color-ink);
}
.theme-muted .confirm-modal .btn-primary {
  background: var(--color-teal);
  border-color: var(--color-teal);
  color: #140000;
}
.theme-muted .confirm-modal .btn-secondary {
  background: transparent;
  border-color: var(--color-line);
  color: var(--color-ink);
}
/* スマホ(739px 以下)のポップ(予約確認・ログアウトの確認)は、全体を約 8 割に小さくする(2026-10-09 オーナー指示)。文字の大きさは変えない。
   はじめは予約確認が板の幅 343px(375px のとき)・内側 32/30/28px、ログアウトの確認が 324px・30/20/20px、ボタンは 127×43px で、
   ボタン2つ(266px)が板に入らず、330px 前後で予約確認は「確定する」が右にはみ出し、ログアウトの確認は2段に折れていた。
   ボタンは同じ幅(104px)の列に並べる(予約を確定した後に「閉じる」だけが残っても、1列で中央に来る)。104 + 10 + 104 = 218px は、
   320px の画面でもどちらの板の内側(232px・228px)に収まる */
@media (max-width: 739.98px) {
  .reservation-modal__dialog { max-width: 280px; padding: 26px 24px 22px; }
  .confirm-modal .reservation-modal__dialog { max-width: 260px; padding: 24px 16px 16px; }
  .reservation-modal.is-open .reservation-modal__actions {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 104px;
    gap: 10px;
    width: max-content;
    margin: 22px auto 0;
  }
  .confirm-modal.is-open .reservation-modal__actions { margin-top: 36px; }
  .reservation-modal.is-open .reservation-modal__actions button {
    width: 100%;
    height: 36px;
    padding: 0;
    line-height: 34px;  /* 枠の上下 1px を除いた高さで、文字を上下の中央に置く */
  }
}

/* ── スマホの文字まわり(続き)。740px 未満だけ ──
   上の「スマホの文字まわり」の残り。ここに置いてあるのは、元の指定が
   ファイルの後ろにあって、先に書くと上書きが効かないものだけ。 */
@media (max-width: 739.98px) {
  /* お知らせ本文の行間。1.85 は画面が狭いと間延びして見える */
  .notice p { line-height: 1.75; }
  /* 指で押せる大きさ(44px)に届かせる。当たり判定だけを広げるので見た目は変わらない */
  .more-link::after,
  .back-link a::after,
  .site-header__signout::after { inset: -12px -10px; }
}

/* ── スマホの余白と見出し(2026-09-25 オーナー指示)。740px 未満だけ ──
   パソコンと同じ値のまま残っていた余白を約6割に詰め、見出しを一段下げる。
   パソコン側の値はここでは一切変えない。元の指定より後ろに置かないと効かないので末尾に置く。 */
@media (max-width: 739.98px) {
  /* 見出し。H1 は 28→23px、H2 は 23→20px(既存の段階 --fs-5 / --fs-4 から選ぶ) */
  .page-header h1 { font-size: var(--fs-5); }
  /* 見出しの下に説明文が無いページだけ、見出しの下の余白(18px)が上乗せされて
     本文までが 58px 空いていた。説明文があるページ(40px)にそろえる */
  .page-header h1:last-child { margin-bottom: 0; }
  .section-heading h2,
  .section > h2 { font-size: var(--fs-4); }

  /* フッター。トップページは帯から隙間なく続ける指定(margin-top: 0)が勝つので影響しない */
  .site-footer { margin-top: 48px; }
  .site-footer__inner { padding-top: 32px; padding-bottom: 40px; }

  .intro-page main { padding-top: 32px; padding-bottom: 48px; }
  .intro-page .intro-actions { margin-top: 28px; }
  .back-link { margin-top: 24px; }
  .access { margin-top: 24px; }
  .no-results { padding: 36px 0; }

  /* フーディー賞の表彰と言い伝え(.notice--roomy)。パソコンではゆったり読ませる余白(オーナー指定)を保ち、
     スマホでは写真の上下などが画面の大半を空白にしてしまうので約6割にする */
  .notice--roomy { padding-bottom: 32px; }
  .notice--roomy p + p { margin-top: 1.5em; }
  .notice--roomy .notice-winner { margin: 40px 0 44px; }
  .notice--roomy .notice-figure { margin: 48px 0; }
  .notice--roomy hr { margin: 48px 0; }
  /* 日付と題名の間は、ほかの記事と同じ 8px(題名の上の余白だけ)にそろえる(2026-10-21 オーナー指示。PC は上の 20px のまま) */
  .notice--roomy time { margin-bottom: 0; }
}

/* ── トップページのスマホ表示(2026-09-25 オーナー採用) ──
   表紙・掲載店舗は B案「横にめくる」、お知らせ・島の地図は A案「今の形を整える」、
   フッターは B案。文字を横になるべく多く並べるため、左右の余白を小さくする(オーナー指定)。
   740px 未満だけ。フッター以外はトップページ(body[data-page="index"])に限る。 */
@media (max-width: 739.98px) {
  /* 左右の余白はヘッダー(店名・検索窓)の左端と同じ 12px にそろえる */
  body[data-page="index"] { --gutter: 12px; }

  /* 表紙：写真だけを上に見せ、文章は写真の下の紙色の地に縦書きで置く(2026-09-28 オーナー採用 B案)。
     写真は ::before に移す(元の ::before は文字の下を暗くする膜だったが、文字が写真から離れるので要らない)。
     縦書きでは <br> が列の区切りになるので、パソコンと同じく <br> を残す(以前は横書きで流し込むため消していた)。
     列の高さ 37em は、いちばん長い列(34字)が字間込みで収まる高さ。2段落とも同じ大きさ・同じ墨色 */
  .hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 240px 0 0;
    background: var(--color-bg);
  }
  .hero::before {
    inset: 0 0 auto 0;
    height: 240px;
    background: var(--hero-image) var(--hero-focus) / cover no-repeat;
  }
  .hero__story {
    height: 37em;
    margin: 44px 0 56px;
    gap: 1.75em;
    font-size: 1rem;
    color: var(--color-ink);
  }
  .hero__story p {
    line-height: 2.1;
    letter-spacing: 0.05em;
    line-break: strict;
  }

  body[data-page="index"] .section--band { padding: 48px 0; }

  /* 掲載店舗：横にめくるカード。右端に次のカードを少し覗かせて、横に続くことを示す */
  body[data-page="index"] .card-grid {
    flex-direction: row;
    gap: 12px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter) 4px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }
  body[data-page="index"] .card-grid::-webkit-scrollbar { display: none; }
  body[data-page="index"] .card {
    flex: 0 0 288px;
    flex-direction: column;
    gap: 0;
    padding: 0;
    border-top: none;
    scroll-snap-align: start;
  }
  body[data-page="index"] .card__photos { width: 100%; height: 176px; }
  body[data-page="index"] .card__body { padding: 14px 16px 16px; }
  /* 店名と分類の札は必ず1行にする(2026-09-26 オーナー指示)。いちばん長い
     「トラットリア・ヴォンゴラ」＋「イタリアン」でも収まるよう、店名 15px・札 10px にし、カードを 288px にした。
     それでも入らない端末では折り返さず、店名の末尾を「…」で省く。店名を増やしたり長くしたりしたら 360px で測り直す。
     店名を overflow: hidden にしても、カード全体に広げたリンク(a::after)は .card を基準にしているので切れない */
  body[data-page="index"] .card__title-row {
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }
  body[data-page="index"] .card h3 {
    min-width: 0;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  body[data-page="index"] .card .tag {
    flex-shrink: 0;
    padding: 2px 8px;
    font-size: 0.6667rem; /* 10px */
  }
  body[data-page="index"] .card .meta { margin: 4px 0 6px; }
  body[data-page="index"] .card__desc {
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* お知らせ：白い板をやめ、上に墨の罫、1件ごとに細い罫で区切る台帳にする(2026-09-28 オーナー採用 B案)。
     文字の左右は今までどおり画面の端から 12px(--gutter)。抜粋は2行まで。上下の空きは下の「トップのお知らせ欄の空白」 */
  body[data-page="index"] .notice--linked {
    margin: 0;
    padding: 18px 0 20px;
    background: none;
    border-top: none;
    border-bottom: 1px solid var(--color-line);
  }
  body[data-page="index"] .notice--linked:first-of-type { border-top: 1px solid var(--color-ink); }
  body[data-page="index"] .notice--linked p {
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 島の地図：店の行を少し詰める */
  body[data-page="index"] .map-shops { margin-top: 24px; }
  body[data-page="index"] .map-shops a { min-height: 48px; }

  /* フッター(全ページ)：左右の余白を 12px にし、注記は一文ごとに改行せず続けて流す */
  .site-footer__inner { padding-left: 12px; padding-right: 12px; }
  .site-footer__notice span { display: inline; }

  /* 注記は PC の長い文(2文で約120字)の代わりに短い文(.site-footer__notice--short)を出し、1文ずつ行を改めて、
     店名・著作権の行と同じく中央にそろえる(2026-10-09 オーナー指示。長い文は 10px で4〜5行になり、文が行の途中から始まっていた)。
     入らない幅では文の中で折れてよい(オーナー指示)。折れた行も中央にそろう。
     span の指定は上の「続けて流す」(display: inline)より後ろに置かないと負ける */
  p.site-footer__notice:not(.site-footer__notice--short) { display: none; }
  p.site-footer__notice--short {
    display: block;
    align-self: center;
    text-align: center;
  }
  .site-footer__notice--short span { display: block; }
}

/* ── トップページの掲載店舗とお知らせ(2026-09-28 オーナー採用) ──
   掲載店舗は A案「1店ずつの行」(小さくしたもの)、お知らせは B案「罫で区切った台帳」(Artifact「美食島 トップ 夜の刷新案」)。
   色はこれまでのまま。見出しと MORE、島の地図は変えない。トップ(body[data-page="index"])だけで、
   店舗一覧・お知らせ一覧のページは変えない。ここは 740px 以上。スマホの掲載店舗は今までどおり横にめくるカード、
   スマホのお知らせは上の「トップページのスマホ表示」 */
@media (min-width: 740px) {
  /* 掲載店舗：白い板に写真と文を左右交互に並べ、4店(AMA・汐風・ヴォンゴラ・マレ)を縦に積む(2026-09-29 オーナー指示。
     Artifact「トップページ 刷新案_20260927」の A案の形を、1行 360px → 260px・写真 6割 → 4割に小さくしたもの)。
     料理写真は正方形なので、写真の枠を横長にするほど上下が切れる。写真の列を広げたら 1440px で皿が切れすぎないか見直す。
     HTML は組み替えず、.card__title-row を開いて「店名 / 札・営業時間 / 説明」の3段に並べ直す */
  body[data-page="index"] .card-grid { gap: 24px; }
  body[data-page="index"] .card {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    height: 260px;
    gap: 0;
    padding: 0;
    border-top: none;
  }
  /* 上の display: grid が「4〜6店目(.card--more)はパソコンで出さない」指定より強いので、ここでも隠し直す */
  body[data-page="index"] .card--more { display: none; }
  body[data-page="index"] .card:nth-child(even) { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
  body[data-page="index"] .card:nth-child(even) .card__photos { order: 2; }
  body[data-page="index"] .card__photos { width: auto; height: auto; }
  body[data-page="index"] .card__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "name name"
      "tag  meta"
      "desc desc";
    align-content: center;
    align-items: center;
    gap: 14px 12px;
    padding: 36px 48px;
  }
  body[data-page="index"] .card__title-row { display: contents; }
  body[data-page="index"] .card h3 {
    grid-area: name;
    font-size: var(--fs-5);
    letter-spacing: 0.04em;
    line-height: 1.3;
  }
  body[data-page="index"] .card .tag { grid-area: tag; justify-self: start; }
  body[data-page="index"] .card .meta { grid-area: meta; margin: 0; }
  body[data-page="index"] .card__desc {
    grid-area: desc;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* お知らせ：白い板をやめ、上に墨の罫、1件ごとに細い罫で区切る台帳にする(左に日付、右に題名と抜粋)。
     カーソルを当てたときの淡い赤の地(PCだけ)は今までどおり。地が文字に貼り付かないよう、行の内側に
     左右 12px 取って同じだけ外へ広げる(島の地図の店名の行と同じやり方。文字の位置は変わらない) */
  body[data-page="index"] .notice--linked {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 32px;
    margin: 0 -12px;
    padding: 30px 12px 32px;
    background: none;
    border-top: none;
    border-bottom: 1px solid var(--color-line);
  }
  body[data-page="index"] .notice--linked:first-of-type { border-top: 1px solid var(--color-ink); }
  body[data-page="index"] .notice--linked time { grid-column: 1; grid-row: 1 / span 2; padding-top: 4px; }
  body[data-page="index"] .notice--linked h3 { grid-column: 2; margin: 0; }
  body[data-page="index"] .notice--linked p { grid-column: 2; margin-top: 10px; }
}
/* 上で地を消しているので、カーソルを当てたときの地をここで付け直す(PCだけ)。
   トップだけ、札・お知らせの行・地図の店名の並びを淡い赤でなく一段沈めた生成りにしていた
   (2026-09-30 オーナー指示で試しに。Artifact「お知らせ一覧 ホバー色4案」の案3)。2026-10-04 から全ページこの色 */
@media (min-width: 1024px) and (hover: hover) {
  body[data-page="index"] .card:hover,
  body[data-page="index"] .notice--linked:hover,
  body[data-page="index"] .map-shops a:hover { background: var(--color-bg-deep); }
}
/* 掲載店舗・お知らせ・島の地図の見出しの上は、96px の3分の2に詰める(2026-10-02 オーナー指示。タブレット・PC とも。下は 96px のまま) */
@media (min-width: 740px) {
  body[data-page="index"] .section--band { padding-top: 64px; }
}
/* 試し(2026-10-04 オーナー指示。PC だけ):掲載店舗一覧・お知らせ(一覧と各記事。読み物3ページも同じ作り)・
   メッセージの白い板を、角丸と薄い影(kidsdoor風の白いカードと同じ影)で浮かせる。
   はじめは地とヘッダーも白にしていたが、暫定解20261004(ファイルの終わり)でトップと同じ生成りに戻した。
   結末の画面(messages.html に .is-final が付く)と、店舗ページ・検索結果は変えない */
@media (min-width: 740px) {
  body[data-page="restaurants"],
  body[data-page="news"],
  html:not(.is-final) body[data-page="messages"] {
    --radius-panel: 10px;
    --shadow-panel-item: 0 2px 14px rgba(var(--rgb-shade-3), 0.08);
  }
  body[data-page="restaurants"] .shop-list__item,
  body[data-page="news"] .notice--article,
  html:not(.is-final) body[data-page="messages"] .message-list:has(> .message) {
    border-radius: var(--radius-panel);
    box-shadow: var(--shadow-panel-item);
  }
  body[data-page="restaurants"] .shop-list__item { overflow: hidden; }
  /* お知らせ一覧の行は罫でつないだ一枚の板なので、行ごとに影を付けず(継ぎ目に影が重なる)、
     並び全体の輪郭に drop-shadow を落とす。ぼかしは box-shadow の半分で同じ見え方になる */
  body[data-page="news"] main > .section > .container { filter: drop-shadow(0 2px 7px rgba(var(--rgb-shade-3), 0.08)); }
  body[data-page="news"] .notice--linked:first-of-type {
    border-top-left-radius: var(--radius-panel);
    border-top-right-radius: var(--radius-panel);
  }
  body[data-page="news"] .notice--linked:last-of-type {
    border-bottom-left-radius: var(--radius-panel);
    border-bottom-right-radius: var(--radius-panel);
  }
}

/* 記事(お知らせの各記事と archive/ の読み物3ページ)の本文は、見出しと同じ墨にする(薄い灰色だと輪郭が弱い)。
   はじめはスマホだけだったのを、2026-09-30 オーナー指示でパソコンにもそろえた。
   > p に限るのは、引用(blockquote)の中の段落の色を変えないため */
body[data-page="news"] .notice:not(.notice--linked) > p { color: var(--color-ink); }

/* ── お知らせの記事(2026-10-01 オーナー採用。Artifact「美食島 お知らせ記事 刷新3案」の案A-3) ──
   お知らせの各記事と archive/ の読み物3ページ(言い伝え・尼牛・フーディー賞)。どれも <article class="notice notice--article">。
   題名(h1)も白い板の中に置き、上から日付・題名・細い罫・本文の1列に並べる
   (はじめ左に日付・右に題名と本文の2列(案A-2)にしたが、同日オーナー指示で日付を題名の上に移した)。
   板の上の端に墨の線は付けない(PC・スマホとも)。
   文字の大きさはほかのページとそろえる(同日オーナー指示):日付は一覧・トップと同じ .notice time のまま、本文はサイトの本文と同じ --fs-2。
   題名ははじめ各ページの見出し(.page-header h1)と同じ --fs-6 にしたが、同日オーナー指示で一段小さい --fs-5 にした。
   スマホの題名は、09-26 の指示どおりさらに一段小さい(下の「お知らせの題名を小さく」) */
/* 白い板は階層表示の下から 24px 下げる(階層表示の下の余白 30px と合わせて 54px。スマホは 12px 下げて 32px。同日オーナー指示) */
.notice--article { margin-top: 24px; }
.notice--article > h1 {
  margin: 12px 0 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--color-line);
  font-family: var(--font-serif);
  font-size: var(--fs-5);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.notice--article > h1 + p { margin-top: 36px; }
/* 本文と引用の1行は、店舗ページの口コミの本文(.review p)と同じ 720px まで(1行約51文字)。板の右に余白を残す。
   一度は板の右の端まで広げたが、右の余白がなくなったので同日オーナー指示で口コミにそろえた。写真は今の大きさのまま */
.notice--article > p,
.notice--article > blockquote { max-width: 720px; }
/* 更新情報(「※更新情報　4月29日」など)は、上下に細い罫を引いて本文と分ける(2026-10-14 オーナー指示)。
   罫は題名の下の罫・区切り線(hr)と同じ 1px の --color-line。長さは板の内側いっぱいではなく本文の幅(上の 720px)まで(同日オーナー指示)。
   前後の余白は段落のまま(PC・スマホとも)なので、署名は罫と内側の余白の分だけ下がる */
.notice--article > p.notice-update {
  padding: 20px 0;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
@media (min-width: 740px) {
  /* 板の上下の余白は 48/64 → 36/48px に詰めた(同日オーナー指示。板を縦に小さく) */
  .notice--article { padding: 36px 56px 48px; }
  /* 段落の間は 3.3文字分あける(はじめは 2.2文字分。2026-10-10 オーナー指示で約1.5倍)。引用・写真の前後も同じだけあける(言い伝えのページ)。
     フーディー賞(.notice--roomy)の行間 2.1 と、受賞者・写真・区切り線・署名のまわりの広い余白は上の指定のまま */
  .notice--article:not(.notice--roomy) > p { line-height: 2; }
  .notice--article > p + p,
  .notice--article > p + blockquote,
  .notice--article > blockquote + p,
  .notice--article > p + figure,
  .notice--article > figure + p { margin-top: 3.3em; }
  /* 行方不明の記事の特徴の表は、前後を段落の間よりさらに広い 5文字分(約 70px)あける(2026-10-10 オーナー指示。前は上 12px・下 28px) */
  .notice--article > dl,
  .notice--article > dl + p { margin-top: 5em; }
  /* 表の見出し(名前・年齢など)だけを、本文の左の端から 24px 字下げする。値(平尾和也など)の位置は変えない(2026-10-10 オーナー指示) */
  .notice--article > dl > dt { padding-left: 24px; }
  /* 署名(尼山原島グルメサイト運営事務局)の上は、段落の間の1.5倍の 4.95文字分(約 70px。2026-10-10 オーナー指示。一度2倍にした)。
     表のすぐ後でも同じ。フーディー賞の写真のすぐ後は、写真の下の 80px のほうが広いのでそちらになる(重なる余白は大きいほう) */
  .notice--article > p.notice-sign { margin-top: 4.95em; }
}
/* スマホ。表(行方不明の特徴)は罫を付けず、見出しと値を詰めて並べる */
@media (max-width: 739.98px) {
  .notice--article { margin-top: 12px; }
  .notice--article > h1 {
    margin-top: 8px;
    padding-bottom: 22px;
  }
  .notice--article > h1 + p { margin-top: 36px; }  /* 題名の下の線から本文まで(2026-10-10 オーナー指示で 24px から約1.5倍) */
  .notice--article > dl {
    grid-template-columns: 4.5em minmax(0, 1fr);
    gap: 4px 16px;
  }
  /* 表の見出し(名前・年齢など)だけを、本文の左の端から 16px 字下げする。値の位置は変えない(2026-10-10 オーナー指示) */
  .notice--article > dl > dt { padding-left: 16px; }
}

/* ── お知らせのスマホ表示(2026-09-26 オーナー指示) ──
   トップのデザイン案Aのお知らせの形を、お知らせの一覧と記事ページにそろえる。
   body[data-page="news"] は一覧・各記事・archive/ の読み物3ページ(フーディー賞・言い伝え・尼牛)。
   左右の余白は 12px、白い板は画面の端まで広げて、板の内側の左右も 12px にする。740px 未満だけ。 */
@media (max-width: 739.98px) {
  /* 検索結果も、店(掲載店舗一覧)・お知らせのどちらの一覧とも同じく左右 12px、白い板は画面の端まで */
  body[data-page="news"],
  body[data-page="search"] { --gutter: 12px; }

  body[data-page="news"] .notice,
  body[data-page="search"] .notice {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* ここから下は「行間でゆとり」(2026-09-26 オーナー採用 デザイン案A)。
     文字だけのページが詰まって読みにくかったので、左右は 12px のまま、上下と行間を広げる。
     文字の大きさは変えない */
  /* 検索結果の見出しと説明文は、店・お知らせのどちらが出ても同じ既定の行の高さにする
     (2026-10-06 オーナー指示。はじめはお知らせが出たときだけこの一覧と同じ高さにしていて、見出しまわりが 3px 高くなっていた) */
  body[data-page="news"] .page-header h1 { line-height: 1.45; }

  /* 一覧の行。1件の上下、日付・題名・抜粋の間を広げる。抜粋は2行まで */
  body[data-page="news"] .notice--linked,
  body[data-page="search"] .notice--linked {
    padding-top: 28px;
    padding-bottom: 30px;
  }
  body[data-page="news"] .notice--linked h3,
  body[data-page="search"] .notice--linked h3 {
    margin-top: 10px;
    line-height: 1.7;
  }
  body[data-page="news"] .notice--linked p,
  body[data-page="search"] .notice--linked p {
    margin-top: 12px;
    line-height: 1.95;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* 記事。段落の間と行間を広げる(本文の墨は上の、幅を問わない指定)。
     日付は白い板のいちばん上のまま、本文との間を空ける。
     > p に限るのは、引用(blockquote)の中の段落の色と間隔を変えないため */
  body[data-page="news"] .notice:not(.notice--linked) {
    padding-top: 32px;
    padding-bottom: 36px;
  }
  body[data-page="news"] .notice:not(.notice--linked) > p { line-height: 2; }
  /* 段落の間は 33px(2026-10-10 オーナー指示で 22px から約1.5倍。引用の前後も同じ)。
     行方不明の記事の特徴の表は、前後を段落の間よりさらに広い 50px(同日オーナー指示。前は上 20px・下 28px) */
  body[data-page="news"] .notice:not(.notice--linked) > p + p,
  body[data-page="news"] .notice:not(.notice--linked) > p + blockquote,
  body[data-page="news"] .notice:not(.notice--linked) > blockquote + p { margin-top: 33px; }
  body[data-page="news"] .notice:not(.notice--linked) > dl,
  body[data-page="news"] .notice:not(.notice--linked) > dl + p { margin-top: 50px; }
  /* 署名(尼山原島グルメサイト運営事務局)の上は、段落の間の1.5倍の 50px(2026-10-10 オーナー指示。一度2倍にした。表や写真のすぐ後でも同じ) */
  body[data-page="news"] .notice:not(.notice--linked) > p.notice-sign { margin-top: 50px; }
  body[data-page="news"] .back-link { margin-top: 36px; }
}

/* ── スマホの文字の詰め直し(2026-09-26 オーナー指示) ──
   740px 未満だけ。元の指定より後ろに置かないと効かないので末尾に置く。 */
@media (max-width: 739.98px) {
  /* メニューの文字を、店舗ページのタブ(旧 約13px)と同じくらいに小さくする。行も詰める */
  .menu-drawer__link {
    min-height: 52px;
    font-size: 0.875rem;
  }

  /* 店舗ページの上の「予算・営業時間・本土から」も小さくする */
  .shop-facts__item { padding: 10px 0; }
  .shop-facts__value { font-size: 0.875rem; }

  /* フッター：注記の下の余白を詰め、文字を小さくする。
     店名 16.9px → 15px、著作権の行 12.2px → 11.25px、注記 10.5px → 10px(2026-10-05 オーナー指示で3つとももう少し小さくした) */
  .site-footer__inner { padding-bottom: 20px; }
  .site-footer__name { font-size: 15px; }
  .site-footer__copy,
  .site-footer__author { font-size: 11.25px; }   /* 作者サイトの行は著作権の行と同じ大きさ(480.98px 以下も同じ) */
  p.site-footer__notice { font-size: 9.5px; }  /* 10px から 9.5px に(2026-10-09 オーナー指示) */

  /* 入力欄の文字は 16px。iPhone は 16px より小さい入力欄に触れると画面を自動で拡大するため
     (検索窓・空席検索の選択欄・お名前の入力欄)。rem の基準が 15px なので px で書く */
  .search-box input[type="search"],
  .availability-search select,
  .visitor-gate__input { font-size: 16px; }
}

/* フッターの著作権の行は、左右の余白が 12px の幅(480px 以下)では 11.25px から 10px にし、330px の画面でも1行に収める
   (2026-10-09 オーナー指示。11.25px だと約 333px あり、357px 以下では「／」の後ろで折れていた)。
   10px で約 296px、330px の画面で使える幅は 306px。10.25px は約 2px しか余らないのでやめた。481px からは 11.25px のままで1行に入る。
   文や字を変えたら 330px で測り直す */
@media (max-width: 480.98px) {
  .site-footer__copy,
  .site-footer__author { font-size: 10px; }
  /* 注記(スマホの短い文)の左右の余白は、フッターの 12px より 2px ずつ外へ出して 10px にする(2026-10-09 オーナー指示)。
     店名と著作権の行は 12px のまま */
  p.site-footer__notice--short { margin-left: -2px; margin-right: -2px; }
}

/* ── 改行されて何行も続く読み物は左右の余白を削る(2026-09-26 オーナー指示・サイト全体の決まり) ──
   口コミの本文・お知らせの本文・メッセージの本文のように、文章が改行されて続く部分は、左右 12px にし、
   白い板は画面の端まで広げて板の内側の左右も 12px にする。予算・営業時間の欄、店舗情報、メニュー、タブ、
   検索結果のような短い項目の並びは、余白のある板のまま(左右 16px、板の内側 20px)にする。
   一度は店舗ページ全体・検索結果も削ったが、欄や表は余白があった方がよいとのことで戻した(同日オーナー指示)。
   ここでは受信箱・初回のお知らせ画面・店舗ページの口コミの節を削る。740px 未満だけ。 */
@media (max-width: 739.98px) {
  body[data-page="messages"],
  .intro-page { --gutter: 12px; }

  .intro-page .notice {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* 受信箱は、メッセージが並んでいるときだけ板を敷く(空の案内の文は広げない)。
     行の中の余白で文字の位置を決めているので、板は広げるだけにして行の側で 12px を取る */
  body[data-page="messages"] .message-list:has(> .message) {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  body[data-page="messages"] .message__summary { padding: 16px var(--gutter) 16px 32px; }
  body[data-page="messages"] .message__summary::before { left: var(--gutter); }
  /* 本文(「○○ 様」から下)は、行の頭の店名(矢印の分だけ字下げした 32px)にそろえず、画面の端から 12px に置く
     (2026-10-07 オーナー指示。はじめは店名と同じ 32px) */
  body[data-page="messages"] .message__body { padding: 4px var(--gutter) 24px; }
  /* 予約の直後に出る「ご予約が完了しました」の板も、受信箱の板と同じく画面の端まで広げ、中の文字は端から 12px にする
     (2026-10-07 オーナー指示。はじめは板が端から 12px 内側で、文字は板の内側 24px の所。端から 36px) */
  body[data-page="messages"] .message-notice {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  /* 店舗ページは口コミの節だけ、画面の端から 12px にする(ほかの節は 16px のまま)。
     節の見出しと要約もこの節の中で 12px にそろえ、文字の左端がずれないようにする。
     要約の白い板は端まで広げず、余白のある板のまま */
  body[data-page="restaurant"] #reviews {
    margin-left: calc(12px - var(--gutter));
    margin-right: calc(12px - var(--gutter));
  }

  /* 店舗ページのメニューの品名と値段は 13px。一度は口コミの本文と同じ 14px にしたが、
     まだ大きいとのことでもう一段下げ、行の上下も詰めた(2026-09-26 オーナー指示) */
  .menu-list li { padding: 8px 0; background-position: left bottom 11px; }
  .menu-list li > span:first-child,
  .menu-list li .price { font-size: 0.875rem; }

  /* 店舗ページの口コミの表(点数と棒グラフの白い枠)。縦に間延びしていたので、
     枠の内側・棒の行の間を詰め、点数の数字をページの見出しと同じ大きさにする(2026-09-26 オーナー指示) */
  .review-summary { padding-top: 14px; padding-bottom: 14px; }
  .review-summary__average { font-size: var(--fs-5); }
  .review-summary__stars { margin-top: 4px; }
  .review-bar { margin-bottom: 2px; line-height: 1.4; }
}

/* ── 地図の吹き出しが画面からはみ出さないように(2026-09-26 オーナー指示) ──
   RESTAURANT YAMANO は地図の右寄りにあり名前も長いので、幅 320px の画面で吹き出しが右へはみ出していた。
   この吹き出しだけ、スマホでは文字と左右の余白を小さくする。740px 未満だけ。
   店名を変えたり吹き出しを右へ動かしたりしたら、320px で測り直す */
@media (max-width: 739.98px) {
  .shop-map__pin--long {
    font-size: 0.6667rem; /* 10px */
    padding-left: calc(8px - var(--pin-dx, 0em));  /* 文字を真ん中に置くための差し引き(上の .shop-map__pin の注記) */
    padding-right: calc(8px + var(--pin-dx, 0em));
  }
  /* 札を明朝にしたら幅が 125 → 136px に広がり、320〜340px で右へはみ出すようになった(2026-10-20)。
     札だけ 10px 左へずらし、矢印は店の場所(ずらす前の真ん中)に残す。320px で右の空き約 3px。店名や書体を変えたら 320px で測り直す */
  .shop-map__pin--long { transform: translate(calc(-50% - 10px), calc(-100% - 8px)); }
  .shop-map__pin--long::after { left: calc(50% + 10px); }
}

/* ── お知らせの題名を小さく(2026-09-26 オーナー指示) ──
   どのページでも題名が大きすぎたので、本文(約14px)より一回り大きい程度に下げる。740px 未満だけ。
   一覧の行(トップのお知らせ4件・お知らせ一覧)は 約17 → 15px。
   記事の題名(お知らせの各記事と archive の読み物3ページ。白い板の中の h1)は 約23 → 約20px。
   お知らせ一覧のページ見出し「お知らせ」は、ほかのページの見出しとそろえて変えない */
@media (max-width: 739.98px) {
  .notice--linked h3 { font-size: 1rem; }
  body[data-page="news"] .notice--article > h1 { font-size: var(--fs-4); }
}

/* ── スマホで下へスクロールしている間はヘッダーを狭める(2026-09-26 オーナー指示) ──
   検索窓を隠し、「ようこそ」の行と店名と ≡ の段だけにする。上へスクロールすると戻る。
   (「ようこそ」の行も一度は隠したが、見え方に違和感があるとのことで同日に隠さないよう戻した。
   上へずらす --compact-shift はそのときの仕組みで、今は main.js が 0 を入れている)
   一気に消さず、スクロールした量だけ隠す(指に沿ってページと一緒に動く)。どれだけ隠したかは
   main.js の initCompactHeader() が --compact-p(0 = 全部見せる〜1 = 店名の段だけ)で入れる。
   ヘッダーの高さは変えない(変えると下のページが動いて画面が跳ねる)。ヘッダーごと上へずらして
   「ようこそ」の行を画面の外へ出し、下は clip-path で切って検索窓を巻き上げる。
   ずらす量(--compact-shift)と切る量(--compact-cut)も main.js が測って入れる。
   途中で止まっても寄せず、その位置のままにする。.is-settling で動きを付けるのは、検索窓に入力を始めたときなど
   スクロールと関係なく全部見せるときだけ。740px 未満だけ */
@media (max-width: 739.98px) {
  .site-header {
    transform: translateY(calc(var(--compact-shift, 0px) * var(--compact-p, 0) * -1));
    clip-path: inset(0 0 calc(var(--compact-cut, 0px) * var(--compact-p, 0)) 0);
  }
  .site-header.is-settling { transition: transform 0.22s ease-out, clip-path 0.22s ease-out; }
  /* 検索窓の下(ヘッダーの下端)の罫はスマホでは引かない(2026-10-01 オーナー指示)。
     狭めている間だけ、切り口に罫を引いてヘッダーと本文の境目を残す。
     全部見せているとき(--compact-p が 0)は opacity が 0 になって消え、少しでも狭めると 1 に張り付く */
  .site-header { border-bottom: none; }
  .site-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(var(--compact-cut, 0px) * var(--compact-p, 0));
    height: 1px;
    background: var(--color-line);
    opacity: calc(var(--compact-p, 0) * 100);
    pointer-events: none;
  }
  .site-header.is-settling::after { transition: bottom 0.22s ease-out; }
  /* 節へ飛ぶ(下へスクロールする)とヘッダーは狭まるので、着地の余白は狭めたときの高さに合わせる。
     全部見せた高さのままだと、見出しの上に 100px ほどの空きができる。赤く染まる画面は別の指定(16px)が勝つ */
  [id],
  body[data-page="restaurant"] .section[id] { scroll-margin-top: var(--header-compact-height, var(--header-height)); }
  /* 隠れきった検索窓にキーボードで移れないようにする */
  .site-header.is-compact .search-box { visibility: hidden; }
}
@media (max-width: 739.98px) and (prefers-reduced-motion: reduce) {
  .site-header.is-settling,
  .site-header.is-settling::after { transition: none; }
}

/* トップの掲載店舗の5・6店目(.card--more)は、スマホの横にめくる並びでだけ見せる。
   パソコンのトップは4店まで(2026-09-29 オーナー指示でマレを足した) */
@media (min-width: 740px) {
  .card--more { display: none; }
}

/* ── スマホのお名前の入力画面は、普通のページとして置く(2026-09-26 オーナー指示) ──
   画面に固定した板(position: fixed)だと、iPhone で指を上下に動かしても端で弾む動き
   (少しついてきて戻る)が起きず、止まったままで不自然だった。ページの流れの中に
   画面の高さいっぱいで置き、ページごと弾むようにする。見た目は変えない。
   キーボードが出たときも、ページとしてスクロールして入力欄に届く。740px 未満だけ */
@media (max-width: 739.98px) {
  .visitor-gate {
    position: relative;
    inset: auto;
    min-height: 100vh;
    /* いま見えている高さ(Safari のバーの出入りに合わせて変わる)。100svh(バーが出ているときの
       いちばん狭い高さ)だと、バーが隠れているときに枠が上に寄って見えた(2026-09-26 オーナー指摘) */
    min-height: 100dvh;
    overflow-y: visible;
  }
}

/* ── スマホの長い文章は 13px(2026-09-26 オーナー指示) ──
   口コミ・お知らせ・メッセージの本文など、文章が改行されて続く部分が少し大きく感じるとのことで、
   約14px から 1px 下げる(12px は日付・札・注記の大きさで、本文と見分けが付かなくなるので使わない)。
   トップの表紙の文は縦書きにしたので(2026-09-28)、ここでは変えない(2段落とも同じ大きさ。下の「一律 1px」の塊で 14px)。
   結末の手紙(.final__sheet)は「デザインを変えない」決まりなので対象外。740px 未満だけ */
@media (max-width: 739.98px) {
  .card__desc,
  .shop-list__desc,
  .notice--linked p,
  .review p,
  .message__text,
  .intro-page .notice p,
  body[data-page="news"] .notice:not(.notice--linked) > p,
  body[data-page="news"] .notice blockquote p { font-size: 0.875rem; }
}

/* ── ご予約状況の表の横スクロールを堅実にする(2026-09-26 オーナー指示) ──
   端まで来てもさらに引っ張れて(ゴムのように伸びて)挙動があいまいだったので、
   端で止まるようにし(overscroll-behavior-x: none)、縦には動かさない(overflow-y: hidden)。
   表の外(ページ)へスクロールが引き継がれることもなくなる。740px 未満だけ */
@media (max-width: 739.98px) {
  .availability-scroll {
    overflow-y: hidden;
    overscroll-behavior-x: none;
  }
}

/* ── スマホとパソコンの間の幅(2026-09-26 オーナー指示) ──
   スマホ(〜480px)とパソコン(1024px〜)の間は、どちらかの作りが引き伸ばされたり押し込まれたりして
   ずれて見えていた。スマホ縦向き(〜440px)とパソコンには一切かからないよう、幅で区切って直す。 */

/* ① 481〜739px(スマホ横向き)
   スマホの作りのまま、文字の列を最大 560px(1行 約30字)にして画面の中央に置く。
   左右の余白(--gutter)を「画面幅から 560px を引いた半分(最低 24px)」にするだけで、
   端まで広げている白い板や写真の帯は端まで、文字は列の中、という今の作りがそのまま保たれる。
   ページごとの --gutter(12px など)より後ろ・同じ強さで書いて上書きする */
@media (min-width: 481px) and (max-width: 739.98px) {
  body,
  body[data-page],
  body.intro-page { --gutter: max(24px, calc((100vw - 560px) / 2)); }

  /* ヘッダーとフッターの左右も、本文の列にそろえる */
  .site-header__inner,
  .site-footer__inner {
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  /* 店舗ページの口コミの節は、スマホでは節ごと 12px の位置へずらしている。この幅ではずらさない */
  body[data-page="restaurant"] #reviews {
    margin-left: 0;
    margin-right: 0;
  }
  /* 受信箱の行の頭は、左の矢印の分だけ字下げしている。字下げの起点を列の左端にする
     (本文は字下げせず、列の左端から。2026-10-07 オーナー指示) */
  body[data-page="messages"] .message__summary { padding-left: calc(var(--gutter) + 20px); }
}

/* ② 740〜1023px(PC の狭い幅。iPad 縦向き・狭めたパソコンの窓)
   ヘッダーが1行に収まらず、店名だけが左上に残って、ナビと検索窓が下の段の中途半端な位置に
   回っていた。ヘッダーの左右を本文と同じ余白(48px)にそろえ、2段の並びとして組み直す。
   1段目: 店名(左)と「ようこそ」(右)。2段目: ナビ(店名と同じ左端)と検索窓(右端) */
@media (min-width: 740px) and (max-width: 1023.98px) {
  .site-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "brand account"
      "utility utility";
    align-items: center;
    gap: 14px 24px;
    /* 左右ははじめ本文と同じ余白(48px)にそろえていたが、2026-10-05 オーナー指示で 40 → 32 → 24px と詰めた */
    padding-left: 24px;
    padding-right: 24px;
  }
  /* 2段にすると店名がヘッダーの上の端に寄りすぎる(文字の上が 9px)ので、上の余白を 12 → 22px に広げる(2026-10-05 オーナー指示)。
     ヘッダーの高さは main.js が実測して --header-height に書き戻すので、表紙の高さなどはずれない */
  .site-header { padding-top: 22px; }
  .site-header__row { grid-area: brand; }
  .site-header__side { display: contents; }
  .site-header__account { grid-area: account; }
  .site-header__utility {
    grid-area: utility;
    justify-content: space-between;
  }
  /* ナビの文字は途中で折らない(2026-10-05。境を 740px に下げたら、740〜757px(Windows のスクロールバーがあるとき)で
     「トッ/プ」「掲載店/舗」のようにナビが折れていた) */
  .site-nav { flex-shrink: 0; }
  .site-nav a { white-space: nowrap; }
  /* 検索窓の案内「島の飲食店やキーワードを検索」が欠けないよう、検索窓に約 310px(文 約212px・入力欄の左右 28px・ボタン 67px)を取る
     (2026-10-05 オーナー指示。300px だと「…を検」で切れていた)。場所があれば 340px まで広げ、いちばん狭い 740px
     (スクロールバーあり)でも収まるよう、ナビの間 26→20px・ナビと検索窓の間 28→20px・ボタンの左右 20→16px に詰める。
     案内の文や文字の大きさを変えたら測り直す */
  .site-nav ul { gap: 20px; }
  .site-header__utility { gap: 20px; }
  .search-box { flex: 0 1 340px; width: auto; min-width: 0; }
  .search-box button { padding: 0 16px; }
}

/* ── 店舗ページのメニューは文字の多い部分として左右の余白を削る(2026-09-26 オーナー指示) ──
   口コミの節と同じく、節ごと画面の端から 12px の位置へずらし(見出しと品名の左端をそろえる)、
   白い板は画面の端まで広げて、板の内側の左右を 12px にする。481〜739px では文字の列(--gutter)にそろえる */
@media (max-width: 739.98px) {
  body[data-page="restaurant"] #menu {
    margin-left: calc(12px - var(--gutter));
    margin-right: calc(12px - var(--gutter));
  }
  body[data-page="restaurant"] .menu-list {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (min-width: 481px) and (max-width: 739.98px) {
  body[data-page="restaurant"] #menu {
    margin-left: 0;
    margin-right: 0;
  }
  body[data-page="restaurant"] .menu-list {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* ── トップのお知らせ欄の空白は、お知らせ一覧と同じにする(2026-09-26 オーナー指示) ──
   1件の上下 28/30px、日付と題名の間 10px、題名と抜粋の間 12px、抜粋の行間 1.95(一覧の「行間でゆとり」と同じ値)。740px 未満だけ */
@media (max-width: 739.98px) {
  body[data-page="index"] .notice--linked {
    padding-top: 28px;
    padding-bottom: 30px;
  }
  body[data-page="index"] .notice--linked h3 {
    margin-top: 10px;
    line-height: 1.7;
  }
  body[data-page="index"] .notice--linked p {
    margin-top: 12px;
    line-height: 1.95;
  }
  /* 最後の1件だけは下の罫を付けない(ほかの欄と同じく、最後の項目の下に罫を引かない)。
     抜粋から白い地の終わりまでは、ほかの1件の「抜粋から罫まで」と同じ 30px にしたいので、
     1件の下の空き(30px)を残し、欄の下の余白(48px)を 0 にする(2026-10-01 オーナー指示) */
  body[data-page="index"] .notice--linked:last-of-type { border-bottom: none; }
  body[data-page="index"] .section--white { padding-bottom: 0; }
}

/* ── 店舗ページの口コミとご予約状況の表も、白い板を画面の端まで広げる(2026-09-26 オーナー指示) ──
   メニューと同じ形。口コミは要約の板と、口コミ一覧(1件ずつの .review を白くして続けて並べる)を端まで広げ、
   文字は今と同じ画面の端から 12px。予約の表は板を端まで広げ、板の内側の左は 0 にして「時間」の列を板の左端に貼り付ける
   (日付の列だけが横に流れる、ふつうの表の形。2026-09-26 オーナー指示)。「時間」の文字は列の内側の余白で
   見出しの左端(--gutter)にそろえる。481〜739px では文字を中央の列(--gutter)にそろえる */
@media (max-width: 739.98px) {
  body[data-page="restaurant"] .review-summary,
  body[data-page="restaurant"] .review {
    margin-left: -12px;
    margin-right: -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  /* 板の内側の左は 0 のままにする。余白を戻すと、左に貼り付いた「時間」の列のさらに左から、
     横に送った日付の列が覗いて見える。「時間」の文字は列の中の左の余白で見出しにそろえる */
  body[data-page="restaurant"] .availability-scroll {
    max-width: none;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: 0;
    padding-right: calc(var(--gutter) - 10px);
  }
  body[data-page="restaurant"] .availability-table thead th:first-child,
  body[data-page="restaurant"] .availability-table tbody th { padding-left: var(--gutter); }
}
@media (min-width: 481px) and (max-width: 739.98px) {
  body[data-page="restaurant"] .review-summary,
  body[data-page="restaurant"] .review {
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
}

/* ── パソコンのご予約状況の表の「時間」の列は、中身の幅に詰める(2026-09-26 オーナー指示) ──
   「時間」「18:00」は行の見出しにあたるので、82px をやめて「18:00」がちょうど収まる幅にする(文字の幅 2.5em ＋ セルの左右 10px ずつ。幅は余白込みで数える)。
   時刻を選ぶ前(ハイフン)と後で列の幅が変わって表が動かないよう、中身任せにせず幅を決めている。
   日付の列とスマホの表は変えない。
   書体を Noto Sans JP にしてからは時刻がどれもちょうど 2.5em になり、ゆとりがなくなったので、2026-10-10 オーナー指示で
   2.5em → 2.55em にした(少し広がっても押した後に列が動かないよう、約 0.05em のゆとりを持たせる。スマホと同じ) */
@media (min-width: 740px) {
  .availability-table tbody th { width: calc(2.55em + 12px); }
  /* 列の中の左右の余白も 10 → 6px に詰めて、さらに少し狭くする(約53 → 約45px。同日オーナー指示) */
  .availability-table thead th:first-child,
  .availability-table tbody th { padding-left: 6px; padding-right: 6px; }
}

/* ── 初回のお知らせ画面(intro.html)を、スマホらしく上下にゆったり取る(2026-09-26 オーナー指示) ──
   文字の大きさと左右の余白は変えず、上下の空きと行間だけを広げる。本文の行間はお知らせの記事ページと同じ 2.0。740px 未満だけ */
@media (max-width: 739.98px) {
  .intro-page main { padding-top: 56px; padding-bottom: 72px; }
  .intro-page .intro-label { margin-bottom: 28px; }
  .intro-page .notice { padding-top: 44px; padding-bottom: 48px; }
  .intro-page .notice h3 { margin-top: 12px; line-height: 1.7; padding-bottom: 28px; }
  .intro-page .notice h3 + p { margin-top: 36px; }  /* 題名の下の線から本文まで。お知らせの記事と同じ(2026-10-10 オーナー指示。前は 32px) */
  .intro-page .notice p + p { margin-top: 33px; }  /* お知らせの記事の段落の間と同じ(2026-10-10 オーナー指示。前は 36px) */
  .intro-page .notice > p.notice-sign { margin-top: 50px; }  /* 署名の上は段落の間の1.5倍(記事と同じ。2026-10-10 オーナー指示) */
  .intro-page .notice p { line-height: 2; }
  .intro-page .intro-actions { margin-top: 48px; }
}

/* ── スマホの本文の文字を一律 1px 小さくする(2026-09-26 オーナー指示。2026-09-27 確定) ──
   全ページの本文(ヘッダー・フッター・メニュー・結末の手紙とその受信箱の行・入力欄を除く)。
   390px と 600px で各要素の大きさを測り、「いまより 1px 小さい値」を要素ごとに書いたもの。スクリプトで作った。
   先頭の html:not(.is-final):not(#_) は、結末の手紙の画面を外すことと、既存の指定に必ず勝つための重み。
   要素ごとに値を書いているので、本文に新しい文字(要素)を足したときは、ここにも 1px 小さい値を足すこと。
   検索結果は、測ったときに結果が 0 件で出ていなかったので、あとから手で足した。店は掲載店舗一覧、お知らせはお知らせ一覧と同じ値。
   2026-10-06 オーナー指示で、小さすぎた 10px 台の文字(札・項目名・地図の札と番号・徒歩・予約の表の日付・口コミの日付と件数・棒グラフの★と数)を 1px 大きくし、
   トップの店の並びの店名は 14px → 15.875px(掲載店舗一覧の店名と同じ)、札は 9px → 11.25px(ほかの札と同じ)にした。フッターは別に決めた大きさのまま。
   2026-10-10 オーナー指示で、お知らせの記事の本文(段落・署名・受賞者の行・引用の中)、最初のお知らせの画面の本文、口コミの本文は、
   1px 下げずにもとの 13.125px に戻した(行の後ろに「1px 戻した」と書いた所)。お知らせ一覧・トップ・検索結果の抜粋は 12.125px のまま */
@media (max-width: 739.98px) {
  html:not(.is-final):not(#_) body[data-page="search"] h3.shop-list__name > a { font-size: 16.875px; }  /* 2026-10-07 オーナー指示で 15.875px(1px 小さくした値)から、もとの大きさに戻した */
  html:not(.is-final):not(#_) body[data-page="search"] p.shop-list__hours { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="search"] p.shop-list__desc { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="search"] dl.shop-list__facts dt { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="search"] dl.shop-list__facts dd { font-size: 12.125px; }  /* 2026-10-21 オーナー指示で 13.0625px から小さく(一覧と同じ) */
  html:not(.is-final):not(#_) body[data-page="search"] span.shop-list__score { font-size: 12.125px; }  /* 2026-10-21 オーナー指示で 15.875px から小さく、予算と同じ大きさに(一覧と同じ) */
  html:not(.is-final):not(#_) body[data-page="search"] span.shop-list__count { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="search"] p.shop-list__soldout { font-size: 25px; }  /* 売り切れの帯の字(2026-10-14。PC は 34px) */
  html:not(.is-final):not(#_) body[data-page="search"] span.tag { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="search"] article.notice.notice--linked > h3 > a { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="search"] article.notice.notice--linked > p { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="search"] article.notice.notice--linked > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body.intro-page article.notice.notice-caution > h3 { font-size: 15.875px; }
  html:not(.is-final):not(#_) body.intro-page article.notice.notice-caution > p { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body.intro-page article.notice.notice-caution > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body.intro-page button.btn-primary { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body.intro-page p.intro-label { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="index"] a.more-link { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="index"] article.notice.notice--linked > h3 > a { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="index"] article.notice.notice--linked > p { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="index"] article.notice.notice--linked > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="index"] article.notice.notice--linked.notice-caution > h3 > a { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="index"] article.notice.notice--linked.notice-caution > p { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="index"] article.notice.notice--linked.notice-caution > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body button.visitor-gate__guest { font-size: 13.25px; }
  html:not(.is-final):not(#_) body button.visitor-gate__submit { font-size: 13.25px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.access > h2 { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.access > p { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.card__title-row > h3 > a { font-size: 15.875px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.hero__scroll-cue > span { font-size: 9.3125px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.hero__story > p:nth-child(1) { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.hero__story > p:nth-child(2) { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="index"] div.section-heading > h2 { font-size: 18.6875px; }
  html:not(.is-final):not(#_) body div.visitor-gate__or > span { font-size: 10.25px; }
  html:not(.is-final):not(#_) body h2.visitor-gate__title { font-size: 14.3px; }
  html:not(.is-final):not(#_) body label.visitor-gate__label { font-size: 10.7px; }
  html:not(.is-final):not(#_) body[data-page="index"] p.card__desc { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="index"] p.meta { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body p.visitor-gate__brand > span { font-size: 9.8px; }
  html:not(.is-final):not(#_) body p.visitor-gate__lead { font-size: 11.3px; }
  html:not(.is-final):not(#_) body p.visitor-gate__note { font-size: 9.5px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.map-frame__marker { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.map-shops__num { font-size: 10.3125px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.tag { font-size: 11.25px; }
  /* メッセージの本文(予約確定のお知らせ・結末のあとのごあいさつ)は、小さすぎたので 1px 大きくした(2026-10-07 オーナー指示。はじめは 12.125px) */
  html:not(.is-final):not(#_) body[data-page="messages"] div.message__text > p { font-size: 13.125px; }
  html:not(.is-final):not(#_) body[data-page="messages"] div.page-header > h1 { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="messages"] dl.message__booking > dd { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="messages"] dl.message__booking > dt { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="messages"] p.message__to { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="messages"] p.message-notice__text { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="messages"] p.message-notice__title { font-size: 18.6875px; }
  html:not(.is-final):not(#_) body[data-page="messages"] p.message-owner { font-size: 11.1875px; }
  /* 結末の手紙の行は summary でなく button なので、そちらも同じ大きさにする(2026-10-05 オーナー指示で行の見せ方をそろえた) */
  html:not(.is-final):not(#_) body[data-page="messages"] summary.message__summary > span.message__from,
  html:not(.is-final):not(#_) body[data-page="messages"] button.message__summary > span.message__from { font-size: 15.875px; }
  html:not(.is-final):not(#_) body[data-page="messages"] summary.message__summary > span.message__subject,
  html:not(.is-final):not(#_) body[data-page="messages"] button.message__summary > span.message__subject { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice > blockquote > p { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="news"] article.notice > dl > dd { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice > dl > dt { font-size: 13.0625px; }  /* 値(dd)と同じ大きさ */
  html:not(.is-final):not(#_) body[data-page="news"] article.notice > p { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="news"] article.notice > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--linked > h3 > a { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--linked > p { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--linked > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--linked.notice-caution > h3 > a { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--linked.notice-caution > p { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--linked.notice-caution > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--roomy > p { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--roomy > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice-caution > p { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice-caution > time { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] div.page-header:nth-child(1) > h1:nth-child(1) { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="news"] article.notice.notice--article > h1 { font-size: 18.6875px; }
  html:not(.is-final):not(#_) body[data-page="news"] figure.notice-figure.notice-figure--wide > figcaption { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] nav.breadcrumb > a { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] p.back-link > a { font-size: 12.125px; }  /* 2026-10-10 オーナー指示で 13.0625px から小さくした(お知らせ一覧の抜粋と同じ大きさ) */
  html:not(.is-final):not(#_) body[data-page="news"] p.lead { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="news"] p.notice-sign { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="news"] p.notice-winner { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="news"] span.breadcrumb__current { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="news"] span.breadcrumb__sep { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] button.btn-primary { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] button.btn-secondary { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.info-table__row > span:nth-child(2) { font-size: 12.125px; }  /* 店名の下の並び・地図の横・メニューの値と同じ大きさ(2026-10-24 オーナー指示で 13.0625px から) */
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.menu-list > h4 { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.reservation-modal__body > p { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.reservation-modal__body > p > strong { font-size: 15.875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.review > p { font-size: 13.125px; }  /* 1px 戻した(2026-10-10) */
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.review__header > span.stars { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.review__header > time { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.review-summary__average { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.review-summary__count { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.review-summary__stars { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.shop-facts__label { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.shop-facts__value { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.shop-header__title > h1 { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.shop-map__label { font-size: 12.125px; }  /* 値(dd)と同じ大きさ(2026-10-24 オーナー指示で 11.1875px から) */
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.shop-map__value { font-size: 12.125px; }  /* 地図の下の札の住所など(2026-10-06 オーナー指示で 13.0625px から小さく) */
  html:not(.is-final):not(#_) body[data-page="restaurant"] div.shop-rating > span.stars { font-size: 15.875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] h4.menu-course-head { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] li.menu-course--last > span { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] li.menu-course--normal > span { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] nav.breadcrumb > a { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] p.availability-note { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] p.availability-result.is-available { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] p.availability-result.is-error { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] section.section > h2 { font-size: 18.6875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.availability-search__label { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.breadcrumb__current { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.breadcrumb__sep { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.info-table__label { font-size: 12.125px; }  /* 値と同じ大きさ */
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.price { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__author { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__avatar.review__avatar--1 { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__avatar.review__avatar--2 { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__avatar.review__avatar--3 { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__avatar.review__avatar--4 { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__avatar.review__avatar--5 { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review__avatar.review__avatar--6 { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review-bar__count { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.review-bar__label { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.shop-map__pin:not(.shop-map__pin--long) { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.shop-map__pin.shop-map__pin--long { font-size: 10.0005px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.shop-rating__count { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.shop-rating__score { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.tag { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] span.tag.tag-closed { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] table.availability-table > tbody > tr > th { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] table.availability-table > thead > tr > th { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] td.is-blank { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurant"] ul.menu-group > li > span { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] div.page-header > h1 { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] p.lead { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] h3.shop-list__name > a { font-size: 16.875px; }  /* 2026-10-07 オーナー指示で 15.875px(1px 小さくした値)から、もとの大きさに戻した */
  html:not(.is-final):not(#_) body[data-page="restaurants"] p.shop-list__hours { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] p.shop-list__desc { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] dl.shop-list__facts dt { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] dl.shop-list__facts dd { font-size: 12.125px; }  /* 2026-10-21 オーナー指示で 13.0625px から小さく(紹介文と同じ) */
  html:not(.is-final):not(#_) body[data-page="restaurants"] span.shop-list__score { font-size: 12.125px; }  /* 2026-10-21 オーナー指示で 15.875px から小さく、予算と同じ大きさに(PC と同じく評点と予算をそろえる) */
  html:not(.is-final):not(#_) body[data-page="restaurants"] span.shop-list__count { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="restaurants"] span.tag { font-size: 11.25px; }
  html:not(.is-final):not(#_) body[data-page="search"] div.no-results > p { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="search"] div.page-header > h1 { font-size: 22.4375px; }
  html:not(.is-final):not(#_) body[data-page="search"] p.search-summary { font-size: 13.0625px; }
  html:not(.is-final):not(#_) body[data-page="search"] p.search-summary > strong { font-size: 13.0625px; }
  /* トップの観光協会の告知(2026-10-19 に足した)。出し手は日付と同じ大きさ。
     2026-10-21 オーナー指示で小さくした(もとは 15・47・13.0625・17・13px。1 割ほど下げた後、尼牛をさらに下げ、ほかもわずかに下げた)。
     案内はトップの抜粋と同じ大きさ、検索は札と同じ大きさで、どちらもスマホでこれより下げない */
  html:not(.is-final):not(#_) body[data-page="index"] p.promo-band__lead { font-size: 13px; }
  html:not(.is-final):not(#_) body[data-page="index"] p.promo-band__name { font-size: 36px; }
  html:not(.is-final):not(#_) body[data-page="index"] p.promo-band__how { font-size: 12.125px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.promo-band__field { font-size: 14px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.promo-band__button { font-size: 11.1875px; }
  html:not(.is-final):not(#_) body[data-page="index"] p.promo-band__from { font-size: 11.1875px; }
}
@media (max-width: 480.98px) {
  html:not(.is-final):not(#_) body p.visitor-gate__brand { font-size: 18.5px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.map-shops__name { font-size: 13.0625px; }
}
@media (min-width: 481px) and (max-width: 739.98px) {
  html:not(.is-final):not(#_) body p.visitor-gate__brand { font-size: 21.5px; }
  html:not(.is-final):not(#_) body[data-page="index"] span.map-shops__name { font-size: 14px; }
}

/* =========================================================
   暫定解20261004(PC)
   Artifact「【トップ】あたみニュース参考案_20261004」の「暫定解20261004」の段を当てる(2026-10-04 オーナー指示)。
   HTML は変えず、今の部品に CSS だけで同じ見た目を当てる。どの指定も PC(740px 以上)に効き、スマホは今のまま。
   はじめは 1024px 以上だけだったが、2026-10-04 オーナー指示で 740〜1023px にも同じ見た目を当てた
   (カーソルを当てたときの指定だけは 1024px 以上のまま)。768px 前後で窮屈な所は、ファイルの終わりの「PC の狭い幅」で詰める。縞と罫の色は :root の --color-stripe-* / --color-rule-soft / --color-ink-label
   ========================================================= */

/* ── トップ ──
   表紙の写真の下の端は波、掲載店舗は縞の帯に乗る丸い写真、お知らせは右端に「＞」の行、島の地図は右下にずらした縞。
   見出しは節ごとに中央・右・左へ振り、下の線を画面の端まで伸ばす。
   「掲載店舗一覧へ」「お知らせ一覧へ」は、見出しの横のリンクをそのまま節の下の縞の帯の上へ移して見せる(リンクは1つのまま)。
   帯の下の端の波は、地の色の波を重ねず、帯そのものを波の形に切り抜く(重ねると縮めて見たとき端が線になって残る) */
@media (min-width: 740px) {
  body[data-page="index"] {
    /* 波の形。不透明な所が残る。表紙は 1440×44、帯は 1440×28 の枠で描いて、横幅いっぱいに伸ばす */
    --top-wave-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V12C1290 12 1100 36 920 36C740 36 560 8 380 8C250 8 150 12 0 22Z'/%3E%3C/svg%3E");
    --top-wave-shops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V10C1200 26 960 24 720 12C480 0 240 0 0 14Z'/%3E%3C/svg%3E");
    --top-wave-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V16C1200 0 960 2 720 14C480 26 240 26 0 10Z'/%3E%3C/svg%3E");
    --top-wave-depth: 44px;   /* 表紙の下の端の波の深さ(2026-10-04 に一度 66px にしたが、オーナー指示で表紙だけ戻した) */
    --top-more-h: 192px;      /* 「一覧へ」の帯の高さ(上 56 + 押し場所 56 + 下 80) */
    --top-more-gap: 88px;     /* 節の中身から帯まで */
  }
  /* 帯や線を画面の端まで伸ばすので、はみ出した分は main で切る(横にスクロールさせない) */
  body[data-page="index"] main { overflow-x: clip; }

  /* 表紙: 写真そのものの下の端を波の形に切り抜く。上の塗りつぶしと波の絵を 4px 重ねて継ぎ目を出さない。
     開いたときの画面には波を見せず、下へスクロールすると現れるよう、表紙を画面いっぱいより波の深さだけ長くする
     (2026-10-04 オーナー指示。8px は --header-height に足してある着地の余白を戻す分。上の .hero と同じ)。
     下の余白も同じだけ足して、縦書きの文は見えている画面の中で上下の真ん中に置く。
     そこから 24px 下げる(上の余白 48 → 72px、下の余白 48 → 24px。2026-10-05 オーナー指示。スマホも同じだけ下げた)。
     上下の余白の合計 96px は、上の .hero の --hero-fs の式(画面の高さ − ヘッダー − 96px)と同じなので、変えるときは合計を保つ。
     文字の上の端は窓の高さだけで決め、幅では動かさない(2026-10-05 オーナー指示。はじめは文字の塊を上下の真ん中に置いていたので、
     幅を狭めて文字が小さくなると、上の端が下がっていた)。--hero-fs-h は、--hero-fs から幅で抑える分を除いた、窓の高さだけで決まる大きさ
     (式は --hero-fs の高さの側と同じにしておく)。その大きさの文字を上下の真ん中に置いたときの上の端に、文字を上から並べる。
     幅で文字が小さくなると、下の端だけが上がる。88px は上下の余白 96px から、--header-height に足してある着地の余白 8px を除いたもの。
     幅 760〜1000px・高さ 800px 以下の窓では、前書きのいちばん長い列の終わり(「…仕立てる。」)が下の真ん中の SCROLL の印にかかる
     (高さ 750px 以下では下げる前からかかっていた。窓を細くしたときだけなので、同日オーナー判断でそのままにした)。下げる量を増やすとこの範囲が広がる
     (上の端を固定する前は、高さ 850px までの窓でもかかっていた) */
  body[data-page="index"] .hero {
    --hero-fs-h: clamp(10.5px, calc((100svh - var(--header-height) - 96px) / 38), 1.2rem);
    min-height: calc(100svh - var(--header-height) + 8px + var(--top-wave-depth));
    align-items: flex-start;
    padding-top: calc(72px + max(0px, (100svh - var(--header-height) - 88px - 38 * var(--hero-fs-h)) / 2));
    padding-bottom: calc(24px + var(--top-wave-depth));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--top-wave-depth) + 4px) no-repeat, var(--top-wave-hero) bottom / 100% var(--top-wave-depth) no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--top-wave-depth) + 4px) no-repeat, var(--top-wave-hero) bottom / 100% var(--top-wave-depth) no-repeat;
  }
  /* SCROLL の縦線の下の端を、開いたときの画面のいちばん下にそろえる(波の深さの分だけ上げる) */
  body[data-page="index"] .hero__scroll-cue { bottom: var(--top-wave-depth); }

  /* 3つの節は板に載せず、生成りの地にそのまま置く */
  body[data-page="index"] main > .section--band {
    position: relative;
    margin: 0;
    background: none;
    border-radius: 0;
  }
  body[data-page="index"] main > .section:has(.card-grid) { padding: 112px 0 calc(var(--top-more-gap) + var(--top-more-h)); }
  body[data-page="index"] main > .section:has(.notice--linked) { padding: 120px 0 calc(var(--top-more-gap) + var(--top-more-h)); }
  body[data-page="index"] main > .section:has(.map-access) { padding: 120px 0 140px; }

  /* 見出し: 左に寄せ、下に画面の左の端から見出しの少し先までの線を引く。
     はじめは節ごとに中央(掲載店舗)・右(お知らせ)・左(島の地図)へ振り、字間も字の 0.3 倍だったが、
     2026-10-04 オーナー指示で3つとも島の地図と同じ左寄せ・同じ線にした。字間は一度、一覧ページのタイトルと同じ 0.04 倍に
     狭め、0.3 倍に戻したあと、同日オーナー指示でその中間の 0.16 倍にした(「デザイン現状_20261003」のトップの見出しと同じ値)。
     線は並びの左端から 360px までだったが、見出しの右に出る分が長いと言われ(同日)、240px までにした */
  body[data-page="index"] .section-heading {
    display: block;
    margin-bottom: 64px;
  }
  body[data-page="index"] .section-heading h2 { letter-spacing: 0.16em; }
  body[data-page="index"] .section-heading::after {
    content: "";
    display: block;
    width: calc(240px + min(50vw, var(--bleed-max) / 2) - 50%);  /* 1600px より広い画面では、線の左の端も 1600px の幅で切る(--bleed-max) */
    height: 2px;
    margin-top: 20px;
    margin-left: calc(50% - min(50vw, var(--bleed-max) / 2));
    background: var(--color-dot);
  }

  /* 「一覧へ」: 節の下の端から端までの縞の帯(掲載店舗は砂、お知らせは海の色)と、その上の白い押し場所。
     下の端の波は高さ 42px(はじめは 28px。2026-10-04 オーナー指示で 1.5 倍に) */
  body[data-page="index"] .section:has(.card-grid)::after,
  body[data-page="index"] .section:has(.notice--linked)::after {
    content: "";
    position: absolute;
    left: 0;  /* 下が波の帯なので、広い画面でも端まで(--bleed-max では切らない。2026-10-05 オーナー指示) */
    right: 0;
    bottom: 0;
    height: var(--top-more-h);
    background: repeating-linear-gradient(135deg, var(--color-stripe-sand) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));  /* 掲載店舗は砂の色(2026-10-04 に一度、掲載店舗は青・お知らせは黄にそろえたが、同日オーナー指示でこの2本だけ入れ替えた) */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, var(--top-wave-shops) bottom / 100% 42px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, var(--top-wave-shops) bottom / 100% 42px no-repeat;
    pointer-events: none;
  }
  body[data-page="index"] .section:has(.notice--linked)::after {
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));  /* お知らせは海の色 */
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, var(--top-wave-news) bottom / 100% 42px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, var(--top-wave-news) bottom / 100% 42px no-repeat;
  }
  /* 押し場所は2つとも「道しるべ」(.signpost。2026-10-10 オーナー採用)。それまでは白い箱 + 右の藍緑の四角の矢印(48px)。
     帯の上下の真ん中に置く: 押し場所の真ん中を帯の下から 104px にする(前の 48px・下から 80px と同じ高さ)。
     押し場所の高さを変えたら bottom も直す(bottom = 104 − 高さ ÷ 2。道しるべは 50px なので 79px) */
  body[data-page="index"] .section .more-link {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 79px;
    transform: translateX(-50%);
    justify-content: center;
    font-size: var(--fs-2);
    letter-spacing: 0.1em;
  }

  /* 掲載店舗: 縞の帯に乗る丸い写真。どの幅でも AMA・汐風・ビストロ・マレの3店で、トラットリア・ヴォンゴラは隠す
     (5・6店めはこれまでどおり PC では出さない)。2026-10-12 オーナー指示でスマホと合わせて3店にそろえた。
     それまでは 1400px 以上だけ4店(ヴォンゴラを最後に足す)で、1400px の区切りはそのためだけにあった。
     ヴォンゴラは店舗ページへのリンクで指す */
  body[data-page="index"] .card-grid {
    --card-cols: 3;
    --card-gap: 48px;
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(var(--card-cols), minmax(0, 1fr));
    gap: var(--card-gap);
    container-type: inline-size;  /* 帯の位置を写真の直径から出すため(下の cqw) */
    /* キーボードの Tab で選ぶ順(と読み上げの順)も、order で並べ替えた見た目の順にする(2026-10-06 オーナー指摘。
       HTML の順のままだと、4店のときマレとヴォンゴラが逆に選ばれていた)。対応していないブラウザでは HTML の順のまま */
    reading-flow: grid-order;
  }
  body[data-page="index"] .card-grid > .card:has(a[href$="restaurant-vongola.html"]) { display: none; }
  /* 帯は画面の端から端まで。写真の中ほど(直径の 0.39)から下の端の少し手前(0.39 + 0.495)までにかかる。
     割合は 1440px の4店のとき(直径 266px で上 104px・高さ 132px)に合わせたもの。写真が小さくなっても店名に被らない
     (はじめは 104px・132px の固定で、1024〜1070px では帯が店名に被っていた)。直径 = (並びの幅 − 列の間) ÷ 列の数 */
  body[data-page="index"] .card-grid::before {
    --card-d: calc((100cqw - (var(--card-cols) - 1) * var(--card-gap)) / var(--card-cols));
    content: "";
    position: absolute;
    top: calc(var(--card-d) * 0.39);
    left: calc(50% - min(50vw, var(--bleed-max) / 2));  /* 1600px より広い画面では 1600px で切る */
    right: calc(50% - min(50vw, var(--bleed-max) / 2));
    z-index: -1;
    height: calc(var(--card-d) * 0.495);
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
  }
  body[data-page="index"] .card {
    display: block;
    height: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  /* 上の display で、5・6店めを隠す指定(.card--more)まで上書きしないよう、ここで隠し直す */
  body[data-page="index"] .card--more { display: none; }
  body[data-page="index"] .card__photos {
    width: auto;
    height: auto;
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
  }
  body[data-page="index"] .card__photo { transition: transform 600ms cubic-bezier(0.2, 0.7, 0.2, 1); }
  /* 店名・札と営業時間・紹介文の3段。店名の下に線 */
  body[data-page="index"] .card__body {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "name name" "tag meta" "desc desc";
    align-content: start;
    gap: 0 12px;
    padding: 0;
  }
  body[data-page="index"] .card h3 {
    margin: 28px 0 0;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-rule-soft);
    font-size: var(--fs-4);
    line-height: 1.4;
    letter-spacing: 0.04em;
    text-align: center;  /* 店名だけ写真の下の中央に置く(2026-10-05 オーナー指示)。札・営業時間・紹介文は左寄せのまま */
  }
  body[data-page="index"] .card .tag { margin-top: 16px; }
  body[data-page="index"] .card .meta {
    margin: 16px 0 0;
    line-height: 1.6;
    color: var(--color-ink-label);
    font-variant-numeric: tabular-nums;
  }
  body[data-page="index"] .card__desc {
    margin: 12px 0 0;
    max-width: none;
    line-height: 1.8;
    -webkit-line-clamp: 3;
  }
  /* 写真ごと押せる(店名のリンクの当たり判定が店の欄いっぱい)ので、キーボードで選んだ印も店の欄の外に出す */
  body[data-page="index"] .card:has(h3 a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 8px; }
  body[data-page="index"] .card h3 a:focus-visible { outline: none; }

  /* お知らせ: 白い地をやめ、右端に「＞」の付いた行。日付は題名の上、本文は1行で切る */
  body[data-page="index"] .notice--linked,
  body[data-page="index"] .notice--linked:first-of-type {
    display: block;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 96px 28px 40px;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-rule-soft);
    border-radius: 0;
  }
  body[data-page="index"] .notice--linked::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 40px;
    width: 10px;   /* はじめは 14px。2026-10-04 オーナー指示で小さくした(トップ・お知らせ一覧・検索結果で同じ) */
    height: 10px;
    border-top: 1.5px solid var(--color-ink);
    border-right: 1.5px solid var(--color-ink);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
  }
  body[data-page="index"] .notice--linked time {
    padding-top: 0;
    line-height: 1.6;
    color: var(--color-ink-label);
    font-variant-numeric: tabular-nums;
  }
  body[data-page="index"] .notice--linked h3 { margin: 8px 0 0; }
  body[data-page="index"] .notice--linked p {
    display: block;
    margin: 4px 0 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body[data-page="index"] .notice--linked:has(h3 a:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  body[data-page="index"] .notice--linked h3 a:focus-visible { outline: none; }
}
/* 島の地図は 1024px 以上だけ。740〜1023px はスマホと同じ形(地図を横いっぱいに置き、下に店の一覧と ACCESS。2026-10-05 オーナー指示) */
@media (min-width: 1024px) {
  /* 島の地図: 右下にずらした縞を敷いた地図と、店の一覧。
     一覧の列は 344px より細くしない(ACCESS の「島内の店舗は、いずれも平日限定の営業となります。」が 338px あり、
     1024〜1031px で3行に折れて節の高さが跳ねていた。2026-10-05 オーナー指摘) */
  body[data-page="index"] .map-access {
    grid-template-columns: minmax(0, 3fr) minmax(344px, 2fr);
    align-items: center;
    gap: 88px;
  }
  body[data-page="index"] .map-frame {
    z-index: 0;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }
  body[data-page="index"] .map-frame::before {
    content: "";
    position: absolute;
    inset: 24px -24px -24px 24px;
    z-index: -1;
    background: var(--color-stripe-sand);  /* はじめは縞。2026-10-04 オーナー指示で同じ色の塗りつぶしに */
  }
  body[data-page="index"] .map-frame__marker { border-color: var(--color-surface); color: var(--color-surface); }
  /* 店の一覧の上の太い線は、2026-10-04 オーナー指示でやめた */
  body[data-page="index"] .map-shops li { border-bottom: none; }
  body[data-page="index"] .map-shops a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    min-height: 0;
    margin: 0;
    padding: 14px 8px;
    border-bottom: 1px solid var(--color-rule-soft);
  }
  body[data-page="index"] .map-shops__num {
    width: 26px;
    height: 26px;
    color: var(--color-surface);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
  }
  body[data-page="index"] .map-shops__name {
    overflow: hidden;
    font-size: var(--fs-2);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  body[data-page="index"] .access { margin-top: 40px; }
  body[data-page="index"] .access h2 {
    margin: 0 0 8px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--color-ink-label);
  }
  body[data-page="index"] .access p {
    margin: 0;
    font-family: var(--font-serif);
    font-size: var(--fs-2);
    line-height: 1.85;
    color: var(--color-ink);
  }
}
/* カーソルを当てたとき: 店は写真が少し寄る(地の色は変えない)、「一覧へ」は道しるべの決まりのまま(.signpost)、地図の店名は色を変えない。
   お知らせの行は一段沈めた生成り(今までと同じ)。上で最初の行(:first-of-type)の地を消しているので、ここで付け直さないと
   いちばん上の行だけ色が変わらない(2026-10-04 オーナー指摘で直した) */
@media (min-width: 1024px) and (hover: hover) {
  body[data-page="index"] .card:hover { background: none; }
  body[data-page="index"] .notice--linked:hover { background: var(--color-bg-deep); }
  body[data-page="index"] .card:hover .card__photo { transform: scale(1.05); }
  body[data-page="index"] .map-shops a:hover { color: var(--color-ink); }
}
@media (min-width: 740px) and (prefers-reduced-motion: reduce) {
  body[data-page="index"] .card__photo { transition: none; }
  body[data-page="index"] .card:hover .card__photo { transform: none; }
}

/* ── トップの観光協会の告知(「尼牛」で検索。2026-10-19 オーナー指示) ──
   「お知らせ」と「島の地図」の間に置く、画面の幅いっぱいの墨の帯。序盤に一度、自分でヘッダーの検索窓に言葉を打たせるためのもの。
   右の検索窓は絵で、押しても何も起きない(検索でしか開けない記事に当たるので、リンクにしない)。
   本物の入力欄に見えないよう、入力欄の所は塗らずに線だけで描く。読み上げには絵を読ませず、同じ意味の文(.promo-band__sr)を読ませる。
   上の縞の帯(「お知らせ一覧へ」)との間は、下の「島の地図」の節の上の空き(PC 120px・スマホ 56px)と同じにして、帯の上下をそろえる。
   節の上の空きを変えたら、ここも合わせる。薄い字は色を足さずに opacity で薄める。
   スマホの字の大きさは、前の「一律 1px 小さくする」塊でさらに 1px 下がる(そちらにも書いてある) */
body[data-page="index"] .promo-band {
  margin-top: 120px;
  background: var(--color-ink);
  color: var(--color-surface);
}
body[data-page="index"] .promo-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 左の「尼牛」と右の検索窓の間は、画面の幅で変えない(1280px で見せた間。両端に寄せると 1000px あたりで開いていく。2026-10-19 オーナー指示)。
     中身の幅に縮めて中央に置くので、出し手(.promo-band__from)の右の端が、絵の検索窓の右の端にそろう(スマホも同じ) */
  gap: 192px;
  width: fit-content;
  max-width: 100%;
  padding-top: 44px;
  padding-bottom: 52px;
}
body[data-page="index"] .promo-band__lead {
  margin: 0 0 6px;
  font-family: var(--font-serif);
  font-size: 16px;
  letter-spacing: 0.16em;
  opacity: 0.78;
}
body[data-page="index"] .promo-band__name {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 64px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: 0.12em;
}
body[data-page="index"] .promo-band__how {
  margin: 0 0 10px;
  font-family: var(--font-sans);
  font-size: 13px;
  letter-spacing: 0.08em;
  opacity: 0.78;
}
body[data-page="index"] .promo-band__pill {
  display: inline-flex;
  align-items: stretch;
  height: 46px;
  border: 1.5px solid var(--color-surface);
  cursor: default;
  user-select: none;
}
body[data-page="index"] .promo-band__field {
  display: flex;
  align-items: center;
  min-width: 9.5em;
  padding: 0 16px;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.08em;
}
body[data-page="index"] .promo-band__button {  /* ヘッダーの検索ボタンと同じ色 */
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--color-search-button);
  color: var(--color-search-button-ink);
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
}
body[data-page="index"] .promo-band__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
body[data-page="index"] .promo-band__from {
  position: absolute;
  right: var(--gutter);
  bottom: 16px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.12em;
  opacity: 0.6;
}
/* スマホ: 中央にそろえて縦に並べる */
@media (max-width: 739.98px) {
  body[data-page="index"] .promo-band { margin-top: 56px; }
  body[data-page="index"] .promo-band__inner {
    flex-direction: column;
    align-items: center;
    /* 「尼牛」の上下の見た目の空き(字の描かれた所どうし)を 22px ほどにそろえる(2026-10-21 オーナー指示。0.5px のずれは許す)。
       上はリードの margin-bottom、下はこの gap で決まり、いまは上下とも 22.5px。尼牛の字は 1px 刻みでしか動かないので、
       上下の合計が偶数 px だと 0.5px と 1px 差に割れる。字の大きさを変えたら、画面で測り直してそろえる */
    gap: 16px;
    padding-top: 24px;  /* 「島が育てたブランド牛」の上を詰める(2026-10-21 オーナー指示。もとは 36px) */
    padding-bottom: 48px;
    text-align: center;
  }
  body[data-page="index"] .promo-band__lead { margin-bottom: 12px; }
  body[data-page="index"] .promo-band__name { font-size: 48px; }
  /* 絵の検索窓は高さだけ低く(2026-10-21 オーナー指示。もとは 46px)。幅は PC と同じ作りのまま(いまの字で 196px)。
     一度は幅も 169px に縮めたが、オーナー指示で戻した。字の大きさは「一律 1px 小さくする」塊 */
  body[data-page="index"] .promo-band__pill { height: 40px; }
  body[data-page="index"] .promo-band__how { font-size: var(--fs-2); }
  /* 出し手は PC と同じく絵の検索窓の右の端にそろえる(2026-10-19 オーナー指示。中央にしていたが、
     p の行の長さの上限(--measure)で幅が絞られ、481px 以上では左に寄って見えていた) */
  body[data-page="index"] .promo-band__from { font-size: var(--fs-1); }
}

/* ── 中のページの見出しまわり(掲載店舗一覧・お知らせ一覧・検索結果・メッセージ) ──
   ヘッダーのすぐ下に海の色の縞の帯(下の端は波)を置き、ページの見出しは字間を広く。
   見出しははじめ中央に置き、題名と説明の間に短い線を引き、字間を字の 0.3 倍にしていたが、
   2026-10-04 オーナー指示で「デザイン現状_20261003」と同じく左(並びの左端)に寄せ、線もやめ、字間も同じ字の 0.04 倍にした
   (はじめに掲載店舗一覧・お知らせ一覧・メッセージ、同日あとから検索結果も)。
   お知らせの記事と読み物にも同じ帯を置く(縞は黄色。「お知らせの記事と読み物」で色を変える)。
   メッセージの見出しまわりは「メッセージ」に書く。結末の画面(.is-final)には帯を置かない */
@media (min-width: 740px) {
  body {
    /* 帯の下の端の波。不透明な所が残る。1440×20 の枠で描いて、横幅いっぱい・高さ 30px に伸ばす(はじめは 20px。2026-10-04 オーナー指示で 1.5 倍に) */
    --inner-wave-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V7C1200 19 960 18 720 9C480 0 240 0 0 10Z'/%3E%3C/svg%3E");
  }
  body[data-page="restaurants"] main::before,
  body[data-page="news"] main:has(.page-header)::before,
  body[data-page="news"] main:has(.notice--article)::before,
  body[data-page="search"] main::before,
  html:not(.is-final) body[data-page="messages"] main::before {
    content: "";
    display: block;
    height: 80px;  /* はじめは 56px。2026-10-04 オーナー指示で厚くした */
    background: repeating-linear-gradient(135deg, var(--color-stripe-sand) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 28px) no-repeat, var(--inner-wave-band) bottom / 100% 30px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 28px) no-repeat, var(--inner-wave-band) bottom / 100% 30px no-repeat;
  }
  /* 帯の色: 掲載店舗にかかわる所は砂(茶色)、お知らせは海(青)、メッセージは若草(緑)にそろえる(2026-10-04 オーナー指示。はじめは掲載店舗が海・お知らせが砂だったのを入れ替えた)。
     検索結果は、店が出たときは砂、お知らせだけが出たときは海 */
  body[data-page="news"] main:has(.page-header)::before,
  body[data-page="search"] main:has(.notice--linked):not(:has(.shop-list__item))::before { background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2)); }
  html:not(.is-final) body[data-page="messages"] main::before { background: repeating-linear-gradient(135deg, var(--color-stripe-leaf) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2)); }
  /* 検索でしか開けないページ(archive/)に当たった検索結果は、店が出てもお知らせが出ても縞を黒い赤(--color-stripe-alert)にする(2026-10-09 オーナー指示)。
     目印の data-band="red" は js/search-render.js が付ける。:not(#_) は上の砂・海の指定に必ず勝つための重み。スマホも同じ(スマホ版の塊)。
     検索でしか開けないお知らせ(archive/ の読み物3ページ。body に data-band="red" を書いた)の帯も同じ黒い赤(2026-10-10 オーナー指示) */
  body[data-page="search"][data-band="red"] main:not(#_)::before,
  body[data-page="news"][data-band="red"] main:not(#_)::before { background: repeating-linear-gradient(135deg, var(--color-stripe-alert) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2)); }
  body[data-page="restaurants"] .page-header,
  body[data-page="news"] .page-header,
  body[data-page="search"] .page-header { padding: 80px 0 64px; }
  body[data-page="restaurants"] .page-header h1,
  body[data-page="news"] .page-header h1,
  body[data-page="search"] .page-header h1 {
    margin: 0;
    font-size: var(--fs-7);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }
  body[data-page="restaurants"] .page-header p,
  body[data-page="news"] .page-header p,
  body[data-page="search"] .page-header p {
    max-width: none;
    margin: 24px 0 0;
  }
}

/* ── 掲載店舗一覧と検索結果の店 ──
   1件の大きさは今までと同じ(写真は 3分の1、高さ 290px、店と店の間 32px)。
   白い板に影を付け、写真は左右互い違い。板の縁の薄い線ははじめ付けていたが、2026-10-04 オーナー指示でやめた。写真と同じ大きさの縞を板の後ろに敷き、写真の外側の下へ 20px ずらしてのぞかせる
   (写真が左なら左下に海の色、右なら右下に砂の色)。角は丸めない。カーソルを当てたときの色はほかの行と同じ(一段沈めた生成り) */
@media (min-width: 740px) {
  body[data-page="restaurants"],
  body[data-page="search"] {
    --list-stripe-shift: 20px;  /* 板の下からのぞく縞の幅 */
  }
  body[data-page="search"] {
    --shadow-panel-item: 0 2px 14px rgba(var(--rgb-shade-3), 0.08);  /* 掲載店舗一覧の板と同じ影 */
  }
  body[data-page="search"] .shop-list__item { box-shadow: var(--shadow-panel-item); }
  /* 縞を板より後ろに描くため、並び全体を重なりの基準にする(写真に z-index を付けないこと。付けると縞が板の上に出る) */
  body[data-page="restaurants"] .shop-list,
  body[data-page="search"] .shop-list {
    isolation: isolate;
    gap: 32px;
    /* 上は 0: 1件めの板の上の端を、お知らせ一覧のいちばん上の線・メッセージと同じ高さにする(はじめは 24px。2026-10-04 オーナー指示) */
    padding: 0 0 64px;
  }
  body[data-page="restaurants"] .shop-list__item,
  body[data-page="search"] .shop-list__item {
    align-items: stretch;
    background: var(--color-surface);
    border: none;
    border-radius: 0;
    overflow: visible;
  }
  body[data-page="restaurants"] .shop-list__item:nth-child(even),
  body[data-page="search"] .shop-list__item:nth-child(even) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  body[data-page="restaurants"] .shop-list__item:nth-child(even) .shop-list__photo,
  body[data-page="search"] .shop-list__item:nth-child(even) .shop-list__photo { order: 2; }
  body[data-page="restaurants"] .shop-list__photo::before,
  body[data-page="search"] .shop-list__photo::before {
    content: "";
    position: absolute;
    pointer-events: none;  /* 板の外にのぞく縞にカーソルを当てても、店の行の色を変えない */
    inset: var(--list-stripe-shift) 0 calc(var(--list-stripe-shift) * -1) calc(var(--list-stripe-shift) * -1);
    z-index: -1;
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
  }
  body[data-page="restaurants"] .shop-list__item:nth-child(even) .shop-list__photo::before,
  body[data-page="search"] .shop-list__item:nth-child(even) .shop-list__photo::before {
    inset: var(--list-stripe-shift) calc(var(--list-stripe-shift) * -1) calc(var(--list-stripe-shift) * -1) 0;
    background: repeating-linear-gradient(135deg, var(--color-stripe-sand) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
  }
  /* 写真の後ろの縞は、掲載店舗一覧にも検索結果の店にも出さない。
     掲載店舗一覧の店の板の後ろにも色の板は敷かない(右下へ 20px ずらした海の色・若草の色の板があったが、やめた) */
  body[data-page="restaurants"] .shop-list__photo::before,
  body[data-page="search"] .shop-list__photo::before { content: none; }
  /* 掲載店舗一覧の店と店の間は 64px(色の板が下に 20px のぞいていたときの値のまま) */
  body[data-page="restaurants"] .shop-list { gap: 64px; }
  body[data-page="restaurants"] .shop-list__place,
  body[data-page="search"] .shop-list__place { color: var(--color-ink-label); }
  body[data-page="restaurants"] .shop-list__facts,
  body[data-page="search"] .shop-list__facts { border-top: 2px solid var(--color-dot); }
  body[data-page="restaurants"] .shop-list__facts dt,
  body[data-page="search"] .shop-list__facts dt { color: var(--color-ink-label); }
  /* 掲載店舗一覧と検索結果の店の評点・予算の行: 上の線から評点の文字までを 12px、文字の下から板の下の端までを 20px にする。
     板の高さは写真(290px)で決まっていて、行は板の下の端に付けてあるので、空きを減らすと線が下へ下がる(説明と線の間が広がる)。
     文字は線と板の下の端の真ん中より少し上(2026-10-05 オーナー指示。上 12・下 34 → 上 18・下 28 → 3割ほど詰めて今の値。
     同日、検索結果の店も一覧と同じ値にした)。
     評点の左の 16px の余白は掲載店舗一覧だけ(同日オーナー指示) */
  body[data-page="restaurants"] .shop-list__body,
  body[data-page="search"] .shop-list__body { padding-bottom: 20px; }
  body[data-page="restaurants"] .shop-list__facts > div,
  body[data-page="search"] .shop-list__facts > div { padding-top: 12px; }
  body[data-page="restaurants"] .shop-list__facts > div:first-child { padding-left: 16px; }
  /* 店の説明は、文の幅の上限(p の --measure、約 562px)を外し、欄の幅いっぱいまで使う(2026-10-05 オーナー指示)。
     上限があると、右が空いていても AMA の説明の最後の「軒。」だけが2行目に落ちていた。
     AMA は 1205px 以上、Terre et Mer は約 1270px 以上で1行に収まる(1200〜1204px は欄が 3px 足りず、今までどおり2行)。
     上限が効くのは欄が 562px より広い幅(約 1150px 以上)だけなので、それより狭い幅の折り返しは変わらない */
  body[data-page="restaurants"] .shop-list__desc,
  body[data-page="search"] .shop-list__desc { max-width: none; }
  /* 店の説明は店名から少し離して下げる(店名との間 14px → 26px。2行の説明で、上の店名と下の線までの空きがそろう。2026-10-05 オーナー指示) */
  body[data-page="restaurants"] .shop-list__desc,
  body[data-page="search"] .shop-list__desc { margin-top: 26px; }
}

/* ── お知らせ一覧と検索結果のお知らせ ──
   白い板をやめ、生成りの地に罫で区切った行を並べる(並びの幅 1080px)。日付は左の列(200px)、題名と抜粋は右の列、右端に「＞」。
   いちばん上の行の上に罫は付けない。角は丸めず、並び全体の影も付けない。カーソルを当てたときの色はほかの行と同じ(一段沈めた生成り) */
@media (min-width: 740px) {
  body[data-page="news"] main > .section > .container { filter: none; }
  /* 検索結果のお知らせは、並び・線・「＞」はお知らせ一覧と同じで、行の地だけ今のサイトの検索結果と同じ白にする */
  body[data-page="search"] { --notice-row-bg: var(--color-surface); }
  body[data-page="news"] .notice--linked,
  body[data-page="search"] .notice--linked,
  body[data-page="news"] .notice--linked:first-of-type,
  body[data-page="search"] .notice--linked:first-of-type,
  body[data-page="news"] .notice--linked:last-of-type,
  body[data-page="search"] .notice--linked:last-of-type {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 32px;
    max-width: 1080px;
    margin: 0 auto;
    padding: 28px 96px 30px 40px;
    background: var(--notice-row-bg, none);
    border: none;
    border-bottom: 1px solid var(--color-rule-soft);
    border-radius: 0;
  }
  /* いちばん上の行の上には罫を付けない(はじめはお知らせ一覧だけ太い罫を付けていたが、2026-10-05 オーナー指示で消した。検索結果と同じ) */
  body[data-page="news"] .notice--linked::after,
  body[data-page="search"] .notice--linked::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 40px;
    width: 10px;   /* はじめは 14px。2026-10-04 オーナー指示で小さくした(トップ・お知らせ一覧・検索結果で同じ) */
    height: 10px;
    border-top: 1.5px solid var(--color-ink);
    border-right: 1.5px solid var(--color-ink);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
  }
  body[data-page="news"] .notice--linked time,
  body[data-page="search"] .notice--linked time {
    grid-column: 1;
    grid-row: 1 / span 2;
    padding-top: 4px;
    color: var(--color-ink-label);
    font-variant-numeric: tabular-nums;
  }
  /* 題名の字は 17.5px(はじめは本文共通の --fs-3 = 16.875px。2026-10-07 オーナー指示で少し大きくした)。
     740px 以上のどの幅でも題名が1行に収まる大きさの上限: スクロールバーが幅を取らない画面(Mac・iPad)の 796px 幅で
     題名の列がいちばん狭く、いちばん長い題名(25文字)の右に約 5px しか余らない(Windows の Chrome は 18px まで収まる)。
     日付は題名の1行目と真ん中の高さでそろう(上の padding-top: 4px)。字を大きくしたら、スクロールバーのある画面とない画面の
     両方で 740〜1023px を測り直す */
  body[data-page="news"] .notice--linked h3,
  body[data-page="search"] .notice--linked h3 { grid-column: 2; margin: 0; font-size: 17.5px; }
  /* 題名と抜粋の間は 16px(はじめは 10px。2026-10-07 オーナー指示で広げた)。文字の外形どうしでは約 27px で、
     行の上下の余白(線から文字まで約 33〜36px)より狭くし、題名と抜粋がひとまとまりに見えるようにしている */
  body[data-page="news"] .notice--linked p,
  body[data-page="search"] .notice--linked p { grid-column: 2; margin-top: 16px; }
  body[data-page="search"] .search-summary { color: var(--color-ink-soft); }
  /* 見つからなかったときの文は、メッセージの「まだありません」と同じく、見出しまわりの 26px 下(ほかの一覧の中身の始まり)から
     2行続けて書く(上の 60px と段落の間の余白を付けない。下の余白は今のまま。2026-10-04 オーナー指示) */
  body[data-page="search"] .no-results { padding-top: 0; }
  body[data-page="search"] .no-results p { margin: 0; }
}
@media (min-width: 1024px) and (hover: hover) {
  body[data-page="news"] .notice--linked:hover,
  body[data-page="search"] .notice--linked:hover { background: var(--color-bg-deep); }
}

/* ── お知らせの記事と読み物(news/ の各記事・archive/ のフーディー賞・言い伝え・尼牛) ──
   今の記事の形(白い板・影・文字の大きさ)はそのまま。角は 2026-10-04 オーナー指示で丸めないことにした。
   - パンくず(トップ › お知らせ › 題名)は出さず、ヘッダーのすぐ下に一覧と同じ帯を置く。縞は青(海の色)。
     帯と白い板の間は 64px(2026-10-04 オーナー指示。スマホはパンくずのまま)
   - 白い板は外の幅 1040px で中央に置き、左右の内側を 92px にする(文字の始まりを暫定解と同じ位置に)
   - 日付と題名の間は 20px、本文の行間は 2.0 にそろえる(フーディー賞も同じ。受賞者・写真・区切り線・署名のまわりの広い余白は今のまま)
   - 「お知らせ一覧に戻る」は中央に寄せ、白い面の押し場所にする(下の縞の帯はやめた。2026-10-04 オーナー指示) */
@media (min-width: 740px) {
  /* 帯を画面の端まで伸ばすので、はみ出した分は main で切る(横にスクロールさせない) */
  body[data-page="news"] main { overflow-x: clip; }
  body[data-page="news"] main:has(.notice--article)::before {
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));  /* お知らせは海の色(はじめは砂。2026-10-04 オーナー指示) */
  }
  body[data-page="news"] .breadcrumb { display: none; }
  /* 角は丸めない(掲載店舗一覧の板と同じ四角。2026-10-04 オーナー指示) */
  body[data-page="news"] .notice--article {
    border-radius: 0;
    max-width: 1040px;
    margin-top: 64px;
    margin-left: auto;
    margin-right: auto;
    /* 左右の内側は 92px。740〜1023px で狭まったときの削り方は、ファイルの終わりの「PC の狭い幅」に書く */
    padding-left: 92px;
    padding-right: 92px;
  }
  body[data-page="news"] .notice--article time { margin-bottom: 20px; }
  body[data-page="news"] .notice--article > p { line-height: 2; }

  body[data-page="news"] .back-link {
    position: relative;
    max-width: none;
    /* 白い板から押し場所までは 72px(縞の帯があったころの 96px + 帯の内側 56px = 152px から、2026-10-04 オーナー指示で詰めた)。下は今のまま */
    margin: 72px calc(50% - 50vw) 0;
    padding: 0 0 76px;
    text-align: center;
  }
  /* 押し場所の形は「二重の枠」(上の .back-link a。2026-10-10 オーナー指示)。
     それまでは白い箱(幅 230px)+ 左の藍緑の四角の矢印(48px)。幅は決めず、文字の長さに合わせる */
  body[data-page="news"] .back-link a {
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-ink);
  }
}

/* ── メッセージ ──
   暫定解の案B「線」の作り。ヘッダーのすぐ下は、はじめはヘッダーの罫と合わせた二重の線だったが、
   一覧と同じ海の色の縞の帯にした(2026-10-04 オーナー指示。帯は「中のページの見出しまわり」で置く)。
   ページの見出しはほかの一覧と同じく左に寄せ、題名と説明の間に線は引かず、字間は字の 0.04 倍(はじめは中央・線あり・0.3 倍。2026-10-04 オーナー指示で変えた)。まだ何も届いていないときの案内は、「デザイン現状_20261003」と同じく板を敷かない灰色の文だけ(全体の .message-empty の指定のまま)。
   暫定解では二重の線の枠、そのあと線なし・影の白い板にしたが、2026-10-04 オーナー指示で元の形に戻した。
   メッセージが届いたあとの一覧は白い板・影(角は 2026-10-04 オーナー指示で丸めない)。結末の画面(.is-final)には効かせない */
@media (min-width: 740px) {
  html:not(.is-final) body[data-page="messages"] .page-header { padding: 80px 0 64px; }
  html:not(.is-final) body[data-page="messages"] .page-header h1 {
    margin: 0;
    font-size: var(--fs-7);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.04em;
  }
  html:not(.is-final) body[data-page="messages"] .page-header p {
    max-width: none;
    margin: 24px 0 0;
    color: var(--color-ink-label);
    /* 字は一覧の説明より一段小さいが、行の高さは一覧の説明(.lead)とそろえ、見出しまわりの下の端を同じ位置にする */
    line-height: calc(var(--fs-2) * 1.8);
  }
  /* 中身(届いたメッセージの板・まだ届いていないときの文)の始まりを、掲載店舗一覧・お知らせ一覧の節と同じく
     見出しまわりの 26px 下にする(お知らせ一覧のいちばん上の線と同じ高さ。2026-10-04 オーナー指示)。
     まだ届いていないときの文は、段落の上の余白(1文字分)と上の 40px を付けない */
  html:not(.is-final) body[data-page="messages"] .message-section { padding-top: 26px; }
  html:not(.is-final) body[data-page="messages"] .message-empty { margin: 0; padding-top: 0; }
  /* 届いたメッセージの一覧: 左右の余白をお知らせの記事と同じにする(2026-10-04 オーナー指示)。
     板の外の幅は 1040px で中央、行と本文の内側の左右は 92px。上下の余白は今のまま。
     開閉の矢印は今までと同じく字の 24px 手前。本文の上の線は、左右の余白が同じになったので右を縮めない */
  html:not(.is-final) body[data-page="messages"] .message-list:has(> .message) {
    border-radius: 0;  /* 角は丸めない(掲載店舗一覧の板と同じ四角。同日オーナー指示) */
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 予約を確定した直後の「ご予約が完了しました」も、横幅を上の一覧(予約確定のお知らせ)と同じ 1040px・中央にする(2026-10-05 オーナー指示) */
  html:not(.is-final) body[data-page="messages"] .message-notice {
    max-width: 1040px;
    margin-left: auto;
    margin-right: auto;
  }
  html:not(.is-final) body[data-page="messages"] .message__summary,
  html:not(.is-final) body[data-page="messages"] .message__body {
    padding-left: 92px;
    padding-right: 92px;
  }
  html:not(.is-final) body[data-page="messages"] .message__summary::before { left: 68px; }
  /* 結末の手紙の行(.message--final)も同じ余白(2026-10-04 は前の左 40px・右 16px のまま残したが、
     2026-10-05 オーナー指示で全部の行を予約確定のお知らせにそろえた) */
  html:not(.is-final) body[data-page="messages"] .message__text::before { right: 0; }
  /* 本文の段落の幅の上限は、お知らせの記事の本文(.notice--article > p)と同じ 720px(2026-10-09 オーナー指示。
     はじめはサイト共通の --measure = 40 字で、1024px 以上では本文の上の線より 300px 近く手前で折り返していた)。
     板と左右の余白も記事と同じなので、どの幅でも記事と同じ所で折り返す。記事の上限を変えたらここも合わせる */
  html:not(.is-final) body[data-page="messages"] .message__text p { max-width: 720px; }
}

/* ── 最初のお知らせ画面(intro.html) ──
   今の画面をそのまま使い、余白だけお知らせの記事にそろえる(暫定解の修正2)。
   板の外の幅 1040px(中央)・板の内側 36/92/48px・日付と題名の間 20px・題名と下の線の間 32px・線と本文の間 36px・
   段落の間 2.2文字分・行間 2.0・本文の幅は 720px まで(この画面の --measure は記事より狭いので直に書く)。
   日付の色(赤)・閉じるボタン・文字の大きさと色・板の色と角は今のまま。
   740〜1023px で狭まったときの板の広げ方と内側の削り方も記事と同じ(ファイルの終わりの「PC の狭い幅」) */
@media (min-width: 740px) {
  .intro-page main .container { max-width: calc(1040px + var(--gutter) * 2); }
  /* 板の左上の「お知らせ」の小さな見出しは出さない(2026-10-06 オーナー指示。スマホは今のまま出す) */
  .intro-page .intro-label { display: none; }
  /* このページのヘッダーは店名だけなので、店名(美食島観光ガイド 尼山原島)を左右の真ん中に置く(2026-10-06 オーナー指示)。
     上下の余白は、どの幅でも 740〜1023px の形(上 22px・店名の行の下 28px。ヘッダーの高さ 83.8px)にそろえる(2026-10-11 オーナー指示)。
     740〜1023px は、ふつうのページの2段組み(店名の段 + 検索窓の段)の2段目が空のまま残り、段の間 14px + 下の余白 14px で
     この形になっていた。2段組みをやめて、余白として書く。1024px からは上 12px・下 14px(高さ 59.8px)だった。
     スマホはファイルの終わりの「暫定解」の段(480px までの形にそろえ、余白を店名の大きさの比で縮める) */
  .intro-page .site-header { padding: 22px 0 28px; }
  .intro-page .site-header__inner { display: flex; justify-content: center; }
  .intro-page .site-header__row { justify-content: center; }
  .intro-page .notice { padding: 36px 92px 48px; }
  .intro-page .notice time { margin-bottom: 20px; }
  .intro-page .notice h3 { padding-bottom: 32px; }
  .intro-page .notice h3 + p { margin-top: 36px; }
  .intro-page .notice p + p { margin-top: 3.3em; }  /* お知らせの記事の段落の間と同じ(2026-10-10 オーナー指示。前は 2.2em) */
  .intro-page .notice > p.notice-sign { margin-top: 4.95em; }  /* 署名の上は段落の間の1.5倍(記事と同じ。2026-10-10 オーナー指示) */
  .intro-page .notice p { max-width: 720px; line-height: 2; }
  /* 文字の大きさ・色と板の影も、お知らせの記事(.notice--article)にそろえる(2026-10-04 オーナー指示)。
     日付の色(赤)・「お知らせ」の小さな見出し・閉じるボタンは今のまま */
  .intro-page { --shadow-panel-item: 0 2px 14px rgba(var(--rgb-shade-3), 0.08); }  /* 記事の板と同じ影 */
  .intro-page .notice { box-shadow: var(--shadow-panel-item); }
  .intro-page .notice h3 {
    margin-top: 12px;
    font-size: var(--fs-5);
    letter-spacing: 0.04em;
    line-height: 1.5;
  }
  .intro-page .notice p { color: var(--color-ink); }
}

/* ── 店舗ページ(PC)。6店と RESTAURANT YAMANO ──
   Artifact「【店舗】あたみニュース参考案_20261005」の「案4-2 修正2」を当てる(2026-10-05 オーナー指示。はじめは AMA だけ、同日 AMA を完成として全店へ広げた)。
   HTML は変えず、今の部品に CSS だけで同じ見た目を当てる。PC(740px 以上)だけで、スマホは今のまま。色は変数のままなので、YAMANO の灰色(theme-night)と結末直前の赤(theme-muted)は今の色味のまま。
   メニューの2段の切れ目は、3つめの見出しから右の段(全店がメニューの頭に見出しを持つ。見出しの数が店で違うので、品を足したら確かめる)。
   見出しが5つの店(ヴォンゴラ)は4つめの見出しから右の段(メインを左に残し、右はコースから。ほかの店とそろう)。
   上から: 写真の1枚目を画面の幅いっぱい(高さは幅の3分の1)、そのすぐ下に残りの4枚を正方形でつなげ、4枚の下半分に海の縞の帯
   → 店名・札・評点(中央)と、予算・営業時間・本土からの板 → 節の見出しは中央・下に短い線 → 店舗情報(今の縦の並びに影)
   → 地図の海の色を端から端まで広げた帯に、地図と住所の札 → メニューは白い板に2段 → 砂の縞の帯に予約の白い板 → 口コミ(今の形を1枚の板に)。
   はじめは写真を画面いっぱいの表紙にして店名を白い字で重ねていたが、同日オーナー指示で、写真を上に置くだけにして高さも抑え、
   続けて「案4-2 修正3」のとおり、4枚をいちばん上の写真のすぐ下につなげて店名より上に出した。
   740〜1023px で窮屈な所は、ファイルの終わりの「PC の狭い幅」で詰める */
@media (min-width: 740px) {
  body[data-page="restaurant"] {
    --shop-photo-h: min(calc(100vw / 3), 480px);  /* いちばん上の写真の高さ。画面の幅の3分の1(1440px で 480px、740px で 247px)で、狭い幅でも横長(3:1)を保つ(はじめは 280px の下限があり、840px より狭いと比が崩れた。2026-10-19 オーナー指示で外した) */
    /* 帯の下の端の波。トップの掲載店舗の帯と同じ形(1440×28 の枠で描いて横幅いっぱいに伸ばす) */
    --shop-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V10C1200 26 960 24 720 12C480 0 240 0 0 14Z'/%3E%3C/svg%3E");
    --shadow-panel-item: 0 2px 14px rgba(var(--rgb-shade-3), 0.08);  /* 掲載店舗一覧の板と同じ影 */
  }
  /* 写真・帯を画面の端まで伸ばすので、はみ出した分は main で切る */
  body[data-page="restaurant"] main { overflow-x: clip; }
  /* 写真の節を店名より上に出す。HTML の順(店名が先)は変えず、見た目の順だけを入れ替える(読み上げと Tab の順は今のまま) */
  body[data-page="restaurant"] main > .container { display: flex; flex-direction: column; }
  body[data-page="restaurant"] #photos { order: -1; }
  body[data-page="restaurant"] .breadcrumb { display: none; }

  /* いちばん上の写真: 写真の節の1枚目を、4枚の列の上の段に幅いっぱいで置く(押すと拡大する仕組みはそのまま) */
  body[data-page="restaurant"] .photo-gallery__item:first-child {
    grid-column: 1 / -1;
    height: var(--shop-photo-h);
    aspect-ratio: auto;
    object-position: 50% 50%;
  }
  /* 店名・札・評点は写真の下に中央ぞろえ(大きさと色は今のまま)。4枚の下の縞の帯から 56px 空ける。
     入れ物を重なりの単位にして(z-index: 0)、要点の板の後ろに敷く砂の色を入れ物の中に描く */
  body[data-page="restaurant"] .shop-header {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 56px;
    text-align: center;
  }
  /* 種別の札は店名の下に置く(スマホと同じ。2026-10-10 オーナー指示。はじめは店名の右に横並び)。間はスマホ(店名 22.4px で 12px)と同じ割合の 18px */
  body[data-page="restaurant"] .shop-header__title { flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
  /* 札の文字は 13px(ほかの札と同じ 11.25px から、2026-10-10 オーナー指示で大きくした)。内側の余白も同じ割合で広げる */
  body[data-page="restaurant"] .shop-header__title .tag { font-size: 13px; padding: 3.5px 14px; }
  body[data-page="restaurant"] .shop-rating { justify-content: center; padding-bottom: 0; }

  /* 予算・営業時間・本土からの板: 幅 1000px で中央。後ろに砂の色を右下へずらして敷く */
  body[data-page="restaurant"] .shop-facts {
    position: relative;
    width: min(1000px, 100%);
    margin-top: 40px;
    padding: 28px 40px;
    text-align: left;
    box-shadow: var(--shadow-md);
  }
  body[data-page="restaurant"] .shop-facts::before {
    content: "";
    position: absolute;
    inset: 20px -20px -20px 20px;
    z-index: -1;
    background: var(--color-stripe-sand);
  }
  body[data-page="restaurant"] .shop-facts__label { color: var(--color-ink-label); }

  /* 節の見出しは、トップの見出しと同じく左に寄せ、下に画面の左の端から並びの左端 + 240px までの線を引く
     (はじめは中央・幅 140px の短い線。2026-10-05 オーナー指示でトップにそろえた。線の太さ・色・見出しとの間もトップと同じ。字間と下の空きは今のまま) */
  /* 見出しの文字だけ 24px 右に寄せる(下の線は動かさない。2026-10-05 オーナー指示) */
  body[data-page="restaurant"] .section > h2 { margin-bottom: 40px; text-align: left; text-indent: 24px; }
  body[data-page="restaurant"] .section > h2::after {
    content: "";
    display: block;
    width: calc(240px + min(50vw, var(--bleed-max) / 2) - 50%);  /* 1600px より広い画面では、線の左の端も 1600px の幅で切る(--bleed-max) */
    height: 2px;
    margin: 20px 0 0 calc(50% - min(50vw, var(--bleed-max) / 2));
    background: var(--color-dot);
  }

  /* 写真: ページのいちばん上に置く。「写真」の見出しは見えなくする(読み上げには残す)。残りの4枚は画面の端から端まで正方形で並べる */
  body[data-page="restaurant"] #photos { padding-top: 0; }
  body[data-page="restaurant"] #photos > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  body[data-page="restaurant"] .photo-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 4px;
    margin: 0 calc(50% - 50vw);  /* 広い画面でも端まで(見出しの線などのように 1600px では切らない。2026-10-05 オーナー指示) */
  }
  /* 下の縞の帯は波の形に切り抜くので重なりの単位になり、写真より上に描かれる。写真を一段上げる */
  body[data-page="restaurant"] .photo-gallery__item:not(:first-child) { position: relative; z-index: 1; aspect-ratio: 1 / 1; }
  /* 写真の列の下半分から列の下 56px まで、海の縞の帯。下の端は波 */
  body[data-page="restaurant"] #photos::after {
    content: "";
    display: block;
    height: calc((100vw - 12px) / 8 + 56px);
    margin: calc((100vw - 12px) / -8) calc(50% - 50vw) 0;  /* 写真の列と同じく、広い画面でも端まで(下が波の帯) */
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 26px) no-repeat, var(--shop-wave) bottom / 100% 28px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 26px) no-repeat, var(--shop-wave) bottom / 100% 28px no-repeat;
  }
  /* 検索でしか開けない店(RESTAURANT YAMANO と Terre et Mer。body に data-band="red")は、帯の縞を黒い赤(--color-stripe-alert)にする。
     YAMANO は白黒の配色なので、その赤を白黒にした灰色になる(:root.theme-night。2026-10-10 オーナー指示)。
     Terre et Mer は一覧から外して検索で見つけてもらう店になったので、同じ黒い赤にした(2026-10-14 オーナー指示) */
  body[data-page="restaurant"][data-band="red"] #photos::after { background: repeating-linear-gradient(135deg, var(--color-stripe-alert) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2)); }

  /* 節どうしの空き(案のとおり) */
  body[data-page="restaurant"] #info { padding-top: 128px; }  /* 要点の板の下から見出しまで */
  body[data-page="restaurant"] #access { padding-top: 120px; }
  body[data-page="restaurant"] #menu { padding-top: 120px; }
  body[data-page="restaurant"] #reviews { padding-top: 104px; }
  /* フッターの上の空きは、ほかのページと同じ 80px(2026-10-09 オーナー指示。それまでは 96px) */

  /* 店舗情報: 今の縦の並びのまま、板に影 */
  body[data-page="restaurant"] .info-table { box-shadow: var(--shadow-panel-item); }
  body[data-page="restaurant"] .info-table__label { color: var(--color-ink-label); }

  /* アクセス: 地図の海の色の面。店舗情報やメニューの板と同じ幅で、左右に同じだけ空きを取る
     (はじめは画面の端から端まで広げた帯。2026-10-05 オーナー指示で板の幅にそろえた)。地図は左、住所などの白い札は右で上下の真ん中。
     地図は面の左の端から置き、札は面の右の端から 35px 内側に置く(はじめは地図の左に 35px 空け、札は右の端に付けていた。
     面を板の幅にしたら札が端に付いて見えたので、2026-10-05 オーナー指示で地図の左の空きを札の右へ回した)。
     地図は札(400px)・札との間(16px)・札の右の空き(35px)を除いた幅まで縮め、帯の高さは地図に合わせる(1440px で 743×560。
     1024px 前後で地図を 743px のままにすると、札が地図にかぶって店の印に触れていた) */
  body[data-page="restaurant"] .shop-map {
    position: relative;
    display: block;
    background: var(--color-map-sea);
  }
  body[data-page="restaurant"] .shop-map__figure {
    width: min(743px, calc(100% - 451px));
    aspect-ratio: 1232 / 928;
    margin-left: 0;
    box-shadow: none;
  }
  body[data-page="restaurant"] .shop-map__body {
    position: absolute;
    top: 50%;
    right: 35px;
    width: 400px;
    padding: 12px 28px;
    transform: translateY(-50%);
    isolation: isolate;
  }
  /* 札の白い地は、ふちに向かってだんだん海の色に溶かす(2026-10-07 オーナー指示。はじめは白い板に影 --shadow-md)。
     文字の入っている所は真っ白のままにし(オーナー指示)、ぼかすのはその外だけにする。
     濃さは「始まりと終わりがなめらかな曲線」(smootherstep: 6t^5 - 15t^4 + 10t^3)を 8 段の点で近似して落とす。
     まっすぐな割合で落とすと、落ち始めと消え際に境目が見える(オーナー指摘)。
     白い地は札の外へ 34px はみ出させ、そこから 54px かけて消す(真っ白は札の内側 20px から。文字の行は内側 23px から)。
     右のはみ出しは、札の右から海の面の端まで(35px)に収める。上下と左右の2つの帯を重ねて角も丸く消す。
     740〜1023px の札(地図の下。面の下の余白 40px)も同じ。スマホは別の値(「店舗ページ(スマホ)」の塊) */
  body[data-page="restaurant"] .shop-map__body::before {
    content: "";
    position: absolute;
    inset: -34px;
    z-index: -1;
    background: var(--color-surface);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 6.75px, rgba(0,0,0,0.104) 13.5px, rgba(0,0,0,0.275) 20.25px, rgba(0,0,0,0.500) 27px, rgba(0,0,0,0.725) 33.75px, rgba(0,0,0,0.896) 40.5px, rgba(0,0,0,0.984) 47.25px, #000 54px, #000 calc(100% - 54px), rgba(0,0,0,0.984) calc(100% - 47.25px), rgba(0,0,0,0.896) calc(100% - 40.5px), rgba(0,0,0,0.725) calc(100% - 33.75px), rgba(0,0,0,0.500) calc(100% - 27px), rgba(0,0,0,0.275) calc(100% - 20.25px), rgba(0,0,0,0.104) calc(100% - 13.5px), rgba(0,0,0,0.016) calc(100% - 6.75px), rgba(0,0,0,0.000) 100%),
                        linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 6.75px, rgba(0,0,0,0.104) 13.5px, rgba(0,0,0,0.275) 20.25px, rgba(0,0,0,0.500) 27px, rgba(0,0,0,0.725) 33.75px, rgba(0,0,0,0.896) 40.5px, rgba(0,0,0,0.984) 47.25px, #000 54px, #000 calc(100% - 54px), rgba(0,0,0,0.984) calc(100% - 47.25px), rgba(0,0,0,0.896) calc(100% - 40.5px), rgba(0,0,0,0.725) calc(100% - 33.75px), rgba(0,0,0,0.500) calc(100% - 27px), rgba(0,0,0,0.275) calc(100% - 20.25px), rgba(0,0,0,0.104) calc(100% - 13.5px), rgba(0,0,0,0.016) calc(100% - 6.75px), rgba(0,0,0,0.000) 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 6.75px, rgba(0,0,0,0.104) 13.5px, rgba(0,0,0,0.275) 20.25px, rgba(0,0,0,0.500) 27px, rgba(0,0,0,0.725) 33.75px, rgba(0,0,0,0.896) 40.5px, rgba(0,0,0,0.984) 47.25px, #000 54px, #000 calc(100% - 54px), rgba(0,0,0,0.984) calc(100% - 47.25px), rgba(0,0,0,0.896) calc(100% - 40.5px), rgba(0,0,0,0.725) calc(100% - 33.75px), rgba(0,0,0,0.500) calc(100% - 27px), rgba(0,0,0,0.275) calc(100% - 20.25px), rgba(0,0,0,0.104) calc(100% - 13.5px), rgba(0,0,0,0.016) calc(100% - 6.75px), rgba(0,0,0,0.000) 100%),
                        linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 6.75px, rgba(0,0,0,0.104) 13.5px, rgba(0,0,0,0.275) 20.25px, rgba(0,0,0,0.500) 27px, rgba(0,0,0,0.725) 33.75px, rgba(0,0,0,0.896) 40.5px, rgba(0,0,0,0.984) 47.25px, #000 54px, #000 calc(100% - 54px), rgba(0,0,0,0.984) calc(100% - 47.25px), rgba(0,0,0,0.896) calc(100% - 40.5px), rgba(0,0,0,0.725) calc(100% - 33.75px), rgba(0,0,0,0.500) calc(100% - 27px), rgba(0,0,0,0.275) calc(100% - 20.25px), rgba(0,0,0,0.104) calc(100% - 13.5px), rgba(0,0,0,0.016) calc(100% - 6.75px), rgba(0,0,0,0.000) 100%);
            mask-composite: intersect;
  }
  body[data-page="restaurant"] .shop-map__row { gap: 20px; }
  body[data-page="restaurant"] .shop-map__row:first-child { padding-top: 15px; }
  body[data-page="restaurant"] .shop-map__label { width: 92px; color: var(--color-ink-label); }

  /* メニュー: 白い板に2段。左の段は一品とメイン、右の段は2つめの見出し(コース)から。
     板の下の空き(最後の品の字の下から板の下の端まで)は、上の空き(板の上の端から最初の見出しの字まで)と同じ 48px にする
     (2026-10-06 オーナー指示。はじめは板の下の余白 48px で、空きは 63px。左の段が長い店ではさらに下のまとまりの余白 30px が残って 93px)。
     下の余白 33px + 最後の品の下の余白 11px + 字の下の空き 約4px = 48px。品の字の大きさや行の高さを変えたら測り直す */
  body[data-page="restaurant"] .menu-list {
    column-count: 2;
    column-gap: clamp(56px, calc(56px + (100vw - 1185px) * 24 / 240), 80px);
    padding: 44px clamp(40px, calc(40px + (100vw - 1185px) * 16 / 240), 56px) 33px;
    box-shadow: var(--shadow-panel-item);
  }
  body[data-page="restaurant"] .menu-group { break-inside: avoid; }
  /* 2段のとき(1200px 以上。1199px までは下の「PC の狭い幅」で1段)、左の段のいちばん下のまとまり(右の段の始まりの見出しの直前)には、
     まとまりどうしの間の余白(30px)を付けない */
  @media (min-width: 1200px) {
    body[data-page="restaurant"] .menu-list:not(:has(> h4:first-child)) > ul:has(+ h4:nth-of-type(2)),
    body[data-page="restaurant"] .menu-list:has(> h4:first-child):not(:has(> h4:nth-of-type(5))) > ul:has(+ h4:nth-of-type(3)),
    body[data-page="restaurant"] .menu-list:has(> h4:first-child):has(> h4:nth-of-type(5)) > ul:has(+ h4:nth-of-type(4)) { margin-bottom: 0; }
  }
  body[data-page="restaurant"] .menu-list h4 { break-after: avoid; color: var(--color-ink-label); }
  body[data-page="restaurant"] .menu-list h4:nth-of-type(2) { break-before: column; }
  /* メニューが見出しから始まる店は、3つめの見出しから右の段(2つめで切ると左の段が短すぎる)。単品から始まっていた5店(AMA・汐風・マレ・Terre et Mer・福来軒)にも
     頭に見出し「アラカルト」を足したので(2026-10-05 オーナー指示。左右の段の頭を見出しでそろえるため)、今は全店がこちら。上の2つめで切る指定は、見出しから始まらない店のために残す */
  body[data-page="restaurant"] .menu-list:has(> h4:first-child) h4:nth-of-type(2) { break-before: auto; }
  body[data-page="restaurant"] .menu-list:has(> h4:first-child) h4:nth-of-type(3) { break-before: column; }
  /* 見出しが5つの店(ヴォンゴラ: ピザ・パスタ・メイン・コース・ドリンク)は、4つめの見出し(コース)から右の段
     (2026-10-20 オーナー指示。3つめで切るとメインが右の段に行き、メインを左・コースから右のほかの店とそろわない) */
  body[data-page="restaurant"] .menu-list:has(> h4:first-child):has(> h4:nth-of-type(5)) h4:nth-of-type(3) { break-before: auto; }
  body[data-page="restaurant"] .menu-list:has(> h4:first-child):has(> h4:nth-of-type(5)) h4:nth-of-type(4) { break-before: column; }

  /* RESTAURANT YAMANO(theme-night)は見出しが3つ(アラカルト・コース・ドリンク)。3つめで切るとコースが左の段の下に入るので、
     ほかの店と同じくコースが右の段の頭に来るよう、2つめの見出しから右の段にする(2026-10-21 オーナー指示)。
     左の段のいちばん下のまとまりの下の余白を 0 にする所も、アラカルトへ1つずらす(コースの下は .menu-group と同じ 30px に戻す)。
     ほかの店はどれも見出しが4つ以上(コースは3つめ以降)なので、YAMANO の画面だけに絞る */
  @media (min-width: 1200px) {
    html.theme-night body[data-page="restaurant"] .menu-list:has(> h4:first-child) h4:nth-of-type(2) { break-before: column; }
    html.theme-night body[data-page="restaurant"] .menu-list:has(> h4:first-child) h4:nth-of-type(3) { break-before: auto; }
    html.theme-night body[data-page="restaurant"] .menu-list:has(> h4:first-child) > ul:has(+ h4:nth-of-type(2)) { margin-bottom: 0; }
    html.theme-night body[data-page="restaurant"] .menu-list:has(> h4:first-child) > ul:has(+ h4:nth-of-type(3)) { margin-bottom: 30px; }
  }

  /* ご予約状況: 見出しの下から、砂の縞の帯(画面の端から端まで、下の端は波)に白い板を載せる。
     板の中は左に欄とボタン(幅 320px)、右に注記・返答・表(左に縦の罫)。
     帯と板は、節の格子の2〜4行め(注記・返答・表の行)を基準に置いた飾り。板の内側は上下 36px・左右 40px、帯は板の上 56px・下 98px。
     表(7日分)が右の段に入りきらない幅(1024〜1219px あたり)では、板の左右(40px)と縦の罫の左右(48px)の4つの余白を同じだけ減らす
     (2026-10-05 オーナー指示。1024px で表の最後の日が切れていた)。板の外の大きさと見出しの位置は変えない。
     減らす量(--resv-trim)= (1009px − 節の幅) ÷ 4。1009px は、右の段の表のほかに要る幅 497px(板の左右 80・欄 320・罫の左右 96・罫 1)
     + 表がいちばん長くなる週(禅オールド明朝のころ、月も日も2桁の 10/24(土)〜10/30(金)で 503.5px)+ 余裕 8px。上限 24px(板の左右は 16px まで)。
     書体を Noto Sans JP にして日付の見出しの余白を 8px にした今(2026-10-10)は、月も日も2桁の週はどれも約 496px(「時間」の列 45.5px + 日付の列 64.3px × 7)なので、1009px のままで余裕が増えた。
     節の幅は 100cqw(店舗ページの .container を container にして測る。付けてもほかの物は動かない)。
     表の文字の大きさ・日付の書き方・欄の幅を変えたら、いちばん長い週の表の幅を測り直す */
  body[data-page="restaurant"] main > .container { container-type: inline-size; }
  body[data-page="restaurant"] #reservation {
    --resv-trim: clamp(0px, calc((1009px - 100cqw) / 4), 24px);
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    column-gap: calc(48px - var(--resv-trim));
    padding: 112px calc(40px - var(--resv-trim)) 134px;
  }
  body[data-page="restaurant"] #reservation > h2 {
    grid-column: 1 / -1;
    margin-bottom: 132px;  /* 見出しの下 40 + 帯の上 56 + 板の上 36 */
    /* 節の内側の左右の余白(40px。表が入りきらない幅では減らした値)の外まで広げ、見出しの文字と線をほかの節にそろえる(2026-10-05 オーナー指摘。ずっと 40px 右にずれていた) */
    margin-left: calc(var(--resv-trim) - 40px);
    margin-right: calc(var(--resv-trim) - 40px);
  }
  body[data-page="restaurant"] #reservation::before,
  body[data-page="restaurant"] #reservation::after {
    content: "";
    position: absolute;
    grid-row: 2 / 5;
    grid-column: 1 / -1;
  }
  body[data-page="restaurant"] #reservation::before {
    z-index: -2;
    top: -92px;
    bottom: -134px;
    left: calc((100% - 100vw) / 2);  /* 下が波の帯なので、広い画面でも端まで(--bleed-max では切らない。2026-10-05 オーナー指示) */
    right: calc((100% - 100vw) / 2);
    background: repeating-linear-gradient(135deg, var(--color-stripe-sand) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, var(--shop-wave) bottom / 100% 42px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 40px) no-repeat, var(--shop-wave) bottom / 100% 42px no-repeat;
  }
  body[data-page="restaurant"] #reservation::after {
    z-index: -1;
    inset: -36px calc(var(--resv-trim) - 40px);
    background: var(--color-surface);
    box-shadow: var(--shadow-panel-item);
  }
  body[data-page="restaurant"] .availability-search {
    grid-column: 1;
    grid-row: 2 / 5;
    align-self: center;
    gap: 16px;
    margin: 0;
  }
  body[data-page="restaurant"] .availability-search__field { flex: 1 1 0; min-width: 0; }
  body[data-page="restaurant"] label.availability-search__field:last-of-type { margin-right: 0; }
  body[data-page="restaurant"] .availability-search select {
    width: 100%;
    min-width: 0;
    background-color: var(--color-bg);
    border-color: var(--color-rule-soft);
  }
  body[data-page="restaurant"] .availability-search .btn-primary { flex: 1 1 100%; }
  body[data-page="restaurant"] .availability-note,
  body[data-page="restaurant"] .availability-result,
  body[data-page="restaurant"] .availability-scroll {
    grid-column: 2;
    padding-left: calc(48px - var(--resv-trim));
    border-left: 1px solid var(--color-line);
  }
  body[data-page="restaurant"] .availability-note { grid-row: 2; }
  /* 文の幅の上限(--measure)は外す。右の段の幅で1行に収める(返答の文が途中で折れていた) */
  body[data-page="restaurant"] .availability-note,
  body[data-page="restaurant"] .availability-result { max-width: none; }
  /* 返答は右の段の幅で最長2行(1024〜1200px あたり)。文が出ても表が動かないよう、はじめから2行分 + 上下の余白 6px を取る
     (余白を足さないと、空のときの高さに余白が食われて、1行の文でも表が 12px 下がった) */
  body[data-page="restaurant"] .availability-result {
    grid-row: 3;
    min-height: calc(var(--fs-2) * 1.8 * 2 + 12px);
    margin: 0;
    padding-top: 6px;
    padding-bottom: 6px;
  }
  body[data-page="restaurant"] .availability-scroll {
    grid-row: 4;
    max-width: none;
    margin: 0;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    background: none;
  }
  body[data-page="restaurant"] .availability-table { width: 100%; }
  /* 結末直前の画面は日付が1列だけなので、表を幅いっぱいにすると ○ の枠が横に伸びる。時間の列(約 45px)+ ふだんの日付1列分(残りの7分の1)の幅にして、右は空ける(2026-10-05 オーナー指示) */
  .is-last-logic body[data-page="restaurant"] .availability-table { width: calc(45px + (100% - 45px) / 7); }

  /* 口コミ: 今の形(評点の要約の下に1件ずつ罫で続ける)のまま、要約から最後の1件までを1枚の板に見せる影を、節の格子の2行めから下に敷く */
  body[data-page="restaurant"] #reviews {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  body[data-page="restaurant"] #reviews::before {
    content: "";
    position: absolute;
    z-index: -1;
    grid-row: 2;
    inset: 0;
    box-shadow: var(--shadow-panel-item);
  }
  /* 口コミの集計(評点と棒グラフ)は、ひとまとまりにして板の真ん中に置く。1件ずつの口コミは左寄せのまま
     (2026-10-05 オーナー指示。はじめは左に寄せていて、広い画面では板の右半分が空いていた) */
  body[data-page="restaurant"] .review-summary { justify-content: center; }
  /* 結末直前の画面では口コミを出さない(.is-last-logic #reviews の display: none が、上の格子の指定に負けるので隠し直す) */
  .is-last-logic body[data-page="restaurant"] #reviews { display: none; }
}
/* メニューの2段は 1200px から。1199px 以下はいちばん長い品名が2行に折れるので1段にする */
@media (min-width: 740px) and (max-width: 1199.98px) {
  body[data-page="restaurant"] .menu-list { column-count: 1; padding: 36px 40px 40px; }
  body[data-page="restaurant"] .menu-list h4:nth-of-type(2),
  body[data-page="restaurant"] .menu-list:has(> h4:first-child) h4:nth-of-type(3),
  body[data-page="restaurant"] .menu-list:has(> h4:first-child):has(> h4:nth-of-type(5)) h4:nth-of-type(4) { break-before: auto; }
}

/* ── PC の狭い幅(740〜1023px)の詰め ──
   2026-10-04 オーナー指示で、見た目はスマホと PC の2つに分け、740〜1023px にも PC(暫定解)と同じ見た目を当てた。
   ここでは並びや色は変えず、768px で文字が折れすぎたり切れたりする所の幅と大きさだけを詰める */
@media (min-width: 740px) and (max-width: 1023.98px) {
  /* トップの掲載店舗: 札と営業時間は横に並べると細い列に収まらないので縦に積む */
  body[data-page="index"] .card__body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "name" "tag" "meta" "desc"; }
  body[data-page="index"] .card .tag { justify-self: start; }
  body[data-page="index"] .card .meta { margin-top: 8px; }
  /* トップの島の地図はスマホと同じ形(縦に積む)。スマホだけの塊にある余白と押せる高さを、ここでも当てる。
     地図はスマホと同じく店の一覧と同じ幅にする(ふだんの上限 720px・中央寄せだと、一覧だけが横いっぱいに広がって幅がそろわない) */
  body[data-page="index"] .map-frame { max-width: none; }
  body[data-page="index"] .map-shops { margin-top: 24px; }
  body[data-page="index"] .map-shops a { min-height: 48px; }
  body[data-page="index"] .access { margin-top: 24px; }
  /* 掲載店舗一覧と検索結果の店: 4項目は評点・予算・営業時間の3つにする(定休日は店舗ページで見られる。
     はじめは評点と予算の2つ。2026-10-05 オーナー指示で営業時間まで)。
     列の幅は中身の長さに合わせて割り振る(折らないときの幅は、書体が Noto の今 評点 88〜95px・予算 約119px・営業時間 約87px。
     禅のころは 83〜89px・約117px・約76px)。
     掲載店舗一覧は評点の左に 16px の余白があるので、評点を広めにする(740px での余りは、禅のころはどの項目も 8px 以上。
     Noto の今は営業時間が約 0.5px しか余らない)。
     検索結果の店は説明の左右の余白が 44px のままで欄が狭いので、項目の間を 24px から 16px に詰めた(同日オーナー指示)。
     そのあと書体を替えて、下の比と間にした(740px での余りは 評点 約6px・予算 約4px・営業時間 約3px)。
     値の長さや文字の大きさを変えたら、740px で1行に収まるか測り直す */
  body[data-page="restaurants"] .shop-list__facts { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.3fr) minmax(0, 0.9fr); }
  /* 検索結果の店の比と間は 1 : 1.3 : 0.95・12px(はじめは 1 : 1.35 : 0.85・16px)。書体を Noto Sans JP にして数字が広くなり、
     営業時間「19:00〜24:00」が 75 → 86.6px になって 740〜779px で2行に折れたので、2026-10-10 オーナー指示で営業時間の欄を広げた */
  body[data-page="search"] .shop-list__facts { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.95fr); column-gap: 12px; }
  body[data-page="restaurants"] .shop-list__facts > div:nth-child(4),
  body[data-page="search"] .shop-list__facts > div:nth-child(4) { display: none; }
  /* 掲載店舗一覧: 狭めていくとき、まず説明の左右の白い余白を 44px から 16px まで減らし、写真(304px)と説明の文の幅(520px)は 1023px のときのまま保つ。
     余白が 16px になったら(板の幅 856px、画面 約 967px)、そこから写真と説明の文を同じ割合(304 : 520)で縮める(2026-10-05 オーナー指示。
     はじめは余白の下限 36px で作り、同日 16px にした)。
     写真の列は min(304px, (板 − 余白 32px) × 304/824)、余白は説明の欄の幅から文の幅 520px を引いた残りの半分(16〜44px)。
     説明の欄の余白の % は、欄の幅(格子の区画の幅)に対する割合。検索結果の店は今のまま */
  body[data-page="restaurants"] .shop-list__item { grid-template-columns: min(304px, calc((100% - 32px) * 304 / 824)) minmax(0, 1fr); }
  body[data-page="restaurants"] .shop-list__item:nth-child(even) { grid-template-columns: minmax(0, 1fr) min(304px, calc((100% - 32px) * 304 / 824)); }
  body[data-page="restaurants"] .shop-list__body {
    padding-left: clamp(16px, calc((100% - 520px) / 2), 44px);
    padding-right: clamp(16px, calc((100% - 520px) / 2), 44px);
  }
  /* お知らせ一覧と検索結果のお知らせ: 日付の列と左右の余白を詰めて、題名の列を広げる */
  body[data-page="news"] .notice--linked,
  body[data-page="search"] .notice--linked,
  body[data-page="news"] .notice--linked:first-of-type,
  body[data-page="search"] .notice--linked:first-of-type,
  body[data-page="news"] .notice--linked:last-of-type,
  body[data-page="search"] .notice--linked:last-of-type {
    grid-template-columns: 150px minmax(0, 1fr);
    column-gap: 24px;
    padding-left: 24px;
    padding-right: 64px;
  }
  body[data-page="news"] .notice--linked::after,
  body[data-page="search"] .notice--linked::after { right: 28px; }
  /* お知らせ一覧と検索結果のお知らせは、日付を左の列に置いたまま、740px では日付の列と2つの間を詰めて題名を1行に収め、
     そこから幅が広がるにつれて、日付と題名の間・題名の欄と「＞」の間の2つの空きを同じ速さで広げる。
     それぞれ PC(1024px 以上)の空きに届いたらそこで止める(2026-10-05 オーナー指示)。
     - 速さは、画面幅 1px につき 128/284 px(日付側の空きが 1024px でちょうど PC の値に届く速さ。284 = 1024 − 740)
     - 日付側(日付の列 + 間): 97 + 7 → 200 + 32 で 128px 広がり、1024px で止まる(はじめは 88 + 16。書体を Noto Sans JP にして
       日付「2025年12月30日」が 86.7 → 96px に広がり、740〜760px で2行に折れたので、2026-10-10 オーナー指示で合計は変えずに
       740px の日付の列を 9px 広げ、間を 9px 詰めた。題名の位置は変わらない。日付の字の大きさや書き方を変えたら 740px で測り直す)
     - 「＞」側(右の余白 − 「＞」の位置): 24 → 56 で 32px 広がり、約 811px で止まる
     - 外側(左の余白 24 → 40px・「＞」の位置 16 → 40px)は、1024px で PC の値に届くよう幅に比例して広げる
     100vw は縦のスクロールバー(Windows で 15px)を除いた幅になるので、740px の窓で 0 になるよう 725px を引き、
     clamp で 740px の値より小さく・PC の値より大きくならないよう止める(スクロールバーのない端末では少し早く止まる)。
     長さどうしの割り算は古いブラウザで効かないので使わない。
     740px で題名の列は約 460px(スクロールバーの分を除く)、いちばん長い題名は 438px(題名の字 17.5px のとき)。「＞」側が止まるまでは題名の列がわずかに
     (約 3px)狭まるが、その後は広がる。題名を長くしたら 740px と 811px(スクロールバーが幅を取らない画面では 796px)で測り直す。
     検索結果のお知らせも同じ(はじめは上の 150px・24px・64px のままにしていた。2026-10-05 オーナー指示でそろえた) */
  body[data-page="news"] .notice--linked,
  body[data-page="search"] .notice--linked,
  body[data-page="news"] .notice--linked:first-of-type,
  body[data-page="search"] .notice--linked:first-of-type,
  body[data-page="news"] .notice--linked:last-of-type,
  body[data-page="search"] .notice--linked:last-of-type {
    grid-template-columns: clamp(97px, calc(97px + (100vw - 725px) * 103 / 284), 200px) minmax(0, 1fr);
    column-gap: clamp(7px, calc(7px + (100vw - 725px) * 25 / 284), 32px);
    padding-left: clamp(24px, calc(24px + (100vw - 725px) * 16 / 284), 40px);
    padding-right: calc(clamp(16px, calc(16px + (100vw - 725px) * 24 / 284), 40px) + 24px + clamp(0px, calc((100vw - 725px) * 128 / 284), 32px));
  }
  body[data-page="news"] .notice--linked::after,
  body[data-page="search"] .notice--linked::after { right: clamp(16px, calc(16px + (100vw - 725px) * 24 / 284), 40px); }
  /* お知らせの記事と読み物の白い板: 外の茶色の左右を、1024px の 48px から幅に合わせて少しずつ縮め、740px で 32px にする
     (2026-10-05 オーナー指示。ほかのページとヘッダーの余白(--gutter 48px)は変えず、板だけを左右に負のマージンで広げる)。
     --article-bleed は板を片側に広げる量で、740px で 16px、1024px で 0。100vw はスクロールバーを除いた幅なので 725px を引く(上のお知らせ一覧と同じ)。
     板の中は、本文と題名の下の線の幅を 1023px のときの 728px に保ったまま、まず白い余白を 92px から削る。
     余白が 32px(740px の茶色と同じ)まで詰まったら(約 875px)、そこから初めて本文と線を縮める(740px で約 597px。同日オーナー指示)。
     % は板を広げる前の外の幅に対する割合なので、広げた分(--article-bleed × 2)を足して板の幅にする。
     本文の段落は今までどおり 720px まで */
  body[data-page="news"] .notice--article {
    --article-bleed: clamp(0px, calc(16px - (100vw - 725px) * 16 / 284), 16px);
    margin-left: calc(var(--article-bleed) * -1);
    margin-right: calc(var(--article-bleed) * -1);
    padding-left: clamp(32px, calc((100% - 728px) / 2 + var(--article-bleed)), 92px);
    padding-right: clamp(32px, calc((100% - 728px) / 2 + var(--article-bleed)), 92px);
  }
  /* 最初のお知らせ画面(intro.html)の白い板も、お知らせの記事と同じ減り方にする(2026-10-06 オーナー指示。
     はじめは外の茶色 48px・内側 92px のままで、768px で文の幅が 473px まで細くなり、題名も 904px まで2行に折れていた) */
  .intro-page .notice {
    --article-bleed: clamp(0px, calc(16px - (100vw - 725px) * 16 / 284), 16px);
    margin-left: calc(var(--article-bleed) * -1);
    margin-right: calc(var(--article-bleed) * -1);
    padding-left: clamp(32px, calc((100% - 728px) / 2 + var(--article-bleed)), 92px);
    padding-right: clamp(32px, calc((100% - 728px) / 2 + var(--article-bleed)), 92px);
  }
  /* メッセージ(結末の画面は除く)も、お知らせの記事と同じ減り方にする(2026-10-05 オーナー指示)。
     - 白い板(届いたメッセージの一覧と「ご予約が完了しました」)の外の茶色は、1024px の 48px から縮めて 740px で 32px
     - 一覧の行と本文の内側は、文字の幅を 1023px のときの 728px に保ったまま、まず白い余白を 92px から削り、
       32px まで詰まったら(約 885px)、そこから初めて文字の幅を縮める(お知らせの記事と同じ)。開閉の矢印は字の 24px 手前だが、
       板の端から 12px より左には寄せない(32px まで詰まった幅では 8px になり左に寄って見えたので、2026-10-09 オーナー指示。
       その幅だけ矢印と字の間は 20px。一度は字ごと 36px に下げたが、記事と同じ位置にそろえるため 32px に戻した)
     - 「ご予約が完了しました」の内側の余白は今のまま。結末の手紙の行(.message--final)も、はじめは前の余白のまま残したが、
       同日オーナー指示でほかの行と同じにした
     行と本文の % は一覧の板の幅(広げた後)に対する割合なので、広げた分を足さなくてよい */
  html:not(.is-final) body[data-page="messages"] .message-list:has(> .message),
  html:not(.is-final) body[data-page="messages"] .message-notice {
    --message-bleed: clamp(0px, calc(16px - (100vw - 725px) * 16 / 284), 16px);
    margin-left: calc(var(--message-bleed) * -1);
    margin-right: calc(var(--message-bleed) * -1);
  }
  html:not(.is-final) body[data-page="messages"] .message__summary,
  html:not(.is-final) body[data-page="messages"] .message__body {
    padding-left: clamp(32px, calc((100% - 728px) / 2), 92px);
    padding-right: clamp(32px, calc((100% - 728px) / 2), 92px);
  }
  html:not(.is-final) body[data-page="messages"] .message__summary::before { left: max(12px, calc(clamp(32px, calc((100% - 728px) / 2), 92px) - 24px)); }
  /* 店舗ページ AMA(案4-2 修正2):
     - 要点の板は3つの値が1行に入るよう、板と欄の内側の余白を詰める
     - アクセスは地図を幅いっぱいにして、住所などの札を地図の下に置く(右に重ねると店の印に札がかぶる)
     - ご予約状況は欄とボタンの下に注記・返答・表を回す(メニューを1段にする指定は「店舗ページ AMA(PC)」の塊の終わり) */
  body[data-page="restaurant"] .shop-facts { padding: 24px; }
  body[data-page="restaurant"] .shop-facts__item { padding: 0 16px; }
  body[data-page="restaurant"] .shop-facts__item:first-child { padding-left: 0; }
  body[data-page="restaurant"] .shop-facts__item:last-child { padding-right: 0; }
  body[data-page="restaurant"] .shop-map { height: auto; padding-bottom: 40px; }
  body[data-page="restaurant"] .shop-map__figure { width: 100%; height: auto; margin-left: 0; }
  /* 札は地図の下。左右に 100px の海の色を取り、真ん中に浮かせる(はじめは面の幅いっぱいで左右の端に付いていた。2026-10-05 オーナー指示で 35px → 80px → 100px) */
  body[data-page="restaurant"] .shop-map__body { position: static; width: auto; margin: 24px 100px 0; transform: none; }
  /* 札の幅は 740px のときの大きさ(面 629px − 左右 100px = 429px)のまま 1023px まで保ち、面の真ん中に置く
     (PC の札が 400px で決まっているのと同じ考え方。2026-10-09 オーナー指示) */
  body[data-page="restaurant"] .shop-map__body { width: 429px; margin-left: auto; margin-right: auto; }
  /* 地図の下に置いた札は、すぐ上の店舗情報の板と同じ余白にする(項目名 170px・間 28px・板の上下 8px・同じ薄い影)。
     値の書き出しが店舗情報とそろう(2026-10-05 オーナー指示) */
  body[data-page="restaurant"] .shop-map__body { position: relative; padding: 8px 28px; }  /* 影はやめ、ふちをぼかす(2026-10-07。上の「ふちに向かって」の注記) */
  /* relative にすると PC の right: 35px・top: 50% が効いて、札が左へ 35px ずれる(2026-10-09 オーナー指摘)。消して左右 100px の真ん中に戻す */
  body[data-page="restaurant"] .shop-map__body { top: auto; right: auto; }
  /* 項目名は 120px(170px から。住所と値の間を詰める)。2026-10-09 オーナー指示で、上の店舗情報の板との書き出しのそろえはやめた。
     文字の左の余白は、いちばん狭い 740px でいちばん長い行(住所。約 273px)が札のほぼ真ん中に来る 74px にし、
     それより広い幅も同じ値のまま(同日オーナー指示) */
  body[data-page="restaurant"] .shop-map__body { padding-left: 74px; }
  body[data-page="restaurant"] .shop-map__row { gap: 28px; }
  body[data-page="restaurant"] .shop-map__label { width: 120px; }
  body[data-page="restaurant"] #reservation { grid-template-columns: minmax(0, 1fr); --resv-trim: 0px; }  /* 1段組みなので、板の左右の余白は減らさない */
  /* 板の中身(欄・ボタン・注記・表)の幅は、740px のときの 564px(画面 740 − 左右の --gutter 48 × 2 − 板の左右の余白 40 × 2)で止め、
     広げた分は板の左右の余白に半分ずつ回す(880px で 110px、1023px で約 182px。2026-10-05 オーナー指示。はじめは余白 40px のまま中身が広がり、
     選択欄と「空席を確認する」が大きくなっていた)。白い板と見出しは今までどおり節の幅いっぱい(余白の分だけ外へ戻す)。
     --gutter を変えたら 564px も測り直す */
  body[data-page="restaurant"] #reservation {
    --resv-pad: max(40px, calc((100cqw - 564px) / 2));
    padding-left: var(--resv-pad);
    padding-right: var(--resv-pad);
  }
  body[data-page="restaurant"] #reservation > h2 {
    margin-left: calc(var(--resv-pad) * -1);
    margin-right: calc(var(--resv-pad) * -1);
  }
  body[data-page="restaurant"] #reservation::after {
    left: calc(var(--resv-pad) * -1);
    right: calc(var(--resv-pad) * -1);
  }
  body[data-page="restaurant"] #reservation::before,
  body[data-page="restaurant"] #reservation::after { grid-row: 2 / 6; }
  body[data-page="restaurant"] .availability-search { grid-row: 2; }
  body[data-page="restaurant"] .availability-note,
  body[data-page="restaurant"] .availability-result,
  body[data-page="restaurant"] .availability-scroll { grid-column: 1; padding-left: 0; border-left: none; }
  body[data-page="restaurant"] .availability-note { grid-row: 3; padding-top: 28px; }
  body[data-page="restaurant"] .availability-result { grid-row: 4; }
  body[data-page="restaurant"] .availability-scroll { grid-row: 5; }
  /* フッター(全ページ): 左右の余白を 72px(本文の余白の 1.5 倍)から 12px に詰め、注記の一文を 1 行の上限(44em)で切らずに、
     入る幅では1文1行にする(2026-10-07 オーナー指示。はじめはどの幅でも1文が2行ずつの4行。一度 24px にし、
     2つめの文「物語の演出上、…」(約 698px)が 740px でも折れない所まで詰めた。740px の窓で約 3px 余る。スマホの左右の余白と同じ値)。
     字が 11.25px のままだと、いちばん長い1つめの文(約 731px)は窓が 771px からでないと1行に入らない。そのため下で字を 10.5px にし、740px から2行にしている
     (2026-10-07 に文頭を「本サイトおよび本コンテンツは」から「本サイトは」に縮めた。それまでは約 833px で 872px から2行)。
     入らない幅では、1つめの文は「フィクション作品であり、」の後ろで折れる。
     行の頭は今までどおり必ず文の頭。注記の文や字の大きさを変えたら、2行になり始める幅を測り直す(design-workooter-2lines	rial.js) */
  .site-footer__inner { padding-left: 12px; padding-right: 12px; }
  .site-footer__notice span { max-width: none; }
  /* 注記の字は 11.25px(0.75rem)から 10.5px にし、740px から2行に収める(2026-10-07 オーナー指示)。1つめの文は約 683px になり、
     740px の窓(スクロールバーを除いて 725px、左右の余白 12px ずつ)で約 18px 余る。10.75px だと約 2px しか余らず、倍率などで折れうるのでやめた */
  p.site-footer__notice { font-size: 10.5px; }
}

/* =========================================================
   スマホ版 暫定解20261005(739px 以下)
   Artifact「【トップ】あたみニュース参考案_20261004」の「スマホ版」の列(トップは案C「横にめくる」を採用)を、
   店舗ページ以外のページに当てる(2026-10-05 オーナー指示)。PC の暫定解20261004 の道具(縞・波・丸い写真・帯の上の押し場所・
   「＞」の行・ずらした面)をスマホの幅に縮めたもの。HTML は変えず、CSS だけで当てる。
   740px 以上(PC)には効かない。店舗ページ(data-page="restaurant"。RESTAURANT YAMANO も)と結末の画面(.is-final)にも効かない。
   ヘッダー・フッター・文面・リンク・並び順・色・書体・文字の大きさは今のスマホのまま。
   今のスマホの指定より1段強くするため、どれも html:not(.is-final) から書く(ファイルの後ろに置くだけでは負ける指定がある)。
   波の形は PC と同じ絵を横幅いっぱいに伸ばす。縞の色は :root の --color-stripe-* を使う
   ========================================================= */
@media (max-width: 739.98px) {
  html:not(.is-final) body {
    /* 波の形。不透明な所が残る。PC の表紙(1440×44)・掲載店舗の帯(1440×28)・お知らせの帯(1440×28)・中のページの帯(1440×20)と同じ絵 */
    --sp-wave-hero: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 44' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V12C1290 12 1100 36 920 36C740 36 560 8 380 8C250 8 150 12 0 22Z'/%3E%3C/svg%3E");
    --sp-wave-shops: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V10C1200 26 960 24 720 12C480 0 240 0 0 14Z'/%3E%3C/svg%3E");
    --sp-wave-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 28' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V16C1200 0 960 2 720 14C480 26 240 26 0 10Z'/%3E%3C/svg%3E");
    --sp-wave-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 20' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V7C1200 19 960 18 720 9C480 0 240 0 0 10Z'/%3E%3C/svg%3E");
    --sp-hero-wave: 20px;     /* 表紙の下の端の波の深さ(PC は 44px) */
    --sp-more-h: 136px;       /* トップの「一覧へ」の帯の高さ(上 43 + 押し場所 40 + 下 53、下の 18 は波。押し場所を 48px から 40px にしたとき、帯の高さは変えずに上下の縞を広げた) */
    --sp-shadow-panel: 0 2px 14px rgba(var(--rgb-shade-3), 0.08);  /* PC の白い板と同じ影 */
  }
  /* 行頭禁則: 行の頭に小さい仮名(っ・ょ など)・長音(ー)・句読点が来ないようにする(2026-10-06 オーナー指示。PC は今のまま)。
     文節で折る指定(word-break: auto-phrase)が付いている所はそのまま */
  html:not(.is-final) body { line-break: strict; }

  /* ── トップ ── */
  html:not(.is-final) body[data-page="index"] main { overflow-x: clip; }

  /* 表紙: PC と同じく写真を開いた画面いっぱいに見せ、島の名と前書きを白の縦書きで重ねる。下の端は写真そのものを波の形に切り抜く。
     高さ = 画面 − ヘッダー + 波の深さ(8px は --header-height に足してある着地の余白を戻す分。PC の表紙と同じ)。
     文字の大きさは 13.5px を上限に、画面の幅(島の名＋前書き8列＋間で 24.5 字分 + 左右 42px)と
     高さ(列の長さ 38 字分 + 上下 112px)のどちらにも収まる大きさにする(下限 12.5px。それでも高さが足りないときは表紙が伸びる)。
     24.5 字分と 42px(左右の余白 12px × 2 + 島の名と前書きの間 18px)は、島の名が 4.8 字幅・間が 18px だったときの値。
     島の名を 3.6 字幅に縮め(下の .hero__title)、間を 27px に広げた(2026-10-05 オーナー指示)あとも、前書きの大きさを変えないため据え置いている
     (式の上では、島の名を縮めた 1.2 字分から、間を広げた 9px を引いた分だけ幅に余裕がある)。
     暗くする膜は、写真全体に同じ濃さでかける(PC と同じ。下の .hero::before)。
     下の端は、上の塗りつぶしと波の絵を 1px だけ重ねる(PC は 4px)。スマホの波は浅く(20px)、いちばん高い所が上から 3.6px なので、
     4px 重ねると波の頭が平らに切れて角ができる(2026-10-05 オーナー指摘)。波を浅くしたら重なりも測り直す。
     縦書きは上下の真ん中から 24px 下げる(上の余白 40 → 64px、下の余白 40 → 16px + 波。2026-10-05 オーナー指示。PC も同じだけ下げた)。
     上下の余白の合計は変えないので、文字の大きさの式(上下 112px)はそのまま */
  html:not(.is-final) body[data-page="index"] .hero {
    --hero-fs: clamp(12.5px, min(calc((100vw - 42px) / 24.5), calc((100svh - var(--header-height) - 112px) / 38)), 13.5px);
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 27px;  /* 島の名と前書きの間(はじめは 18px。2026-10-05 オーナー指示で 1.5 倍に広げた) */
    min-height: calc(100svh - var(--header-height) + 8px + var(--sp-hero-wave));
    padding: 64px 12px calc(16px + var(--sp-hero-wave));
    background: var(--hero-image) var(--hero-focus) / cover no-repeat;
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--sp-hero-wave) + 1px) no-repeat, var(--sp-wave-hero) bottom / 100% var(--sp-hero-wave) no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - var(--sp-hero-wave) + 1px) no-repeat, var(--sp-wave-hero) bottom / 100% var(--sp-hero-wave) no-repeat;
  }
  /* 膜は写真全体に同じ濃さ(0.62。PC と同じ値)。はじめは左端 0.42 から 75% の所の 0.66 まで濃くなる坂だった
     (2026-10-05 オーナー指示で写真全体を同じ濃さにした) */
  html:not(.is-final) body[data-page="index"] .hero::before {
    inset: 0;
    height: auto;
    background: rgba(var(--rgb-shade), 0.62);
  }
  /* 島の名。今のスマホでは隠していたが、PC に合わせて出す(Artifact の案C)。
     大きさは表紙の文字の 3.6 倍(375px で 48.6px。はじめは 4.8 倍の 64.8px で、2026-10-05 オーナー指示で 4 倍、さらに 3.6 倍に縮めた) */
  html:not(.is-final) body[data-page="index"] .hero__title {
    position: relative;
    display: block;
    margin: 0;
    writing-mode: vertical-rl;
    height: calc(var(--hero-fs) * 38);
    font-family: var(--font-serif);
    font-size: calc(var(--hero-fs) * 3.6);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.12em;
    color: #f7f2e8;
  }
  html:not(.is-final) body[data-page="index"] .hero__story {
    height: calc(var(--hero-fs) * 38);
    margin: 0;
    gap: 2.4em;
    font-size: var(--hero-fs);
    color: #f7f2e8;
  }
  html:not(.is-final) body[data-page="index"] .hero__story p { line-height: 2; letter-spacing: 0.05em; }
  /* 前書きの字は「一律 1px 小さくする」塊で 14px に決めてあるので、そのままだと --hero-fs を縮めても字は縮まず、
     いちばん長い列(34字)が列の高さに入りきらずに折れる(幅 360px で起きた)。14px を上限に --hero-fs と同じ割合で縮める
     (幅 390px では --hero-fs 13.5px で 14px のまま)。「一律」の塊と同じ強さなので、この塊が後ろにあることで勝つ */
  html:not(.is-final):not(#_) body[data-page="index"] div.hero__story > p:nth-child(n) { font-size: min(14px, var(--hero-fs) * 14 / 13.5); }
  /* SCROLL の文字と縦線は、スマホでは出さない(2026-10-05 オーナー指示。上の「.hero__scroll-cue」の 740px 未満の指定のまま隠れる) */

  /* 3つの節は生成りの地にそのまま置く(お知らせの白い地もやめる) */
  html:not(.is-final) body[data-page="index"] main > .section--band {
    position: relative;
    margin: 0;
    padding: 56px 0 calc(40px + var(--sp-more-h));
    background: none;
    border-radius: 0;
  }
  /* 下の 72px はフッターの手前の空き(どのページも約 70px にそろえる。2026-10-06 オーナー指示。はじめは 64px。トップのフッターは上の空きなし) */
  html:not(.is-final) body[data-page="index"] main > .section:has(.map-access) { padding: 56px 0 72px; }

  /* 見出し: 左寄せ。店舗ページの見出しと同じ数字にする(2026-10-06 オーナー指示。はじめは文字が並びの左端・線が並びの左端 + 168px まで)。
     文字は画面の端から 16px(481px からは文字の列 --gutter)。下の線は画面の左の端から、文字の始まり + 140px まで(PC は 240px) */
  html:not(.is-final) body[data-page="index"] .section-heading { display: block; margin-bottom: 32px; }
  html:not(.is-final) body[data-page="index"] .section-heading h2 { padding-left: max(0px, calc(16px - var(--gutter))); letter-spacing: 0.16em; }
  html:not(.is-final) body[data-page="index"] .section-heading::after {
    content: "";
    display: block;
    width: calc(max(var(--gutter), 16px) + 140px);
    height: 2px;
    margin-top: 14px;
    margin-left: calc(var(--gutter) * -1);
    background: var(--color-dot);
  }

  /* 「掲載店舗一覧へ」「お知らせ一覧へ」: 見出しの横のリンクを、節の下の端から端までの縞の帯(掲載店舗は砂、お知らせは海)の上へ移す。
     白い押し場所 + 右の緑の四角の矢印(40px。はじめは PC と同じ 48px で、2026-10-05 オーナー指示で形を保ったまま縮めた)。
     角は丸めない(PC と同じ)。帯の下の端は波 */
  html:not(.is-final) body[data-page="index"] .section:has(.card-grid)::after,
  html:not(.is-final) body[data-page="index"] .section:has(.notice--linked)::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--sp-more-h);
    background: repeating-linear-gradient(135deg, var(--color-stripe-sand) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat, var(--sp-wave-shops) bottom / 100% 18px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat, var(--sp-wave-shops) bottom / 100% 18px no-repeat;
    pointer-events: none;
  }
  html:not(.is-final) body[data-page="index"] .section:has(.notice--linked)::after {
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat, var(--sp-wave-news) bottom / 100% 18px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 16px) no-repeat, var(--sp-wave-news) bottom / 100% 18px no-repeat;
  }
  /* 押し場所は PC と同じく、2つとも「道しるべ」(.signpost。2026-10-10 オーナー採用)。高さ 40px
     (それまでは白い箱 + 右の藍緑の四角の矢印で 40px。道しるべにしてからいったん 44px にし、同日オーナー指示で 40px に詰めた)。
     見えている縞(帯の上の端から波の線まで)の上下の真ん中に置く。波の線の平均は帯の上から約 126px なので、
     押し場所の真ん中を帯の下から 73px にする(bottom = 73 − 高さ ÷ 2 = 53px)。帯の高さ・波の形・押し場所の高さを変えたら測り直す
     (はじめは 40px の押し場所を下から 60px に置き、真ん中より約 11px 上に寄っていた。2026-10-05 オーナー指摘) */
  html:not(.is-final) body[data-page="index"] .section .more-link {
    position: absolute;
    z-index: 1;
    left: 50%;
    bottom: 53px;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--fs-2);
    font-weight: 700;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  /* 掲載店舗(案C「横にめくる」): 大きな丸い写真(直径 232px)を横にめくる。今までどおり右端に次の店を覗かせる。
     海の色の縞の帯は、並びの後ろに1本(写真の中ほど、直径の 0.39 から 0.495 の高さ)。並びと一緒に動くよう、
     並びの地に background-attachment: local で、めくれる長さいっぱいに敷く。端までめくったとき画面ごと引っぱられないようにする */
  html:not(.is-final) body[data-page="index"] .card-grid {
    gap: 20px;
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2)) 0 90px / 100% 115px no-repeat local;
    overscroll-behavior-x: contain;
  }
  html:not(.is-final) body[data-page="index"] .card {
    flex: 0 0 248px;
    display: block;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* 店は PC と同じ3店(AMA・汐風・ビストロ・マレ)だけ。トラットリア・ヴォンゴラと、5・6店め(Terre et Mer・福来軒。.card--more)は隠す
     (2026-10-12 オーナー指示。それまでは PC の 1400px 以上と同じ4店で、ヴォンゴラを order で最後に回していた)。
     ヴォンゴラは PC と同じく店舗ページへのリンクで指す */
  html:not(.is-final) body[data-page="index"] .card--more { display: none; }
  html:not(.is-final) body[data-page="index"] .card-grid > .card:has(a[href$="restaurant-vongola.html"]) { display: none; }
  /* キーボードの Tab で選ぶ順(と読み上げの順)も、order で並べ替えた見た目の順にする(PC と同じ。2026-10-06 オーナー指示。
     HTML の順のままだと、マレとヴォンゴラが逆に選ばれていた)。対応していないブラウザ(Safari・Firefox)では HTML の順のまま */
  html:not(.is-final) body[data-page="index"] .card-grid { reading-flow: flex-visual; }
  html:not(.is-final) body[data-page="index"] .card__photos { width: 232px; height: 232px; margin: 0 auto; border-radius: 50%; overflow: hidden; }
  html:not(.is-final) body[data-page="index"] .card__photo { display: block; width: 100%; height: 100%; object-fit: cover; }
  html:not(.is-final) body[data-page="index"] .card__body { display: block; padding: 0; }
  html:not(.is-final) body[data-page="index"] .card__title-row { display: block; }
  html:not(.is-final) body[data-page="index"] .card h3 {
    margin: 20px 0 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--color-rule-soft);
    font-size: var(--fs-3);
    line-height: 1.5;
    letter-spacing: 0.04em;
    text-align: center;
  }
  html:not(.is-final) body[data-page="index"] .card .tag { display: inline-block; margin: 12px 10px 0 0; vertical-align: middle; }
  html:not(.is-final) body[data-page="index"] .card .meta { display: inline-block; margin: 12px 0 0; vertical-align: middle; color: var(--color-ink-label); font-variant-numeric: tabular-nums; }
  html:not(.is-final) body[data-page="index"] .card__desc { margin: 8px 0 0; -webkit-line-clamp: 3; }

  /* お知らせ: 右端に「＞」の付いた行。日付は題名の上、本文は1行で切る(PC と同じ)。行の区切りは細い線 */
  html:not(.is-final) body[data-page="index"] .notice--linked,
  html:not(.is-final) body[data-page="index"] .notice--linked:first-of-type,
  html:not(.is-final) body[data-page="index"] .notice--linked:last-of-type {
    display: block;
    margin: 0;
    padding: 18px 32px 18px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-rule-soft);
    border-radius: 0;
  }
  html:not(.is-final) body[data-page="index"] .notice--linked::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--color-ink);
    border-right: 1.5px solid var(--color-ink);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
  }
  html:not(.is-final) body[data-page="index"] .notice--linked time { padding-top: 0; line-height: 1.75; color: var(--color-ink-label); font-variant-numeric: tabular-nums; }
  html:not(.is-final) body[data-page="index"] .notice--linked h3 { margin: 6px 0 0; }
  html:not(.is-final) body[data-page="index"] .notice--linked p {
    display: block;
    margin: 4px 0 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* 島の地図: 下の店の行と同じ幅(並びの幅)で、左右の真ん中に置く。店の行は番号の丸と店名。
     右下にずらして敷いていた砂の色の面は、スマホではやめた(2026-10-06 オーナー指示。PC の 1024px 以上は今までどおり敷く) */
  html:not(.is-final) body[data-page="index"] .map-frame {
    width: 100%;
    overflow: visible;
    border-radius: 0;
    box-shadow: none;
  }
  /* 地図の絵(images/used/map_googlelike.webp 1232×928)の縦横の比。読み込む前から場所を確保して、下の店の行が動かないようにする
     (2026-10-06 オーナー指示)。地図の絵を差し替えたら比も直す */
  html:not(.is-final) body[data-page="index"] .map-frame img { aspect-ratio: 1232 / 928; }
  html:not(.is-final) body[data-page="index"] .map-frame__marker { border-color: var(--color-surface); color: var(--color-surface); }
  html:not(.is-final) body[data-page="index"] .map-shops { margin-top: 36px; border-top: none; }
  html:not(.is-final) body[data-page="index"] .map-shops li { border-bottom: none; }
  html:not(.is-final) body[data-page="index"] .map-shops a {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    min-height: 48px;
    margin: 0;
    padding: 10px 4px;
    border-bottom: 1px solid var(--color-rule-soft);
  }
  html:not(.is-final) body[data-page="index"] .map-shops__num { width: 26px; height: 26px; color: var(--color-surface); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
  html:not(.is-final) body[data-page="index"] .map-shops__name { overflow: hidden; font-size: var(--fs-2); font-weight: 600; line-height: 1.6; letter-spacing: normal; white-space: nowrap; text-overflow: ellipsis; }
  html:not(.is-final) body[data-page="index"] .access { margin-top: 32px; }
  html:not(.is-final) body[data-page="index"] .access h2 { margin: 0 0 6px; font-weight: 500; line-height: 1.6; color: var(--color-ink-label); }
  html:not(.is-final) body[data-page="index"] .access p { margin: 0; font-family: var(--font-serif); font-size: var(--fs-2); line-height: 1.85; color: var(--color-ink); }

  /* ── 中のページ ── */

  /* ヘッダーのすぐ下の縞の帯。高さ 40px(PC 80px の半分)、下の端は波。色は PC と同じ:
     掲載店舗一覧と店が出た検索結果は砂、お知らせ(一覧・記事・読み物)とお知らせだけが出た検索結果は海、メッセージは若草。
     最初のお知らせ画面には置かない(PC と同じ) */
  html:not(.is-final) body[data-page="restaurants"] main::before,
  html:not(.is-final) body[data-page="news"] main::before,
  html:not(.is-final) body[data-page="search"] main::before,
  html:not(.is-final) body[data-page="messages"] main::before {
    content: "";
    display: block;
    height: 40px;
    background: repeating-linear-gradient(135deg, var(--color-stripe-sand) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, var(--sp-wave-band) bottom / 100% 14px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, var(--sp-wave-band) bottom / 100% 14px no-repeat;
  }
  html:not(.is-final) body[data-page="news"] main::before,
  html:not(.is-final) body[data-page="search"] main:has(.search-notices)::before {
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
  }
  html:not(.is-final) body[data-page="messages"] main::before {
    background: repeating-linear-gradient(135deg, var(--color-stripe-leaf) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
  }
  /* 検索でしか開けないページに当たった検索結果は黒い赤(PC と同じ。目印は js/search-render.js が付ける data-band="red")。
     検索でしか開けないお知らせ(archive/ の読み物3ページ。body に data-band="red")の帯も同じ(2026-10-10 オーナー指示) */
  html:not(.is-final) body[data-page="search"][data-band="red"] main:not(#_)::before,
  html:not(.is-final) body[data-page="news"][data-band="red"] main:not(#_)::before {
    background: repeating-linear-gradient(135deg, var(--color-stripe-alert) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
  }

  /* ページの見出し: 左寄せ・線なし・字間 0.04em(PC と同じ)。帯から見出しまで 40px、説明文まで 12px */
  html:not(.is-final) body[data-page="restaurants"] .page-header,
  html:not(.is-final) body[data-page="news"] .page-header,
  html:not(.is-final) body[data-page="search"] .page-header,
  html:not(.is-final) body[data-page="messages"] .page-header { padding: 40px 0 32px; }
  html:not(.is-final) body[data-page="restaurants"] .page-header h1,
  html:not(.is-final) body[data-page="news"] .page-header h1,
  html:not(.is-final) body[data-page="search"] .page-header h1,
  html:not(.is-final) body[data-page="messages"] .page-header h1 { margin: 0; letter-spacing: 0.04em; line-height: 1.3; }
  html:not(.is-final) body[data-page="restaurants"] .page-header p,
  html:not(.is-final) body[data-page="news"] .page-header p,
  html:not(.is-final) body[data-page="search"] .page-header p,
  html:not(.is-final) body[data-page="messages"] .page-header p { max-width: none; margin: 12px 0 0; }

  /* 掲載店舗一覧と検索結果の店: 白い板に影。板の中を、上から 店名と札 → 正方形の写真3枚(横に並べる) → 紹介文(3行まで) → 線と評点・予算(夜)
     にする(2026-10-05 オーナー指示。食べログを参考にした Artifact の案4。検索結果の店もそろえる)。場所の行と営業時間は出さない。
     写真の2枚目・3枚目はスマホのために足したもの(一覧は HTML、検索結果は js/puzzle-data.js の morePhotos)で、740px 以上では隠している。
     札は店名の隣。入りきらないとき(360px の検索結果の RESTAURANT YAMANO など)だけ札が次の行へ回る。
     板の後ろの海と若草の色のずらした面は、スマホでは敷かない(一度 右下へ 10px ずらして敷いたが、2026-10-05 オーナー指示で消した。PC は 20px ずらして敷く) */
  html:not(.is-final) body[data-page="restaurants"] .shop-list,
  html:not(.is-final) body[data-page="search"] .shop-list {
    isolation: isolate;
    gap: 28px;
    margin: 0;
    padding: 0 0 56px;
  }
  /* フッターの手前の空きは、どのページもフッターの上の 48px と合わせて約 72px にそろえる(2026-10-06 オーナー指示。はじめは一覧で 104px、検索結果の店で 160px)。
     検索結果で店のあとにお知らせが続くときの、店とお知らせの間(56px)は変えない */
  html:not(.is-final) body[data-page="restaurants"] .shop-list { padding-bottom: 24px; }
  html:not(.is-final) body[data-page="search"] .shop-list:last-child { padding-bottom: 0; }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__item,
  html:not(.is-final) body[data-page="search"] .shop-list__item {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* 板は画面の端から 8px、板の内側の左右も 8px(店舗ページ・お知らせの記事の板とそろえた。2026-10-06 オーナー指示。はじめは端から 12px・内側 14px)。
       481px からは、板は端から 8px のまま、中身を文字の列 --gutter にそろえる。
       下は評点・予算の文字の下から板の下の端までの空き(18px から 3割ほど詰めた。2026-10-05 オーナー指示) */
    margin-left: calc(8px - var(--gutter));
    margin-right: calc(8px - var(--gutter));
    padding: 12px max(8px, calc(var(--gutter) - 8px)) 12px;  /* 上は店名の行の上の空き。店名の行と写真の間(12px)とそろえる(2026-10-07 オーナー指示。はじめは 16px) */
    background: var(--color-surface);
    border-top: none;
    box-shadow: var(--sp-shadow-panel);
  }
  /* 本文の入れ物は外して、店名・写真・紹介文・評点を同じ縦の並びに置き、順番を order で決める(HTML の順は PC と共通のまま) */
  html:not(.is-final) body[data-page="restaurants"] .shop-list__body,
  html:not(.is-final) body[data-page="search"] .shop-list__body { display: contents; }
  /* 店名は板の内側から 8px 右へ寄せ、下の評点の行の書き出し(.shop-list__facts の 1つめの margin-left: 8px)にそろえる。
     札は右の端へ寄せ、板の左右の真ん中を挟んで店名と対にする(札の右の端は板の右から、店名の左の端と同じだけ内側。2026-10-07 オーナー指示。
     はじめは札が店名のすぐ右で、店名は写真・紹介文と同じ板の内側の端から始まっていた)。評点の字下げを変えたら、ここも合わせる。
     札はどの店も店名と同じ行に置く。入りきらないときは札を次の行へ落とさず、店名のほうを2行に折り、札は店名の上下の真ん中に置く
     (2026-10-07 オーナー指示。はじめは検索結果の RESTAURANT YAMANO だけ札が次の行へ回っていた。今は YAMANO の札の「・掲載終了」を
     480px 以下で隠して「閉店済み」だけにする(.tag__more)ので、340px 以上ではどの店も店名が1行に収まる)。
     店名と札の間は、いちばん詰まったとき 8px(340px のトラットリア・ヴォンゴラで約 9px 空く。店名の字を大きくしたら 340px で測り直す) */
  html:not(.is-final) body[data-page="restaurants"] .shop-list__title,
  html:not(.is-final) body[data-page="search"] .shop-list__title { order: 1; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 0; padding: 0 8px; }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__title .tag,
  html:not(.is-final) body[data-page="search"] .shop-list__title .tag { flex-shrink: 0; margin-left: auto; white-space: nowrap; }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__name,
  html:not(.is-final) body[data-page="search"] .shop-list__name { padding: 0; }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__hours,
  html:not(.is-final) body[data-page="search"] .shop-list__hours { display: none; }
  /* 写真3枚: 板の中の幅いっぱいを3つに分けた正方形。間は 2px */
  html:not(.is-final) body[data-page="restaurants"] .shop-list__photo,
  html:not(.is-final) body[data-page="search"] .shop-list__photo {
    order: 2;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    width: auto;
    height: auto;
    min-height: 0;
    margin-top: 12px;
  }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__photo img,
  html:not(.is-final) body[data-page="search"] .shop-list__photo img {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
  }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__desc,
  html:not(.is-final) body[data-page="search"] .shop-list__desc {
    order: 3;
    display: -webkit-box;
    margin: 12px 0 0;
    max-width: none;
    line-height: 1.8;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  /* 線と評点・予算(夜)。線の色・見出しの色・数字の太さはタブレットと同じ。線の太さは 1px(タブレット・PC は 2px。2026-10-05 オーナー指示で細くした)。
     営業時間・定休日の2項目は出さない。
     評点と予算は横に2列で、間は 32px。評点の左に 8px の空きを取る(横に並ぶ予算も一緒にずれる。線は板の中の幅いっぱいのまま) */
  html:not(.is-final) body[data-page="restaurants"] .shop-list__facts,
  html:not(.is-final) body[data-page="search"] .shop-list__facts { order: 4; display: flex; flex-wrap: wrap; gap: 0 32px; margin: 12px 0 0; border-top: 1px solid var(--color-dot); }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__facts > div,
  html:not(.is-final) body[data-page="search"] .shop-list__facts > div { padding-top: 7px; }  /* 線から評点の文字まで(10px から 3割ほど詰めた。同日オーナー指示) */
  html:not(.is-final) body[data-page="restaurants"] .shop-list__facts > div:first-child,
  html:not(.is-final) body[data-page="search"] .shop-list__facts > div:first-child { margin-left: 8px; }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__facts > div:nth-child(n+3),
  html:not(.is-final) body[data-page="search"] .shop-list__facts > div:nth-child(n+3) { display: none; }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__facts dt,
  html:not(.is-final) body[data-page="search"] .shop-list__facts dt { line-height: 1.6; color: var(--color-ink-label); }
  html:not(.is-final) body[data-page="restaurants"] .shop-list__facts dd,
  html:not(.is-final) body[data-page="search"] .shop-list__facts dd { margin: 2px 0 0; line-height: 1.6; font-variant-numeric: tabular-nums; }

  /* お知らせ一覧: 白い地をやめ、生成りの地に「＞」の付いた行。日付は題名の上、抜粋は2行(PC と同じ)。
     行の区切りは細い線。いちばん上の黒い線はスマホでは出さない(2026-10-05 オーナー指示のまま) */
  html:not(.is-final) body[data-page="news"] .notice--linked,
  html:not(.is-final) body[data-page="news"] .notice--linked:first-of-type {
    margin: 0;
    padding: 22px 32px 24px 0;
    background: none;
    border: none;
    border-bottom: 1px solid var(--color-rule-soft);
    border-radius: 0;
  }
  html:not(.is-final) body[data-page="news"] .notice--linked::before,
  html:not(.is-final) body[data-page="search"] .notice--linked::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 8px;
    width: 9px;
    height: 9px;
    border-top: 1.5px solid var(--color-ink);
    border-right: 1.5px solid var(--color-ink);
    transform: translateY(-50%) rotate(45deg);
    pointer-events: none;
  }
  html:not(.is-final) body[data-page="news"] .notice--linked time,
  html:not(.is-final) body[data-page="search"] .notice--linked time { color: var(--color-ink-label); font-variant-numeric: tabular-nums; }
  html:not(.is-final) body[data-page="news"] main > .section { padding-bottom: 24px; }  /* フッターの上の 48px と合わせて 72px(2026-10-06 オーナー指示。はじめは 56px) */

  /* 検索結果のお知らせ: PC と同じく行の地は白。画面の端から端までの白い行に「＞」 */
  html:not(.is-final) body[data-page="search"] .notice--linked,
  html:not(.is-final) body[data-page="search"] .notice--linked:first-of-type {
    padding-right: 44px;
    border-top: none;
    border-bottom: 1px solid var(--color-rule-soft);
  }
  html:not(.is-final) body[data-page="search"] .notice--linked::before { right: 20px; }
  html:not(.is-final) body[data-page="search"] main > .section { padding-bottom: 24px; }  /* フッターの上の 48px と合わせて 72px(2026-10-06 オーナー指示。はじめは 56px) */

  /* お知らせの記事・読み物: 店舗ページの口コミと同じく、白い板を画面の端から 8px に載せ、板の内側の左右も 8px にする
     (480px までは画面の端から文字まで 16px。481px からは文字を文字の列 --gutter に置き、板の内側はその差の分だけ広げる。
     2026-10-10 オーナー指示。10/7 からは板を敷かず、文字を画面の端から 12px にしていた)。
     帯から板の上の端までは 40px(一覧の見出しと同じ高さ)、板の内側の上は 32px・下は 36px。
     板の下から「お知らせ一覧に戻る」までは下の .back-link。
     パンくず(トップ › お知らせ › 題名)は出さない(2026-10-05 オーナー指示。PC と同じ)。
     「お知らせ一覧に戻る」は PC と同じ白い押し場所 + 左の緑の四角の矢印(48px)。中央に置く。角は丸めない */
  html:not(.is-final) body[data-page="news"] .breadcrumb { display: none; }
  /* 記事の日付の色は一覧の日付と同じ濃さ(--color-ink-label。はじめは薄い --color-ink-faint。2026-10-06 オーナー指示) */
  html:not(.is-final) body[data-page="news"] .notice--article time { color: var(--color-ink-label); }
  /* 記事の写真は読み込む前から場所を確保して、下の文字が動かないようにする(2026-10-06 オーナー指示)。
     上の .notice-figure img の aspect-ratio: auto が HTML の width/height の比を打ち消すので、絵ごとに比を書く。絵を差し替えたら比も直す */
  html:not(.is-final) body[data-page="news"] .notice-figure img[src$="group_photo_mozaiku.webp"] { aspect-ratio: 1448 / 1086; }
  /* 古文書。言い伝えは火事の前(for_denshou)、フーディー賞は火事の後(for_food_prize)の 2 枚で、大きさは同じ */
  html:not(.is-final) body[data-page="news"] .notice-figure img[src$="for_denshou.webp"],
  html:not(.is-final) body[data-page="news"] .notice-figure img[src$="for_food_prize.webp"] { aspect-ratio: 1280 / 976; }
  html:not(.is-final) body[data-page="news"] .notice--article {
    /* 「お知らせのスマホ表示」で画面の端まで広げた板(左右 -var(--gutter)、内側 var(--gutter))を、端から 8px の所まで戻す */
    margin: 40px calc(8px - var(--gutter)) 0;
    padding: 32px max(8px, calc(var(--gutter) - 8px)) 36px;
    background: var(--color-surface);
    box-shadow: var(--sp-shadow-panel);
  }
  /* 言い伝えの引用の箱は、一段沈めた生成りにする(2026-10-07 オーナー指示。板を外して地と同じ色になったときに、生成り(--color-bg)から変えた)。
     2026-10-10 に白い板に戻したときも、この色のまま(同日オーナー指示) */
  html:not(.is-final) body[data-page="news"] .notice--article blockquote { background: var(--color-bg-deep); }
  html:not(.is-final) body[data-page="news"] .back-link { margin: 60px 0 24px; text-align: center; }  /* 上は記事の終わり(署名)から 60px(2026-10-10 オーナー指示で 40px から約1.5倍)。下はフッターの上の 48px と合わせて 72px(2026-10-06 オーナー指示。はじめは 56px) */
  /* 「お知らせ一覧に戻る」は PC と同じ「二重の枠」(.back-link a。2026-10-10 オーナー指示)。高さ 46px
     (それまでは白い箱(幅 192px)+ 左の藍緑の四角の矢印で 40px) */
  html:not(.is-final) body[data-page="news"] .back-link a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-sans);
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--color-ink);
  }

  /* メッセージ: 帯(若草)と見出しだけ。届いたメッセージは今のまま */
  html:not(.is-final) body[data-page="messages"] .message-section { padding-top: 8px; }

  /* 空のとき(検索で見つからない・メッセージがまだ届いていない)の文は、一覧の1件めと同じ高さ(ページの見出しの箱の下 26px)から始める
     (2026-10-06 オーナー指示。はじめは見出しの下の説明文から 100〜110px 離れて間延びしていた) */
  /* 文の下は、ほかのページと同じく、フッターの上の 48px と合わせて約 72px(2026-10-06 オーナー指示)。
     中身が少なく画面が余るときは、フッターが画面の下にあるので、これより広くなる */
  html:not(.is-final) body[data-page="search"] .no-results { padding-top: 0; padding-bottom: 0; }
  html:not(.is-final) body[data-page="search"] .no-results p:first-child { margin-top: 0; }
  html:not(.is-final) body[data-page="search"] .no-results p:last-child { margin-bottom: 0; }
  html:not(.is-final) body[data-page="messages"] .message-empty { margin: 18px 0 24px; padding-top: 0; padding-bottom: 0; }  /* 上は節の上 8px + 18px */
  /* 届いたメッセージの行のあとも、フッターの上の 48px と合わせて 72px(2026-10-06 オーナー指示。はじめは 48px) */
  html:not(.is-final) body[data-page="messages"] .message-list:has(> .message) { margin-bottom: 24px; }

  /* 最初のお知らせ画面のヘッダー(店名だけ): PC と同じく店名を左右の真ん中に置き、下に線を引く(ふつうのページのスマホのヘッダーは線なしのまま)。
     店名は、どのスマホの幅でも 480px までの大きさ(1.4375rem・「尼山原島」との間 10px・字間なし)にそろえる。
     上下の余白は、PC の形(上 22px・下 28px)を店名の大きさの比(1.4375 / 1.75 ≒ 0.82)で縮めた 18px・23px
     (2026-10-11 オーナー指示。それまでは左寄せ・線なし・上 12px・下 14px で、481px からは店名が PC と同じ大きさだった) */
  html:not(.is-final) body.intro-page .site-header { padding: 18px 0 23px; border-bottom: 1px solid var(--color-line); }
  html:not(.is-final) body.intro-page .site-header__row { justify-content: center; }
  html:not(.is-final) body.intro-page .site-title { font-size: 1.4375rem; flex-wrap: wrap; gap: 0 10px; }
  /* 最初のお知らせ画面: お知らせの記事と同じく、白い板を画面の端から 8px に載せ、板の内側の左右も 8px にする
     (480px までは画面の端から文字まで 16px。481px からは文字を文字の列 --gutter に置き、板の内側はその差の分だけ広げる。
     2026-10-10 オーナー指示。10/7 からは板を敷かず文字を画面の端から 12px に、その前は画面の端まで広げた白い板にしていた)。
     上の「お知らせ」は出さない(PC と同じ。2026-10-07 オーナー指示)。ヘッダーから板の上の端までは 56px(「お知らせ」があった高さ。main の上の余白)、
     板の内側の上は 32px・下は 36px(記事と同じ)。板の下から「閉じる」までは 48px(.intro-actions の上の余白) */
  html:not(.is-final) body.intro-page .intro-label { display: none; }
  html:not(.is-final) body.intro-page .notice {
    /* 「読み物は左右の余白を削る」で画面の端まで広げた板(左右 -var(--gutter)、内側 var(--gutter))を、端から 8px の所まで戻す */
    margin-left: calc(8px - var(--gutter));
    margin-right: calc(8px - var(--gutter));
    padding: 32px max(8px, calc(var(--gutter) - 8px)) 36px;
    background: var(--color-surface);
    box-shadow: var(--sp-shadow-panel);
  }
}

/* =========================================================
   店舗ページ(スマホ。739px 以下)。6店と RESTAURANT YAMANO
   Artifact「【トップ】あたみニュース参考案_20261004」のスマホ版 店舗ページ AMA 案5「案1 を直したもの」を当てる(2026-10-05 オーナー指示)。
   PC の店舗ページ(「店舗ページ(PC)」の塊)の並びと道具を幅に合わせて縮めたもの。HTML は変えず、CSS だけで当てる。
   今のスマホの店舗ページの指定(メニュー・口コミ・予約の表を画面の端まで広げる など)は消さずに、この塊で上書きする。
   ヘッダー・フッター・文面・リンク・色・書体・文字の大きさは今のスマホのまま(予約の欄の文字だけ、見た目を縮める)。
   YAMANO の灰色・結末直前の赤は、色の変数のまま付いてくる。
   上から: 写真(1枚目を幅いっぱい、残りの4枚を正方形で。下に波のついた海の縞)→ 店名・札・評点を中央 → 予算・営業時間・本土からの白い板
   → 店舗情報 → アクセス(海の色の面に地図、その下に住所などの白い札)→ メニュー → ご予約状況 → 口コミ。
   白い板は画面の端から 8px(左右に地の色を見せる)、板の中の文字は画面の端から 16px。
   今のスマホの指定より1段強くするため、どれも html:not(.is-final) から書く(スマホ版 暫定解20261005 と同じ)
   ========================================================= */
@media (max-width: 739.98px) {
  /* 並びの余白は main の中だけで決める(481〜739px のヘッダーとフッターは body の --gutter で左右をそろえているので、動かさない)。
     --gutter: 画面の端から白い板・見出しまで / --shop-text: 画面の端から板の中の文字まで / --board-pad: 白い板の内側の左右 */
  html:not(.is-final) body[data-page="restaurant"] main {
    --gutter: 8px;
    --shop-text: 16px;
    --board-pad: calc(var(--shop-text) - var(--gutter));
    overflow-x: clip;
    padding-bottom: 24px;  /* 口コミの板からフッターまで、フッターの上の 48px と合わせて 72px(どのページも約 70px にそろえる。2026-10-06 オーナー指示) */
  }
  /* 写真の節を店名より上に出す。HTML の順(店名が先)は変えず、見た目の順だけを入れ替える(PC と同じ)。パンくずは出さない(PC と同じ) */
  html:not(.is-final) body[data-page="restaurant"] main > .container { display: flex; flex-direction: column; }
  html:not(.is-final) body[data-page="restaurant"] .breadcrumb { display: none; }

  /* ── 写真: いちばん上の1枚を幅いっぱい(5:2。はじめは 2:1、2026-10-19 オーナー指示で低くした)、そのすぐ下に3枚を正方形で(間 2px)。5枚目は隠す(PC は4枚とも出す)。
     はじめは上が高さ 260px の固定・下が4枚で、狭い幅ほど下の4枚だけが小さくなった(2026-10-19 オーナー指示で今の形に) ── */
  html:not(.is-final) body[data-page="restaurant"] #photos { order: -1; padding-top: 0; }
  html:not(.is-final) body[data-page="restaurant"] #photos > h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html:not(.is-final) body[data-page="restaurant"] .photo-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2px;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* 下の縞の帯は写真より上に描かれるので、写真を一段上げる(PC と同じ) */
  html:not(.is-final) body[data-page="restaurant"] .photo-gallery__item {
    position: relative;
    z-index: 1;
    flex: none;
    width: 100%;
    aspect-ratio: 1 / 1;
  }
  html:not(.is-final) body[data-page="restaurant"] .photo-gallery__item:first-child {
    grid-column: 1 / -1;
    height: auto;
    aspect-ratio: 5 / 2;
    object-position: 50% 50%;
  }
  /* 5枚目から先は隠す(スマホは上1枚 + 正方形3枚。PC は5枚とも出す) */
  html:not(.is-final) body[data-page="restaurant"] .photo-gallery__item:nth-child(n+5) { display: none; }
  /* 3枚(PC は4枚)の下 48px から3枚の下 40px まで、海の縞の帯。下の端はトップの掲載店舗の帯と同じ波(高さ 18px)。
     上の塗りつぶしと波の絵は 1px だけ重ねる(波のいちばん高い所が波の枠の上から約 2px なので、それより多く重ねると頭が平らに切れる) */
  html:not(.is-final) body[data-page="restaurant"] #photos::after {
    content: "";
    display: block;
    height: 88px;
    margin: -48px calc(var(--gutter) * -1) 0;
    background: repeating-linear-gradient(135deg, var(--color-stripe-sea) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2));
    -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat, var(--sp-wave-shops) bottom / 100% 18px no-repeat;
    mask: linear-gradient(#000 0 0) top / 100% calc(100% - 17px) no-repeat, var(--sp-wave-shops) bottom / 100% 18px no-repeat;
  }
  /* RESTAURANT YAMANO(body に data-band="red")は、赤を白黒にした灰色の縞(PC と同じ。2026-10-10 オーナー指示)。Terre et Mer は黒い赤 */
  html:not(.is-final) body[data-page="restaurant"][data-band="red"] #photos::after { background: repeating-linear-gradient(135deg, var(--color-stripe-alert) 0 var(--stripe-w), transparent var(--stripe-w) calc(var(--stripe-w) * 2)); }

  /* ── 店名・札・評点は中央。その下に予算・営業時間・本土からの白い板 ── */
  html:not(.is-final) body[data-page="restaurant"] .shop-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding-top: 28px;
    text-align: center;
  }
  html:not(.is-final) body[data-page="restaurant"] .shop-header__title { flex-direction: column; align-items: center; justify-content: center; gap: 12px; }  /* 札は全店とも店名の下(2026-10-06 オーナー指示。はじめは横に並べ、入らない店だけ下に回っていた) */
  html:not(.is-final) body[data-page="restaurant"] .shop-rating { justify-content: center; gap: 14px; margin-top: 12px; padding-bottom: 0; }
  /* 要点の板は PC と同じ形: 3つを横に並べ、項目名の下に値、間に縦の細い線(線の左右は 12px)。影も PC と同じ。
     列の幅は値の長さに合わせて割り振る(予算がいちばん長い。3等分だと予算が狭い画面で折れる) */
  html:not(.is-final) body[data-page="restaurant"] .shop-facts {
    align-self: stretch;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 0;
    margin-top: 24px;
    padding: 16px var(--board-pad);
    text-align: left;
    box-shadow: var(--shadow-md);
  }
  html:not(.is-final) body[data-page="restaurant"] .shop-facts__item,
  html:not(.is-final) body[data-page="restaurant"] .shop-facts__item:first-child {
    display: block;
    padding: 0 12px;
    border-top: none;
    border-left: 1px solid var(--color-line);
  }
  html:not(.is-final) body[data-page="restaurant"] .shop-facts__item:first-child { padding-left: 0; border-left: none; }
  html:not(.is-final) body[data-page="restaurant"] .shop-facts__item:last-child { padding-right: 0; }
  html:not(.is-final) body[data-page="restaurant"] .shop-facts__label { color: var(--color-ink-label); white-space: nowrap; }
  html:not(.is-final) body[data-page="restaurant"] .shop-facts__value { margin-top: 2px; white-space: nowrap; }

  /* ── 節の見出し: 左寄せ。文字は板の中の文字の書き出しにそろえる。下の線は画面の左の端から、文字の始まり + 140px まで ── */
  html:not(.is-final) body[data-page="restaurant"] .section > h2 { margin: 0 0 32px; padding-left: var(--board-pad); text-align: left; }
  html:not(.is-final) body[data-page="restaurant"] .section > h2::after {
    content: "";
    display: block;
    width: calc(var(--gutter) + var(--board-pad) + 140px);
    height: 2px;
    margin: 14px 0 0 calc((var(--gutter) + var(--board-pad)) * -1);
    background: var(--color-dot);
  }
  /* 節どうしの空き(PC の 120〜128px を半分ほどに) */
  html:not(.is-final) body[data-page="restaurant"] #info { padding-top: 64px; }
  html:not(.is-final) body[data-page="restaurant"] #access,
  html:not(.is-final) body[data-page="restaurant"] #menu,
  html:not(.is-final) body[data-page="restaurant"] #reviews { padding-top: 56px; }

  /* ── 店舗情報: 白い板に影。項目名(64px)と値を横に並べる ── */
  html:not(.is-final) body[data-page="restaurant"] .info-table { padding: 4px var(--board-pad); box-shadow: var(--sp-shadow-panel); }
  html:not(.is-final) body[data-page="restaurant"] .info-table__row { flex-direction: row; align-items: baseline; gap: 16px; padding: 13px 0; }
  html:not(.is-final) body[data-page="restaurant"] .info-table__label { width: 64px; padding-top: 0; color: var(--color-ink-label); }

  /* ── アクセス: 海の色の面(並びの幅)に地図を幅いっぱい、その下に住所などの白い札(札の左右に 48px の海の色) ── */
  html:not(.is-final) body[data-page="restaurant"] .shop-map {
    display: block;
    padding: 0 0 20px;  /* 札の下の海。札の白い地を下へぼかす場所(2026-10-07 オーナー指示で 12 → 20px) */
    background: var(--color-map-sea);
  }
  html:not(.is-final) body[data-page="restaurant"] .shop-map__figure { border-radius: 0; box-shadow: none; }
  html:not(.is-final) body[data-page="restaurant"] .shop-map__figure img { border-radius: 0; aspect-ratio: 1232 / 928; }  /* 比はトップの地図と同じ(読み込む前から場所を確保。地図の絵を差し替えたら比も直す) */
  /* 住所などの白い札は、中身の幅に合わせて縮め、海の色の面の左右の真ん中に置く(2026-10-06 オーナー指示で全体を小さくした。
     はじめは面の左右から 48px ずつ空けた幅・行の上下 7px・左右の内側 14px。住所などの文字も 13 → 12px)。
     2026-10-07 オーナー指示で、札を 16px 上げ(はじめは地図の絵の下から 12px 空けていた)、左右の内側を 12 → 24px に広げた。
     札は地図の絵の下の海に 4px 重なる。重なった所で絵の下に隠れないよう position: relative にする(絵の枠も relative で、後に書いた札が上に描かれる)。
     島のいちばん下(港の防波堤)は絵の高さの約 90% の所で、340px の幅でも札の上端まで約 20px 空く。もっと上げるときは 340px で島に重ならないか見る */
  html:not(.is-final) body[data-page="restaurant"] .shop-map__body {
    position: relative;
    width: fit-content;
    margin: -4px auto 0;
    padding: 2px 36px;  /* 左右は 24 → 36px(2026-10-09 オーナー指示で白を左右に広げた) */
    isolation: isolate;
  }
  /* 白い地はふちに向かって海の色に溶かす(2026-10-07 オーナー指示。はじめは白い板に影 --sp-shadow-panel。曲線の作りは PC の注記)。
     文字の入っている所は真っ白のまま(真っ白は上下が札の内側 6px から、左右が内側 16px から。文字の行は上下 7px・左右 24px から)。
     はみ出しは上 20px・左右 24px・下 20px(消す帯は上下 26px・左右 40px)。上は 340px の幅で島のいちばん下(港の防波堤)に届くところまで。
     下は海の面の下の余白(上の .shop-map の 20px)に収める(大きくすると面の下の地の色に白がにじむ) */
  html:not(.is-final) body[data-page="restaurant"] .shop-map__body::before {
    content: "";
    position: absolute;
    inset: -20px -24px;
    z-index: -1;
    background: var(--color-surface);
    -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 5px, rgba(0,0,0,0.104) 10px, rgba(0,0,0,0.275) 15px, rgba(0,0,0,0.500) 20px, rgba(0,0,0,0.725) 25px, rgba(0,0,0,0.896) 30px, rgba(0,0,0,0.984) 35px, #000 40px, #000 calc(100% - 40px), rgba(0,0,0,0.984) calc(100% - 35px), rgba(0,0,0,0.896) calc(100% - 30px), rgba(0,0,0,0.725) calc(100% - 25px), rgba(0,0,0,0.500) calc(100% - 20px), rgba(0,0,0,0.275) calc(100% - 15px), rgba(0,0,0,0.104) calc(100% - 10px), rgba(0,0,0,0.016) calc(100% - 5px), rgba(0,0,0,0.000) 100%),
                        linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 3.25px, rgba(0,0,0,0.104) 6.5px, rgba(0,0,0,0.275) 9.75px, rgba(0,0,0,0.500) 13px, rgba(0,0,0,0.725) 16.25px, rgba(0,0,0,0.896) 19.5px, rgba(0,0,0,0.984) 22.75px, #000 26px, #000 calc(100% - 26px), rgba(0,0,0,0.984) calc(100% - 22.75px), rgba(0,0,0,0.896) calc(100% - 19.5px), rgba(0,0,0,0.725) calc(100% - 16.25px), rgba(0,0,0,0.500) calc(100% - 13px), rgba(0,0,0,0.275) calc(100% - 9.75px), rgba(0,0,0,0.104) calc(100% - 6.5px), rgba(0,0,0,0.016) calc(100% - 3.25px), rgba(0,0,0,0.000) 100%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 5px, rgba(0,0,0,0.104) 10px, rgba(0,0,0,0.275) 15px, rgba(0,0,0,0.500) 20px, rgba(0,0,0,0.725) 25px, rgba(0,0,0,0.896) 30px, rgba(0,0,0,0.984) 35px, #000 40px, #000 calc(100% - 40px), rgba(0,0,0,0.984) calc(100% - 35px), rgba(0,0,0,0.896) calc(100% - 30px), rgba(0,0,0,0.725) calc(100% - 25px), rgba(0,0,0,0.500) calc(100% - 20px), rgba(0,0,0,0.275) calc(100% - 15px), rgba(0,0,0,0.104) calc(100% - 10px), rgba(0,0,0,0.016) calc(100% - 5px), rgba(0,0,0,0.000) 100%),
                        linear-gradient(to bottom, rgba(0,0,0,0.000) 0px, rgba(0,0,0,0.016) 3.25px, rgba(0,0,0,0.104) 6.5px, rgba(0,0,0,0.275) 9.75px, rgba(0,0,0,0.500) 13px, rgba(0,0,0,0.725) 16.25px, rgba(0,0,0,0.896) 19.5px, rgba(0,0,0,0.984) 22.75px, #000 26px, #000 calc(100% - 26px), rgba(0,0,0,0.984) calc(100% - 22.75px), rgba(0,0,0,0.896) calc(100% - 19.5px), rgba(0,0,0,0.725) calc(100% - 16.25px), rgba(0,0,0,0.500) calc(100% - 13px), rgba(0,0,0,0.275) calc(100% - 9.75px), rgba(0,0,0,0.104) calc(100% - 6.5px), rgba(0,0,0,0.016) calc(100% - 3.25px), rgba(0,0,0,0.000) 100%);
            mask-composite: intersect;
  }
  html:not(.is-final) body[data-page="restaurant"] .shop-map__row,
  html:not(.is-final) body[data-page="restaurant"] .shop-map__row:first-child { flex-direction: row; align-items: baseline; gap: 12px; padding: 5px 0; }
  html:not(.is-final) body[data-page="restaurant"] .shop-map__label { width: 52px; color: var(--color-ink-label); }  /* 4文字の「本土から」が 12.125px で1行に収まる幅(2026-10-24 字を大きくしたので 48px から広げた) */

  /* ── メニュー: 白い板に影(画面の端まで広げない)。見出し(メイン・コース・ドリンク)の色は PC と同じ ── */
  html:not(.is-final) body[data-page="restaurant"] #menu { margin-left: 0; margin-right: 0; }
  html:not(.is-final) body[data-page="restaurant"] .menu-list {
    margin: 0;
    padding: 20px var(--board-pad) 24px;
    background: var(--color-surface);
    box-shadow: var(--sp-shadow-panel);
  }
  html:not(.is-final) body[data-page="restaurant"] .menu-list h4 { color: var(--color-ink-label); }

  /* ── ご予約状況: ほかの節と同じく地の色の上に白い板(欄から表まで)。板の内側の上下は 16px。
     板は節の格子の2〜5行め(欄とボタン → 注記 → 返答 → 表)を基準に置いた飾り(PC と同じ作り) ──
     板の中身(欄・ボタン・注記・返答・表)は、360px のときの形と幅のまま真ん中に置き、広げた分は板の中の左右の余白(--resv-pad)に回す
     (739px まで。2026-10-05 オーナー指示。740〜1023px と同じ考え方。はじめは中身が画面の幅に合わせて広がり、481px からは欄の並びも変わっていた)。
     344px は 360px のときの節の幅(画面 − 板の外 8px × 2)で、中身は 344 − 板の内側 8 × 2 = 328px。100vw はスマホの画面の幅。
     360px より狭い画面は今までどおり(板の内側 --board-pad で中身が縮む) */
  html:not(.is-final) body[data-page="restaurant"] #reservation {
    --resv-pad: max(var(--board-pad), calc((100vw - 344px) / 2));
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 56px var(--resv-pad) 16px;
  }
  html:not(.is-final) body[data-page="restaurant"] #reservation > h2 { margin: 0 calc(var(--resv-pad) * -1) 48px; }  /* 見出しの下 32 + 板の内側 16 */
  html:not(.is-final) body[data-page="restaurant"] #reservation::after {
    content: "";
    position: absolute;
    z-index: -1;
    grid-row: 2 / 6;
    grid-column: 1 / -1;
    inset: -16px calc(var(--resv-pad) * -1);
    background: var(--color-surface);
    box-shadow: var(--sp-shadow-panel);
  }
  html:not(.is-final) body[data-page="restaurant"] .availability-search { grid-row: 2; margin: 0; }
  /* コース・来店時刻の欄は、文字を決まりどおり 16px にしたまま(iPhone で触れたときに画面を拡大させない)、
     欄ごと縮めて文字を 13px に見せる(2026-10-05 オーナー指示)。縮める前の高さ・幅・余白・枠の太さを縮める割合で割っておき、
     縮めたあとに今の欄(高さ 44px・欄の幅いっぱい・文字の左 6px・枠 1px)と同じ大きさになるようにする。
     下の余白を負にして、縮めた分の高さを詰める。矢印はブラウザ既定のままなので一緒に縮む */
  html:not(.is-final) body[data-page="restaurant"] .availability-search select {
    --select-scale: 0.8164;  /* 13.0625 ÷ 16 */
    width: calc(100% / var(--select-scale));
    height: calc(44px / var(--select-scale));
    margin-bottom: calc(44px - 44px / var(--select-scale));
    padding: 0 calc(12px / var(--select-scale)) 0 calc(6px / var(--select-scale));
    border-width: calc(1px / var(--select-scale));
    background-color: var(--color-bg);
    border-color: var(--color-rule-soft);
    transform: scale(var(--select-scale));
    transform-origin: 0 0;
  }
  html:not(.is-final) body[data-page="restaurant"] .availability-note { grid-row: 3; margin: 20px 0 0; }
  /* 返答の文の場所は、はじめから 2 行分 + 上下 4px 取る(文が出ても表が動かない。2026-10-07 オーナー指示。
     はじめは 1 行分で、2 行の返答が出たときだけ表が 1 行分下がった。「。」で改行するので予約可能・満席の文はどちらも 2 行)。
     文は「。」で改行する(js/reservation-render.js の showResult が 1 文ずつ span に分けるので、スマホだけ縦に並べる。2026-10-07 オーナー指示) */
  html:not(.is-final) body[data-page="restaurant"] .availability-result {
    grid-row: 4;
    min-height: calc(var(--fs-2) * 1.8 * 2 + 8px);
    margin: 0;
    padding: 4px 0;
  }
  html:not(.is-final) body[data-page="restaurant"] .availability-result > span { display: block; }
  /* 表の枠は、ほかの節の板の中身と同じ幅(板の左右の端から --board-pad 内側。360px で欄と同じ 328px、481px からは最大 560px の列)にして
     左右対称に置く(真ん中にそろう)。表は枠の幅いっぱいに伸ばし、枠より広いときだけ横に流す。「時間」の列は枠の左の端に貼り付ける
     (日付の列だけが横に流れる)。表の線は欄の左の端から始まり、「時間」の文字は PC と同じくそこから少し内側に来る
     (2026-10-05 オーナー指示。はじめは表を板の左右の端まで広げていて、線が板の端にくっついていた。一度は 360px のときの幅で止めた) */
  html:not(.is-final) body[data-page="restaurant"] .availability-scroll {
    grid-row: 5;
    margin: 0 calc(var(--board-pad) - var(--resv-pad));
    padding: 0;
  }
  /* 結末直前の画面は日付が1列だけなので伸ばさない(伸ばすと ○ の枠が横に伸びる。PC と同じ) */
  html:not(.is-final):not(.is-last-logic) body[data-page="restaurant"] .availability-table { min-width: 100%; }
  /* 伸ばしても「時間」の列は広げず、時刻がちょうど入る幅に決めておく(伸びた分は日付の列に回す。PC と同じ考え方)。
     広げると、ふだんの指定の 82px まで広がり、「時間」の字が線の始まりから離れる。
     幅は 17:00〜24:00 のうちいちばん広い時刻に少しのゆとり(約 0.05em)と、左右の余白(8px + 10px)を足したもの。
     書体が禅角ゴシック New のころは「20:00」(2.2em)に合わせて 2.25em。Noto Sans JP では時刻がどれも 2.5em になり、
     押した後に列が 3px 広がって日付の列が右へずれたので、2026-10-10 オーナー指示で 2.55em にした。
     中身の幅に任せていたときは、時刻を選ぶ前のハイフンと選んだ後で列の幅が約 4px 変わり、日付の列が横にずれた(2026-10-07 オーナー指摘)。
     min-width も要る: 480px 以下では表が枠より広く、列は中身の幅まで縮むので、width だけでは効かない */
  html:not(.is-final):not(.is-last-logic) body[data-page="restaurant"] .availability-table tbody th { width: calc(2.55em + 18px); min-width: calc(2.55em + 18px); }
  html:not(.is-final) body[data-page="restaurant"] .availability-table thead th:first-child,
  html:not(.is-final) body[data-page="restaurant"] .availability-table tbody th { padding-left: 8px; }
  /* 調べる前の伏せ字(ハイフン)は字が 1px 小さい(「一律 1px 小さくする」塊)ので、行の高さを × ・○ のときと同じ
     (字 0.875rem × 行の高さ 1.75)にしておく。字の大きさで行が 1.8px 高くなり、縦線が伸びていた(2026-10-07 オーナー指摘) */
  html:not(.is-final) body[data-page="restaurant"] .availability-table td.is-blank { line-height: calc(0.875rem * 1.75); }

  /* ── 口コミ: 要約から最後の1件までを1枚の白い板に見せる(画面の端まで広げない)。板の影は節の格子の2行め以降に敷く ── */
  html:not(.is-final) body[data-page="restaurant"] #reviews {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-left: 0;
    margin-right: 0;
  }
  /* 結末直前の画面では口コミを出さない(PC と同じ)。上の display: grid が .is-last-logic #reviews の display: none に勝っていたので、
     ここで隠し直す(2026-10-21 オーナー指摘。:not(#_) は上の指定に必ず勝つための重み) */
  html.is-last-logic:not(#_) body[data-page="restaurant"] #reviews { display: none; }
  html:not(.is-final) body[data-page="restaurant"] #reviews::before {
    content: "";
    position: absolute;
    z-index: -1;
    grid-row: 2;  /* 終わりの線を書かないので、節の下の端まで(PC と同じ) */
    inset: 0;
    box-shadow: var(--sp-shadow-panel);
  }
  html:not(.is-final) body[data-page="restaurant"] .review-summary,
  html:not(.is-final) body[data-page="restaurant"] .review {
    margin-left: 0;
    margin-right: 0;
    padding-left: var(--board-pad);
    padding-right: var(--board-pad);
  }
  html:not(.is-final) body[data-page="restaurant"] .review-summary { padding-top: 16px; padding-bottom: 16px; }
}
/* 481〜739px(スマホ横向き)は、ほかのページと同じく板の中の文字の列を最大 560px にして中央に置く。板は画面の端から 8px のまま。
   ご予約状況だけは 360px のときの形のまま(上の #reservation) */
@media (min-width: 481px) and (max-width: 739.98px) {
  html:not(.is-final) body[data-page="restaurant"] main { --shop-text: max(24px, calc((100vw - 560px) / 2)); }
  /* ご予約状況の欄とボタンは 360px のときと同じ並び(コースと来店時刻を横に並べ、ボタンだけ次の行で幅いっぱい)にする。
     ふだんは 481px からボタンが欄の横に並ぶので、.availability-search の 480px までの指定をここでも当てる(2026-10-05 オーナー指示) */
  html:not(.is-final) body[data-page="restaurant"] .availability-search__field { flex: 1 1 0; min-width: 0; }
  html:not(.is-final) body[data-page="restaurant"] .availability-search select { min-width: 0; }
  html:not(.is-final) body[data-page="restaurant"] .availability-search .btn-primary { flex: 1 1 100%; }
  html:not(.is-final) body[data-page="restaurant"] label.availability-search__field:last-of-type { margin-right: 0; }
}