@charset "utf-8";
/* /eki/ の見た目 v2 (2026-08-18)。/satei/kbn/ のトーンに合わせた再設計。
   ・淡いグレー地 × 白カード × teal(#2eb6af)アクセント
   ・見出しもゴシック (Zen Old Mincho は廃止。--f-min もゴシックに向けてある)
   ・スマホ最優先: カードは全幅・表は横スクロール・タップ対象は大きく */

:root{
  --acc:#2eb6af;          /* teal */
  --acc-d:#1c9a94;        /* 濃teal (文字色にも使える) */
  --acc-soft:#e6f6f5;     /* 淡い面 */
  --sub:#e3efc9;
  --ink:#243b4a;
  --ink-str:#14242e;
  --mut:#6b7f8c;
  --line:#dde4e6;
  --line-soft:#e9eeef;
  --bg:#fff;              /* カード面 */
  --page:#f1f4f4;         /* ページ地 */
  --soft:#f6f9f9;
  --up:#1c9a94;
  --down:#c25e4a;

  --f-goth:"Helvetica Neue",Inter,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP","Yu Gothic",sans-serif;
  --f-min:var(--f-goth);  /* 旧テンプレ互換: 明朝指定もゴシックに寄せる */
  --f-logo:"Zen Kaku Gothic New",var(--f-goth);

  --r:14px;
  --maxw:1020px;
  --gut:clamp(14px,3.5vw,28px);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--f-goth);font-size:15.5px;line-height:1.95;
  font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--acc-d);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ---------------------------------------------------------------- 枠 */
header.site{background:#fff;border-bottom:1px solid var(--line)}
.hd{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{font-family:var(--f-logo);font-weight:700;font-size:18px;letter-spacing:.05em;
  color:var(--ink-str);text-decoration:none;white-space:nowrap}
.brand:hover{text-decoration:none;color:var(--acc-d)}
.gnav{display:flex;gap:18px;flex-wrap:wrap;font-size:13px;letter-spacing:.03em}
.gnav a{color:var(--ink)}
.gnav a:hover{color:var(--acc-d);text-decoration:none}
/* eki内サブメニュー (スマホでも常時表示・横スクロール) */
.subnav{border-top:1px solid var(--line-soft);background:#fff}
.sn{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);
  display:flex;gap:6px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none}
.sn::-webkit-scrollbar{display:none}
.sn a{flex:0 0 auto;padding:10px 12px;font-size:12.5px;font-weight:700;color:var(--ink);
  white-space:nowrap;border-bottom:2px solid transparent}
.sn a:hover{color:var(--acc-d);text-decoration:none;border-bottom-color:var(--acc)}
.sn a.snbtn{margin-left:auto;background:var(--acc);color:#fff;border-radius:999px;
  padding:7px 16px;font-size:12px;border-bottom:0}
.sn a.snbtn:hover{background:var(--acc-d);color:#fff}
.crumbs{max-width:var(--maxw);margin:0 auto;padding:10px var(--gut) 0;
  font-size:11.5px;color:var(--mut);line-height:1.8}
.crumbs a{color:var(--mut)}
.crumbs span[aria-hidden]{margin:0 6px;opacity:.6}

main{max-width:var(--maxw);margin:0 auto;padding:4px var(--gut) 72px}

footer.site{border-top:1px solid var(--line);background:#fff;margin-top:56px}
.ft{max-width:var(--maxw);margin:0 auto;padding:26px var(--gut) 40px;
  color:var(--mut);font-size:12px;line-height:1.9}
.ft p{margin:0 0 8px}
.ft a{color:var(--mut)}

/* ---------------------------------------------------------------- 見出し */
h1{
  font-family:var(--f-goth);font-weight:800;
  font-size:clamp(21px,4.4vw,30px);line-height:1.5;letter-spacing:.01em;
  margin:26px 0 8px;color:var(--ink-str);text-wrap:balance;
}
h2{
  font-family:var(--f-goth);font-weight:700;
  font-size:clamp(17px,3vw,20px);line-height:1.5;letter-spacing:.01em;
  margin:0 0 14px;color:var(--ink-str);text-wrap:balance;
  padding-left:12px;border-left:4px solid var(--acc);
}
h2::after{display:none}
h2+.note{margin-top:-6px}
h3{font-size:15px;font-weight:700;margin:18px 0 6px;color:var(--ink-str)}

/* セクション = 白カード */
section{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);
  padding:20px clamp(14px,3vw,26px);margin:16px 0 0}
section.nobd{border:1px solid var(--line)}
h1+.sub{margin-top:0}

.sub{color:var(--mut);font-size:12.5px;line-height:1.85;margin:0 0 16px;word-break:keep-all;overflow-wrap:anywhere}
.muted{color:var(--mut)}
.note{color:var(--mut);font-size:12px;line-height:1.8;margin:10px 0 0;max-width:70ch}
.lead{font-size:15.5px;line-height:2;margin:0 0 12px}
.warn{background:var(--soft);border-left:3px solid var(--sub);padding:12px 16px;color:var(--mut);border-radius:0 8px 8px 0}

/* ---------------------------------------------------------------- 駅力 */
.srank{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap;
  border:1px solid var(--line);padding:18px 20px;margin:8px 0 8px;background:var(--soft);border-radius:12px}
.srank .badge{
  flex:0 0 60px;height:60px;display:grid;place-items:center;border-radius:50%;
  font-weight:800;font-size:26px;color:#fff;letter-spacing:.02em;background:var(--acc);
}
.srank .body{flex:1 1 240px;min-width:0}
.srank strong{font-weight:700;font-size:15px;color:var(--ink-str)}
.rank-S .badge{background:#0f766e}
.rank-A .badge{background:#1c9a94}
.rank-B .badge{background:#2eb6af}
.rank-C .badge{background:#8ed4cf}
.rank-D .badge{background:#c9e6e4;color:#3f6a66}
.pill{display:inline-block;min-width:24px;text-align:center;color:#fff;font-size:11px;
  font-weight:700;border-radius:999px;padding:1px 8px;background:var(--acc);letter-spacing:.04em}
.pill.rank-S{background:#0f766e}.pill.rank-A{background:#1c9a94}
.pill.rank-B{background:#2eb6af}.pill.rank-C{background:#8ed4cf;color:#20504c}
.pill.rank-D{background:#c9e6e4;color:#3f6a66}

.bars{margin-top:12px;display:grid;gap:6px;max-width:440px}
.bar{display:grid;grid-template-columns:52px 1fr 30px;gap:10px;align-items:center;
  font-size:11.5px;line-height:1.6;color:var(--mut)}
.bar .t{background:#e4ecec;height:6px;border-radius:999px;overflow:hidden}
.bar .t i{display:block;height:100%;background:var(--acc)}
.bar .v{text-align:right;font-variant-numeric:tabular-nums}

/* ---------------------------------------------------------------- 数値 */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:10px;margin:14px 0 0}
.kpi{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px}
.kpi .l{display:block;font-size:11px;color:var(--mut);letter-spacing:.03em;line-height:1.6}
.kpi strong{display:block;font-weight:800;
  font-size:25px;line-height:1.4;color:var(--ink-str);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;margin-top:2px}
.kpi strong small{font-size:11px;font-weight:500;color:var(--mut);margin-left:3px;letter-spacing:0}
.kpi em{font-style:normal;display:block;font-size:11px;color:var(--mut);line-height:1.6}
.kpi em.up{color:var(--up)} .kpi em.down{color:var(--down)}

/* ---------------------------------------------------------------- 表 */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px;
  border:1px solid var(--line-soft);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:max-content;
  font-size:13px;line-height:1.75}
th,td{padding:10px 13px;border-bottom:1px solid var(--line-soft);text-align:left;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
thead th{background:var(--soft);border-bottom:1px solid var(--line);
  font-size:11px;color:var(--mut);font-weight:700;letter-spacing:.04em}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
td.up{color:var(--up)} td.down{color:var(--down)}
tbody tr:hover{background:var(--acc-soft)}
tr.self{background:var(--sub)}
tr.self:hover{background:var(--sub)}
tr.self td{font-weight:600}

/* ---------------------------------------------------------------- 解説 */
.desc{margin:16px 0 0;padding:18px 20px;background:var(--acc-soft);
  border:1px solid #cdeae7;border-radius:12px}
.desc h2{margin:0 0 10px;padding-left:12px;font-size:16.5px}
.desc ul{margin:12px 0 0;padding-left:1.25em}
.desc li{margin:8px 0;line-height:1.9}
.desc li::marker{color:var(--acc-d)}

/* ---------------------------------------------------------------- CTA (v11: dr-tel型バンド。左=査定レポート表紙/右=コピー+2ボタン) */
.cta{position:relative;overflow:hidden;margin:30px 0 0;border:0;border-radius:18px;
  padding:32px clamp(20px,3vw,36px);text-align:left;
  display:grid;grid-template-columns:290px minmax(0,1fr);gap:34px;align-items:center;
  background:#1c9a94;
  box-shadow:0 6px 16px rgba(23,138,150,.20),0 22px 50px rgba(23,138,150,.32)}
.cta::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;
  background-image:radial-gradient(rgba(255,255,255,.35) 1.2px,transparent 1.3px);
  background-size:16px 16px;
  -webkit-mask-image:linear-gradient(100deg,transparent 55%,#000);
  mask-image:linear-gradient(100deg,transparent 55%,#000)}
.cta::after{content:none}
.cvis{position:relative;height:196px}
.ccard{position:absolute;inset:0;background:#fff;border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.24)}
.ccard.c2{transform:rotate(-8deg) translate(-10px,8px);background:#e9f3f2}
.ccard.c1{transform:rotate(-2.5deg);padding:20px 20px 14px;display:flex;
  flex-direction:column;gap:2px}
.ccard .ct1{font-size:19px;font-weight:800;color:#0f766e;line-height:1.4}
.ccard .ct2{font-size:13px;font-weight:800;color:#243b4a;letter-spacing:.04em}
.ccard .cbars{width:70%;margin:12px 0 8px}
.ccard .ct3{font-size:8.5px;font-weight:700;letter-spacing:.3em;color:#9fb0b8;
  font-family:"SF Mono",ui-monospace,Menlo,Consolas,monospace;margin-top:auto}
.cbody h2{margin:0 0 10px;padding:0;border:0;background:transparent;color:#fff;
  font-size:clamp(19px,2.8vw,23px);font-weight:800;line-height:1.65;letter-spacing:.02em;
  word-break:keep-all;overflow-wrap:anywhere}
.cbody h2::before{content:none}
.cbody h2::after{content:none}
.cbody p{margin:0;max-width:52ch;padding:0;background:transparent;text-wrap:pretty;
  font-size:12.5px;line-height:2;color:#e2f6f4;word-break:keep-all;overflow-wrap:anywhere}
.cbtns{display:flex;gap:14px;flex-wrap:wrap;margin-top:18px}
.btn{display:inline-block;margin:0;padding:14px 34px;position:relative;
  background:#ff9330;color:#fff;font-size:14.5px;font-weight:800;letter-spacing:.04em;
  border-radius:999px;text-align:center;transition:transform .15s,filter .15s,box-shadow .15s;
  box-shadow:0 8px 20px rgba(0,0,0,.22)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05);text-decoration:none;color:#fff;
  box-shadow:0 12px 26px rgba(0,0,0,.26)}
.btn:active{transform:scale(.97)}
.btn.w{background:#fff;color:#1489a0;padding:12px 18px;font-size:13px}
.btn.w:hover{color:#0f6b80}
.cta.alt{background:#1c9a94}
@media (max-width:700px){
  .cta{grid-template-columns:1fr;gap:22px;padding:26px 18px 24px;text-align:center}
  .cvis{height:170px;width:min(250px,86%);margin:0 auto}
  .cbody p{margin:0 auto}
  .cbtns{justify-content:center}
  .cbtns .btn{flex:1 1 100%;padding:15px 20px}
}

/* PCサイド追尾CTA (余白が出る幅のみ) */
.ctafloat{position:fixed;right:16px;top:50%;transform:translate(26px,-50%);width:192px;
  background:#fff;border:1px solid #d7e4e3;border-radius:12px;overflow:hidden;text-align:center;z-index:60;
  box-shadow:0 3px 10px rgba(32,52,62,.08),0 18px 44px rgba(32,52,62,.16);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;display:none}
.ctafloat.on{opacity:1;pointer-events:auto;transform:translate(0,-50%)}
.ctafloat .fh{color:#22343c;font-size:12.5px;font-weight:700;
  padding:14px 10px 4px;line-height:1.65;font-family:var(--f-min),serif}
.ctafloat .fh b{color:var(--acc-d)}
.ctafloat .fb{padding:10px 12px 13px}
.ctafloat .fbtn{display:block;background:#ff9330;color:#fff;font-weight:800;font-size:13px;
  letter-spacing:.06em;border-radius:999px;padding:12px 6px;box-shadow:0 5px 14px rgba(255,147,48,.35)}
.ctafloat .fbtn:hover{filter:brightness(1.05);text-decoration:none;color:#fff}
.ctafloat .fbtn:active,.ctabar .bbtn:active{transform:scale(.96)}
.ctafloat .fsub{display:block;margin-top:9px;font-size:11px;color:var(--mut);
  text-decoration:underline;text-underline-offset:2px}
.ctafloat .opav{display:block;width:48px;height:48px;margin:14px auto 0;border-radius:50%;
  box-shadow:0 2px 8px rgba(32,52,62,.14)}
.ctafloat .fop{font-size:10.5px;color:var(--mut);margin-top:2px}
.ctabar .opav{flex:0 0 40px;width:40px;height:40px;border-radius:50%}
@media (min-width:1460px){.ctafloat{display:block}}

/* スマホ下部固定CTAバー */
.ctabar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(4px);border-top:1px solid #d7e4e3;
  padding:9px 12px calc(9px + env(safe-area-inset-bottom));
  transform:translateY(110%);transition:transform .3s;box-shadow:0 -6px 18px rgba(32,52,62,.12)}
.ctabar.on{transform:none}
.ctabar .bwrap{display:flex;gap:10px;align-items:center;max-width:560px;margin:0 auto}
.ctabar .blabel{color:#22343c;font-size:11.5px;font-weight:700;line-height:1.55;flex:1;min-width:0}
.ctabar .blabel b{color:var(--acc-d)}
.ctabar .bbtn{flex:0 0 auto;background:#ff9330;color:#fff;font-weight:800;font-size:14px;
  letter-spacing:.04em;border-radius:999px;padding:13px 22px;box-shadow:0 4px 12px rgba(255,147,48,.35)}
.ctabar .bbtn:active{filter:brightness(.94)}
@media (max-width:600px){.ctabar{display:block}}

/* ---------------------------------------------------------------- 一覧系 */
ol.ranking{padding-left:1.6em;margin:8px 0 0;font-size:14px}
ol.ranking li{margin:7px 0}
ol.ranking li::marker{color:var(--mut);font-size:12px}
ol.ranking .v{color:var(--mut);font-size:12.5px;margin-left:10px;font-variant-numeric:tabular-nums}
ul.lines{list-style:none;padding:0;margin:10px 0 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
ul.lines li{background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 16px;font-size:13.5px}
ul.lines .muted{font-size:12px;margin-left:8px}
.related{margin-top:20px;padding:14px 18px;background:#fff;border:1px solid var(--line);
  border-radius:10px;font-size:13.5px}

/* ---------------------------------------------------------------- 図 */
figure.chart{margin:10px 0 0;overflow:visible}
figure.chart svg{display:block;width:100%;height:auto}
figure.chart svg{max-width:100%;height:auto}
figure.chart figcaption{margin-top:8px}

/* ---------------------------------------------------------------- 入口カード（トップ） */
.entries{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin:16px 0 0}
.entry{background:#fff;border:1px solid var(--line);border-radius:12px;
  padding:18px 20px;text-decoration:none;color:var(--ink);display:block;
  transition:border-color .15s,box-shadow .15s}
.entry:hover{border-color:var(--acc);box-shadow:0 2px 12px rgba(46,182,175,.12);text-decoration:none}
.entry .ttl{display:block;font-size:16.5px;font-weight:800;color:var(--ink-str);margin-bottom:4px}
.entry .dsc{display:block;font-size:12.5px;color:var(--mut);line-height:1.75}

/* ---------------------------------------------------------------- 地図セレクタ */
.maptabs{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 0}
.maptabs button{border:1px solid var(--line);background:#fff;color:var(--ink);
  font-size:13px;font-weight:700;padding:9px 18px;border-radius:999px;cursor:pointer}
.maptabs button.on{background:var(--acc);border-color:var(--acc);color:#fff}
.mappane{display:none;margin-top:12px}
.mappane.on{display:block}
.areamap-svg{width:100%;height:auto;display:block}
.areamap-svg path{stroke:#fff;stroke-width:1.1}
.areamap-svg path.on{fill:#bfe7e3;cursor:pointer;transition:fill .12s}
.areamap-svg a:hover path.on,.areamap-svg a:focus path.on{fill:var(--acc)}
.areamap-svg path.off{fill:#e3e9ea}
.areamap-svg text{font-size:11px;font-weight:700;fill:#1f3a44;text-anchor:middle;
  pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}
.areamap-svg text.loff{fill:#93a5ad;font-weight:500}
.mapnote{margin-top:8px;font-size:12px;color:var(--mut)}
.maptip{position:fixed;z-index:60;pointer-events:none;background:#fff;
  border:1px solid var(--acc);border-radius:10px;padding:8px 12px;
  box-shadow:0 6px 20px rgba(15,60,70,.18);min-width:110px;text-align:center}
.maptip .tn{font-size:11px;font-weight:700;color:var(--mut);letter-spacing:.02em}
.maptip .tv{font-size:16.5px;font-weight:900;color:var(--acc-d);
  font-variant-numeric:tabular-nums;line-height:1.5}
.maptip .tx{font-size:10px;color:var(--mut)}

/* ---------------------------------------------------------------- 丁目マップ */
.chomemap-svg{width:100%;height:auto;display:block}
.chomemap-svg path{transition:opacity .12s}
.chomemap-svg path:hover{opacity:.75}
.chomemap-svg text.chlbl{font-size:11px;font-weight:800;fill:#0e2a33;text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:3px;stroke-linejoin:round;pointer-events:none}
.chomemap-svg text.chnum{font-size:9.5px;font-weight:700;fill:#33505c;text-anchor:middle;
  pointer-events:none;paint-order:stroke;stroke:rgba(255,255,255,.75);stroke-width:2px}
.chomemap-svg text.chdist{font-size:12.5px;font-weight:900;fill:#0e2a33;text-anchor:middle;
  letter-spacing:.06em;pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:3.6px;
  stroke-linejoin:round}
.chomemap-svg .rail{fill:none;stroke:#7b8b95;stroke-width:1.3;
  stroke-linecap:round;opacity:.38}
.chomemap-svg .stdot{fill:#e0492f;stroke:#fff;stroke-width:2.4}
.chomemap-svg text.stlbl{font-size:12px;font-weight:900;fill:#b23418;text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:3.4px;stroke-linejoin:round}
.chomemap-svg a:hover .stdot{fill:#8f2610}
.chomemap-svg .stdot2{fill:#8a97a0;stroke:#fff;stroke-width:1.6}
.chomemap-svg text.stlbl2{font-size:10px;font-weight:700;fill:#67757e;text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:2.6px;stroke-linejoin:round}
.chomemap-svg text.lglbl{font-size:11px;fill:#6b7f8c}
.chomemap-svg.dense text.chdist{font-size:10px;stroke-width:2.8px}
.chomemap-svg.dense text.chnum{font-size:8px}
.chomemap-svg.dense text.stlbl{font-size:10.5px}
.chomemap-svg.dense text.stlbl2{font-size:9px}

/* ---------------------------------------------------------------- 路線内の駅力ストリップ */
.lstrip{margin:12px 0 0;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.lsline{padding:6px 12px;background:var(--soft);font-size:11.5px;font-weight:700;color:var(--mut);
  border-bottom:1px solid var(--line-soft)}
.krail{display:flex;overflow-x:auto;-webkit-overflow-scrolling:touch;
  padding:14px 10px 12px;background:#fff}
.kst{position:relative;flex:1 0 auto;min-width:94px;text-align:center;padding-top:20px}
.kst::before{content:"";position:absolute;left:0;right:0;top:9px;height:3.5px;
  background:var(--acc);opacity:.5}
.kst:first-child::before{left:50%}
.kst:last-child::before{right:50%}
.kst::after{content:"";position:absolute;left:50%;top:5px;transform:translateX(-50%);
  width:11px;height:11px;border-radius:50%;background:#fff;border:2.5px solid var(--acc)}
.kst.self::after{width:16px;height:16px;top:2px;background:var(--acc)}
.kst .n{font-size:12.5px;line-height:1.5}
.kst .n a{font-weight:700}
.kst.self .n{font-weight:900}
.kst.self{background:linear-gradient(180deg,transparent 18px,var(--acc-soft) 18px);
  border-radius:0 0 10px 10px}
.kst small{display:block;color:var(--mut);font-variant-numeric:tabular-nums;font-size:11px}
.sumiwake{margin:14px 0 0;padding:12px 16px;background:#fff8ec;border:1px solid #ecd9ae;
  border-radius:10px;font-size:13.5px;line-height:1.9}
ul.pband{list-style:none;margin:8px 0 0;padding:0}
ul.pband li{margin:6px 0;font-variant-numeric:tabular-nums}
ul.pband .v{display:block;color:var(--mut);font-size:11.5px}
@media (min-width:600px){ul.pband .v{display:inline;margin-left:10px}}

/* ---------------------------------------------------------------- 丁目カースト・どっち側 */
.duallist{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:10px;margin-top:12px}
.duallist .box{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff}
.duallist .box h3{margin:0 0 8px;font-size:13.5px;color:var(--mut);font-weight:700}
.duallist ol{margin:0;padding-left:1.5em;font-size:13.5px}
.duallist li{margin:6px 0}
.duallist .v{color:var(--mut);font-size:12px;margin-left:8px;font-variant-numeric:tabular-nums}
.side{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-top:12px;max-width:560px}
.side .q{border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:center;background:#fff}
.side .q .d{font-size:11px;color:var(--mut);font-weight:700}
.side .q strong{display:block;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-str)}
.side .q.best{border-color:var(--acc);background:var(--acc-soft)}
.side .q.best .d{color:var(--acc-d)}
.side .q small{font-size:10.5px;color:var(--mut)}

/* ---------------------------------------------------------------- プロたちの本音トーク (LINE風) */
.talk{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#eef3f7}
.talkhead{padding:12px 16px;background:#fff;border-bottom:1px solid var(--line);
  font-weight:800;font-size:15.5px;color:var(--ink-str)}
.talkhead span{display:block;font-size:11.5px;font-weight:500;color:var(--mut);margin-top:1px}
.talkband{padding:8px 16px;background:#fdf7e8;border-bottom:1px solid #e6d9b0;
  font-size:11px;line-height:1.7;color:#5a4a20}
.talkbody{padding:14px 12px 16px;background:linear-gradient(180deg,#e7eef4,#dfe9f0)}
.msg{display:flex;gap:8px;margin:10px 0;align-items:flex-start}
.msg .av{flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:#fff;
  border:1px solid rgba(0,0,0,.06)}
.msg .mb{max-width:78%}
.msg .nm{font-size:10.5px;color:#5a6b78;margin:0 0 3px 4px;font-weight:700}
.msg .bub{position:relative;background:#fff;border-radius:4px 14px 14px 14px;
  padding:9px 13px;font-size:13.5px;line-height:1.8;color:#243038;
  box-shadow:0 1px 2px rgba(20,40,60,.08)}
.msg.p-fuku .nm{color:#41545e}
.msg.p-mariko .nm{color:#7a5f74}
.msg.p-shinji .nm{color:#4a6b8a}
.msg.p-misaki .nm{color:#b06a76}
.msg.p-goro .nm{color:#5d6b4f}
.msg.p-tome .nm{color:#8a7a68}
.msg.p-shinji .bub{background:#eef7ee}
.msg.r{flex-direction:row-reverse}
.msg.r .nm{text-align:right;margin:0 4px 3px 0}
.msg.r .bub{border-radius:14px 4px 14px 14px}
.msg.p-shinji .bub{background:#d9f2d9;border-radius:4px 14px 14px 14px}
@media (max-width:600px){.msg .mb{max-width:84%}.msg .bub{font-size:13px}}

/* ---------------------------------------------------------------- 辛口コラム */
.snark{margin:16px 0 0;border:1px solid #e2d9c2;border-radius:12px;background:#fbf8ef;overflow:hidden}
.snark .head{padding:10px 16px;background:#f3edda;font-size:12px;color:#6b5d33;line-height:1.7}
.snark .bd{padding:16px 18px;font-size:14.5px;line-height:2}
.snark .bd p{margin:0 0 12px}
.snark .bd p:last-child{margin-bottom:0}

/* ---------------------------------------------------------------- 街の声 */
.topics{display:grid;gap:7px;max-width:520px;margin:14px 0 0}
.topic{display:grid;grid-template-columns:96px 1fr 62px;gap:10px;align-items:center;
  font-size:12.5px;color:var(--mut)}
.topic .t{background:#e4ecec;height:7px;border-radius:999px;overflow:hidden}
.topic .t i{display:block;height:100%;background:var(--acc)}
.topic .v{text-align:right;font-variant-numeric:tabular-nums}

.bbs{margin:16px 0 0;border:1px solid var(--line);border-radius:10px;background:#fcfcfb;overflow:hidden}
.res{padding:13px 16px;border-bottom:1px solid var(--line-soft)}
.res:last-child{border-bottom:0}
.res .meta{font-size:11.5px;color:var(--mut);display:flex;gap:10px;align-items:baseline;
  flex-wrap:wrap;line-height:1.7}
.res .no{color:var(--acc-d);font-weight:700;font-variant-numeric:tabular-nums}
.res .nm{color:#2f6f4f;font-weight:600}
.res .dt{font-variant-numeric:tabular-nums}
.res .tg{margin-left:auto;background:var(--sub);color:#4a5a2e;font-size:10.5px;
  padding:0 8px;border-radius:999px;letter-spacing:.04em}
.res .bd{margin-top:5px;font-size:14px;line-height:1.85;color:var(--ink)}
.res .src{margin-top:6px;font-size:11px}
.res .src a{color:var(--mut)}

/* ---------------------------------------------------------------- 地図（駅マップページ） */
#map{height:min(72vh,620px);border:1px solid var(--line);border-radius:12px;margin-top:14px}
.maplibregl-popup-content{font-family:var(--f-goth);font-size:13px;line-height:1.7;
  padding:10px 13px;border-radius:8px}
.legend{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:12px;
  font-size:12px;color:var(--mut)}
.legend .dot{display:inline-block;width:11px;height:11px;border-radius:50%;
  margin-right:5px;vertical-align:-1px;border:1px solid #fff}
.legend .dot.rank-S{background:#0f766e}.legend .dot.rank-A{background:#1c9a94}
.legend .dot.rank-B{background:#2eb6af}.legend .dot.rank-C{background:#8ed4cf}
.legend .dot.rank-D{background:#c9e6e4}

/* ---------------------------------------------------------------- 細かいもの */
ul.inline{list-style:none;padding:0;margin:6px 0 12px;display:flex;flex-wrap:wrap;gap:8px 16px}
td.sm,.sm{font-size:12px}
.related p{margin:0 0 4px}

.fiction{margin:14px 0 0;padding:12px 16px;background:#fdf7e8;border:1px solid #e6d9b0;
  border-radius:10px;font-size:12px;line-height:1.85;color:#5a4a20}
.fiction strong{color:#7a5a10}
.bbs.fic{background:#f7f8f6}
.bbs .thtitle{padding:12px 16px;border-bottom:1px solid var(--line);
  font-size:15px;font-weight:700;color:var(--ink-str);background:#fff}

/* ---------------------------------------------------------------- 路線帯（駅ページ上部） */
.linestrip{border:1px solid var(--line);border-radius:10px;margin:18px 0 0;background:var(--soft);overflow:hidden}
.lshead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  padding:10px 16px;border-bottom:1px solid var(--line);background:#fff}
.lsname{font-size:15px;font-weight:700;color:var(--ink-str)}
.lshead .muted{font-size:12px}
.lsmap{margin-left:auto;font-size:12px;white-space:nowrap}
.lsrail{display:flex;align-items:center;gap:0;overflow-x:auto;padding:16px 16px 14px;
  -webkit-overflow-scrolling:touch}
.ls{position:relative;flex:0 0 auto;padding:0 15px;font-size:12.5px;white-space:nowrap;
  color:var(--ink);text-decoration:none;line-height:2.4}
.ls::before{content:"";position:absolute;left:0;right:0;top:-9px;height:3px;background:var(--acc);opacity:.45}
.ls:first-child::before{left:50%}
.ls:last-child::before{right:50%}
.ls::after{content:"";position:absolute;left:50%;top:-13px;transform:translateX(-50%);
  width:9px;height:9px;border-radius:50%;background:#fff;border:2px solid var(--acc)}
.ls.self{font-weight:700;color:var(--ink-str)}
.ls.self::after{width:13px;height:13px;top:-15px;background:var(--acc);border-color:var(--acc)}
.ls.off{color:var(--mut)}
.ls:hover{color:var(--acc-d);text-decoration:none}
.ls:hover::after{background:var(--acc)}

/* ---------------------------------------------------------------- 掲示板を畳む */
.bbsscroll{max-height:420px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.bbswrap{margin-top:8px}
h2.plain{border:0;padding:0}

/* ---------------------------------------------------------------- 路線図（路線ページ） */
figure.linemap{margin:14px 0 0;border:1px solid var(--line);border-radius:10px;background:#fcfcfb;overflow:hidden}
figure.linemap svg{display:block;width:100%;height:auto}
figure.linemap a:hover circle{stroke:var(--ink-str);stroke-width:2.4}

/* ---------------------------------------------------- スレで話に出た場所の地図リンク */
.places{margin:16px 0 0;padding:14px 16px;background:var(--soft);border:1px solid var(--line);border-radius:10px}
.places .pltitle{margin:0;font-weight:700;font-size:14px}
.places .plnote{margin:6px 0 12px;color:var(--mut);font-size:12px;line-height:1.75}
.pllist{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pllist li{margin:0}
.pllist a{display:inline-block;padding:7px 14px;border:1px solid var(--line);
  background:#fff;color:var(--ink);text-decoration:none;font-size:13px;border-radius:999px}
.pllist a:hover{border-color:var(--acc);color:var(--acc-d)}

/* ---------------------------------------------------- 売り出し中の物件 */
.bukken-none{margin:16px 0 0;padding:24px var(--gut);background:var(--acc-soft);
  border:1px solid #cdeae7;border-radius:12px;text-align:center}
.bukken-none p{margin:0 auto 16px;max-width:52ch;font-size:14px;line-height:1.9}

@media (max-width:600px){
  body{font-size:14.5px;line-height:1.85}
  .gnav{display:none}
  .kpi strong{font-size:21px}
  .srank{padding:14px}
  .srank .badge{flex-basis:50px;height:50px;font-size:22px}
  section{padding:16px 14px}
  .areamap-svg text{font-size:13px}
}
/* ---------------------------------------------------------------- 縁を走る小電車・とまり鳥 */
.decorail{position:relative;overflow:visible}
.decotrain{position:absolute;top:-23px;left:-70px;width:64px;height:26px;pointer-events:none;
  animation:decorun 34s linear infinite}
.decotrain svg{width:100%;height:100%;display:block}
@keyframes decorun{
  0%{left:-70px;transform:scaleX(1)} 46%{left:calc(100% + 6px);transform:scaleX(1)}
  50%{left:calc(100% + 6px);transform:scaleX(-1)} 96%{left:-70px;transform:scaleX(-1)}
  100%{left:-70px;transform:scaleX(1)}}
.decoperch{position:relative}
.decobird{position:absolute;top:-14px;right:26px;width:34px;height:18px;pointer-events:none;
  animation:birdbob 5s ease-in-out infinite}
.decobird svg{width:100%;height:100%;display:block}
@keyframes birdbob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}



/* パネル・ボタンの現代化 */
section{box-shadow:0 1px 4px rgba(20,50,60,.05)}
section:hover{box-shadow:0 2px 10px rgba(20,50,60,.07)}
h1{position:relative}
.btn{box-shadow:0 4px 16px rgba(28,154,148,.28)}
.btn:hover{transform:translateY(-2px) scale(1.02)}
.entry .ttl::before{content:"▸ ";color:var(--acc)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------------------------------------------------------------- 街サマリーチップ + ミニナビ */
.citychips{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.citychips .cc{background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:6px 14px;font-size:12px;font-weight:700;color:var(--ink)}
.citychips .cc b{color:var(--acc-d);font-variant-numeric:tabular-nums}
.citychips .cc.gold{background:linear-gradient(105deg,#fff6df,#fff);border-color:#e6cf8e}
.jumpnav{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin:10px 0 0;padding:2px 0;scrollbar-width:none}
.jumpnav::-webkit-scrollbar{display:none}
.jumpnav a{flex:0 0 auto;font-size:11.5px;font-weight:700;color:var(--acc-d);
  background:var(--acc-soft);border:1px solid #cdeae7;border-radius:999px;padding:6px 13px;
  white-space:nowrap}
.jumpnav a:hover{background:var(--acc);color:#fff;text-decoration:none}

/* 駅スレを吹き出し対話UIに */
.bbs.fic .res{border:0;padding:7px 12px;display:flex;gap:8px;align-items:flex-start;background:transparent}
.bbs.fic{background:linear-gradient(180deg,#e9eff4,#e2ebf1)}
.bbs.fic .res .av0{flex:0 0 34px;width:34px;height:34px;border-radius:50%;color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800}
.bbs.fic .res .mbw{max-width:80%}
.bbs.fic .res .meta{font-size:10.5px}
.bbs.fic .res .bd{background:#fff;border-radius:4px 13px 13px 13px;padding:8px 12px;
  font-size:13.5px;line-height:1.8;box-shadow:0 1px 2px rgba(20,40,60,.08);margin-top:3px}
.bbs.fic .res.alt{flex-direction:row-reverse}
.bbs.fic .res.alt .bd{border-radius:13px 4px 13px 13px;background:#eef7ee}
.bbs.fic .res.alt .meta{justify-content:flex-end}

/* ================================================================ PREMIUM v6
   satei/kbn の設計言語: 二層シャドウ / 巨大タイポ / eyebrow / mono / スレート足回り */
:root{--mono:"SFMono-Regular",Consolas,"Roboto Mono",ui-monospace,monospace;--slate:#263a42}
body{background:
  radial-gradient(90% 520px at 50% -80px, #ffffff 0%, rgba(255,255,255,0) 70%),
  var(--page)}
h1{font-size:clamp(25px,5.4vw,40px);font-weight:900;line-height:1.3;letter-spacing:.005em}
.kick{font-size:10px;letter-spacing:.38em;color:var(--acc-d);text-transform:uppercase;
  font-family:var(--mono);font-weight:700;display:flex;align-items:center;gap:10px;margin:20px 0 -14px}
.kick::before{content:"";width:20px;height:2px;background:var(--acc)}
section{border-radius:8px;border:1px solid #eef1f2;
  box-shadow:0 3px 10px rgba(32,52,62,.06),0 22px 55px rgba(32,52,62,.10);
  padding:26px clamp(16px,3.4vw,30px);margin:22px 0 0}
section:hover{box-shadow:0 3px 10px rgba(32,52,62,.07),0 26px 60px rgba(32,52,62,.13)}
.talk{border-radius:8px;border:1px solid #eef1f2;
  box-shadow:0 3px 10px rgba(32,52,62,.06),0 22px 55px rgba(32,52,62,.10)}
h2{font-size:clamp(16.5px,2.8vw,19px);font-weight:800}
.sub,.note,.mapnote{line-height:1.9}
.citychips .cc,.kpi,.lschip{font-feature-settings:"tnum" 1}
.crumbs,.ft,.legend,.lglbl{font-family:var(--mono);letter-spacing:.02em}
.crumbs{font-size:10.5px}
footer.site{background:var(--slate);border-top:0;margin-top:64px}
.ft{color:rgba(255,255,255,.72);font-size:11px;letter-spacing:.05em}
.ft a{color:rgba(255,255,255,.85);text-decoration:underline;text-underline-offset:3px}
.wavesep{margin:44px auto -30px}
.wavesep svg path{stroke:#9fccc7}
/* 登場アニメ (JSが .inview を付ける。reduced-motionでは無効) */
@media (prefers-reduced-motion:no-preference){
  .rise{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}
  .rise.inview{opacity:1;transform:none}
}

/* どっち側: カード+ミニ地図の2カラム */
.sidewrap{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;margin-top:12px}
.sidewrap .side{margin-top:0;flex:1 1 260px}
.sidemapbox{flex:1 1 300px;max-width:380px}
.sidemap{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:12px;background:#f6f9f9}
.sidemap .qline{stroke:#b9c9cf;stroke-width:1.2;stroke-dasharray:5 4}
.sidemap .stdot{fill:#e0492f;stroke:#fff;stroke-width:2.4}
.sidemap text.stlbl{font-size:12px;font-weight:900;fill:#b23418;text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:3px}
.sidemap text.qlbl{font-size:11.5px;font-weight:800;fill:#134e4a;text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:3px}

/* satei共通のアニメ三角波フッター */
.waves{position:relative;height:150px;overflow:hidden;margin-top:56px}
.waves svg{position:absolute;inset:0;width:100%;height:100%;display:block}
footer.site{margin-top:0;border-top:0}
@media (max-width:600px){.waves{height:110px}}
@media (prefers-reduced-motion:reduce){.waves animate{display:none}}

/* サイドミニ地図 v2 レイヤ */
.sidemap .smchome{fill:#f1f4f4;stroke:#fff;stroke-width:1}
.sidemap .smroad{fill:none;stroke:#dbe2e5;stroke-width:1.1;stroke-linecap:round}
.sidemap .smroad2{fill:none;stroke:#c6d0d5;stroke-width:2.4;stroke-linecap:round}
.sidemap .smrail{fill:none;stroke:#6b7c86;stroke-width:2;stroke-dasharray:8 4;opacity:.75}
.sidemap .smst2{fill:#8a97a0;stroke:#fff;stroke-width:1.4}
.sidemap text.smstlbl2{font-size:9.5px;font-weight:700;fill:#67757e;text-anchor:middle;
  paint-order:stroke;stroke:#fff;stroke-width:2.4px}

/* 価格帯グラフの出し分け + 丁目マップのモバイル横パン */
.pbm{display:none}
@media (max-width:600px){
  .pbd{display:none}
  .pbm{display:block}
  .sidemapbox{max-width:100%}
}

/* 手動広告ユニット (2026-08-26) */
.adwrap{margin:16px 0 0;min-height:90px}

/* ---- 家賃相場ページ 追加 (2026-08-26) ---- */
.celln{display:block;font-size:10px;color:#9aa5a5;font-weight:400;}
.stgrp{font-size:15px;margin:18px 0 6px;color:#1f5f5b;}
.stlinks{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0;}
.stlinks a{display:inline-block;background:#f2f8f7;border:1px solid #d8e8e6;border-radius:999px;padding:4px 12px;font-size:13px;text-decoration:none;color:#1f5f5b;}
.stlinks a:hover{background:#e2f1ef;}
.stlinks a small{color:#7d8d8c;font-size:11px;}
.xlink{background:#f4faf9;border:1px solid #cfe7e4;}
.xlink .btn{margin-top:4px;}
.nego .kpis{margin-top:10px;}
.cmap{margin:6px 0;}
.cmap svg{width:100%;height:auto;border:1px solid #dfe9e7;border-radius:10px;background:#fbfdfd;}
.cmap a circle:hover{stroke:#d64e12;stroke-width:2.4;}
.cta .ctasub{margin:10px 0 0;font-size:12px;}
.cta .ctasub a{color:#dff3f1;text-decoration:underline;text-underline-offset:3px;}
.cta .ctasub a:hover{color:#fff;}


/* ---------------------------------------------------------------- 棟別マンション相場ページ 追加 (2026-08-27)
   棟ページ専用の部品。家賃相場ページと同じ変数・トーン(teal/白カード)をそのまま使う。 */
.spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 18px;margin:12px 0 0}
.spec div{display:flex;gap:10px;align-items:baseline;padding:7px 0;border-bottom:1px solid var(--line-soft);font-size:13.5px}
.spec dt{flex:0 0 84px;color:var(--mut);font-size:11.5px;letter-spacing:.03em;margin:0}
.spec dd{margin:0;flex:1 1 auto;color:var(--ink-str);font-weight:600;min-width:0;word-break:break-word}
.pill.warm{background:#c25e4a}
.pill.cool{background:#8ed4cf;color:#20504c}
.pill.flat{background:var(--acc)}
.feerow{display:grid;grid-template-columns:1fr;gap:10px;margin:12px 0 0}
.feecard{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.feecard .fl{display:flex;gap:10px;align-items:center;font-size:12px;color:var(--mut);letter-spacing:.03em}
.feecard .fv{font-size:22px;font-weight:800;color:var(--ink-str);font-variant-numeric:tabular-nums;line-height:1.5}
.feecard .fv small{font-size:11px;font-weight:600;color:var(--mut);margin-left:3px}
.feecard .fm{font-size:11.5px;color:var(--mut);line-height:1.75}
.feescale{position:relative;height:8px;border-radius:999px;margin:9px 0 6px;
  background:linear-gradient(90deg,#cfe9e7,#8ed4cf 45%,#f0c7bd)}
.feescale i{position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:var(--ink-str)}
.feescale u{position:absolute;top:-3px;width:2px;height:14px;background:#fff;opacity:.85}
.feeticks{display:flex;justify-content:space-between;font-size:10.5px;color:var(--mut)}
@media(min-width:660px){.feerow{grid-template-columns:1fr 1fr}}
.bldglinks{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0}
.bldglinks a{display:inline-block;background:#f2f8f7;border:1px solid #d8e8e6;border-radius:999px;
  padding:5px 13px;font-size:13px;color:#1f5f5b;line-height:1.7}
.bldglinks a:hover{background:#e2f1ef;text-decoration:none}
.bldglinks a small{display:block;color:#7d8d8c;font-size:10.5px;line-height:1.5}
.trend{font-weight:700}
.trend.up{color:var(--up)}
.trend.down{color:var(--down)}