/**■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
* ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓　　出現関係CSS　　↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■**/


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

/* その場で */
.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;
	}
	
	@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);
	  }
	}
	
	/* 右から */
	
	.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);
	  }
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.__F-I-t,
	.__F-U-t,
	.__F-D-t,
	.__F-L-t,
	.__F-R-t{
		opacity: 0;
	}
	
	/*==================================================
	パタッ
	===================================*/
	
	
	/* 下へ */
	.flipDown{
	animation-name:flipDownAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes flipDownAnime{
	  from {
		transform: perspective(2500px) rotateX(100deg);
	  opacity: 0;
	  }
	
	  to {
		transform: perspective(2500px) rotateX(0);
	  opacity: 1;
	  }
	}
	
	
	/* 左へ */
	.flipLeft{
	animation-name:flipLeftAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	perspective-origin:left center;
	opacity:0;
	}
	
	@keyframes flipLeftAnime{
	  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{
	animation-name:flipLeftTopAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes flipLeftTopAnime{
	  from {
	   transform: translate(-20px,80px) rotate(-15deg);
	  opacity: 0;
	  }
	
	  to {
	   transform: translate(0,0) rotate(0deg);
	  opacity: 1;
	  }
	}
	
	/* 右へ */
	.flipRight{
	animation-name:flipRightAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	perspective-origin:right center;
	opacity:0;
	}
	
	@keyframes flipRightAnime{
	  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{
	animation-name:flipRightTopAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes flipRightTopAnime{
	  from {
	   transform: translate(-20px,80px) rotate(25deg);
	   opacity: 0;
	  }
	
	  to {
	   transform: translate(0,1) rotate(0deg);
	  opacity: 1;
	  }
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.__D-D-t,
	.__D-L-t,
	.__D-LT-t,
	.__D-R-t,
	.__D-RT-t{
		opacity: 0;
	}
	
	/*==================================================
	くるっ
	===================================*/
	
	
	/* X 軸（縦へ） */
	.rotateX{
	  animation-name:rotateXAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
	}
	
	@keyframes rotateXAnime{
	  from{
		transform: rotateX(0);
		opacity: 0;
		}
	  to{
		transform: rotateX(-360deg);
		opacity: 1;
		}
	}
	
	/*　Y軸（横へ） */
	.rotateY{
	  animation-name:rotateYAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
	}
	
	@keyframes rotateYAnime{
	  from{
		transform: rotateY(0);
		opacity: 0;
		}
	  to{
		transform: rotateY(-360deg);
		opacity: 1;
		}
	}
	
	/* Z 軸（左へ） */
	.rotateLeftZ{
	  animation-name:rotateLeftZAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
	}
	
	@keyframes rotateLeftZAnime{
	  from{
		transform: rotateZ(0);
		opacity: 0;
		}
	  to{
		transform: rotateZ(-360deg);
		opacity: 1;
		}
	}
	
	/*　Z 軸（右へ） */
	.rotateRightZ{
	  animation-name:rotateRightZAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
	}
	
	@keyframes rotateRightZAnime{
	  from{
		transform: rotateZ(0);
		opacity: 0;
		}
	  to{
		transform: rotateZ(360deg);
		opacity: 1;
		}
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.__R-X-t,
	.__R-Y-t,
	.__R-Z-t,
	.__R-ZR-t{
		opacity: 0;
	}
	
	/*==================================================
	ボンッ、ヒュッ
	===================================*/
	
	/* 拡大 */
	.zoomIn{
	  animation-name:zoomInAnime;
	  animation-duration:0.5s;
	  animation-fill-mode:forwards;
	}
	
	@keyframes zoomInAnime{
	  from {
	  transform: scale(0.6);
	  opacity: 0;
	  }
	
	  to {
		transform: scale(1);
	  opacity: 1;
	  }
	}
	
	/* 縮小 */
	.zoomOut{
	  animation-name:zoomOutAnime;
	  animation-duration:0.5s;
	  animation-fill-mode:forwards;
	}
	
	@keyframes zoomOutAnime{
	  from {
	  transform: scale(1.2);
	  opacity: 0;
	  }
	
	  to {
		transform:scale(1);
	  opacity: 1;
	  }
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.__Z-I-t,
	.__Z-O-t{
		opacity: 0;
	}
	
	/*==================================================
	じわっ
	===================================*/
	
	/* ぼかしから出現 */
	.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;
	  }
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.__B-t{
		opacity: 0;
	}
	
	/*==================================================
	にゅーん
	===================================*/
	
	/* 滑らかに変形して出現 */
	.smooth{
	  animation-name:smoothAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
	  　transform-origin: left;
	  opacity:0;
	}
	
	@keyframes smoothAnime{
	  from {
	  transform: translate3d(0, 100%, 0) skewY(12deg);
	  opacity:0;
	  }
	
	  to {
	  transform: translate3d(0, 0, 0) skewY(0);
	  opacity:1;
	  }
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	 
	.__S-t{
		opacity: 0;
	}
	
	
	
	
	/*==================================================
	シャッ（背景色が伸びて出現）
	===================================*/
	
	/*背景色が伸びて出現（共通）*/
	.__E_body{
	  animation-name:bgextendAnimeBase;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
	  position: relative;
	  overflow: hidden;/*　はみ出た色要素を隠す　*/
	  opacity:0;
	}
	
	@keyframes bgextendAnimeBase{
	  from {
		opacity:0;
	  }
	
	  to {
		opacity:1;  
	}
	}
	
	/*中の要素*/
	.bgappear{
	  animation-name:bgextendAnimeSecond;
	  animation-duration:1s;
	  animation-delay: 0.6s;
	  animation-fill-mode:forwards;
	  opacity: 0;
	}
	
	@keyframes bgextendAnimeSecond{
	  0% {
	  opacity: 0;
	  }
	  100% {
	  opacity: 1;
	}
	}
	
	/*左から*/
	.bgLRextend::before{
	  animation-name:bgLRextendAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #666;/*伸びる背景色の設定*/
	}
	@keyframes bgLRextendAnime{
	  0% {
		transform-origin:left;
		transform:scaleX(0);
	  }
	  50% {
		transform-origin:left;
		transform:scaleX(1);
	  }
	  50.001% {
		transform-origin:right;
	  }
	  100% {
		transform-origin:right;
		transform:scaleX(0);
	  }
	}
	
	/*右から*/
	.bgRLextend::before{
	  animation-name:bgRLextendAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #666;/*伸びる背景色の設定*/
	}
	@keyframes bgRLextendAnime{
	  0% {
		transform-origin:right;
		transform:scaleX(0);
	  }
	  50% {
		transform-origin:right;
		transform:scaleX(1);
	  }
	  50.001% {
		transform-origin:left;
	  }
	  100% {
		transform-origin:left;
		transform:scaleX(0);
	  }
	}
	
	/*下から*/
	.bgDUextend::before{
	  animation-name:bgDUextendAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #666;/*伸びる背景色の設定*/
	}
	@keyframes bgDUextendAnime{
	  0% {
		transform-origin:bottom;
		transform:scaleY(0);
	  }
	  50% {
		transform-origin:bottom;
		transform:scaleY(1);
	  }
	  50.001% {
		transform-origin:top;
	  }
	  100% {
		transform-origin:top;
		transform:scaleY(0);
	  }
	}
	
	/*上から*/
	.bgUDextend::before{
	  animation-name:bgUDextendAnime;
	  animation-duration:1s;
	  animation-fill-mode:forwards;
		content: "";
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #666;/*伸びる背景色の設定*/
	}
	@keyframes bgUDextendAnime{
	  0% {
		transform-origin:top;
		transform:scaleY(0);
	  }
	  50% {
		transform-origin:top;
		transform:scaleY(1);
	  }
	  50.001% {
		transform-origin:bottom;
	  }
	  100% {
		transform-origin:bottom;
		transform:scaleY(0);
	  }
	}
	
	/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
	.__E-LR-t,
	.__E-RL-t,
	.__E-DU-t,
	.__E-UD-t,
	.__E-app-t{
		opacity: 0;
	}
	
	

	
	/*==================================================
	アニメーション設定
	===================================*/
	
	/* アニメーションの回数を決めるCSS*/
	
	.count2{  
	  animation-iteration-count: 2;/*この数字を必要回数分に変更*/
	}
	
	.countinfinite{  
	  animation-iteration-count: infinite;/*無限ループ*/
	}
	
	/* アニメーションスタートの遅延時間を決めるCSS*/
	
	.delay-time05{  
	  animation-delay: 0.5s;
	}
	
	.delay-time1{  
	  animation-delay: 1s;
	}
	
	.delay-time15{  
	  animation-delay: 1.5s;
	}
	
	.delay-time2{  
	  animation-delay: 2s;
	}
	
	.delay-time25{  
	  animation-delay: 2.5s;
	}
	
	/* アニメーション自体が変化する時間を決めるCSS*/
	
	.change-time05{  
	  animation-duration: 0.5s;
	}
	
	.change-time1{  
	  animation-duration: 1s;
	}
	
	.change-time15{  
	  animation-duration: 1.5s;
	}
	
	.change-time2{  
	  animation-duration: 2s;
	}
	
	.change-time25{  
	  animation-duration: 2.5s;
	}