@charset "utf-8";
/* ===================================================
	Spa & Facilities CSS
====================================================== */

/* ---------------------------------------------------
local_nav
------------------------------------------------------ */
#lead { padding-bottom: 60px;}
.cmn_local_nav { position: relative; z-index: 10;}
.cmn_local_nav li { width: 380px;}
.cmn_bg02 { top: -160px; bottom: auto;}

@media screen and (max-width: 600px) {
	#lead { padding-bottom: 30px;}
	.cmn_bg02 { top: -100px;}
}


/* ---------------------------------------------------
article共通
------------------------------------------------------ */
article { position: relative; z-index: 10;}
article > .tit_col { display: flex; width: calc((100% - 1300px) / 2 + 115px); min-width: 115px; position: absolute; z-index: 10; background: #fcfbf7;}
article > .tit_col h2 { display: flex; align-items: center; width: 115px; font-size: 45px; writing-mode: vertical-rl;}
article > .tit_col h2 .sub { margin: 75px 0 0; font-size: 14px;}

article .slick_center .ofi { min-height: 650px;}
article [id$="sec01"] { margin: 50px 0 0;}
article [id$="sec01"] .detail { display: flex; justify-content: space-between; margin-top: 80px;}
article [id$="sec01"] .img { position: relative;}
article [id$="sec01"] .img span { position: absolute; bottom: 10px; left: 15px; color: #fff; text-shadow: 0 0 10px #33291d, 0 0 10px #33291d, 0 0 10px #33291d;}
article [id$="sec01"] .txt { width: 510px; max-width: calc(100% - 630px);}
article [id$="sec01"] .txt .cap { font-size: 28px;}
article [id$="sec01"] .txt p + p { margin: 25px 0 0;}

article .info table { width: 100%; border-bottom: 1px solid #d5cfc6; table-layout: fixed;}
article .info th,
article .info td { padding: 20px 0; border-top: 1px solid #d5cfc6;}
article .info th { width: 300px; background: #f1eee9; font-weight: 500;}
article .info td { padding-left: 50px;}
article .info td li { padding: 0 0 0 1.5em; text-indent: -1.5em;}
article .info td li + li { margin: 5px 0 0;}

@media screen and (max-width: 600px) {
	article > .tit_col { display: block; width: auto; min-width: 0; min-height: 0 !important; position: static; background: none;}
	article > .tit_col h2 { display: block; width: auto; padding: 0 0 20px; font-size: 24px; text-align: center; writing-mode: horizontal-tb;}
	article > .tit_col h2 .sub { display: block; margin-top: 5px; font-size: 12px;}

	article .slick_center .ofi { min-height: 0;}
	article [id$="sec01"] { margin-top: 0;}
	article [id$="sec01"] .detail { display: block; margin-top: 20px;}
	article [id$="sec01"] .img span { font-size: 12px;}
	article [id$="sec01"] .txt { width: auto; max-width: none; margin: 20px 0 0;}
	article [id$="sec01"] .txt .cap { font-size: 20px;}
	article [id$="sec01"] .txt p + p { margin-top: 10px;}

	article .info table,
	article .info tbody,
	article .info tr,
	article .info th,
	article .info td { display: block; width: 100%;}
	article .info th,
	article .info td { padding: 10px; border-top: none;}
}


/* ---------------------------------------------------
spa_col
------------------------------------------------------ */
#spa_col { padding: 95px 0 0;}
#spa_col > .tit_col { justify-content: flex-start; top: 95px; right: 0; min-height: 325px;}

#spa_col .cmn_tit { margin-bottom: 30px;}
#spa_col .slick_fade { margin-bottom: 0;}
#spa_col .slick_fade .slick-dots { bottom: 30px;}
#spa_col .slick_fade .ofi { min-height: 600px;}
#spa_col .inner_xs { width: 835px; margin: 70px auto 0;}

#spa_sec02 { margin-top: 120px;}
#spa_sec03 { margin-top: 80px;}
#spa_sec03 .slick-slide div { position: relative;}
#spa_sec03 .slick-slide p { position: absolute; left: 40px; bottom: 20px; color: #fff; text-shadow: 0 0 10px #33291d, 0 0 10px #33291d, 0 0 10px #33291d; font-size: 24px;}
#spa_sec03 .slick-slide p span { font-size: 14px;}

#spa_col .info { margin-top: 100px;}

#spa_sec04 { display: flex; align-items: center; justify-content: space-between; padding: 45px 50px; margin-top: 135px; background: url(../img/bg01.jpg) center top;}
#spa_sec04 .cmn_tit { margin-bottom: 25px;}
#spa_sec04 .cmn_tit .main { font-size: 35px;}
#spa_sec04 .txt { width: 500px; max-width: calc(100% - 537px);}
#spa_sec04 .txt p + p { margin: 15px 0 0;}

@media screen and (max-width: 600px) {
	#spa_col { padding-top: 50px;}

	#spa_col .cmn_tit { margin-bottom: 20px;}
	#spa_col .slick_fade .slick-dots { bottom: 10px;}
	#spa_col .slick_fade .ofi { min-height: 0;}
	#spa_col .inner_xs { width: 92%; margin-top: 20px;}

	#spa_sec02,
	#spa_sec03 { margin-top: 50px;}
	#spa_sec03 .slick-slide p { left: 15px; bottom: auto; top: 10px; font-size: 16px;}
	#spa_sec03 .slick-slide p span { font-size: 12px;}

	#spa_col .info { margin-top: 50px;}

	#spa_sec04 { display: block; padding: 20px 20px 15px; margin-top: 50px;}
	#spa_sec04 .cmn_tit { margin-bottom: 15px;}
	#spa_sec04 .cmn_tit .main { font-size: 20px;}
	#spa_sec04 .txt { width: auto; max-width: none; margin: 0 0 20px;}
	#spa_sec04 .img img { width: 100%;}
}



/* ---------------------------------------------------
fac_col
------------------------------------------------------ */
#fac_col { padding: 170px 0 150px;}
#fac_col > .tit_col { justify-content: flex-end; left: 0; top: 170px; min-height: 360px;}

#fac_col .cmn_tit { margin-bottom: 50px;}

#fac_sec01 { padding: 35px 0 40px; background: url(../../spa/img/fac_sec01_bg01.png) no-repeat left bottom, url(../../spa/img/fac_sec01_bg02.jpg) center top;}

#fac_col .item { text-align: center;}
#fac_col .item img { display: block;}
#fac_col .item p { display: inline-block; padding: 0 0 0 55px; margin: 20px 0 0; position: relative; font-size: 25px;}
#fac_col .item p::before { content: ''; width: 30px; height: 1px; position: absolute; left: 0; top: 50%; background: #a5a5a5;}
#fac_col .item p span { font-size: 20px;}

#fac_sec02 { padding: 70px 0 0; background: url(../../spa/img/fac_sec02_bg.png) no-repeat left 40px;}
#fac_sec02 .detail { display: flex; flex-wrap: wrap; justify-content: space-between;}
#fac_sec02 .detail .item { width: 580px; max-width: 49%; margin: 0 0 30px;}
#fac_sec02 .detail .txt { display: flex; flex-direction: column; justify-content: space-between; width: 515px; max-width: 49%; height: 450px; max-height: 35vw; min-height: 420px;}
#fac_sec02 .detail .txt div { padding: 0 0 30px; margin: auto 0;}
#fac_sec02 .detail .txt p.cap { font-size: 28px;}
#fac_sec02 .detail .txt p + p { margin: 20px 0 0;}
#fac_sec02 .detail .txt .cmn_btn01 { width: 400px; min-height: 70px; margin: 0 auto;}
#fac_sec02 .info { margin-top: 40px;}

#fac_sec03 { padding: 100px 0 180px;}
#fac_sec03 ul { display: flex; justify-content: space-between;}
#fac_sec03 li { width: 380px; max-width: calc((100% - 50px) / 3);}

#fac_sec04 { padding: 60px 0 75px; position: relative; z-index: 0; background: url(../img/bg01.jpg) center top; text-align: center;}
#fac_sec04::before,
#fac_sec04::after { content: ''; position: absolute; z-index: -1;}
#fac_sec04::before { width: 413px; height: 338px; top: -95px; left: 0; background: url(../../spa/img/fac_sec04_bg01.png) no-repeat left top;}
#fac_sec04::after { width: 640px; height: 347px; bottom: -88px; right: 0; background: url(../../spa/img/fac_sec04_bg02.png) no-repeat right bottom;}
#fac_sec04 .cmn_tit { margin-bottom: 25px;}
#fac_sec04 .cmn_tit .main { font-size: 35px;}
#fac_sec04 .cmn_btn02 { width: 400px; min-height: 70px; margin: 30px auto 0; border-color: #000; color: #000;}

@media screen and (max-width: 600px) {
	#fac_col { padding: 50px 0 80px;}
	#fac_col > .tit_col { padding-top: 50px; background: url(../../spa/img/fac_sec01_bg02.jpg) center bottom;}

	#fac_col .cmn_tit { margin-bottom: 20px;}

	#fac_sec01 { padding: 0 0 40px; background-size: 15vw auto, auto auto;}

	#fac_col .item img { width: 100%;}
	#fac_col .item p { padding-left: 35px; font-size: 15px;}
	#fac_col .item p::before { width: 25px; height: 1px;}
	#fac_col .item p span { font-size: 14px;}

	#fac_sec02 { padding-top: 50px; background-position: left 3vw; background-size: 38vw auto;}
	#fac_sec02 .detail { display: block;}
	#fac_sec02 .detail .item { width: 100%; max-width: none;}
	#fac_sec02 .detail .txt { display: block; width: auto; max-width: none; height: auto; max-height: none; min-height: 0;}
	#fac_sec02 .detail .txt div { padding-bottom: 20px;}
	#fac_sec02 .detail .txt p.cap { font-size: 20px;}
	#fac_sec02 .detail .txt p + p { margin-top: 10px;}
	#fac_sec02 .detail .txt .cmn_btn01 { width: 100%; min-height: 50px;}

	#fac_sec03 { padding: 50px 0;}
	#fac_sec03 ul { display: block;}
	#fac_sec03 li { width: auto; max-width: none;}
	#fac_sec03 li + li { margin: 30px 0 0;}

	#fac_sec04 { padding: 50px 0; text-align: left;}
	#fac_sec04::before { width: 40vw; top: -10vw; background-size: 100% auto;}
	#fac_sec04::after { width: 60vw; bottom: -9vw; background-size: 100% auto;}
	#fac_sec04 .cmn_tit .main { font-size: 20px;}
	#fac_sec04 .cmn_btn02 { width: 100%; min-height: 50px; margin-top: 20px;}
}