html,body{margin:0;background:#fff}

.baCm{
  --acc:#635bff; --ink:#0a2540; --body:#374151; --sub:#4b5563; --line:#e6e9ee;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:#f6f9fc;padding:clamp(52px,6.5vw,96px) 24px;
}
.baCm__in{max-width:880px;margin:0 auto}
.baCm__head{margin-bottom:clamp(22px,3vw,34px)}
.baCm__head h2{margin:0;font-size:clamp(21px,2.9vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.01em}
.baCm__head p{margin:12px 0 0;font-size:13.5px;color:var(--body)}
.baCm__box{
  position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;user-select:none;touch-action:none;
  box-shadow:0 0 0 1px var(--line),0 16px 34px -20px rgba(10,37,64,.5);
}
.baCm__side{position:absolute;inset:0}
.baCm__side--before{
  background:
    linear-gradient(0deg,rgba(0,0,0,.06),rgba(0,0,0,.06)),
    repeating-linear-gradient(0deg,#e9edf2 0 15px,#e2e7ee 15px 16px),
    #edf1f5;
}
.baCm__side--after{
  background:
    radial-gradient(70% 60% at 26% 26%, rgba(99,91,255,.34), transparent 62%),
    radial-gradient(60% 60% at 78% 74%, rgba(0,179,255,.3), transparent 66%),
    linear-gradient(150deg,#fff,#f2f6ff);
  clip-path:inset(0 0 0 50%);
}
.baCm__tag{
  position:absolute;top:14px;left:14px;font-size:10.5px;font-weight:800;letter-spacing:.1em;
  background:rgba(10,37,64,.78);color:#fff;padding:6px 11px;border-radius:99px;
}
.baCm__tag--r{left:auto;right:14px;background:var(--acc)}
.baCm__handle{
  position:absolute;top:0;bottom:0;left:50%;width:44px;translate:-50% 0;cursor:ew-resize;
  display:grid;place-items:center;touch-action:none;
}
.baCm__handle::before{content:"";position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.4)}
.baCm__handle i{
  position:relative;width:38px;height:38px;border-radius:50%;background:#fff;
  box-shadow:0 4px 14px rgba(10,37,64,.4);
}
.baCm__handle i::before,.baCm__handle i::after{
  content:"";position:absolute;top:50%;width:7px;height:7px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);
}
.baCm__handle i::before{left:9px;transform:translateY(-50%) rotate(-135deg)}
.baCm__handle i::after{right:9px;transform:translateY(-50%) rotate(45deg)}