#CrossFade {
	height: 100vh;
	position:relative;
	overflow:hidden;
	z-index:10;
}
#CrossFade ul{
	height: 100vh;
	overflow:hidden;
}
#CrossFade ul:after{
	content:"";
	position:absolute;
	width:100%;
	height: 100vh;
	background:url(../img/slide/visual.png) no-repeat center center;
	background-size:cover;
	animation: CrossFade_first 12s ease forwards;
	z-index:-1;
	overflow:hidden;
}
#CrossFade ul li {
	position:absolute;
	left:100%;
	width: 100%;
	min-height: 100%;
	height: 89vh;
	backface-visibility: hidden;
	opacity: 0;
	transform: scale(1.2);
	animation: CrossFade 24s ease infinite;
	animation-delay:6s;
	background-repwat:no-repeat;
	background-position:center center;
	background-size:cover;
	transition:all 0.3s linear;
}
#CrossFade ul li:nth-child(3){
	animation-delay: 12s;
}
#CrossFade ul li:nth-child(4){
	animation-delay: 18s;
}
#CrossFade ul li:nth-child(1){
	animation-delay: 24s;
}
#CrossFade ul li:hover{
	transition:all 0.3s linear;
}
 
 /*エフェクト*/
@keyframes CrossFade_first {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes CrossFade {
  0% {
	left:100%;
    opacity: 100;
    transform: scale(1.2);
	z-index:100;
	background-position:left -600px center;
  }
  3% {
	 left:0;
    opacity: 100;
    transform: scale(1.2);
	z-index:100;
	background-position:left center;
  }
  25% {
	 left:0;
    opacity: 100;
	z-index:100;
	background-position:left center;
  }
  28% {
	 left:0;
    opacity: 100;
	z-index:0;
	background-position:left -100px center;
  }
  40% {
	 left:0;
    opacity: 0;
    transform: scale(1.0);
	z-index:0;
	background-position:left -100px center;
  }
  98% {
	 left:0;
    opacity: 0;
    transform: scale(1.0);
	z-index:0;
	background-position:left -600px center;
  }
  100% {
	 left:100%;
    opacity: 100;
    transform: scale(1.0);
	z-index:99;
	background-position:left -600px center;
  }
}