連絡先アクセス許可画面

<div class="d11-13-06-wrap">
          <div class="d11-13-06-avatars">
            <span class="d11-13-06-avatar">A</span>
            <span class="d11-13-06-avatar">B</span>
            <span class="d11-13-06-avatar">C</span>
          </div>
          <div class="d11-13-06-title">連絡先へのアクセスを許可</div>
          <p class="d11-13-06-text">友だちを検索してすばやく追加できるようになります</p>
          <div class="d11-13-06-btns">
            <span class="d11-13-06-btn d11-13-06-btn-outline">許可しない</span>
            <span class="d11-13-06-btn d11-13-06-btn-strong">許可する</span>
          </div>
        </div>

.d11-13-06-wrap{ text-align:center; }
        .d11-13-06-avatars{ display:flex; justify-content:center; margin-bottom:16px; }
        .d11-13-06-avatar{
          width:44px; height:44px; border-radius:50%; background:#dcfce7; color:#16a34a;
          font-size:15px; font-weight:800; display:flex; align-items:center; justify-content:center;
          border:2px solid #fff; box-shadow:0 0 0 1px #bbf7d0; margin-left:-10px;
        }
        .d11-13-06-avatar:first-child{ margin-left:0; }
        .d11-13-06-title{ font-size:15px; font-weight:800; color:#1f2937; }
        .d11-13-06-text{ margin:8px auto 0; max-width:220px; font-size:11.5px; color:#6b7280; line-height:1.6; }
        .d11-13-06-btns{ display:flex; gap:10px; justify-content:center; margin-top:18px; }
        .d11-13-06-btn{ padding:9px 20px; border-radius:999px; font-size:11.5px; font-weight:700; }
        .d11-13-06-btn-outline{ background:#f3f4f6; color:#6b7280; }
        .d11-13-06-btn-strong{ background:#16a34a; color:#fff; }