:root {
     --accent: #4a7c3f;
 }

 * {
     box-sizing: border-box;
 }

 .area-map-wrap {
     max-width: 820px;
     margin: 0 auto;
 }

 .area-map-hint {
     text-align: center;
     font-size: .9em;
     color: #777;
     margin: 0 0 12px;
 }

 .map-box {
     position: relative;
 }

 #areaMap {
     width: 100%;
     height: auto;
     display: block;
 }

 /* ラベルはホバー対象外にし、下の色分けエリアへイベントを通す */
 #areaMap path {
     pointer-events: none;
 }

 #areaMap path.rg {
     pointer-events: auto;
     cursor: pointer;
     transition: filter .15s ease;
 }

 #areaMap path.rg.hl {
     filter: brightness(.8) saturate(1.45);
 }

 .region-label-text {
     pointer-events: none;
     font-weight: 700;
     fill: #333;
     text-anchor: middle;
     paint-order: stroke;
     stroke: rgba(255, 255, 255, .85);
     stroke-width: 22px;
     stroke-linejoin: round;
 }

 /* ツールチップ */
 .map-tooltip {
     position: fixed;
     z-index: 100;
     max-width: 300px;
     background: rgba(255, 255, 255, .97);
     border: 1px solid #c8d6c3;
     border-radius: 8px;
     box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
     padding: 10px 14px;
     pointer-events: none;
     font-size: .82rem;
     line-height: 1.6;
 }

 .map-tooltip .tt-name {
     font-weight: 700;
     font-size: .95rem;
     color: var(--accent);
     margin-bottom: 2px;
 }

 .map-tooltip[hidden] {
     display: none;
 }

 /* 下部の情報パネル（タップ端末向け／常設表示） */
 .area-info {
     margin-top: 12px;
     min-height: 92px;
     border: 1px solid #dde7da;
     border-radius: 10px;
     background: #f6faf5;
     padding: 14px 18px;
     font-size: .88rem;
     line-height: 1.7;
     display: none;
 }

 .area-info .ai-name {
     font-weight: 700;
     color: var(--accent);
     font-size: 1rem;
     margin: 0 0 4px;
 }

 .area-info .ai-cities {
     margin: 0;
 }

 .area-info .ai-hint {
     margin: 0;
     color: #888;
 }

 @media(max-width:1024px) {
     .area-info {
         display: block;
     }
 }

 /* ピン */
 #areaMap .map-pin,
 #areaMap .map-pin * {
     pointer-events: auto;
 }

 .map-pin {
     cursor: pointer;
     outline: none;
 }

 .map-pin .pin-body {
     fill: #005bac;
     stroke: #fff;
     stroke-width: 8;
     transform-box: fill-box;
     transform-origin: 50% 100%;
     transition: transform .15s ease;
 }

 .map-pin:hover .pin-body,
 .map-pin:focus-visible .pin-body,
 .map-pin.is-active .pin-body {
     transform: scale(1.15) translateY(-3%);
 }

 .map-pin:focus-visible .pin-body {
     outline: 4px solid #ffd400;
     outline-offset: 2px;
 }

 .map-pin .pin-dot {
     fill: #fff;
 }

 .map-pin .pin-ping {
     fill: #005bac;
     opacity: 0;
     transform-box: fill-box;
     transform-origin: center;
     animation: pinPing 2.4s ease-out infinite;
 }

 .map-pin .pin-ping--delay {
     animation-delay: 1.2s;
 }

 @keyframes pinPing {
     0% {
         transform: scale(.6);
         opacity: .5;
     }

     70% {
         opacity: .12;
     }

     100% {
         transform: scale(2.2);
         opacity: 0;
     }
 }

 @media (prefers-reduced-motion: reduce) {
     .map-pin .pin-ping {
         animation: none;
         opacity: 0;
     }
 }

 /* 吹き出し */
 .map-balloon {
     position: absolute;
     z-index: 30;
     min-width: 190px;
     max-width: 260px;
     background: #fff;
     border: 2px solid #005bac;
     border-radius: 12px;
     padding: 12px 30px 12px 16px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
     transform: translate(-50%, calc(-100% - 18px));
     font-size: .82rem;
     line-height: 1.6;
 }

 .map-balloon[hidden] {
     display: none;
 }

 .map-balloon::before,
 .map-balloon::after {
     content: "";
     position: absolute;
     left: 50%;
     transform: translateX(-50%);
     border: 10px solid transparent;
 }

 .map-balloon::after {
     bottom: -10px;
     border-top-color: #005bac;
 }

 .map-balloon::before {
     bottom: -7px;
     border-top-color: #fff;
     z-index: 1;
 }

 .map-balloon .mb-name {
     font-weight: 700;
     color: #005bac;
     font-size: .98rem;
     margin: 0 0 4px;
 }

 .map-balloon .mb-cities {
     margin: 0;
     color: #333;
 }

 .map-balloon .mb-close {
     position: absolute;
     top: 6px;
     right: 8px;
     width: 22px;
     height: 22px;
     border: none;
     background: transparent;
     font-size: 18px;
     line-height: 1;
     color: #999;
     cursor: pointer;
 }