/* Novus Digital LP 共通の動き（2026-10-06）
   JS が html に .m-on を付けたときだけ効く＝JSが動かない・動きを減らす設定の人には、すべて最初から見える */
:root{--m-ease:cubic-bezier(.16,1,.3,1);--m-ease2:cubic-bezier(.7,0,.2,1)}

/* 既存の .reveal は、この仕組みに置き換える */
.m-on .reveal{opacity:1;transform:none;transition:none}

/* 読み進めた量の線 */
.m-progress{position:fixed;left:0;top:0;height:3px;width:100%;z-index:70;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--aka),#e89a6e 60%,var(--ai2));pointer-events:none}

/* ===== 最初の画面 ===== */
.hero{position:relative;isolation:isolate}
.m-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.m-hero-bg .orb{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;will-change:transform}
.m-hero-bg .o1{width:520px;height:520px;left:-140px;top:-160px;background:radial-gradient(circle,rgba(199,90,74,.28),transparent 70%);animation:m-drift1 18s ease-in-out infinite alternate}
.m-hero-bg .o2{width:620px;height:620px;right:-200px;bottom:-260px;background:radial-gradient(circle,rgba(43,70,112,.26),transparent 70%);animation:m-drift2 22s ease-in-out infinite alternate}
.m-hero-bg .grid{position:absolute;inset:-2px;background-image:linear-gradient(rgba(26,46,74,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(26,46,74,.06) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 70% 40%,#000 0%,transparent 70%);animation:m-gridmove 30s linear infinite}
.m-hero-bg .spot{position:absolute;width:560px;height:560px;border-radius:50%;left:0;top:0;background:radial-gradient(circle,rgba(255,255,255,.75),transparent 62%);transform:translate(var(--sx,-999px),var(--sy,-999px));transition:transform .5s var(--m-ease);mix-blend-mode:soft-light}
@keyframes m-drift1{to{transform:translate(120px,90px) scale(1.15)}}
@keyframes m-drift2{to{transform:translate(-140px,-60px) scale(1.1)}}
@keyframes m-gridmove{to{background-position:48px 48px,48px 48px}}

.m-on .hero .kicker,.m-on .hero .sub,.m-on .hero .trust li,.m-on .hero .cta-row>*{opacity:0;transform:translateY(22px);transition:opacity .9s var(--m-ease),transform .9s var(--m-ease)}
.m-on .hero h1 .m-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.m-on .hero h1 .m-line>span.m-inner{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--m-ease)}
.m-on .hero h1 .mk{background-size:0% 100%;background-repeat:no-repeat;background-image:linear-gradient(transparent 68%,rgba(199,90,74,.32) 68%);transition:background-size 1.1s var(--m-ease2) 1.05s}
.m-on .hero .trust li::before{transform:scale(0);transition:transform .6s cubic-bezier(.34,1.8,.5,1)}
.m-on.m-ready .hero .kicker,.m-on.m-ready .hero .sub,.m-on.m-ready .hero .trust li,.m-on.m-ready .hero .cta-row>*{opacity:1;transform:none}
.m-on.m-ready .hero h1 .m-line>span.m-inner{transform:none}
.m-on.m-ready .hero h1 .mk{background-size:100% 100%}
.m-on.m-ready .hero .trust li::before{transform:scale(1)}
.m-on .hero .kicker{transition-delay:.05s}
.m-on .hero .sub{transition-delay:.7s}
.m-on .hero .trust li:nth-child(1),.m-on .hero .trust li:nth-child(1)::before{transition-delay:.85s}
.m-on .hero .trust li:nth-child(2),.m-on .hero .trust li:nth-child(2)::before{transition-delay:.97s}
.m-on .hero .trust li:nth-child(3),.m-on .hero .trust li:nth-child(3)::before{transition-delay:1.09s}
.m-on .hero .cta-row>*:nth-child(1){transition-delay:1.2s}
.m-on .hero .cta-row>*:nth-child(2){transition-delay:1.3s}

/* 端末の模型：飛び込み→ふわふわ→マウスで傾く */
.m-on .devices .m-tilt{position:absolute;inset:0;z-index:2;transition:transform .6s var(--m-ease)}
.m-on .devices .m-tilt.m-tilting{transform:perspective(1400px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.m-on .devices .pc,.m-on .devices .sp{opacity:0;transition:opacity 1.2s var(--m-ease),transform 1.4s var(--m-ease)}
.m-on .devices .pc{transform:translate3d(80px,-30px,-120px) rotateY(-14deg)}
.m-on .devices .pc.two{transform:translate3d(60px,60px,-60px) rotateY(-10deg)}
.m-on .devices .sp{transform:translate3d(-70px,60px,40px) rotateZ(-6deg)}
.m-on.m-ready .devices .pc,.m-on.m-ready .devices .sp{opacity:1;transform:none}
.m-on.m-ready .devices .pc{transition-delay:.35s}
.m-on.m-ready .devices .pc.two{transition-delay:.6s}
.m-on.m-ready .devices .sp{transition-delay:.85s}
.m-on.m-float .devices .pc{animation:m-bob 7s ease-in-out infinite}
.m-on.m-float .devices .pc.two{animation:m-bob 6s ease-in-out -2s infinite}
.m-on.m-float .devices .sp{animation:m-bob 5.5s ease-in-out -1s infinite}
@keyframes m-bob{0%,100%{translate:0 0}50%{translate:0 -10px}}
.m-on .devices .pc::after,.m-on .devices .sp::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.28) 48%,transparent 60%);transform:translateX(-120%);pointer-events:none}
.m-on.m-float .devices .pc::after,.m-on.m-float .devices .sp::after{animation:m-glare 6s ease-in-out 1s infinite}
@keyframes m-glare{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* ===== 見出し ===== */
.m-on .en.m-split{display:flex;align-items:center;gap:0}
.m-on .en.m-split::before{content:"";display:inline-block;height:2px;width:0;background:var(--aka);margin-right:0;transition:width .8s var(--m-ease),margin-right .8s var(--m-ease)}
.m-on .en.m-split.m-in::before{width:26px;margin-right:10px}
.m-on .en .m-ch{display:inline-block;opacity:0;transform:translateY(.7em) rotateX(-80deg);transition:opacity .5s var(--m-ease),transform .7s var(--m-ease);white-space:pre}
.m-on .en.m-in .m-ch{opacity:1;transform:none}
.m-on .center .en.m-split,.m-on .en.m-split.center{justify-content:center}

.m-on [data-m=h]{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(30px);filter:blur(6px);transition:opacity 1s var(--m-ease),clip-path 1.1s var(--m-ease),transform 1.1s var(--m-ease),filter 1s var(--m-ease)}
.m-on [data-m=h].m-in{opacity:1;clip-path:inset(0 0 -10% 0);transform:none;filter:none}
.m-on [data-m=fade]{opacity:0;transform:translateY(24px);transition:opacity 1s var(--m-ease) var(--m-d,0s),transform 1s var(--m-ease) var(--m-d,0s)}
.m-on [data-m=fade].m-in{opacity:1;transform:none}

/* ===== カード：順番に浮かぶ＋マウスで傾く・光が追う ===== */
.m-on [data-m=card]{opacity:0;transform:translateY(46px) scale(.97);transition:opacity .9s var(--m-ease) var(--m-d,0s),transform 1.1s var(--m-ease) var(--m-d,0s),box-shadow .4s}
.m-on [data-m=card].m-in{opacity:1;transform:none}
.m-on .plan.rec[data-m=card].m-in{transform:scale(1.04)}
.m-tiltable{position:relative;transform-style:preserve-3d}
.m-on .m-tiltable.m-in.m-hov{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px);transition:transform .25s ease-out,box-shadow .3s;box-shadow:0 22px 44px -18px rgba(26,46,74,.35)}
.m-on .plan.rec.m-tiltable.m-in.m-hov{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg)) translateY(-4px) scale(1.04)}
.m-tiltable::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(199,90,74,.10),transparent 45%)}
.m-tiltable.m-hov::after{opacity:1}

/* 悩みのチェックが順に入る */
.m-on .pain li::after{content:"";position:absolute;left:4px;top:calc(.55em + 1px);width:6px;height:11px;border:solid var(--aka);border-width:0 3px 3px 0;transform:rotate(45deg) scale(0);transform-origin:center;transition:transform .45s cubic-bezier(.34,1.8,.5,1)}
.m-on .pain.m-in li::after{transform:rotate(45deg) scale(1)}
.m-on .pain.m-in li:nth-child(1)::after{transition-delay:.6s}
.m-on .pain.m-in li:nth-child(2)::after{transition-delay:.95s}
.m-on .pain-answer{background:linear-gradient(90deg,var(--ai),var(--aka),var(--ai));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.m-on .pain-answer.m-in{animation:m-sheen 3.5s ease-in-out 1s 2}
@keyframes m-sheen{to{background-position:-200% 0}}

/* 番号の丸がはじける */
.m-on [data-m] .num,.m-on .num[data-m]{transform:scale(0);transition:transform .6s cubic-bezier(.34,1.8,.5,1) calc(var(--m-d,0s) + .25s)}
.m-on .m-in .num,.m-on .num.m-in{transform:scale(1)}
.m-on .m-in > .num::after,.m-on .m-in .num::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--aka);opacity:0;animation:m-ring 1.2s ease-out calc(var(--m-d,0s) + .5s) 1}
.num{position:relative}
@keyframes m-ring{0%{opacity:.7;transform:scale(.6)}100%{opacity:0;transform:scale(1.5)}}

/* 写真・画面の幕開け */
.m-on [data-m=img]{clip-path:inset(0 100% 0 0 round 10px);transition:clip-path 1.3s var(--m-ease2) var(--m-d,0s)}
.m-on [data-m=img].m-in{clip-path:inset(0 0 0 0 round 0)}
.m-on [data-m=img] img{transform:scale(1.18);transition:transform 1.8s var(--m-ease) var(--m-d,0s)}
.m-on [data-m=img].m-in img{transform:scale(1)}

/* ベン図：線が描かれ、勝ち筋が脈打つ */
.m-on .venn circle:not(.m-core){stroke-dasharray:760;stroke-dashoffset:760;fill-opacity:0;transition:stroke-dashoffset 1.8s var(--m-ease2),fill-opacity 1s ease}
.m-on .venn.m-in circle:not(.m-core){stroke-dashoffset:0;fill-opacity:.13}
.m-on .venn.m-in circle:nth-of-type(2){transition-delay:.3s,1.2s}
.m-on .venn.m-in circle:nth-of-type(3){transition-delay:.6s,1.4s}
.m-on .venn text{opacity:0;transition:opacity .8s ease 1.4s}
.m-on .venn.m-in text{opacity:1}
.m-on .venn .m-core{transform-box:fill-box;transform-origin:center;transform:scale(0);transition:transform .8s cubic-bezier(.34,1.8,.5,1) 1.9s}
.m-on .venn.m-in .m-core{transform:scale(1)}
.m-on .venn .m-pulse{transform-box:fill-box;transform-origin:center;fill:none;stroke:#C75A4A;stroke-width:2;opacity:0}
.m-on .venn.m-in .m-pulse{animation:m-vpulse 2.4s ease-out 2.6s infinite}
@keyframes m-vpulse{0%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}

/* 料金：おすすめの枠が光る */
.m-on .plan.rec{overflow:visible}
.m-on .plan.rec::before{content:"";position:absolute;inset:-2px;border-radius:15px;padding:2px;background:conic-gradient(from var(--m-ang,0deg),var(--aka),#f0b48f,var(--ai2),var(--aka));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:m-spin 5s linear infinite;pointer-events:none}
@property --m-ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes m-spin{to{--m-ang:360deg}}
.m-on .plan.rec .badge{animation:m-badge 2.8s ease-in-out infinite}
@keyframes m-badge{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-4px)}}

/* 進め方：線が伸び、通過した段が点く */
.m-on .flow{position:relative}
.m-on .flow .m-rail{position:absolute;left:47px;top:24px;bottom:24px;width:2px;background:var(--line);z-index:0}
.m-on .flow .m-rail i{position:absolute;left:0;top:0;width:100%;height:100%;background:linear-gradient(var(--aka),var(--ai));transform-origin:0 0;transform:scaleY(var(--m-fill,0))}
.m-on .flow li{position:relative;z-index:1}
.m-on .flow li.m-pass:not(.hl){border-color:rgba(199,90,74,.45)}
.m-on .flow li.m-pass:not(.hl)::before{color:var(--aka)}
.m-on .flow li.hl .ok{animation:m-badge2 2.4s ease-in-out infinite}
@keyframes m-badge2{0%,100%{box-shadow:0 0 0 0 rgba(199,90,74,.6)}50%{box-shadow:0 0 0 8px rgba(199,90,74,0)}}
@media (max-width:640px){.m-on .flow .m-rail{left:33px}}

/* 代表：言葉が1文字ずつ */
.m-on .owner .say .m-ch2{opacity:0;display:inline;transition:opacity .4s ease}
.m-on .owner .say.m-in .m-ch2{opacity:1}
.m-on .tags span{opacity:0;transform:scale(.6);transition:opacity .4s,transform .5s cubic-bezier(.34,1.8,.5,1)}
.m-on .m-in .tags span,.m-on .tags.m-in span{opacity:1;transform:none}

/* よくある質問：なめらかに開く */
.m-on .faq details .a{overflow:hidden}
.m-on .faq summary::after{transition:transform .35s var(--m-ease)}
.m-on .faq details[open] summary::after{transform:rotate(180deg)}
.m-on .faq summary{transition:background .25s}
.m-on .faq summary:hover{background:var(--soft)}

/* ボタン：光が走る・吸い付く */
.btn.main{position:relative;overflow:hidden;isolation:isolate}
.m-on .btn.main::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);animation:m-shine 4.5s ease-in-out infinite;pointer-events:none;z-index:1}
@keyframes m-shine{0%,62%{left:-60%}100%{left:130%}}
.m-on .btn{transition:transform .35s var(--m-ease),box-shadow .35s,background .25s}
.m-on .btn.m-mag{transform:translate(var(--bx,0),var(--by,0))}

/* 最後のボタンの段：オーロラと粒子 */
.final{position:relative;overflow:hidden;isolation:isolate}
.m-final-bg{position:absolute;inset:0;z-index:-1;pointer-events:none}
.m-final-bg::before,.m-final-bg::after{content:"";position:absolute;width:70%;height:140%;top:-20%;border-radius:50%;filter:blur(70px);opacity:.5}
.m-final-bg::before{left:-20%;background:radial-gradient(circle,rgba(199,90,74,.55),transparent 65%);animation:m-drift1 14s ease-in-out infinite alternate}
.m-final-bg::after{right:-25%;background:radial-gradient(circle,rgba(84,124,184,.55),transparent 65%);animation:m-drift2 17s ease-in-out infinite alternate}
.m-final-bg canvas{position:absolute;inset:0;width:100%;height:100%}

/* 模型の全体画面：自動で少しスクロールして見せる */
.m-on .fp-frame{scroll-behavior:auto}

@media (hover:none),(pointer:coarse){.m-hero-bg .spot{display:none}}