/* hero-fx.css ヒーロー（§3.2・3.3）。静止と動きを減らす設定は --t0:-99s */
.hero.r3{--t0:0s;--eo:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--ei:cubic-bezier(.55,0,1,.45);overflow-x:hidden;
  overflow-x:clip}
html.r4-intro .hero.r3{--t0:1.38s}
[data-still=true] .hero.r3.r3{--t0:-99s}
[data-still=true] .r4h-sp svg{animation:none}
@media (prefers-reduced-motion:reduce){html .hero.r3.r3{--t0:-99s}.r4h-sp svg,.r4h-badge,.is-in{animation:none!important}.r4h-tk *{transition:none!important}}
@keyframes r4hUp{from{opacity:0;transform:translateY(18px)}}
.r3 :is(.hero-copy>.eyebrow,.lede,.facts,.hero-actions,.mix,.art-caption,.r4h-tk){animation:r4hUp 1.2s var(--eo) calc(var(--t0) + var(--hd,0s)) backwards}
.r3 .lede{--hd:.85s}.r3 .facts{--hd:1s}.r3 .hero-actions{--hd:1.15s}.r3 .art-caption{--hd:1.4s}.r3 .r4h-tk{--hd:1.6s}.r3 .mix{--hd:.2s}
@keyframes r4hRise{from{transform:translateY(108%)}}
@keyframes r4hBlur{from{opacity:0;filter:blur(12px)}}
@keyframes r4hClip{from{clip-path:inset(-60% -50vw 0)}to{clip-path:none}}
.r4h-ln{animation:r4hClip 0s calc(var(--t0) + 1.2s) backwards}
.r4h-li{display:inline-block;animation:r4hRise 1.5s var(--eo) calc(var(--t0) + var(--l)*.22s) backwards}
.r4h-ch{display:inline-block;animation:r4hBlur 1.25s var(--eo) calc(var(--t0) + var(--l)*.22s + .08s + var(--r)*.6s) backwards}
.r4h-ln:first-child .r4h-li{animation-duration:1.05s;animation-delay:calc(var(--t0) - .32s)}
.r4h-ln:first-child .r4h-ch{animation-delay:calc(var(--t0) - .32s + var(--r)*.4s)}
/* トップ専用：Shippori 500 の読込を外し、本文も700に揃える。 */
.r4s-kd .r4s-glow{font-weight:700}
.r4h-stamp{position:relative;display:inline-block;margin:0 .12em 0 -.02em;padding:.03em .1em;line-height:1.22;border-radius:.1em;background:#D1382C;color:#F5EFE4;
  box-shadow:inset 0 0 0 .05em #D1382C,inset 0 0 0 .085em #F5EFE4BF;rotate:-4deg;animation:r4hStamp .95s var(--pop) calc(var(--t0) + 1.25s) backwards}
@keyframes r4hStamp{from{opacity:0;transform:scale(2.2) rotate(-14deg)}35%{opacity:1}}
.r4h-stamp::after{content:"";position:absolute;inset:-.08em;border:.05em solid #D1382C;border-radius:.16em;opacity:0;animation:r4hShock .95s var(--eo) calc(var(--t0) + 1.6s)}
@keyframes r4hShock{from{opacity:.95;transform:scale(.95)}to{opacity:0;transform:scale(1.5)}}
.r4h-jelly .r4h-ch{transform-origin:50% 85%}
/* 戻ったときの入場だけを再生する。ボタン・舞台・札・無限の揺れは対象外 */
.r3.r4h-replay :is(.r4h-ln,.r4h-li,.r4h-ch,.r4h-stamp,.r4h-sp){--t0:0s}
.r3:is(.r4h-rst,.r4h-final) :is(.r4h-ln,.r4h-li,.r4h-ch,.r4h-stamp,.r4h-sp),.r3:is(.r4h-rst,.r4h-final) .r4h-stamp::after{animation-name:none}
.r3.r4h-arm :is(.r4h-ln,.r4h-li,.r4h-ch,.r4h-stamp,.r4h-sp),.r3.r4h-arm .r4h-stamp::after{animation-play-state:paused}
.r4h-tk{display:flex;align-items:center;gap:16px;width:max-content;max-width:100%;min-height:5.6rem;margin:-4px 0 14px;color:#F5EFE4;text-decoration:none}
.r4h-chip{position:relative;flex:none;display:grid;place-items:center;color:#fff;font:700 .92rem/1.15 var(--sans);letter-spacing:.04em;text-align:center;white-space:nowrap;
  animation:r4hChip .95s var(--pop) calc(var(--t0) + 1.9s) backwards}
.r4h-chip.is-in{animation:r4hIn .48s var(--eo) backwards}
@keyframes r4hChip{from{opacity:0;transform:scale(2) rotate(-30deg)}40%{opacity:1}}
@keyframes r4hIn{from{opacity:0;transform:scale(.7)}}
.r4h-chip b{display:block;font:600 1.2em/1.05 var(--mono);letter-spacing:0}
.r4h-chip[data-k=no1]{width:5.4em;height:5.4em;background:#D1382C;rotate:-8deg;
  clip-path:polygon(50% 0,58% 11%,69% 4%,72% 17%,85% 15%,83% 28%,96% 31%,89% 42%,100% 50%,89% 58%,96% 69%,83% 72%,85% 85%,72% 83%,69% 96%,58% 89%,50% 100%,42% 89%,31% 96%,28% 83%,15% 85%,17% 72%,4% 69%,11% 58%,0 50%,11% 42%,4% 31%,17% 28%,15% 15%,28% 17%,31% 4%,42% 11%)}
.r4h-chip[data-k=no1]::before{content:"";position:absolute;inset:15%;border:1.5px solid #FFFD;border-radius:50%}
.r4h-chip[data-k=new]{padding:7px 14px;background:#D1382C;border-radius:4px;rotate:-4deg}
.r4h-chip[data-k=veg]{padding:5px 16px;background:#FF741F;border:3px solid #7DD957;border-radius:999px;color:#1D1A17}
.r4h-tk-name{font:700 1.5rem/1.4 var(--serif);letter-spacing:.04em;white-space:nowrap;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .35s var(--eo)}
.r4h-tk-go{color:#F7AC1D;font-family:var(--mono);transition:transform .3s var(--eo)}
.r4h-tk:is(:hover,:focus-visible) .r4h-tk-name{background-size:100% 1px}
.r4h-tk:is(:hover,:focus-visible) .r4h-tk-go{transform:translateY(4px)}
.r4h-tc{display:inline-block;transition:.7s var(--eo) calc(var(--r)*.24s);transition-property:opacity,filter}
.r4h-tc.is-pre{opacity:0;filter:blur(12px)}
.r4h-tk.is-out .r4h-tc{opacity:0;filter:blur(10px);transition:.4s var(--ei) calc(var(--r)*.16s);transition-property:opacity,filter}
.r4h-tk.is-out .r4h-chip{opacity:0;transform:scale(.85);transition:.32s var(--ei);transition-property:opacity,transform}
.r4h-float{position:absolute;inset:0;pointer-events:none;z-index:3;--xs:1;--sp-ink:#F5EFE4;--sp-hi:#4D3B30}
.r4h-sp{position:absolute;width:var(--z);height:var(--z);left:var(--x,auto);top:var(--y,auto);right:var(--rx,auto);bottom:var(--by,auto);
  translate:calc(var(--mx,0px)*var(--k)) calc(var(--my,0px)*var(--k));animation:r4hPop 1.1s var(--pop) calc(var(--t0) + 1.55s + var(--i)*.1s) backwards}
.r4h-sp svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(var(--rr,0deg));filter:drop-shadow(0 4px 5px #140E0A8C);animation:r4hFloat var(--p) ease-in-out var(--dl) infinite alternate}
@keyframes r4hPop{from{opacity:0;transform:scale(0) rotate(-120deg)}}
@keyframes r4hFloat{from{transform:translate(-3px,8px) rotate(calc(var(--rr,0deg) - 10deg))}to{transform:translate(3px,-8px) rotate(calc(var(--rr,0deg) + 10deg))}}
@media (max-width:1240px){.r4h-float{--xs:.42}.r4h-sp:is(:nth-child(5),:nth-child(6)){display:none}}
@media (min-width:761px) and (max-width:1000px){.r4h-float{--xs:.2}.r4h-sp:is(:nth-child(2),:nth-child(3),:nth-child(9)){display:none}}
.r3:is(.r4h-hold,.r4h-off) .r4h-sp svg{animation-play-state:paused}
@keyframes r4hBadge{30%{transform:scale(1.12,.88)}55%{transform:scale(.94,1.06)}78%{transform:scale(1.03,.97)}}
@media (hover:hover){.brand:hover .r4h-badge{animation:r4hBadge .55s cubic-bezier(.22,1,.36,1)}}
@media (max-width:760px){
  .r4h-tk{gap:12px;min-height:4.6rem}
  .r4h-chip{font-size:.8rem}
  .r4h-tk-name{font-size:1.25rem}
  .r4h-sp{width:var(--zm);height:var(--zm);left:var(--xm,auto);top:var(--ym,auto);right:var(--rxm,auto);bottom:var(--bym,auto)}
  .r4h-sp:nth-child(n+5):not(:nth-child(7)){display:none}
}