@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
0% {opacity: 0; transform: scale(0.9);
}
	30% {opacity: 1;}
	40% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;transform: scale(1);
  }
	
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;transform: scale(0.7);
  }
	30% {opacity: 0;}
	40% {opacity: 0;}
	60% {opacity: 0.8;}
	80% {opacity: 1;}
	100% {opacity:1;transform: scale(1);    
 }
	
}
/*３枚目*/


/*画像ブロック*/
#mainimg {
	clear: left;
	width: 100%;
margin-top:0px;
	margin-bottom: 20px;
	position: relative;
}
#mainimg-s {
	clear: left;
	width: 100%;
	margin-bottom: 20px;
	position: relative;
}
/*３枚画像の共通設定*/
#slide1{
		/*実行する時間。「s」は秒の事。*/
			animation-duration: 10s;	/*同上*/
	-webkit-animation-iteration-count:2;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:2;			/*同上*/
	vertical-align: bottom;
}
#slide2{
		/*実行する時間。「s」は秒の事。*/
			animation-duration: 10s;	/*同上*/
	-webkit-animation-iteration-count:2;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:2;			/*同上*/
	vertical-align: bottom;
}

/*１枚目*/
#slide1 {
	-webkit-animation-name: slide1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide1;				/*同上*/
	position: relative;
	width: auto;
	height: auto;
z-index:30;

}

/*２枚目*/
#slide2 {
	-webkit-animation-name: slide2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: slide2;				/*同上*/
	position: absolute;
	left:0px;
	top:0px;
	width: auto;
	height: auto;
z-index:20;
}

/*３枚目*/