/* ============================================================ lphp.jp トップ改装・案C：トップより下のスクロール演出 構成・文言は元のまま。動きだけを足す。部品ごとに の class（m-〇〇）で切り替え （build.py の MOTION から消せばその部品だけ外れる） 隠す指定は .m-js（動きを減らす設定ではない時だけ JS が付ける）の下にだけ書く ============================================================ */ /* ---------- 1. 見出し：行ごとに下からせり上がる ---------- */ .m-heads .mh .ln,.m-heads .mh .ln-in{display:block} .m-js.m-heads .mh .ln{overflow:hidden;padding:.1em 0 .16em;margin:-.1em 0 -.16em} .m-js.m-heads .mh .ln-in{translate:0 108%;transition:translate 1.05s cubic-bezier(.16,1,.3,1)} .m-js.m-heads .mh.in .ln-in{translate:none} .m-js.m-heads .mh .ln:nth-child(2) .ln-in{transition-delay:.1s} .m-js.m-heads .mh .ln:nth-child(3) .ln-in{transition-delay:.2s} .m-js.m-heads .mh .ln:nth-child(4) .ln-in{transition-delay:.3s} /* ---------- 2. 写真：めくれるように現れる（カードの写真・制作実例） ---------- */ .m-js.m-reveal .bento .card .visual{clip-path:inset(100% 0 0 0 round 14px);transition:clip-path 1.15s cubic-bezier(.65,0,.35,1) .2s} .m-js.m-reveal .bento .card.in .visual{clip-path:inset(0 0 0 0 round 14px)} .m-js.m-reveal .bento .card .visual img{scale:1.18;transition:scale 1.7s cubic-bezier(.16,1,.3,1) .2s,transform .8s cubic-bezier(.2,.7,.2,1)} .m-js.m-reveal .bento .card.in .visual img{scale:1} .m-js.m-reveal .case .case-cover{clip-path:inset(0 0 100% 0 round 20px);transition:clip-path 1.1s cubic-bezier(.65,0,.35,1) .1s,transform .35s ease} .m-js.m-reveal .case.in .case-cover{clip-path:inset(0 0 0 0 round 20px)} .m-js.m-reveal .case .dm-imac,.m-js.m-reveal .case .dm-iphone{opacity:0;scale:.9; transition:opacity .8s ease,scale 1.1s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.2,.7,.2,1)} .m-js.m-reveal .case.in .dm-imac{opacity:1;scale:1;transition-delay:.55s,.55s,0s} .m-js.m-reveal .case.in .dm-iphone{opacity:1;scale:1;transition-delay:.78s,.78s,0s} /* ---------- 3. 制作実例の端末に奥行き（スクロールでスマホが手前、PCが奥で動く） ---------- */ .m-parallax .case-cover .dm-imac{translate:0 calc(var(--pp,0) * -8px)} .m-parallax .case-cover .dm-iphone{translate:0 calc(var(--pp,0) * -30px)} /* ---------- 4. 料金：金額が数え上がり、含まれるものに順にチェックが付く ---------- */ .m-pricing .price-card .amount{font-variant-numeric:tabular-nums} .m-pricing .price-card--wide .inc div::before{width:16px;height:16px;flex:none;background:var(--accent) center/10px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")} .m-js.m-pricing .price-card--wide .inc div{opacity:0;translate:-10px 0;transition:opacity .5s ease,translate .6s cubic-bezier(.16,1,.3,1)} .m-js.m-pricing .price-card--wide .inc div::before{scale:0;transition:scale .45s cubic-bezier(.34,1.56,.64,1)} .m-js.m-pricing .price-card--wide.in .inc div{opacity:1;translate:none} .m-js.m-pricing .price-card--wide.in .inc div::before{scale:1} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(1),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(1)::before{transition-delay:.45s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(2),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(2)::before{transition-delay:.53s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(3),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(3)::before{transition-delay:.61s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(4),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(4)::before{transition-delay:.69s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(5),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(5)::before{transition-delay:.77s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(6),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(6)::before{transition-delay:.85s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(7),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(7)::before{transition-delay:.93s} .m-js.m-pricing .price-card--wide.in .inc div:nth-child(8),.m-js.m-pricing .price-card--wide.in .inc div:nth-child(8)::before{transition-delay:1.01s} /* ---------- 5. 比較表：行が上から順に現れる ---------- */ .m-js.m-compare .compare tbody td{opacity:0;translate:0 12px;transition:opacity .55s ease,translate .7s cubic-bezier(.16,1,.3,1)} .m-js.m-compare .compare-wrap.in tbody td{opacity:1;translate:none} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(2) td{transition-delay:.07s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(3) td{transition-delay:.14s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(4) td{transition-delay:.21s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(5) td{transition-delay:.28s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(6) td{transition-delay:.35s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(7) td{transition-delay:.42s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(8) td{transition-delay:.49s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(9) td{transition-delay:.56s} .m-js.m-compare .compare-wrap.in tbody tr:nth-child(10) td{transition-delay:.63s} /* ---------- 6. 制作の流れ：スクロールに合わせて進行バーが伸び、終わったSTEPにチェック ---------- */ .m-process .process .step{overflow:hidden} .m-process .process .step::before{content:"";position:absolute;left:0;top:26px;bottom:26px;width:3px;border-radius:0 3px 3px 0;background:var(--accent); transform:scaleY(var(--sp,0));transform-origin:top} .m-process .process.is-row .step::before{left:26px;right:26px;top:0;bottom:auto;width:auto;height:3px;border-radius:0 0 3px 3px;transform:scaleX(var(--sp,0));transform-origin:left} .m-process .process .step .step-num::after{content:"";display:inline-block;width:15px;height:15px;margin-left:8px;vertical-align:-2px;border-radius:50%; background:var(--accent) center/9px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.3l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); scale:0;transition:scale .45s cubic-bezier(.34,1.56,.64,1)} .m-process .process .step.done .step-num::after{scale:1} .m-process .process .step{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1),border-color .5s ease} .m-process .process .step.done{border-color:rgba(27,79,232,.28)} /* ---------- 7. 最後のCTA：白抜きの「はじめましょう。」がスクロールで白く塗られていく ---------- */ .m-cta .cta-band h2 .outline{background:linear-gradient(90deg,#fff 0 50%,rgba(255,255,255,0) 50% 100%) no-repeat;background-size:200% 100%; background-position:calc((1 - var(--fill,0)) * 100%) 0;-webkit-background-clip:text;background-clip:text} /* ---------- 8. 細部：「2 営業日」の「営業日」が青地に灰色で読みにくい ---------- */ .m-polish .card.accent .card-display .unit{color:rgba(255,255,255,.78)}