/*アニメさせたい全ての要素にこのクラスをつけてください*/
.animateRoot{
	opacity: 0;
}
/*汎用パララックスアニメーション*/
.fadeAndZoom{
animation-name:fadeAndZoom;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeAndZoom{
  from {
    opacity: 0;
  	transform: scale(0.5, 0.5);
  }
  to {
    opacity: 1;
  	transform: scale(1, 1);
  }
}

.fadeUp{
animation-name:fadeUp;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUp{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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

.fadeDown{
	animation-name:fadeDown;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeDown{
	  from {
		opacity: 0;
	  transform: translateY(-100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}

.fadeRight{
animation-name:fadeRight;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRight{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

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

.fadeLeft{
animation-name:fadeLeft;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeft{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

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

/* slow1 */
.fadeAndZoom_slow1{
animation-name:fadeAndZoom_slow1;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeAndZoom_slow1{
  from {
    opacity: 0;
  	transform: scale(0.5, 0.5);
  }
  to {
    opacity: 1;
  	transform: scale(1, 1);
  }
}

.fadeUp_slow1{
animation-name:fadeUp_slow1;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUp_slow1{
  from {
    opacity: 0;
    transform: translateY(75px);
    filter: blur(10px);
  }

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

.fadeDown_slow1{
	animation-name:fadeDown_slow1;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	@keyframes fadeDown_slow1{
	  from {
		opacity: 0;
	  transform: translateY(-75px);
    filter: blur(10px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
    filter: blur(0);
	  }
	}

.fadeRight_slow1{
animation-name:fadeRight_slow1;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRight_slow1{
  from {
    opacity: 0;
    transform: translateX(-75px);
    filter: blur(10px);
  }

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

.fadeLeft_slow1{
animation-name:fadeLeft_slow1;
animation-duration:1.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeft_slow1{
  from {
    opacity: 0;
    transform: translateX(75px);
    filter: blur(10px);
  }

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