/* ---------------------------------------------------
  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;

	/* weight: 300のみ */
	--mincho: a-otf-ryumin-pr6n, "Yu Mincho Medium", "YuMincho", "Yu Mincho", "Hiragino Mincho ProN", "Hiragino Mincho Pro", "MS PMincho", serif;

	/* weight: 400, 700 */
	--adobe: "adobe-garamond-pro", serif;

	--blk: 0, 0, 0;
	--wht: 255, 255, 255;
	--gld: 153, 133, 66;
	--grn: 17, 49, 43;
	--lgt-gry: 232, 232, 226;
	--gry: 116, 116, 116;
	--med-gry: 131, 132, 132;

	--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;
}

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

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

: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;
}

/* ---------------------------------------------------
  表示切り替え（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.note li {
	font-size: 1.3rem;
}

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

@media screen and (max-width: 768px) {
	ul.note li {
		font-size: 1.1rem;
	}
}

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

/* dots */
ul.dots li {
	position: relative;
	padding-left: 1em;
}

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

/* ---------------------------------------------------
  ボタンリンク
--------------------------------------------------- */
.link-button {
	background-color: rgb(var(--gld));
	background-image: url(../img/arrow-link.svg);
	background-position: right 1.5rem center;
	background-repeat: no-repeat;
	background-size: 2rem auto;
	margin: 0 auto;
	width: 26rem;
	height: 6.2rem;
	color: rgb(var(--wht));
	font-size: 2rem;
	text-decoration: none;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.8rem;
	position: relative;
}

@media screen and (max-width: 768px) {
	.link-button {
		background-position: right 1rem center;
		background-size: 1.2rem auto;
		width: 18rem;
		height: 4.4rem;
		font-size: 1.6rem;
	}
}

/* ---------------------------------------------------
  ページトップ
--------------------------------------------------- */
.pageTop a {
	background: rgba(var(--gld), 0.9);
	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;
}

/* ---------------------------------------------------
  slick
--------------------------------------------------- */
.slick-dotted.slick-slider {
	margin-bottom: 0;
}

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

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

.slick-dots {
	display: flex;
	bottom: 0;
}

.slick-dots li {
	margin: 0;
	width: auto;
	height: auto;
}

.slick-dots li:not(:last-of-type) {
	margin-right: 0.8rem;
}

.slick-dots li button {
	background-color: rgb(var(--wht));
	padding: 0;
	width: 1rem;
	height: 1rem;
	border: solid 1px rgb(var(--wht));
	border-radius: 1rem;
}

.slick-dots li button::before {
	display: none;
}

.slick-dots li.slick-active button {
	background-color: rgb(var(--blk));
}

.slick-arrow {
	width: auto;
	height: auto;
	font-size: 0;
	line-height: 0;
	z-index: 1;
}

.slick-arrow::before {
	display: none;
}

/* ---------------------------------------------------
	bg-fixed
---------------------------------------------------- */
.bg-fixed {
	position: relative;
}

.bg-fixed__media {
	width: 100%;
	height: 100%;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.bg-fixed__clip {
	height: 100%;
	overflow: hidden;
	position: relative;
	clip-path: inset(0 0 0 0);
}

.bg-fixed__clip picture {
	display: block;
}

.bg-fixed__clip img {
	width: 100vw;
	height: 100vh;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	object-fit: cover;
	pointer-events: none;
}

/* ----------------------------------------------------
	header
---------------------------------------------------- */
.header {
	background-image: url(../img/header-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 100dvh;
	position: relative;
}

.header__title {
	width: 28.331vw;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.header__scroll {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: rgb(var(--wht));
	font-family: var(--adobe);
	/* font-size: 1.4rem; */
	font-size: 1.0249vw;
	font-weight: bold;
	position: absolute;
	/* bottom: 5rem; */
	bottom: 3.6603vw;
	left: 50%;
	transform: translateX(-50%);
}

.header__scroll-arrows {
	width: 100%;
	/* min-width: 0.7rem; */
	min-width: 0.5124vw;
	/* height: 2.8rem; */
	height: 2.0498vw;
	display: block;
	position: relative;
}

.header__scroll--arrow {
	background-color: rgb(var(--wht));
	/* width: 0.7rem; */
	width: 0.5124vw;
	/* height: 1rem; */
	height: 0.7321vw;
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	opacity: 0;
	clip-path: polygon(evenodd, 0 0, 100% 0, 50% 100%, 0 0, 20% 10%, 50% 70%, 80% 10%, 20% 10%);
	animation: header-scroll-arrow 2s ease-in-out infinite;
}

.header__scroll--arrow:nth-child(2) {
	animation-delay: 1s;
}

@keyframes header-scroll-arrow {
	0% {
		opacity: 0;
		transform: translate(-50%, 0);
	}

	70% {
		opacity: 1;
	}

	100% {
		opacity: 0;
		/* transform: translate(-50%, 1.4rem); */
		transform: translate(-50%, 1.0249vw);
	}
}

@media screen and (max-width: 768px) {
	.header {
		background-image: url(../img/header-bg_sp.webp);
	}

	.header__title {
		width: 25.4rem;
	}

	.header__scroll {
		font-size: 1.4rem;
		bottom: 4rem;
	}

	.header__scroll-arrows {
		min-width: 0.7rem;
		height: 2.8rem;
	}

	.header__scroll--arrow {
		width: 0.7rem;
		height: 1rem;
	}

	.header__scroll--arrow:nth-child(2) {
		animation-delay: 1s;
	}

	@keyframes header-scroll-arrow {
		0% {
			opacity: 0;
			transform: translate(-50%, 0);
		}

		70% {
			opacity: 1;
		}

		100% {
			opacity: 0;
			transform: translate(-50%, 1.4rem);
		}
	}
}

/* ---------------------------------------------------
	gnav
---------------------------------------------------- */
.gnav {
	background: rgba(var(--grn), 1);
	width: 100%;
	line-height: 1;
	font-family: var(--adobe);
	display: flex;
	justify-content: center;
	position: fixed;
	top: 0;
	right: 0;
	left: auto;
	z-index: 999;
}

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

.gnav__list {
	/* padding: 12rem 4rem 4rem; */
	padding-top: 12rem;
	display: block;
}

.gnav__item:not(:last-of-type) {
	margin-bottom: 3rem;
}

.gnav__item a {
	color: rgb(var(--wht));
	text-decoration: none;
}

.gnav__item .jp {
	margin-top: 1rem;
	font-size: 1.4rem;
	display: block;
}

.gnav__link {
	color: rgb(var(--wht));
	font-size: 2.1rem;
}

.gnav__sub-item {
	margin-top: 2rem;
	padding-left: 2rem;
	display: block;
}

.gnav__sub-item a {
	color: rgb(var(--wht));
	font-size: 1.7rem;
	display: inline-flex;
	align-items: flex-start;
	position: relative;
}

.gnav__sub-item a::before {
	background-color: rgb(var(--wht));
	margin-top: 0.8rem;
	margin-right: 1rem;
	width: 1.5rem;
	height: 1px;
	content: "";
}

.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;
}

body.is-open {
	overflow: hidden;
}

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

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

/*
	toggle
------------------------------ */
.toggle {
	background-color: transparent;
	width: 6rem;
	height: 6rem;
	display: block;
	border-radius: 6rem;
	position: fixed;
	top: 2rem;
	right: 2rem;
	transition: background-color 0.4s ease;
	z-index: 1000;
}

.toggle.has-background {
	background-color: rgb(var(--grn));
}

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

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

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

.toggle__line:nth-child(2) {
	bottom: 2.3rem;
}

.is-open .toggle {
	background-color: rgb(var(--wht));
}

.is-open .toggle__line {
	background-color: rgb(var(--grn));
	transform-origin: 0 0;
}

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

.is-open .toggle__line:nth-child(2) {
	top: 50%;
	bottom: auto;
	transform: rotate(-45deg) translate(-50%, -50%);
}

@media screen and (max-width: 768px) {
	.gnav--all-toggle {
		padding: 8rem 0;
		align-items: flex-start;
	}

	.gnav__list {
		padding: 0;
	}

	.toggle {
		top: 1rem;
		right: 1rem;
	}
}

/* ---------------------------------------------------
  section
--------------------------------------------------- */
.section__title {
	padding-top: 12rem;
	text-align: center;
	position: relative;
}

.section__title::before,
.section__title::after {
	margin-left: -0.5px;
	width: 1px;
	height: 10rem;
	position: absolute;
	top: 0;
	left: 50%;
	pointer-events: none;
	content: "";
}

.section__title::before {
	background-color: rgb(var(--grn));
	z-index: 1;
	animation: section-title-scroll 2s infinite;
}

.section__title::after {
	background-color: rgba(var(--grn), 0.2);
}

@keyframes section-title-scroll {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}

	51% {
		transform: scaleY(1);
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

@media screen and (max-width: 768px) {
	.section__title {
		padding-top: 10rem;
	}

	.section__title::before,
	.section__title::after {
		height: 8rem;
	}
}

/* ----------------------------------------------------
	lead
---------------------------------------------------- */
.lead {
	background-color: rgb(var(--grn));
	margin-top: -1px;
	padding: 10rem 0;
}

.lead__text {
	margin: 0 auto;
	width: 81.8rem;
}

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

	.lead__text {
		width: 35.1rem;
	}
}

/* ----------------------------------------------------
	concept
---------------------------------------------------- */
.concept {
	padding-bottom: 9rem;
}

.concept__title {
	margin-bottom: 5rem;
}

.concept__title img {
	width: 24rem;
}

.concept__text {
	margin: 0 auto;
	width: 42.6rem;
}

@media screen and (max-width: 768px) {
	.concept {
		padding-bottom: 7.5rem;
	}

	.concept__title {
		margin-bottom: 3rem;
	}

	.concept__title img {
		width: 16.4rem;
	}

	.concept__text {
		width: 30.8rem;
	}
}

/* ----------------------------------------------------
	architecture
---------------------------------------------------- */
.architecture {
	background-color: rgb(var(--grn));
	margin: 0 auto;
	padding: 0 10rem 9rem;
	width: 80rem;
	color: rgb(var(--wht));
}

.architecture__title {
	margin-bottom: 5rem;
}

.architecture__title img {
	width: 15.8rem;
}

.architecture__lead {
	margin-bottom: 5rem;
	padding-bottom: 4rem;
	line-height: 2;
	font-size: 1.6rem;
	text-align: center;
	border-bottom: solid 1px rgba(var(--wht), 0.5);
}

.architecture__content {
	display: flex;
	justify-content: space-between;
}

.architecture__image {
	margin-top: 0.4rem;
	width: 16rem;
}

.architecture__detail {
	width: 36.5rem;
	font-size: 1.5rem;
}

.architecture__profession {
	margin-bottom: 0.5rem;
	line-height: normal;
	font-size: 1.8rem;
}

.architecture__name {
	margin-bottom: 0.5rem;
	line-height: normal;
	font-size: 2.5rem;
	display: flex;
	align-items: center;
}

.architecture__name .en {
	margin-left: 1rem;
	font-size: 1.3rem;
}

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

	.architecture__title {
		margin-bottom: 3rem;
	}

	.architecture__title img {
		width: 12.8rem;
	}

	.architecture__lead {
		margin-bottom: 3rem;
		padding-bottom: 3rem;
	}

	.architecture__content {
		display: grid;
		grid-template-columns: 1fr 14.5rem;
		grid-template-rows: 1fr 1fr auto;
		grid-template-areas:
			"profession image"
			"name image"
			"text text";
		column-gap: 2rem;
	}

	.architecture__image {
		margin-top: 0;
		width: 14.5rem;
		grid-area: image;
	}

	.architecture__detail {
		width: auto;
		font-size: 1.3rem;
		display: contents;
	}

	.architecture__profession {
		margin-bottom: 0;
		text-align: center;
		align-self: end;
		grid-area: profession;
		transform: translateY(-1rem);
	}

	.architecture__name {
		margin-bottom: 0.5rem;
		text-align: center;
		display: block;
		align-self: start;
		grid-area: name;
		transform: translateY(-1rem);
	}

	.architecture__name .en {
		margin-left: 0;
		display: block;
	}

	.architecture__detail .architecture__text {
		margin-top: 2rem;
		width: 100%;
		grid-area: text;
	}
}

/* ----------------------------------------------------
	experience
---------------------------------------------------- */
.experience {
	padding-top: 15rem;
}

.experience .section__title {
	margin-bottom: 5rem;
}

.experience__content {
	margin: 0 auto;
	padding-bottom: 18.5rem;
	width: 100rem;
}

.experience__title {
	margin-bottom: 5rem;
	font-size: 3rem;
	text-align: center;
}

.experience__title--scene {
	margin-bottom: 1rem;
	display: block;
}

.experience__title--scene img {
	width: auto;
	height: 4rem;
}

.experience__list--item {
	display: flex;
	justify-content: space-between;
}

.experience__list--item:nth-child(odd) {
	flex-direction: row-reverse;
}

.experience__list--item:not(:last-of-type) {
	margin-bottom: 10rem;
}

.experience__image {
	width: 57rem;
}

.experience__detail {
	width: 37.5rem;
}

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

.experience__detail--text {
	line-height: 2.35;
	font-size: 1.7rem;
}

.experience .scene02 {
	background-image: url(../img/scene02-bg.webp);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 15rem;
}

.experience .scene02 .experience__list--item {
	flex-direction: row;
}

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

	.experience .section__title {
		margin-bottom: 3rem;
	}

	.experience__content {
		padding-bottom: 9rem;
		width: 100%;
	}

	.experience__title {
		margin-bottom: 2.5rem;
		font-size: 2rem;
	}

	.experience__title--scene {
		margin-bottom: 0;
	}

	.experience__title--scene img {
		height: 3.6rem;
	}

	.experience__list--item {
		display: block;
	}

	.experience__list--item:not(:last-of-type) {
		margin-bottom: 4rem;
	}

	.experience__image {
		margin-bottom: 2rem;
		width: 100%;
		display: block;
	}

	.experience__detail {
		padding: 0 2rem;
		width: 100%;
	}

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

	.experience__detail--text {
		line-height: 2.1;
		font-size: 1.3rem;
	}

	.experience .scene02 {
		background-image: url(../img/scene02-bg_sp.webp);
		padding-top: 9rem;
	}
}

/*
	tab
------------------------------ */
.tab__list {
	margin-bottom: 8.6rem;
	display: flex;
	justify-content: center;
}

.tab__button {
	background-color: rgb(var(--wht));
	background-position: center top 2.7rem;
	background-repeat: no-repeat;
	background-size: auto 2.5rem;
	margin: 0 2rem;
	width: 30rem;
	height: 7.5rem;
	font-size: 0;
	border: solid 1px rgb(var(--grn));
	border-radius: 7.7rem;
	transition: all 0.5s ease 0s;
}

.tab__button:hover,
.tab__button.is-active {
	background-color: rgb(var(--grn));
}

#tab-guest.tab__button {
	background-image: url(../img/button-guest.svg);
}

#tab-guest.tab__button:hover,
#tab-guest.tab__button.is-active {
	background-image: url(../img/button-guest-active.svg);
}

#tab-dog.tab__button {
	background-image: url(../img/button-dog.svg);
}

#tab-dog.tab__button:hover,
#tab-dog.tab__button.is-active {
	background-image: url(../img/button-dog-active.svg);
}

.tab__panel {
	display: none;
}

.tab__panel.is-active {
	display: block;
}

@media screen and (max-width: 768px) {
	.tab__list {
		margin-bottom: 5rem;
	}

	.tab__button {
		background-position: center top 0.9rem;
		background-size: auto 3.6rem;
		margin: 0 0.7rem;
		width: 14.4rem;
		height: 5.5rem;
		border-radius: 5.5rem;
	}

	#tab-guest.tab__button {
		background-image: url(../img/button-guest_sp.svg);
	}

	#tab-guest.tab__button:hover,
	#tab-guest.tab__button.is-active {
		background-image: url(../img/button-guest-active_sp.svg);
	}

	#tab-dog.tab__button {
		background-image: url(../img/button-dog_sp.svg);
	}

	#tab-dog.tab__button:hover,
	#tab-dog.tab__button.is-active {
		background-image: url(../img/button-dog-active_sp.svg);
	}
}

/* 
	guest
------------------------------ */
.guest {
	color: rgb(var(--wht));
}

.guest__title img {
	width: 21.8rem;
}

@media screen and (max-width: 768px) {
	.guest__title img {
		width: 21.6rem;
	}
}

/* 
	dog
------------------------------ */
.dog {
	color: rgb(var(--grn));
}

.dog__title img {
	width: 19.4rem;
}

@media screen and (max-width: 768px) {
	.dog__title img {
		width: 21.6rem;
	}
}

/* ----------------------------------------------------
	reservation
---------------------------------------------------- */
.reservation {
	padding-bottom: 17rem;
}

.reservation .section__title {
	margin-bottom: 5rem;
}

.reservation .section__title img {
	width: 34.8rem;
}

.reservation__content {
	margin: 0 auto 11rem;
	width: 100rem;
}

.reservation__content--title {
	background-color: rgba(207, 224, 215, 1);
	margin-bottom: 3rem;
	height: 5rem;
	font-size: 2.2rem;
	letter-spacing: -0.005em;
	display: flex;
	justify-content: center;
	align-items: center;
}

.reservation__list {
	margin-bottom: 4rem;
	font-size: 2rem;
	display: flex;
	justify-content: center;
}

.reservation__list--item {
	margin: 0 3rem;
}

.reservation__list--title {
	display: flex;
}

.reservation__list--title::before {
	color: rgba(140, 121, 79, 1);
	content: "●";
}

.reservation__date {
	margin-bottom: 4rem;
	font-size: 2rem;
	text-align: center;
}

.reservation__content .link-button {
	background-color: rgb(var(--grn));
	height: 7.2rem;
	line-height: normal;
	font-size: 1.4rem;
	text-align: center;
}

.reservation__link {
	display: flex;
	justify-content: center;
}

.reservation__link .link-button {
	margin: 0 4.4rem;
}

.reservation__lead {
	margin-bottom: 5rem;
	font-size: 1.6rem;
	text-align: center;
}

.reservation__notes {
	margin-top: 3rem;
	font-size: 1.4rem;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.reservation {
		padding-bottom: 9rem;
	}

	.reservation .section__title {
		margin-bottom: 3rem;
	}

	.reservation .section__title img {
		width: 23.8rem;
	}

	.reservation__content {
		margin-bottom: 6rem;
		width: 31rem;
	}

	.reservation__content--title {
		margin-bottom: 2.4rem;
		padding: 1rem 0;
		height: auto;
		line-height: normal;
		font-size: 1.6rem;
		text-align: center;
	}

	.reservation__list {
		margin-bottom: 3rem;
		font-size: 1.6rem;
		display: block;
	}

	.reservation__list--item {
		margin: 0;
	}

	.reservation__list--item:not(:last-of-type) {
		margin-bottom: 1.7rem;
	}

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

	.reservation .link-button {
		width: 25rem;
	}

	.reservation__link {
		display: flex;
		justify-content: space-between;
	}

	.reservation__link .link-button {
		margin: 0;
		width: 14.9rem;
	}

	.reservation__lead {
		margin-bottom: 3rem;
		font-size: 1.4rem;
	}

	.reservation__notes {
		font-size: 1.2rem;
	}
}

/* 
	spgr
------------------------------ */
.spgr {
	background-color: rgba(244, 244, 238, 1);
	margin: 0 auto;
	padding: 4.5rem 0 7rem;
	width: 68rem;
}

.spgr__title {
	margin-bottom: 3rem;
	font-size: 1.8rem;
	text-align: center;
}

.spgr__logo {
	margin: 0 auto 3rem;
	width: 17.4rem;
}

.spgr__text {
	margin-bottom: 2rem;
	font-size: 1.7rem;
	text-align: center;
}

@media screen and (max-width: 768px) {
	.spgr {
		padding: 4rem 0 6rem;
		width: 100%;
	}

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

	.spgr__logo {
		margin-bottom: 2rem;
	}

	.spgr__text {
		margin-bottom: 2rem;
		font-size: 1.4rem;
		text-align: center;
	}

	.spgr .link-button {
		width: 17.7rem;
	}
}

/* ----------------------------------------------------
	room
---------------------------------------------------- */
.room {
	padding-bottom: 20rem;
}

.room__title {
	margin-bottom: 5rem;
}

.room__title img {
	width: 35.8rem;
}

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

	.room__title {
		margin-bottom: 3rem;
	}

	.room__title img {
		width: 23.6rem;
	}
}

/* 
	room__slide
------------------------------ */
.room__slide-wrap {
	position: relative;
}

.room__slide {
	width: 100%;
}

.room__slide.slick-dotted {
	margin-bottom: 0;
}

.room__slide .room__slide--item {
	margin: 0 3rem;
	width: 110rem !important;
}

.room__slide-controls {
	margin-top: 4rem;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6rem;
	position: relative;
	z-index: 1;
}

.room__slide-dots .slick-dots {
	width: auto;
	justify-content: center;
	position: static;
}

.room__slide-dots .slick-dots li:not(:last-of-type) {
	margin-right: 1rem;
}

.room__slide-dots .slick-dots li button {
	background-color: rgb(var(--med-gry));
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	border-radius: 50%;
}

.room__slide-dots .slick-dots li.slick-active button {
	background-color: rgb(var(--grn));
}

.room__slide-controls .slick-arrow {
	background-color: rgb(var(--grn));
	width: 6.8rem;
	height: 4.2rem;
	border-radius: 4.2rem;
	position: static;
	transform: none;
}

.room__slide-controls .slick-arrow::before {
	background-image: url(../img/arrow-link.svg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 3rem auto;
	margin: 0 auto;
	width: 3rem;
	height: 100%;
	display: block;
	content: "";
}

.room__slide-prev::before {
	transform: rotate(180deg);
}

.room__slide-next::before {
	transform: none;
}

@media screen and (max-width: 768px) {
	.room__slide .room__slide--item {
		margin: 0 0.6rem;
		width: 31rem !important;
		display: flex;
		flex-direction: column;
	}

	.room__slide-controls {
		margin-top: 0;
		gap: 2.4rem;
		position: absolute;
		top: 22.57rem;
		left: 50%;
		transform: translateX(-50%);
	}

	.room__slide-dots .slick-dots li button {
		width: 1rem;
		height: 1rem;
	}

	.room__slide-controls .slick-arrow {
		width: 4rem;
		height: 2.5rem;
		border-radius: 2.5rem;
	}

	.room__slide-controls .slick-arrow::before {
		background-size: 1.8rem auto;
		margin: 0 auto;
	}
}

/* 
	room__head
------------------------------ */
.room__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.room__image {
	width: 59.4rem;
}

.room__floor {
	width: 45.8rem;
}

.room__floor .room__size {
	margin: 0 auto;
	font-size: 1.5rem;
}

.room__size--label::before {
	margin-right: -0.2em;
	color: rgb(var(--grn));
	content: "●";
}

.room__size--row .room__size--value:not(:nth-of-type(even)) {
	padding-right: 2rem;
}

.room__size--value::before {
	margin-left: 0.6rem;
	content: "：";
}

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

	.room__image {
		width: 100%;
		order: 1;
	}

	.room__floor {
		display: contents;
	}

	.room__floor--image {
		opacity: 0;
		visibility: hidden;
		width: 100%;
		order: 4;
		pointer-events: none;
		transition: opacity 0.8s ease, visibility 0s linear 0.8s;
	}

	.room__floor .room__size {
		margin: 0 auto 2rem;
		opacity: 0;
		visibility: hidden;
		font-size: 1.1rem;
		order: 3;
		pointer-events: none;
		transition: opacity 0.8s ease, visibility 0s linear 0.8s;
	}

	.room__size--label,
	.room__size--value {
		white-space: nowrap;
	}

	.room__slide--item.is-content-visible .room__floor--image,
	.room__slide--item.is-content-visible .room__size {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}
}

/* 
	room__content
------------------------------ */
.room__content {
	margin-top: 4rem;
	opacity: 0;
	visibility: hidden;
	display: flex;
	justify-content: space-between;
	pointer-events: none;
	transition: opacity 0.8s ease, visibility 0s linear 0.8s;
}

.room__slide--item.is-content-visible .room__content {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition-delay: 0s;
}

.room__detail--title {
	margin-bottom: 1rem;
	font-size: 2.5rem;
}

.room__detail--title small,
.room__count {
	font-size: 2rem;
}

.room__count {
	display: block;
}

@media screen and (max-width: 768px) {
	.room__content {
		margin-top: 0;
		opacity: 1;
		visibility: visible;
		width: 100%;
		display: contents;
		pointer-events: auto;
		transition: none;
	}

	.room__detail {
		margin-top: 8.3rem;
		margin-bottom: 1rem;
		opacity: 0;
		visibility: hidden;
		width: 100%;
		order: 2;
		pointer-events: none;
		transition: opacity 0.8s ease, visibility 0s linear 0.8s;
	}

	.room__slide--item.is-content-visible .room__detail {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition-delay: 0s;
	}

	.room__detail--title {
		margin-bottom: 1rem;
		font-size: 1.8rem;
	}

	.room__detail--title small,
	.room__count {
		font-size: 1.3rem;
		display: block;
	}
}

/* ----------------------------------------------------
	wood
---------------------------------------------------- */
.wood {
	padding-bottom: 20rem;
	text-align: center;
}

.wood__title {
	margin-bottom: 3rem;
}

.wood__title img {
	width: 41.2rem;
}

.wood__lead {
	margin-bottom: 5rem;
	line-height: 2.35;
	font-size: 1.7rem;
}

.wood__building {
	margin-bottom: 5rem;
}

.wood__building--title {
	margin-bottom: 0.6rem;
}

.wood__building--title img {
	width: auto;
	height: 2rem;
}

.wood__building--text {
	line-height: 2.35;
	font-size: 1.7rem;
}

.wood__building--text:not(:last-of-type) {
	margin-bottom: 3rem;
}

.wood__slide {
	width: 100%;
}

.wood__slide .wood__slide-item {
	margin: 0 2rem;
	width: 73.2rem !important;
}

.wood__slide .slick-dots {
	justify-content: center;
	bottom: -3.5rem;
}

.wood__slide .slick-dots li:not(:last-of-type) {
	margin-right: 1rem;
}

.wood__slide .slick-dots li button {
	background-color: rgb(var(--med-gry));
	width: 1.5rem;
	height: 1.5rem;
	border: none;
	border-radius: 50%;
}

.wood__slide .slick-dots li.slick-active button {
	background-color: rgb(var(--grn));
}

@media screen and (max-width: 768px) {
	.wood {
		padding-bottom: 10rem;
	}

	.wood__title {
		margin-bottom: 2.5rem;
	}

	.wood__title img {
		width: 26.8rem;
	}

	.wood__lead {
		margin-bottom: 5rem;
		line-height: 2.4;
		font-size: 1.4rem;
	}

	.wood__building {
		margin-bottom: 3rem;
	}

	.wood__building--title img {
		height: 1.4rem;
	}

	.wood__building--text {
		line-height: 2;
		font-size: 1.3rem;
	}

	.wood__building--text:not(:last-of-type) {
		margin-bottom: 3rem;
	}

	.wood__slide .wood__slide-item {
		margin: 0 0.6rem;
		width: 31rem !important;
	}

	.wood__slide .slick-dots {
		justify-content: center;
		bottom: -2rem;
	}

	.wood__slide .slick-dots li button {
		width: 1rem;
		height: 1rem;
	}
}

/* ----------------------------------------------------
	restaurant
---------------------------------------------------- */
.restaurant {
	padding-bottom: 17rem;
}

.restaurant__title {
	margin-bottom: 5rem;
}

.restaurant__title img {
	width: 32.2rem;
}

.restaurant__image {
	margin: 0 auto 5rem;
	width: 100rem;
}

.restaurant__content {
	margin: 0 auto;
	width: 64rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.restaurant__content--logo {
	width: 8rem;
}

.restaurant__content--text {
	width: 49.2rem;
	line-height: 2.35;
	font-size: 1.7rem;
}

.restaurant__content--text .comingsoon {
	margin-top: 1.8rem;
	color: rgb(var(--gry));
	font-size: 2.4rem;
	text-align: center;
}

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

	.restaurant__title {
		margin-bottom: 3rem;
	}

	.restaurant__title img {
		width: 22rem;
	}

	.restaurant__image {
		margin-bottom: 3rem;
		width: 100%;
	}

	.restaurant__content {
		width: 30rem;
		align-items: flex-start;
	}

	.restaurant__content--logo {
		margin-top: 0.8rem;
		width: 3.7rem;
	}

	.restaurant__content--text {
		width: 22.6rem;
		line-height: 2.15;
		font-size: 1.3rem;
	}

	.restaurant__content--text .comingsoon {
		margin-top: 3rem;
		width: 100vw;
		font-size: 1.8rem;
		position: relative;
		left: calc(100% - 15rem);
		transform: translateX(-50%);
	}
}

/* ----------------------------------------------------
	location
---------------------------------------------------- */
.location {
	background-color: rgb(var(--grn));
	padding-bottom: 16rem;
	color: rgb(var(--wht));
	font-size: 1.7rem;
}

.location__title {
	margin-bottom: 5rem;
}

.location__title img {
	width: 14.4rem;
}

.architecture .section__title::before,
.guest .section__title::before,
.location .section__title::before {
	background-color: rgba(var(--wht), 1);
}

.architecture .section__title::after,
.guest .section__title::after,
.location .section__title::after {
	background-color: rgba(var(--wht), 0.2);
}

.location__inner {
	margin: 0 auto;
	width: 105.2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.location__content--text {
	margin-bottom: 6rem;
	line-height: 2.35;
	position: relative;
}

.location__content--text::after {
	background-color: rgb(var(--wht));
	width: 1.8rem;
	height: 1px;
	position: absolute;
	bottom: -3rem;
	left: 0;
	content: "";
}

.location__address {
	margin-bottom: 2.4rem;
}

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

.location__detail--title img {
	width: 14.1rem;
}

.location__detail--content .list li {
	line-height: 2;
	text-indent: -1.1em;
}

.location__map {
	width: 54.3rem;
}

@media screen and (max-width: 768px) {
	.location {
		padding-bottom: 8rem;
		font-size: 1.3rem;
	}

	.location__title {
		margin-bottom: 2.5rem;
	}

	.location__title img {
		width: 11.9rem;
	}

	.location__inner {
		width: 100%;
		text-align: center;
		flex-direction: column;
	}

	.location__content--text::after {
		left: 50%;
		transform: translateX(-50%);
	}

	.location__detail--title img {
		width: 12rem;
	}

	.location__detail--content .list li {
		line-height: 2;
		text-indent: -1.1em;
	}

	.location__map {
		margin: 2rem auto 0;
		width: 35rem;
	}
}

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

.inquiries__title {
	margin-bottom: 3rem;
}

.inquiries__title img {
	width: 18.6rem;
}

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

	.inquiries__title img {
		width: 15rem;
	}
}

/* ----------------------------------------------------
	faq
---------------------------------------------------- */
.faq {
	background-color: rgb(var(--lgt-gry));
	padding-bottom: 13rem;
}

.faq__title {
	margin-bottom: 5rem;
}

.faq__title img {
	width: 6.6rem;
}

.faq .accordion {
	margin: 0 auto;
	width: 100rem;
}

.faq .accordion__trigger {
	-webkit-appearance: none;
	appearance: none;
	margin-bottom: 1.5rem;
	padding-bottom: 1.5rem;
	width: 100%;
	line-height: normal;
	font-size: 2rem;
	text-align: center;
	border: none;
	border-bottom: solid 1px rgb(var(--gry));
	position: relative;
	cursor: pointer;
}

.faq .accordion__trigger::before,
.faq .accordion__trigger::after {
	background-color: rgb(var(--blk));
	width: 2.5rem;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	transition: all 0.5s ease 0s;
	content: "";
}

.faq .accordion__trigger::after {
	transform: translateY(-50%) rotate(90deg);
}

.faq .accordion__trigger.is-open::after {
	opacity: 0;
}

.faq .accordion__trigger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: -4px;
}

.faq .accordion__panel {
	margin-bottom: 1.5rem;
	padding: 4rem 0 2rem;
	font-size: 1.5rem;
	display: none;
}

.faq .accordion[data-accordion-edit-mode="true"] .accordion__panel {
	display: block;
}

.faq .accordion[data-accordion-edit-mode="true"] .accordion__trigger::after {
	opacity: 0;
}

.faq__list--title {
	margin-bottom: 1rem;
	font-size: 2rem;
	display: flex;
	align-items: center;
	position: relative;
}

.faq__list--title .mark {
	margin-right: 1rem;
	line-height: 1;
	font-family: var(--adobe);
	font-size: 2.5rem;
}

.faq__list--content {
	margin-bottom: 3rem;
	font-size: 1.5rem;
}

.faq__list--content .dots {
	width: calc(100% - 1em);
	position: relative;
	left: 1em;
}

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

	.faq__title {
		margin-bottom: 3rem;
	}

	.faq__title img {
		width: 5.6rem;
	}

	.faq .accordion {
		width: 31rem;
	}

	.faq .accordion__trigger {
		margin-bottom: 1rem;
		padding-right: 1.8rem;
		padding-bottom: 1rem;
		font-size: 2rem;
	}

	.faq .accordion__trigger::before,
	.faq .accordion__trigger::after {
		width: 1.4rem;
		top: 1.5rem;
	}

	.faq .accordion__panel {
		margin-bottom: 1rem;
		padding-bottom: 1rem;
		font-size: 1.3rem;
	}

	.faq__list--title {
		font-size: 1.5rem;
	}

	.faq__list--title .mark {
		font-size: 2.2rem;
		position: relative;
	}

	.faq__list--content {
		font-size: 1.3rem;
	}
}

/* ----------------------------------------------------
	footer
---------------------------------------------------- */
.footer {
	padding: 5rem 0;
}

.footer__notes {
	margin: 0 auto 5.7rem;
	width: 100rem;
	line-height: 2.5;
	display: flex;
	justify-content: space-between;
}

.footer__notes .sns {
	display: flex;
}

.footer__notes .sns__item:not(:last-of-type) {
	margin-right: 4rem;
}

.footer__notes .sns__item img {
	width: 5.6rem;
}

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

	.footer__notes {
		margin-bottom: 4.8rem;
		width: 32rem;
		line-height: 2;
		flex-direction: column;
	}

	.footer__notes .sns {
		margin-top: 4.8rem;
		justify-content: center;
	}

	.footer__notes .sns__item:not(:last-of-type) {
		margin-right: 3rem;
	}

	.footer__notes .sns__item img {
		width: 4.4rem;
	}
}

/* 
	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;
	}

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

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

@media screen and (max-width: 768px) {
	.footer .copy {
		font-size: 2.933vw;
	}
}

/* ----------------------------------------------------
	固定予約リンク
---------------------------------------------------- */
.reservation-fixed {
	background-color: rgb(var(--gld));
	width: 25.3rem;
	height: 10.8rem;
	border-radius: 0.5rem 0 0 0;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 10;
}

.reservation-fixed picture {
	width: 16rem;
}

.reservation-fixed img {
	width: 100%;
	height: auto;
	display: block;
}

/* 固定予約リンクとページトップボタンの重なりを避ける */
.pageTop {
	--pageTop-bottom: 11.8rem;
}

@media screen and (max-width: 768px) {
	.reservation-fixed {
		width: 31.5rem;
		height: 6.5rem;
		border-radius: 0.5rem 0.5rem 0 0;
		right: auto;
		left: 50%;
		transform: translateX(-50%);
	}

	.reservation-fixed picture {
		width: 25.1rem;
	}

	.pageTop {
		--pageTop-bottom: 7.5rem;
	}

	.footer {
		/* 元の余白に固定予約リンクの高さを追加 */
		padding-bottom: calc(2.5rem + 6.5rem);
	}
}

/* 客室名とタイプの上下中央揃え */
.room__name {
	display: flex;
	align-items: center;
}

/* 客室タイプ */
.room__type {
	flex-shrink: 0;
	margin-right: 1rem;
	background-color: rgb(var(--grn));
	width: 2.5rem;
	height: 2.5rem;
	color: rgb(var(--wht));
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: 0;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	vertical-align: middle;
}

/* 客室名の下に設備・定員と客室数を配置 */
.room__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 1rem;
}

/* A2の見出し：PCは2行、SPは3行 */
.room__detail--title-a2 {
	display: grid;
	grid-template-columns: max-content max-content;
	align-items: center;
	column-gap: 1rem;
}

.room__detail--title-a2 .room__count {
	grid-column: 1 / -1;
}

@media screen and (max-width: 768px) {
	.room__detail--title-a2 {
		grid-template-columns: 1fr;
	}
}