@charset "utf-8";
/* CSS Document */
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
フェード
〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

/*--------------------*/
/* 下から上にフェード */
.fade {
  opacity: 0;
  transform: translate(0, 0.5rem);
  /* ぼかし */
  /* filter: blur(0.5rem); */

  /* 左から出てくる */
  &.fade_left {
    transform: translateX(-1rem);
  }

  /* 右から出てくる */
  &.fade_right {
    transform: translateX(1rem);
  }

  /* 発火 */
  &.fade_in {
    opacity: 1;
    transform: translate(0, 0);
    transition: ease-in-out 1000ms;
    /* ぼかし */
    /* filter: blur(0); */

    /*--------------------*/
    /*任意にディレイ*/

    &.fade_delay-01s {
      transition-delay: 0.1s;
    }

    &.fade_delay-02s {
      transition-delay: 0.2s;
    }

    &.fade_delay-03s {
      transition-delay: 0.3s;
    }
    &.fade_delay-04s {
      transition-delay: 0.4s;
    }
    &.fade_delay-05s {
      transition-delay: 0.5s;
    }
    &.fade_delay-06s {
      transition-delay: 0.6s;
    }
    &.fade_delay-07s {
      transition-delay: 0.7s;
    }
    &.fade_delay-08s {
      transition-delay: 0.8s;
    }
    &.fade_delay-09s {
      transition-delay: 0.9s;
    }
    &.fade_delay-10s {
      transition-delay: 1s;
    }
  }
}

/*--------------------*/
/*囲った要素の中で任意にディレイ*/

.fade_block {
  /* 下から上にフェード */
  .fade_block_child {
    opacity: 0;
    transform: translate(0, 0.5rem);

    /* 左から出てくる */
    &.fade_left {
      transform: translateX(-2rem);
    }

    /* 右から出てくる */
    &.fade_right {
      transform: translateX(2rem);
    }
  }

  /* 発火 */
  &.fade_in {
    .fade_block_child {
      opacity: 1;
      transform: translate(0, 0);
      transition: ease-in-out 1000ms;

      /*--------------------*/
      /*任意にディレイ*/

      &.fade_delay-01s {
        transition-delay: 0.1s;
      }

      &.fade_delay-02s {
        transition-delay: 0.2s;
      }

      &.fade_delay-03s {
        transition-delay: 0.3s;
      }
      &.fade_delay-04s {
        transition-delay: 0.4s;
      }
      &.fade_delay-05s {
        transition-delay: 0.5s;
      }
      &.fade_delay-06s {
        transition-delay: 0.6s;
      }
      &.fade_delay-07s {
        transition-delay: 0.7s;
      }
      &.fade_delay-08s {
        transition-delay: 0.8s;
      }
      &.fade_delay-09s {
        transition-delay: 0.9s;
      }
      &.fade_delay-10s {
        transition-delay: 1s;
      }
      &.fade_delay-12s {
        transition-delay: 1.2s;
      }
    }
  }
}

/*--------------------*/
/*横並びを順番にディレイ*/

.fade_delay_wrap {
  .fade_delay_child {
    opacity: 0;
    transform: translate(0, 2rem);
    /* ぼかし */
    /* filter: blur(0.5rem); */
  }

  /* 発火 */
  &.fade_in {
    .fade_delay_child {
      opacity: 1;
      transform: translate(0, 0);
      transition: ease-in-out 1000ms;
      /* ぼかし */
      /* filter: blur(0); */

      /* ディレイ */
      &:nth-of-type(2) {
        transition-delay: 0.1s;
      }

      &:nth-of-type(3) {
        transition-delay: 0.2s;
      }

      &:nth-of-type(4) {
        transition-delay: 0.3s;
      }

      &:nth-of-type(5) {
        transition-delay: 0.4s;
      }

      &:nth-of-type(6) {
        transition-delay: 0.5s;
      }

      &:nth-of-type(7) {
        transition-delay: 0.6s;
      }

      &:nth-of-type(8) {
        transition-delay: 0.7s;
      }

      &:nth-of-type(9) {
        transition-delay: 0.8s;
      }

      &:nth-of-type(10) {
        transition-delay: 0.9s;
      }

      &:nth-of-type(11) {
        transition-delay: 1s;
      }

      &:nth-of-type(12) {
        transition-delay: 1.1s;
      }
    }
  }
}