/* intro.css 初回演出。CSSだけでも2.3秒で消え、3.2秒の上限を超えない。 */
.r4i{display:none}
html.r4-intro .r4i{--m:clamp(96px,13vw,176px);--g:clamp(14px,2vw,28px);--dx:.95;--dy:.72;--in:cubic-bezier(.22,1,.36,1);--pop:cubic-bezier(.34,1.56,.64,1);--io:cubic-bezier(.76,0,.24,1);--ei:cubic-bezier(.55,0,1,.45);
  display:block;position:fixed;inset:0;z-index:9585;overflow:hidden;animation:r4iGone 0s 2.3s forwards}
@keyframes r4iGone{to{visibility:hidden}}
.r4i-p{position:absolute;display:block;background:#F7AC1D;animation:r4iP 1s var(--io) 1.3s both}
@keyframes r4iP{to{transform:var(--to)}}
.r4i-t,.r4i-b{animation-duration:.91s;animation-delay:1.39s}
.r4i-t{inset:0 0 50%;--to:translateY(-101%)}
.r4i-b{inset:50% 0 0;--to:translateY(101%)}
.r4i-l{inset:0 50% 0 0;--to:translateX(-101%)}
.r4i-r{inset:0 0 0 50%;--to:translateX(101%)}
.r4i-p b{position:absolute;top:50%;translate:0 -50%;font:800 clamp(28px,4vw,56px)/1.2 var(--serif);letter-spacing:.12em;color:#4D3B30;white-space:nowrap;
  animation:r4iWord .68s var(--in) .71s both,r4iFade .42s var(--ei) 1.82s forwards}
.r4i-l b{right:calc(var(--m)/2 + var(--g));margin-right:-.12em;--wx:24px}
.r4i-r b{left:calc(var(--m)/2 + var(--g));--wx:-24px}
@keyframes r4iWord{from{opacity:0;filter:blur(8px);transform:translateX(var(--wx))}}
@keyframes r4iFade{to{opacity:0}}
.r4i-m,.r4i-s{position:absolute;left:50%;top:50%}
.r4i-m{width:var(--m);height:auto;translate:-50% -54%;animation:r4iStamp .55s var(--pop) .58s both,r4iOut .32s var(--ei) 1.14s forwards}
@keyframes r4iStamp{from{opacity:0;transform:scale(1.9);filter:blur(14px)}45%{opacity:1;filter:blur(0)}}
@keyframes r4iOut{to{opacity:0;transform:translateY(-12px) scale(.7)}}
.r4i-s{--w:calc(var(--m)*var(--z,.72));width:var(--w);height:var(--w);margin:calc(var(--w)/-2) 0 0 calc(var(--w)/-2);overflow:visible;
  --ex:calc(var(--sx)*var(--m)*var(--dx));--ey:calc(var(--sy)*var(--m)*var(--dy));animation:r4iIn .84s var(--in) both,r4iFling .81s var(--ei) 1.3s forwards}
@keyframes r4iIn{from{opacity:0;transform:translate(calc(var(--sx)*56vw),calc(var(--sy)*56vh)) rotate(calc(var(--sx)*-540deg)) scale(1.7)}12%{opacity:1}to{transform:translate(var(--ex),var(--ey)) rotate(var(--er))}}
@keyframes r4iFling{from{transform:translate(var(--ex),var(--ey)) rotate(var(--er))}to{opacity:0;transform:translate(calc(var(--ex)*5),calc(var(--ey)*5)) rotate(calc(var(--er) + var(--sx)*200deg))}}
@media (max-width:560px){html.r4-intro .r4i{--dx:.6;--dy:1.6}.r4i-p b{writing-mode:vertical-rl;font-size:30px}.r4i-l b{margin-right:0;translate:0 -66%}.r4i-r b{translate:0 -34%}}
html.r4-intro.r4-intro-skip .r4i{animation:r4iSkip .24s var(--ei) forwards}
@keyframes r4iSkip{to{opacity:0;visibility:hidden}}
html[data-still="true"] .r4i{display:none!important}
@media (prefers-reduced-motion:reduce){.r4i{display:none!important}}