@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: 70% bottom;
	   object-position: 70% bottom;
}
.hero__slide--3 .hero__photo img {
	-o-object-position: 70% center;
	   object-position: 70% center;
}
@media (max-width: 559px) {
	.hero__slide[class*=-active] .hero__photo img {
		-webkit-transform: scale(1.07);
		        transform: scale(1.07);
	}
	.hero__slide--3 .hero__photo img {
		-o-object-position: center;
		   object-position: center;
	}
}
@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: auto;
	right: var(--gutter-var-md);
}
#hero-slider .splide__pagination__page:not(.is-active) {
	background-color: var(--color-main-thinner);
}


/* ==================
キャッチコピー */
.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: 600;
	font-size: var(--txt-xxl);
	text-shadow: 0px 0px 20px rgba(17, 46, 92, 0.7);
	letter-spacing: 0.15em;
	line-height: 1.25;
}
/* サファリ対応 */
_::-webkit-full-page-media, _:future, :root .hero__eyecatch  {
	text-shadow: none;
	-webkit-filter: drop-shadow(0px 0px 20px rgba(1, 26, 67, .7));
	filter: drop-shadow(0px 0px 20px rgba(1, 26, 67, .7));
}
/* 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);
	}
}