/* Novus Digital コーポレートサイト 共通の動き（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)}

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

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

/* ===== ページ上部 ===== */
.phead{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:.6}
.m-hero-bg .o1{width:520px;height:520px;left:-160px;top:-140px;background:radial-gradient(circle,rgba(199,90,74,.22),transparent 70%);animation:m-drift1 18s ease-in-out infinite alternate}
.m-hero-bg .o2{width:640px;height:640px;right:-220px;top:-120px;background:radial-gradient(circle,rgba(43,70,112,.20),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,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(26,46,74,.055) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse at 75% 30%,#000 0%,transparent 70%);mask-image:radial-gradient(ellipse at 75% 30%,#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,.8),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.m-full .phead .crumb,.m-on.m-full .phead .lead,.m-on.m-full .phead .tagrow,.m-on.m-full .phead p.sub{opacity:0;transform:translateY(20px);transition:opacity .9s var(--m-ease),transform .9s var(--m-ease)}
.m-on.m-full .phead .lead{transition-delay:.75s}
.m-on.m-full .phead .tagrow,.m-on.m-full .phead p.sub{transition-delay:.9s}
.m-on.m-full .phead h1 .m-line{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em}
.m-on.m-full .phead h1 .m-inner{display:inline-block;transform:translateY(105%);transition:transform 1.1s var(--m-ease) .25s}
.m-on.m-full.m-ready .phead .crumb,.m-on.m-full.m-ready .phead .lead,.m-on.m-full.m-ready .phead .tagrow,.m-on.m-full.m-ready .phead p.sub{opacity:1;transform:none}
.m-on.m-full.m-ready .phead h1 .m-inner{transform:none}

/* ===== 文字を1文字ずつ ===== */
.m-on .m-split .m-ch{display:inline-block;opacity:0;transform:translateY(.6em) rotateX(-80deg);transition:opacity .5s var(--m-ease),transform .8s var(--m-ease);white-space:pre}
.m-on .m-split.m-in .m-ch{opacity:1;transform:none}

/* ===== 見出し・文章 ===== */
.m-on [data-m=h]{opacity:0;clip-path:inset(0 0 100% 0);translate:0 30px;filter:blur(6px);transition:opacity 1s var(--m-ease),clip-path 1.1s var(--m-ease),translate 1.1s var(--m-ease),filter 1s var(--m-ease)}
.m-on [data-m=h].m-in{opacity:1;clip-path:inset(-10% -5% -15% -5%);translate:0 0;filter:none}
.m-on [data-m=fade]{opacity:0;translate:0 24px;transition:opacity 1s var(--m-ease) var(--m-d,0s),translate 1s var(--m-ease) var(--m-d,0s)}
.m-on [data-m=fade].m-in{opacity:1;translate:0 0}

/* ===== カード：順番に浮かぶ＋マウスで傾く・光が追う ===== */
.m-on [data-m=card]{opacity:0;translate:0 46px;scale:.97;transition:opacity .9s var(--m-ease) var(--m-d,0s),translate 1.1s var(--m-ease) var(--m-d,0s),scale 1.1s var(--m-ease) var(--m-d,0s),box-shadow .4s}
.m-on [data-m=card].m-in{opacity:1;translate:0 0;scale:1}
.m-tiltable{position:relative}
.m-on .m-tiltable.m-in.m-hov{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));translate:0 -4px;transition:transform .25s ease-out,translate .25s ease-out,box-shadow .3s;box-shadow:0 22px 44px -18px rgba(26,46,74,.35)}
.m-tiltable>.m-glow{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%);z-index:1}
.m-tiltable.m-hov>.m-glow{opacity:1}

/* 番号がはじける */
.m-on [data-m=card] .m-pop{transform:scale(0);transition:transform .6s cubic-bezier(.34,1.8,.5,1) calc(var(--m-d,0s) + .3s)}
.m-on [data-m=card].m-in .m-pop{transform:scale(1)}

/* 写真の幕開け */
.m-on [data-m=img]{clip-path:inset(0 100% 0 0);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)}
.m-on [data-m=img] img,.m-on img[data-m=img]{scale:1.18;transition:scale 1.8s var(--m-ease) var(--m-d,0s),clip-path 1.3s var(--m-ease2) var(--m-d,0s)}
.m-on [data-m=img].m-in img,.m-on img[data-m=img].m-in{scale:1}

/* よくある質問：なめらかに開く */
.m-on details>summary{transition:background .25s}

/* ボタン：光が走る・吸い付く */
.m-shine{position:relative;overflow:hidden;isolation:isolate}
.m-on .m-shine::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),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 .m-mag{translate:var(--bx,0) var(--by,0);transition:translate .35s var(--m-ease),transform .25s,background .25s}

/* CTA の段：オーロラと粒子 */
section.cta{isolation:isolate}
.m-final-bg{position:absolute;inset:0;z-index:0;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%}
section.cta>*:not(.m-final-bg){position:relative;z-index:1}

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

/* 飾りの英字見出しがスマホで横にはみ出していた分も、ここで止める */
.m-on.m-full body>section,.m-on.m-full body>header.phead,.m-on.m-full body>main{overflow-x:clip}