/* ===============================
   menu-hero: お料理・メニュー
   =============================== */

.menu-page {
	overflow: clip;
	color: var(--color-text);
	background-color: var(--color-bg);
	background-image: url("../../img/bg_top-concrete.webp");
	background-repeat: repeat;
	font-family: var(--font-jp);
}

.menu-page .container {
	max-width: none;
	padding-inline: var(--space-4);
}

.menu-page .menu-hero {
	position: relative;
	height: var(--photo-fv-height);
	overflow: hidden;
	background: var(--color-bg);
}

.menu-page .menu-hero__media {
	position: absolute;
	inset: 0;
}

.menu-page .menu-hero__media::after {
	content: none;
}

.menu-page .menu-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 55% 48%;
}

.menu-page .menu-hero__body {
	position: relative;
	z-index: 2;
	display: flex;
	width: var(--photo-fv-content-width);
	height: var(--photo-fv-height);
	flex-direction: column;
	justify-content: center;
	padding-inline: var(--photo-fv-inline-padding);
}

.menu-page .menu-hero__title {
	color: var(--color-sub);
	font-size: var(--photo-fv-title-size);
	font-weight: var(--fw-medium);
	letter-spacing: 0.12em;
	line-height: var(--photo-fv-title-line-height);
	white-space: nowrap;
}

.menu-page .menu-hero__copy {
	margin-top: var(--space-2);
	color: var(--color-sub);
	font-size: var(--photo-fv-lead-size);
	line-height: var(--photo-fv-lead-line-height);
	letter-spacing: 0.05em;
	white-space: nowrap;
}

.menu-page .menu-hero__intro {
	display: none;
}

@media (max-width: 767px) {
	.menu-page .menu-hero__copy {
		font-size: var(--fs-body-pc);
	}
}

@media (min-width: 768px) {
	.menu-page .container {
		max-width: calc(var(--container-max) + var(--space-13) - var(--space-2));
		padding-inline: var(--space-11);
	}

	.menu-page .menu-hero__media img {
		object-position: center 45%;
	}

	.menu-page .menu-hero__media::after {
		background-image: url("../../img/bg_top-fv.png");
		background-position: center;
		background-size: cover;
	}

	.menu-page .menu-hero__body {
		width: var(--photo-fv-content-width);
		height: var(--photo-fv-height);
		justify-content: center;
		padding-inline: var(--photo-fv-inline-padding);
	}

	.menu-page .menu-hero__title {
		font-size: var(--photo-fv-title-size);
		line-height: var(--photo-fv-title-line-height);
		letter-spacing: 0.14em;
	}

	.menu-page .menu-hero__title::after {
		display: block;
		width: calc(
			var(--space-13) + var(--space-13) + var(--space-13) + var(--space-7)
		);
		margin-top: var(--space-6);
		border-top: 1px solid var(--color-main);
		content: "";
	}

	.menu-page .menu-hero__copy {
		margin-top: var(--space-7);
		font-size: var(--photo-fv-lead-size);
		line-height: var(--photo-fv-lead-line-height);
		letter-spacing: 0.12em;
	}

	.menu-page .menu-hero__intro {
		display: block;
		max-width: calc(var(--space-13) + var(--space-13) + var(--space-13) + var(--space-7));
		margin-top: var(--space-6);
		font-size: var(--fs-body-pc);
		letter-spacing: 0.08em;
		line-height: var(--lh-loose);
	}
}