#networkmap{
    background-image: url('../img/202510/mapbg.jpg');
    background-size: cover;
    background-position: center;
}
.networkmap-container {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    aspect-ratio: 1920 / 1485;
    background-image: url('../img/202510/map.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    box-sizing: border-box;
}

.networkmap-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    cursor: default;
}

.networkmap-area {
    fill: transparent;
    stroke: transparent;
    stroke-width: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* リンクが設定されているエリアのスタイル */
.networkmap-svg[data-links-enabled="true"] .networkmap-area {
    cursor: pointer;
}

.networkmap-svg[data-links-enabled="false"] .networkmap-area {
    cursor: default;
}

/* .networkmap-area:hover {
    fill: rgba(255, 255, 255, 0.3);
    stroke: rgba(255, 255, 255, 0.8);
    stroke-width: 2;
} */

/* .networkmap-area:active,
.networkmap-area.active {
    fill: rgba(0, 123, 255, 0.3);
    stroke: rgba(0, 123, 255, 1);
    stroke-width: 3;
} */

/* Responsive adjustments */
@media (max-width: 768px) {
    .networkmap-container {
        margin: 0 10px;
    }
    
    .networkmap-area:hover {
        fill: rgba(0, 123, 255, 0.3);
        stroke-width: 3;
    }
}

@media (max-width: 480px) {
    .networkmap-area {
        stroke-width: 0;
    }
    
    .networkmap-area:hover,
    .networkmap-area:active {
        fill: rgba(0, 123, 255, 0.4);
        stroke: rgba(0, 123, 255, 1);
        stroke-width: 4;
    }
}

/* Loading state */
.networkmap-container.loading {
    background-color: #f8f9fa;
    background-image: none;
}

.networkmap-container.loading::before {
    content: "地図を読み込み中...";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #6c757d;
    z-index: 1;
}