@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@500&display=swap');
@import url("default.css");

* {-webkit-text-size-adjust:100%;}
a:link {text-decoration:none; color:#3B3938;}
a:visited{text-decoration:none; color:#3B3938;}
a:hover{text-decoration:none; color:#3B3938;}
a:active{text-decoration:none; color:#3B3938;}

.grecaptcha-badge { opacity: 0; pointer-events: none; }
.full-width { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
.allWrapper { overflow: hidden; }
.container-fluid { max-width: 950px; }

body { font-size: 15px; line-height: 2; letter-spacing: .1em; color: #3B3938; background: linear-gradient(to bottom, #ffffff 0%, #F3EFEE 100%) !important; font-family: "Shippori Mincho", serif; font-weight: 500; font-style: normal; }
header { position: fixed; left: 0; top: 0; width: 100%; z-index: 100; transition: .3s; }
header .logo { position: fixed; top: 40px; left: 40px; }
header .logo img { height: 110px; }
header .wrap { display: flex; justify-content: space-between; align-items: center; }
.link_btn.reservation { position: fixed; top: 33px; right: 130px; } 
.link_btn.reservation a { letter-spacing: .18em; }
header .sns { position: fixed; bottom: 40px; left: 40px; }
header .sns ul { display: flex; align-items: center; }
header .sns ul li { margin-right: 15px; }
header .sns ul li:last-child { margin-right: 0; }
header .sns ul li a { display: block; }
header .fixed_text { position: fixed; bottom: 110px; right: 40px; font-size: 11px; letter-spacing: .16em; writing-mode: vertical-lr; }
header .arrow_btn { position: fixed; bottom: 40px; right: 20px; }
header .arrow_btn a { width: 61px; height: 30px; position: relative; display: block; }
header .arrow_btn a::before { content: '('; position: absolute; left: 10px; bottom: 0; top: 6px; margin: auto 0; }
header .arrow_btn a::after { content: ')'; position: absolute; right: 10px; bottom: 0; top: 6px; margin: auto 0; }
header.white-arrow .arrow_btn a::before,
header.white-arrow .arrow_btn a::after { color: #fff; }
header .arrow_btn a span { font-size: 16px; line-height: 2.5; padding: 0 10px; display: block; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; transition: .3s; }
header .arrow_btn a:hover span { top: -7px; }
header .gnav { position: fixed; right: 0; top: 0; width: 370px; background: #FFFFFD; height: 100%; opacity: 0; visibility: hidden; transition: .3s; overflow: scroll; }
header .gnav.active { opacity: 1; visibility: visible; }
header .gnav ul { display: flex; flex-direction: column; justify-content: start; align-items: start; margin-top: 80px; padding: 0 50px; }
header .gnav ul li { padding: 0 20px; position: relative; }
header .gnav ul a { font-size: 16px; letter-spacing: .16em; padding: 15px 0; display: block; position: relative; transition: .3s; }
header .gnav ul a:before { content: ""; transition: .3s; height: 5px; position: absolute; bottom: 0; left: 0; width: 0; }
header .gnav ul a:hover:before { width: 100%; }
header .gnav .other_list { margin-top: 30px; }
header .gnav .other_list li a { font-size: 11px; color: #959595; padding: 10px 0; }
header .gnav .sns { position: absolute; right: 40px; top: 575px; left: initial; bottom: initial;  }
header .gnav .sns ul { display: flex; align-items: center; flex-direction: initial; padding: 0; margin: 0; }
header .gnav .sns ul li { padding: 0; }
header .gnav .link_btn.reservation a { color: #3B3938; }
header .gnav .fixed_text { position: absolute; right: 40px; top: 470px; color: #3B3938; white-space: nowrap; }
header .gnav .page_top { display: block; position: fixed; bottom: 40px; left: 10px; font-size: 12px; letter-spacing: .16em; z-index: 30; }
header .menu-trg-area { position: fixed; top: 40px; right: 40px; margin: auto; width: 45px; height: 17px; border-radius: 3px; cursor: pointer;}
header .menu-trigger,
header .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box;}
header .menu-trigger { position: absolute; top: 0px; width: 45px; height: 17px; z-index: 2; left: 0; right: 0; margin: auto;}
header .menu-trigger span { position: absolute; left: 0; width: 100%; height: 1px; background-color: #3B3938}
header .menu-trigger span:nth-of-type(2) { top: 8px;}
header .menu-trigger span:nth-of-type(3) { bottom: 0;}
header .menu-trigger.active span { background-color: #3B3938 !important; }
header .menu-trigger.active span:nth-of-type(1) { -webkit-transform: translateY(20px) rotate(-20deg); transform: translateY(20px) rotate(-20deg); top: -14px;}
header .menu-trigger.active span:nth-of-type(2) { left: 50%; opacity: 0; -webkit-animation: active-menu-bar02 .8s forwards; animation: active-menu-bar02 .8s forwards;}
header .menu-trigger.active span:nth-of-type(3) { -webkit-transform: translateY(-24px) rotate(20deg); transform: translateY(-24px) rotate(20deg); bottom: -14px;}
.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: transparent;  opacity: 0; visibility: hidden; z-index: -1; transition: 0.3s; }
.menu-overlay.active { opacity: 1; visibility: visible; }
footer { padding: 130px 0 40px; color: #fff; position: relative; }
footer::before { content: ""; width: 100%; height: 780px; background: linear-gradient(to top, #000, transparent); position: absolute; left: 0; right: 0; bottom: 0; margin: auto 0; }
footer .footer_wrap { position: relative; z-index: 2; }
footer .link_btn a { color: #fff; }
footer .link_btn a::before { left: -5px; }
footer .link_btn a::after { right: -5px; }
footer .link_btn a:hover::before { left: -15px; }
footer .link_btn a:hover::after { right: -15px; }
footer .link_btn.large { margin-right: 180px; }
footer .link_btn.large a { letter-spacing: .16em; padding: 0 50px; }
footer .link_btn.large a::before { left: 0; }
footer .link_btn.large a:hover::before { left: -10px; }
footer .link_btn.large a::before,
footer .link_btn.large a::after { font-size: 25px; }
footer .link_btn.large a::after { right: 0; }
footer .link_btn.large a:hover::after { right: -10px; }
.footer_under h3 { font-size: 15px; letter-spacing: .16em; text-align: center; }
.copyright { font-size: 11px; letter-spacing: .16em; color: #BFBFBF; }

/* common */
.mv_base { opacity: 0; transition: 1.0s; transform: translate(0, 20px); -webkit-transform: translate(0, 20px); }
.mv_base.mv { opacity: 1.0; transform: translate(0, 0); -webkit-transform: translate(0, 0); }
.light { color: #676767; }
.link_btn a { display: inline-block; color: #676767; letter-spacing: .12em; line-height: 1; padding: 0 20px; position: relative; transition: .3s; }
.link_btn a::before { content: '('; position: absolute; left: 0;  top: 50%; transform: translateY(-50%); transition: .5s; }
.link_btn a::after { content: ')'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); transition: .5s; }
.link_btn a:hover::before { left: -10px; }
.link_btn a:hover::after { right: -10px; }
.jp_text { font-size: 13px; line-height: 2.30769; }
.en_text { font-size: 12px; line-height: 2.08333; color: #676767; }
.each_ttl { margin-left: 60px; writing-mode: vertical-rl; position: relative; }
/* .each_ttl .jp { font-size: 22px; letter-spacing: .5em; } */
.each_ttl .en { font-size: 14px; letter-spacing: .16em; position: absolute; top: 0; left: -35px; }

/* fv */
.section-fv { position: relative; width: 100%; height: 100vh; overflow: hidden; }
.section-fv .video-wrap { position: absolute; top: 50%;	left: 50%; width: 100%; height: 56.25vw; min-height: 100vh; min-width: 177.77vh; transform: translate(-50%, -50%); }
.section-fv iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.section-fv video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.section-fv #sound-toggle { position: fixed; width: 60px; bottom: 85px; left: 26px; right: auto; z-index: 10; cursor: pointer; margin: 0 auto; border: none !important; background: none !important; outline: none !important; }

/* content */
.top-content { margin: 160px 0 100px; }
.block_2 .link_btn.blank { margin-left: 240px; }
.block_3 { position: relative; }
.block_3 .top_img3_ab { position: absolute; top: 0; right: 60px; width: 80%; }
.block_3 .top_img4_ab { position: absolute; bottom: 0; right: 15px; width: 55%; }
.block_5 .link_btn.blank { margin-top: 320px; }
.block_5 .negative { margin-top: -150px; }

/* facility */
.top-facility { padding: 160px 0; }
.facility_slider { margin: 0 -5px; }
.facility_slider li { padding: 0 5px; }
.facility_slider .slick-track { animation: scrollfacility 100s linear infinite; display: flex;  }
@keyframes scrollfacility { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* retreat */
.top-retreat { padding-bottom: 240px; }
.retreat_slider { margin: 0 -7px; }
.retreat_slider li { padding: 0 7px; }
.retreat_slider li .bg figure { min-height: 370px; padding-top: 100%; }
.retreat_slider li .bg p { margin-top: 5px; letter-spacing: .16em; }
.retreat_slider .slick-track { animation: scrollretreat 160s linear infinite; display: flex;  }
@keyframes scrollretreat { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* message */
.top-message { padding-bottom: 100px; }

/* access */
.top-access { padding-bottom: 210px; }
.map iframe { width: 100%; height: 240px; }

/* about */
#about .section-fv { position: fixed; top: 0; bottom: 0; left: 0; right: 0; }
.section-about { padding: 140px 0 130px; position: relative; }
.section-about::before { content: ""; position: absolute; top: 280px; left: 0; width: 100%; height: 200%; background: linear-gradient( to top,rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100% ); pointer-events: none; }
.section-about .overlay-content { text-align: center; position: relative; z-index: 20; }
.section-about .each_ttl { margin-left: 0; margin: 0 auto; }
/* .section-about .each_ttl .jp { color: #fff; } */
.section-about .each_ttl .en { text-align: left; color: #fff; }
.section-about .jp_text { font-size: 15px; line-height: 3; letter-spacing: .16em; color: #fff; }
.section-about .en_text { font-size: 13px; line-height: 2.153846; color: #fff; }
.section-about .link_btn a { color: #fff; }
.about_image img { width: 200px; }

/* facility */
.section-facility { padding: 140px 0 160px; }
.section-facility .each_ttl { margin-left: 0; margin: 0 auto; }
.section-facility .facility_slider li { padding: 0 4px; }
.facility_wrap { margin-bottom: 130px; }
.facility_wrap .facility_ttl { font-size: 18px; letter-spacing: .16em; }
.facility_wrap h3 { font-size: 15px; letter-spacing: .16em; }
.facility_information .link_btn.large a { letter-spacing: .16em; padding: 0 50px; }
.facility_information .link_btn.large a::before { left: 0; }
.facility_information .link_btn.large a:hover::before { left: -10px; }
.facility_information .link_btn.large a::before,
.facility_information .link_btn.large a::after { font-size: 25px; }
.facility_information .link_btn.large a::after { right: 0; }
.facility_information .link_btn.large a:hover::after { right: -10px; }
.facility_information p { font-size: 13px; line-height: 1.8461; letter-spacing: .06em; }
.facility_information .border-area { font-size: 12px; line-height: 1.833; letter-spacing: .06em; border: .5px solid #3B3938; padding: 15px 20px; }
.facility_information .border-area span { font-size: 10px; }
.facility_information .leftside-ttl { display: flex; align-items: center; position: relative; }
.facility_information .leftside-ttl span { z-index: 10; position: relative; display: inline-block; padding-right: 5px; }
.facility_information .leftside-ttl .right-line { flex: 1; height: 1px; background: #3B3938; }

@media (max-width: 767px) {
	.container-fluid { padding-left: 20px; padding-right: 20px; }
	body { font-size: 12px; }
	header .wrap { height: 60px; }
	header .logo { top: 25px; left: 20px; z-index: 30; }
	header .logo img { height: 80px; }
	header .gnav { width: 100%;}
	header .gnav ul { display: block; padding: 150px 30px 0 170px; margin-top: 0; }
	header .gnav ul li { padding-left: 0; padding-right: 0; }
	header .gnav ul li:before { display: none; }
	header .gnav ul li a { padding: 15px 0; font-weight: bold; position: relative; }
	header .gnav .other_list { padding: 10px 30px 90px 170px; }
	header .gnav .sns { position: fixed !important; left: 20px !important; bottom: 30px !important; right: initial !important; top: initial !important; }
	header .gnav .sns ul li a { padding: 0 !important; }
	header .menu-trg-area { display: block; top: 25px; right: 20px; }
	header .fixed_text { position: fixed !important; bottom: 110px !important; left: 20px !important; top: initial !important; right: initial !important; }
	header .sns { bottom: 30px; left: 20px; }
	.page_top { display: none !important; }
	.link_btn.reservation { bottom: 30px; right: 20px; top: initial; }
	footer { padding: 80px 0 30px; background-position: 27% !important; }
	footer::before { height: 360px; }
	footer .f-jp { line-height: 2.2; }
	footer .f-en { line-height: 1.7; }
	footer .link_btn.large { margin-right: 0; text-align: center !important; }
	footer .link_btn.large a { font-size: 13px; padding: 0 35px; }
	.footer_under h3 { font-size: 13px; }
	.footer_under p { line-height: 2.2; }

	.section-fv #sound-toggle { bottom: 60px; left: 7px; }

	/* common */
	.jp_text { font-size: 11px; line-height: 2.3636; }
	.en_text { font-size: 10px; line-height: 2; }
	.link_btn a { font-size: 11px; }
	.each_ttl { margin-left: 10px; margin-left: 33px; text-align: start; }
	/* .each_ttl .jp { font-size: 18px; } */
	.each_ttl img { height: 70%; }
	.each_ttl .en { font-size: 10px; left: -23px; }

	/* content */
	.top-content { margin: 85px 0 90px; }
	.block_3 .ab_wrap { display: flex; }
	.block_3 .top_img3_ab { position: static; order: 2; width: 55%; margin-left: 30px; }
	.block_3 .top_img4_ab { position: static; order: 1; width: calc((100% - 55%) - 30px); margin-top: 65%; }
	.block_5 .negative { margin-top: 0; }
	.block_5 .img9 { width: 55%; margin-left: auto; margin-right: 13%; }
	.block_5 .img10 { width: 67%; margin-right: auto; margin-left: 8%; }
	.block_5 .img11 { width: 50%; margin-left: auto; }
	.block_6 .img12 { width: 135%; margin-right: auto; margin-left: -45%; margin-top: -150%; }
	.block_7 .text-center { text-align: left !important; }
	
	/* facility */
	.top-facility { padding: 80px 0 120px; }
	.top-facility .jp_text { font-size: 10px; }
	.facility_slider li { padding: 0 2px; }

	/* section-img */
	.top-imagesarea img { height: 360px; }

	/* retreat */
	.top-retreat { padding-bottom: 120px; }
	.top-retreat .jp_text { font-size: 10px; }
	.retreat_slider li { padding: 0 4px; }
	.retreat_slider li .bg figure { min-height: 212px; padding-top: 0; }

	/* message */
	.top-message { padding-bottom: 150px; }
	.top-message .jp_text { font-size: 10px; }

	/* access */
	.top-access { padding-bottom: 100px; }
	.map iframe { height: 130px; }

	/* about */
	.section-about { padding: 80px 0 50px ; }
	.section-about .jp_text { font-size: 11px; line-height: 2.545454; }
	.section-about .en_text { font-size: 10px; line-height: 1.8; letter-spacing: .08em; }

	/* facility */
	.section-facility { padding: 80px 0 90px; }
	.section-facility .container-fluid { padding-left: 40px; padding-right: 40px; }
	.section-facility .jp_text { font-size: 10px; line-height: 2.2; letter-spacing: .14em; }
	.section-facility .en_text { line-height: 1.8; }
	.section-facility .facility_slider li { padding: 0 2px; }
	.facility_wrap { margin-bottom: 100px; }
	.facility_wrap .facility_ttl { font-size: 13px; }
	.facility_wrap h3 { font-size: 13px; }
	.facility_information .container-fluid { padding-left: 20px; padding-right: 20px; }
	.facility_information .facility_guid { text-align: center; }
	.facility_information .facility_guid img { width: 70%; }
	.facility_information .facility_guid.b1 img { width: 100%; } 
	.facility_information p { font-size: 10px; }
	.facility_information .border-area { font-size: 11px; padding: 10px 20px; }
	.facility_information .border-area span { font-size: 10px; }
	.facility_information .link_btn.large { text-align: center !important; }
	.facility_information .link_btn.large a { font-size: 13px; padding: 0 30px; }
}