/* ---------------------------------------------------
  RESET: 基本初期化
--------------------------------------------------- */
:where(*),
:where(*::before),
:where(*::after) {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	list-style: none;
}

:where(table) {
	border-collapse: collapse;
	border-spacing: 0;
	font-size: inherit;
}

:where(caption, th) {
	text-align: left;
	font-size: inherit;
}

:where(address, b, caption, cite, code, dfn, em, i, strong, th, var) {
	font-style: normal;
	font-weight: normal;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-size: inherit;
	font-weight: inherit;
}

:where(img, fieldset, area) {
	border: 0;
}

:where(img) {
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

:where(picture) {
	display: block;
}

:where(svg) {
	display: block;
}

/* ---------------------------------------------------
:root カスタムプロパティ
--------------------------------------------------- */
:root {
	--design-width: 1366;
	--sp-design-width: 375;
	--base-font-size: 10;

	--gothic: "Noto Sans JP", sans-serif;
	--mincho: "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;

	--blk: 0, 0, 0;
	--wht: 255, 255, 255;
	--ylw: 255, 225, 121;

	--body: 232, 213, 189;
	--nav: 86, 51, 39;
	--text: 101, 70, 60;

	--shop-bg-pink: 197, 135, 112;
	--shop-bg-brown: 149, 122, 113;
	--fun: 0, 179, 191;

	--pageTop-right: 1rem;
	--pageTop-bottom: 1rem;
}

/* ---------------------------------------------------
	HTML / BODY 基本
--------------------------------------------------- */
html {
	font-size: min(calc(var(--base-font-size) * 1px), calc(var(--base-font-size) * 100vw / var(--design-width)));
	scroll-behavior: smooth;
}

@media screen and (max-width: 768px) {
	html {
		font-size: calc(var(--base-font-size) * 100vw / var(--sp-design-width));
	}
}

body {
	background: rgb(var(--body));
	line-height: 1.8;
	color: rgb(var(--text));
	font-family: var(--mincho);
	font-feature-settings: "palt"1;
	letter-spacing: 0.05em;
	font-weight: 400;
}

:where(input, select, textarea, button, label) {
	background: none;
	color: inherit;
	font: inherit;
	border: none;
	outline: none;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
}

:where(button, [type="button"], [type="submit"], [type="reset"], label[for]) {
	cursor: pointer;
}

:where(textarea) {
	resize: vertical;
}

:where(svg, video, iframe) {
	max-width: 100%;
}

:where(iframe) {
	display: block;
}

:where(a) {
	color: inherit;
	text-decoration: underline;
	transition: all 0.5s ease 0s;
}

:where(a:hover) {
	text-decoration: none;
	opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}


/* ---------------------------------------------------
  表示切り替え（PC / SP）
--------------------------------------------------- */
.pc {
	display: block;
}

.sp {
	display: none;
}

@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}
}

/* ---------------------------------------------------
  汎用リスト
--------------------------------------------------- */
ul.list li {
	margin-left: 1em;
	text-indent: -1em;
}

ul.list.en li {
	margin-left: 0.5em;
	text-indent: -0.5em;
}

ul.note li {
	font-size: 1.2rem;
}

ul.note li::before {
	content: "※";
}

@media screen and (max-width: 768px) {}

/* circle */
ul.circle li::before {
	content: "●";
}

/* dots */
/* 🗑️ .dots には、.list は不要 */
ul.dots li {
	position: relative;
	padding-left: 1em;
}

ul.dots li::before {
	position: absolute;
	top: 0;
	left: 0;
	content: "・";
}

/* カウンター付き番号リスト */
ol.cnt li {
	margin-left: 1.8em;
	text-indent: -1.8em;
	counter-increment: number;
}

ol.cnt li::before {
	content: "("counter(number) ")";
}

/* ---------------------------------------------------
  iframe動画ラッパー
--------------------------------------------------- */
.video {
	width: 100%;
	aspect-ratio: 16 / 9;
}

.video iframe {
	width: 100%;
	height: 100%;
}

/* ---------------------------------------------------
  電話リンク
--------------------------------------------------- */
.telephone {
	text-decoration: none;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	.telephone {
		pointer-events: all;
	}
}

/* ---------------------------------------------------
  ボタンリンク
--------------------------------------------------- */
.link-button {
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8rem;
	position: relative;
}

.link-button svg {
	flex-shrink: 0;
}

.link-button.cover {
	pointer-events: none;
	z-index: 1;
}

.link-button.cover::before {
	background: rgba(var(--blk), 0.5);
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	content: "";
	z-index: 2;
}

.link-button.comingsoon::before {
	content: "Coming Soon";
}

@media screen and (max-width: 768px) {}

/* ---------------------------------------------------
  ページトップ
--------------------------------------------------- */
.pageTop a {
	background: rgba(var(--nav), 0.6);
	width: 6.4rem;
	height: 6.4rem;
	border-radius: 0.8rem;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: var(--pageTop-right);
	bottom: var(--pageTop-bottom);
	z-index: 10;
}

.pageTop a svg {
	fill: rgb(var(--wht));
	width: 1.6rem;
	height: auto;
}

/* ---------------------------------------------------
  object
--------------------------------------------------- */
.object {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
}

/* ---------------------------------------------------
  slick
--------------------------------------------------- */
.slick-list {
	line-height: 0;
}

.slick-slide {
	line-height: 1.8;
}

/* ---------------------------------------------------
	fade-block
---------------------------------------------------- */
/* ---------------------------------------------------
	必須スタイル
	共通設定
---------------------------------------------------- */
.fadeBlock {
	opacity: 0;
	transition: all 2s;
}

.fadeBlock.fadeIn,
.fadeBlock.is-visible {
	opacity: 1;
}

.fadeBottom {
	transform: translateY(2rem);
}

.fadeBottom.fadeIn,
.fadeBottom.is-visible {
	transform: translateY(0);
}

/* ----------------------------------------------------
	header
---------------------------------------------------- */
.header {
	position: relative;
}

.header__title {
	width: calc(580 / 1366 * 100vw);
	position: absolute;
	top: calc(150 / 1366 * 100vw);
	left: 50%;
	transform: translateX(-50%);
	z-index: 1;
}

.header__slide {
	margin: 0 auto;
	width: calc(1276 / 1366 * 100vw);
}

.header__slide img {
	display: block;
}

@media screen and (max-width: 768px) {
	.header__title {
		width: 33.3rem;
		top: 17.4rem;
	}

	.header__slide {
		width: 100%;
	}
}

/* ---------------------------------------------------
	gnav
---------------------------------------------------- */
.gnav {
	background: rgba(var(--nav), 0.6);
	width: 100%;
	line-height: 1;
	position: fixed;
	top: 0;
	right: 0;
	left: auto;
	z-index: 999;
}

.gnav--all-toggle {
	width: 32rem;
	height: 100%;
	overflow: auto;
	transform: translateX(100%);
	transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.gnav__list {
	padding: 6rem 0 0 2.5rem;
	display: block;
}

.gnav__item a {
	padding: 1em 0;
	color: rgb(var(--ylw));
	font-size: 1.5rem;
	text-decoration: none;
	display: block;
	position: relative;
}

.gnav__item a::after {
	background-color: rgb(var(--ylw));
	width: 100%;
	height: 1px;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.5s ease;
}

.gnav__item a:hover {
	opacity: 1;
}

.gnav__item a:hover::after {
	transform: scaleX(1);
}

body.is-open {
	overflow: hidden;
}

.is-open .gnav--all-toggle {
	transform: translateX(0);
}

/*
	overlay
------------------------------ */
.overlay.is-gnav-overlay {
	background: rgba(var(--blk), 0.5);
	width: 100vw;
	height: 100vh;
	opacity: 0;
	visibility: hidden;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 998;
}

.is-open .overlay.is-gnav-overlay {
	opacity: 1;
	visibility: visible;
	cursor: pointer;
}

/*
	toggle
------------------------------ */
.toggle {
	background: rgba(var(--nav), 0.6);
	width: 7rem;
	height: 7rem;
	display: block;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 1000;
}

.toggle__inner {
	width: 100%;
	height: 100%;
	display: block;
	position: relative;
	cursor: pointer;
}

.toggle__line {
	background: rgb(var(--ylw));
	width: 3.2rem;
	height: 1px;
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	transform-origin: center;
	transition: all 0.6s;
}

.toggle__line:nth-child(1) {
	top: 1.7rem;
}

.toggle__line:nth-child(2) {
	top: 2.9rem;
}

.toggle__label {
	color: rgb(var(--ylw));
	font-size: 1.5rem;
	line-height: normal;
	letter-spacing: 0.08em;
	white-space: nowrap;
	position: absolute;
	bottom: 1rem;
	left: 50%;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

.is-open .toggle {
	background: rgba(var(--nav), 0);
}

.is-open .toggle__line {
	top: 50%;
	transform: translateX(-50%) rotate(0);
	transform-origin: center;
}

.is-open .toggle__line:nth-child(1) {
	transform: translateX(-50%) rotate(45deg);
}

.is-open .toggle__line:nth-child(2) {
	transform: translateX(-50%) rotate(-45deg);
}

.is-open .toggle__label {
	opacity: 0;
	visibility: hidden;
}

@media screen and (max-width: 768px) {
	.toggle {
		width: 6.2rem;
		height: 6.2rem;
	}

	.toggle__label {
		font-size: 1.3em;
		bottom: 0.4rem;
	}
}

/* ----------------------------------------------------
	about
---------------------------------------------------- */
.about {
	background-image: url(../img/about-bg.webp);
	background-position: right bottom 8rem;
	background-repeat: no-repeat;
	background-size: 66.6rem auto;
	margin: 0 auto;
	padding: 10rem 0;
	width: 136.6rem;
}

.about__title {
	margin-bottom: 9rem;
	font-size: 4rem;
	text-align: center;
}

.about__content {
	margin: 0 auto;
	width: 114rem;
}

.about__text {
	margin-bottom: 3rem;
	width: 58.5rem;
	line-height: 1.5;
	font-size: 2.4rem;
}

.about__cooperation {
	margin-bottom: 4rem;
	font-family: var(--gothic);
	font-size: 1.6rem;
	font-weight: 500;
}

.about__icons {
	font-family: var(--gothic);
}

.about__icons--title {
	margin-bottom: 2rem;
	font-size: 2rem;
}

.about__area--list {
	margin-bottom: 2.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
}

.about__area--list::before {
	background-image: url(../img/arrow01.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 1.7rem;
	height: 1.9rem;
	content: "";
}

.about__area--item img {
	width: 7.4rem;
}

.about__legend {
	display: grid;
	gap: 3rem;
}

.about__legend--item {
	display: flex;
	align-items: center;
	gap: 1.8rem;
}

.about__legend--icon {
	flex-shrink: 0;
}

.about__legend--icon img {
	width: 10.8rem;
	display: block;
}

.about__legend--content {
	min-width: 0;
	line-height: normal;
	font-weight: 500;
}

.about__legend--title {
	margin-bottom: 0.5rem;
	font-size: 2rem;
}

.about__legend--text {
	font-size: 1.6rem;
}

@media screen and (max-width: 768px) {
	.about {
		background-image: url(../img/about-bg_sp.webp);
		background-position: center bottom;
		background-size: 100% auto;
		margin-bottom: 4rem;
		padding: 5rem 0 54.4rem;
		width: 100%;
	}

	.about__title {
		margin-bottom: 2rem;
		line-height: 1.5;
		font-size: 2.4rem;
	}

	.about__content {
		padding: 0 1.5rem;
		width: 100%;
	}

	.about__text {
		margin-bottom: 2rem;
		width: 100%;
		font-size: 1.6rem;
	}

	.about__cooperation {
		margin-bottom: 5rem;
		font-size: 1.4rem;
	}

	.about__icons--title {
		margin-bottom: 1rem;
		font-size: 1.5rem;
		text-align: center;
	}

	.about__area--list {
		margin-bottom: 3rem;
		justify-content: center;
	}

	.about__area--list::before {
		width: 1.3rem;
		height: 1.4rem;
	}

	.about__area--item img {
		width: 5.7rem;
	}

	.about__legend {
		gap: 2rem;
	}

	.about__legend--item {
		align-items: flex-start;
		gap: 0.8rem;
	}

	.about__legend--icon img {
		width: 7.8rem;
	}

	.about__legend--title,
	.about__legend--text {
		font-size: 1.5rem;
	}
}

/* ----------------------------------------------------
	message
---------------------------------------------------- */
.message {
	background-color: rgba(var(--wht), 0.5);
	margin: 0 auto 15rem;
	padding: 6rem 11rem 15rem;
	width: 114rem;
	border-radius: 1.5rem;
}

.message__title {
	margin-bottom: 5rem;
	line-height: 1;
	font-size: 4rem;
	text-align: center;
}

.message__toggle {
	width: 100%;
	text-align: inherit;
	cursor: default;
}

.message__list--guests {
	margin-bottom: 6rem;
	padding-bottom: 6rem;
	position: relative;
}

.message__list--guests::after {
	background-color: rgb(var(--text));
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 0;
	left: 0;
	content: "";
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='2' viewBox='0 0 7 2'%3E%3Crect width='3' height='2' rx='3' fill='white'/%3E%3C/svg%3E") left top / 7px 2px repeat-x;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='2' viewBox='0 0 7 2'%3E%3Crect width='3' height='2' rx='3' fill='white'/%3E%3C/svg%3E") left top / 7px 2px repeat-x;
}

.message__item {
	display: flex;
	gap: 5rem;
	position: relative;
}

.message__item .logo {
	width: 6.8rem;
	height: 9.1rem;
	position: absolute;
	top: -1.3rem;
	right: 0;
}

.message__item:not(:last-of-type) {
	margin-bottom: 6rem;
}

.message__list--guests .message__item {
	display: grid;
	grid-template-columns: 23.4rem minmax(0, 1fr);
	grid-template-rows: auto 1fr;
	grid-template-areas: "image heading""image body";
	align-items: start;
	gap: 0 5rem;
}

.message__list--guests .message__heading {
	font-family: var(--gothic);
	grid-area: heading;
}

.message__list--guests .message__image {
	grid-area: image;
}

.message__list--guests .message__body {
	grid-area: body;
}

.message__image {
	width: 23.4rem;
	flex-shrink: 0;
}

.message__body {
	min-width: 0;
	font-family: var(--gothic);
	flex: 1;
}

.message__heading {
	line-height: normal;
	font-size: 2.3rem;
	font-weight: 500;
}

.message__name {
	margin: 1rem 0;
	line-height: normal;
	color: rgb(var(--blk));
	font-size: 2.4rem;
}

.message__role {
	font-size: 2rem;
	display: block;
}

.message__text {
	color: rgb(var(--blk));
	font-size: 1.6rem;
}

.message__hotel {
	margin-bottom: 3rem;
	font-family: var(--gothic);
	font-size: 2.4rem;
	font-weight: 500;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.message {
		margin: 0 auto 5rem;
		padding: 5rem 2rem;
		width: 34.5rem;
	}

	.message.is-collapsed .message__title {
		margin-bottom: 0;
	}

	.message__title {
		font-size: 3.6rem;
		transition: margin-bottom 0.4s;
	}

	.message__toggle {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
		cursor: pointer;
	}

	.message__toggle::after {
		background-color: currentColor;
		width: 1.7rem;
		height: 1.2rem;
		flex-shrink: 0;
		clip-path: polygon(0 0, 100% 0, 50% 100%);
		content: "";
		transition: transform 0.4s;
	}

	.message__toggle[aria-expanded="true"]::after {
		transform: rotate(180deg);
	}

	.message__list--guests {
		margin-bottom: 3rem;
		padding-bottom: 3rem;
	}

	.message__item {
		display: block;
	}

	.message__item .logo {
		display: none;
	}

	.message__list--guests .message__item {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto;
		grid-template-areas: "heading""image""body";
		gap: 0;
	}

	.message__list--guests .message__heading {
		margin-bottom: 2rem;
	}

	.message__item:not(:last-of-type) {
		margin-bottom: 5rem;
	}

	.message__image {
		margin: 0 auto;
		width: 15.7rem;
	}

	.message__image.miyashita {
		width: 27.7rem;
	}

	.message__heading {
		font-size: 2rem;
		text-align: center;
	}

	.message__name,
	.message__role {
		font-size: 1.6rem;
		text-align: center;
	}

	.message__hotel {
		margin-bottom: 1.5rem;
		font-size: 2rem;
	}

	.message__list--staff .message__heading {
		margin-top: 2rem;
		font-size: 1.5rem;
	}
}

/* ----------------------------------------------------
	shop
---------------------------------------------------- */
.shop {
	padding: 10rem 0;
}

.shop__content {
	margin: 0 auto;
	width: 114rem;
}

.shop__title {
	margin-bottom: 5rem;
	line-height: normal;
	font-size: 3.6rem;
	font-weight: 600;
	text-align: center;
}

.shop__title--place {
	font-family: var(--gothic);
	font-size: 2rem;
	font-weight: 400;
	display: block;
}

.hapuna .shop__title,
.table9 .shop__title,
.daihanten .shop__title,
.maunakea .shop__title {
	color: rgb(var(--ylw));
}

.shop__lead {
	margin-bottom: 4rem;
	font-family: var(--gothic);
	font-size: 1.8rem;
	text-align: center;
}

.shop__image {
	margin-bottom: 2rem;
}

.shop__detail {
	margin-bottom: 8rem;
	position: relative;
}

.shop__info {
	margin-bottom: 2rem;
}

.shop__price,
.shop__period,
.shop__menu {
	font-size: 1.6rem;
}

.shop__detail .list.note {
	margin-top: 1rem;
}

.shop__period {
	margin-top: 1rem;
}

.shop__menu {
	display: grid;
	align-items: start;
	gap: 3rem;
}

.shop__menu--title {
	margin-bottom: 1rem;
}

.shop__menu--title img {
	width: 10rem;
	height: 6.4rem;
}

.shop__menu--heading {
	font-size: inherit;
	font-weight: 400;
}

.shop__menu--list+.shop__menu--heading {
	margin-top: 3rem;
}

.shop__menu--label {
	margin-left: 0.5rem;
	width: 4.8rem;
	height: auto;
	vertical-align: -0.15em;
}

.shop__menu--label+.shop__menu--label {
	margin-left: 0;
}

.shop__menu--other {
	margin-left: 2rem;
}

.shop__category {
	margin-bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1.2rem;
}

.shop__category img {
	width: 10rem;
	height: auto;
}

.shop__dish {
	margin-bottom: 3rem;
	font-size: 1.6rem;
}

.shop__dish:last-child {
	margin-bottom: 0;
}

.shop__dish--subtitle {
	color: rgb(var(--ylw));
}

.shop__dish--title {
	font-size: inherit;
	font-weight: 400;
}

.shop__dish--title::before {
	content: "●";
}

.shop__dish .list.note {
	margin-top: 0;
}

.shop__status {
	color: rgb(var(--ylw));
}

.shop__dish--title .shop__status {
	margin-left: 1rem;
}

.shop__detail>.object {
	background-size: contain;
	pointer-events: none;
}


.shop .link-button {
	background-color: rgba(81, 130, 90, 1);
	margin: 0 auto;
	width: 45.5rem;
	height: 7.8rem;
	color: rgb(var(--wht));
	font-family: var(--gothic);
	font-size: 2.4rem;
	border-radius: 1rem;
}

.shop .link-button svg {
	width: 1.2rem;
	height: auto;
	fill: none;
	stroke: rgb(var(--wht));
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
	.shop {
		padding: 5rem 0;
	}

	.shop__content {
		width: 33rem;
	}

	.shop__title {
		margin-bottom: 1.5rem;
		line-height: 1.5;
		font-size: 2.4rem;
	}

	.shop__title--place {
		font-size: 1.6rem;
	}

	.shop__lead {
		margin-bottom: 3rem;
		font-size: 1.6rem;
		text-align: left;
	}

	.shop__detail {
		margin-bottom: 4rem;
	}

	.shop__price,
	.shop__dish {
		font-size: 1.5rem;
	}

	.shop__menu,
	.shop__period {
		font-size: 1.6rem;
	}

	.shop__menu--title {
		margin-bottom: 1.5rem;
	}

	.shop__menu--title img {
		margin: 0 auto;
		width: 7rem;
		height: auto;
		display: block;
	}

	.shop__menu--list.circle li {
		padding-left: 1em;
		text-indent: 0;
		position: relative;
	}

	.shop__menu--list.circle li::before {
		position: absolute;
		top: 0;
		left: 0;
	}

	.shop__menu--label {
		width: 4.2rem;
		text-indent: 0;
	}

	.shop__menu--other {
		display: inline-block;
		text-indent: 0;
	}

	.shop__category {
		margin-bottom: 2rem;
		justify-content: center;
	}

	.shop__category img {
		width: 7.8rem;
	}

	.shop__dish {
		margin-bottom: 2.5rem;
	}

	.shop__dish--title {
		padding-left: 1em;
		text-indent: -1em;
	}

	.shop__dish--title .shop__menu--label {
		display: inline-block;
	}

	.shop__dish--text br:not(.sp) {
		display: none;
	}

	.shop .link-button {
		width: 100%;
		height: 6.8rem;
		font-size: 1.8rem;
	}

	.shop .link-button svg {
		width: 1rem;
		right: 2rem;
	}
}

/* ----------------------------------------------------
	hapuna
---------------------------------------------------- */
.hapuna {
	background-color: rgb(var(--shop-bg-pink));
	color: rgb(var(--wht));
}

.hapuna .shop__detail {
	font-family: var(--gothic);
	letter-spacing: 0;
}

.hapuna .shop__menu {
	grid-template-columns: 27rem minmax(0, 1fr) 24rem;
}

.hapuna .shop__menu--side {
	padding-top: 7.4rem;
}

.hapuna__coffee {
	margin: 4rem auto 0;
	padding: 2rem;
	width: 88rem;
	display: grid;
	grid-template-columns: 22rem minmax(0, 1fr) 27rem;
	align-items: center;
	gap: 2rem;
	border: 1px solid rgba(var(--wht), 0.6);
}

.hapuna__coffee--soft {
	text-align: center;
}

.hapuna__coffee--image {
	width: 100%;
	height: auto;
	display: block;
}

.hapuna__coffee--soft figcaption {
	font-size: 1.6rem;
}

.hapuna__coffee--text {
	line-height: 1.5;
	font-size: 2rem;
}

.hapuna__coffee--text .title {
	margin-bottom: 2.5rem;
	color: rgb(var(--ylw));
	font-size: 2.4rem;
	font-weight: 400;
}

.hapuna__coffee--store figcaption {
	margin-top: 0.5rem;
	font-size: 1.2rem;
	text-align: right;
}

@media screen and (max-width: 768px) {
	.hapuna .shop__info {
		margin-bottom: 2.5rem;
	}

	.hapuna .shop__period {
		margin-top: 2rem;
		text-align: center;
	}

	.hapuna .shop__menu {
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
	}

	.hapuna .shop__menu--arrange {
		margin-top: 4rem;
	}

	.hapuna .shop__menu--side {
		margin-top: 2.5rem;
		padding-top: 0;
	}

	.hapuna .shop__menu--arrange .shop__menu--other {
		margin-left: 0;
		display: block;
	}

	.hapuna .shop__menu+.list.note {
		margin-top: 1.5rem;
	}

	.hapuna__coffee {
		margin-top: 2.5rem;
		padding: 2.5rem 2rem 2rem;
		width: 100%;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}

	.hapuna__coffee--text {
		line-height: 1.8;
		font-size: 1.6rem;
		text-align: center;
		grid-row: 1;
	}

	.hapuna__coffee--text .title {
		margin-bottom: 2rem;
		font-size: 2.4rem;
	}

	.hapuna__coffee--soft {
		display: flex;
		align-items: flex-end;
	}

	.hapuna__coffee--soft .hapuna__coffee--image {
		width: 60%;
	}

	.hapuna__coffee--soft figcaption {
		margin-bottom: 0.5rem;
		font-size: 1.5rem;
		flex: 1;
		white-space: nowrap;
	}

	.hapuna__coffee--store {
		margin: 0 auto;
		width: 27rem;
		max-width: 100%;
	}

	.hapuna__coffee--store figcaption {
		font-size: 1rem;
	}
}


/* ----------------------------------------------------
	table9
---------------------------------------------------- */
.table9 {
	background-color: rgb(var(--shop-bg-brown));
	color: rgb(var(--wht));
}

.table9 .shop__detail {
	font-family: var(--gothic);
	letter-spacing: 0;
}

.table9__image {
	margin-left: 4rem;
	width: 45rem;
	float: right;
}

.table9__image img {
	width: 100%;
	height: auto;
	display: block;
}

.table9__image~.shop__category:not(:nth-child(2)) {
	clear: both;
}

.table9__story {
	margin: 5rem auto 0;
	padding: 2rem;
	width: 88rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 27rem;
	align-items: center;
	gap: 4rem;
	border: 1px solid rgba(var(--wht), 0.6);
	clear: both;
}

.table9__story--text {
	padding-left: 3rem;
	line-height: 1.5;
	font-size: 2rem;
}

.table9__story--text .title {
	margin-bottom: 2.5rem;
	color: rgb(var(--ylw));
	font-size: 2.4rem;
	font-weight: 400;
}

.table9__story--image img {
	width: 100%;
	height: auto;
	display: block;
}


@media screen and (max-width: 768px) {
	.table9 .shop__detail {
		display: flex;
		flex-direction: column;
	}

	.table9__image {
		margin: 0;
		width: 100%;
		float: none;
		order: 1;
	}

	.table9 .shop__dish+.shop__category {
		margin-top: 1rem;
	}

	.table9 .shop__dish--title {
		margin-bottom: 0.5rem;
	}

	.table9__story {
		margin-top: 4.5rem;
		padding: 2.5rem;
		width: 100%;
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
		order: 2;
	}

	.table9__story--text {
		padding-left: 0;
		line-height: 1.8;
		font-size: 1.6rem;
	}

	.table9__story--text .title {
		margin-bottom: 2rem;
		font-size: 2.4rem;
		text-align: center;
	}

	.table9__story--text .text br {
		display: none;
	}

	.table9__story--image {
		margin: 0 auto;
		width: 24rem;
		max-width: 100%;
	}
}

/* ----------------------------------------------------
	gojusantsugi
---------------------------------------------------- */
.gojusantsugi {}

.gojusantsugi .shop__detail {
	font-family: var(--gothic);
	letter-spacing: 0;
}

.gojusantsugi .shop__dish+.shop__category {
	margin-top: 4.5rem;
}

.gojusantsugi__object {
	background-image: url(../img/gojusantsugi-obj.webp);
	width: 25.5rem;
	height: 25.5rem;
	top: 3rem;
	right: 4.5rem;
}


@media screen and (max-width: 768px) {
	.gojusantsugi .shop__dish+.shop__category {
		margin-top: 2rem;
	}

	.gojusantsugi .shop__dish:last-child .shop__dish--text {
		padding-right: 8rem;
	}

	.gojusantsugi__object {
		width: 8rem;
		height: 8rem;
		top: auto;
		right: 0;
		bottom: 0;
	}
}

/* ----------------------------------------------------
	daihanten
---------------------------------------------------- */
.daihanten {
	background-color: rgb(var(--shop-bg-brown));
	color: rgb(var(--wht));
}

.daihanten .shop__detail {
	font-family: var(--gothic);
	letter-spacing: 0;
}

.daihanten .shop__dish+.shop__category {
	margin-top: 4rem;
}


@media screen and (max-width: 768px) {
	.daihanten .shop__dish+.shop__category {
		margin-top: 3rem;
	}
}

/* ----------------------------------------------------
	boulangerie
---------------------------------------------------- */
.boulangerie {}

.boulangerie .shop__detail {
	font-family: var(--gothic);
	letter-spacing: 0;
}

.boulangerie .shop__category {
	gap: 2rem;
}

.boulangerie .shop__category .boulangerie__arrow {
	width: 23.4rem;
	height: 6.3rem;
}

.boulangerie__object {
	background-image: url(../img/boulangerie-obj.webp);
	width: 27.2rem;
	height: 27.2rem;
	top: -1.8rem;
	right: 0;
}


@media screen and (max-width: 768px) {
	.boulangerie .shop__category {
		margin-bottom: 0.5rem;
		flex-direction: column;
		gap: 1rem;
	}

	.boulangerie .shop__category .boulangerie__arrow {
		width: 16.4rem;
		height: auto;
		align-self: flex-start;
	}

	.boulangerie__object {
		width: 11rem;
		height: 11rem;
		top: -1rem;
		right: 0;
	}
}

/* ----------------------------------------------------
	maunakea
---------------------------------------------------- */
.maunakea {
	background-color: rgb(var(--shop-bg-pink));
	color: rgb(var(--wht));
}

.maunakea .shop__detail {
	font-family: var(--gothic);
	letter-spacing: 0;
}

.maunakea__menu {
	padding-left: 2.5rem;
	counter-reset: maunakea-menu;
}

.maunakea__menu>.shop__dish {
	position: relative;
	counter-increment: maunakea-menu;
}

.maunakea__menu>.shop__dish::before {
	line-height: 1;
	font-family: var(--mincho);
	font-size: 2.4rem;
	position: absolute;
	top: 0.4rem;
	left: -2.5rem;
	content: counter(maunakea-menu);
}

.maunakea__title--return {
	width: fit-content;
	position: relative;
}

.maunakea__arrow {
	margin-left: 4rem;
	width: 23.4rem;
	height: 6.3rem;
	position: absolute;
	top: 0.4rem;
	left: 100%;
}

.maunakea__object {
	background-image: url(../img/maunakea-obj.webp);
	width: 30.8rem;
	height: 30.8rem;
	top: 0;
	right: 0;
}


@media screen and (max-width: 768px) {
	.maunakea .shop__detail {
		padding-bottom: 6rem;
	}

	.maunakea__menu {
		padding-left: 2.2rem;
	}

	.maunakea__menu>.shop__dish {
		margin-bottom: 4rem;
	}

	.maunakea__menu>.shop__dish:last-child {
		margin-bottom: 0;
		padding-top: 5rem;
	}

	.maunakea__menu>.shop__dish::before {
		font-size: 2.2rem;
		left: -2.2rem;
	}

	.maunakea__menu>.shop__dish:last-child::before {
		top: 5.4rem;
	}

	.maunakea .shop__dish--title .shop__status {
		margin-left: 0;
		display: block;
		text-indent: 0;
	}

	.maunakea__title--return {
		width: auto;
	}

	.maunakea__arrow {
		margin-left: 0;
		width: 16.4rem;
		height: auto;
		top: -5rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.maunakea__object {
		width: 12rem;
		height: 12rem;
		top: auto;
		right: 0;
		bottom: -2rem;
	}
}

/* ----------------------------------------------------
	plan
---------------------------------------------------- */
.plan {
	background-image: url(../img/plan-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 12rem 0;
	color: rgb(var(--wht));
	text-align: center;
}

.plan__title {
	margin-bottom: 2rem;
	font-size: 4rem;
	font-weight: 600;
}

.plan__content {
	margin-bottom: 6.4rem;
}

.plan__content--title {
	margin-bottom: 3rem;
	font-size: 2.8rem;
	font-weight: 600;
}

.plan__content--text {
	font-family: var(--gothic);
	font-size: 2.4rem;
}

.plan .link-button {
	background-color: rgba(var(--wht), 0.6);
	margin: 0 auto;
	width: 45.5rem;
	height: 7rem;
	color: rgb(var(--text));
	font-family: var(--gothic);
	font-size: 2.4rem;
	font-weight: 600;
	border-radius: 1rem;
}

.plan .link-button svg {
	width: 1.2rem;
	height: auto;
	fill: none;
	stroke: rgb(var(--text));
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
	.plan {
		background-image: url(../img/plan-bg_sp.webp);
		padding: 5rem 0;
	}

	.plan__title {
		margin-bottom: 1rem;
		font-size: 2.4rem;
	}

	.plan__content {
		margin-bottom: 4rem;
	}

	.plan__content--title {
		margin-bottom: 2rem;
		font-size: 1.6rem;
	}

	.plan__content--text {
		font-size: 1.6rem;
	}

	.plan .link-button {
		width: 34.5rem;
		font-size: 1.8rem;
	}

	.plan .link-button svg {
		width: 1rem;
		right: 2rem;
	}
}

/* ----------------------------------------------------
	fun
---------------------------------------------------- */
.fun {
	background-color: rgba(245, 242, 233, 1);
	padding: 10rem 0;
	font-family: var(--gothic);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 9rem 13rem;
}

.fun__logo {
	width: 29.8rem;
}

.fun__content--title {
	margin-bottom: 2rem;
	line-height: normal;
	color: rgb(var(--fun));
	font-size: 3.2rem;
	font-weight: 700;
}

.fun__content--title img {
	width: 45.3rem;
}

.fun__content--title .text {
	margin-top: 2rem;
	display: block;
}

.fun__content--text {
	line-height: 2;
	font-size: 1.6rem;
}

.fun__link {
	width: 100%;
}

.fun__link .link-button {
	background-color: rgb(var(--fun));
	margin: 0 auto;
	width: 55rem;
	height: 8.8rem;
	color: rgb(var(--wht));
	font-size: 2.4rem;
	font-weight: 600;
	border-radius: 8.8rem;
}

.fun__link .link-button svg {
	width: 1.6rem;
	height: auto;
	fill: none;
	stroke: rgb(var(--wht));
	position: absolute;
	top: 50%;
	right: 3rem;
	transform: translateY(-50%);
}

@media screen and (max-width: 768px) {
	.fun {
		padding: 5rem 0;
		display: block;
	}

	.fun__logo {
		margin: 0 auto 4.5rem;
		width: 16rem;
	}

	.fun__content {
		margin: 0 auto 3rem;
		width: 33rem;
	}

	.fun__content--title {
		font-size: 2.4rem;
		text-align: center;
	}

	.fun__content--title img {
		width: 100%;
	}

	.fun__content--text {
		line-height: 1.8;
		text-align: center;
	}

	.fun__link .link-button {
		width: 34.5rem;
		height: 5.5rem;
		font-size: 1.6rem;
		border-radius: 5.5rem;
	}

	.fun__link .link-button svg {
		width: 1rem;
		right: 2rem;
	}
}

/* ----------------------------------------------------
	contact
---------------------------------------------------- */
.contact {
	padding: 6rem 0;
	text-align: center;
}

.contact__title {
	margin-bottom: 2rem;
	font-size: 2.4rem;
	font-weight: 600;
}

.contact__tel {
	line-height: normal;
	font-size: 4rem;
	font-weight: 600;
}

.contact__note {
	font-family: var(--gothic);
	font-size: 1.6rem;
	font-weight: 400;
	display: block;
}

@media screen and (max-width: 768px) {
	.contact {
		padding: 3rem 0;
	}

	.contact__title {
		margin-bottom: 1rem;
	}

	.contact__tel {
		font-size: 3.6rem;
	}
}

/* ----------------------------------------------------
	hotel
---------------------------------------------------- */
.hotel {
	line-height: normal;
	font-family: var(--gothic);
	text-align: center;
}

.hotel__logo {
	margin: 0 auto 4rem;
	width: 29rem;
}

.hotel__name {
	margin-bottom: 1rem;
	font-size: 2.4rem;
	font-weight: 500;
}

.hotel__address {
	margin-bottom: 4.5rem;
	font-size: 2rem;
}

.hotel__sns {
	margin-bottom: 4.5rem;
	display: flex;
	justify-content: center;
}

.hotel__sns--item {
	margin: 0 1.4rem;
	width: 4rem;
}

.hotel__map iframe {
	width: 100%;
	height: 36.3rem;
}

@media screen and (max-width: 768px) {
	.hotel__logo {
		margin-bottom: 3rem;
		width: 24.4rem;
	}

	.hotel__name {
		font-size: 2rem;
	}

	.hotel__address {
		margin-bottom: 3rem;
		font-size: 1.6rem;
	}

	.hotel__sns {
		margin-bottom: 3rem;
	}

	.hotel__map iframe {
		height: 30rem;
	}
}

/* ----------------------------------------------------
	footer
---------------------------------------------------- */
.footer {
	padding: 3rem 0;
	font-family: var(--gothic);
}

.footer__note {
	margin: 0 auto 3rem;
	width: 99rem;
}

@media screen and (max-width: 768px) {
	.footer__note {
		width: 34.6rem;
	}
}

/* 
	hotel-nav 
------------------------------ */
.footer .hotel-nav {
	line-height: 1;
	font-size: 1.6rem;
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer .hotel-nav::before,
.footer .hotel-nav__item::after {
	content: "|";
}

.footer .hotel-nav__item a {
	padding: 0 1em;
	text-decoration: none;
}

@media screen and (max-width: 768px) {
	.footer .hotel-nav {
		font-size: 4.267vw;
		text-align: center;
		display: block;
	}

	.footer .hotel-nav::before {
		content: "";
	}

	.footer .hotel-nav__item::before,
	.footer .hotel-nav__item::after {
		content: "|";
	}

	.footer .hotel-nav__item:not(:last-of-type) {
		margin-bottom: 1em;
	}
}

/* 
	copy
------------------------------ */
.footer .copy {
	margin-top: 2em;
	line-height: normal;
	font-size: 1.1rem;
	text-align: center;
}