/******************************************************************
順番にふわっ
******************************************************************/
.fadeUp2 {
	animation-name:fadeUpAnime2;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	opacity: 0;
}
	
	@keyframes fadeUpAnime2{
	from {	
		opacity: 0;
		transform: translateY(30px);
	  }
	  to {
		opacity: 1;
		transform: translateY(0);
	  }
	}
	
	/* アニメーションスタートの遅延時間を決めるCSS*/

	.delay-time01{
		animation-delay: 0.3s;
	}
	
	.delay-time02{
		animation-delay: 0.5s;
	}
	
	.delay-time03{
		animation-delay: 0.7s;
	}


/******************************************************************
ふわっ
******************************************************************/
  /* fadeUp */
  .fadeUp{
    animation-name:fadeUpAnime;
    animation-duration:1.0s;
    animation-fill-mode:forwards;
    opacity:0;
  }


  @keyframes fadeUpAnime{
    from {
      opacity: 0;
      transform: translateY(25px);
    }
    
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  

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

  @keyframes fadeDownAnime{
    from {
      opacity: 0;
      transform: translateY(-25px);
    }
    
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  
  
  /* fadeRight */
  .fadeRight{
	animation-name:fadeRightAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeRightAnime{
	  from {
		opacity: 0;
	  transform: translateX(25px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateX(0);
	  }
	}
	

  /* fadeLeft */
  .fadeLeft{
	animation-name:fadeLeftAnime;
	animation-duration:1.0s;
	animation-fill-mode:forwards;
	opacity:0;
	}
	
	@keyframes fadeLeftAnime{
	  from {
		opacity: 0;
	  transform: translateX(-25px);
	  }
	
	  to {
		opacity: 1;
	  transform: translateX(0);
	  }
	}
	

  /* スクロールをしたら出現する要素にはじめに透過0を指定　*/
  .fadeUpTrigger,
  .fadeRightTrigger,
  .fadeLeftTrigger{
	  opacity: 0;
  }
  
  .late_00s{animation-delay: 0.0s;}
  .late_01s{animation-delay: 0.1s;}
  .late_02s{animation-delay: 0.2s;}
  .late_03s{animation-delay: 0.3s;}
  .late_04s{animation-delay: 0.4s;}
  .late_05s{animation-delay: 0.5s;}
  .late_06s{animation-delay: 0.6s;}
  .late_07s{animation-delay: 0.7s;}
  .late_08s{animation-delay: 0.8s;}
  .late_09s{animation-delay: 0.9s;}
  .late_10s{animation-delay: 1.0s;}
  .late_11s{animation-delay: 1.1s;}
  .late_12s{animation-delay: 1.2s;}
  .late_13s{animation-delay: 1.3s;}
  .late_14s{animation-delay: 1.4s;}
  .late_15s{animation-delay: 1.5s;}
  .late_16s{animation-delay: 1.6s;}
  .late_17s{animation-delay: 1.7s;}
  .late_18s{animation-delay: 1.8s;}
  .late_19s{animation-delay: 1.9s;}
  .late_20s{animation-delay: 2.0s;}
  .late_21s{animation-delay: 2.1s;}
  .late_22s{animation-delay: 2.2s;}
  .late_23s{animation-delay: 2.3s;}
  .late_24s{animation-delay: 2.4s;}
  
  .late_25s{animation-delay: 2.5s;}
  .late_26s{animation-delay: 2.6s;}
  .late_27s{animation-delay: 2.7s;}
  .late_28s{animation-delay: 2.8s;}
  .late_29s{animation-delay: 2.9s;}
  .late_30s{animation-delay: 3.0s;}
  .late_31s{animation-delay: 3.1s;}
  .late_32s{animation-delay: 3.2s;}
  .late_33s{animation-delay: 3.3s;}
  .late_34s{animation-delay: 3.4s;}
  .late_35s{animation-delay: 3.5s;}
  .late_37s{animation-delay: 3.7s;}
  .late_38s{animation-delay: 3.8s;}
  .late_39s{animation-delay: 3.9s;}

  .late_40s{animation-delay: 4.0s;}
  .late_41s{animation-delay: 4.1s;}
  .late_42s{animation-delay: 4.2s;}
  .late_43s{animation-delay: 4.3s;}
  .late_44s{animation-delay: 4.4s;}
  .late_45s{animation-delay: 4.5s;}
  .late_46s{animation-delay: 4.6s;}
  .late_47s{animation-delay: 4.7s;}
  .late_48s{animation-delay: 4.8s;}
  .late_49s{animation-delay: 4.9s;}
  
  
  .late_30s{animation-delay: 3.0s;}
  .late_50s{animation-delay: 5.0s;}
  .late_55s{animation-delay: 5.5s;}
  
  .late_60s{animation-delay: 6.0s;}
  .late_65s{animation-delay: 6.5s;}
  


  
/******************************************************************
じわっ
******************************************************************/
.blur{
	animation-name:blurAnime;
	animation-duration:1.5s;
	animation-fill-mode:forwards;
	opacity: 0;
	overflow: hidden;
  }
  
  
  @keyframes blurAnime{
	from {
	filter: blur(10px);
	transform: scale(1.02);
	opacity: 0;
	}
  
	to {
	filter: blur(0);
	transform: scale(1);
	opacity: 1;
	}
  }
   
  .blurTrigger{
	  opacity: 0;
  }

@media only screen and (max-width:768px){

}

/******************************************************************
スライダー
******************************************************************/

.swiper{
  z-index: 0!important;
}

/* スライドの動き等速 */
.swiper-wrapper {
	transition-timing-function: linear!important;
  }
  /* 画像のサイズ調整 */
  .swiper-slide img {
	height: auto;
	width: 100%;
  }
  
  /******************************************************************
１文字づつ
******************************************************************/

.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 2s ease-out forwards; }
@keyframes text_anime_on {
  0% {opacity:0;}
  100% {opacity:1;}
}



/******************************************************************
wave
******************************************************************/

.scroll-infinity_top{
  position: relative;
  margin: 0 0 0 0;
}

.kc_bottom{
  position: absolute!important;
  bottom: 0!important;
  width: 100%;
  z-index: 10;
}

.scroll-infinity_top img{
  vertical-align: bottom;
}



@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
  
  }
  .scroll-infinity__wrap {
    display: flex;
    overflow: hidden;
  }
  .scroll-infinity__list {
    display: flex;
    list-style: none;
    padding: 0 3vw 0 0
  }
  .scroll-infinity__list--left {
    animation: infinity-scroll-left 30s infinite linear 0.5s both;
  }
  .scroll-infinity__item {
    width: calc(100vw);
  }
  .scroll-infinity__item>img {
    width: 100%;
  }


	@keyframes infinity-scroll-right {
    from {
      transform: translateX(-100%);
    }
      to {
      transform: translateX(0%);
    }
    }
    .scroll-infinity__list--right{
      animation :infinity-scroll-right 30s infinite linear 0.5s both;
    }


/* SP */
@media screen and (max-width: 736px) { 
  .scroll-infinity__item {
    width: calc(220vw);
    margin-top: 17px;
  }
}