/* ==========================================================
   honten/housing-renovation.html  ／ ページ別CSS（v5でインライン<style>から抽出）
   mac_wordpress_common_rules.md §6-4 ＝ common → page別の順で読み込む
   ----------------------------------------------------------
   ※ v5 で抽出された生のスタイル。
   ※ 変数名（--ink → --text-main, --o → --brand-main 等）は
      common.css の :root エイリアス層で吸収。順次標準名に置換予定。
   ----------------------------------------------------------
   [v8.5 2026-08-07] テンプレートを他ページ標準構成へ統一：
   ・セクション骨格 .section/.container/.eyebrow/.section-title →
     common.css の .page-section/.page-section-inner/.sec-head へ移行
     （本ファイルは骨格スタイルを持っていないため削除対象なし）
   ・.mini-faq（ページ独自アコーディオン）を廃止 → 共通 .faq-accordion へ
   ・.lost の margin-top 64px → 0（前後が padding 96px の page-section に
     なったため、上だけ 160px に開く非対称を解消）
========================================================== */
/* ===== housing-renovation page tokens ===== */
:root{
  --o:#E89A2E;
  --o-deep:#C97A1F;
  --ink:#1F2A2A;
  --ink-2:#3A4747;
  --beige:#F6F1E7;
  --beige-2:#FBF7EE;
  --line:#E4DDCB;
  --serif:'Noto Serif JP','Yu Mincho',serif;
  --sans:'Noto Sans JP','Yu Gothic',sans-serif;
  --en:'Cormorant Garamond',serif;
}

/* Theme deep-dive grid */
.theme-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:32px;
}
.theme-card{
  background:#fff;
  border:1px solid var(--line);
  padding:36px 32px;
  position:relative;
}
.theme-card .num{
  font-family:var(--en);
  font-size:48px;
  color:var(--o);
  font-weight:300;
  line-height:1;
  letter-spacing:.04em;
}
.theme-card .ttl{
  font-family:var(--serif);
  font-weight:500;
  font-size:24px;
  color:var(--ink);
  letter-spacing:.04em;
  margin:16px 0 12px;
  line-height:1.55;
}
.theme-card .lead{
  font-family:var(--sans);
  font-size:14px;
  line-height:2;
  color:var(--ink-2);
  margin-bottom:20px;
}
.theme-card .pts{
  display:flex;
  flex-direction:column;
  gap:8px;
  list-style:none;   /* [v8.6 2026-08-07] ブラウザ標準の「・」を除去（リセット漏れ） */
  padding-left:0;
  font-family:var(--sans);
  font-size:13px;
  line-height:1.85;
  color:var(--ink-2);
  margin-top:20px;
  padding-top:20px;
  border-top:1px dashed var(--line);
}
.theme-card .pts li{
  padding-left:18px;
  position:relative;
}
.theme-card .pts li::before{
  content:'';
  position:absolute;
  left:0;
  top:11px;
  width:8px;
  height:1px;
  background:var(--o);
}
/* [v8.6 2026-08-07] 価格は閲覧者の関心が最も高い情報のため強調装飾へ。
   ベージュ地・英字14px → オレンジ淡地＋左罫3px＋sansの太字（Works の
   price や subsidy と同じ「オレンジ系＝価格・お金の情報」の色役割に統一）。
   和文混じりのため font-family は en → sans に変更 */
.theme-card .price{
  display:inline-block;
  background:var(--o-tint, #FBF1E1);
  border-left:3px solid var(--o);
  color:var(--o-deep);
  padding:8px 16px;
  font-family:var(--sans);
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.04em;
  margin-top:8px;
}
@media(max-width:780px){
  .theme-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
}

/* Scope (受け / 繋ぐ) */
.scope-box{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:48px;
}
.scope-card{
  padding:32px;
  border:1px solid var(--line);
  background:#fff;
}
.scope-card.accept{
  background:linear-gradient(180deg,#FBF7EE 0%,#fff 100%);
  border-color:var(--o);
}
.scope-card.relay{
  background:#F8F8F5;
}
.scope-card .lbl{
  display:inline-block;
  padding:5px 14px;
  font-family:var(--sans);
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
}
.scope-card.accept .lbl{
  background:var(--o);
  color:#fff;
}
.scope-card.relay .lbl{
  background:var(--ink);
  color:#fff;
}
/* [v8.7 2026-08-07] 見出しを h4 → h3 に変更（マークアップ側も変更済み）。
   従来は見出し（明朝20px）と項目名 .item-h（明朝16px）が近すぎて
   見出しに見えなかったため、①サイズを21pxに拡大、②下に実線の罫線を
   引いて「見出し／リスト」の境目を明示、③ .item-h 側を明朝→ゴシックの
   太字に変えて書体でも階層差を付ける */
.scope-card h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:21px;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--ink);
  margin:14px 0 4px;
  padding-bottom:16px;
  border-bottom:1px solid var(--ink);
}
.scope-card .item{
  padding:14px 0;
  border-bottom:1px solid var(--line);
}
.scope-card .item:last-child{
  border-bottom:none;
}
.scope-card .item-h{
  font-family:var(--sans);   /* [v8.7] 明朝16px → ゴシック14.5px太字（h3との階層差） */
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.02em;
  color:var(--ink);
  margin-bottom:6px;
}
.scope-card .item-p{
  font-family:var(--sans);
  font-size:13px;
  line-height:1.85;
  color:var(--ink-2);
}
.scope-card .item-p strong{
  color:var(--o-deep);
  font-weight:500;
}
@media(max-width:780px){
  .scope-box{
    grid-template-columns:1fr;
    gap:16px;
  }
}

/* Price-period table */
.price-tbl{
  margin-top:48px;
  border-top:1px solid var(--ink);
}
.price-row{
  display:grid;
  grid-template-columns:200px 1fr 1fr;
  gap:12px 48px;   /* [v8.7] h5ラベル廃止に伴いカラム間の余白を明示（従来は0） */
  border-bottom:1px solid var(--line);
  padding:28px 12px;
  align-items:start;
}
.price-row .cat{
  font-family:var(--serif);
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  letter-spacing:.04em;
}
/* [v8.6 2026-08-07] .cat .en（01 New Build 等の英字ラベル）は廃止。
   マークアップごと削除済み */
/* [v8.7 2026-08-07] .col h5（標準的な価格レンジ／標準的な期間）は
   毎行の繰り返しが冗長なため廃止。マークアップごと削除済み */
.price-row .col p{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.85;
  color:var(--ink);
}
.price-row .col p strong{
  color:var(--o-deep);
  font-weight:700;
}
@media(max-width:780px){
  .price-row{
    grid-template-columns:1fr;
    gap:14px;
  }
}

/* Subsidy block */
.subsidy{
  background:var(--beige-2);
  padding:36px 32px;
  margin-top:48px;
  border-left:3px solid var(--o);
}
.subsidy h4{
  font-family:var(--serif);
  font-weight:500;
  font-size:18px;
  color:var(--ink);
  margin-bottom:8px;
}
.subsidy p{
  font-family:var(--sans);
  font-size:13.5px;
  line-height:1.95;
  color:var(--ink-2);
}
.subsidy .note{
  font-size:11.5px;
  color:#7d7666;
  margin-top:8px;
}

/* Lost-CTA strip */
.lost{
  background:var(--ink);
  color:#fff;
  padding:48px 32px;
  margin-top:0;   /* [v8.5] 前後がpage-section（padding 96px）になったため相殺 */
  text-align:center;
}
.lost h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:22px;
  letter-spacing:.04em;
  line-height:1.65;
  margin-bottom:14px;
}
.lost p{
  font-family:var(--sans);
  font-size:14px;
  line-height:1.95;
  color:#d0c8b6;
  max-width:640px;
  margin:0 auto 24px;
}
.lost a.line{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#06C755;   /* [v8.8 2026-08-07] var(--o) → LINEブランド緑（.btn-line と同値） */
  color:#fff;
  text-decoration:none;
  padding:14px 28px;
  font-family:var(--sans);
  font-size:14px;
  font-weight:700;
  letter-spacing:.08em;
  transition:.2s;
}
.lost a.line:hover{
  background:#fff;
  color:var(--ink);
}

/* [v8.5 2026-08-07] Mini FAQ（.mini-faq / summary / .ans）一式は廃止。
   マークアップを共通コンポーネント .faq-accordion（common.css）へ移行済み */