/* 2026-11-13 記事部分の「スクロールで動く」演出(全ページ)。js/jl-anim.js が .jla を付ける。JSが動かない時は何も隠さない */
html.jla-pre #contents{opacity:0}
html.jla-on #contents{opacity:1;transition:opacity .5s ease-out}
.jla{opacity:0;will-change:opacity,transform;transition:opacity .75s ease-out,transform .75s cubic-bezier(.2,.8,.2,1);transition-delay:var(--jd,0s)}
.jla-up{transform:translateY(34px)}
.jla-pop{transform:translateY(40px) scale(.92);transition-timing-function:ease-out,cubic-bezier(.34,1.5,.6,1)}
.jla-left{transform:translateX(-46px)}
.jla-right{transform:translateX(46px)}
.jla-zoom{transform:scale(1.07);transition-duration:.9s,1.1s}
.jla-head{transform:translateY(22px);letter-spacing:.12em;transition:opacity .7s ease-out,transform .7s cubic-bezier(.2,.8,.2,1),letter-spacing .9s ease-out}
.jla.jla-in{opacity:1;transform:none}
.jla-head.jla-in{letter-spacing:inherit}
/* 中ページの見出し帯(工具の写真の上のタイトル) */
html.jla-on .pageteaser{overflow:hidden}
html.jla-on .pageteaser .teasertit{animation:jlaTit .9s cubic-bezier(.2,.8,.2,1) .15s both}
html.jla-on .pageteaser .teasertit span{animation:jlaSub .8s ease-out .65s both}
@keyframes jlaTit{from{opacity:0;letter-spacing:.35em;filter:blur(6px)}to{opacity:1;filter:none}}
@keyframes jlaSub{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
/* ボタン類: 出たあと一度だけ光が横切る */
.jla-shine{position:relative;overflow:hidden}
.jla-shine:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);animation:jlaShine 1.1s ease-in-out .5s 1 both;pointer-events:none}
@keyframes jlaShine{from{left:-60%}to{left:130%}}
@media (prefers-reduced-motion:reduce){html.jla-pre #contents{opacity:1}.jla{opacity:1!important;transform:none!important;transition:none!important}html.jla-on .pageteaser .teasertit,html.jla-on .pageteaser .teasertit span{animation:none}.jla-shine:after{display:none}}