/* web-motion-kit : Lenis / Vanilla Tilt / Rellax の土台CSS（Carefree・Smile デザイントークン前提） */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto!important}          /* テンプレの scroll-behavior:smooth と喧嘩させない */
.lenis.lenis-stopped{overflow:hidden}

/* Tilt：カードに奥行きを持たせる。子要素に translateZ を付けると数字が浮く */
[data-tilt]{transform-style:preserve-3d;will-change:transform}
[data-tilt] .tz{transform:translateZ(22px)}

/* Rellax：視差で動かす装飾。親は overflow:hidden にしてはみ出しを切る */
.mk-deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.mk-ring{position:absolute;border-radius:50%;border:1.5px solid var(--cfs-orange-tint-2,#F6DEC8)}
.mk-secno{position:absolute;right:26px;top:6px;font-family:var(--num,Inter,sans-serif);font-weight:700;font-size:92px;
  line-height:1;color:transparent;-webkit-text-stroke:1.2px var(--cfs-orange-tint-2,#F6DEC8);pointer-events:none;z-index:0;user-select:none}
@media(max-width:720px){.mk-secno{font-size:60px;right:14px}}

/* スクロール進捗で伸びる縦線（--p: 0〜1 をJSが入れる） */
.mk-progress{position:relative}
.mk-progress>.mk-line{position:absolute;left:10px;top:8px;bottom:8px;width:3px;background:var(--cfs-hairline,#ECE6E1);border-radius:3px}
.mk-progress>.mk-line>i{display:block;width:100%;height:calc(var(--p,0)*100%);background:var(--cfs-orange,#E4720C);border-radius:3px}

/* 表示されたら伸びる横棒：.mk-grow の width は --w。data-reveal が .in になるまで 0 */
.mk-grow{width:var(--w);transition:width 1s cubic-bezier(.22,1,.36,1)}
body.anim [data-reveal]:not(.in) .mk-grow{width:0}

@media(prefers-reduced-motion:reduce){
  .mk-grow{transition:none!important}
}
@media print{.mk-deco,.mk-secno{display:none}}