位置情報アクセス許可ダイアログ

<div class="d11-13-02-bg"></div>
        <div class="d11-13-02-dialog">
          <div class="d11-13-02-pin">
            <svg width="26" height="30" viewBox="0 0 24 28" fill="none"><path d="M12 1c-5 0-9 3.8-9 9.5C3 17 12 27 12 27s9-10 9-16.5C21 4.8 17 1 12 1Z" fill="#0d9488"/><circle cx="12" cy="10.5" r="3.4" fill="#fff"/></svg>
          </div>
          <div class="d11-13-02-title">"TownMap"に位置情報の使用を許可しますか?</div>
          <p class="d11-13-02-text">現在地周辺の店舗やイベント情報の表示に使用します</p>
          <div class="d11-13-02-opts">
            <span class="d11-13-02-opt d11-13-02-opt-strong">Appの使用中のみ許可</span>
            <span class="d11-13-02-opt">一度のみ許可</span>
            <span class="d11-13-02-opt d11-13-02-opt-deny">許可しない</span>
          </div>
        </div>

.d11-13-02-bg{ position:absolute; inset:0; background:#f8fafc; }
        .d11-13-02-dialog{
          position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:262px;
          background:#fff; border-radius:14px; padding:20px 18px 0; text-align:center;
          box-shadow:0 10px 26px rgba(15,23,42,.14); border:1px solid #f1f5f9;
        }
        .d11-13-02-pin{ margin-bottom:6px; }
        .d11-13-02-title{ font-size:12.5px; font-weight:700; color:#1f2937; line-height:1.4; }
        .d11-13-02-text{ margin-top:6px; padding-bottom:14px; font-size:10.5px; color:#6b7280; line-height:1.5; }
        .d11-13-02-opts{ display:flex; flex-direction:column; border-top:1px solid #e5e7eb; }
        .d11-13-02-opt{
          padding:10px 0; font-size:12px; font-weight:600; color:#334155;
          border-bottom:1px solid #e5e7eb;
        }
        .d11-13-02-opt:last-child{ border-bottom:none; }
        .d11-13-02-opt-strong{ color:#0d9488; font-weight:800; }
        .d11-13-02-opt-deny{ color:#94a3b8; }