:root {
  /* フェードイン共通設定 */
  --fade-in-duration: 1000ms;
  /* アニメーションの速さ */
  --fade-in-distance: clamp(24px, 3vw, 56px);
  /* 移動距離 */
  --fade-in-delay: 200ms;
  /* 画面内に入ってから開始するまでの時間 */
  --fade-in-trigger-position: 92;
  /* 100＝画面下端、50＝画面中央 */
  --fade-in-easing: cubic-bezier(.22, 1, .36, 1);
}

.js .fade-in-up,
.js .fade-in-left,
.js .fade-in-right {
  opacity: 0;
  transition: opacity var(--fade-in-duration) var(--fade-in-easing) var(--fade-in-delay),
    transform var(--fade-in-duration) var(--fade-in-easing) var(--fade-in-delay);
}

.js .fade-in-up {
  transform: translate3d(0, var(--fade-in-distance), 0);
}

.js .fade-in-left {
  transform: translate3d(calc(var(--fade-in-distance) * -1), 0, 0);
}

.js .fade-in-right {
  transform: translate3d(var(--fade-in-distance), 0, 0);
}

.js .fade-in-up.is-visible,
.js .fade-in-left.is-visible,
.js .fade-in-right.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}