/* WMG Map */
.wmg-map {
  --wmg-h: 560px;
  --wmg-venue: #d0342c;
  --wmg-spot: #1e7bd6;
  --wmg-stay: #2e9e5b;
  width: 100%;
  box-sizing: border-box;
  font-size: 14px;
  line-height: 1.5;
}
.wmg-map *, .wmg-map *::before, .wmg-map *::after { box-sizing: border-box; }

.wmg-map__canvas {
  position: relative;
  width: 100%;
  height: var(--wmg-h);
  min-height: 240px;
  background: #e9ecef;
  border-radius: 8px;
  overflow: hidden;
}
.wmg-map__nokey {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center; color: #555;
}

/* エリア切替 */
.wmg-map__areas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 10px;
}
.wmg-map__areas-label { font-weight: 700; margin-right: 4px; }
.wmg-map__area {
  appearance: none; -webkit-appearance: none;
  border: 1px solid #c9ced6; background: #fff; color: #333;
  border-radius: 999px; padding: 6px 14px; font-size: 13px; line-height: 1.2;
  cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.wmg-map__area:hover { border-color: #888; }
.wmg-map__area.is-active { background: #333; color: #fff; border-color: #333; }
.wmg-map__area:focus-visible { outline: 2px solid #1e7bd6; outline-offset: 2px; }

/* 凡例・絞り込み */
.wmg-map__legend {
  display: flex; flex-wrap: wrap; gap: 6px 20px;
  margin: 10px 0 0; padding: 10px 14px;
  background: #f6f7f9; border-radius: 8px;
}
.wmg-map__legend-item {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none; margin: 0;
}
.wmg-map__check { margin: 0; width: 16px; height: 16px; cursor: pointer; }
.wmg-map__swatch {
  /* ピン形のアイコン。色は background-color、形は mask（SVG）で描画 */
  display: inline-block; width: 16px; height: 19px; flex: 0 0 auto;
  background-color: #999;
  -webkit-mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 42'%3E%3Cpath d='M18 41c-1.2 0-9.5-12.6-11.8-19.3C4.2 15.8 4 13.9 4 12.5 4 5.6 10.3 1 18 1s14 4.6 14 11.5c0 1.4-.2 3.3-2.2 9.2C27.5 28.4 19.2 41 18 41z'/%3E%3Ccircle cx='18' cy='12.5' r='4.5' fill='%23000' fill-opacity='0'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 42'%3E%3Cpath d='M18 41c-1.2 0-9.5-12.6-11.8-19.3C4.2 15.8 4 13.9 4 12.5 4 5.6 10.3 1 18 1s14 4.6 14 11.5c0 1.4-.2 3.3-2.2 9.2C27.5 28.4 19.2 41 18 41z'/%3E%3C/svg%3E") no-repeat center / contain;
  position: relative;
}
.wmg-map__swatch::after { /* ピン中央の白い穴 */
  content: ""; position: absolute; left: 50%; top: 29%; width: 4px; height: 4px;
  margin-left: -2px; border-radius: 50%; background: #fff;
}
.wmg-map__legend-item--venue .wmg-map__swatch { background-color: var(--wmg-venue); }
.wmg-map__legend-item--spot  .wmg-map__swatch { background-color: var(--wmg-spot); }
.wmg-map__legend-item--stay  .wmg-map__swatch { background-color: var(--wmg-stay); }
.wmg-map__count { color: #777; font-size: 12px; }

/* 吹き出し */
.wmg-map__info { font-size: 14px; line-height: 1.5; max-width: 300px; color: #222; }
.wmg-map__info-type { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #666; margin-bottom: 6px; }
.wmg-map__info-list { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; }
.wmg-map__info-list li { padding: 5px 0; border-top: 1px solid #eee; }
.wmg-map__info-list li:first-child { border-top: 0; }
.wmg-map__info-list a { font-weight: 700; text-decoration: underline; color: #1a4fa0; }
.wmg-map__info-list a:hover { color: #d0342c; }
/* 吹き出しを開いたときのフォーカス枠（黒線）を出さない */
.wmg-map .gm-style-iw:focus, .wmg-map .gm-style-iw-d:focus, .wmg-map .gm-style-iw *:focus,
.wmg-map__info a:focus, .wmg-map__info a:focus-visible { outline: none !important; box-shadow: none !important; }
.wmg-map__info-sub { display: block; font-size: 12px; color: #666; }

/* レスポンシブ */
@media (max-width: 782px) {
  .wmg-map__canvas { height: min(var(--wmg-h), 62vh); min-height: 320px; }
  .wmg-map__area { padding: 6px 11px; font-size: 12px; }
  .wmg-map__legend { gap: 6px 14px; padding: 8px 10px; }
}