/* ============================================================================
   固定ページ: 家づくりの進め方（/house/process/）ページ固有CSS
   正本: design/pages/house-process.html の <style id="page-scoped">（161行）＋末尾 .nowrap（1行）。

   [20260918d すり合わせ] design（20260916a〜c・g〜i の再編）へ全面追随。
   ・撤去 = 最下部「よくある不安から探す」のイラストカード＋Q&A 14問まわりのCSS
            （FAQは faq.html へ一本化＝2026-09-16 ディレクター方針変更）
   ============================================================================ */

/* [20260810n] ヒーローキャッチ＝セクション見出しと同一級数（design-system.css §hero-intro の
   「キャッチ＝.section__title と同一の文字サイズ」＝2026-07-27 ディレクター指示3-1）を B確定級数で回復する。
   共有 design-system.css は .hero-intro__catch を旧C-1ペア（--fs-h2-sm 28 / --fs-h2 32）で固定しており、
   c1-theme.css §7-1 は .section__title だけを --c1-fs-h2（clamp 26〜40）へ移したため、
   PCでキャッチ32 < 見出し40、SPでキャッチ28 > 見出し26 と序列が崩れていた（実測）。
   ★恒久対応は c1-theme.css §7-1 への1行追加（全279ページ＋?v一括バンプ）＝PL/PMへ申し送り。
      本タスクは共有CSS不変の方針のため、該当12ページにページ内で同値を当てる。 */
.c1 .hero-intro__catch{font-size:var(--c1-fs-h2);letter-spacing:var(--c1-ls-h2);}

/* ============================================================================
   [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確定）＝上記トークン。
   ============================================================================ */

/* house-process固有 */
/* 進め方の特徴 */
/* [20260821at] ディレクター指示「罫線を入れて見やすさを改善。フォントサイズは先ほどの
   小見出し変更と同じように」。参照元＝**house-life-id-design.html の .attitude-list**
   （「対話で、大切にしていること」）。20260821as で house.html の .step-accent（2カラム）に
   寄せたが、ディレクター確認で .attitude 側が正だったため作り直した。
   .attitude と同値にする点:
     ・読み幅 --c1-measure-narrow（640px）・左揃え
     ・各項目 padding:24px 0 ＋ border-bottom、**先頭だけ border-top**（＝上下が罫線で閉じる）
     ・見出しの下に説明を**縦積み**（2カラムにしない）
     ・見出し --fs-h3（SP16px / 768以上18px）／説明 --fs-body(15px)
   ※級数は .attitude__title（20260821ar）と同じく --c1-fs-h3 の clamp（1440pxで21.6px）から
     固定トークン --fs-h3 へ。 */
/* [20261019h] ディレクター「罫線で区切っただけの一覧は手抜き感がある」→ A案＝番号付きの2〜3列（罫線なし）。
   SP＝1列／768px以上＝2列／5項目以上は1024px以上で3列。番号は CSS の連番（01〜）で、項目が1つだけのときは出さない。 */
.point-list{list-style:none;max-width:var(--c1-measure);margin:64px auto 0;text-align:left;display:grid;gap:40px;counter-reset:pl;}
.point-list > li{counter-increment:pl;}
.point-list > li::before{content:counter(pl,decimal-leading-zero);display:block;margin-bottom:12px;font-family:var(--ff-en);font-weight:500;font-size:20px;line-height:1;letter-spacing:.12em;color:var(--c-text-note);}
.point-list > li:only-child::before{content:none;}
@media(min-width:768px){
  .point-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 56px;}
  .point-list:has(> :only-child){grid-template-columns:1fr;max-width:var(--c1-measure-narrow);}
}
@media(min-width:1024px){
  .point-list:has(> :nth-child(5)){grid-template-columns:repeat(3,minmax(0,1fr));max-width:1080px;gap:56px 48px;}
}
.point-list__title{font-size:var(--fs-h3);font-weight:500;letter-spacing:var(--ls-2);margin-bottom:6px;}
.point-list__text{font-size:var(--fs-body);color:var(--c-text-sub);line-height:var(--lh-body);}

/* 全体フロー図（11工程カード）
   ▼2026-08-10j QA指示：本セクション（横スクロールの11工程カード）は**中止＝非表示**。
     HTML/CSS/JSは復帰可能なようコメントで温存する（削除しない）。
     以降のCSSは非表示中のため未適用。
   ▼2026-07-28 クライアント指示：単独の横スクロール帯 → トップ「こだわり」（home.html .lp-frag）と
     同じ sticky 縦スクロール連動の横流しに変更。
   ・基本（SP／JS無効／prefers-reduced-motion）＝ネイティブ横スクロール＋スナップ（従来どおり）
   ・PC拡張（JSが .is-pin を付与・非reduced時のみ）＝pinをstickyで固定し、
     ページの縦スクロール量に比例してトラックを translateX（スクロールジャックはしない）
   ・ランウェイ計算：extra = track.scrollWidth − pin.clientWidth、stage高 = pin高 + extra */
.flow-figure{position:relative;}
.pflow__stage{position:relative;}
/* スクロールトラック：max1480px内を左右いっぱいに使い、右端見切れで続きを示唆 */
.pflow{list-style:none;display:flex;gap:16px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;
  padding:4px 4px 18px;margin:0;scrollbar-width:thin;scrollbar-color:var(--c-line-dark) transparent;}
.pflow::-webkit-scrollbar{height:6px;}
.pflow::-webkit-scrollbar-track{background:var(--c-line-soft);border-radius:0;}
.pflow::-webkit-scrollbar-thumb{background:var(--c-line-dark);border-radius:0;}
/* PC pinモード（JS付与） */
.flow-figure.is-pin .pflow__pin{
  position:sticky;top:var(--gnav-h,56px);height:auto;
  padding:clamp(24px,4vh,56px) 0;display:flex;align-items:center;overflow:hidden;}
.flow-figure.is-pin .pflow{
  overflow:visible;flex-wrap:nowrap;scroll-snap-type:none;padding-bottom:0;
  transform:translateX(var(--pflow-x,0px));transition:none;}
/* トラック先頭に0.5カード分の余白（2026-07-29 item13a・home「こだわり」と同様の見え方）＝
   1枚目が左端にべったり付かず、末尾の::afterと対称の呼吸をつくる。extra=scrollWidth基準のため自動反映。 */
.flow-figure.is-pin .pflow::before{content:"";flex:0 0 clamp(100px,9vw,140px);align-self:stretch;}
/* トラック末尾に0.5カード分の余白＝11枚目が右端に張り付いた瞬間に縦へ切り替わらないように */
.flow-figure.is-pin .pflow::after{content:"";flex:0 0 clamp(100px,9vw,140px);align-self:stretch;}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .flow-figure.is-pin .pflow__pin{position:static;padding:0;overflow:visible;}
  html:not(.wf-force-motion) .flow-figure.is-pin .pflow{transform:none;overflow-x:auto;}
  html:not(.wf-force-motion) .flow-figure.is-pin .pflow::before,
  html:not(.wf-force-motion) .flow-figure.is-pin .pflow::after{content:none;}
}
/* 工程カード＝直下の該当STEP詳細へジャンプするページ内リンク（2026-07-29 item13b） */
.pflow__link{display:flex;flex-direction:column;flex:1;height:100%;text-decoration:none;color:inherit;}
.pflow__item:hover .pflow__label,.pflow__link:focus-visible .pflow__label{text-decoration:underline;text-underline-offset:3px;}
.process-step{scroll-margin-top:96px;} /* ジャンプ時に縮小ヘッダー下へ着地（縮小高≒84px＋余白） */
.pflow__item{scroll-snap-align:start;flex:0 0 200px;min-height:150px;
  border:1px solid var(--c-line);background:var(--c-bg);padding:18px 18px 20px;
  display:flex;flex-direction:column;}
.pflow__no{font-family:var(--ff-en);font-weight:var(--fw-thin);font-size:26px;
  color:var(--c-line-hair);line-height:1;letter-spacing:0;margin-bottom:12px;}
.pflow__label{font-size:var(--fs-body);color:var(--c-text);line-height:1.6;letter-spacing:var(--ls-1);
  font-weight:var(--fw-normal);margin-bottom:8px;}
.pflow__desc{font-size:var(--fs-caption);color:var(--c-text-sub);line-height:1.8;margin-top:auto;}
/* スクロール可能を示すヒント（右端フェード＋テキスト） */
.pflow-hint{font-size:var(--fs-micro);color:var(--c-text-note);letter-spacing:.18em;
  margin:4px auto 0;max-width:900px;text-align:right;}
.pflow-hint::before{content:"‹ ";color:var(--c-line-dark);}
.pflow-hint::after{content:" ›";color:var(--c-line-dark);}
@media(min-width:768px){
  .pflow__item{flex-basis:216px;min-height:160px;}
}

/* STEP縦反復（番号付き同一テンプレート＝「数えて見せる」W-5） */
.process-steps{list-style:none;max-width:var(--c1-measure);margin:0 auto;}
.process-step{margin-bottom:var(--sp-7);}
.process-step:last-child{margin-bottom:0;}
/* 20260810j QA指示⑤: STEP番号を大きく表記。級数トークン内で2段上げ（--fs-micro 11px → --fs-caption 13px）。
   太字は使わず、サイズ・字間・罫線の占有で存在感を出す（C-1トンマナ）。 */
.process-step__num{font-family:var(--ff-en);font-size:var(--fs-caption);letter-spacing:.28em;color:var(--c1-accent);border-bottom:1px solid var(--c-line-dark);display:inline-block;padding:0 2px 9px;margin-bottom:20px;}
.process-step__title{font-weight:500;font-size:var(--c1-fs-h3);letter-spacing:var(--ls-2);line-height:1.5;margin-bottom:28px;}
.ph--step{min-height:160px;margin-bottom:24px;}
/* 20260810j QA指示③: 各STEPに写真を配置（assets/img/process-step-img01〜11.webp・1800×900＝2:1）。
   .is-photo（design-system）でクリップ＋object-fit:cover。非リンクのためホバーズームは効かない。 */
.process-step__fig{margin:0 0 28px;aspect-ratio:2/1;}
@media(min-width:768px){.process-step__fig{margin-bottom:32px;}}
.process-step__body p{margin-bottom:1.6em;}
.process-step__body p:last-child{margin-bottom:0;}
.step-note{font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);margin-top:-1.1em;}
.process-step__faq{margin-top:28px;border:1px solid var(--c-line);background:var(--c-bg-sub);padding:16px 18px;}
/* 20260916d: ディレクター指示「『この段階でよくある質問』の欄の文字が小さいのでSTEPの本文と同じ
   サイズ感にしてください」。**リンク＝--fs-caption(13px) → --fs-body(15px)＝STEP本文と同値**。
   ラベルは --fs-micro(11px) → --fs-caption(13px)＝ラベル<本文 の上下関係は保ったまま底上げ
   （15pxに上げるとラベルが小見出しの級数になり、囲みの中で主従が逆転するため）。
   line-height は比率指定なので級数に追随する（本文2.05・リンクも2.05のまま）。
   ⚠️このクラスは house-process.html 専用（consultation.html にあるのは言及コメントのみ）＝
     他ページへの波及なし・共通CSS無変更のため ?v バンプ不要。 */
.process-step__faq-label{font-size:var(--fs-caption);font-weight:var(--fw-normal);letter-spacing:.18em;color:var(--c-text-note);margin-bottom:10px;}
.process-step__faq-list{list-style:none;font-size:var(--fs-body);}
.process-step__faq-list li{padding:3px 0;}
/* 20260916e: ディレクター指示「『Q.』の部分を虫眼鏡のアイコンに置き換えたい（A案＝Q.は削除）／
   一般的な左上に円で」。サイト内に虫眼鏡アイコンは存在しなかったため**新規作成**。
   作法は既存の線画アイコンに合わせた＝viewBox 0 0 24 24／fill:none／stroke:currentColor／
   stroke-width:1.6／linecap・linejoin:round（`.tel-card__ic`・`.iv-format__ic` と同規格）。

   🔴 20260916f: **flexコンテナを <a> から <li> へ移した**。20260916e では <a> を inline-flex に
   していたが、ディレクター指摘「なぜ下線が追加されましたか？」を調査して**副作用2件**が判明した。
     ①**静的な下線が出た**＝`<a>` のブラウザ既定 `text-decoration:underline` は本案件のCSSで一度も
       打ち消されていない。従来それが見えなかったのは、`assets/link-anim.js` がラベルを
       `.la-roll__w`（**display:inline-block**）で包んでおり、**下線は atomic inline の内側には
       描かれない**ため。<a> を inline-flex にしたことで中身がフレックスアイテム（＝ブロック化された
       in-flow ボックス）になり、親の装飾が伝播して下線が描かれるようになった。
     ②**ホバー時の下線アニメーションが失われた**＝`link-anim.js` は
       「`hasEl && /flex|grid/.test(display)` のコンテナは1要素に包むとレイアウトが崩れるので触らない」
       （L183 `txtSkipFlex`）という除外条件を持つ。inline-flex 化でこの22本が除外され、
       改修前に全22本が持っていた `la-roll la-roll--flat la-hover`（＝下線が左→右に伸びる演出）が消えた。
   → **対処＝SVGを `<li>` の直下へ出し、`<li>` を flex コンテナにする**。`<a>` は
     「テキスト＋`<span class="nowrap">`」という**改修前と同じ構造・同じ display:inline** に戻るので、
     link-anim.js が再び適用され、静的下線も再びマスクされる。
   ⚠️`<a>` 側で flex を使ってはいけない理由はもう1つある＝flex直下に素のテキストノードと
     `<span class="nowrap">` を並べると**両者が別々のフレックスアイテムになり gap で文が分断される**
     （2026-08-20に `.faq__toggle` で実際に起きた不具合・docs/22 §9）。
   ⚠️トレードオフ＝アイコンが `<a>` の外に出るため**虫眼鏡そのものはクリック対象ではない**
     （クリック範囲は設問テキスト）。折り返し2行目がテキスト頭に揃う（ぶら下げインデント）のは維持。 */
.process-step__faq-list li{display:flex;align-items:flex-start;gap:.4em;}
.process-step__faq-list a{color:var(--c-text-sub);flex:1 1 auto;min-width:0;}
.process-step__faq-ic{flex:none;width:.95em;height:.95em;margin-top:.52em;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
@media(min-width:768px){
  .ph--step{min-height:220px;}
}

/* 20260916b: 「よくある不安から探す」のイラストカード（.fuan-grid / .fuan-card*）と
   カテゴリ別Q&Aアコーディオン（.fuan-acc*）のCSS 計39行を削除。
   ・カードのCSSは 20260916a で `design/pages/faq.html` へ一字一句そのまま移設済み（そちらが現住所）。
   ・アコーディオンのCSSは移設していない＝faq.html のQ&Aは常時開きのため不要。
   ・削除した定義は `design/pages/_backup/20260916b/house-process.html` に残っている。 */

/* 段落ち対策ユーティリティ（基準=docs/22 §9 R08）。theme の共通CSSには .nowrap が無いため
   ページ固有CSSの末尾に置く（本テーマの規約）。 */
.nowrap{white-space:nowrap;}

/* [20261019m] 「I.D.WORKSの進め方の特徴」＝A案「線画アイコン付きの5枠」（ディレクター選択）。
   各項目を細い枠で囲み、上に線画アイコン（家族／太陽と土地／硬貨／図面と鉛筆／家とチェック）。番号は出さない。
   （列の数は下の追記を参照）SP＝1列。アイコンは文字色の線（塗りなし）。 */
.point-list--icons{display:flex !important;flex-wrap:wrap;justify-content:center;gap:24px !important;max-width:1200px !important;margin-top:56px !important;}
.point-list--icons > li{flex:0 0 100%;box-sizing:border-box;padding:36px 24px 30px;border:1px solid var(--c-line);background-color:var(--c-bg);text-align:center;}
.point-list--icons > li::before{content:none !important;}
.point-list--icons .pl-icon{display:block;width:52px;height:52px;margin:0 auto 20px;fill:none;stroke:var(--c-text);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;}
.point-list--icons .point-list__title{margin-bottom:10px;}
.point-list--icons .point-list__text{text-align:left;}
/* [20261029b] SP（767px以下）では pretty を使わない＝iPhone の Safari は段落全体の行をそろえようとして全行が短くなり、文章が左に寄って見えるため（ディレクター選択＝案B）。 */
@media(min-width:768px){ .point-list--icons .point-list__text{text-wrap:pretty;} }   /* 最後の行が数文字だけにならないように（対応ブラウザのみ） */
/* [20261019m 追記] ディレクター「5列にすると文が縦長になりがち」→ 列を減らして1枠を広く。
   768〜1023px＝1列の横長の枠（アイコン左・文字右）／1024px 以上＝3＋2 を中央寄せ（1枠 約380px）。 */
@media(min-width:768px) and (max-width:1023px){
  .point-list--icons{max-width:720px !important;gap:16px !important;}
  .point-list--icons > li{display:grid;grid-template-columns:52px 1fr;column-gap:28px;align-items:center;padding:28px 32px;text-align:left;}
  .point-list--icons .pl-icon{grid-row:1 / span 2;margin:0;}
  .point-list--icons .point-list__title{margin-bottom:6px;}
}
@media(min-width:1024px){
  .point-list--icons{max-width:1140px !important;gap:24px !important;}
  .point-list--icons > li{flex:0 0 calc((100% - 48px) / 3);padding:40px 32px 34px;}
  .point-list--icons .point-list__text{text-align:center;text-wrap:balance;}   /* 中央の見出しにそろえ、2行の長さをそろえる */
}
/* [20261019zf] 字の強弱だけ調整（ディレクター「元に戻して、フォントの調整だけで」。20261019ze の線でつなぐ形は取り消し）。
   見出し＝大きく普通の太さ（--c1-fs-h3・400）／説明＝小さめのグレー（--fs-caption）。施工品質管理などと同じ組み方。 */
.point-list.point-list--icons .point-list__title{font-size:var(--c1-fs-h3);font-weight:400;letter-spacing:.05em;line-height:1.5;}
.point-list.point-list--icons .point-list__text{font-size:var(--fs-caption);line-height:1.9;}
/* [20261019zh] 進め方の特徴：線でつなぐ形（20261019zg）は取り消し、5つの枠が順にふわっと出る動きに（ディレクター「線はなしで、順番にふわっと出てくるように。微差でいい」）。
   一覧に .reveal（画面に入ったら .is-in）。枠ごとに 0.12 秒ずつずらすだけ。動きを減らす設定では最初から表示。
   線画アイコンの描き直し（ディレクター「線画イラストがおかしい部分がある」）：
   家族＝大人の肩の線が子どもの頭に重なっていたのを離す／硬貨＝積んだ硬貨の裏の線が透けて見えていたのを、見える線だけに／図面と鉛筆＝左下の余計な鉤形を消し、鉛筆を紙の外へ（文字の線に重ならないように）。 */
.wf-reveal .point-list--icons.reveal{opacity:1;transform:none;transition:none;}
.wf-reveal .point-list--icons.reveal > li{opacity:0;transform:translateY(16px);}
.wf-reveal .point-list--icons.reveal.is-in > li{opacity:1;transform:none;transition:opacity .8s cubic-bezier(.22,.61,.36,1),transform .8s cubic-bezier(.22,.61,.36,1);}
.wf-reveal .point-list--icons.reveal.is-in > li:nth-child(2){transition-delay:.12s;}
.wf-reveal .point-list--icons.reveal.is-in > li:nth-child(3){transition-delay:.24s;}
.wf-reveal .point-list--icons.reveal.is-in > li:nth-child(4){transition-delay:.36s;}
.wf-reveal .point-list--icons.reveal.is-in > li:nth-child(5){transition-delay:.48s;}