/* ═══════════════════════════════════════════════════════
   トップページ ヒーロー右側の 30秒 CM（Virtual Staff「30秒でわかる体験」）
   products/vs3/virtualstaff-lp-c.html の .dv コンポーネントを移植。
   すべて .hero-cm 配下にスコープし、変数もここで定義（子要素へ継承）。
   ═══════════════════════════════════════════════════════ */

.hero-cm{
  --vs-primary:#6366f1; --vs-secondary:#8b5cf6; --vs-accent:#ec4899;
  --ink:#1a1530; --body:#4b4663; --muted:#8b8aa0;
  --line:#ece9f6; --tint-purple:#f4f1ff;
  --grad:linear-gradient(120deg,#6366f1 0%,#8b5cf6 50%,#ec4899 100%);
  --r-xl:1.5rem; --r-full:9999px;
  --shadow:0 24px 60px -28px rgba(99,76,180,.28);
  --shadow-sm:0 10px 30px -16px rgba(99,76,180,.2);
}

/* ── コンテナ ── */
.hero-cm{width:100%}
.hero-cm .dv{position:relative;margin:0 auto;max-width:400px;background:linear-gradient(160deg,#fff,#f7f3ff);border:1px solid var(--line);border-radius:var(--r-xl);box-shadow:var(--shadow);overflow:hidden}
.hero-cm .dv__chrome{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.6)}
.hero-cm .dv__dots{display:flex;gap:6px}
.hero-cm .dv__dots i{width:10px;height:10px;border-radius:50%;background:#e3def2;display:block}
.hero-cm .dv__label{font-size:11.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;line-height:1.35}
.hero-cm .dv__badge{margin-left:auto;flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--vs-secondary);background:var(--tint-purple);padding:5px 11px;border-radius:var(--r-full)}
.hero-cm .dv__badge .dot{width:7px;height:7px;border-radius:50%;background:var(--vs-secondary);display:inline-block}

/* ── ステージ（トップでは1カラム＝スマホのみ／テロップは非表示）── */
.hero-cm .dv-stage{display:grid;grid-template-columns:1fr;justify-items:center;gap:0;align-items:center;padding:26px 20px;min-height:0}
.hero-cm .dv-right{display:none}
.hero-cm .dv-phone{width:222px;flex:none;background:#15101f;border-radius:38px;padding:10px;box-shadow:0 36px 70px -30px rgba(99,76,180,.5);position:relative}
.hero-cm .dv-notch{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:94px;height:21px;background:#15101f;border-radius:0 0 13px 13px;z-index:6}
.hero-cm .dv-screen{position:relative;height:452px;border-radius:28px;overflow:hidden;background:linear-gradient(165deg,#ece8ff,#fdeef7 55%,#e7eeff)}

/* ── ロック画面 ── */
.hero-cm .dv-lock{position:absolute;inset:0;padding:16px 13px;opacity:0;transition:opacity .5s}
.hero-cm .dv-lock.is-on{opacity:1}
.hero-cm .dv-lock__top{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--ink);padding:0 4px}
.hero-cm .dv-lock__clock{text-align:center;margin-top:36px}
.hero-cm .dv-lock__clock b{display:block;font-size:50px;font-weight:700;letter-spacing:-.02em;color:var(--ink);line-height:1}
.hero-cm .dv-lock__clock span{font-size:12px;font-weight:600;color:var(--body)}

/* ── プッシュ通知 ── */
.hero-cm .dv-push{position:absolute;top:130px;left:12px;right:12px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.95);border-radius:16px;padding:11px 12px;box-shadow:0 16px 34px -18px rgba(99,76,180,.45);opacity:0;transform:translateY(-16px);transition:opacity .45s,transform .45s}
.hero-cm .dv-push.is-on{opacity:1;transform:none}
.hero-cm .dv-push.is-on.tap{transform:scale(.96)}
.hero-cm .dv-push__head{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;color:var(--ink);margin-bottom:8px}
.hero-cm .dv-appicon{width:20px;height:20px;border-radius:6px;background:var(--grad);color:#fff;display:grid;place-items:center;font-size:8px;font-weight:800}
.hero-cm .dv-push__time{margin-left:auto;color:var(--muted)}
.hero-cm .dv-push__body{display:flex;gap:9px}
.hero-cm .dv-pav{width:30px;height:30px;flex:none;border-radius:50%;padding:2px;background:var(--grad)}
.hero-cm .dv-pav img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1.5px solid #fff;display:block}
.hero-cm .dv-push__body b{font-size:11.5px;color:var(--ink)}
.hero-cm .dv-push__body p{font-size:11.5px;color:var(--body);margin-top:2px;line-height:1.45}
.hero-cm .dv-push__body u{text-decoration:none;font-weight:700;color:var(--vs-accent)}

/* ── チャット ── */
.hero-cm .dv-chat{position:absolute;inset:0;padding:14px 11px;display:flex;flex-direction:column;gap:9px;opacity:0;transition:opacity .5s;overflow:hidden}
.hero-cm .dv-chat.is-on{opacity:1}
.hero-cm .dv-chat__bar{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:700;color:var(--ink);padding-bottom:8px;border-bottom:1px solid rgba(0,0,0,.05);margin-bottom:2px}
.hero-cm .dv-chat__bar .dv-pav{width:26px;height:26px}
.hero-cm .dv-m{opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
.hero-cm .dv-m.is-on{opacity:1;transform:none}
.hero-cm .dv-row{display:flex;gap:8px;align-items:flex-start}
.hero-cm .dv-row--you{flex-direction:row-reverse}
.hero-cm .dv-mav{width:28px;height:28px;flex:none;border-radius:50%;padding:2px;background:var(--grad)}
.hero-cm .dv-mav img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:1.5px solid #fff;display:block}
.hero-cm .dv-bub{max-width:80%;padding:9px 12px;border-radius:13px;font-size:11.5px;line-height:1.5}
.hero-cm .dv-bub--a{background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px;color:var(--body)}
.hero-cm .dv-bub--u{background:var(--ink);color:#fff;border-bottom-right-radius:4px}
.hero-cm .dv-bub u{text-decoration:none;font-weight:700;color:var(--vs-accent)}
.hero-cm .dv-chip{display:inline-flex;align-items:center;gap:6px;margin-top:7px;font-size:10.5px;font-weight:700;color:#fff;background:var(--grad);padding:5px 10px;border-radius:var(--r-full)}
.hero-cm .dv-typing{display:inline-flex;gap:4px;padding:11px 13px;background:#fff;border:1px solid var(--line);border-radius:13px;border-bottom-left-radius:4px}
.hero-cm .dv-typing i{width:6px;height:6px;border-radius:50%;background:var(--muted);animation:dvblink 1s infinite}
.hero-cm .dv-typing i:nth-child(2){animation-delay:.2s}
.hero-cm .dv-typing i:nth-child(3){animation-delay:.4s}
@keyframes dvblink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.hero-cm .dv-status{display:inline-flex;align-items:center;gap:8px;align-self:center;font-size:10.5px;font-weight:700;color:var(--vs-secondary);background:var(--tint-purple);border:1px solid #e7e1ff;padding:7px 13px;border-radius:var(--r-full)}
.hero-cm .dv-status .sp{width:11px;height:11px;border:2px solid var(--vs-secondary);border-right-color:transparent;border-radius:50%;animation:dvspin .7s linear infinite}
@keyframes dvspin{to{transform:rotate(360deg)}}

/* ── エンドカード ── */
.hero-cm .dv-end{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:linear-gradient(160deg,#fff,#f3eeff);opacity:0;transition:opacity .6s}
.hero-cm .dv-end.is-on{opacity:1}
.hero-cm .dv-end img{height:30px;margin-bottom:16px}
.hero-cm .dv-end b{font-size:16px;font-weight:900;color:var(--ink);line-height:1.4;letter-spacing:-.01em}
.hero-cm .dv-end span{display:block;margin-top:10px;font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.1em}

/* ── 進捗バー ── */
.hero-cm .dv-bar{position:relative;height:5px;background:var(--line)}
.hero-cm .dv-bar__fill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--grad);border-radius:0 3px 3px 0}
.hero-cm .dv-bar__mk{position:absolute;top:0;bottom:0;width:1.5px;background:rgba(255,255,255,.75)}

/* ── フッター（リプレイ）── */
.hero-cm .dv-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 18px;background:rgba(255,255,255,.6)}
.hero-cm .dv-foot__t{font-size:12px;font-weight:700;color:var(--muted)}
.hero-cm .dv-replay{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;color:var(--vs-secondary);background:#fff;border:1px solid var(--line);padding:8px 15px;border-radius:var(--r-full);cursor:pointer;transition:.2s}
.hero-cm .dv-replay:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
.hero-cm .dv-replay svg{width:15px;height:15px}