/*==================================================
ふわっ
===================================*/

/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

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

.fadeUp2 {
  animation-name:fadeUpAnime;
  animation-duration:0.4s;
  animation-delay:0.3s;
  animation-fill-mode:forwards;
  opacity:0;
}

.fadeUp3 {
  animation-name:fadeUpAnime;
  animation-duration:0.5s;
  animation-delay:0.8s;
  animation-fill-mode:forwards;
  opacity:0;
}

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

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

/* 上から */

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

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

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

/* 左から */

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

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

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

.fadeLeft2 {
  animation-name:fadeLeftAnime2;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeLeftAnime2 {
  from {
    opacity: 0;
  transform: skewX(-22deg) translateX(-500px);
  }

  to {
    opacity: 1;
  transform: skewX(-22deg) translateX(0);
  }
}

/* 右から */

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

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

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

.fadeRight2 {
  animation-name:fadeRightAnime2;
  animation-duration:0.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

@keyframes fadeRightAnime2 {
  from {
    opacity: 0;
  transform: skewX(-22deg) translateX(500px);
  }

  to {
    opacity: 1;
  transform: skewX(-22deg) translateX(0);
  }
}



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