@charset "UTF-8";
/* CSS Document */
/* ===============================

ABOUTスライダー

=============================== */
/* =================
コンテナ */
#about-slider {
	margin-right: var(--gutter-common);
	width: calc(100% - var(--gutter-common));
}
#about-slider::after {
	content: "";
	display: inline-block;
	width: 100%;
	height: calc(100% - 10px - 20px);
	background-color: var(--color-sub-soft);

	position: absolute;
	top: var(--gutter-common);
	right: calc(0px - calc(var(--gutter-common) * 2));
	z-index: -1;
}
.about__slide {
	width: 100%;
	height: -webkit-fit-content;
	height: -moz-fit-content;
	height: fit-content;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}
.about__slide img {
	cursor: -webkit-grab;
	cursor: grab;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-webkit-transform-origin: left bottom;
	        transform-origin: left bottom;

	position: absolute;
	top: 0;
	left: 0;
}
@supports not (aspect-ratio: 3 / 2) {
	.about__slide {
		position: relative;
	}
	.about__slide::before {
		content: "";
		display: inline-block;
		padding-top: 66.666%;
	}
	.about__slide img {
		position: absolute;
		top: 0;
		left: 0;
	}
}
/* ---------------
アニメーション設定 */
.about__slide img {
	will-change: animation;
}
.about__slide:not([class*=-active]) img {
	-webkit-transform: scale(0.9);
	        transform: scale(0.9);
	opacity: 0.9;
	-webkit-filter: blur(4px) saturate(110%) brightness(70%);
	        filter: blur(4px) saturate(110%) brightness(70%);

	-webkit-transition: opacity 1.5s ease-in-out,
	-webkit-transform .5s linear,
	-webkit-filter .5s ease-in-out;

	transition: opacity 1.5s ease-in-out,
	-webkit-transform .5s linear,
	-webkit-filter .5s ease-in-out;

	transition: opacity 1.5s ease-in-out,
	transform .5s linear,
	filter .5s ease-in-out;

	transition: opacity 1.5s ease-in-out,
	transform .5s linear,
	filter .5s ease-in-out,
	-webkit-transform .5s linear,
	-webkit-filter .5s ease-in-out;
}
.about__slide[class*=-active] img{
	-webkit-animation-name: about-filter;
	        animation-name: about-filter;
	-webkit-animation-timing-function: var(--liner);
	        animation-timing-function: var(--liner);
	-webkit-animation-duration: 1s;
	        animation-duration: 1s;
}
@-webkit-keyframes about-filter {
	0% {
		-webkit-transform: scale(0.9);
		        transform: scale(0.9);
		opacity: 0.9;
		-webkit-filter: blur(4px) saturate(110%) brightness(70%);
		        filter: blur(4px) saturate(110%) brightness(70%);
	}
	50% {
		-webkit-filter: blur(1px) saturate(100%) brightness(80%);
		        filter: blur(1px) saturate(100%) brightness(80%);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
		-webkit-filter: none;
		        filter: none;
	}
}
@keyframes about-filter {
	0% {
		-webkit-transform: scale(0.9);
		        transform: scale(0.9);
		opacity: 0.9;
		-webkit-filter: blur(4px) saturate(110%) brightness(70%);
		        filter: blur(4px) saturate(110%) brightness(70%);
	}
	50% {
		-webkit-filter: blur(1px) saturate(100%) brightness(80%);
		        filter: blur(1px) saturate(100%) brightness(80%);
	}
	100% {
		opacity: 1;
		-webkit-transform: scale(1);
		        transform: scale(1);
		-webkit-filter: none;
		        filter: none;
	}
}
/* =================
ページネイション */
#about-slider .splide__pagination {
	position: static;
	-webkit-box-pack: start;
	    -ms-flex-pack: start;
	        justify-content: flex-start;
	margin-top: 20px;
}