/* ==========================================================
   biz-base.css — 非住宅(biz)WF 共通ベース
   I.D.Works biz.idworks.co.jp ワイヤーフレーム
   ----------------------------------------------------------
   方針:
   - レイアウト基盤は住宅WFと共通（max1480px / <1480は94vw / 12分割グリッドgap20px / スマホファースト375px基準）
   - カラーリングは住宅（白基調）に対する【反転＝ダーク基調】の仮トークン。
     H3「カラーリング反転で視覚的差別化」の表現。**実値はデザイナー確定待ち＝仮**。
     --c-bg / --c-text / --c-primary 等の変数を差し替えれば全ページ一括で色替え可能。
   - これは構造検証物（ワイヤー）。装飾は作り込まない。画像は全てプレースホルダ。
   ========================================================== */

:root{
  /* --- カラー（カンプ design-非住宅FV-230330-01.png のミドルグレー基調｜推定・デザイナー確定待ち） ---
     カンプ実測サンプリング: 主背景 #757575 / 上段バー #636160 / 画像域 #c9c9ca。
     白文字のAA可読性を確保するため主背景をカンプ実測よりやや暗く調整（下記は「推定」）。
     変数構造は維持＝差し替えれば全ページ一括で色替え可能。 */
  --c-bg:#6e6f70;          /* 主背景＝カンプ ミドルグレー #757575 を白文字AA確保でやや暗く（推定） */
  --c-bg-sub:#646567;      /* セクション交互/パネル（一段暗く・推定） */
  --c-bg-sub2:#5b5c5e;     /* さらに一段（アコーディオン展開部など・推定） */
  --c-text:#ffffff;        /* 本文（白文字・カンプの白コピー準拠） */
  --c-text-sub:#e7e7e8;    /* 補助テキスト（ミドルグレー上で可読・推定） */
  --c-text-note:#cdced0;   /* 注記（推定） */
  --c-line:#87888a;        /* 罫線（推定） */
  --c-line-dark:#a1a2a4;   /* 強めの罫線・プレースホルダ枠（推定） */
  --c-ph:#8f9092;          /* 画像プレースホルダ矩形＝カンプ画像域の明グレー寄り（推定） */
  --c-primary:#ffffff;     /* 主ボタン面（カンプの白ピル準拠・推定） */
  --c-primary-ink:#4a4a4b; /* 主ボタン上の文字（推定） */
  --c-accent:#eceae4;      /* アクセント＝カテゴリラベル/アクティブ（グレー基調・推定・デザイナー確定待ち） */

  /* --- 幅・グリッド（住宅WFと共通・global-nav.css準拠） --- */
  --w-content:1480px;
  --pad-side:3vw;          /* <1480px: 左右3%ずつ＝コンテンツ94vw */
  --grid-col:105px;
  --grid-gap:20px;

  /* --- 余白スケール（住宅WFと共通・「さざなみの間」） --- */
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:40px; --sp-5:64px;
  --sp-6:120px; --sp-7:160px; --sp-8:200px;

  --radius:4px;
}
@media(min-width:1480px){
  :root{--pad-side:calc((100vw - var(--w-content)) / 2);}
}
@media(min-width:768px){
  :root{--sp-6:180px;--sp-7:240px;--sp-8:300px;}
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;scrollbar-gutter:stable;}
body{
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
  color:var(--c-text);
  background:var(--c-bg);
  line-height:2.0;
  font-size:15px;
  -webkit-text-size-adjust:100%;
}
img{max-width:100%;display:block;}
a{color:inherit;}

/* ==========================================================
   WFの注記・ラベル（構造検証用の可視メモ）
   ========================================================== */
.wf-note{
  font-size:11px;color:var(--c-text-note);
  border:1px dashed var(--c-line-dark);
  background:var(--c-bg-sub);
  padding:4px 8px;margin:8px 0;border-radius:2px;line-height:1.7;
}
.wf-label{
  display:inline-block;font-size:10px;color:var(--c-text-sub);
  border:1px solid var(--c-line-dark);
  padding:0 6px;border-radius:2px;background:var(--c-bg-sub2);
  vertical-align:middle;letter-spacing:.05em;
}
.wf-tbc{ /* 【要確認】プレースホルダ表示 */
  display:inline-block;font-size:11px;color:#d8c39a;
  border:1px dashed #7a6b45;background:rgba(184,161,121,.08);
  padding:1px 8px;border-radius:2px;letter-spacing:.02em;
}

/* ==========================================================
   画像プレースホルダ（グレー矩形＋ラベル）
   ========================================================== */
.ph{
  background:var(--c-ph);
  border:1px dashed var(--c-line-dark);
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--c-text-note);font-size:12px;line-height:1.6;padding:8px;
  border-radius:var(--radius);
}
.ph--fv{min-height:440px;}
.ph--wide{min-height:200px;}
.ph--card{aspect-ratio:4/3;}
.ph--card-lg{aspect-ratio:3/2;}     /* LA CASA型 大型サムネ */
.ph--figure{min-height:220px;}
.ph--video{aspect-ratio:16/9;}
.ph--logo{width:120px;height:40px;font-size:10px;border-style:solid;}
.ph--methodbtn{aspect-ratio:16/7;}
@media(min-width:768px){
  .ph--fv{min-height:600px;}
  .ph--wide{min-height:300px;}
}

/* ==========================================================
   レイアウト共通
   ========================================================== */
/* 修正 2026-07-17: max-width:1480とpad-side同居のborder-box侵食バグ解消（FVと同根・VW1500超でコンテンツ縮小）。
   max-widthをパディング込みに=「<1480:コンテンツ94vw／≥1480:1480固定中央」の仕様どおり */
.wrap{max-width:calc(var(--w-content) + var(--pad-side)*2);margin:0 auto;padding-left:var(--pad-side);padding-right:var(--pad-side);}
.section{padding-top:var(--sp-6);padding-bottom:var(--sp-6);}
.section--tight{padding-top:var(--sp-5);padding-bottom:var(--sp-5);}
.section--sub{background:var(--c-bg-sub);}
.section__inner{max-width:calc(var(--w-content) + var(--pad-side)*2);margin:0 auto;padding-left:var(--pad-side);padding-right:var(--pad-side);}
.measure{max-width:760px;}   /* 本文の読みやすい行長 */
.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--grid-gap);}

/* ==========================================================
   タイポグラフィ
   ========================================================== */
.eyebrow{
  font-size:11px;letter-spacing:.22em;color:var(--c-accent);
  text-transform:uppercase;margin-bottom:var(--sp-2);display:block;
}

/* [20260821cl] 段落ち対策ユーティリティ（住宅側 design-system.css §12 と同じもの）。
   文節を一体で送って最終行が1〜2字になるのを防ぐ。R08＝docs/22 §9。
   これまで biz では home.html のページ内CSSにしか無く、共通フッターから使えなかったため共有へ昇格。 */
.nowrap{white-space:nowrap;}
.sig{font-size:12px;letter-spacing:.18em;color:var(--c-text-sub);font-style:italic;}
h1,h2,h3,h4{font-weight:500/* design版移植時の変更: 600→500（太字禁止・design-rules §0/§6-3）*/;line-height:1.5;letter-spacing:.02em;}
.h-sec{font-size:22px;line-height:1.6;margin-bottom:var(--sp-3);}
.h-lead{font-size:17px;line-height:1.9;color:var(--c-text);}
.txt{font-size:15px;line-height:2.0;color:var(--c-text-sub);}
.txt + .txt{margin-top:var(--sp-2);}
.txt strong{color:var(--c-text);font-weight:500/* design版移植時の変更: 600→500（太字禁止・design-rules §0/§6-3）*/;}
@media(min-width:768px){
  .h-sec{font-size:30px;}
  .h-lead{font-size:19px;}
}

/* ==========================================================
   ボタン
   ========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-size:14px;letter-spacing:.06em;text-decoration:none;
  padding:14px 28px;border-radius:var(--radius);
  border:1px solid var(--c-primary);
  transition:opacity .2s ease,background .2s ease,color .2s ease;
  cursor:pointer;
}
.btn--primary{background:var(--c-primary);color:var(--c-primary-ink);}
.btn--primary:hover{opacity:.85;}
.btn--ghost{background:transparent;color:var(--c-text);border-color:var(--c-line-dark);}
.btn--ghost:hover{border-color:var(--c-text);}
.btn--block{display:flex;width:100%;}
.btn--lg{padding:18px 34px;font-size:15px;}

/* ==========================================================
   タグ・ラベルチップ
   ========================================================== */
.tag{
  display:inline-block;font-size:11px;letter-spacing:.06em;
  color:var(--c-text-sub);border:1px solid var(--c-line);
  padding:3px 10px;border-radius:999px;background:var(--c-bg-sub);
}
.cat-label{
  display:inline-block;font-size:11px;letter-spacing:.1em;
  color:var(--c-accent);border:1px solid var(--c-accent);
  padding:2px 10px;border-radius:2px;
}

/* ==========================================================
   ページヒーロー（下層ページ共通）
   ========================================================== */
.page-hero{
  padding-top:var(--sp-5);padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--c-line);
}
.page-hero__eyebrow{font-size:11px;letter-spacing:.2em;color:var(--c-accent);}
.page-hero h1{font-size:28px;line-height:1.5;margin:var(--sp-2) 0 var(--sp-3);}
.page-hero__lead{font-size:16px;line-height:1.9;color:var(--c-text-sub);max-width:720px;}
@media(min-width:768px){
  .page-hero{padding-top:var(--sp-6);padding-bottom:var(--sp-5);}
  .page-hero h1{font-size:40px;}
}

/* ==========================================================
   価値3本柱ボタン（フッター前・住宅の3メソッドボタンに対応）
   ========================================================== */
.pillars{display:grid;gap:var(--grid-gap);grid-template-columns:1fr;}
.pillar-btn{
  position:relative;display:block;text-decoration:none;overflow:hidden;
  border:1px solid var(--c-line);border-radius:var(--radius);
}
.pillar-btn .ph{border:none;border-radius:0;}
.pillar-btn__body{padding:var(--sp-3);}
.pillar-btn__k{font-size:12px;letter-spacing:.2em;color:var(--c-accent);}
.pillar-btn__t{font-size:18px;margin-top:6px;}
.pillar-btn:hover{border-color:var(--c-text-sub);}
@media(min-width:768px){
  .pillars{grid-template-columns:repeat(3,1fr);}
}

/* ==========================================================
   次に読む（末尾導線・主1＋補助2）
   ========================================================== */
.next-read{padding:var(--sp-6) 0;border-top:1px solid var(--c-line);}
.next-read__label{font-size:11px;letter-spacing:.2em;color:var(--c-text-note);margin-bottom:var(--sp-3);}
.next-read__main{
  display:block;text-decoration:none;border:1px solid var(--c-line-dark);
  border-radius:var(--radius);padding:var(--sp-3);margin-bottom:var(--grid-gap);
  background:var(--c-bg-sub);transition:border-color .2s;
}
.next-read__main:hover{border-color:var(--c-text);}
.next-read__k{font-size:11px;letter-spacing:.16em;color:var(--c-accent);}
.next-read__t{font-size:20px;margin-top:6px;}
.next-read__d{font-size:13px;color:var(--c-text-sub);margin-top:8px;}
.next-read__subs{display:grid;gap:var(--grid-gap);grid-template-columns:1fr;}
.next-read__sub{
  display:block;text-decoration:none;border:1px solid var(--c-line);
  border-radius:var(--radius);padding:var(--sp-2) var(--sp-3);
  font-size:14px;color:var(--c-text-sub);transition:border-color .2s;
}
.next-read__sub:hover{border-color:var(--c-text-sub);color:var(--c-text);}
@media(min-width:768px){
  .next-read__subs{grid-template-columns:1fr 1fr;}
}

/* ==========================================================
   フォーム（consultation / contact / inquiry 共通・動作可）
   ========================================================== */
.form{max-width:720px;}
.form__intro{
  font-size:14px;color:var(--c-text-sub);background:var(--c-bg-sub);
  border-left:2px solid var(--c-accent);padding:var(--sp-2) var(--sp-3);
  margin-bottom:var(--sp-4);border-radius:0 var(--radius) var(--radius) 0;
}
.field{margin-bottom:var(--sp-3);}
.field__label{display:block;font-size:14px;margin-bottom:8px;}
.field__req{font-size:10px;color:var(--c-primary-ink);background:var(--c-accent);
  padding:1px 7px;border-radius:2px;margin-left:8px;letter-spacing:.05em;vertical-align:middle;}
.field__opt{font-size:10px;color:var(--c-text-note);border:1px solid var(--c-line);
  padding:0 7px;border-radius:2px;margin-left:8px;letter-spacing:.05em;vertical-align:middle;}
.field__hint{font-size:12px;color:var(--c-text-note);margin-top:4px;}
.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field select,
.field textarea{
  width:100%;font-family:inherit;font-size:15px;color:var(--c-text);
  background:var(--c-bg-sub);border:1px solid var(--c-line-dark);
  border-radius:var(--radius);padding:12px 14px;
}
.field textarea{min-height:120px;resize:vertical;line-height:1.8;}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--c-text-sub) 50%),linear-gradient(135deg,var(--c-text-sub) 50%,transparent 50%);background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px;background-size:6px 6px,6px 6px;background-repeat:no-repeat;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--c-accent);outline-offset:1px;border-color:var(--c-accent);}
.field__check{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--c-text-sub);line-height:1.7;}
.field__check input{margin-top:5px;}
.form__alt{
  font-size:13px;color:var(--c-text-sub);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--c-line);
}
.form__alt a{color:var(--c-text);}

/* ==========================================================
   汎用ユーティリティ
   ========================================================== */
.mt-1{margin-top:var(--sp-1);} .mt-2{margin-top:var(--sp-2);} .mt-3{margin-top:var(--sp-3);}
.mt-4{margin-top:var(--sp-4);} .mt-5{margin-top:var(--sp-5);}
.mb-2{margin-bottom:var(--sp-2);} .mb-3{margin-bottom:var(--sp-3);} .mb-4{margin-bottom:var(--sp-4);}
.center{text-align:center;}
.quote{
  border-left:2px solid var(--c-line-dark);padding-left:var(--sp-3);
  color:var(--c-text-sub);font-size:15px;line-height:2.0;
}
.divider{height:1px;background:var(--c-line);border:none;margin:var(--sp-5) 0;}
.skip-link{position:absolute;left:-9999px;}
.skip-link:focus{left:8px;top:8px;position:fixed;z-index:300;background:var(--c-primary);color:var(--c-primary-ink);padding:8px 14px;border-radius:var(--radius);}