
header {
	padding: 0.2em 1em;
	position: sticky;
	border-bottom: 1px solid #ccc;
	.logo {
		img {
			height: 68px;
			width: auto;
		}
	}
	.header_menu_nav {
		position: absolute;
		top: 100%;
		right: 0;
		width: 100%;
		overflow: hidden;
		z-index: 100;
		pointer-events: none;
		&.open {
			pointer-events: auto;
			.header_menu {
				transform: translateY(0);
			}
		}
	}
	.header_menu {
		transition: 0.3s transform;
		border-top: 1px solid #ccc;
		border-bottom: 1px solid #ccc;
		background-color: #fff;
		background-image: url("../images/common/background.avif");
		transform: translateY(-100%);
		overflow: scroll;
		width: 100%;
		box-sizing: border-box;
		writing-mode: horizontal-tb;
		gap: 0;
		li {
			border-bottom: 1px solid #ccc;
			&:last-of-type {
				border-bottom: none;
			}
		}
		a {
			display: block;
			padding: 0.5em;
		}
	}
	.reservation {
		margin: 0;
		a {
			padding: 1em 0.5em;
			padding-right: 2em;
			font-size: calc(14 * var(--px));
		}
		span {
			display: none;
		}
	}
	.language {
		font-size: calc(14 * var(--px));
	}
	.contact_section {
		display: flex;
		gap: 0.5em;
		align-items: center;
		justify-content: center;
	}
	.location {
		display: none;
	}
	.tel {
		margin: 0;
		.image {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 2.5em;
			height: 2.5em;
			border-radius: 0.5em;
			border: 1px solid var(--text-color);
			box-sizing: border-box;
			img {
				width: 70%;
				height: 70%;
			}
		}
		.text {
			font-size: calc(0 * var(--px));
			display: none;
		}
	}
	.sp_menu {
		display: block;
		margin: 0;
		img {
			width: 2.5em;
			height: 2.5em;
		}
	}
}

footer {
	.container {
		flex-direction: column;
	}
	.footer_menu {
		margin-top: 2em;
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5em;
		line-height: 1.4em;
	}
	.reservation {
		a {
			padding: 1em;
			padding-right: 3em;
		}
	}
}