@charset "UTF-8";
/* ==========================================================================
   トップ「都道府県からワイン会を探す」の地図化（2026-10-12）
   - PC/タブレット: 地図｜(エリアボタン → 都道府県パネル) の横並び。スクロール不要。
   - スマホ(767px以下): 縦積み（地図 → エリア → パネル）、地図全体を枠内で中央配置。
   - 都道府県はしっぽのないリスト項目（既存の <a> はそのまま＝SEO維持）。
   読み込み: wk-global.css の後（functions.php / inc/winekai-map.php の enqueue で保証）。
   ========================================================================== */

.wk-top .wk-top-map{margin:0 0 24px}
.wk-top .wk-top-map *, .wk-top .wk-top-map *::before,
.wk-top .wk-top-map *::after{box-sizing:border-box}

/* 凡例 */
.wk-top .wk-top-map__legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:0 0 12px;font-size:12px;color:var(--wk-text-2)}
.wk-top .wk-top-map__key{display:inline-block;width:13px;height:13px;border-radius:3px;
  border:1px solid var(--wk-line-strong)}
.wk-top .wk-top-map__key.has-events{background:var(--wk-wine-2);border-color:var(--wk-wine)}
.wk-top .wk-top-map__key.is-empty{background:var(--wk-cream)}
.wk-top .wk-top-map__hint{margin-left:auto;color:var(--wk-text-2)}

/* レイアウト */
.wk-top .wk-top-map__layout{display:grid;grid-template-columns:minmax(0, min(34%,340px)) minmax(0,1fr);
  gap:24px;align-items:start}
.wk-top .wk-top-map__canvas{margin:0;min-width:0}
.wk-top .wk-map{display:block;width:100%;height:auto}
.wk-top .wk-top-map__side{display:flex;flex-direction:column;gap:12px;min-width:0}

/* 地図パス */
.wk-top .wk-map__pref{fill:var(--wk-cream);stroke:var(--wk-paper);stroke-width:1.2;cursor:pointer;
  transition:fill .15s ease}
.wk-top .wk-map__pref.has-events{fill:var(--wk-wine-2)}
.wk-top .wk-map__region{transition:opacity .15s ease}
@media (hover:hover){
  .wk-top .wk-map__region{opacity:.72}
  .wk-top .wk-map__region:hover,.wk-top .wk-map__region.is-active{opacity:1}
  .wk-top .wk-map__region:hover .wk-map__pref.has-events{fill:var(--wk-wine)}
  .wk-top .wk-map__region.is-active .wk-map__pref.has-events{fill:var(--wk-wine)}
}
.wk-top .wk-map__pref:focus-visible{outline:3px solid var(--wk-wine);outline-offset:1px}

/* 地方（エリア）ボタン */
.wk-top .wk-top-map__areas{display:flex;flex-wrap:wrap;gap:8px}
.wk-top .wk-top-map__area{display:inline-flex;align-items:center;gap:6px;min-height:44px;
  padding:8px 14px;border:1px solid var(--wk-line-strong);border-radius:4px;
  background:var(--wk-paper);color:var(--wk-text);font-size:14px;line-height:1.4;
  cursor:pointer;font-family:inherit}
.wk-top .wk-top-map__area.has-events{border-color:var(--wk-wine)}
.wk-top .wk-top-map__area[aria-pressed="true"]{background:var(--wk-wine);color:var(--wk-paper);
  border-color:var(--wk-wine)}
.wk-top .wk-top-map__area[aria-pressed="true"] .wk-top-map__areacount{color:var(--wk-wine-tint)}
.wk-top .wk-top-map__areacount{color:var(--wk-text-2);font-size:11px}
.wk-top .wk-top-map__clear{min-height:44px;padding:8px 14px;
  border:1px dashed var(--wk-line-strong);border-radius:4px;background:transparent;
  color:var(--wk-text-2);font-size:13px;cursor:pointer;font-family:inherit}
.wk-top .wk-top-map__clear[hidden]{display:none}

/* 地方ボタンに続く一覧パネル。固定位置の三角は使わない。 */
.wk-top .wk-top-map__panel{margin:0;padding:16px;background:var(--wk-paper);
  border:1px solid var(--wk-line);border-radius:4px;box-shadow:none;min-width:0}
.wk-top .wk-top-map__panel::before{content:none}
.wk-top .wk-top-map__panel .wk-top-area{display:grid;gap:24px;min-width:0}
.wk-top .wk-top-map__panel .wk-top-area__block{margin:0;min-width:0}
.wk-top .wk-top-map__panel .wk-top-area__region{margin:0 0 12px;font-size:14px;
  font-family:var(--wk-serif);font-weight:600;letter-spacing:.06em;color:var(--wk-wine-ink)}
.wk-top .wk-top-map__panel .wk-top-area__block[hidden]{display:none}

/* 県名を主、件数を従としたリスト。リンク全体が44px以上の操作領域。 */
.wk-top .wk-top-area__list{display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr));
  gap:8px;margin:0;padding:0;list-style:none}
.wk-top .wk-top-area__list li{position:relative;display:block;min-width:0;min-height:44px;
  margin:0;padding:0;border:1px solid var(--wk-line-strong);border-radius:4px;
  background:var(--wk-paper);color:var(--wk-text);font-size:14px;box-shadow:none}
.wk-top .wk-top-area__list li::after{content:none}
.wk-top .wk-top-area__list a{display:flex;align-items:center;justify-content:space-between;
  gap:8px;min-height:44px;padding:8px 10px;color:inherit;line-height:1.5;
  text-decoration:none;font-weight:600;border-radius:3px}
.wk-top .wk-top-area__list a > span:first-child{min-width:0;overflow-wrap:anywhere}
.wk-top .wk-top-area__count{flex-shrink:0;color:var(--wk-text-2);font-size:11px;
  font-weight:400;font-variant-numeric:tabular-nums;white-space:nowrap}
.wk-top .wk-top-area__list li[data-count-level="many"] .wk-top-area__count{
  padding:2px 5px;border-radius:3px;background:var(--wk-wine-tint);color:var(--wk-wine);font-weight:600}
.wk-top .wk-top-area__list li[data-count="0"]{border-style:dashed;border-color:var(--wk-line);
  background:var(--wk-cream);color:var(--wk-text-2)}
.wk-top .wk-top-area__list li[data-count="0"] a{font-weight:400;flex-wrap:wrap;gap:2px 8px}
@media (hover:hover){
  .wk-top .wk-top-area__list li:hover,
  .wk-top .wk-top-map__area:hover,
  .wk-top .wk-top-map__clear:hover{border-color:var(--wk-wine);background:var(--wk-wine-tint);color:var(--wk-wine-ink)}
  .wk-top .wk-top-map__area[aria-pressed="true"]:hover{background:var(--wk-wine-ink);color:var(--wk-paper)}
}
.wk-top .wk-top-area__list li:focus-within{border-color:var(--wk-wine)}
.wk-top .wk-top-area__list a:focus-visible,
.wk-top .wk-top-map__area:focus-visible,
.wk-top .wk-top-map__clear:focus-visible{outline:3px solid var(--wk-wine);outline-offset:2px}

/* クレジット（地図データの出典。CC BY 4.0 の帰属表示） */
.wk-top .wk-top-map__credit{margin:10px 0 0;font-size:11px;color:var(--wk-text-2)}
.wk-top .wk-top-map__credit a{color:inherit}

/* スマホ: 地図・地方・一覧の順。移動せずSVG全体を枠内に収める。 */
@media (max-width:767px){
  .wk-top .wk-top-map__layout{grid-template-columns:minmax(0,1fr);gap:16px}
  .wk-top .wk-top-map__hint{display:none}
  .wk-top .wk-top-map__area{font-size:13px;padding:8px 12px}
  .wk-top .wk-top-map__panel{padding:12px}
  .wk-top .wk-top-map__canvas{width:min(100%,290px);margin:0 auto;transform:none}
}
@media (max-width:359px){
  .wk-top .wk-top-area__list{grid-template-columns:minmax(0,1fr)}
  .wk-top .wk-top-map__canvas{width:min(100%,270px)}
}
@media (prefers-reduced-motion:reduce){
  .wk-top .wk-map__pref,.wk-top .wk-map__region{transition:none}
}