/* スクロールフェードイン */
.js-fadein {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition:
    opacity 0.8s ease,
    visibility 0.8s ease,
    transform 0.8s ease;
  will-change: opacity, transform;
}

.js-fadein.is-inview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 下から */
.js-fadein-up {
  transform: translateY(40px);
}

/* 左から */
.js-fadein-left {
  transform: translateX(-40px);
}

/* 右から */
.js-fadein-right {
  transform: translateX(40px);
}

/* ズーム気味 */
.js-fadein-scale {
  transform: scale(0.96);
}

/* 順番表示用 */
.js-fadein-delay-1 {
  transition-delay: 0.1s;
}

.js-fadein-delay-2 {
  transition-delay: 0.2s;
}

.js-fadein-delay-3 {
  transition-delay: 0.3s;
}

.js-fadein-delay-4 {
  transition-delay: 0.4s;
}

/* JSが無効な場合は非表示になりっぱなしを防ぐ */
.no-js .js-fadein {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* 動きを減らす設定のユーザーにはアニメーションさせない */
@media (prefers-reduced-motion: reduce) {
  .js-fadein {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
  }
}