@charset "UTF-8";
/* ============================================================
   ホロムア リフォームLP 共通スタイル
   商材ごとの色は body の data-theme / CSS変数で切り替える
   ============================================================ */

/* ---------- リセット ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, ul, ol, li, dl, dt, dd, figure, table, th, td {
  margin: 0; padding: 0;
}
ul, ol { list-style: none; }
img, svg { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
table { border-collapse: collapse; width: 100%; }

/* ---------- 変数 ---------- */
:root {
  /* オレンジ＝見出しの文字とCTA。ページの主役 */
  /* 文字色として使うので、白地で4.5:1を満たす濃さにしてある（実測5.10:1）。
     これより明るくすると、まとめ見出しや表の金額が読めなくなる。
     鮮やかさは --accent のCTA・--pop のマーカー・--sky の帯で出す（2026-08-24） */
  --brand:        #bd4a00;
  --brand-dark:   #933900;
  --brand-tint:   #fff0e2;
  --accent:       #f4610c;
  --accent-dark:  #d24e00;
  /* 明るい青＝帯とラベル。白文字を載せる面はここに集約する。
     明るいオレンジに白文字だと3:1前後しか出ず、14pxの表見出しが読めない */
  --sky:          #1e7fd4;
  --sky-dark:     #1567b0;
  --sky-tint:     #e9f4fe;
  /* ポップさの担当。マーカーとバッジ */
  --pop:          #ffd23f;
  /* 黒も灰も暖色寄りにする。青みが残ると地のクリームと喧嘩する */
  --ink:          #33302c;
  --muted:        #6f645c;
  --line:         #ecdfd0;
  --bg:           #ffffff;
  --bg-soft:      #fff8f0;
  --radius:       12px;
  --shadow:       0 4px 18px rgba(209, 82, 10, .12);
  --maxw:         1080px;
  --font: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
          "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}
/* エアコン用テーマ（涼感のあるブルー） */
body[data-theme="aircon"] {
  --brand:      #0b6ea8;
  --brand-dark: #084f78;
  --brand-tint: #e9f4fb;
}
/* 屋根用テーマ（瓦の色。外壁の紺と見分けがつくよう炭色寄り） */
body[data-theme="roof"] {
  /* 以前は #263644（炭色）→ #a04a1e（こげ茶）。どちらも暗いと言われたので
     オレンジまで寄せた（2026-08-24）。青と黄は :root と共通で使う */
  --brand:      #bd4a00;
  --brand-dark: #933900;
  --brand-tint: #fff1e4;
}

/* ---------- ベース ---------- */
body {
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  padding-bottom: 68px; /* スマホ固定CTA分 */
}
@media (min-width: 768px) { body { padding-bottom: 0; } }

.wrap { width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
.wrap-narrow { width: min(100% - 32px, 760px); margin-inline: auto; }

section { padding: 56px 0; }
@media (min-width: 768px) { section { padding: 80px 0; } }

.sec-soft { background: var(--bg-soft); }

/* ---------- 見出し ---------- */
.sec-head { text-align: center; margin-bottom: 36px; }
.sec-head .en {
  display: block; font-size: 12px; letter-spacing: .18em;
  color: var(--accent); font-weight: 700; margin-bottom: 6px;
}
.sec-head h2 {
  font-size: clamp(22px, 5vw, 32px); line-height: 1.45; font-weight: 900;
  color: var(--brand);
}
.sec-head h2 .mk {
  /* 蛍光ペン。--pop で統一する（以前は #ffe08a の直書きだった） */
  background: linear-gradient(transparent 60%, var(--pop) 60%);
  padding: 0 .1em;
}
/* 参考画像と同じ、青地に白抜きの帯見出し。使うところにだけ .bar を足す */
.sec-head h2.bar {
  background: var(--sky); color: #fff;
  border-radius: 10px; padding: 12px 18px;
  display: inline-block; box-shadow: 0 3px 0 var(--sky-dark);
}
.sec-head h2.bar .mk { background: none; padding: 0; color: var(--pop); }
.sec-head .lead { margin-top: 12px; color: var(--muted); font-size: 15px; }

/* ---------- ヘッダー ---------- */
.hd {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.96);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.hd-in {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px; width: min(100% - 24px, var(--maxw)); margin-inline: auto;
}
.hd-logo { display: flex; flex-direction: column; line-height: 1.25; }
.hd-logo .n { font-weight: 800; font-size: 15px; color: var(--brand); letter-spacing: .02em; }
.hd-logo .s { font-size: 11px; color: var(--muted); }
.hd-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.hd-tel { display: none; text-align: right; line-height: 1.25; }
.hd-tel .num { display: block; font-size: 21px; font-weight: 800; color: var(--brand); letter-spacing: .01em; }
.hd-tel .cap { display: block; font-size: 10.5px; color: var(--muted); }
@media (min-width: 900px) { .hd-tel { display: block; } }
.hd-cta {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff; font-weight: 800; font-size: 13px;
  padding: 10px 16px; border-radius: 999px; white-space: nowrap;
}

/* ---------- ファーストビュー ---------- */
.fv { position: relative; color: var(--ink); overflow: hidden; padding: 0; }
.fv-bg {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(255,248,240,.93) 0%, rgba(255,244,232,.86) 55%, rgba(255,248,240,.95) 100%),
    var(--fv-photo, linear-gradient(135deg, #ffe9d2 0%, #ffdcbb 60%, #ffcfa3 100%));
  background-size: cover; background-position: center;
}
body[data-theme="aircon"] .fv-bg {
  background:
    linear-gradient(180deg, rgba(244,251,255,.93) 0%, rgba(236,248,255,.86) 55%, rgba(244,251,255,.95) 100%),
    var(--fv-photo, linear-gradient(135deg, #dcf0fb 0%, #c3e4f7 60%, #a9d7f2 100%));
  background-size: cover; background-position: center;
}
/* 実写を敷く場合（スマホは縦構図、PCは横構図に自動で切り替え）

   ここのFV背景と .cta-band の写真は、下の linear-gradient に
   9割前後の不透明度で覆われている。見えるのは合成後の姿なので、
   AVIF/WebP は品質を大きく落として書き出してある（FV 115KB→41KB）。
   合成後で比べた画質は50dB前後あり、目では区別できない。
   注意: グラデーションの不透明度を下げるときは、画像も書き出し直すこと。
     覆いが薄くなると、落とした画質がそのまま見える。（2026-09-01） */
body[data-theme="roof"] .fv-bg {
  background-image:
    linear-gradient(180deg, rgba(255,248,240,.92) 0%, rgba(255,244,232,.84) 45%, rgba(255,248,240,.95) 100%),
    url(../img/roof-fv-sp.jpg);
  background-image:
    linear-gradient(180deg, rgba(255,248,240,.92) 0%, rgba(255,244,232,.84) 45%, rgba(255,248,240,.95) 100%),
    image-set(
      url(../img/roof-fv-sp.avif) type("image/avif"),
      url(../img/roof-fv-sp.webp) type("image/webp"),
      url(../img/roof-fv-sp.jpg) type("image/jpeg"));
  background-size: cover; background-position: center;
}
body[data-theme="gaiheki"] .fv-bg {
  background-image:
    linear-gradient(180deg, rgba(255,248,240,.92) 0%, rgba(255,244,232,.84) 45%, rgba(255,248,240,.95) 100%),
    url(../img/wall-fv-sp.jpg);
  background-image:
    linear-gradient(180deg, rgba(255,248,240,.92) 0%, rgba(255,244,232,.84) 45%, rgba(255,248,240,.95) 100%),
    image-set(
      url(../img/wall-fv-sp.avif) type("image/avif"),
      url(../img/wall-fv-sp.webp) type("image/webp"),
      url(../img/wall-fv-sp.jpg) type("image/jpeg"));
  background-size: cover; background-position: center;
}
@media (min-width: 768px) {
  body[data-theme="roof"] .fv-bg {
    background-image:
      linear-gradient(100deg, rgba(255,248,240,.96) 0%, rgba(255,246,236,.88) 55%, rgba(255,248,240,.62) 100%),
      url(../img/roof-fv-pc.jpg);
    background-image:
      linear-gradient(100deg, rgba(255,248,240,.96) 0%, rgba(255,246,236,.88) 55%, rgba(255,248,240,.62) 100%),
      image-set(
      url(../img/roof-fv-pc.avif) type("image/avif"),
      url(../img/roof-fv-pc.webp) type("image/webp"),
      url(../img/roof-fv-pc.jpg) type("image/jpeg"));
  }
  body[data-theme="gaiheki"] .fv-bg {
    background-image:
      linear-gradient(100deg, rgba(255,248,240,.96) 0%, rgba(255,246,236,.88) 55%, rgba(255,248,240,.62) 100%),
      url(../img/wall-fv-pc.jpg);
    background-image:
      linear-gradient(100deg, rgba(255,248,240,.96) 0%, rgba(255,246,236,.88) 55%, rgba(255,248,240,.62) 100%),
      image-set(
      url(../img/wall-fv-pc.avif) type("image/avif"),
      url(../img/wall-fv-pc.webp) type("image/webp"),
      url(../img/wall-fv-pc.jpg) type("image/jpeg"));
  }
}

/* 震災に触れる一文。煽らず、状態を尋ねる書き方にする */
.fv-quake {
  display: inline-block; background: #fff;
  border-left: 5px solid var(--accent); padding: 10px 16px; border-radius: 0 8px 8px 0;
  box-shadow: 0 2px 10px rgba(209,82,10,.12);
  font-size: clamp(14px, 3.6vw, 17px); font-weight: 700; margin-top: 18px; line-height: 1.7;
}

.fv-in { position: relative; padding: 40px 0 32px; }
@media (min-width: 768px) { .fv-in { padding: 64px 0 56px; } }

.fv-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--pop); color: var(--brand-dark); border: none;
  padding: 7px 14px; border-radius: 999px; font-size: 13px; font-weight: 800;
  letter-spacing: .04em;
}
.fv h1 {
  margin-top: 18px;
  font-size: clamp(26px, 7vw, 46px); line-height: 1.35; font-weight: 900;
  letter-spacing: .01em;
}
/* 蛍光ペンで引いたように見せる。明るい地でいちばん目を引くのがここ */
.fv h1 .hl {
  color: var(--brand-dark);
  background: linear-gradient(transparent 60%, var(--pop) 60%);
  padding: 0 .08em;
}
.fv h1 .sm { display: block; font-size: .58em; font-weight: 800; margin-bottom: 6px; color: var(--muted); }
.fv-sub { margin-top: 16px; font-size: clamp(14px, 3.4vw, 17px); line-height: 1.8; color: var(--ink); }

/* ------------------------------------------------------------
   ファーストビューの「地元」と「無料」（2026-08-21 追加）
   ・「熊本県対応」は県外業者が出張してくるようにも読める。
     所在地を先頭に置いて、熊本の会社であることを最初に伝える
   ・現地調査・お見積り無料が、バッジとリストの中に埋もれて小さかった
   打ち消し線・カウントダウンは使わない（HANDOFF §6）
   ------------------------------------------------------------ */
.fv-local {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: var(--brand-dark); border: 2px solid var(--brand);
  padding: 8px 16px; border-radius: 999px;
  font-size: clamp(13px, 3.2vw, 15px); font-weight: 900; letter-spacing: .02em;
}
.fv-local .pin { color: var(--accent); font-size: 1.1em; }
/* 1行に収める。折り返すと「熊本市中央区の会社で／す」と割れて読みにくい */
.fv-local { white-space: nowrap; }

.fv-free {
  margin-top: 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* 白文字を載せるので --accent（3.20:1）ではなく --brand（5.10:1）を敷く */
  background: var(--brand); color: #fff;
  border-radius: var(--radius); padding: 14px 18px;
  box-shadow: 0 6px 20px rgba(244,97,12,.30);
}
.fv-free .big { font-size: clamp(20px, 5.6vw, 30px); font-weight: 900; line-height: 1.25; letter-spacing: .01em; }
.fv-free .big em { font-style: normal; font-size: 1.28em; }
.fv-free .note { font-size: clamp(13px, 3.2vw, 15px); font-weight: 700; line-height: 1.6; opacity: .96; }
@media (min-width: 620px) {
  .fv-free { padding: 16px 22px; }
  .fv-free .note { margin-left: auto; text-align: right; }
}

/* 広告ごとの「答え」（2026-09-01 追加）
   押した広告が約束したことを、着地して最初に見える位置で受ける。
   広告経由でないときは hidden のまま出さないので、素の見た目は変わらない。
   白地＋左の太線。FVの他の要素（--brand の塗り、--pop の黄）と競合させない。 */
.fv-match {
  margin: 16px 0 0;
  background: #fff; color: var(--ink);
  border-left: 6px solid var(--accent);
  border-radius: 6px; padding: 14px 16px;
  font-size: clamp(15px, 4.0vw, 18px); font-weight: 700; line-height: 1.65;
}
.fv-match strong { font-weight: 900; }
.fv-match a {
  display: inline-block; margin-top: 6px;
  color: var(--brand-dark); font-weight: 900; text-decoration: underline;
}
.fv-match[hidden] { display: none; }

.fv-points { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.fv-points li {
  background: #fff; border: 1px solid var(--line);
  border-radius: 8px; padding: 8px 12px; font-size: 13px; font-weight: 700;
}
/* ------------------------------------------------------------
   吹き出しと、電話を主役にする作り（2026-09-03、たたき v3b から移植）
   ------------------------------------------------------------
   なぜ電話を大きくするか
   ・この面では電話が主役になる
   ・お客様は被災された方で、年齢は35〜65。田舎ほど「よそ者の業者」への
     警戒が強い（2026-09-03 クライアントより）。人と話すほうが早く解ける
   ・配信開始からの累計で、電話タップ6回に対しフォーム到達も同程度。
     どちらも少なく、電話を小さく置いておく理由が無い

   ※計測上の注意：Metaが最適化に使っているのはピクセルの Lead
     （＝フォーム送信）で、電話タップは Contact として別に数えている。
     電話へ寄れば、商売として問い合わせが増えてもMeta上のCVは増えない。
     増減を見るときは必ず両方を並べること。
   ------------------------------------------------------------ */
.fv-voice {
  position: relative; display: inline-block; margin: 4px 0 12px;
  background: #fff; color: var(--brand-dark); border: 2px solid var(--line);
  font-size: clamp(15px, 4vw, 18px); font-weight: 900; letter-spacing: .01em;
  padding: 8px 16px; border-radius: 22px; box-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.fv-voice::after {
  content: ""; position: absolute; left: 24px; bottom: -9px;
  border: 8px solid transparent; border-top-color: #fff; border-bottom: 0;
}
/* 枠線ぶんの三角を1枚下に敷いて、線が途切れないようにする */
.fv-voice::before {
  content: ""; position: absolute; left: 22px; bottom: -12px;
  border: 10px solid transparent; border-top-color: var(--line); border-bottom: 0;
}

.tel-card {
  display: block; margin-top: 22px; background: #fff; text-align: center;
  border: 3px solid var(--accent); border-radius: 16px;
  padding: 10px 12px 12px; color: var(--brand-dark);
  box-shadow: 0 5px 0 rgba(210,78,0,.28);
}
.tel-card .l {
  display: inline-block; background: var(--accent); color: #fff;
  font-size: 12px; font-weight: 800; padding: 4px 14px; border-radius: 999px;
}
.tel-card .n {
  display: block; margin-top: 6px; color: var(--accent-dark); font-weight: 900;
  font-size: clamp(30px, 8.6vw, 42px); line-height: 1.1; letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
/* 13px 未満は lp-check.js が「読みにくい文字」として拾う。相手は35〜65歳 */
.tel-card .t { display: block; font-size: 13px; line-height: 1.6; color: var(--muted); margin-top: 3px; }

.fv-cta { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 620px) { .fv-cta { flex-direction: row; align-items: stretch; } }
.fv-note { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; border-radius: var(--radius); font-weight: 800;
  padding: 16px 24px; line-height: 1.4; border: none; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn .b-sub { font-size: 11px; font-weight: 700; opacity: .9; letter-spacing: .02em; }
/* 18.66px以上の太字なら大きい文字の基準（3:1）で足りる。
   17pxのままだと白文字がオレンジ地で不足する（2026-08-24） */
.btn .b-main { font-size: 19px; }
.btn-primary {
  background: var(--accent); color: #fff;
  box-shadow: 0 6px 16px rgba(244,97,12,.34);
}
.btn-primary:hover { background: var(--accent-dark); }
.btn-tel {
  background: #fff; color: var(--brand); border: 2px solid var(--brand);
}
.btn-tel .b-main { font-size: 21px; letter-spacing: .02em; }
.btn-lg { width: 100%; padding: 20px 24px; }
@media (min-width: 620px) { .fv-cta .btn { flex: 1; } }

/* ---------- お悩み ---------- */
.worry-list { display: grid; gap: 12px; margin-top: 8px; }
@media (min-width: 700px) { .worry-list { grid-template-columns: repeat(2, 1fr); } }
.worry-list li {
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; font-weight: 700; font-size: 15px;
}
.worry-list li::before {
  content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--sky); color: #fff;
  display: grid; place-items: center; font-size: 13px; margin-top: 2px;
}
.worry-arrow { text-align: center; margin-top: 28px; font-weight: 800; color: var(--brand); font-size: 18px; }
.worry-arrow span { display: block; font-size: 28px; line-height: 1; color: var(--accent); margin-bottom: 6px; }

/* ---------- 選ばれる理由 ---------- */
/* .no バッジが top:-14px で外へ出るので、直前の要素と重なる。
   見出しの直後なら余白で助かっていたが、リード文の直後だと文字にかぶった
   （2026-08-21 実測して修正） */
.reason-grid { display: grid; gap: 20px; margin-top: 34px; }
@media (min-width: 820px) { .reason-grid { grid-template-columns: repeat(3, 1fr); } }
.reason-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 22px; box-shadow: var(--shadow); position: relative;
}
.reason-card .no {
  position: absolute; top: -14px; left: 22px;
  background: var(--sky); color: #fff; font-size: 12px; font-weight: 800;
  padding: 5px 12px; border-radius: 999px; letter-spacing: .06em;
}
.reason-card h3 { font-size: 19px; color: var(--brand); font-weight: 800; margin: 8px 0 10px; line-height: 1.5; }
.reason-card p { font-size: 14.5px; color: var(--muted); }

/* ---------- 料金 ---------- */
.price-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-table table { font-size: 15px; }
.price-table th, .price-table td { padding: 14px 16px; border-bottom: 1px solid var(--line); text-align: left; }
.price-table thead th { background: var(--sky); color: #fff; font-weight: 800; font-size: 14px; }
.price-table tbody th { font-weight: 700; width: 46%; }
.price-table td { text-align: right; font-weight: 800; color: var(--brand); white-space: nowrap; }
.price-table tr:last-child th, .price-table tr:last-child td { border-bottom: none; }
.price-table .hi { background: #fffaf0; }
.price-note { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.9; }
.price-note li { padding-left: 1em; text-indent: -1em; }

/* ============================================================
   料金セクション（P-0〜P-8）
   仕様：打ち消し線は使わない／スマホは横スクロールでなくカード型
   ============================================================ */
.price-block { margin-bottom: 34px; }

/* P-0 冒頭の注意書き（本文と同じ大きさ。小さい注釈にしない） */
.price-notice {
  background: #fff; border: 2px solid var(--brand); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 32px;
}
.price-notice p { font-size: 15.5px; line-height: 1.9; margin-bottom: 12px; }
.price-notice p:last-child { margin-bottom: 0; }
.price-notice .price-tax {
  font-size: 14px; color: var(--muted); border-top: 1px solid var(--line);
  padding-top: 12px; margin-top: 4px;
}

/* 表 */
.price-table-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.price-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.price-table caption {
  caption-side: top; text-align: left; background: var(--sky); color: #fff;
  font-size: 16px; font-weight: 800; padding: 13px 16px;
}
.price-table thead th {
  background: var(--brand-tint); color: var(--brand); font-weight: 800;
  font-size: 13.5px; padding: 11px 14px; text-align: left; white-space: nowrap;
}
.price-table tbody th, .price-table tbody td {
  padding: 14px; border-top: 1px solid var(--line); vertical-align: top;
}
.price-table tbody th[scope="row"] { text-align: left; font-weight: 700; font-size: 15px; }
/* 「既存が瓦のお家に」など、金額の前提を示す注記。飾りではないので
   読める大きさにする（2026-08-21。lp-check の下限は13px） */
.price-table tbody th[scope="row"] span {
  display: block; font-size: 13px; line-height: 1.6; color: var(--muted); font-weight: 400; margin-top: 4px;
}
.price-table tbody td { font-weight: 800; color: var(--brand); white-space: nowrap; }
.price-table .price-when { font-weight: 400; color: var(--muted); font-size: 13.5px; white-space: normal; }
.price-table .price-span { text-align: center; }
.price-table .price-free td { color: var(--accent); }
.price-pending { font-weight: 700; color: var(--muted); font-size: 13.5px; white-space: normal; }
.price-tent { display: block; font-size: 13px; color: var(--muted); font-weight: 400; margin-top: 3px; }
.price-foot { font-size: 13.5px; color: var(--muted); margin-top: 10px; line-height: 1.8; }
/* 「別途いただく費用」から P-6（#betto）へのページ内リンク。
   打ち消し表示への導線なので、リンクだと分かる見た目にしておく */
.price-foot a { color: var(--brand); font-weight: 700; text-decoration: underline; }

/* ---------- 料金カード：金額を大きく出す ----------
   2026-09-03 の指摘「金額の文字サイズが小さすぎる」。
   表の金額は15pxで、隣の本文（14.5px）と同じ大きさだった。
   いちばん知りたい数字が、いちばん目立たない状態になっていた。

   数字だけを 40px 前後まで上げ、工事名・補足は小さいまま左に置く。
   出している情報は表と同じで、行は減らしていない。
   ※金額を画像にしないこと（拡大できず、読み上げにも乗らない）。 */
/* 金額の上に置く1行。ここだけは金額より先に読んでもらう */
.price-lead {
  font-size: 15px; line-height: 1.85; color: var(--ink);
  margin-bottom: 18px;
}

.price-cards { display: grid; gap: 12px; }
.price-cards-cap {
  font-size: 14px; font-weight: 800; color: var(--brand);
  letter-spacing: .04em; margin-bottom: 2px;
}
.price-card {
  background: #fff; border: 1px solid var(--line); border-left: 6px solid var(--brand);
  border-radius: var(--radius); padding: 15px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  /* 2026-09-03：規模ラベル（.pc-tag）を足したので、行の割り当てを
     grid-template-areas で明示する。もとは .pc-price に grid-row:1/span 2 と
     書いていたが、ラベルが1行目に入ると金額が工事名と補足をまたがなくなる。
     ラベルが無い行では tag の行が潰れるだけで、崩れない。 */
  grid-template-areas:
    "tag  price"
    "name price"
    "note price";
  align-items: center; column-gap: 12px; row-gap: 3px;
}
.pc-name { grid-area: name; font-size: 16px; font-weight: 800; color: var(--ink); line-height: 1.45; }
.pc-price {
  grid-area: price;
  color: var(--brand); font-weight: 800; line-height: 1;
  white-space: nowrap; text-align: right;
}
.pc-num {
  font-size: clamp(36px, 10.5vw, 46px); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.pc-unit { font-size: 17px; margin-left: 1px; }
/* 「無料」「お見積り時にご案内します」など、数字で始まらない金額 */
.pc-plain { font-size: 15px; font-weight: 700; white-space: normal; }
.pc-note { grid-area: note; font-size: 13px; color: var(--muted); line-height: 1.7; }

/* ---------- 規模ラベル・リボンの見出し（2026-09-03、たたき v3b より） ----------
   工事の規模（小→中→大）が一目で分かるようにするためだけの色分け。
   「おすすめ」「人気」の意味は持たせないこと（prices.js のコメントと対）。

   色は白地で4.5:1以上あるものだけを使う（lp-check の minContrast）。
     #1f7a4d 緑 5.32:1 ／ var(--sky-dark) #1567b0 5.84:1 ／ var(--brand) #bd4a00 5.10:1
   ※ var(--sky) #1e7fd4 は白文字に対して4.16:1しかない。
     文字を載せる面には使わないこと。 */
.pc-tag {
  grid-area: tag; justify-self: start; align-self: end;
  background: var(--brand); color: #fff;
  /* 13px は lp-check の minFont ちょうど。飾りではなく「どの規模の工事か」を
     伝える情報なので、これ以上小さくしないこと */
  font-size: 13px; font-weight: 800; line-height: 1.4;
  padding: 2px 10px; border-radius: 999px; margin-bottom: 3px;
}
.price-card.sz-s { border-left-color: #1f7a4d; }
.price-card.sz-m { border-left-color: var(--sky-dark); }
.price-card.sz-l { border-left-color: var(--brand); }
.sz-s .pc-tag { background: #1f7a4d; }
.sz-m .pc-tag { background: var(--sky-dark); }
.sz-l .pc-tag { background: var(--brand); }
.sz-s .pc-price { color: #1f7a4d; }
.sz-m .pc-price { color: var(--sky-dark); }
.sz-l .pc-price { color: var(--brand); }

/* リボンの見出し。両端のノッチで折り返しに見せる */
.price-ribbon {
  position: relative; display: block; width: max-content; max-width: 100%;
  margin: 0 auto 8px;
  background: var(--sky-dark); color: #fff;
  font-size: clamp(18px, 5vw, 24px); font-weight: 800; line-height: 1.4;
  text-align: center; padding: 9px 22px; border-radius: 6px;
}
/* ノッチは文字を載せない三角なので、面より濃ければよい（コントラスト比の対象外） */
.price-ribbon::before, .price-ribbon::after {
  content: ""; position: absolute; top: 50%; transform: translateY(-50%);
  border: 9px solid transparent; border-top-width: 13px; border-bottom-width: 13px;
}
.price-ribbon::before { left: -15px; border-right-color: #0e4c85; }
.price-ribbon::after  { right: -15px; border-left-color: #0e4c85; }
/* たたき v3b は黄色のマーカーを敷いていたが、白文字の下に黄色を敷くと
   その部分だけ 1.4:1 まで落ちて読めない。濃紺の上に黄色の文字にした
   （#ffd23f on #1567b0 = 4.17:1。18px以上の太字なので基準は3.0） */
.price-ribbon .mk { color: var(--pop); }
.price-ribbon-lead {
  text-align: center; font-size: 14px; color: var(--muted); margin: 0 0 16px;
}

/* PCでは3枚を横に並べ、カードの中は縦積みにして中央へ寄せる */
@media (min-width: 900px) {
  .price-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
  .price-card {
    grid-template-columns: 1fr;
    grid-template-areas: "tag" "name" "note" "price";
    justify-items: center; text-align: center;
    align-content: start; row-gap: 6px; padding: 18px 16px;
  }
  .pc-tag { justify-self: center; align-self: auto; }
  .pc-price { text-align: center; margin-top: 4px; }
}

/* 外壁は4列（20坪／30坪／40坪／もち）で、カードに組み替えると
   坪数どうしを見比べられなくなる。表のまま金額の字だけ上げる */
#price-wall tbody td { font-size: 17px; }
@media (max-width: 640px) { #price-wall tbody td { font-size: 19px; } }

/* P-3 セット。打ち消し線は使わず、色を薄くするだけ */
.price-set {
  background: #fff8f2; border: 2px solid var(--accent); border-radius: var(--radius);
  padding: 26px 22px; margin-bottom: 34px;
}
.price-set h3 { font-size: clamp(18px, 4.4vw, 23px); font-weight: 800; color: var(--brand); line-height: 1.5; }
.price-set > p { font-size: 14.5px; color: var(--muted); margin: 10px 0 18px; }
.price-set .price-before { color: #8fa2b5; }   /* line-through は使わない */
.price-set .price-after  { color: var(--accent); font-size: 16px; }

/* P-5 上下する条件。左右は同じ大きさ */
.price-vary { margin-bottom: 34px; }
.price-vary h3 { font-size: 19px; font-weight: 800; color: var(--brand); margin-bottom: 16px; }
.price-vary-cols { display: grid; gap: 16px; }
@media (min-width: 760px) { .price-vary-cols { grid-template-columns: 1fr 1fr; } }
.price-vary-cols > div {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 20px;
}
.price-vary h4 { font-size: 15.5px; font-weight: 800; margin-bottom: 12px; }
.price-up h4   { color: #b3541e; }
.price-down h4 { color: #1f7a4d; }
.price-vary ul { display: grid; gap: 9px; }
.price-vary li { font-size: 14px; line-height: 1.75; padding-left: 1.2em; text-indent: -1.2em; }
.price-vary li::before { content: "・"; }
/* スマホでは「安くなる」を先に出す */
@media (max-width: 759px) {
  .price-down { order: -1; }
  .price-vary-cols { display: flex; flex-direction: column; }
}

/* P-6 別途費用 */
.price-extra { margin-bottom: 34px; }
.price-extra-note {
  background: var(--brand-tint); border-radius: var(--radius); padding: 20px 22px; margin-top: 16px;
}
.price-extra-note p { font-size: 14.5px; line-height: 1.9; margin-bottom: 10px; }
.price-extra-note p:last-child { margin-bottom: 0; }

/* P-7 支払い */
.price-payment {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; margin-bottom: 34px;
}
.price-payment dt {
  background: var(--bg-soft); color: var(--brand); font-weight: 800; font-size: 14px;
  padding: 11px 16px; border-top: 1px solid var(--line);
}
.price-payment dt:first-child { border-top: none; }
.price-payment dd { padding: 13px 16px; font-size: 14.5px; line-height: 1.8; }

/* P-8 値上がりの説明 */
.price-why { background: var(--bg-soft); border-radius: var(--radius); padding: 24px 22px; }
.price-why h3 { font-size: 18px; font-weight: 800; color: var(--brand); margin-bottom: 12px; }
.price-why p { font-size: 14.5px; line-height: 1.9; margin-bottom: 12px; }
.price-why p:last-child { margin-bottom: 0; }

/* ---------- スマホ：横スクロールにせず、1工事＝1カードに組み替える ---------- */
@media (max-width: 640px) {
  .price-table, .price-table tbody, .price-table tr, .price-table th, .price-table td { display: block; }
  .price-table thead { display: none; }
  .price-table caption { display: block; }
  .price-table tbody tr {
    border-top: 1px solid var(--line); padding: 4px 0 12px;
  }
  .price-table tbody tr:first-child { border-top: none; }
  .price-table tbody th[scope="row"] {
    border-top: none; padding: 14px 16px 8px; font-size: 15.5px;
    /* PC用の width:46%（上部の .price-table tbody th）が効いたままだと
       カード型でも幅が半分に絞られ、「葺き替え（防災瓦）」が不自然に折り返す */
    width: auto;
  }
  .price-table tbody td {
    border-top: none; padding: 7px 16px; white-space: normal;
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  }
  /* 各セルの前に列見出しを出す（横スクロールの代わり） */
  .price-table tbody td::before {
    content: attr(data-col); font-size: 12.5px; font-weight: 700;
    color: var(--muted); flex: none;
  }
  .price-table tbody td:not([data-col])::before { content: none; }
  .price-table .price-span { text-align: right; }
  .price-table .price-when { display: block; }
  .price-table .price-when::before { display: block; margin-bottom: 3px; }

  /* P-6「別途いただく費用」は7行あり、行ごとに「費用」の見出しが出て
     そのぶん縦に伸びていた。項目名のすぐ下の数字が費用であることは
     見れば分かるので、この表だけ「費用」の見出しを落として詰める。
     ※行そのものは減らさない。畳むと有利誤認になるため（2026-09-03） */
  #price-extra tbody td[data-col="費用"]::before { content: none; }
  #price-extra tbody td[data-col="費用"] { justify-content: flex-end; }
  #price-extra tbody tr { padding: 2px 0 9px; }
  #price-extra tbody th[scope="row"] { padding: 11px 16px 4px; }
  #price-extra tbody td { padding: 4px 16px; }
}

/* ---------- 実在の証明の帯（2026-09-03） ----------
   金額のすぐ下に置く。写真は屋根の接写だけを使うこと。
   施主が特定できる写真（外壁の全景）は 2026-09-03 に全部外した。
   ストック写真をここに入れないこと。「当社が手がけた」と書いてあるため */
.proof { margin-top: 26px; }
.proof-t {
  text-align: center; font-size: 15px; font-weight: 800;
  color: var(--brand); margin-bottom: 10px;
}
.proof-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.proof-row figure {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;
}
.proof-row img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof-row figcaption {
  font-size: 13px; color: var(--muted); text-align: center;
  padding: 6px 4px 7px; line-height: 1.55;
}
/* 施工写真の直下に置く、自社サイトの施工事例への導線（2026-09-09・指示で会社概要から移動）。
   写真＝当社の現場、の直後に「事例はもっとある」を置く並びにしている。
   リンクは本文と同じ色だと押せると分からないので下線を付ける。CTAとは競わせない。 */
.proof-more { margin-top: 12px; text-align: center; font-size: 13px; line-height: 1.8; color: var(--muted); }
.proof-more a { color: var(--muted); white-space: nowrap; text-decoration: underline; }

/* ---------- 流れ ---------- */
.flow { counter-reset: step; display: grid; gap: 14px; }
.flow li {
  counter-increment: step; position: relative;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 20px 20px 74px;
}
.flow li::before {
  content: "STEP " counter(step);
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  width: 44px; text-align: center; font-size: 10px; font-weight: 800;
  color: var(--brand); line-height: 1.3;
}
.flow li::after {
  content: ""; position: absolute; left: 40px; bottom: -14px; width: 1px; height: 14px;
  background: var(--line);
}
.flow li:last-child::after { display: none; }
.flow h3 { font-size: 17px; font-weight: 800; color: var(--brand); margin-bottom: 4px; }
.flow p { font-size: 14.5px; color: var(--muted); }

/* ---------- エリア ---------- */
.area-box {
  background: #fff; border: 2px solid var(--brand); border-radius: var(--radius);
  padding: 26px 22px; text-align: center;
}
.area-box h3 { font-size: 18px; color: var(--brand); font-weight: 800; margin-bottom: 14px; }
.area-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.area-tags li {
  background: var(--brand-tint); color: var(--brand); font-weight: 700; font-size: 13px;
  padding: 6px 12px; border-radius: 6px;
}
.area-note { margin-top: 16px; font-size: 13px; color: var(--muted); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: 12px; }
.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 46px 18px 52px; position: relative;
  font-weight: 800; font-size: 15.5px; color: var(--brand);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "Q"; position: absolute; left: 18px; top: 16px;
  width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.faq summary::after {
  content: "＋"; position: absolute; right: 18px; top: 17px; color: var(--accent); font-weight: 800;
}
.faq details[open] summary::after { content: "－"; }
.faq .a {
  padding: 0 20px 20px 52px; font-size: 14.5px; color: var(--muted); position: relative;
}
.faq .a::before {
  content: "A"; position: absolute; left: 18px; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}

/* ---------- 会社概要 ---------- */
.company-table { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.company-table th, .company-table td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14.5px; text-align: left; }
.company-table th { background: var(--bg-soft); font-weight: 700; width: 34%; white-space: nowrap; color: var(--brand); }
.company-table tr:last-child th, .company-table tr:last-child td { border-bottom: none; }
/* 会社概要の下の小さい注記（2026-09-07）。ここが外への唯一の出口なので目立たせない。 */
.company-note { margin-top: 10px; font-size: 13px; line-height: 1.8; color: var(--muted); text-align: center; }
/* リンクは本文と同じ色なので、下線が無いと押せると分からない。
   CTAと競わせたくないので色は --muted のまま、下線だけ付ける（2026-09-07）。 */
.company-note a { color: var(--muted); white-space: nowrap; text-decoration: underline; }
.nb { white-space: nowrap; }   /* 「屋根塗装3/件）」のように割れてほしくない塊 */

/* ---------- フォーム ---------- */
/* セクションごと濃色で塗るのをやめた。「まだ暗い」と言われた箇所（2026-08-24）。
   薄い青の地に白いカードが乗る形にして、明るさを稼ぐ */
/* アンカーで飛んだとき、追従ヘッダー（59px）が見出しを食っていた。
   scroll-margin が無いと着地点がヘッダーの裏に入る（2026-08-24） */
#form { scroll-margin-top: 68px; }
.form-sec { background: var(--sky-tint); color: var(--ink); }
.form-sec .sec-head h2 { color: var(--sky-dark); }
.form-sec .sec-head .en { color: var(--accent); }
.form-sec .sec-head .lead { color: var(--muted); }

.form-card {
  background: #fff; color: var(--ink); border-radius: 16px; padding: 26px 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
}
@media (min-width: 768px) { .form-card { padding: 36px 40px; } }

.form-tel {
  text-align: center; border: 2px dashed var(--line); border-radius: var(--radius);
  padding: 18px; margin-bottom: 26px;
}
.form-tel .cap { font-size: 13px; font-weight: 700; color: var(--muted); }
.form-tel .num {
  display: inline-block; font-size: 32px; font-weight: 900; color: var(--brand);
  letter-spacing: .02em; line-height: 1.3;
}
.form-tel .hours { font-size: 13.5px; line-height: 1.7; color: var(--muted); }

.field { margin-bottom: 18px; }
.field > label { display: block; font-weight: 800; font-size: 14.5px; margin-bottom: 7px; }
.req, .opt {
  display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 7px;
  border-radius: 4px; margin-left: 8px; vertical-align: 1px;
}
.req { background: #e8443a; color: #fff; }
.opt { background: #e6eaef; color: var(--muted); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"],
.field select, .field textarea {
  /* 枠が #c8d1db（1.54:1）で、白いカードの上の白い欄がほぼ見えなかった。
     UI部品の境界は3:1が要る。#767f8c は 4.05:1（2026-08-24） */
  width: 100%; border: 2px solid #767f8c; border-radius: 8px;
  background: #fbfcfe;
  padding: 13px 14px; font-size: 16px; background: #fff;
}
.field textarea { min-height: 110px; resize: vertical; }
/* 任意欄の折りたたみ（2026-08-26）
   ------------------------------------------------------------
   欄が9つ縦に並んでいると、見ただけで面倒に見える。
   フォームまで来た206人のうち触れたのが10人だったので、
   必須3つ＋よく使う2つだけを出し、残り4つを畳む。

   ＊畳んでよいのは任意項目だけ。必須を隠さないこと。
   ＊料金の P-0 / P-5 / P-6 とは別物。あちらは表示義務があるので畳めない。
   ＊.opt-note は13px以上・行間1.7以上（lp-check.js が毎朝見ている）。 */
details.opt-fold {
  border: 2px dashed var(--line); border-radius: var(--radius);
  margin: 0 0 18px; background: #fcfdff;
}
details.opt-fold > summary {
  list-style: none; cursor: pointer;
  padding: 14px 16px; font-weight: 800; font-size: 14.5px; line-height: 1.7;
  color: var(--brand);
}
details.opt-fold > summary::-webkit-details-marker { display: none; }
details.opt-fold > summary::before { content: "＋ "; color: var(--accent); font-weight: 900; }
details.opt-fold[open] > summary::before { content: "− "; }
details.opt-fold > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
.opt-body { padding: 0 16px 4px; }
.opt-body .field:last-child { margin-bottom: 14px; }
.opt-note { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; }

.field input:focus, .field select:focus, .field textarea:focus {
  outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand);
}
.field .help { font-size: 13.5px; line-height: 1.7; color: var(--muted); margin-top: 6px; }
.field.is-error input, .field.is-error select { border-color: #e8443a; background: #fff6f5; }
.err-msg { display: none; color: #e8443a; font-size: 14px; font-weight: 700; margin-top: 6px; }
.field.is-error .err-msg { display: block; }

/* ラジオ選択（建築時期・屋根の種類） */
.radio-list { display: grid; gap: 8px; }
.radio-opt {
  display: flex; align-items: flex-start; gap: 10px; cursor: pointer;
  border: 2px solid #767f8c; border-radius: 8px; padding: 12px 14px;
  font-size: 15px; background: #fff;
}
.radio-opt:hover { border-color: var(--brand); }
.radio-opt.on { border-color: var(--brand); background: var(--brand-tint); font-weight: 700; }
.radio-opt input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--brand); }
.radio-opt .sub { display: block; font-size: 13px; line-height: 1.6; color: var(--muted); font-weight: 400; margin-top: 3px; }
.field.is-error .radio-opt { border-color: #e8443a; }

/* ハニーポット（人間には見えない） */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-privacy {
  background: var(--bg-soft); border-radius: 8px; padding: 14px 16px;
   color: var(--muted); margin-bottom: 20px;
  font-size: 13.5px; line-height: 1.8;
}
.form-privacy a { color: var(--brand); text-decoration: underline; }

.form-submit { text-align: center; }
.form-submit .btn { width: 100%; max-width: 420px; }
.btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.form-status { margin-top: 14px; font-size: 14px; font-weight: 700; min-height: 1.5em; }
.form-status.err { color: #e8443a; }
.form-fallback {
  display: none; margin-top: 16px; padding: 16px; border-radius: 8px;
  background: #fff6f5; border: 1px solid #f3c6c2; font-size: 14px; text-align: center;
}
.form-fallback.show { display: block; }
.form-fallback .num { display: block; font-size: 26px; font-weight: 900; color: var(--brand); }

/* ---------- 帯CTA ---------- */
.cta-band { background: linear-gradient(135deg, var(--sky) 0%, var(--sky-dark) 100%); color: #fff; text-align: center; }
.cta-band h2 { font-size: clamp(20px, 5vw, 28px); font-weight: 900; line-height: 1.5; }
.cta-band p { margin-top: 12px; font-size: 15px; opacity: .9; }
.cta-band .fv-cta { max-width: 720px; margin-inline: auto; }

/* ---------- フッター ---------- */
.ft { background: var(--brand-dark); color: rgba(255,255,255,.8); padding: 36px 0 26px; font-size: 13px; }
.ft .n { font-size: 15px; font-weight: 800; color: #fff; margin-bottom: 6px; }
.ft-links { margin-top: 16px; display: flex; gap: 18px; flex-wrap: wrap; }
.ft-links a { text-decoration: underline; }
.ft-copy { margin-top: 20px; font-size: 11.5px; opacity: .65; }

/* ---------- スマホ固定CTA ---------- */
.sticky {
  /* 最上部では出さない。ui.js が .on を付け外しする（2026-08-21）
     JSが動かない環境で永久に隠れないよう、既定は「見える」にしておく */
  transform: translateY(0);
  transition: transform .22s ease;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; gap: 8px; padding: 8px 10px;
  background: rgba(255,255,255,.97); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 14px rgba(0,0,0,.08);
}
.sticky a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-radius: 10px; padding: 9px 6px; font-weight: 800; line-height: 1.25; text-align: center;
}
.sticky .s-cap { font-size: 11px; font-weight: 700; }
.sticky .s-main { font-size: 15px; }
/* 以前は両方オレンジで、互いのコントラスト比1.11＝肉眼ではほぼ同色だった。
   幅は 1.7:1 で差をつけているのに色で差が無く、どちらを押すか決められない */
.sticky .tel { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.sticky .form { background: var(--accent); color: #fff; }
.sticky.is-managed { transform: translateY(115%); }
.sticky.is-managed.on { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .sticky { transition: none; } }
/* PCでも追従させる。以前は768px以上で消していたため、PCでは
   ファーストビューを過ぎた時点でCTAが1つも無い状態だった（2026-08-21）。
   スマホは全幅の帯、PCは右下に浮かせるカードにする */
@media (min-width: 768px) {
  .sticky {
    /* 本文が中央寄せなので、CTAも中央に置く。右下に寄せる理由が無い（2026-08-21）
       transform は表示・非表示の translateY に使うため、位置合わせには使わない */
    left: 0; right: 0; bottom: 24px; margin-inline: auto;
    width: min(560px, calc(100vw - 48px));
    border: 0; border-radius: 14px; padding: 10px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 12px 34px rgba(0,0,0,.20);
    backdrop-filter: blur(4px);
  }
  .sticky .s-cap  { font-size: 12px; }
  .sticky .s-main { font-size: 19px; }
  .sticky a { padding: 14px 10px; border-radius: 11px; }
}
/* 申し込みボタンを主役にする。電話は添えるだけ */
.sticky .form { flex: 1.7; }
.sticky .tel  { flex: 1; }

/* ---------- 写真 ---------- */
.photo {
  border-radius: var(--radius); overflow: hidden; background: var(--bg-soft);
  box-shadow: var(--shadow);
}
.photo img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.photo figcaption { font-size: 13.5px; line-height: 1.7; color: var(--muted); padding: 9px 12px; background: #fff; }
.photo-row { display: grid; gap: 18px; align-items: start; }
@media (min-width: 820px) { .photo-row { grid-template-columns: 1fr 1fr; gap: 28px; } }
.photo-row .txt h3 { font-size: 20px; font-weight: 800; color: var(--brand); margin-bottom: 10px; line-height: 1.5; }
.photo-row .txt p { font-size: 14.5px; color: var(--muted); margin-bottom: 10px; }
.photo-row .txt p:last-child { margin-bottom: 0; }
.photo-grid { display: grid; gap: 16px; }
@media (min-width: 700px) { .photo-grid { grid-template-columns: repeat(3, 1fr); } }

/* CTA帯に写真を敷く */
.cta-band.with-photo { position: relative; overflow: hidden; }
.cta-band.with-photo::before {
  content: ""; position: absolute; inset: 0;
  /* ここが rgba(16,54,95,.90) の紺のままで、.cta-band に指定した青を
     完全に覆い隠していた。ページ最大の412pxの塊が、外したはずの紺だった
     （2026-08-24 レビュー指摘。作業者は「明るくした」と報告していた） */
  background: linear-gradient(180deg, rgba(26,116,196,.90), rgba(21,103,176,.94)), url(../img/cta-bg.jpg);
  background: linear-gradient(180deg, rgba(26,116,196,.90), rgba(21,103,176,.94)), image-set(
      url(../img/cta-bg.avif) type("image/avif"),
      url(../img/cta-bg.webp) type("image/webp"),
      url(../img/cta-bg.jpg) type("image/jpeg"));
  background-size: cover; background-position: center;
}
.cta-band.with-photo > * { position: relative; }

/* ---------- 汎用 ---------- */
/* スマホでのみ改行させたい箇所に使う */
br.sp { display: inline; }
@media (min-width: 768px) { br.sp { display: none; } }
.note-img { font-size: 13px; line-height: 1.6; color: var(--muted); text-align: right; margin-top: 8px; }
.center { text-align: center; }
.mt24 { margin-top: 24px; }
.mt32 { margin-top: 32px; }

/* ---------- 下層ページ（サンクス／ポリシー） ---------- */
.page-head { background: var(--brand); color: #fff; padding: 44px 0; text-align: center; }
.page-head h1 { font-size: clamp(22px, 5vw, 30px); font-weight: 800; }
.doc { padding: 48px 0 64px; }
.doc h2 { font-size: 18px; color: var(--brand); font-weight: 800; margin: 32px 0 10px; }
.doc h2:first-child { margin-top: 0; }
.doc p, .doc li { font-size: 14.5px; color: var(--ink); }
.doc ul { margin: 8px 0 0 1.2em; list-style: disc; }
.doc li { margin-bottom: 4px; }
.doc .updated { font-size: 12.5px; color: var(--muted); margin-top: 32px; text-align: right; }

.thanks-box { text-align: center; padding: 8px 0 0; }
.thanks-box .icon {
  width: 76px; height: 76px; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand); display: grid; place-items: center; margin: 0 auto 20px;
  font-size: 36px; font-weight: 900;
}
.thanks-box h2 { font-size: clamp(20px, 5vw, 26px); color: var(--brand); font-weight: 800; margin-bottom: 14px; }
.thanks-box p { color: var(--muted); font-size: 15px; }
.thanks-next {
  margin-top: 32px; background: var(--bg-soft); border-radius: var(--radius);
  padding: 24px 20px; text-align: left;
}
.thanks-next h3 { font-size: 16px; font-weight: 800; color: var(--brand); margin-bottom: 10px; }
.thanks-next ol { list-style: decimal; margin-left: 1.3em; }
.thanks-next li { font-size: 14.5px; margin-bottom: 6px; }

/* ------------------------------------------------------------
   折りたたみ（2026-08-21）
   被災者はスマホでしか見られない。読み物を全部開いたまま並べると
   フォームまで24.8画面あり、誰も辿り着けなかった。
   必要な人だけ開く形にして、既定は閉じる。
   ※料金の P-0 / P-5 / P-6 はここに入れない（表示義務）
   ------------------------------------------------------------ */
details.more {
  border-top: 1px solid var(--line);
  background: var(--bg);
}
details.more > summary {
  list-style: none; cursor: pointer;
  padding: 18px 20px; font-weight: 800; font-size: 15.5px; color: var(--brand);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.more > summary::-webkit-details-marker { display: none; }
details.more > summary::after {
  content: ""; flex: none; width: 10px; height: 10px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg) translateY(-2px); transition: transform .18s ease;
}
details.more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
details.more > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
details.more > section { padding-top: 0; }
details.more > section > .wrap { padding-top: 0; }
@media (prefers-reduced-motion: reduce) { details.more > summary::after { transition: none; } }

/* 料金のうち、表示義務のない読み物は畳む（2026-08-21）。
   P-0 / P-5 / P-6 はここに入れないこと */
details.price-fold { border: 1px solid var(--line); border-radius: var(--radius); margin: 18px 0; background: #fff; }
details.price-fold > summary { list-style: none; cursor: pointer; padding: 14px 16px; font-weight: 800; font-size: 15px; color: var(--brand); }
details.price-fold > summary::-webkit-details-marker { display: none; }
details.price-fold > summary::before { content: "＋ "; color: var(--accent); font-weight: 900; }
details.price-fold[open] > summary::before { content: "− "; }
details.price-fold > section { padding: 0 16px 16px; }
/* P-6 の説明文を畳んだ（2026-09-03）。中身は section ではなく
   div.price-extra-note なので、ひとつ上の `> section` は当たらない。
   `> div` に広げるのは避けた。詳細度 (0,1,2) が .price-extra-note (0,1,0) に勝ち、
   背景色の内側の padding が上書きされて消えるため。左右の余白だけ margin で合わせる */
details.price-fold > .price-extra-note { margin: 0 16px 16px; }

/* ------------------------------------------------------------
   読ませる文字の下限（2026-08-21）
   フォーム周辺と打消し表示は 13px 以上・行間1.7以上にする。
   毎朝この基準で自動検査している。
   飾りのラベル（.en / .no / .b-sub / .s-cap）だけは対象外。
   ------------------------------------------------------------ */

/* 料金表の行注記は .price-table tbody th[scope="row"] span で指定している。
   詳細度が高いので、弱いセレクタを後から足しても効かない（2026-08-21 に踏んだ） */

/* ------------------------------------------------------------
   「相談だけでもOK」（2026-08-24）
   フォームに到達しても入力しない人が大半だったため、押す直前と
   迷う直前に置く。黄（--pop）はここと見出しのマーカーにだけ使う。
   ------------------------------------------------------------ */
.only-talk {
  display: block; margin: 0 0 18px;
  /* 黄の上は濃茶でも3.62:1しか出ない。本文色なら9.09:1（2026-08-24 実測） */
  background: var(--pop); color: var(--ink);
  border-radius: var(--radius); padding: 16px 18px;
  /* 目に入ることが目的なので、本文より明確に大きくする（2026-08-24 指示） */
  font-size: clamp(19px, 5.6vw, 26px); font-weight: 900; line-height: 1.5;
}
.only-talk .ot-mark {
  display: inline-block; background: var(--brand-dark); color: #fff;
  border-radius: 7px; padding: 3px 12px; margin-right: 8px;
}
.only-talk .ot-sub {
  display: block; margin-top: 4px;
  /* 375px幅で12.5pxになり下限13pxを割っていた（lp-check指摘 2026-08-24） */
  font-size: clamp(14px, 4vw, 17px); font-weight: 700; line-height: 1.6;
}
/* ファーストビューではボタンのすぐ上に来る。間隔だけ詰める */
.only-talk.ot-fv { margin-top: 22px; margin-bottom: 0; }
.fv-cta { margin-top: 12px; }

/* ------------------------------------------------------------
   症状のイラスト（2026-08-24）
   写真ではなく図にしてある。素材写真を自社の実績のように見せられないため。
   ラベルは参考画像に合わせて黄地。2列で、スマホでも2列のまま置く。
   1列にすると縦に伸びて、フォームまでの距離が延びる。
   ------------------------------------------------------------ */
.sym-grid {
  list-style: none; display: grid; gap: 12px;
  grid-template-columns: repeat(2, 1fr); margin-top: 8px;
}
.sym {
  background: #fff; border: 2px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.sym img { display: block; width: 100%; height: auto; }
.sym p {
  background: var(--pop); color: var(--ink);
  margin: 0; padding: 10px 12px; flex: 1;
  font-size: clamp(13px, 3.4vw, 15px); font-weight: 800; line-height: 1.5;
}
@media (min-width: 700px) {
  .sym-grid { grid-template-columns: repeat(4, 1fr); gap: 16px; }
}
/* 図を出したので、写真は補助に回して横幅いっぱいにする */
.photo-wide { margin-top: 20px; }
.photo-wide img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.photo-wide figcaption { margin-top: 6px; font-size: 13px; color: var(--muted); text-align: right; }


/* ------------------------------------------------------------
   こんなときは／しないこと（2026-09-03、たたき v3b より）
   ------------------------------------------------------------ */
.case-note {
  margin-top: 24px; font-size: 15px; line-height: 1.8;
  text-align: center; color: var(--ink);
}

/* 下の折りたたみ「災害のあとに増える訪問業者について」の要点を、
   畳まない場所へ出したもの。AD_yane-07-jikka が
   「その場で契約はお願いしません」「内訳の分かるお見積書」を
   根拠にしているので、畳んだままにしない（広告に書いてLPに無い＝景表法）。 */
.promise-sec { background: var(--bg-soft); }
.promise {
  background: #fff; border: 2px solid var(--accent);
  border-radius: var(--radius); padding: 22px 20px;
}
.promise h3 {
  font-size: 17px; font-weight: 800; text-align: center;
  color: var(--brand); margin-bottom: 12px;
}
.promise li {
  font-size: 15px; line-height: 1.7; padding: 10px 0 10px 28px;
  position: relative; border-bottom: 1px dashed var(--line);
}
.promise li:last-child { border-bottom: 0; }
.promise li::before {
  content: "✔"; position: absolute; left: 4px; top: 10px;
  color: #1f7a4d; font-weight: 800;
}
.promise-more { text-align: center; margin-top: 16px; }
.promise-more a {
  color: var(--brand); font-weight: 800; font-size: 15px; text-decoration: underline;
}

/* 料金のすぐ下にフォームを置く並びにしたので、あいだの余白を詰める（2026-09-03）。
   section の上下 56px が向かい合って112px空いており、そのぶんフォームが
   遠くなっていた。実測でフォームまで 6.1画面（lp-check の目安6）だったのを
   5.9画面に収めるための調整で、消した内容は無い。

   .price-sec + .form-sec の並びは新しい屋根LPだけ。
   現行の外壁LP・エアコンLPはフォームの前が別のセクションなので影響しない。 */
.price-sec { padding-bottom: 20px; }
.price-sec + .form-sec { padding-top: 24px; }
@media (min-width: 768px) {
  .price-sec { padding-bottom: 40px; }
  .price-sec + .form-sec { padding-top: 44px; }
}

/* 料金とフォームの間に会社概要を入れた（2026-09-07）。
   上の `.price-sec + .form-sec` は「直後」のときだけ効く隣接セレクタなので、
   間に1枚挟んだ時点で外れ、既定の section { padding: 56px 0 } に戻る。
   実測で 着地から入力欄が 214px → 247px（目安250pxのすぐ内側）まで伸びた。
   会社概要の下余白とフォームの上余白で112px空くのを避けるため、同じ詰めを与える。
   ここを消すなら、フォームまでの距離を測り直すこと。 */
.price-sec + .company-sec { padding-top: 24px; }
.company-sec + .form-sec { padding-top: 24px; }
@media (min-width: 768px) {
  .price-sec + .company-sec { padding-top: 44px; }
  .company-sec + .form-sec { padding-top: 44px; }
}

/* 料金の中の小ブロックの下余白を、新しい屋根LPだけ詰める（2026-09-03）。
   34px → 22px。消した内容は無く、間隔だけ。

   なぜ要るか：フォームまでが実測 4,540px で、lp-check の上限 4,560px に対して
   余裕が20pxしかなかった。§1.7 の手順5「顔写真が届いたらFVへ入れる」が
   残っているので、この状態だと写真を入れた時点で超える。

   .price-sec を付けているのは新しい屋根LPだけ。外壁LP・エアコンLPの
   料金表は従来の間隔のまま。 */
.price-sec .price-set,
.price-sec .price-vary,
.price-sec .price-extra,
.price-sec .price-payment { margin-bottom: 16px; }
.price-sec .price-block { margin-bottom: 16px; }

/* 料金の続き（P-3／P-7／P-8）を置くセクション。見出しは持たない。
   上のフォームと続けて読ませたくないので、間隔は詰めておく。 */
.price-tail { padding-top: 28px; padding-bottom: 28px; }
.price-tail .price-set,
.price-tail .price-payment { margin-bottom: 16px; }
.price-tail .price-fold:last-child { margin-bottom: 0; }

/* ============================================================
   たたき v3b の見た目（ポップ）
   ------------------------------------------------------------
   body[data-look="pop"] が付いているページにだけ効く。
   いまは新しい屋根LPだけ。外壁・エアコンは従来の見た目のまま。

   v3b がポップに見えているのは、絵柄ではなく「面と縁」の作りによる。
     ・板の影（box-shadow: 0 Npx 0）  ・太い全周の枠
     ・斜めストライプの地             ・リボンとピルの見出し
     ・波形の区切り
   絵を足していないので、素材まわりの確認事項が増えない。
   §1.5「実写が使えるところは実写、それ以外は自前の線画」の方針もそのまま。
   ============================================================ */

/* 丸ゴシック。iOS/Mac にしか無く、**Windows では Meiryo に落ちる。**
   端末で字幅が変わるので、字詰めを前提にしたレイアウトを作らないこと
   （バナーSVGと同じ注意）。 */
body[data-look="pop"] {
  font-family: "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN W4",
               "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
}

/* 見出しの EN ラベルをピルにする（v3b の .pill） */
[data-look="pop"] .sec-head .en {
  display: inline-block; margin: 0 auto 10px;
  background: var(--sky-dark); color: #fff;
  font-size: 13px; letter-spacing: .12em; font-weight: 800;
  padding: 3px 16px; border-radius: 999px;
  box-shadow: 0 3px 0 rgba(10, 60, 100, .28);
}

/* 料金：斜めストライプの地。v3b はここで「ポップさ」を出している */
[data-look="pop"] .price-sec {
  /* v3b の値（ストライプ .13／黄 .34／青 .24）から落としてある。
     v3b は料金ブロックが短かったが、本番の料金セクションは3,500px以上あり、
     P-5・P-6 の本文の背後にも同じ地が流れる。同じ濃さだと文字が読みにくい。
     地として感じられる程度に留めること。 */
  background:
    repeating-linear-gradient(-45deg, rgba(255,210,63,.07) 0 10px, transparent 10px 20px),
    radial-gradient(circle at 12% 0, rgba(255,210,63,.16), transparent 44%),
    radial-gradient(circle at 88% 14%, rgba(30,127,212,.09), transparent 42%),
    var(--bg-soft);
}

/* 料金カード：左だけの線 → 全周の太い枠と板の影 */
[data-look="pop"] .price-card {
  border: 4px solid var(--brand);
  border-radius: 18px;
  box-shadow: 0 6px 0 rgba(189, 74, 0, .24);
}
[data-look="pop"] .price-card.sz-s { border-color: #1f7a4d;        box-shadow: 0 6px 0 rgba(31,122,77,.26); }
[data-look="pop"] .price-card.sz-m { border-color: var(--sky-dark); box-shadow: 0 6px 0 rgba(21,103,176,.26); }
[data-look="pop"] .price-card.sz-l { border-color: var(--brand);    box-shadow: 0 6px 0 rgba(189,74,0,.26); }

/* ボタンも板の影に。ぼかした影より、面で押せる感じが出る */
[data-look="pop"] .btn-primary { box-shadow: 0 5px 0 var(--accent-dark); }
[data-look="pop"] .btn-tel     { box-shadow: 0 5px 0 rgba(189, 74, 0, .30); }
[data-look="pop"] .btn:hover   { transform: translateY(-1px); }

/* 症状カードにも同じ板の影をかけて、料金カードと作りを揃える */
[data-look="pop"] .sym {
  border: 3px solid var(--sky-dark); border-radius: 16px;
  box-shadow: 0 4px 0 rgba(21, 103, 176, .26);
}

/* 波形の区切り。
   ※ 色が変わるところにしか置かない。FVの下は上下ともクリームなので
     波を敷いても見えない（v3b は FV が濃紺なので成立していた）。
     このLPで色が変わるのは CTA帯（青）の上だけ。 */
[data-look="pop"] .wv {
  position: absolute; left: 0; right: 0; width: 100%; height: 22px;
  display: block; z-index: 2; pointer-events: none;
}
[data-look="pop"] .wv-t { top: 0; }

/* FVの上部を詰めて、電話カードとボタンを1画面目に入れる（2026-09-04）。
   実測で、ボタンの開始が656pxあり、1画面目（608px）の外だった。
   pop の中だけ。外壁・エアコンのFVは従来の間隔のまま。 */
[data-look="pop"] .fv-in { padding-top: 26px; }
[data-look="pop"] .fv-voice { margin: 2px 0 8px; }
[data-look="pop"] .tel-card { margin-top: 16px; }
/* 電話カードの真下に置く「時間外でも、フォームは24時間」の行（2026-09-07）。
   カードが中央寄せなので、揃えないと1行だけ左に流れて見える。
   **.fv-note は外壁LP・エアコンLPでも使っている。**だから素の .fv-note には当てず、
   data-look="pop"（屋根LPにしか付いていない）で囲って限定する。 */
[data-look="pop"] .fv-note { text-align: center; margin-top: 10px; }
@media (min-width: 768px) { [data-look="pop"] .fv-in { padding-top: 44px; } }

/* 下部固定バー（高さ72px・position:fixed）の下敷きになる分を、
   フッターの下余白で確保する（2026-09-04）。
   もとは padding-bottom:26px しかなく、いちばん下までスクロールすると
   商号・住所・電話・プライバシーポリシーのリンクがバーに隠れていた。

   屋根だけでなく外壁・エアコンも同じ作りなので、pop に限定せず全ページに効かせる。
   バーの高さが変わったら、この値も合わせること。 */
.ft { padding-bottom: 96px; }

/* PCのファーストビュー：文字とCTAの列を絞る（2026-09-04）
   ------------------------------------------------------------
   幅1440pxで測ると、見出しは約660pxで折り返しているのに
   電話カード・ボタン・無料の枠が .wrap いっぱいの1080pxまで伸びていた。
   右側は「顔写真が入る予定だった場所」で、写真を入れない判断になったため
   ただの空白として残り、カードだけが横に間延びして見えていた。

   列を640pxに絞ると、右側は背景の屋根写真になる。
   PC用の覆いは右へいくほど薄い（100deg で .96 → .62）ので、
   もともと「左に文字・右に写真」を想定した作りになっている。

   1024px 未満では絞らない。絞ると見出し（最大45px）の折り返しが増えて
   かえって縦に伸びる。 */
@media (min-width: 1024px) {
  [data-look="pop"] .fv-in > * { max-width: 640px; }
}

/* FV冒頭のチップ（2026-09-04）
   ------------------------------------------------------------
   会社の所在地と対応エリアを、同じ見た目で並べる。
   もとは所在地だけがピル、対応エリアは別デザインの青い帯（13px）で、
   吹き出しも含めて3つの系統が縦に並んでいた。

   ・文字は15px。13pxは lp-check の下限ちょうどで、
     「かなり重要」な情報を置く大きさではない（相手は35〜65歳）
   ・.fv-voice（吹き出し）と同じ板の影・同じ余白にして系統を揃える。
     枠の色だけ変えてある：オレンジ＝会社の事実、淡色＝お客様の声 */
.fv-chips {
  display: flex; flex-wrap: wrap; gap: 8px; list-style: none;
  margin: 0 0 10px; padding: 0;
}
.fv-chips li {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: var(--brand-dark);
  border: 2px solid var(--brand); border-radius: 999px;
  padding: 8px 16px;
  font-size: 15px; font-weight: 900; letter-spacing: .01em; line-height: 1.4;
  box-shadow: 0 3px 0 rgba(189, 74, 0, .16);
}
.fv-chips .pin { color: var(--accent); font-size: 1.05em; line-height: 1; }
@media (min-width: 768px) { .fv-chips li { font-size: 16px; } }

/* 吹き出しをチップと同じ丸みに寄せる。枠の色は変えない（お客様の声なので） */
[data-look="pop"] .fv-voice { border-radius: 999px; }

/* 料金の注記（P-0本体・P-5・P-6）を置く節。見出しは持たない。
   フォームの直下に続くので、間隔は詰めておく（2026-09-04）。
   ※ここに来る3つは畳んでいない。順番を変えただけ。 */
.price-notes { padding-top: 28px; padding-bottom: 24px; }
.price-notes .price-vary,
.price-notes .price-extra { margin-bottom: 16px; }
.price-notes .price-extra:last-child { margin-bottom: 0; }

/* 料金（カードと実写の帯）はPCで広げる（2026-09-04）
   ------------------------------------------------------------
   .wrap-narrow は760pxで、長い本文を読みやすくするための幅。
   ところがこの節に残っているのは「金額は目安です」の1行・カード3枚・
   脚注1行・実写3枚だけで、長文はフォームの下（.price-notes）へ移した。
   760pxのままだとFV（.wrap＝1080px）と幅が揃わず、左右が間延びして見える。

   たたき v3b も料金ブロックだけPCで960pxに広げていた（同じ理由）。
   .price-notes は長文と表が入るので760pxのまま。 */
@media (min-width: 900px) {
  [data-look="pop"] .price-sec .wrap-narrow { width: min(100% - 32px, 960px); }
}

/* 料金の中の <section> から、ページ用の余白を外す（2026-09-04）
   ------------------------------------------------------------
   price-section.js は P-5 を <section class="price-vary">、
   P-6 を <section class="price-extra" id="betto"> として組み立てている。
   これらに、ページ全体の section { padding: 56px 0 }（768px以上は80px）が
   そのまま当たっていた。

   実測：#betto は高さ884pxのうち、表が終わったあとに98pxの空白があった
   （padding-bottom 80px ＋ 内側の折りたたみの margin 18px）。
   折りたたみだけが並ぶ場所では、この空白が「なぜか隙間が空く」状態になる。

   屋根だけでなく外壁・エアコンも同じ構造なので、pop に限定せず全ページに効かせる。
   .price-set と .price-why は自前の padding を持っているので触らない。 */
.price-vary,
.price-extra { padding-top: 0; padding-bottom: 0; }

/* 折りたたみが並ぶだけの2つの節は、境目の余白を無くして一続きに見せる。
   節をまたぐと折りたたみ同士の margin が相殺されず、88pxの段差になっていた。 */
.price-notes { padding-bottom: 0; }
.price-tail { padding-top: 0; }

/* 金額の直下の注記を強める（2026-09-04）
   ------------------------------------------------------------
   並びが「金額カード → 施工写真 → フォーム → 別途いただく費用の表」に
   なったため、**金額に隣接した打消しはこの1行だけ**になった。
   実測で 13.5px・薄い灰色（#6f645c）で、すぐ上の41pxの数字に対して弱い。

   §4 の「表示の大小も同じ理屈で、強調と打消しを離しすぎないこと」に照らして、
   本文と同じ大きさ・同じ濃さまで上げる。文言は変えていない。
   `別途いただく費用` は #betto へのリンクのままで、押せば表へ飛ぶ。

   .price-sec の中だけ。外壁・エアコンの脚注は従来のまま。 */
.price-sec .price-foot {
  font-size: 15px;
  color: var(--ink);
  line-height: 1.9;
  margin-top: 14px;
}
.price-sec .price-foot a {
  /* リンクだと分かる見た目は維持しつつ、地の文より一段強く */
  color: var(--brand); font-weight: 900; text-decoration: underline;
  text-underline-offset: 3px;
}

/* ボタンの副題とチップを大きくする（2026-09-04・指示）
   ------------------------------------------------------------
   b-sub は 11px・opacity .9 だった。相手は35〜65歳で、これは小さい。

   ただし白文字をオレンジ（--accent #f4610c）に載せると **3.20:1** しかなく、
   14pxの太字は「大きい文字」の扱い（18.66px以上）に入らないので 4.5:1 が要る。
   そこで濃いオレンジ（--brand-dark #933900・白文字で 7.43:1）のピルを敷いた。
   電話カードの「お電話でご相談」ラベルと同じ作りで、見た目も揃う。 */
[data-look="pop"] .btn .b-sub {
  display: inline-block;
  background: var(--brand-dark); color: #fff;
  font-size: 14px; font-weight: 800; opacity: 1; letter-spacing: .02em;
  padding: 2px 12px; border-radius: 999px; margin-bottom: 5px;
}
[data-look="pop"] .btn .b-main { font-size: 20px; }

/* チップをもう一段大きく */
[data-look="pop"] .fv-chips li { font-size: 16px; padding: 9px 17px; }
@media (min-width: 768px) { [data-look="pop"] .fv-chips li { font-size: 18px; padding: 10px 20px; } }

/* 副題とチップを大きくしたぶん、FV上部をもう少し詰める（2026-09-04）。
   実測でボタンの下端が1画面目（608px）から10pxはみ出していた。 */
[data-look="pop"] .fv-in { padding-top: 20px; }
[data-look="pop"] .fv-voice { margin: 2px 0 6px; }
[data-look="pop"] .tel-card { margin-top: 12px; }
@media (min-width: 768px) { [data-look="pop"] .fv-in { padding-top: 40px; } }

/* FVのボタンを1行にして、文字を幅いっぱいに出す（2026-09-04・指示）
   ------------------------------------------------------------
   「必須は3つだけ！無料で相談する」を折り返さない。
   14文字なので、左右の余白を削ってから clamp() で幅に追従させる。

   白文字をオレンジ（--accent #f4610c）に載せると 3.20:1 しかないが、
   **18.66px以上の太字は「大きい文字」の基準（3.0:1）で足りる。**
   下限を19pxにしてあるのはこのため。ここを18px未満に下げないこと。 */
[data-look="pop"] .btn-oneline {
  padding-left: 8px; padding-right: 8px;
}
[data-look="pop"] .btn-oneline .b-main {
  display: block; white-space: nowrap;
  /* 6.4vw だと 375px幅で文字が345px、ボタンの内側308pxを超えて左右が切れていた
     （.fv が overflow:hidden なので、はみ出しではなく“欠け”になる）。5.5vw に落とした。 */
  font-size: clamp(19px, 5.8vw, 30px);
  line-height: 1.35; letter-spacing: -.02em;
}

/* 「現地調査・お見積り 無料」の枠を押せるようにした（2026-09-04・指示）。
   HTML側で div → a（href="#form"）にしてある。
   押せることが伝わるよう、ボタンと同じ板の影と押し込みを付ける。
   文字色は白のまま。地は --brand（#bd4a00）で白文字5.10:1あり、変更なし。 */
[data-look="pop"] a.fv-free {
  cursor: pointer;
  box-shadow: 0 5px 0 var(--brand-dark);
  transition: transform .12s ease, box-shadow .12s ease;
}
[data-look="pop"] a.fv-free:hover { transform: translateY(-1px); }
[data-look="pop"] a.fv-free:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--brand-dark); }

/* 電話番号の欄の下に出す「当社がしないこと」の2行（2026-09-09）。
   不安が起きる場所で答えるための再掲。文言はページ下部の .promise と同じ。
   欄と欄の間に挟まるので、入力の邪魔にならないよう小さく・控えめにする。 */
.tel-assure {
  margin: -4px 0 18px;
  padding: 10px 12px;
  border-left: 3px solid var(--line, #dfe3e8);
  background: var(--bg-soft, #fff8f0);
  border-radius: 0 6px 6px 0;
}
.tel-assure .ta-head {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #1d2429);
}
.tel-assure ul { margin: 0; padding-left: 1.1em; }
.tel-assure li {
  font-size: 13px;
  line-height: 1.75;
  color: var(--muted, #5b6670);
}

/* 受付時間外のときだけ「フォームは24時間」を強く出す（2026-09-09）。
   ------------------------------------------------------------
   文字は足していない。既にある .fv-note の見え方だけを変える。
   **font-size は動かさないこと。**行数が変わるとFVのボタンが
   1画面目（608px）から押し出される。いまボタンは 460–531px にある。
   太さと色と下線だけで差をつける。実測で全幅・両状態の座標一致を確認済み。

   data-hours は <head> のインラインscriptが付ける。
   付かなかったとき（JS無効・例外）は、どちらの規則にも当たらず従来の見え方。 */
[data-hours="closed"] .fv-note {
  color: var(--ink);
  font-weight: 800;
}
[data-hours="closed"] .fv-note strong,
[data-hours="closed"] .fv-note { text-decoration: none; }

/* ご希望のご連絡方法（2026-09-09）。メール／電話のどちらかを選ぶ。
   選ばれていないほうの欄は hidden で消える。
   .field[hidden] を明示しているのは、将来 .field に display を足したときに
   hidden が効かなくなるのを防ぐため（いまは素の div なので既定で効く）。 */
.field[hidden] { display: none !important; }
.method-opts { display: flex; gap: 10px; }
.method-opt {
  flex: 1 1 0; display: flex; align-items: center; gap: 8px;
  padding: 13px 14px; border: 2px solid var(--line); border-radius: var(--radius);
  font-size: 15px; font-weight: 700; color: var(--ink);
  background: var(--bg); cursor: pointer;
}
.method-opt input { width: 20px; height: 20px; accent-color: var(--brand); margin: 0; }
.method-opt:has(input:checked) { border-color: var(--brand); background: var(--sky-tint); }
.method-opt:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 市町村の窓口リンク（/saigai/ で使う） ----------
   外部の公式ページへ出すリンクの一覧。押せる面積を確保するため、
   .area-tags（13pxのピル）は使わず、行ごとの箱にしている。 */
.gov-links { display: grid; gap: 10px; margin-top: 18px; }
.gov-links li { list-style: none; }
.gov-links a {
  display: block; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 44px 16px 18px;
  font-weight: 700; color: var(--ink); text-decoration: none;
  line-height: 1.6; position: relative;
}
.gov-links a::after {
  content: '\2197'; position: absolute; right: 16px; top: 50%;
  transform: translateY(-50%); color: var(--brand); font-weight: 700;
}
.gov-links a:hover, .gov-links a:focus-visible { border-color: var(--brand); }

/* .tel-assure を本文（.lead）の直後に置くと、上下の余白が相殺して4pxほど重なる。
   フォームの中では前が .field なので起きなかった。節の中で使うとき用の余白。 */
.promise-sec .tel-assure { margin-top: 22px; }

/* 受付時間外は、電話カードを控えめにしてフォームのボタンを主役にする（2026-09-12）
   ------------------------------------------------------------
   なぜ
     電話タップ24件のうち受付時間内は5件（21%）だけ。残り19件は
     ダイヤラーが開いたところで止まっており、**着信は0件**（通話履歴で確認）。
     時間外に番号を主役で出すのは、開かない扉を大きく見せていることになる。
     いま唯一の成約（2026-08-31）は 20:09＝時間外に、フォームから来ている。

   何をしていないか
     ・番号を隠さない。**かけたい人はかけられる**まま置く
     ・文字を足していない。「ただいま受付時間外です」とは書かない
       （端末の時計がずれていたり祝日だと嘘になる。既存の判断と同じ）
     ・font-size を動かさない。FVの座標が変わるとボタンが1画面目から外れる

   data-hours は各ページの <head> のインラインscriptが付ける。
   付かなかったとき（JS無効・例外）はどちらの規則にも当たらず、従来の見え方。 */
[data-hours="closed"] .fv .tel-card {
  opacity: 0.66;
  border-style: dashed;
}
[data-hours="closed"] .fv .tel-card .n { color: var(--muted); }
/* ボタンを相対的に立てる。影だけで差を付ける（大きさは変えない） */
[data-hours="closed"] .fv .fv-cta .btn-primary {
  box-shadow: 0 10px 26px rgba(189, 74, 0, 0.34);
}

/* ============================================================
   読みやすさ（2026-09-16 追加）
   ------------------------------------------------------------
   なぜ
     LP到達の年齢を実測した（/insights の breakdowns=age・直近14日・到達1,052）。
       35-44  102（ 9.7%）／45-54 277（26.3%）
       55-64  363（34.5%）／65+   306（29.1%）
     **55歳以上が 63.6%、65歳以上だけで 29.1%。**
     広告セットの狙いは35〜65だが、実際はもっと上へ寄っている。
     しかも年齢が上がるほどLP到達単価が安い（¥76 → ¥50）。

     その相手に対して、本番の文字はこうなっていた（iPhone 390×844・見えているものだけ）。
       /yane/    見えている3,171字のうち **16px未満が1,949字＝61.5%**
       /saigai/  見えている4,065字のうち **16px未満が1,849字＝45.5%**
     いちばん多いのが15px。次が13〜14px。

   どう直したか
     **font-size を書いている100箇所以上を触らない。**
     実物を測って「16px未満の文字を実際に抱えている入れ物」を数え、
     多い順に上位だけをこの末尾ブロックで上書きする（同じ詳細度なら後勝ち）。
     測り方は scratchpad/small-text-where.js（描画してから、見えているものだけ数える）。

   触っていないもの
     ・見出し・FV・ボタンの大きさ（clamp で組んであるので崩れる）
     ・フォームの欄の並び・必須の有無・送信ボタンの文言
       （form-area-jun-0914 の実験と、別途の判断が要るため）
     ・色・余白・行間の設計

   【注】この変更でページは縦に伸びる。長さの目安（14画面）と
     Depth_50/90 の基準は、**この日から取り直すこと。**
     同じ50%が別の場所を指すようになる。
   ============================================================ */

/* 【注】`body` を頭に付けて詳細度を上げている。
   既存の規則（`.price-table thead th` のように要素＋クラスを重ねたもの）に
   後勝ちだけでは負ける。実測で「指定したのに15pxのまま」が6件出たので、
   **効いたかを測り直してから詳細度を足した。**書いただけで効いたことにしない。
   （`#price-wall tbody td { font-size:19px }` のようにIDで19pxを指定している箇所は
     こちらより大きいので、そのまま勝たせてよい） */

/* 本文（いちばん字数が多い層）15px → 17px */
body .reason-card p,
body .price-table td,
body .price-table th,
body .price-table tbody th[scope="row"],
body .price-fold > summary,
body .opt-fold > summary,
body .sec-head .lead,
body .field > label,
body .lead,
body .lead > strong,
body .price-foot,
body .worry-list > li,
body section td,
body section th { font-size: 17px; }

/* 注記・補助（14px → 16px） */
body .form-privacy,
body .field .help,
body .price-table .price-when,
body .price-pending,
body .price-table thead th,
body .form-tel .hours,          /* 【注】`.form-tel .hours` に負けていた */
/* 【注】`.btn .b-sub` は**触らない。**14px は 2026-09-04 に指示で決めた設計で、
   白文字を濃いオレンジのピルに載せてコントラスト 7.43:1 を取っている（1412行のコメント）。
   lp-check も装飾ラベルとして意図的に除外している。
   一度ここへ入れたが、**人が理由つきで決めた値を黙って上書きしていた。**外した。 */
body section li,
body .wrap li { font-size: 16px; }

/* 細かい注記（13px → 15px）。ここは「読めなくてよい」ではなく
   「あとで効いてくる条件」が書かれているので、読める大きさまで上げる */
body .price-note,
body .price-table td small,
body .price-tent,
body .fv-note,
body .tel-card .t,
body .company-note,
body .pc-note,
body .ta-head,
body .ft-links a,
body .wrap > p { font-size: 15px; }

/* 【注】詳細度は「クラス＞要素」。`body section li`（要素3つ）は
   `.promise li`（クラス1＋要素1）に**負ける。**
   最初これで6件が15pxのまま残った。**クラス名で当てること。**
   ここも測り直して足した（scratchpad/small-text-where.js）。 */
body .case-note,
body .promise li,
body .promise-more a,
body .cta-band p,
body .wrap-narrow .lead,
body .wrap .lead,
body section .lead,
body .pc-plain,
body .thanks-box p { font-size: 17px; }

/* 【注】フォームの中の文字（必須・任意の印 11px／エラー文 14px）は、
   **ここでは触らない。**2026-09-16 に一度入れたが、lifeup-reviewer と
   lifeup-gatekeeper の判定で外した。

   理由：`form-area-jun-0914` が「累計着地3,800件（＝9/29ごろ）まで
   他のフォーム変更を入れない」という止め条件つきの実験を動かしている。
   必須の印とエラー文の見やすさは、**その実験が見ている「欄に触れた率」
   「エラーで弾かれた後の挙動」に直接効く。**

   ただし **11px はフォーム内でいちばん小さい文字**で、
   「この欄は要る」と伝える唯一の表示がいちばん読めない大きさ、という
   実測の事実は残る（到達の63.6%が55歳以上）。**9/29 以降にここへ戻ること。**

/* 電話リンクの指の的。実測で5本中2本が高さ44px未満だった
   （5.2画面目 231×42 ／ 12.5画面目 101×18）。
   font-size は動かさない。**上下の余白だけで的を広げる。**
   【注】着信は0件（2026-09-09・09-11 に轟さんが通話履歴で確認）。
   tel: はダイヤラーを開くだけで発信は別の操作なので、
   これは「押しやすさ」の修正であって、着信0件の説明ではない。 */
/* 【注】`revert` は「このファイルの元の指定に戻す」ではなく、
   作者スタイルを丸ごと捨てて既定値へ戻す。**それで余白が 0/0 になった。**
   当てない形（:not）にして、元の指定をそのまま生かす。 */
a[href^="tel:"]:not(.tel-card):not(.btn):not(.btn-tel) { padding-block: 6px; }
/* 【注】上の :not を3つ重ねた規則は詳細度が (0,4,1) になる。
   `body .company-sec a[...]` は (0,2,2) で**負ける。**
   一度これで 6/6（高さ30px）まで戻ってしまった。同じ :not を付けて上回らせる。 */
body .company-sec a[href^="tel:"]:not(.tel-card):not(.btn):not(.btn-tel) { padding-block: 16px; }   /* 実測で 101x18 と的が小さかった。44pxちょうどでは余白が無いので16pxにした */
/* 【注】除外の書き方を2つとも間違えていた（lifeup-reviewer の指摘・2026-09-16）。
   (1) `.tel-card a[href^="tel:"]` は「.tel-card の中の a」を指すが、
       実物は **`<a class="tel-card" href="tel:...">` 自身がその a**。一致しない。
   (2) `.btn-tel`（クラス1）は `a[href^="tel:"]`（クラス1＋要素1）に**詳細度で負ける。**
   結果、**「触らない」と書いた2つが実際には縮んでいた**（10/12px→6px、16px→6px）。
   クラスと属性を同じ要素に付けて、詳細度でも勝たせる。 */


/* 本文の p。上で個別に指定していない素の段落（実測でいちばん字数が多い層） */
body section p:not([class]),
body .wrap p:not([class]) { font-size: 17px; }

@media (min-width: 768px) {
  /* 画面が広いときは元の設計に戻す。この変更はスマホの読みやすさのためのもの。
     【注】ここは**一度も効いていなかった**（lifeup-reviewer の指摘・2026-09-16）。
     上の常時適用の規則に `body` を付けて詳細度を上げたのに、
     戻し側に付けていなかったので、**広い画面でも17pxのままだった。**
     メディアクエリの中にあっても詳細度は無条件に比較される。
     同じセレクタにして、後に書いてあるぶんで勝たせる。 */
  body .reason-card p,
  body .price-table td,
  body .price-table th,
  body .price-table tbody th[scope="row"],
  body .price-fold > summary,
  body .opt-fold > summary,
  body .sec-head .lead,
  body .field > label,
  body .lead,
  body .lead > strong,
  body .price-foot,
  body .worry-list > li,
  body section td,
  body section th,
  body .case-note,
  body .promise li,
  body .promise-more a,
  body .cta-band p,
  body .wrap-narrow .lead,
  body .wrap .lead,
  body section .lead,
  body .pc-plain,
  body .thanks-box p,
  body section p:not([class]),
  body .wrap p:not([class]) { font-size: 16px; }
}


/* ============================================================
   空のまま送信を押した人へ「2つだけでいい」と言い直す（2026-09-16 追加）
   ------------------------------------------------------------
   なぜ
     2026-09-15〜16 の実測で、**連絡先の欄に一度も触れないまま送信が押されていた**
     （FormField_contact 0 に対し FormError_contact 4）。
     form.js の検証は必須欄を「空かどうか」でしか見ないので、
     同時に立っていた FormError_name は「お名前も空だった」という意味。
     ＝ **ほぼ空のまま送信が走っている。**

     誤タップではない。最初の欄から送信ボタンまで1205px（1.43画面）あり、
     同時には見えない。見えている5欄を素通りしてスクロールしたうえで押している。
     LP到達の63.6%が55歳以上・29.1%が65歳以上（実測）。

   何をするか
     必須が全部空のまま押されたときだけ、**3番目以降の欄を畳んで2欄に見せる。**
     欄そのものは消さない（`display:none` で畳むだけ。値は送られない＝もともと空）。
     何か書き始めたら form.js が is-simple を外して元へ戻す。

   【注】必須の有無・欄の並び・送信ボタンの文言は変えていない。
   【注】`.field` の3番目以降を兄弟セレクタで畳んでいる。
     欄を足すときは、2番目までが必須という前提を壊さないこと。
   ============================================================ */
.simple-note {
  margin: 0 0 18px; padding: 14px 16px;
  background: var(--sky, #eef5fb); border-radius: var(--radius, 10px);
  font-size: 17px; line-height: 1.8; color: var(--ink);
}
.simple-note strong { color: var(--brand); }

form.is-simple .field + .field ~ .field { display: none; }
form.is-simple .opt-fold { display: none; }
/* 【注】2026-09-28 追加。送信ボタンを必須2欄の直下へ上げたとき、
   任意欄の手前に「ここから下はすべて任意です」の1行（.opt-lead）を置いた。
   この行は `.field` でも `.opt-fold` でもないので上の2行に当たらず、
   **空のまま送信した人（is-simple）には、案内文だけが残って下の欄が全部消える。**
   参照先の無い文が宙に浮くので、一緒に隠す（lifeup-reviewer が実測で発見）。 */
form.is-simple .opt-lead { display: none; }

/* CTAで飛んだ先に入力欄が見えるように、**フォームの見出し周りだけ**詰める（2026-09-16）
   ------------------------------------------------------------
   文字を大きくしたぶん、`#form` へ飛んだ位置から最初の入力欄まで 258px になり、
   目安250pxを超えた（`doctor.js` が検出。屋根は 244px で通っていたが、
   外壁・制度・エアコンが超えた）。**文字は小さく戻さない。**余白で戻す。
   【注】ここを詰めすぎると見出しと欄がくっつく。250pxを切る最小限だけ。 */
body .form-sec .sec-head { margin-bottom: 22px; }
body .form-sec .sec-head .lead { margin-top: 8px; }

/* ============================================================
   送信ボタンの直下「押したあとどうなるか」（2026-09-18 追加）
   ------------------------------------------------------------
   なぜ
     実測（8/28〜9/18・22日）：着地 2,960 → フォームまでスクロール 2,221（75%）
     → 欄に触れた 30（1.35%）。**届いた人が触らないことが詰まり。**
     来訪の63.6%が55歳以上。9/15〜16 は必須2欄とも空のまま送信が4件。
     ＝「書いて送る箱」ではなく「連絡してもらうボタン」として押されている疑い。
     押す直前に要るのは「押せば、こちらから電話が来る」という一文。

   大きさ
     .only-talk（19〜26px）より小さく、本文（17px）と同じにする。
     ボタンの主役を奪わないが、年配の読み手が読み飛ばさない大きさ。
     **13px台にしないこと。**2026-09-16 に本文15→17px へ上げた方針と揃える。

   色
     地は白（--bg）のまま、枠線だけ。--pop（黄）にすると .only-talk と
     二段重ねになってボタンが埋もれる。実測せずに背景色を足さないこと。

   【注】時間・営業日の約束を**この中に書かないこと。**
        henshin-sokudo（何時間以内に折り返せるか）と orikaeshi-jikan-0916
        （「翌営業日」と書いてよいか）が、どちらも先方から未回答。
   ============================================================ */
body .after-send {
  margin: 14px auto 0;
  max-width: 420px;
  padding: 13px 15px;
  border: 1px solid var(--line, #dfe3e8);
  border-radius: var(--radius);
  background: var(--bg, #fff);
  font-size: 17px;
  line-height: 1.75;
  font-weight: 700;
  color: var(--ink);
  text-align: left;
}
body .after-send strong { color: var(--brand-dark); }

/* 案内は連絡先の種類で出し分ける（2026-09-18・lifeup-reviewer の指摘）
   ------------------------------------------------------------
   メールだけ書いた人に「お電話でうかがいます」と出すと、**果たせない約束**になる。
   server/form.php は tel が空なら施工会社へ「メールでご返信ください」と出し、
   自動返信も「このメールアドレスへご返信いたします」へ分岐している。**表と裏を揃える。**
   2026-09-09 に thanks/index.html で同じ誤りを直しているので、**2度目。**

   span は既定で hidden が効くが、将来 .after-send span に display を足した人が
   気づけない形になるので明示しておく（.field[hidden] と同じ理由）。 */
body .after-send > span[hidden] { display: none !important; }

/* いつ連絡が来るか（2026-09-18 追加）
   ------------------------------------------------------------
   轟さんの回答「営業時間内なら当日、営業時間外は次の営業日の朝一」。
   2026-08-24 から25日間 未回答だった henshin-sokudo / orikaeshi-jikan-0916 の答え。
   **これがLP上で唯一の「速さ」の情報。**それまでは「土日祝休」という否定形しか無かった。
   上の3通り（any / tel / mail）とは別の行にする。同じ文を3つ持たせると直すとき3箇所になる。 */
body .after-send .as-when {
  display: block;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px dashed var(--line, #dfe3e8);
}