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

ヒーロースライダー

=============================== */
:root {
	--hero-slide-max-height: 980px;
}
@media(max-width: 959px) and (orientation: portrait) and (any-hover: none) {
	:root {
		--hero-slide-max-height: none;
	}
}
/* =================
コンテナ */
/* fixed スタイルにする場合はコメントアウトを有効にする */
/* #hero-slider {
	pointer-events: none;

	position: relative;

	-webkit-clip-path: inset(0);
	        clip-path: inset(0);
} */
.hero__slide {
	height: 100vh;
	height: var(--height-vh-fit);
	max-height: var(--hero-slide-max-height);

	/* position: relative; */
}
.hero__photo {
	display: inline-block;

	width: 100%;
	height: var(--height-vh-fit);
	max-height: var(--hero-slide-max-height);

	/* pointer-events: all;

	position: fixed;
	top: 0; */
}
.hero__photo img {
	display: inline-block;
	will-change: transform;

	width: 100%;
	height: 100%;

	-webkit-transition: -webkit-transform 7s var(--easeOutSine);

	transition: -webkit-transform 7s var(--easeOutSine);

	transition: transform 7s var(--easeOutSine);

	transition: transform 7s var(--easeOutSine), -webkit-transform 7s var(--easeOutSine);
	-webkit-transition-delay: 2s;
	        transition-delay: 2s;
	-webkit-transform-origin: center center;
	        transform-origin: center center;
	-o-object-fit: cover;
	   object-fit: cover;
}
.hero__slide[class*=-active] .hero__photo img {
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
	-webkit-transform: scale(1.05);
	        transform: scale(1.05);
}
.hero__slide--2 .hero__photo img {
	-o-object-position: 80% center;
	   object-position: 80% center;
}
@media (max-width: 559px) {
	.hero__slide[class*=-active] .hero__photo img {
		-webkit-transform: scale(1.07);
		        transform: scale(1.07);
	}
}
@media (max-width: 414px) {
	.hero__slide[class*=-active] .hero__photo img {
		-webkit-transform: scale(1.1);
		        transform: scale(1.1);
	}
}
/* =================
ページネイション */
#hero-slider .splide__pagination {
	bottom: var(--gutter-sm);
	left: 0;
	right: calc(0px - 15px);
}


/* ==================
キャッチコピー */
.hero__eyecatch {
	width: 100%;
	padding-inline: var(--gutter-var-8x);

	position: absolute;
	top: min(
		calc(calc(var(--height-vh-fit) / 2) + calc(var(--header-height) / 2)),
		calc(calc(var(--hero-slide-max-height) / 2) + calc(var(--header-height) / 2))
	);
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	        transform: translateX(-50%) translateY(-50%);
	z-index: 1;

	text-align: center;
	color: var(--color-white);
	font-weight: 700;
	/* min: 20px, max: 35px */
	font-size: clamp(1.25rem, calc(0.875rem + 1.875vw), 2.188rem);
	text-shadow: 0px 0px 20px rgba(83, 97, 120, 0.5);
	letter-spacing: 0.15em;
	line-height: 1.5;
}
/* サファリ対応 */
_::-webkit-full-page-media, _:future, :root .hero__eyecatch  {
	text-shadow: none;
	-webkit-filter: drop-shadow(0px 0px 20px rgba(83, 97, 120, 0.5));
	filter: drop-shadow(0px 0px 20px rgba(83, 97, 120, 0.5));
}
/* PCの縦画面対応 */
@media(max-width: 959px) and (orientation: portrait) and (any-hover: hover) {
	.hero__eyecatch {
		top: 50%;
	}
}
/* PCの横画面対応 */
@media(max-width: 959px) and (orientation: landscape) and (any-hover: hover) {
	.hero__eyecatch {
		top: 50%;
	}
}
/* タブレット/スマホ縦画面の対応 */
@media(max-width: 959px) and (orientation: portrait) and (any-hover: none) {
	.hero__eyecatch {
		top: calc(var(--height-vh-fit) / 2);
	}
}
/* タブレット/スマホの横表示の対応 */
@media(max-width: 959px) and (orientation: landscape) and (any-hover: none) {
	.hero__eyecatch {
		top: calc(var(--height-vh-fit) / 2);
	}
}