/* ============================================================================
   固定ページ: よくあるご質問（/faq/）ページ固有CSS
   正本: design/pages/faq.html の <style id="page-scoped">（166行）＋末尾 .nowrap ユーティリティ（1行）。

   [20260918a/b すり合わせ 20260918c] design（20260916a〜o の再編）へ全面追随。
   ・追加 = .fuan-grid / .fuan-card（__illust / __body / __title / __text / __more）
            ＝カテゴリナビをディレクター支給イラストのカード8枚に置き換えたもの
   ・撤去 = .cat-nav / .cat-nav__link / .cat-nav__icon（旧・線画アイコンのカテゴリナビ）
   ・撤去 = .page-hero--compact .page-hero__body（20260916o でクラスごと廃止＝FVは共通既定 80px 0）
   ============================================================================ */

/* ============================================================================
   [20260810n] B確定トンマナ（design-rules §10）一貫性統一バッチ 適用済み
   ・級数   = --c1-fs-h2 / --c1-fs-h3 / --c1-fs-lead / --c1-fs-label-en（§10-2 L1〜L5）
   ・読み幅 = --c1-measure(720) / --c1-measure-narrow(640)（§10-5）
   ・画像幅 = 1480(--w-content) / 980 / 720 の3種のみ（§10-5）
   ・カードgap = --grid-gap(20px)／カード段組コンテナ = 980px（§10-5）
   ・セクション縦余白 = --sp-6/7/8/--sp-sec-sm の4段のみ（§10-5）
   ※本ブロック内に残る「C-1: SP22 / PC28」等のコメントは旧C-1級数時代の記述。
     現行の正は §10（B確定）＝上記トークン。
   ============================================================================ */

/* faq固有（WF由来。font-weight:bold→var(--fw-normal)／見出し固有クラスはfw明示） */
/* ==========================================================
   faq.html 専用CSS（カテゴリナビ・カテゴリ見出し）
   ========================================================== */
[id]{scroll-margin-top:70px;} /* 固定ヘッダー分のアンカーずれ防止 */
/* ==========================================================
   20260916a: カテゴリナビを「線画アイコン付き .cat-nav（SP2列／PC3列）」から
   house-process.html のイラストカード .fuan-grid（SP1列／PC2列×4行）へ置き換え。
   ディレクター指示（2026-09-16）＝「カテゴリナビ（.cat-nav）は fuan-grid＝PC2列×4行／SP1列に
   置き換えてください」。旧 .cat-nav 用CSS（.cat-nav / __link / __icon）と線画アイコンSVG6種は削除した。
   CSSは house-process.html から**一字一句そのまま移設**（2026-07-28 新設・2026-07-29 item14 改修の履歴を含む）。
   使用トークンは全て共通（tokens.css / c1-theme.css）でページ固有定義に依存しないことを確認済み。
   ※アコーディオン用CSS（.fuan-acc 系）は移設していない＝faq.html のQ&Aは常時開きのため不要。
   ========================================================== */
/* よくある不安から探す（2026-07-28：ディレクター支給イラストでカード化＝PC 2列×4行／SP 1列）
   イラスト＝assets/img/fuan-01〜08.webp（600×600・白背景・バストアップ線画）
   カード=既存カード文法（枠線1px・白背景）。
   2026-07-29 item14: カードhover背景変化は廃止・クリックは「回答を見る」ボタンのみ・FAQカード背景も統一。 */
.fuan-grid{list-style:none;display:grid;gap:var(--grid-gap);max-width:980px;margin:0 auto;}
@media(min-width:768px){.fuan-grid{grid-template-columns:repeat(2,1fr);gap:var(--grid-gap);}}
/* 2026-07-29 item14: カード全体<a>を解消（クリックは「回答を見る」ボタンのみ／item14c）＝
   カードは非リンクのdiv。カードhoverの背景色変化は廃止（白背景イラストとの違和感回避）。 */
.fuan-card{
  display:flex;align-items:stretch;gap:16px;height:100%;
  border:1px solid var(--c-line);background:var(--c-bg);
  padding:18px 20px 20px;color:var(--c-text);}
/* イラスト＝カード全高（＝「回答を見る」ボタン下端まで）へ拡大（item14a） */
.fuan-card__illust{align-self:stretch;flex:0 0 96px;width:96px;display:flex;align-items:center;justify-content:center;}
.fuan-card__illust img{display:block;width:100%;height:100%;object-fit:contain;}
.fuan-card__body{display:flex;flex-direction:column;flex:1;min-width:0;}
.fuan-card__title{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);margin-bottom:6px;}
.fuan-card__text{font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.9;}
/* 「〜を見る」＝小型ボタン（唯一のクリック対象）。ボタン自身のhoverのみ効かせる。 */
.fuan-card__more{display:inline-block;align-self:flex-start;margin-top:14px;font-size:var(--fs-micro);color:var(--c-text-sub);
  letter-spacing:var(--ls-1);text-decoration:none;
  border:1px solid var(--c-line);background:var(--c-bg);border-radius:var(--radius);padding:6px 14px;
  transition:color .3s ease,border-color .3s ease;}
/* 2026-08-20（R08）: ::after で矢印を付けると「›」だけが落ちる（実測768pxで1字落ち）。
   矢印を本文側へ出し「回答を見る ›」を .nowrap で一体にして送る（.mel__more と同じ手当て）。 */
.fuan-card__more:hover,.fuan-card__more:focus-visible{color:var(--c-text);border-color:var(--c-line-dark);outline:none;}
/* [20261023b] 20261020z の横棒は撤回（ディレクター：例外として横線を外す）＝末尾「›」の小型ボタンに戻した */
@media(min-width:768px){.fuan-card__illust{flex-basis:120px;width:120px;}}
.faq-category{max-width:var(--c1-measure);margin:0 auto;}
/* C-1 さざなみ: カテゴリ間はセクション間（--sp-6以上）より詰める＝同格の並びであることを余白で示す */
.faq-category + .faq-category{margin-top:var(--sp-sec-sm);}
/* 20260810f QA対応2: カテゴリ番号（.faq-category__num）を削除。見出しはカテゴリ名のみ */
.faq-category__head{
  border-bottom:2px solid var(--c-text);
  padding-bottom:14px;
  /* 20260810f QA対応3: 見出しと内容が詰まっていた（旧8px）。SP32 / PC40 に拡大 */
  margin-bottom:32px;
}
@media(min-width:768px){.faq-category__head{margin-bottom:40px;}}
/* C-1: このページはセクション見出しを持たないためカテゴリ名が最上位。SP22 / PC28 で
   Q（18px）・A（15px）とのジャンプ率を確保する（batch1 .g-block>h3 と同じ扱い）。 */
.faq-category__title{font-weight:500;font-size:var(--c1-fs-h2);letter-spacing:var(--c1-ls-h2);line-height:1.4;margin:0;}
/* 20260916o: ディレクター指示「FVの余白感などは **contact.html** が似ているページなのでそちらを基準に」。
   contact.html は `.page-hero`（`--compact` なし）＝`.page-hero__body` の既定 **80px/80px** を使い、
   直後のセクションを `padding-top:0` にして**ヒーロー側の余白だけで間を作る**組み方だった。
   本ページは `--compact`（上下56px）＋直後56px という別の組み方だったため、contact 方式へ揃えた。
   旧ルール（20260810f QA対応4）＝`.page-hero--compact .page-hero__body{padding:var(--sp-5) 0;}` は
   **クラスごと外したので削除**（本ページで `--compact` を使う箇所は他に無い＝死にCSSを残さない）。 */

/* ============================================================================
   [20260821ad] ディレクター指示「トップの見出しを news.html を基準に統一」（2026-08-21）。
   news.html（20260821q）＝interview.html と完全一致の値。同じ値をここに複製する。
   ┌ 項目 ────────┬ 768px以上 ─────────────┬ 390px ─────────────────┐
   │ 赤英字ラベル   │ 16px / 500 / ls3.52px  │ 14px / 500 / ls2.8px   │
   │ ラベル下マージン│ 18px                   │ 14px                   │
   │ 黒見出し       │ 32px / 400 / ls1.68px  │ 28px / 400 / ls1.68px  │
   │                │ 行間 41.92px(1.31)     │ 行間 36.68px(1.31)     │
   │ 罫線           │ 40×1px #aaa・上20.64px │ 40×1px #aaa・上21.56px │
   │ 見出し下マージン│ 28px                   │ 28px                   │
   │ リード         │ 15px / 400 / ls0.96px / 行間 30.75px(2.05)・左揃え・箱は中央 │
   └───────────────┴────────────────────────┴────────────────────────┘
   ※共有の .page-hero__title は 26px / 行間1.4 なので、それを上書きしている。
   ※本ページは密度モード（body.c1-dense）だが、密度モードが下げるのは
     --c1-fs-h2（セクション見出し）であって .page-hero__title は対象外。
     ページ見出し(h1)は他ページと同じ 28/32px で揃える（ディレクター指示「も同じにします」）。
   ※~~.page-hero--compact（上下パディング均等）は維持~~ → **20260916o で撤去**（contact.html 基準へ変更）。
   ※c1-theme.css は変更禁止（docs/22 R09）のため、すべてページ内で解決している。
     リードは c1-theme の `.c1 .page-hero__lead`(0,2,0) に勝つ必要があるので同じ詳細度で書く。
   ============================================================================ */
.page-hero .c1-label{margin-bottom:14px;}
.page-hero__title{
  font-family:var(--ff-jp);
  font-weight:500;   /* [20260821ae] 400→500 */
  font-size:var(--fs-h2-sm);
  line-height:var(--lh-h2);
  letter-spacing:var(--ls-h2);
  margin-bottom:28px;
}
/* [20260821ag] ディレクター指示「home.html 以外のページのタイトル下罫線は削除」。
   20260821h〜ad で入れた見出し下の罫線（40×1px）を撤去した。
   見出し下のマージン28pxは、統一済みの余白としてそのまま維持する。 */
/* 20260916r: ディレクター「余白を詰める」。20260916q で FVリードを隠した結果、
   見出し下が **28px（title の margin-bottom）＋ 80px（.page-hero__body の下パディング）＝108px** に広がっていた。
   **リード表示時の「最後のテキスト→カード」は 80px** だったので、そこへ戻す方向で下パディングを詰める。
   → `.page-hero__body{padding-bottom:48px}`＝**28+48＝76px**（リード有り時の80pxとほぼ同じ呼吸）。
   ⚠️**見出し下の28pxは触っていない**＝他ページのFVと共通の値（contact.html 等と同一）。
      ここを変えると faq のFVだけが他ページとずれ、style_audit の (B) に出る。
   ⚠️**上パディング80pxも据え置き**＝20260916o で contact.html に合わせた値。
   ⚠️48px は `.section__lead{margin-bottom:48px}` と同じスケール上の値。
      さらに詰めるなら 40px（--sp-4）＝68px、緩めるなら 56px（--sp-5）＝84px。 */
/* 20260917g: ディレクター指示「FVのパディングは**共通CSS既定のまま（80px 0）に揃える**」。
   本ページ固有の `.page-hero__body{padding-bottom:...}` を撤去し、`design-system.css` の
   `.page-hero__body{padding:80px 0;width:min(94vw,720px);margin:0 auto}` だけが効く状態に戻す。 */
.c1 .page-hero__lead{
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  margin-top:0;
  width:fit-content;max-width:var(--c1-measure);margin-inline:auto;text-align:left;
}
@media(min-width:768px){
  .page-hero .c1-label{margin-bottom:18px;}
  .page-hero__title{font-size:var(--fs-h2);}
}
/* C-1: 二層ラベル（英字＝各カテゴリのアンカーIDと同じ一般英語）。左揃えの見出し組みに合わせる */
.faq-category > .c1-label{margin-bottom:10px;}
.faq__a a{color:var(--c-text);}
.faq__a p + p{margin-top:.8em;}

/* ==========================================================
   よくある不安から探す（受け皿・2026-08-09 P55回答で新設）
   performance.html §6「不安の言語化リスト」(.worry) と同一の見た目・同一項目。
   ========================================================== */
.worry{max-width:var(--c1-measure);margin:0 auto;list-style:none;padding:0;border-top:1px solid var(--c-line);}
.worry__item{border-bottom:1px solid var(--c-line);}
.worry__item a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:16px 2px;text-decoration:none;color:var(--c-text);
}
.worry__q{font-size:var(--fs-body);line-height:1.9;}
.worry__to{flex:0 0 auto;font-size:var(--fs-micro);letter-spacing:.08em;color:var(--c-text-note);}
.worry__item a:hover .worry__q{opacity:.7;}
@media(max-width:767px){
  .worry__item a{flex-direction:column;gap:6px;}
}

/* 段落ち対策（QA faq-02／03／04／05）: SPで最終行に1〜2字だけ落ちる。文言は不変。
   方針（2026-08-19ディレクター指示）＝**段落ちの箇所だけを直す**。
   それ以外の行は従来どおり幅いっぱいまで文字を詰める。
   - `word-break:auto-phrase`／`text-wrap:balance` は不使用（全行の改行位置が動くため）。
   - 採用＝`text-wrap-style:pretty`。最終行だけを調整し、他行は素と同一に保つ。
   実測（SP390・素→pretty）:
     faq-02 .page-hero__lead 3文目「…お聞かせくださ／い。」 → 解消
     faq-03 .faq__q「…連絡がたくさん来ません／か？」        → 解消
     faq-04 .faq__q「…増改築も相談できます／か？」          → 解消
     faq-05 .faq__q「…売却・活用も相談できます／か？」      → 解消
     併せて .faq__a 3件（未指摘・「す。」×2／「い。」）も解消。計7件→0件。
   pretty で足りない箇所がなかったため .nowrap の追加は不要。
   適用範囲は本文要素全般。<br> で複数文に分かれた段落では「要素の最終行」ではなく
   各文の末尾に落ちるため、クラス単位の指定では取りこぼす（.page-hero__lead が該当）。 */
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){
.section .section__title,.section p,.section li,.section dd,.section dt,
.section h3,.section h4,.section figcaption,.page-hero__lead,.faq__q,.faq__a{text-wrap-style:pretty;}
}

/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08・2026-08-20）。
   本文中の <span class="nowrap"> で文節を一体で送り、最終行3字以下を防ぐ。
   ※theme の共通CSSには .nowrap が無く、ページ固有CSSの末尾に置くのが本テーマの規約。 */
.nowrap{white-space:nowrap;}