/* ページ演出（2026-10-13追加）
   数値の変え方：
   --pm-rise  … 下から浮き上がる距離（大きいほど動きが強い）
   --pm-dur   … 1つの要素が現れるまでの時間
   流れ図の順番の間隔は、下の .usecase-flow li の transition-delay で調整 */
:root{--pm-rise:24px;--pm-dur:.8s;--pm-ease:cubic-bezier(.2,.7,.25,1)}

@media(prefers-reduced-motion:no-preference){

 /* 1. ファーストビュー：文字を順に表示、画像はゆっくり寄りから引きへ */
 .hero-copy>*{animation:pm-rise var(--pm-dur) var(--pm-ease) both}
 .hero-copy>.hero-label{animation-delay:.1s}
 .hero-copy>h1{animation:pm-wipe 1.1s var(--pm-ease) .25s both}
 .hero-copy>h2{animation-delay:.6s}
 .hero-copy>.hero-description{animation-delay:.75s}
 .hero-copy>.hero-points{animation-delay:.9s}
 .hero-copy>.button{animation-delay:1.05s}
 .hero-photo img{animation:pm-settle 2.2s var(--pm-ease) both}

 /* 2. スクロールで順に表示（JavaScriptが動くときだけ隠す） */
 .pm-on .pm-reveal{opacity:0;translate:0 var(--pm-rise);transition:opacity var(--pm-dur) var(--pm-ease) calc(var(--pm-i,0) * 90ms),translate var(--pm-dur) var(--pm-ease) calc(var(--pm-i,0) * 90ms),transform .45s var(--pm-ease),background-color .35s ease,box-shadow .35s ease,border-color .35s ease}
 .pm-on .pm-reveal.is-in{opacity:1;translate:0 0}

 /* セクション見出しの横線を左から伸ばす */
 .pm-on .section-rule>i{transform:scaleX(0);transform-origin:left center;transition:transform 1.2s var(--pm-ease) .15s}
 .pm-on .section-rule.is-in>i{transform:scaleX(1)}

 /* 3. 主役：活用イメージの流れ図 */
 .pm-on .usecase-flow li{opacity:0;translate:0 10px;transition:opacity .6s var(--pm-ease),translate .6s var(--pm-ease),background-color .6s ease,border-color .6s ease}
 .pm-on .usecase-flow .flow-arrow{translate:-8px 0}
 .pm-on .usecase-flow li:nth-child(1){transition-delay:.1s}
 .pm-on .usecase-flow li:nth-child(2){transition-delay:.4s}
 .pm-on .usecase-flow li:nth-child(3){transition-delay:.6s}
 .pm-on .usecase-flow li:nth-child(4){transition-delay:1s}
 .pm-on .usecase-flow li:nth-child(5){transition-delay:1.2s}
 .pm-on .usecase-card.is-in .usecase-flow li{opacity:1;translate:0 0}
 .usecase-flow .flow-ai{position:relative;overflow:hidden}
 .usecase-card.is-in .usecase-flow .flow-ai:after{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);translate:-120% 0;animation:pm-shine 1.1s ease-in-out 1s both}
 .pm-on .usecase-tools li{opacity:0;translate:0 6px;transition:opacity .45s var(--pm-ease),translate .45s var(--pm-ease);transition-delay:calc(1.5s + var(--pm-i,0) * 70ms)}
 .pm-on .usecase-card.is-in .usecase-tools li{opacity:1;translate:0 0}

 /* 4. スマートフォン下の相談ボタン：出し入れを滑らかに */
 .sticky-cta{transition:translate .45s var(--pm-ease),opacity .45s ease}
 .sticky-cta.is-hidden{translate:0 140%;opacity:0;pointer-events:none}
}

@keyframes pm-rise{from{opacity:0;translate:0 var(--pm-rise)}to{opacity:1;translate:0 0}}
@keyframes pm-wipe{from{clip-path:inset(0 100% 0 0);opacity:.2}to{clip-path:inset(0 0 0 0);opacity:1}}
@keyframes pm-settle{from{scale:1.06}to{scale:1}}
@keyframes pm-shine{to{translate:120% 0}}

@media print{.pm-on .pm-reveal,.pm-on .usecase-flow li,.pm-on .usecase-tools li{opacity:1!important;translate:none!important}}