/* ==================================================
	feature_focus
================================================== */

.feature_focus .slider_navi .slick-track::after {
	padding-top: 92.92929292929293%; /* (画像の高さ / 画像の横幅) × 100 */
	background-image: url(images/feature_focus.png);
}

/* num */
.feature_focus .slider_navi .num1 { top: 12%; left: 74%; }
.feature_focus .slider_navi .num2 { top: 28%; left: 77%; }
.feature_focus .slider_navi .num3 { top: 39%; left: 54%; }
.feature_focus .slider_navi .num4 { top: 37%; left: 30%; }
.feature_focus .slider_navi .num5 { top: 81%; left: 64%; }

@media screen and (min-width: 1280px) {
	.feature_focus .slider_for .item:last-child .spot_description {
		top: auto;
		bottom: 0;
	}
}



/* ----------------------------------------
	slider
---------------------------------------- */

.ksp_carousel .slider_for,
.ksp_carousel .slider_navi {
	display: none;
}
.ksp_carousel .slider_for.slick-initialized,
.ksp_carousel .slider_navi.slick-initialized {
	display: block;
}
.ksp_carousel .slider_for {
	padding: 0 20px;
}
.ksp_carousel .slider_for .item img {
	object-fit: cover;
	height: 320px;
}
.ksp_carousel .slider_navi {
	padding: 0 5px;
}
.ksp_carousel .slider_navi .item {
	cursor: pointer;
	transition: opacity .3s ease;
	opacity: .2;
	padding: 20px 15px 0;
}
.ksp_carousel .slider_navi .item:hover,
.ksp_carousel .slider_navi .item.slick-current {
	opacity: 1;
}
.ksp_carousel .slider_navi .item::before {
	display: block;
	content: "";
	transition: opacity .3s ease;
	opacity: 0;
	width: 60px;
	height: 4px;
	margin-bottom: 20px;
	background: #000;
}
.ksp_carousel .slider_navi .item.slick-current::before {
	opacity: 1;
}
.ksp_carousel .slider_navi .item h3 {
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #000;
}

@media screen and (min-width: 425px) {
	.ksp_carousel .slider_navi .slick-list {
		padding-right: 10%;
	}
}

@media screen and (min-width: 768px) {
	.ksp_carousel .slider_for {
		padding: 0 30px;
	}
	.ksp_carousel .slider_navi {
		padding: 0 15px;
	}
}

@media screen and (min-width: 1024px) {
	.ksp_carousel .slider_navi .slick-list {
		padding-right: 0;
	}
	.ksp_carousel .slider_navi .slick-track {
		transform: none !important;
	}
	.ksp_carousel .slick-dotted.slick-slider {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 1280px) {
	.ksp_carousel .slider_for {
		padding: 0;
	}
	.ksp_carousel .slider_for .item img {
		height: 400px;
	}
	.ksp_carousel .slider_navi {
		margin: 0 -15px;
		padding: 0;
	}
}


/* dots -------------------- */

.ksp_carousel .slider_navi .slick-dots {
	left: 0;
}
.ksp_carousel .slider_navi .slick-dots li {
	width: 17px;
	height: 17px;
	margin: 0;
}
.ksp_carousel .slider_navi .slick-dots li button {
	width: 17px;
	height: 17px;
}
.ksp_carousel .slider_navi .slick-dots li button::before {
	width: 5px;
	height: 5px;
	background: #c7c7c7;
	opacity: 1;
}
.ksp_carousel .slider_navi .slick-dots li.slick-active,
.ksp_carousel .slider_navi .slick-dots li.slick-active button {
	width: 68px;
}
.ksp_carousel .slider_navi .slick-dots li button:hover::before,
.ksp_carousel .slider_navi .slick-dots li button:focus::before,
.ksp_carousel .slider_navi .slick-dots li.slick-active button::before {
	background: #000;
}
.ksp_carousel .slider_navi .slick-dots li.slick-active button::before {
	width: 56px;
	border-radius: 2.5px;
}