/* ISC r13 トップの動き（index.html だけが読む。すべて body.page-top に限定）2026-11-03 RELEASE01
   ヒーロー 3 拍：絵 → 見出し（行ごとのマスクから下へ減速）→ 一文・つづき。4 入口は順番に、実例章は写真と言葉をずらして、読みものは細線を 1 回。
   JS 無効・動き低減では最初から完成状態。JS が途中で止まっても 3.4 秒で CSS だけで出る。暗幕・粒子・跳ね・回転・常時揺れ・一字ずつなし */
@keyframes r13Safe{to{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 18px)}}
body.page-top .hero h1 .ln{display:block;overflow:hidden;padding-bottom:.06em}
body.page-top .hero h1 .ln>span{display:inline-block}
/* 1 ヒーロー：見出しの箱は見せたまま、行の中身だけを下に置く。キッカー・リードは不透明度と小さな上昇 */
html.top-hold body.page-top .hero .hero-copy>h1{opacity:1;transform:none;animation:none}
html.top-hold body.page-top .hero h1 .ln>span{transform:translate3d(0,108%,0);animation:r13Safe 0s linear 3.4s forwards}
html.top-show body.page-top .hero h1 .ln>span{transform:none;transition:transform 1.1s cubic-bezier(.16,.84,.3,1)}
html.top-show body.page-top .hero h1 .ln:nth-child(2)>span{transition-delay:.16s}
html.top-hold body.page-top .hero .kicker,html.top-hold body.page-top .hero .lead{transform:translate3d(0,14px,0)}
html.top-show body.page-top .hero .kicker{transition-delay:.05s}
html.top-show body.page-top .hero .lead{transition:opacity .9s cubic-bezier(.22,.61,.36,1) .52s,transform .9s cubic-bezier(.22,.61,.36,1) .52s}
html.top-show body.page-top .hero .scroll-cue{transition:opacity .8s ease 1.3s,visibility 0s linear 1.3s}
@media (max-width:640px){
 html.top-show body.page-top .hero h1 .ln>span{transition-duration:.9s}
 html.top-hold body.page-top .hero .kicker,html.top-hold body.page-top .hero .lead{transform:translate3d(0,10px,0)}
 html.top-show body.page-top .hero .lead{transition-delay:.42s}
}
/* 2 4 入口：順番に（左上→右上→左下→右下）。PC はホバー・フォーカスで絵が少し寄り、「この物語へ」が右へ */
html.rv-on body.page-top .story-card:nth-child(2) img.rv{transition-delay:.12s}
html.rv-on body.page-top .story-card:nth-child(3) img.rv{transition-delay:.24s}
html.rv-on body.page-top .story-card:nth-child(4) img.rv{transition-delay:.36s}
html.rv-on body.page-top .story-card:has(img.rv) .t{opacity:0;transform:translate3d(0,10px,0);transition:opacity .8s ease .18s,transform .8s cubic-bezier(.22,.61,.36,1) .18s}
html.rv-on body.page-top .story-card:has(img.rv.in) .t{opacity:1;transform:none}
body.page-top .story-card .go{display:inline-block;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
@media (hover:hover) and (pointer:fine){
 body.page-top .story-card img{transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1),box-shadow .7s ease}
 body.page-top .story-card:hover img,body.page-top .story-card:focus-visible img{transform:scale(1.025);box-shadow:0 18px 40px rgba(46,43,39,.14)}
 body.page-top .story-card:hover .go,body.page-top .story-card:focus-visible .go{transform:translateX(5px)}
}
/* 3 実例章：写真は少し内側から開き、言葉は 0.15 秒あとに */
html.rv-on body.page-top #cases .sp-item .sp-photo{clip-path:inset(6% 6% 6% 6% round 18px);opacity:.2;transition:clip-path 1.1s cubic-bezier(.16,.84,.3,1),opacity .9s ease}
html.rv-on body.page-top #cases .sp-item .sp-text,html.rv-on body.page-top #cases .spread-story{opacity:0;transform:translate3d(0,14px,0);transition:opacity .9s ease .15s,transform .9s cubic-bezier(.22,.61,.36,1) .15s}
html.rv-on body.page-top #cases .sp-item.in .sp-photo{clip-path:inset(0 0 0 0 round 18px);opacity:1}
html.rv-on body.page-top #cases .sp-item.in .sp-text,html.rv-on body.page-top #cases .spread-story.in{opacity:1;transform:none}
/* 4 読みもの：見出しの下の細線を 1 回だけ描く（本文は最初から読める） */
body.page-top #guides .sec-head h2::after{content:"";display:block;width:72px;height:2px;margin-top:16px;background:var(--wood);transform-origin:left center}
html.rv-on body.page-top #guides .sec-head h2::after{transform:scaleX(0);transition:transform 1s cubic-bezier(.22,.61,.36,1) .1s}
html.rv-on body.page-top #guides .sec-head.in h2::after{transform:scaleX(1)}
@media (prefers-reduced-motion:reduce){
 html.top-hold body.page-top .hero h1 .ln>span,html.top-hold body.page-top .hero .kicker,html.top-hold body.page-top .hero .lead{transform:none;animation:none}
 html.rv-on body.page-top #cases .sp-item .sp-photo,html.rv-on body.page-top #cases .sp-item .sp-text,html.rv-on body.page-top #cases .spread-story,html.rv-on body.page-top .story-card .t{opacity:1;transform:none;clip-path:none;transition:none}
 html.rv-on body.page-top #guides .sec-head h2::after{transform:none;transition:none}
}
@media (max-width:640px){ html.rv-on body.page-top #cases .sp-main .sp-photo{clip-path:inset(4% 0 4% 0)} html.rv-on body.page-top #cases .sp-main.in .sp-photo{clip-path:inset(0 0 0 0)} }