@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;
	}
}
/* =================
コンテナ */
#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: 100vh;
	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;
	z-index: -1;
}
.hero__slide--2 img {
	-o-object-position: 30% bottom;
	   object-position: 30% bottom;
}
.hero__slide--3 img {
	-o-object-position: 60% bottom;
	   object-position: 60% bottom;
}
.hero__slide[class*=-active] .hero__photo img {
	-webkit-transition-delay: 0s;
	        transition-delay: 0s;
	-webkit-transform: scale(1.05);
	        transform: scale(1.05);
}
@media (max-width: 559px) {
	.hero__slide--2 img {
		-o-object-position: 40% bottom;
		   object-position: 40% bottom;
	}
	.hero__slide--3 img {
		-o-object-position: right bottom;
		   object-position: right bottom;
	}
	.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 {
	position: fixed;
	top: min(
		calc(var(--height-vh-fit) - calc(10px + 5px) - var(--gutter-var-sm)),
		calc(var(--hero-slide-max-height) - calc(10px + 5px) - var(--gutter-var-sm))
	);
	bottom: auto;
	left: auto;
	right: var(--gutter-var-md);

	z-index: 1;
}
@media(max-width: 959px) and (orientation: portrait) and (any-hover: none) {
	#hero-slider .splide__pagination {
		top: calc(var(--height-vh-fit) - calc(10px + 5px) - var(--gutter-var-sm));
	}
}


/* ==================
キャッチコピー */
.hero__eyecatch {
	width: var(--flexible-width);
	margin-right: auto;
	margin-left: auto;

	display: -webkit-box;

	display: -ms-flexbox;

	display: flex;
	-webkit-box-align: center;
	    -ms-flex-align: center;
	        align-items: center;
	-webkit-box-pack: center;
	    -ms-flex-pack: center;
	        justify-content: center;

	position: fixed;
	top: min(
		calc(var(--height-vh-fit) / 2),
		calc(var(--hero-slide-max-height) / 2)
	);
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	        transform: translate(-50%, -50%);
	z-index: 1;

	color: var(--color-white);
	font-weight: 700;
	font-size: var(--txt-5xl);
	-webkit-font-feature-settings: "palt";
	        font-feature-settings: "palt";
	letter-spacing: 0.125em;
	line-height: 1.35;
	text-align: center;

	text-shadow: 0px 0px 20px rgba(1, 26, 67, .7);
}
_::-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));
}
@media (max-width: 959px) and (orientation: portrait) and (any-hover: none) {
	.hero__eyecatch {
		top: calc(var(--height-vh-fit) / 2);
	}
}
@media (min-width: 372px) {
	.hero__eyecatch .blake {
		display: none;
	}
}
@media (max-width: 371px) {
	.hero__eyecatch .blake {
		display: block;
	}
}