:root {
	/*数値*/
	--rem: 1rem /16;
	--vw: 1vw /16;

	/*カラー*/
	--bk: #000;
	--wh: #fff;
	--primary-bk: #181818;
	--primary-wh: #F8F8F8;

	--body-l: #1A1A1C;
	--description-l: #676767;
	--link-l: #0017C1;
	--hover-l: #000082;
	--active-l: #000082;
	--visited-l: #000082;
	--alert-l: #EC0000;
	--disabled-l: #949497;

	--body-d: #F8FAFC;
	--description-d: #626264;
	--link-d: #7096F8;
	--hover-d: #9DB7F9;
	--active-d: #9DB7F9;
	--visited-d: #9DB7F9;
	--alert-d: #FF4B36;
	--disabled-d: #757578;

	--icon-menu-open: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z' fill='%23181818'/%3E%3C/svg%3E%0A");
	--icon-menu-close: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.4 19L5 17.6L10.6 12L5 6.4L6.4 5L12 10.6L17.6 5L19 6.4L13.4 12L19 17.6L17.6 19L12 13.4L6.4 19Z' fill='%23181818'/%3E%3C/svg%3E%0A");
	--icon-arrow-right: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6 12L8 7.4L9.4 6L15.4 12L9.4 18L8 16.6L12.6 12Z' fill='%23181818'/%3E%3C/svg%3E%0A");
	--icon-long-arrow-right: url("data:image/svg+xml,%3Csvg width='40' height='6' viewBox='0 0 40 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M38.3673 5.10917L35.6168 0.419214L36.4812 0L40 6H0V5.10917H38.3673Z' fill='%23181818'/%3E%3C/svg%3E%0A");
	--icon-walk: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7 23L9.8 8.9L8 9.6V13H6V8.3L11.05 6.15C11.2833 6.05 11.5292 5.99167 11.7875 5.975C12.0458 5.95833 12.2917 5.99167 12.525 6.075C12.7583 6.15833 12.9792 6.275 13.1875 6.425C13.3958 6.575 13.5667 6.76667 13.7 7L14.7 8.6C15.1333 9.3 15.7208 9.875 16.4625 10.325C17.2042 10.775 18.05 11 19 11V13C17.8333 13 16.7917 12.7583 15.875 12.275C14.9583 11.7917 14.175 11.175 13.525 10.425L12.9 13.5L15 15.5V23H13V16.5L10.9 14.9L9.1 23H7ZM13.5 5.5C12.95 5.5 12.4792 5.30417 12.0875 4.9125C11.6958 4.52083 11.5 4.05 11.5 3.5C11.5 2.95 11.6958 2.47917 12.0875 2.0875C12.4792 1.69583 12.95 1.5 13.5 1.5C14.05 1.5 14.5208 1.69583 14.9125 2.0875C15.3042 2.47917 15.5 2.95 15.5 3.5C15.5 4.05 15.3042 4.52083 14.9125 4.9125C14.5208 5.30417 14.05 5.5 13.5 5.5Z' fill='%23181818'/%3E%3C/svg%3E%0A");
	--icon-booking: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.95 18.35L7.4 14.8L8.85 13.35L10.95 15.45L15.15 11.25L16.6 12.7L10.95 18.35ZM5 22C4.45 22 3.97917 21.8042 3.5875 21.4125C3.19583 21.0208 3 20.55 3 20V6C3 5.45 3.19583 4.97917 3.5875 4.5875C3.97917 4.19583 4.45 4 5 4H6V2H8V4H16V2H18V4H19C19.55 4 20.0208 4.19583 20.4125 4.5875C20.8042 4.97917 21 5.45 21 6V20C21 20.55 20.8042 21.0208 20.4125 21.4125C20.0208 21.8042 19.55 22 19 22H5ZM5 20H19V10H5V20ZM5 8H19V6H5V8Z' fill='%23181818'/%3E%3C/svg%3E%0A");
}
.pbs-none {
	padding-block-start: 0;
}
p {
	padding-block-start: calc(16 * var(--rem));
}
h2 {
	font-size: calc(30 * var(--rem));
	line-height: 150%;
	letter-spacing: 0.02em;
	font-weight: 800;
	font-family: "Shippori Mincho", system-ui;
	padding-block-start: calc(64 * var(--rem));
	@media screen and (min-width: 641px) {
		font-weight: 800;
	}
	@media screen and (min-width: 1072px) {
		font-size: calc(36 * var(--rem));
		line-height: 140%;
		letter-spacing: 0em;
	}
}
h2.h-deco {
	display: grid;
    grid-template-columns: calc(30 * var(--rem)) auto;
	gap: calc(8 * var(--rem));
	&::before {
		content: "";
		display: inline-block;
		width: calc(30 * var(--rem));
		height: calc(28 * var(--rem));
		background: url("data:image/svg+xml,%3Csvg width='36' height='35' viewBox='0 0 36 35' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.89474 1.89474H32.2105V32.2105H1.89474V1.89474ZM0 34.1053V0H34.1053V34.1053H0ZM4.73682 4.73685H29.3684V29.3684H4.73682V4.73685ZM3.78945 30.3158V3.78948H30.3158V30.3158H3.78945Z' fill='white'/%3E%3Cpath d='M36 21.3158C36 24.1935 33.6672 26.5263 30.7895 26.5263C27.9118 26.5263 25.579 24.1935 25.579 21.3158C25.579 18.4381 27.9118 16.1053 30.7895 16.1053C33.6672 16.1053 36 18.4381 36 21.3158Z' fill='%23CC412F'/%3E%3C/svg%3E%0A");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		margin-block-start: calc(8 * var(--rem));
	}
	@media screen and (min-width: 1072px) {
		grid-template-columns: calc(36 * var(--rem)) auto;
		&::before {
			width: calc(36 * var(--rem));
			height: calc(34 * var(--rem));
		}
	}
}
body {
	background-image: url(../img/site_bg.jpg);
	color: var(--primary-wh);
	font-size: calc(16 * var(--rem));
	font-weight: 400;
	font-family: "Noto Sans JP", system-ui;
	line-height: 150%;
	letter-spacing: 0.04em;
}
img {
	width: 100%;
	display: block;
}
a {
	color: var(--link-d);
	transition: .3s;
	&:hover {
		color: var(--hover-d);
		cursor: pointer;
	}
}
a[href*="tel:"] {
	pointer-events:auto;
	@media screen and (min-width:641px) {
		pointer-events:none;
		cursor: default;
		text-decoration: none;
		color: var(--body-l);
	}
}

button {
	cursor: pointer;
}

.l__basic {
	padding-block: calc(104 * var(--rem));
	.wrap {
		margin-inline: calc(16 * var(--rem));
		@media screen and (min-width:641px) {
			margin-inline: calc(24 * var(--rem));
		}
		@media screen and (min-width:1072px) {
			max-width: calc(1024 * var(--rem));
			margin-inline: auto;
		}
	}
}
.link-design {
	display: grid;
	grid-template-columns: calc(40 * var(--rem)) auto calc(40 * var(--rem));
	gap: calc(16 * var(--rem));
	align-items: center;
	border: 1px solid var(--wh);
	padding-block: calc(16 * var(--rem));
	width: fit-content;
	margin-inline: auto;
	margin-block-start: calc(16 * var(--rem));
	font-weight: 800;
	line-height: 145%;
	letter-spacing: 0.04em;
	overflow: hidden;
	color: var(--body-d);
	&:hover {
		border-color: var(--hover-d);
	}
	&::before {
		content: "";
		display: inline-block;
		mask-image: var(--icon-long-arrow-right);
		mask-repeat: no-repeat;
		mask-position: center;
		background-color: var(--body-d);
		height: 100%;
		position: relative;
		left: calc(-4 * var(--rem));
		transition: .3s;
	}
	&:hover::before {
		background-color: var(--hover-d);
		left: 0;
	}
	&::after {
		content: "";
		display: inline-block;
	}
}
/*	グローバルナビゲーション
=====================================*/
.global-nav {
	background-color: var(--primary-bk);
	display: flex;
	justify-content: space-between;
	align-items: center;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9998;
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	.logo {
		width: calc(40 * var(--rem));
		margin-inline-start: calc(16 * var(--rem));
		h1 {
			img {
				opacity: 0;
				transition: opacity 0.3s ease-in-out;
			}
			.fedin-logo {
				opacity: 1;
			}
		}
	}
	.nav-links {
		display: flex;
        justify-content: flex-end;
		align-items: center;
		.menu {
			width: calc(260 *  var(--rem));
			position: absolute;
			top: 0;
			right: calc(-260 * var(--rem));
			/*right: 0;*/
			background-color: var(--primary-bk);
			z-index: 9999;
			height: 100vh;
			/*box-shadow: 0px 0px 250px #000000*/
			transition: .3s;
			@media screen and (min-width:1072px) {
				display: block;
				background-color: inherit;
				position: inherit;
				height: inherit;
				width: inherit;
			}
			.hamburger-close {
				border: none;
				width: calc(64 * var(--rem));
				height: calc(64 * var(--rem));
				background-color: var(--primary-wh);
				mask-image: var(--icon-menu-close);
				mask-repeat: no-repeat;
				mask-position: center;
				@media screen and (min-width:1072px) {
					display: none;
				}
				span {
					opacity: 0;
				}
			}
			.links {
				width: fit-content;
				margin-inline: calc(64 * var(--rem));
				@media screen and (min-width:1072px) {
					display: flex;
					margin-inline: 0;
				}
				a {
					display: block;
					padding: calc(16 * var(--rem));
					color: var(--body-d);
					text-decoration: none;
					&:hover {
						color: var(--hover-d);
					}
				}
			}
		}
		.show-panel {
			right: 0;
			box-shadow: 0px 0px 250px var(--bk);
		}
		.nav-buttons {
			display: flex;
			justify-content: flex-end;
			.booking {
				width: calc(64 * var(--rem));
				height: calc(64 * var(--rem));
				@media screen and (min-width:481px) {
						width: inherit;
				}
				a {
					display: grid;
					place-items: center;
					width: calc(64 * var(--rem));
					height: calc(64 * var(--rem));
					text-decoration: none;
					margin-inline: auto;
					align-items: center;
					background-color: var(--link-d);
					color: var(--body-d);
					font-family: "Shippori Mincho", serif;
					font-weight: 800;
					&:hover {
						background-color: var(--hover-d);
					}
					@media screen and (min-width:481px) {
						width: inherit;
						grid-template-columns: calc(64 * var(--rem)) auto calc(64 * var(--rem));
						&::before {
							content: "";
							display: inline-block;
							width: calc(64 * var(--rem));
							height: 100%;
							background-color: var(--body-d);
							mask-image: var(--icon-booking);
							mask-repeat: no-repeat;
							mask-position: center;
						}
						&::after {
							content: "";
							display: inline-block;
							width: calc(64 * var(--rem));
							height: auto;
						}
						@media screen and (min-width:641px) {
							gap: calc(16 * var(--rem));
						}
					}
					span {
						position: absolute;
						width: 1px;
						height: 1px;
						padding: 0;
						margin: -1px;
						overflow: hidden;
						clip: rect(0, 0, 0, 0);
						border: 0;
						white-space: nowrap;
						@media screen and (min-width:641px) {
							display: contents;
						}
					}
				}
			}
			.hamburger-open {
				border: none;
				width: calc(64 * var(--rem));
				height: calc(64 * var(--rem));
				background-color: var(--primary-wh);
				mask-image: var(--icon-menu-open);
				mask-repeat: no-repeat;
				mask-position: center;
				@media screen and (min-width:1072px) {
					display: none;
				}
				span {
					opacity: 0;
				}
			}
		}
	}
}

/*	hero
=====================================*/
.hero {
	margin-block-start: calc(64 * var(--rem));
	background-color: var(--primary-bk);
	padding-block: calc(64 * var(--rem	)) calc(1098 * var(--vw));
	@media screen and (min-width:481px) {
		padding-block-end: calc(1016 * var(--vw));
	}
	@media screen and (min-width:641px) {
		padding-block-end: calc(811 * var(--vw));
	}
	@media screen and (min-width:1072px) {
		padding-block-end: calc(810 * var(--vw));
	}
	.logo {
		width: calc(154 * var(--rem));
		height: calc(154 * var(--rem));
		display: grid;
		place-items: center;
		position: absolute;
		top: 0;
		left: 0;
		background-color: var(--primary-bk);
		z-index: 9999;
		@media screen and (min-width:641px) {
			width: calc(250 * var(--rem));
			height: calc(250 * var(--rem));
		}
		@media screen and (min-width:1072px) {
			width: calc(382 * var(--vw));
			height: calc(382 * var(--vw));
		}
		img {
			width: calc(74 * var(--rem));
			@media screen and (min-width:641px) {
				width: calc(170 * var(--rem));
			}
			@media screen and (min-width:1072px) {
				width: calc(302 * var(--vw));
			}
		}
	}
	.wrap {
		position: relative;
		margin-inline: calc(16 * var(--rem));
		@media screen and (min-width:641px) {
			margin-inline: calc(24 * var(--rem));
		}
		@media screen and (min-width:1072px) {
			margin-inline: 0;
		}
		.sliders {
			@media screen and (min-width:641px) {
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				gap: calc(24 * var(--rem));
				grid-template-areas: "before img img img img img img img img img img after";
			}
			figure {
				@media screen and (min-width:641px) {
					grid-area: img;
					position: relative;
					&::before {
						content: "";
						display: block;
						grid-area: before;
					}
					&::after {
						content: "";
						display: block;
						grid-area: after;
					}
				}
				img {
					border-radius: calc(8 * var(--rem));
					position: absolute;
				}
			}
		}
	}
}

/*	intro
=====================================*/
.intro {
	padding-block: 0;
	background: linear-gradient(180deg, var(--primary-bk) 0%, rgba(24, 24, 24, 0) 100%);
	.wrap {
		@media screen and (min-width:641px) {
			display: grid;
			grid-template-columns: repeat(12, 1fr);
			gap: calc(24 * var(--rem));
			grid-template-areas: "before read-copy read-copy read-copy read-copy read-copy read-copy read-copy read-copy main-copy main-copy after";
			&::before {
				content: "";
				display: inline-block;
				grid-area: before;
			}
			&::after {
				content: "";
				display: inline-block;
				grid-area: after;
			}
		}
		@media screen and (min-width:1072px) {
			grid-template-areas: "read-copy read-copy read-copy read-copy read-copy read-copy read-copy read-copy read-copy read-copy main-copy main-copy";
			&::before {
				display: none;
			}
			&::after {
				display: none;
			}
		}
		.main-copy {
			padding-block-start: 0;
			writing-mode: vertical-rl; /* 縦書き (右から左) */
			text-orientation: upright; /* 文字を直立させる */
			font-family: "Shippori Mincho", system-ui;
			font-size: calc(30 * var(--rem));
			line-height: 145%;
			color: var(--wh);
			letter-spacing: 0.04em;
			text-shadow: 0px 0px 4px rgba(0, 0, 0, 0.5);

			margin-block: auto;
			padding-inline-end: calc(1 * var(--rem));
			position: relative;
			@media screen and (min-width: 641px) {
				grid-area: main-copy;
				font-size: calc(36 * var(--rem));
				margin-inline-start: calc(-138 * var(--rem));
			}
			@media screen and (min-width:1072px) {
				width: 100%;
				margin-inline-start: calc(-200 * var(--rem));
			}
		}
		.read-copy {
			margin-block-start: calc(4 * var(--rem));
			@media screen and (min-width:481px) {
				display: grid;
				grid-template-columns: repeat(12, 1fr); /* 12列を1行で指定 */
				gap: 0px 24px;
				grid-template-areas: "copy copy copy copy copy copy copy img img img img img";
			}
			@media screen and (min-width: 641px) {
				grid-area: read-copy;
				grid-template-columns: subgrid;
				grid-template-areas: "copy copy copy copy img img img img";
				margin-block-start: calc(60 * var(--rem));
			}
			@media screen and (min-width: 1072px) {
				grid-template-areas: "copy copy copy copy copy copy img img img img";
				margin-block-start: 0;
			}
			p {
				@media screen and (min-width:481px) {
					grid-area: copy;
					height: fit-content;
					margin-block: auto;
				}
				@media screen and (min-width:641px) {
					padding-block-start: 0;
				}
			}
			figure {
				width: calc(163 * var(--rem));
				margin-block-start: calc(24 * var(--rem));
				margin-inline: auto;
				@media screen and (min-width:481px) {
					grid-area: img;
					width: 100%;
				}
				@media screen and (min-width:641px) {
					margin-block-start: 0;
				}
				img {
					box-shadow: -20px 20px 0px 0px var(--body-d);
					height: auto;
					@media screen and (min-width: 1072px) {
						box-shadow: -40px 40px 0px 0px var(--body-d);
					}
				}
			}
		}
	}
}

/*	news
=====================================*/
.news {
	.wrap {
		h2 {
			@media screen and (min-width:641px) {
				margin-block-start: calc(2 * var(--rem));/*デザイン調整*/
			}
		}
		.news-lists {
			margin-block-start: calc(8 * var(--rem));
			a {
				color: var(--body-d);
				text-decoration: none;
				display: block;
				padding-block-start: calc(16 * var(--rem));
				transition: .3s;
				.date {
					font-size: calc(14 * var(--rem));
					line-height: 150%;
					letter-spacing: 0.04em;
					padding-block-start: 0;
				}
				.news-title {
					display: grid;
    				grid-template-columns: auto calc(32 * var(--rem)); /* テキストの横幅auto, ::afterは固定幅 */
    				align-items: center; /* テキストと ::after を縦方向中央に揃える */
					font-size: calc(18 * var(--rem));
					line-height: 175%;
					letter-spacing: 0.04em;
					font-weight: 600;
					padding-block-start: 0;
					&::after {
						content: "";
						display: inline-block;
						width: calc(32 * var(--rem));
						height: calc(24 * var(--rem));
						mask-image: var(--icon-arrow-right);
						mask-repeat: no-repeat;
						mask-position: left center;
						background-color: var(--primary-wh);
						transition: .3s;
					}
				}
				&::after {
					content: "";
					display: block;
					width: 100%;
					height: 1px;
					background-color: var(--wh);
					margin-block-start: calc(16* var(--rem));
				}
				&:hover {
					color: var(--hover-d);
					.news-title {
						&::after {
							mask-position: right center;
							background-color: var(--hover-d);
						}
					}
				}
			}
		}
	}
}

/*	about
=====================================*/
.about {
	.wrap {
		h2 {
			margin-block-start: -12px; /*デザイン調整*/
			@media screen and (min-width:481px) {
				margin-block-start: 0; /*デザイン調整*/
			}
		}
		.about-contents {
			@media screen and (min-width: 641px) {
				display: grid;
				grid-template-columns: repeat(2, 1fr);
				gap: calc(24 * var(--rem));
				padding-block-start: calc(24 * var(--rem));
			}
			figure {
				padding-block-start: calc(24 * var(--rem));
				@media screen and (min-width: 641px) {
					padding-block-start: 0;
				}
			}
			.about-info {
				@media screen and (min-width: 641px) {
					margin-block: auto;
				}
				p {
					@media screen and (min-width: 641px) {
						padding-block-start: 0;
					}
				}
				a {
					@media screen and (min-width: 641px) {
						margin-inline: inherit;
					}
				}
			}
		}
	}
}

/*	menu
=====================================*/
.menu {
	.wrap {
		h2 {
			margin-block-start: calc(-2 * var(--rem)); /*デザイン調整*/
			@media screen and (min-width:641px) {
				margin-block-start: calc(1 * var(--rem)); /*デザイン調整*/
			}
			@media screen and (min-width:1072px) {
				margin-block-start: inherit; /*デザイン調整*/
			}
		}
		.menu-gallery {
			padding-block-start: calc(24 * var(--rem));
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: calc(16 * var(--rem));
			@media screen and (min-width:481px) {
				gap: calc(24 * var(--rem));
			}
			@media screen and (min-width:1072px) {
				margin-block-start: calc(-2 * var(--rem)); /*デザイン調整*/
			}
			img {
				width: 100%;
				height: auto;
				object-fit: cover;
			}
		}
	}
}

/*	message
=====================================*/
.message {
	.wrap {
		@media screen and (min-width:641px) {
			margin-inline: 0;
		}
		@media screen and (min-width:1072px) {
			max-width: 100%;
		}
		.message-content {
			@media screen and (min-width:641px) {
				display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: calc(24 * var(--rem));
			}
			figure {
				@media screen and (min-width:641px) {
					display: grid;
					align-content: center;
				}
			}
			.message-txt {
				@media screen and (min-width:641px) {
					margin-inline-end: calc(24 * var(--rem));
					display: grid;
					align-content: center;
				}
				@media screen and (min-width:1072px) {
					max-width: calc(653 * var(--vw));
				}
				h2 {
					width: fit-content;
					margin-inline: auto;
					@media screen and (min-width:641px) {
						padding-block-start: 0;
						margin-inline: inherit;
					}
				}
				p {
					padding-block-start: calc(16 * var(--rem));
				}
				/* h2に隣接する最初のpタグにのみ適用 */
				h2 + p:first-of-type {
					margin-block-start: calc(8 * var(--rem));
				}
			}
		}

	}
}

/*	access
=====================================*/
.access {
	.wrap {
		.g-map {
			padding-block-start: calc(24 * var(--rem));
			margin-block-end: calc(-6 * var(--rem));/*デザイン調整用*/
			iframe {
				aspect-ratio: 16 / 9;
				width: 100%;
				height: auto;
				border: 0;
			}
		}
		.a-way {
			display: grid;
			grid-template-columns: calc(24 * var(--rem)) auto;
			gap: calc(8 * var(--rem));
			width: fit-content;
			margin-inline: auto;
			&::before {
				content: "";
				display: inline-block;
				width: calc(24 * var(--rem));
				height: calc(24 * var(--rem));
				background-color: var(--primary-wh);
				mask-image: var(--icon-walk);
				mask-repeat: no-repeat;
				mask-size: contain;
			}
		}
	}
}

/*	footer + copyright
=====================================*/
footer {
	background-color: var(--primary-wh);
	color: var(--body-l);
	.wrap {
		.footer-items {
			@media screen and (min-width:481px) {
				display: grid;
				grid-template-columns: repeat(12, 1fr);
				gap: calc(24 * var(--rem));
				grid-template-areas: "logo logo logo logo info info info info info info info info";
			}
			.logo {
			width: calc(192 * var(--rem));
			margin-inline: auto;
			@media screen and (min-width:481px) {
				grid-area: logo;
				width: 100%;
			}
			}
			.shop-info {
				margin-block-start: calc(8 * var(--rem));
					@media screen and (min-width:481px) {
					grid-area: info;
					margin-block-start: 0;
					height: fit-content;
					margin-block: auto;
					p:first-of-type {
						padding-block-start: 0;
					}
				}
			}
		}
	}
}
.copyright {
	background-color: var(--primary-wh);
	color: var(--body-l);
	padding: calc(16 * var(--rem));
	p {
		text-align: right;
		width: fit-content;
		margin-inline: auto;
		@media screen and (min-width:481px) {
			width: 100%;
			br {
				display: none;
			}
		}
	}
}