/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 27 2024 | 13:12:05 */
/* メインビジュアルスライダー */

#slider {
	position: relative;
	width: 100vw;
	margin: 0 auto;
	overflow: hidden;
}
#slider .splide__slide {
	height: 80vh;
	overflow: hidden;
}
@media (max-width: 767px) {
	#slider .splide__slide {
		height: 70vh;
	}
}
#slider .splide__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
 #slider .splide__slide img[alt="Slide 1"] {
	object-position: 0 30%;
}
 #slider .splide__slide img[alt="Slide 2"] {
	object-position: 0 50%;
}
 #slider .splide__slide img[alt="Slide 3"] {
	object-position: 0 10%;
}
@media (max-width: 767px) {
	 #slider .splide__slide img[alt="Slide 1"] {
		object-position: 80% 50%;
	}
	 #slider .splide__slide img[alt="Slide 2"] {
		object-position: 10% 50%;
	}
	 #slider .splide__slide img[alt="Slide 3"] {
		object-position: 50% 50%;
	}
}
#slider .textArea {
	position: absolute;
	top: 50%;
	left: 12%;
	transform: translateY(-50%);
	background-color: rgba(255, 255, 255, 0.8);
	color: #333;
	padding: 20px 40px;
	font-size: clamp(1.188rem, 0.632rem + 1.16vw, 1.5rem); /* フォントサイズ 19px~24px	　画面サイズ　768px~1200px */
	font-weight: bold;
}
@media (max-width: 767px) {
	#slider .textArea {
		left: 50%;
		transform: translate(-50%, 0);
		width: 90%;
		font-size: 16px;
		padding: 20px;
		text-align: center;
	}
}
#slider .textArea::before,
#slider .textArea::after {
	content: "";
	position: absolute;
	background-color: var(--accentColor);
	width: 20px;
	height: 20px;
}
#slider .textArea::before {
	top: -10px;
	left: -10px;
}
#slider .textArea::after {
	bottom: -10px;
	right: -10px;
}