/* ===== スクロールアニメーション（motion.js と対で動作） =====
   html.m-on が付いたときだけ隠す → JSが動かない環境でも必ず表示される */

/* 1. 見出し：1文字ずつ流れるように表示 */
html.m-on .m-split .m-char{display:inline-block;opacity:0;transform:translateY(.6em);filter:blur(4px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1),filter .6s ease;transition-delay:calc(var(--i,0) * 28ms)}
html.m-on .m-split.is-in .m-char{opacity:1;transform:none;filter:none}
.m-split .m-char.m-space{width:.3em}
.m-split .m-chunk{display:inline}
.m-split .m-char{display:inline-block}
.represent-renewal .m-split .m-chunk{display:inline}
.represent-renewal .m-split .m-char{display:inline-block}

/* 旧サービスページの見出し用 span スタイルから、文字アニメーションを保護する。 */
.represent-renewal .websaite_contents .inner h2.m-split .m-chunk{display:inline;margin:0;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit}
.represent-renewal .websaite_contents .inner h2.m-split .m-char{display:inline-block;margin:0;color:inherit;font:inherit;letter-spacing:inherit;line-height:inherit}

/* 2. テキスト・カード：下からふわっと */
html.m-on .m-up{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--d,0) * 90ms)}
html.m-on .m-up.is-in{opacity:1;transform:none}

/* 3. 画像：何もないところから現れる（横に開きながら、少し寄りから引く） */
html.m-on .m-img{clip-path:inset(0 100% 0 0);transform:scale(1.04);transition:clip-path 1.2s cubic-bezier(.77,0,.18,1),transform 1.6s cubic-bezier(.2,.7,.2,1)}
html.m-on .m-img.is-in{clip-path:inset(0 0 0 0);transform:none}
/* キャラクター画像はポンと出る */
html.m-on .m-pop{opacity:0;transform:scale(.85) translateY(16px);transition:opacity .6s ease,transform .7s cubic-bezier(.34,1.56,.64,1)}
html.m-on .m-pop.is-in{opacity:1;transform:none}

/* 4. 見出し上の小見出し（kicker）の線が伸びる */
html.m-on .renewal-kicker.m-up::before{transform:scaleX(0);transform-origin:left;transition:transform .8s .2s cubic-bezier(.77,0,.18,1)}
html.m-on .renewal-kicker.m-up.is-in::before{transform:scaleX(1)}

/* 5. スクロール進捗バー（ページ上部の細い線） */
.m-progress{position:fixed;top:0;left:0;z-index:1000;height:2px;width:100%;background:var(--rp-wine,#8d1420);transform-origin:left;transform:scaleX(0);pointer-events:none}

@media (prefers-reduced-motion:reduce){
  html.m-on .m-split .m-char,html.m-on .m-up,html.m-on .m-img,html.m-on .m-pop{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important;transition:none!important}
  .m-progress{display:none}
}