ミニカートドロワー

<div class="d10-01-08-bar">
          <button class="d10-01-08-cart" type="button">🛒<span class="d10-01-08-badge">2</span></button>
        </div>
        <div class="d10-01-08-drawer">
          <div class="d10-01-08-head">
            <span>カート</span>
            <button class="d10-01-08-x" type="button" aria-label="閉じる">×</button>
          </div>
          <div class="d10-01-08-item"><span class="d10-01-08-em">🎧</span><span class="d10-01-08-nm">ヘッドホン</span><span class="d10-01-08-pr">¥12,800</span></div>
          <div class="d10-01-08-item"><span class="d10-01-08-em">⌚</span><span class="d10-01-08-nm">ウォッチ</span><span class="d10-01-08-pr">¥18,500</span></div>
          <div class="d10-01-08-total"><span>合計</span><b>¥31,300</b></div>
          <button class="d10-01-08-checkout" type="button">レジに進む</button>
        </div>

.d10-01-08{background:#f6f7fb;padding:0}
        .d10-01-08-bar{position:absolute;top:0;left:0;right:0;height:48px;background:#fff;box-shadow:0 2px 8px rgba(30,40,80,.06);display:flex;align-items:center;justify-content:flex-end;padding:0 16px}
        .d10-01-08-cart{position:relative;border:none;background:transparent;font-size:24px;cursor:pointer}
        .d10-01-08-badge{position:absolute;top:-4px;right:-8px;min-width:16px;height:16px;border-radius:8px;background:#ef4444;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center}
        .d10-01-08-drawer{position:absolute;top:0;right:0;bottom:0;width:230px;background:#fff;box-shadow:-8px 0 24px rgba(30,40,80,.15);transform:translateX(100%);transition:transform .35s cubic-bezier(.4,0,.2,1);padding:16px;display:flex;flex-direction:column;gap:10px}
        .d10-01-08-drawer.d10-01-08-open{transform:translateX(0)}
        .d10-01-08-head{display:flex;align-items:center;justify-content:space-between;font-size:15px;font-weight:700;color:#1e293b;border-bottom:1px solid #eef0f5;padding-bottom:10px}
        .d10-01-08-x{border:none;background:transparent;font-size:22px;color:#94a3b8;cursor:pointer}
        .d10-01-08-item{display:flex;align-items:center;gap:8px;font-size:12px;color:#475569}
        .d10-01-08-em{font-size:22px}
        .d10-01-08-nm{flex:1}
        .d10-01-08-pr{font-weight:600;color:#1e293b}
        .d10-01-08-total{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px;border-top:1px solid #eef0f5;font-size:14px;color:#475569}
        .d10-01-08-total b{color:#4f46e5;font-size:17px}
        .d10-01-08-checkout{border:none;border-radius:9px;padding:11px;background:#4f46e5;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
        .d10-01-08-checkout:hover{background:#4338ca}

(function(){
        var root=document.getElementById('item-10-01-08');
        var open=root.querySelector('.d10-01-08-cart'),drawer=root.querySelector('.d10-01-08-drawer'),x=root.querySelector('.d10-01-08-x');
        open.addEventListener('click',function(){drawer.classList.add('d10-01-08-open');});
        x.addEventListener('click',function(){drawer.classList.remove('d10-01-08-open');});
      })();