@charset "utf-8";

/* 対応エリア：長野県の地図に拠点を置く（2026-11-04 畔栁さん「アナガの淡路島の地図と同じイメージ」）
   地図は tools/nagano_map.py で国土数値情報の行政区域から作った SVG をそのまま埋め込む */

.sectionArea .areaGrid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: clamp(40px, 6vw, 96px);
    align-items: center;
}

.sectionArea .areaInfo {
    grid-column: auto;
}

.areaMap {
    margin: 0;
    padding: clamp(20px, 2.4vw, 36px);
    background: var(--paper);
}

.areaMapSvg {
    display: block;
    width: 100%;
    max-height: 640px;
    height: auto;
    overflow: visible;
}

/* 県全体が対応範囲なので、灰色ではなく薄い砂色で塗る */
.areaMapSvg .muni path {
    fill: #ece4d6;
    stroke: #fff;
    stroke-width: .8;
    stroke-linejoin: round;
}

.areaMapSvg .muni .isBase {
    fill: #d9c6a6;
}

.areaMapSvg .pref {
    fill: none;
    stroke: #8f8c86;
    stroke-width: 1.2;
    stroke-linecap: round;
}

.areaMapSvg .ring {
    fill: none;
    stroke: var(--lamp);
    stroke-width: 1.4;
    stroke-dasharray: 4 6;
}

.areaMapSvg .ringNo {
    fill: var(--lamp-2);
    font-family: var(--en);
    font-size: 16px;
    letter-spacing: .04em;
}

.areaMapSvg .town circle {
    fill: var(--ink);
}

.areaMapSvg .town text {
    fill: #3e3f42;
    font-family: var(--jp);
    font-size: 18px;
    letter-spacing: .04em;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .85);
    stroke-width: 3px;
}

.areaMapSvg .base .dot {
    fill: var(--lamp);
    stroke: #fff;
    stroke-width: 2.5;
}

.areaMapSvg .base .pulse {
    fill: rgba(169, 132, 79, .12);
    stroke: var(--lamp);
    stroke-width: 1.4;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    animation: areaPulse 4.2s cubic-bezier(.2, .6, .35, 1) infinite;
}

.areaMapSvg .base .p2 {
    animation-delay: 2.1s;
}

.areaMapSvg .baseName {
    fill: var(--ink);
    font-family: var(--en);
    font-size: 24px;
    letter-spacing: .04em;
    paint-order: stroke;
    stroke: rgba(255, 255, 255, .9);
    stroke-width: 4px;
}

@keyframes areaPulse {
    0% {
        opacity: .9;
        transform: scale(1);
    }

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

@media (prefers-reduced-motion: reduce) {
    .areaMapSvg .base .pulse {
        animation: none;
    }
}

.mapNote {
    margin-top: 14px;
    color: var(--fg-2);
    font-size: 12px;
    line-height: 1.8;
}

/* 長野県全域に対応（距離の表の代わり。2026-11-04） */
.areaAll {
    margin-bottom: 26px;
}

.allHead {
    margin-bottom: 8px;
    color: var(--fg-2);
    font-size: 13px;
    letter-spacing: .06em;
}

.allList {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 28px;
}

.allList li {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 11px 0;
    border-bottom: 1px solid var(--ln);
}

.allReg {
    flex-shrink: 0;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: .06em;
}

.allTowns {
    color: var(--fg-2);
    font-size: 12.5px;
    line-height: 1.7;
}

@media (max-width: 900px) {
    .sectionArea .areaGrid {
        display: block;
    }

    .areaMap {
        margin: 0 calc(var(--gut) * -1) 32px;
        padding: 16px var(--gut) 14px;
    }

    .areaMapSvg {
        max-height: 520px;
        margin: 0 auto;
    }

    .mapNote {
        font-size: 11px;
    }

    .allList {
        grid-template-columns: 1fr;
    }

    .allList li {
        padding: 10px 0;
    }
}