/*==================================================
上へふわっ　.fadeUpTrigger
===================================*/

.fadeUp{
	animation-name:fadeUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
	  transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateY(0);
	  }
	}
	
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.fadeUpTrigger{
		opacity: 0;
	}


/*==================================================
右から左　.fadeIn_rTrigger
===================================*/

	.fadeIn_r {

		/* animation: fadeIn_r 5s ease 2s 1 normal forwards; */

		animation-name:fadeIn_rAnime;
		animation-duration:1.5s;
		animation-fill-mode:forwards;
		opacity:0;

		}
	   
	  @keyframes fadeIn_rAnime {
		from {
		  opacity: 0;
		  transform: translateX(100px);
		}
		to {
		  opacity: 1;
		  transform: translateX(0);
		}
	  }

	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.fadeIn_rTrigger{
		opacity: 0;
	}

/*==================================================
左から右　.fadeIn_lTrigger
===================================*/

.fadeIn_l {

	/* animation: fadeIn_r 5s ease 2s 1 normal forwards; */

	animation-name:fadeIn_lAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
  }
   
  @keyframes fadeIn_lAnime {
	from {
	  opacity: 0;
	  transform: translateX(-200px);
	}
	to {
	  opacity: 1;
	  transform: translateX(0);
	}
  }

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeIn_lTrigger{
	opacity: 0;
}

/*==================================================
ズームアップ　.zoomUpTrigger
===================================*/

.zoomUp{
	animation-name:zoomUpAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes zoomUpAnime{
	  from {
		opacity: 0;
		transform: scale(0, 0);
	  }
	
	  to {
		opacity: 1;
		transform: scale(1, 1);
	  }
	}
	
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.zoomUpTrigger{
		opacity: 0;
	}