/**
 * 対応エリアの Leaflet 地図ブロック用スタイル
 * ----------------------------------------
 * /area/ 専用ページとトップページ #area で同じ見た目を揃える。
 *
 * 注意: .act-deliver-map__canvas に filter: grayscale をかけると、
 * Leaflet が描画するタイル・円・マーカーまですべて無彩色になります（「色がつかない」原因になる）。
 */

.act-deliver-map__wrap {
    position: relative;
    /* Leaflet 各レイヤーの z-index（〜1000）が sticky ヘッダーより前面に出ないようスタックを閉じる */
    isolation: isolate;
    z-index: 0;
    border: 4px solid #5e0b0b;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}

.act-deliver-map__canvas {
    height: 600px;
    width: 100%;
    background: #e5e5e5;
}

.act-deliver-map__wrap--home .act-deliver-map__canvas {
    height: 280px;
}

@media (min-width: 768px) {
    .act-deliver-map__wrap--home .act-deliver-map__canvas {
        height: 480px;
    }
}

.act-deliver-map__legend {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #5e0b0b;
    padding: 15px;
    font-size: 11px;
    font-weight: bold;
}

/* スマホでは凡例ボックスが地図を覆いすぎるため非表示（768px〜は PC レイアウト向けに表示） */
@media (max-width: 767px) {
    .act-deliver-map__legend {
        display: none;
    }
}

/* Leaflet に載せるテキストラベル用（divIcon） */
.map-label {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    color: #5e0b0b;
    font-weight: 900;
    font-family: "Noto Serif JP", serif;
    text-shadow:
        1px 1px 0 #fff,
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff;
    white-space: nowrap;
}