/* TKPAGE-20261029 市区×種別ページ (/tochi/area/<県>/<市区>/tochi|kodate/) の見た目。 style.css の上に重ねる (このページだけが読む)。
   マンション棟ページ (ONEPAGE-20261029 v4) の型をそのまま: 灰色の見出し帯・罫線の表・項目名セルは薄い灰色・
   買いたい方=赤 #c0392b / 売りたい方=青 #1a4fa0 の四角いタブとボタン・下に固定の入口。
   箱・影・角丸・左の色線・英字の小見出し・絵文字は使わない (ユーザー指示 10/8・10/29)。 */
.station.op{--op-ink:#222;--op-ink2:#444;--op-mut:#6a6f75;--op-line:#cfd5db;--op-line2:#9aa3ab;--op-soft:#eef1f4;--op-bar:#e7ebef;
  --op-navy:#1f3b57;--op-red:#c0392b;--op-link:#1a4fa0;--op-buy:#c0392b;--op-buy-bg:#fbeae7;--op-sell:#1a4fa0;--op-sell-bg:#e9eff9;--op-warn:#c0262d}
.station.op{color:var(--op-ink);font-size:14px;line-height:1.75}
.station.op a{color:var(--op-link)}
.station.op .kick{display:none}
.station.op h1{font-size:24px;font-weight:800;letter-spacing:0;line-height:1.35;margin:8px 0 6px;padding:0 0 8px;border-bottom:3px solid var(--op-navy)}
.station.op .sub{font-size:12.5px;color:var(--op-mut);margin:0 0 12px}
.station.op .op-what{display:inline-block;color:var(--op-ink);font-weight:700;font-size:15px;border-left:1px solid var(--op-line);padding-left:10px;margin-left:8px}
@media (max-width:600px){.station.op h1{font-size:20px}.station.op .op-what{display:block;border:0;padding:4px 0 0;margin:0;font-size:13.5px}}

/* ---- ページ全体 = 灰色の地に白い 1 枚の面 ---- */
body{background:#eceff2}
@media (min-width:760px){.station.op{background:#fff;padding:12px 28px 34px;border:1px solid var(--op-line)}}
@media (max-width:759px){.station.op{background:#fff;padding:6px 12px 24px;margin:0 -6px;border-top:1px solid var(--op-line);border-bottom:1px solid var(--op-line)}}

/* ---- 章: 箱をやめる。 見出しは灰色の帯 ---- */
.station.op section{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin:0 0 34px}
.station.op section.nobd{margin-bottom:22px}
.station.op h2{font-size:16px;font-weight:800;color:var(--op-ink);margin:0 0 12px;padding:8px 12px;background:var(--op-bar);
  border:0;border-bottom:1px solid var(--op-line);border-radius:0;box-shadow:none;letter-spacing:0;line-height:1.5}
.station.op h2::before,.station.op h2::after{display:none;content:none}
.station.op h2.plain{background:none;border:0;padding:0}
.station.op h3{font-size:14.5px;font-weight:800;margin:18px 0 8px;padding:0 0 4px;border:0;border-bottom:1px solid var(--op-line);background:none}
.station.op h3::before{display:none;content:none}
.station.op .lead{font-size:14px;line-height:1.85;margin:0 0 10px}
.station.op .negolead{font-size:14px;line-height:1.85;margin:0 0 10px}
.station.op .note{font-size:12px;color:var(--op-mut);line-height:1.8}
.station.op .op-kindnav{margin:10px 0 0;font-size:13.5px;display:flex;flex-wrap:wrap;gap:6px 18px}
.station.op .op-kindnav a{font-weight:700}
.station.op .tbadge.ai{border-radius:2px;background:var(--op-navy);letter-spacing:.04em;margin-right:8px;vertical-align:1px}
.station.op .refwarn{margin:6px 0 10px;padding:8px 10px;border:1px solid var(--op-warn);color:var(--op-warn);font-size:12.5px;font-weight:700;line-height:1.7;background:#fff}

/* ---- 数字: 大きなタイルではなく「項目名 | 値」の表 ---- */
.station.op .kpis{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:0 0 12px;border:1px solid var(--op-line);border-bottom:0}
.station.op .kpi{display:grid;grid-template-columns:150px 1fr;background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;margin:0;border-bottom:1px solid var(--op-line)}
.station.op .kpi:nth-child(odd){border-right:1px solid var(--op-line)}
.station.op .kpi .l{display:flex;align-items:center;font-size:12px;color:var(--op-ink2);background:var(--op-soft);padding:7px 10px;letter-spacing:0;line-height:1.5}
.station.op .kpi strong{display:inline;font-size:17px;font-weight:800;color:var(--op-ink);padding:7px 10px 0;letter-spacing:0;margin:0}
.station.op .kpi strong small{font-size:11px;font-weight:600;color:var(--op-mut)}
.station.op .kpi em{display:block;font-size:11px;color:var(--op-mut);padding:0 10px 6px;line-height:1.5}
.station.op .kpi strong,.station.op .kpi em{grid-column:2}
.station.op .kpi .l{grid-row:1 / span 2}
.station.op .kpi em .delta{font-weight:700}
.station.op .kpi em .delta.up{color:#b23a2c}.station.op .kpi em .delta.down{color:#1a4fa0}
@media (max-width:700px){.station.op .kpis{grid-template-columns:1fr}.station.op .kpi:nth-child(odd){border-right:0}.station.op .kpi{grid-template-columns:120px 1fr}}
.station.op .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border:1px solid var(--op-line);margin:10px 0}
.station.op .slot{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;display:grid;grid-template-columns:1fr;border-right:1px solid var(--op-line)}
.station.op .slot:last-child{border-right:0}
.station.op .slot .sl{background:var(--op-soft);font-size:12px;padding:6px 10px;color:var(--op-ink2);border-bottom:1px solid var(--op-line)}
.station.op .slot .sv{font-size:17px;font-weight:800;padding:7px 10px}
.station.op .slot .sv small{font-size:11px;font-weight:600;color:var(--op-mut)}
@media (max-width:700px){.station.op .slots{grid-template-columns:1fr 1fr}.station.op .slot:nth-child(even){border-right:0}.station.op .slot{border-bottom:1px solid var(--op-line)}}

/* ---- 表 ---- */
.station.op .tw{border:0;border-radius:0;margin-top:6px}
.station.op table{font-size:13px;border:1px solid var(--op-line);min-width:0;width:100%}
.station.op thead th{background:var(--op-soft);color:var(--op-ink2);font-weight:700;border-bottom:1px solid var(--op-line);font-size:12px;letter-spacing:0}
.station.op th,.station.op td{padding:7px 10px;border-bottom:1px solid var(--op-line);border-right:1px solid var(--op-line);white-space:normal}
.station.op th:last-child,.station.op td:last-child{border-right:0}
.station.op td.num,.station.op th.num{white-space:nowrap}
.station.op .opbarline{display:inline-block;height:9px;background:var(--op-navy);vertical-align:middle;margin-right:6px;max-width:140px}
.station.op .netbox table{border:1px solid var(--op-line)}
.station.op .netbox td{border-bottom:1px solid var(--op-line)}
.station.op .netbox tr.total td{border-top:2px solid var(--op-line2);font-weight:800}
.station.op .chart{margin:6px 0 4px}

/* ---- ボタン・CTA: 四角・紺と赤 ---- */
.station.op .btn{border-radius:2px;box-shadow:none;transform:none;background:var(--op-red);color:#fff;padding:12px 24px;font-weight:800;font-size:14px;border:1px solid var(--op-red);line-height:1.5}
.station.op .btn:hover{transform:none;filter:brightness(.95);box-shadow:none;color:#fff}
.station.op .btn.w{background:#fff;color:var(--op-navy);border:1px solid var(--op-navy)}
.station.op .cta{background:var(--op-soft);border:1px solid var(--op-line);border-radius:0;box-shadow:none;padding:18px 20px;margin:0 0 20px;color:var(--op-ink);overflow:visible;display:block}
.station.op .cta::before,.station.op .cta::after{display:none;content:none}
.station.op .cta .cvis{display:none}
.station.op .cta .cbody{max-width:none}
.station.op .cta h2{color:var(--op-ink);background:none;border:0;padding:0;margin:0 0 8px;font-size:16px}
.station.op .cta p{color:var(--op-ink2);font-size:13.5px}
.station.op .cta .cbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.station.op .op-cta{margin:14px 0 6px;display:flex;flex-wrap:wrap;gap:8px}
@media (max-width:600px){.station.op .op-cta .btn,.station.op .cta .cbtns .btn{flex:1 1 100%;text-align:center}}

/* ---- 買いたい方 / 売りたい方 のタブ (枠付き・選択中は色地に白) ---- */
.station.op .op-tabs{margin:0 0 30px;position:relative}
.station.op .op-r{position:absolute;opacity:0;width:0;height:0;left:0;top:0;pointer-events:none}
.station.op .op-tabbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;border:0;margin:0}
.station.op .op-tab{display:block;padding:16px 12px 14px;text-align:center;font-weight:800;cursor:pointer;line-height:1.35;-webkit-tap-highlight-color:transparent;user-select:none;border:2px solid}
.station.op .op-tab .op-tl{display:block;font-size:19px;letter-spacing:.02em}
.station.op .op-tab .op-tl::before{content:'▶';font-size:12px;margin-right:6px;vertical-align:2px}
.station.op .op-tab small{display:block;font-size:11.5px;font-weight:600;margin-top:5px;line-height:1.5}
.station.op .tb-buy{color:var(--op-buy);background:var(--op-buy-bg);border-color:var(--op-buy)}
.station.op .tb-sell{color:var(--op-sell);background:var(--op-sell-bg);border-color:var(--op-sell)}
.station.op #op-buy:checked ~ .op-tabbar .tb-buy{background:var(--op-buy);color:#fff}
.station.op #op-sell:checked ~ .op-tabbar .tb-sell{background:var(--op-sell);color:#fff}
.station.op #op-buy:checked ~ .op-tabbar .tb-buy small,.station.op #op-sell:checked ~ .op-tabbar .tb-sell small{color:#fff;opacity:.9}
.station.op #op-buy:checked ~ .op-tabbar .tb-buy .op-tl::before,.station.op #op-sell:checked ~ .op-tabbar .tb-sell .op-tl::before{content:'▼'}
@media (max-width:600px){.station.op .op-tab{padding:12px 8px 10px}.station.op .op-tab .op-tl{font-size:16px}.station.op .op-tab small{font-size:10.5px}}
.station.op .op-pane{display:none;padding:16px 16px 14px;margin-top:8px;border:2px solid}
.station.op .op-pane-buy{border-color:var(--op-buy)}
.station.op .op-pane-sell{border-color:var(--op-sell)}
@media (max-width:759px){.station.op .op-pane{padding:12px 10px 10px}}
.station.op .op-pane-buy .btn{background:var(--op-buy);border-color:var(--op-buy)}
.station.op .op-pane-sell .btn{background:var(--op-sell);border-color:var(--op-sell)}
.station.op .op-pane-buy .btn.w{background:#fff;color:var(--op-buy);border-color:var(--op-buy)}
.station.op .op-pane-sell .btn.w{background:#fff;color:var(--op-sell);border-color:var(--op-sell)}
.station.op .op-pane-buy h2{background:var(--op-buy-bg);border-bottom-color:var(--op-buy)}
.station.op .op-pane-sell h2{background:var(--op-sell-bg);border-bottom-color:var(--op-sell)}
.station.op .op-pane-sell .cta{background:var(--op-sell-bg);border-color:var(--op-sell)}
.station.op .op-pane-sell .cta .btn{background:var(--op-sell);border-color:var(--op-sell)}
.station.op .op-pane-sell .cta .btn.w{background:#fff;color:var(--op-sell)}
.station.op .op-switch{margin:14px 0 0;padding:10px 0 0;border-top:1px dashed var(--op-line);font-size:13px;color:var(--op-ink2)}
.station.op .op-switch a{font-weight:800}
.station.op #op-buy:checked ~ .op-pane-buy{display:block}
.station.op #op-sell:checked ~ .op-pane-sell{display:block}
.station.op .op-head{margin:0 0 18px;padding:0 0 12px;border-bottom:1px solid var(--op-line)}
.station.op .op-h{font-size:18px;font-weight:800;border:0;padding:0;margin:0 0 6px;background:none;line-height:1.45}
.station.op .op-head-buy .op-h{color:var(--op-buy)}
.station.op .op-head-sell .op-h{color:var(--op-sell)}
.station.op .op-pane-buy .op-switch a{color:var(--op-sell)}
.station.op .op-pane-sell .op-switch a{color:var(--op-buy)}
.station.op .op-lead{margin:0;font-size:13.5px;line-height:1.85;color:var(--op-ink2)}
.station.op .op-pane section:last-of-type{margin-bottom:10px}

/* ---- 3 つの枠 (新着フォローのメリット / AI 査定の入口) ---- */
.station.op .op-merit{margin:0 0 28px;padding:0}
.station.op .op-merit h2.plain{font-size:15px;margin:0 0 10px;padding:8px 12px;background:var(--op-bar);border-bottom:1px solid var(--op-line)}
.station.op .op-merits{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px}
.station.op .op-merits div{padding:12px 14px;border:1px solid var(--op-buy);background:#fff}
.station.op .op-merits b{display:block;font-size:14px;font-weight:800;color:var(--op-buy);margin:0 0 4px;padding:0 0 4px;border-bottom:1px solid var(--op-line)}
.station.op .op-merits span{display:block;font-size:12.5px;line-height:1.7;color:var(--op-ink2)}
.station.op .op-merits.sell div{border-color:var(--op-sell)}
.station.op .op-merits.sell b{color:var(--op-sell)}
@media (max-width:700px){.station.op .op-merits{grid-template-columns:1fr}}
.station.op .op-merit .op-cta{margin:8px 0 4px}

/* ---- 町丁目・姉妹エリアのチップは罫線の四角に ---- */
.station.op .citychips .cc{border-radius:2px;box-shadow:none;background:#fff;border:1px solid var(--op-line);color:var(--op-ink);font-size:12.5px}
.station.op .citychips .cc b{color:var(--op-navy)}
.station.op .related{border-top:1px solid var(--op-line);padding:14px 0 0;margin-top:10px;background:transparent;border-radius:0;box-shadow:none}

/* 章が「ふわっと」現れる演出 (style.css .rise) はこのページでは使わない。 最初から全部見える (スクショでも消えない) */
.station.op .rise{opacity:1!important;transform:none!important;transition:none!important}

/* ---- 下に固定の入口 (買いたい方=赤 / 売りたい方=青)。 600px スクロールしたら出る・タブの近くでは消える ---- */
.ctabar,.ctafloat{display:none!important}
.station.op{padding-bottom:70px}
.opbar{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:8px;justify-content:center;padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.96);border-top:1px solid #cfd5db;transform:translateY(110%);transition:transform .25s;pointer-events:none}
.opbar.on{transform:none;pointer-events:auto}
.opbar .opb{flex:1 1 0;max-width:300px;display:block;text-align:center;color:#fff;text-decoration:none;font-weight:800;font-size:14px;line-height:1.25;padding:9px 8px;border-radius:3px}
.opbar .opb small{display:block;font-size:10.5px;font-weight:600;opacity:.92;margin-top:2px}
.opbar .opb-buy{background:#c0392b}.opbar .opb-sell{background:#1a4fa0}
.opbar .opb:hover{filter:brightness(.95);color:#fff;text-decoration:none}
@media (max-width:600px){.opbar{padding:6px 8px calc(6px + env(safe-area-inset-bottom))}.opbar .opb{font-size:13px;padding:7px 6px}.opbar .opb small{font-size:10px}}

/* ---- 市区ページ (city.html) に足した 2 つの入口 (土地 / 戸建て) ---- */
.tk-entry{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0 4px}
.tk-entry a{display:block;padding:14px 16px;border:2px solid #1f3b57;background:#fff;color:#1f3b57;text-decoration:none;font-weight:800;font-size:16px;line-height:1.4}
.tk-entry a small{display:block;font-size:12px;font-weight:600;color:#444;margin-top:4px}
.tk-entry a:hover{background:#e9eff9;text-decoration:none}
.tk-entry a.kodate{border-color:#1f6f5f;color:#1f6f5f}
.tk-entry a.kodate:hover{background:#e7f3f0}
@media (max-width:600px){.tk-entry{grid-template-columns:1fr}}

/* スマホで表の 1 列目 (広さ・築年・価格帯) が 1 文字ずつ折れないように。 横にはみ出す分は .tw が横スクロールする */
.station.op td:first-child,.station.op th:first-child{white-space:nowrap}

/* ---- アピール枠 (10/29 ユーザー「他の箱とかぶってアピール感がない」): 色帯の見出し + チェック付き箇条書き + 大きなボタン。 表 (灰色の帯) とは別の見え方 ---- */
.station.op .op-appeal{margin:0 0 30px;border:2px solid var(--op-buy);background:#fff}
.station.op .ap-head{background:var(--op-buy);color:#fff;font-size:17px;font-weight:800;line-height:1.45;padding:12px 16px}
.station.op .ap-tag{display:inline-block;background:#fff;color:var(--op-buy);font-size:11.5px;font-weight:800;padding:2px 8px;margin-right:10px;vertical-align:2px;border-radius:2px;white-space:nowrap}
.station.op .ap-body{padding:14px 16px 16px}
.station.op .ap-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:12px}
.station.op .ap-list li{position:relative;padding:0 0 0 36px;font-size:14px;line-height:1.7}
.station.op .ap-list li::before{content:'';position:absolute;left:0;top:2px;width:24px;height:24px;border-radius:50%;background:var(--op-buy)}
.station.op .ap-list li::after{content:'';position:absolute;left:8px;top:6px;width:6px;height:12px;border-right:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(45deg)}
.station.op .ap-list b{display:block;font-size:15.5px;font-weight:800;color:var(--op-ink);margin:0 0 2px}
.station.op .ap-list span{display:block;color:var(--op-ink2);font-size:13.5px;line-height:1.7}
.station.op .ap-btn{display:block;width:100%;box-sizing:border-box;text-align:center;font-size:16px;padding:15px 16px;border-radius:3px}
.station.op .ap-note{margin:10px 0 0;font-size:12px;color:var(--op-mut);line-height:1.7}
.station.op .ap-sell{border-color:var(--op-sell)}
.station.op .ap-sell .ap-head{background:var(--op-sell)}
.station.op .ap-sell .ap-tag{color:var(--op-sell)}
.station.op .ap-sell .ap-list li::before{background:var(--op-sell)}
.station.op .op-pane-buy .ap-btn{background:var(--op-buy);border-color:var(--op-buy)}
.station.op .op-pane-sell .ap-btn{background:var(--op-sell);border-color:var(--op-sell)}
@media (min-width:760px){.station.op .ap-list{grid-template-columns:repeat(3,1fr);gap:16px}.station.op .ap-btn{display:inline-block;width:auto;min-width:380px}.station.op .ap-head{font-size:18px}}

/* ---- 表の横スクロール案内 (JS が can-scroll を付けた表だけ) ---- */
.station.op .tw{position:relative}
.station.op .tw.can-scroll::before{content:'横にスクロールできます →';display:block;font-size:11.5px;font-weight:700;color:var(--op-ink2);background:var(--op-soft);border:1px solid var(--op-line);border-bottom:0;padding:5px 10px;text-align:right}
.station.op .tw.can-scroll::after{content:'';position:absolute;right:0;top:0;bottom:0;width:28px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95));pointer-events:none}

/* ---- スマホ (ユーザー 10/29「スマホ表示を完璧に」「見切れ」「入力時にズームしない」) ---- */
.station.op input,.station.op select,.station.op textarea{font-size:16px}
@media (max-width:600px){
  .station.op{font-size:14px}
  .station.op .sub{font-size:12px;line-height:1.7}
  .station.op .lead,.station.op .negolead,.station.op .op-lead{font-size:14px}
  .station.op h2{font-size:15.5px;padding:8px 10px}
  .station.op h3{font-size:14px}
  .station.op table{font-size:12.5px}
  .station.op th,.station.op td{padding:7px 6px}
  .station.op td.num,.station.op th.num{white-space:normal}
  .station.op td:first-child,.station.op th:first-child{white-space:normal;min-width:5.2em}
  .station.op .opbarline{max-width:56px}
  .station.op .kpi{grid-template-columns:104px 1fr}
  .station.op .kpi .l{font-size:11.5px;padding:6px 8px}
  .station.op .kpi strong{font-size:16.5px;padding:6px 8px 0}
  .station.op .slot .sl{font-size:11.5px;padding:5px 8px}
  .station.op .slot .sv{font-size:15.5px;padding:6px 8px}
  .station.op .op-kindnav{flex-direction:column;gap:6px;font-size:14px}
  .station.op .btn{display:block;text-align:center;font-size:15px;padding:14px 14px}
  .station.op .op-cta{display:block}
  .station.op .citychips .cc{font-size:12.5px;padding:8px 10px}
  .station.op .netbox td:first-child{min-width:0}
  .station.op .refwarn{font-size:12px}
  .station.op .op-switch{font-size:13px}
}

/* ---- 数字の枠 (.slots) の見出しの高さを揃える (10/29 ユーザー「見出しの高さがちぐはぐ」): 項目名は 2 行ぶんの高さで固定・値は縦中央 ---- */
.station.op .slot .sl{min-height:2.9em;display:flex;align-items:center;line-height:1.45}
.station.op .slot .sv{display:flex;align-items:center;min-height:2.5em;line-height:1.3;flex-wrap:wrap;gap:0 4px}
.station.op .kpi .l{line-height:1.45}

/* ---- 丁目別 AI 坪単価の地図 (#aimap) ---- */
.station.op .tkaimapbox{margin:.6em 0 0}
.station.op #tkaimap{width:100%;height:clamp(380px,50vw,640px);border:1px solid var(--op-line);background:#f3f3f1}
@media (max-width:640px){ .station.op #tkaimap{height:clamp(360px,110vw,520px)} }
.station.op .tmaplg{display:flex;flex-wrap:wrap;gap:.35em .8em;align-items:center;margin:.6em 0 .2em;font-size:12px;color:#4a4a46}
.station.op .tmaplgt{font-weight:700;color:#2d2d2a;width:100%}
.station.op .tmaplgi{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap}
.station.op .tmaplgi i{width:14px;height:14px;border:1px solid rgba(0,0,0,.12);display:inline-block}
.tmappop b{display:block;font-size:13.5px;margin:0 0 2px}
.tmappop span{display:block;font-size:12px;color:#444}
.tmappop .v{color:#0f6a62;font-weight:800;font-size:13px}
.tmappop a{display:inline-block;margin-top:.3em;color:#1a4fa0;font-weight:700;font-size:12.5px}
.station.op .warn{background:var(--op-soft);border:1px solid var(--op-line);padding:10px 12px;color:var(--op-ink2);border-radius:0;font-size:13px}
.maplibregl-popup-content{padding:10px 12px;border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.2)}