ヒントバブル一覧(静止・複数配置)

<div class="d11-07-07-stage">
          <div class="d11-07-07-block"></div>
          <div class="d11-07-07-block d11-07-07-b2"></div>
          <span class="d11-07-07-tip d11-07-07-tip1">?</span>
          <span class="d11-07-07-tip d11-07-07-tip2">?</span>
          <div class="d11-07-07-note d11-07-07-note1">ここで検索できます</div>
          <div class="d11-07-07-note d11-07-07-note2">通知はここに届きます</div>
        </div>

.d11-07-07-stage{ position:relative; width:100%; max-width:220px; height:150px; background:#f1f5f9; border-radius:10px; }
        .d11-07-07-block{ position:absolute; top:16px; left:16px; width:60px; height:20px; background:#e2e8f0; border-radius:5px; }
        .d11-07-07-b2{ top:16px; left:auto; right:16px; width:26px; }
        .d11-07-07-tip{ position:absolute; width:16px; height:16px; border-radius:50%; background:#6366f1; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d11-07-07-tip1{ top:44px; left:20px; }
        .d11-07-07-tip2{ top:14px; right:44px; }
        .d11-07-07-note{ position:absolute; background:#0f172a; color:#fff; font-size:10px; padding:5px 8px; border-radius:6px; }
        .d11-07-07-note1{ top:66px; left:14px; }
        .d11-07-07-note2{ top:34px; right:8px; }