@charset "utf-8";

/* ========================
【スパ＆ヨガ「spa.html」専用】spa.css
======================== */
/*-------     ★★ コンテンツヘッダー《contents header》 ★★     ------*/
/* ★☆ 《contents header》mv ☆★ */

/*== media：751px～ ==*/
@media (min-width:751px) {
.bali_conts.underlayer .mv {
	background-image: url("../img/spa/mv_bg_pc.jpg");
}
.bali_conts.underlayer .mv .logo {
	width: 478px;
	height: 129px;
	background-image: url("../img/spa/mv_logo_pc.png");
}
}

/*== media：～750px ==*/
@media (max-width:750px) {
.bali_conts.underlayer .mv {
	background-image: url("../img/spa/mv_bg_sp.jpg");
}
.bali_conts.underlayer .mv .logo {
 width: calc((548 / 750) * 100%);
 padding-top: calc((171 / 634) * 100%);
	background-image: url("../img/spa/mv_logo_sp.png");
}
}
/*-------     ★★ コンテンツメイン 共通《contents main common》 ★★     ------*/
/* ★☆ 《contents main common》main_conts ☆★ */


/*-------     ★★ コンテンツメイン ダミーテキスト《contents main index》 ★★     ------*/
/* ★☆ 《contents main index》sec_specialConts_list ☆★ */
#sec_specialConts_list.bali_map_conts .sec_ttl {
	padding-top: calc(72px + 5px);
	background-image: url("../img/spa/sec_ttl_spaMap.png");
	background-size: 455px;
}
/* ★☆ 《contents main index》sec_specialConts_main ☆★ */
#sec_specialConts_main .tab_btn_box {
	display: flex;
	justify-content: space-between;
}
#sec_specialConts_main .tab_btn {
	background: no-repeat center center;
	border: solid #c3cf74;
	color: #fff;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
}
#sec_specialConts_main .tab_btn.spa {
	background-image: url("../img/bg_btn_pink.png");
}
#sec_specialConts_main .tab_btn.yoga {
	background-image: url("../img/bg_btn_purple.png");
}
#sec_specialConts_main .tab_btn.not_click {
	background: #8f8f8f;
	color: #c1c1c1;
	cursor: default;
}
#sec_specialConts_main .tab_btn:not(.active) {
	position: relative;
}
#sec_specialConts_main .tab_btn:not(.active)::before {
	content: "";
	background: no-repeat center center;
	background-size: contain;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
#sec_specialConts_main .tab_btn.spa:not(.active):not(.not_click)::before {
	background-image: url("../img/spa/icon_arrow_circle_white_pink_B.png");
}
#sec_specialConts_main .tab_btn.yoga:not(.active):not(.not_click)::before {
	background-image: url("../img/spa/icon_arrow_circle_white_purple_B.png");
}
#sec_specialConts_main .tab_btn.not_click::before {
	background-image: url("../img/icon_arrow_circle_gray_B.png");
}
#sec_specialConts_main .tab_btn .btn {
	display: inline-block;
	position: relative;
	background: no-repeat left center;
}
#sec_specialConts_main .tab_btn.spa .btn {
	background-image: url("../img/spa/conts_list_spa.png");
}
#sec_specialConts_main .tab_btn.yoga .btn {
	background-image: url("../img/spa/conts_list_yoga.png");
}
#sec_specialConts_main .tab_btn.yoga.not_click .btn {
	background-image: url("../img/spa/conts_list_yoga_grayout.png");
}
#sec_specialConts_main .conts_detail_ttl {
	background: no-repeat left center;
	white-space: nowrap;
}
#sec_specialConts_main .conts_spa .conts_detail_ttl {
	color: #ff365e;
	background-image: url("../img/spa/conts_detail_ttl_spa.png");
}
#sec_specialConts_main .conts_yoga .conts_detail_ttl {
	color: #9d37b2;
	background-image: url("../img/spa/conts_detail_ttl_yoga.png");
}
#sec_specialConts_main .conts_detail_subttl {
	color: #fff;
	text-align: left;
	background: no-repeat center top;
	display: flex;
	align-items: center;
}
#sec_specialConts_main .conts_spa .conts_detail_subttl {
	background-image: url("../img/spa/bg_ttl_pink.png");
}
#sec_specialConts_main .conts_yoga .conts_detail_subttl {
	background-image: url("../img/spa/bg_ttl_purple.png");
}
#sec_specialConts_main .conts_detail_subttl span {
	display: inline-block;
	background: no-repeat left center;
}
#sec_specialConts_main .conts_spa .detail_hotelspa .conts_detail_subttl span {
	background-image: url("../img/spa/icon_hotelspa.png");
}
#sec_specialConts_main .conts_spa .detail_cityspa .conts_detail_subttl span {
	background-image: url("../img/spa/icon_cityspa.png");
}
#sec_specialConts_main .conts_yoga .detail_freeyoga .conts_detail_subttl span {
	background-image: url("../img/spa/icon_freeyoga.png");
}

/*== media：751px～ ==*/
@media (min-width:751px) {
#sec_specialConts_main .conts_ttl {
	margin-bottom: 40px;
}
#sec_specialConts_main .tab_btn {
 width: calc((472 / 960) * 100%);
	border-width: 2px;
	font-size: calc(20rem / 14);
	height: 57px;
}
#sec_specialConts_main .tab_btn.active {
	height: 69px;
	border-bottom-width: 1px;
}
#sec_specialConts_main .tab_btn:not(.active)::before {
	width: 32px;
	height: 32px;
 right: calc((63 / 468) * 100%);
}
#sec_specialConts_main .tab_btn .btn {
	height: 28px;
	line-height: 28px;
}
#sec_specialConts_main .tab_btn.spa .btn {
	padding-left: calc(47px + 14px);
	background-size: 47px;
}
#sec_specialConts_main .tab_btn.yoga .btn {
	padding-left: calc(63px + 14px);
	background-size: 63px;
}
#sec_specialConts_main .tab_btn.spa.active .btn {
	padding-left: calc(78px + 14px);
	background-size: 78px;
	height: 46px;
	line-height: 46px;
}
#sec_specialConts_main .tab_btn.yoga.active .btn {
	padding-left: calc(98px + 14px);
	background-size: 98px;
	height: 43px;
	line-height: 43px;
}
#sec_specialConts_main .conts_detail_lead {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#sec_specialConts_main .conts_detail_lead + * {
	margin-top: 55px;
}
#sec_specialConts_main .conts_detail_ttl {
	font-size: calc(30rem / 14);
	padding-right: 20px;
}
#sec_specialConts_main .conts_spa .conts_detail_ttl {
	height: 109px;
	line-height: 109px;
	padding-left: calc(184px + 9px);
	background-size: 184px;
}
#sec_specialConts_main .conts_yoga .conts_detail_ttl {
	height: 91px;
	line-height: 91px;
	padding-left: calc(204px + 9px);
	background-size: 204px;
}
#sec_specialConts_main .conts_detail_txt {
 width: calc((520 / 820) * 100%);
}
#sec_specialConts_main .conts_detail .detail_main + * {
	margin-top: 40px;
}
#sec_specialConts_main .conts_detail .detail_main + .detail_main {
	margin-top: 60px;
}
#sec_specialConts_main .conts_detail_subttl {
	font-size: calc(26rem / 14);
	height: 60px;
	padding: 0 25px;
	margin-bottom: 20px;
}
#sec_specialConts_main .conts_spa .detail_hotelspa .conts_detail_subttl span {
	height: 29px;
	line-height: 29px;
	padding-left: calc(39px + 18px);
	background-size: 39px;
}
#sec_specialConts_main .conts_spa .detail_cityspa .conts_detail_subttl span {
	height: 42px;
	line-height: 42px;
	padding-left: calc(43px + 18px);
	background-size: 43px;
}
#sec_specialConts_main .conts_yoga .detail_freeyoga .conts_detail_subttl span {
	height: 32px;
	line-height: 32px;
	padding-left: calc(48px + 18px);
	background-size: 48px;
}
}

/*== media：～750px ==*/
@media (max-width:750px) {
#sec_specialConts_main .tab_btn {
 width: calc((349 / 710) * 100%);
	border-width: 1px;
	font-size: calc(15rem / 13);
	height: calc(43rem / 13);
	min-height: auto;
}
#sec_specialConts_main .tab_btn.active {
	height: calc(50rem / 13);
	border-bottom-width: 0;
}
#sec_specialConts_main .tab_btn:not(.active)::before {
	width: calc(20rem / 13);
	height: calc(20rem / 13);
	right: calc(7.5rem / 13);
}
#sec_specialConts_main .tab_btn.spa .btn {
	padding-left: calc((39rem + 8rem) / 13);
	background-size: calc(39rem / 13);
	height: calc(23rem / 13);
	line-height: calc(23rem / 13);
}
#sec_specialConts_main .tab_btn.yoga .btn {
	padding-left: calc((49rem + 8rem) / 13);
	background-size: calc(49rem / 13);
	height: calc(21.5rem / 13);
	line-height: calc(21.5rem / 13);
}
#sec_specialConts_main .tab_btn.spa.active .btn {
	padding-left: calc((55rem + 8rem) / 13);
	background-size: calc(55rem / 13);
	height: calc(32rem / 13);
	line-height: calc(32rem / 13);
}
#sec_specialConts_main .tab_btn.yoga.active .btn {
	padding-left: calc((67rem + 8rem) / 13);
	background-size: calc(67rem / 13);
	height: calc(30.5rem / 13);
	line-height: calc(30.5rem / 13);
}
#sec_specialConts_main .conts_detail_lead {
	text-align: center;
}
#sec_specialConts_main .conts_detail_lead + * {
	margin-top: calc(22rem / 13);
}
#sec_specialConts_main .conts_detail_ttl {
	font-size: calc(20rem / 13);
	display: inline-block;
}
#sec_specialConts_main .conts_spa .conts_detail_ttl {
	height: calc(68rem / 13);
	line-height: calc(68rem / 13);
	padding-left: calc((115rem + 10rem) / 13);
	background-size: calc(115rem / 13);
}
#sec_specialConts_main .conts_yoga .conts_detail_ttl {
	height: calc(64rem / 13);
	line-height: calc(64rem / 13);
	padding-left: calc((143.5rem + 10rem) / 13);
	background-size: calc(143.5rem / 13);
}
#sec_specialConts_main .conts_detail_ttl + * {
	margin-top: calc(24rem / 13);
}
#sec_specialConts_main .conts_detail_txt {
	text-align: left;
}
#sec_specialConts_main .conts_detail .detail_main + * {
	margin-top: calc(30rem / 13);
}
#sec_specialConts_main .conts_detail .detail_main + .detail_main {
	margin-top: calc(50rem / 13);
}
#sec_specialConts_main .conts_detail_subttl {
	font-size: calc(21rem / 13);
	height: calc(45rem / 13);
	padding: 0 1rem;
	margin-bottom: calc(15rem / 13);
}
#sec_specialConts_main .conts_detail_subttl span {
	height: calc(21rem / 13);
	line-height: calc(21rem / 13);
}
#sec_specialConts_main .conts_spa .detail_hotelspa .conts_detail_subttl span {
	/*height: calc(19.5rem / 13);
	line-height: calc(19.5rem / 13);*/
	padding-left: calc((26.5rem + 15rem) / 13);
	background-size: calc(26.5rem / 13);
}
#sec_specialConts_main .conts_spa .detail_cityspa .conts_detail_subttl span {
	height: calc(24rem / 13);
	line-height: calc(24rem / 13);
	padding-left: calc((24rem + 15rem) / 13);
	background-size: calc(24rem / 13);
}
#sec_specialConts_main .conts_yoga .detail_freeyoga .conts_detail_subttl span {
	/*height: calc(19.5rem / 13);
	line-height: calc(19.5rem / 13);*/
	padding-left: calc((29.5rem + 15rem) / 13);
	background-size: calc(29.5rem / 13);
}
}