@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--1 .hero__photo img {
	-o-object-position: 10% bottom;
	   object-position: 10% bottom;
}
.hero__slide--2 .hero__photo img {
	-o-object-position: 80% bottom;
	   object-position: 80% 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: 769px) {
	.hero__slide--2 .hero__photo img {
		-o-object-position: center bottom;
		   object-position: center bottom;
	}
}
@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: auto;
	right: var(--gutter-var-md);
}


/* ==================
キャッチコピー */
.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: var(--head-match-space);
	left: var(--gutter-var-8x);
	-webkit-transform: translateY(-50%);
	        transform: translateY(-50%);
	z-index: 1;

	color: var(--color-main-pale);
	font-weight: 700;
	font-size: calc(var(--txt-xl) * 1.165);
	letter-spacing: 0.25em;
	line-height: 1.1;

	display: -webkit-inline-box;

	display: -ms-inline-flexbox;

	display: inline-flex;
	-webkit-box-align: start;
	    -ms-flex-align: start;
	        align-items: flex-start;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	    -ms-flex-direction: column;
	        flex-direction: column;
	gap: 0.35em;
}
.hero__eyecatch span {
	display: inline-block;
	background-color: var(--color-white);
	-webkit-padding-before: 0.25em;
	        padding-block-start: 0.25em;
	-webkit-padding-after: 0.15em;
	        padding-block-end: 0.15em;
	padding-inline: var(--gutter-var-xs);

	-webkit-animation-name: eyecatch;

	        animation-name: eyecatch;
	-webkit-animation-duration: 1s;
	        animation-duration: 1s;
	-webkit-animation-delay: 0.5s;
	        animation-delay: 0.5s;
	-webkit-animation-fill-mode: both;
	        animation-fill-mode: both;
}
.hero__eyecatch strong {
	color: var(--color-accent);
	font-weight: 700;
}
@-webkit-keyframes eyecatch {
	from {
		-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
		        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	to {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}
@keyframes eyecatch {
	from {
		-webkit-clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
		        clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
	}
	to {
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}
/* 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);
	}
}