/* 色・書体・余白は共通の renovy-tokens.css に従う（直値を書かない）。
   いまは 固定ヘッダー / hero / 固定 CTA だけ。ブロックは 1 つずつ足す。 */

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  color: var(--body);
  background: var(--bg);
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 400;
  line-height: 2.3;
  letter-spacing: .05em;
}
h1, p { margin: 0; }
a, a:link, a:visited, a:hover, a:active, a:focus { color: var(--ink); text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* ── 固定ヘッダー ───────────────────────────────────────────
   🚨 ヘッダー（.nav / .logo / .nav-burger / メガメニュー / ドロワー）の正本は
      /header-nav/header.{html,css,js}。本番 488 ページと同じ 1 本を読む。
      ここには «ページ側の見え方» の上書きだけを書く。部品を書かない。 */

/* hero の写真の上では、ヘッダーの地色を敷かない（スクロールで初めて出す）。
   header.css の body:not(.is-home) .nav が既定で地色を敷くので、それを外す。 */
body:not(.is-home) .nav:not(.scrolled):not(.mega-open) {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* SP のヘッダーに緑の «LINE相談» は出さない（Ry 指示の «引き算»／«同じ役目は 1 つ»）。
   この一連のページは下に固定の LINE ボタン（.cta-fixed）を常時出しているので、
   ヘッダーにもう 1 つ置くと、1 画面に同じボタンが 3 つ見える。
   🚨 導線は減らしていない: 固定ボタン・hero 下のボタン・ドロワー下部の «LINEで相談» は残る。
   ハンバーガーは消さない（.nav-sp 自体は display のまま）。 */
.nav-sp .cta-line.sp { display: none; }

/* ── 1. hero ───────────────────────────────────────────── */
.hero {
  position: relative;
  display: flex;
  align-items: flex-start;
  /* 🚨 SP 前提。画面いっぱい（100svh）だと最初の画面に «写真と見出し» しか入らない。
     半分強にして、次のブロックの頭が最初から見えるようにする（Ry 指示 2026-10-18） */
  min-height: 56svh;
  padding: 0 var(--pad);
  overflow: hidden;
}
.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;   /* 左上に文字の居場所を空ける */
}
/* 下端は地色へ落として、次のブロックへ継ぐ（線も段差も出さない） */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34%;
  background: linear-gradient(to bottom, rgba(248,248,248,0), rgba(248,248,248,.72) 62%, var(--bg));
  pointer-events: none;
}
/* 面は敷かない。写真はそのまま見せ、文字のまわりにだけ白をにじませる。
   文字の塊の「中心」が画面の高さの 1/4 に来る位置に置く */
.hero-copy {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  top: 38%;                   /* hero の高さに対する割合。高さを変えても崩れない */
  transform: translateY(-50%);
  isolation: isolate;
  text-shadow:
    0 0 10px rgba(248,248,248,.95),
    0 0 24px rgba(248,248,248,.9),
    0 0 48px rgba(248,248,248,.82),
    0 0 84px rgba(248,248,248,.74),
    0 0 130px rgba(248,248,248,.66),
    0 0 190px rgba(248,248,248,.56),
    0 0 260px rgba(248,248,248,.46);
}
/* 文字の後ろに、ぼかした白をもう 1 枚。輪郭が出ないので箱に見えない */
.hero-copy::before {
  content: "";
  position: absolute;
  inset: -40px -14% -34px -12%;
  z-index: -1;
  background: rgba(248,248,248,.62);
  filter: blur(38px);
  pointer-events: none;
}
.hero-eyebrow {
  color: var(--ink);
  font-family: var(--jp);
  font-size: clamp(15px, 4.2vw, 20px);
  font-weight: 500;
  letter-spacing: .1em;
  line-height: 1.9;
}
.hero h1 {
  margin-top: calc(var(--gap-sp) / 6);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(30px, 9vw, 44px);
  line-height: 1.5;
  letter-spacing: .1em;
}

/* 見出しの下に 1 行（白のにじみは .hero-copy から継いでいる）
   🚨 書体は «目的» で選ぶ（Ry 指示 2026-10-18）。ここは «理解してほしい説明» なのでゴシック。
   明朝は上品に映るが視認性が落ちる。読ませる文には使わない。 */
.hero-note {
  margin-top: calc(var(--gap-sp) / 5);
  color: var(--ink);
  font-family: var(--jp);
  font-size: clamp(15px, 4vw, 19px);
  letter-spacing: .12em;
  line-height: 1.9;
}

main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }  /* 固定 CTA のぶん */

/* hero の下部。固定 CTA に重ならない位置へ、中央寄せで 1 行 */
.hero-foot {
  position: absolute;
  z-index: 1;                 /* hero 下部のグラデーションより前面に出す */
  left: var(--pad);
  right: var(--pad);
  bottom: calc(18px + env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(18px, 5vw, 22px);
  letter-spacing: .12em;
  line-height: 1.9;
  /* 白いにじみは薄く 1 枚だけ。厚くすると細い明朝が白に埋もれる */
  text-shadow: 0 0 10px rgba(248,248,248,.9), 0 0 30px rgba(248,248,248,.7);
}
/* ── ブロック共通 ─────────────────────────────────────── */
/* 帯（地の色を持つ全幅の段）。🚨 隣り合う帯は同じ色にしない */
.band { padding-block: var(--block-sp); }
/* ページ最後の帯（最後の CTA）は、すぐ下がフッターなので下の余白を半分に（Ry 指示 2026-10-25「CTA と footer の間に謎の余白」） */
main > .band:last-child { padding-bottom: clamp(32px, 4vw, 48px); } /* 半分（84px）でもフッター上の 81px と重なり 165px 空いていた（Ry 2026-10-30「ctaとフッターの間に無駄な余白」） */
.band-soft { background: var(--bg-soft); }
.block {
  width: min(var(--read), calc(100% - var(--pad) * 2));
  margin-inline: auto;
}
/* ブロックのラベル。works ブロック（renovy-carousel.css）と同じ見え方に揃える */
.eyebrow {
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 11px;
  letter-spacing: .22em;
  line-height: 1.8;
}
/* 英字だけのラベルは部品と同じくイタリック（和文はイタリックにしない） */
.eyebrow--en { font-family: var(--label); font-style: italic; }
/* 和文のラベルだけは元の大きさのまま（イタリックにしない） */
/* 🚨 和文のラベルはゴシック（Ry 指示 2026-10-18）。
   英字（--en）は «デザイン表現» なので明朝のイタリックのまま。 */
.eyebrow--jp { font-family: var(--jp); color: var(--ink-soft); font-size: 17px; letter-spacing: .14em; }
/* 和文ラベルは字が大きいぶん、見出しとの間を広く取る */
.eyebrow--jp + h2 { margin-top: calc(var(--gap-sp) / 2); }
/* ブロックの見出し。works ブロックと同じ（明朝 400・字間 .08em） */
h2 {
  margin: 12px 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 29px);
  line-height: 1.7;
  letter-spacing: .08em;
  white-space: nowrap;                   /* 語の途中で折らない */
}
.section-copy { margin-top: calc(var(--gap-sp) / 2); }
/* 改行を指定して 3 行で見せる。読みやすさを優先して本文より一段大きく */
.lead2 { font-size: 17px; letter-spacing: .04em; line-height: 2.2; }
/* 1 段あけた添え書き。書体はゴシック、色だけ一段落とす */
.section-copy.spaced {
  margin-top: var(--gap-sp);
  color: var(--ink-soft);
  font-family: var(--jp);
  letter-spacing: .05em;
  text-align: center;
}

/* 中央寄せのブロック */
.center { text-align: center; }

/* ── 3. 選べる施工法 ──────────────────────────────────── */
.methods {
  display: flex;
  flex-direction: column;
  gap: var(--gap-sp);
  margin-top: var(--gap-sp);
}
.method-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.method-no {
  margin-right: .6em;
  color: var(--ink-faint);
  font-size: .8em;        /* 名前より一段小さく、同じ行に並べる */
  letter-spacing: .16em;
}
.method-name {
  margin: calc(var(--gap-sp) / 2) 0 0;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 500;
  font-size: 21px;
  letter-spacing: .06em;
  line-height: 1.8;
}
/* 説明文は全ブロック共通（.lead2）。ここは上の余白だけ上書きする */
.method-copy { margin-top: calc(var(--gap-sp) / 4); }

/* ── 4. メニュー ──────────────────────────────────────── */
/* 部屋モデル（背景が透過の PNG。地の色の上にそのまま置く）
   写真の上下に余白の帯を持たせ、ラベルはその帯に置く（写真に重ねない） */
.room {
  position: relative;
  width: calc(100% + var(--pad) * 2);   /* 画面いっぱいまで広げる */
  margin: calc(var(--gap-sp) / 2) calc(var(--pad) * -1) 0;
  aspect-ratio: 1774 / 1187;            /* 写真 887 ＋ 上下の帯 150 ずつ */
}
.room-model {
  position: absolute;
  left: 0;
  top: 12.64%;                          /* 150 / 1187 */
  width: 100%;
  height: auto;
}
/* 引き出し線。直線だけ。点は小さな丸 */
.room-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.room-lines path { fill: none; stroke: var(--ink-soft); stroke-width: 1; vector-effect: non-scaling-stroke; }
.room-lines circle { fill: var(--ink); }
.room-label {
  position: absolute;
  margin: 0;
  color: var(--ink);
  font-family: var(--jp);
  font-size: 13px;
  letter-spacing: .1em;
  line-height: 1.6;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}
.room-label--wall    { left: 24.2%; top: 6.5%; }
.room-label--curtain { left: 85.2%; top: 6.5%; }
.room-label--floor   { left: 55.2%; top: 91.8%; }
.room-label--base    { left: 81.7%; top: 91.8%; }
.room-label--door    { left: 10.4%; top: 91.8%; }

/* ── 5. コーディネーター ──────────────────────────────── */
/* 長い見出しだけ、改行を許す（既定は 1 行） */
.h2-wrap { white-space: normal; }
/* 高さを抑えた横長の写真 */
.wide-photo {
  display: block;
  width: 100%;
  height: auto;
  margin-top: var(--gap-sp);
  aspect-ratio: 21 / 9;
  object-fit: cover;
  object-position: 62% 40%;
}

/* ── 6. ご利用の流れ ──────────────────────────────────── */
.steps {
  margin: var(--gap-sp) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: calc(var(--gap-sp) / 3);
  margin-top: calc(var(--gap-sp) * 1.3);
}
.step:first-child { margin-top: 0; }
/* 段と段のあいだに下向き矢印（明朝）。線や枠は作らない */
.step + .step::before {
  content: "↓";
  position: absolute;
  left: 50%;
  top: calc(var(--gap-sp) / -1.6);
  transform: translate(-50%, -50%);
  color: var(--ink-faint);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1;
}
/* 項目名の下の説明 */
.step-copy {
  display: block;
  margin-top: calc(var(--gap-sp) / 8);
  color: var(--ink-soft);   /* 項目名より一段薄く */
  font-size: 14px;
  letter-spacing: .02em;
  line-height: 1.9;
}
/* 番号は項目名の左に置く（1. LINE追加 の形） */
.step-no {
  margin-right: .5em;
  color: var(--ink-faint);
  font-family: var(--serif);
}
/* 四角く切り取る（枠線もグラデーションも付けない） */
.step-photo {
  flex: none;
  width: 92px;
  height: 92px;
  object-fit: cover;
}
.step-body { display: block; }
.step-name {
  display: block;
  color: var(--ink);
  font-size: 17px;
  letter-spacing: .06em;
  line-height: 1.8;
}
.notes {
  margin: var(--gap-sp) 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
  color: var(--ink-soft);
  font-size: 14px;
  line-height: 2.1;
}
.notes li { text-indent: -1em; padding-left: 1em; }
.notes li::before { content: "・"; }
.notes li + li { margin-top: calc(var(--gap-sp) / 6); }

/* ボタンはページ内で 1 種類（.btn-outline）だけ。下の固定 CTA と同じ形 */
.more { margin-top: calc(var(--gap-sp) / 1.6); }
.more-wide { margin-top: calc(var(--gap-sp) * 1.4); }   /* 図や表の下は広めに */

/* ── 7. 料金 ──────────────────────────────────────────── */
/* 表は罫線 1 本だけ。囲まない・面を敷かない */
.rate {
  /* 中身ぶんの幅にして中央に置く（左に寄らないように） */
  /* 表の形（項目名は左）はそのままに、表そのものを中央へ置く */
  width: auto;
  max-width: 100%;
  margin-top: var(--gap-sp);
  margin-inline: auto;
  border-collapse: collapse;
  text-align: left;
}
.rate th, .rate td {
  padding: calc(var(--gap-sp) / 2.4) 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  vertical-align: middle;   /* 項目名と金額の高さを揃える */
}
/* 項目名は中身ぶんだけの幅。カッコ書きも同じ行に収める（折り返さない） */
/* 注記の行が一番広いので、金額の行はその中で中央に見えるよう左に余白を入れる */
.rate th { width: 1%; color: var(--ink); padding-left: 36px; padding-right: 2.2em; white-space: nowrap; text-align: left; }
.rate th .rate-pct { display: block; margin-left: 0; }
.rate td.rate-note--block { text-align: right; padding-top: .6em; }
.rate td { color: var(--ink-soft); }
/* 金額は折り返さない・右端で揃える */
/* 金額。「円」は数字より少し小さく。内訳はカッコの中にさらに小さく */
.rate td.rate-amount { color: var(--ink); text-align: left; font-size: 16px; }
.yen { font-size: .78em; margin-left: .15em; }
.rate-amount { white-space: nowrap; }
.rate-note { display: inline; margin-left: .5em; color: var(--ink-soft); font-size: 12px; white-space: normal; }
.rate td.rate-note--block { display: table-cell; margin: 0; padding-top: .4em; font-size: 10.5px; line-height: 1.9; }
/* 内訳の行は、上の金額の行と続けて読ませる（あいだに線を引かない） */
.rate-noline th, .rate-noline td { border-bottom: 0; padding-bottom: 0; }
/* 合計。右端に「税抜」を添える */
.rate-total th, .rate-total td { border-bottom: 0; padding-top: calc(var(--gap-sp) / 3); }
.rate-total .rate-amount { font-size: 19px; }
.rate-pct { margin-left: .1em; color: var(--ink-soft); font-size: 12px; }
.rate-tax { margin-left: .4em; color: var(--ink-soft); font-size: 12px; }

/* 料金の部屋別概算 */
.estimate-lead { margin-top: 12px; color: var(--ink-soft); font-size: 14px; }
.r-car.estimate-carousel { margin-top: 24px; --car-w: min(78vw, 440px); --car-ratio: .5625; } /* 事例と同じ «画面いっぱい・左右は薄く»（Ry 2026-10-29）。カードは料金向けに細め */
.estimate-carousel .r-car__track { padding-block: 12px; }
/* 左右のボタンは真ん中のカードのすぐ両側・カードの高さの中央（Ry 2026-10-29）。
   上下は走る面の余白 12px と、下の «何枚目か»（余白＋1px）を除いた範囲 ＝ カードの高さ */
.r-car.estimate-carousel { --est-nav-w: clamp(40px, 6vw, 56px); }
.r-car.estimate-carousel .r-car__nav { top: 12px; bottom: calc(13px + clamp(24px, 4vw, 40px)); height: auto; width: var(--est-nav-w); }
.r-car.estimate-carousel .r-car__nav--prev { left: calc(50% - var(--car-w) / 2 - var(--est-nav-w)); }
.r-car.estimate-carousel .r-car__nav--next { right: calc(50% - var(--car-w) / 2 - var(--est-nav-w)); }
.estimate-carousel .r-car__item { display: flex; flex-direction: column; padding: 0; background: var(--bg-soft); overflow: hidden; }
.band-soft .estimate-carousel .r-car__item { background: var(--bg); } /* 薄い背景の節（賃貸・ペット）ではカードを白に（Ry 2026-10-29） */
/* 写真の枠はどのカードも同じ高さ（写真の無いカードだけ低くなり、下に余白が溜まっていた。Ry 2026-10-29） */
.estimate-photo { position: relative; overflow: hidden; flex: none; width: 100%; margin: 0; aspect-ratio: 16 / 9; background: var(--line, #e6e3de); }
.estimate-carousel .estimate-photo img { position: absolute; inset: 0; display: block; aspect-ratio: auto; width: 100%; height: 100%; object-fit: cover; } /* 事例の 4:3 を打ち消す */
.estimate-body { flex: 1; display: flex; flex-direction: column; padding: 20px 24px 22px; }
.estimate-room-title { margin: 0; color: var(--ink); font: 400 clamp(18px, 1.8vw, 21px)/1.6 var(--serif); letter-spacing: .04em; }
.estimate-total-label { margin: 0; color: var(--ink-soft); font: 400 12px/1.7 var(--jp); }
.estimate-total { margin: 6px 0 0; color: var(--ink); font: 400 clamp(22px, 2.3vw, 25px)/1.35 var(--jp); letter-spacing: 0; white-space: nowrap; } /* 少し小さく（Ry 2026-10-29） */
.estimate-total .yen { margin-left: .12em; font-size: .78em; }
/* 真ん中のカードだけ金額を見せる（Ry 2026-10-29「真ん中以外は金額が表示されていない状態に」） */
.estimate-carousel .estimate-total { transition: opacity .3s ease; }
.estimate-carousel .r-car__item:not(.is-on) .estimate-total { opacity: 0; }
.estimate-total .estimate-tax { margin-left: .3em; color: var(--ink-soft); font-size: 12px; letter-spacing: 0; }
.estimate-included-block { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line, #e6e3de); text-align: left; }
.estimate-included-title, .included-title { margin: 0 0 2px; color: var(--ink-soft); font: 400 11px/1.8 var(--jp); letter-spacing: .04em; }
.estimate-included, .included-items { margin: 0; color: var(--ink); font: 400 13px/1.8 var(--jp); }
.estimate-note { margin: 18px 0 0; color: var(--ink-soft); font-size: 12px; line-height: 1.8; }
.estimate-button, a.estimate-button:link, a.estimate-button:visited, a.estimate-button:hover, a.estimate-button:active, a.estimate-button:focus { display: inline-flex; min-height: 56px; align-items: center; justify-content: center; padding: 14px 28px; color: var(--bg); background: var(--ink); font: 400 15px/1.6 var(--jp); text-decoration: none; }
.estimate-cta { margin-top: 24px; }
.estimate-multi, a.estimate-multi:link, a.estimate-multi:visited { color: var(--ink-soft); text-decoration: underline; text-underline-offset: .2em; }
.estimate-multi:hover, a.estimate-multi:hover { color: var(--ink); }
@media (max-width: 600px) {
  .estimate-body { padding: 16px 18px 18px; }
}

.price-closing { margin: var(--gap-sp) 0 calc(var(--gap-sp) / 1.6); }   /* 上下にひと息 */
/* 金額の例は «判断材料» なのでゴシック（Ry 指示 2026-10-18） */
.price-case {
  margin-top: var(--gap-sp);
  color: var(--ink);
  font-family: var(--jp);
  font-size: 17px;
  letter-spacing: .08em;
}

/* ── ボタン（外形黒）／ 固定 CTA ────────────────────────
   🚨 ボタンはこの 1 つだけ。2 つ目の見た目を作らない */
.cta-fixed {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1000;
  padding: 14px var(--pad) calc(14px + env(safe-area-inset-bottom));
  /* 🚨 帯は敷かない（Ry 指示 2026-10-18）。ボタンだけを置く */
  background: transparent;
  pointer-events: none;                 /* 帯の余白でページのタップを塞がない */
}
.cta-fixed > a { pointer-events: auto; }

a.btn-outline, a.btn-outline:link, a.btn-outline:visited, a.btn-outline:hover, a.btn-outline:active, a.btn-outline:focus {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  padding: 10px 20px;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  font-family: var(--jp);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.6;
  text-align: center;
}

/* カルーセルのラベルは小文字で（Ry 指示 2026-10-17。ロゴが小文字なので） */
.r-car__head .label { text-transform: none; }
/* 見出しはカルーセルの外に置く。中に置くと左右の矢印が «見出し＋写真» の中央に来て、
   写真の上寄り（約 1/4）に見えるため（Ry 指示 2026-10-25「写真の 1/2 の位置に」） */
.band > .r-car__head { text-align: center; margin-bottom: clamp(24px, 4vw, 40px); }
/* 写真はカルーセルの上端から 8px 下に置かれるので、矢印の帯も同じだけ下げて写真の中央に合わせる */
.band > .r-car .r-car__nav { top: 8px; }

/* works の 1 枚ごとの添え書き */
.r-car__cap p.cap-kind { margin: 0 0 2px; color: var(--ink-faint); font-size: 11px; letter-spacing: .1em; }
.r-car__cap p.cap-who { margin: 6px 0 0; color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; text-align: right; }

/* 事例の写真は 4:3（横長）で固定して切り取る。縦長の写真を入れても形が崩れない */
.r-car { --car-ratio: .75; }
.r-car__item figure img { aspect-ratio: 4 / 3; width: 100%; height: 100%; object-fit: cover; }

/* ── 9. FAQ（本番 renovy.jp の faq ブロックから。値は本番のまま） ── */
.faq-lead { margin-top: 12px; color: var(--ink-soft); font-size: 12px; letter-spacing: .06em; }
.faq-list { margin-top: var(--gap-sp); text-align: left; border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none; cursor: pointer; padding: 15px 0;
  display: flex; align-items: flex-start; gap: 16px;
  font-size: 13px; letter-spacing: .04em; color: var(--ink);
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary .q { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--ink-soft); flex-shrink: 0; line-height: 1.5; }
.faq-list summary .t { flex: 1; line-height: 1.7; }
.faq-list summary .icn { flex-shrink: 0; font-size: 14px; color: var(--ink-faint); transition: transform .3s; line-height: 1.5; }
.faq-list details[open] summary .icn { transform: rotate(45deg); color: var(--ink); }
.faq-answer { padding: 0 0 18px 29px; font-size: 12px; line-height: 1.95; color: var(--ink-soft); letter-spacing: .04em; }
.faq-answer .a { font-family: var(--serif); font-style: italic; color: var(--ink-soft); margin-right: 8px; font-size: 13px; }

/* ── 10. 通常のリノベとの違い（罫線 1 本だけ。囲まない） ── */
.compare {
  width: 100%;
  margin-top: var(--gap-sp);
  border-collapse: collapse;
  text-align: center;
}
.compare th, .compare td {
  padding: calc(var(--gap-sp) / 4) 6px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.8;
}
.compare thead th { color: var(--ink-soft); font-size: 12px; letter-spacing: .08em; }
.compare tbody th { color: var(--ink); text-align: left; white-space: nowrap; }
.compare td { color: var(--ink-soft); }
.compare .is-ours { color: var(--ink); }          /* 自分の側だけ濃く。色は足さない */
/* フルリノベは少し小さく、リノビーは少し大きく・少し太く（Ry 指示 2026-10-25） */
.compare td:not(.is-ours), .compare thead th:not(.is-ours) { font-size: 13px; }
.compare td.is-ours { font-size: 15.5px; font-weight: 500; }
.compare thead th.is-ours { font-size: 13.5px; font-weight: 500; }
.compare-val { white-space: nowrap; }          /* 金額・期間は途中で折らない。折るなら «〜» の後ろだけ */
.compare thead td { border-bottom: 0; }
.compare-note { margin-top: calc(var(--gap-sp) / 3); color: var(--ink-soft); font-size: 11.5px; line-height: 1.9; }
.compare-note--base { margin-top: 12px; text-align: right; color: var(--ink-faint); }  /* 表の外・右下の基準の注記（Ry 指示 2026-10-25） */

/* 事例の金額 */
.r-car__cap p.cap-price { margin: 10px 0 0; color: var(--ink-soft); font-size: 13px; letter-spacing: .04em; text-align: right; }
.cap-tax { margin-left: .3em; color: var(--ink-soft); font-size: 11px; }


/* hero 下部の、賃貸の方への入口（主役にしない。文字リンク 1 本） */
a.hero-sub-link, a.hero-sub-link:link, a.hero-sub-link:visited, a.hero-sub-link:hover, a.hero-sub-link:active, a.hero-sub-link:focus {
  display: inline-block;
  margin-top: 10px;
  color: var(--ink);
  font-family: var(--jp);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: .06em;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* 施工法ごとの耐久の目安 */
.method-life { margin-top: calc(var(--gap-sp) / 4); color: var(--ink-soft); font-size: 13px; letter-spacing: .06em; }

/* 合計の下に税込を添える */
.rate-note--tax { display: block; margin: 4px 0 0; color: var(--ink-soft); font-size: 12px; }

/* 施工法ブロックの注記（右下に小さく） */
.method-note { margin-top: calc(var(--gap-sp) / 2); color: var(--ink-faint); font-size: 11.5px; line-height: 1.9; text-align: right; }

/* 参考金額の見出しの下の 1 行 */
.price-case-sub { margin-top: 8px; color: var(--ink-soft); font-size: 13px; letter-spacing: .04em; }
.price-note2 { margin-top: calc(var(--gap-sp) / 3); color: var(--ink-faint); font-size: 11.5px; text-align: right; }

/* ── ドロワー（ハンバーガーの中身）─────────────────────────
   🚨 正本は /header-nav/（header.html の markup ＋ header.css の .drawer）。
      ここに 2 つ目を書かない。

   🚨 下の 1 行は消さない。hidden 属性のドロワーを使う実装が将来また来たとき、
      display:flex が hidden を打ち消して «閉じているドロワーが画面全体を覆い、
      タップもスワイプも全部奪う» 事故になる（2026-10-18 に実際に起きた）。 */
.drawer[hidden] { display: none; }

/* hero 直後のボタン（Ry 指示 2026-10-18）
   押す気で来た人をここで受ける。帯を作らず、地色の上に置くだけ。 */
.hero-cta {
  width: min(var(--read), calc(100% - var(--pad) * 2));
  margin: calc(var(--gap-sp) * 0.9) auto 0;
}

/* PC では下の固定ボタンを出さない（Ry 指示 2026-10-18）
   指が届く位置に常駐させる意味があるのは手に持つ画面だけ。
   🚨 幅ではなく «入力の種類» で分ける。タブレットの縦（幅は広いが指で触る）を巻き込まないため。 */
@media (hover: hover) and (pointer: fine) {
  .cta-fixed { display: none; }
}

/* hero 直後のボタンの見出し（Ry 指示 2026-10-19）
   🚨 «何のための相談か» を 1 行で受ける。説明（.hero-lead）より先に目へ入る大きさにする。 */
.hero-cta-title {
  width: min(var(--read), calc(100% - var(--pad) * 2));
  margin: calc(var(--gap-sp) * 1.1) auto 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(20px, 4.4vw, 27px);
  font-weight: 400;
  letter-spacing: .08em;
  line-height: 1.7;
  text-align: center;
}
.hero-cta-title + .hero-lead { margin-top: calc(var(--gap-sp) / 2.4); }

/* hero 直後のボタンに添える説明（Ry 指示 2026-10-18） */
.hero-lead {
  width: min(var(--read), calc(100% - var(--pad) * 2));
  margin: calc(var(--gap-sp) * 0.9) auto 0;
  color: var(--ink-soft);
  font-family: var(--jp);
  font-size: 15px;
  letter-spacing: .05em;
  line-height: 2.1;
  text-align: center;
}
.hero-lead + .hero-cta { margin-top: calc(var(--gap-sp) / 2); }


/* 固定ボタンに隠れないよう、本文の末尾に余白を置く
   （実測 2026-10-18・2 名が «下の行が隠れていないか» を気にした） */
main { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
@media (hover: hover) and (pointer: fine) { main { padding-bottom: 0; } }

/* 🚨 固定ボタンの塗りは «黒»（実測 2026-10-18・ペルソナ 11 名中 10 名が黒を選択）。
   白は «上の表の罫線と同じ見え方で、押す場所だと判別できない» が 10 名の一致した理由。
   ただし 1 名が «そこだけ広告みたいで世界観から浮く» と指摘したため、
   真っ黒ではなく本文と同じ --ink を使う。
   🚨 ここは **ファイルの末尾に置く**。上に書くと a.btn-outline の既定（透明）に負ける。 */
.cta-fixed a.btn-outline,
.cta-fixed a.btn-outline:link,
.cta-fixed a.btn-outline:visited,
.cta-fixed a.btn-outline:hover,
.cta-fixed a.btn-outline:active,
.cta-fixed a.btn-outline:focus {
  background: var(--ink);
  border-color: var(--ink);
}
.cta-fixed a.btn-outline span { color: var(--bg); }

/* ボタンの幅は 90%（Ry 指示 2026-10-18）。端まで伸ばさず、左右に余白を残す。
   🚨 ファイルの末尾に置く（上に書くと a.btn-outline の既定に負ける） */
a.btn-outline,
a.btn-outline:link,
a.btn-outline:visited {
  width: 90%;
  margin-inline: auto;
}

/* ── PC の hero: 白を «文字の後ろだけ» に絞る（Ry 指示 2026-10-18）──────
   SP は画面が狭いので ::before の ±12〜14% と 260px の発光が «にじみ» に見える。
   PC は同じ値が横幅いっぱいに伸びて «白い靄» になる。
   🚨 幅で判定しない。PC の判定は hover + 細かいポインタで行う（既存の作法に揃える）。 */
@media (hover: hover) and (pointer: fine) {
  /* 🚨 PC は文字が大きくなるぶん hero も高くする。
     56svh のままだと、見出しがヘッダーの裏に隠れ、下に大きな空白が残る */
  .hero { min-height: 76svh; }
  .hero-copy {
    /* 文字の塊そのものの幅に収める。右半分の写真を靄で潰さない。
       🚨 狭すぎると見出しが折り返す（「renovy ペット」の «ト» が落ちた） */
    right: auto;
    max-width: min(56ch, 52%);
    /* 固定ヘッダーのぶんだけ下げてから、中央に置く */
    top: calc(50% + 28px);
    /* 左端べったりだと «隅に置かれた» に見える。中央寄りへ寄せる（Ry 指示 2026-10-18） */
    left: clamp(var(--pad), 16vw, 260px);
    /* 発光も文字の輪郭まわりだけに留める（遠くへ飛ばさない） */
    text-shadow:
      0 0 8px rgba(248, 248, 248, .95),
      0 0 18px rgba(248, 248, 248, .85),
      0 0 34px rgba(248, 248, 248, .62);
  }
  .hero-copy::before {
    /* 文字の塊に沿わせる。％指定をやめて、固定の余白でまわりを少しだけ覆う */
    inset: -24px -32px -20px -28px;
    background: rgba(248, 248, 248, .55);
    filter: blur(26px);
  }

  /* PC は画面が広いぶん、SP と同じ大きさだと小さく見える（Ry 指示 2026-10-18） */
  .hero-eyebrow { font-size: 22px; }
  .hero h1      { font-size: clamp(44px, 4.4vw, 62px); white-space: nowrap; }
  .hero-note    { font-size: 21px; }
}

/* ── PC: ボタンの幅（Ry 指示 2026-10-18）────────────────────
   SP は 90%（指で押すので広い方が良い）。PC はポインタで狙えるので、
   同じ 90% だと «間延びした帯» になる。文字に沿う幅まで絞る。 */
@media (hover: hover) and (pointer: fine) {
  a.btn-outline,
  a.btn-outline:link,
  a.btn-outline:visited,
  a.btn-outline:hover,
  a.btn-outline:active,
  a.btn-outline:focus {
    width: auto;
    min-width: 260px;
    max-width: 340px;
    padding-inline: 40px;
  }
}

/* PC: 選べる施工法を横並びに（Ry 指示 2026-10-18）。
   並べて «比べる» ものなので、PC では横に置いた方が読みやすい。
   🚨 PC の判定は hover + 細かいポインタ。幅で判定しない（既存の作法に揃える） */
@media (hover: hover) and (pointer: fine) {
  .methods {
    flex-direction: row;
    align-items: start;
    gap: calc(var(--gap-sp) * 0.9);
  }
  .methods > .method { flex: 1 1 0; min-width: 0; }
}

/* ── メニューの項目（絵が無くても成立する形。2026-10-23）───────────── */
/* 🚨 部屋のモデル図が出来たら、上のコメントの figure を戻し、ここは消す */
.menu-items{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:0; margin:var(--gap-sp) 0 0; padding:0; list-style:none;
}
.menu-items li{ display:flex; align-items:center; }
.menu-items li + li::before{
  content:""; width:1px; height:14px; margin:0 20px;
  background:var(--ink-faint); opacity:.4;
}
.menu-items a,.menu-items span{
  color:var(--ink); font-family:var(--serif); font-weight:500;
  font-size:19px; letter-spacing:.08em; text-decoration:none; transition:.2s;
}
.menu-items a:hover{ opacity:.55; }
.menu-items span{ color:var(--ink-soft); }   /* まだ単体のページが無いもの */
@media(max-width:600px){
  .menu-items a,.menu-items span{ font-size:16px; }
  .menu-items li + li::before{ margin:0 12px; }
}