@charset "utf-8";
.eng { font-family: "Josefin Sans", sans-serif; font-optical-sizing: auto;}
#wrapper { padding-top: 94px;}
@media (max-width: 1201px) {
	#wrapper { padding-top: 74px;}
}
@media (max-width: 801px) {
	#wrapper { padding-top: 100px;}
}
@media (max-width: 481px) {
	#wrapper { padding-top: 84px;}
}


#hd .hd-nav ul li.exp a { background: #BF827F;}
#hd .hd-nav ul li.exp a:hover { background: #D6C1C0;}

#hd .hd-nav ul li.reserve a { background: #B1AD9E;}
#hd .hd-nav ul li.reserve a:hover { background: #D6D4CB;}


#open-menu .inner { background: #DFDDDC;}
#open-menu .aside ul li.exp a { background: #CA9F9D;}
#open-menu .aside ul li.exp a:hover { background: #D6C1C0;}
#open-menu .aside ul li.reserve a { background: #B1AD9E}
#open-menu .aside ul li.reserve a:hover { background: #D6D4CB;}

aside.sns ul li a svg { fill: #776F6B;}
#ft { background: #DFDDDC;}
#ft.wh { background: #fff;}
#ft .ft-nav .flex ul li ul.area2 li dl dt span { color: #776F6B; text-decoration: underline;}
#ft .copyright p { color: #776F6B;}
@media (max-width: 641px) {
	#ft .ft-nav .flex .nav-1,
	#ft .ft-nav .flex .nav-2,
	#ft .ft-nav .flex .nav-3 { padding-left: 0px; border-left: none;}
}
@media (max-width: 481px) {
	#ft .ft-nav .flex .nav-3 { width: 100%;}
}

#otherbrands { background: #E0E7E8;}

.page-kv .inner-kv { background: rgba(0,0,0,0.25);}
.page-kv .txt { padding: 160px 0 130px;}
.page-kv.no-bg .inner-kv { background: #fff;}
.page-kv.no-bg .txt { padding: 100px 0 20px;}
.page-kv.no-bg .txt.pt40 { padding-top: 40px;}
.page-kv .txt h1{ margin-bottom: 12px; color: #fff; font-size: 42px; font-weight: 300; letter-spacing: 0.26rem; line-height: 1; text-align: center; opacity: 0.75;}
.page-kv .txt p { color: #fff; font-size: 15px; letter-spacing: 0.1rem; line-height: 1; text-align: center;}
.page-kv.no-bg .txt h1 { color: #677374;}
.page-kv.no-bg .txt p { color: #677374;}
@media (max-width: 641px) {
	.page-kv  .txt { padding: 120px 0 100px;}
}
@media (max-width: 481px) {
	.page-kv .txt { padding: 80px 0 60px;}
	.page-kv.no-bg .txt { padding: 60px 0 20px;}
	.page-kv .txt h1{ font-size: 30px;}
	.page-kv .txt p { font-size: 12px;}
}

#amenities .inner-sct { padding: 70px 0;}
#amenities .ttl { margin-bottom: 36px;}
#amenities .ttl h2{ color: #677374; font-size: 35px; font-weight: 300; letter-spacing: 0.2rem; line-height: 1.2; text-align: center;}
#amenities .ttl p { color: #344446; font-size: 14px; text-align: center;}
#amenities .read { width: 88%; max-width: 920px; margin: 0 auto 40px;}
#amenities .read p { letter-spacing: 0.08rem; text-align: center;}
#amenities ul { width: 92%; max-width: 1080px; margin: 0 auto; font-size: 0; text-align: center;}
#amenities ul li { display: inline-block; width: 25%; vertical-align: top; font-size: 15px;}
#amenities ul li dl dt { margin-bottom: 20px; }
#amenities ul li dl dt figure { position: relative; width: 80%; max-width: 200px; margin: 0 auto; padding: 40px; background: #fff; border-radius: 50%;}
#amenities ul li dl dt figure img { width: 100%;}
@media (max-width: 801px) {
	#amenities ul li dl dt figure { padding: 20px;}
	#amenities ul li dl dd span { display: block;}
}
@media (max-width: 641px) {
	#amenities .inner-sct { padding: 60px 0;}
	#amenities .read { margin-bottom: 20px;}
	#amenities .read p{ text-align: left;}
	#amenities ul li { width: 50%; padding: 20px 0;}
	#amenities ul li dl dt { margin-bottom: 12px; }
	#amenities ul li dl dt figure { padding: 30px;}
}
@media (max-width: 481px) {
	#amenities .inner-sct { padding: 40px 0;}
	#amenities .read p { font-size: 13px;}
	#amenities ul li { width: 50%; font-size: 12px; padding: 12px 0;}
	#amenities ul li dl dt { margin-bottom: 8px; }
}


.btn-more {}
.btn-more a{ position: relative;}

.btn-exp { width: 88%; max-width: 600px; margin: 0 auto;}
.btn-exp a { position: relative; display: block; background: #776F6B; border-radius: 50px; box-shadow: 0 3px 6px rgba(0,0,0,.16); overflow: hidden;
 color: #fff; font-size: 21px; text-decoration: none; text-align: center; transition: 0.3s ease;
}
.btn-exp a span { position: relative; display: inline-block; padding: 23px 12px; background: #776F6B; letter-spacing: 0.12rem; z-index: 2; transition: 0.3s ease;}
.btn-exp a:after{ content: ''; display: block; width: 130px; height: 8px; position: absolute; top: 40%; right: 36px; z-index: 1;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 8.5"><polygon points="139.77 8.54 0 8.54 0 7.48 137.17 7.48 121.91 .98 122.32 0 139.98 7.52 139.77 8.54" fill="%23ffffff"/></svg>');
 background-size: auto 100%; background-repeat: no-repeat; background-position: 100% 50%;
}
.btn-exp a:hover,
.btn-exp a:hover span  { background: #ADA9A7;}
@media (max-width: 801px) {
	.btn-exp a { font-size: 18px;}
	.btn-exp a span { padding: 20px;}
}
@media (max-width: 481px) {
	.btn-exp a { font-size: 15px; text-align: center;}
	.btn-exp a span { padding-left: 0px;}
	.btn-exp a:after{ width: 40px; right: 24px; top: 36%;}
}

.btn-report { width: 88%; max-width: 600px; margin: 0 auto;}
.btn-report a { position: relative; display: block; background: #DFDDDC; border-radius: 50px; box-shadow: 0 3px 6px rgba(0,0,0,.16); overflow: hidden;
 color: #776F6B; font-size: 21px; text-decoration: none; text-align: center; transition: 0.3s ease;
}
.btn-report a span { position: relative; display: inline-block; padding: 23px 12px; background: #DFDDDC; letter-spacing: 0.12rem; z-index: 2; transition: 0.3s ease;}
.btn-report a:after{ content: ''; display: block; width: 80px; height: 8px; position: absolute; top: 40%; right: 36px; z-index: 1;
 background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 8.5"><polygon points="139.77 8.54 0 8.54 0 7.48 137.17 7.48 121.91 .98 122.32 0 139.98 7.52 139.77 8.54" fill="%23776F6B"/></svg>');
 background-size: auto 100%; background-repeat: no-repeat; background-position: 100% 50%;
}
.btn-report a:hover,
.btn-report a:hover span  { background: #bbb7b5;}
@media (max-width: 801px) {
	.btn-report a { font-size: 18px;}
	.btn-report a span { padding: 20px;}
}
@media (max-width: 481px) {
	.btn-report a { font-size: 15px; text-align: center;}
	.btn-report a span { padding-left: 0px;}
	.btn-report a:after{ width: 40px; right: 24px; top: 36%;}
}



#trial .ttl { display: none;}
#trial .outer { position: relative; width: 100%; max-width: 1420px; margin: 0 auto;}
#trial .outer .img { position: absolute; left: 0; top: 50%; transform: translateY(-54%); width: 50%; padding-right: 68px;}
#trial .outer .img img { width: 100%;}
#trial .ctn { width: 90%; max-width: 1000px; margin: 0 auto;}
#trial .ctn .flex { display: flex; justify-content: space-between;}
#trial .ctn .pht { width: 50%;}
#trial .ctn .txt { width: 50%;}
#trial .ctn .txt h3 { margin-bottom: 72px;}
#trial .ctn .txt h3 img { width: 100%; max-width: 400px;}
#trial .ctn .txt p { font-size: 15px; letter-spacing: 0.08rem; line-height: 2.0;}
#trial .ctn .txt p.tit { margin-bottom: 50px; font-size: 14px; line-height: 1.2;}
#trial .ctn .txt p.tit span { display: block; margin-bottom: 4px; color: #344446; font-size: 35px; font-weight: 300; letter-spacing: 0.25rem;}
@media (max-width: 1001px){
	#trial .outer .img { padding-right: 40px;}
	#trial .ctn .txt h3 { margin-bottom: 50px;}
}
@media (max-width: 801px) {
	#trial .ttl { display: block; margin-bottom: 40px;}
	#trial .ttl h2 { color: #677374; font-size: 24px; font-weight: 300; letter-spacing: 0.1rem; line-height: 1; text-align: center;}
	#trial .ttl p { color: #344446; font-size: 12px; text-align: center;}

	#trial .outer .img { position: relative; left: auto; top: auto; transform: translateY(0%); width: 88%; padding-right: 0px;}
	#trial .ctn {}
	#trial .ctn .flex { display: block;}
	#trial .ctn .pht { display: none;}
	#trial .ctn .txt { width: 100%; padding: 40px 0;}
	#trial .ctn .txt h3 { margin-bottom: 40px;}
	#trial .ctn .txt p.tit { display: none;}

}
@media (max-width: 481px) {
	#trial .ttl { margin-bottom: 20px;}
	#trial .ctn .txt { padding: 30px 0;}
	#trial .ctn .txt h3 { margin-bottom: 30px;}
}



#faq .ctn { width: 88%; max-width: 1000px; margin: 0 auto;}
#faq ul { width: 100%; max-width: 1000px; margin: 0 auto 40px; border-top: solid 1px #DFDDDC;}
#faq ul li { position: relative; border-bottom: solid 1px #DFDDDC; cursor: pointer;}
#faq ul li svg { position: absolute; right: 0; top: 50%; transform: translateY(-50%); z-index:1; width: 40px; transition: 0.3s ease;}
#faq ul li svg circle { fill: #DFDDDC; stroke: #DFDDDC; stroke-width: 1px; transition: 0.3s ease;}
#faq ul li svg line { stroke: #fff; stroke-width: 1.5px; transition: 0.3s ease;}
#faq ul li svg line.v { transform-origin: 50% 50%; transform: rotate(0deg);}
#faq ul li dl dt { position: relative; padding: 30px 100px 30px 50px; color: #776F6B; font-size: 18px; letter-spacing: 0.08rem; z-index: 2;}
#faq ul li dl dt:after { content: 'Q'; font-family: "Josefin Sans", sans-serif; color: #a09a97; font-size: 30px; font-weight: 600; line-height: 1;
 position: absolute; left: 0px; top: 30px;
}
#faq ul li dl dt svg { display: none;}
#faq ul li dl dd {  height: 0px; padding: 0px 100px 0px 50px; font-size: 14px; line-height: 2; overflow: hidden; transition: 0.3s ease;}
#faq ul li dl dd a { color: #000;}
#faq ul li dl dd a:hover { text-decoration: none;}
#faq ul li.open svg circle { fill: #fff;}
#faq ul li.open svg line { stroke: #DFDDDC;}
#faq ul li.open svg line.v { transform: rotate(270deg);}
#faq ul li.open dl dd { height: auto; padding: 0px 100px 20px 50px;}
@media (max-width: 801px) {
	#faq ul li dl dt { padding: 20px 60px 20px 50px;}
	#faq ul li dl dt:after { top: 24px;}
	#faq ul li dl dd { padding: 0px 60px 15px 50px;}
	#faq ul li.open dl dd { padding: 0px 60px 0px 50px;}
}
@media (max-width: 641px) {
	#faq ul li svg.pc-arw { display: none;}
	#faq ul li dl dt { padding: 20px 60px 20px 40px;}
	#faq ul li dl dt svg.sp-arw { display: block; width: 32px;}
	#faq ul li dl dd { padding: 0px 0px 0px 40px;}
	#faq ul li.open dl dd { padding: 0px 0px 15px 40px;}
}
@media (max-width: 481px) {
	#faq ul li dl dt { font-size: 15px;}
	#faq ul li dl dd { font-size: 13px; line-height: 1.8;}
}