@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&family=Noto+Sans+JP:wght@400;500;700&display=swap');

/* reset */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2;scrollbar-gutter:stable}:where(html:has(dialog:modal[open])){overflow:clip}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(dialog){border:none;background:none;inset:unset;max-width:unset;max-height:unset}:where(dialog:not([open])){display:none!important}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}

/* --------------------
   COMMON
-------------------- */
a { transition: .25s all;}
:where(html) { color-scheme: #fff;}
html {
  scroll-behavior: smooth;
  font-size: 100%;
  overflow-x: hidden;}
body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  background: #fff;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02rem;
  color: #000000;
  font-size: 100%;
  -webkit-font-smoothing: antialiased;}
a {
  color: #00A0A0;
  text-decoration: underline;}
img { max-width: 100%;}

@media screen and (max-width: 480px){
  body { letter-spacing: normal;}}

/* text */
p { font-size: 1rem; line-height: 1.8;}

.txs-12 { font-size: 0.75rem;}
.txs-14 { font-size: 0.875rem;}
.txs-16 { font-size: 1rem;}
.txs-18 { font-size: 1.125rem;}
.txs-20 { font-size: 1.25rem;}
.txs-24 { font-size: 1.5rem;}
.txs-28 { font-size: 1.75rem;}
.txs-30 { font-size: 2rem;}
.txs-36 { font-size: 2.25rem;}
.txs-40 { font-size: 2.5rem;}

.txs-48 { font-size: 2.65rem;}
.txs-56 { font-size: 3.5rem;}
.txs-64 { font-size: 4rem;}

.l-1 { line-height: 1;}
.l-15 { line-height: 1.5;}
.l-18 { line-height: 1.8;}

.w-m { font-weight: 500;}
.w-b { font-weight: 700;}

.en {
  font-family: "Lato", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;}

.center { text-align: center;}
.right { text-align: right;}
.left { text-align: left;}

.clor01 { color: #00A0A0;}

.mgt16 { margin-top: 16px;}

/* --------------------
   ALL
-------------------- */
.wrap {
  margin: 0 auto;
  max-width: 1080px;
  width: 100%;}
.contents {
  padding: 0;
  position: relative;
  margin: 0 auto;
  width: 100%;}
.pc { display: block;}
.pd { display: none;}
.sp { display: none;}

@media screen and (max-width: 1080px){
	.wrap { padding: 0 8vw;}
  body { width: 100%; overflow: hidden;}}
@media screen and (max-width: 768px){
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: none;}}
@media screen and (max-width: 480px){
  .pc { display: none;}
  .pd { display: block;}
  .sp { display: block;}}

/* --------------------
   PARTS
-------------------- */
.circle { margin-top: 24px;}
.circle::before {
  margin-right: 8px;
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  border: 3px solid #00A0A0;}
.title2 {
  border-radius: 10px;
  padding: 20px 20px 20px 30px;
  margin: 80px 0 40px;
  background: #EDF3F4;
  border-left: 10px solid #00A0A0;}
a.phone {
  position: relative;
  padding: 0 40px 0 30px;
  margin: 24px 0 0;
  text-decoration: none;
  display: block;
  height: 60px;
  max-width: 420px;
  background: #00A0A0;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: bold;
  line-height: 60px;
  color: #fff;
  text-align: center;}
a.phone div {
  display: flex;
  justify-content: space-between;
  align-items: center;}
a.link {
	position: relative;
  padding: 0 40px 0 20px;
  margin: 24px 0 0;
  text-decoration: none;
  display: block;
  height: 40px;
  width: 160px;
  border: 1px solid #00A0A0;
  border-radius: 9999px;
  font-weight: 500;
  line-height: 36px;
  color: #00A0A0;}
a.arrow::after {
	content: "";
	background: #00A0A0;
	width: 12px;
	height: 8px;
	display: block;
	clip-path: polygon(0 0,50% 100%,100% 0);
	position: absolute;
	right: 15px;
	top:16px;}
a.newtab::after {
	content: "";
	background: url("images/newtab.png") no-repeat center center;
  background-size: 15px 15px;
	width: 15px;
	height: 15px;
	display: block;
	position: absolute;
	right: 16px;
	top:12px;}


@media screen and (max-width: 480px){
	a.phone { height: auto;padding: 10px 20px;}
	a.phone p { line-height: 1.2;}
	a.phone div { flex-wrap: wrap; justify-content: center;}}

/* --------------------
   HEADER
-------------------- */
#header {
  color: #fff;
  height: 800px;}
#header::before {
  display: block;
  content: "";
  z-index: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 700px;
  background: #00A0A0;}
#header .text {
  padding-right: 240px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;}
#header h1 {
  margin-left: 40px;
  line-height: 0.9;}
#header .copy {
  letter-spacing: 0.1em;
  line-height: 60px;
  writing-mode: vertical-rl;
  position: absolute;
  left: 0;
  top: 340px;
  z-index: 2;}

/* --- main slider --- */
#mainslider {
	height: 680px;
  margin-left: 60px;
  position: relative;
  right: 0;
  z-index: 2;}
#mainslider img {
  height: 680px;
  width: 100%;
  object-fit: cover;
  border-radius: 40px 0 0 40px;}
#mainslider .slick-dots { bottom:10px;}
#mainslider .slick-dots li { width: 10px;}
#mainslider .slick-dots li button:before {opacity: 1; font-size: 10px; color: #fff;}
#mainslider .slick-dots li.slick-active button:before { color: #00A0A0;}

/* --- hdnav --- */
#hdnav ul {
  display: flex;
  gap: 40px;}
#hdnav a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;}

/* --- mainnav --- */
#mainnav {
  transition: 1s all;
  z-index: -1;
  opacity: 0;
  -ms-filter: blur(10);
  filter: blur(10);
  background: #00A0A0;
  width: 100%;
  height: 100%;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  overflow: scroll;
  flex-wrap: wrap;
  left: 0;}
#mainnav.active {
  padding: 40px 0;
  opacity: 1;
  z-index: 98;
  -ms-filter: blur(0);
  filter: blur(0);}
#header .hamburger {
  display : block;
  position: fixed;
  background: #EDF3F4;
  z-index : 99;
  right : 0;
  top   : 0;
  width : 180px;
  height: 180px;
  border-radius: 0 0 0 40px;
  cursor: pointer;
  text-align: center;}
#header .hamburger p {
  position: absolute;
  width: 180px;
  bottom: 56px;
  text-align: center;}
#header .hamburger span {
  display : block;
  position: absolute;
  width   : 40px;
  height  : 2px ;
  left    : 70px;
  background : #00A0A0;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition   : 0.3s ease-in-out;
  transition        : 0.3s ease-in-out;}
#header .hamburger span:nth-child(1) { top: 65px;}
#header .hamburger span:nth-child(2) { top: 77px;}
#header .hamburger span:nth-child(3) { top: 89px;}
#header .hamburger.active span:nth-child(1) {
  top : 77px;
  left: 70px;
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);}
#header .hamburger.active span:nth-child(2) { opacity: 0;}
#header .hamburger.active span:nth-child(3) {
  top: 77px;
  width: 40px;
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);}
#mainnav li { text-align: center;}
#mainnav li a {
	line-height: 2.5em;
	font-size: 24px;
	font-weight: 700;
	color: #fff;
	text-decoration:none;}
#header li a.navphone {
  position: relative;
  padding: 10px 40px 10px 40px;
  margin: 24px 0 0;
  text-decoration: none;
  display: block;
  height: auto;
  max-width: 420px;
  background: #fff;
  border-radius: 9999px;
  font-size: 18px;
  font-weight: bold;
  color: #00A0A0;
  text-align: center;}
#header li a.navphone p {line-height: 1.2;}

@media screen and (max-width: 1080px){
	#hdnav { display: none;}}
@media screen and (max-width: 480px){
	#header .text { padding: 0; height: 80px; align-items: flex-start;}
	#header h1 { margin-left: 20px; font-size: 24px; margin-top: 30px;}
	#header h1 span { font-size: 12px;}
	#header .hamburger { width: 100px; height: 100px;}
	#header .hamburger span { left : 30px;}
	#header .hamburger span:nth-child(1) { top: 25px;}
	#header .hamburger span:nth-child(2) { top: 37px;}
	#header .hamburger span:nth-child(3) { top: 49px;}
	#header .hamburger.active span:nth-child(1) {top : 37px;left: 30px;}
	#header .hamburger.active span:nth-child(3) {top : 37px;}
	#header .hamburger p { width: 100px; bottom: 16px;}
	#header::before { height: 500px;}
	#mainslider img,#mainslider { height: 480px;}
	#header { height: 600px;}
	#header .copy { top:240px;}
  #mainnav li a { font-size: 20px;}
}

/* --------------------
   MAIN
-------------------- */
#main {
  background: #EDF3F4;
  padding: 120px 0 240px;
  position:relative;}
#main::before {
  position: absolute;
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  top: -100px;
  background: #EDF3F4;}
#main .wrap {
  position: relative;
  z-index: 2;}
#main h1 { margin-bottom: 16px;}
#main h2 { margin-bottom: 9px;}
#main .contents {
  gap: 40px 80px;
  flex-wrap: wrap;
  justify-content: space-between;
  display: flex;}
#main .textbox { width: 500px;}
#main .photo img { border-radius: 6px;}

/* --- map --- */
#map {
  position: relative;}
#map .mapwrap {
  top: -120px;
  margin-bottom: -80px;
  position: relative;
  border: 2px solid #00A0A0;
  border-radius: 10px;
  overflow: hidden;}

/* --- pagenav --- */
.pagenav {
  margin-bottom: 120px;
	background: #fff;
	border-radius: 40px 40px 0 0;
  position: relative;}
.pagenav ul {
	justify-content: center;
  flex-wrap: wrap;
  gap:10px 10px;
	display: flex;}
.pagenav ul li {
	text-align: center;
	position: relative;}
.pagenav ul li a {
  text-decoration: none;
  display: block;
  padding: 12px 10px 0;
  min-width: 120px;
  height: 110px;
  border-radius: 10px;
  border: 1px solid #00A0A0;}
.pagenav ul li img {
  height: 60px;
  display: block;
  margin: 0 auto;}
.pagenav ul li p { line-height: 1;}

/* --- area --- */
#area .slider_wrap img { border-radius: 6px;}
#area .slider_wrap,#area .slick-slider {
  margin-bottom: 10px;
  width: 420px;}
#area .slider_thumb .slick-track {
  margin-left: 0;
  transform: unset !important;}
#area .slider_thumb .slick-slide { margin-right: 10px; margin-bottom: 10px;}
#area hr {
	margin-top: 60px;
	padding-top: 60px;
	border-color: #E4ECED;}
#area .flex {
	gap:80px;
  flex-wrap: wrap;
	display: flex;}
#area .flex .textbox { width: 580px;}
#area h1 { margin-bottom: 20px;}
#area h1 img {
  height: 60px;
	vertical-align: middle;
	display: inline-block;}
#area .linkbox2 {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;}
#area .label {
  gap:6px 6px;
  justify-content: flex-end;
  display: flex;}
#area .title {
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  display: flex;}
#area .label span {
  margin-top: 10px;
  background: #EDF3F4;
  color: #00A0A0;
  border-radius: 999px;
  padding: 3px 16px 4px;
  font-weight: 600;}
#other table {
  margin-top: 24px;
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
  text-align: left;
  border: 1px solid #1C2326;}
#other table th, #other table td { padding: 10px;}
#other table.tlist th, #other table.tlist td {
  padding: 8px 16px;
  font-weight: 400;
  border: 1px solid #1C2326;}
#other table.tlist .price-cell { text-align: right;}
#other table.equip th {
  vertical-align: top;
  border-right: 1px solid #1C2326;
  border-bottom: 1px solid #1C2326;
  font-weight: bold;
  text-align: center;}
#other table.equip tr.border { border-bottom: 1px solid #1C2326;}
#other table.equip tr:nth-child(even) td { background-color: #EDF3F4;}
#other table.equip .price-cell { text-align: right;}
#price ul { margin-top: 15px;}
#price ul li { margin-bottom: 6px;}
#booking .pagenav { margin-top: 30px;}
#booking .pagenav ul { justify-content: flex-start;}

/* --- faq --- */
#faq {
	padding: 140px 0;
	background: #EDF3F4;
	border-radius: 100px;}
#faq .list { margin-top: 70px;}
#faq .box {
  background: #fff;
  border-radius: 10px;
  padding: 40px;
  margin-bottom: 10px;}
#faq h2 {
  display: flex;
  align-items: center;
  font-weight:500;}
#faq h2 .en { margin-right: 10px;}
#faq p { padding: 20px 0 0 46px;position: relative;}
#faq p::before {
  content: "A";
  padding: 0 12px 0 10px;
  font-family: 'Lato';
  background: #EDF3F4;
  border-radius: 10px;
  height: 20px;
  display: block;
  position: absolute;
  left: 0;
  top: 27px;
  line-height: 20px;
  color: #00A0A0;
  font-weight: 700;
  padding-right: 10px;}

/* --- contact --- */
#contact {
	padding: 140px 0 0;
	text-align: center;}
#contact h2 { padding: 60px 0 16px;}
#contact a.phone { margin: 50px auto 10px;}
#contact .bana {
	display: flex;
	padding: 80px 0 30px;
	justify-content: center;
	gap:10px;}

#footer {
	text-align: center;
	color: #fff;
	background: #1C2326;
	height: 50px;}
#footer p {
	line-height: 50px;
	letter-spacing: 0.2em;}

@media screen and (max-width: 1080px){
	#main { padding: 100px 0 180px;}
	#main .textbox,#main .photo { width: 100%;}
  .pagenav ul li p { font-size: 15px;}
  .pagenav ul li a { height: 110px;}
	#main .photo img,#area .slider_wrap,#area .slick-slider,#area .flex .textbox,#area .slider_wrap img { width: 100%;}
	#area .flex { flex-wrap: wrap;gap:20px;}
	#other .table_wrap { overflow-y: scroll;}
	#other .table_wrap table { white-space: nowrap;}
	#faq h2 span { font-size: 20px;}
	#faq h2 { font-size: 20px;}
	#faq .box { padding: 30px;}
	#faq p { padding:18px 0 0 30px;font-size: 16px;}
  #faq p::before { top: 23px; left: -8px;}}
@media screen and (max-width: 740px){
  #area .label { justify-content: flex-start;}
  #area .title { display: block;}
#area .label span { margin: 0 0 20px; font-size: 13px;}
	#faq { padding: 70px 0 50px;border-radius: 20px;}
	#faq .list { margin-top: 30px;}
	#contact {padding: 70px 0 0;}
	#contact h2 { padding: 40px 0 16px;}
	#contact .bana { flex-wrap: wrap;}}
@media screen and (max-width: 480px){
	#main { padding: 0 0 160px;}
  #main .mgt16 { text-align: center;}
  #area .linkbox2 { margin-top: 20px;}
  #area h1 img { height: 40px;}
  .title2 { margin: 60px 0 20px; font-size: 20px; padding: 10px 20px;}
  a.link { margin-top: 0; width: auto;}
  #area hr { margin-top: 30px;}
  .pagenav { margin-bottom: 50px;}
  .pagenav ul { gap:2px;}
  .pagenav ul li img { height: 20px;}
  .pagenav ul li a { min-width: 100px; height: auto; padding: 5px 6px 6px; border-radius: 4px;}
	.pagenav ul li a p { font-size: 12px;letter-spacing: -1px;}}



.slider_thumb .slick-track {
  transform: unset !important;
  width:100% !important;
}