/*
 * トップページのメインビジュアル
 *
 * 寸法・色・文字は旧サイト（Slider Revolution）の表示を測った値。
 *   PC（779px〜）: 1120×560 の舞台を画面の中央に置き、その中で配置する（画面が狭いときは左右40pxずつ空ける）
 *   スマホ（〜778px）: 480×720 の舞台を画面幅に合わせて縮める。390px 幅で測った値を vw にしている（1px = 0.2564vw）
 * 高さは「画面の高さ − ヘッダーの高さ」。JS が --engawa-mv-height に入れる
 *
 * 動きも旧サイトの設定と記録した動画に合わせている（時刻はスライドが切り替わってから）:
 *   背景: 0.2秒後から1秒かけて前のスライドに重なる。10秒かけて105%まで拡大する
 *   文字・線・ボタン: 色の帯が伸びて覆い、帯が抜けると現れる（1秒。帯は前半で伸び、後半で抜ける）
 *   退場: 切り替わると同時に、見出しは下へ、線は左へ枠の中に隠れ、ボタンは左へ、右側は右へずれながら消える
 *   ホバー: 切替ボタンは白地に金の文字、More は白地に紺の文字（0.4秒）
 */

.engawa-mv {
	--engawa-mv-gold: #c2ad5d;
	--engawa-mv-navy: #04345b;
	--engawa-mv-ease: cubic-bezier(0.86, 0, 0.07, 1); /* Slider Revolution の Power4.easeInOut */
	--engawa-mv-shift: 50px; /* 退場でずれる距離 */
	position: relative;
	height: var(--engawa-mv-height, calc(100vh - 125px));
	min-height: 560px;
	overflow: hidden;
	background: #fff; /* 1枚目は白から現れる */
	font-family: Georgia, serif;
	font-weight: 400;
	-webkit-font-smoothing: antialiased; /* 旧サイトの Slider Revolution と同じ文字の描き方 */
	-moz-osx-font-smoothing: grayscale;
}

/* 次のスライドまでの残り時間（上端の線）。切り替わってから1秒後に伸び始める */
.engawa-mv__progress {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 2px;
	background: var(--engawa-mv-gold);
	transform: scaleX(0);
	transform-origin: left center;
}
.engawa-mv__progress.is-running {
	animation: engawa-mv-progress var(--engawa-mv-interval, 6s) linear 1s both;
}

/* スライド: 表示中のものを上に重ね、前のスライドは新しい背景が重なり終わるまで下に残す */
.engawa-mv__slide {
	position: absolute;
	inset: 0;
	visibility: hidden;
}
.engawa-mv__slide.is-leaving {
	z-index: 1;
	visibility: visible;
}
.engawa-mv__slide.is-active {
	z-index: 2;
	visibility: visible;
}

.engawa-mv__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	object-position: center;
}
.engawa-mv.is-ready .engawa-mv__slide.is-active .engawa-mv__bg,
.engawa-mv.is-ready .engawa-mv__slide.is-leaving .engawa-mv__bg {
	animation: engawa-mv-fade-in 1s ease-in-out 0.2s both, engawa-mv-zoom 10s linear both;
}

/* JS が1枚目の背景を読み込んで動かし始めるまでは出さない（JS が動かなかったときは4秒後に出す） */
@media (scripting: enabled) {
	.engawa-mv:not(.is-ready) .engawa-mv__slide {
		opacity: 0;
		animation: engawa-mv-show 0s 4s forwards;
	}
}

.engawa-mv__stage {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	width: min(1120px, calc(100% - 80px));
	height: 560px;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.engawa-mv__stage a,
.engawa-mv__stage button {
	pointer-events: auto;
}

/* 色の帯で現れる要素: 包む要素（reveal）に帯を描き、中の要素（ink）を現す */
.engawa-mv__reveal {
	position: relative;
}
.engawa-mv__reveal::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--engawa-mv-block, var(--engawa-mv-gold));
	clip-path: inset(0 100% 0 0);
	pointer-events: none;
}
.engawa-mv.is-ready .engawa-mv__slide.is-active .engawa-mv__reveal::before {
	animation: engawa-mv-block-from-left 1s var(--engawa-mv-ease) var(--engawa-mv-in) both;
}
.engawa-mv.is-ready .engawa-mv__slide.is-active .engawa-mv__reveal--right::before {
	animation-name: engawa-mv-block-from-right;
}
.engawa-mv.is-ready .engawa-mv__slide.is-active .engawa-mv__ink {
	animation: engawa-mv-ink-in 1s var(--engawa-mv-ease) var(--engawa-mv-in) both;
}

/* 退場 */
.engawa-mv__slide.is-leaving .engawa-mv__ink {
	animation: engawa-mv-out-left var(--engawa-mv-out) var(--engawa-mv-ease) both;
}
.engawa-mv__slide.is-leaving .engawa-mv__reveal--right .engawa-mv__ink {
	animation-name: engawa-mv-out-right;
}
.engawa-mv__slide.is-leaving .engawa-mv__reveal--mask-down,
.engawa-mv__slide.is-leaving .engawa-mv__reveal--mask-left {
	overflow: clip;
}
.engawa-mv__slide.is-leaving .engawa-mv__reveal--mask-down .engawa-mv__ink {
	animation-name: engawa-mv-out-down;
}
.engawa-mv__slide.is-leaving .engawa-mv__reveal--mask-left .engawa-mv__ink {
	animation-name: engawa-mv-out-mask-left;
}

/* 見出し（左上） */
.engawa-mv__heading {
	position: absolute;
	top: 26px;
	left: 0;
	margin: 0;
	color: var(--engawa-mv-gold);
	font-size: 120px;
	line-height: 100px;
}
.engawa-mv__line {
	display: block;
	width: max-content;
	margin-bottom: 6px;
}
.engawa-mv__line:first-child {
	margin-left: -3px; /* 旧サイトと同じく1行目だけ少し左へ */
}
.engawa-mv__line,
.engawa-mv__line .engawa-mv__ink {
	font-weight: inherit; /* テーマの reset.css が span の太さを normal にしているため */
}
.engawa-mv__line .engawa-mv__ink {
	display: block;
	padding-bottom: 10px;
}
.engawa-mv__rule {
	position: absolute;
	top: 283px;
	left: 0;
	width: 160px;
	height: 4px;
}
.engawa-mv__rule .engawa-mv__ink {
	display: block;
	height: 100%;
	background: var(--engawa-mv-gold);
}

/* 切替ボタン（左下）。表示中のスライドのボタンを強調する */
.engawa-mv__nav {
	position: absolute;
	top: 327px;
	left: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.engawa-mv__nav button {
	display: block;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.4);
	color: var(--engawa-mv-gold);
	font: inherit;
	font-size: 16px;
	line-height: 16px;
	cursor: pointer;
	transition: color 0.4s var(--engawa-mv-ease), background-color 0.4s var(--engawa-mv-ease);
}
.engawa-mv__nav button:not([aria-current="true"]):hover,
.engawa-mv__nav button:not([aria-current="true"]):focus-visible {
	background: #fff;
	color: var(--engawa-mv-gold);
}
.engawa-mv__nav button[aria-current="true"] {
	background: rgba(194, 173, 93, 0.8);
	color: #fff;
	cursor: default;
}

/* 小見出し・説明文・More（右下）。小見出しと説明文の帯は白 */
.engawa-mv__info {
	position: absolute;
	right: 0;
	bottom: 100px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.engawa-mv__subheading,
.engawa-mv__description {
	--engawa-mv-block: #fff;
	margin: 0;
}
.engawa-mv__subheading .engawa-mv__ink {
	display: block;
	padding: 4px 6px 6px;
	background: var(--engawa-mv-gold);
	color: #fff;
	font-size: 28px;
	line-height: 28px;
}
.engawa-mv__description {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.engawa-mv__description .engawa-mv__reveal {
	display: block;
}
.engawa-mv__description .engawa-mv__ink {
	display: block;
	padding: 6px;
	background: #fff;
	color: #000;
	font-size: 16px;
	line-height: 16px;
}
.engawa-mv__more {
	display: block;
	margin-top: 10px;
}
.engawa-mv__more a {
	display: block;
	padding: 8px 50px;
	background: var(--engawa-mv-navy);
	box-shadow: inset 0 0 0 2px var(--engawa-mv-navy); /* ホバーで白地になったときの紺の枠 */
	color: #fff;
	font-size: 20px;
	line-height: 24px;
	text-decoration: none;
	transition: color 0.4s var(--engawa-mv-ease), background-color 0.4s var(--engawa-mv-ease);
}
.engawa-mv__more a:hover,
.engawa-mv__more a:focus-visible {
	background: #fff;
	color: var(--engawa-mv-navy);
}

/* ボタンの右向き矢印 */
.engawa-mv__nav button::after,
.engawa-mv__more a::after {
	content: "";
	display: inline-block;
	width: 0.35em;
	height: 0.35em;
	margin-left: 0.5em;
	border-top: 1px solid currentColor;
	border-right: 1px solid currentColor;
	vertical-align: 0.12em;
	transform: rotate(45deg);
}

@keyframes engawa-mv-fade-in {
	from { opacity: 0; }
}
@keyframes engawa-mv-zoom {
	from { transform: scale(1); }
	to { transform: scale(1.05); }
}
@keyframes engawa-mv-progress {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}
@keyframes engawa-mv-show {
	to { opacity: 1; }
}
/* 帯: 前半で伸びて覆い、後半で反対側へ抜ける（緩急は区間ごとにかかる） */
@keyframes engawa-mv-block-from-left {
	0% { clip-path: inset(0 100% 0 0); }
	50% { clip-path: inset(0); }
	100% { clip-path: inset(0 0 0 100%); }
}
@keyframes engawa-mv-block-from-right {
	0% { clip-path: inset(0 0 0 100%); }
	50% { clip-path: inset(0); }
	100% { clip-path: inset(0 100% 0 0); }
}
@keyframes engawa-mv-ink-in {
	from { opacity: 0; }
}
@keyframes engawa-mv-out-left {
	to { opacity: 0; transform: translateX(calc(-1 * var(--engawa-mv-shift))); }
}
@keyframes engawa-mv-out-right {
	to { opacity: 0; transform: translateX(var(--engawa-mv-shift)); }
}
@keyframes engawa-mv-out-down {
	to { transform: translateY(100%); }
}
@keyframes engawa-mv-out-mask-left {
	to { transform: translateX(-100%); }
}

/* スマホ: 480×720 の舞台を画面幅に合わせて縮める（390px 幅で測った値） */
@media only screen and (max-width: 778px) {
	.engawa-mv {
		--engawa-mv-shift: 9.5vw;
		min-height: 150vw;
	}
	.engawa-mv__stage {
		left: 4.1vw;
		width: auto;
		right: 4.36vw;
		height: 150vw;
		transform: translateY(-50%);
	}
	.engawa-mv__heading {
		top: 4.36vw;
		font-size: 14.1vw;
		font-weight: 700;
		line-height: 12.05vw;
	}
	.engawa-mv__line {
		margin-bottom: 0.26vw;
	}
	.engawa-mv__line .engawa-mv__ink {
		padding-bottom: 2.05vw;
	}
	.engawa-mv__line:first-child {
		margin-left: -0.51vw;
	}
	.engawa-mv__rule {
		top: 37.18vw;
		width: 20.77vw;
		height: 0.77vw;
	}
	.engawa-mv__nav {
		top: 44.36vw;
		gap: 1.67vw;
	}
	.engawa-mv__nav button {
		padding: 1.54vw;
		font-size: 3.59vw;
		line-height: 3.59vw;
	}
	.engawa-mv__info {
		bottom: 25.13vw;
	}
	.engawa-mv__subheading .engawa-mv__ink {
		padding: 1.28vw;
		font-size: 5.13vw;
		line-height: 5.13vw;
	}
	.engawa-mv__description {
		gap: 0.26vw;
	}
	.engawa-mv__description .engawa-mv__ink {
		padding: 1.28vw;
		font-size: 3.33vw;
		line-height: 3.33vw;
	}
	.engawa-mv__more {
		margin-top: 4.62vw;
	}
	.engawa-mv__more a {
		padding: 2.05vw 12.82vw;
		font-size: 5.13vw;
		line-height: 6.15vw;
	}
}

/* 動きを減らす設定の利用者には、自動の切替・拡大・文字の動きを出さない（ボタンでの切替はできる） */
@media (prefers-reduced-motion: reduce) {
	.engawa-mv__progress {
		display: none;
	}
	.engawa-mv .engawa-mv__bg,
	.engawa-mv .engawa-mv__ink,
	.engawa-mv .engawa-mv__reveal::before {
		animation: none !important;
	}
	.engawa-mv__nav button,
	.engawa-mv__more a {
		transition: none;
	}
}