@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');

:root {
	/* font */
	--gothic: "Noto Sans JP", sans-serif;
	--gothic-SC: "Noto Sans SC", sans-serif;
	--gothic-TC: "Noto Sans TC", sans-serif;
	--josefin: "Josefin Sans", sans-serif;

	/* color */
	--mainColor: 35, 24, 21;
	--link: 164, 102, 74;
	--blk: 35, 31, 32;
	--wht: 255, 255, 255;
	--beg: 209, 204, 189;
	--gra: 176, 169, 160;
	--gol: 208, 189, 154;
}

/* ----------------------------------------------------
	#reset
---------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

p:not(:last-of-type) {
	margin-bottom: 1em;
	word-wrap: break-word;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

fieldset,
img {
	border: 0;
}

address,
caption,
cite,
code,
dfn,
em,
th,
var {
	font-style: normal;
	font-weight: normal;
}

ol,
ul {
	list-style: none;
}

caption,
th {
	text-align: left;
}

a {
	transition: all 0.5s ease 0s;
}

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

/* ----------------------------------------------------
	基本設定
---------------------------------------------------- */
html,
body {
	height: 100%;
}

html {
	scroll-behavior: smooth;
}

body {
	background: rgba(var(--blk), 0.64);
	line-height: 1.5;
	color: rgb(var(--beg));
	font-family: var(--gothic);
	font-feature-settings: "palt"1;
	font-size: 4vw;
	overflow-x: hidden;
	position: relative;
	transition: opacity 0.5s ease;
}

body.cn {
	font-family: var(--gothic-SC);
}

body.tw {
	font-family: var(--gothic-TC);
}

body.page {
	letter-spacing: 0.05em;
	opacity: 0;
}

/* ----------------------------------------------------
	pageTop
---------------------------------------------------- */
.pageTop a {
	background: rgba(var(--link), 0.85);
	width: 64px;
	height: 64px;
	border-radius: 8px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	right: 0.5em;
	bottom: 0.5em;
	z-index: 10;
	transform: rotate(-180deg);
}

.pageTop a svg {
	width: 16px;
	height: auto;
	fill: none;
	stroke: rgb(var(--beg));
	stroke-miterlimit: 10;
}

/* ----------------------------------------------------
	top
---------------------------------------------------- */
/*
	topTitle
------------------------------ */
.topTitle {
	/* width: 65.13944%; */
	/* width: 40%; */
	width: 36%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 2;
}

.topTitle img {
	vertical-align: top;
}

/*
	lang
------------------------------ */
.lang {
	position: absolute;
	bottom: 19.2vw;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
}

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

.lang__list--item {
	margin: 0 1.06667vw;
}

.lang__list--item a {
	background: rgba(var(--mainColor), 0.85);
	width: 20.8vw;
	height: 20.8vw;
	color: rgb(var(--beg));
	font-size: 3.46667vw;
	text-decoration: none;
	border: solid 1px rgba(var(--wht), 0.47);
	border-radius: 1.6vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.lang__list--item a:hover {
	background: rgba(var(--mainColor), 1);
	border: solid 1px rgba(var(--wht), 1);
}

/*
	topBg
------------------------------ */
.topBg {
	background: url(../img/topBg.webp) center top no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1;
}

/*
	animation
------------------------------ */
.topBg {
	transform: scale(1.2);
	animation: zoomBackground 2s ease forwards;
}

@keyframes zoomBackground {
	from {
		transform: scale(1.1);
	}

	to {
		transform: scale(1);
	}
}

.topTitle,
.lang {
	opacity: 0;
	animation: fadeInUp 1s ease forwards;
	animation-delay: 0.5s;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* ----------------------------------------------------
	page
---------------------------------------------------- */
.pageBg {
	background: url(../img/langBg.webp) center bottom no-repeat;
	background-size: cover;
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
}

.pageBg::before {
	background: rgba(var(--blk), 0.5);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	content: "";
}

/*
	header
------------------------------ */
.header {
	padding: 6.4vw 8vw;
}

/* wifi  */
.header .wifi {
	font-weight: 400;
	display: flex;
	align-items: center;
}

.header .wifi__icon {
	padding-right: 1em;
}

.header .wifi__icon img {
	width: 8vw;
}

/*
	footer
------------------------------ */
.footer {
	padding: 6.4vw 0;
	text-align: center;
}

/* hotels */
.footer .hotels {
	margin-bottom: 6.4vw;
}

.footer .hotels__name {
	margin-bottom: 0.5em;
	font-size: 4.26667vw;
	font-weight: bold;
}

.footer .hotels__address {
	font-size: 3.46667vw;
}

/* sns */
.footer .sns__list {
	display: flex;
	justify-content: center;
	align-items: center;
}

.footer .sns__list--item {
	margin: 0 4.53333vw;
}

.footer .sns__list--item a svg {
	width: 8vw;
	fill: rgb(var(--beg))
}

/*
	main
------------------------------ */
.main {
	margin-bottom: 16vw;
}

.main .accordion {
	margin-bottom: 3.2vw;
	padding: 0 5.6vw;
}

/* accordion__title */
.main .accordion__title {
	background: rgba(var(--mainColor), 0.65);
	height: 16vw;
	color: rgb(var(--beg));
	border: solid 1px rgba(var(--wht), 0.47);
	border-radius: 1.6vw;
	display: flex;
	align-items: center;
	position: relative;
}

.main .accordion__title.active {
	border-radius: 1.6vw 1.6vw 0 0;
}

.main .accordion__title::before,
.main .accordion__title::after {
	background: rgb(var(--beg));
	width: 5.33333vw;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 4.8vw;
	transform: translateY(-50%);
	transition: all 0.5s ease 0s;
	content: "";
}

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

.main .accordion__title.active::before,
.main .accordion__title.active::after {
	transform: translateY(-50%) rotate(360deg);
}

.main .accordion__title .icon {
	width: 16.8vw;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main .accordion__title .text {
	width: calc(100% - 16.8vw);
	font-family: var(--josefin);
	font-size: 4.26667vw;
	font-weight: 400;
}

.main .accordion__title .text small {
	font-size: 3.46667vw;
	font-family: var(--gothic);
	font-weight: normal;
	display: block;
}

.cn .main .accordion__title .text small {
	font-family: var(--gothic-SC);
}

.tw .main .accordion__title .text small {
	font-family: var(--gothic-TC);
}

/* accordion__contents */
.main .accordion__contents {
	background: rgb(var(--wht), 0.85);
	padding: 3.2vw 4vw;
	border-radius: 0 0 1.6vw 1.6vw;
	display: none;
}

/*
	info
------------------------------ */
.info .accordion__title img {
	width: 37.3395%;
}

.infoNav__list--item a {
	position: relative;
}

.infoNav__list--item a::before {
	width: 3.2vw;
	height: 3.2vw;
	border-top: solid 1px rgb(var(--blk));
	border-right: solid 1px rgb(var(--blk));
	position: absolute;
	top: 50%;
	right: 1.6vw;
	transform: translateY(-50%) rotate(45deg);
	content: "";
}

.infoNav__list--link {
	padding: 3.2vw 0;
	color: rgb(var(--blk));
	text-decoration: none;
	border-bottom: dashed 1px rgb(var(--blk));
	display: flex;
	align-items: center;
}

.infoNav__list--link .floor {
	width: 10.5vw;
	color: rgb(var(--mainColor));
	font-size: 4.26667vw;
	font-weight: bold;
}

.infoNav__list--link .icon {
	width: 23.2vw;
	text-align: center;
}

.infoNav__list--item a .text {
	width: calc(100% - 12vw - 23.2vw);
}

/* レストラン */
.place01 .infoNav__list--link img {
	width: 58.97514%;
}

/* フォットネスルーム */
.place02 .infoNav__list--link img {
	width: 49.74918%;
}

/* リフレッシュスペース */
.place03 .infoNav__list--link img {
	width: 43.53817%;
}

/* フロント */
.place04 .infoNav__list--link img {
	width: 43.53206%;
}

/* 大浴場 */
.place05 .infoNav__list--link img {
	width: 32.52171%;
}

/*
	room
------------------------------ */
.room .accordion__title img {
	width: 57.80168%;
}

/*
	breakfast
------------------------------ */
.breakfast .accordion__title img {
	width: 41.32382%;
}

/*
	restaurant
------------------------------ */
.restaurant .accordion__title img {
	width: 65.00472%;
}

/*
	bath
------------------------------ */
.bath .accordion__title img {
	width: 40.25197%;
}

/*
	pool
------------------------------ */
.pool .accordion__title img {
	width: 68%;
}

/*
	fitness
------------------------------ */
.fitness .accordion__title img {
	width: 56.19748%;
}

/*
	refresh
------------------------------ */
.refresh .accordion__title img {
	width: 61.49561%;
}

/*
	special
------------------------------ */
.special .accordion__title img {
	width: 61.49561%;
}

/*
	relaxation
------------------------------ */
.relaxation .accordion__title img {
	width: 61.49561%;
}

/*
	accordion__contents--details
------------------------------ */
.accordion .details {
	padding: 4.8vw 0;
	color: rgb(var(--blk));
}

.accordion .details:not(:last-child) {
	border-bottom: dashed 1px rgb(var(--blk));
}

.accordion .details__title {
	margin-bottom: 0.25em;
	color: rgb(var(--link));
	font-weight: bold;
}

/* notes */
.accordion .details .note {
	margin: 0.5em 0;
	font-size: 3.2vw;
}

.accordion .details .note:not(:last-of-type) {
	margin-bottom: 1em;
}

.accordion .details .note li {
	margin-left: 1em;
	text-indent: -1em;
}

.accordion .details .note li:not(:last-of-type) {
	margin-bottom: 0.25em;
}

.accordion .details .note li::before {
	content: "※";
}

.accordion .details .note.en li::before {
	margin-right: 0.5em;
	content: "*";
}

/* list */
.accordion .details__contents .list {
	margin-top: 1em;
}

.accordion .details__contents .list li:not(:last-of-type) {
	margin-bottom: 0.5em;
}

/* link */
.accordion .details a {
	color: rgb(var(--link));
	font-weight: bold;
}

.accordion .details a::before {
	content: "＞";
}

.accordion .details .link {
	margin-top: 1em;
}

/* tel */
.accordion .tel {
	margin-top: 1em;
}

.accordion .tel span {
	background: rgb(var(--mainColor));
	padding: 0.25em 0.5em;
	color: rgb(var(--beg));
	font-weight: bold;
	display: inline-block;
}

/*
	etc
------------------------------ */
.etc .accordion {
	background: rgb(var(--beg));
	padding: 0 5.6vw;
	color: rgb(var(--blk));
}

.etc .accordion__title {
	padding: 1em 0;
	display: flex;
	align-items: center;
	position: relative;
}

.etc .accordion:not(:last-of-type) .accordion__title,
.etc .accordion:last-of-type .accordion__title.active {
	border-bottom: solid 1px rgb(var(--blk));
}

.etc .accordion__title::before,
.etc .accordion__title::after {
	background: rgb(var(--blk));
	width: 5.33333vw;
	height: 1px;
	position: absolute;
	top: 50%;
	right: 4.8vw;
	transform: translateY(-50%);
	transition: all 0.5s ease 0s;
	content: "";
}

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

.etc .accordion__title.active::before,
.etc .accordion__title.active::after {
	transform: translateY(-50%) rotate(360deg);
}

.etc .accordion__title span {
	padding-left: 1em;
	display: inline-block;
	position: relative;
}

.etc .accordion__title span::before {
	background: rgb(var(--blk));
	width: 2.4vw;
	height: 4vw;
	clip-path: polygon(0 0, 0% 100%, 100% 50%);
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	content: "";
}

/* accordion__contents */
.etc .accordion__contents {
	padding: 3.2vw 0 6.4vw;
	display: none;
}