エリア範囲表示地図(対応エリア色分け・静止)

<div class="map">
          <div class="zone in"></div>
          <div class="zone out"></div>
          <div class="legend">
            <span><i class="in"></i>対応エリア</span>
            <span><i class="out"></i>対象外</span>
          </div>
        </div>

.d10-11-08 .map{position:relative;width:100%;height:100%;border-radius:10px;overflow:hidden;border:1px solid #d8dee5;
          background-color:#eef2f6;
          background-image:repeating-linear-gradient(0deg,transparent,transparent 22px,#dde4ec 22px,#dde4ec 23px),
            repeating-linear-gradient(90deg,transparent,transparent 22px,#dde4ec 22px,#dde4ec 23px);}
        .d10-11-08 .zone{position:absolute;border-radius:50%;}
        .d10-11-08 .zone.in{top:16%;left:14%;width:60%;height:60%;background:rgba(63,142,90,.18);
          border:2px dashed #2f9e64;}
        .d10-11-08 .zone.out{top:0;right:0;width:44%;height:38%;background:rgba(148,163,184,.2);
          border:2px dashed #94a3b8;border-radius:12px;}
        .d10-11-08 .legend{position:absolute;left:10px;bottom:10px;background:#fff;border:1px solid #e2e8f0;
          border-radius:6px;padding:6px 10px;display:flex;gap:10px;font-size:10px;color:#475569;}
        .d10-11-08 .legend i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;}
        .d10-11-08 .legend i.in{background:#2f9e64;}
        .d10-11-08 .legend i.out{background:#94a3b8;}