/* 全ページ共通のモーション。
   html に .mo が付いている時だけ効く(.mo は motion.js が「動きを減らす」設定でない場合に付ける)。
   motion.js が読めない・動きを減らす設定の場合は、各ページ内の既存スタイルのまま表示される。 */

/* ---------- ページ間の切り替え ---------- */
@media not (prefers-reduced-motion: reduce){
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:moVtOut .26s ease both}
  ::view-transition-new(root){animation:moVtIn .55s cubic-bezier(.19,1,.22,1) both}
  header{view-transition-name:mo-header}
}
@keyframes moVtOut{to{opacity:0;transform:translateY(-14px)}}
@keyframes moVtIn{from{opacity:0;transform:translateY(26px)}}

/* ---------- 初回表示の幕(1回の訪問につき1度だけ) ---------- */
html.mo-intro::before{
  content:"";position:fixed;inset:0;z-index:999;background:#fff;
  animation:moCurtain .85s cubic-bezier(.76,0,.2,1) .55s forwards;
}
html.mo-intro::after{
  content:"";position:fixed;left:50%;top:50%;z-index:1000;width:min(280px,60vw);height:80px;margin:-40px 0 0 calc(min(280px,60vw) / -2);
  background:url(/assets/logo/amorphous-mark.svg) center/contain no-repeat;
  animation:moMark .95s cubic-bezier(.19,1,.22,1) forwards;
}
@keyframes moCurtain{
  0%{transform:translateY(0);border-radius:0}
  55%{border-radius:0 0 50% 50%/0 0 22% 22%}
  100%{transform:translateY(-104%);border-radius:0 0 50% 50%/0 0 22% 22%;visibility:hidden}
}
@keyframes moMark{
  0%{opacity:0;transform:scale(.6) rotate(-14deg)}
  45%{opacity:1;transform:scale(1) rotate(0)}
  70%{opacity:1;transform:scale(1)}
  100%{opacity:0;transform:scale(1.25) translateY(-40px);visibility:hidden}
}
html.mo-hold main *,html.mo-hold main *::before,html.mo-hold main *::after{animation-play-state:paused !important}

/* ---------- スクロールとポインターに連動する移動 ---------- */
.mo [data-mo-par]{
  translate:
    calc(var(--sx,0) * 1px + var(--px,0) * var(--d,0) * 1px)
    calc(var(--sy,0) * 1px + var(--py,0) * var(--d,0) * 1px);
  will-change:translate;
}
.mo [data-mo-par="img"]{scale:1.14}

/* ---------- ヘッダー ---------- */
.mo header{transition:padding .35s cubic-bezier(.19,1,.22,1),box-shadow .35s,background .35s}
@media(min-width:901px){
  .mo header.mo-scrolled{padding-top:9px;padding-bottom:9px;background:rgba(255,255,255,.94);box-shadow:0 12px 34px rgba(16,20,24,.07)}
}
@media(max-width:900px){
  .mo #site-nav.open{animation:moMenu .4s cubic-bezier(.19,1,.22,1) both;transform-origin:top}
  .mo #site-nav.open a{animation:moUp .45s cubic-bezier(.19,1,.22,1) both}
  .mo #site-nav.open a:nth-child(1){animation-delay:.04s}
  .mo #site-nav.open a:nth-child(2){animation-delay:.09s}
  .mo #site-nav.open a:nth-child(3){animation-delay:.14s}
  .mo #site-nav.open a:nth-child(4){animation-delay:.19s}
  .mo #site-nav.open a:nth-child(5){animation-delay:.24s}
  .mo .menu-btn .bars,.mo .menu-btn .bars::before,.mo .menu-btn .bars::after{transition:transform .35s cubic-bezier(.19,1,.22,1),background .2s,top .35s cubic-bezier(.19,1,.22,1)}
  .mo .menu-btn[aria-expanded="true"] .bars{background:transparent}
  .mo .menu-btn[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
  .mo .menu-btn[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
}
@keyframes moMenu{from{opacity:0;transform:translateY(-12px)}}
@keyframes moUp{from{opacity:0;transform:translateY(16px)}}

/* ---------- 見出しを1行ずつせり上げる ---------- */
/* 行分けは .mo が外れた後(閲覧中に「動きを減らす」が有効になった場合)も保つ */
.mo-line,.mo-line-in{display:block}
.mo .mo-line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.mo .mo-line-in{
  display:block;translate:0 112%;
  transition:translate 1.05s cubic-bezier(.19,1,.22,1);
  transition-delay:calc(var(--i,0) * .12s + .06s);
}
.mo .mo-in .mo-line-in{translate:0 0}

/* ---------- 見出しラベルの丸 ---------- */
.mo .label::before,.mo .page-head .en::before{animation:moPing 2.8s ease-out infinite}
@keyframes moPing{
  0%{box-shadow:0 0 0 0 currentColor}
  70%,100%{box-shadow:0 0 0 11px transparent}
}

/* ---------- トップ: ヒーロー ---------- */
.mo .hero-photo{opacity:1;animation:moPhotoIn 1.5s cubic-bezier(.77,0,.18,1) .5s both}
@keyframes moPhotoIn{
  from{clip-path:inset(100% 0 0 0)}
  to{clip-path:inset(0 0 0 0)}
}
.mo .hero-photo .script-note{opacity:1;animation:moWrite 1.5s cubic-bezier(.6,0,.3,1) 1.7s both}
@keyframes moWrite{from{clip-path:inset(-20% 100% -20% 0)}to{clip-path:inset(-20% -5% -20% 0)}}
.mo .hero-photo .chip{animation:moChip .9s cubic-bezier(.34,1.56,.64,1) 1.9s both}
@keyframes moChip{from{opacity:0;transform:translateY(24px) scale(.9)}to{opacity:1;transform:none}}
.mo .hero .ghost-word,.mo .page-head .ghost-word{animation:moGhost 1.6s cubic-bezier(.19,1,.22,1) .2s both}
@keyframes moGhost{from{opacity:0;letter-spacing:.3em}to{opacity:1}}
.mo .marquee{transform:skewX(calc(var(--mq-skew,0) * 1deg));transition:transform .5s cubic-bezier(.19,1,.22,1)}

/* ---------- 写真の現れ方 ---------- */
.mo .pic.reveal img{
  clip-path:inset(0 0 0 0);
  transition:transform .8s cubic-bezier(.19,1,.22,1),scale 1.8s cubic-bezier(.19,1,.22,1),clip-path 1.3s cubic-bezier(.77,0,.18,1);
}
.mo .pic.reveal:not(.on) img{scale:1.4;clip-path:inset(0 0 100% 0)}

.mo .value-band.reveal,.mo .contact-band.reveal{
  clip-path:inset(10% 7% 10% 7% round 40px);
  transition:opacity .8s ease,transform .8s cubic-bezier(.19,1,.22,1),clip-path 1.3s cubic-bezier(.77,0,.18,1);
}
.mo .value-band.reveal.on,.mo .contact-band.reveal.on{clip-path:inset(0 0 0 0 round 40px)}
@media(max-width:900px){
  .mo .value-band.reveal,.mo .contact-band.reveal{clip-path:inset(8% 6% 8% 6% round 24px)}
  .mo .value-band.reveal.on,.mo .contact-band.reveal.on{clip-path:inset(0 0 0 0 round 24px)}
}

/* ---------- トップ: サービスのカード ---------- */
.mo .svc-card{position:relative;transform-style:preserve-3d}
.mo .svc-card .ph img{transition:transform .7s cubic-bezier(.19,1,.22,1),scale 1.6s cubic-bezier(.19,1,.22,1)}
.mo .svc-card.reveal:not(.on) .ph img{scale:1.3}
.mo .svc-cards .svc-card:nth-child(5){transition-delay:.4s}
.mo .svc-card .chip{opacity:0;scale:.7;transition:opacity .5s ease,scale .6s cubic-bezier(.34,1.56,.64,1)}
.mo .svc-card.on .chip{opacity:1;scale:1}
.mo .svc-card.on .chip:nth-child(1){transition-delay:.45s}
.mo .svc-card.on .chip:nth-child(2){transition-delay:.55s}
.mo .svc-card.on .chip:nth-child(3){transition-delay:.65s}
.mo .svc-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(460px circle at var(--gx,50%) var(--gy,50%),rgba(120,190,255,.28),transparent 62%);
  opacity:0;transition:opacity .35s;
}
@media (hover:hover) and (pointer:fine){
  .mo .svc-card.on:hover{
    transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-8px);
    transition:transform .16s ease-out,box-shadow .3s;transition-delay:0s;
  }
  .mo .svc-card:hover::after{opacity:1}
}

/* ---------- トップ: 約束・会社概要・お知らせ ---------- */
.mo .value-item{position:relative}
.mo .value-item::before{
  content:"";position:absolute;left:0;right:0;top:-2px;height:2px;background:#fff;
  transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.77,0,.18,1);
}
.mo .value-band.on .value-item::before{transform:scaleX(1)}
.mo .value-band.on .value-item:nth-child(1)::before{transition-delay:.3s}
.mo .value-band.on .value-item:nth-child(2)::before{transition-delay:.48s}
.mo .value-band.on .value-item:nth-child(3)::before{transition-delay:.66s}
.mo .value-item h3{transition:translate .35s cubic-bezier(.19,1,.22,1)}
.mo .value-item:hover h3{translate:6px 0}

.mo .co .reveal tr{opacity:0;translate:0 16px;transition:opacity .7s ease,translate .8s cubic-bezier(.19,1,.22,1)}
.mo .co .reveal.on tr{opacity:1;translate:0 0}
.mo .co .reveal.on tr:nth-child(1){transition-delay:.2s}
.mo .co .reveal.on tr:nth-child(2){transition-delay:.28s}
.mo .co .reveal.on tr:nth-child(3){transition-delay:.36s}
.mo .co .reveal.on tr:nth-child(4){transition-delay:.44s}
.mo .co .reveal.on tr:nth-child(5){transition-delay:.52s}
.mo .co .reveal.on tr:nth-child(6){transition-delay:.6s}

.mo .news-list a .t,.mo .list li a .t{transition:translate .4s cubic-bezier(.19,1,.22,1)}
.mo .news-list a:hover .t,.mo .list li a:hover .t{translate:8px 0}
.mo .news-list a:hover .ar,.mo .list li a:hover .ar{animation:moArrow .5s cubic-bezier(.19,1,.22,1)}
@keyframes moArrow{
  0%{text-indent:0}
  45%{text-indent:30px;opacity:0}
  46%{text-indent:-30px;opacity:0}
  100%{text-indent:0;opacity:1}
}
.mo .news-list .ar,.mo .list .ar{overflow:hidden}

/* ---------- ボタン ---------- */
.mo .mo-mag{
  translate:var(--mgx,0px) var(--mgy,0px);
  transition:translate .45s cubic-bezier(.19,1,.22,1),transform .25s,background .25s,box-shadow .25s,color .25s,border-color .25s;
}
.mo .btn-blue,.mo .h-cta,.mo .submit-btn,.mo .contact-inner .btn{position:relative;overflow:hidden}
.mo .btn-blue::after,.mo .h-cta::after,.mo .submit-btn::after,.mo .contact-inner .btn::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);
  transform:skewX(-20deg);
}
.mo .contact-inner .btn::after{background:linear-gradient(100deg,transparent,rgba(29,73,229,.16),transparent)}
.mo .btn-blue:hover::after,.mo .h-cta:hover::after,.mo .submit-btn:hover::after,.mo .contact-inner .btn:hover::after{animation:moSheen .75s ease}
@keyframes moSheen{to{left:130%}}

/* ---------- ポインターに付いてくる丸(マウス操作の時だけ) ---------- */
.mo-cursor{
  position:fixed;left:0;top:0;z-index:90;width:14px;height:14px;margin:-7px 0 0 -7px;pointer-events:none;
  background:linear-gradient(92deg,#1d49e5,#00c6ff);opacity:0;
  border-radius:46% 54% 58% 42%/52% 44% 56% 48%;
  transition:opacity .3s,scale .35s cubic-bezier(.19,1,.22,1);
  animation:moCursorMorph 5s ease-in-out infinite;
}
.mo-cursor.is-on{opacity:.55}
.mo-cursor.is-link{scale:3.6;opacity:.2}
.mo-cursor.is-down{scale:.6}
.mo-cursor.is-link.is-down{scale:3}
@keyframes moCursorMorph{
  0%,100%{border-radius:46% 54% 58% 42%/52% 44% 56% 48%}
  50%{border-radius:58% 42% 44% 56%/44% 58% 42% 56%}
}

/* ---------- 事業内容ページ ---------- */
.mo .shot.reveal:not(.on){transform:perspective(1400px) rotateX(16deg) translateY(70px) scale(.93)}
.mo .shot.reveal{transition:opacity .9s ease,transform 1.3s cubic-bezier(.19,1,.22,1),box-shadow .5s}
.mo .shot.reveal.on:hover{transition:transform .5s cubic-bezier(.19,1,.22,1),box-shadow .5s}
.mo .feat{transition:translate .4s cubic-bezier(.19,1,.22,1),box-shadow .4s}
.mo .feat:hover{translate:0 -6px;box-shadow:0 22px 44px rgba(16,20,24,.09)}
.mo .feat .n{transition:rotate .5s cubic-bezier(.34,1.56,.64,1)}
.mo .feat:hover .n{rotate:-8deg}
.mo .steps .step .sn{scale:0}
.mo .steps.on .step .sn{animation:moPop .7s cubic-bezier(.34,1.56,.64,1) both}
.mo .steps.on .step:nth-child(1) .sn{animation-delay:.25s}
.mo .steps.on .step:nth-child(2) .sn{animation-delay:.4s}
.mo .steps.on .step:nth-child(3) .sn{animation-delay:.55s}
.mo .steps.on .step:nth-child(4) .sn{animation-delay:.7s}
@keyframes moPop{from{scale:0;rotate:-30deg}to{scale:1;rotate:0deg}}
.mo .step{transition:translate .4s cubic-bezier(.19,1,.22,1),box-shadow .4s}
.mo .step:hover{translate:0 -5px;box-shadow:0 18px 36px rgba(16,20,24,.08)}

/* ---------- お問い合わせページ ---------- */
.mo .form-wrap form{opacity:1;animation:none}
.mo .form-wrap form > *{animation:moUp .7s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i,0) * .07s + .35s)}
.mo .field input,.mo .field select,.mo .field textarea{transition:border-color .25s,background .25s,box-shadow .3s}
.mo .field input:focus,.mo .field select:focus,.mo .field textarea:focus{box-shadow:0 10px 26px rgba(29,73,229,.12)}

/* ---------- お知らせ記事 ---------- */
.mo .article{opacity:1;animation:none}
.mo .article > *{animation:moUp .7s cubic-bezier(.19,1,.22,1) both;animation-delay:calc(var(--i,0) * .09s + .35s)}

/* ---------- 404 ---------- */
.mo .code{opacity:1;background-size:220% 100%;animation:popIn .7s cubic-bezier(.19,1,.22,1) .1s both,mo404 6s ease-in-out .8s infinite}
@keyframes mo404{
  0%,100%{translate:0 0;rotate:0deg;background-position:0% 0}
  50%{translate:0 -12px;rotate:-1.5deg;background-position:100% 0}
}

/* ---------- フッター ---------- */
.mo footer .f-nav a{transition:color .25s,translate .35s cubic-bezier(.19,1,.22,1)}
.mo footer .f-nav a:hover{translate:5px 0}

/* ---------- 光の粒の描画(particles.js が canvas を足す) ---------- */
.mo-gl{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.mo-gl.is-on{opacity:1}
.mo-gl-band{-webkit-mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.62) 90%);mask-image:linear-gradient(to bottom,#000 55%,rgba(0,0,0,.62) 90%)}
/* 光る粒の上に載る白い文字は、暗い影で縁取って読みやすさを保つ */
.mo .value-inner,.mo .contact-inner h2,.mo .contact-inner p,.mo .contact-inner .en{text-shadow:0 1px 14px rgba(6,10,44,.85),0 0 3px rgba(6,10,44,.6)}
/* 粒が説明文の後ろを通るので、文字の周りを白くぼかして読みやすさを保つ */
.mo .hero-right p{text-shadow:0 0 3px #fff,0 0 10px #fff,0 0 18px #fff}
/* ページ全体の背景に敷く粒の層。内容の後ろ・白い余白の部分にだけ見える */
.mo-gl-page{position:fixed;inset:0;z-index:-1;width:100vw;height:100vh}
@media print{.mo-gl,.mo-cursor{display:none !important}}