@charset "UTF-8";
.kv-slider {
	overflow: hidden;
	/*aspect-ratio: 1125 / 1550;*/
	position: relative;
	width: 100%;
	height: 100%;
	background: #FFF;
}
.kv-slider .slide1,
.kv-slider .slide2,
.kv-slider .slide3 {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	right: 0;
}
.kv-slider .slide1 {
	z-index: 2;
}
.kv-slider .slide2 {
	z-index: 3;
}
.kv-slider .slide3 {
	z-index: 4;
}
.kv-slider .slide1 .bg img,
.kv-slider .slide2 .bg img,
.kv-slider .slide3 .bg img {
	opacity: 0;
}
.kv-slider .slide1 .bg {
	width: 100%;
	height: 100%;
	background: url("../images/home/kv3_bg_sp.jpg") no-repeat center center;
	background-size: cover;
}
.kv-slider .slide2 {
	width: 100%;
	height: 100%;
	background: url("../images/home/kv2_bg_sp.jpg") no-repeat right center;
	background-size: cover;
}
.kv-slider .slide3 {
	width: 100%;
	height: 100%;
	background: url("../images/home/illust1_sp.jpg") no-repeat right center;
	background-size: cover;
}
/*.kv-slider .slide2 .bg {
	width: 100%;
	height: 100%;
	background: url("../images/home/kv2_bg_sp.jpg") no-repeat center center;
	background-size: cover;
}*/
.kv-slider .slide1 .t1 {
	position: absolute;
	top: 0;
	left: 0;
	/*opacity: 0;*/
}
.kv-slider .slide1 .t2 {
	position: absolute;
	bottom: 0;
	left: 0;
	/*opacity: 0;*/
}
.kv-slider .slide1 .t2,
.kv-slider .slide2 .t2,
.kv-slider .slide3 .t2 {
	position: absolute;
	top: 0;
	left: 0;
	/*opacity: 0;*/
}


.kv-slider div.active {
	/*opacity: 0;*/
}
.kv-slider .slide2.ready,
.kv-slider .slide3.ready {
	opacity: 0;
}

.kv-slider .slide1.active,
.kv-slider .slide2.active,
.kv-slider .slide3.active {
	-webkit-animation-name: zoomOut;
  animation-name: zoomOut;
  -webkit-animation-duration: 1.6s;
  animation-duration: 1.6s;
	-webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	z-index: 10;
}
.kv-slider .slide1.remove,
.kv-slider .slide2.remove,
.kv-slider .slide3.remove {
	-webkit-animation-name: removeOut;
  animation-name: removeOut;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
	z-index: 10;
}
.kv-slider div:nth-child(1).active .t1,
.kv-slider div:nth-child(2).active .t1,
.kv-slider div:nth-child(3).active .t1 {
	-webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
	-webkit-animation-delay: 1.2s;
  animation-delay: 1.2s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.kv-slider div:nth-child(1).active .t2,
.kv-slider div:nth-child(2).active .t2,
.kv-slider div:nth-child(3).active .t2 {
	-webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
	-webkit-animation-delay: 1.4s;
  animation-delay: 1.4s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


@-webkit-keyframes fadeIn {
  from {
		opacity: 0;
	}
  to {
		opacity: 1;
	}
}
@keyframes fadeIn {
  from {
		opacity: 0;
	}
  to {
		opacity: 1;
	}
}
@-webkit-keyframes fadeOut {
  from {
		opacity: 1;
	}
  to {
		opacity: 0;
	}
}
@keyframes fadeOut {
  from {
		opacity: 1;
	}
  to {
		opacity: 0;
	}
}

@-webkit-keyframes zoomOut {
  from {
		opacity: 0;
		transform: scale(1.1);
	}
  to {
		opacity: 1;
		transform: scale(1);
	}
}
@keyframes zoomOut {
  from {
		opacity: 0;
		transform: scale(1.1);
	}
  to {
		opacity: 1;
		transform: scale(1);
	}
}
@-webkit-keyframes removeOut {
  from {
		opacity: 1;
		transform: scale(1);
	}
  to {
		opacity: 0;
		transform: scale(1.1);
	}
}
@keyframes removeOut {
  from {
		opacity: 1;
		transform: scale(1);
	}
  to {
		opacity: 0;
		transform: scale(1.1);
	}
}