/* 表紙B案: ロゴが集まる（2026-11-08） */
.hero.hb{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(28px,5vh,52px);min-height:100svh;padding:112px 24px 150px}
.hb__mark{--w:min(30vw,46svh,420px);--u:calc(var(--w) / 520);position:relative;width:var(--w);height:calc(var(--u) * 513);flex:none}
.hb__mark img{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--pw) * var(--u));max-width:none;height:auto}
.hb__core{animation:hbCore .75s cubic-bezier(.34,1.6,.6,1) .25s both}
.hb__p{animation:hbIn 1s cubic-bezier(.3,1.35,.55,1) both;animation-delay:calc(.85s + var(--i) * .075s)}
@keyframes hbCore{from{opacity:0;transform:scale(0)}40%{opacity:1}to{opacity:1;transform:scale(1)}}
@keyframes hbIn{
  from{opacity:0;transform:translate(calc(var(--dx) * var(--u) * 2.4),calc(var(--dy) * var(--u) * 2.4)) rotate(100deg) scale(.45)}
  35%{opacity:1}
  to{opacity:1;transform:none}
}
.hb .hero__in.hb__in{position:relative;inset:auto;text-align:center;animation:hbText .9s cubic-bezier(.2,.7,.2,1) 2.2s both}
.hb .hero__h{white-space:nowrap}
.hb .hero__sub{margin:16px 0 0}
.hb .hero__sub.hero__sub--2{margin-top:0}
@keyframes hbText{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (max-width:640px){
  .hero.hb{padding:96px 16px 120px;gap:30px}
  .hb__mark{--w:min(70vw,40svh)}
}