@charset "utf-8";

/*CSSスライドショー設定
---------------------------------------------------------------------------*/

/*3枚スライドショー設定
---------------------------------------------------------------------------*/

/*1枚目*/
@keyframes slide3_1 {
	0% {opacity: 0;}
	10% {opacity: 1;}
	30% {opacity: 1;}
	40% {opacity: 0;}
	100% {opacity: 0;}
}
/*2枚目*/
@keyframes slide3_2 {
	0% {opacity: 0;}
	30% {opacity: 0;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide3_3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}
/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
	height: auto;
	position: relative;
}
/*３枚画像の共通設定*/
#slide3_1,#slide3_2,#slide3_3 {
	-webkit-animation-duration: 20s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 10s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
}
/*1枚目*/
#slide3_1 {
	-webkit-animation-name: slide3_1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3_1;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}
/*2枚目*/
#slide3_2 {
	-webkit-animation-name: slide3_2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3_2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}
/*3枚目*/
#slide3_3 {
	-webkit-animation-name: slide3_3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide3_3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}


/*5枚スライドショー設定
---------------------------------------------------------------------------*/

/*1枚目*/
@keyframes slide5_1 {
	0% {opacity: 0;}
	5% {opacity: 1;}
	19% {opacity: 1;}
	24% {opacity: 0;}
	100% {opacity: 0;}
}
/*2枚目*/
@keyframes slide5_2 {
	0% {opacity: 0;}
	19% {opacity: 0;}
	24% {opacity: 1;}
	38% {opacity: 1;}
	43% {opacity: 0;}
	100% {opacity: 0;}
}
/*3枚目*/
@keyframes slide5_3 {
	0% {opacity: 0;}
	38% {opacity: 0;}
	43% {opacity: 1;}
	57% {opacity: 1;}
	62% {opacity: 0;}
    100% {opacity: 0;}
}
/*4枚目*/
@keyframes slide5_4 {
	0% {opacity: 0;}
	57% {opacity: 0;}
	62% {opacity: 1;}
	76% {opacity: 1;}
	81% {opacity: 0;}
    100% {opacity: 0;}
}
/*5枚目*/
@keyframes slide5_5 {
	0% {opacity: 0;}
	76% {opacity: 0;}
	81% {opacity: 1;}
	95% {opacity: 1;}
	100% {opacity: 0;}
}
/*5枚画像の共通設定*/
#slide5_1,#slide5_2,#slide5_3, #slide5_4, #slide5_5 {
	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 15s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
}
/*1枚目*/
#slide5_1 {
	-webkit-animation-name: slide5_1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5_1;				/*同上*/
	position: relative;
	width: 100%;
	height: auto;
}
/*2枚目*/
#slide5_2 {
	-webkit-animation-name: slide5_2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5_2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}
/*3枚目*/
#slide5_3 {
	-webkit-animation-name: slide5_3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5_3;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}
/*4枚目*/
#slide5_4 {
	-webkit-animation-name: slide5_4;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5_4;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}
/*5枚目*/
#slide5_5 {
	-webkit-animation-name: slide5_5;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide5_5;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: 100%;
	height: auto;
}