@charset "UTF-8";

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

:root {
	/* font */
	--gothic: "noto-sans-cjk-jp", sans-serif;
	--open: "Open Sans", sans-serif;

	/* color */
	--blk: 77, 77, 77;
	--wht: 255, 255, 255;
}

/* ----------------------------------------------------
	基本設定
---------------------------------------------------- */
html {
	font-size: 62.5%;
	scroll-behavior: smooth;
}

/*
	表示設定
------------------------------ */
body {
	background: rgb(var(--wht));
	line-height: 1.8;
	font-family: var(--gothic);
	font-feature-settings: "palt"1;
	letter-spacing: 0.05em;
	font-weight: 500;
}

body {
	color: rgb(var(--blk));
	font-size: min(1.6rem, 1.185vw);
}

@media screen and (max-width: 768px) {
	body {
		font-size: 3.733vw;
	}
}

body table {
	font-size: inherit;
}

.visually-hidden {
	margin: -1px;
	padding: 0;
	width: 1px;
	height: 1px;
	white-space: nowrap;
	clip: rect(0, 0, 0, 0);
	overflow: hidden;
	border: 0;
	position: absolute;
}

a {
	display: inline-block;
	text-decoration: underline;
	transition: all 0.5s ease 0s;
}

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

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

.sp {
	display: none;
}

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

	.sp {
		display: block;
	}
}

/*
	list
------------------------------ */
ul.list li {
	margin-left: 1em;
	text-indent: -1em;
}

/* note */
ul.note li {
	font-size: min(1.2rem, 0.889vw);
	font-weight: 400;
}

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

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

/*
	.video
------------------------------ */
.video {
	width: 100%;
	aspect-ratio: 16 / 9;
}

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

/*
	telephone
------------------------------ */
.telephone {
	pointer-events: none;
}

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

/*
	linkBtn
------------------------------ */
.linkBtn a {
	background: rgb(var(--wht));
	width: min(30rem, 22.222vw);
	height: min(6rem, 4.444vw);
	color: rgb(var(--blk));
	font-size: min(1.4rem, 1.037vw);
	font-weight: 400;
	text-decoration: none;
	border: solid 1px rgb(var(--blk));
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}

.linkBtn a::after {
	background: rgb(var(--blk));
	width: min(1.4rem, 1.037vw);
	height: min(1.4rem, 1.037vw);
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
	position: absolute;
	right: 0;
	bottom: 0;
	content: "";
}

@media screen and (max-width: 768px) {
	.linkBtn a {
		width: 53.333vw;
		height: 12.8vw;
		font-size: 3.733vw;
	}

	.linkBtn a::after {
		width: 3.2vw;
		height: 3.2vw;
	}
}

/* ----------------------------------------------------
	marker
---------------------------------------------------- */
.marker {
	background: linear-gradient(transparent 60%, rgb(var(--wht)) 40%);
	padding: 0 1em;
	display: inline-block;
}

/* ----------------------------------------------------
	pagetop
---------------------------------------------------- */
.pageTop a {
	width: 64px;
	height: 64px;
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 10;
}

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

.header__title {
	width: 48.444vw;
	position: absolute;
	top: 4.074vw;
	left: 4.741vw;
}

/* ---------------------------------------------------
	footer
---------------------------------------------------- */
.footer {
	padding-top: min(10rem, 7.407vw);
}

.copy {
	padding: min(2.5rem, 1.852vw) 0;
	color: rgba(var(--blk), 1);
	font-size: min(1.2rem, 0.889vw);
	text-align: center;
}

@media screen and (max-width: 768px) {
	.footer {
		padding-top: 13.333vw;
	}

	.copy {
		padding: 6.4vw 0;
		font-size: 2.4vw;
	}
}

/*
	hotelNav
------------------------------ */
.footer__hotelNav {
	line-height: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footer__hotelNav li {
	margin-bottom: 1em;
	display: flex;
	position: relative;
}

.footer__hotelNav li:first-of-type::before,
.footer__hotelNav li::after {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	content: "|";
}

.footer__hotelNav li:first-of-type::before {
	left: 0;
}

.footer__hotelNav li::after {
	right: 0;
}

.footer__hotelNav li a {
	padding: 0 1em;
	color: rgb(var(--blk));
	text-decoration: none;
	display: inline-block;
	position: relative;
}

.footer__hotelNav li a:hover {
	text-decoration: underline;
	opacity: 1;
}

@media screen and (max-width: 768px) {
	.footer__hotelNav {
		text-align: center;
		display: block;
	}

	.footer__hotelNav li:first-of-type::before,
	.footer__hotelNav li::after {
		content: "";
	}

	.footer__hotelNav li {
		margin-bottom: 1rem;
		justify-content: center;
	}

	.footer__hotelNav li a::before,
	.footer__hotelNav li a::after {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		content: "|";
	}

	.footer__hotelNav li a::before {
		left: 0;
	}

	.footer__hotelNav li a::after {
		right: 0;
	}
}

/* ---------------------------------------------------
	gnav
---------------------------------------------------- */
.gnav {
	display: none;
}

@media screen and (max-width: 768px) {
	.gnav {
		background: linear-gradient(180deg, rgba(56, 212, 218, 1) 0%, rgba(179, 218, 255, 1) 100%);
		padding-top: 77px;
		max-width: 700px;
		width: 100%;
		height: 100%;
		overflow: auto;
		display: block;
		position: fixed;
		top: 0;
		right: 0;
		left: auto;
		transform: translateX(100%);
		transition: transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	}

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

	.gnav__logo {
		display: none;
	}

	.gnav__list {
		padding-left: 2em;
		display: block;
	}

	.gnav__list--item {
		margin: 0 0 13.333vw;
		line-height: 1;
	}

	.gnav__list--item a:hover {
		opacity: 0.6;
	}

	.gnav__list--item a img {
		width: auto;
		height: 12.8vw;
	}

	.overlay {
		background: rgba(var(--blk), 0.75);
		width: 100vw;
		height: 100vh;
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
		content: "";
	}

	/* is-open */
	.is-open {
		overflow: hidden;
	}

	.is-open .gnav {
		z-index: 999;
		transform: translateX(0);
	}

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

/*
	toggle
------------------------------ */
.toggle {
	display: none;
}

@media screen and (max-width: 768px) {
	.toggle {
		width: 40px;
		height: 25px;
		border-radius: 55px;
		display: block;
		position: fixed;
		top: 1em;
		right: 1em;
		z-index: 1000;
	}

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

	.toggle__inner--item {
		background: rgb(var(--blk));
		width: 100%;
		height: 3px;
		border-radius: 6px;
		display: block;
		position: absolute;
		left: 50%;
		transition: all 0.6s;
	}

	.toggle__inner--item:nth-child(1) {
		top: 0;
		transform: translateX(-50%);
	}

	.toggle__inner--item:nth-child(2) {
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.toggle__inner--item:nth-child(3) {
		bottom: 0;
		transform: translateX(-50%);
	}

	/* is-open */
	.is-open .toggle__inner--item {
		background: rgb(var(--wht));
		transform-origin: 0 0;
	}

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

	.is-open .toggle__inner--item:nth-child(2) {
		opacity: 0;
	}

	.is-open .toggle__inner--item:nth-child(3) {
		top: 50%;
		bottom: auto;
		transform: rotate(-30deg) translate(-50%, -50%);
	}
}

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

.slick-dots {
	bottom: max(-4rem, -2.963vw);
}

.slick-dots li {
	margin: 0 min(0.5rem, 0.37vw);
	width: auto;
	height: auto;
}

.slick-dots li button {
	background: rgb(var(--wht));
	width: min(2rem, 1.481vw);
	height: min(2rem, 1.481vw);
	text-indent: -9999em;
	outline: none;
	border: solid 1px rgb(var(--blk));
	border-radius: min(2rem, 1.481vw);
}

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

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

@media screen and (max-width: 768px) {
	.slick-dots {
		bottom: -5.333vw;
	}

	.slick-dots li {
		margin: 0 1.333vw;
	}

	.slick-dots li button {
		width: 2.933vw;
		height: 2.933vw;
		border-radius: 2.933vw;
	}
}