/* 初期状態は表示。出現アニメーションはJSが付与する */
.hero-photo img{animation:none;transform:translateY(var(--photo-offset,0px)) scale(1.08)}
.hero h1 .motion-letter{display:inline-block;white-space:pre}
.hero h1>span{overflow:clip;overflow-clip-margin:.15em}
.button,.header-contact,.btn,.seg button{transition:background-color 180ms ease,transform 180ms ease}
.button:active,.header-contact:active,.btn:active,.seg button:active{transform:scale(.98)}
@media(prefers-reduced-motion:reduce){.hero-photo img{transform:none!important}html{scroll-behavior:auto!important}}
/* 下層ページ: motion.js が初期状態を用意する前に文字が一瞬見えるのを防ぐ。JSが動かない場合は3秒後に表示 */
html.motion-pending .page-hero h1,html.motion-pending .completion h1,html.motion-pending .col-article__head h1,html.motion-pending .company-details,html.motion-pending .contact-aside,html.motion-pending .col-card{opacity:0;animation:motion-pending-release .4s ease 3s forwards}
@keyframes motion-pending-release{to{opacity:1}}
@media(prefers-reduced-motion:reduce){html.motion-pending .page-hero h1,html.motion-pending .completion h1,html.motion-pending .col-article__head h1,html.motion-pending .company-details,html.motion-pending .contact-aside,html.motion-pending .col-card{opacity:1;animation:none}}