@charset "UTF-8";
/* ============================================================
   新規契約マップレポート — 共通コンポーネントCSS(テーマ非依存)
   すべて .nz-report スコープで記述し、日本財託サイトの
   グローバルCSS(common.css / parts.css)より後に読み込む。
   配色・角丸・影などはテーマCSSが :root 変数で上書きする。
   ※アクセシビリティ方針: フォントサイズは最低16px

   デザイン方針:
   ・「地図のレポート」らしく、ヒーローに経緯線グリッド+光彩の質感
   ・面はすべて2層シャドウで浮かせ、操作できる要素はホバーで持ち上がる
   ・数字は Oswald + tabular-nums で誌面の主役に
   ============================================================ */

/* ---- テーマ変数の既定値(テーマCSS未読込でも成立させる) ---- */
:root{
  --rep-bg-top: #f7fafa;
  --rep-bg-bottom: #e8f0f0;
  --rep-dot: rgba(15,90,96,.055);
  --surface: #ffffff;
  --surface-2: #f2f7f7;
  --ink: #333b3b;
  --ink-strong: #13282c;
  --sub: #56666a;
  --muted: #8a9a9c;
  --hair: #e2eaea;
  --hair-dark: #ccd9d9;
  --accent: #22adad;
  --accent-d: #14878e;
  --accent-soft: #7fd8dc;
  --cta: #ff9502;
  --good: #0a8f57;
  --bad: #e0403f;
  --radius: 14px;
  --radius-s: 10px;
  --card-border: 1px solid rgba(19,90,96,.15);
  --card-shadow: 0 1px 2px rgba(13,60,66,.06), 0 10px 28px -14px rgba(13,60,66,.20);
  --card-shadow-lift: 0 2px 5px rgba(13,60,66,.08), 0 18px 36px -14px rgba(13,60,66,.28);
  --kpi-size: 34px;
  /* 日本財託ブランドの若草色(公式レポートPDFの言語) */
  --z-green: #3d9b6e;
  --z-wave-1: #9ed3b4;
  --z-wave-2: #c2e4cf;
  --z-wave-3: #e2f1e8;
  --geo-empty: #f0ede4;
  /* チャート配色(report.core.js が参照) */
  --chart-ink: #64777a;
  --chart-grid: #e6efef;
  --chart-border: #c3d4d4;
  --chart-bar: #0f9494;
  --chart-accent: #22adad;
  --chart-fill: rgba(34,173,173,.18);
  --chart-point-border: #ffffff;
  --chart-tip-bg: #10272b;
  --chart-tip-title: #f2f7f6;
  --chart-tip-body: #cfdedd;
}

/* ---- ルート ---- */
.nz-report{
  background:
    radial-gradient(var(--rep-dot) 1px, transparent 1.4px),
    linear-gradient(180deg, var(--rep-bg-top) 0%, var(--rep-bg-bottom) 100%);
  background-size: 24px 24px, 100% 100%;
  color: var(--ink);
  font-family: 'Noto Sans JP',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: 16px;
  line-height: 1.7;
  /* パンくずを廃したため、上余白は最小限にしてファーストビューを稼ぐ */
  padding: 50px 0 88px;
}
.nz-report *{box-sizing: border-box;}
.nz-report button{font-family: inherit; cursor: pointer;}
.nz-report .rep-inner{
  max-width: 1200px;
  width: min(96%,1200px);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 動きを抑えたい環境ではアニメーションを無効化 */
@media (prefers-reduced-motion: reduce){
  .nz-report *, .nz-report *::before, .nz-report *::after{
    transition: none !important;
    animation: none !important;
  }
}

/* ---- ヒーロー(レポートタイトル帯) ----
   日本財託の公式レポート(PDF)と同じ言語:
   白い紙面 + 若草色のオーガニックな曲線 + 緑の見出し */
.rep-hero{
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius) + 4px);
  padding: 40px 44px 36px;
  color: var(--ink);
  background: #ffffff;
  border: 1px solid #d9eae0;
  box-shadow: var(--card-shadow);
}
/* 右上の若草の波(2枚重ね) */
.rep-hero::before{
  content:"";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 560px 300px at 104% -36%, var(--z-wave-2) 60%, transparent 60.4%),
    radial-gradient(ellipse 640px 330px at 112% -30%, var(--z-wave-1) 60%, transparent 60.4%);
  pointer-events: none;
}
/* 左下の淡い波 */
.rep-hero::after{
  content:"";
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 520px 240px at -8% 148%, var(--z-wave-3) 62%, transparent 62.4%);
  pointer-events: none;
}
.rep-hero > *{position: relative; z-index: 1;}
.rep-hero .rep-kicker{
  display: flex; align-items: center; gap: 12px;
  font-family: 'Oswald','Noto Sans JP',sans-serif;
  font-size: 15px; font-weight: 600;
  letter-spacing: .34em; text-transform: uppercase;
  color: var(--z-green);
  margin-bottom: 10px;
}
.rep-hero .rep-kicker::before{
  content:""; width: 30px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--z-green), var(--z-wave-1));
}
.rep-hero .rep-title{
  font-weight: 700;
  font-size: 34px;
  letter-spacing: .02em;
  line-height: 1.3;
  color: var(--ink-strong);
  text-wrap: balance;
}
/* タイトル横のβ版バッジ(緑背景・白文字) */
.rep-hero .rep-beta{
  display: inline-block;
  margin-left: 12px;
  vertical-align: 0.18em;
  font-family: 'Oswald','Noto Sans JP',sans-serif;
  font-size: 15px; font-weight: 600; letter-spacing: .08em;
  line-height: 1;
  color: #ffffff;
  background: var(--z-green);
  border: 1.5px solid var(--z-green);
  border-radius: 999px;
  padding: 5px 12px;
}
.rep-hero .rep-meta{
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1.5px solid var(--z-wave-3);
  font-size: 16px;
}
/* タイトル横の期間バッジ(β版の隣に並べる) */
.rep-hero .rep-badge{
  display: inline-flex; align-items: center;
  margin-left: 10px;
  vertical-align: 0.18em;
  line-height: 1;
  font-weight: 700; font-size: 15px; letter-spacing: .04em;
  color: #fff;
  background: var(--z-green);
  border-radius: 999px;
  padding: 6px 18px;
}
/* 集計範囲の説明はメタ行の1行目に全幅で置き、2行目にバッジ+リンクボタンを横並びにする */
.rep-hero .rep-scope{color: var(--sub); flex-basis: 100%;}
/* PDF・今期の取り組み・解説動画へのリンクボタン(バッジの隣に横並び) */
.rep-hero .rep-book-link{
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--z-green); text-decoration: none;
  font-size: 15px; font-weight: 700; letter-spacing: .04em;
  background: #ffffff;
  border: 1.5px solid var(--z-green);
  border-radius: 999px;
  padding: 7px 18px;
  transition: background .15s ease, transform .15s ease;
}
.rep-hero .rep-book-link svg{width: 17px; height: 17px; flex-shrink: 0;}
.rep-hero .rep-book-link:hover{background: color-mix(in srgb, var(--z-green) 10%, #ffffff); transform: translateY(-1px);}
/* 「過去のデータを確認」は主要導線として塗りつぶしのオレンジで差別化し、行の右端へ寄せる */
.rep-hero .rep-book-link--past{
  color: #ffffff;
  background: #ff9502;
  border-color: #ff9502;
  margin-left: auto;
}
.rep-hero .rep-book-link--past:hover{background: color-mix(in srgb, #ff9502 88%, #000000);}

/* ---- 上部KPI帯(ダッシュボード型のみ表示) ---- */
.kpi-top{margin-bottom: 0;}
.kpi-top:empty{display: none;}

/* ---- メイン2カラム ---- */
/* 右側(データ詳細)を主役に。左=地図/一覧を細めに、右=データを広く取る */
.rep-main{display: grid; grid-template-columns: minmax(0,510px) minmax(0,1fr); gap: 28px; align-items: start;}
.rep-main>*{min-width: 0;}
@media (max-width:1120px){.rep-main{grid-template-columns: 1fr;}}
/* 比較ビューは詳細を隠して全幅で表示 */
.rep-main.mode-compare{grid-template-columns: 1fr;}
.rep-main.mode-compare .detail-col{display: none;}
/* 初期(未選択): 本体は非表示。3つの大ボタンで選んでから表示する
   (タイトル・主要3指標・築年代フィルタ・検索・ボタンは初期から表示) */
.rep-main.mode-idle{display: none;}

/* ---- 初期画面のマーケット要約(主要3指標) ---- */
.market-summary:empty{display: none;}
/* 主要指標5つを1枚のパネルに収め、ヘアラインで区切るだけの誌面調。
   グラデーション・塗りつぶし・ホバーの持ち上げ等の装飾は使わない。
   ※隙間(gap:1px)から背景色が覗くことで区切り線になるため、
     空セルが出ない列数にすること(出る場合は最終カードを span させる)。 */
.ms-grid{
  display: grid; grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 1px;
  background: var(--hair-dark);
  border: var(--card-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.ms-card{background: var(--surface); padding: 20px 20px 16px; min-width: 0;}
.ms-ico{display: none;}
.ms-label{font-size: 14px; font-weight: 700; color: var(--sub); letter-spacing: .02em;}
.ms-value{
  font-family: 'Oswald','Noto Sans JP',sans-serif;
  font-size: 34px; font-weight: 600;
  color: var(--ink-strong);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  white-space: nowrap;
}
.ms-value small{font-family: 'Noto Sans JP',sans-serif; font-size: 16px; font-weight: 500; color: var(--sub); margin-left: 4px;}
.ms-note{font-size: 13px; color: var(--muted); line-height: 1.6; margin-top: 4px;}

/* ---- 探索ツール(検索 + 見る方法 + 指標) ---- */
.explore-col{min-width: 0;}
.explore-bar{display: flex; flex-wrap: wrap; align-items: center; gap: 14px 14px;}
.explore-bar .map-search{flex: 1 1 100%; min-width: 220px; margin-bottom: 0;}
.view-switch{flex: 1 1 100%; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;}
.view-lead{font-size: 15px; font-weight: 700; color: var(--muted); letter-spacing: .06em; flex-shrink: 0;}

/* 大きな切替ボタン(初期画面の主役。クリックで各ビューを表示) */
.view-tabs{display: flex; gap: 14px; flex-wrap: wrap; width: 100%;}
.view-tabs button{
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border: 1.5px solid var(--hair-dark);
  background: var(--surface);
  padding: 22px 18px;
  font-size: 19px; font-weight: 700;
  color: var(--ink-strong);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease;
}
.view-tabs button svg{width: 23px; height: 23px; flex-shrink: 0; color: var(--accent);}
.view-tabs .vt-short{display: none;}
.view-tabs button:hover{border-color: var(--accent); color: var(--accent-d); transform: translateY(-2px); box-shadow: var(--card-shadow-lift);}
.view-tabs button.on{
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-d) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 3px 8px rgba(15,110,116,.25), 0 14px 30px -10px rgba(15,110,116,.55);
}
.view-tabs button.on svg{color: #fff;}
.view-tabs button:focus-visible{outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 2px;}
/* 絞り込み(指標・築年代など)をすべてプルダウンで1行に並べる。狭い幅では折り返す */
.filter-row{
  flex: 1 1 100%;
  display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;
}
.filter-selects{display: flex; align-items: center; gap: 12px 20px; flex-wrap: wrap;}
/* 指標は比較ビュー/初期では意味を持たないため隠す(他の絞り込みは残す) */
.explore-bar.hide-metric .metric-tabs{display: none;}
.view-panel{display: none;}
.view-panel.on{display: block;}

/* ---- 地図カード ---- */
.map-card{
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--card-shadow);
}
/* 指標は .era-bar と同じ「ラベル＋プルダウン」構造(スタイルは絞り込みフィルタ側で定義) */
.metric-tabs{display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin-bottom: 0;}

/* 検索 */
.map-search{position: relative; margin-bottom: 12px;}
.map-search .search-ico{
  position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
  color: var(--accent-d);
  pointer-events: none;
}
.map-search input{
  width: 100%;
  padding: 14px 44px 14px 46px;
  border: 1.5px solid var(--hair-dark);
  border-radius: 999px;
  font-size: 16px; font-family: inherit;
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--card-shadow);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.map-search input::placeholder{color: var(--muted);}
.map-search input:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent), var(--card-shadow);
}
.map-search .clear-btn{
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  border: none;
  background: var(--surface-2);
  color: var(--sub);
  font-size: 17px; line-height: 1;
  width: 28px; height: 28px; border-radius: 50%;
  padding: 0;
  display: none;
}
.map-search .clear-btn:hover{background: var(--hair);}
.map-search.has-val .clear-btn{display: block;}
.suggest{
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-s);
  max-height: 300px; overflow-y: auto;
  z-index: 25;
  box-shadow: var(--card-shadow-lift);
  display: none; list-style: none; margin: 0; padding: 6px;
}
.suggest.open{display: block;}
.suggest li{
  padding: 10px 13px;
  font-size: 16px;
  cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.suggest li.active,.suggest li:hover{background: var(--surface-2); border-left-color: var(--accent);}
.suggest li .s-name{color: var(--ink); font-weight: 500;}
.suggest li .s-sub{font-size: 15px; color: var(--muted); white-space: nowrap;}
.suggest .s-empty{padding: 12px 13px; color: var(--muted); font-size: 16px;}

/* 地図SVG */
/* フレームは padding-top のアスペクト箱(全ブラウザ対応)。SVGは枠いっぱいに絶対配置。 */
.map-frame{position: relative; touch-action: none; border-radius: var(--radius-s); overflow: hidden; background: linear-gradient(180deg,#fbfdfd,#f2f7f7);}
.map-frame::before{content:""; display: block; padding-top: 80.61%;} /* 全域アスペクト 790/980 */
#realMap{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.geo{transition: opacity .12s ease;}
.geo:not(.has-data){fill: var(--geo-empty);}
.geo.has-data{cursor: pointer;}
.geo.has-data:hover{opacity: .82;}
/* 選択: 単独エリアは黒枠、結合エリア(広域)は内部線を出さないため塗りを濃くして示す */
.geo.sel:not(.merged){stroke: #0b0b0b !important; stroke-width: 2.5 !important;}
.geo.merged.sel{filter: brightness(.8) saturate(1.3);}
.geo:focus-visible{outline: none; stroke: var(--accent) !important; stroke-width: 2.5 !important;}
.pref-border{fill: none; stroke: #6f6d66; stroke-width: 1.8; stroke-linejoin: round; stroke-dasharray: 5 3; opacity: .6; pointer-events: none;}
.geo-label{font-family: 'Noto Sans JP',sans-serif; text-anchor: middle; pointer-events: none; dominant-baseline: middle;}
.geo-label.lead{paint-order: stroke; stroke: rgba(252,253,248,.85); stroke-width: 2.6px; stroke-linejoin: round;}
.map-controls{position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; z-index: 10;}
.map-controls button{
  width: 52px; height: 44px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(19,90,96,.2);
  border-radius: var(--radius-s);
  font-size: 19px; font-weight: 700;
  color: var(--ink-strong);
  box-shadow: 0 3px 10px rgba(11,40,44,.18);
  padding: 0; line-height: 1;
  transition: background .12s ease, transform .12s ease;
}
.map-controls button.wide{font-size: 15px; letter-spacing: .02em;}
.map-controls button:hover{background: #ffffff;}
.map-controls button:active{transform: scale(.94);}
.map-hint{font-size: 16px; color: var(--muted); margin-top: 10px; line-height: 1.6;}

.legend{margin-top: 16px;}
.legend-bins{display: flex; height: 12px; border-radius: 6px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(19,90,96,.14);}
.legend-bins span{flex: 1;}
.legend-ticks{display: flex; justify-content: space-between; font-size: 15px; color: var(--muted); margin-top: 5px; font-variant-numeric: tabular-nums;}
.legend-note{font-size: 15px; color: var(--muted); margin-top: 8px;}

.region-chips{display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair);}
.region-chips button{
  border: 1px solid var(--hair-dark);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 16px;
  color: var(--sub);
  transition: all .15s ease;
}
.region-chips button:hover{border-color: var(--accent); color: var(--accent-d); transform: translateY(-1px);}
.region-chips button.on{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 13%, #ffffff);
  color: var(--accent-d);
  font-weight: 700;
}

/* ツールチップ */
#mapTip{
  position: fixed; pointer-events: none; z-index: 50; display: none;
  background: var(--chart-tip-bg);
  color: #eef4f4;
  padding: 13px 17px;
  border-radius: var(--radius-s);
  font-size: 16px; line-height: 1.7;
  box-shadow: 0 10px 28px rgba(4,22,25,.4);
  max-width: 300px;
}
#mapTip .tt-name{font-size: 18px; font-weight: 700; border-bottom: 1px solid rgba(255,255,255,.22); padding-bottom: 4px; margin-bottom: 5px;}
#mapTip .tt-row{display: flex; justify-content: space-between; gap: 18px;}
#mapTip .tt-row b{font-variant-numeric: tabular-nums;}

/* ---- 詳細カラム ---- */
/* scroll-margin-top は追従ヘッダー対応としてファイル末尾でまとめて指定 */
.detail-head{
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  border-bottom: 2px solid var(--hair-dark);
  padding-bottom: 14px; margin-bottom: 20px;
}
.detail-head .marker{
  width: 8px; height: 30px;
  background: linear-gradient(180deg, var(--accent-soft), var(--accent-d));
  display: inline-block; border-radius: 4px; align-self: center;
}
.detail-head h2{font-family: 'Oswald','Noto Sans JP',sans-serif; font-size: 36px; font-weight: 700; color: var(--ink-strong); letter-spacing: .01em;}
.detail-head .d-sub{font-size: 16px; color: var(--muted);}

/* ---- KPI(数字の視認性を最優先) ----
   1枚のパネルにヘアライン区切りで並べる誌面調。
   グラデーションバー・カードごとの影は使わない。 */
.kpi-grid{
  display: flex; flex-wrap: wrap;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius-s);
  overflow: hidden;
  margin-bottom: 30px;
}
.kpi{
  flex: 1 1 19%;
  min-width: 118px;
  padding: 14px 18px 12px;
  /* 隣接セルとの区切り(外周にはみ出す分はoverflow:hiddenで隠れる) */
  border-left: 1px solid var(--hair);
  border-top: 1px solid var(--hair);
  margin-left: -1px;
  margin-top: -1px;
}
.kpi .k-label{font-size: 13px; color: var(--muted); letter-spacing: .05em; font-weight: 700;}
.kpi .k-value{
  font-family: 'Oswald','Noto Sans JP',sans-serif;
  font-size: 25px; font-weight: 600;
  color: var(--ink-strong);
  margin-top: 3px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
  white-space: nowrap;
}
.kpi .k-value small{font-family: 'Noto Sans JP',sans-serif; font-size: 13px; font-weight: 500; color: var(--sub); margin-left: 3px;}
.kpi .k-note{font-size: 14px; color: var(--muted); margin-top: 4px;}
.kpi .k-note.up{color: var(--good); font-weight: 700;}
.kpi .k-note.down{color: var(--bad); font-weight: 700;}

/* ---- グラフ ---- */
.charts{display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 8px;}
@media (max-width:900px){.charts{grid-template-columns: 1fr;}}
.chart-card{
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  box-shadow: var(--card-shadow);
}
.chart-card h3{
  display: flex; align-items: center; gap: 8px;
  font-size: 18px; font-weight: 700; color: var(--ink-strong);
  margin-bottom: 2px;
}
.chart-card h3::before{
  content:""; width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-d));
}
.chart-card .c-sub{font-size: 15px; color: var(--muted); margin-bottom: 10px;}
.chart-box{position: relative; height: 300px;}
.chart-box canvas{max-width: 100%;}

/* ---- 数値表 ---- */
details.tbl{margin: 14px 0 26px;}
details.tbl summary{
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 16px; color: var(--accent-d); font-weight: 500;
  cursor: pointer; letter-spacing: .04em;
  list-style: none;
}
details.tbl summary::-webkit-details-marker{display: none;}
details.tbl summary::before{
  content:""; width: 8px; height: 8px; flex-shrink: 0;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform .15s ease;
  margin-top: -2px;
}
details.tbl[open] summary::before{transform: rotate(45deg); margin-top: -5px;}
/* 数値表の横スクロールをこのラッパー内に閉じ込める(bodyの横スクロールを防ぐ) */
.tbl-scroll{
  margin-top: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-s);
}
details.tbl table{
  border-collapse: separate; border-spacing: 0;
  font-size: 16px; width: 100%; min-width: 420px;
  border: var(--card-border); border-radius: var(--radius-s);
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
details.tbl th,details.tbl td{
  border-bottom: 1px solid var(--hair);
  padding: 9px 14px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
details.tbl tr:last-child th,details.tbl tr:last-child td{border-bottom: none;}
details.tbl th{background: var(--surface-2); font-weight: 500; color: var(--sub);}
details.tbl td{background: var(--surface); color: var(--ink);}
details.tbl tbody tr:nth-child(even) td{background: #f8fbfb;}
details.tbl td:first-child,details.tbl th:first-child{text-align: left;}

.empty-state{
  background: var(--surface);
  border: 1.5px dashed var(--hair-dark);
  border-radius: var(--radius);
  padding: 44px 40px;
  text-align: center;
  color: var(--muted);
  font-size: 16px;
}

/* ---- 注記 ---- */
.rep-notes{margin-top: 6px; padding-top: 20px; border-top: 1px solid var(--hair-dark);}
.rep-notes .f-inner{font-size: 14px; color: var(--muted); line-height: 1.9;}
.rep-notes:has(.f-inner:empty){display: none;}

/* ---- レスポンシブ ---- */
@media (max-width:720px){
  /* モバイルは固定ヘッダーがページ上端に重なるため、被らない範囲で上余白を詰める */
  .nz-report{font-size: 16px; padding: 130px 0 48px;}
  /* --rep-pad を左右余白の基準にし、全幅で見せたい要素は
     margin-inline: calc(-1 * var(--rep-pad)) で画面端まで広げる */
  .rep-inner{--rep-pad: 14px; width: 100%; padding: 0 var(--rep-pad); gap: 22px;}
  .rep-hero{padding: 24px 20px 22px; border-radius: 15px 15px 0 0;width: 100vw;
    margin-inline: calc(50% - 50vw);}
  .rep-hero .rep-kicker{font-size: 14px; letter-spacing: .26em; margin-bottom: 8px;}
  .rep-hero .rep-title{font-size: 23px;}
  .rep-hero .rep-meta{margin-top: 12px; gap: 10px;}
  .rep-hero .rep-badge{font-size: 15px; padding: 5px 14px;}
  .rep-hero .rep-scope{font-size: 14px;}
  .map-card{padding: 10px;}
  /* スマホは地図を縦にも広げて大きく見せる(データ集中エリアの23区がほぼ正方形のため) */
  .map-frame::before{padding-top: 100%;}
  .region-chips button{padding: 9px 14px;}
  .map-controls button{width: 48px; height: 44px;}
  .detail-head h2{font-size: 30px;}
  .chart-box{height: 250px;}
}
/* さらに小さい端末では地図をより大きく、余白を詰めて見やすく */
@media (max-width:480px){
  .rep-inner{--rep-pad: 10px;}
  .map-card{padding: 8px;}
  .map-frame::before{padding-top: 104%;}
}

/* ===== 一覧ビュー ===== */
.list-card{
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: 8px 6px;
  box-shadow: var(--card-shadow);
}
.list-head{display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 14px 10px;}
.list-title{font-size: 17px; font-weight: 700; color: var(--ink-strong);}
.list-dir{
  border: 1px solid var(--hair-dark);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 15px;
  font-size: 15px;
  color: var(--sub);
  white-space: nowrap;
  transition: all .15s ease;
}
.list-dir:hover{border-color: var(--accent); color: var(--accent-d);}
/* 集計単位の切替(エリア区分/都県/市区町村) */
.list-grp{display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 12px;}
.list-grp button{
  border: 1px solid var(--hair-dark);
  background: var(--surface);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  color: var(--sub);
  transition: all .15s ease;
}
.list-grp button:hover{border-color: var(--accent); color: var(--accent-d);}
.list-grp button.on{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  color: var(--accent-d);
  font-weight: 700;
}
.rank-list{list-style: none; margin: 0; padding: 0;}
/* 順位番号は付けない。値の相対的な大きさは横バーで示す */
.rank-row{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name val" "bar bar" "sub sub";
  align-items: center;
  column-gap: 12px; row-gap: 2px;
  padding: 11px 16px;
  border-top: 1px solid var(--hair);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background .12s ease, border-color .12s ease;
}
.rank-row:first-child{border-top: none;}
.rank-row:hover{background: var(--surface-2); border-left-color: var(--accent-soft);}
.rank-row.on{border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent);}
.rk-bar{
  grid-area: bar;
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
  overflow: hidden;
}
.rk-bar i{display: block; height: 100%; border-radius: 3px; background: var(--accent);}
.rk-name{grid-area: name; font-size: 17px; font-weight: 700; color: var(--ink-strong);}
.rk-val{grid-area: val; font-family: 'Oswald','Noto Sans JP',sans-serif; font-size: 21px; font-weight: 600; color: var(--ink-strong); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;}
.rk-sub{grid-area: sub; font-size: 14px; color: var(--muted);}

/* ===== 比較ビュー ===== */
.cmp-card{
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--card-shadow);
}
.cmp-pick{display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 18px;}
.cmp-lab{font-size: 15px; font-weight: 700; color: var(--muted); margin-right: 2px;}
.cmp-chip{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface);
  border: 1px solid var(--hair-dark);
  border-radius: 999px;
  padding: 6px 8px 6px 14px;
  font-size: 15px; font-weight: 700;
  color: var(--ink-strong);
  box-shadow: 0 2px 6px -2px rgba(13,60,66,.2);
}
.cmp-chip i{width: 12px; height: 12px; border-radius: 50%; display: inline-block; flex-shrink: 0;}
.cmp-chip button{
  border: none;
  background: var(--surface-2);
  color: var(--sub);
  border-radius: 50%;
  width: 21px; height: 21px;
  font-size: 14px; line-height: 1; padding: 0;
  transition: all .12s ease;
}
.cmp-chip button:hover{background: var(--bad); color: #fff;}
.cmp-add{
  border: 1.5px dashed color-mix(in srgb, var(--accent) 55%, transparent);
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 15px;
  color: var(--accent-d);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .15s ease;
}
.cmp-add:hover{border-style: solid; background: color-mix(in srgb, var(--accent) 12%, #ffffff);}
.cmp-table-wrap{overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 22px; border-radius: var(--radius-s);}
.cmp-table{
  border-collapse: separate; border-spacing: 0;
  width: 100%; font-size: 15px;
  border: var(--card-border); border-radius: var(--radius-s);
  overflow: hidden;
}
.cmp-table th,.cmp-table td{border-bottom: 1px solid var(--hair); padding: 10px 14px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;}
.cmp-table tr:last-child th,.cmp-table tr:last-child td{border-bottom: none;}
.cmp-table tr:first-child th{background: var(--surface-2); color: var(--ink-strong); font-weight: 700;}
.cmp-table tr th:first-child{background: var(--surface-2); color: var(--sub); font-weight: 500; text-align: left;}
.cmp-table td{background: var(--surface); color: var(--ink);}
.cmp-table .cmp-dot{display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 7px; vertical-align: middle;}

/* 中間幅(タブレット): 数値の折り返しと長いラベルの2行化を防ぐ */
@media (max-width:900px){
  /* 5列が窮屈になる幅では3列にし、4枚目を2列ぶんに伸ばして空セルを作らない */
  .ms-grid{grid-template-columns: repeat(3,minmax(0,1fr));}
  .ms-grid .ms-card:nth-child(4){grid-column: span 2;}
  .ms-card{padding: 16px 16px 13px;}
  .ms-value{font-size: 30px;}
  .ms-value small{font-size: 14px;}
  .view-tabs .vt-full{display: none;}
  .view-tabs .vt-short{display: inline;}
}

@media (max-width:720px){
  .view-switch{width: 100%;}
  .view-lead{flex: 1 1 100%;}
  /* ===== 地図/ランキング/比較の切替: 画面幅いっぱいのタイル =====
     アイコンを上・ラベルを下に置き、1pxの隙間を仕切り線として見せる。
     カードの角丸・影は外し、画面端まで届く一枚の帯にする。 */
  .view-tabs{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1px;
    /* flexアイテムなので幅を明示する(width:autoだと内容幅になり画面端まで届かない)。
       左右の余白ぶんを足し、同じ量だけ負マージンで戻して全幅にする。 */
    flex: 0 0 auto;
    width: calc(100% + var(--rep-pad) * 2);
    margin-inline: calc(-1 * var(--rep-pad));
    background: var(--hair-dark);
    border-block: 1px solid var(--hair-dark);
    border-radius: 0;
  }
  .view-tabs button{
    flex: none;
    flex-direction: column;
    gap: 7px;
    padding: 15px 4px 13px;
    font-size: 15px;
    white-space: nowrap;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--surface);
  }
  .view-tabs button svg{width: 27px; height: 27px;}
  /* 選択中はフラットなアクセント塗り(グラデーションは使わない) */
  .view-tabs button.on{
    background: var(--accent-d);
    color: #fff;
    box-shadow: none;
  }
  .view-tabs button:hover{transform: none; box-shadow: none;}
  .view-tabs .vt-full{display: none;}
  .view-tabs .vt-short{display: inline;}
  /* 切替タイルとフィルター帯を隣接させ、1つのまとまりとして見せる */
  .explore-bar{gap: 12px;}
  .explore-bar .view-switch{margin-bottom: 0;}
  /* 検索は指を置きやすいよう高さを増やす */
  .map-search input{padding: 10px 44px 10px 46px;}
  /* 地図・一覧・比較の各カードも画面幅いっぱいに広げる */
  .map-card,.list-card,.cmp-card{
    margin-inline: calc(-1 * var(--rep-pad));
    border-inline: none;
    border-radius: 0;
    box-shadow: none;
  }
  /* マーケット要約: 主要3指標を横並びのままコンパクトに
     (minmax(0,1fr)で数値幅による横あふれを防ぐ) */
  /* スマホは2列。5枚目は1列だけ空くのを避けて横いっぱいに伸ばす */
  .ms-grid{grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px;}
  .ms-grid .ms-card:nth-child(4){grid-column: auto;}
  .ms-grid .ms-card:nth-child(5){grid-column: 1 / -1;}
  .ms-card{min-width: 0; padding: 12px 12px 10px;}
  .ms-label{font-size: 13px;}
  .ms-value{font-size: 24px;}
  .ms-value small{font-size: 11px; margin-left: 2px;}
  .ms-note{display: none;}
  .rk-val{font-size: 19px;}
  .rk-name{font-size: 16px;}
  .rk-sub{font-size: 13px;}
  .cmp-card{padding: 12px;}
  .cmp-table{font-size: 13px;}
  .cmp-table th,.cmp-table td{padding: 7px 9px;}
}

/* ===== サマリー(今月の要点。renderSummary使用時のみ) ===== */
.rep-summary{margin-bottom: 38px;}
.sum-lead{font-size: 18px; color: var(--ink); margin-bottom: 14px; line-height: 1.7;}
.sum-grid{display: grid; grid-template-columns: repeat(3,1fr); gap: 14px;}
@media (max-width:860px){.sum-grid{grid-template-columns: 1fr;}}
.sum-card{
  position: relative;
  background: var(--surface);
  border: var(--card-border);
  border-radius: var(--radius);
  padding: 20px 22px 16px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
}
.sum-card::before{
  content:""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--accent-d), var(--accent) 55%, var(--accent-soft));
}
.sum-point{font-size: 15px; letter-spacing: .2em; color: var(--accent-d); font-weight: 700; font-family: 'Oswald','Noto Sans JP',sans-serif;}
.sum-label{font-size: 16px; color: var(--sub); margin-top: 7px; font-weight: 700;}
.sum-value{font-family: 'Oswald','Noto Sans JP',sans-serif; font-size: 44px; font-weight: 600; color: var(--ink-strong); line-height: 1.1; font-variant-numeric: tabular-nums; margin-top: 2px;}
.sum-value small{font-family: 'Noto Sans JP',sans-serif; font-size: 17px; font-weight: 500; color: var(--sub); margin-left: 3px;}
.sum-take{font-size: 16px; color: var(--sub); margin-top: 9px; line-height: 1.7;}
.sum-insight{
  margin-top: 14px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  padding: 13px 16px;
  font-size: 16px; color: var(--ink); line-height: 1.8;
}
.sum-insight:empty{display: none;}
.explore-label{margin-top: 4px;}
@media (max-width:720px){
  .rep-summary{margin-bottom: 28px;}
  .sum-value{font-size: 36px;}
}

/* ===== 絞り込みフィルタ(築年代など。プルダウン形式) ===== */
.era-bar{display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; margin: 0;}
/* 3つのフィルタ(指標・築年代・築年数)のラベルは共通の見た目にする
   ※ .metric-tabs 配下のラベルにも必ず効かせること(font-family はサイト共通CSSに
     奪われないよう明示する) */
.era-label{
  font-family: 'Noto Sans JP',system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size: 15px; letter-spacing: .04em;
  color: var(--muted); font-weight: 700;
  white-space: nowrap;
}
.filter-select{
  border: 1.5px solid var(--hair-dark);
  background: var(--surface);
  border-radius: 999px;
  padding: 9px 34px 9px 16px;
  font-size: 16px;
  /* select は font を継承しないブラウザがあるため明示 */
  font-family: 'Noto Sans JP',system-ui,-apple-system,"Segoe UI",sans-serif;
  color: var(--ink-strong);
  font-weight: 700;
  cursor: pointer;
  /* ネイティブの矢印を消し、テーマ色の▼を描く */
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent-d) 50%), linear-gradient(135deg, var(--accent-d) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.filter-select:hover{border-color: var(--accent);}
.filter-select:focus-visible{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent);
}
/* 各フィルタは「ラベル + プルダウン」を必ず1行に収める(折り返して2行にしない) */
.era-bar,.metric-tabs{flex-wrap: nowrap; min-width: 0;}
.era-label{flex: 0 0 auto;}
.filter-select{min-width: 0;}
@media (max-width:720px){
  /* ===== フィルター: 画面幅いっぱいの設定リスト =====
     「ラベル(左) — プルダウン(右)」の行を積み、行間をヘアラインで区切る。
     ビュー切替タイルと同じく画面端まで届く一枚の帯にする。 */
  .filter-row{
    display: block;
    gap: 0;
    /* .view-tabs と同様、flexアイテムのため幅を明示して全幅にする */
    flex: 0 0 auto;
    width: calc(100% + var(--rep-pad) * 2);
    margin-inline: calc(-1 * var(--rep-pad));
    background: var(--surface);
    border-block: 1px solid var(--hair-dark);
  }
  .filter-selects{display: block; width: 100%; gap: 0;}
  .filter-row .metric-tabs,
  .filter-selects .era-bar{
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    width: auto;
    padding: 11px var(--rep-pad);
    border-bottom: 1px solid var(--hair);
  }
  /* 最後の行(築年数)は帯の下枠と二重線にならないよう区切りを消す */
  .filter-selects .era-bar:last-child{border-bottom: none;}
  /* 指標を隠す比較ビュー・初期表示では、築年代が先頭行になる */
  .era-label{font-size: 14px; letter-spacing: .02em;}
  .filter-select{flex: 1 1 auto; max-width: 64%; text-align: left;}
}

/* ===== 追従ヘッダーぶんのスクロール余白 =====
   サイト共通ヘッダーが fixed で追従するため、スクロール先が隠れないよう
   その実測高さ(--nz-head。report.core.js が設定)を逃げに使う。 */
html{scroll-padding-top: calc(var(--nz-head, 0px) + 14px);}
.detail-col{scroll-margin-top: calc(var(--nz-head, 0px) + 14px);}
#pageTop, .rep-hero, .explore-bar, .rep-main{
  scroll-margin-top: calc(var(--nz-head, 0px) + 14px);
}

/* ===== 簡易マップ(都県カード / 23区タイル) =====
   スマホでは常に簡易マップ。PCは既定で詳細マップ(SVG)、
   切替タブ(.map-style-tabs)で簡易マップも選べる。 */
.simple-map{display: none;}
.map-card.simple .map-frame{display: none;}
.map-card.simple .simple-map{display: block;}
.map-style-tabs{display: flex; gap: 6px; margin-bottom: 12px;}
.map-style-tabs:empty{display: none;}
.map-style-tabs button{
  border: 1px solid var(--hair-dark);
  background: var(--surface);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px; font-weight: 700;
  color: var(--sub);
  transition: all .15s ease;
}
.map-style-tabs button:hover{border-color: var(--accent); color: var(--accent-d);}
.map-style-tabs button.on{
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  color: var(--accent-d);
}
@media (max-width:720px){
  /* スマホは常に簡易マップ(切替タブは出さない) */
  .map-style-tabs{display: none;}
  .map-frame{display: none;}
  .simple-map{display: block;}
}
.sm-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.sm-seg{
  display: inline-flex;
  /* 縮ませない。縮むとボタン内の文字が1文字ずつ縦積みになって崩れる */
  flex: 0 0 auto;
  border: 1px solid var(--hair-dark);
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface);
}
.sm-seg button{
  border: none;
  background: transparent;
  padding: 8px 16px;
  font-size: 14px; font-weight: 700;
  color: var(--sub);
  white-space: nowrap;
}
.sm-seg button.on{background: var(--accent-d); color: #fff;}
/* 指標ラベルは長くなるため、nowrapにせず折り返させる(セグメントを押し潰さないため) */
.sm-metric{
  flex: 1 1 auto; min-width: 0;
  text-align: right;
  font-size: 13px; color: var(--muted); font-weight: 700;
  line-height: 1.5;
}

/* 都県ごと: 地理的な位置関係を模したカード配置(埼玉=上, 千葉=右, 神奈川=下)
   配色は地図カード(.map-frame)と同じティール系に揃える */
.sm-prefs{
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  grid-template-areas:
    "sai sai"
    "tok chi"
    "kan chi";
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-s);
  padding: 14px;
}
.sm-card{
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid var(--hair-dark);
  align-self: start;
}
.sm-name{
  background: var(--accent-d);
  color: #fff;
  font-size: 14px; font-weight: 700;
  text-align: center;
  padding: 7px 8px;
  letter-spacing: .08em;
}
.sm-acts{display: flex; flex-direction: column; gap: 6px; padding: 10px;}
.sm-acts button{
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  border: 1.5px solid var(--hair-dark);
  background: #fff;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 14px; font-weight: 700;
  color: var(--ink-strong);
}
.sm-acts button:active{background: var(--surface-2);}
.sm-bt-val{
  font-family: 'Oswald','Noto Sans JP',sans-serif;
  font-weight: 600;
  color: var(--accent-d);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 23区のみ: 地理関係を模したタイル配置(7列×5行) */
.sm-wards{
  display: grid;
  /* minmax(0,1fr) で列が内容幅に押し広げられるのを防ぐ(タイルのはみ出し対策) */
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 3px;
  background: var(--surface-2);
  border: 1px solid var(--hair);
  border-radius: var(--radius-s);
  padding: 8px;
}
.sm-tile{
  border: none;
  border-radius: 7px;
  /* 数値を大きく見せるため、正方形より少し縦長にして2行分の余裕を作る */
  aspect-ratio: 1 / 1.18;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2px 1px;
  font-family: inherit;
  line-height: 1.15;
  text-align: center;
  overflow: hidden;   /* 「千代田区」等の長い区名がタイルからはみ出さないように */
}
.sm-tile.sel{outline: 2.5px solid #0b0b0b; outline-offset: 1px;}
/* 築年数フィルタ外のタイル(淡色)は文字も控えめにして対象を目立たせる */
.sm-tile.off{color: var(--muted) !important;}
.sm-tile.off .sm-w-val{font-weight: 500;}
/* 区名は控えめに、数値を主役に。数値は Oswald + tabular-nums で桁を揃える */
.sm-w-name{font-size: 9.5px; font-weight: 500; letter-spacing: -.05em; opacity: .9;}
.sm-w-val{
  font-family: 'Oswald','Noto Sans JP',sans-serif;
  font-size: 13px; font-weight: 600;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  margin-top: 1px;
}
.sm-back{
  margin-top: 10px;
  border: 1px solid var(--hair-dark);
  background: var(--surface);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 14px;
  color: var(--sub);
}
/* PCで簡易マップを選んだときは、余白に合わせて文字を一回り大きく */
@media (min-width:721px){
  .sm-seg button{font-size: 15px; padding: 9px 20px;}
  .sm-metric{font-size: 15px;}
  .sm-prefs{gap: 12px; padding: 18px;}
  .sm-name{font-size: 16px; padding: 9px 8px;}
  .sm-acts{gap: 8px; padding: 12px;}
  .sm-acts button{font-size: 16px; padding: 11px 14px;}
  .sm-wards{gap: 5px; padding: 14px;}
  .sm-w-name{font-size: 12.5px; letter-spacing: -.02em;}
  .sm-w-val{font-size: 19px;}
  .sm-back{font-size: 15px; padding: 9px 18px;}
}