@charset "utf-8";

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

/* ぼかしから出現 */
.blur01{
  animation-name:blurAnime;
  animation-delay: .5s;
  animation-duration:1s;
  animation-fill-mode:forwards;
}

@keyframes blurAnime{
  from {
    filter: blur(10px);
    transform: translate(-10px, -10px);
    opacity: 0;
  }

  to {
  filter: blur(0);
  transform: translate(-0, -0);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blur-trigger01{
    opacity: 0;
	filter: blur(20px);
}

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

@keyframes blurAnime{
  from {
    filter: blur(10px);
    transform: translate(-10px, -10px);
    opacity: 0;
  }

  to {
  filter: blur(0);
  transform: translate(-0, -0);
  opacity: 1;
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.blur-trigger02{
    opacity: 0;
	filter: blur(20px);
}