@charset "utf-8";





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

---------------------------------------------------------------------------*/

/*１枚目*/

@keyframes slide1 {

	0% {opacity: 0;}

	10% {opacity: 1;}

	33% {opacity: 1;}

	43% {opacity: 0;}

	100% {opacity: 0;}

}

/*２枚目*/

@keyframes slide2 {

	0% {opacity: 0;}

	33% {opacity: 0;}

	43% {opacity: 1;}

	66% {opacity: 1;}

	76% {opacity: 0;}

	100% {opacity: 0;}

}

/*３枚目*/

@keyframes slide3 {

	0% {opacity: 0;}

	66% {opacity: 0;}

	76% {opacity: 1;}

	99% {opacity: 1;}

	100% {opacity: 0;}

}



/*画像ブロック*/

#mainimg {

	clear: left;

	width: 100%;

	position: relative;

	margin-bottom: 30px;

	border-radius: 10px;

	-webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);	/*影の設定。右へ、下へ、ぼかし幅。rgbaは色設定で0,0,0は黒。0.2が透明度。*/

	box-shadow: 1px 1px 4px rgba(0,0,0,0.2);			/*同上*/

}



/*３枚画像の共通設定*/

#slide1,#slide2,#slide3 {

	border-radius: 10px;

	-webkit-animation-duration: 15s;	/*実行する時間。「s」は秒の事。*/

	animation-duration: 15s;			/*同上*/

	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/

	animation-iteration-count:infinite;			/*同上*/

	vertical-align: bottom;

}



/*１枚目*/

#slide1 {

	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/

	animation-name: slide1;				/*同上*/

	position: relative;

	width: 100%;

	height: auto;

}



/*２枚目*/

#slide2 {

	-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;

	left:0px;

	top:0px;

	width: 100%;

	height: auto;

}