動画風レビューカード

<div class="d06-01-09-card">
          <div class="d06-01-09-thumb">
            <button class="d06-01-09-play" aria-label="再生"><svg viewBox="0 0 24 24" width="26" height="26"><path d="M8 5v14l11-7z" fill="#fff"/></svg></button>
            <span class="d06-01-09-time">0:48</span>
          </div>
          <div class="d06-01-09-info">
            <span class="d06-01-09-av" style="--g1:#8b5cf6;--g2:#ec4899">R</span>
            <div><b>R.K 様</b><small>お客様インタビュー</small></div>
          </div>
        </div>

.d06-01-09{background:#0f172a}
        .d06-01-09-card{width:290px;background:#1e293b;border-radius:16px;overflow:hidden;box-shadow:0 12px 30px rgba(0,0,0,.4)}
        .d06-01-09-thumb{position:relative;height:150px;background:linear-gradient(135deg,#7c3aed,#ec4899,#f97316);display:flex;align-items:center;justify-content:center}
        .d06-01-09-play{width:56px;height:56px;border:none;border-radius:50%;background:rgba(0,0,0,.35);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative}
        .d06-01-09-play::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.7)}
        .d06-01-09-card:hover .d06-01-09-play::before{animation:d149wave 1.4s ease-out infinite}
        @keyframes d149wave{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.8);opacity:0}}
        .d06-01-09-time{position:absolute;bottom:8px;right:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:2px 7px;border-radius:5px}
        .d06-01-09-info{display:flex;align-items:center;gap:11px;padding:16px}
        .d06-01-09-av{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--g1),var(--g2));color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700}
        .d06-01-09-info b{color:#f1f5f9;font-size:14px;display:block}
        .d06-01-09-info small{color:#94a3b8;font-size:11px}