@charset "utf-8";


/*スライドショーのキーフレーム設定
---------------------------------------------------------------------------*/
@keyframes slide1 {
	0% {opacity: 1;}
	25%{opacity: 1;}
	35%{opacity: 0;}
	90% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes slide2 {
	0% {opacity: 0;}
	25% {opacity: 0;}
	35% {opacity: 1;}
	60% {opacity: 1;}
	70% {opacity: 0;}
	100% {opacity: 0;}
}
@keyframes slide3 {
	0% {opacity: 0;}
	60% {opacity: 0;}
	70% {opacity: 1;}
	90% {opacity: 1;}
	100% {opacity: 0;}
}

@keyframes kenburns1 {
	from {transform: scale(1.03) translate3d(-2.5%, 0, 0);}
	to {transform: scale(1.17) translate3d(2.5%, -1%, 0);}
}
@keyframes kenburns2 {
	from {transform: scale(1.04) translate3d(2.5%, 1%, 0);}
	to {transform: scale(1.16) translate3d(-2.5%, -1%, 0);}
}
@keyframes kenburns3 {
	from {transform: scale(1.03) translate3d(0, 2%, 0);}
	to {transform: scale(1.16) translate3d(1.2%, -2%, 0);}
}

/*３枚の画像の共通設定*/
.slide1,.slide2,.slide3 {
	width: 100%;height: 100%;
	position: absolute;right: 0px;top: 0px;z-index: -1;
	text-indent: -9999px;
	will-change: opacity, transform;
}

/*１枚目画像*/
.slide1 {
	transform-origin: 35% 50%;
	animation: slide1 18s linear infinite, opa1 1s linear, kenburns1 8.5s cubic-bezier(.37, 0, .63, 1) infinite alternate;
	background: url(../images/KBC02010.jpg) no-repeat center center/cover;
}

/*２枚目画像*/
.slide2 {
	transform-origin: 65% 50%;
	animation: slide2 18s linear infinite, kenburns2 9s cubic-bezier(.37, 0, .63, 1) infinite alternate;
	background: url(../images/KBC02097.jpg) no-repeat center center/cover;
}

/*３枚目画像*/
.slide3 {
	transform-origin: 50% 60%;
	animation: slide3 18s linear infinite, kenburns3 8.5s cubic-bezier(.37, 0, .63, 1) infinite alternate;
	background: url(../images/KBC01907.jpg) no-repeat center center/cover;
}
@media (prefers-reduced-motion: reduce) {
	.slide1 {animation: slide1 18s linear infinite, opa1 1s linear;}
	.slide2 {animation: slide2 18s linear infinite;}
	.slide3 {animation: slide3 18s linear infinite;}
}