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

/*--------------------*/
/* 下から上にフェード */
.fade {
  opacity: 0;
  transform: translate(0, 1rem);
  /* ぼかし */
  /* 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 700ms;
    /* ぼかし */
    /* filter: blur(0); */
  }
}

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

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

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

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

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

      &.fade_child-02 {
        transition-delay: 0.3s;
      }

      &.fade_child-03 {
        transition-delay: 0.6s;
      }

      &.fade_child-04 {
        transition-delay: 0.9s;
      }

      &.fade_child-05 {
        transition-delay: 1.2s;
      }

      &.fade_child-06 {
        transition-delay: 1.5s;
      }

      &.fade_child-07 {
        transition-delay: 1.8s;
      }

      &.fade_child-08 {
        transition-delay: 2.1s;
      }

      &.fade_child-09 {
        transition-delay: 2.4s;
      }

      &.fade_child-10 {
        transition-delay: 2.7s;
      }
    }
  }
}

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

.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 700ms;
      /* ぼかし */
      /* 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;
      }
    }
  }
}