.js-fadeUp {
    opacity: 0; /* 最初は非表示 */
    transform: translateY(30px); /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
  }
  .js-fadeLeft {
    opacity: 0; /* 最初は非表示 */
    transform: translateX(-30px); /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
  }
  .js-fadeRight {
    opacity: 0; /* 最初は非表示 */
    transform: translateX(30px); /* 下に30pxの位置から */
    transition: opacity .8s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
  }
  /* フォントカラー(初期値) */
  .js-color {
    color: blue; /* 最初は青色 */
    font-size: 15px; /* 最初は15px */
    transition: color .8s, font-size .8s; /* 色の変化を0.8秒かける */
  }
  /* フェードイン(スクロールした後) */
  .js-fadeUp.is-inview {
    opacity: 1; /* 表示領域に入ったら表示 */
    transform: translateY(0); /* 30px上に移動する */
    transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
  }
  .js-fadeLeft.is-inview {
    opacity: 1; /* 表示領域に入ったら表示 */
    transform: translateX(0); /* 30px上に移動する */
    transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
  }
  .js-fadeRight.is-inview {
    opacity: 1; /* 表示領域に入ったら表示 */
    transform: translateX(0); /* 30px上に移動する */
    transition-delay: .5s; /* フェード開始を0.5秒遅らせる */
  }
  /* フォントカラー変更(スクロールした後) */
  .js-color.is-inview {
    color: green; /* 表示領域に入ったら色を変える */
    font-size: 25px; /* 表示領域に入ったら25px */
    transition-delay: .5s; /* 開始を0.5秒遅らせる */
  }