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

.clOp{
  --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:#0d1117;color:#fff;padding:clamp(56px,7vw,104px) 24px;overflow:hidden;
}
.clOp__in{max-width:1040px;margin:0 auto;display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,64px);align-items:center}
.clOp__fig{margin:0;border-radius:14px;overflow:hidden}
.clOp__ph{
  aspect-ratio:4/3;
  background:
    radial-gradient(70% 60% at 30% 30%, rgba(99,91,255,.9), transparent 65%),
    radial-gradient(60% 60% at 76% 72%, rgba(0,179,255,.8), transparent 66%),
    linear-gradient(140deg,#1a2340,#0f1524);
  clip-path:inset(0 0 100% 0);
  animation:clOp-open 1.15s cubic-bezier(.16,.84,.24,1) .15s forwards;
}
@keyframes clOp-open{ to{clip-path:inset(0 0 0 0)} }
.clOp__eyebrow{margin:0 0 14px;font-size:11px;font-weight:800;letter-spacing:.24em;color:#8fb8ff;
  opacity:0;animation:clOp-in .7s ease .7s forwards}
.clOp__title{margin:0;font-size:clamp(23px,3.4vw,36px);line-height:1.44;font-weight:800;letter-spacing:-.02em;
  opacity:0;animation:clOp-in .8s ease .85s forwards}
.clOp__lead{margin:20px 0 0;font-size:14px;line-height:2;color:rgba(255,255,255,.7);
  opacity:0;animation:clOp-in .8s ease 1s forwards}
@keyframes clOp-in{ from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
@media (max-width:820px){ .clOp__in{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){
  .clOp__ph{animation:none;clip-path:none}
  .clOp__eyebrow,.clOp__title,.clOp__lead{animation:none;opacity:1;transform:none}
}