/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
	filter: blur(10px);
	transform: scale(1.02);
  }

  to {
	filter: blur(0);
	transform: scale(1);
  }
}
/* fadeUp */

.fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeUpAnime{
      from {
      opacity: 0;
      filter: blur(10px); /* ぼかしから出現 */
      transform: scale(1.02) translateY(100px);
      }
    
      to {
      opacity: 1;
      filter: blur(0); /* ぼかしから出現 */
	  transform: scale(1) translateY(0);
      }
    }

/* 左から */

.fadeLeft{
    animation-name:fadeLeftAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeLeftAnime{
      from {
      opacity: 0;
      filter: blur(10px); /* ぼかしから出現 */
      transform: translateX(-100px);
      }
    
      to {
      opacity: 1;
      filter: blur(0); /* ぼかしから出現 */
      transform: translateX(0);
      }
    }

/* 右から */

.fadeRight{
    animation-name:fadeRightAnime;
    animation-duration:1.5s;
    animation-fill-mode:forwards;
    opacity:0;
    }
    
    @keyframes fadeRightAnime{
      from {
      opacity: 0;
      filter: blur(10px); /* ぼかしから出現 */
      transform: scale(1.02) translateX(100px);
      }
    
      to {
      opacity: 1;
      filter: blur(0); /* ぼかしから出現 */
      transform: scale(1) translateX(0);
      }
    }


    /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.fadeUp,
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}