@charset "utf-8";

.sliderCase a {
	text-decoration: none;
}
.sliderCase a img {
	transition: all 0.4s ease;
} 

.sliderCase .bgImg {
	overflow: hidden;
	background: #222;
}

.sliderCase .bgImg img {
	width: 100%;
	height: auto;
}

.sliderCase a:hover img {
	transform: scale(1.05);
}

.sliderCase a .introTxt h2 {
	display: inline-flex;
	align-items: end;
	position: relative;
	margin: 0.5em 0;
	padding: 0 0 5px 0;
	border-bottom: #e5605f solid 1px;
	color: #fff;
	font-weight: 500;
	font-size: 142.8%;
	transition: color 0.4s ease;
}

.sliderCase a:hover .introTxt h2 {
	color: #e5605f;
}
.sliderCase a .introTxt h2 > img {
	width: auto;
	margin-left: 6px;
}

/* 矢印のクリック範囲など */
.sliderCase button.button {
	background-color: transparent!important; /* ボタンの背景を透明にする */
	height: 50px!important;
	transition: .2s!important;
	width: 30px!important;
}

.sliderCase button.slick-prev {
	left: -46px;
}

.sliderCase button.slick-next {
	right: -46px;
}

.sliderCase button.slick-prev:before,
.sliderCase button.slick-prev:before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 25px;
	height: 25px;
	margin: auto;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
	transition: left 0.4s ease;
}

.sliderCase button.slick-prev:before {
	left: 20px;
	transform: rotate(225deg);
}

.sliderCase button.slick-next:before {
	left: -25px;
	transform: rotate(45deg);
}

.sliderCase button.splide__arrow:hover {
	opacity: 1 !important;
}

.sliderCase button.slick-prev:hover:before,
.sliderCase button.slick-next:hover:before {
	border-top-color: #e5605f;
	border-right-color: #e5605f;
}

.sliderCase button.slick-prev:hover:before {
	left: 10px;
	animation: 0.85s ease-out 0s infinite normal forwards running carouselprevbtnAnm;
}

.sliderCase button.slick-prev:hover:before {
	left: -28px;
	animation: 0.85s ease-out 0s infinite normal forwards running carouselnextbtnAnm;
}

@keyframes carouselprevbtnAnm {
	0% {
		left: 15px;
		transform: rotate(225deg);
	}

	100% {
		left: 10px;
		transform: rotate(225deg);
	}
}

@keyframes carouselnextbtnAnm {
	0% {
		left: -38px;
		transform: rotate(45deg);
	}

	100% {
		left: -28px;
		transform: rotate(45deg);
	}
}

@media only screen and (max-width: 1280px) {
	.inner {
		padding: 0 3%;
	}
	.splide button.slick-prev {
		left: 33px;
	}
	
	.splide button.slick-next {
		right: 33px;
	}
}

.slick-next::after, .slick-prev::after {
	display: none;
}
.slick-track {
	margin-left: initial!important;
	margin-right: initial!important;
}