@charset "utf-8";

/*CSSスライドショー設定（5枚用）
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {opacity: 0;}
	5% {opacity: 1;}
	20% {opacity: 1;}
	25% {opacity: 0;}
	100% {opacity: 0;}
}
/*２枚目*/
@keyframes slide2 {
	0% {opacity: 0;}
	20% {opacity: 0;}
	25% {opacity: 1;}
	40% {opacity: 1;}
	45% {opacity: 0;}
	100% {opacity: 0;}
}
/*３枚目*/
@keyframes slide3 {
	0% {opacity: 0;}
	40% {opacity: 0;}
	45% {opacity: 1;}
	60% {opacity: 1;}
	65% {opacity: 0;}
	100% {opacity: 0;}
}
/*４枚目*/
@keyframes slide4 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	65% {opacity: 1;}
	80% {opacity: 1;}
	85% {opacity: 0;}
	100% {opacity: 0;}
}
/*５枚目*/
@keyframes slide5 {
	0% {opacity: 0;}
	80% {opacity: 0;}
	85% {opacity: 1;}
	100% {opacity: 1;} /* 100%で次の周の1枚目に滑らかに繋がります */
}

/*mainimg
---------------------------------------------------------------------------*/
#mainimg {
	clear: left;
	width: 100%;
	position: relative;
}
/* クラス名に .slide4 と .slide5 を追加しました */
.slide1,.slide2,.slide3,.slide4,.slide5 {
	animation-duration: 20s;	/* 5枚に合わせて全体の時間を20秒に伸ばすとゆったりします（15秒でも可） */
	animation-iteration-count:infinite;
	position: absolute;left:0px;top:0px;width: 100%;height: auto;
	animation-fill-mode: both;
	animation-delay: 2s;		/* ページ読み込み後、2秒経ってからスタート */
}
.slide0 {
	position: relative;width: 100%;height: auto;z-index: -1;
}
.slide1 { animation-name: slide1; }
.slide2 { animation-name: slide2; }
.slide3 { animation-name: slide3; }
.slide4 { animation-name: slide4; }
.slide5 { animation-name: slide5; }