/* 既存トップの部品を使い、LP の文字と節内の余白だけを調整する。 */
body { font-size:16px; line-height:2; }
main { padding-bottom:0; }
strong { font-family:var(--jp); font-size:18px; font-weight:500; line-height:2; }
h2 { font-size:24px; line-height:1.9; white-space:normal; }
h2 strong { font-size:18px; line-height:2; }
.sp-br { display:none; }
/* ロゴのサイズと配置は共通ヘッダーと同じ。移動先やメニューは持たない。 */
.lp-header { position:absolute; top:0; left:0; right:0; z-index:10; padding:calc(20px + env(safe-area-inset-top)) var(--pad) 20px; }
.logo { display:inline-flex; align-items:center; line-height:1; }
.logo img { display:block; height:48px; width:auto; filter:invert(1) brightness(.15); }
/* 写真と文字の重ね方は手本の hero の指定を継承する。 */
.hero-eyebrow { font-size:16px; line-height:2; white-space:nowrap; }   /* «お部屋の“カタチ”そのまま» の «ま» が 1 文字だけ落ちていた（Ry 2026-11-01）。言葉の途中で折り返さない */
.hero-note { font-size:16px; line-height:2; letter-spacing:.04em; }
.hero strong { font-size:17px; }
/* 節の外の余白は手本のまま。節内の間隔は 16〜28px に収める。 */
.section-copy, .wide-photo, .compare, .notes, .steps, .more, .more-wide { margin-top:24px; }
.works-block, .menu-block { margin-top:48px; } /* ブロックが変わる所は余白（Ry 2026-10-31） */
.works-block .r-car { margin-top:0; }
.room { margin-top:24px; }
.r-car .r-car__dots { margin-top:24px; }
.compare th, .compare td { font-size:16px; line-height:2; }
.compare thead th, .compare thead th.is-ours { font-size:16px; }
.compare td:not(.is-ours), .compare thead th:not(.is-ours) { font-size:16px; }
.compare td.is-ours { font-size:16px; font-weight:400; }
.compare tr > :first-child { width:3em; }
.compare td strong { font-size:17px; }
.compare-note { margin-top:16px; font-size:13px; line-height:2; text-align:left; }
.estimate-body > p:not(.estimate-total) { margin-top:16px; font-size:16px; line-height:2; }
.estimate-total { margin-top:16px; }
.estimate-total strong { font-size:18px; line-height:2; }
.price-estimate > .block { width:100%; }
.price-estimate > .block > p + p { margin-top:24px; }
.period-number { font-size:48px; line-height:1.2; }
.step { margin-top:28px; gap:16px; }
.step + .step::before { top:-14px; font-size:13px; }
.step-copy { font-size:16px; line-height:2; }
.step-name { font-size:17px; line-height:2; }
.notes { font-size:13px; line-height:2; }
.coord-points li + li { margin-top:16px; }
/* 相談ブロックは現行 LP の形を保ち、内部の余白だけを詰める。 */
.contact-cta { width:100%; margin:52px 0 0; padding:28px max(var(--pad),calc((100vw - var(--read))/2)); background:var(--bg-soft); text-align:center; box-sizing:border-box; }
.contact-cta h2 { margin:0; color:var(--ink); font:400 24px/1.9 var(--serif); letter-spacing:.08em; }
.contact-cta__copy { margin:16px 0 0; color:var(--body); font-size:16px; line-height:2; }
.contact-cta__points { display:flex; flex-direction:column; gap:0; width:min(100%,320px); margin:24px auto 0; padding:0; list-style:none; text-align:left; }
.contact-cta__points li { display:flex; align-items:baseline; gap:14px; min-height:48px; padding:8px 4px; border-top:1px solid var(--line); color:var(--ink); font-size:16px; line-height:2; }
.contact-cta__points li:last-child { border-bottom:1px solid var(--line); }
.contact-cta__num { width:2em; flex:none; color:var(--ink-faint); font:italic 16px/2 var(--label); letter-spacing:.1em; }
.contact-cta__action { margin:24px 0 0; }
.contact-cta__button, a.contact-cta__button, a.contact-cta__button:link, a.contact-cta__button:visited, a.contact-cta__button:hover, a.contact-cta__button:active, a.contact-cta__button:focus { display:inline-flex; width:90%; max-width:360px; min-height:52px; align-items:center; justify-content:center; padding:12px 20px; color:var(--bg); background:var(--ink); font-size:16px; line-height:2; text-decoration:none; }
.contact-cta__small { margin:16px 0 0; color:var(--ink-soft); font-size:13px; line-height:2; }
.lp-footer { padding:24px var(--pad); text-align:center; font-size:13px; line-height:2; }
@media(max-width:767px) {
  #hero-title { font-size:36px; }
  .logo img { height:36px; }
  .sp-br { display:block; }
  .contact-cta { margin-top:var(--gap-sp); }
  .compare { table-layout:fixed; }
  .compare th, .compare td { padding-inline:4px; letter-spacing:0; }
}

/* 本文と小さな添え書きの下限を揃える。 */
.r-car .r-car__cap .n { font-size:13px; }
a.btn-outline, a.btn-outline:link, a.btn-outline:visited, a.btn-outline:hover, a.btn-outline:active, a.btn-outline:focus { font-size:16px; line-height:2; }
.estimate-carousel + .block { margin-top:24px; }

/* ===== スマホ調整（Web デザイナー 2026-10-31）文・節の順は変えない ===== */
@media(max-width:767px) {
  /* 節と節の間: 168px×2 は空きすぎ。節の上下を 88px に詰める（相談ブロックは外側の余白を持たない）。 */
  .band { padding-block:88px; }
  .contact-cta { margin-top:0; padding-block:44px; }
  .contact-cta__copy { margin-top:12px; }
  .contact-cta__points { margin-top:20px; }
  .contact-cta__action { margin-top:24px; }
  a.contact-cta__button, a.contact-cta__button:link, a.contact-cta__button:visited { width:100%; max-width:none; min-height:56px; font-weight:500; }
  /* 節の中: 見出し → 本文の間を揃える */
  h2 + .section-copy, h2 + p { margin-top:20px; }
  /* 料金カード: 次のカードがのぞく量を増やし、金額を読ませる大きさに */
  .r-car.estimate-carousel { --car-w:72vw; margin-top:28px; }
  .estimate-carousel .r-car__track { gap:12px; padding-block:8px; }
  .estimate-body { padding:22px 20px 24px; }
  .estimate-room-title { font-size:20px; line-height:1.5; }
  .estimate-body > p:not(.estimate-total) { margin-top:4px; font-size:14px; line-height:1.8; color:var(--ink-soft); }
  .estimate-total { margin-top:12px; }
  .estimate-total strong { font-size:26px; line-height:1.3; font-weight:500; letter-spacing:.02em; white-space:nowrap; }
  .estimate-carousel .r-car__dots { margin-top:16px; }
  .estimate-carousel + .block { margin-top:28px; }
  /* 比べる表 */
  .compare th, .compare td { padding-inline:8px; padding-block:12px; }
  .compare td.is-ours strong, .compare td.is-ours { font-size:17px; font-weight:500; }
  .period-number { font-size:64px; line-height:1.1; }
}

/* 料金カードの注記は 1 行（Ry 2026-10-31）／«（税込）» は金額の横に小さく */
.price-note-1line{white-space:nowrap}
.price-tax{margin-left:.2em;font-size:12px;font-weight:400;color:var(--ink-soft)}

/* カードの金額の下に «何が込みか»（Ry 2026-10-31） */
.estimate-included{margin-top:6px;font-size:13px;color:var(--ink-soft);white-space:nowrap}

/* 2026-10-31 Ry: «料金の目安» の見出し／節の中でもブロックが変わる所は余白を入れる／流れは 1 行／コーディネーターの 3 つは番号付き */
.price-head{margin:48px 0 0;text-align:center;font:400 20px/1.6 var(--serif);color:var(--ink);letter-spacing:.08em}
.price-head + .estimate-carousel{margin-top:16px}
@media(max-width:767px){
  .band .block > .works-block,
  .band .block > .menu-block,
  .band .block > .estimate-carousel + .block,
  .band .block > table.compare + .section-copy{margin-top:48px}
  .band .block > img.wide-photo + .works-block{margin-top:48px}
  .step-sub{font-size:12px;letter-spacing:0}
  .step-name,.step-copy{white-space:nowrap}
  .coord-points{margin-top:28px}
}
/* 幅 320 の端末で流れの段が 25px はみ出していた（nowrap のため。2026-11-01）。折り返さないまま、狭い端末だけ一段小さく */
@media(max-width:359px){
  .step-name{font-size:15px}
  .step-copy{font-size:14px}
  .step-sub{font-size:11px}
}

/* 費用の表は «費用» の欄を外したので 2 列を半分ずつ（トップの表は左に項目名の列がある前提で、外すと «フルリノベ» が縦に潰れた。Ry 2026-10-31「デザインが壊れている」） */
table.compare.compare--2col{table-layout:fixed;width:100%}
table.compare.compare--2col th,table.compare.compare--2col td{width:50%;text-align:center;white-space:normal;writing-mode:horizontal-tb}
/* «料金の目安» は黒で少し太く（Ry 2026-10-31） */
.price-head{color:#1a1a1a;font-weight:500}

/* 事例カードの上の見出し（«料金の目安» と同じ形。Ry 2026-10-31） */
.works-head{margin-top:0;margin-bottom:16px}

/* 費用の表: フルリノベは少し小さく、リノビーの金額は 1 行（Ry 2026-10-31） */
table.compare--2col td:not(.is-ours) .compare-val{font-size:13px}
table.compare--2col .price-1line{white-space:nowrap;font-size:16px;letter-spacing:0}

/* メニューのイラストの下の一文（Ry 2026-10-31） */
.menu-after{margin-top:28px}

/* 一文は写真の下、事例一覧との間は余白（Ry 2026-10-31） */
.surface-lead{margin-top:28px}
.surface-lead + .works-block{margin-top:64px}

/* 一文はブロックの外にあるので中央寄せを自分で持つ（Ry 2026-10-31「中央寄せになっていない」） */
.surface-lead{text-align:center;padding-inline:var(--pad,20px)}

/* ===== Before/After（タップで切り替え）: 中古の LP v3 の部品をそのまま写した（Ry 2026-10-31） ===== */
.ba{position:relative;margin:0;cursor:pointer;aspect-ratio:4/5;overflow:hidden;-webkit-tap-highlight-color:transparent}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ba .ba-after{opacity:0;transition:opacity 2.2s ease}
.ba.is-after .ba-after{opacity:1}
.ba-tag{position:absolute;left:12px;top:12px;font-family:var(--label,var(--jp));font-size:11px;letter-spacing:.08em;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.35),0 0 24px rgba(0,0,0,.25)}
.ba-tag b{font-weight:400;transition:opacity .6s ease}
.ba-tag .ba-tag-a{position:absolute;left:0;top:0;opacity:0}
.ba.is-after .ba-tag-b{opacity:0}.ba.is-after .ba-tag-a{opacity:1}
@media (prefers-reduced-motion:reduce){.ba .ba-after,.ba-tag b{transition:none}}
/* 2026-10-25 Ry: 縦長に・写真の下を詰める・タップの合図 */
.ba{aspect-ratio:2/3}
.r-car__cap.ba-cap{margin-top:12px}
.ba-cap .cap-kind{margin:0 0 2px}
.ba-cap h3{margin:0}
.ba-hint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none;transition:opacity .4s ease}
.ba.touched .ba-hint{opacity:0}
.ba-hint-icon{position:relative;z-index:1;width:30px;height:30px;padding:9px;box-sizing:content-box;border-radius:50%;background:rgba(28,28,28,.42);fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;animation:ba-tap 1.8s ease-in-out infinite}
.ba-hint-ring{position:absolute;top:0;left:50%;width:48px;height:48px;margin-left:-24px;border-radius:50%;border:1.5px solid rgba(255,255,255,.85);animation:ba-ring 1.8s ease-out infinite}
.ba-hint-text{font-family:var(--jp);font-size:11px;letter-spacing:.08em;color:#fff;text-shadow:0 0 10px rgba(0,0,0,.45),0 0 24px rgba(0,0,0,.3)}
@keyframes ba-tap{0%,60%,100%{transform:scale(1)}30%{transform:scale(.86)}}
@keyframes ba-ring{0%,25%{transform:scale(.7);opacity:0}35%{opacity:.9}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.ba-hint-icon,.ba-hint-ring{animation:none}}
/* 2026-10-25 Ry: CTA ブロックは帯の中に 95vw の四角を置き、その中に表示する */
/* Before/After のキャプションは 1 行ずつに詰める */
.ba-cap .cap-kind{display:block;font-size:11px;line-height:1.6;letter-spacing:.08em;color:var(--ink-soft)}
.ba-cap h3{font-size:15px;line-height:1.6;margin:0}
/* カルーセルの «写真は 4:3» の指定（home.css・renovy-carousel.css）に負けていた。Before/After だけ枠いっぱいに */
.r-car .r-car__item figure.ba img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
/* 2026-10-25 Ry: タップの合図は右下・Before/After の表記は大きく */
.ba-hint{left:auto;right:14px;bottom:14px;transform:none;flex-direction:row;gap:8px}
.ba-hint-ring{top:auto;bottom:0;left:auto;right:0;margin-left:0}
.ba-hint-icon{width:22px;height:22px;padding:8px}
.ba-hint-ring{width:38px;height:38px}
.ba-tag{left:14px;top:14px;font-size:15px;letter-spacing:.06em}
.ba-hint{flex-direction:row-reverse}
.ba-hint-ring{right:-2px;bottom:-2px}
/* 2026-10-25 Ry: タップの切り替えは速く。画面に入ったときの自動切り替えだけゆっくり */
.ba .ba-after{transition:opacity .45s ease}

/* 最後の見出し «あなた専任の、コーディネーターがいる。» は少し大きく（Ry 2026-10-31） */
#closing-title{font-size:28px;line-height:1.6}

/* «リノビーが選ばれる、3 つの理由。»（中古の LP v3 の部品をそのまま。文字は LP の決まりで 1px 大きく。Ry 2026-10-31） */
.chuko-reasons{list-style:none;margin:24px auto 0;padding:0;max-width:30em;text-align:left}
.chuko-reasons li{display:grid;grid-template-columns:44px 1fr;column-gap:8px;padding:16px 0;border-top:1px solid rgba(0,0,0,.08);font-family:var(--jp);font-size:14px;line-height:1.8;color:var(--ink)}
.chuko-reasons li:last-child{border-bottom:1px solid rgba(0,0,0,.08)}
.chuko-reasons .n{grid-row:span 2;font-family:var(--serif);font-size:20px;color:var(--ink-sub,#888)}
.chuko-reasons b{display:block;font-weight:500;font-size:16px}
.reasons-block{margin-top:64px}
.chuko-reasons li{font-size:15px}
.chuko-reasons b{font-size:17px}

/* Before/After は見出しのすぐ下に詰まっていた（0px）。ブロックの間は空ける */
.surface-ba{margin-top:24px}

/* 太字は 600（Noto Sans JP を読んでおらず端末の書体になる。ヒラギノは 500 だと普通の太さに見えるため。Ry 2026-10-31「少し太字に」） */
main strong,main b,.chuko-reasons b{font-weight:600}

/* 太字は Noto Sans JP の 600（SemiBold）。ヒラギノには中間の太さが無く、600 だと «太字» に見えたため、書体を読み込んで中間の太さを出す（Ry 2026-10-31「semibold くらい」） */
main strong,main b,.chuko-reasons b{font-family:"Noto Sans JP",var(--jp),sans-serif;font-weight:600}

/* 見出しを «少しだけ» 太く: 明朝は端末の書体で中間の太さが無いので、輪郭をわずかに太らせる（Ry 2026-10-31） */
.h2-semi{-webkit-text-stroke:.35px currentColor}
/* コーディネーターの 3 つは普通の太さ（Ry 2026-10-31「一旦全部普通に戻して」） */
.coord-points li{font-weight:400}

/* 太字にすると幅が増えて «配管ま / で» で折れたため、この行だけ 15px（Ry 2026-10-31） */
.no-upsell{font-size:15px}

/* ===== パソコン調整（Web デザイナー 2026-10-31）スマホ（767px 以下）には 1px も効かせない。
   手本は本番のトップ（home-v2）のパソコン表示。文・節の順は変えない。 ===== */
@media (min-width: 768px) {
  /* hero の小さい文字はトップのパソコン表示と同じ大きさへ（LP 側の 16px 指定がトップの 22px / 21px に勝っていた） */
  .hero-eyebrow { font-size:22px; line-height:1.9; }
  .hero-note { font-size:21px; line-height:1.9; }
  /* 見出しはトップ（29px）より少しだけ大きく */
  h2 { font-size:clamp(24px,2.1vw,30px); }
  #closing-title { font-size:clamp(28px,2.4vw,34px); }
  .contact-cta h2 { font-size:clamp(24px,2vw,28px); }
  /* 節の上下: 168px×2 は広い画面でも空きすぎ。112px に詰める */
  .band { padding-block:112px; }
  .contact-cta { margin-top:0; padding-block:56px; }
  .contact-cta__points { width:min(100%,360px); }
  /* Before/After: 中央の 1 枚が 720×1080 で画面の高さを超えていた。縦長の比は保ったまま 460px に */
  .r-car.surface-ba { --car-w:460px; --car-ratio:1.5; }
  /* 事例一覧: 中央 720 は大きすぎ。560 に */
  .works-block .r-car { --car-w:560px; }
  /* 3 つの理由: 480px は本文幅 700px に対して細い。560px に */
  .chuko-reasons { max-width:560px; }
  /* ブロックが変わる所は空ける */
  .works-block, .menu-block, .reasons-block { margin-top:72px; }
  .surface-lead + .works-block { margin-top:88px; }
  .band .block > .estimate-carousel + .block { margin-top:56px; }
  .price-head { margin-top:72px; }
  .step { margin-top:36px; }
}