/* レスポンシブ(両償設計・spec §4.7)
   ブレークポイント: 〜640px(モバイル) / 641-1024px(タブレット) / 1025px〜(PC) */

/* タブレット */
@media (max-width: 1024px) {
  .kpi-grid, .hero-kpis { grid-template-columns: repeat(3, 1fr); }
  .bar-row, .compare-row { grid-template-columns: 110px minmax(0, 1fr) 52px; }
}

/* モバイル */
@media (max-width: 640px) {
  body { font-size: var(--fs-base); }
  .container { padding: 0 var(--sp-4); }

  /* ヘッダー: モバイルは右上の LINE CTA を隠す（画面下の固定CTAに集約）。ナビはハンバーガー。 */
  .site-header .inner { justify-content: space-between; gap: var(--sp-2); }
  .site-header .line-cta { display: none; }

  /* 下部の固定LINE CTAバー: 画面の最下部に置く（ボトムナビは廃止） */
  .mobile-cta {
    display: inline-flex; position: fixed; z-index: 59;
    left: 14px; right: 14px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    justify-content: center; font-size: var(--fs-md); padding: 12px 18px;
    box-shadow: 0 8px 20px rgba(6, 199, 85, .35);
  }
  /* ページトップボタンは固定CTAバーの上へ退避(ノッチ端末はCTAバーと同様に
     safe-area を加算しないとバーに食い込む) */
  .c-pagetop { bottom: calc(70px + env(safe-area-inset-bottom)); }

  /* KPI: 横スクロールカード(spec §4.7) */
  .kpi-grid, .hero-kpis {
    display: flex; overflow-x: auto; gap: var(--sp-2);
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  }
  .kpi-grid .kpi-card, .hero-kpis .kpi-card {
    min-width: 70%; scroll-snap-align: start;
  }

  /* マップ: 全体が画面内に収まるように縮小表示(見切れ防止)。
     タイルは小さくなるが、タップでポップアップが開くため確認できる */
  .tile-map { gap: 2px; min-width: 0; }
  .tile { border-radius: 4px; }
  /* .hero-band .tile-name(components.css の 9-13px・nowrap)より詳細度を上げて
     モバイル縮小を効かせる。nowrap のままだと約21pxのタイルから県名がはみ出す */
  .tile-name, .hero-band .tile-name { font-size: clamp(6px, 2vw, 9px); }
  .tile-count { display: none; }
  .hero-map-panel { padding: var(--sp-3) var(--sp-2) var(--sp-2); }

  /* 地域ランキング表のカード化(順位・県名・件数を1行目、補足を2行目に残す)。
     .rank-table 全般に当てると更新履歴(7列)などの表が崩れるため修飾クラスに限定 */
  .rank-table--pref thead { display: none; }
  .rank-table--pref tr { display: grid; grid-template-columns: auto 1fr auto;
    gap: 2px var(--sp-2); padding: var(--sp-2) 0; align-items: baseline;
    border-bottom: 1px solid var(--border); }
  .rank-table--pref td { border: none; padding: 0; }
  .rank-table--pref td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .rank-table--pref td:nth-child(2) { grid-column: 2; grid-row: 1; }
  .rank-table--pref td:nth-child(4) { grid-column: 3; grid-row: 1; }
  .rank-table--pref td:nth-child(4)::after { content: '件'; font-size: var(--fs-2xs);
    color: var(--ink-600); margin-left: 1px; }
  .rank-table--pref td:nth-child(5),
  .rank-table--pref td:nth-child(6) { grid-column: 2 / 4; text-align: left;
    font-size: var(--fs-2xs); color: var(--ink-600); }
  .rank-table--pref td:nth-child(5)::before { content: '10万人あたり '; }
  .rank-table--pref td:nth-child(6)::before { content: '最多: '; }
  /* 幅の広い表(更新履歴など)は列を消さず横スクロールで全データへ到達可能にする */
  .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll .rank-table { min-width: 640px; }

  .issues-grid { grid-template-columns: 1fr; }
  #home-filter { flex-direction: column; align-items: stretch; }

  /* フッター末尾が固定CTAバーに隠れないように逃げを確保（バー分のみ） */
  .site-footer .inner { padding-bottom: calc(var(--sp-6) + 70px); }
  .bar-row, .compare-row { grid-template-columns: 90px minmax(0, 1fr) 48px; }
}

/* ── ダークヒーローのモバイル調整 ── */
@media (max-width: 640px) {
  .hero-band { padding-top: 44px; padding-bottom: var(--sp-6); }
  /* ブランドヒーローは浮きヘッダーの背後に回り込むぶん上余白を足す */
  .hero-brand { padding-top: 44px; }
  .hero-band h1 { font-size: 26px; }
  .hero-lead { font-size: var(--fs-sm); }
  .hero-stats { gap: var(--sp-2) 0; }
  .hero-stat { padding: 0 var(--sp-4); }
  .hs-value { font-size: var(--fs-md); }

  .section .card { padding: var(--sp-4); }
  .inline-filter { flex-direction: column; align-items: stretch; }
}

/* 情報密度強化のモバイル調整 */
@media (max-width: 640px) {
  .series-grid { grid-template-columns: 1fr; }
  .movers-grid { grid-template-columns: 1fr; }
  .rank-bar-col { display: none; }
}

/* サービス紹介ページのモバイル */
@media (max-width: 760px) {
  .as-column { grid-template-columns: 1fr; }
  .as-column.type-reverse .as-column-visual { order: 0; }
  .as-features, .as-audience { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .as-kv-inner { grid-template-columns: 1fr; text-align: center; }
  .as-kv-text { text-align: center; }
  .as-kv-map { margin: var(--sp-5) auto 0; max-width: 340px; }
}
@media (max-width: 640px) {
  .as-steps { grid-template-columns: 1fr; }
  .as-kv { padding-top: 100px; }
}