AI応答の複数候補切替UI

<div class="d10-06-11-wrap">
          <div class="d10-06-11-track">
            <div class="d10-06-11-card">案A: 結論から述べると、プラグインの有効化だけで導入できます。</div>
            <div class="d10-06-11-card">案B: まずAPIキーを取得し、設定画面に入力してください。</div>
            <div class="d10-06-11-card">案C: 詳細な手順は公式ドキュメントもあわせてご確認ください。</div>
          </div>
          <div class="d10-06-11-nav">
            <button type="button" class="d10-06-11-prev" aria-label="前の候補">←</button>
            <div class="d10-06-11-dots">
              <span class="d10-06-11-dot"></span><span class="d10-06-11-dot"></span><span class="d10-06-11-dot"></span>
            </div>
            <button type="button" class="d10-06-11-next" aria-label="次の候補">→</button>
          </div>
        </div>

.d10-06-11 .d10-06-11-wrap{width:100%;max-width:250px;display:flex;flex-direction:column;align-items:center;gap:12px}
        .d10-06-11 .d10-06-11-track{position:relative;width:100%;height:88px;overflow:hidden}
        .d10-06-11 .d10-06-11-card{position:absolute;inset:0;display:flex;align-items:center;background:#f7f8fa;border-radius:12px;padding:14px 16px;font-size:12px;line-height:1.7;color:#374151;opacity:0;transform:translateX(24px);transition:opacity .35s ease,transform .35s ease}
        .d10-06-11 .d10-06-11-card.is-active{opacity:1;transform:translateX(0);position:relative}
        .d10-06-11 .d10-06-11-nav{display:flex;align-items:center;gap:12px}
        .d10-06-11 .d10-06-11-nav button{width:26px;height:26px;border-radius:50%;border:1px solid #e5e7eb;background:#fff;color:#4b5563;cursor:pointer;font-size:12px}
        .d10-06-11 .d10-06-11-dots{display:flex;gap:6px}
        .d10-06-11 .d10-06-11-dot{width:6px;height:6px;border-radius:50%;background:#d1d5db}
        .d10-06-11 .d10-06-11-dot.is-active{background:#6366f1}

(function(){
          var root = document.currentScript.closest('.item');
          var cards = root.querySelectorAll('.d10-06-11-card');
          var dots = root.querySelectorAll('.d10-06-11-dot');
          var idx = 0;
          function render(){
            cards.forEach(function(c,i){ c.classList.toggle('is-active', i===idx); });
            dots.forEach(function(d,i){ d.classList.toggle('is-active', i===idx); });
          }
          render();
          root.querySelector('.d10-06-11-prev').addEventListener('click', function(){
            idx = (idx - 1 + cards.length) % cards.length; render();
          });
          root.querySelector('.d10-06-11-next').addEventListener('click', function(){
            idx = (idx + 1) % cards.length; render();
          });
        })();