: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;
     }
 }