@charset "UTF-8";

/*-------------------------------------------
HTMLに下記を追加しておく
<div id="slide">
	<div class="slide1"></div>
	<div class="slide2"></div>
	<div class="slide3"></div>
</div>
-------------------------------------------*/



/*全体設定*/
#slide{
	position: relative;
	width:100%;
	height:75vh;   /*外枠の大きさをwidthとheightで好きな大きさにできる*/
	overflow: hidden;   /*内枠の背景画像がはみ出したぶんを非表示にする*/
	margin: 0 auto;
}

@media screen and (max-width: 767px){
	#slide{
		width: 100%;
		height: 200px;
	}
}
/*３枚の画像の共通設定*/
.slide1, .slide2, .slide3, .slide4, .slide5{
	width: 100%;
	height: 100%;
	position: absolute;   /*position: absoluteして、外枠に対して同じ位置で表示されるようにする*/
	right: 0px;
	top: 0px;
	z-index: -1;
	text-indent: -9999px;
}
/*-------------------------------------------
個別設定
同じ時間（好きな長さに設定可能）のanimationをつけていて、それぞれ拡大縮小、透明度の変化をつけることでこのスライドショーが実現できる。
-------------------------------------------*/
/*１枚目画像*/
.slide1 {
	animation: slide1 25s linear infinite;
	background: url(../images/TOP1-1.jpg) no-repeat center center/cover;
}

/*２枚目画像*/
.slide2 {
	animation: slide2 25s linear infinite;
	background: url(../images/TOP1-2.png) no-repeat center center/cover;
}

/*３枚目画像*/
.slide3 {
	animation: slide3 25s linear infinite;
	background: url(../images/TOP1-3.png) no-repeat center center/cover;
}

/*４枚目画像*/
.slide4 {
	animation: slide4 25s linear infinite;
	background: url(../images/TOP1-4.jpg) no-repeat center center/cover;
}

/*５枚目画像*/
.slide5 {
	animation: slide5 25s linear infinite;
	background: url(../images/TOP1-5.png) no-repeat center center/cover;
}



/*スライドショーのキーフレーム設定*/
@keyframes slide1 {
	0%{opacity: 0;}
	10%{opacity: 1;}
	20%{opacity: 1;}
	30%{opacity: 0;}
	40%{opacity: 0;}
	50%{opacity: 0;}
	60%{opacity: 0;}
	70%{opacity: 0;}
	80%{opacity: 0;}
	90%{opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide2 {
	0%{opacity: 0;}
	10%{opacity: 0;}
	20%{opacity: 0;}
	30%{opacity: 1;}
	40%{opacity: 1;}
	50%{opacity: 0;}
	60%{opacity: 0;}
	70%{opacity: 0;}
	80%{opacity: 0;}
	90%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes slide3 {
	0%{opacity: 0;}
	10%{opacity: 0;}
	20%{opacity: 0;}
	30%{opacity: 0;}
	40%{opacity: 0;}
	50%{opacity: 1;}
	60%{opacity: 1;}
	70%{opacity: 0;}
	80%{opacity: 0;}
	90%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes slide4 {
	0%{opacity: 0;}
	10%{opacity: 0;}
	20%{opacity: 0;}
	30%{opacity: 0;}
	40%{opacity: 0;}
	50%{opacity: 0;}
	60%{opacity: 0;}
	70%{opacity: 1;}
	80%{opacity: 1;}
	90%{opacity: 0;}
	100%{opacity: 0;}
}
@keyframes slide5 {
	0%{opacity: 0;}
	10%{opacity: 0;}
	20%{opacity: 0;}
	30%{opacity: 0;}
	40%{opacity: 0;}
	50%{opacity: 0;}
	60%{opacity: 0;}
	70%{opacity: 0;}
	80%{opacity: 0;}
	90%{opacity: 1;}
	100%{opacity: 1;}
}