/* ==========================================================
   スクロールで文字や写真を表示する（トップページと物件ページ v2 で共通。js/reveal.js と組み合わせる）
   参考: https://ginger.sakatashop.jp/ を控えめにしたもの
   [data-reveal] の要素は、画面の下から 10% のところまで入ったら1回だけ現れる（js/reveal.js が .is-visible を付ける）
   最初に隠すのは、JS が動くとき（header-top.php・header-lp.php が html の no-js を js に替える）だけ
   文字・表・ボタン: 24px 下から 1.2秒かけて浮き上がる。止まる直前にゆっくり落ち着く曲線は、参考サイトと同じ cubic-bezier(.4,.4,0,1)
   写真（data-reveal="fade"）: 動かさずに、文字より 0.2秒遅れて 1.4秒で現れる
   同じタイミングで入った要素は、上から順に 0.12秒ずつ遅らせる（--reveal-i は JS が付ける）
   参考サイトの 1.5秒・遅れ 0.5秒・30px より短く小さくし、ヒーローの黒い幕や揺れる飾りは入れない
   枠線のあるまとまり（アフターケアの3つの説明など）は、線が一緒に動くよう、まとまりごとに付ける
   ========================================================== */
.js [data-reveal]{opacity:0;transform:translate3d(0,24px,0);transition:opacity 1.2s cubic-bezier(.4,.4,0,1) calc(var(--reveal-i,0) * .12s),transform 1.2s cubic-bezier(.4,.4,0,1) calc(var(--reveal-i,0) * .12s)}
.js [data-reveal="fade"]{transform:none;transition:opacity 1.4s cubic-bezier(.4,.4,0,1) calc(.2s + var(--reveal-i,0) * .12s)}
.js [data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1;transform:none;transition:none}
}