/* =====================================================================
* 名古屋賃貸研究所 — デザインシステム（2026-09-08 v2：ポータル標準の作法に合わせた）
*
* ★SUUMO / LIFULL HOME'S の実物（愛知トップ・エリア選択・一覧・詳細）を確認して合わせた。
* 白地・薄いグレーの表・青いボタン・赤オレンジの価格・件数の常時表示・チェックボックスで複数選択。
* ★クラス名は render.mjs / search.js / fav.js と揃える。旧 React 版 CSS と extra.css は使わない。
* ★文字サイズの下限は 11.5px（社内規約）。ここでは 11.5px が最小。
* ★720px までがスマホ、721px〜がPC（一覧のサイドバーは 900px〜）。
* ===================================================================== */

:root {
--brand: #1b3a6b; /* 見出し帯・ヘッダー */
--brand-700: #12294d;
--brand-50: #eef3f9;
--action: #2b6cd9; /* 主ボタン */
--action-700: #1f56b3;
--action-50: #e8f0fc;
--price: #e5461a; /* 賃料 */
--link: #1a56b8;
--line: #06c755;
--line-700: #05a847;
--cta: #f26a1b; /* 問い合わせ系（ポータルのオレンジ） */
--cta-700: #d55b12;
--bg: #f3f5f8;
--border: #d6dbe1;
--border-light: #e6eaef;
--th: #f0f3f7; /* 表の見出しセル */
--text: #222831;
--muted: #5f6b7a;
--faint: #8b95a3;
--ok: #158f5e;
--ok-50: #e7f6ef;
--warn: #9a5b00;
--warn-50: #fff6e5;
--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", Meiryo, system-ui, sans-serif;
--container: 1100px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--text); background: #fff; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.4; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 2px solid var(--action); outline-offset: 2px; }
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding-left: 12px; padding-right: 12px; }
@media (min-width: 721px) { .container { padding-left: 16px; padding-right: 16px; } }

/* ── ボタン ─────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 0 18px; border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; border: 1px solid transparent; text-decoration: none !important; }
.btn-action { background: var(--action); color: #fff; border-color: var(--action-700); }
.btn-action:hover { background: var(--action-700); }
.btn-cta { background: var(--cta); color: #fff; border-color: var(--cta-700); }
.btn-cta:hover { background: var(--cta-700); }
.btn-line { background: var(--line); color: #fff; border-color: var(--line-700); }
.btn-line:hover { background: var(--line-700); }
.btn-line::before { content: ""; width: 18px; height: 18px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 3C6.5 3 2 6.6 2 11c0 3.9 3.4 7.1 8 7.8v2.7c0 .4.4.6.7.4l3.6-2.5C18.7 18.9 22 15.3 22 11c0-4.4-4.5-8-10-8z'/%3E%3C/svg%3E") center/contain no-repeat; }
.btn-outline { background: #fff; color: var(--action); border-color: var(--action); }
.btn-outline:hover { background: var(--action-50); }
.btn-gray { background: #fff; color: var(--text); border-color: var(--border); }
.btn-gray:hover { background: var(--bg); }
.btn-sm { min-height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { min-height: 48px; padding: 0 28px; font-size: 16px; }
.btn-block { width: 100%; }
/* 問い合わせボタン（2026-10-07 刷新）：全ページ共通。角丸・影・封筒アイコンで「押せる主ボタン」と分かるようにする */
.btn-contact { position: relative; min-height: 48px; padding: 0 22px; gap: 8px; border: 0; border-bottom: 3px solid var(--cta-700); border-radius: 8px; background: var(--cta); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: 0.02em; box-shadow: 0 4px 12px rgba(242, 106, 27, 0.28); transition: transform 0.08s, box-shadow 0.15s, background 0.15s; }
.btn-contact::before { content: ""; width: 20px; height: 20px; flex: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn-contact:hover { background: var(--cta-700); box-shadow: 0 6px 16px rgba(242, 106, 27, 0.36); }
.btn-contact:active { transform: translateY(2px); border-bottom-width: 1px; box-shadow: none; }
.btn-contact.btn-sm { min-height: 40px; padding: 0 14px; font-size: 13.5px; }
.btn-contact.btn-lg { min-height: 54px; padding: 0 28px; font-size: 17px; }
.btn-contact.btn-lg::before { width: 22px; height: 22px; }
.header-actions .btn-contact { display: none; }
@media (min-width: 721px) { .header-actions .btn-contact { display: inline-flex; margin-left: 8px; } }
.sticky-cta .btn-contact { min-height: 44px; padding: 0 10px; font-size: 14px; border-bottom-width: 2px; box-shadow: none; }
.sticky-cta .btn-contact::before { width: 18px; height: 18px; }
.cta-note { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: center; }

/* ── ヘッダー ─────────────────────────────────────────── */
.topbar { background: var(--brand); color: #fff; font-size: 12px; }
.topbar .container { display: flex; align-items: center; justify-content: flex-end; gap: 16px; height: 30px; }
.topbar a { color: #fff; display: inline-flex; align-items: center; gap: 4px; }
.topbar .fav-count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--cta); color: #fff; font-size: 11.5px; display: inline-grid; place-items: center; }
.topbar .fav-count[data-n="0"], .topbar .fav-count:empty { display: none; }
.site-header { background: #fff; border-bottom: 2px solid var(--brand); }
.site-header .container { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none !important; color: var(--brand); }
.brand-mark { width: 32px; height: 32px; border-radius: 6px; background: var(--brand); display: grid; place-items: center; flex: none; }
.brand-mark svg { width: 20px; height: 20px; }
.brand-logo { width: 40px; height: 40px; flex: none; display: block; background: url("data:image/png;base64,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") center / contain no-repeat; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: 0.02em; white-space: nowrap; }
.brand-sub { display: none; font-size: 11.5px; color: var(--muted); }
@media (min-width: 721px) { .brand-sub { display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.25; } }
.global-nav { display: none; }
@media (min-width: 900px) {
.global-nav { display: flex; gap: 2px; margin-left: 8px; }
.global-nav a { padding: 8px 12px; font-size: 14px; font-weight: 700; color: var(--text); border-radius: 4px; }
.global-nav a:hover, .global-nav a[aria-current="page"] { background: var(--brand-50); color: var(--brand); text-decoration: none; }
}
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.header-actions .btn-line { display: none; }
@media (min-width: 721px) { .header-actions .btn-line { display: inline-flex; margin-left: 8px; } }
.icon-link { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 50px; font-size: 11.5px; white-space: nowrap; color: var(--brand); text-decoration: none !important; position: relative; }
.icon-link svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-link .fav-count { position: absolute; top: -4px; right: 6px; min-width: 16px; height: 16px; border-radius: 8px; background: var(--cta); color: #fff; font-size: 11.5px; display: grid; place-items: center; padding: 0 4px; }
.icon-link .fav-count[data-n="0"], .icon-link .fav-count:empty { display: none; }
.menu-btn { display: inline-flex; flex-direction: column; align-items: center; min-width: 44px; font-size: 11.5px; white-space: nowrap; color: var(--brand); }
.menu-btn span { display: block; width: 20px; height: 2px; background: var(--brand); margin: 8px 0 9px; box-shadow: 0 -6px 0 var(--brand), 0 6px 0 var(--brand); }
@media (min-width: 900px) { .menu-btn { display: none; } }
.drawer { position: fixed; inset: 0; z-index: 90; display: none; }
.drawer.is-open { display: block; }
.drawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.drawer-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); background: #fff; overflow: auto; }
.drawer-head { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 14px; background: var(--brand); color: #fff; font-weight: 700; }
.drawer-close { color: #fff; font-size: 24px; width: 36px; height: 36px; }
.drawer-panel .nav-item { display: block; padding: 12px 14px; border-bottom: 1px solid var(--border-light); color: var(--text); font-weight: 600; }
.drawer-panel .nav-item::after { content: "›"; float: right; color: var(--faint); }
.drawer-panel .drawer-sec { padding: 10px 14px 4px; font-size: 12px; color: var(--faint); background: var(--bg); }
.drawer-panel .btn { margin: 12px 14px 0; width: calc(100% - 28px); }

/* ── パンくず・見出し帯 ─────────────────────────────── */
.breadcrumbs { font-size: 12px; color: var(--muted); padding: 10px 0 6px; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumbs .sep { color: var(--faint); }
.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; }
.page-title { border: 1px solid var(--border); border-top: 3px solid var(--brand); background: #fff; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.page-title h1 { font-size: 18px; }
@media (min-width: 721px) { .page-title h1 { font-size: 21px; } }
.page-title .total { font-size: 13px; color: var(--muted); }
.page-title .total b { font-size: 22px; color: var(--price); font-weight: 800; margin: 0 2px; }
.page-title small { display: inline-flex; align-items: center; gap: 4px; background: var(--brand-50); color: var(--brand-700); font-weight: 700; font-size: 13.5px; padding: 6px 12px; border-radius: 999px; }
.page-title small b { color: var(--price); font-size: 15px; font-weight: 800; }
.sec-title { display: flex; align-items: center; gap: 8px; border-left: 5px solid var(--brand); padding-left: 10px; font-size: 16px; margin: 26px 0 12px; }
.sec-title small { font-weight: 400; color: var(--muted); font-size: 12px; }
.sec-title .more { margin-left: auto; font-size: 12px; font-weight: 400; }
/* ★2026-09-11 追加。スマホで「新着物件 本日の新着◯件・掲載終了◯件」が文字の途中で
折り返されていた（「新着物」「件」「777」「件」のように割れる）のを直す（オーナー指示）。
見出し・件数バッジ・リンクをそれぞれ最後まで1行で表示し、入り切らない分だけ
バッジを次の行に折り返す（単語の途中では折り返さない）。 */
.sec-title-t { white-space: nowrap; }
@media (max-width: 720px) {
.sec-title { flex-wrap: wrap; row-gap: 3px; }
.sec-title .more { white-space: nowrap; }
.sec-title small { white-space: nowrap; font-size: 11.5px; flex: 1 0 100%; order: 3; margin-left: 15px; }
}
.lead { color: var(--muted); font-size: 13px; }

/* ── トップ：探し方 ────────────────────────────────────── */
.howto { border: 2px solid var(--brand); border-radius: 6px; padding: 16px; background: #fff; }
/* ★2026-09-09 トップのみ page-title と howto を1つの枠に合体表示 */
.page-title:has(+ .howto) { border: 2px solid var(--brand); border-top: 3px solid var(--brand); border-bottom: none; border-radius: 6px 6px 0 0; margin-bottom: 0; }
.page-title + .howto { border-top: none; border-radius: 0 0 6px 6px; margin-top: 0; }
.howto-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.howto-head .count { background: var(--brand); color: #fff; border-radius: 4px; padding: 6px 14px; font-size: 12px; line-height: 1.2; text-align: center; }
.howto-head .count b { display: block; font-size: 22px; font-weight: 800; }
.howto-head h2 { font-size: 18px; }
.howto-head p { font-size: 12px; color: var(--muted); }
.howto-main { display: grid; gap: 10px; }
@media (min-width: 721px) { .howto-main { grid-template-columns: 1fr 1fr; } }
/* ★2026-09-10 追加。「地図から探す」を「駅・路線」「エリア（区）」と同格の大ボタンに格上げ（オーナー指示）。 */
@media (min-width: 721px) { .howto-main-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 721px) and (max-width: 900px) { .howto-main-3 a { font-size: 17px; padding: 10px 12px; gap: 8px; } .howto-main-3 a svg { width: 28px; height: 28px; } }
/* ★2026-09-12 追加。「学区から探す」を主要4ボタンに追加（オーナー指示）。 */
.howto-main a { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 10px 16px; border-radius: 6px; background: var(--action); color: #fff; text-decoration: none !important; font-weight: 800; font-size: 20px; border-bottom: 3px solid var(--action-700); }
.howto-main a:hover { background: var(--action-700); }
.howto-main a svg { width: 34px; height: 34px; flex: none; fill: none; stroke: #fff; stroke-width: 1.8; }
.howto-main a small { font-size: 13px; font-weight: 700; }
.howto-main a .arrow { margin-left: auto; font-size: 22px; }
/* ★2026-09-13 改訂：オーナー指示で学区ボタンを4番目（最後）に並べ替え、スマホは2×2グリッド化。
   アイコンは廃止して文字中心にし、配色はブランドの紺（主3ボタン）／白地アウトライン（学区のみ・補助的な位置づけ）に統一。
   .howto-main a と同じ特異性（クラス+タグ）のため、必ずそれより後ろに置いて確実に上書きする。 */
.howto-main-4 { grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 721px) { .howto-main-4 { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
.howto-main-4 a { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 3px; min-height: 64px; padding: 10px 26px 10px 12px; border-radius: 6px; background: var(--brand); border-bottom: 3px solid var(--brand-700); }
.howto-main-4 a:hover { background: var(--brand-700); }
.howto-main-4 a svg { display: none; }
.howto-main-4 a b { font-size: 14px; font-weight: 800; letter-spacing: 0; display: block; word-break: keep-all; overflow-wrap: break-word; line-height: 1.3; }
.howto-main-4 a small { font-size: 11.5px; font-weight: 600; white-space: nowrap; color: rgba(255,255,255,.72); }
.howto-main-4 a .arrow { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); margin-left: 0; font-size: 17px; font-weight: 400; color: var(--action); }
.howto-main-4 a.is-sub { background: #fff; color: var(--brand); border: 1.5px solid var(--brand); }
.howto-main-4 a.is-sub:hover { background: var(--brand-50); }
.howto-main-4 a.is-sub small { color: var(--muted); }
.howto-main-4 a.is-sub .arrow { color: var(--brand); }
@media (min-width: 721px) { .howto-main-4 a { min-height: 68px; padding: 12px 30px 12px 16px; } .howto-main-4 a b { font-size: 18px; } .howto-main-4 a small { font-size: 12px; } }
@media (min-width: 721px) and (max-width: 1120px) { .howto-main-4 a { min-height: 60px; padding: 8px 24px 8px 12px; } .howto-main-4 a b { font-size: 15px; } .howto-main-4 a small { font-size: 11.5px; } }
/* ★2026-10-04 オーナー指示：旧「howto-sub」（6ボタン）を廃止し、同じ位置におすすめ特集を置く。 */
.keyword-bar { display: flex; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--border); }
.keyword-bar input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 14px; }
.keyword-bar input:focus { border-color: var(--action); outline: none; box-shadow: 0 0 0 3px var(--action-50); }

/* ── トップ：特集 ────────────────────────────────────── */
.howto-feat { margin-top: 14px; }
.howto-feat .sec-title { margin: 0 0 10px; font-size: 15px; }
/* 10個を5列×2行に収める（2026-10-04）。件数は社名の下に折り返して幅を節約する。 */
@media (min-width: 900px) { .howto-feat .feature-grid { grid-template-columns: repeat(5, 1fr); gap: 8px; } .howto-feat .feature-card { padding: 10px; } .howto-feat .feature-card b { font-size: 13px; line-height: 1.35; } .howto-feat .feature-card b i { display: block; margin: 2px 0 0; font-size: 12.5px; } }
.feature-grid { display: grid; gap: 10px; }
@media (min-width: 721px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
.feature-card { display: flex; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--border); border-radius: 4px; background: #fff; text-decoration: none !important; color: var(--text); }
.feature-card:hover { background: var(--brand-50); }
.feature-card .fc-icon { flex: none; width: 52px; height: 52px; border-radius: 6px; background: var(--brand-50); color: var(--brand); display: grid; place-items: center; }
.feature-card .fc-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.feature-card b { color: var(--link); font-size: 14px; }
.feature-card b i { font-style: normal; font-weight: 700; color: var(--price); margin-left: 6px; font-size: 13px; }
.feature-card p { font-size: 12px; color: var(--muted); margin-top: 2px; }
/* ★2026-09-10 追加。スマホで「おすすめ特集から探す」が縦に間延びしていたのをコンパクト化（オーナー指示）。
2列グリッド・アイコン縮小・説明文を1行に省略して、6件でもスクロール量を抑える。 */
@media (max-width: 720px) {
.feature-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
.feature-card { padding: 8px; gap: 8px; align-items: flex-start; }
.feature-card .fc-icon { width: 34px; height: 34px; }
.feature-card .fc-icon svg { width: 18px; height: 18px; }
.feature-card b { font-size: 12.5px; line-height: 1.3; }
.feature-card b i { display: block; margin-left: 0; font-size: 11.5px; }
.feature-card p { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; font-size: 11.5px; margin-top: 1px; }
}
.cu { font-variant-numeric: tabular-nums; }

/* ── 表（相場・ランキング） ─────────────────────────── */
.tbl { width: 100%; border: 1px solid var(--border); font-size: 13px; }
.tbl th, .tbl td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: middle; }
.tbl th { background: var(--th); font-weight: 700; color: var(--text); }
.tbl td.num, .tbl th.num { text-align: right; }
.tbl tbody tr:hover { background: #fafbfd; }
.tbl-area { min-width: 640px; }
/* ★2026-09-10 追加。「名古屋市の区一覧（間取り別の平均賃料）」はスマホで横スクロール必須の6列表なので、
セルの余白・文字サイズを縮めて1画面に収まる列を増やし、行の高さも詰めた（オーナー指示）。 */
@media (max-width: 720px) {
.tbl-area { min-width: 460px; }
.tbl-area th, .tbl-area td { padding: 5px 6px; font-size: 11.5px; white-space: nowrap; }
.tbl-area td:first-child, .tbl-area th:first-child { min-width: 4.5em; }
}
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 720px) { .scroll-x-wrap { position: relative; } .scroll-x-wrap::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: linear-gradient(to right, rgba(255,255,255,0), rgba(0,0,0,.15)); pointer-events: none; } }
.rank { display: grid; gap: 16px; }
@media (min-width: 721px) { .rank { grid-template-columns: 1fr 1fr; } }
.rank h3 { font-size: 14px; margin-bottom: 6px; }
.rank ol { border-top: 1px solid var(--border); }
.rank li { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); font-size: 13px; }
.rank li .pos { flex: none; width: 34px; height: 24px; border-radius: 3px; background: var(--brand-50); color: var(--brand); font-weight: 800; display: grid; place-items: center; font-size: 12px; }
.rank li:nth-child(1) .pos { background: #fff3c4; color: #8a6d00; }
.rank li:nth-child(2) .pos { background: #eceff3; color: #5f6b7a; }
.rank li:nth-child(3) .pos { background: #fde5d6; color: #9a4a1c; }
.rank li .n { margin-left: auto; color: var(--muted); font-size: 12px; }
.rank li .avg { color: var(--price); font-weight: 700; }
.linklist { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13px; }
.linklist a i { font-style: normal; color: var(--faint); font-size: 12px; margin-left: 2px; }

/* ── 検索フォーム（エリア／駅／一覧サイドバー共通） ───────── */
.step { display: flex; align-items: center; gap: 10px; margin: 18px 0 8px; flex-wrap: wrap; }
.step .no { background: var(--cta); color: #fff; font-weight: 800; font-size: 12px; padding: 4px 10px; border-radius: 3px; }
.step h2 { font-size: 16px; }
.step small { color: var(--muted); font-size: 12px; }
.step .right { margin-left: auto; font-size: 12px; }
.ckgrid { border: 1px solid var(--border); }
.ckgrid .grp { display: grid; grid-template-columns: 1fr; }
@media (min-width: 721px) { .ckgrid .grp { grid-template-columns: 170px 1fr; } }
.ckgrid .grp + .grp { border-top: 1px solid var(--border); }
.ckgrid .grp-h { background: var(--th); padding: 10px 12px; font-weight: 700; font-size: 14px; }
.ckgrid .grp-h small { font-weight: 400; color: var(--muted); display: block; font-size: 12px; }
.ckgrid .grp-b { padding: 8px 12px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 8px; }
@media (min-width: 721px) { .ckgrid .grp-b { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .ckgrid .grp-b { grid-template-columns: repeat(4, 1fr); } }
.ck { display: inline-flex; align-items: center; gap: 6px; padding: 5px 2px; font-size: 13px; cursor: pointer; line-height: 1.3; white-space: normal; }
.ck small { font-size: 12px; }
.ck input { width: 17px; height: 17px; margin: 0; accent-color: var(--action); flex: none; }
.ck i { font-style: normal; color: var(--faint); font-size: 12px; }
.ck.is-zero { color: var(--faint); }
.cond { border: 1px solid var(--border); }
.cond .row { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--border); }
.cond .row:first-child { border-top: 0; }
@media (min-width: 721px) { .cond .row { grid-template-columns: 170px 1fr; } }
.cond .row > span { background: var(--th); padding: 10px 12px; font-weight: 700; font-size: 13px; }
.cond .txt { min-height: 36px; min-width: 260px; max-width: 100%; padding: 0 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; background: #fff; }
.cond .row > div { padding: 8px 12px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 13px; }
.sel { min-height: 34px; padding: 0 28px 0 8px; border: 1px solid var(--border); border-radius: 3px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f6b7a' stroke-width='2.2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 6px center/16px; appearance: none; -webkit-appearance: none; font-size: 13px; }
.sel:focus { border-color: var(--action); outline: none; }
.pair { display: inline-flex; align-items: center; gap: 6px; }
.pair .sel { min-width: 100px; }
.search-submit { position: sticky; bottom: 0; z-index: 20; background: rgba(243, 245, 248, 0.97); border-top: 1px solid var(--border); padding: 10px 0; margin-top: 16px; }
.search-submit .container { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.search-submit .btn-action { min-width: 260px; min-height: 48px; font-size: 16px; }
.search-submit .btn-action b { font-size: 18px; }
.search-submit .reset { font-size: 12px; color: var(--muted); text-decoration: underline; }
.picked-line { font-size: 13px; padding: 8px 12px; background: var(--brand-50); border: 1px solid #cfdcee; border-radius: 4px; margin: 10px 0; }
.picked-line b { color: var(--brand); }
.picked-line:empty { display: none; }
.line-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
/* ★2026-09-19 是正：スマホで路線ボタンが横スクロールになり見づらいとの報告。横スクロールをやめ、ステップ2の駅チェックボックス(.ckgrid)と同様に折り返す2列グリッドに変更。 */ @media (max-width: 720px) { .line-tabs button { flex: 1 1 calc(50% - 3px); white-space: normal; text-align: left; } }
.line-tabs button { padding: 8px 12px; border: 1px solid var(--border); border-radius: 4px; font-size: 13px; background: #fff; }
.line-tabs button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.line-tabs button i { font-style: normal; color: var(--faint); font-size: 12px; margin-left: 4px; }
.line-tabs button.is-active i { color: rgba(255, 255, 255, 0.75); }

/* ── 一覧ページ ─────────────────────────────────────── */
.list-layout { display: grid; gap: 16px; padding-bottom: 30px; }
@media (min-width: 900px) { .list-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; gap: 20px; } }
.side { border: 1px solid var(--border); background: #fff; font-size: 13px; }
@media (max-width: 899px) {
.side { position: fixed; inset: 0; z-index: 80; overflow: auto; display: none; border: 0; }
.side.is-open { display: block; }
body.filter-open { overflow: hidden; }
}
.side-h { background: var(--brand); color: #fff; font-weight: 700; padding: 9px 12px; font-size: 14px; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 2; }
.side-h button { color: #fff; font-size: 22px; width: 30px; height: 30px; }
@media (min-width: 900px) { .side-h button { display: none; } }
.side-sec { border-bottom: 1px solid var(--border); }
.side-sec > summary { list-style: none; cursor: pointer; padding: 9px 12px; font-weight: 700; background: var(--th); display: flex; justify-content: space-between; align-items: center; }
.side-sec > summary::-webkit-details-marker { display: none; }
.side-sec > summary::after { content: ""; width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); margin-right: 4px; }
.side-sec[open] > summary::after { transform: rotate(-135deg); }
.side-sec > summary .picked-n { margin-left: auto; margin-right: 8px; font-size: 11.5px; color: #fff; background: var(--cta); border-radius: 9px; padding: 1px 7px; }
.side-sec > summary .picked-n:empty { display: none; }
.side-b { padding: 8px 12px 10px; display: grid; gap: 6px; }
.side-b .lbl { font-weight: 700; font-size: 12px; color: var(--muted); margin-top: 4px; }
.side-b .cks { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 0 6px; }
.side-b .cks.one { grid-template-columns: 1fr; }
.side-b .sel { width: 100%; }
.side-b .pair { display: grid; grid-template-columns: 1fr auto 1fr; }
.side-b .pair .sel { min-width: 0; }
.side-foot { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 10px 12px; display: grid; grid-template-columns: auto 1fr; gap: 8px; }
@media (min-width: 900px) { .side-foot { display: none; } }
.keyword { position: relative; }
.keyword input { width: 100%; min-height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; }
.keyword .k-clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; color: var(--muted); }
.side-current { padding: 8px 12px; font-size: 12px; background: var(--brand-50); border-bottom: 1px solid var(--border); display: grid; gap: 4px; }
.side-current b { color: var(--brand); }
.chip-more { font-size: 12px; text-decoration: underline; color: var(--link); justify-self: start; }

.results { min-width: 0; }
.results-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 8px 0; border-bottom: 2px solid var(--brand); }
.results-bar .count { font-size: 13px; }
.results-bar .count b { font-size: 26px; color: var(--price); font-weight: 800; margin-right: 2px; }
.results-bar .tools { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; }
@media (max-width: 599px) { .results-bar .tools { width: 100%; margin-left: 0; } .results-bar .tools label { flex: 1 1 130px; } .results-bar .tools label .sel { flex: 1; min-width: 0; } .results-bar .filter-open-btn { flex: 1 1 100%; justify-content: center; } }
.results-bar .tools label { display: inline-flex; align-items: center; gap: 6px; }
.view-tabs { display: flex; gap: 4px; margin-top: 10px; }
.view-tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 1px solid var(--border); border-bottom: 0; border-radius: 4px 4px 0 0; background: var(--th); font-weight: 700; font-size: 13px; color: var(--muted); }
.view-tabs button.is-active { background: var(--brand); color: #fff; border-color: var(--brand); }
.filter-open-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--action); border-radius: 4px; color: var(--action); font-weight: 700; font-size: 13px; background: #fff; }
.filter-open-btn .n { font-size: 11.5px; background: var(--cta); color: #fff; border-radius: 9px; padding: 1px 6px; }
.filter-open-btn .n:empty { display: none; }
@media (min-width: 900px) { .filter-open-btn { display: none; } }
.active-conds { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 0 0; font-size: 12px; }
.active-conds > b { color: var(--muted); }
.active-conds button { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 3px; background: #fff; font-size: 12px; }
.active-conds button span { color: var(--faint); }
.grouping-note { font-size: 12px; color: var(--faint); padding: 6px 0 0; }
.pager { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; padding: 14px 0; font-size: 13px; }
.pager button, .pager span { min-width: 34px; height: 34px; padding: 0 8px; display: inline-grid; place-items: center; border: 1px solid var(--border); border-radius: 3px; background: #fff; }
.pager button.is-current { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 700; }
.pager button:disabled { color: var(--faint); background: var(--bg); cursor: default; }
.pager span { border: 0; }

/* 建物カード（一覧・SUUMO の「建物ごとに表示」の型） */
.bld-list { display: grid; gap: 14px; padding-top: 10px; }
.bld { border: 1px solid var(--border); background: #fff; }
.bld-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.tag { font-size: 11.5px; font-weight: 700; padding: 2px 6px; border-radius: 2px; background: var(--ok-50); color: var(--ok); border: 1px solid #b9e4cf; white-space: nowrap; }
.tag.warm { background: #fff1ea; color: #b7481a; border-color: #f4c9b5; }
.tag.new { background: var(--cta); color: #fff; border-color: var(--cta); }
.bld-head h3 { font-size: 16px; }
.bld-body { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 10px 12px; }
@media (min-width: 721px) { .bld-body { grid-template-columns: 200px minmax(0, 1fr); } }
.bld-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: #edf0f3 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b8c0cb' stroke-width='1.5'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9a1 1 0 0 0 1 1h11a1 1 0 0 0 1-1v-9'/%3E%3C/svg%3E") center/44px no-repeat; border: 1px solid var(--border); overflow: hidden; }
.bld-photo img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 720px) { .bld-photo { aspect-ratio: 16 / 9; } }
.bld-info { border: 1px solid var(--border); font-size: 13px; }
.bld-info th { width: 104px; white-space: nowrap; background: var(--th); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.bld-info td { padding: 6px 8px; border-bottom: 1px solid var(--border); }
.bld-info tr:last-child th, .bld-info tr:last-child td { border-bottom: 0; }
.rooms { font-size: 13px; border-top: 1px solid var(--border); }
.rooms th { background: var(--th); font-weight: 700; font-size: 12px; color: var(--muted); padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.rooms td { padding: 10px 8px; border-bottom: 1px solid var(--border-light); vertical-align: middle; }
.rooms tr:last-child td { border-bottom: 0; }
.rooms .price { color: var(--price); font-weight: 800; font-size: 18px; white-space: nowrap; }
.rooms .price small { font-size: 12px; font-weight: 700; }
.rooms .fee { display: block; font-size: 12px; color: var(--muted); }
.rooms .cost b { font-size: 15px; }
.rooms .cost small { display: block; color: var(--muted); font-size: 11.5px; }
.rooms .fl { white-space: nowrap; }
.rooms .lay { white-space: nowrap; }
.rooms .act { text-align: right; white-space: nowrap; }
.rooms .act .btn { min-height: 34px; padding: 0 12px; font-size: 13px; }
/* ★2026-09-10 追加。2部屋目以降を開閉する「他N部屋を表示」行（render.mjs bldCard / fav.js） */
.room-toggle-row td { padding: 8px !important; text-align: center; background: var(--th); border-bottom: 0 !important; }
.room-toggle-btn { font-size: 12.5px; font-weight: 700; color: var(--link); text-decoration: underline; padding: 4px 8px; }
.room-toggle-btn:hover { color: var(--action-700); }
.fav-btn { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 10px; border: 1px solid var(--border); border-radius: 3px; background: #fff; font-size: 12px; color: var(--muted); white-space: nowrap; }
.fav-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.fav-btn[aria-pressed="true"] { color: #e0245e; border-color: #e0245e; background: #fff5f8; }
.fav-btn[aria-pressed="true"] svg { fill: currentColor; }
@media (max-width: 720px) {
.rooms thead { display: none; }
.rooms tr { display: grid; grid-template-columns: auto 1fr auto; column-gap: 10px; row-gap: 4px; padding: 8px 10px; border-bottom: 1px solid var(--border-light); align-items: center; }
.rooms td { padding: 0; border: 0; }
.rooms td.fl { grid-column: 1; grid-row: 1; font-size: 12px; color: var(--muted); }
.rooms td.rent { grid-column: 2; grid-row: 1; }
.rooms td.cost { grid-column: 2; grid-row: 2; font-size: 12px; }
.rooms td.lay { grid-column: 1; grid-row: 2; font-size: 12px; }
.rooms td.favc { grid-column: 3; grid-row: 1; align-self: start; }
.rooms td.act { grid-column: 3; grid-row: 2; align-self: end; }
}
.eq-line { padding: 6px 12px 10px; display: flex; flex-wrap: wrap; gap: 4px; }
.eq-line span { font-size: 11.5px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 2px; color: var(--muted); background: #fff; }
.empty-state { text-align: center; padding: 40px 16px; border: 1px dashed var(--border); margin-top: 12px; display: grid; gap: 8px; justify-items: center; }
.empty-state strong { font-size: 15px; }
.empty-state p { color: var(--muted); font-size: 13px; }

/* 地図 */
.map-wrap { display: none; padding-top: 10px; position: relative; }
.map-wrap.is-active { display: block; }
/* ★2026-09-15 オーナー報告の是正：Leaflet内部のpane（tile/marker/popup等）はz-index 200〜700を持ち、
 * #map自身がスタッキングコンテキストを作っていなかったため、スマホの検索条件パネル（.side、z-index:80）を
 * 開いた状態で地図がその上に描画されてしまい、条件パネルの途中から下がスクロールできなくなっていた。
 * isolationでLeafletの内部z-indexをこの要素の中だけに閉じ込め、外側の要素と競合しないようにする。 */
#map { height: 64vh; min-height: 420px; border: 1px solid var(--border); background: #edf0f3; isolation: isolate; }
.map-note { font-size: 12px; color: var(--muted); margin-top: 6px; }
.map-pop { width: 220px; font-size: 12px; }
.map-pop img { width: 100%; height: 120px; object-fit: cover; margin-bottom: 6px; }
.map-pop b { display: block; font-size: 13px; }
.map-pop .mp-price { color: var(--price); font-weight: 800; font-size: 16px; }
.map-pop small { display: block; color: var(--muted); }
.map-pop a { display: inline-block; margin-top: 6px; font-weight: 700; }
.leaflet-popup-content { margin: 10px 12px; }
.price-pin { background: #fff; border: 2px solid var(--brand); color: var(--brand); border-radius: 12px; padding: 1px 7px; font-weight: 800; font-size: 12px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); transform: translate(-50%, -100%); position: relative; display: inline-block; }
.price-pin::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 8px; height: 8px; background: #fff; border-right: 2px solid var(--brand); border-bottom: 2px solid var(--brand); transform: translateX(-50%) rotate(45deg); }
.price-pin.is-fav { border-color: #e0245e; color: #e0245e; }
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large { background: rgba(27, 58, 107, 0.25); }
.marker-cluster-small div, .marker-cluster-medium div, .marker-cluster-large div { background: var(--brand); color: #fff; font-weight: 700; }
#detail-map { height: 300px; border: 1px solid var(--border); margin-top: 10px; }
@media (max-width: 720px) { #detail-map { display: none; } }
/* Google マップ（2026-09-27）：物件ページは押したときだけ読み込む */
#detail-map.is-lazy { display: flex; align-items: center; justify-content: center; background: #eef2f6 url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M0 20h40M20 0v40' stroke='%23dde3ea' stroke-width='1'/%3E%3C/svg%3E"); }
@media (max-width: 720px) { #detail-map.is-lazy { display: none; } }
.map-load-btn { background: #fff; color: var(--brand); border: 2px solid var(--brand); border-radius: 999px; padding: 10px 22px; font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); }
.map-load-btn:hover { background: var(--brand); color: #fff; }
.map-loading { color: var(--muted); font-size: 13px; }
.map-pop-list { width: 240px; font-size: 12px; max-height: 260px; overflow-y: auto; }
.map-pop-list a { display: block; padding: 5px 0; border-bottom: 1px solid var(--border); }
.map-pop-list a b { color: var(--price); }
.map-pop-list small { display: block; color: var(--muted); margin-top: 4px; }
/* ★2026-09-16 オーナー報告「地図の「この範囲で再検索」ボタンが背景と同化していて見にくい」の是正。
 * 周囲の価格ピン（白地・紺枠）や地図タイルの色によっては紺一色のボタンが埋もれて見えるため、
 * 白いフチと二重の影を足し、タイルの色に関わらず輪郭が常に見えるようにする。 */
.map-search-area-btn { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 1000; background: var(--brand); color: #fff; border: 2px solid #fff; border-radius: 999px; padding: 8px 18px; font-weight: 700; font-size: 13px; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(0, 0, 0, 0.15); cursor: pointer; }
.map-search-area-btn[hidden] { display: none; }

/* ── 物件詳細 ──────────────────────────────────────── */
.detail-title { border: 1px solid var(--border); border-top: 3px solid var(--brand); padding: 12px 16px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; }
.detail-title h1 { font-size: 18px; }
@media (min-width: 721px) { .detail-title h1 { font-size: 21px; } }
.detail-title h1 small { font-size: 14px; color: var(--muted); margin-left: 6px; font-weight: 600; }
.detail-actions { display: flex; gap: 6px; }
.detail-grid { display: grid; gap: 16px; padding: 14px 0 30px; }
@media (min-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 20px; } .similar-wrap { grid-column: 1; } }
.detail-main { display: grid; gap: 16px; min-width: 0; }
.price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price-line .p { color: var(--price); font-weight: 800; font-size: 28px; line-height: 1; }
.price-line .p small { font-size: 14px; }
.price-line .m { font-size: 13px; color: var(--muted); }
.price-line .cost { font-size: 13px; padding: 4px 10px; background: var(--th); border: 1px solid var(--border); border-radius: 3px; }
.price-line .cost b { color: var(--price); }
.detail-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.photo-carousel { position: relative; background: #1f2630; border: 1px solid var(--border); min-width: 0; }
.photo-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.photo-track::-webkit-scrollbar { display: none; }
.photo-slide { position: relative; flex: 0 0 100%; scroll-snap-align: center; height: 60vw; max-height: 460px; min-height: 220px; overflow: hidden; }
@media (min-width: 721px) { .photo-slide { height: 440px; } }
.photo-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; cursor: zoom-in; }
.photo-arrow { position: absolute; top: 45%; transform: translateY(-50%); width: 40px; height: 56px; background: rgba(27, 58, 107, 0.85); color: #fff; font-size: 26px; display: grid; place-items: center; }
.photo-arrow.prev { left: 0; } .photo-arrow.next { right: 0; }
.photo-count { position: absolute; right: 8px; top: 8px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 12px; padding: 2px 8px; border-radius: 3px; }
.photo-zoom { position: absolute; left: 8px; top: 8px; background: rgba(255, 255, 255, 0.92); color: var(--brand); font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 3px; }
.photo-thumbs { display: flex; gap: 4px; padding: 6px; overflow-x: auto; background: #eceff3; border-top: 1px solid var(--border); scrollbar-width: thin; }
.photo-thumbs button { flex: 0 0 76px; height: 56px; border: 2px solid transparent; overflow: hidden; opacity: 0.7; background: #fff; }
.photo-thumbs button.active { border-color: var(--action); opacity: 1; }
.photo-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(0, 0, 0, 0.92); display: none; place-items: center; }
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 96vw; max-height: 84vh; object-fit: contain; }
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 8px; }
.lb-cap { color: #fff; font-size: 13px; }
.lb-close, .lb-prev, .lb-next { position: absolute; color: #fff; font-size: 30px; width: 48px; height: 48px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); }
.lb-close { right: 12px; top: 12px; } .lb-prev { left: 12px; top: 50%; } .lb-next { right: 12px; top: 50%; }
body.lb-locked { overflow: hidden; }
.spec { border: 1px solid var(--border); font-size: 13px; }
.spec .r { display: grid; grid-template-columns: 118px 1fr; border-bottom: 1px solid var(--border); }
@media (min-width: 721px) { .spec { display: grid; grid-template-columns: 1fr 1fr; } .spec .r { border-right: 1px solid var(--border); } .spec .r:nth-child(even) { border-right: 0; } .spec .r.wide { grid-column: 1 / -1; border-right: 0; } }
.spec .r > span { background: var(--th); padding: 8px 10px; font-weight: 700; }
.spec .r > b { padding: 8px 10px; font-weight: 500; }
.box { border: 1px solid var(--border); }
.box-h { background: var(--th); border-bottom: 1px solid var(--border); padding: 8px 12px; font-weight: 700; font-size: 14px; }
.box-b { padding: 12px; }
.eq-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.eq-tags span { font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 2px; background: #fff; }
.detail-list { display: grid; gap: 10px; }
.detail-list > div > b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.detail-list ul li { font-size: 13px; padding: 2px 0 2px 12px; position: relative; }
.detail-list ul li::before { content: "・"; position: absolute; left: 0; }
.notice { font-size: 12px; color: var(--muted); background: var(--bg); border: 1px solid var(--border-light); padding: 8px 10px; }
.map-link { font-size: 12px; margin-left: 8px; }

.inquiry { border: 1px solid var(--border); background: #fff; }
.inquiry .box-h { background: var(--brand); color: #fff; border-color: var(--brand); }
@media (min-width: 900px) { .inquiry { position: sticky; top: 10px; } }
.calc-alert { background: #fff6ee; border: 1px solid #f7cfb7; padding: 8px 10px; font-size: 12px; margin-bottom: 10px; }
.calc-alert b { display: block; color: #b7481a; margin-bottom: 2px; }
.calc-row { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px dotted var(--border); font-size: 13px; }
.calc-row b { font-weight: 600; }
.calc-row.discount, .calc-row.discount-row { color: #c0392b; }
.calc-total { display: flex; justify-content: space-between; align-items: baseline; padding: 12px 0 6px; }
.calc-total span { font-weight: 700; }
.calc-total strong { color: var(--price); font-size: 24px; font-weight: 800; }
.cost-notes { display: grid; gap: 4px; margin: 6px 0 8px; }
.cost-notes li { font-size: 12px; color: var(--warn); background: var(--warn-50); border: 1px solid #f3dfb5; padding: 5px 8px; }
.exit-cost { margin: 8px 0; padding: 8px 10px; background: var(--bg); border: 1px solid var(--border-light); }
.exit-cost > b { display: block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.exit-note { display: block; font-size: 11.5px; color: var(--faint); margin-top: 4px; }
.plan-badge { display: inline-block; font-size: 12px; font-weight: 700; color: var(--brand); background: var(--brand-50); padding: 2px 8px; margin-bottom: 6px; }
.campaign-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0; font-size: 12px; color: var(--muted); }
.campaign-summary b { font-size: 12px; background: var(--ok-50); color: var(--ok); padding: 2px 6px; border: 1px solid #b9e4cf; }
.field { display: grid; gap: 4px; font-size: 12px; font-weight: 700; color: var(--muted); }
.field input[type="date"] { min-height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: 3px; width: 100%; font-weight: 400; color: var(--text); }
.calc-ctas { display: grid; gap: 8px; margin-top: 12px; }
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; background: #fff; border-top: 1px solid var(--border); padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: center; }
.sticky-cta .sc-price { color: var(--price); font-weight: 800; font-size: 16px; line-height: 1.1; }
.sticky-cta .sc-price small { display: block; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.sticky-cta .btn { min-height: 42px; padding: 0 8px; font-size: 13px; }
@media (min-width: 900px) { .sticky-cta { display: none; } }
body.has-sticky-cta .site-footer { padding-bottom: 76px; }

/* ── エリア（区）ページ ──────────────────────────────── */
.area-stats { display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--border); border-right: 0; border-bottom: 0; }
@media (min-width: 721px) { .area-stats { grid-template-columns: repeat(5, 1fr); } }
.area-stats div { padding: 10px 12px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.area-stats b { display: block; font-size: 20px; color: var(--brand); font-weight: 800; }
.area-stats span { font-size: 12px; color: var(--muted); }
.area-body { display: grid; gap: 18px; padding-bottom: 30px; }
@media (min-width: 900px) { .area-body { grid-template-columns: minmax(0, 1fr) 300px; align-items: start; } }
.area-main { min-width: 0; }
.area-side { display: grid; gap: 14px; }
.area-source { font-size: 11.5px; color: var(--faint); margin-top: 6px; }
.rent-tables { display: grid; gap: 14px; }
@media (min-width: 721px) { .rent-tables { grid-template-columns: 1fr 1fr; } }
.rent-tables h3 { font-size: 13px; margin-bottom: 6px; }
.side-links { display: grid; }
.side-links a { display: flex; justify-content: space-between; padding: 8px 10px; border-bottom: 1px solid var(--border-light); font-size: 13px; }
.side-links a i { font-style: normal; color: var(--faint); font-size: 12px; }
.side-links a:last-child { border-bottom: 0; }

/* ── 固定ページ ─────────────────────────────────────── */
.page { max-width: 820px; margin: 0 auto; padding: 8px 12px 40px; }
.page .box-b { display: grid; gap: 14px; }
.page p { font-size: 13px; }
/* ── 問い合わせフォーム（2026-10-07 再設計）：1カラム・大きめの入力欄・選択式チップ・物件カード ── */
.contact-wrap { max-width: 680px; margin: 0 auto; }
.contact-lead { margin: 0 0 12px; line-height: 1.75; }
.contact-or { display: flex; align-items: center; gap: 10px; margin: 20px 0 16px; color: var(--faint); font-size: 12px; }
.contact-or::before, .contact-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.contact-form { display: grid; gap: 18px; }
.contact-form label, .contact-form legend { display: block; padding: 0; font-size: 14px; font-weight: 700; line-height: 1.5; }
.contact-form label > :is(input, select, textarea) { display: block; margin-top: 8px; }
.contact-form small { display: inline; margin-left: 8px; font-weight: 400; color: var(--muted); font-size: 12px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form select, .contact-form textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 16px; font-weight: 400; color: var(--text); }
.contact-form textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--action); outline-offset: 0; border-color: var(--action); }
.contact-form [hidden] { display: none; }
.contact-form .btn-block { width: 100%; }
.cf-row { display: grid; gap: 18px; }
.cf-group { border: 0; padding: 0; margin: 0; min-width: 0; }
.contact-form legend { margin-bottom: 8px; }
.cf-chips { display: grid; gap: 8px; }
.cf-chip { position: relative; display: block; }
.cf-chip input { position: absolute; opacity: 0; pointer-events: none; }
.cf-chip span { display: block; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: #fff; font-size: 14px; font-weight: 700; cursor: pointer; }
.cf-chip input:checked + span { border-color: var(--action); background: var(--action-50); color: var(--action-700); }
.cf-chip input:focus-visible + span { outline: 2px solid var(--action); }
.cf-prop { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-left: 4px solid var(--brand); background: var(--brand-50); border-radius: 4px; }
.cf-prop-label { font-size: 11.5px; color: var(--muted); font-weight: 700; }
.cf-prop b { font-size: 15px; }
.cf-prop a { font-size: 13px; }
.contact-form .req { display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 3px; font-size: 11px; font-weight: 700; line-height: 1.6; vertical-align: 1px; }
.cf-chip > input { margin: 0; }
.contact-wrap .cta-pair .btn { display: flex; width: 100%; justify-content: center; }
@media (min-width: 721px) { .cf-row { grid-template-columns: 1fr 1fr; } .cf-chips { grid-template-columns: 1fr 1fr; } }
.contact-form .req { font-size: 11.5px; color: #fff; background: var(--cta); padding: 1px 6px; margin-left: 6px; border-radius: 2px; }
.contact-form .hp { position: absolute; left: -9999px; }
.form-consent { font-size: 12px; color: var(--faint); }
.cta-pair { display: grid; gap: 8px; }
@media (min-width: 721px) { .cta-pair { grid-auto-flow: column; justify-content: start; } }
.tbd { color: var(--warn); font-style: normal; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 6px; }
.notfound-links a { padding: 6px 10px; border: 1px solid var(--border); border-radius: 3px; font-size: 13px; }

/* ── お気に入り ─────────────────────────────────────── */
.fav-page { padding-bottom: 40px; }
.fav-empty { text-align: center; padding: 40px 16px; border: 1px dashed var(--border); display: grid; gap: 8px; justify-items: center; color: var(--muted); }

/* ── FAQ・約束 ──────────────────────────────────────── */
.promise { display: grid; gap: 10px; }
@media (min-width: 721px) { .promise { grid-template-columns: repeat(3, 1fr); } }
.promise article { border: 1px solid var(--border); padding: 12px; display: flex; gap: 10px; }
.promise .p-icon { flex: none; width: 34px; height: 34px; border-radius: 4px; background: var(--brand); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 13px; }
.promise h3 { font-size: 14px; }
.promise p { font-size: 12px; color: var(--muted); margin-top: 2px; }
.faq { border: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 12px 14px; font-weight: 700; font-size: 14px; list-style: none; display: flex; gap: 8px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "Q"; color: var(--brand); }
.faq summary::after { content: "+"; color: var(--faint); margin-left: auto; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding: 0 14px 14px 36px; color: var(--muted); font-size: 13px; }

/* ── 最近見た物件・お気に入りのカード ─────────────────── */
.recent-list { display: flex; gap: 10px; overflow-x: auto; scrollbar-width: thin; padding-bottom: 6px; }
.mini-card { flex: 0 0 200px; border: 1px solid var(--border); background: #fff; position: relative; }
.mini-card > a { display: block; color: var(--text); text-decoration: none !important; }
.mini-card .mc-img { aspect-ratio: 4 / 3; background: #edf0f3; overflow: hidden; }
.mini-card .mc-img img { width: 100%; height: 100%; object-fit: cover; }
.mini-card .mc-b { padding: 8px 10px; font-size: 12px; display: grid; gap: 2px; }
.mini-card .mc-p { color: var(--price); font-weight: 800; font-size: 16px; }
.mini-card .mc-t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-card .mc-m { color: var(--muted); }
.mini-card .fav-btn { position: absolute; right: 6px; top: 6px; min-height: 28px; padding: 0 6px; }
.mini-grid { display: grid; gap: 10px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 721px) { .mini-grid { grid-template-columns: repeat(4, 1fr); } }
.mini-grid .mini-card { flex: none; }

/* ── フッター ─────────────────────────────────────────── */
.site-footer { margin-top: 30px; border-top: 1px solid var(--border); background: var(--bg); font-size: 12px; color: var(--muted); }
.footer-cta { background: #fff; border-bottom: 1px solid var(--border); padding: 20px 0; }
.footer-cta .inner { display: grid; gap: 12px; }
@media (min-width: 721px) { .footer-cta .inner { grid-template-columns: 1fr auto; align-items: center; } }
.footer-cta h2 { font-size: 16px; color: var(--brand); }
.footer-cta p { font-size: 12px; color: var(--muted); } @media (max-width: 720px) { .footer-cta p { display: none; } }
.footer-cols { display: grid; gap: 14px; padding: 20px 0; grid-template-columns: 1fr 1fr; }
@media (min-width: 721px) { .footer-cols { grid-template-columns: 1.3fr 1fr 1fr 1fr; } } @media (max-width: 720px) { .footer-area-col { display: none; } }
.footer-acc summary { display: flex; align-items: center; justify-content: space-between; gap: 6px; color: var(--text); margin-bottom: 6px; font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.footer-cols a { display: block; padding: 2px 0; color: var(--muted); }
.footer-brand { color: var(--brand); font-weight: 800; font-size: 15px; }

.footer-acc summary::-webkit-details-marker { display: none; }
.footer-acc summary::after { content: "+"; color: var(--faint); font-weight: 400; }
.footer-acc[open] summary::after { content: "−"; }
@media (min-width: 721px) { .footer-acc summary { pointer-events: none; cursor: default; } .footer-acc summary::after { display: none; } .footer-acc:not([open]) > *:not(summary) { display: block !important; } }
@media (max-width: 720px) { .footer-cols { padding: 14px 0; gap: 10px; } .footer-cta { padding: 14px 0; } .site-footer { margin-top: 20px; } }
.footer-legal { border-top: 1px solid var(--border); padding: 12px 0 18px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; font-size: 11.5px; }
.footer-legal a { color: var(--muted); } .footer-legal-links { margin-top: 4px; }
.inquiry .tel { display: grid; gap: 2px; font-size: 12px; color: var(--muted); margin-top: 8px; }
.inquiry .tel a { font-size: 20px; font-weight: 800; color: var(--text); text-decoration: none !important; letter-spacing: 0.02em; }
.toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%); background: rgba(0, 0, 0, 0.8); color: #fff; padding: 8px 14px; border-radius: 3px; font-size: 13px; opacity: 0; transition: opacity 0.2s; z-index: 110; pointer-events: none; }
.toast.is-show { opacity: 1; }
@media print { .topbar, .site-header, .site-footer, .sticky-cta, .side, .calc-ctas { display: none !important; } }

/* ── コラム（2026-09-08 新設） ─────────────────────────────────── */
.col-wrap { max-width: 900px; padding-bottom: 40px; }
.col-intro { font-size: 14px; color: var(--muted); margin: 10px 0 16px; line-height: 1.8; }
.col-cards { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 8px 0 16px; }
@media (min-width: 721px) { .col-cards { grid-template-columns: 1fr 1fr; } }
.col-card { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--border); background: #fff; color: var(--text); text-decoration: none !important; border-left: 4px solid var(--brand); }
.col-card:hover { border-color: var(--action); border-left-color: var(--action); }
.col-card b { font-size: 15px; color: var(--link); line-height: 1.5; }
.col-card p { font-size: 13px; color: var(--muted); line-height: 1.7; }
.col-card small { font-size: 12px; color: var(--faint); }
.col-article { background: #fff; border: 1px solid var(--border); padding: 18px 16px 24px; line-height: 1.85; font-size: 15px; }
@media (min-width: 721px) { .col-article { padding: 28px 32px 32px; } }
.col-head h1 { font-size: 22px; line-height: 1.45; margin: 0 0 8px; }
@media (min-width: 721px) { .col-head h1 { font-size: 26px; } }
.col-meta { font-size: 12.5px; color: var(--muted); border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
.col-lead { background: var(--brand-50); border: 1px solid #cfdcee; border-left: 4px solid var(--brand); padding: 12px 14px; margin: 0 0 16px; border-radius: 3px; }
.col-lead > b { display: block; color: var(--brand); font-size: 13px; margin-bottom: 4px; }
.col-lead p { font-size: 15px; margin: 0; }
.col-toc { border: 1px solid var(--border); background: var(--bg); padding: 10px 14px; margin: 0 0 20px; font-size: 13.5px; }
.col-toc > b { display: block; margin-bottom: 4px; }
.col-toc ol { margin: 0; padding-left: 1.4em; }
.col-toc li { padding: 2px 0; }
.col-article h2 { font-size: 18px; margin: 30px 0 10px; padding: 8px 12px; border-left: 5px solid var(--brand); background: var(--th); line-height: 1.5; }
.col-article h3 { font-size: 15.5px; margin: 20px 0 8px; padding-bottom: 4px; border-bottom: 2px solid var(--border); }
.col-article p { margin: 0 0 12px; }
.col-article .tbl { margin: 6px 0 12px; font-size: 13.5px; }
.col-article .tbl th, .col-article .tbl td { min-width: 6em; }
.col-article .tbl th { white-space: nowrap; }
.col-article .tbl small { font-size: 12px; }
.col-article .tbl td:first-child, .col-article .tbl th:first-child { min-width: 9em; }
.col-note { font-size: 12.5px; color: var(--muted); background: var(--bg); border: 1px dashed var(--border); padding: 8px 12px; margin: 0 0 12px; line-height: 1.7; }
.col-steps, .col-list { margin: 0 0 14px; padding-left: 1.5em; }
.col-steps li, .col-list li { margin: 6px 0; }
.col-steps li b { color: var(--brand); }
.bars { display: grid; gap: 6px; margin: 8px 0 14px; font-size: 13px; }
.bar-row { display: grid; grid-template-columns: minmax(6em, 10em) 1fr auto; align-items: center; gap: 8px; }
.bar-l { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-t { display: block; height: 14px; background: var(--th); border-radius: 2px; overflow: hidden; }
.bar-t i { display: block; height: 100%; background: var(--action); }
.bar-v { color: var(--price); white-space: nowrap; font-size: 13px; }
.col-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; margin: 14px 0 6px; background: #fff7f0; border: 1px solid #f4c9b5; border-radius: 4px; }
.col-cta b { font-size: 15px; }
.col-cta p { font-size: 12.5px; color: var(--muted); margin: 2px 0 0; }
.col-cta .btn { min-height: 40px; padding: 0 16px; }
.col-src { font-size: 13px; padding-left: 1.4em; margin: 0 0 12px; }
.col-src li { margin: 4px 0; }
.col-back { margin-top: 16px; font-size: 14px; }
.col-article .faq details { margin: 0; }
.col-article .faq summary { font-size: 15px; }
.col-article .faq p { font-size: 14px; }

/* スマホ版フッター：「探す」列を出さず、全体を詰める（2026-09-29 オーナー指示。PCは変更なし） */
@media (max-width: 720px) {
  .footer-search-col { display: none; }
  .site-footer { margin-top: 14px; font-size: 11.5px; }
  .footer-cta { padding: 10px 0; }
  .footer-cta .inner { gap: 8px; }
  .footer-cta h2 { font-size: 13.5px; line-height: 1.4; }
  .footer-cta .cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .footer-cta .btn-lg { padding: 9px 6px; font-size: 13px; min-height: 0; }
  .footer-cols { padding: 10px 0; gap: 8px 12px; }
  .footer-acc summary { margin-bottom: 3px; font-size: 12px; }
  .footer-cols a { padding: 1px 0; line-height: 1.45; }
  .footer-brand { font-size: 13.5px; }
  .footer-legal-links { margin-top: 2px; }
  .footer-legal { padding: 8px 0 12px; font-size: 11px; }
}

/* ★2026-10-03 トップ(スマホ)：掲載物件数を枠の右上の線に重ね、HEROを少しコンパクトに（PCは変更なし） */
@media (max-width: 720px) {
  .page-title:has(+ .howto) { position: relative; margin-top: 12px; padding: 16px 12px 8px; gap: 4px; }
  .page-title:has(+ .howto) .total { position: absolute; top: -15px; right: 12px; z-index: 2; background: #fff; border: 2px solid var(--brand); border-radius: 999px; padding: 2px 12px; font-size: 12px; line-height: 1.4; white-space: nowrap; }
  .page-title:has(+ .howto) .total b { font-size: 20px; margin: 0 1px; }
  .page-title:has(+ .howto) small { font-size: 12.5px; padding: 4px 10px; }
  .page-title + .howto { padding: 8px 12px 12px; }
  .page-title + .howto .howto-head { margin-bottom: 8px; }
  .page-title + .howto .howto-head h2 { font-size: 16px; }
  .page-title + .howto .howto-main-4 a { min-height: 56px; padding-top: 8px; padding-bottom: 8px; }
}

@media (max-width: 720px) { .page-title:has(+ .howto) { padding-top: 32px; } .page-title:has(+ .howto) .total { line-height: 1.2; } .page-title:has(+ .howto) .total b { line-height: 1; } }

/* ★2026-10-03 トップ：おすすめ特集カードのアイコンを非表示 */
.feature-card .fc-icon { display: none; }

/* ★2026-10-04 SEO対策（A2・A3・A6）：エリアページ冒頭のCTA行／関連コラム／トップ・コラム末尾の導線 */
.area-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 4px; }
.area-cta small { flex-basis: 100%; color: var(--muted); font-size: 12px; }
@media (min-width: 721px) { .area-cta small { flex-basis: auto; margin-left: 4px; } }
.area-cols { margin: 8px 0 16px; }
.area-cols h3 { font-size: 14px; margin: 0 0 6px; }
.area-cols .col-cards { margin: 0; }
.col-areas { margin: 8px 0 16px; }
.col-areas h3 { font-size: 14px; margin: 0 0 6px; }
.col-areas .linklist a { display: inline-block; margin: 0 8px 6px 0; font-size: 13px; }
.home-cols { margin: 18px 0 6px; }
.home-cols .col-cards { grid-template-columns: 1fr 1fr; }
@media (min-width: 721px) { .home-cols .col-cards { grid-template-columns: repeat(4, 1fr); } }
.home-cols .col-card b { font-size: 13px; }
.home-cols .col-card small { color: var(--muted); font-size: 12px; }

/* ★2026-10-04 トップはHERO・新着5件・最近見た物件だけにし、家賃相場・エリア一覧・ガイドをフッターへ移した */

/* トップのフッター：家賃相場・ガイドもリンクの列として並べる（2026-10-05） */
@media (min-width: 721px) { .footer-cols-home { grid-template-columns: 1.2fr repeat(5, 1fr); } }

/* スマホのトップ：新着物件のカードに設備タグは出さない（2026-10-05 オーナー指示） */
@media (max-width: 720px) { main[data-home] .bld-list .eq-line { display: none; } }

/* 学区ページ：名古屋市は区ごとに折りたたむ（2026-10-05） */
.ckgrid .grp-city { display: block; }
.ckgrid .grp-city > .grp-h { display: block; }
.ckgrid .grp-fold { display: block; border-top: 1px solid var(--border); }
.ckgrid .grp-fold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; background: #fff; padding: 10px 12px; font-weight: 700; font-size: 14px; }
.ckgrid .grp-fold > summary::-webkit-details-marker { display: none; }
.ckgrid .grp-fold > summary small { display: inline; margin-left: auto; }
.ckgrid .grp-fold > summary::after { content: "+"; color: var(--faint); font-weight: 400; }
.ckgrid .grp-fold[open] > summary::after { content: "−"; }
.ckgrid .grp-fold[open] > summary { background: var(--th); }
.ckgrid .grp-fold > .grp-b { border-top: 1px solid var(--border); }

/* スマホの地図は指1本で動かせる分、ページをスクロールできる外側の余白を残すため高さを抑える（2026-10-05） */
@media (max-width: 720px) { #map { height: 58vh; min-height: 340px; } }

/* ★2026-10-06：物件ページ → エリアの家賃相場への導線（render.mjs propertyAreaLinks） */
.prop-area { margin: 20px 0 8px; }
.prop-area .lead { font-size: 13px; margin: 6px 0 8px; }
.prop-area-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.prop-area-links a { display: block; padding: 10px 12px; border: 1px solid #e3e6ea; border-radius: 8px; font-size: 14px; text-decoration: none; }
.prop-area-links a::after { content: " ›"; }
@media (min-width: 900px) { .prop-area-links { grid-template-columns: repeat(3, 1fr); } }

/* ★2026-10-06：駅ページの索引（/search/station/ の下部・render.mjs stationIndexHtml） */
.st-index { margin: 28px 0 8px; }
.st-index-line { border-top: 1px solid #e3e6ea; padding: 8px 0; }
.st-index-line summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.st-index-line summary small { font-weight: 400; color: #6b7280; margin-left: 4px; }
.st-index-line .linklist { margin-top: 8px; }