/* ===========================================
   map.css - エリアマップ用スタイル（本番用）
   fillの直接操作方式に統一
   =========================================== */

/* カラー変数 */
:root {
  /* ブランドカラー */
  --brand-primary: #214284;
  --brand-secondary: #043d88;
  --brand-accent: #00146f;
  /* 共通色 */
  --color-white: #fff;
  --color-bg-map: #ecf8ff;
}

/* マップコンテナ */
.map-container {
  max-width: 960px;
  margin: 0 auto;
}

.map-container svg {
  width: 100%;
  height: auto;
}

/* 色でエリア判定 - カーソルだけCSSで */
/* 北海道エリア色 */
[fill="#e2a6af"],
[fill="#e3bda0"],
[fill="#7bbacc"],
[fill="#78a3ce"] {
  cursor: pointer;
}

/* 沖縄エリア色（一部重複） */
/* #7bbacc, #e2a6af, #e3bda0 は北海道と共通 */

/* ラベルボタン（PC/SP共通） */
[id^="btn-"] {
  cursor: pointer;
}

/* ボタンホバー時のスタイル */
[id^="btn-"].hover rect {
  fill: var(--brand-accent) !important;
  stroke: var(--brand-accent) !important;
}

[id^="btn-"].hover text {
  fill: #fff !important;
}

[id^="btn-"].hover path {
  stroke: #fff !important;
}

/* 選択状態のボタンスタイル */
[id^="btn-"].selected rect {
  fill: var(--brand-accent) !important;
  stroke: var(--brand-accent) !important;
}

[id^="btn-"].selected text {
  fill: #fff !important;
}

[id^="btn-"].selected path {
  stroke: #fff !important;
}

/* PC/SP切り替え */
.map-pc {
  display: block;
}

.map-sp {
  display: none;
}

@media (max-width: 767px) {
  .map-pc {
    display: none;
  }

  .map-sp {
    display: block;
  }
}

/* ページネーションで非表示 */
.asw-layout-grid__item.area-pagination-hidden {
  display: none !important;
}

/* フィルタで非表示 */
.asw-layout-grid__item.area-filtered-hidden {
  display: none !important;
}

/* セクション非表示（沖縄ページ用） */
.section-hidden {
  display: none !important;
}

/* もっと見るボタン非表示 */
.asw-see-more__button.hide {
  display: none !important;
}

/* ============================================================
  asw-layout-grid__item マージン制御
  フレームワーク側の複雑なルール（data-pc-column="3" はコメントアウト済み）を
  !important で打ち消し、row-gap で再定義する。

  対象: .asw-expand 配下のカードグリッド
   ============================================================ */

/* 全ブレークポイント共通: フレームワークの margin-top を一括リセット */
.asw-expand .asw-layout-grid > .asw-layout-grid__inner > .asw-layout-grid__item {
  margin-top: 0 !important;
}

/* PC (3列) — 可視行間 32px */
@media (min-width: 1025px) {
  .asw-expand .asw-layout-grid[data-pc-column="3"] > .asw-layout-grid__inner {
    row-gap: 64px !important;
  }
}

/* タブレット (2列) — 可視行間 32px */
@media (min-width: 768px) and (max-width: 1024px) {
  .asw-expand .asw-layout-grid[data-tab-column="2"] > .asw-layout-grid__inner {
    row-gap: 32px !important;
  }
}

/* SP (1列) — 可視行間 24px */
@media (max-width: 767px) {
  .asw-expand .asw-layout-grid[data-sp-column="1"] > .asw-layout-grid__inner {
    row-gap: 24px !important;
  }
}

/* アクセシビリティ: スクリーンリーダー専用テキスト */
.visually-hidden:where(:not(:focus-within, :active)) {
  position: absolute !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  white-space: nowrap !important;
}