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

.hroC{
  --acc:#635bff;
  position:relative;isolation:isolate;overflow:hidden;
  min-height:min(88vh,760px);display:grid;place-items:center;
  padding:clamp(72px,10vw,140px) 24px;
  background:radial-gradient(120% 110% at 18% 8%, #7a5cff 0%, #635bff 34%, #2b2a72 74%, #0a2540 100%);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
}
.hroC::before{
  content:"";position:absolute;inset:-20% -10% auto -10%;height:70%;z-index:-1;
  background:radial-gradient(60% 60% at 70% 20%, rgba(0,179,255,.55), transparent 70%);
  filter:blur(30px);
}
.hroC__in{max-width:820px;text-align:center;color:#fff}
.hroC__title{
  margin:0;font-size:clamp(30px,5.4vw,58px);line-height:1.26;font-weight:800;letter-spacing:-.02em;
  text-wrap:balance;
}
.hroC__lead{
  margin:26px auto 0;max-width:600px;font-size:clamp(14.5px,1.6vw,17px);line-height:2;
  color:rgba(255,255,255,.86);
}
.hroC__btn{
  margin-top:38px;display:inline-flex;align-items:center;gap:10px;height:54px;padding:0 32px;
  border-radius:99px;background:#fff;color:#0a2540;font-size:15px;font-weight:700;text-decoration:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);transition:transform .16s ease;
}
.hroC__btn::after{content:"→";font-size:14px}
.hroC__btn:hover{transform:translateY(-2px)}
.hroC__scroll{position:absolute;left:50%;bottom:26px;translate:-50% 0;width:1px;height:46px;background:rgba(255,255,255,.28);overflow:hidden}
.hroC__scroll span{position:absolute;inset:0 auto auto 0;width:1px;height:18px;background:#fff;animation:hroC-run 1.9s ease-in-out infinite}
@keyframes hroC-run{0%{transform:translateY(-20px)}60%,100%{transform:translateY(46px)}}
@media (max-width:640px){
  .hroC{min-height:auto}
  .hroC__lead{text-align:left}
}