/* ISC r8 トップ専用（index.html だけが読む。すべて body.page-top に限定。共通の r7.css・下層ページ・共通フッターは変えない）2026-11-03 NEXT04
   1 ヒーロー：絵を主役のまま先に見せる。絵の表示から約 1 秒は、文字も文字の背景も載せない。その後、短いコピーが 16px 下から減速しながら柔らかく現れる。
     上部のロゴ・ナビ・相談ボタンは最初から使える（隠さない・動かさない）。跳ね・回転・大きな拡大・繰り返しの揺れはなし。
     html.top-hold／top-show は JS が動いた時だけ付く。JS 無効・動き低減では最初から完成状態。JS が途中で止まっても、下の CSS だけの安全策で 3.4 秒後に出る。
   2 余白：章の間＞見出しとまとまりの間＞写真と本文・本文とボタンの間、の段階を付ける（一律の大きな空白にしない）。PC・タブレット・スマホで別の値。
   3 下部の出現演出は目的別の入口 4 枚の絵だけ（読みもの・代表事例の写真は動かさない）。 */

/* 1 ヒーロー */
@keyframes topSafeBox{to{opacity:1}}
@keyframes topSafeLine{to{opacity:1;transform:none}}
@keyframes topSafeCue{to{opacity:1;visibility:visible}}
html.top-hold body.page-top .hero .hero-copy{opacity:0;animation:topSafeBox 0s linear 3.4s forwards}
html.top-hold body.page-top .hero .hero-copy>*{opacity:0;transform:translate3d(0,16px,0);animation:topSafeLine 0s linear 3.4s forwards}
html.top-hold body.page-top .hero .scroll-cue{opacity:0;visibility:hidden;animation:topSafeCue 0s linear 3.4s forwards}
html.top-show body.page-top .hero .hero-copy{opacity:1;transition:opacity .7s cubic-bezier(.22,.61,.36,1)}
html.top-show body.page-top .hero .hero-copy>*{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.22,.61,.36,1),transform 1s cubic-bezier(.22,.61,.36,1)}
html.top-show body.page-top .hero .hero-copy>:nth-child(2){transition-delay:.12s}
html.top-show body.page-top .hero .hero-copy>:nth-child(3){transition-delay:.24s}
html.top-show body.page-top .hero .scroll-cue{opacity:1;visibility:visible;transition:opacity .8s ease 1.5s,visibility 0s linear 1.5s}
/* PC：コピーの背景（r7 の横向きの淡い帯）の上端が硬い横線に見えないよう、上の 56px（文字より上の余白部分）だけを透明からぼかす */
@media (min-width:641px){body.page-top .hero .hero-copy::before{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 56px);mask-image:linear-gradient(180deg,transparent 0,#000 56px)}}

/* 絵が読めない時：ブラウザが出す代替文字（alt）がヘッダーの文字に重ならないよう、画面上だけ透明にする（読み上げの alt はそのまま） */
body.page-top .hero .hero-fig img{color:transparent}

/* 行の落ち方：文言は変えず、見出しは行の長さをそろえ（balance）、段落は最後の行に 1〜2 文字だけ残らないようにする（pretty）。本文（main）だけ。対応していないブラウザでは今までどおり */
body.page-top main h2,body.page-top main h3,body.page-top .story-card .phrase,body.page-top .case-big .meta{text-wrap:balance}
body.page-top main p:not(.meta),body.page-top main dd,body.page-top .story-card .sub{text-wrap:pretty}
/* 並んだ文字リンク（すぐに〜・そのほかの工事・ほかの事例）は 1 つずつ塊で折り返す。リンクが行の途中で割れて押しにくくならないように（SP・文字 150% で見つかった） */
body.page-top .quick a,body.page-top .others a,body.page-top .more-cases a{display:inline-block;max-width:100%}

/* 3 目的別の入口の絵だけ：見えたら 12px 上がりながら、同じ減速の曲線で現れる（右の列は 0.1 秒あと）。安全策は r7 と同じ（4 秒後には必ず表示） */
html.rv-on body.page-top .story-card img.rv{transform:translate3d(0,12px,0);transition:opacity .9s cubic-bezier(.22,.61,.36,1),transform .9s cubic-bezier(.22,.61,.36,1)}
html.rv-on body.page-top .story-card img.rv.in{transform:none}
html.rv-on body.page-top .story-card:nth-child(even) img.rv{transition-delay:.1s}

@media (prefers-reduced-motion:reduce){
 html.top-hold body.page-top .hero .hero-copy,html.top-hold body.page-top .hero .hero-copy>*,html.top-hold body.page-top .hero .scroll-cue{opacity:1;transform:none;visibility:visible;animation:none}
 html.top-show body.page-top .hero .hero-copy,html.top-show body.page-top .hero .hero-copy>*,html.top-show body.page-top .hero .scroll-cue{transition:none}
 html.rv-on body.page-top .story-card img.rv{opacity:1;transform:none;transition:none}
}

/* 2 余白（PC）：章 112〜120px ／ 見出しとまとまり 56px ／ 入口どうし 72px ／ 写真と本文 22px ／ 本文とボタン・リンク 14〜28px */
body.page-top section.sec{padding:112px 0}
body.page-top #choose{padding-top:120px}
body.page-top .sec-head{margin-bottom:56px}
body.page-top .sec-head h2{margin-bottom:18px}
body.page-top .quick{margin-top:20px}
body.page-top .stories{gap:72px 48px;margin-top:56px}
body.page-top .story-card{gap:22px}
body.page-top .story-card .phrase{margin-bottom:10px}
body.page-top .story-card .sub{margin-bottom:14px}
body.page-top .others{margin-top:72px}
body.page-top .groups{gap:44px}
body.page-top .group img{margin-bottom:22px}
body.page-top .group .phrase{margin-bottom:14px}
body.page-top .case-big{gap:48px;margin-bottom:44px}
body.page-top .case-big .meta{margin-bottom:10px}
body.page-top .case-big h3{margin-bottom:14px}
body.page-top .case-big p{margin-bottom:26px}
body.page-top .more-cases{margin-top:44px}
body.page-top .consult-top{gap:72px}
body.page-top .consult-top h2{margin-bottom:20px}
body.page-top .four{margin-bottom:24px}
body.page-top .cta-row{margin-top:28px}
body.page-top .contact-dl{margin-top:28px}
body.page-top .flow{padding:32px 34px}

/* タブレット（〜980px） */
@media (max-width:980px){
 body.page-top section.sec{padding:96px 0}
 body.page-top #choose{padding-top:104px}
 body.page-top .sec-head{margin-bottom:48px}
 body.page-top .stories{gap:56px 32px;margin-top:48px}
 body.page-top .groups{gap:44px 32px}
 body.page-top .case-big{gap:36px}
 body.page-top .consult-top{gap:48px}
}

/* スマホ（〜640px）：章 72〜80px ／ 見出しとまとまり 40〜44px ／ 入口どうし 52px ／ 写真と本文 18px（代表事例の大きな写真の下は r7 と同じ 32px）／ 本文とボタン 20〜24px */
@media (max-width:640px){
 body.page-top section.sec{padding:72px 0}
 body.page-top #choose{padding-top:80px}
 body.page-top .sec-head{margin-bottom:40px}
 body.page-top .sec-head h2{margin-bottom:14px}
 body.page-top .quick{margin-top:16px}
 body.page-top .stories{gap:52px;margin-top:44px}
 body.page-top .story-card{gap:18px}
 body.page-top .story-card img{aspect-ratio:3/2}  /* r9：入口の絵（3:2）を SP でも切らずに見せる（r7.css の SP は 4:3 で左右を切っていた） */
 body.page-top .story-card .sub{margin-bottom:10px}
 body.page-top .others{margin-top:52px}
 body.page-top .groups{gap:52px}
 body.page-top .group img{margin-bottom:18px}
 body.page-top .case-big{gap:32px;margin-bottom:36px}
 body.page-top .case-big h3{margin-bottom:12px}
 body.page-top .case-big p{margin-bottom:22px}
 body.page-top .more-cases{margin-top:36px}
 body.page-top .consult-top{gap:44px}
 body.page-top .four{margin-bottom:20px}
 body.page-top .cta-row{margin-top:24px}
 body.page-top .contact-dl{margin-top:24px}
 body.page-top .flow{padding:24px 22px}
}