@charset "utf-8";
body {overflow-x: hidden;}
@keyframes slide1 {
	0% {left: 110%;}
	3% {left: 0%;}
	20% {left: 0%;}
	23% {left: -110%;}
	100% {left: -110%;}
}
@keyframes slide2 {
	0% {left: 110%;}
	23% {left: 110%;}
	26% {left: 0%;}
	43% {left: 0%;}
	46% {left: -110%;}
	100% {left: -110%;}
}
@keyframes slide3 {
	0% {left: 110%;}
	46% {left: 110%;}
	49% {left: 0%;}
	66% {left: 0%;}
	69% {left: -110%;}
	100% {left: -110%;}
}
@keyframes slide4 {
	0% {left: 110%;}
	69% {left: 110%;}
	72% {left: 0%;}
	89% {left: 0%;}
	92% {left: -110%;}
	100% {left: -110%;}
}

#mainimg {
	clear: left;
	position: relative;
    width: 100%;
	height: 600px;
	background: #162987 ;
	overflow: hidden;
}
.slide1,.slide2,.slide3,.slide4 {
	position: absolute;left:0px;top:0px;width:100%;height:100%;
	animation-duration: 15s;
	animation-iteration-count:infinite;
	animation-delay: 0s;
	animation-fill-mode: forwards;
	transition: 0.4s;
}
#mainimg span {
	position: absolute;z-index: 1;
	left: 0px;
	bottom: 0px;
	width: 25%;
	padding: 10px 5% !important;
	background: #000;
	background: rgba(0,0,0,0.8);
	font-size: 20px;
	font-family: Meiryo;
	font-weight: bold;
	color: #FAEE00;
}

.slide1 {
	background: url(../images/watakon_2.png) no-repeat center center/cover;
	animation-name: slide1;
}
.slide1:hover {
	background: url(../images/watakon_2.png) no-repeat center center/cover;
}
.slide2 {
	background: url(../images/sabikui_1.png) no-repeat center center/cover;
	animation-name: slide2;
}
.slide2:hover {
	background: url(../images/sabikui_1.png) no-repeat center center/cover;
}
.slide3 {
	background: url(../images/gloomy_bear_1.png) no-repeat center center/cover;
	animation-name: slide3;
}
.slide3:hover {
	background: url(../images/gloomy_bear_1.png) no-repeat center center/cover;
}
.slide4 {
	background: url(../images/overdress_2.png) no-repeat center center/cover;
	animation-name: slide4;
}
.slide4:hover {
	background: url(../images/overdress_2.png) no-repeat center center/cover;
}