/* -------------------------- */
/* --------メインフェード-------- */
/* -------------------------- */

.crossfade li {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
-webkit-animation: anime 20s linear 0s infinite ; /* 画像の枚数プラス10秒 */
-moz-animation: anime 20s linear 0s infinite ;
animation: anime 20s linear 0s infinite ;
}


.crossfade li:nth-child(1) { 
background-image: url(../img/main/main_01.jpg) /* 背景画像を入力して下さい */
}
.crossfade li:nth-child(2) {
background-image: url(../img/main/main_02.jpg);
-webkit-animation-delay: 5s;/* 1枚10秒 */
-moz-animation-delay: 5s;
animation-delay: 5s;
}
.crossfade li:nth-child(3) {
background-image: url(../img/main/main_03.jpg);
-webkit-animation-delay: 10s;/* 1枚10秒 */
-moz-animation-delay: 10s;
animation-delay: 10s;
}
.crossfade li:nth-child(4) {
background-image: url(../img/main/main_04.jpg);
-webkit-animation-delay: 10s;/* 1枚10秒 */
-moz-animation-delay: 10s;
animation-delay: 10s;
}
.crossfade li:nth-child(5) {
background-image: url(../img/main/main_05.jpg);
-webkit-animation-delay: 10s;/* 1枚10秒 */
-moz-animation-delay: 10s;
animation-delay: 10s;
}

/* 背景画像の動き */
@-webkit-keyframes anime { 
0% {-webkit-animation-timing-function: ease-in; opacity: 0;}
10% {opacity: 1;}
40% {-webkit-animation-timing-function: ease-out; opacity: 1;}
50% {opacity: 0;}
100% { opacity:0;}
}

@-moz-keyframes anime { 
0% {-moz-animation-timing-function: ease-in; opacity: 0;}
10% {opacity: 1;}
40% {-moz-animation-timing-function: ease-out;opacity: 1;}
50% {opacity: 0;}
100% { opacity: 0;}
}

@keyframes anime { 
0% {animation-timing-function: ease-in; opacity: 0;}
10% {opacity: 1;}
40% {animation-timing-function: ease-out;opacity: 1;}
50% {opacity: 0;}
100% { opacity: 0;}
}