カメラ・マイクアクセス許可画面

<div class="d11-13-03-wrap">
          <div class="d11-13-03-icons">
            <span class="d11-13-03-ico">
              <svg width="24" height="20" viewBox="0 0 24 20" fill="none"><rect x="1" y="4" width="16" height="13" rx="2.5" stroke="#7c3aed" stroke-width="1.6"/><path d="M17 8.5 22 5v10l-5-3.5Z" stroke="#7c3aed" stroke-width="1.6" stroke-linejoin="round"/></svg>
            </span>
            <span class="d11-13-03-ico">
              <svg width="18" height="22" viewBox="0 0 18 24" fill="none"><rect x="5" y="1" width="8" height="14" rx="4" stroke="#7c3aed" stroke-width="1.6"/><path d="M2 11v1a7 7 0 0 0 14 0v-1M9 19v3" stroke="#7c3aed" stroke-width="1.6" stroke-linecap="round"/></svg>
            </span>
          </div>
          <div class="d11-13-03-title">カメラとマイクへのアクセス</div>
          <p class="d11-13-03-text">ビデオ通話機能を利用するには、カメラとマイクへのアクセスを許可してください</p>
          <span class="d11-13-03-btn">許可する</span>
          <p class="d11-13-03-skip">あとで設定する</p>
        </div>

.d11-13-03-wrap{ text-align:center; }
        .d11-13-03-icons{ display:flex; gap:14px; justify-content:center; margin-bottom:14px; }
        .d11-13-03-ico{
          width:56px; height:56px; border-radius:16px; background:#f5f3ff;
          display:flex; align-items:center; justify-content:center; border:1px solid #ede9fe;
        }
        .d11-13-03-title{ font-size:15px; font-weight:800; color:#1f2937; }
        .d11-13-03-text{ margin:8px auto 0; max-width:230px; font-size:11.5px; color:#6b7280; line-height:1.6; }
        .d11-13-03-btn{
          display:inline-block; margin-top:16px; padding:10px 34px; border-radius:999px;
          background:#7c3aed; color:#fff; font-size:12.5px; font-weight:700;
        }
        .d11-13-03-skip{ margin-top:10px; font-size:11px; color:#9ca3af; font-weight:600; }