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

.splide .splide__track { width: 100%; }

/* スライドの背景画像のスタイル */
.splide .splide__slide {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

.splide p {
	color: #fff;
	font-weight: 800;
	line-height: 1.4;
	position: absolute;
}

@media (max-width: 767px) {

	.splide .splide__track {
		height: 510px;
		font-size: clamp(3rem, 4vw + 1.25rem, 4rem);
	}

	.splide p {
		position: absolute;
		left: 5%;
		top: 50%;
		width: 80%;
		text-shadow: 0 1px 6px #381404;
	}

	.splide .slider01 {
		background-image: url( ../images/home/slider-sp01.jpg );
	}
	.splide .slider02 {
		background-image: url( ../images/home/slider-sp02.jpg );
	}
	.splide .slider03 {
		background-image: url( ../images/home/slider-sp03.jpg );
	}

	.splide p.slidertxt01 {
		width: 8em;
		top: 1em;
		left: 5%;
	}
	.splide p.slidertxt02 {
		width: 7em;
		top: 1em;
		left: 5%;
	}
	.splide p.slidertxt03 {
		width: 7em;
		top: 1em;
		left: 5%;
	}

}

@media (min-width: 768px) {

	.splide .splide__track {
		height: 11em;
		font-size: clamp(4.2rem, 5vw + 0.5rem, 6.5rem);
	}

	.splide .slider01 {
		background-image: url( ../images/home/slider-pc01.jpg );
	}
	.splide .slider02 {
		background-image: url( ../images/home/slider-pc02.jpg );
	}
	.splide .slider03 {
		background-image: url( ../images/home/slider-pc03.jpg );
	}

	.splide p {
		position: absolute;
		text-shadow: 0 3px 10px #381404;
	}

	.splide p.slidertxt01 {
		width: 8em;
		bottom: 1.5em;
		right: 5%;
	}
	.splide p.slidertxt02 {
		width: 7em;
		bottom: 1.5em;
		right: 5%;
	}
	.splide p.slidertxt03 {
		width: 7em;
		top: 3em;
		right: 5%;
	}

}

@media (min-width: 768px) and (max-width:959px) {

	.splide p.slidertxt01 {
		right: 3%;
	}
	.splide p.slidertxt02 {
		right: 3%;
	}
	.splide p.slidertxt03 {
		right: 3%;
	}

}

/* 表示されているスライドのテキスト */
.splide .splide__slide.is-active p {
	animation-delay: 1s;
	animation-duration: 2s;
	animation-fill-mode: both;
	animation-name: fadeIn;
}


/* アニメーション */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateX(100px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}