/* faq.css — 質問チャット(v61 最小化)
 *
 * 2026-09-04 発注者再却下(「デザイン、システムともにむだしかない」「使い勝手も悪くなっている」
 * 「無駄な情報が多い」)を受け、v60 の常設ヒーロー(紺パネル+英字eyebrow+大見出し+吹き出し+
 * 200pxの立ち絵)を撤去し、ヘッダー直下にテーマチップ・よくある質問・入力欄が並ぶ単一カラムの
 * 作業領域に組み直した(brief-v61)。チャットの相手アイコンは40pxへ縮め、見出しの隣に残す。
 * design.css → v60-base.css(共通の面・見出し・ボタン・チップ)→ このファイルの順で読む。
 */

/* 2026-09-04: design.css 側の --navy-900 重複定義(旧 #0b1730)は F が整理済み
 * (:root で #10203f 一本化、grep -n "navy-900" public/assets/css/design.css で確認済み)。
 * このページ専用の一時上書きは不要になったため削除した。 */

/* The server marker exists before scripts or contact data are available.
   Operator-generated clinic buttons have no legacy ID and remain visible. */
html[data-feature-instance] .faq-clinic-switch [id^="btn-clinic-"] { display: none; }

/* 欧文と数字だけこのサブセットを当てる(unicode-range: ASCII)。旧サブセット
   noto-sans-jp-skin-v28 は肌診断のUI文言しか収録しておらず、和文に当てると
   data/faq-kb.json の「劣・務・衣・腋・純」が欠落して1語の中で書体が割れたため、
   和文は system font へ逃がしていた。
   2026-09-04(v60・納品前検査): 新サブセット noto-sans-jp-v60.woff2(cmap 2,858字)
   を fontTools で実測したところ、faq/index.html・public/faq/faq.js・data/faq-kb.json
   の和文の欠落は 0 字(faq-kb.json の未収録 23 字はすべて絵文字で、どのみち
   端末の絵文字フォントへ落ちる)。逃がす理由が消えたので、下の body.faq-page では
   --font を全画面共通の var(--font-sans) に戻す。この @font-face は欧文専用として
   残す(faq-entry-v31 が参照を固定)。 */
@font-face {
  font-family: "Davide FAQ Noto Sans JP";
  /* 2026-09-04(v60・基盤レーン許可の1箇所置換): 参照先のみ新フォント
     (noto-sans-jp-v28は削除済み)へ更新。family名・weight範囲・unicode-range・
     和文のsystem fontへの逃がし方はこのファイル(質問チャットレーン所有)の
     判断のまま変えていない。 */
  src: url("../assets/fonts/noto-sans-jp-v60.woff2") format("woff2");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  unicode-range: U+0000-007F;
}

/* 2026-09-04(v61、発注者「デザイン、システムともにむだしかない」への対応): 常設の紺ヒーロー
   +2カラム(左400+右760)を廃し、単一カラムの作業領域にした(brief-v61 §1-1/§1-7「作業領域の幅は
   720〜960px」)。テストの固定値ではないので自由に選べる数値のうち、チャット吹き出し・カード類の
   可読性が最も落ち着いた880pxにする。 */
:root { --page-max: 880px; }

/* 2026-09-04(v60・納品前検査): 書体を5画面で1本にそろえる。直前まで --font は
   "Davide FAQ Noto Sans JP"(ASCIIのみ)だったため、可視和文 1,627 字のうち 1,502 字
   (92%)が端末の system font で描かれ、var(--font-sans) を明示している 125 字
   (.v60-lead / #faq-input / .faq-send-btn 等)だけが自前配信の Noto Sans JP という
   混在になっていた(実測 2026-09-04、Playwright の書体センサス)。ヘッダーの
   「機能一覧」まで他画面と別書体になる。欠落 0 字を確認済みなので --font-sans に戻す。 */
body.faq-page {
  --font: var(--font-sans);
  --font-display: var(--font);
}

/* 2026-09-05(v62・司令塔指摘「body.xxx{background:…}の残骸が帯を消す」への対応):
   直前まで上のルールに background: var(--paper) を持たせていた。body 自身は
   position:relative だけで z-index を持たず新しい重なり文脈を作らないため、
   body の背景は body::before(帯、z-index:-1)より後の通常の重なり順で塗られ、
   不透明な背景を body に置くと帯を覆い隠して消してしまう(home.css で既出の事故と
   同じ原理)。帯を出すため body 自身には不透明な背景を持たせない(v60-base.css の
   共有 body{background:transparent} のままにする)。 */

/* JavaScript 無効時の1行案内(<noscript> の中身)。body の背景をあてにできなくなった
   (帯が透けるため)ので、この案内自身に白地を持たせて文字とのコントラストを担保する。 */
.faq-page .faq-noscript {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--gutter-sp);
  background: var(--paper);
  color: var(--ink);
  font-weight: 700;
}
@media (min-width: 640px) { .faq-page .faq-noscript { padding-inline: var(--gutter); } }

/* ══════════════════════════════════════════════════════════════════════
   1. 単一カラムの作業領域(2026-09-04 v61、旧: 常設の紺ヒーロー+2カラム)
   ══════════════════════════════════════════════════════════════════════ */
.faq-app { padding: 0; }
/* 2026-09-04(v61・座長指摘「空白約150px」): この下端(旧32px/48px)は入れ子の
   .faq-panel の下端padding(直後)と足し合わさり、閉じた「質問例・施術後の案内」
   からフッターまでの空白を要求以上に広げていた。ここは0にする(以前はここに
   .faq-analytics-note の margin-top を足していたが、その後の座長判定で
   details 自体を .v61-foot の中へ移したため、質問例〜フッターの間隔は
   .v61-foot 自身の margin-top(v60-base.css、共有・変更対象外)だけになった)。 */
.faq-shell { padding-block: 0; }

/* 見出し+チャットの相手アイコン。v61ではごく小さく残していた(40px)が、v62(発注者
   「画像が少ない」への対応、brief-v62 §3 Cレーン)で80pxへ拡げ、.v62-mascot(共有部品、
   v60-base.css)の読み込み時の跳ね+呼吸を足す。寸法は test-constraints.md の「🔄寸法」
   区分(alt/aria-hidden/data-visual-guide-image/class名は🔒契約のまま、v62-mascot は追加)。
   test/visual-customer-v30.test.js・test/faq-entry-v31.test.js の width/height 期待値も
   80pxへ更新済み。 */
.faq-entry-heading { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* v76(2026-09-09): 見出しの長さは院ごとに違う。flex-wrap は「入らなければ次の行へ」なので、
   長い見出しだと案内役だけが 1 行目に取り残される(ジュエルの 375px で実測)。見出しを
   幅 0 から伸びる項目にして、案内役の右で折り返させる。既定の院の見出しは元から 1 行に
   収まるので見え方は変わらない(375/1280 で実測、スクリーンショットで確認)。 */
.faq-entry-heading > .faq-question-title { flex: 1 1 0; min-width: 0; }
.faq-entry-art {
  display: block;
  flex: 0 0 auto;
  width: 80px;
  height: 80px;
  object-fit: contain;
}
.faq-entry-art.is-unavailable { display: none; }
/* 2026-09-15(発注者「なぞのアニメーション…意味が分からない」): 回答到着の合図
   だった faq-mascot-react(マスコットの跳ね反応)を削除。faq.js 側の
   .is-reacting 付与も無害化済み(該当行のコメント参照)。 */
.faq-entry-art-fallback {
  flex-basis: 100%;
  margin: 0;
  padding: 0;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 12px;
  line-height: 1.5;
}
.faq-entry-art-fallback[hidden] { display: none; }

/* 2026-09-04夜(v62、brief-v62 §3 Cレーン「PCは右にcard-chat.webp」): 見出し+リード文の
   横に、PCだけ挿絵を添える。SPでは画像を出さず(帯・浮いた白カード自体で「背景が見える」
   要件は満たすため)、これまでの単一カラムの縦積みのまま(brief-v61 §1-7 の作業領域幅を
   崩さない)。 */
/* v80 是正 P-01(2026-09-14): 上の v62 の判断(SPは画像を出さない)を改める。
   実測 2026-09-14: 挿絵は 1280 で 240x180、375/768 は display:none = 0x0(両院)。
   発注者は v62/v65/v66 で繰り返し「画像が少ない」「イラストをもっとわかりやすく」と
   言っているので、SP/タブレットだけ絵が消えるのは意図に反する。
   参考(自分で開いて実測): https://www.mens-rize.com/qa/ の「よくある質問」の絵は
   375 で 291x150・1280 で 547x306(SP でも消さず縮めて出す)、
   https://gorilla.clinic/qaa は SP 専用の切り出し qaa__sp.jpg を 375x250 で出す。
   一方 https://faq.orbis.co.jp/ は両幅とも入口の絵を持たない。3 社中 2 社が SP でも残す。
   ただし v60/v61 の判定(大きい立ち絵・ヒーローは不要)を崩さないため、絵は PC と同じ
   240x180 のカード大のままにし、横に並べず本文の下へ 1 つ置く(単一カラムの縦積みは維持)。
   .v62-art が持つ pop+float の動きもそのまま SP に出る。 */
/* 900px 以上の指定は v62 のまま(折り返さず横並び)。実測 2026-09-14: 折り返しを
   全幅に効かせると、リード文の長い院(ジュエル)は 1280 でも絵が下へ落ちてしまう
   (jewel /faq/ 1280 が横並び → 縦積みになった)ので、折り返しは 899px 以下だけにする。 */
.faq-intro { display: flex; align-items: center; gap: 20px; }
.faq-intro-copy { flex: 1 1 auto; min-width: 0; }
.faq-intro-art { display: block; }
@media (max-width: 899px) {
  .faq-intro { flex-wrap: wrap; }
  .faq-intro-copy { flex: 1 1 100%; }
  .faq-intro-art { width: min(240px, 64vw); margin-inline: auto; }
}
.faq-intro-art img.is-unavailable { display: none; }

/* ── パネル本体(白地の.v62-card。v61時代はここが単なる素通りの器で、左右の余白は
   祖先.faq-shellのgutter任せ・下端paddingは0だった。v62でこの要素自体が縁取り+影を
   持つ1枚のカードになったため、内側の左右余白(祖先のgutterはカードの外=帯が覗く
   側へ回った)と下端の余白(カードの丸みに中身が触れないぶん)を自前で持つ。 ── */
.faq-panel { padding: 28px var(--gutter-sp) 28px; background: var(--paper); }
@media (min-width: 900px) { .faq-panel { padding: 40px var(--gutter) 40px; } }
/* 2026-09-05(v62・司令塔判定): 共有.v62-liftの負のマージンをリーダーが外した
   (ヘッダー下に潜って案内役の頭が切れる事故のため、v60-base.cssは今
   position/z-indexだけを持つ)。代わりにこのページ側の通常の上余白で
   カード上辺をヘッダーの32px下(PC)/24px下(SP)から始める(負のマージンは
   足さない)。帯のPC/SP切替と同じ767px境界に揃える。 */
.faq-panel.v62-lift { margin-top: 24px; }
@media (min-width: 768px) { .faq-panel.v62-lift { margin-top: 32px; } }
.faq-question [hidden] { display: none !important; }

/* 祖先(.faq-panel、白地)を明示して静的コントラスト検査を通す
   (既存の .faq-panel .faq-privacy-brief と同じ理由)。 */
.faq-question-title { margin: 0; }
.faq-panel .faq-question-title {
  color: var(--gold-text);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
.faq-lead { max-width: 46em; margin: 6px 0 0; color: var(--ink-2); }
/* v80 市場比較 M-1: 入口の裏づけ 1 行(faq.js の renderTrustLine が入れる)。
   リード文より一段静かに、ただし読み飛ばされない太さで置く。 */
.faq-trust { max-width: 46em; margin: 8px 0 0; color: var(--ink-2); font-size: 13px; font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   2. よくある質問(カテゴリチップ + 代表カード)
   ══════════════════════════════════════════════════════════════════════ */
.faq-representative { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-1); }
.faq-section-heading { display: block; margin-bottom: 14px; }
/* 小見出し。§3-2 の h2 36px は全幅セクション用の値で、会話カラム内の小見出しには
   過大なため h3 相当(PC 22px / SP 19px)に置く。15px は本文より小さく階層が潰れていた。 */
.faq-section-heading h2 {
  margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 19px; font-weight: 700;
  letter-spacing: 0;
}
@media (min-width: 900px) { .faq-section-heading h2 { font-size: 22px; } }
.faq-section-heading > p { max-width: 46em; margin: 4px 0 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
/* 祖先を明示した複合セレクタで色を書く(.faq-time-entry が cream地を own宣言しているため、
   静的コントラスト検査が祖先の地色を解ける。単独セレクタだと想定しうる全ての面
   (--surface-3 = e9eef8 を含む)に対して検査され、そこだけ4.32:1で不足するため)。 */
.faq-time-entry .faq-section-kicker { margin: 0 0 6px; color: var(--gold-text); font-size: 12px; font-weight: 700; letter-spacing: .1em; }

/* カテゴリチップ: navy-100地のピル、選択時 navy-700塗り(design-brief §3-5)。
   実操作要素なのでアクセシビリティ下限(brief-common 最重要契約3)の 44px を保つ。 */
.faq-popular-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.faq-popular-topics[hidden] { display: none; }
/* v84 依頼 13-2(2026-09-16): 畳みの釦は 560px 以下だけ出す。
   561px 以上は札が折り返しで全部並ぶので、釦は出さない(従来どおり)。 */
.faq-topics-toggle { display: none; }
/* v80 是正 J-12(2026-09-14): 長い分野名(「肌管理メニュー(ピーリング・ダーマペン)」)が
   375 で「ン)」の 2 文字だけ 2 行目に落ちていた(実測 293x44、1 行目 17 文字・2 行目 2 文字)。
   text-wrap: balance は短い塊の行長をそろえる指定で、最後の行に 1〜2 文字だけ残るのを防ぐ。
   対応しないブラウザでは今までどおりの折り返しに戻るだけで、崩れない。
   参考: https://faq.orbis.co.jp/(オルビス よくあるご質問)のタグ検索の見出し語も、
   折り返す場合は行の長さが近くなるように置かれていた。 */
.faq-popular-topic {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--r-pill);
  background: var(--navy-100); color: var(--navy-700);
  font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1.3;
  text-wrap: balance;
  transition: background var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.faq-popular-topic.active { background: var(--navy-700); color: #ffffff; box-shadow: none; }
@media (hover: hover) { .faq-popular-topic:hover { background: var(--navy-500); color: #ffffff; } }

/* 代表カード: 1列・各64px以上・1px罫・左にQの金マーク(design-brief §4-3)。 */
.faq-representative-items { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.faq-question-chip {
  justify-content: flex-start; min-width: 0; min-height: 48px; white-space: normal;
  border: 1px solid var(--line-1); background: var(--paper); color: var(--ink);
  text-align: left; border-radius: var(--r-card); font-weight: 700;
}
.faq-representative-chip {
  position: relative; width: 100%; min-height: 64px; padding: 14px 20px 14px 52px;
  font-size: 16px; line-height: 1.5;
}
.faq-representative-chip::before {
  content: "Q"; position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-serif); font-size: 22px; font-weight: 700; color: var(--gold-text);
}
@media (hover: hover) { .faq-question-chip:hover { border-color: var(--navy-500); background: var(--navy-100); } }

/* ══════════════════════════════════════════════════════════════════════
   3. 会話の上の操作列
   ══════════════════════════════════════════════════════════════════════ */
.faq-chat-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: 22px; }
.faq-conversation-status { margin: 0; flex: 1 1 200px; min-width: 0; color: var(--ink-2); font-size: 13px; line-height: 1.5; font-weight: 700; }
/* 2026-09-04(v61・座長指摘「注記の連打」): 会話が始まる前(#chat-log が hidden の間)は
   「会話はこの画面を閉じると消えます。」が #faq-privacy-brief・最小フッターの注記と
   縦に並んで重く見えた。id・aria-live・文言(復元/エラー時の案内)は faq.js のまま変えず、
   会話が始まってから(#chat-log の hidden が外れてから)だけ見た目に出す。 */
body.faq-page:has(#chat-log[hidden]) .faq-conversation-status { display: none; }
.faq-chat-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; }
#faq-reset { flex: 0 0 auto; }

/* ══════════════════════════════════════════════════════════════════════
   4. 会話欄 + コンポーザー(design-brief §4-3: 下端固定・入力52px・送信ピル120x52)
   ══════════════════════════════════════════════════════════════════════ */
/* 会話欄と入力欄の囲み。position:sticky の入力欄は「包含ブロックの外へは出られない」
   ため、この囲みが上端の止め木になる。 */
.faq-chat-dock { display: flex; flex-direction: column; margin-top: 14px; }
.faq-chat-viewport { position: relative; display: flex; order: 1; }
.faq-composer-row { order: 3; }
/* 2026-09-04(v61・座長指摘「注記の連打」): 残すのは入力欄の直下の #faq-privacy-brief
   だけにする。DOM 上は #faq-form の後ろ(契約、変えない)のまま、見た目だけ
   コンポーザーの後ろ(=入力欄の直下)へ動かす(旧: コンポーザーの上)。 */
.faq-privacy-brief { order: 4; }
/* #faq-start-note(医療案内)は最小フッターの注記1行へ文言を寄せたため、画面上の
   重複表示はやめる。aria-describedby="faq-start-note" の参照先として読み上げには
   残すため、display:none ではなく視覚的に隠す(#faq-input-help と同じ手法)。
   id・文言・DOM順は faq.js の契約のまま変えない。 */
.faq-start-note {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

.chat-log {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px;
  width: 100%; min-height: 140px; max-height: clamp(240px, 42vh, 520px);
  margin: 0; padding: 18px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain;
  scroll-margin-top: calc(var(--header-height) + 48px);
  border: 1px solid var(--line-1); border-radius: var(--r-card);
  background: var(--cream);
}
.chat-log > * { min-width: 0; }
/* 2026-09-15: fill-mode を both→backwards に(実測: bothは完了後もfinished状態で
   document.getAnimations()に残り続けるため。to側は既定値と同じなので表示は変わらない)。 */
.chat-log .bubble { overflow-wrap: anywhere; max-width: 90%; border-radius: var(--r-card); box-shadow: none; animation: faq-bubble-in .24s var(--ease-out) backwards; }
.chat-log .bubble.user { justify-self: end; width: fit-content; border: 0; background: var(--navy-700); color: #ffffff; font-weight: 700; padding: 12px 16px; }
.chat-log .bubble.bot { justify-self: start; border: 1px solid var(--line-1); background: var(--paper); color: var(--ink); }
.chat-log .bubble.bot { scroll-margin-top: 76px; }
.chat-log .faq-error { border-color: var(--err); background: var(--err-soft); }
/* 2026-09-15: 8px 上限(画面の切替フェード)に合わせ 12px→8px。 */
@keyframes faq-bubble-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 案内役の顔(回答者アバター)。greet を使う(design-brief §8)。
   v76(2026-09-09): 差し替え口を変数にした。案内役は全院で同じ人物(発注者確認)なので
   既定値は共用の v50 の素材のまま。院ごとに変えるときだけ brand-<院>.css で
   --faq-mascot-greet / --faq-mascot-think を上書きする(そちらは /assets/css/ から
   配信されるので ../images/… と書く。url() は宣言した側からの相対で解決される)。 */
.faq-page {
  --faq-mascot-greet: url("../assets/images/v50/mascot-greet.webp");
  --faq-mascot-think: url("../assets/images/v50/mascot-think.webp");
}
.chat-log .bubble.bot .bb-label {
  display: flex; align-items: center; gap: 8px; min-height: 26px; margin-bottom: 8px;
  color: var(--navy-700); font-size: 13px; font-weight: 700; letter-spacing: .02em;
}
.chat-log .bubble.bot .bb-label::before {
  flex: 0 0 26px; width: 26px; height: 26px; border: 1px solid var(--line-1); border-radius: var(--r-pill);
  background-color: var(--navy-100); background-repeat: no-repeat; background-position: 50% 12%; background-size: 300%;
  /* 2026-09-03(v50): 案内役を v50 の挨拶ポーズへ揃えた。 */
  background-image: var(--faq-mascot-greet, url("../assets/images/v50/mascot-greet.webp"));
  content: "";
}
/* v113: AI がまとめた答えの見出しは札にする(固定の答えの「Q&Aの回答」と見分ける)。形は .faq-guidance-label にそろえる。 */
.chat-log .bubble.bot .bb-label .bb-label-ai {
  display: inline-flex; align-items: center; min-height: 24px; padding: 1px 10px;
  border: 1px solid var(--navy-600); border-radius: var(--r-pill); background: var(--navy-100); color: var(--navy-700);
  font-size: 12px; line-height: 1.35;
}
/* 回答待ちは3点の呼吸。案内役の顔は考えているポーズ(think)に差し替える。 */
.chat-log .bubble.bot:has(.faq-typing) .bb-label::before { background-image: var(--faq-mascot-think, url("../assets/images/v50/mascot-think.webp")); }
.faq-typing { display: inline-flex; align-items: center; gap: 5px; }
.faq-loading { display: flex; align-items: center; gap: 10px; }
.faq-loading .bb-label { margin: 0; }
.faq-typing-dot { width: 7px; height: 7px; border-radius: var(--r-pill); background: var(--navy-500); opacity: .3; animation: faq-typing-breathe 1.4s var(--ease-out) infinite; }
.faq-typing-dot:nth-child(2) { animation-delay: .18s; }
.faq-typing-dot:nth-child(3) { animation-delay: .36s; }
@keyframes faq-typing-breathe { 0%, 100% { opacity: .28; transform: scale(.8); } 35% { opacity: 1; transform: scale(1); } }

/* 見出しの二重読み上げ防止(「Q&Aの回答」の直下に「回答」が出るのを目からは消す)。 */
.faq-answer-content > .faq-answer-section:first-child > .faq-answer-section-title {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.faq-answer-content { display: grid; gap: 10px; }
.faq-answer-section { padding-top: 10px; border-top: 1px solid var(--line-1); }
.faq-answer-section:first-child { padding-top: 0; border-top: 0; }
.faq-answer-section-title { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-2); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.faq-answer-section-title::before { width: 3px; height: 12px; border-radius: 0; background: var(--gold-line); content: ''; }
.faq-guidance .faq-answer-section-title::before { background: currentColor; }
.faq-answer-section p { margin: 0; color: var(--ink); font-size: 16px; line-height: 1.8; font-weight: 500; }
.faq-answer-section.is-caution p { color: var(--ink-2); font-size: 13px; }
.faq-answer-section.is-source p { color: var(--ink-2); font-size: 13px; }

/* 注意ブロック。色は「面」ではなく左罫+印+見出しに集める(design-brief §9-3の反対)。 */
.faq-guidance { padding: 14px 16px; border: 1px solid var(--line-1); border-left-width: 4px; border-radius: var(--r-card); background: var(--paper); }
.faq-guidance--general { border-left-color: var(--info); }
.faq-guidance--staff-review { border-left-color: var(--warn); border-left-width: 5px; background: var(--warn-soft); }
.faq-guidance--urgent { margin-top: 2px; padding: 15px 15px 14px; border-color: var(--err); border-left-width: 5px; box-shadow: 0 0 0 1px rgba(181, 53, 64, .16); }
.faq-guidance .faq-answer-section-title { display: inline-block; margin-right: 8px; }
.faq-guidance--staff-review .faq-answer-section-title { color: var(--text-status-warning); }
.faq-guidance--urgent .faq-answer-section-title { color: var(--text-status-danger); }
.faq-guidance .faq-answer-section-title::before {
  display: inline-block; width: 17px; height: 17px; margin-right: 6px; border-radius: 0;
  vertical-align: -4px; background: center / 17px 17px no-repeat;
}
.faq-guidance--general .faq-answer-section-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310203f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.2'/%3E%3Cpath d='M12 11v6'/%3E%3Cpath d='M12 7.4h.01'/%3E%3C/svg%3E");
}
.faq-guidance--staff-review .faq-answer-section-title::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238b5b13' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 1.6 21.2h20.8z'/%3E%3Cpath d='M12 10v4.4'/%3E%3Cpath d='M12 17.8h.01'/%3E%3C/svg%3E");
}
.faq-guidance--urgent .faq-answer-section-title::before {
  width: 19px; height: 19px; background-size: 19px 19px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b53540' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.4 1.6 21.2h20.8z'/%3E%3Cpath d='M12 10v4.4'/%3E%3Cpath d='M12 17.8h.01'/%3E%3C/svg%3E");
}
.faq-guidance-label { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 10px; border-radius: var(--r-pill); background: var(--navy-100); color: var(--navy-700); font-size: 12px; font-weight: 700; line-height: 1.35; vertical-align: 1px; }
.faq-guidance--staff-review .faq-guidance-label { color: var(--text-status-warning); }
.faq-guidance--urgent .faq-guidance-label { color: var(--text-status-danger); border: 1px solid rgba(181, 53, 64, .35); }
.faq-guidance-detail { margin-top: 8px !important; overflow-wrap: anywhere; }
.faq-answer-section.faq-guidance--urgent p { margin-top: 4px; color: var(--ink); font-size: 14px; font-weight: 700; }
.faq-guidance--urgent .faq-call-row { margin-top: 12px; }
.faq-guidance--urgent .faq-call-link { border-color: var(--err); font-weight: 700; }

/* 出典・関連の一覧 */
.faq-evidence-list { display: grid; gap: 7px; }
.faq-evidence-item { display: flex; align-items: flex-start; min-width: 0; gap: 9px; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); color: var(--ink-2); overflow-wrap: anywhere; font-size: 13px; }
.faq-evidence-item::before { flex: 0 0 15px; width: 13px; height: 16px; margin-top: 2px; border: 1px solid var(--navy-500); border-radius: 0; background: linear-gradient(135deg, var(--paper) 0 68%, var(--navy-100) 69%); box-shadow: inset 0 -3px 0 var(--navy-100); content: ''; }
.faq-evidence-item--site::before { border-radius: 50%; background: var(--navy-100); box-shadow: none; }
.faq-evidence-label { flex: 0 0 auto; white-space: nowrap; }
/* v79 是正 J-11(2026-09-14): 出典リンクの当たり判定が 23px しかなかった(1280 で 8 本)。
   インライン要素の上下 padding は行の高さを変えないので、見た目と行間はそのままに
   当たり判定だけを 45px(23+11+11)へ広げる。行の間隔(gap 7px + 隣の item の padding 10px
   = 17px)より小さいので、隣のリンクの判定とは重ならない。 */
.faq-evidence-link { display: inline; padding-block: 11px; color: var(--navy-700); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.faq-evidence-link:hover, .faq-evidence-link:focus-visible { color: var(--navy-900, var(--navy-700)); }
/* v81 (B): 出典一覧の下に、公式サイトの照合日を回答につき1行だけ添える(faq.js
   evidenceSection が、公式サイト由来の出典が1つでも checkedAt を持てば足す独立した
   1行。出典が複数でも checkedAt は KB 全体で共通の1値なので1回だけ=出典カードごと
   ではなく一覧の外に置く。PDF 由来だけの回答では出ない)。色は本文の出典と同じ
   --ink-2(#5b6478、この行の背景 --cream #f8f6f1 とのコントラスト比 5.49:1 で
   4.5:1 以上を確保)。文字は 12px 以上を保つ(市場比較 G9 で公開画面の最小文字を
   12〜13px と記録済み、11px は後退になるため使わない)。同じセクション内の
   `.faq-answer-section p`(margin:0)や `.is-source p` より確実に勝つよう、
   セクションの状態クラスまで含めて specificity を上げている。 */
.faq-answer-section.is-source.faq-evidence p.faq-evidence-checked {
  margin: 6px 0 0; padding: 0 12px; color: var(--ink-2); font-size: 12px; line-height: 1.4;
}
.faq-answer-more { overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); }
.faq-answer-more > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 9px 12px; cursor: pointer; color: var(--navy-700); font-size: 13px; font-weight: 700; list-style: none; }
.faq-answer-more > summary::-webkit-details-marker { display: none; }
.faq-answer-more > summary::after { content: '＋'; font-size: 16px; line-height: 1; }
.faq-answer-more[open] > summary { border-bottom: 1px solid var(--line-1); }
/* 「＋」と対になる記号は全角ハイフンマイナス(U+FF0D)にする。U+2212 は
   noto-sans-jp-v60.woff2 のサブセットに無く(fontTools で実測)、この1字だけ
   端末のフォントに落ちて太さと幅が「＋」と揃わない。 */
.faq-answer-more[open] > summary::after { content: '－'; }
.faq-answer-more-body { display: grid; gap: 9px; padding: 11px 12px; }

.faq-persona { margin-top: 12px; overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); }
.faq-persona > summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; padding: 10px 12px; cursor: pointer; color: var(--navy-700); font-size: 13px; font-weight: 700; }
.faq-persona[open] > summary { border-bottom: 1px solid var(--line-1); }
.faq-persona-count { flex: 0 0 auto; padding: 3px 9px; border-radius: var(--r-pill); background: var(--paper); color: var(--gold-text); font-size: 11px; font-weight: 700; }
.faq-persona-body { padding: 12px; }
.faq-persona-note { margin: 0 0 9px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.faq-persona-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.faq-persona-chip { min-height: 44px; padding: 8px 12px; font-size: 14px; font-weight: 700; border-radius: var(--r-card); border: 1px solid var(--line-1); background: var(--paper); color: var(--ink); }
.faq-persona-answer { min-height: 48px; margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--gold-line); background: var(--paper); color: var(--ink); font-size: 13px; line-height: 1.7; font-weight: 500; }

.faq-loading .bb-label, .faq-error-retry { margin-top: 9px; }
.faq-error-retry { min-height: 44px; }

/* v95 P-01: 料金の答えは「1 行 1 項目」で届くので、改行をそのまま行として見せる。
   畳みは行数で数えるため、畳んだ高さは今までどおり 4 行分。長い値や URL は枠の中で折る。 */
.faq-answer-text { white-space: pre-line; overflow-wrap: anywhere; }

/* 長い回答の折りたたみ */
.faq-answer-text.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
.faq-answer-expand { min-height: 44px; margin-top: 6px; font-size: 13px; font-weight: 700; color: var(--navy-700); background: none; border: 0; }

/* v82 A7/A8: 再表示と本文下の操作は44px以上。新しい動きは加えない。 */
.faq-entry-toggle, .faq-answer-tools .faq-answer-tool { min-width: 44px; min-height: 44px; }
/* 補助欄の内側でさらに幅を狭めず、既存の評価行が使える横幅を保つ。 */
.faq-answer-more > .faq-answer-tools { padding: 10px 0; }

/* 回答のコピーと役立ち評価 */
.faq-answer-tools { display: grid; gap: 6px; padding-top: 10px; border-top: 1px dashed var(--line-1); }
.faq-answer-tools-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* v80 是正 J-13(2026-09-14): 375 で「コピー」「役に立ちましたか はい」「いいえ」が 3 行に
   割れていた(実測 375: コピー y355 / はい y407 / いいえ y458 の 3 段)。原因は評価の塊自身が
   折り返していたこと。塊は折り返さず(1 かたまりとして扱う)、入らなければ塊ごと次の行へ送る。
   これで 375 は 2 行(コピー / 役に立ちましたか はい いいえ)、768 以上は 1 行になる。
   参考: https://faq.orbis.co.jp/ の Q&A 詳細「この情報はいかがでしたか？ 参考になった /
   参考にならない」も、問いと 2 つの釦を 1 かたまりで並べている。 */
/* v111 是正(2026-09-23、納品前の目視検査 中、直す前からある不具合): 320〜420px で
   「役に立ちましたか」が1字ずつ8行に縦積みになっていた(実測 320: 幅12px・8行。/faq/・
   /clinic/chat/ とも同じ)。原因は JX-M1 と同根(flex-shrink:0 の釦2つが縮まないぶんを
   ラベル1つが min-width:0 で全部引き受け、和文の既定の折返し= 文字と文字の間ならどこでも
   折れる、で1文字幅まで潰れていた)。ラベルは keep-all で語(この一続きの文)の途中では
   折れないようにし、この塊自体も(nowrap→wrap に変更)ラベルの最小幅(1行ぶん・約97px)を
   確保できないときは釦2つを次の行へ落とす(「コピー」との親子関係=このブロックが
   .faq-answer-tools-row の1項目である点は変えていないので JX-M1/J-13 の効果は変わらない)。 */
.faq-answer-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-left: auto; }
.faq-answer-feedback-label { min-width: 0; word-break: keep-all; overflow-wrap: normal; color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.3; }
.faq-answer-tool { min-height: 44px; padding: 6px 10px; font-size: 14px; font-weight: 700; border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--paper); color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.faq-answer-tool.is-selected { border-color: var(--navy-500); background: var(--navy-100); color: var(--navy-700); }
.faq-answer-tool[disabled] { opacity: 1; filter: none; cursor: default; }
.faq-answer-tool[disabled]:not(.is-selected) { border-color: var(--line-1); background: var(--cream); color: var(--ink-2); }
.faq-answer-tool-status { min-height: 18px; color: var(--ink-2); font-size: 12px; line-height: 1.5; }

/* 電話で相談する導線(緊急案内・未マッチ時) */
.faq-call-row { margin-top: 10px; }
.faq-call-row-label { margin-bottom: 6px; color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.5; }
.faq-call-links { display: flex; flex-wrap: wrap; gap: 8px; }
.faq-call-link {
  flex: 1 1 150px; min-width: 0; min-height: 44px; display: flex; gap: 2px 8px; padding: 8px 12px;
  flex-wrap: wrap; align-items: center; justify-content: space-between; border: 1px solid var(--line-1);
  border-radius: var(--r-card); background: var(--paper); color: var(--navy-700); font-size: 14px; font-weight: 700; text-decoration: none;
}
.faq-call-link > span { white-space: nowrap; }
@media (hover: hover) { .faq-call-link:hover { border-color: var(--navy-500); background: var(--navy-100); text-decoration: none; } }
.faq-call-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 新着の追従 */
.faq-new-answer {
  position: absolute; z-index: 4; bottom: 12px; left: 50%; min-height: 44px; padding: 9px 18px;
  border: 0; border-radius: var(--r-pill); background: var(--navy-700); color: #ffffff; font: inherit;
  font-size: 13px; font-weight: 700; line-height: 1.2; box-shadow: var(--shadow-float); cursor: pointer;
  /* 2026-09-15: fill-mode を both→backwards に(to側は上のtransform:translateX(-50%)と
     同じ値のため表示は変わらず、bothのfinished残留のみ回避)。 */
  transform: translateX(-50%); animation: faq-new-answer-in .2s var(--ease-out) backwards;
}
.faq-new-answer::after { margin-left: 7px; content: "↓"; }
@media (hover: hover) { .faq-new-answer:hover { background: var(--navy-900); } }
.faq-new-answer:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
@keyframes faq-new-answer-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ══════════════════════════════════════════════════════════════════════
   5. コンポーザー(design-brief §4-3: 入力52px角丸12、送信 navy-700 ピル120x52、
      音声トグルは入力欄左のアイコンボタン44px)
   ══════════════════════════════════════════════════════════════════════ */
.faq-composer-row {
  display: flex; align-items: flex-end; gap: 8px; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--line-1);
}
@media (min-width: 900px) {
  /* 2026-09-04(v60・座長指摘): 右カラムの下端に常時見える(design-brief「下端固定」)。
     以前は #faq-form 単体(.chat-input-bar、design.css既定)だけが sticky で、
     隣の音声アイコン釦は追従せず、初期描画で fold(1280×800)の外に切れていた。
     囲み(.faq-composer-row)ごと sticky にし、内側の重複 sticky は打ち消す。 */
  .faq-composer-row {
    position: sticky;
    bottom: 0;
    z-index: 5;
    /* 2026-09-04(v61・座長指摘): クレジット1行ぶんの上乗せ(旧: padding-top 26px/
       min-height 88px)は、クレジットを絶対配置で上へ逃がしていた名残。
       クレジットは .faq-speech-guide の並びへ戻した(上の order 指定)ため、
       ここでの上乗せは不要。base の padding-top:14px のままにし、
       min-height は釦44px・入力欄52px+枠1pxが収まる分だけに戻す
       (下の .chat-log 余白は旧 88px 基準のままでも、狭くなる方向なので安全)。 */
    min-height: 72px;
    background: var(--paper);
  }
  .faq-composer-row .faq-input-bar { position: static; }
  /* 2026-09-04(v60・納品前検査): sticky のコンポーザーは自分より前(=上)にある会話欄の
     上へせり上がるため、会話欄の下端 98〜124px が白い帯の裏に隠れ、届いたばかりの
     回答の末尾が読めなかった(実測 932/1024/1280/1366/1920 の全サイズ)。
     会話欄の中に同じ高さの余白を置くと、最終行までスクロールしたときに
     いちばん新しい吹き出しの下端がちょうどコンポーザーの上に来る。 */
  .chat-log { padding-bottom: 104px; }
  .faq-new-answer { bottom: 116px; }
}
/* 2026-09-04(v60・納品前検査): フォームに伸び代が無く、696px の右カラムのうち
   入力欄が 213px しか使えていなかった(送信釦の右に 175px の空白が残る)。
   その幅では初期表示のプレースホルダー「例：ヒゲ脱毛は何回くらい必要？」が 2 行に
   折り返し、min-height:52px の箱から下half分がはみ出して切れて見えていた
   (実測 全9サイズで scrollHeight 76〜100px > clientHeight 52px)。 */
.faq-input-bar { flex: 1 1 auto; min-width: 0; align-items: center; gap: 10px; padding: 0; background: none; box-shadow: none; }
.faq-input-bar[hidden] { display: none; }
.faq-suggest-wrap { position: relative; flex: 1; min-width: 0; }
.faq-suggest-wrap textarea { width: 100%; }
#faq-input {
  box-sizing: border-box; min-height: 52px; max-height: 140px; padding: 14px 18px; line-height: 1.5;
  background: var(--paper); border: 1px solid var(--line-1); border-radius: var(--r-card);
  color: var(--ink); font-family: var(--font-sans); font-size: 16px;
}
#faq-input::placeholder { color: var(--ink-2); }
#faq-input[readonly] { border-style: dashed; background: var(--cream); color: var(--ink-2); cursor: not-allowed; }
#faq-input:focus, #faq-input:focus-visible {
  border-color: var(--gold-line); outline: none; box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--gold-line);
}

.faq-suggest-listbox {
  position: fixed; z-index: 60; margin: 0; padding: 6px; overflow-y: auto; list-style: none;
  border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-float);
}
.faq-suggest-listbox[hidden] { display: none; }
.faq-suggest-option { min-height: 44px; display: flex; align-items: center; padding: 10px 12px; margin-top: 2px; border-radius: var(--r-card); color: var(--ink); font-size: 15px; line-height: 1.4; cursor: pointer; font-weight: 600; }
.faq-suggest-option:first-child { margin-top: 0; }
.faq-suggest-option:hover, .faq-suggest-option.is-active { background: var(--navy-100); color: var(--navy-700); }

.faq-send-btn {
  flex: 0 0 auto; min-width: 96px; min-height: 52px; padding: 0 24px; border: 0; border-radius: var(--r-pill);
  background: var(--navy-700); color: #ffffff; font-family: var(--font-sans); font-size: 15px; font-weight: 700;
  cursor: pointer;
  /* 2026-09-04夜(v62、brief-v62 §3「送信ボタンを.v62-press」): .v62-press(共有部品、
     v60-base.css)と同じ120msのtransformを自前のtransition一覧にも含める(shorthand
     プロパティは上書きされ足し合わさらないため、後読みのこのファイルが勝つ側でも
     .v62-pressが意図した押下の滑らかさが消えないようにする)。 */
  transition: background var(--dur-hover) var(--ease-out), transform 120ms var(--ease-out);
}
@media (min-width: 640px) { .faq-send-btn { min-width: 120px; } }
@media (hover: hover) { .faq-send-btn:hover { background: var(--navy-900); } }
.faq-send-btn:active { transform: scale(.98); }
.faq-send-btn:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.faq-send-btn:disabled { background: var(--ink-2); cursor: not-allowed; }

/* 音声案内: 入力欄左の44pxアイコンボタン1つに畳む。再生速度・停止・もう一度聞くは
   有効化されたときだけ横へ現れる小さな文字釦(押しても動かない見た目を出さないため、
   使えない端末では .is-unavailable が節ごと隠す=共通CSS)。 */
/* 2026-09-04夕方(v61 納品前検査の裁定 R7/C2): 直前の版はこの釦を font-size:0 /
   color:transparent の44px丸アイコンにし、クレジットは nowrap+ellipsis で
   縮めていた。実測 390x844 でクレジットが「VOICEVOX:…」に化け(clientW 78 /
   scrollW 114)、必須のライブラリ名(四国めたん)が読めなくなっていた。
   釦は /skin/ と同じく文字ラベルを出し、クレジットは省略しない。狭い画面では
   下の @media (max-width: 899px) でコンポーザーを2段に折り、
   1段目=音声案内+クレジット、2段目=入力欄+送信にする。 */
.faq-speech-guide { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; min-width: 0; }
.faq-speech-guide .speech-guide-mascot, .faq-speech-guide .speech-guide-role { display: none; }
.faq-voice-icon-btn {
  position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px 0 34px;
  border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--paper);
  color: var(--navy-700); font-size: 13px; font-weight: 700; line-height: 1.3; cursor: pointer;
  transition: background var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
/* 2026-09-04(v60・納品前検査): 直前の図形は fill/stroke を書いていなかったため、
   SVG の既定(fill:black / stroke:none)で描かれ、受け口の円弧
   `M6 11v1a6 6 0 0 0 12 0v-1` が「塗りつぶした半円」に、支柱 `M12 18v3` は
   面積 0 で消えていた。結果、マイクではなく「下向きの矢印」に見える(実測・拡大確認)。
   同じファイルの他のアイコン(注意・警告)と同じく線画として描く。 */
.faq-voice-icon-btn::before {
  content: ""; position: absolute; top: 50%; left: 11px; transform: translateY(-50%); width: 18px; height: 18px;
  background: var(--navy-700) center / contain no-repeat;
  -webkit-mask: center / contain no-repeat; mask: center / contain no-repeat;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11v1a6.5 6.5 0 0 0 13 0v-1'/%3E%3Cpath d='M12 18.5v3'/%3E%3Cpath d='M8.5 21.5h7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='2.5' width='6' height='11' rx='3'/%3E%3Cpath d='M5.5 11v1a6.5 6.5 0 0 0 13 0v-1'/%3E%3Cpath d='M12 18.5v3'/%3E%3Cpath d='M8.5 21.5h7'/%3E%3C/svg%3E");
}
.faq-voice-icon-btn[aria-pressed="true"] { border-color: var(--navy-700); background: var(--navy-100); }
.faq-voice-icon-btn[aria-pressed="true"]::before { background-color: var(--navy-900); }
.faq-voice-icon-btn:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
.faq-voice-icon-btn:disabled { opacity: .5; cursor: not-allowed; }
#faq-voice-replay, #faq-voice-stop { min-height: 44px; padding: 0 14px; font-size: 13px; font-weight: 700; border: 1px solid var(--line-1); border-radius: var(--r-pill); background: var(--paper); color: var(--navy-700); }
.speech-guide-stop[hidden] { display: none !important; }
.faq-speech-guide .speech-guide-mode { flex-basis: auto; min-height: 40px; font-size: 12px; color: var(--ink-2); }
.faq-speech-guide .speech-guide-mode select { min-height: 44px; padding: 6px 22px 6px 8px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); color: var(--ink); font: inherit; }
.faq-speech-guide .speech-guide-toggle[aria-pressed="false"] ~ .speech-guide-mode { display: none; }
/* VOICEVOX クレジット(必須表記、隠さない=voice-credit-visibility契約)。
   2026-09-04(v60・納品前検査): flex-basis:100% で音声案内の節に幅を持たせていたため、
   コンポーザーの横幅を 132〜170px 食い、入力欄がどの幅でも狭くなっていた
   (実測 1280 で入力欄 213px、932 で 145px。プレースホルダーが2行に折り返して
   min-height 52px の箱から切れる)。行から外してコンポーザー上端の1行に置いていた。
   2026-09-04(v61・座長指摘): その1行が入力欄の上に浮いて見えた。マイクの釦は
   既定状態で常に見え、速度選択・状態文・再生/停止釦は既定で隠れている
   (speech-guide.css の 1x1px クリップ/[hidden]/aria-pressed)ため、絶対配置を
   やめて素直に .faq-speech-guide の並びへ戻しても既定表示では釦の隣に
   1行収まる。order で「釦の右どなり」に固定する(DOM順は voice-bank.js の
   appendChild のまま=最後に付くが、id・要素そのものは変えていない)。 */
.faq-voice-icon-btn { order: 1; }
/* 2026-09-04夕方(v61 納品前検査の裁定 C2): nowrap+overflow:hidden+ellipsis を外す。
   VOICEVOX の帰属表示はライブラリ名まで読めて初めて要件を満たすため、幅が足りない
   ときは省略ではなく折り返す。 */
.faq-speech-guide .voice-credit {
  order: 2; margin: 0; color: var(--ink-2); font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: normal; overflow-wrap: anywhere; min-width: 0;
}
#faq-voice-replay, #faq-voice-stop, .faq-speech-guide .speech-guide-mode, .faq-speech-guide .speech-guide-status {
  order: 3;
}
.faq-page .speech-guide.is-unavailable .speech-guide-status.is-visible { font-size: 13px; }

/* 注意2行(design-brief §4-3: コンポーザーの上に1行ずつ、small ink-2)。 */
.faq-privacy-brief { margin: 0; padding-top: 10px; color: var(--ink-2); font-size: 13px; font-weight: 600; line-height: 1.6; }
/* 祖先(.faq-panel、白地を own宣言)を明示して静的コントラスト検査を通す(理由は上記と同じ)。 */
.faq-panel .faq-privacy-brief { color: var(--gold-text); font-weight: 700; }

/* ══════════════════════════════════════════════════════════════════════
   6. 補助案内(質問例・施術後の案内)
   ══════════════════════════════════════════════════════════════════════ */
.faq-extra-guide { margin-top: 28px; border-top: 1px solid var(--line-1); }
.faq-extra-guide > summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 14px 0; color: var(--navy-700); font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-extra-guide > summary::-webkit-details-marker { display: none; }
.faq-extra-guide > summary::after { content: "開く"; color: var(--ink-2); font-size: 13px; font-weight: 600; }
.faq-extra-guide[open] > summary::after { content: "閉じる"; }
.faq-extra-guide-body { padding: 4px 0 8px; }
.faq-extra-guide .faq-time-entry { margin-top: 14px; }

.faq-time-entry { margin-top: 18px; padding: 20px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); }
/* v84(a11yレーン、依頼5): 同上(design.cssのh1,h2,h3{line-height:1.25}を継承、実測1.25)。
 * 折返し前提の短い見出しで1画面目より下(実測 top=1002px@375 / 1250px@1280)なので、
 * この節だけの個別指定に留める。 */
.faq-time-entry h3 { margin: 0; color: var(--ink); font-family: var(--font-serif); font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; }
.faq-time-entry-lead { max-width: 52em; margin: 6px 0 14px; color: var(--ink-2); font-size: 13px; line-height: 1.6; font-weight: 600; }
.faq-time-entry-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.faq-time-entry-group { min-width: 0; overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); }
.faq-time-entry-summary { display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 11px 12px; cursor: pointer; list-style: none; }
.faq-time-entry-summary::-webkit-details-marker { display: none; }
.faq-time-entry-summary:focus-visible { outline: 3px solid var(--navy-500); outline-offset: -1px; }
.faq-time-entry-group[open] > .faq-time-entry-summary { border-bottom: 1px solid var(--line-1); background: var(--navy-100); }
.faq-time-entry-summary-copy { display: grid; min-width: 0; gap: 3px; }
.faq-time-entry-summary-copy strong { color: var(--navy-700); font-size: 14px; font-weight: 700; }
.faq-time-entry-summary-copy small { color: var(--ink-2); font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
/* 祖先(.faq-time-entry-group、白地を own宣言)を明示(理由は上記と同じ)。 */
.faq-time-entry-group .faq-time-entry-summary-toggle { flex: 0 0 auto; margin-left: auto; color: var(--gold-text); font-size: 12px; font-weight: 700; }
.faq-time-entry-summary-toggle::after { display: inline-block; margin-left: 5px; content: '›'; transition: transform .15s var(--ease-out); }
.faq-time-entry-group[open] .faq-time-entry-summary-toggle { font-size: 0; }
.faq-time-entry-group[open] .faq-time-entry-summary-toggle::before { content: '閉じる'; font-size: 12px; }
.faq-time-entry-group[open] .faq-time-entry-summary-toggle::after { font-size: 12px; transform: rotate(90deg); }
.faq-time-entry-group-head { min-width: 0; margin-bottom: 9px; }
.faq-time-entry-group-head h4 { margin: 0; color: var(--navy-700); font-size: 14px; font-weight: 700; }
.faq-time-entry-group-head p { margin: 3px 0 0; color: var(--ink-2); font-size: 12px; line-height: 1.45; }
.faq-time-entry-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 11px 12px 12px; }
.faq-time-entry-choice { min-width: 0; min-height: 44px; padding: 8px 10px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.4; text-align: left; overflow-wrap: anywhere; }
.faq-time-entry-choice:focus-visible, .faq-time-entry-handoff-link:focus-visible { outline: 3px solid var(--navy-500); outline-offset: -1px; }
.faq-time-entry-handoff { grid-column: 1 / -1; padding: 12px; border-color: var(--gold-line); background: var(--gold-soft); }
/* 見出しは既定の navy-700 のまま(.faq-time-entry-group-head h4 の既定)。gold-text は
   gold-soft地で4.26:1しか出ず不足するため、ここでは金の文字色に変えない。 */
.faq-time-entry-handoff-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.faq-time-entry-handoff-link { min-width: 0; min-height: 44px; display: flex; justify-content: center; align-items: center; white-space: normal; text-align: center; overflow-wrap: anywhere; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); color: var(--navy-700); font-size: 14px; font-weight: 700; text-decoration: none; }

.faq-shortcuts { margin: 20px 0 0; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); overflow: hidden; }
.faq-shortcuts summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; padding: 14px 16px; color: var(--navy-700); font-size: 13.5px; font-weight: 700; letter-spacing: .01em; }
.faq-shortcuts summary::marker { color: var(--gold-text); }
/* gold-soft地には ink を使う(gold-text は gold-soft地で4.26:1しか出ず不足するため)。 */
.faq-topic-count { flex: 0 0 auto; padding: 4px 11px; border-radius: var(--r-pill); background: var(--gold-soft); color: var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .04em; border: 1px solid var(--line-1); }
.faq-shortcut-body { padding: 0 16px 16px; }
.faq-theme-note, .faq-topic-hint, .faq-followups-label { margin: 0 0 10px; color: var(--ink-2); font-size: 13px; line-height: 1.5; font-weight: 600; }
.faq-followups-label { font-weight: 700; color: var(--navy-700); }
.faq-topic-chips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; align-items: stretch; }
/* v80 是正 J-12: 3 列に並ぶ分野チップも同じ理由で行長をそろえる(375 で「ーマペン)」が
   3 行目に 1 語だけ残っていた)。 */
.faq-topic-chip { justify-content: flex-start; min-width: 0; min-height: 46px; padding: 9px 11px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); color: var(--ink); font-size: 14px; line-height: 1.35; text-align: left; font-weight: 700; text-wrap: balance; }
.faq-topic-chip.active { border-color: var(--navy-500); background: var(--navy-100); color: var(--navy-700); }
.faq-topic-material { align-items: flex-start; gap: 8px; border-color: var(--gold-line); background: var(--gold-soft); }
.faq-topic-material--site { border-color: var(--navy-500); background: var(--navy-100); }
.faq-topic-material-icon { position: relative; display: grid; flex: 0 0 26px; width: 26px; height: 30px; place-items: center; border: 1px solid var(--gold-line); border-radius: 0; background: var(--paper); color: var(--gold-text); }
.faq-topic-material-icon::after { content: '資料'; font-size: 11px; font-weight: 700; letter-spacing: .02em; }
.faq-topic-material-icon--site { border-color: var(--navy-500); border-radius: 50%; color: var(--navy-700); }
.faq-topic-material-icon--site::after { content: '公式'; }
.faq-topic-material-copy { display: grid; min-width: 0; gap: 2px; }
.faq-topic-material-name { overflow-wrap: anywhere; }
.faq-topic-material-note { color: var(--ink-2); font-size: 11px; font-weight: 700; }
.faq-topic-items { margin-top: 14px; padding: 14px; border-top: 1px solid var(--line-1); background: var(--paper); border-radius: var(--r-card); }
.faq-topic-more { margin-top: 10px; }
.faq-followups { margin-top: 2px; }

.faq-care-guide { margin-top: 16px; overflow: hidden; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); }
.faq-care-guide > summary { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; cursor: pointer; list-style: none; }
.faq-care-guide > summary::-webkit-details-marker { display: none; }
.faq-care-guide > summary:focus-visible { outline: 3px solid var(--navy-500); outline-offset: -1px; }
.faq-care-guide[open] > summary { border-bottom: 1px solid var(--line-1); background: var(--navy-100); }
.faq-care-mark { display: grid; flex: 0 0 40px; width: 40px; height: 40px; place-items: center; border-radius: 12px; background: var(--paper); color: var(--navy-700); border: 1px solid var(--line-1); }
.faq-care-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.faq-care-summary-copy { display: grid; min-width: 0; gap: 3px; }
.faq-care-summary-copy strong { color: var(--ink); font-size: 14.5px; font-weight: 700; }
/* v82 JX-M2(発注者不具合報告、2026-09-15): 中身182px/箱159pxでoverflow:hidden+nowrap
   のため右端が切れていた。全部読めるよう折返しを許可する(文言は変えない)。 */
.faq-care-summary-copy small { color: var(--ink-2); font-size: 12px; line-height: 1.4; white-space: normal; }
/* 祖先(.faq-care-guide、cream地を own宣言)を明示(理由は上記と同じ)。 */
.faq-care-guide .faq-care-toggle { flex: 0 0 auto; margin-left: auto; color: var(--gold-text); font-size: 13px; font-weight: 700; }
.faq-care-toggle::after { display: inline-block; margin-left: 5px; content: "›"; transition: transform .15s var(--ease-out); }
.faq-care-guide[open] .faq-care-toggle { font-size: 0; }
.faq-care-guide[open] .faq-care-toggle::before { content: "閉じる"; font-size: 13px; }
.faq-care-guide[open] .faq-care-toggle::after { font-size: 13px; transform: rotate(90deg); }
.faq-care-body { padding: 16px; background: var(--paper); }
.faq-care-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 12px; }
.faq-care-section { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--cream); }
.faq-care-step { display: grid; width: 28px; height: 28px; place-items: center; border-radius: var(--r-pill); background: var(--navy-700); color: #ffffff; font-size: 11px; font-weight: 700; }
/* v84(a11yレーン、依頼5): 見出しは design.css の h1,h2,h3{line-height:1.25} を継承していた
 * (実測1.25、依頼1の低26件の1つ)。ここは折返し前提の短い見出しで1画面目にも掛からないため、
 * この節だけを対象にした行間の個別指定に留める(共有ルール自体は変えない)。 */
.faq-care-section h3 { margin: 2px 0 4px; font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--ink); }
.faq-care-section p { margin: 0; color: var(--ink-2); font-size: 12px; line-height: 1.55; }
.faq-care-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.faq-care-action { min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; }
.faq-care-actions.faq-care-full-questions { display: grid; grid-template-columns: minmax(0, 1fr); }
.faq-care-full-questions .faq-care-action { width: 100%; font-size: var(--fs-sm); justify-content: flex-start; text-align: left; }
/* v109 再確認で出た VIS-11 の再発(2026-09-23、納品前の目視検査 中): 570〜770px(768含む)で
   ジュエルの白い連絡先の札(.faq-care-contact)が「クリニックへ直接相談」の枠(.faq-care-section。
   親は minmax(0, 1fr) の列で自身は正しく縮んでいた)の右の線を越えていた(実測: 是正前は 570px
   で最大71pxはみ出し、770pxで1pxまで残る。570〜770の21点すべて不合格→是正後は全滅)。原因は
   grid/flexの子の既定 min-width:auto(=中身の最小幅より縮まない)が2段(.faq-care-contacts の
   実装列内の項目/.faq-care-contact 自身)で効いたままだったこと。VIS-11 で .faq-care-name を
   word-break:keep-all にした際、「ジュエルクリニック恵比寿」が1語(169px)になり、この最小幅が
   .faq-care-contact を介して枠の外まで押し出していた(ダビデは「渋谷院」等が短く症状が出ない)。
   .faq-care-contacts と .faq-care-contact の両方に min-width:0 を足し、実際の列幅まで縮められる
   ようにする(flex-wrap:wrap は温存= 電話番号側が先に次の行へ落ちる。見た目は収まる幅では不変)。 */
.faq-care-contacts { display: grid; min-width: 0; gap: 8px; margin-top: 10px; }
/* v109 是正 B-14: 院名が長いと、折り返さない .faq-care-phone(nowrap)に押されて
   院名側だけが極端に狭く潰れ何行にも折り返していた(768でジュエルの院名が4行)。
   一行に収まらないときは電話番号ごと次の行へ落とす(収まる幅では見た目は変わらない)。 */
.faq-care-contact { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); color: var(--navy-700); font-size: 14px; font-weight: 700; text-decoration: none; }
@media (hover: hover) { .faq-care-contact:hover { border-color: var(--navy-500); background: var(--navy-100); text-decoration: none; } }
/* v109 是正 VIS-11(2026-09-23、納品前の目視検査): 地名を含む院名(例「ジュエルクリニック
   恵比寿」)が、和文の既定の折返し(文字と文字の間ならどこでも折れる)で「恵」と「比寿」の
   あいだで割れていた(768 で実測。375・414 は幅が違い元々割れていなかった)。院名は 1 つの
   語として折り返す(name span 全体が入らないときは .faq-care-contact 側の flex-wrap で
   電話番号ごと次の行へ落ちる= 見た目はそのまま、割れる場所だけを直す)。 */
.faq-care-name { word-break: keep-all; overflow-wrap: normal; }
.faq-care-phone { font-variant-numeric: tabular-nums; white-space: nowrap; }
.faq-care-safety { margin: 12px 1px 0; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.faq-care-safety strong { color: var(--ink); font-weight: 700; }

/* 押し心地(色/位置の変化のみ、design-brief §5)。 */
.faq-question-chip, .faq-popular-topic, .faq-topic-chip, .faq-care-action,
.faq-time-entry-choice, .faq-persona-chip, .faq-call-link, .faq-care-contact {
  transition: transform .16s var(--ease-out), border-color .16s var(--ease-out),
    background-color .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
@media (hover: hover) {
  .faq-question-chip:hover, .faq-popular-topic:hover, .faq-topic-chip:hover,
  .faq-care-action:hover, .faq-time-entry-choice:hover, .faq-persona-chip:hover,
  .faq-call-link:hover, .faq-care-contact:hover { border-color: var(--navy-500); }
}
.faq-question-chip:active, .faq-popular-topic:active, .faq-topic-chip:active,
.faq-care-action:active, .faq-time-entry-choice:active, .faq-persona-chip:active,
.faq-call-link:active, .faq-care-contact:active { transform: scale(.98); }

/* ══════════════════════════════════════════════════════════════════════
   7. 読み込み中の骨組み(質問候補の到着待ち)
   ══════════════════════════════════════════════════════════════════════ */
.faq-representative-skeleton[hidden] { display: none !important; }
.faq-skeleton-box {
  display: block; border: 1px solid var(--line-1); background-color: var(--cream);
  background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .9) 50%, rgba(255, 255, 255, 0) 62%);
  background-size: 220% 100%; animation: shimmer 1.6s linear infinite;
}
.faq-representative-skeleton .faq-popular-topic { box-sizing: content-box; min-height: 0; height: 28px; border-radius: var(--r-pill); }
.faq-representative-skeleton .faq-popular-topic:nth-child(1) { width: 4em; }
.faq-representative-skeleton .faq-popular-topic:nth-child(2) { width: 5.143em; }
.faq-representative-skeleton .faq-popular-topic:nth-child(3) { width: 4.5em; }
.faq-representative-skeleton .faq-popular-topic:nth-child(4) { width: 6.143em; }
.faq-representative-skeleton .faq-popular-topic:nth-child(5) { width: 4.5em; }
.faq-representative-skeleton .faq-popular-topic:nth-child(6) { width: 6.429em; }
.faq-representative-skeleton .faq-representative-chip { height: 64px; border-radius: var(--r-card); }

/* ══════════════════════════════════════════════════════════════════════
   8. レスポンシブ(SP: 見出し + 会話 + 画面下固定コンポーザー76px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {
  /* 2026-09-04(v60・納品前検査): 画面下端の固定バーぶんの逃げは、ページ最下部
     (v61: .v61-foot)で確保する。ここにも同じ 132px を入れると、注意2行と
     「質問例・施術後の案内」のあいだにページ途中の空白ができる(実測 390x844 で約195px)。 */
  .faq-chat-dock { padding-bottom: 8px; }
  .faq-composer-row {
    position: fixed; z-index: 50; right: 0; bottom: 0; left: 0; order: initial;
    display: flex; align-items: center; gap: 8px; min-height: 60px; margin: 0;
    /* 2026-09-04(v61・座長指摘): 上だけ26pxにしていた分はクレジット1行を絶対配置で
       逃がすための余白だった。クレジットは .faq-speech-guide の並びへ戻した
       (上の VOICEVOX クレジットの節、order 指定)ため、上下対称の10pxに戻す。 */
    padding: 10px var(--gutter-sp) calc(10px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--line-1); border-radius: 0; background: var(--paper); box-shadow: var(--shadow-bar);
  }
  /* 2026-09-04(v60・納品前検査): クレジットが flex-basis:100% でバーの幅を 132px 食い、
     入力欄が 146px しか残らなかった。その幅ではプレースホルダーが3行になり、
     52px の箱から2行分はみ出して切れていた(実測 390x844: scrollHeight 100px)。
     2026-09-04(v61): クレジットは絶対配置をやめて .faq-speech-guide の並びの1項目に
     戻した(釦の右どなり、order指定)。入力欄の幅は .faq-input-bar 側の flex:1 で
     決まり、クレジットの有無に左右されないため、専用の右左指定は不要。 */
  /* 幅の狭い端末だけ、和文16pxのプレースホルダーが2行になる。箱を2行分にして
     切らない(24px×2行 + 上下 padding 28px + 枠 2px = 78px。76px だと 2px 足りず、
     実測 390x844 で scrollHeight 76 > clientHeight 74 になり最終行が切れる)。
     561px以上は入力欄が 340px 以上あって1行に収まるので、下の 560px 側だけで足りる。 */
  .faq-speech-guide .speech-guide-mode, .faq-speech-guide .speech-guide-status.is-visible { display: none; }
  #faq-voice-replay, #faq-voice-stop { display: none; }
  /* 2026-09-04夕方(v61 納品前検査の裁定 C2): 1段のままだと 390px で入力欄が 148px
     まで潰れ、プレースホルダーの3行目が箱から切れていた(実測 clientHeight 76 /
     scrollHeight 100)。同じ数値の不具合が v60 検査でも記録されており再発だった。
     文字ラベル付きの音声案内+省略しないクレジットを1段目、入力欄+送信を2段目に
     分け、入力欄にバー全幅を渡す。 */
  .faq-composer-row { flex-wrap: wrap; }
  .faq-composer-row .faq-speech-guide { flex: 1 1 100%; }
  .faq-composer-row .faq-input-bar { flex: 1 1 100%; }
  /* 画面下端の固定バーが最小フッターの2行(注意文と著作権表示)を隠していた
     (実測 390x844 で最下部までスクロールすると © 行が完全に裏)。 */
  .faq-page .v61-foot { padding-bottom: calc(172px + env(safe-area-inset-bottom, 0px)); }
}

/* 単一カラム(--page-max 880px)でも、幅の狭い端末は和文16pxのプレースホルダーが
   2行になる。箱を2行分にして切らない(24px×2行 + 上下 padding 28px + 枠 2px = 78px)。 */
@media (max-width: 1200px) {
  #faq-input { min-height: 78px; }
}

@media (max-width: 820px) {
  .faq-care-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .faq-time-entry-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .faq-panel { padding-top: 20px; }
  .faq-care-guide > summary { min-height: 68px; }
  .faq-care-summary-copy small { max-width: 210px; }
  .faq-care-body { padding: 9px; }
  .faq-care-section { padding: 10px; }
  .faq-care-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* v109 是正 B-14: 候補が無い(案内文+釦の2要素だけ)ときにこの2列gridが当たると、
     釦が103×98の楕円に潰れていた。候補が有る院(ダビデ)はこのクラスが付かないため
     このルールに変更はなく見た目は変わらない。 */
  .faq-care-actions.faq-care-actions-empty { grid-template-columns: minmax(0, 1fr); }
  .faq-care-action { justify-content: flex-start; text-align: left; }
  .faq-time-entry { padding: 12px; }
  .faq-time-entry-group { padding: 0; }
  .faq-time-entry-handoff { padding: 10px; }
  .faq-time-entry-options { gap: 5px; padding: 9px 10px 10px; }
  .faq-time-entry-choice { padding-left: 8px; padding-right: 8px; }
  .faq-time-entry-handoff-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .faq-time-entry-handoff-link { width: 100%; }
  .faq-topic-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .faq-topic-chip { min-height: 44px; padding: 8px 9px; font-size: 13px; }
  .faq-topic-material { grid-column: 1 / -1; }
  .faq-chat-head { align-items: stretch; }
  .faq-chat-actions { width: 100%; justify-content: flex-start; }
  .faq-conversation-status { max-width: none; }
  .faq-composer-row { gap: 6px; padding-left: 12px; padding-right: 12px; }
  .faq-send-btn { min-width: 72px; padding: 0 14px; }
}

@media (max-width: 360px) {
  .faq-time-entry-handoff-actions { grid-template-columns: 1fr; }
}

/* 横向きスマホなど背の低い画面。マスコットと補足文をたたみ、固定コンポーザーの高さを詰める。 */
/* 背の低い窓では会話欄の下限 240px が入りきらず、固定/追従コンポーザーが
   回答の途中を切る。下限を下げて、切れる量を減らす。 */
@media (max-height: 620px) {
  .chat-log { max-height: clamp(150px, 38vh, 520px); }
}
@media (min-width: 900px) and (max-height: 620px) {
  .chat-log { padding-bottom: 96px; }
}

@media (max-height: 480px) and (max-width: 899px) {
  .faq-composer-row { min-height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-topic-items, .faq-followups { animation: none; }
  .chat-log { scroll-behavior: auto; }
  .faq-typing-dot { animation: none; opacity: .6; }
  .chat-log .bubble, .faq-new-answer, .faq-entry-art, .faq-entry-art.is-reacting { animation: none !important; }
  .faq-skeleton-box { animation: none; background-image: none; }
  .faq-question-chip, .faq-popular-topic, .faq-topic-chip, .faq-care-action,
  .faq-time-entry-choice, .faq-persona-chip, .faq-call-link, .faq-care-contact { transition: none; }
}

/* ── 匿名利用データの設定: 操作要素のタップ目標を44px以上にする ───── */
/* 2026-09-04(v61・座長判定「設定の重複」): <details class="analytics-consent-card
   faq-analytics-note"> を本文外の単独ブロックから .v61-foot の中へ移した。
   フッターの旧 <a href="#faq-analytics-note"> と同じ見た目(13px・下線・中央)に
   summary を揃えて1つに統合する(/skin/ の同判定・skin.css の
   .v61-foot .analytics-consent-card と同じ形に揃える)。太字(旧 font-weight:700)は
   フッターの地の文と並ぶ文脈では不要なので打ち消す。閉じた行の外側の余白は
   .v61-foot 自身の margin-top に委ね、ここでは開いたときのカード内側だけ持つ。 */
.v61-foot .faq-analytics-note {
  display: block; margin: 10px 0 0; padding: 0; border: 0; background: none; box-shadow: none;
  text-align: center; color: var(--ink-2); font-size: 13px; line-height: 1.6;
}
.faq-analytics-note .muted { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.v61-foot .faq-analytics-note > summary {
  display: inline-flex; min-height: 44px; align-items: center; padding: 8px 4px;
  font-weight: 400; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.v61-foot .faq-analytics-note > summary:hover, .v61-foot .faq-analytics-note > summary:focus-visible { color: var(--ink); }
.v61-foot .faq-analytics-note > summary:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; border-radius: var(--r-card); }
.v61-foot .faq-analytics-note[open] {
  margin: 10px 0 0; padding: 12px var(--gutter-sp) 18px; border: 1px solid var(--line-1);
  border-radius: var(--r-card); background: var(--paper); box-shadow: 0 1px 3px rgba(11, 23, 48, .06);
  text-align: left;
}
@media (min-width: 900px) { .v61-foot .faq-analytics-note[open] { padding: 12px var(--gutter) 18px; } }
.faq-page .analytics-consent-card label.row { display: flex; flex-wrap: nowrap; align-items: center; gap: 10px; min-height: 44px; padding: 4px 0; cursor: pointer; }
.faq-page .analytics-consent-card label.row input[type="checkbox"] { flex: 0 0 auto; inline-size: 24px; block-size: 24px; margin: 0; accent-color: var(--navy-700); cursor: pointer; }

/* ── 印刷: design.css の共通printルールに足りない分だけ足す ───── */
@media print {
  body.faq-page { background: #fff; }
  .faq-representative, .faq-chat-actions, .faq-composer-row, .faq-new-answer,
  .faq-suggest-listbox, .faq-page .speech-guide, .analytics-consent-card { display: none !important; }
  .chat-log { max-height: none; overflow: visible; background: #fff; border-color: #999; padding: 0; }
  .faq-answer-text.is-clamped { display: block; -webkit-line-clamp: none; overflow: visible; }
  .chat-log .bubble { max-width: 100%; box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .chat-log .bubble.user { justify-self: stretch; width: auto; background: #fff; color: #000; border: 2px solid #666; }
  .chat-log .bubble.bot { background: #fff; color: #000; border: 1px solid #999; }
  .chat-log .bubble.bot .bb-label, .faq-answer-section-title, .faq-answer-section p { color: #000; }
  .faq-guidance, .faq-guidance-label, .faq-evidence-item, .faq-persona, .faq-answer-more,
  .faq-time-entry, .faq-care-guide, .faq-topic-items { background: #fff; color: #000; }
  .faq-guidance { border-color: #999; border-left-color: #000; }
  .faq-call-link { border-color: #999; background: #fff; color: #000; box-shadow: none; }
  .faq-question-title, .faq-lead, .faq-privacy-brief, .faq-start-note, .faq-conversation-status { color: #000; }
  .chat-log .bubble.bot .bb-label::before { display: none; }
  .chat-log .bubble.bot .bb-label .bb-label-ai { background: #fff; color: #000; border-color: #999; }
}

/* ══ v61 見出しの統一(2026-09-04 夕方 納品前検査 R6・司令塔裁定)═══════════════
 * 画面名は共通ヘッダーの .hd-title(全画面同寸)。本文の最初の見出しは
 * 22px / var(--font-sans) / 700 / var(--ink) に揃える。直前は 8 画面で
 * 13px ゴシック金(質問チャット)〜36px 明朝(埋め込み案内)までばらけており、
 * 質問チャットは自分の h1 が直下の h2 より小さい逆転が起きていた(実測)。
 * 節の見出しはその下(18px)に置いて階層を1段だけ作る。 */
/* 祖先(.faq-panel、白地)を明示して静的コントラスト検査を通す。#182233 on #ffffff = 13.6:1。 */
.faq-panel .faq-question-title {
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
}
.faq-section-heading h2 { font-family: var(--font-sans); font-size: 18px; letter-spacing: 0; }
@media (min-width: 900px) { .faq-section-heading h2 { font-size: 18px; } }

/* ============ v72(2026-09-07) SP の会話ログは内側スクロールをやめ、ページ全体で流す ============
   899px 以下では会話欄が 42vh の箱の中でスクロールし、画面全体のスクロールと二重になっていた。
   回答の途中が箱の下端で切れ、指の操作がどちらに効くか分かりにくい。箱の高さ制限を外して
   ページに流し、faq.js は --faq-log-mode: flow を読んで吹き出し単位で画面をスクロールする
   (見出し分は scroll-margin-top、画面下の固定コンポーザー分は scroll-margin-bottom で逃がす)。 */
@media (max-width: 899px) {
  .faq-page .chat-log { --faq-log-mode: flow; max-height: none; overflow: visible; overscroll-behavior: auto; }
  .faq-page .chat-log > * { scroll-margin-top: calc(var(--header-height) + 12px); scroll-margin-bottom: calc(184px + env(safe-area-inset-bottom, 0px)); }
  /* 納品前検査(v72独立検査役、2026-09-07): 258行目の .chat-log .bubble.bot{scroll-margin-top:76px}
     (詳細度0,3,0)が上の行(0,2,0)を打ち消し、実際に届く回答の吹き出しだけ見出し分の逃げが
     効いていなかった(実測では76pxがたまたま72px/56pxのヘッダーより大きく隠れてはいなかったが、
     ヘッダー高さが変わると追従しない書き方だった)。詳細度を上げて計算式側を勝たせる。 */
  .faq-page .chat-log .bubble.bot { scroll-margin-top: calc(var(--header-height) + 12px); }
}

/* ============ v83(2026-09-15) 入口の 1 画面目(P-04・P-05) ============
   grok 依頼 4 の指摘: 375 で入口を開くと「大きな挿絵の下にチップだけ」で質問文が見えず、
   いちばん下のチップの下端が画面下の固定入力欄(.faq-composer-row)に隠れていた
   (実測 375: 挿絵 240x180、最後のテーマの札の下端 y=805、入力欄は画面の 511〜667)。
   直し: 560px 以下では挿絵を本文の横に置いて小さくし(消さない= B25 の「絵は出す」を守る。
   幅は依頼 10 で 96px にした= 採点票 P-05 の下限)、節の余白を詰めて「よくある質問」の 3 件を 1 画面目に入れる。
   加えて、札を画面内へ送るときに固定入力欄の裏へ入らないよう scroll-margin-bottom を持たせ、
   入口の節の下に入力欄 1 段ぶんの余白を確保する。文言・要素・画像の数は変えない。 */
/* ============ v83 依頼 10(2026-09-16) 3 件目を固定入力欄の上に出す ============
   実測(375x667・isMobile/hasTouch・DSF 2): 画面下の固定入力欄(.faq-composer-row)は
   白地・不透明で、上端はダビデ 511(音声案内の 1 段 44px を含む 2 段、高さ 156)・
   ジュエル 561(高さ 106)だった。「下端 667 以内」だけでは 3 件目は入力欄の裏に入るため、
   両院とも 3 件目の下端を入力欄の上端より上にする。挿絵は消さず表示幅 96px を保つので、
   入口を 2 行組み(見出しの横に挿絵、案内文はその下を全幅)にして行数を減らし、
   節の余白と札の上下の詰めを一段ずつ小さくする。文言・画像の数・HTML は変えない。 */
@media (max-width: 560px) {
  /* .faq-intro-copy を display: contents にして、見出し行と案内文を直接並べる。
     挿絵は見出し行(1 行目)の右に置き、案内文は 2 行目で幅を使い切る
     (従来は挿絵の左 169px の細い桁に案内文が入り、ジュエルで 5 行 112px を使っていた)。 */
  /* 素の .faq-intro は gap: 20px なので、行の間を 0 に戻しておく(案内文は margin-top 4px で離す)。 */
  .faq-intro { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0; column-gap: 8px; align-items: center; }
  .faq-intro-copy { display: contents; }
  .faq-intro-copy > .faq-entry-heading { grid-column: 1; grid-row: 1; }
  .faq-intro-copy > :not(.faq-entry-heading) { grid-column: 1 / -1; }
  .faq-intro-art { grid-column: 2; grid-row: 1; width: 96px; margin-inline: 0; }
  .faq-lead { margin-top: 4px; font-size: 14px; line-height: 1.6; }
  /* パネルの上の余白(外 24 + 内 20)を一段詰める。 */
  .faq-panel { padding-top: 16px; }
  .faq-panel.v62-lift { margin-top: 16px; }
  /* 見出しは 22px だと 375 で 3〜4 行になり、案内役の絵と合わせて 120px 以上を使っていた。
     19px にして行数を減らす(本文 14px より大きい階層は保つ)。案内役は依頼 10 で 80→56px。 */
  .faq-panel .faq-question-title { font-size: 19px; }
  .faq-entry-heading { gap: 8px; }
  .faq-entry-heading .faq-entry-art { width: 56px; height: 56px; }
  .faq-representative { margin-top: 6px; padding-top: 4px; }
  .faq-section-heading { margin-bottom: 8px; }
  /* テーマの札は 375 で 4〜5 段(194〜244px)になり、質問カードを 1 画面目の外へ押していた。
     指で横へ送る 1 段にする(札の高さ 44px は変えない= 触れる大きさの下限を守る)。
     ページ自体は横にはみ出さない(overflow は札の並びの中だけ)。 */
  /* v84 依頼 13-2(2026-09-16): 1 段の横送りは右端で札が切れ、端をぼかしても
     「切れて見える」判定だった(grok 依頼 5・6 で 2 回)。横送りをやめ、
     既定は畳んで 44px の釦 1 つだけ出し、押すと折り返しで全部見えるようにする
     (釦は 44px + 下 8px= 畳んでいる間は札 1 段と同じ高さなので、P-04/P-05 の値は変わらない)。 */
  #faq-popular-topics { flex-wrap: wrap; gap: 8px; margin-bottom: 8px; overflow-x: visible; }
  #faq-popular-topics[data-collapsed="true"] { display: none; }
  /* v84 依頼 14(grok 依頼 7 の表 B-1、2026-09-16): 開いた札が質問の一覧を下へ押し、
     2 件目「効果を感…」が固定入力欄の裏に入っていた(実測 375: 開くと一覧が 252px 下がる)。
     開いた札は流れから外して釦の直下に重ねる(top は自動= 釦の下、左右は節の幅)。
     重なりの順は入力欄(z-index 50)より下・一覧より上。地・枠・影は同じ画面の
     入力候補(.faq-suggest-listbox)と同じ語彙にそろえる。入力欄の裏まで廣がらないよう
     高さの上限は faq.js が実測して渡す(あふれる分は札の中で送る)。 */
  #faq-popular-topics[data-collapsed="false"] {
    position: absolute; left: 0; right: 0; z-index: 40; margin: 0;
    max-height: var(--faq-topics-max-h, 60vh); overflow-y: auto; overscroll-behavior: contain;
    padding: 12px; border: 1px solid var(--line-1); border-radius: var(--r-card);
    background: var(--paper); box-shadow: var(--shadow-float);
  }
  .faq-representative { position: relative; }
  .faq-topics-toggle {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 8px;
    padding: 0 16px; border: 0; border-radius: var(--r-pill);
    background: var(--navy-100); color: var(--navy-700);
    font-family: var(--font-sans); font-size: 14px; font-weight: 700; line-height: 1.3;
  }
  .faq-topics-toggle[hidden] { display: none; }
  .faq-topics-toggle .faq-topics-toggle-mark { font-size: 12px; line-height: 1; }
  .faq-topics-toggle[aria-expanded="true"] .faq-topics-toggle-mark { transform: rotate(180deg); }
  /* 骨組み(読み込み中の箱)は従来どおり 1 段のまま。釦と同じ 44px なので入れ替わってもずれない。 */
  .faq-representative-skeleton .faq-popular-topics { flex-wrap: nowrap; gap: 6px; margin-bottom: 8px; overflow: hidden; }
  /* 長いテーマ名(ジュエル「肌管理メニュー(ピーリング・ダーマペン)」= 295px)は
     行幅(293px)をこえるので、札の中で折り返させて切らない(高さの下限 44px はそのまま)。 */
  #faq-popular-topics .faq-popular-topic { flex: 0 1 auto; max-width: 100%; height: auto; padding-block: 7px; }
  .faq-representative-skeleton .faq-popular-topic { flex: 0 0 auto; }
  .faq-representative-items { gap: 8px; }
  /* 札の上下の詰めと行間を一段小さくする(1 行の札は 48px、2 行は 58px。
     どちらも触れる大きさの下限 44px を下回らない)。 */
  .faq-representative-chip { min-height: 48px; padding: 8px 16px 8px 44px; font-size: 15px; line-height: 1.4; }
  .faq-representative-chip::before { left: 15px; font-size: 20px; }
  /* 固定入力欄の上下の余白を 10→8px(中の釦・音声案内の 1 段はそのまま。
     入力欄の上端が 4px 下がり、札の入る高さがその分広がる)。 */
  .faq-composer-row { padding-top: 8px; padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 899px) {
  /* 画面内へ送るとき(スクロール)に、固定入力欄の裏へ札が入らないようにする。 */
  .faq-popular-topic, .faq-question-chip { scroll-margin-bottom: calc(184px + env(safe-area-inset-bottom, 0px)); scroll-margin-top: calc(var(--header-height) + 12px); }
  /* 入口の節の下に、固定入力欄ぶんの逃げを置く(最後の札が裏に入らない)。
     v84 依頼 13-3(2026-09-16): 76px は入力欄の高さより低く(実測 375: ダビデ 152px・
     ジュエル 102px)、最後まで送ったときに末尾の札が入力欄の下に残り得た。
     faq.js の syncComposerHeight が実測した高さ(--faq-composer-h)を使う。
     入力欄の高さには下端の安全地帯(env)を含むので、ここでは足しない。 */
  .faq-representative { padding-bottom: calc(var(--faq-composer-h, 160px) + 8px); }
}

/* ══ v83(2026-09-15) a11y の是正(P-44・P-45・P-46)═══════════════════════════
 * a11y 計測(2-4/2-5= 11px の文字、8-2= 印刷の空白ページ、3-5= 隣接 8px 未満)。
 * 文言・要素は変えず、大きさと余白だけ直す。 */

/* P-44: 11px を 12px 以上に(丸数字は 28px の丸のまま、資料の印と音声の表記も同じ)。 */
.faq-care-step { font-size: 12px; }
.faq-topic-material-note { font-size: 12px; }
.faq-speech-guide .voice-credit { font-size: 12px; }

/* P-46: 隣り合う押せるものの間を 8px 以上に。
 * 入口のテーマの札(P-05 で 1 段の横送りにした列)と話題の札・時間帯の選択肢。 */
@media (max-width: 560px) {
  .faq-popular-topics { gap: 8px; }
}
.faq-topic-chips { gap: 8px; }
.faq-time-entry-options { gap: 8px; }
@media (max-width: 899px) {
  .faq-topic-chips { gap: 8px; }
  .faq-time-entry-options { gap: 8px; }
}

/* P-45: 紙に出したとき、本文の後ろに空の紙を作らない。
 * ・画面用に空けていた固定入力欄ぶんの下余白(793 行の 172px)は紙では 0。
 * ・フッターと注記のカードはページの切れ目でちぎらない。 */
@media print {
  .faq-page { min-height: 0; }
  .faq-page .v61-foot { padding-bottom: 0; margin-bottom: 0; break-inside: avoid; page-break-inside: avoid; }
  .faq-page .faq-care-guide, .faq-page .faq-time-entry, .faq-page .faq-topic-items { break-inside: avoid; page-break-inside: avoid; }
  .faq-page .chat-log { padding-bottom: 0; }
}

/* ══ v87（2026-09-16）送信を許可する四角の押せる広さ（S-05）═══════════════
 * 894・895 行の四角は 24×24px で、指で押す広さ（44×44px）に届かない。
 * 見た目は 24×24px のままで、擬似要素を四方に 10px ずつはみ出させて
 * 押せる範囲だけを 44×44px にする（24+10+10=44）。擬似要素は地色も線も持たないので
 * 画面には何も出ず、文字の位置も行の高さ（44px）も変わらない（実測で画素まで同値）。 */
.faq-page .analytics-consent-card label.row input[type="checkbox"] { position: relative; }
.faq-page .analytics-consent-card label.row input[type="checkbox"]::before {
  content: "";
  position: absolute;
  inset: -10px;
  display: block;
}

/* ══ v92（2026-09-17）読み込み中のずれ（CLS）を止める（S-07）═══════════════
 * 480px 以下のこの画面のヘッダーは、肌診断への行き先（.hd-nav-link-cross）が 2 段目に
 * 回るぶん実寸 89px（= --header-height、v60-base.css）だが、差し込み前の場所取り
 * （design.css の #app-header:empty）は全画面共通の 56px だった。JS がヘッダーを
 * 差し込んだ瞬間に本文が 33px 下がっていた（実測 375×667 Fast 3G）。
 * 行き先を出さない院内の写し（html[data-davide-intake]）と設置先の写し
 * （html[data-feature-instance]）はヘッダーが 1 段=56px のままなので対象から外す。
 * 差し込んだ後のヘッダーの高さ・見た目は変わらない（:empty の間だけ効く規則）。 */
@media (max-width: 480px) {
  html:not([data-davide-intake]):not([data-feature-instance]) body.faq-page #app-header:empty {
    min-height: var(--header-height);
  }
}

/* ══ v115（2026-09-26）答えの段：キャンペーンのカード・料金の表 ═══════════════
 * 発注者の指示「キャンペーンなど情報が多すぎて短いので画像でだすなどして分かりやすく」。
 * faq.js が response.blocks（院の設定 faqVisualAnswers がある院だけ。今はジュエルだけ）を受けたときだけ
 * .has-visual の吹き出しを作る。blocks の来ない院（ダビデ）はこの節の規則に当たる要素を 1 つも持たない。
 * 形は公式サイトのキャンペーン欄（画像 1 枚＋価格・期間・条件）と、チャットのカード（横に送る）に合わせた。 */
.chat-log .bubble.bot.has-visual { width: 100%; max-width: 100%; }
.faq-answer-section.has-visual { display: grid; gap: 12px; min-width: 0; }
.faq-answer-section.has-visual > .faq-answer-expand { justify-self: start; margin-top: -6px; }
.faq-visual { display: grid; gap: 6px; min-width: 0; }
.faq-visual-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.faq-visual-count { color: var(--ink-2); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.faq-visual-nav { display: flex; gap: 8px; }
.faq-visual-nav[hidden] { display: none; }
.faq-visual-nav-btn {
  display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-1); border-radius: 50%; background: var(--paper); color: var(--navy-700);
  cursor: pointer; transition: background-color var(--dur-hover) var(--ease-out), border-color var(--dur-hover) var(--ease-out);
}
.faq-visual-nav-btn:disabled { opacity: .38; cursor: default; }
.faq-visual-nav-btn:focus-visible, .faq-visual-track:focus-visible, .faq-campaign-link:focus-visible {
  outline: 3px solid var(--navy-500); outline-offset: 2px;
}
@media (hover: hover) { .faq-visual-nav-btn:not(:disabled):hover { border-color: var(--navy-500); background: var(--navy-100); } }
.faq-visual-chevron { width: 9px; height: 9px; margin-left: -3px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.faq-visual-nav-btn.is-prev .faq-visual-chevron { margin-left: 3px; transform: rotate(-135deg); }
/* 横に送る並び。offsetLeft をこの箱から測るので position を持たせる（faq.js の番号の計算）。 */
.faq-visual-track {
  position: relative; display: flex; align-items: stretch; gap: 12px;
  margin: 0; padding: 2px 2px 10px; list-style: none;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 2px; scrollbar-width: thin;
  border-radius: var(--r-card);
}
.faq-visual-item { flex: 0 0 auto; min-width: 0; margin: 0; scroll-snap-align: start; }
/* 料金の表は行の数が表ごとに違う（2〜7 行）。高さをそろえると短い表の下に大きな空きができるので、上でそろえる。 */
.faq-visual-prices .faq-visual-track { align-items: flex-start; }

/* キャンペーンのカード（画像＋対象＋名前＋価格・期間・条件＋公式ページ） */
.faq-campaign-card {
  display: flex; flex-direction: column; width: min(300px, 84%); overflow: hidden;
  border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper);
}
.faq-visual:not(.is-multi) .faq-campaign-card { width: min(360px, 100%); }
.faq-campaign-media { aspect-ratio: 3 / 2; background: var(--cream); border-bottom: 1px solid var(--line-1); }
.faq-campaign-media[hidden] { display: none; }
.faq-campaign-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.faq-campaign-body { word-break: auto-phrase; display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 14px 12px; }
.faq-campaign-target {
  display: inline-block; margin-right: 8px; padding: 1px 10px; border-radius: var(--r-pill); vertical-align: 2px;
  background: var(--action-primary, var(--navy-700)); color: var(--action-primary-foreground, #ffffff);
  font-size: 12px; font-weight: 700; line-height: 1.6;
}
.faq-answer-section p.faq-campaign-name { color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.5; }
.faq-campaign-facts { display: grid; gap: 6px; width: 100%; margin: 0; }
.faq-campaign-fact { display: grid; grid-template-columns: 2.6em minmax(0, 1fr); column-gap: 8px; align-items: baseline; }
.faq-campaign-fact dt { grid-column: 1; color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.6; }
.faq-campaign-fact dd { grid-column: 2; margin: 0; color: var(--ink); font-size: 14px; line-height: 1.6; }
.faq-campaign-fact.is-price dd { color: var(--action-primary, var(--navy-700)); font-weight: 700; }
.faq-campaign-fact.is-price.is-short dd { font-size: 20px; line-height: 1.35; }
/* v120: 「内容」は 80 字ほどの文。文節で折る(auto-phrase)と 200px の幅で「3回以上の」だけの行や語の途中の折り返しが出るので、
 * 文字で詰めて折る(行頭の禁則は strict) */
.faq-campaign-fact.is-detail dd { word-break: normal; line-break: strict; }
.faq-campaign-fact.is-conditions ul { margin: 0; padding-left: 1.1em; list-style: disc; }
.faq-campaign-fact.is-conditions li { color: var(--ink-2); font-size: 13px; line-height: 1.6; }
.faq-campaign-link {
  display: inline-flex; align-items: center; min-height: 32px; margin-top: auto;
  color: var(--navy-700); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px;
}

/* PC（900px 以上）は画像を左・要点を右に並べた横長のカードにする。縦に積むと 1 枚が 494px になり、
   高さ 680px の画面（1280×800 の窓）では会話欄の中で価格・期間が枠の外に出た（実測 2026-09-26）。
   横に並べると画像は同じ 300px 幅のまま、カードの高さは要点の高さ（約 240px）に収まる。
   画像の枠は縦横比を保つため伸ばさない（align-self: flex-start。伸ばすと cover で画像の文字が切れる）。 */
@media (min-width: 900px) {
  .faq-campaign-card { flex-direction: row; width: min(600px, 88%); }
  .faq-visual:not(.is-multi) .faq-campaign-card { width: min(600px, 100%); }
  .faq-campaign-media { flex: 0 0 50%; align-self: flex-start; border-right: 1px solid var(--line-1); border-bottom: 0; }
  .faq-campaign-body { flex: 1 1 0; min-width: 0; }
}

/* 料金の表（表の名前＋条件＋回数・金額・1回あたり） */
.faq-price-card {
  display: flex; flex-direction: column; width: min(280px, 84%); overflow: hidden;
  border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper);
}
.faq-visual:not(.is-multi) .faq-price-card { width: min(440px, 100%); }
.faq-price-table { width: 100%; border-collapse: collapse; word-break: auto-phrase; }
.faq-price-table caption { padding: 10px 14px 9px; background: var(--cream); text-align: left; }
.faq-price-name { display: block; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.faq-price-cond { display: block; margin-top: 2px; color: var(--ink-2); font-size: 12px; line-height: 1.6; }
.faq-price-table th, .faq-price-table td { padding: 8px 14px; border-top: 1px solid var(--line-1); vertical-align: top; }
.faq-price-table th { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; text-align: left; }
.faq-price-table th.is-nowrap { white-space: nowrap; }
.faq-price-table td { text-align: right; }
.faq-price-table tr.is-long td { text-align: left; }
.faq-price-amount { display: block; color: var(--ink); font-size: 16px; font-weight: 700; line-height: 1.45; font-variant-numeric: tabular-nums; }
.faq-price-table tr:not(.is-long) .faq-price-amount { white-space: nowrap; }
.faq-price-table tr.is-long .faq-price-amount { font-size: 14px; }
.faq-price-note { display: block; color: var(--ink-2); font-size: 12px; line-height: 1.5; }
.faq-answer-section p.faq-visual-note { color: var(--ink-2); font-size: 12px; line-height: 1.7; font-weight: 500; }

/* v116（2026-09-26）料金の総まとめ（区分ごとの 1 枚：見出し＋表の名前＋最大回数の金額＋「料金表を見る」）。
   発注者の指示「料金でまずだすのは一番回数が高いのを優先させる」。釦は詳しい料金表の答えを選んだ質問として出す。 */
.faq-guide-card {
  display: flex; flex-direction: column; align-items: stretch; width: min(240px, 72%); padding: 12px 14px 14px;
  border: 1px solid var(--line-1); border-radius: var(--r-card); background: var(--paper); word-break: auto-phrase;
}
.faq-visual:not(.is-multi) .faq-guide-card { width: min(320px, 100%); }
.faq-answer-section p.faq-guide-title { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.faq-answer-section p.faq-guide-group { margin-top: 2px; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.6; }
.faq-answer-section p.faq-guide-lead { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin-top: 8px; line-height: 1.3; }
.faq-guide-count { color: var(--ink); font-size: 14px; font-weight: 700; white-space: nowrap; }
.faq-guide-amount {
  color: var(--action-primary, var(--navy-700)); font-size: 22px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.faq-answer-section p.faq-guide-note { margin-top: 2px; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.6; }
.faq-guide-action {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: auto; padding: 8px 14px;
  border: 1px solid var(--action-primary, var(--navy-700)); border-radius: var(--r-pill); background: var(--paper);
  color: var(--action-primary, var(--navy-700)); font: inherit; font-size: 14px; font-weight: 700; line-height: 1.4; cursor: pointer;
  transition: background-color var(--dur-hover) var(--ease-out);
}
/* 釦はカードの下にそろえ（並びの高さがそろうので、1 回あたりの行が無いカードも釦の位置が同じ）、
   上の行との間は 12px あける。 */
.faq-guide-card > :nth-last-child(2) { margin-bottom: 12px; }
.faq-guide-action:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
@media (hover: hover) { .faq-guide-action:hover { background: var(--navy-100); } }

/* スマホ（560px 以下）は答えの文字の幅が 224px しかなく（375 で実測。外枠・会話欄・吹き出しの余白が左右 73px ずつ）、
   カードが 172px になって名前や価格が 1〜2 字ずつに折れていた。並びだけを吹き出しの内側の余白
   （左右 15px。design.css の .bubble）まで広げ、カードは並びの幅から次のカードが覗く 24px を引いた幅にする。 */
/* 本番 375 の見直し(2026-09-26): それでもカードは 197px で、名前が「…キャンペー／ン」と 1 字だけ次の行に落ち、
   価格が 5 行になっていた。段のある吹き出しだけ左右の余白を 15→12px にし、並びもそれに合わせる
   (会話欄の左右の余白はジュエルの brand-jewel.css で 18→10px)。 */
@media (max-width: 560px) {
  .chat-log .bubble.bot.has-visual { padding-left: 12px; padding-right: 12px; }
  .faq-visual-track { margin-inline: -12px; padding-inline: 12px; scroll-padding-inline: 12px; border-radius: 0; }
  .faq-campaign-card, .faq-price-card, .faq-guide-card { width: calc(100% - 24px); }
  .faq-visual:not(.is-multi) .faq-campaign-card, .faq-visual:not(.is-multi) .faq-price-card, .faq-visual:not(.is-multi) .faq-guide-card { width: 100%; }
  .faq-campaign-body { padding: 10px 12px 12px; }
  .faq-price-table caption { padding: 10px 12px 9px; }
  .faq-price-table th, .faq-price-table td { padding: 8px 12px; }
}

/* 400px 以下（320 の画面ではカードが 130〜145px）は、覗かせる幅を並びの右の余白 15px だけにし、
   価格・期間・条件の見出しを本文の上に積み（本文の幅を取る）、表の余白を詰める
   （320 で「¥3,300」が 1 字ずつ折れ、表がカードの外へはみ出していた。実測 2026-09-26）。 */
@media (max-width: 400px) {
  .faq-campaign-card, .faq-price-card, .faq-guide-card { width: calc(100% - 12px); }
  .faq-campaign-fact { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .faq-campaign-fact dt, .faq-campaign-fact dd { grid-column: 1; }
  .faq-price-table caption { padding: 9px 8px 8px; }
  .faq-price-table th, .faq-price-table td { padding: 7px 8px; }
}

@media (prefers-reduced-motion: reduce) { .faq-visual-track { scroll-behavior: auto; } }
@media print {
  .faq-visual-controls, .faq-guide-action { display: none; }
  .faq-visual-track { flex-wrap: wrap; overflow: visible; }
  .faq-campaign-card, .faq-price-card, .faq-guide-card { break-inside: avoid; page-break-inside: avoid; }
}

/* ══ v120（2026-10-04）1 つの文で 2 つ以上を聞く質問の答え：部分ごとに「1. 〜について」の見出し＋答え ══
 * faq.js が response.parts（院の設定 faqMultiAnswer がある院だけ。今はジュエルだけ）を受けたときだけ .has-parts の節を作る。
 * parts の来ない院（ダビデ）はこの節の規則に当たる要素を 1 つも持たない。部分の間は細い線で分け、見出しは本文より一段だけ強く。 */
.faq-answer-section.has-parts { display: grid; gap: 0; min-width: 0; }
.faq-answer-part { display: grid; gap: 8px; min-width: 0; padding: 14px 0; }
.faq-answer-part:first-of-type { padding-top: 0; }
.faq-answer-part:last-of-type { padding-bottom: 0; }
.faq-answer-part + .faq-answer-part { border-top: 1px solid var(--line-1); }
.faq-answer-part.has-visual { gap: 12px; }
.faq-answer-part > .faq-answer-expand { justify-self: start; margin-top: -4px; }
.faq-answer-section h3.faq-answer-part-title {
  margin: 0; color: var(--navy-700); font-size: 15px; line-height: 1.5; font-weight: 700; overflow-wrap: anywhere;
}
.faq-answer-section p.faq-answer-part-missing { margin: 0; color: var(--ink-2); }
.faq-answer-part-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.faq-answer-part-chips .faq-question-chip { max-width: 100%; white-space: normal; text-align: left; }

/* ══ v122（2026-10-05）効果・変化の答えに添える図 ══════════════════════════════
 * 発注者の指示「どれくらい効果があるの？とか変化とかで文字だとわかりずらいので参考画像などをいれて」。
 * faq.js が答えの段に図（type: 'figure'。院の faq-figures.json で決めた答えだけ。今はジュエルだけ）を受けたときだけ
 * .faq-figure を作る。図の来ない院（ダビデ）はこの節の規則に当たる要素を 1 つも持たない。
 * 合格基準は docs/市場比較-2026-10-05-v122-効果の画像.md：375 の画面で図の幅 280px 以上・高さ 480px 以下、
 * 断り書き（※図はイメージです・個人差）は図のすぐ下に 12px 以上かつ答えの本文（16px）の 80% 以上＝13px、押す所 44px 以上、
 * 文字のコントラスト 4.5:1 以上。
 * 図は答えの文の下に細い線で区切って置く（カードにすると 375 で図が 241px に縮む。v120 の部分の区切りと同じ線）。 */
.faq-figure {
  display: grid; gap: 10px; min-width: 0; max-width: 640px; margin: 0; padding-top: 14px;
  border-top: 1px solid var(--line-1); word-break: auto-phrase;
}
.faq-figure-title { color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.faq-answer-section p.faq-figure-caution, .faq-figure-zoom .faq-figure-caution {
  margin: 0; color: var(--ink-2); font-size: 13px; font-weight: 500; line-height: 1.6;
}
.faq-figure.is-image .faq-figure-caution { margin-top: -4px; }
.faq-answer-section p.faq-figure-note { color: var(--ink-2); font-size: 13px; font-weight: 500; line-height: 1.7; }
.faq-answer-section p.faq-figure-source {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 12px;
  margin-top: -6px; color: var(--ink-2); font-size: 12px; font-weight: 500; line-height: 1.6;
}
.faq-figure-link { min-height: 44px; margin-top: 0; }

/* 公式サイトの図の写し。押すと大きく見る窓（<dialog>）が開く（開けないブラウザでは押せる形にしない）。 */
.faq-figure-media {
  position: relative; display: block; width: 100%; max-width: 560px; margin: 0; padding: 0; overflow: hidden;
  border: 1px solid var(--line-1); border-radius: 8px; background: #ffffff; color: inherit; text-align: left;
}
.faq-figure-media[hidden] { display: none; }
.faq-figure-media img { display: block; width: 100%; height: auto; }
.faq-figure-media.is-zoomable { cursor: zoom-in; }
.faq-figure-media.is-zoomable:focus-visible, .faq-figure-zoom-close:focus-visible { outline: 3px solid var(--navy-500); outline-offset: 2px; }
/* 「大きく見る」は図の下の帯（図の上に重ねると、公式の図の字（「退行期」など）を隠した。375 の実測 2026-10-05） */
.faq-figure-zoom-hint {
  display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 32px; padding: 4px 12px;
  border-top: 1px solid var(--line-1); background: var(--cream); color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.4;
}
@media (hover: hover) { .faq-figure-media.is-zoomable:hover .faq-figure-zoom-hint { background: var(--navy-100); color: var(--ink); } }
/* 虫眼鏡（丸＋柄） */
.faq-figure-zoom-hint::before {
  content: ""; width: 9px; height: 9px; border: 2px solid currentColor; border-radius: 50%;
  box-shadow: 4px 4px 0 -3px currentColor;
}
.faq-figure-points { display: grid; gap: 4px; margin: 0; padding-left: 1.2em; list-style: disc; }
.faq-figure-points li { color: var(--ink); font-size: 14px; line-height: 1.7; }
.faq-figure-points li::marker { color: var(--action-primary, var(--navy-700)); }

/* 回数・間隔・持続の目安（施術ごとのカード）。列の最小は吹き出しの幅まで(320px 幅の吹き出しの中身は 194px) */
.faq-figure-measures {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none;
}
.faq-figure-measure { min-width: 0; padding: 10px 12px; border: 1px solid var(--line-1); border-radius: 8px; background: var(--cream); }
.faq-answer-section p.faq-figure-measure-name { margin-bottom: 6px; color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.faq-figure-measure dl { display: grid; gap: 6px; margin: 0; }
.faq-figure-fact { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); column-gap: 8px; align-items: baseline; font-size: 12px; }
.faq-figure-fact dt { color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.6; }
.faq-figure-fact dd { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }

/* 経過の目安（いつ → 何。左に点と線） */
.faq-figure-timeline { display: grid; margin: 0; padding: 0; list-style: none; }
.faq-figure-timeline li { position: relative; display: grid; gap: 2px; padding: 0 0 14px 24px; font-size: 14px; }
.faq-figure-timeline li:last-child { padding-bottom: 0; }
.faq-figure-timeline li::before {
  content: ""; position: absolute; left: 3px; top: 5px; width: 12px; height: 12px; box-sizing: border-box;
  border: 2px solid var(--accent, var(--navy-500)); border-radius: 50%; background: var(--paper);
}
.faq-figure-timeline li::after {
  content: ""; position: absolute; left: 8px; top: 19px; bottom: 0; width: 2px; background: var(--line-1);
}
.faq-figure-timeline li:last-child::after { display: none; }
.faq-figure-when { color: var(--action-primary, var(--navy-700)); font-size: 13px; font-weight: 700; line-height: 1.6; }
.faq-figure-what { color: var(--ink); font-size: 14px; line-height: 1.7; }

/* 施術ごとの目安の比べ（決まった目盛りの帯＋公式の字。帯は飾りで、読み上げは字） */
.faq-figure-axis {
  display: grid; grid-template-columns: repeat(var(--steps), minmax(0, 1fr));
  color: var(--ink-2); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: right;
}
.faq-figure-axis span { padding-right: 2px; white-space: nowrap; }
.faq-figure-rows { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.faq-figure-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; min-width: 0; }
.faq-figure-row-name { color: var(--ink); font-size: 14px; font-weight: 700; line-height: 1.5; }
.faq-figure-bar {
  display: block; height: 10px; overflow: hidden; border-radius: var(--r-pill, 999px);
  background-color: var(--surface-3, #eef0f3);
  /* 目盛りの切れ目（白の細い線） */
  background-image: linear-gradient(to right, transparent calc(100% - 2px), var(--paper) 0);
  background-size: calc(100% / var(--steps)) 100%;
}
.faq-figure-bar-fill { display: block; width: calc(var(--reach) * 100%); height: 100%; border-radius: inherit; background: var(--accent, var(--navy-500)); }
.faq-figure-row-value { color: var(--ink-2); font-size: 13px; line-height: 1.6; }

/* 大きく見る窓 */
.faq-figure-zoom {
  width: min(960px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 12px;
  border: 0; border-radius: var(--r-card); background: var(--paper); color: var(--ink); box-shadow: var(--shadow-lg);
}
.faq-figure-zoom[open] { display: grid; gap: 10px; }
.faq-figure-zoom::backdrop { background: rgba(20, 20, 20, .72); }
.faq-figure-zoom-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.faq-figure-zoom-title { margin: 0; color: var(--ink); font-size: 15px; font-weight: 700; line-height: 1.5; }
.faq-figure-zoom-close {
  flex: 0 0 auto; min-width: 72px; min-height: 44px; padding: 0 16px;
  border: 1px solid var(--line-control, var(--line-1)); border-radius: var(--r-pill, 999px);
  background: var(--paper); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer;
}
@media (hover: hover) { .faq-figure-zoom-close:hover { background: var(--navy-100); } }
.faq-figure-zoom-img {
  display: block; width: 100%; height: auto; max-height: calc(100vh - 140px); max-height: calc(100dvh - 140px); object-fit: contain; background: #ffffff;
}

/* 600px 以上は名前と帯・字を横に並べる（目盛りは帯の上にそろえる） */
@media (min-width: 600px) {
  .faq-figure { --figure-name: 168px; }
  .faq-figure-axis { margin-left: calc(var(--figure-name) + 12px); }
  .faq-figure-row { grid-template-columns: var(--figure-name) minmax(0, 1fr); column-gap: 12px; row-gap: 2px; }
  .faq-figure-row-name { grid-row: span 2; }
  .faq-figure-timeline li { grid-template-columns: 8.5em minmax(0, 1fr); column-gap: 12px; }
}

/* スマホ（560px 以下）は段のある吹き出しの左右の余白が 12px。図の写しだけを吹き出しの縁まで広げる。
   375 の実測（2026-10-05）で吹き出しは 275px・文の幅は 249px、縁まで広げても図は 273px で基準の 280px に届かなかった。
   図の写しのある吹き出しだけ、会話欄の左右の余白（10px。brand-jewel.css）に 6px ずつはみ出させて 287px にし、図を 285px にする
   （:has の無い古いブラウザは 273px のまま。拡大の窓で見られる）。拡大の窓は画面の幅いっぱいに近づける。 */
@media (max-width: 560px) {
  .faq-figure-media { width: calc(100% + 24px); max-width: none; margin-inline: -12px; border-right: 0; border-left: 0; border-radius: 0; }
  .chat-log .bubble.bot.has-visual:has(.faq-figure.is-image) { width: calc(100% + 12px); max-width: none; margin-inline: -6px; }
  .faq-figure-zoom { width: calc(100vw - 16px); padding: 8px; }
}

/* 320px 幅(カードの中身 168px)は、項目の名前と値を上下に並べる(値が 1 行 4〜5 字に折れない) */
@media (max-width: 360px) {
  .faq-figure-fact { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
}

@media print {
  .faq-figure-zoom-hint, .faq-figure-zoom { display: none; }
  .faq-figure { break-inside: avoid; page-break-inside: avoid; }
}