@charset "utf-8";


/* fadeIn */
.fadeIn{
animation-name: fadeInAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* fadeUp */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

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

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

/* fadeDown */

.fadeDown{
animation-name: fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

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

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

/* fadeLeft */

.fadeLeft{
animation-name: fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

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

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

/* fadeRight */

.fadeRight{
animation-name: fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

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

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


.fadeTrigger,
.fadeUpTrigger,
.fadeDownTrigger,
.fadeLeftTrigger,
.fadeRightTrigger{
	opacity: 0;
}


/* flipUp */
.flipUp{
animation-name: flipUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;

}

@keyframes flipUpAnime{
  from {
    transform: perspective(2500px) rotateX(-100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}

/* flipDown */
.flipDown{
animation-name: flipDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes flipDownAnime{
  from {
    transform: perspective(2500px) rotateX(100deg);
 	opacity: 0;
  }

  to {
    transform: perspective(2500px) rotateX(0);
	opacity: 1;
  }
}


/* flipLeft */
.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
}

@keyframes flipLeft{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}


/* flipLeftTop */
.flipLeftTop{
animation-name: flipLeftTop;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes flipLeftTop{
  from {
   transform: translate(-20px,80px) rotate(-15deg);
 	opacity: 0;
  }

  to {
   transform: translate(0,0) rotate(0deg);
	opacity: 1;
  }
}

/* flipRight */
.flipRight{
animation-name: flipRight;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: right center;
}

@keyframes flipRight{
  from {
   transform: perspective(600px) translate3d(0, 0, 0) rotateY(-30deg);
 	opacity: 0;
  }

  to {
  transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
  opacity: 1;
  }
}

/* flipRightTop */
.flipRightTop{
animation-name: flipRightTop;
animation-duration:0.5s;
animation-fill-mode:forwards;
}

@keyframes flipRightTop{
  from {
   transform: translate(-20px,80px) rotate(25deg);
   opacity: 0;
  }

  to {
   transform: translate(0,1) rotate(0deg);
	opacity: 1;
  }
}


.flipUpTrigger,
.flipDownTrigger,
.flipLeftTrigger,
.flipLeftTopTrigger,
.flipRightTrigger,
.flipRightTopTrigger{
	opacity: 0;
}


/* rotateUp */
.rotateUp{
	animation-name: rotateUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform-origin: center center; 
}

@keyframes rotateUpAnime{
  from {
	transform: rotate3d(1, 0, 0, 0);
 	opacity: 0;
  }

  to {
	transform: rotate3d(1, 0, 0, 360deg);	  
	  opacity: 1;
  }
}

/* rotateDown */
.rotateDown{
	animation-name: rotateUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform-origin: center center; 
}

@keyframes rotateDownAnime{
  from {
	transform: rotate3d(1, 0, 0, 0);
 	opacity: 0;
  }

  to {
	transform: rotate3d(1, 0, 0, -360deg);	  
	  opacity: 1;
  }
}

/* rotateLeftY */
.rotateLeftY{
	animation-name: rotateLeftYAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform-origin: center center; 
}


@keyframes rotateLeftYAnime{
  from {
	transform: rotate3d(0, 1, 0, 360deg);
 	opacity: 0;
  }

  to {
	transform: rotate3d(0, 1, 0, 0);	  
	  opacity: 1;
  }
}

/* rotateLeftZ */
.rotateLeftZ{
	animation-name: rotateLeftZAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform-origin: center center; 
}


@keyframes rotateLeftZAnime{
  from {
	transform: rotate3d(0, 0, 1, 360deg);
 	opacity: 0;
  }

  to {
	transform: rotate3d(0, 0, 1, 0);	  
	  opacity: 1;
  }
}


/* rotateRightY */
.rotateRightY{
	animation-name: rotateRightYAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform-origin: center center; 
}


@keyframes rotateRightYAnime{
  from {
	transform: rotate3d(0, 1, 0, 0);
 	opacity: 0;
  }

  to {
	transform: rotate3d(0, 1, 0, 360deg);
	opacity: 1;
  }
}

/* rotateRightZ */
.rotateRightZ{
	animation-name: rotateRightZAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	transform-origin: center center; 
}


@keyframes rotateRightZAnime{
  from {
	transform: rotate3d(0, 0, 1, 0);
 	opacity: 0;
  }

  to {
	transform: rotate3d(0, 0, 1, 360deg);
	opacity: 1;
  }
}


.rotateUpTrigger,
.rotateDownTrigger,
.rotateLeftYTrigger,
.rotateLeftZTrigger,
.rotateRightYTrigger,
.rotateRightZTrigger{
	opacity: 0;
}


/* zoomIn */
.zoomIn{
	animation-name: zoomInAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomInAnime{
  from {
	transform: scale(1);
 	opacity: 0;
  }

  to {
      transform: translate(0) scale(1.2);
	  opacity: 1;
  }
}

/* zoomOut */
.zoomOut{
	animation-name: zoomOutAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
}

@keyframes zoomOutAnime{
  from {
	transform: scale(1.2);
 	opacity: 0;
  }

  to {
      transform: translate(0) scale(1);
	  opacity: 1;
  }
}

.zoomInTrigger,
.zoomOutTrigger{
	opacity: 0;
}


/* blur */
.blur{
	animation-name: blurAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
}

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

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


.blurTrigger{
	opacity: 0;
}



/* smooth */
.smooth{
	animation-name: smoothAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
  　transform-origin: left;
}

@keyframes smoothAnime{
  from {
  transform: translate3d(0, 100%, 0) skewY(12deg);
 	opacity: 0;
  }

  to {
  transform: translate3d(0, 0, 0) skewY(0);
	 opacity: 1;
  }
}

.smoothTrigger{
	opacity: 0;
}

/*==================================================
アニメーション設定
===================================*/

/* アニメーションの回数を決めるCSS*/

.count2{
-webkit-animation-iteration-count:2;
  animation-iteration-count: 2;
}

.countinfinite{
-webkit-animation-iteration-count:infinite;
  animation-iteration-count: infinite;
}

/* アニメーションスタートの遅延時間を決めるCSS*/

.delay-time02{
-webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.delay-time03{
-webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.delay-time04{
-webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.delay-time05{
-webkit-animation-delay: 0.5s;
  animation-delay: 0.5s;
}

.delay-time06{
-webkit-animation-delay: 0.6s;
  animation-delay: 0.6s;
}

.delay-time07{
  -webkit-animation-delay: 0.7s;
    animation-delay: 0.7s;
  }

/* アニメーション自体が変化する時間を決めるCSS*/

.change-time1{
-webkit-animation-duration:1s;
  animation-duration: 1s;
}

.change-time2{
-webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.change-time3{
-webkit-animation-duration: 3s;
  animation-duration: 3s;
}

.change-time4{
-webkit-animation-duration: 4s;
  animation-duration: 4s;
}

.change-time5{
-webkit-animation-duration: 5s;
  animation-duration: 5s;
}