/* *****************************************************************************

  全ページ共通CSS

***************************************************************************** */

/* =========================================================
  初期化
========================================================= */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
}

input, textarea, select, button {
	font-size: 100%;
}

body {
	line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, main, menu, nav, section {
	display: block;
}

nav ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

html,
body {
	height: 100%;
}

body {
	font-style: normal;
	font-weight: 400;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
}

input:not([type="checkbox"], [type="radio"]), textarea, select, button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	box-sizing: border-box;
	outline: none;
	border: none;
	font-family: inherit;
}

textarea {
	margin: 0;
}

button {
	line-height: 1.2em;
}

button:not(:disabled) {
	cursor: pointer;
}

button::-moz-focus-inner {
	border: none;
	padding: 0;
}

a {
	outline: none;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: top;
}

[hidden] {
	display: none !important; /* 未対応ブラウザ対策 */
}

:where(a, input, textarea, select, button, [role="button"], [tabindex]):focus-visible {
	outline: 2px solid #00f;
	outline-offset: -2px;
}

/* =========================================================
  変数定義
========================================================= */

/* -----------------
  共通／PC
----------------------------------------------- */

:root {
	/* 基準幅（PC） */
	--base-width: 1440;

	/* 文字の書式 */
	--font-family-title-ja: "Zen Old Mincho";
	--font-family-title-en: "Wix Madefor Text";
	--font-family-base-ja: "Zen Kaku Gothic New";
	--font-family-base-en: "Wix Madefor Text";

	/* 文字の行間 */
	--line-height: 1.9em;

	/* 色 */
	--color-base: #f8f7f5;
	--color-main: #454443;
	--color-accent: #013228;
	--color-sub: #7b7a77;

	/* エリア背景色 */
	--area-bgc-relaxation: #49372e;
	--area-bgc-fitness: #1e554f;
	--area-bgc-cafe-lounge: #904f2f;
	--area-bgc-how-we-do: var(--color-accent);
	--area-bgc-white: #fff;

	/* 文字色 */
	--text-color-outline: #fff;
	--text-color-dish: #8f4e2e;
	--text-color-link: #000;

	/* アイコン */
	--icon-link-black-black: url("../img/icon-link-blank-black.svg");
	--icon-link-basic-white: url("../img/icon-link-basic-white.svg");
	--icon-link-basic-black: url("../img/icon-link-basic-black.svg");
	--icon-link-button-blank-white: url("../img/icon-link-button-blank-white.svg");
	--icon-link-button-blank-black: url("../img/icon-link-button-blank-black.svg");

	/* 余白 */
	--base-vertical-margin: calc(100vw / var(--base-width) * 120);
	--base-horizontal-margin: calc(100vw / var(--base-width) * 120);
}

/* -----------------
  スマートフォン
----------------------------------------------- */

@media screen and (max-width: 640px) {
	:root {
		/* 基準幅 */
		--base-width: 375;

		/* 余白 */
		--base-vertical-margin: 80px;
		--base-horizontal-margin: 18px;
	}
}

/* =========================================================
  【共通】骨組み
========================================================= */

body {
	background-color: var(--color-base);
	font-family: var(--font-family-base-ja);
	font-size: calc(100vw / var(--base-width) * 16);
	overflow-wrap: anywhere;
	color: var(--color-main);
}

/* =========================================================
  【共通】ページヘッダー
========================================================= */

#header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 3;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0 calc(100vw / var(--base-width) * 20);
	mix-blend-mode: difference;
}

/* =========================================================
  【PC】ページヘッダー
========================================================= */

@media screen and (min-width: 641px) {
	#header {
		padding:
			calc(100vw / var(--base-width) * 28)
			calc(100vw / var(--base-width) * 62)
			calc(100vw / var(--base-width) * 28)
			calc(100vw / var(--base-width) * 42);
	}

	/* ロゴ */
	#header .logo img {
		width: calc(100vw / var(--base-width) * 116);
		min-width: 116px;
	}
}

/* =========================================================
  【SP】ページヘッダー
========================================================= */

@media screen and (max-width: 640px) {
	#header {
		padding: calc(100vw / var(--base-width) * 20) calc(100vw / var(--base-width) * 18);
	}

	/* グロナビが閉じている時は反転を通常にする */
	#header:has(#global-navigation[aria-hidden="false"], #global-navigation.close-animate) {
		mix-blend-mode: normal;
	}

	/* ロゴ */
	#header .logo img {
		width: calc(100vw / var(--base-width) * 92);
	}
}

/* =========================================================
  【PC】グローバルナビゲーション
========================================================= */

@media screen and (min-width: 641px) {
	/* -----------------
	  スマートフォンメニューボタン
	----------------------------------------------- */

	button.menu {
		display: none;
	}

	/* -----------------
	  グローバルナビゲーション
	----------------------------------------------- */

	#global-navigation ul {
		display: flex;
		gap: 0 calc(100vw / var(--base-width) * 44);
	}

	#global-navigation ul li a {
		display: block;
		font-family: var(--font-family-base-en);
		font-size: max(calc(14 / 16 * 1rem), calc(100vw / var(--base-width) * 14));
		color: #fff;
	}

	#global-navigation ul li a:hover {
		text-decoration: none;
	}

	/* 現在位置 */
	#global-navigation ul li.current a {
		border-bottom: 1px solid currentColor;
		padding-bottom: 0.2em;
	}
}

/* =========================================================
  【SP】グローバルナビゲーション（スマートフォンメニュー）
========================================================= */

@media screen and (max-width: 640px) {
	/* -----------------
	  スマートフォンメニューボタン
	----------------------------------------------- */

	button.menu {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		border: none;
		padding: 0;
		height: calc(100vw / var(--base-width) * 12);
		background: none;
	}

	/* 線 */
	button.menu::before,
	button.menu::after {
		width: calc(100vw / var(--base-width) * 56);
		height: 1px;
		content: "";
		background-color: #fff;
		transition: rotate 0.4s, translate 0.4s;
	}

	button.menu::before {
		transform-origin: top left;
	}

	button.menu::after {
		transform-origin: top right;
	}

	/* メニュー展開状態 */
	button.menu[aria-expanded="true"]::before {
		rotate: calc(tan(11 / 56) * (180 / 3.14) * 1deg);
	}

	button.menu[aria-expanded="true"]::after {
		rotate: calc(tan(11 / 56) * (180 / 3.14) * -1deg);
		translate: -1px calc(100vw / var(--base-width) * 11 * -1);
	}

	/* -----------------
	  グローバルナビゲーション
	----------------------------------------------- */

	#global-navigation {
		display: none;
		overflow-y: scroll;
		overscroll-behavior-y: contain;
		scroll-behavior: smooth;
		padding:
			calc(100vw / var(--base-width) * 95)
			calc(100vw / var(--base-width) * 32)
			calc(100vw / var(--base-width) * 37);
		background-color: var(--color-sub);
	}

	#global-navigation[aria-hidden] {
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
		display: flex;
		flex-direction: column;
		gap: calc(100vw / var(--base-width) * 26) 0;
		width: 100vw;
		height: 100vh;
	}

	#global-navigation[aria-hidden="true"] {
		top: 100vh;
		opacity: 0;
	}

	#global-navigation[aria-hidden="true"].close-animate {
		top: -100vh;
		transition: top 0.4s, opacity 0.4s;
	}

	#global-navigation[aria-hidden="false"] {
		top: 0;
		transition: top 0.4s, opacity 0.4s;
	}

	/* リンク */
	#global-navigation ul li:nth-child(n + 2) {
		margin-top: calc(100vw / var(--base-width) * 30);
	}

	#global-navigation ul li a {
		font-family: var(--font-family-base-en);
		font-size: max(calc(14 / 16 * 1rem), calc(100vw / var(--base-width) * 14));
		color: #fff;
	}

	/* 現在位置 */
	#global-navigation ul li.current a {
		display: inline-block;
		border-bottom: 1px solid currentColor;
		padding-bottom: 0.2em;
	}


	/* -----------------
	  予約誘導エリア
	----------------------------------------------- */

	#global-navigation .reservation {
		margin-top: auto;
	}

	#reservation a[href^="tel:"] {
		padding: calc(100vw / var(--base-width) * 16) calc(100vw / var(--base-width) * 20);
	}

	#global-navigation .reservation a {
		display: block;
		padding-inline: calc(100vw / var(--base-width) * 20);
		text-align: center;
	}

	/* 電話番号 */
	#global-navigation .reservation a[href^="tel:"] {
		display: block;
		padding-block: calc(100vw / var(--base-width) * 19);
		background-color: #fff;
		font-family: var(--font-family-base-en);
		font-size: calc(100vw / var(--base-width) * 18);
		color: var(--color-main);
	}

	/* 予約リンク */
	#global-navigation .reservation a.link {
		display: flex;
		align-items: baseline;
		justify-content: center;
		gap: 0 7px;
		margin-top: 8px;
		padding-block: calc(100vw / var(--base-width) * 20);
		background-color: var(--color-accent);
		color: #fff;
	}

	#global-navigation .reservation a.link::after {
		display: block;
		width: calc(100vw / var(--base-width) * 11);
		height: calc(100vw / var(--base-width) * 11);
		content: "";
		background: var(--icon-link-button-blank-white) 0 0 / cover no-repeat;
	}

	/* アクセシビリティバナー */
	#global-navigation .accessibility img {
		width: 100%;
	}
}

/* =========================================================
  【共通】メインコンテンツ
========================================================= */

/* -----------------
  見出し レベル2
----------------------------------------------- */

#main section h2 {
	font-weight: normal;
}

#main section h2.en,
#main section h2 span.en {
	font-family: var(--font-family-title-en);
	letter-spacing: 0.17em;
}

#main section h2.ja,
#main section h2 span.ja {
	font-family: var(--font-family-title-ja);
}

#main section h2:has(span:nth-child(2)) span:first-child {
	font-weight: 500;
}

#main section h2 span {
	display: block;
}

/* -----------------
  テキスト
----------------------------------------------- */

#main :not(h2, h3).en,
#main :not(h2, h3) .en {
	font-family: var(--font-family-base-en);
}

/* -----------------
  背景
----------------------------------------------- */

#main .bgc-relaxation {
	background-color: var(--area-bgc-relaxation);
	color: var(--text-color-outline);
}

#main .bgc-fitness {
	background-color: var(--area-bgc-fitness);
	color: var(--text-color-outline);
}

#main .bgc-cafe-lounge {
	background-color: var(--area-bgc-cafe-lounge);
	color: var(--text-color-outline);
}

#main .bgc-how-we-do {
	background-color: var(--area-bgc-how-we-do);
	color: var(--text-color-outline);
}

#main .bgc-white {
	background-color: var(--area-bgc-white);
}

/* -----------------
  通常リンク
----------------------------------------------- */

#main a:not(.link-button, .link-basic):where(:link, :any-link) {
	color: var(--text-color-link);
	text-decoration: underline;
}

/* -----------------
  通常リンク（外部）
----------------------------------------------- */

#main a[target="_blank"]:not(.link-button, .link-basic, :has(img)):where(:link, :any-link) {
	display: inline-block;
	padding-right: calc(100vw / var(--base-width) * (11 + 4));
	background: var(--icon-link-black-black) 100% 50% / calc(100vw / var(--base-width) * 11) auto no-repeat;
}

/* -----------------
  微強調リンク
----------------------------------------------- */

#main a.link-basic {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0 calc(100vw / var(--base-width) * 8);
	background: linear-gradient(to right, currentColor, currentColor 33%, transparent 33%, transparent 66%, currentColor 66%, currentColor) 100% 100% / 300% 1px no-repeat;
	padding-bottom: 6px;
	line-height: var(--line-height);
	color: var(--color-main);
	transition: gap 0.3s;
}

#main a.link-basic::after {
	content: "";
	background: var(--icon-link-basic-black) no-repeat;
	background-size: cover;
}

#main :where(.bgc-relaxation, .bgc-fitness, .bgc-cafe-lounge, .bgc-how-we-do) a.link-basic {
	color: var(--text-color-outline);
}

#main :where(.bgc-relaxation, .bgc-fitness, .bgc-cafe-lounge, .bgc-how-we-do) a.link-basic::after {
	background-image: var(--icon-link-basic-white);
}

#main a.link-basic:hover {
	text-decoration: none;
	column-gap: calc(100vw / var(--base-width) * 16);
	background-position-x: 0;
	transition: gap 0.3s, background-position-x 1s cubic-bezier(0.8, 0, 0.2, 1);
}

/* -----------------
  ボタン風リンク
----------------------------------------------- */

#main a.link-button {
	display: block;
	box-sizing: border-box;
	padding:
		calc(100vw / var(--base-width) * 6)
		calc(100vw / var(--base-width) * 15)
		calc(100vw / var(--base-width) * 8);
	background-color: #fff;
	line-height: var(--line-height);
	text-align: center;
	color: var(--color-main);
}

#main a.link-button.center {
	margin-inline: auto;
}

#main a.link-button:where(.reserve, [href^="tel:"]) {
	background-color: var(--color-accent);
	color: var(--text-color-outline);
}

#main a.link-button.relaxation {
	background-color: var(--area-bgc-relaxation);
	color: var(--text-color-outline);
}

#main a.link-button.cafe-lounge {
	background-color: var(--area-bgc-cafe-lounge);
	color: var(--text-color-outline);
}

#main a.link-button.fitness {
	background-color: var(--area-bgc-fitness);
	color: var(--text-color-outline);
}

#main a.link-button[target="_blank"]:not(:has(span)),
#main a.link-button[target="_blank"] span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0 calc(100vw / var(--base-width) * 7);
}

#main a.link-button[target="_blank"]:not(:has(span))::after,
#main a.link-button[target="_blank"] span::after {
	content: "";
	background-image: var(--icon-link-button-blank-black);
	background-repeat: no-repeat;
	background-size: cover;
}

#main a.link-button:where(.relaxation, .fitness, .cafe-lounge, .how-we-do, .reserve) {
	color: var(--text-color-outline);
}

#main a.link-button:where(.relaxation, .fitness, .cafe-lounge, .how-we-do, .reserve)[target="_blank"]:not(:has(span))::after,
#main a.link-button:where(.relaxation, .fitness, .cafe-lounge, .how-we-do, .reserve)[target="_blank"] span::after {
	background-image: var(--icon-link-button-blank-white);
}

#main a.link-button:has(span) {
	overflow: hidden;
	position: relative;
}

#main a.link-button span {
	display: inline-block;
}

#main a.link-button span:last-child {
	position: absolute;
	top: calc(6px + (calc(100vw / var(--base-width) * 18) * 1.9));
	left: 0;
	right: 0;
	margin-inline: auto;
	width: fit-content;
	opacity: 0;
}

#main a.link-button:hover {
	text-decoration: none;
}

#main a.link-button:hover span:first-child {
	transition: opacity 0.3s, translate 0.3s;
}

#main a.link-button:hover span:last-child {
	transition: opacity 0.3s, top 0.3s;
}

#main a.link-button:hover span:first-child {
	translate: 0 -100%;
	opacity: 0;
}

#main a.link-button:hover span:last-child {
	top: 6px;
	left: 0;
	right: 0;
	opacity: 1;
}

/* TOPに戻るリンク */
#main .back-to-home {
	text-align: center;
}

/* =========================================================
  【PC】メインコンテンツ
========================================================= */

@media screen and (min-width: 641px) {
	/* -----------------
	  改行
	----------------------------------------------- */

	#main br.nobr-pc {
		display: none;
	}

	/* -----------------
	  微強調リンク
	----------------------------------------------- */

	#main a.link-basic {
		font-size: calc(100vw / var(--base-width) * 18);
	}

	#main a.link-basic::after {
		width: calc(100vw / var(--base-width) * 16);
		height: calc(100vw / var(--base-width) * 16);
	}

	/* -----------------
	  ボタン風リンク
	----------------------------------------------- */

	#main a.link-button {
		width: calc(100vw / var(--base-width) * 210);
		font-size: calc(100vw / var(--base-width) * 18);
	}

	#main a.link-button.large {
		padding-block: calc(100vw / var(--base-width) * 17);
		width: calc(100vw / var(--base-width) * 398);
	}

	#main .staff ~ .link a.link-button {
		margin-top: calc(100vw / var(--base-width) * 120);
	}

	#main a.link-button[href*=".pdf"] {
		margin-top: calc(100vw / var(--base-width) * 60);
	}

	#main a.link-button[target="_blank"]::after,
	#main a.link-button[target="_blank"] span::after {
		width: calc(100vw / var(--base-width) * 17);
		height: calc(100vw / var(--base-width) * 16);
	}

	#main a.link-button.large span:last-child {
		top: calc(calc(100vw / var(--base-width) * 17) + (calc(100vw / var(--base-width) * 18) * 1.9));
	}

	#main a.link-button.large:hover span:last-child {
		top: calc(100vw / var(--base-width) * 17);
	}

	/* -----------------
	  リンクの並列並び
	----------------------------------------------- */

	#main .links {
		display: flex;
		justify-content: center;
		gap: 0 calc(100vw / var(--base-width) * 48);
	}

	#main .links a.link-button {
		flex: 1 1 auto;
	}

	/* -----------------
	  TOPに戻るリンク
	----------------------------------------------- */

	#main .back-to-home {
		margin-top: calc(100vw / var(--base-width) * 140);
	}
}

/* =========================================================
  【SP】メインコンテンツ
========================================================= */

@media screen and (max-width: 640px) {
	/* -----------------
	  改行
	----------------------------------------------- */

	#main br.nobr-sp {
		display: none;
	}

	/* -----------------
	  微強調リンク
	----------------------------------------------- */

	#main a.link-basic {
		font-size: calc(100vw / var(--base-width) * 13);
	}

	#main a.link-basic::after {
		width: calc(100vw / var(--base-width) * 12);
		height: calc(100vw / var(--base-width) * 12);
		background-size: cover;
	}

	/* -----------------
	  ボタン風リンク
	----------------------------------------------- */

	#main a.link-button {
		width: calc(100vw / var(--base-width) * 160);
		font-size: calc(100vw / var(--base-width) * 13);
	}

	#main a.link-button.large {
		padding-block: calc(100vw / var(--base-width) * 12);
		width: 100%;
		font-size: calc(100vw / var(--base-width) * 16);
	}

	#main .staff ~ .link a.link-button {
		margin-top: calc(100vw / var(--base-width) * 60);
	}

	#main a.link-button[href*=".pdf"] {
		margin-top: calc(100vw / var(--base-width) * 80);
	}

	#main a.link-button[target="_blank"] {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0 calc(100vw / var(--base-width) * 7);
	}

	#main a.link-button[target="_blank"]::after,
	#main a.link-button[target="_blank"] span::after {
		width: calc(100vw / var(--base-width) * 11);
		height: calc(100vw / var(--base-width) * 11);
	}

	#main a.link-button span:last-child {
		top: calc(12px + (calc(100vw / var(--base-width) * 16) * 1.9));
	}

	/* -----------------
	  リンクの並列並び
	----------------------------------------------- */

	#main .links a.link-button:nth-child(n + 2) {
		margin-top: calc(100vw / var(--base-width) * 24);
	}

	/* -----------------
	  TOPに戻るリンク
	----------------------------------------------- */

	#main .back-to-home {
		margin-top: calc(100vw / var(--base-width) * 76);
	}
}

/* =========================================================
  【共通】メインコンテンツヘッダー
========================================================= */

#main header {
	position: relative;
}

/* -----------------
  メインビジュアル
----------------------------------------------- */

#main header img:not(.border-text) {
	width: 100vw;
}

#main header ul.main-visuals {
	display: grid;
	overflow: hidden;
	list-style: none;
}

#main header ul.main-visuals li {
	grid-area: 1 / 1;
	opacity: 0;
	scale: 1.7;
	transition: opacity 1s linear, scale 15s linear;
}

/* 表示時 */
#main header ul.main-visuals li.show {
	opacity: 1;
	scale: 1;
}

#main header ul.main-visuals li.show:first-child {
	z-index: 1;
}

#main header ul.main-visuals li.show:first-child + li.show {
	z-index: 1;
}

#main header ul.main-visuals li.first {
	transition: opacity 1s linear, scale 15s linear;
}

/* -----------------
  境界テキスト
----------------------------------------------- */

#main header .border-text {
	position: absolute;
	inset: auto 0 0;
	z-index: 1;
	margin: 0 auto;
	translate: 0 50%;
}

/* =========================================================
  【PC】メインコンテンツヘッダー
========================================================= */

@media screen and (min-width: 641px) {
	/* -----------------
	  境界テキスト
	----------------------------------------------- */

	#main header .border-text {
		height: calc(100vw / var(--base-width) * 101);
	}
}

/* =========================================================
  【SP】メインコンテンツヘッダー
========================================================= */

@media screen and (max-width: 640px) {
	/* -----------------
	  境界テキスト
	----------------------------------------------- */

	#main header .border-text {
		height: calc(100vw / var(--base-width) * 26);
	}
}

/* =========================================================
  【共通】メインコンテンツボディ
========================================================= */

/* -----------------
  画像
----------------------------------------------- */

#main .body img.full-image,
#main .body .full-image img {
	width: 100%;
}

/* -----------------
  FAQ
----------------------------------------------- */

#main .body .faq {
	line-height: var(--line-height);
}

/* 質問 */
#main .body .faq dt {
	display: flex;
	border-top: 1px solid var(--color-sub);
	font-weight: 600;
}

#main .body .faq dt::before {
	content: "Q.";
	font-family: var(--font-family-base-en);
	font-weight: normal;
	white-space: nowrap;
}

/* 回答 */
#main .body .faq dd {
	display: grid;
	grid-template-columns: auto 1fr;
}

#main .body .faq dd:last-of-type {
	border-bottom: 1px solid var(--color-sub);
}

#main .body .faq dd::before {
	content: "A.";
	font-family: var(--font-family-base-en);
	white-space: nowrap;
}

#main .body .faq dd > * {
	grid-column-start: 2;
}

#main .body .faq dd > :nth-child(n + 2) {
	margin-top: 1em;
}

/* -----------------
  お知らせ一覧
----------------------------------------------- */

#main .body .news-list {
	border-bottom: 1px solid var(--color-sub);
	list-style: none;
}

#main .body .news-list li {
	border-top: 1px solid var(--color-sub);
}

/* アイテムの非表示 */
#main .body .news-list:not(.ready) li:nth-child(n + 11),
#main .body .news-list li[aria-hidden="true"] {
	display: none;
}

/* 更新日 */
#main .body .news-list li time {
	line-height: var(--line-height);
}

/* ラベル */
#main .body .news-list li .label {
	border: 1px solid var(--color-main);
	line-height: 1em;
}

/* タイトル以降の非表示 */
#main .body .news-list li .details > p.title ~ *[aria-hidden="true"] {
	display: none;
}

/* タイトル以降 */
#main .body .news-list li .details > p {
	line-height: var(--line-height);
}

#main .body .news-list li .details > p:has(img) {
	text-align: left;
}

/* 開閉制御ボタン */
#main .body .news-list li button.toggle {
	display: flex;
	flex-direction: column;
	border: none;
	padding: calc(100vw / var(--base-width) * 4) 0;
	width: calc(100vw / var(--base-width) * 16);
	height: calc(100vw / var(--base-width) * 14);
	background: none;
}

#main .body .news-list li button.toggle::before,
#main .body .news-list li button.toggle::after {
	width: 100%;
	height: 1px;
	content: "";
	background-color: var(--color-main);
	transition: rotate 0.4s, translate 0.4s;
}

#main .body .news-list li button.toggle::before {
	transform-origin: top left;
}

#main .body .news-list li button.toggle::after {
	transform-origin: top right;
}

#main .body .news-list li button.toggle[aria-expanded="true"]::before {
	rotate: calc(tan(7 / 16) * (180 / 3.14) * 1deg);
}

#main .body .news-list li button.toggle[aria-expanded="true"]::after {
	rotate: calc(tan(7 / 16) * (180 / 3.14) * -1deg);
}

/* もっと読むボタン */
#main .body .news-list + .load-more {
	display: block;
	margin-inline: auto;
	background: var(--color-accent);
	line-height: var(--line-height);
	color: var(--text-color-outline);
}

/* =========================================================
  【PC】メインコンテンツボディ
========================================================= */

@media screen and (min-width: 641px) {
	/* -----------------
	  FAQ
	----------------------------------------------- */

	#main .body .faq {
		margin-top: var(--base-vertical-margin);
		font-size: calc(100vw / var(--base-width) * 18);
	}

	/* 質問 */
	#main .body .faq dt {
		gap: 0 calc(100vw / var(--base-width) * 24);
		padding-top: calc(100vw / var(--base-width) * 40);
	}

	/* 回答 */
	#main .body .faq dd {
		gap: 0 calc(100vw / var(--base-width) * 24);
		margin-top: calc(100vw / var(--base-width) * 12);
		padding-bottom: calc(100vw / var(--base-width) * 40);
	}

	/* -----------------
	  お知らせ一覧
	----------------------------------------------- */

	#main .body .news-list {
		display: grid;
		grid-template-columns: auto auto 1fr;
		gap: 0 calc(100vw / var(--base-width) * 15);
		margin-top: calc(100vw / var(--base-width) * 56);
	}

	#main .body .news-list:has(li .toggle) {
		grid-template-columns: auto auto 1fr auto;
	}

	#main .body .news-list li {
		display: grid;
		grid-template-columns: subgrid;
		grid-column: span 3;
		padding: calc(100vw / var(--base-width) * 36) 0;
	}

	#main .body .news-list:has(li .toggle) li {
		grid-column: span 4;
	}

	/* 更新日 */
	#main .body .news-list li time {
		font-size: calc(100vw / var(--base-width) * 18);
	}

	/* ラベル */
	#main .body .news-list li .label {
		display: block;
		align-self: start;
		margin-top: 0.4em;
		padding:
			calc(100vw / var(--base-width) * 4)
			calc(100vw / var(--base-width) * 17)
			calc(100vw / var(--base-width) * 5);
		font-size: calc(100vw / var(--base-width) * 13);
		text-align: center;
	}

	/* テキスト部分 */
	#main .body .news-list li .details {
		margin-left: calc(100vw / var(--base-width) * 17);
	}

	/* タイトル */
	#main .body .news-list li .details .title {
		font-size: calc(100vw / var(--base-width) * 18);
	}

	#main .body .news-list li .details p:not(.title) {
		margin-top: 1em;
	}

	/* 開閉制御ボタン */
	#main .body .news-list li button.toggle {
		justify-content: space-between;
		padding: calc(100vw / var(--base-width) * 4) 0;
		width: calc(100vw / var(--base-width) * 16);
		height: calc(100vw / var(--base-width) * 14);
	}

	#main .body .news-list li button.toggle[aria-expanded="true"]::after {
		translate: calc(100vw / var(--base-width) * -2) calc(100vw / var(--base-width) * -5);
	}

	/* もっと読むボタン */
	#main .body .news-list + .load-more {
		margin-top: calc(100vw / var(--base-width) * 120);
		padding: 6px 42px;
		font-size: calc(100vw / var(--base-width) * 18);
	}
}

/* =========================================================
  【SP】メインコンテンツボディ
========================================================= */

@media screen and (max-width: 640px) {
	/* -----------------
	  FAQ
	----------------------------------------------- */

	#main .body .faq {
		margin-top: calc(100vw / var(--base-width) * 48);
		font-size: calc(100vw / var(--base-width) * 13);
	}

	/* 質問 */
	#main .body .faq dt {
		gap: 0 1em;
		padding-top: calc(100vw / var(--base-width) * 32);
	}

	/* 回答 */
	#main .body .faq dd {
		gap: 0 1em;
		margin-top: calc(100vw / var(--base-width) * 16);
		padding-bottom: calc(100vw / var(--base-width) * 32);
	}

	/* -----------------
	  お知らせ一覧
	----------------------------------------------- */

	#main .body .news-list {
		overflow: hidden;
		margin-top: calc(100vw / var(--base-width) * 48);
	}

	#main .body .news-list li {
		position: relative;
		padding: calc(100vw / var(--base-width) * 24) 0;
	}

	/* 更新日 */
	#main .body .news-list li time {
		display: block;
		font-size: calc(100vw / var(--base-width) * 12);
	}

	/* ラベル */
	#main .body .news-list li .label {
		display: inline-block;
		margin-top: calc(100vw / var(--base-width) * 24);
		padding:
			calc(100vw / var(--base-width) * 3)
			calc(100vw / var(--base-width) * 17)
			calc(100vw / var(--base-width) * 4);
		font-size: calc(100vw / var(--base-width) * 13);
	}

	/* タイトル */
	#main .body .news-list li .details .title {
		margin-top: calc(100vw / var(--base-width) * 12);
		font-size: calc(100vw / var(--base-width) * 13);
	}

	/* タイトル以外 */
	#main .body .news-list li .details p:not(.title) {
		margin-top: calc(100vw / var(--base-width) * 14);
		font-size: calc(100vw / var(--base-width) * 11);
	}

	/* 開閉制御ボタン */
	#main .body .news-list li button.toggle {
		position: absolute;
		top: 0;
		right: calc(100vw / var(--base-width) * -18);
		justify-content: center;
		box-sizing: content-box;
		padding: calc(100vw / var(--base-width) * 23) calc(100vw / var(--base-width) * 22);
		width: calc(100vw / var(--base-width) * 16);
	}

	#main .body .news-list li button.toggle::after {
		margin-top: calc(100vw / var(--base-width) * 5);
	}

	#main .body .news-list li button.toggle[aria-expanded="true"]::after {
		translate: calc(100vw / var(--base-width) * -2) calc(100vw / var(--base-width) * -6);
	}

	/* もっと読むボタン */
	#main .body .news-list + .load-more {
		margin-top: calc(100vw / var(--base-width) * 48);
		padding: calc(100vw / var(--base-width) * 6) calc(100vw / var(--base-width) * 34);
		font-size: calc(100vw / var(--base-width) * 13);
	}
}

/* =========================================================
  【共通】予約誘導エリア
========================================================= */

#reservation {
	position: fixed;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
}

#reservation a {
	display: block;
	font-size: calc(100vw / var(--base-width) * 18);
}

/* 電話番号 */
#reservation a[href^="tel:"] {
	display: block;
	background-color: #fff;
	font-family: var(--font-family-base-en);
	color: var(--color-main);
}

/* 予約リンク */
#reservation a.link {
	background-color: var(--color-accent);
	color: #fff;
}

#reservation a.link:not(:has(span)),
#reservation a.link span {
	display: flex;
	align-items: center;
	gap: 0 7px;
}

#reservation a:has(span) {
	overflow: hidden;
	position: relative;
}


#reservation a.link:not(:has(span))::after,
#reservation a.link span::after {
	display: block;
	content: "";
	background: var(--icon-link-button-blank-white) 0 0 / cover no-repeat;
}

/* リンク共通 */
#reservation a span:last-child {
	position: absolute;
	left: 0;
	right: 0;
	margin-inline: auto;
	width: fit-content;
	opacity: 0;
}

#reservation a:hover {
	text-decoration: none;
}

#reservation a:hover span:first-child {
	translate: 0 -100%;
	opacity: 0;
	transition: opacity 0.3s, translate 0.3s;
}

#reservation a:hover span:last-child {
	left: 0;
	right: 0;
	opacity: 1;
	transition: opacity 0.3s, top 0.3s;
}

/* =========================================================
  【PC】予約誘導エリア
========================================================= */

@media screen and (min-width: 641px) {
	/* 電話番号 */
	#reservation a[href^="tel:"] {
		padding: calc(100vw / var(--base-width) * 26) calc(100vw / var(--base-width) * 77);
	}

	#reservation a[href^="tel:"] span {
		display: block;
	}

	/* 予約リンク */
	#reservation a.link {
		padding: calc(100vw / var(--base-width) * 26) calc(100vw / var(--base-width) * 53);
	}

	#reservation a.link::after,
	#reservation a.link span::after {
		width: calc(100vw / var(--base-width) * 17);
		height: calc(100vw / var(--base-width) * 16);
	}

	/* リンク共通 */
	#reservation a span:last-child {
		top: calc(calc(100vw / var(--base-width) * 26) + calc(100vw / var(--base-width) * 18));
	}

	#reservation a:hover span:last-child {
		top: calc(100vw / var(--base-width) * 26);
	}
}

/* =========================================================
  【SP】予約誘導エリア
========================================================= */

@media screen and (max-width: 640px) {
	#reservation {
		width: 100vw;
	}

	#reservation a {
		justify-content: center;
		flex: 1 1 auto;
		padding: calc(100vw / var(--base-width) * 21) calc(100vw / var(--base-width) * 20);
		text-align: center;
	}

	/* 電話番号 */
	#reservation a[href^="tel:"] {
		display: flex;
		align-items: center;
	}

	/* 予約リンク */
	#reservation a.link {
		font-size: calc(100vw / var(--base-width) * 16);
	}

	#reservation a.link::after {
		width: calc(100vw / var(--base-width) * 11);
		height: calc(100vw / var(--base-width) * 11);
	}
}

/* =========================================================
  【共通】ページフッター
========================================================= */

#footer {
	display: grid;
	background-color: var(--color-main);
}

/* -----------------
  ロゴ
----------------------------------------------- */

#footer .logo {
	grid-area: logo;
}

/* -----------------
  お問い合わせ
----------------------------------------------- */

#footer .contact {
	grid-area: contact;
}

#footer .contact :where(dt, dd) {
	line-height: var(--line-height);
	font-weight: 300;
	color: var(--text-color-outline);
}

/* -----------------
  SNS
----------------------------------------------- */

#footer .sns {
	display: flex;
	align-items: center;
	grid-area: sns;
	list-style: none;
}

/* -----------------
  所在地
----------------------------------------------- */

#footer .location {
	grid-area: location;
	line-height: var(--line-height);
	font-weight: 300;
	color: var(--text-color-outline);
}

/* -----------------
  リンク
----------------------------------------------- */

#footer .links {
	grid-area: links;
	list-style: none;
}

#footer .links li a {
	color: #bcbab6;
}

/* -----------------
  アクセシビリティバナー
----------------------------------------------- */

#footer .accessibility {
	grid-area: accessibility;
}

/* -----------------
  コピーライト
----------------------------------------------- */

#footer .copyright {
	grid-area: copyright;
}

#footer .copyright small {
	font-family: var(--font-family-base-en);
	font-size: max(10px, calc(100vw / var(--base-width) * 10));
	color: #bcbab6;
}

/* =========================================================
  【PC】ページフッター
========================================================= */

@media screen and (min-width: 641px) {
	#footer {
		grid-template:
			"logo contact contact location"
			"logo sns sns location"
			"border border border border"
			"links links accessibility accessibility"
			"copyright copyright accessibility accessibility" /
			1fr auto 0 auto;
		gap: 0 calc(100vw / var(--base-width) * 48);
		padding:
			calc(100vw / var(--base-width) * 60)
			var(--base-horizontal-margin)
			calc(100vw / var(--base-width) * 84);
	}

	/* -----------------
	  境界線
	----------------------------------------------- */

	#footer::before {
		display: block;
		grid-area: border;
		margin: calc(100vw / var(--base-width) * 60) 0 calc(100vw / var(--base-width) * 30);
		height: 1px;
		content: "";
		background-color: #7b7a77;
	}

	/* -----------------
	  ロゴ
	----------------------------------------------- */

	#footer .logo img {
		min-width: 160px;
	}

	/* -----------------
	  お問い合わせ
	----------------------------------------------- */

	#footer .contact {
		display: grid;
		grid-template-columns: repeat(2, auto);
		gap: 0 0.5em;
		align-self: start;
	}

	#footer .contact :where(dt, dd) {
		font-size: max(1rem, calc(100vw / var(--base-width) * 16));
	}

	/* -----------------
	  SNS
	----------------------------------------------- */

	#footer .sns {
		align-self: start;
		gap: 0 calc(100vw / var(--base-width) * 22);
		margin-top: 26px;
	}

	/* -----------------
	  所在地
	----------------------------------------------- */

	#footer .location {
		font-size: max(1rem, calc(100vw / var(--base-width) * 16));
	}

	#footer .location span {
		display: block;
	}

	/* -----------------
	  リンク
	----------------------------------------------- */

	#footer .links {
		display: flex;
		gap: 0 38px;
	}

	#footer .links li a {
		font-size: max(calc(13 / 16 * 1rem), calc(100vw / var(--base-width) * 13));
	}

	/* -----------------
	  アクセシビリティバナー
	----------------------------------------------- */

	#footer .accessibility {
		justify-self: end;
	}

	/* -----------------
	  コピーライト
	----------------------------------------------- */

	#footer .copyright {
		margin-top: 11px;
	}
}

/* =========================================================
  【SP】ページフッター
========================================================= */

@media screen and (max-width: 640px) {
	#footer {
		grid-template:
			"logo"
			"sns"
			"contact"
			"location"
			"links "
			"accessibility"
			"copyright";
		padding:
			calc(100vw / var(--base-width) * 48)
			calc(100vw / var(--base-width) * 32)
			calc(100vw / var(--base-width) * 78);
	}

	/* -----------------
	  ロゴ
	----------------------------------------------- */

	#footer .logo img {
		max-width: calc(100vw / var(--base-width) * 226);
	}

	/* -----------------
	  お問い合わせ
	----------------------------------------------- */

	#footer .contact {
		display: flex;
		gap: 1em;
		margin-top: calc(100vw / var(--base-width) * 22);
		border-top: 1px solid #7b7a77;
		padding-top: calc(100vw / var(--base-width) * 22);
		font-size: calc(100vw / var(--base-width) * 11);
	}

	/* -----------------
	  SNS
	----------------------------------------------- */

	#footer .sns {
		gap: 0 calc(100vw / var(--base-width) * 42);
		margin-top: calc(100vw / var(--base-width) * 50);
	}

	#footer .sns li img {
		width: calc(100vw / var(--base-width) * 29);
	}

	/* -----------------
	  所在地
	----------------------------------------------- */

	#footer .location {
		font-size: calc(100vw / var(--base-width) * 11);
	}

	#footer .location span:nth-child(2) {
		margin-left: 0.5em;
	}

	/* -----------------
	  リンク
	----------------------------------------------- */

	#footer .links {
		margin-top: calc(100vw / var(--base-width) * 22);
		border-top: 1px solid #7b7a77;
		padding-top: calc(100vw / var(--base-width) * 22);
	}

	#footer .links li:nth-child(n + 2) {
		margin-top: 12px;
	}

	#footer .links li a {
		font-size: calc(100vw / var(--base-width) * 11);
	}

	/* -----------------
	  アクセシビリティバナー
	----------------------------------------------- */

	#footer .accessibility {
		margin-top: calc(100vw / var(--base-width) * 22);
	}

	#footer .accessibility img {
		width: 100%;
	}

	/* -----------------
	  コピーライト
	----------------------------------------------- */

	#footer .copyright {
		margin-top: calc(100vw / var(--base-width) * 46);
	}
}


/* =========================================================
  プライバシーポリシーのための事前確認（JS連動）
========================================================= */
/* モーダル背景 */
.modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
@media screen and (max-width: 640px) {
	.modal-overlay {
		width: 100%;
	}
}

.modal-overlay.show {
  opacity: 1;
  pointer-events: auto;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal-content {
  position: relative;
  background: white;
  padding: 1vh 1.5vw 1vh;
  border-radius: 10px;
  text-align: center;
  width: 29vw;
  animation: fadeIn 0.25s ease-out;
}
@media screen and (max-width: 640px) {
	.modal-content {
	  padding: 1.5vh 4vw 1.5vh;
	  width: 84vw;
	}
}
.modal-close-button {
  position: absolute;
  top: 0.4vh;
  right: 0.5vw;
  font-size: calc(100vw / var(--base-width) * 22);
  background: transparent;
  border: none;
  color: #333;
  font-weight:bold;
  cursor: pointer;
}


.modal-content p {
  margin: 1em 0 0 0;
  font-size: calc(100vw / var(--base-width) * 18);
  line-height:1.7;
}
@media screen and (max-width: 640px) {
	.modal-content p {
		font-size: calc(100vw / var(--base-width) * 14);
	}
}

.modal-content .modal-content-text{
	text-align:left;
}
.modal-content .modal-content-confirmation{
	line-height:1.5;
}
.modal-content .modal-content-confirmation label{
	cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-content .modal-content-confirmation input{
	transform: scale(1.4);
	margin-right:8px;
}

.modal-content .modal-content-button a {
	display: block;
	overflow: hidden;
    position: relative;
    box-sizing: border-box;
	width: calc(100vw / var(--base-width) * 398);
	max-width:100%;
	margin:1rem auto 0;
	padding-block: calc(100vw / var(--base-width) * 17);
    padding: calc(100vw / var(--base-width) * 6) calc(100vw / var(--base-width) * 15) calc(100vw / var(--base-width) * 8);

    background-color: #fff;
    box-shadow: 0 0 0 1px #ccc;


    line-height: var(--line-height);
    text-align: center;
    color: var(--color-main);

}


.modal-content .modal-content-button a[target="_blank"]:not(:has(span)),
.modal-content .modal-content-button a[target="_blank"] span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0 calc(100vw / var(--base-width) * 7);
}

.modal-content .modal-content-button a[target="_blank"]:not(:has(span))::after,
.modal-content .modal-content-button a[target="_blank"] span::after {
	content: "";
	background-image: var(--icon-link-button-blank-black);
	background-repeat: no-repeat;
	background-size: cover;
}

.modal-content .modal-content-button a:where(.relaxation, .fitness, .cafe-lounge, .how-we-do, .reserve) {
	color: var(--text-color-outline);
}

.modal-content .modal-content-button a:where(.relaxation, .fitness, .cafe-lounge, .how-we-do, .reserve)[target="_blank"]:not(:has(span))::after,
.modal-content .modal-content-button a:where(.relaxation, .fitness, .cafe-lounge, .how-we-do, .reserve)[target="_blank"] span::after {
	background-image: var(--icon-link-button-blank-white);
}

.modal-content .modal-content-button a:has(span) {
	overflow: hidden;
	position: relative;
}

.modal-content .modal-content-button a span {
	display: inline-block;
}

.modal-content .modal-content-button a span:last-child {
	position: absolute;
	top: calc(6px + (calc(100vw / var(--base-width) * 18) * 1.9));
	left: 0;
	right: 0;
	margin-inline: auto;
	width: fit-content;
	opacity: 0;
}

.modal-content .modal-content-button a:hover {
	text-decoration: none;
}

.modal-content .modal-content-button a:hover span:first-child {
	transition: opacity 0.3s, translate 0.3s;
}

.modal-content .modal-content-button a:hover span:last-child {
	transition: opacity 0.3s, top 0.3s;
}

.modal-content .modal-content-button a:hover span:first-child {
	translate: 0 -100%;
	opacity: 0;
}

.modal-content .modal-content-button a:hover span:last-child {
	top: 6px;
	left: 0;
	right: 0;
	opacity: 1;
}


@media screen and (min-width: 641px) {
    .modal-content .modal-content-button a[target="_blank"]::after,
    .modal-content .modal-content-button a[target="_blank"] span::after {
        width: calc(100vw / var(--base-width) * 17);
        height: calc(100vw / var(--base-width) * 16);
    }
}
@media screen and (max-width: 640px) {
    .modal-content .modal-content-button a[target="_blank"]::after,
    .modal-content .modal-content-button a[target="_blank"] span::after {
        width: calc(100vw / var(--base-width) * 11);
        height: calc(100vw / var(--base-width) * 11);
    }
}