/* motion-kit 1.0 サイトのCSSより後に読む。動きは no-preference の内側だけ */
:where(:root){--mk-header-h:0px;--mk-stack-top-gap:1rem;--mk-stack-step:8px;--mk-stack-gap:2.5rem;--mk-stack-pad:1.5rem;--mk-stack-shadow:0 -4px 16px -10px rgb(0 0 0/.1);--mk-stack-scale-min:.96;--mk-stack-dim:.94;--mk-reserve-bottom:0px;--mk-tilt-max:4deg;--mk-tilt-perspective:1000px;--mk-tilt-follow:120ms;--mk-tilt-return:420ms;--mk-tilt-ease:cubic-bezier(.22,1,.36,1);--mk-tilt-shadow:0 10px 28px -14px rgb(0 0 0/.22);--mk-vt-duration:240ms;--mk-vt-ease:cubic-bezier(.4,0,.2,1)}
@media (min-width:600px){:where(:root){--mk-stack-step:12px;--mk-stack-gap:4rem;--mk-stack-pad:2rem}}
@property --mk-used{syntax:"<length>";inherits:false;initial-value:0px}

/* STACK: 常に1列。focus の余白も常に */
.mk-stack{--mk-t0:var(--mk-stack-top,calc(var(--mk-header-h) + var(--mk-stack-top-gap)));display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mk-stack-gap);--mk-used:calc(var(--mk-t0) + var(--mk-stack-step)*(var(--mk-n,1) - 1) + var(--mk-reserve-bottom) + 16px)}
.mk-stack:has(>.mk-stack__item:nth-child(2)){--mk-n:2}
.mk-stack:has(>.mk-stack__item:nth-child(3)){--mk-n:3}
.mk-stack:has(>.mk-stack__item:nth-child(4)){--mk-n:4}
.mk-stack:has(>.mk-stack__item:nth-child(5)){--mk-n:5}
.mk-stack>.mk-stack__item:nth-child(n){margin:0;box-sizing:border-box;padding:var(--mk-stack-pad);background:var(--mk-stack-bg,var(--surface,var(--bg,Canvas)));border:1px solid var(--mk-stack-line,var(--line,rgb(0 0 0/.12)));border-radius:var(--mk-radius,var(--radius,6px));--mk-t:calc(var(--mk-t0) + var(--mk-stack-step)*(var(--mk-i,1) - 1))}
.mk-stack>.mk-stack__item:nth-child(2){--mk-i:2}
.mk-stack>.mk-stack__item:nth-child(3){--mk-i:3}
.mk-stack>.mk-stack__item:nth-child(4){--mk-i:4}
.mk-stack>.mk-stack__item:nth-child(5){--mk-i:5}
.mk-stack :focus-visible{scroll-margin:var(--mk-t0) 0 calc(var(--mk-reserve-bottom) + 16px)}

/* JS の on だけ重ねる。フォーカス中は外す */
@media screen and (prefers-reduced-motion: no-preference) and (min-height:561px){
.mk-stack[data-mk-stack=on]:not(:has(>.mk-stack__item:nth-child(6))):not(:has(:focus-visible))>.mk-stack__item{position:sticky;top:var(--mk-t);box-shadow:var(--mk-stack-shadow)}
@supports (animation-timeline: view()){
.mk-stack{view-timeline:--mk-stack}
/* 止まったカードの view() は進まないので親で測る */
.mk-stack[data-mk-stack=on]:not(:has(>.mk-stack__item:nth-child(6))):not(:has(:focus-visible))>.mk-stack__item:not(:last-child){transform-origin:50% 0;animation:mk-shrink linear both;animation-timeline:--mk-stack;animation-range:exit-crossing calc(((var(--mk-i,1) - 1)*100% + (var(--mk-i,1) + var(--mk-n) - 1)*var(--mk-stack-gap))/var(--mk-n) - var(--mk-t)) exit-crossing calc(var(--mk-i,1)*(100% + var(--mk-stack-gap))/var(--mk-n) - var(--mk-t) - var(--mk-stack-step))}
@keyframes mk-shrink{to{transform:scale(max(var(--mk-stack-scale-min),.94));filter:brightness(max(var(--mk-stack-dim),.9))}}
}
}

/* TILT: JS が .mk-tilt と --mk-rx/ry を書く */
@media screen and (prefers-reduced-motion: no-preference) and (hover:hover) and (pointer:fine){
.mk-tilt{transform:perspective(var(--mk-tilt-perspective)) rotateX(calc(var(--mk-rx,0)*1deg)) rotateY(calc(var(--mk-ry,0)*1deg));transform-origin:50% 50%;transition:transform var(--mk-tilt-return) var(--mk-tilt-ease),box-shadow var(--mk-tilt-return) var(--mk-tilt-ease)}
.mk-tilt:hover{transition-duration:var(--mk-tilt-follow);transition-timing-function:ease-out;box-shadow:var(--mk-tilt-shadow);will-change:transform}
}

/* VT */
@media (prefers-reduced-motion: no-preference){
@view-transition{navigation:auto}
::view-transition-group(root),::view-transition-old(root),::view-transition-new(root){animation-duration:min(var(--mk-vt-duration),300ms);animation-timing-function:var(--mk-vt-ease)}
}