@charset "utf-8";


/*CSSスライドショー設定
---------------------------------------------------------------------------*/
/*１枚目*/
@keyframes slide1 {
	0% {
		opacity: 0;
	}

	10% {
		opacity: 0;
	}

	14% {
		opacity: 1;
	}

	28% {
		opacity: 1;
	}

	32% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*２枚目*/
@keyframes slide2 {
	0% {
		opacity: 0;
	}

	24% {
		opacity: 0;
	}

	28% {
		opacity: 1;
	}

	42% {
		opacity: 1;
	}

	46% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*３枚目*/
@keyframes slide3 {
	0% {
		opacity: 0;
	}

	38% {
		opacity: 0;
	}

	42% {
		opacity: 1;
	}

	57% {
		opacity: 1;
	}

	61% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*４枚目*/
@keyframes slide4 {
	0% {
		opacity: 0;
	}

	53% {
		opacity: 0;
	}

	57% {
		opacity: 1;
	}

	71% {
		opacity: 1;
	}

	75% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*５枚目*/
@keyframes slide5 {
	0% {
		opacity: 0;
	}

	67% {
		opacity: 0;
	}

	71% {
		opacity: 1;
	}

	85% {
		opacity: 1;
	}

	89% {
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/*６枚目*/
@keyframes slide6 {
	0% {
		opacity: 0;
	}

	81% {
		opacity: 0;
	}

	85% {
		opacity: 1;
	}

	96% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/*mainimg
---------------------------------------------------------------------------*/
#mainimg {
	clear: left;
	width: 100%;
	height: 600px;
	/* PCでの高さ */
	margin: 0 auto;
	position: relative;
	overflow: hidden;
}

.slide1,
.slide2,
.slide3,
.slide4,
.slide5,
.slide6 {
	animation-duration: 35s;
	/*アニメーションを実行する時間。「s」は秒の事。*/
	animation-iteration-count: infinite;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 100%;
	height: 600px;
	object-fit: cover;
	animation-fill-mode: both;
	/*アニメーションの待機中は最初のキーフレームを維持、終了後は最後のキーフレームを維持。*/
	animation-delay: 2s;
	/*出現するタイミング（秒後）*/
}

.slide0 {
	position: relative;
	width: 100%;
	height: 600px;
	z-index: -1;
	object-fit: cover;
}

.slide1 {
	animation-name: slide1;
}

.slide2 {
	animation-name: slide2;
}

.slide3 {
	animation-name: slide3;
}

.slide4 {
	animation-name: slide4;
}

.slide5 {
	animation-name: slide5;
}

.slide6 {
	animation-name: slide6;
}

/* スマホ表示 */
@media screen and (max-width: 800px) {

	#mainimg,
	.slide1,
	.slide2,
	.slide3,
	.slide4,
	.slide5,
	.slide6,
	.slide0 {
		height: 250px;
		/* スマホでの高さ */
	}
}