/* スクロールで区画が「ふわっと」現れる動き（全ページ共通の部品。2026-10-06）
   使い方：現れてほしい区画に class="fiz-fade" を付けるだけ。画面に15%入ると、下から20px浮きながら0.6秒で現れる（1回出たらそのまま）。
   動かす JS は assets/js/fade-in.js（is-visible を付ける）。直すときはこの CSS と JS の2つだけを直す。
   隠すのは「JS が動いている」印（html.js-fade）があるときだけ。印は functions.php が <head> で付ける。
   JS が動かない・読み込みに失敗したときは印が付かない（付いても4秒で外れる）ので、中身は最初から見える。
   :where() で隠す条件の強さを 0 にして、従来の .svc-fade と同じ強さ（クラス1つ）に保っている（部品側の transform 等を上書きしないため） */
.fiz-fade {
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
:where(html.js-fade) .fiz-fade {
  opacity: 0;
  transform: translateY(20px);
}
:where(html.js-fade) .fiz-fade.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動きを減らす設定の人には動かさず、最初から表示する */
@media (prefers-reduced-motion: reduce) {
  .fiz-fade {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}