@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: 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;
	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);
}
@media (max-width: 959px) {
	.hero__slide--2 .hero__photo img {
		object-position: 80% center;
	}
}
@media (max-width: 859px) {
	.hero__slide--2 .hero__photo img {
		object-position: 75% center;
	}
}
@media (max-width: 768px) {
	.hero__slide--2 .hero__photo img {
		object-position: left 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 {
	flex-direction: column;
	align-items: flex-end;

	position: fixed;
	top: min(
		calc(var(--height-vh-fit) - calc(calc(10px + 5px) * 4) - var(--gutter-var-sm)),
		calc(var(--hero-slide-max-height) - calc(calc(10px + 5px) * 4) - 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: auto;
		bottom: var(--gutter-var-sm);
	}
}


/* ==================
キャッチコピー */
.hero__eyecatch {
	position: fixed;
	top: min(
	calc(var(--height-vh-fit) / 2),
	calc(var(--hero-slide-max-height) / 2)
	);
	left: var(--gutter-var-xl);
	transform: translateY(-50%);
	z-index: 1;

	color: var(--color-main-very-thin);
	font-family: var(--mincho);
	font-weight: 700;
	font-size: var(--txt-5xl);
	font-feature-settings: "palt";
	text-shadow: 0px 0px 20px rgba(1, 26, 67, .7);
	letter-spacing: 0.1em;
	line-height: 1;

	writing-mode: vertical-rl;

	display: flex;
	flex-direction: column;

	height: 9em;
}
_::-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));
}
.hero__eyecatch > span {
	flex-shrink: 0;
	margin-bottom: 0.2em;
	word-break: keep-all;
}
.hero__eyecatch .first-brackets {
	margin-top: -0.5em;
}
.hero__eyecatch .end-brackets {
	margin-bottom: -0.5em;
}
.hero__eyecatch > span::before,
.hero__eyecatch > span:last-child::after {
	content: "";
	display: inline-block;
	width: 1px;
	height: calc(100% + 0.5em);
	background-color: var(--color-main-pale);
	margin-top: -0.3em;
}
/* PCの縦画面対応 */
@media(max-width: 959px) and (orientation: portrait) and (any-hover: hover) {
	.hero__eyecatch {
		left: 50%;
		transform: translate(-50% , -50%);
	}
}
/* PCの横画面対応 */
@media(max-width: 959px) and (orientation: landscape) and (any-hover: hover) {
	.hero__eyecatch {
		top: calc(calc(var(--height-vh-fit) / 2) + calc(var(--header-height) / 2));
		font-size: var(--txt-lg);
	}
}
/* タブレット/スマホ縦画面の対応 */
@media(max-width: 959px) and (orientation: portrait) and (any-hover: none) {
	.hero__eyecatch {
		top: calc(var(--height-vh-fit) / 2);
		left: 50%;
		transform: translate(-50% , -50%);
	}
}
/* タブレット/スマホの横表示の対応 */
@media(max-width: 959px) and (orientation: landscape) and (any-hover: none) {
	.hero__eyecatch {
		top: calc(calc(var(--height-vh-fit) / 2) + calc(var(--header-height) / 2));
		font-size: var(--txt-lg);
	}
}