body {
	background-image: url("../images/common/background.avif");
}
a:hover {
    opacity: 0.5;
}
header {
	padding: 1em;
	top: 0;
	z-index: 10000;
	background-image: url("../images/common/background.avif");
	background-color: #fff;
	.header_wrap {
		max-width: var(--content-width);
		margin-inline: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.logo {
		margin: 0;
		.scroll {
			display: none;
		}
	}
	.content {
		display: flex;
		align-items: center;
		gap: 4em;
	}
	.header_menu {
		display: flex;
		writing-mode: vertical-rl;
		flex-direction: column;
		list-style-type: none;
		margin: 0;
		padding: 0;
		gap: 1em;
		font-size: calc(20 * var(--px));
		letter-spacing: 0.1em;
		a {
			text-decoration: none;
			&:hover {
				color: var(--theme-color);
				opacity: 1;
			}
		}
	}
	.language {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
		p {
			margin: 0;
			&:after {
				content: '/';
				margin-left: 0.5em;
			}
			&:last-of-type:after {
				display: none;
			}
		}
		a {
			&.current, &:hover {
				color: var(--theme-color);
				opacity: 1;
			}
		}
	}
	.reservation {
		text-align: center;
		a {
			display: inline-block;
			color: #fff;
			text-decoration: none;
			padding: 0.8em 2em;
			letter-spacing: 0.1em;
			background-color: var(--theme-color);
			position: relative;
			line-height: 1em;
			&::after {
				position: absolute;
				top: 50%;
				right: 0.5em;
				content: '→';
				transform: translateY(-50%);
			}
		}
	}
	address {
		font-style: normal;
	}
	.tel {
		line-height: 1em;
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			img {
				width: 1em;
				height: 1em;
				object-fit: contain;
				object-position: center;
			}
		}
		.text {
			font-size: calc(23 * var(--px));
		}
	}
	.location {
		margin: 0;
		line-height: 1.4em;
	}
	.sp_menu {
		display: none;
	}
	&.scroll {
		@media screen and (min-width: 801px) {
			position: sticky;
			padding: 0.2em 1em;
			border-bottom: 1px solid #ccc;
			.logo {
				.scroll {
					display: block;
					max-width: 150px;
					height: auto;
					width: 100%;
				}
				picture {
					display: none;
				}
			}
			.header_menu_nav {
				position: absolute;
				top: 100%;
				right: 0;
				width: 100%;
				overflow: hidden;
				background-image: url("../images/common/background.avif");
				background-color: #fff;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				display: none;
				&.open {
					display: block;
				}
			}
			.header_menu {
				overflow: scroll;
				width: 100%;
				box-sizing: border-box;
				padding: 1em;
				max-width: var(--content-width);
				margin-left: auto;
				margin-right: auto;
			}
			.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 {
	margin-top: 5em;
	background-image: url("../images/footer/footer-bg.avif");
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: relative;
	padding: 2em 1em;
	&::before {
		content: '';
		position: absolute;
		inset: 0;
		background-color: #000;
		opacity: 0.45;
	}
	.logo {
		text-align: center;
	}
	.container {
		position: relative;
		z-index: 2;
		background-color: #ffffffe3;
		padding: 2em;
		max-width: var(--content-width);
		margin-inline: auto;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		gap: 7%;
	}
	.wrap_left {
		flex: 0.6;
	}
	.language {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 0.5em;
		margin-top: 2em;
		p {
			margin: 0;
			&:after {
				content: '/';
				margin-left: 0.5em;
			}
			&:last-of-type:after {
				display: none;
			}
		}
		a {
			&.current, &:hover {
				color: var(--theme-color);
				opacity: 1;
			}
		}
	}
	.wrap_center {
		flex: 2.5;
	}
	.footer_menu {
		display: grid;
		list-style-type: none;
		padding-left: 0;
		gap: 2em 1em;
		grid-template-columns: repeat(3, 1fr);
		a {
			text-decoration: none;
			display: flex;
			align-items: center;
			gap: 0.5em;
			&:before {
				content: '';
				background-image: url("../images/footer/arrow.svg");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
				width: 1em;
				height: 1em;
			}
			&:hover {
				color: var(--theme-color);
				opacity: 1;
			}
		}
	}
	.reservation {
		text-align: center;
		margin-top: 3em;
		a {
			display: inline-block;
			color: #fff;
			text-decoration: none;
			padding: 0.8em 5em;
			letter-spacing: 0.1em;
			background-color: var(--theme-color);
			position: relative;
			line-height: 1em;
			&::after {
				position: absolute;
				top: 50%;
				right: 0.5em;
				content: '→';
				transform: translateY(-50%);
			}
		}
	}
	.wrap_right {
		flex: 1;
	}
	.store_name {
		.sub {
			font-size: calc(16 * var(--px));
			display: block;
		}
		.main {
			margin-top: 0.2em;
			font-size: calc(24 * var(--px));
			display: block;
		}
	}
	address {
		font-style: normal;
	}
	.tel {
		font-size: calc(23 * var(--px));
		line-height: 1em;
		a {
			display: flex;
			align-items: center;
			justify-content: center;
			text-decoration: none;
			img {
				width: 0.8em;
				height: 0.8em;
				object-fit: contain;
				object-position: center;
			}
		}
	}
	.location {
		margin: 0;
		line-height: 1.4em;
	}
}

#access .section_title {
	margin-bottom: 2em;
	font-family: "Shippori Mincho";
	.jp {
		display: inline-block;
		font-size: calc(32 * var(--px));
		padding: 0.5em;
		padding-top: 0;
		font-weight: normal;
		margin: 0;
		border-bottom: 2px solid #83c48a;
	}
	.en {
		margin: 0.5em 1em;
		font-size: calc(20 * var(--px));
	}
}
.section-title {
  font-size: 40px;
  text-align: center;
  background-image: url(../images/page-stay/stay-section-title.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 0 35%;
  font-family: "Shippori Mincho";
  font-weight: 400;
  padding: 20px;
  margin-top: 0;
	    max-width: 860px;
    margin: 0 auto;
}
@media screen and (max-width: 768px) {
  .section-title {
    font-size: 30px;
    background-position: 60% 40%;
        background-size: 142%;
  }
}
p.copyright {
    margin: 0;
    padding: 1em;
    background-color: #222;
    color: #fff;
    text-align: center;
    font-size: calc(13 * var(--px));
}
p.copyright span.webmori {
    font-size: 0.8em;
}
p.copyright a {
    color: #fff;
}