/* ============================================================================
   I.D.Works 非住宅（biz）サイト  白/濃グレー反転トーン ＋ C-1品質基準  biz-c1-dark.css
   ----------------------------------------------------------------------------
   目的 : 2026-08-08 ディレクター指示
          「bizはトップ以外WF状態。CBテイストでトンマナを統合し、
            **白と濃いグレーを反転したトーン**でbiz全ページデザインを整える」
          を、biz 7ページ共通の1レイヤーとして実装する。
   前提 : Figmaカンプ未達 ＝ **構成・文言・機能は `wireframes/biz/` が正**。
          カンプ到着後は本ファイルの数値と各ページの `#page-scoped` に差分を当てる
          （HTML構造・文言には触らずに済むよう、変更点をすべてCSS側へ寄せてある）。
   出典 : ・トーン反転の骨格 = design/pages/assets/tokens.css §1（住宅の白基調）の**明暗反転**
          ・品質基準（級数5段・二層ラベル・720px標準組・さざなみ・大判リズム）
            = design/design-rules.md §9 ＋ design/pages/assets/c1-theme.css の実装値
          ・ボタン = design/design-rules.md §8（ボタン統合仕様）のダーク反転
   読み順: biz-base.css → biz-nav.css → Google Fonts/YakuHanJP → 各ページ<style> →
          **本ファイル（最後）**。後勝ちで上書きするため、biz-base.css / biz-nav.css の
          コピーは wireframes/biz/ とほぼ差分ゼロのまま維持する（カンプ差分反映を容易にする）。
          唯一の例外＝`font-weight:600` 計4declの `500` 化（design-rules §6-3「WF由来CSSの
          太字は移植時に500へ」。該当行にコメントを残してある）。
   禁止 : `design/pages/assets/c1-theme.css` 本体・住宅側共有アセット・`wireframes/biz/` の変更。
          文言（可視テキスト）の変更。
   段階 : tag 20260808a  作成 2026-08-08  design-assistant
   注記 : ⚠️＝ディレクター確認事項（報告に記載）
   ============================================================================ */

/* ============================================================================
   1. トーン反転トークン（白 ⇄ 濃グレー）
   ----------------------------------------------------------------------------
   biz-base.css の :root（カンプ実測のミドルグレー #6e6f70 系）を**丸ごと差し替える**。
   変数名は WF と同一 ＝ 全ページ・全コンポーネントが自動追従する（WFの設計意図どおり）。

   反転の対応（住宅 tokens.css → biz dark）:
     --c-bg      #ffffff → #1a1a1a（住宅 --c-text / --c-dark と同値＝「白と濃グレーの反転」の直訳）
     --c-bg-sub  #f4f4f4 → #232426（セクション帯。WFのミドルグレー階調をダーク側の階調へ移した）
     --c-bg-soft #f9f9f9 → #2b2b2b（住宅 --c-btn Mine Shaft と同値。最も明るい面）
     --c-text    #1a1a1a → #ffffff
     --c-text-sub #666666 → #b8b9ba
     --c-text-note #888888 → #909193
     --c-line    #cccccc → rgba(255,255,255,.14)   ← 罫線＝白の低透過
     --c-line-dark #999999 → rgba(255,255,255,.30)
     --c-ph      #e6e6e6 → #2a2b2c
   ============================================================================ */
:root{
  /* --- 面（背景） ---
     2026-08-09 ディレクター指示（Notionチェックリスト biz home デザイン修正欄）:
     「background-color #555」＝主背景を濃グレー#1a1a1aからミドルグレー#555へ。
     階調は #555 を基準に再構成（帯=一段暗く／入力欄・PH=一段明るく）。 */
  --c-bg:#555555;          /* 主背景＝ミドルグレー（ディレクター指定値） */
  --c-bg-sub:#4b4c4d;      /* セクション交互／カード面（一段暗い帯） */
  --c-bg-sub2:#616263;     /* 一段明るい（アコーディオン展開部・入力欄など） */

  /* --- 文字（#555上の実測: #fff=7.0:1 / sub=4.9:1 / note=3.9:1） --- */
  --c-text:#ffffff;        /* 本文・見出し（白） */
  --c-text-sub:#dcddde;    /* 補助テキスト */
  --c-text-note:#c6c7c8;   /* 注記（11〜13px注記はAA未満＝⚠️報告事項） */

  /* --- 罫線（白の低透過＝#555地では従来比やや強めに） --- */
  --c-line:rgba(255,255,255,.22);
  --c-line-dark:rgba(255,255,255,.40);

  /* --- プレースホルダ面 --- */
  --c-ph:#5e5f60;

  /* --- ボタン／アクティブ面（面には赤を使わない＝アクロマティック原則） --- */
  --c-primary:#ffffff;     /* 塗り面＝白 */
  --c-primary-ink:#1a1a1a; /* 塗り面の上の文字＝濃グレー */
  --c-accent:#ffffff;      /* 「アクティブ面」用（チップ選択・必須バッジ等）＝白 */

  /* --- 角丸: 2026-08-09 P56③回答「推奨で実行」＝住宅と統一し角丸0へ（ピル999pxは温存確定） --- */
  --radius:0;

  /* ==========================================================================
     accent＝編集の赤（C-1と同一・design-rules §9-3）
     --------------------------------------------------------------------------
     ⚠️ダーク地での視認性実測（WCAG 2.1 相対輝度で算出。地=--c-bg #1a1a1a / --c-bg-sub #232426）:
        #c0392b … 3.20:1（#1a1a1a上）／2.86:1（#232426上）
          → 非テキスト（罫線・ティック・枠）の 3:1 基準は #1a1a1a 上で**合格**
          → 小級数テキスト（11〜13px）の AA 4.5:1 は**明確に不足**
        #e05a4a（同系の暗地用ティント）… **4.75:1**（#1a1a1a上・AA合格）
                                         ／4.24:1（#232426の帯上＝AAの94%・**わずかに不足**）
     採用: **面/罫線/ティック＝#c0392b（C-1と完全同値）**、
           **11〜13pxの英字ラベル等の"文字"のみ #e05a4a**（赤は1色系のまま、地の明暗で
           インクだけ持ち上げる扱い）。
     ⚠️帯上（#232426）の 4.24:1 の扱い＝ディレクター判断（報告に記載）:
       A案 現状維持（帯上のみAAの94%）／B案 --c-bg-sub を #1f2022 へ一段暗くして全地AA達成
       （帯の段差はより繊細になる）／C案 accent-ink を #dd7469 へ明るくして全地AA達成
       （赤みが薄れ「編集の赤」から離れる）。PL/PM推奨＝A（帯の段差＝レイアウトの骨格を優先）。
     ========================================================================== */
  /* 2026-08-10 クライアント決定「表現案B（カーサ編集）×アクセントカラー赤」＝**赤を復活**。
     8/09の全廃指示（モノトーン化）はこの決定により上書き（design-rules §9→§10）。
     上の実測に従い、ダーク地では**線＝#c0392b（住宅と同値）／文字＝#e05a4a（暗地用ティント）**
     の2値運用に戻す。⚠️帯上（--c-bg-sub #232426）の文字は 4.24:1＝AAの94%（既知・A案採用中）。 */
  --c1-accent:#c0392b;                /* 罫線・ティック・枠・下線（非テキスト／3:1合格） */
  --c1-accent-ink:#e05a4a;            /* 11〜13pxの英字ラベル・番号（テキスト／#1a1a1a上4.75:1） */

  /* --- 読み幅（C-1 §9-1「本文720px基準」） --- */
  --c1-measure:720px;
  --c1-measure-narrow:640px;

  /* ==========================================================================
     級数5段（C-1）＋ 上位2段
     --------------------------------------------------------------------------
     PC : h1 40 / statement 36 / L1 32 / L2 18 / L3 15 / L4 13 / L5 11
     SP : h1 28 / statement 28 / L1 24 / L2 16 / L3 15 / L4 13 / L5 11
     ＝中間サイズ（12/14/16/17/19/20/22/26/30）の乱立を解消。
     ※FVの大コピー（clamp 44〜76px）は「FVまわり=WFが正」のため対象外。
     ========================================================================== */
  /* 2026-08-09 ディレクター指示「文字サイズ全体的に大きめにしてh2は40px」＝全段一段引き上げ */
  --bz-fs-h1:30px;
  --bz-fs-statement:30px;
  --bz-fs-l1:26px;
  --bz-fs-l2:17px;
  --bz-fs-l3:16px;
  --bz-fs-l4:14px;
  --bz-fs-l5:12px;

  /* --- 段落間隔（「打ち込んだだけ」の解消・c1-theme と同値） --- */
  --c1-para-gap:2.2em;

  /* --- フォント（住宅と共通スタック＝ブランド統合。tokens.css §2 と同一） --- */
  --ff-jp:"Jost","YakuHanJP","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  --ff-en:"Jost","Century Gothic","Futura","Trebuchet MS",var(--ff-jp);
}
@media(min-width:768px){
  :root{
    --bz-fs-h1:44px;
    --bz-fs-statement:40px;
    --bz-fs-l1:40px;   /* h2=40px（2026-08-09 ディレクター指定値） */
    --bz-fs-l2:20px;
  }
}

/* --- ヘッダー配色（上段ユーティリティバー）
   2026-08-09 ディレクター指示「gnav__utilbarのbackground-color #999」。
   #999地に白文字は2.1:1で不可読のため、バー内の文字・アイコンは濃色へ（⚠️報告事項） --- */
:root{
  --gnav-utilbar-bg:#999999;
}

/* ============================================================================
   2. 基本タイポグラフィ（フォント差し替え・太字禁止の徹底）
   ----------------------------------------------------------------------------
   ・和欧混植: 英字/数字=Jost・約物=YakuHanJP・和文=Noto Sans JP（住宅と同一）
   ・**太字（bold/600以上）禁止**＝見出し・強調は 500 上限（design-rules §0／docs/22 §5）
     biz-base.css の h1〜h4:600 / .txt strong:600 / .bfoot__* :600 をここで 500 へ落とす。
   ============================================================================ */
body{
  font-family:var(--ff-jp);
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:500;letter-spacing:.06em;word-break:auto-phrase;}
strong,.txt strong,.bfoot__logo-mark,.bfoot__head{font-weight:500;}
/* ダーク地は白文字が太って見えるため、本文の字面をわずかに軽くする（ハローの抑制） */
.txt,p,li,dd{font-weight:400;}

/* --- 英字・数字は Jost（装飾英字ポリシー R03: 飾りの英字は可・用語は発明しない） --- */
.eyebrow,.page-hero__eyebrow,.sig,.fv__sig,.bfoot__sig,.gnav__type-sig,
.value-sec__label,.value-band__word,.value-band__k,.pillar-sec__k,.pcard__k,
.pillar-btn__k,.next-read__k,.wd-set__num,.faq-cat__id,.stat__num,
.cflow__arw,.faq-tab__n{
  font-family:var(--ff-en);
}
/* 署名（in design your identity）＝住宅のタグライン処理に合わせ Jost・非イタリック。
   住宅の大タグラインは200だが、ここは11〜13pxの小級数のため 400（200は暗地で細りすぎる実測）。 */
.sig,.fv__sig,.bfoot__sig,.gnav__type-sig{
  font-style:normal;font-weight:400;letter-spacing:.18em;
}

/* ============================================================================
   3. 二層ラベル（英字ラベル accent ＋ 和文見出し500）
   ----------------------------------------------------------------------------
   works-detail-proposal の `SCENES OF LIVING ／ 暮らしの風景` 型を、
   WFに**既にある** `.eyebrow`（英字）＋直後の `.h-sec`（和文）の組で成立させる。
   ＝新しい英字ラベルを1語も追加しない（文言不変・用語の発明禁止）。
   採用済み英字（すべてWF既存・一般英語）:
     Policy / Not expensive, but well-allocated / OUR VALUE / Works / For You /
     Side by side / Movie / Track Record / Case / What we look at together /
     Flow / Q&A / Form / Photo / Owner's voice / Related / WORKS / CONTACT /
     INQUIRY / FAQ / START MONEY PLACE FLOW DESIGN SENMON KOJI AFTER ORDER（FAQカテゴリID）
   ============================================================================ */
.eyebrow,.page-hero__eyebrow{
  font-size:var(--bz-fs-l5);letter-spacing:.22em;line-height:1.5;
  color:var(--c-text);  /* [20261016zc] 赤→白（#555地で赤は2.0:1と読みにくい・ディレクター指示）。旧＝var(--c1-accent-ink) */
  margin-bottom:14px;display:block;
}
.page-hero__eyebrow{margin-bottom:0;}
/* 二層ラベルの直後にくる和文見出しは、ラベルとの間を詰める（関連要素間＝詰める） */
.eyebrow + .h-sec,.eyebrow + h2{margin-top:0;}
.value-sec__label{
  font-size:var(--bz-fs-l4);font-weight:200;letter-spacing:.34em;
  color:var(--c-text);  /* [20261016zc] 赤→白 */
}
.value-sec__lead{
  font-size:var(--bz-fs-l4);color:var(--c-text-sub);letter-spacing:.06em;margin-top:10px;
}
/* 読解線ティック（C-1 §9-4「キャプション主導」の先頭ティック）＝1画面1点まで */
.value-sec__lead::before{
  content:"";display:inline-block;width:14px;height:1px;
  background:var(--c1-accent);vertical-align:middle;
  margin-right:10px;transform:translateY(-1px);
}

/* ============================================================================
   4. 級数5段の割り当て（中間サイズの解消）
   ============================================================================ */
/* --- h1（ページタイトル）＝最上段 --- */
.page-hero h1,.cons-hero h1{
  font-size:var(--bz-fs-h1);line-height:1.45;letter-spacing:.08em;
}
.page-hero h1{margin:14px 0 var(--sp-3);}
/* works-detail の実例名h1は、WFでは `.page-hero__eyebrow` クラス＋インラインstyle
   （font-size:28px / color / line-height）で組まれている（WF由来のマークアップ癖）。
   DOM・文言を変えずに級数（h1=40/28）とトラッキング（.08em）を正すため、
   **この1箇所のみ** インラインstyleに勝つ !important を使う。 */
h1.page-hero__eyebrow{
  font-size:var(--bz-fs-h1)!important;
  line-height:1.45!important;
  letter-spacing:.08em;font-weight:500;color:var(--c-text);
  margin:14px 0 var(--sp-3);
}

/* --- 宣言文（山場の問い）＝h1の次・L1を上回らせてジャンプ率を確保 --- */
.ask__q{
  font-size:var(--bz-fs-statement);line-height:1.6;letter-spacing:.08em;
  margin-bottom:var(--sp-4);
}

/* --- L1 セクション見出し（和文500・字間 .08em＝c1-theme と同値） --- */
.h-sec,.faq-cat__h,.wd-set__t,.value-band__t,.pillar-sec__t,.consult-final__h{
  font-size:var(--bz-fs-l1);font-weight:500;line-height:1.55;letter-spacing:.08em;
}
.h-sec{margin-bottom:var(--sp-3);}
/* VALUE帯の見出しのみ SP 22px＝pin（100svh）内に本文まで収める実測値。
   ⚠️他のL1（SP24px）との差分はこの実測理由（カンプ到着後はカンプ値へ） */
@media(max-width:767px){
  .value-band__t{font-size:22px;}
}

/* --- L2 小見出し・リード（18/16） --- */
.h-lead,.page-hero__lead,.cons-hero__sub,
.pcard__t,.pillar-btn__t,.aud__t,.cfeature__t,.branch__t,.escape__t,
.next-read__t,.work-card__t,.wcard__t,.faq-q,.miniqa dt{
  font-size:var(--bz-fs-l2);font-weight:500;line-height:1.8;letter-spacing:.04em;
}
.cfeature__t{font-weight:500;}
.page-hero__lead,.h-lead{
  font-weight:400;line-height:1.95;letter-spacing:.04em;color:var(--c-text-sub);
}
.faq-q{font-weight:500;line-height:1.7;}

/* --- L3 本文（15） --- */
.txt,.field input,.field select,.field textarea,.quote,
.faq-a .txt,.miniqa dd,.case__d,.aud__d,.flow__item .txt,
.branch__d,.escape__d,.cfeature__d,.pcard__d,.work-card__d,
.next-read__sub,.btn{
  font-size:var(--bz-fs-l3);
}
.txt,.faq-a .txt,.miniqa dd,.case__d,.aud__d,.branch__d,.escape__d,
.cfeature__d,.pcard__d,.work-card__d{
  line-height:2.05;letter-spacing:.03em;color:var(--c-text-sub);
}

/* --- L4 キャプション・補足（13） --- */
.fv__sub,.fv__band-txt,.fv__band-all,.sig,.fv__sig,.bfoot__sig,
.stat__label,.related__t,.next-read__d,.form__alt,.field__hint,
.field__label,.faq-a__cta,.faq-tab,.faq-indbar label,.faq-indbar select,
.faq-cat__count,.wd-breadcrumb,.chip,.filter-row__label,.example-link,
.lpnav a,.cflow__step,.bfoot__info,.bfoot__list,.bfoot__head,.bfoot__copy{
  font-size:var(--bz-fs-l4);
}
.field__label{color:var(--c-text);letter-spacing:.04em;}
.bfoot__copy{font-size:var(--bz-fs-l5);}

/* --- L5 ラベル・注記（11） --- */
.tag,.cat-label,.work-card__type,.next-read__label,.next-read__k,
.value-band__k,.pillar-sec__k,.pcard__k,.pillar-btn__k,.wd-set__num,
.case__k,.faq-cat__id,.faq-ind-chip,.stat__note,.field__req,.field__opt,
.bfoot__logo-badge,.wf-tbc{
  font-size:var(--bz-fs-l5);
}
.stat__note{line-height:1.7;color:var(--c-text-note);letter-spacing:.02em;}

/* --- 数字カウンタ（Jost・400。600→400＝太字禁止＋Jostの字面で見せる） --- */
.stat__num{font-weight:400;letter-spacing:.02em;}
.stat__num .unit{font-size:var(--bz-fs-l2);color:var(--c-text-sub);}
.stat__label{color:var(--c-text-sub);letter-spacing:.1em;}

/* ============================================================================
   5. 本文の標準組（720px・段落間隔・裸の<p>連打の解消）
   ============================================================================ */
.measure{max-width:var(--c1-measure);margin-left:auto;margin-right:auto;}  /* 2026-08-09: form中央寄せに合わせ本文ブロックも中央軸へ */
/* 不具合修正 2026-08-10: .section__inner に .measure を併用すると、広幅（≥1486px）で
   --pad-side が固定余白 calc((100vw-1480px)/2) に切り替わった際に
   「max-width:720px − 左右パディング520px＝実幅200px」へ潰れる（border-box侵食・
   2026-07-17の.wrap修正と同根）。max-widthをパディング込みへ＝実幅720pxを常に確保 */
.section__inner.measure{max-width:calc(var(--c1-measure) + var(--pad-side)*2);}
.ask__body,.ask__lead{max-width:var(--c1-measure);}
.consult-final__lead,.value-band__d,.value-band__t{max-width:var(--c1-measure-narrow);}
.faq-a{max-width:var(--c1-measure);}
.form{max-width:var(--c1-measure);margin-left:auto;margin-right:auto;}  /* 2026-08-09: 左張り付き（右側の大余白）解消=中央寄せ。inquiry崩れ指摘対応 */
/* [20261016ze] フォームの外に置いた案内文・電話の一文も同じ幅で中央に（ディレクター「この文章がはみ出ている」＝無料相談の .form__intro が画面幅いっぱいに広がっていた） */
.section__inner > .form__intro,
.section__inner > .form__alt{max-width:var(--c1-measure);margin-left:auto;margin-right:auto;}

/* 段落間隔＝2.2em（.mt-2/.mt-3 が付いている段落はWFの意図を尊重してそのまま） */
.txt + .txt{margin-top:1.6em;}
.measure > .txt + .txt,.ask__lead > .txt + .txt{margin-top:var(--c1-para-gap);}

/* 引用・読解線（C-1: 罫線を accent の"句読点"として使う。1セクション1点） */
.quote{
  border-left:1px solid var(--c1-accent);padding-left:var(--sp-3);
  color:var(--c-text-sub);line-height:2.05;
}
.form__intro{
  border-left:1px solid var(--c1-accent);
  background:var(--c-bg-sub);color:var(--c-text-sub);
  font-size:var(--bz-fs-l4);border-radius:0;
}

/* ============================================================================
   6. 面・罫線・プレースホルダ（ダーク地での質感）
   ============================================================================ */
.section--sub{background:var(--c-bg-sub);}
.divider{background:var(--c-line);}

/* プレースホルダ（未支給スロット＝明示的に「まだ無い」と分かる面） */
.ph,.fv__cell{
  background:var(--c-ph);
  border:1px dashed var(--c-line-dark);
  color:var(--c-text-note);
}
.ph{font-size:var(--bz-fs-l5);letter-spacing:.04em;}

/* タグ・カテゴリラベル（ピル999px＝WF仕様どおり温存） */
.tag{
  color:var(--c-text-sub);border-color:var(--c-line-dark);
  background:transparent;letter-spacing:.08em;padding:3px 12px;
}
/* カテゴリラベル＝白文字＋白の実線枠。一覧では1画面に6枚以上並ぶため**赤にしない**
   （accentは1画面1〜3点＝§9-3。色ではなく「実線枠＋白文字」で .tag との階層差を作る） */
.cat-label{
  color:var(--c-text);border-color:var(--c-line-dark);
  letter-spacing:.12em;background:transparent;
  border-radius:999px;  /* 2026-10-02 スタッフ決定：札（カテゴリ・工事種別）もタブ・チップと同じ角丸に統一（旧 2px） */
}
.work-card__type{color:var(--c-text);border-color:var(--c-line-dark);border-radius:999px;}  /* 2026-10-20 tag 20261020o ディレクター「やっぱり全て統一の楕円に」（10/19 の四角枠を取り消し） */

/* 番号バッジ・アイコン枠は白の細枠（赤の点数を1画面1〜3に抑えるため無彩色にする） */
.cfeature__no,.flow__n{border-color:var(--c-line-dark);color:var(--c-text);}
.faq-ind-chip{color:var(--c-text-note);border-color:var(--c-line);}

/* 二層ラベル系の小ラベル（各ブロックのアイブロー）＝accent（1画面1〜3点の範囲） */
.value-band__k,.pillar-sec__k,.wd-set__num,.faq-cat__id,.next-read__k{
  color:var(--c-text);letter-spacing:.22em;  /* [20261016zc] 赤→白 */
}
/* consultation「たとえば、こんなご相談から」の4枚は**カードの見出し**として扱う
   （WFは12px accent。4枚並びで赤が5点になるため無彩色のL2見出しへ。和文に .22em は効かせない） */
.case__k{
  color:var(--c-text);font-size:var(--bz-fs-l2);font-weight:500;
  letter-spacing:.06em;line-height:1.7;margin-bottom:10px;
}
/* カードが横に並ぶ小ラベルは無彩色（3枚並び＝赤が4点以上になるため） */
.pcard__k,.pillar-btn__k{color:var(--c-text-note);letter-spacing:.22em;}
/* 「こんな方へ」の左罫線は白の低透過（3枚並びのため赤にしない） */
.aud{border-left-color:var(--c-line-dark);}

/* ============================================================================
   7. ボタン（design-rules §8 のダーク反転）
   ----------------------------------------------------------------------------
   ・高さ45px統一／幅 min(360px,100%)（固定px直指定は禁止）／パディング上下15・左右64
   ・基本形＝**白細枠1px・白文字・透明地**（住宅の「白地・細枠・濃文字」の反転）
   ・右端横棒 32×1px（currentColor＝反転時も追従）・hoverで左→右スライド0.55s
     **占有帯を常時確保**（文字との干渉防止＝タスクAC恒久対策）
   ・背景アニメ＝**四角形拡大＋色反転**（円形は却下済み・docs/22 §3-5）
     ::before を z-index:-1 に置くことで、DOM・文言を一切変えずに文字の背面へ回している
   ・角丸はWF仕様（--radius 4px）を温存。⚠️住宅は角丸0＝要ディレクター確認
   ・未実装: 文字ロール（住宅は global-nav.js がDOMを包む実装。bizは文言/DOM不変のため見送り＝申し送り）
   ============================================================================ */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  /* 高さ45px統一（P07）: border 2 ＋ padding-block 10×2 ＋ lineBox 15×1.5=22.5 ＝ 44.5
     → min-height:45px が保証（複数行は自然増で崩さない。住宅 design-system §P07 と同方式） */
  min-height:45px;
  min-width:min(360px,100%);
  padding:10px 64px;
  letter-spacing:.08em;line-height:1.5;
  border:1px solid var(--c-line-dark);
  background:transparent;color:var(--c-text);
  transition:color .38s ease,border-color .38s ease;
}
.btn::before{                      /* 四角形拡大。2026-08-09 ディレクター指示「ロールオーバーで背景色のpadding0」＝inset 3px→0（hover時に枠いっぱいまで塗る） */
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--c-text);
  transform:scale(.86);opacity:0;
  transition:transform .5s cubic-bezier(.19,1,.22,1),opacity .3s ease;
}
.btn::after{                       /* 右端横棒（占有帯を常時確保） */
  content:"";position:absolute;right:24px;top:50%;
  width:32px;height:1px;background:currentColor;
  transform-origin:left center;transform:translateY(-50%) scaleX(1);
  transition:transform .55s cubic-bezier(.19,1,.22,1);
}
.btn:hover{color:var(--c-primary-ink);border-color:var(--c-text);}
.btn:hover::before{transform:scale(1);opacity:1;}
.btn:hover::after{animation:bz-bar .55s cubic-bezier(.19,1,.22,1);}
@keyframes bz-bar{
  0%{transform:translateY(-50%) scaleX(1);}
  49%{transform:translateY(-50%) translateX(14px) scaleX(0);}
  51%{transform:translateY(-50%) translateX(-14px) scaleX(0);}
  100%{transform:translateY(-50%) scaleX(1);}
}
/* 塗りボタン＝白面・濃文字（反転側）。hoverで濃面・白文字へ反転 */
.btn--primary{background:var(--c-primary);color:var(--c-primary-ink);border-color:var(--c-primary);}
.btn--primary::before{background:var(--c-bg);}
.btn--primary:hover{color:var(--c-text);border-color:var(--c-primary);opacity:1;}
.btn--ghost{border-color:var(--c-line-dark);color:var(--c-text);}
.btn--ghost:hover{border-color:var(--c-text);}
/* 横棒の例外: 899px以下は非表示可（P09）／--small は横棒なし（P10） */
@media(max-width:899px){ .btn::after{display:none;} }
.btn--small::after{display:none;}
/* 全幅ボタン（フォーム送信）は横棒の占有帯を確保したまま中央寄せ */
.btn--block{width:100%;min-width:0;}
.btn--lg{padding:10px 64px;font-size:var(--bz-fs-l3);}   /* CTA・フォーム送信も45px統一（§8） */
@media(max-width:767px){
  .btn,.btn--lg{padding-left:40px;padding-right:40px;}
}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .btn,
  html:not(.wf-force-motion) .btn::before,
  html:not(.wf-force-motion) .btn::after{transition:none;animation:none;}
}

/* 「実例リンク」等の点線プレースホルダボタン（未確定スロットの明示） */
.example-link{
  color:var(--c-text-sub);border:1px dashed var(--c-line-dark);
  letter-spacing:.06em;
}

/* ============================================================================
   8. フォーム（ダーク地の入力UI・可読性とフォーカス視認性）
   ============================================================================ */
.field input[type=text],.field input[type=email],.field input[type=tel],
.field select,.field textarea{
  background:var(--c-bg-sub2);border:1px solid var(--c-line-dark);
  color:var(--c-text);border-radius:var(--radius);
}
.field input::placeholder,.field textarea::placeholder{color:var(--c-text-note);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--c-text);outline-offset:1px;   /* ダーク地は白のフォーカスリングが最も見える */
  border-color:var(--c-text);
}
.field__req{background:var(--c-accent);color:var(--c-primary-ink);letter-spacing:.08em;}
.field__opt{color:var(--c-text-note);border-color:var(--c-line);}
.field__check{color:var(--c-text-sub);font-size:var(--bz-fs-l4);}
.field__check a{color:var(--c-text);text-decoration:underline;text-underline-offset:3px;}
.form__alt{border-top:1px solid var(--c-line);color:var(--c-text-sub);}
.form__alt a{color:var(--c-text);}

/* ============================================================================
   9. 一覧・カード・アコーディオン（ダーク地の階調）
   ============================================================================ */
.pcard,.case,.cfeature,.branch__card,.next-read__main{
  background:var(--c-bg-sub);border-color:var(--c-line);
}
.pcard:hover,.case:hover,.branch__card:hover{border-color:var(--c-line-dark);}
.next-read{border-top:1px solid var(--c-line);}
.next-read__main{border-color:var(--c-line-dark);}
.next-read__main:hover{border-color:var(--c-text);}
.next-read__label{color:var(--c-text-note);letter-spacing:.22em;}
.next-read__sub{border-color:var(--c-line);color:var(--c-text-sub);}
.next-read__sub:hover{border-color:var(--c-text-sub);color:var(--c-text);}
.escape{border-color:var(--c1-accent);background:rgba(255,255,255,.05);}  /* 枠線＝--c1-accent（2026-08-10 B確定で赤へ復帰。地は無彩色のまま） */

/* --- チップ（絞り込み・ピル999px温存。選択＝白面・濃文字） --- */
.chip{background:transparent;border-color:var(--c-line-dark);color:var(--c-text-sub);letter-spacing:.06em;}
.chip:hover{border-color:var(--c-text);color:var(--c-text);}
.chip.is-active{background:var(--c-accent);color:var(--c-primary-ink);border-color:var(--c-accent);}
.filter-row__label{color:var(--c-text-note);letter-spacing:.18em;}

/* --- FAQ（85問・9カテゴリ） --- */
/* WFの `.faq-tools{padding:var(--sp-2) 0}` が同一要素の `.wrap` の左右パディングを打ち消しており、
   カテゴリタブ／業種セレクトがビューポート左端（x=0）に貼り付いてコンテンツグリッドから
   外れていた（PC1280・SP375とも実測）。design版ではグリッドに戻す（レイアウト基盤の遵守）。 */
.faq-tools{
  background:var(--c-bg);border-bottom:1px solid var(--c-line);
  padding-left:var(--pad-side);padding-right:var(--pad-side);
}
.faq-tab{border-color:var(--c-line-dark);color:var(--c-text-sub);letter-spacing:.06em;}
.faq-tab:hover{border-color:var(--c-text);color:var(--c-text);}
.faq-tab.is-active{background:var(--c-accent);color:var(--c-primary-ink);border-color:var(--c-accent);}
.faq-indbar label{color:var(--c-text-note);letter-spacing:.18em;}
.faq-indbar select{background:var(--c-bg-sub2);border-color:var(--c-line-dark);color:var(--c-text);}
/* [20260821ch] ディレクター指示（2026-08-24）「セクションごとに上下についている罫線は不要」。
   `.faq-cat` の上罫線を撤去。カテゴリが連続するため、各ブロックの上と下に
   線が入って見えていた（自分の border-top ＋ 次カテゴリの border-top）。
   カテゴリの切れ目は上下64pxのパディング（`--sp-5`）が担う。
   質問1件ごとの区切り罫線（`.faq-item` の下罫線）は**残す**。 */
.faq-cat__h{gap:14px;}
.faq-cat__id{letter-spacing:.22em;}
.faq-cat__count{color:var(--c-text-note);font-weight:400;letter-spacing:.06em;}
.faq-item{border-bottom:1px solid var(--c-line);}
.faq-q{color:var(--c-text);padding:var(--sp-2) 0;}

/* [20260821ci] ディレクター指摘（2026-08-24）「スマホ時、タグが多いとこのように表示されてしまう」。
   原因＝`.faq-q` が flex-wrap:nowrap の1行フレックスで、業種タグ `.faq-item__inds` が
   `nowrap`（折り返さない）ため**先に幅を確保**してしまう。実測390px:
     質問文 153px / タグ 169px / ＋アイコン 16px
   → 質問文が細い柱になり、タグ4つの項目で**4行**に割れていた。
   対策＝SPだけ折り返しを許し、**タグを質問の上の独立した行**へ置く。
   （下に置く案も同値だったが、タグが罫線のすぐ上に来て「次の質問のタグ」に見えるため上を採用）
   実測の効果: 質問文 153→**339px** / 行数 4→**2行** / 項目の高さ 149→**133px**（増えずに縮む）。
   タグ側も flex-wrap:wrap にしたので5つ以上でも溢れない。
   ※PC（768px以上）は従来どおり質問の右にタグを置く＝変更なし。
   ※マークアップと業種絞り込みJSには触れていない。 */
@media(max-width:767px){
  .faq-q{flex-wrap:wrap;}
  .faq-item__inds{order:1;flex:0 0 100%;margin-left:0;margin-bottom:8px;flex-wrap:wrap;}
  .faq-q__txt{order:2;flex:1 1 0%;min-width:0;}
  .faq-q__ic{order:3;}
}
.faq-q:hover{color:var(--c-text);}
/* ＋/− アイコンは無彩色（85個＝赤にすると使用密度を大きく超える） */
.faq-q__ic::before,.faq-q__ic::after{background:var(--c-text-sub);}
.faq-a .txt{color:var(--c-text-sub);}
.faq-a__cta{
  color:var(--c-text);border-bottom:1px solid var(--c1-accent);
  letter-spacing:.06em;
}
/* アコーディオンの開閉（JS=biz-page.js がheightを制御。閉じた状態はhidden属性） */
.faq-a{overflow:hidden;}
.faq-a[hidden]{display:none;}

/* --- 事例詳細（3点セット） --- */
.wd-set{border-top:1px solid var(--c-line);}
.wd-set__num{letter-spacing:.28em;}
.wd-breadcrumb{color:var(--c-text-note);}
.wd-breadcrumb a{color:var(--c-text-sub);}
.wd-breadcrumb a:hover{color:var(--c-text);}
.related__t{color:var(--c-text-sub);}
.related__card:hover .related__t{color:var(--c-text);}

/* --- LPページ内ナビ --- */
.lpnav{background:var(--c-bg);border-color:var(--c-line);}
.lpnav a{color:var(--c-text-sub);letter-spacing:.16em;}
.lpnav a:hover{color:var(--c-text);}

/* --- 相談会の締め（当日の流れ） --- */
.cflow__step{border:1px dashed var(--c-line-dark);background:var(--c-bg-sub);color:var(--c-text-sub);}
.cflow__arw{color:var(--c-text-note);}

/* ============================================================================
   10. 余白の「さざなみ」（等間隔にしない／大見出しの前＝大きく・関連要素間＝詰める）
   ----------------------------------------------------------------------------
   HTMLへクラスを足さず、WFに既にあるID/クラスだけで配分する（文言・構造不変）。
   使う値は WF の余白スケール（--sp-5/6/7）＝新しい数値を発明しない。
   ============================================================================ */
/* 共通: ページ冒頭ヒーローの直後は詰める（一続きの導入） */
.page-hero + .section--tight,
.page-hero + .section{padding-top:var(--sp-5);}
.page-hero{border-bottom:1px solid var(--c-line);}

/* home: 問い（山場）の前＝最大の間／投資配分は一続きで詰める／実例の前＝大きく */
#policy{padding-top:var(--sp-7);}
/* Not expensive（#allocation）＝Policyとマージンを揃える（2026-08-09 第13報: sp-5→sp-7） */
#policy + .section{padding-top:var(--sp-7);padding-bottom:var(--sp-6);}
.value-sec{padding-top:var(--sp-7);}
#works{padding-top:var(--sp-7);}
#audience{padding-top:var(--sp-7);padding-bottom:var(--sp-7);}  /* 2026-08-09 第13報: #999帯化に伴い他セクションと揃える（sp-5→sp-7・帯の上下対称） */
#consult{padding-top:var(--sp-7);}

/* 末尾導線の前＝一拍おく */
.next-read{padding-top:var(--sp-6);padding-bottom:var(--sp-6);}

/* ============================================================================
   11. 写真のジャンプ率（「大判 → 小組 → 大判」の縦リズム）
   ----------------------------------------------------------------------------
   ・works-detail: ギャラリー2列のうち**先頭と末尾を全幅の大判**にする（CSSのみ・DOM不変）
   ・works一覧: サムネの比率を 3:2 に統一（大判カード）／ヒーロー〜一覧の間を詰める
   ※vw を使わない（100vw は横スクロールの原因＝恒久禁止）
   ============================================================================ */
.wd-gallery > .ph:first-child,
.wd-gallery > .ph:last-child{
  grid-column:1 / -1;aspect-ratio:16/7;
}
@media(max-width:767px){
  .wd-gallery > .ph:first-child,
  .wd-gallery > .ph:last-child{aspect-ratio:4/3;}
}
.related .ph{aspect-ratio:3/2;}

/* ============================================================================
   11-b. FV（構成・モーション＝WFが正）
   ----------------------------------------------------------------------------
   2026-08-09 ディレクター指示（第3報）: コピー背景の左暗幕グラデーションは**削除**
   （旧 .fv::before の linear-gradient 撤去。コピー可読はtext-shadowのみで担保）。
   ============================================================================ */
@media(min-width:768px){
  .fv__band,.fv__sig{position:relative;z-index:5;}
}
/* ピル型リンクの既定下線を解除（WFはブラウザ既定のまま下線が出ていた） */
.fv__pill,.faq-tab,.next-read__sub,.next-read__main,.chip{text-decoration:none;}

/* ============================================================================
   12. ヘッダー／フッター（ダーク配色・寸法は住宅と同値のまま不変）
   ============================================================================ */
.gnav__bar{background:var(--c-bg);border-bottom:1px solid var(--c-line);}
.gnav--shrunk .gnav__bar{
  background:rgba(85,86,87,.82);          /* #555基調の透過（2026-08-09 トーン変更に追随） */
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.gnav__main a,.gnav__cta,.gnav__cta .gnav-roll{letter-spacing:.12em;}
/* utilbar #999地＝白文字2.1:1で不可読のため濃色へ（2026-08-09・⚠️報告事項） */
/* 2026-09-17 ディレクター指示:「上段バーの要素はすべて白ベースで統一」
   旧実装は 2026-08-09 の「#999地に白文字は不可読」という判断で #1a1a1a（濃色）にしていたが、
   本日の指示で**白に戻す**。文字・リンク・住宅ボタンの枠・SNSアイコンまで currentColor で白に揃える。
   ⚠️ 実測コントラスト比 #fff on #999999 = 2.85:1（WCAG AA の本文基準 4.5:1 に未達）。
      読みやすさを取るならバー地色 --gnav-utilbar-bg を暗くするのが効く
      （#666666 で 5.74:1 ／ 元の #565554 で 7.44:1）。地色はディレクター判断のため据え置き。 */
.gnav__utilbar-in{color:#fff;}
.gnav__utilbar .gnav-roll,.gnav__utilbar a{color:#fff;}
.gnav__housebtn{color:#fff;border-color:#fff;}
.gnav__sns-ic{color:#fff;border-color:transparent;}
.gnav__housebtn:hover,.gnav__housebtn:focus-visible{background:#fff;color:#000;border-color:#fff;}
.gnav__dd-in{background:var(--c-bg-sub);border-color:var(--c-line-dark);box-shadow:none;}
.gnav__dd-link:hover,.gnav__dd-link:focus-visible{background:var(--c-bg-sub2);}
.gnav-sheet{background:var(--c-bg-sub);box-shadow:none;border-top:1px solid var(--c-line-dark);}
.gnav-sheet__close{background:var(--c-bg-sub2);border-color:var(--c-line);color:var(--c-text-sub);letter-spacing:.22em;}
.bfoot{background:#454647;border-top:1px solid var(--c-line);}  /* #555基調に追随（2026-08-09） */
/* フッターロゴ=住宅gfootと同じシンボル+ロゴタイプSVG（2026-08-09 第7報。ヘッダー用サイズ指定に依存しない実寸を指定） */
.bfoot__logo{display:inline-flex;align-items:flex-end;gap:12px;color:#fff;}
.bfoot__logo .gnav-svg--symbol{height:40px;width:auto;display:block;}
.bfoot__logo .gnav-svg--type{height:24px;width:auto;display:block;}
/* 視覚非表示（旧テキストロゴの温存用・共有定義） */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}
/* フッター構成＝住宅と同じくロゴ左／住所右（2026-08-09 ディレクター指示。DOMは home.html で分割） */
.bfoot__brand{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;}
.bfoot__brand-r{margin-left:auto;text-align:right;}
@media(max-width:767px){
  .bfoot__brand{flex-direction:column;align-items:flex-start;}
  .bfoot__brand-r{margin-left:0;text-align:left;}
}
.bfoot__logo-badge{background:var(--c-accent);color:var(--c-primary-ink);letter-spacing:.18em;}
.bfoot__head{border-bottom:1px solid var(--c-line);letter-spacing:.14em;}
.bfoot__cross a:hover{color:var(--c-text);}
.bfoot__cross .arw{color:var(--c1-accent-ink);}
/* 二重ボーダー解消（2026-08-09）: .bfoot__cross の border-bottom と .bfoot__sitemap の
   border-top が2本並んでいたため、sitemap側を撤去して1本に */
.bfoot__sitemap{border-top:none;}
.bfoot__copy{border-top:1px solid var(--c-line);color:var(--c-text-note);}

/* ============================================================================
   12-b. ヘッダー・CTAアイコン（2026-08-09 第5報: インラインSVG線画・currentColor）
   お問い合わせ=メール／無料相談会=カレンダー／電話で相談=電話。
   見積り依頼のアイコンは contact/inquiry 統合判断待ち（保留）。
   ============================================================================ */
.bz-ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:6px;flex:none;}
.gnav__cta-ic{width:auto;height:auto;border:none;background:none;border-radius:0;
  display:inline-flex;align-items:center;}
.gnav__cta-ic .bz-ic{margin-right:0;}
.gnav__main .bz-ic{width:13px;height:13px;margin-right:5px;}
.bcta-panel__t .bz-ic{width:20px;height:20px;margin-right:10px;vertical-align:-3px;}

/* ============================================================================
   13. WF由来の注記の扱い（住宅design版の確定方針に合わせる）
   ----------------------------------------------------------------------------
   ・`.wf-note` / `.wf-label`（構造メモ・実装メモ・許諾メモ）＝**マークアップは保持・非表示**
     （design-rules §6-4「削除はしない＝情報を失わないため」）
   ・`.wf-tbc`（文中の未確定プレースホルダ）＝**表示を維持**して未確定を明示する。
     ディレクター指示「タグライン=CL承認未の⚠️状態を維持」に対応。
     文中に埋まっているため、消すと文章が壊れる箇所がある（例: consultation「所要時間の目安は 〜」）。
   ============================================================================ */
.wf-note,.wf-label{display:none;}
.wf-tbc{
  display:inline-block;
  color:var(--c-text-note);
  border:1px dashed var(--c-line-dark);
  background:transparent;
  padding:1px 8px;border-radius:0;letter-spacing:.04em;line-height:1.7;
}

/* ============================================================================
   14. リビール（フェード主体・単発・reduced-motion対応／docs/22 §3）
   ----------------------------------------------------------------------------
   home は WF の多層視差＋pin演出が正のため**対象外**（biz-page.js が判定してスキップ）。
   下層6ページのみ、ブロック単位の控えめなフェード＋8pxライズを1回だけ。
   ============================================================================ */
.bz-rev{opacity:0;transform:translateY(8px);}
.bz-rev.is-in{
  opacity:1;transform:none;
  transition:opacity .8s cubic-bezier(.16,.8,.3,1),transform .8s cubic-bezier(.16,.8,.3,1);
}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .bz-rev{opacity:1;transform:none;transition:none;}
}

/* ============================================================================
   15. 印刷
   ============================================================================ */
@media print{
  body{background:#fff;color:#1a1a1a;}
  .gnav,.gnav-sheet,.gnav-overlay,.faq-tools{display:none;}
}


/* ============================================================================
   16. フッター直前CTA 3構成の共有部品（2026-08-09 第9報）
   ----------------------------------------------------------------------------
   homeの最下層（W100%写真背景＋50/50パネル）をコンテンツ6ページへ展開する圧縮版。
   コンテンツページは ①〜③（cfeatures）なし＝高さ圧縮。「次に読む」は廃止。
   ============================================================================ */
.bcta-sec{position:relative;overflow:hidden;text-align:center;
  padding:var(--sp-6) var(--pad-side,16px);}
.bcta-sec::before{content:"";position:absolute;inset:0;
  background:#3a3b3c url(../../assets/img/biz-cta-inquiry-img01.webp?v=20260809d) center/cover no-repeat;  /* 2026-08-09 第15報: image-06へ差替 */}
.bcta-sec::after{content:"";position:absolute;inset:0;background:rgba(26,26,26,.58);}
.bcta-sec .section__inner{position:relative;z-index:1;}
.bcta-sec .h-sec{margin-bottom:var(--sp-3);}
.bcta-sec__lead{max-width:640px;margin:0 auto;color:rgba(255,255,255,.92);
  font-size:var(--bz-fs-l3);line-height:2.05;letter-spacing:.03em;}
/* 大きめボタン（お問い合わせ） */
.bcta-big{margin-top:var(--sp-4);display:flex;justify-content:center;position:relative;z-index:1;}
.bcta-big .btn{min-width:min(480px,100%);padding-top:22px;padding-bottom:22px;
  font-size:var(--bz-fs-l2);
  background:var(--c-primary);color:var(--c-primary-ink);border-color:var(--c-primary);}
.bcta-big .btn::before{background:var(--c-bg);}
.bcta-big .btn:hover{color:var(--c-text);}
/* 50/50画像リンクパネル（home実装の共有化・同値） */
.bcta-pair{display:grid;grid-template-columns:1fr;gap:0;}
@media(min-width:768px){ .bcta-pair{grid-template-columns:1fr 1fr;} }
.bcta-panel{position:relative;display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:260px;padding:56px 24px;color:#fff;text-decoration:none;overflow:hidden;
  background:#333 center/cover no-repeat;}
@media(min-width:768px){ .bcta-panel{min-height:360px;} }
.bcta-panel::after{content:"";position:absolute;inset:0;background:rgba(20,20,20,.46);transition:background .4s ease;}
@media(hover:hover){ .bcta-panel:hover::after{background:rgba(20,20,20,.28);} }
.bcta-panel__t{position:relative;z-index:1;font-size:clamp(18px,2.2vw,24px);letter-spacing:.1em;line-height:1.7;}
.bcta-panel__t::after{content:"";display:block;width:56px;height:1px;background:rgba(255,255,255,.7);margin:18px auto 0;}
.bcta-panel__t .bz-ic{width:20px;height:20px;margin-right:10px;vertical-align:-3px;}
.bcta-panel--consult{background-image:url(../../assets/img/biz-cta-soudan-img01.webp?v=20260809d);}
.bcta-panel--tel{background-image:url(../../assets/img/biz-cta-call-img01.webp?v=20260809d);}
@media(prefers-reduced-motion:reduce){
  html:not(.wf-force-motion) .bcta-panel::after{transition:none;}
}


/* ============================================================================
   17. biz全ページ統一レイヤー（2026-08-09d ディレクター指示B・C）
   ----------------------------------------------------------------------------
   指示B「bizの無料相談会・FAQ・お問い合わせ・見積もり依頼で見出しの構成が違う」→ 統一
   指示C「見出し・ボタンの中央揃え／文字の大きさ／余白を全ページ一旦見直して統一。
          CasaBrutusのような見出しの強調・ジャンプ率・文字サイズで統一」
   実装方針 = home.html の <style> に個別実装されていた統一ルールを**本ファイルへ移設**し、
   全7ページへ一括適用する（home側の重複定義は後読みの本ファイルが上書き＝害なし）。
   ============================================================================ */

/* --- 17-1. page-hero 標準型（パンくず → 英字eyebrow → h1 → lead）＝全ページ共通 --- */
.page-hero{text-align:center;}
.page-hero .bcrumb,
.page-hero .page-hero__eyebrow,
.page-hero h1,
.page-hero .page-hero__lead,
.page-hero .page-hero__note{text-align:center;}
/* リードは本文幅で中央に立てる（左張り付きの解消） */
.page-hero__lead{max-width:var(--c1-measure);margin:var(--sp-3) auto 0;}
.page-hero__note{
  max-width:var(--c1-measure-narrow);margin:var(--sp-3) auto 0;
  font-size:var(--bz-fs-l4);line-height:2.0;letter-spacing:.04em;color:var(--c-text-note);
}
.page-hero__note::before{
  content:"";display:block;width:40px;height:1px;background:var(--c1-accent);
  margin:0 auto var(--sp-2);
}

/* --- 17-2. パンくず（共有・旧 .wd-breadcrumb を統合） --- */
.bcrumb,.wd-breadcrumb{
  font-size:var(--bz-fs-l5);letter-spacing:.08em;line-height:1.8;
  color:var(--c-text-note);margin-bottom:var(--sp-3);
}
.bcrumb a,.wd-breadcrumb a{color:var(--c-text-sub);text-decoration:none;}
.bcrumb a:hover,.wd-breadcrumb a:hover{color:var(--c-text);text-decoration:underline;text-underline-offset:3px;}

/* --- 17-3. セクション見出し・ボタンの中央揃え（全ページ／home実装の移設） --- */
.section .eyebrow,.section .h-sec,
.section--tight .eyebrow,.section--tight .h-sec{text-align:center;}
.section .section__inner > p:has(> .btn),
.section--tight .section__inner > p:has(> .btn),
.moved-cta{text-align:center;}
/* 見出しの直後に来るリード段落も中央軸へ（ジャンプ率の受け皿） */
.section .h-sec + .h-lead{text-align:center;max-width:var(--c1-measure);margin-left:auto;margin-right:auto;}
/* 事例詳細のカテゴリ／タグ列は中央（page-heroの直下に続くため） */
.wd-hero__meta{justify-content:center;}

/* --- 17-4. 級数（ジャンプ率）: 中間サイズの残りをトークンへ寄せる ---
   ページ内<style>のpx直書き（12/13/14/15/17/18/22/26/28/30px）は各ページ側で撤去済み。
   ここでは「c1-darkに定義が無く既定16pxのまま残っていた要素」を段へ割り当てる。 */
.flow__n,.wd-hero__meta,.choice,.cond-block__note,.note-sm{font-size:var(--bz-fs-l4);}
.note-sm{color:var(--c-text-note);}
/* consultation「当日の流れ」の各ステップ見出し（裸の<strong>＝既定15pxのまま残っていた）→ L2 */
.flow__item > div > strong{display:block;font-size:var(--bz-fs-l2);font-weight:500;
  line-height:1.7;letter-spacing:.04em;color:var(--c-text);margin-bottom:10px;}
.cond-block__label{font-size:var(--bz-fs-l4);letter-spacing:.18em;color:var(--c-text);}  /* [20261016zc] 赤→白 */
/* home: 高詳細度の #audience 内だけトークン外だったため揃える（17px/14px → L2/L3） */
#audience .aud__t{font-size:var(--bz-fs-l2);}
#audience .aud__d{font-size:var(--bz-fs-l3);}
/* home: カード末尾の遷移ラベル・事例名サブは最下段（L5） */
.pcard__go,.wcard__case{font-size:var(--bz-fs-l5);}

/* --- 17-5. 余白の「さざなみ」（下層6ページ＝page-heroを持つページのみ） ---
   home は FV＋pin演出のリズムが正のため対象外（.page-hero を持たない＝この選択子に当たらない）。
   等間隔にしない: 見出しの前＝大きく（sp-7）・セクション下＝一段小さく（sp-6）・
   ヒーロー直後＝詰める（sp-5）。 */
.page-hero ~ .section{padding-top:var(--sp-7);padding-bottom:var(--sp-6);}
.page-hero ~ .section--tight{padding-top:var(--sp-6);padding-bottom:var(--sp-6);}
.page-hero + .section,
.page-hero + .section--tight{padding-top:var(--sp-5);}
.page-hero ~ .bcta-sec{padding-top:var(--sp-7);padding-bottom:var(--sp-7);}

/* --- 17-6. フォーム: 選択肢（ラジオ）・日程候補・条件分岐ブロック --- */
/* ラジオ群（ご希望の相談方法） */
.field__choices{display:flex;flex-wrap:wrap;gap:10px;}
.choice{
  display:inline-flex;align-items:center;gap:10px;
  min-height:45px;padding:10px 22px;                    /* ボタン高45px統一（§8/P07）に合わせる */
  border:1px solid var(--c-line-dark);border-radius:var(--radius);
  background:transparent;color:var(--c-text);
  letter-spacing:.06em;line-height:1.5;cursor:pointer;
  transition:border-color .3s ease,background-color .3s ease;
}
.choice:hover{border-color:var(--c-text);}
.choice:focus-within{outline:2px solid var(--c-text);outline-offset:1px;}
.choice input[type=radio]{accent-color:#ffffff;width:15px;height:15px;margin:0;flex:none;}
.choice:has(input:checked){background:var(--c-bg-sub2);border-color:var(--c-text);}
@media(max-width:767px){
  .field__choices{flex-direction:column;}
  .choice{width:100%;}
}
/* 日程候補（第1／第2希望）＝住宅 contact の2列組と同型 */
.field__dates{display:grid;grid-template-columns:1fr;gap:var(--sp-3);}
@media(min-width:768px){ .field__dates{grid-template-columns:1fr 1fr;gap:var(--grid-gap);} }
.field__dates .field__hint{margin:0 0 6px;}
.field__hint--lead{margin:0 0 12px;}
.field__inline{display:flex;flex-wrap:wrap;gap:10px;}
.field__inline > *{flex:1 1 min(180px,100%);min-width:0;}
/* date入力はbiz-base.cssの型指定に含まれないため、ここで他の入力欄と同じ見た目へ揃える */
.field input[type=date]{
  width:100%;font-family:inherit;font-size:var(--bz-fs-l3);color:var(--c-text);
  background:var(--c-bg-sub2);border:1px solid var(--c-line-dark);
  border-radius:var(--radius);padding:12px 14px;
  line-height:1.375;                     /* selectと同高（49px）に揃える（既定のnative行高だと+4px） */
}
.field input[type=date]::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.7;cursor:pointer;}
/* 条件分岐ブロック（ご用件＝お見積りを依頼したい のときだけ展開） */
.cond-block{
  border-left:1px solid var(--c1-accent);
  padding:var(--sp-3) 0 var(--sp-1) var(--sp-3);
  margin:0 0 var(--sp-3);
}
.cond-block[hidden]{display:none;}
.cond-block__label{margin-bottom:var(--sp-3);display:block;}
.cond-block__note{color:var(--c-text-note);line-height:2.0;letter-spacing:.03em;margin-top:var(--sp-2);}
/* フォーム内の見出し・intro は左揃えのまま（入力欄と同じ軸に立てる） */
.form .field__label,.form__intro{text-align:left;}

/* --- 17-7. 単独カードの分岐（contact の逃がし導線1枚） --- */
.branch--single .branch__card{max-width:min(720px,100%);margin-left:auto;margin-right:auto;}

/* --- 17-8. 画像ヒーロー（20260810b ディレクター指示）
   住宅確定形 .page-hero--overlay（design-system.css §8-b）のbiz移植。
   幅100%画像＋タイトルのみ画像上・暗幕45%・eyebrow/リードは画像下の .page-hero-intro へ。
   パンくず（.bcrumb）は全ページ廃止（2階層のみ＝eyebrowと重複のため）。
   ヘッダー縮小トリガー（biz-nav.js）は .page-hero 下端参照のため本体クラスを温存。 --- */
.page-hero--overlay{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-height:clamp(280px,40vh,500px);
  padding:clamp(32px,6vh,72px) var(--pad-side);
  overflow:hidden;border-bottom:0;max-width:none;
}
.page-hero--overlay .page-hero__media--bg{
  position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:1;
}
.page-hero--overlay .page-hero__media--bg .page-hero__img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.page-hero--overlay .page-hero__media--bg::after{ /* 暗幕＝白文字の可読性確保 */
  content:"";position:absolute;inset:0;background:rgba(0,0,0,.45);
}
.page-hero--overlay .page-hero__body--onimg{
  position:relative;z-index:2;text-align:center;
  width:min(94vw,900px);padding:0;margin:0 auto;
}
.page-hero--overlay .page-hero__title{
  color:#fff;margin:0;
  font-size:clamp(26px,3.2vw,42px);line-height:1.45;
  text-shadow:0 1px 24px rgba(0,0,0,.28);
}
@media(max-width:767px){
  .page-hero--overlay{min-height:clamp(280px,38svh,420px);}
}
/* 画像下の導入ブロック（eyebrow＋lead。旧ヒーローの下パディング・罫線を引き継ぐ） */
.page-hero-intro{
  text-align:center;border-bottom:1px solid var(--c-line);
  padding-top:var(--sp-5);padding-bottom:var(--sp-4);
}
@media(min-width:768px){ .page-hero-intro{padding-bottom:var(--sp-5);} }
.page-hero-intro .page-hero__lead{max-width:var(--c1-measure);margin:var(--sp-3) auto 0;}
/* works: 画像なし・コンパクト型（上下バランス均等） */
.page-hero--compact{padding-top:var(--sp-5);padding-bottom:var(--sp-5);}

/* ============================================================================
   絞り込み（全ページ共通・2026-10-20 tag 20261020q）
   ディレクター「各ページで絞り込みの感じが違うのも、絞り込みボタン周りの余白が違うのも気になる」→ 統一（左寄せ）。
   使い方：外枠に .bz-filter、段は .filter-row（2段以上のときだけ左に .filter-row__label）、ボタンは .chip。
   選択中＝.is-active／.is-current／[aria-current="page"]／[aria-pressed="true"]。
   余白＝ページ先頭（見出し）の下から 64px（各ページの節の上余白 sp-5）／段と段の間 12px／絞り込み→中身 40px（sp-4）。
   施工事例一覧・お知らせ・よくある質問・イベントで使用。各ページの .chip 等の個別指定より優先（.bz-filter を前置）
   ============================================================================ */
.bz-filter{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:0 0 var(--sp-4);}
.bz-filter .filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;max-width:100%;}
.bz-filter .filter-row--scroll{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:2px;}
.bz-filter .filter-row__label{flex:0 0 auto;min-width:5.5em;margin-right:4px;font-size:12px;letter-spacing:.12em;color:var(--c-text-note);}
.bz-filter .chip{
  display:inline-block;flex:0 0 auto;margin:0;
  font-size:13px;line-height:22px;letter-spacing:.06em;white-space:nowrap;
  padding:8px 16px;border:1px solid var(--c-line-dark);border-radius:999px;
  background:transparent;color:var(--c-text-sub);text-decoration:none;cursor:pointer;
  transition:border-color .18s,color .18s,background-color .18s;
}
.bz-filter .chip:hover{border-color:var(--c-text);color:var(--c-text);}
.bz-filter .chip.is-active,.bz-filter .chip.is-current,.bz-filter .chip[aria-current="page"],.bz-filter .chip[aria-pressed="true"]{
  background:var(--c-accent);color:var(--c-primary-ink);border-color:var(--c-accent);
}
/* お知らせはタブが ul＝1段だけなので横並びに（.bz-filter の縦積みを上書き） */
.news-tabs.bz-filter{flex-direction:row;flex-wrap:wrap;gap:8px;}