/* 時間再生は内側だけ。親のスクロール移動・縮小と競合させない。 */
.content-motion [data-enter-state="pending"]{opacity:0}
.content-motion [data-enter-state="playing"]{will-change:transform,opacity}
.type-char{display:inline-block;transform-origin:50% 100%;backface-visibility:hidden;white-space:pre}
.type-accessible{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.content-motion [data-typeset][data-enter-state="pending"] .type-char{opacity:0}
.contact-title-ink{display:block}
.statement-mask{display:block;overflow:clip;padding-block:.08em;margin-block:-.08em}
.statement-ink{display:block;transform-origin:50% 100%}
.kinetic .hero-statement .type-char.cinema-pending{opacity:0}
.kinetic .hero-statement .type-char.cinema-playing{animation:cinema-statement var(--cinema-intro-duration,1050ms) cubic-bezier(.22,.65,.3,1) var(--cinema-delay,0ms) both}
@keyframes cinema-statement{
  from{opacity:0;clip-path:inset(100% 0 0);transform:translateY(.55em) rotateX(-55deg)}
  45%{opacity:1}
  to{opacity:1;clip-path:inset(0);transform:translateY(0) rotateX(0)}
}

/* 番号は実際の工程順。スマホでは本文を分割せず、一行程ずつ読む。 */
.process-strip{overflow:clip}
.process-strip ol{display:grid;grid-template-columns:1fr;gap:26px;border-top:0;padding-top:12px}
.process-strip ol li{position:relative;display:grid;grid-template-columns:48px 1fr;gap:14px;align-items:baseline;font-size:15px;line-height:1.85;padding:0 0 20px}
.process-strip ol li::before{content:none}
.process-strip ol li::after{content:"";position:absolute;inset:auto 0 0;height:1px;background:currentColor;opacity:.22;transform-origin:0 50%}
.process-number{display:block;font-family:var(--display);font-size:27px;font-weight:500;color:var(--pink);line-height:1.2}
.process-copy{display:block;font-weight:500}
.kinetic .cinema-pending .process-number,.kinetic .cinema-pending .process-copy{opacity:0}
.kinetic .cinema-pending::after{transform:scaleX(0)}
.kinetic .cinema-playing .process-number{animation:cinema-process 680ms cubic-bezier(.16,1,.3,1) var(--cinema-delay,0ms) both}
.kinetic .cinema-playing .process-copy{animation:cinema-process 680ms cubic-bezier(.16,1,.3,1) var(--cinema-copy-delay,90ms) both}
.kinetic li.cinema-playing::after{animation:cinema-line 500ms cubic-bezier(.16,1,.3,1) var(--cinema-line-delay,170ms) both}
@keyframes cinema-process{
  from{opacity:0;transform:translateX(var(--cinema-travel,72px)) skewX(-5deg);clip-path:inset(0 100% 0 0)}
  38%{opacity:1}
  to{opacity:1;transform:translateX(0) skewX(0);clip-path:inset(0)}
}
@keyframes cinema-line{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(min-width:601px){
  .process-strip ol{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
  .process-strip ol li{display:block;--cinema-travel:160px;padding-bottom:28px}
  .process-number{font-size:32px;margin-bottom:18px}
}

/* お問い合わせは一度だけ印を押すように現れ、その後は静止する。 */
.contact-ink{transform-box:fill-box;transform-origin:50% 50%}
.kinetic .contact-ink.cinema-pending{opacity:0}
.kinetic .contact-ink.cinema-playing{animation:cinema-seal 720ms cubic-bezier(.2,.8,.2,1) both}
@keyframes cinema-seal{
  from{opacity:0;transform:scale(1.16) rotate(-7deg)}
  50%{opacity:1;transform:scale(.98) rotate(1deg)}
  to{opacity:1;transform:scale(1) rotate(0)}
}
@media(prefers-reduced-motion:reduce){
  .type-char{animation:none!important;opacity:1!important;transform:none!important;clip-path:none!important}
  .content-motion [data-enter-state]{opacity:1!important;transform:none!important;clip-path:none!important}
  .kinetic .statement-ink.cinema-pending,.kinetic .statement-ink.cinema-playing,
  .kinetic .cinema-pending .process-number,.kinetic .cinema-pending .process-copy,
  .kinetic .cinema-playing .process-number,.kinetic .cinema-playing .process-copy,
  .kinetic .contact-ink.cinema-pending,.kinetic .contact-ink.cinema-playing{animation:none;opacity:1;transform:none;clip-path:none}
  .kinetic li.cinema-pending::after,.kinetic li.cinema-playing::after{animation:none;transform:none}
}