/* 暮らしと不動産の窓口 — DESIGN.md v1.0 準拠の共通土台 */
*,*::before,*::after{box-sizing:border-box}
:root{
  --ground:#F6F2E6; --panel:#FFFDF4; --sunk:#EDE8D8; --rule:#DAD3BE; --rule-hair:#E7E1D0; --rule-ink:#1B2620;
  --ink:#1B2620; --ink-2:#5C665C; --accent:#1F4A38; --close:#16302A;
  --jp-min:"Manrope","Shippori Mincho B1",serif;
  --jp-go:"Manrope","Zen Kaku Gothic New",sans-serif;
  --ease:cubic-bezier(.32,.72,0,1);
  --gutter:24px; --page:1120px;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);
  font-family:var(--jp-go);font-size:1rem;line-height:1.8;
  font-feature-settings:"palt" 1;}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--jp-min);font-weight:600;line-height:1.35;margin:0;
  font-feature-settings:"palt" 1;letter-spacing:.01em;
  word-break:auto-phrase;line-break:strict}
/* 文節折り: Safari 等 auto-phrase 非対応でも語中で切らせない */
.pb{display:inline-block}
p,li,dd,dt,figcaption{word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
p{margin:0}
.wrap{width:100%;max-width:var(--page);margin-inline:auto;padding-inline:var(--gutter)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* 主CTA */
.cta{display:inline-flex;align-items:center;gap:12px;
  background:var(--accent);color:#fff;text-decoration:none;
  font-family:var(--jp-go);font-weight:600;font-size:16px;line-height:1;
  padding:16px 32px;border-radius:2px;
  transition:background .4s var(--ease),transform .4s var(--ease)}
.cta:hover{background:#153426}
.cta:active{transform:translateY(1px)}
.cta:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta--ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.cta--ghost:hover{background:var(--ink);color:#fff}
.cta__sub{font-size:12px;font-weight:400;opacity:.8;white-space:nowrap}

/* 現れ（DESIGN.md §7 唯一の動き） */
/* スクロール連動の現れは廃止（読みづらいため・2026-08-27 本人指定）。
   .rise はマークアップに残っているが、見た目には一切影響しない */
.rise{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .rise{opacity:1;transform:none;transition:none}
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* 共通の小物 */
.eyebrow{font-family:var(--jp-go);font-size:13px;font-weight:600;color:var(--ink-2);
  letter-spacing:.08em;margin:0 0 16px}
.lead{font-size:16px;line-height:1.8;color:var(--ink-2);max-width:34em}
.num{font-family:"Manrope",sans-serif;font-variant-numeric:tabular-nums;font-weight:600}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;background:#fff;padding:8px 16px;z-index:99}

/* ヘッダー */
.hd{position:sticky;top:0;z-index:20;background:rgba(246,242,230,.94);
  border-bottom:1px solid var(--rule);backdrop-filter:saturate(1.2) blur(6px)}
.hd__in{display:flex;align-items:center;gap:24px;height:72px}
.hd__mark{font-family:var(--jp-min);font-weight:600;font-size:17px;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap}
.hd__mark small{display:block;font-family:var(--jp-go);font-size:10px;font-weight:500;
  color:var(--ink-2);letter-spacing:.06em;margin-top:2px}
.hd__nav{display:flex;gap:24px;margin-left:auto;font-size:14px}
.hd__nav a{text-decoration:none;color:var(--ink-2);transition:color .3s var(--ease)}
.hd__nav a:hover{color:var(--ink)}
.hd__tel{font-family:"Manrope",sans-serif;font-weight:600;font-size:15px;text-decoration:none}
.hd .cta{padding:12px 20px;font-size:14px}
@media(max-width:900px){.hd__nav,.hd__tel{display:none}}

/* フッター前の締め */
.close{background:var(--close);color:#fff;padding:96px 0}
.close h2{color:#fff;font-size:32px}
@media(max-width:860px){.close{padding:64px 0}.close h2{font-size:23px}}
.close .cta{background:transparent;border:1px solid rgba(255,255,255,.7);color:#fff}
.close .cta:hover{background:#fff;color:var(--close);border-color:#fff}

/* 資料的な表 */
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec th,.spec td{border-bottom:1px solid var(--rule);padding:12px 0;text-align:left;vertical-align:top}
.spec th{width:11em;font-weight:500;color:var(--ink-2)}

/* ===== 編集的な細部（セクションの通し番号と罫） ===== */
.eyebrow{position:relative;display:flex;align-items:center;gap:12px;
  font-family:var(--jp-go);font-size:12.5px;font-weight:600;color:var(--ink-2);
  letter-spacing:.06em;margin:0 0 18px}
.eyebrow::before{content:attr(data-n);font-family:"Manrope",sans-serif;font-size:11px;
  font-weight:700;color:var(--accent);letter-spacing:.1em}
.eyebrow::after{content:"";flex:1;height:1px;background:var(--rule);max-width:72px}
.eyebrow:not([data-n])::before{display:none}

/* ===== 罫の3段（v1.6） =====
   毛（区切りの気配）／並（通常の区切り）／墨（節の始まり） */
.rule-hair{height:1px;background:var(--rule-hair);border:0}
.rule-ink{height:2px;background:var(--rule-ink);border:0}

/* ===== 数字の組み（tabular＋単位を小さく） ===== */
.num{font-family:"Manrope",sans-serif;font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;letter-spacing:-.01em}
.unit{font-family:var(--jp-go);font-size:.62em;font-weight:500;letter-spacing:.04em;
  margin-left:.2em;color:inherit;opacity:.85;vertical-align:.05em}

/* ===== 読みのリズム（節ごとに間を変える） =====
   導入は詰め、話が変わるところで広くとる */
.sec.rhythm-in,.stuck.rhythm-in,.why.rhythm-in,.life.rhythm-in{padding-block:72px}      /* 受け・導入 */
.sec.rhythm-mid,.stuck.rhythm-mid,.why.rhythm-mid,.life.rhythm-mid{padding-block:104px}    /* 本題 */
.sec.rhythm-turn,.stuck.rhythm-turn,.why.rhythm-turn,.life.rhythm-turn{padding-block:136px}   /* 話が変わるところ */
@media(max-width:860px){
  .sec.rhythm-in,.stuck.rhythm-in,.why.rhythm-in,.life.rhythm-in{padding-block:48px}
  .sec.rhythm-mid,.stuck.rhythm-mid,.why.rhythm-mid,.life.rhythm-mid{padding-block:64px}
  .sec.rhythm-turn,.stuck.rhythm-turn,.why.rhythm-turn,.life.rhythm-turn{padding-block:80px}}