/* フェードイン */
.js-observe.fade-in {
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
}
.js-observe.is-show.fade-in {
    transition-duration: 1.2s;
    transition-delay: 200ms;
    opacity: 1;
}

/* フェードアップ */
.js-observe.fade-up {
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    transform: translateY(40px);
}
.js-observe.is-show.fade-up {
    transition-duration: 1.2s;
    transition-delay: 200ms;
    opacity: 1;
    transform: translateY(0);
}

/* 左へフェード */
.js-observe.fade-left {
    transition-duration: 0s;
    transition-timing-function: ease-out;
    opacity: 0;
    transform: translateX(40px);
}
.js-observe.is-show.fade-left {
    transition-duration: 1.2s;
    transition-delay: 200ms;
    opacity: 1;
    transform: translateX(0);
}

/* 遅延 */
.js-observe.is-show.delay-200 {
    transition-delay: calc(200ms + 200ms);
}
.js-observe.is-show.delay-400 {
    transition-delay: calc(200ms + 400ms);
}
.js-observe.is-show.delay-600 {
    transition-delay: calc(200ms + 600ms);
}
.js-observe.is-show.delay-800 {
    transition-delay: calc(200ms + 800ms);
}
.js-observe.is-show.delay-1000 {
    transition-delay: calc(200ms + 1000ms);
}
.js-observe.is-show.delay-1200 {
    transition-delay: calc(200ms + 1200ms);
}
.js-observe.is-show.delay-1400 {
    transition-delay: calc(100ms + 1400ms);
}
.js-observe.is-show.delay-1600 {
    transition-delay: calc(100ms + 1600ms);
}
.js-observe.is-show.delay-1800 {
    transition-delay: calc(100ms + 1800ms);
}
.js-observe.is-show.delay-20400 {
    transition-delay: calc(100ms + 2000ms);
}

/* スマホはディレイ無効 */
@media (max-width: 600px) {
  .js-observe.is-show.delay-200,
  .js-observe.is-show.delay-400,
  .js-observe.is-show.delay-600,
  .js-observe.is-show.delay-800,
  .js-observe.is-show.delay-1000,
  .js-observe.is-show.delay-1200,
  .js-observe.is-show.delay-1400 {
    transition-delay: 200ms;
  }
}