@charset "utf-8";


/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(200px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-200px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-200px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:2s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(200px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

@media screen and (max-width: 640px) {

    /* 下から */

    .fadeUp{
        animation-duration:1.5s;
        }

    @keyframes fadeUpAnime{
        from {
          opacity: 0;
        transform: translateY(100px);
        }
      
        to {
          opacity: 1;
        transform: translateY(0);
        }
      }
      
      /* 上から */
      
      .fadeDown{
      animation-duration:1.5s;
      }
      
      @keyframes fadeDownAnime{
        from {
          opacity: 0;
        transform: translateY(-100px);
        }
      
        to {
          opacity: 1;
        transform: translateY(0);
        }
      }
      
      /* 左から */
      
      .fadeLeft{
      animation-name:fadeLeftAnime;
      animation-duration:1.5s;
      animation-fill-mode:forwards;
      opacity:0;
      }
      
      @keyframes fadeLeftAnime{
        from {
          opacity: 0;
        transform: translateX(-100px);
        }
      
        to {
          opacity: 1;
        transform: translateX(0);
        }
      }
      
      /* 右から */
      
      .fadeRight{
      animation-name:fadeRightAnime;
      animation-duration:1.5s;
      animation-fill-mode:forwards;
      opacity:0;
      }
      
      @keyframes fadeRightAnime{
        from {
          opacity: 0;
        transform: translateX(100px);
        }
      
        to {
          opacity: 1;
        transform: translateX(0);
        }
      }
      
}