/*-------ANIMATION IMAGE-------*/

.top-page ul li div ul.image {
list-style: none;
display: block;
width: 1150px;
height: 364px;
padding: 0px 0;

}

.top-page ul li div ul.image li {
border: none;
}

.top-page ul li div ul.image li img.base {
width: 100%;
height: 100%;
}

/*-----ANIMATION absolute----*/

.top-page ul li div ul.image li div {
position: absolute;
top: 0px;
left: 0px;
width: 1150px;
height: 340px;
overflow:hidden;

z-index: 90;
}

.top-page ul li div ul.image li div img {
width: 100%;
height: 100%;

}

.top-page ul li div ul.image li div p {
position: absolute;
top: 35px;
left: 30px;
z-index: 91;
font-size: 22px;
font-weight: bold;
color: white;
letter-spacing: 2px;
text-shadow: 1px 1px 4px #444;
}

.top-page ul li div ul.image li div p span {
display: block; position:relative; left: 0; font-size: 14px; line-height:18px; letter-spacing: 0; padding:0;margin: 0; width:350px;
}

/*
fade1,2について
fade2はブラーがかかった画像用
fade1はブラーがかかっていない画像用
*/


.fade1 {
animation: fadeIn1 28s ease 0s infinite normal;
}

@keyframes fadeIn1 {
0%,100% {opacity:1;}
}

.fade2 {
animation: fadeIn2 14s ease 0s forwards;
animation-iteration-count:1;
}
@keyframes fadeIn2 {
    0%,50% { opacity:1;}
    50%,100% { opacity:0;}	
}


.fade3 {
animation: fadeIn3 28s ease 0s infinite normal;
}
@keyframes fadeIn3 {
0%,20% {opacity:0;}
30%,50% {opacity:1;}
60%,100% {opacity:0;}
}

.fade4 {
animation: fadeIn4 28s ease 0s infinite normal;
}
@keyframes fadeIn4 {
0%,40% {opacity:0;}
50%,70% {opacity:1;}
100%,100% {opacity:0;}
}

.fade5 {
animation: fadeIn5 28s ease 0s infinite normal;
}
@keyframes fadeIn5 {
0%,60% {opacity:0;}
70%,90% {opacity:1;}
100%,100% {opacity:0;}
}
.fade6 {
}