/**
 * font-ready.css
 * Webフォント読み込み完了前に崩れが目立つ見出し要素だけ軽くフェード前状態にする。
 * html.js クラス配下に限定することで、JS無効環境でコンテンツが消えないようにする。
 */

html.js .js-font-fade {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

html.js.is-fonts-ready .js-font-fade {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .js-font-fade {
    opacity: 1;
    transform: none;
    transition: none;
  }
}