商品クイックビュー

<div class="d10-01-07-card" role="button" tabindex="0">
          <div class="d10-01-07-thumb">⌚</div>
          <p class="d10-01-07-name">スマートウォッチ</p>
          <p class="d10-01-07-price">¥18,500</p>
          <span class="d10-01-07-hint">クリックで詳細</span>
        </div>
        <div class="d10-01-07-overlay">
          <button class="d10-01-07-close" type="button" aria-label="閉じる">×</button>
          <div class="d10-01-07-big">⌚</div>
          <div class="d10-01-07-info">
            <p class="d10-01-07-oname">スマートウォッチ Pro</p>
            <p class="d10-01-07-oprice">¥18,500</p>
            <p class="d10-01-07-desc">心拍・睡眠計測に対応。7日間バッテリー。防水仕様。</p>
            <button class="d10-01-07-buy" type="button">カートに入れる</button>
          </div>
        </div>

.d10-01-07{background:#f6f7fb}
        .d10-01-07-card{width:180px;background:#fff;border:none;border-radius:14px;padding:18px;box-shadow:0 8px 24px rgba(30,40,80,.1);cursor:pointer;text-align:center}
        .d10-01-07-thumb{height:96px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:46px;background:linear-gradient(135deg,#c7d2fe,#ddd6fe);margin-bottom:10px}
        .d10-01-07-name{margin:0;font-size:14px;font-weight:600;color:#1e293b}
        .d10-01-07-price{margin:4px 0 8px;font-size:16px;font-weight:700;color:#4f46e5}
        .d10-01-07-hint{font-size:11px;color:#94a3b8}
        .d10-01-07-overlay{position:absolute;inset:0;background:rgba(255,255,255,.97);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;opacity:0;visibility:hidden;transform:scale(.96);transition:opacity .3s,transform .3s,visibility .3s}
        .d10-01-07-overlay.d10-01-07-show{opacity:1;visibility:visible;transform:scale(1)}
        .d10-01-07-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border:none;border-radius:50%;background:#f1f5f9;font-size:20px;color:#475569;cursor:pointer}
        .d10-01-07-close:hover{background:#e2e8f0}
        .d10-01-07-big{width:110px;height:110px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:58px;background:linear-gradient(135deg,#c7d2fe,#ddd6fe)}
        .d10-01-07-info{text-align:center}
        .d10-01-07-oname{margin:0;font-size:16px;font-weight:700;color:#1e293b}
        .d10-01-07-oprice{margin:4px 0;font-size:18px;font-weight:800;color:#4f46e5}
        .d10-01-07-desc{margin:6px 0 12px;font-size:12px;color:#64748b;line-height:1.6}
        .d10-01-07-buy{border:none;border-radius:9px;padding:10px 26px;background:#4f46e5;color:#fff;font-size:13px;font-weight:600;cursor:pointer}
        .d10-01-07-buy:hover{background:#4338ca}

(function(){
        var root=document.getElementById('item-10-01-07');
        var card=root.querySelector('.d10-01-07-card'),ov=root.querySelector('.d10-01-07-overlay'),close=root.querySelector('.d10-01-07-close');
        card.addEventListener('click',function(){ov.classList.add('d10-01-07-show');});
        card.addEventListener('keydown',function(e){if(e.key==='Enter'||e.key===' '){e.preventDefault();ov.classList.add('d10-01-07-show');}});
        close.addEventListener('click',function(){ov.classList.remove('d10-01-07-show');});
      })();