/* ============================================================
   FoodMap Japan — 消費者向けUI v3

   ・純黒を主色にしない。本文は温かい濃色（#2E2320）。
   ・状態は色だけで示さない。必ず「色＋語＋形」の三重で示す。
   ・外部フォント・外部CSS・外部JS・外部画像を読み込まない。外部通信を一切しない。
   ・スマートフォンを主対象にする。PCはその拡張として組む。
   ・一画面につき、主な行動を一つ。
   ============================================================ */

:root {
  --fm-bg: #FBF7F1;
  --fm-bg-sunk: #F1EAE0;
  --fm-surface: #FFFFFF;
  --fm-surface-2: #FDF8F1;

  --fm-ink: #2E2320;
  --fm-ink-2: #6E5B52;
  --fm-ink-3: #7A6A60;
  --fm-on-fill: #FFFFFF;

  --fm-line: #E4D9CC;
  --fm-line-strong: #9A8474;
  --fm-line-ink: #2E2320;

  --fm-primary: #C0371F;
  --fm-primary-hover: #A62D18;
  --fm-link: #0A6357;

  --fm-mango: #F2A413;
  --fm-tomato: #E24A34;
  --fm-lime: #4FA331;
  --fm-lagoon: #0E7466;
  --fm-grape: #7A4FBF;

  --fm-focus: #6B3FBF;
  --fm-focus-halo: #FFFFFF;

  --fm-verify-ink: #0A6357;  --fm-verify-bg: #E4F1EE;
  --fm-ref-ink: #7A5200;     --fm-ref-bg: #FBF0DC;
  --fm-recheck-ink: #A3391C; --fm-recheck-bg: #FBE9E3;
  --fm-noinfo-ink: #6E5B52;  --fm-noinfo-bg: #F2EDE7;
  --fm-selected-bg: #FFEAD1;
  /* ホバー：温かい薄色を一段だけ濃くする。赤などの強い色で全面を塗らない */
  --fm-hover-bg: #F6ECDE;
  --fm-hover-line: #7A6553;

  --fm-r-xs: 6px; --fm-r-sm: 10px; --fm-r-md: 14px;
  --fm-r-lg: 18px; --fm-r-xl: 24px; --fm-r-pill: 999px;

  --fm-e-1: 0 1px 2px rgba(46, 35, 32, .06), 0 1px 3px rgba(46, 35, 32, .08);
  --fm-e-2: 0 2px 4px rgba(46, 35, 32, .06), 0 8px 20px -8px rgba(46, 35, 32, .20);
  --fm-e-3: 0 4px 8px rgba(46, 35, 32, .08), 0 18px 36px -14px rgba(46, 35, 32, .28);
  --fm-e-brand: 4px 4px 0 var(--fm-ink);

  --fm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fm-font-display: var(--fm-font-body);
  --fm-lh: 1.7;
  --fm-cta-space: 96px;   /* 画面下の検索ボタンの高さぶん */
}

html[lang="ja"] {
  --fm-font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --fm-font-display: "Hiragino Maru Gothic ProN", -apple-system, Meiryo, "Yu Gothic UI", "Segoe UI Variable Display", system-ui, sans-serif;
}
html[lang="ko"] {
  --fm-font-body: system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", sans-serif;
  --fm-font-display: var(--fm-font-body); --fm-lh: 1.65;
}
html[lang="zh-Hans"] {
  --fm-font-body: system-ui, -apple-system, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
  --fm-font-display: var(--fm-font-body); --fm-lh: 1.65;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--fm-bg); color: var(--fm-ink);
  font-family: var(--fm-font-body); font-size: 1rem; line-height: var(--fm-lh);
  font-variant-numeric: lining-nums tabular-nums; -webkit-text-size-adjust: 100%;
}
/* 画面下に貼り付くボタンの下へ、選択肢が隠れたまま止まらないようにする */
html { scroll-padding-bottom: var(--fm-cta-space); }
.fm-chip, .fm-pickbtn { scroll-margin-bottom: var(--fm-cta-space); }
/* 2026-09-07 独立レビュー U-1・U-2：**候補の一覧と、足りない入力の案内が、
   画面下に貼り付く検索ボタンの下へ完全に隠れていた。**
   自動で画面を動かすとき、これらが固定ボタンの上に来るようにする。 */
/* 2026-09-08：不足の案内で入力欄へ寄せるとき、固定ボタンに隠れないようにする。 */
.fm-find, .fm-chipgrid,
.fm-need, .fm-hint, .fm-statenote,
#fmPlaceList, #fmCuiList { scroll-margin-bottom: var(--fm-cta-space); }
/* 最後の要素が固定ボタンの裏に残らないよう、検索欄の下に逃げをつくる。 */
.fm-wheres { padding-bottom: 8px; }

/* ---------------------------------------------------------------- フォーカス */
:focus-visible {
  outline: 2px solid transparent; outline-offset: 2px;
  box-shadow: 0 0 0 2px var(--fm-focus-halo), 0 0 0 5px var(--fm-focus);
  border-radius: inherit;
}
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight; box-shadow: none; }
  .fm-badge, .fm-chip, .fm-card, .fm-act { border-width: 1px; border-color: CanvasText; }
}

.fm-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.fm-skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--fm-surface); color: var(--fm-ink);
  border: 2px solid var(--fm-line-ink); border-radius: 0 0 var(--fm-r-sm) 0;
}
.fm-skip:focus { left: 0; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; }

/* ---------------------------------------------------------------- 骨格 */
.fm-wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 40px; }
.fm-awning {
  height: 8px;
  background: repeating-linear-gradient(90deg,
    var(--fm-tomato) 0 24px, var(--fm-mango) 24px 48px,
    var(--fm-lime) 48px 72px, var(--fm-lagoon) 72px 96px, var(--fm-grape) 96px 120px);
}
.fm-header { background: var(--fm-bg); border-bottom: 1px solid var(--fm-line); }
.fm-headrow {
  max-width: 1080px; margin: 0 auto; padding: 6px 16px;
  display: flex; align-items: center; gap: 12px; min-height: 56px;
}
.fm-logo {
  display: inline-flex; flex-direction: column; justify-content: center;
  min-height: 44px; padding: 2px 4px; color: var(--fm-ink); text-decoration: none;
  font-family: var(--fm-font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.2;
  border-radius: var(--fm-r-sm);
}
.fm-logo span { display: block; font-size: .75rem; font-weight: 400; color: var(--fm-ink-2); line-height: 1.4; }
.fm-spacer { flex: 1 1 auto; }

.fm-langwrap { position: relative; }
.fm-langbtn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px;
  background: var(--fm-surface); color: var(--fm-ink);
  border: 2px solid var(--fm-line-strong); border-radius: var(--fm-r-pill);
  font: 700 .8125rem/1 var(--fm-font-body); cursor: pointer;
}
.fm-langbtn:hover { border-color: var(--fm-line-ink); }
.fm-langlist {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--fm-surface); border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-md); box-shadow: var(--fm-e-3);
  padding: 6px; display: flex; flex-direction: column; min-width: 168px;
}
.fm-langlist button {
  display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; width: 100%;
  background: none; border: 0; border-radius: var(--fm-r-sm);
  color: var(--fm-ink); font: 400 .9375rem/1.3 var(--fm-font-body); text-align: left; cursor: pointer;
}
.fm-langlist button:hover { background: var(--fm-surface-2); }
.fm-langlist button[aria-pressed="true"] { font-weight: 700; background: var(--fm-selected-bg); }
.fm-langlist button .fm-mark { width: 1em; }
.fm-langlist button[aria-pressed="true"] .fm-mark::before { content: "✓"; }

main { display: block; }
main:focus { outline: none; }

/* ---------------------------------------------------------------- 見出しの強弱 */
h1 {
  font-family: var(--fm-font-display); font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2rem); line-height: 1.25; margin: 16px 0 6px;
}
h2 { font-family: var(--fm-font-display); font-weight: 700; font-size: 1.125rem; line-height: 1.3; margin: 22px 0 8px; }
h3 { font-family: var(--fm-font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.35; margin: 0; }
p { margin: 0 0 10px; }
.fm-lead { color: var(--fm-ink-2); font-size: .9375rem; margin: 0 0 16px; }
.fm-hint { color: var(--fm-ink-2); font-size: .8125rem; margin: 0 0 8px; }
/* 2026-09-18 初見確認 M-10：記録の中のリンクだけ**ブラウザ既定の青**になっていて、
   「この欄全体の信頼度が下がった」と報告された。サイト共通のリンク色と押し場所の高さを与える。 */
.fm-evlink { display: inline-flex; align-items: center; min-height: 44px;
  color: var(--fm-link); font-size: .875rem; }

/* ---------------------------------------------------------------- 検索フォームの2つの塊 */
.fm-block {
  margin: 0 0 18px; padding: 14px 14px 10px;
  background: var(--fm-surface); border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg); box-shadow: var(--fm-e-1);
}
.fm-blockh { margin: 0 0 2px; font-size: 1.0625rem; }
.fm-blocksub { margin: 0 0 10px; font-size: .8125rem; color: var(--fm-ink-2); }
/* 足りない塊は、枠と印で示す（色だけに頼らない） */
.fm-block.is-lacking { border-color: var(--fm-mango); border-width: 2px; }
/* FMD-01：**どちらか一つ**が足りないときは、2つの入力をまとめた枠に印を付ける。
   片方だけに付けると「そちらが必須」と読まれる。 */
.fm-wheres.is-lacking {
  border: 2px solid var(--fm-mango); border-radius: var(--fm-r-md);
  padding: 10px 12px; margin-inline: -12px;
}

/* FMD-02：店舗詳細の最下部の戻るは、**電話・公式サイトより強くしない**。
   枠の太さだけでなく、色・影・高さ・文字の大きさもそろえる。 */
.fm-btn.fm-btn-quiet {
  min-height: 44px; padding: 8px 14px; font-size: .8125rem;
  border-color: var(--fm-line-strong); box-shadow: none;
}
.fm-need {
  display: flex; align-items: center; gap: 6px; margin: 0 0 8px;
  font: 700 .8125rem/1.5 var(--fm-font-body); color: var(--fm-recheck-ink);
}
.fm-need::before { content: "▲"; font-size: .75rem; }
.fm-statenote {
  margin: 8px 0 0; font: 700 .8125rem/1.6 var(--fm-font-body); color: var(--fm-ink);
}
/* 2026-09-12 4回目の初見ブラインドレビュー V4-02：
   この一行が**画面で唯一の赤**で、しかも見出しより上にあった。
   赤＋最上部は「あなたの操作は間違っている／危険」の合図に見えるが、
   中身は**取り違えを防ぐための説明**である。**軽い意味を最も強い色で見せない。**
   文は消さない（正本2B-6の要件）。**このサイトが既に持っている「注意」の見た目**
   （左のオレンジの縦線＋本文の濃色＝`.fm-notice`）にそろえ、
   **赤は「主要な行動」だけの色**にする（レビューの対案どおり）。 */
.fm-statenote-warn {
  color: var(--fm-ink); border-left: 4px solid var(--fm-mango);
  background: var(--fm-surface-2); padding: 8px 14px;
  border-radius: 0 var(--fm-r-sm) var(--fm-r-sm) 0; margin: 0 0 14px;
}

/* 選べるもの */
/* 場所と料理は、同じ見た目・同じ操作の部品にする。
   PCでは横に並べ、スマートフォンでは縦に積む。 */
.fm-pickers { display: grid; grid-template-columns: 1fr; gap: 0; }
@media (min-width: 800px) {
  .fm-pickers { grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
  .fm-pickers .fm-block { margin-bottom: 18px; }
}
.fm-fieldname { display: block; font: 700 .8125rem/1.4 var(--fm-font-body); color: var(--fm-ink-2); margin: 6px 0 2px; }
.fm-picker.is-set .fm-fieldname { color: var(--fm-ink); }
.fm-findx {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: grid; place-items: center;
  background: transparent; border: 0; border-radius: 50%; cursor: pointer;
  font: 700 1.125rem/1 var(--fm-font-body); color: var(--fm-ink-2);
}
@media (hover: hover) { .fm-findx:hover { background: var(--fm-bg-sunk); color: var(--fm-ink); } }
.fm-findx:focus-visible { outline: 3px solid var(--fm-focus); outline-offset: 1px; }
.fm-morebtn {
  margin: 10px 0 0; min-height: 44px; padding: 0 14px; cursor: pointer;
  background: var(--fm-surface); border: 2px solid var(--fm-line-strong);
  border-radius: var(--fm-r-pill); font: 700 .8125rem/1.35 var(--fm-font-body); color: var(--fm-ink);
}
@media (hover: hover) { .fm-morebtn:hover { background: var(--fm-hover-bg); border-color: var(--fm-hover-line); } }
.fm-morebtn:active { transform: translateY(1px); }
.fm-morebtn:focus-visible { outline: 3px solid var(--fm-focus); outline-offset: 2px; }

.fm-chipgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 0; }
@media (min-width: 600px) { .fm-chipgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fm-chipwrap { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.fm-chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 6px 14px;
  background: var(--fm-surface); border: 2px solid var(--fm-line-strong);
  border-radius: var(--fm-r-pill); cursor: pointer;
  font: 700 .875rem/1.35 var(--fm-font-body);
}
.fm-chip input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.fm-chip .fm-box {
  flex: none; width: 20px; height: 20px; border: 2px solid var(--fm-line-strong);
  border-radius: var(--fm-r-xs); display: grid; place-items: center; font-size: .8125rem;
}
.fm-chip .fm-ct { flex: 1 1 auto; }
.fm-chip .fm-n { font-weight: 400; font-size: .75rem; color: var(--fm-ink-2); }
@media (hover: hover) {
  .fm-chip:hover { border-color: var(--fm-hover-line); background: var(--fm-hover-bg); box-shadow: 0 1px 0 var(--fm-line-strong); }
  .fm-chip.is-on:hover { background: var(--fm-selected-bg); border-color: var(--fm-line-ink); }
}
.fm-chip:active { transform: translateY(1px); box-shadow: none; }
/* 選択済みは、色＋太さ＋チェック記号の三重で示す */
.fm-chip.is-on { background: var(--fm-selected-bg); border-color: var(--fm-line-ink); }
.fm-chip.is-on .fm-box { border-color: var(--fm-line-ink); background: var(--fm-line-ink); color: var(--fm-on-fill); }
.fm-chip.is-on .fm-box::before { content: "✓"; }
.fm-chip:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--fm-focus-halo), 0 0 0 5px var(--fm-focus); }

/* 選んだ場所は、入力欄の上に「はずせる形」で置く。
   文字を入れただけの状態（入力欄の中）と、決まった状態（この帯）を、位置で区別する。 */
.fm-chosen {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 4px 0 10px; padding: 10px 12px;
  background: var(--fm-selected-bg); border: 2px solid var(--fm-line-ink);
  border-radius: var(--fm-r-md);
}
.fm-chosen-h { font: 700 .75rem/1.4 var(--fm-font-body); color: var(--fm-ink); }
.fm-token {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: 32px; padding: 4px 4px 4px 12px;
  background: var(--fm-surface); border: 2px solid var(--fm-line-ink);
  border-radius: var(--fm-r-pill); font: 700 .875rem/1.35 var(--fm-font-body);
}
.fm-token::before { content: "✓"; font-size: .8125rem; }
.fm-tokenx {
  flex: none; width: 32px; height: 32px; min-height: 32px;
  display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 0; border-radius: 50%;
  font: 700 1.125rem/1 var(--fm-font-body); color: var(--fm-ink);
}
.fm-tokenx:hover { background: var(--fm-bg-sunk); }
.fm-tokenx:focus-visible { outline: 3px solid var(--fm-focus); outline-offset: 1px; }
/* 市全域は、区より先に置き、幅いっぱいにして「まずここ」を形で示す */
.fm-chip-whole { flex: 1 0 100%; }

/* トップだけに置く小さなブランド絵。広告バナーにしない。
   スマートフォンで最初の食事条件が見え始める高さに収める。 */
.fm-brand { margin: 0 0 6px; }
.fm-brand svg { display: block; width: 100%; height: auto; max-height: 178px; margin: 0 auto; }
@media (min-width: 800px) { .fm-brand svg { max-height: 208px; } }
/* 補助コピーは一文だけ。見出しの前に置き、検索開始を下へ押し下げない */
.fm-brandcap {
  margin: 0 0 10px; text-align: center;
  font: 700 .875rem/1.5 var(--fm-font-body); color: var(--fm-ink-2);
}

/* 場所・料理の行（見慣れた「行を開いて選ぶ」形） */
.fm-pick { border-top: 1px solid var(--fm-line); }
.fm-pick:first-of-type { border-top: 0; }
.fm-pickh { margin: 0; }
.fm-pickbtn {
  width: 100%; display: flex; align-items: center; gap: 10px;
  min-height: 56px; padding: 8px 4px; background: none; border: 0; cursor: pointer;
  color: var(--fm-ink); font: 700 1rem/1.35 var(--fm-font-display); text-align: left;
  border-radius: var(--fm-r-sm);
}
.fm-pickname { flex: none; }
.fm-pickcur { flex: 1 1 auto; font: 400 .875rem/1.4 var(--fm-font-body); color: var(--fm-ink-3); }
.fm-pick.is-set .fm-pickcur { color: var(--fm-ink); font-weight: 700; }
.fm-pickbtn .fm-caret { flex: none; transition: transform 160ms; }
.fm-pickbtn[aria-expanded="true"] .fm-caret { transform: rotate(180deg); }
.fm-pickbody { padding: 0 2px 12px; }
/* メニュー名：説明用翻訳を主に、日本語原文を添えて出す。どちらがどれか分かるようにする。 */
.fm-menu { margin: 8px 0 0; }
.fm-menu-main { margin: 0; font-weight: 700; }
.fm-menu-src { margin: 6px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }
.fm-menu-src b { font-weight: 700; color: var(--fm-ink); }
.fm-menu-note { margin: 4px 0 0; font-size: .75rem; color: var(--fm-ink-2); }

.fm-grouph { font: 700 .8125rem/1.4 var(--fm-font-body); color: var(--fm-ink-2); margin: 10px 0 4px; }
.fm-find { position: relative; margin: 4px 0 10px; }
.fm-find svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fm-ink-2); pointer-events: none; }
.fm-find input {
  width: 100%; min-height: 48px; padding: 0 14px 0 44px; font-size: 1rem;
  background: var(--fm-surface); color: var(--fm-ink);
  border: 2px solid var(--fm-line-strong); border-radius: var(--fm-r-md);
}
.fm-find input::placeholder { color: var(--fm-ink-3); }

/* ---------------------------------------------------------------- ボタン */
.fm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px solid transparent; border-radius: var(--fm-r-pill);
  font-family: var(--fm-font-body); text-decoration: none; cursor: pointer;
}
.fm-btn-primary {
  width: 100%; min-height: 56px; padding: 0 22px;
  background: var(--fm-primary); color: var(--fm-on-fill); border-color: var(--fm-ink);
  font: 700 1rem/1.3 var(--fm-font-display); box-shadow: var(--fm-e-brand);
}
.fm-btn-primary:hover { background: var(--fm-primary-hover); }
.fm-btn-primary:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--fm-ink); }
/* 押せない状態は、色だけでなく形（影が無い・沈んだ地）でも示す */
.fm-btn.is-off {
  background: var(--fm-bg-sunk); color: var(--fm-ink-2);
  border-color: var(--fm-line-strong); box-shadow: none; cursor: default;
}
.fm-btn.is-off:hover { background: var(--fm-bg-sunk); }
.fm-btn.is-off:active { transform: none; }
.fm-btn-secondary {
  min-height: 48px; padding: 10px 18px;
  background: var(--fm-surface); color: var(--fm-ink); border-color: var(--fm-line-ink);
  font: 700 .875rem/1.3 var(--fm-font-body); box-shadow: var(--fm-e-1);
  /* 2026-09-07 実画面での確認：スマートフォン幅（390px）で、
     「まだ確認できていないお店を見る（N件）」のボタンが**画面からはみ出し、
     ページ全体が横スクロールしていた**（英語で64px、日本語で24px）。
     長い語の言語ほどひどくなる。折り返して、画面幅を超えないようにする。 */
  max-width: 100%; text-align: center; white-space: normal; overflow-wrap: anywhere;
}
@media (hover: hover) {
  .fm-btn-secondary:hover { background: var(--fm-hover-bg); border-color: var(--fm-hover-line); }
}
.fm-btn-secondary:active { transform: translateY(1px); }
.fm-btnrow { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
/* flex の子は既定で min-width:auto のため、**内容の最小幅より縮まない**。
   長い語の言語（英語・韓国語・インドネシア語）で、ボタンが画面幅を超えていた。
   縮んで折り返せるようにする（2026-09-07 実画面での確認）。 */
.fm-btnrow > .fm-btn { min-width: 0; }
.fm-btnrow .fm-btn-primary { width: auto; min-width: 180px; }
@media (prefers-reduced-motion: reduce) {
  .fm-btn, .fm-chip, .fm-card, .fm-pickbtn .fm-caret { transition: none !important; }
  .fm-btn-primary:active { transform: none; }
}
.fm-sticky-cta {
  position: sticky; bottom: 0; padding: 12px 0 14px;
  background: linear-gradient(to top, var(--fm-bg) 72%, rgba(251,247,241,0));
}
/* 2026-09-13 初見の操作担当 FMB-01：
   **PC幅の初回表示で、帯の上端が場所の近道リストの行の境目とほぼ一致し、
   続きがのぞく量が2pxしかなかった。**担当は「カードはここで終わり」と読み違えた
   （目的そのものは達成できたので Minor）。
   **帯の高さも配置も文言も変えず、上端の外側に短いぼかしだけを置く。**
   「ここで終わりではない」を、語を足さずに形で伝える
   （`.claude/rules/ui.md`「説明文を足す前に、形で解く」）。
   **ボタンの文字には掛けない**（帯の箱の外に置く）。**押すのを邪魔しない**（`pointer-events: none`）。 */
/* 2026-09-14 MAJ-1：**まだ探せない間は貼り付けない。**
   貼り付いた帯が、押すべき入力欄を覆っていた（3人の初見担当が同じ場所でつまずいた）。
   探せる状態になった瞬間に、もとどおり貼り付く。 */
.fm-sticky-cta.is-flow { position: static; }
.fm-sticky-cta.is-flow::before { content: none; }
.fm-sticky-cta::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px;
  background: linear-gradient(to top, var(--fm-bg), rgba(251, 247, 241, 0));
  pointer-events: none;
}
/* 2026-09-12 V4-13：地が透けていたため、**下の入力欄が「切れている」ように見えていた。**
   帯であることが分かるように、地を不透明にし、上端に細い線を置く（狭い画面だけ）。 */
@media (max-width: 799px) {
  .fm-sticky-cta {
    background: var(--fm-bg); border-top: 1px solid var(--fm-line);
    box-shadow: 0 -6px 16px -12px rgba(46, 35, 32, .5);
  }
}
/* 2026-09-12 4回目の初見ブラインドレビュー V4-13：
   **画面下に貼り付くボタンが、場所の入力欄をちょうど覆っていた**
   （実測：ボタン 774〜830px、入力欄 778〜826px）。
   次にすべき操作が、見えないまま隠れていた。
   **ボタンの高さぶんの余白を本文側に確保する**（`.claude/rules/ui.md`
   「画面下に貼り付くボタンが選択肢を隠さないようにする」）。 */
/* 貼り付くボタンは、**自分より前にある中身の上へ**かぶさる。
   だから余白は「ボタンの後ろ」ではなく、**ボタンの直前の中身の下**へ置く。 */
.fm-wheres { padding-bottom: 88px; }
/* 2026-09-13 独立確認 UX-m1（実測）：**広い画面でも帯は貼り付いたまま**で、
   1280×900 の初期表示で「料理の一覧から選ぶ」に14px かぶっていた。
   0 にしていたのは「広い画面では隠れない」という前提だったが、**実測と違っていた。**
   狭い画面ほどではないが、帯の高さぶんの逃げを置く。 */
@media (min-width: 800px) { .fm-wheres { padding-bottom: var(--fm-cta-space); } }

/* ---------------------------------------------------------------- 条件バー */
.fm-qbar {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  min-height: 52px; padding: 8px 0; margin-bottom: 2px;
}
.fm-qchip {
  display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--fm-r-pill);
  background: var(--fm-selected-bg); border: 1px solid var(--fm-line-strong);
  font: 700 .8125rem/1.5 var(--fm-font-body);
}
.fm-qplace { font: 400 .8125rem/1.5 var(--fm-font-body); color: var(--fm-ink-2); }

/* ---------------------------------------------------------------- 注意（短く1回） */
.fm-notice {
  display: flex; gap: 10px; align-items: flex-start;
  border-left: 4px solid var(--fm-mango); background: var(--fm-surface-2);
  padding: 8px 14px; border-radius: 0 var(--fm-r-sm) var(--fm-r-sm) 0;
  font-size: .8125rem; color: var(--fm-ink-2); margin: 0 0 16px;
}
.fm-notice svg { flex: none; color: var(--fm-ink-2); margin-top: 2px; }

/* ---------------------------------------------------------------- 検索結果のカード（主役） */
.fm-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 0 0 8px; }
@media (min-width: 900px) { .fm-cards { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); } }
.fm-card {
  position: relative; background: var(--fm-surface);
  border: 1px solid var(--fm-line); border-left: 5px solid var(--fm-verify-ink);
  border-radius: var(--fm-r-lg); box-shadow: var(--fm-e-2);
  padding: 16px 16px 12px; transition: box-shadow 140ms, border-color 140ms;
}
/* 2026-09-19 初見ブラインド MN-1：**簡体字だけ 390px 幅で横スクロールが出ていた。**
   グリッドの子は既定で `min-width: auto` なので、**空白の無い長い店名が最小幅を押し広げる**。
   （「Kominka Space imawo 古民家スペースimawo【いまを】」でカードが 403px になっていた。）
   **カードは画面幅に収める。**横スクロールしてよいのは表・図・コードだけである。 */
.fm-cards > * { min-width: 0; }
.fm-card h3, .fm-card h3 a { overflow-wrap: anywhere; word-break: normal; }

.fm-card:hover { box-shadow: var(--fm-e-3); }
.fm-card h3 { font-size: 1.125rem; }
.fm-card h3 a { color: var(--fm-ink); text-decoration: none; }
/* カード全体を店舗名のリンクにする指定。**カードの余白を押しても店舗詳細へ行ける**ため
   残すが、そのままだと**カード内の他のリンクの上に重なり、押せなくなる**。
   2026-09-06 の人間レビュー §6：「紹介記事を見る」がクリックできず、
   店舗名のリンクが操作を奪っていた（実際に押して再現した）。
   重なりは最背面へ置き、**本物のリンクとボタンを前面に出す。** */
.fm-card h3 a::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--fm-r-lg); z-index: 0;
}
.fm-card { isolation: isolate; }
/* 記事リンク・地図・電話・公式サイト・Instagram・詳しく見るは、必ず前面に置く */
.fm-card a:not(h3 a),
.fm-card button { position: relative; z-index: 1; }
.fm-card h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.fm-card .fm-meta { font-size: .8125rem; color: var(--fm-ink-2); margin: 5px 0 0; }
.fm-dot { margin: 0 6px; }
.fm-card .fm-badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
/* 確認方法は状態の表示であって、押せるものではない。
   リンク色・下線を使わず、本文の色と小さな地色で「状態」に見せる。 */
.fm-method {
  font-size: .8125rem; color: var(--fm-ink); margin: 6px 0 0;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px; border-radius: var(--fm-r-sm); background: var(--fm-verify-bg);
  text-decoration: none; cursor: default;
}
.fm-method svg { color: var(--fm-verify-ink); }
/* 確認日は同じ文へ詰め込まず、別の行の短い表示にする */
.fm-checked { font-size: .75rem; color: var(--fm-ink-2); margin: 4px 0 0; }

.fm-acts {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--fm-line);
}
.fm-act {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 14px;
  background: var(--fm-surface); color: var(--fm-ink); text-decoration: none;
  border: 1.5px solid var(--fm-line-strong); border-radius: var(--fm-r-pill);
  font: 700 .8125rem/1.2 var(--fm-font-body);
}
@media (hover: hover) {
  .fm-act:hover { border-color: var(--fm-hover-line); background: var(--fm-hover-bg); box-shadow: 0 1px 0 var(--fm-line-strong); }
}
.fm-act:active { transform: translateY(1px); box-shadow: none; }
.fm-act svg { flex: none; }

/* ---------------------------------------------------------------- 状態バッジ（6語のみ） */
.fm-badge {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 3px 10px;
  border-radius: var(--fm-r-sm); border: 1.5px solid currentColor;
  font: 700 .8125rem/1.3 var(--fm-font-body);
}
.fm-badge svg { flex: none; }
.fm-badge[data-kind="method"]  { color: var(--fm-verify-ink);  background: var(--fm-verify-bg);  border-style: solid; }
.fm-badge[data-kind="ref"]     { color: var(--fm-ref-ink);     background: var(--fm-ref-bg);     border-style: dotted; }
.fm-badge[data-kind="recheck"] { color: var(--fm-recheck-ink); background: var(--fm-recheck-bg); border-style: dashed; }
.fm-badge[data-kind="noinfo"]  { color: var(--fm-noinfo-ink);  background: var(--fm-noinfo-bg);  border-style: dotted; }

/* 条件チップ（結果カード）。対応範囲を同じ文字列に含めるので分離できない */
/* 2026-09-12 4回目の初見ブラインドレビュー V4-09：
   **ピル形のまま3行に伸び、枠線が最終行の文字を横切っていた**
   （「…／パンケーキ／サラダ ほか）」の「パ」に線が重なっていた）。
   ここは「どの料理が条件を満たすか」を書く、最も読み違えてはいけない行である。
   **ピル形は1行に収まるものだけにし、折り返しうる箱は角丸を小さくする。**
   左右の内側余白も角丸より大きく取り、線と文字を接触させない。 */
.fm-okchip {
  display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 6px 14px;
  border-radius: 12px; border: 1.5px solid var(--fm-verify-ink);
  background: var(--fm-verify-bg); color: var(--fm-verify-ink);
  font: 700 .8125rem/1.35 var(--fm-font-body);
  flex-wrap: wrap;
}
/* 2026-09-07 独立レビュー U-6：**語の途中で改行していた**
   （「ムスリム向けの配／慮あり」「グルテンフリー表／示あり」）。
   条件名・範囲・対象を別々のかたまりにして、**かたまりの間だけで折り返す**。 */
.fm-okchip-t, .fm-okchip-scope, .fm-okchip-target {
  word-break: keep-all; line-break: strict; overflow-wrap: normal;
}
.fm-okchip-sep { opacity: .55; }

/* 2026-09-08：条件の意味の補足（開閉）。**警告の見た目にしない。**
   選択肢のまとまりの外に置き、閉じているときは1行だけ。 */
.fm-condfold { margin: 10px 0 0; }
.fm-condfold > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font: 400 .875rem/1.5 var(--fm-font-body); color: var(--fm-ink-2);
  list-style: none; text-decoration: underline; text-underline-offset: 3px;
}
.fm-condfold > summary::-webkit-details-marker { display: none; }
.fm-condfold > summary::before { content: "\25B8"; margin-right: 8px; color: var(--fm-ink-3); }
.fm-condfold[open] > summary::before { content: "\25BE"; }
.fm-condfold-i {
  margin: 8px 0 0; padding: 0 0 0 18px;
  font: 400 .8125rem/1.6 var(--fm-font-body); color: var(--fm-ink-2);
}
.fm-condfold-i b { color: var(--fm-ink); }

/* ---------------------------------------------------------------- 0件 */
.fm-zero {
  border: 2px dashed var(--fm-line-strong); border-radius: var(--fm-r-lg);
  background: var(--fm-surface); padding: 18px 16px; margin: 0 0 16px;
}
.fm-zero h2 { margin-top: 0; }

/* ---------------------------------------------------------------- 読み込みの失敗 */
/* 2026-09-12 外部監督の受入条件（5641959394 §3）：
   **失敗を「0件」に見せない。**0件の枠（2pxの点線）とは**形も色も変える**。
   失敗は状態ではなく事故なので、地の色を付けて実線で囲む。 */
.fm-fatal {
  border: 2px solid var(--fm-recheck-ink); border-radius: var(--fm-r-lg);
  background: var(--fm-recheck-bg); padding: 18px 16px; margin: 0 0 16px;
}
.fm-fatal h1 { margin-top: 0; font-size: 1.125rem; color: var(--fm-recheck-ink); }
.fm-fatal p { margin: 8px 0 0; }

/* ---------------------------------------------------------------- 確認前のお店（別画面） */
/* 検索結果のカードとは**形そのものを変える**（同じ形にすると誤認する） */
.fm-plist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fm-line); }
.fm-prow {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 12px 4px; border-bottom: 1px solid var(--fm-line);
}
.fm-prow-name { flex: 1 1 60%; font: 700 .9375rem/1.4 var(--fm-font-body); color: var(--fm-ink); text-decoration: none; min-height: 24px; }
.fm-prow-name:hover { text-decoration: underline; text-underline-offset: 3px; }
.fm-prow-meta { font-size: .8125rem; color: var(--fm-ink-2); }
.fm-prow-state { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.fm-prow-cond { font: 700 .8125rem/1.4 var(--fm-font-body); color: var(--fm-ink); }
.fm-prow-ask { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.fm-prow-ask .fm-act { min-height: 44px; padding: 0 12px; font-size: .8125rem; }

/* ---------------------------------------------------------------- 店舗詳細 */
.fm-detail { max-width: 720px; }
/* いちばん知りたいこと（食べられるもの）を、いちばん上に、いちばん強く */
.fm-eat {
  background: var(--fm-surface); border: 1px solid var(--fm-line);
  border-left: 5px solid var(--fm-verify-ink);
  border-radius: var(--fm-r-lg); box-shadow: var(--fm-e-1);
  padding: 14px 16px 12px; margin: 0 0 14px;
}
/* 2026-09-18 初見ブラインド MJ-06：**公式確認が1件も無い店は、一覧と同じ破線にする。**
   一覧の紹介カード（`.fm-card-mention`）と**同じ線の種類・同じ色**を使う。
   **緑（確認済みの色）を、確認できていない店に使わない。** */
.fm-eat-mention { border-left: 5px dashed var(--fm-line-strong); }
.fm-eat h2 { margin: 0 0 8px; font-size: 1.0625rem; }
.fm-eat .fm-badges { display: flex; flex-wrap: wrap; gap: 6px; }

/* 対応の範囲は、選択状態で見せる（否定文で説明しない） */
.fm-scope { margin: 12px 0 0; }
.fm-scopeh { font: 700 .8125rem/1.4 var(--fm-font-body); color: var(--fm-ink-2); margin: 0 0 6px; }
/* 2026-09-13 F-11：**等間隔に3つ横並び＝切り替え操作の形**だった。
   区切り記号でつないだ文にして、操作の形をやめる（語は消さない）。 */
.fm-scopeopts { margin: 0; display: block; }
.fm-scopesep { color: var(--fm-ink-3); margin: 0 2px; font-size: .75rem; }
/* 押せるチップ（丸いピル）と同じ形にすると、押せば切り替わると誤解される（批判的レビュー）。
   角のある「状態の表示」にし、カーソルも変えない。 */
/* 2026-09-07 独立レビュー U-9：**該当しない範囲まで同じ大きさの枠で並び、
   3つの中から選ぶ操作に見えていた。**該当する1つだけを枠付きにし、
   残りは枠を外した淡色の文字にする（大きさも一段小さく）。
   **語は消さない**（どの範囲が候補としてあるのかは読めるままにする）。 */
.fm-scopeopt {
  display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 2px 2px;
  border: 0; background: transparent; color: var(--fm-ink-3);
  font: 400 .75rem/1.3 var(--fm-font-body); cursor: default;
}
/* 2026-09-19 初見ブラインド MN-4：**スマートフォン幅で選択記号を見落としやすい。**
   実測では、選択中は地に対して14.28、非選択は4.85（どちらも本文の可読基準4.5以上）で、
   非選択をこれ以上薄くすると可読基準を割る。**濃さでは、もう解けない。**
   U-9・V4-16 の裁定どおり**枠と地色は使えない**ので、**形の channel だけを強くする**。
   選択中の✓を一段大きくし（16px／非選択の−は12px）、記号の箱の幅を1emにそろえて
   語との間隔が記号の字幅で変わらないようにする。**3つは1文に流れるので、縦の整列ではない。** */
.fm-scopeopt::before {
  content: "−"; font-weight: 700;
  flex: 0 0 auto; width: 1em; text-align: center;
}
/* 2026-09-12 4回目の初見ブラインドレビュー V4-16：
   **該当する範囲の見た目が、トップの「押して選ぶチップ」と同じ（淡い橙の地＋濃い枠＋レ点）**
   だったため、押して切り替えられると思われていた。**ここは押せない事実の表示である。**
   **押せるチップの地色と枠は使わない。**選ばれている語を濃く太くし、
   ほかは薄いまま「−」で残す（語は消さない）。 */
.fm-scopeopt.is-on {
  border: 0; padding: 2px 2px; min-height: 24px; font-size: .8125rem;
  background: transparent; color: var(--fm-ink); font-weight: 700;
}
.fm-scopeopt.is-on::before { content: "✓"; font-size: 1rem; line-height: 1; }
.fm-scopetarget { margin: 8px 0 0; font-size: .875rem; }

/* 店舗詳細の1画面目に置く、控えめな戻る導線（V4-17）。
   **主な行動（店を見る・連絡する）より弱く、しかし押せる大きさで。** */
.fm-backtop { margin: 0 0 6px; font-size: .8125rem; }
.fm-backtop a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--fm-link); text-decoration: underline; text-underline-offset: 3px;
}
.fm-backtop a:hover { color: var(--fm-ink); }
.fm-scopetarget b { font-weight: 700; }

/* 情報源自身が書いている限定（共用厨房・未確認の材料など）。
   **肯定表示のすぐ下**に置く。開閉の中へ隠さない。
   色だけで示さず、見出しの語・アイコン・左の太い罫の三つで示す。 */
.fm-caveat {
  margin: 12px 0 0; padding: 10px 12px;
  border: 1px solid var(--fm-line); border-left: 4px solid var(--fm-noinfo-ink);
  border-radius: var(--fm-r-sm); background: var(--fm-noinfo-bg);
}
.fm-caveat .fm-scopeh {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 4px; color: var(--fm-noinfo-ink);
}
.fm-caveat-line {
  margin: 4px 0 0; font: 400 .875rem/1.55 var(--fm-font-body); color: var(--fm-ink-1);
}
/* 結果カードの限定（1行だけ）。外へ出るボタンより前に置く。
   一覧では根拠を前面に出しすぎない（正本2B-7）ので、枠で囲わず1行にとどめる。 */
/* 公式情報と食い違っている紹介情報。**消さずに、状態として見せる。**
   色だけで示さず、語・アイコン・左の太い罫で示す。 */
/* 紹介記事の逐語引用。**公式情報の引用と見比べられるように出す。** */
.fm-mention-quote {
  margin: 6px 0 0; padding-left: 10px;
  border-left: 2px solid var(--fm-line);
  font: 400 .8125rem/1.6 var(--fm-font-body); color: var(--fm-ink-2);
}
/* 公式情報が一部の調理基材についてだけ述べているとき（**反証ではない**）。 */
.fm-mention-unv {
  margin: 8px 0 0; padding: 8px 10px;
  border: 1px solid var(--fm-line); border-left: 3px solid var(--fm-noinfo-ink);
  border-radius: var(--fm-r-xs); background: var(--fm-noinfo-bg);
}
.fm-mention-unv-h {
  display: flex; align-items: center; gap: 6px; margin: 0 0 4px;
  font: 700 .8125rem/1.4 var(--fm-font-body); color: var(--fm-noinfo-ink);
}
.fm-mention-unv-q {
  margin: 0 0 4px; font: 400 .8125rem/1.6 var(--fm-font-body); color: var(--fm-ink-1);
}
.fm-mention-unv-n, .fm-mention-unv-a {
  margin: 4px 0 0; font: 400 .75rem/1.5 var(--fm-font-body); color: var(--fm-ink-2);
}

.fm-mention-contra {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 8px 0 0; padding: 6px 8px;
  border-left: 3px solid var(--fm-noinfo-ink); border-radius: var(--fm-r-xs);
  background: var(--fm-noinfo-bg);
  font: 700 .8125rem/1.5 var(--fm-font-body); color: var(--fm-ink-1);
}
.fm-mention-contra svg { flex: 0 0 auto; margin-top: 2px; color: var(--fm-noinfo-ink); }

/* 提供形態。**範囲（お店全体／一部メニュー）と同じ粒度の短い状態表示**にする。
   限定の枠より前・外部導線より前に置き、色だけでなく語で意味が分かるようにする。 */
.fm-card-chan { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.fm-chan {
  display: inline-block; padding: 3px 8px;
  border: 1px solid var(--fm-line-2); border-radius: 999px;
  background: var(--fm-surface-2);
  font: 700 .75rem/1.4 var(--fm-font-body); color: var(--fm-ink-1);
}

.fm-card-caveat {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 8px 0 0; padding: 6px 8px;
  border-left: 3px solid var(--fm-noinfo-ink); border-radius: var(--fm-r-xs);
  background: var(--fm-noinfo-bg);
  font: 400 .8125rem/1.5 var(--fm-font-body); color: var(--fm-ink-1);
}
.fm-card-caveat svg { flex: 0 0 auto; margin-top: 2px; color: var(--fm-noinfo-ink); }
/* どの条件に掛かる限定かを、行の先頭で示す */
/* 2026-09-14 独立確認 m-4：`inline-block` だと**文末の空白が描画されずに捨てられ**、
   英語で「measures:This」のように語が繋がって取り出されていた（コピー・読み上げ・検査で
   区切りが消える）。見た目の余白は `margin-right` で足りていたが、**文字としての区切りが
   失われる**のは OP-M6 で直したはずの問題そのものなので、区切りを**文字側へ一本化**する。 */
.fm-caveat-cond {
  display: inline; font-weight: 700; color: var(--fm-noinfo-ink);
}
/* 区切りは**文そのもの**に入れる（OP-M6）。飾りで付けると、読み上げ・コピー・検査で消え、
   言語ごとの区切り（「：」と「: 」）も分けられない。 */

.fm-caveat-note {
  margin: 8px 0 0; font: 400 .75rem/1.5 var(--fm-font-body); color: var(--fm-ink-3);
}

.fm-notchecked { margin: 12px 0 0; }
.fm-notchecked .fm-scopeh { margin-bottom: 6px; }
.fm-notchecked .fm-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-notchecked .fm-nlist { display: flex; flex-wrap: wrap; gap: 6px; }
.fm-ncond {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; padding: 3px 10px;
  border: 1.5px dotted var(--fm-noinfo-ink); border-radius: var(--fm-r-sm);
  background: var(--fm-noinfo-bg); color: var(--fm-noinfo-ink);
  font: 700 .8125rem/1.3 var(--fm-font-body);
  flex-wrap: wrap;                 /* 添える一行が長いときに、囲みからはみ出させない */
}
/* 2026-09-13 UX-M3：紹介情報がある条件にだけ添える一行。
   **状態の語と同じ強さにしない**（太字にせず、少し小さく）。色だけで区別しない。 */
.fm-ncond .fm-nsee { font-weight: 400; font-size: .75rem; }

/* 操作（Googleマップ・電話・公式サイト・Instagram）と、店舗の基本情報を続けて読ませない。
   間に余白を置き、基本情報は1つのまとまりとして囲う。 */
.fm-detail .fm-acts { margin-bottom: 24px; }
.fm-basic {
  margin: 0 0 16px; padding: 14px 14px 10px;
  background: var(--fm-surface); border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-lg);
}
.fm-basich { margin: 0 0 8px; font: 700 .8125rem/1.4 var(--fm-font-body); color: var(--fm-ink-2); }
/* 2026-09-18 初見確認 BL-02：**日本語以外の4言語で、スマートフォン幅（390px）の画面が
   横にはみ出していた**（英語727px／インドネシア語799px／韓国語650px／中国語484px。日本語は390px）。
   原因は `max-content`：見出し列が**折り返さずに**いちばん長いラベルの幅まで広がる。
   日本語のラベルは短いので起きず、「Type of place」「Jenis tempat」のような長いラベルで起きていた。
   住所・電話・Googleマップのボタンが画面の外へ出て、**地図へ進めなくなっていた。**
   `fit-content(40%)` にすると、見出し列は必要なら折り返し、**枠の40%を超えて広がらない。**
   値の側も `minmax(0, 1fr)` で縮められるようにする（`1fr` だけでは最小幅が効いて縮まない）。 */
.fm-dl { display: grid; grid-template-columns: fit-content(40%) minmax(0, 1fr); gap: 6px 14px; margin: 0; font-size: .9375rem; }
.fm-dl dt, .fm-dl dd { min-width: 0; overflow-wrap: anywhere; }
/* 2026-09-18 初見確認 M-01：**英語・韓国語だけ、ラベルと値が1列ずれていた。**
   読み上げ専用の `dt`（`.fm-sr`）は `position: absolute` で**マス目を消費しない**ため、
   続く `dd` が左の列へ入り、それ以降の行が全部ずれる。
   日本語画面にはこの行が無いので気づけなかった。**外国語の利用者だけが崩れた画面を見ていた。**
   この注記は2列に入れるものではないので、**1行を丸ごと占有させる。** */
.fm-dl dt.fm-sr + dd { grid-column: 1 / -1; }
.fm-dl dt { color: var(--fm-ink-2); font-size: .8125rem; }
.fm-dl dd { margin: 0; }

/* 住所のすぐ下に置く、Googleマップへの文字付きリンク（2026-09-11 追加指示4）。
   **折りたたみの中や画面の下ではなく、住所を読んだその場で押せる位置に置く。**
   操作できる部品の高さは44px以上（`.claude/rules/ui.md`）。 */
/* 住所はひとまとまりで読ませ、リンクは次の行に置く（2026-09-12 M-3）。 */
.fm-addrtext {
  display: block;
  /* 2026-09-12 再レビュー：住所が「花里町5-15-」「3」「中部国際空」「港」と
     途中で割れて読めなかった。**番地や施設名の途中で折り返さない。** */
  word-break: keep-all;
  overflow-wrap: anywhere;
  line-break: strict;
}
.fm-addrmap {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px; min-height: 44px; padding: 0 12px 0 10px;
  border: 1px solid var(--fm-line); border-radius: 10px;
  background: var(--fm-surface); color: var(--fm-ink);
  font-size: .875rem; font-weight: 700; text-decoration: none;
}
.fm-addrmap span { text-decoration: underline; text-underline-offset: 2px; }
/* 2026-09-18 初見ブラインド MJ-05：**語と形の両方で分ける。**
   確認済みの店舗ページ＝実線枠、住所での検索＝**破線枠**。
   破線は「まだ確かめていない」を、色を増やさずに示す。 */
.fm-addrmap-search { border-style: dashed; }
.fm-addrmap-note {
  display: block; margin: 4px 0 0; max-width: 42em;
  font: 400 .8125rem/1.45 var(--fm-font-body); color: var(--fm-ink-2);
}
@media (hover: hover) {
  .fm-addrmap:hover { background: var(--fm-hover-bg); border-color: var(--fm-hover-line); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
}
.fm-addrmap:active { transform: translateY(1px); }
.fm-quote {
  margin: 8px 0 0; padding: 8px 12px; border-left: 3px solid var(--fm-line-strong);
  background: var(--fm-surface-2); font-size: .8125rem; color: var(--fm-ink);
}
.fm-qnote { margin: 6px 0 0; font-size: .8125rem; color: var(--fm-recheck-ink); font-weight: 700; }
/* 2026-09-18 初見確認 M-07：**赤太字が、安全の打ち消しと言語の補足の両方**に使われていた。
   赤が何を意味するのか学習できず、2度目以降は読み飛ばされた。
   **赤は安全に関わる打ち消しだけ**にし、引用が何語かの説明はほかの補足と同じ地色へ戻す。 */
.fm-lnote { margin: 6px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }
.fm-qlead { display: block; font-size: .75rem; color: var(--fm-ink-2); margin-bottom: 2px; }
.fm-evhead { font-weight: 700; margin: 14px 0 4px; }
/* 2026-09-14 MAJ-2：聞くことの一覧を、判断する場所へ。**注意の枠と同じ強さにしない**。 */
.fm-ask { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--fm-line);
  border-radius: var(--fm-r-sm); background: var(--fm-bg-2, transparent); }
.fm-ask ul { margin: 4px 0 0; padding-left: 1.2em; }
.fm-ask li { margin: 2px 0; font: 400 .875rem/1.6 var(--fm-font-body); }
/* 2026-09-14 C-4：注記の出典。条件の根拠より**一段浅く**見せる（同じ強さで並べない）。 */
.fm-evsub { font-weight: 600; font-size: .8125rem; margin: 10px 0 2px; color: var(--fm-ink-2); }

/* ---------------------------------------------------------------- 開閉 */
.fm-disc { margin: 0 0 14px; }
.fm-discbtn {
  width: 100%; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px;
  background: var(--fm-surface); color: var(--fm-ink);
  border: 1.5px solid var(--fm-line-strong); border-radius: var(--fm-r-md);
  font: 700 .9375rem/1.3 var(--fm-font-body); text-align: left; cursor: pointer;
}
@media (hover: hover) {
  .fm-discbtn:hover { border-color: var(--fm-hover-line); background: var(--fm-hover-bg); }
}
.fm-discbtn:active { transform: translateY(1px); }
.fm-discbtn .fm-caret { margin-left: auto; transition: transform 160ms; flex: none; }
.fm-discbtn[aria-expanded="true"] .fm-caret { transform: rotate(180deg); }
.fm-discbody { padding: 10px 14px 2px; }
.fm-discbody h3 { font-size: .9375rem; margin: 14px 0 6px; }
.fm-discbody ul { margin: 0 0 8px; padding-left: 1.2em; font-size: .875rem; color: var(--fm-ink-2); }
.fm-h2c { margin: 14px 0 8px; font-size: 1.0625rem; }

footer.fm-foot { border-top: 1px solid var(--fm-line); margin-top: 28px; padding-top: 8px; }
footer.fm-foot .fm-discbody p { font-size: .8125rem; color: var(--fm-ink-2); }

/* 2026-09-07 実画面での確認：`.fm-btn-secondary` の nowrap が、上の `white-space: normal`
   より後ろにあるため勝ってしまい、長い語の言語でボタンが画面幅を超えていた。
   **文字を切らずに折り返す**（短いボタンは、そもそも折り返さない）。
   言語ボタンは短く、折り返すと選択状態が読みにくいので nowrap のままにする。 */
.fm-langbtn { white-space: nowrap; }
.fm-act { white-space: normal; text-align: center; }
.fm-meta { overflow-wrap: anywhere; }
.fm-chip .fm-ct, .fm-qchip { line-break: strict; overflow-wrap: break-word; }

/* ============================================================
   紹介情報のあるお店（情報源B・正本v1.18(8)）

   確認できたお店と**形を変える**。誤認を防ぐため、次を守る。
     ・左の太い縦線を、確認済みの色ではなく破線の中立色にする
     ・確認済みの緑のチップ（fm-okchip）を持たせない
     ・「紹介情報あり」という語と、媒体名・公開日・確認日を必ず見せる
   色だけで区別しない。語と形（破線・角の丸み・字下げ）でも区別する。
   ============================================================ */
.fm-tier2 { margin-top: 32px; padding-top: 20px; border-top: 2px dashed var(--fm-line-strong); }
/* 2026-09-18：節見出しは、確認できたお店も紹介情報も**同じ強さ**にする。
   片方だけ弱いと「そちらは重要でない」と読まれる。 */
.fm-tier2 > h2 { margin: 0 0 4px; font-family: var(--fm-font-display);
  font-weight: 700; font-size: 1.0625rem; line-height: 1.5; }
.fm-tier2-lead { margin: 0 0 12px; color: var(--fm-ink-2); font-size: .875rem; }

.fm-card-mention {
  border-left: 5px dashed var(--fm-line-strong);
  border-radius: var(--fm-r-sm);
  background: var(--fm-surface);
}

.fm-mentionsh { margin: 14px 0 0; }
.fm-mentions {
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px dashed var(--fm-line-strong); border-radius: var(--fm-r-sm);
  background: var(--fm-hover-bg);
}
.fm-mention + .fm-mention { margin-top: 10px; padding-top: 10px; border-top: 1px dotted var(--fm-line); }
.fm-mention-h {
  margin: 0; font-weight: 700; font-size: .9375rem; color: var(--fm-ink);
}
/* アイコンではなく語で示す。記号を足す場合も、語と併用する。 */
/* 2026-09-07 独立レビュー U-7：**引用符の飾り（“”）が文字化けに見えていた。**
   見出しの語（「〜の紹介情報あり」）だけで意味は伝わるので、飾りを外す。 */
.fm-mention-scope,
.fm-mention-src,
.fm-mention-seen { margin: 2px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }
/* 2026-09-17 IV-m4：情報源の種類を、媒体名の前に置く。
   **色だけで区別しない**（語そのものが種類を述べている）。
   **区切りの記号はマークアップ側にある**（CSSが当たらなくても語がつながらない）。 */
.fm-mention-kind { font-weight: 700; }
.fm-mention-scope span[lang="ja"] { margin-left: 6px; }
.fm-mention-old { margin: 4px 0 0; font-size: .8125rem; color: var(--fm-ink); font-weight: 700; }
/* 2026-09-12 4回目の初見ブラインドレビュー V4-03：
   ここだけ**ブラウザ既定の青＋下線**で、同じカードの中の枠線ボタンと並ぶと
   **作りかけ・実装漏れ**に見えていた。サイトの色にそろえ、外部へ出ることは語で示す
   （色は増やさない。**下線は残す**＝リンクだと形でも分かるように）。 */
/* 2026-09-14 独立確認 M-2：**押せる高さが17pxしかなかった**（規則は44px以上）。
   指で押す幅の画面では、行リンクは隣の文字と誤って押しやすい。
   **色・下線・語・並びは変えず、押せる範囲だけを広げる。** */
.fm-mention-link { margin: 0; font-size: .8125rem; }
.fm-mention-link a {
  color: var(--fm-link); text-decoration: underline; text-underline-offset: 3px;
  font-weight: 700;
  display: inline-flex; align-items: center; min-height: 44px;
}
.fm-mention-link a:hover { color: var(--fm-ink); }
.fm-mention-note { margin: 8px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }
/* 店舗の特定と営業状態の確かめかた。食事条件の注記とは**別の行**として見せる（指示2）。 */
.fm-mention-verif { margin: 4px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }

/* 選んだ条件ごとの根拠（Issue #15 §4）。
   一つの条件は公式で確認済み・もう一つは紹介情報だけ、という店に出す。
   **色だけで区別しない。**条件ごとに確認方法の語か「紹介情報のみ」の語が入っている。
   確認済みの行は実線、紹介情報だけの行は破線で、形でも違いが分かるようにする。 */
.fm-basis {
  margin: 10px 0 0; padding: 10px 12px;
  border: 1px solid var(--fm-line); border-radius: var(--fm-r-sm);
  background: var(--fm-surface);
}
.fm-basis-h { margin: 0 0 6px; font-weight: 700; font-size: .875rem; color: var(--fm-ink); }
.fm-basis-list { margin: 0; padding: 0; list-style: none; }
.fm-basis-row {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 0; padding: 4px 0 4px 8px;
  font-size: .875rem; line-height: 1.6; color: var(--fm-ink);
}
.fm-basis-row + .fm-basis-row { border-top: 1px dotted var(--fm-line); }
.fm-basis-row svg { flex: none; margin-top: 3px; }
.fm-basis-a { border-left: 3px solid var(--fm-line-ink); }
.fm-basis-b { border-left: 3px dashed var(--fm-line-strong); color: var(--fm-ink-2); }
.fm-basis-note { margin: 6px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }

@media (hover: hover) {
  .fm-card-mention:hover { border-color: var(--fm-line-ink); background: var(--fm-hover-bg); }
}

/* 候補の総数のすぐ下に置く内訳。**総数だけを見せて内訳を隠さない**
   （確認できたお店と紹介情報のあるお店は、意味が違う）。 */
/* 2026-09-14 統括の裁定（外部監督 5656633231）：**公式情報で確認できたお店が0件のときだけ、
   内訳を強く見せる。**見出しを「0件です」にすると検索が失敗したように見えるため、
   見出しは候補の数のままにし、**0という事実はここで埋もれさせない**。
   色だけに頼らず、太さと地の色でも示す。 */
.fm-grouped-note { margin: 0 0 10px; font-size: .8125rem; color: var(--fm-ink-2); }
.fm-candbreak.is-zero {
  font-weight: 700; color: var(--fm-ink);
  background: var(--fm-hover-bg); border: 1px solid var(--fm-line-strong);
  border-radius: var(--fm-r-sm); padding: 8px 10px;
}
.fm-candbreak {
  margin: 4px 0 16px; font: 400 .875rem/1.6 var(--fm-font-body); color: var(--fm-ink-2);
}
/* 2026-09-13 UX-M2：検索画面と同じ「{n}つとも満たすお店をさがします」を、
   件数の内訳のすぐ下に置く。**内訳より前に出さない**（答えが先、条件の説明が後）。 */
/* 2026-09-18 MJ-03：対象欄の断り書きの全文。**一覧では1回だけ**出す。 */
.fm-menujanote {
  margin: 6px 0 0; max-width: 46em;
  font: 400 .8125rem/1.5 var(--fm-font-body); color: var(--fm-ink-2);
}
.fm-condall {
  margin: -8px 0 16px; font: 600 .875rem/1.5 var(--fm-font-body); color: var(--fm-ink-1);
}
/* 2026-09-12 4回目の初見ブラインドレビュー V4-01：
   **答えが2つある画面**（確認できたお店0件／紹介情報のあるお店25件）で、
   片方だけが特大の太字、もう片方が小さな灰色だと、**失敗した検索に見える。**
   内訳ではなく**もう一つの答え**として読める強さにする（見出しよりは弱い）。 */
.fm-candbreak-strong {
  margin: 6px 0 12px; font: 700 1rem/1.55 var(--fm-font-body); color: var(--fm-ink-1);
}

/* 2026-09-13 F-01（利用者指摘）：**13件並んでいるのに主見出しが「0件」**だった。
   見出しを中立にしたので、**2つの件数はここで並べて、同じ強さで**見せる。
   受入表 C-J Q1・Q2 は**同時に**正答しなければならない（片方だけの正答は0点）。

   ・**どちらもエラーの見た目にしない**（点線枠・警告色・取り消し線を使わない）
   ・**同じ字の大きさ・同じ太さ**にする。片方を小さな灰色に落とすと「失敗した検索」に見える
   ・左の細い線だけで区別する。**色だけで意味を伝えない**（語が本体） */
.fm-twocount {
  display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 6px 0 12px;
}
.fm-count {
  margin: 0; padding-left: 10px; border-left: 3px solid var(--fm-line);
  font: 700 1rem/1.55 var(--fm-font-body); color: var(--fm-ink-1);
}
/* 確認できた件数の側だけ、線をブランドの色にする（**語と並びが本体で、色は補助**）。 */
.fm-count-confirmed { border-left-color: var(--fm-brand, var(--fm-ink-3)); }
.fm-count-ref { border-left-color: var(--fm-line); }

/* 2026-09-13 F-05：長い一覧の中を移動する導線（文字リンク）。
   **主要行動と同じ強さのボタンにしない**（並べると、どれを押すか決められなくなる）。 */
.fm-jump { white-space: nowrap; }
.fm-backtotop { margin: 24px 0 8px; text-align: center; }
/* 2026-09-13 F-05：飛んだ先のすぐ横にも戻りを置く（往復できるように）。
   見出しの直後なので、中央寄せにせず、控えめな文字リンクのまま左に置く。 */
.fm-backtotop-inline { margin: 0 0 8px; text-align: left; }
/* 2026-09-13 F-10：最初の視界に置く「次にできること」。**一つだけ。** */
.fm-btnrow-lead { margin: 4px 0 12px; }
.fm-backtotop a, .fm-jump {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font: 400 .875rem/1.5 var(--fm-font-body); color: var(--fm-ink-1);
}

/* 2026-09-13 F-04：確認できている条件の紹介情報は、**別の主張ではなく裏付け**として見せる。
   枠は残す（消さない）。**語で区別し、色だけに頼らない。** */
.fm-mention-also { border-left-color: var(--fm-brand, var(--fm-line)); }

/* 狭い画面での絞り込み（閉じた1行）。**開閉の見た目は画面内で1種類にそろえる。** */
.fm-narrowfold > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  padding: 0 12px; border: 1px solid var(--fm-line); border-radius: var(--fm-r-md);
  background: var(--fm-surface);
  font: 700 .875rem/1.5 var(--fm-font-body); color: var(--fm-ink-1);
  list-style: none;
}
.fm-narrowfold > summary::-webkit-details-marker { display: none; }
.fm-narrowfold > summary::after {
  content: "▾"; margin-left: auto; color: var(--fm-ink-3);
}
.fm-narrowfold[open] > summary::after { content: "▴"; }
.fm-narrowfold > .fm-narrowlist { margin-top: 10px; }
/* 二層それぞれの見出し。総数の h1 より一段弱く、しかし節の区切りとして分かる強さ。 */
/* 2026-09-18 初見確認 MJ-1：**節見出しが 16px/400 で描かれていた。**
   原因は `var(--fm-font-head)` が**どこにも定義されていない**こと。
   未定義の変数を含む `font:` の短縮指定は、**宣言ごと無効**になり、
   字の大きさも太さも初期値（16px/400）へ戻る。
   そのため**確認できたお店の見出しだけが、紹介情報の見出しより弱く**見えていた。
   定義済みの `--fm-font-display` を使い、**短縮指定をやめて個別に書く**
   （1つの変数が欠けても、ほかの指定が生き残る）。 */
.fm-tierh {
  margin: 20px 0 8px; color: var(--fm-ink-1);
  font-family: var(--fm-font-display); font-weight: 700;
  font-size: 1.0625rem; line-height: 1.5;
}

/* 外国語UIでの店舗名の併記。**日本語名は落とさず**、英字名より一段弱く見せる
   （現地で店を指し示すために日本語が要る。人間レビュー §7）。 */
.fm-name-ja { font-weight: 400; color: var(--fm-ink-2); }

/* 複数条件のときの限界。**説明段落を積まない**ように一行だけにする。 */
.fm-multinote {
  margin: 0 0 16px; padding: 6px 8px;
  border-left: 3px solid var(--fm-noinfo-ink); border-radius: var(--fm-r-xs);
  background: var(--fm-noinfo-bg);
  font: 400 .8125rem/1.5 var(--fm-font-body); color: var(--fm-ink-1);
}


/* ============================================================
   2026-09-07 Issue #15 の非公開試作ぶん
   ============================================================ */

/* 選択肢のすぐそばの短い補足と、開いたときだけ出す説明（§1・§2）。
   常設の説明段落を増やさないための形。 */
.fm-condnote {
  grid-column: 1 / -1;
  margin: -4px 0 8px; padding: 0 2px;
  font-size: .8125rem; line-height: 1.6; color: var(--fm-ink-2);
}
.fm-condhelp-btn {
  min-height: 44px; padding: 0 6px;
  border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--fm-ink); text-decoration: underline;
}
.fm-condhelp {
  grid-column: 1 / -1;
  margin: -4px 0 10px; padding: 10px 12px;
  border: 1px solid var(--fm-line); border-radius: var(--fm-r-sm);
  background: var(--fm-surface);
  font-size: .8125rem; line-height: 1.7; color: var(--fm-ink);
}

/* 追加の料理カテゴリーの運用情報（曜日限定など）。条件の注記とは出どころが違う。 */
.fm-cuisine-note { font-weight: 700; }

/* 食品店（買い物先）。**候補の件数には入っていない別枠**なので、
   確認できたお店・紹介情報のお店のどちらとも違う形にする（§3）。 */
.fm-tier-shop {
  margin-top: 32px; padding-top: 20px;
  border-top: 2px dotted var(--fm-line-strong);
}
.fm-tier-shop > h2 { margin: 0 0 4px; font-size: 1.0625rem; }
/* **`fm-card` を継承しない。**別の種類のものなので、形も独立して持つ。 */
.fm-shopcard {
  margin: 0; padding: 14px 16px;
  border: 1px solid var(--fm-line);
  border-left: 5px dotted var(--fm-line-strong);
  border-radius: var(--fm-r-sm);
  background: var(--fm-surface);
}
.fm-shopcard > h3 { margin: 0; font-size: 1rem; line-height: 1.5; }
.fm-shop-sells { margin: 8px 0 0; font-size: .875rem; color: var(--fm-ink); font-weight: 700; }
.fm-shop-cert { margin: 4px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }
@media (hover: hover) {
  .fm-shopcard:hover { border-color: var(--fm-line-ink); background: var(--fm-hover-bg); }
}


/* ============================================================
   2026-09-07 Issue #15（5565058104）ぶん
   ============================================================ */

/* グルテンフリーの注文前確認。**よしさんの指示で「目立たせる」**もの。
   薄い補足ではなく、枠と地色を持たせる。色だけに頼らず、見出しの語でも伝える。 */
.fm-gfwarn {
  grid-column: 1 / -1;
  margin: 8px 0 10px; padding: 12px 14px;
  border: 2px solid var(--fm-line-ink); border-radius: var(--fm-r-sm);
  background: var(--fm-bg-sunk);
}
.fm-gfwarn-h {
  margin: 0 0 4px; font-weight: 700; font-size: .9375rem; color: var(--fm-ink);
}
.fm-gfwarn-h::before { content: "!"; margin-right: 8px; font-weight: 700; }
.fm-gfwarn-b { margin: 0; font-size: .875rem; line-height: 1.7; color: var(--fm-ink); }
/* 店舗詳細では、対象商品のすぐ下に置く */
.fm-gfwarn-inline { margin: 10px 0 0; }

/* 食材を買えるお店。**必要な人が開く補助枠**にする（結果の下部）。
   飲食の候補と同じ強さで並べない。 */
.fm-shopfold {
  margin-top: 28px; padding-top: 16px;
  border-top: 2px dotted var(--fm-line-strong);
}
.fm-shopfold > summary {
  cursor: pointer; min-height: 44px; display: flex; align-items: center;
  font: 700 1rem/1.5 var(--fm-font-body); color: var(--fm-ink);
  list-style: none;
}
.fm-shopfold > summary::-webkit-details-marker { display: none; }
.fm-shopfold > summary::before {
  /* 2026-09-07 独立レビュー U-8：**escape がほどけ、制御文字 U+0015 と「B8」が
     そのまま画面に出ていた**（「⊠B8」に見える）。`\25B8`（▸）が正しい。
     `\b` → U+0008、`\u0000` → NUL と同じ壊れかたで、3度目である。
     **fm.css が制御文字の検査に入っていなかったため見逃していた。**検査へ追加した。 */
  content: "\25B8"; margin-right: 8px; color: var(--fm-ink-2);
}
.fm-shopfold[open] > summary::before { content: "\25BE"; }
.fm-shopfold-lead { margin: 4px 0 12px; color: var(--fm-ink-2); font-size: .875rem; }


/* 店舗の利用条件（食事条件ではない）。空港の出発制限エリアなど。
   **外部導線より前**に置き、見落とされないよう限定より目立たせる（2026-09-07 AV-02）。 */
.fm-usenote {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 10px 0 0; padding: 10px 12px;
  border: 2px solid var(--fm-line-ink); border-radius: var(--fm-r-sm);
  background: var(--fm-bg-sunk);
  font-size: .875rem; line-height: 1.7; color: var(--fm-ink); font-weight: 700;
}
.fm-usenote svg { flex: none; margin-top: 3px; }


/* 条件の行に出す対象メニュー名。**別の行**にして、条件・範囲と混ざって読めないようにする
   （「公式情報で確認済み対象：…」と続けて読めてしまうため）。 */
.fm-okchip-target,
.fm-basis-target { display: block; margin-top: 2px; font-weight: 400; }
/* 訳がまだ無いことわり（OP-M7）。**対象の名前より弱く、しかし読める強さで。** */
.fm-okchip-jaonly {
  display: block; margin-top: 2px; font-weight: 400; font-size: .75rem;
  color: var(--fm-ink-2);
}

/* ---------------------------------------------------------------- 検索後の絞り込み（2026-09-11 追加指示5）
   初期画面に市区町村を大量に並べない代わりに、**結果を見てから**絞れるようにする。
   出すのはいまの結果に実際にある地域だけなので、押して0件になることがない。 */
.fm-narrow { margin: 0 0 16px; }
.fm-narrowh { margin: 0 0 8px; font-size: .8125rem; font-weight: 700; color: var(--fm-ink-2); }
.fm-narrowlist { display: flex; flex-wrap: wrap; gap: 8px; }
.fm-narrowitem {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 0 12px;
  border: 1px solid var(--fm-line); border-radius: 999px;
  background: var(--fm-surface); color: var(--fm-ink);
  font-size: .875rem; text-decoration: none;
}
.fm-narrowname { font-weight: 700; }
.fm-narrown {
  min-width: 22px; padding: 0 6px; border-radius: 999px;
  background: var(--fm-surface-2); color: var(--fm-ink-2);
  font-size: .75rem; text-align: center;
}
@media (hover: hover) {
  .fm-narrowitem:hover { background: var(--fm-hover-bg); border-color: var(--fm-hover-line); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
}
.fm-narrowitem:active { transform: translateY(1px); }

/* 注意書きが2件以上あるとき、印を1つにしてまとまりとして見せる（2026-09-12 M-5）。
   **注記の文は1つも省いていない。**見た目だけをまとめる。 */
.fm-card-caveats { align-items: flex-start; }
.fm-card-caveats > ul { margin: 0; padding-left: 1.1em; display: grid; gap: 3px; }
.fm-card-caveats > ul > li { list-style: disc; }

/* 参考枠の節（2026-09-12）。
   **上に候補一覧があるときだけ**、二層目と同じ区切り罫を出す。
   参考枠しか無い画面では h1 が節の見出しを兼ねるので、区切りは置かない。 */
.fm-tier3-sep { margin-top: 32px; padding-top: 20px; border-top: 2px dashed var(--fm-line-strong); }

/* ============================================================
   F-05（2026-09-13）：同じチェーンの支店を1枚にまとめたカード。
   **1件ずつのカードと見分けがつく**ようにし、支店は開いたときだけ出す。
   ============================================================ */
.fm-card-chain .fm-chain-n { margin: 2px 0 0; font-weight: 700; }
.fm-card-chain .fm-chain-state { margin: 6px 0 0; font-size: .875rem; color: var(--fm-ink-2); }
.fm-chain-fold { margin: 10px 0 0; }
.fm-chain-fold > summary {
  display: inline-flex; align-items: center; min-height: 44px;
  cursor: pointer; color: var(--fm-link); text-decoration: underline; text-underline-offset: 3px;
  font-size: .9375rem;
}
@media (hover: hover) {
  .fm-chain-fold > summary:hover { color: var(--fm-ink); background: var(--fm-hover-bg); }
}
.fm-chain-list { margin: 4px 0 0; padding: 0 0 0 2px; list-style: none; }
.fm-chain-list > li { border-top: 1px solid var(--fm-line); }
.fm-chain-list > li a {
  display: flex; align-items: center; min-height: 44px; gap: 8px;
  color: var(--fm-link); text-decoration: underline; text-underline-offset: 3px;
}
.fm-chain-area { color: var(--fm-ink-3); font-size: .8125rem; }

/* ============================================================
   必須の表示（2026-09-13・Issue #15 コメント 5650151968）

   よしさんの提案：見出しの末尾に印があれば必須だと分かる。
   **色だけで伝えない。**語（必須）＋形（角の丸い枠）＋記号（*）の三つで示す。
   **赤いエラー表示（`.fm-need` の `--fm-recheck-ink` ＋▲）とは別の見た目**にして、
   初期表示が「まちがい」に見えないようにする。
   確認済みの緑（`--fm-verify-ink`）も使わない（確認の状態と混ざるため）。
   ============================================================ */
.fm-blockh .fm-req {
  display: inline-flex; align-items: center; gap: 2px;
  margin-left: 8px; padding: 0 8px;
  border: 1px solid var(--fm-line-strong); border-radius: var(--fm-r-pill);
  background: var(--fm-bg-sunk); color: var(--fm-ink);
  font: 700 .75rem/1.7 var(--fm-font-body);
  vertical-align: middle; white-space: nowrap;
}
.fm-blockh .fm-req-mark { font-size: .8125rem; line-height: 1; }
/* 見出しが長い言語でも折り返せるようにする（はみ出させない） */
.fm-blockh { display: flex; flex-wrap: wrap; align-items: center; gap: 0 4px; }

/* 修正・閉店報告の入口（正本 `:48`）。**主要行動と同じ強さにしない**。
   行き先が決まるまでは画面に出ない（`fm.core.js` の `FM_REPORT_URL` が空）。
   操作できる高さ44pxは、上下の余白で確保する（`.claude/rules/ui.md`）。 */
.fm-report { margin: 20px 0 0; font-size: .8125rem; }
.fm-report a {
  display: inline-block; padding: 12px 4px; min-height: 44px; box-sizing: border-box;
  color: var(--fm-ink-2);
}
@media (hover: hover) {
  .fm-report a:hover { background: var(--fm-hover-bg); }
}

/* 2026-09-21 他サービスの掲載（正本 v1.20 §4A-3）。
   **紹介情報と見分けがつくようにする。**色だけで区別しない——
   見出しの語が違い（「他のサービスに掲載あり」）、未確認の1行が必ず付く。
   ここでは「まだ確認していない」ことを、地の色と左の線で**形でも**示す。 */
.fm-mention-dir { background: var(--fm-noinfo-bg, #f6f4f1); border-left: 3px solid var(--fm-noinfo-ink, #8a8178); }
.fm-mention-dir-note { display: flex; gap: 6px; align-items: flex-start;
  margin: 4px 0 0; font-size: 0.86rem; color: var(--fm-noinfo-ink, #8a8178); }
.fm-mention-dir-note svg { flex: 0 0 auto; margin-top: 2px; }

/* ---- No.1 の表示（2026-09-23 決定§1〜§3）------------------------------------
   トップは検索の下に1行だけ（最初の操作を妨げない）。根拠は調査方法のページの表で開示する。
   表はスマートフォン幅で横にはみ出すので、表だけを横に送れる枠に入れる（ページ全体は横に送らない）。 */
.fm-no1line { margin: 18px 0 0; font-size: .9375rem; color: var(--fm-ink-2); overflow-wrap: anywhere; }
.fm-no1line a { display: inline-block; min-height: 44px; line-height: 44px;
  color: var(--fm-link); text-decoration: underline; text-underline-offset: 3px; }
.fm-tablewrap { overflow-x: auto; max-width: 100%; margin: 8px 0 16px; }
.fm-no1tab { border-collapse: collapse; font-size: .875rem; min-width: 100%; }
.fm-no1tab th, .fm-no1tab td { border: 1px solid var(--fm-line); padding: 6px 8px; text-align: left; vertical-align: top; }
.fm-no1tab thead th { background: var(--fm-surface-2); font-weight: 700; }
.fm-no1tab th[scope="row"], .fm-no1tab td { white-space: nowrap; }
.fm-no1tab td:last-child { white-space: normal; }
.fm-no1how, .fm-no1res { padding-left: 1.2em; margin: 4px 0 16px; }
.fm-no1res li { margin: 0 0 10px; }
.fm-no1tab thead th { white-space: nowrap; }
.fm-no1how li { margin: 0 0 10px; }
.fm-no1how-row { display: block; font-size: .875rem; color: var(--fm-ink-2); overflow-wrap: anywhere; }

/* ---- 2026-09-23 初見ブラインド視覚レビューへの対応 ------------------------------
   M4：紹介カードの記事件数の行が既定の大きさ（16px）で、確認済みの「対象：」（13px）より目立っていた。
       **確認できていない側を、確認済みより強く見せない。** */
.fm-mention-n { margin: 4px 0 0; font-size: .8125rem; color: var(--fm-ink-2); }
/* M10：件数の行が「紹／介」と語の途中で折り返していた。語の途中では折らず、区切り（空白・記号）で折る。
   長い語が1行に収まらないときだけ、どこでも折る（はみ出しを作らない）。 */
.fm-candbreak { word-break: keep-all; overflow-wrap: anywhere; }
/* M2・m4：他サービスの掲載の枠を、紹介情報（ベージュの破線）と**形で**見分けられるようにする。
   灰色の細い実線の枠＋左の太線。内側に余白を取る（縦線に文字が付いていた）。 */
.fm-mention-dir {
  background: var(--fm-surface); border: 1px solid var(--fm-line-strong);
  border-left: 4px solid var(--fm-noinfo-ink, #8a8178); border-radius: 8px; padding: 8px 12px;
}
/* M6：提供形態（「テイクアウトで確認（店内で食べられるかは未確認）」など）が淡く小さく、目立たなかった。
   一緒に店で食べることが目的なので、範囲の札と同じ強さの枠にする（色だけでなく線の太さでも）。 */
.fm-chan { border: 1.5px solid var(--fm-line-strong); font-size: .8125rem; color: var(--fm-ink); }

/* 2026-09-24 アクセス解析の同意（fm.consent.js）。**画面下に固定しない**（検索ボタンを隠さない）。
   ヘッダの下に、流れの中で置く。選ぶと消える。ページの下の「解析の設定」から選び直せる。 */
.fm-consent { margin: 8px auto 0; max-width: 760px; padding: 12px 16px; background: var(--fm-surface);
  border: 1px solid var(--fm-line-strong); border-radius: 10px; }
.fm-consent-h { margin: 0 0 4px; font-size: 1rem; }
.fm-consent-b { margin: 0 0 8px; font-size: .875rem; color: var(--fm-ink-2); }
.fm-consent-btns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fm-consent-btns .fm-btn { min-height: 44px; }
.fm-consent-link { max-width: 760px; margin: 8px auto 24px; padding: 0 16px; font-size: .875rem; color: var(--fm-ink-2); }
.fm-linkbtn { min-height: 44px; padding: 0; background: none; border: 0; color: inherit; font: inherit;
  text-decoration: underline; cursor: pointer; }