/* hero */
.hero{background:var(--g);color:#fff;position:relative;overflow:hidden;padding:56px 0 110px}
.hero h1{font-size:clamp(70px,15vw,210px);transform:skewX(-8deg);transform-origin:left;animation:in .8s cubic-bezier(.2,.8,.2,1) both}
.hero h1 span{display:block}
.hero h1 .b{display:inline-block;background:#fff;color:var(--g);padding:0 .12em;margin:.04em 0 .04em -.05em}
.hero h1 span:nth-child(2){animation:in .8s .15s both}.hero h1 span:nth-child(3){animation:in .8s .3s both}
@keyframes in{from{opacity:0;translate:-60px 0}}
.hero p{font-size:21px;margin:34px 0 28px;max-width:46ch}
.hero .sticker{position:absolute;right:max(18px,6vw);top:60px;width:clamp(120px,19vw,260px);border-radius:50%;background:#fff;rotate:12deg;border:6px solid #fff;box-shadow:8px 8px 0 var(--g2)}
.hero .hx2{position:absolute;right:-60px;bottom:-40px;width:340px;opacity:.9;pointer-events:none}
.mq{background:#fff;color:var(--g2);rotate:-2.2deg;margin:-62px -20px 0;position:relative;z-index:5;border-block:4px solid var(--g2);overflow:hidden;white-space:nowrap}
.mq div{display:inline-block;padding:10px 0;animation:mq 26s linear infinite;font-size:30px}
.mq b{color:#d1366f;margin:0 18px;font-weight:400}
@keyframes mq{to{translate:-50% 0}}