@charset "utf-8";

/*====================================================================================================================================================== */
/*====================================================================================================================================================== */
/*====================================================================================================================================================== */
/*		About Salons
/*====================================================================================================================================================== */
/*====================================================================================================================================================== */
/* Section 1 - spa selection */
/* ------------------------- */
#spa_selection_left {
	width: 38%;
	margin-right: 2%;
}

#spa_selection_left ul {
	font-size: 20px;
	line-height: 25px;
	border: 1px solid #52A463;
}

#spa_selection_left ul li {
	border-bottom: 1px solid #52A463;
}

#spa_selection_left ul li a {
	background: url(../img/salon/right_arrow.png) no-repeat 95% center;
	display: block;
	color: #52A463;
	padding: 14px;
}

#spa_selection_left ul li#on a {
	background: url(../img/salon/down_arrow_white.png) no-repeat 95% center;
	background-color: #A8D1B1;
	color: #FFF;
}

#spa_selection_left ul li a:hover {
	background-color: #A8D1B1;
	color: #FFF;
}

#spa_selection_left ul li.last_entry {
	border-bottom: none;
}

/* */
#spa_selection_right span {
	background-color: #A8D1B1;
	padding: 15px;
	display: block;
	margin: 0 auto 20px;
}
#spa_selection_right span.ib {
	display: inline-block;
	margin: 0;
	padding: 0;
	background: transparent;
}
#spa_selection_right span img {
	display: block;
	margin: 0 auto;
}

#spa_selection_right h4 {
	color: #52A463;
	border-bottom: 2px solid #E0E0E0;
	font-size: 18px;
	line-height: 24px;
}

#spa_selection_right p {
	margin: 5px 0 15px;
}

/* Section 2 - Images and video */
/* ---------------------------- */
#spa_imgvideo_left {
	width: 52.4%;
	margin-right: 2%;
}

/* Pages NOT NEEDING Youtube */
#spa_imgvideo_left.no_video {
	margin-left: 23.8%;
	margin-right: auto;
}

/* Gray left/right buttons */
#spa_img_left_exterior,
#spa_img_right_exterior {
	width: 8.5%;
}

#spa_img_left_exterior {
	background: url(../img/salon/left_arrow.png) no-repeat #E0E0E0 center center;
	left: 0%;
}
#spa_img_right_exterior {
	background: url(../img/salon/right_arrow.png) no-repeat #E0E0E0 center center;
	right: 0%;
}

#spa_img_mid {
	width: 81%;
	margin: 0 9.5%;
}

#spa_img_mid p {
	margin: 10px 15px 0;
}

/* Video area */
#spa_imgvideo_right span {
	position: relative;
	display: block;
	padding-top: 60%;
}

#spa_imgvideo_right iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	
}

/* Section 3 - Directions */
/* ---------------------- */
#spa_directions_left {
	width: 54.2%;
	margin-right: 3%;
}

#spa_directions_leftBG {
	display: block;
	padding: 3.5% 2% 7%;
	background-color: #EDF5EE;
	text-align: center;
}

/* Osaka ONLY*/
a.spa_direction_changer {
	background: url(../img/salon/miniarrow.png) no-repeat 97% center;
	display: block;
	border: 1px solid #52A463;
	margin: 0 10%;
	line-height: 1.2em;
	padding: 5px 20px 5px 5px;
}

a.spa_direction_changer:hover {
	background-color: #A8D1B1;
	color: #FFF;
}

/* Top part */
#spa_directions_links {
	text-align: center;
	margin: 3.5% auto 7%;
}

#spa_directions_links .columns {
	margin-bottom: 3.5%;
}

#spa_directions_links .spa_directions_links1 .col:first-child {
	margin-left: 39.5%;
}
#spa_directions_links .spa_directions_links2 .col:first-child {
	margin-left: 27%;
}
#spa_directions_links .spa_directions_links3 .col:first-child {
	margin-left: 14.5%;
}
#spa_directions_links .spa_directions_links4 .col:first-child {
	margin-left: 2%;
}

#spa_directions_links .col.last_entry {
	margin-right: auto;
}

#spa_directions_links .col {
	width: 21%;
	position: relative;
	margin-right: 4%;
}

#spa_directions_links .col a {
	display: block;
	padding-top: 50.6%;
}

#spa_directions_links .col p {
	position: absolute;
	width: 33.6%;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #A8D1B1;
	color: #FFF;
}

#spa_directions_links .col span {
	padding-top: 73.33%;
	display: block;
	line-height: 18px;
	font-size: 18px;
	margin-top: -9px;
}

#spa_directions_links .col img {
	position: absolute;
	width: 66.4%;
	height: 100%;
	right: 0;
	top: 0;
}

/* Bottom part */
#spa_directions_imgs {
	margin: 0 5.5%;
}

#spa_directions_left h4 {
	background-color: #A8D1B1;
	padding: 10px 0 10px 44px;
	position: relative;
	color: #FFF;
	font-size: 16px;
	line-height: 18px;
	text-align: left;
}

#spa_directions_left h4 strong {
	background: url(../img/salon/white_circle.png) no-repeat;
	position: absolute;
	top: 50%;
	margin-top: -12px;
	left: 10px;
	color: #52A463;
	line-height: 24px;
	text-align: center;
	height: 24px;
	width: 24px;
}

#spa_directions_leftBG .spa_direction {
	display: block;
	padding: 15px;
	background-color: #FFF;
	text-align: left;
}

#spa_directions_leftBG .spa_direction img {
	display: block;
	width: 100%;
	margin: 0 0 15px;
}

/* */
#spa_directions_right img {
	width: 100%;
}

#spa_directions_right h3 {
	color: #52A463;
	margin: 0 0 5px;
}

#spa_directions_right span {
	position: relative;
	display: block;
	padding-top: 60%;
	margin-top: 6%;
}

#spa_directions_right iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}


/* ########### route map (2016/10/02 add) ########### */

#route_tabs{
	border: solid #52A463;
	border-width: 1px 1px 0;
	margin: 0 0 15px;
}
#route_tabs li {
	border-bottom: 1px solid #52A463;
	background: url(../img/salon/right_arrow.png) no-repeat 97% center;
	display: block;
	color: #444;
	line-height: 1.2em;
	padding: 10px 30px 10px 10px;
	cursor: pointer;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
}

#route_tabs li.on {
	background: url(../img/salon/down_arrow_white.png) no-repeat 97% center;
	background-color: #52A463 !important;
	color: #FFF;
	font-weight: bold;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}
#route_tabs li.on span {
	font-weight: bold;
}

#route_tabs li:hover {
	background-color: #A8D1B1;
	color: #FFF;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}

.route_thumbs{
	margin: 0 0 10px;
	counter-reset: thumbs;
	font-size: 0;
	line-height: 0;
}
.route_thumbs a{
	position: relative;
	display: inline-block;
	background: #a8d1b1;
	margin: 5px 1%;
	width: 23%;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
}

.route_thumbs a img{
	vertical-align: middle;
	width: 70%;
	opacity: 1 !important;
}

.route_thumbs a.on,
.route_thumbs a:hover {
	background: #52A463 !important;
	opacity: 1 !important;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}
.route_thumbs a:before{
	counter-increment: thumbs;
	content: counter(thumbs);
	display: inline-block;
	width: 30%;
	font-weight: bold;
	font-size: 16px;
	line-height: 1.2em;
	color: #fff;
	vertical-align: middle;
}
.route_thumbs a:after{
	content: "";
	position: absolute;
	box-sizing: border-box;
	border: 0 solid #fff;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
}
.route_thumbs a.on:after{
	border: 3px solid rgba(240,0,0,0.7);
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}

.route_box{
	padding: 0 10px;
	margin: 0 !important;
}

.route_map,
.route_box.hide{
	display: none;
}
.route_info_all{
	position: relative;
}
.route_box > div .route_info{
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	-webkit-transition: all .3s linear;
	-moz-transition: all .3s linear;
	-o-transition: all .3s linear;
	transition: all .3s linear;
}
.route_box > div .route_info.on{
	position: relative;
	opacity: 1;
	-webkit-transition: all .5s linear;
	-moz-transition: all .5s linear;
	-o-transition: all .5s linear;
	transition: all .5s linear;
}

.route_box > div .route_info dl{
	text-align: left;
}

.route_box > div .route_info dl dt{
	background: #a8d1b1;
	position: relative;
	padding: 10px 5px 10px 40px;
	font-size: 17px;
	line-height: 1.2em;
	color: #fff;
}
.route_box > div .route_info dl dt b{
	position: absolute;
	display: block;
	top: 8px;
	left: 8px;
	width: 24px;
	height: 24px;
	font-size: 18px;
	line-height: 24px;
	text-align: center;
	background: #fff;
	border-radius: 20px;
	color: #52a463;
}
.route_box > div .route_info dl dd{
	background: #fff;
	padding: 15px;
}
.route_box > div .route_info dl dd img{
	max-width: 100%;
	display: block;
	margin: 0 auto 10px;
}



/* V^V^V^V^V 800 rules V^V^V^V^V */
/*###############################*/
@media screen and (max-width: 800px) {
	#spa_imgvideo_left,
	#spa_imgvideo_right,
	#spa_directions_left {
		margin-bottom: 30px;
	}

/* Section 1 - spa selection */
/* ------------------------- */	
	#spa_selection_left ul {
		font-size: 18px;
		line-height: 23px;
	}

	#spa_selection_left ul li a {
		padding: 10px;
	}
	
/* Pages NOT NEEDING Youtube */
	#spa_imgvideo_left.no_video {
		margin-left: auto;
		margin-right: auto;
	}
	
}

/* v^v^v^v^v 500 rules v^v^v^v^v */
/*###############################*/
@media screen and (max-width: 500px)
{
/* Section 1 - spa selection */
/* ------------------------- */	
	#spa_selection_left ul {
		font-size: 14px;
		line-height: 20px;
	}
	
/* Section 3 - Directions */
/* ---------------------- */
	#spa_directions_links .col span {
		line-height: 14px;
		font-size: 14px;
		margin-top: -7px;
	}

	#spa_directions_left h4 {
		font-size: 13px;
		line-height: 17px;
	}


	/* ########### route map (2016/10/02 add) ########### */
	.route_box{
		padding: 0 5px;
	}

	#route_tabs li.on,
	#route_tabs li {
		background-size: 16px;
		padding: 5px 25px 5px 10px;
	}

	.route_box > div .route_info dl dt{
		padding: 10px 5px 10px 35px;
		font-size: 15px;
		line-height: 1.2em;
	}
	.route_box > div .route_info dl dt b{
		position: absolute;
		display: block;
		top: 8px;
		left: 8px;
		width: 20px;
		height: 20px;
		font-size: 16px;
		line-height: 20px;
	}
	.route_box > div .route_info dl dd{
		padding: 10px;
	}
}





.route-text {
	margin: 15px auto 40px;
	max-width: 940px;	
}

.route-text h4 {
	font-size: 120%;
}
.route-text ul {
	margin: 0 0 20px;
}
.route-text ul li {
	margin: 10px 0 0;
	padding-left: 1em;
	text-indent: -1em;
}
.route-text ul li:before {
	content: "●";
	color: #84cfe8;
}

.chillma-reception {
	overflow: hidden;
	counter-reset: route;
	margin-bottom: 40px;
}

.chillma-reception li {
	box-sizing: border-box;
	padding: 5px;
	float: left;
	width: 50%;
}
.chillma-reception li > div {
	position: relative;
	margin: 0 0 5px;
}
.chillma-reception li > div img {
	display: block;
	width: 100%;
}
.chillma-reception li > div:before {
	counter-increment: route;
	content: counter(route);
	position: absolute;
	display: block;
	width: 24px;
	height: 24px;
	text-align: center;
	background: #52a463;
	font-size: 18px;
	line-height: 26px;
	color: #fff;
}
.okinawa-route-map {
	margin: 20px auto;
}
.okinawa-map {
	max-width: 610px;
	margin: auto;
}
.okinawa-map img {
	margin: auto;
	width: auto !important;
	max-width: 100% !important;
}
.googlemap iframe {
	width: 100%;
	height: 450px;
}
img {
	max-width: 100%;
}
img.pc {
	display: none;
}
@media only screen and (min-width: 800px) {
	img.smt {
		display: none;
	}
	img.pc {
		display: inline-block;
	}
	.chillma-reception li {
		padding: 10px;
		width: 33.3333%;
	}
	.chillma-reception li > div:before {
		width: 30px;
		height: 30px;
		font-size: 24px;
		line-height: 32px;
	}
	.chillma-reception {
		margin-bottom: 60px;
	}
}
@media only screen and (max-width: 799px) {
	.chillma-reception li:nth-child(2n+1) {
		clear: left;
	}
}