@charset "UTF-8";
#mainimg {
	display: block;
	position: relative;
}


/*1枚目*/
@keyframes slide0 {
 0% {
opacity: 0;
}
 10% {
opacity: 1;
}
 30% {
opacity: 1;
}
 40% {
opacity: 0;
}
 100% {
opacity: 0;
}
}
/*２枚目*/
@keyframes slide1 {
 0% {
opacity: 0;
}
 30% {
opacity: 0;
}
 40% {
opacity: 1;
}
 60% {
opacity: 1;
}
 70% {
opacity: 0;
}
 100% {
opacity: 0;
}
}
/*３枚目*/
@keyframes slide2 {
 0% {
opacity: 0;
}
 60% {
opacity: 0;
}
 70% {
opacity: 1;
}
 90% {
opacity: 1;
}
 100% {
opacity: 0;
}
}
/*4枚目*/
@keyframes slide3 {
 0% {
opacity: 1;
}
 10% {
opacity: 1;
}
 30% {
opacity: 1;
}
 40% {
opacity: 1;
}
 100% {
opacity: 1;
}
}

/*1枚目*/
@keyframes slide4 {
 0% {
opacity: 0;
}
 10% {
opacity: 1;
}
 30% {
opacity: 1;
}
 40% {
opacity: 0;
}
 100% {
opacity: 0;
}
}
/*２枚目*/
@keyframes slide5 {
 0% {
opacity: 0;
}
 30% {
opacity: 0;
}
 40% {
opacity: 1;
}
 60% {
opacity: 1;
}
 70% {
opacity: 0;
}
 100% {
opacity: 0;
}
}
/*３枚目*/
@keyframes slide6 {
 0% {
opacity: 0;
}
 60% {
opacity: 0;
}
 70% {
opacity: 1;
}
 90% {
opacity: 1;
}
 100% {
opacity: 0;
}
}
/*0枚目*/
@keyframes slide7 {
 0% {
opacity: 1;
}
 10% {
opacity: 1;
}
 30% {
opacity: 1;
}
 40% {
opacity: 1;
}
 100% {
opacity: 1;
}
}
/*３枚画像の共通設定*/
#slide0, #slide1, #slide2, #slide3,#slide4, #slide5, #slide6, #slide7 {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count: infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count: infinite;			/*同上*/
	vertical-align: bottom;
}
/*0枚目*/
#slide0,#slide4 {
	-webkit-animation-name: slide0;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide0;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}
/*1枚目*/
#slide1,#slide5 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: auto;
}
/*２枚目*/
#slide2,#slide6 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: auto;
}
/*３枚目*/
#slide3 {
	-webkit-animation-name: slide3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3;				/*同上*/
	position: absolute;
	top: 0px;
	height: auto;
	z-index: 1;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	bottom: 0px;
	left: 0px;
	right: 0px;
	width: 180px;
}
#slide7 {
	-webkit-animation-name: slide3;
	animation-name: slide3;
	position: absolute;
	top: 0px;
	height: auto;
	z-index: 1;
	margin-top: auto;
	margin-right: auto;
	margin-bottom: auto;
	margin-left: auto;
	bottom: 0px;
	left: 0px;
	right: 0px;
	max-width: 600px;
	width: 100%;
}