/*アニメさせたい全ての要素にこのクラスをつけてください*/
.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.2s;
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:0.8s;
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);
  }
}

/* anime_tateyure */
.anime_tateyure{
  animation: anime_tateyure 2s ease-in-out infinite;
}
@keyframes anime_tateyure{
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
  100% {
    transform: translateY(0);
  }
}


.anime_rotate-loop {
  animation: anime_rotate-loop 5s ease-in-out infinite;
}
@keyframes anime_rotate-loop {
  0% {
    transform: rotate(0deg);
  }
  75% {
    transform: rotate(0deg);
  }
  85% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}