@charset "UTF-8";


/* spa common
----------------------------- */
.link{
	margin-top: 0;
	font-size: 100%;
	padding-bottom: 0px;
}

dl.info_dl dd .btn_reserve{
	margin: 12px 0;
	text-align: left;
}

dl.info_dl dd .btn_link{
	display:inline;
}

dl.info_dl dd .btn_link:first-of-type{
	margin-right: 8px;
}

dl.info_dl dd .btn_link a{
	padding: 8px 60px 6px 60px;
	margin-bottom: 0px;
}

#catch {
  margin-bottom: 30px;
}

#information {
  width: 664px;
  margin: 0 auto 46px;
}

#information dl {
  margin-bottom: 20px;
  overflow: hidden;
  zoom: 1;
}

#information .contact {
  color: #cc3333;
}

#information .contact strong {
  font-size: 108%;
}

#information .contact span {
  font-size: 93%;
}

#information .pdf a {
	padding-right: 40px;
	background:url(../../common/images/ico_pdf.png) no-repeat right center;
}

p.mail{
	margin-bottom: 30px;
	padding-left: 1em;
	font-size: 82%;
	line-height: 1.6;
	text-indent:-1em;
}

ul.note {
  margin: 0 5px;
}

ul.note li {
  font-size: 69%;
  line-height: 1.65;
  text-indent: -1em;
  margin-left: 1em;
}

/* kirin
----------------------------- */
.sub{
	display:block;
	font-size:50%;
	padding-top:6px;
}
#kirin #information dd.time dl {
  font-size: 100%;
  margin-bottom: 0;
  border: none;
  overflow: hidden;
  zoom: 1;
}

#kirin #information dd.time dl dt {
  padding: 0;
}

#kirin #information dd.time dl dd {
  padding: 0 0 0 115px;
  border-bottom: none;
}

#kirin #information dd.price {
  padding-left: 98px;
}

#kirin #information dd.price dl {
  font-size: 100%;
  margin-bottom: -8px;
  border: none;
  overflow: hidden;
  zoom: 1;
}

#kirin #information dd.price dl dt {
  padding: 3px 0 8px 12px;
}

#kirin #information dd.price dl dd {
  padding: 3px 8px 8px 90px;
  margin-bottom: 10px;
}

#kirin #information dd.price dl dd:last-child {
  border-bottom: none;
}

/* bath */

#kirin #bath figure{
	width: 280px;
}

#kirin #bath figure figcaption{
	margin-top: 8px;
	font-size: 75%;
	text-align: center;
}

#kirin #bath figure ul{
	overflow:hidden;
}

#kirin #bath figure .sauna,
#kirin #bath figure .washing{
	width: 136px;
}

#kirin #bath figure .main_img{
	margin-bottom: 8px;
}

#kirin #bath figure .sauna{
	float: left;
}

#kirin #bath figure .washing{
	float: right;
}

#kirin #bath .sec_inner{
	width: 350px;
}

/* kirin_aroma */

#kirin #kirin_aroma .sec_inner{
	margin-bottom: 30px;
}
#kirin #kirin_aroma img{
	margin-bottom: 30px;
}
#kirin ul.note li{
	margin-left: 10px;
	font-size: 75%;
	text-indent: 0;
}

#kirin #kirin_aroma .info_dl{
	clear: both;
}

/* rotene */

#kirin #roten .info_dl {
  margin-top:30px;
}
#kirin #kirin_reserve img{
	margin-bottom: 30px;
}
/* spaetuk, la_celebisu
----------------------------- */

#spaetuk .sec_content,
#la_celebisu .sec_content{
	position: relative;
}

#spaetuk .sec_content,
#la_celebisu .sec_content{
	content:"";
	clear:both;
	display:block;
	zoon:1;
}

#spaetuk .sec_content dl,
#la_celebisu .sec_content dl{
	font-size: 75%;
}

#spaetuk .sec_content dt,
#spaetuk .sec_content dd,
#la_celebisu .sec_content dt,
#la_celebisu .sec_content dd{
	padding-top: 8px;
	padding-bottom: 6px;
}

#spaetuk .sec_content figure,
#la_celebisu .sec_content figure{
	float: none;
	position: absolute;
	right:4px;
}

#spaetuk .sec_inner,
#la_celebisu .sec_inner{
	width: 315px;
	padding-bottom: 40px;
	padding-top: 0;
	float: none;
}

#spaetuk .sec_inner:nth-of-type(odd),
#la_celebisu .sec_inner:nth-of-type(odd){
	float: left;
}

#spaetuk .sec_inner:nth-of-type(even),
#la_celebisu .sec_inner:nth-of-type(even){
	float: right;
}

#spaetuk .sec_content h5,
#la_celebisu .sec_content h5{
	margin-bottom: 10px;
	color: #22a58e;
	font-family:"ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro-W6", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: lighter;
	font-size: 100%;
	line-height: 1.4;
}

#spaetuk .sec_content h5:before,
#la_celebisu .sec_content h5:before{
	margin-right: 5px;
	content:"●";
	display:inline;
	font-size: 82%;
}

#spaetuk .sec_content .sec_inner p,
#la_celebisu .sec_content .sec_inner p{
	margin-bottom: 20px;
}

#spaetuk .explain,
#la_celebisu .explain{
	margin-bottom: 36px;
	font-size: 82%;
	line-height: 1.4;
}

#spaetuk #information dd,
#la_celebisu #information dd{
  padding-left: 150px;
}

/*** aroma ***/

#aroma .sec_content{
	padding-bottom: 30px;
}

#aroma .sec_inner{
	width: 656px;
	margin: 0 auto 40px;
	padding-bottom: 0;
	float: none !important;
}

/* aroma_info */

#aroma_info{
	width: 664px;
	margin: 0 auto 50px 0;
}

#aroma_info p{
	margin-bottom: 20px;
	font-size: 82%;
	line-height: 1.7;
}

#aroma_info .oil{
	padding: 20px;
	background: #eff9f7;
	color: #22a58e;
	font-size: 75%;
}

/* spaetuk
----------------------------- */

#spaetuk #aroma #facial01,
#spaetuk #aroma #body01,
#spaetuk #aroma #facial_body01{
	width: 390px;
	margin: 0 0 40px 4px;
}

#spaetuk #aroma #body02 p,
#spaetuk #aroma #facial_body02 p{
	width: 390px;
}

#spaetuk #aroma #facial figure{
	top:78px;
}

#spaetuk #aroma #body figure{
	top:50px;
}

#spaetuk #aroma #facial_body figure{
	top:78px;
}

#la_celebisu #physio,
#spaetuk #physio,
#la_celebisu #reflexology,
#spaetuk #reflexology{
	position: relative;
}

#la_celebisu #physio .sec_inner,
#spaetuk #physio .sec_inner,
#la_celebisu #reflexology .sec_inner,
#spaetuk #reflexology .sec_inner{
	width: 390px;
	float: none !important;
}

#la_celebisu #physio figure,
#spaetuk #physio figure,
#la_celebisu #reflexology figure,
#spaetuk #reflexology figure{
	position: absolute;
	right:4px;
}

#la_celebisu #physio figure,
#spaetuk #physio figure{
	top:240px;
}

#la_celebisu #reflexology figure,
#spaetuk #reflexology figure{
	top:225px;
}

#la_celebisu #physio #physio03,
#spaetuk #physio #physio03,
#la_celebisu #reflexology #reflexology03,
#spaetuk #reflexology #reflexology03{
	width: 100%;
}

/* la_celebisu
----------------------------- */

#la_celebisu #aroma_info .oil{
	margin-bottom: 20px;
}

#la_celebisu #aroma_info .oil:after{
	content:"";
	clear:both;
	display:block;
	zoom:1;
}
	
#la_celebisu #aroma_info .oil p{
	width: 450px;
	margin-top: 10px;
	font-size: 100%;
	float: right;
}

#la_celebisu #aroma_info .oil figure{
	width: 150px;
	float: left;
}

#la_celebisu #aroma #facial01,
#la_celebisu #aroma #body01{
	width: 390px;
	margin: 0 0 40px 4px;
}

#la_celebisu #aroma #body02 p{
	width: 390px;
}

#la_celebisu #aroma #facial figure{
	top:78px;
}

#la_celebisu #aroma #body figure{
	top:50px;
}

/* spaetuk
----------------------------- */

/*** original ***/

#spaetuk #original .info_dl{
	margin-top: 30px;
}

/*** aroma ***/
/* special */

#spaetuk #special .sec_inner{
	width: 664px;
	margin: 0 auto;
	padding-bottom: 0;
	float: none !important;
}

#spaetuk #special p {
	margin-bottom: 16px;
/*	color: #9e302e;
*/  font-size: 87.5%;
	line-height: 1.7;
}

#spaetuk #special a:hover {
	opacity:0.8;
	-moz-opacity:0.8;
	filter: alpha(opacity=80); /* ie lt 8 */
}

#spaetuk #special img {
	max-width: 100%;
}

/* tocoyo, shimukappu
----------------------------- */

#tocoyo #catch,
#shimukappu #catch {
	margin-bottom: 50px;
}

#tocoyo #information dd,
#shimukappu #information dd{
padding-left: 120px;
}

#tocoyo #information .menu,
#shimukappu #information .menu{
	padding:0;
}

#tocoyo #information .menu dl,
#shimukappu #information .menu dl{
	margin-bottom: 0;
}

#tocoyo #information .menu dt,
#shimukappu #information .menu dt{
	width: 9em;
}

#tocoyo #information .menu dd,
#shimukappu #information .menu dd{
	padding-left: 10.5em;
}
#gallery ul {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}#gallery {

}
#gallery li img {
    width: 100%;
}#gallery li {
    width: calc(25% - 15px);
}


/* sp
------------------------------------ */

@media screen and (max-width: 768px) {
dl.info_dl dd .btn_link a {
    padding: 8px 20px 6px;
    margin-bottom: 0px;
}
#gallery li {
    width: calc(50% - 5px);
  margin-bottom: 8px;
}


		
	dl.info_dl dd .btn_reserve{
		margin: 0 0 10px 0;
	}
	
	dl.info_dl dd .btn_link{
		margin: 0;
		padding-top: 8px;
		display:inline-block;
		text-align: center;
	}
	

	
	.btn:before, .btn_link a:before{
		left:14px;
	}
	
	#information{
		width: auto;
	}

	/* mainnav */
	
	#mainnav h3{
		margin-bottom: 6px;
	}
	
	#mainnav .level{
		margin-bottom: 5px;
	}
	
	#mainnav .nav_kirin figure img{
		left:-30%;
	}
	
	#mainnav .nav_celebisu figure img{
		left:-100%;
	}
	
	#mainnav .nav_tokoyo figure img{
		left:-65%;
	}

	/*** kirin ***/
	
	#kirin #information dd{
		padding-left: 75px;
	}
	
	#kirin #information dd.price {
		padding-left: 75px;
	}
	
	#kirin #information dd.price dl dt {
		padding: 0 0 8px 0px;
	}
	
	#kirin #information dd.price dl dd {
		padding: 0 8px 8px 75px;
	}
	
	#kirin #information{
		width: 100%;
	}
	
	#kirin #bath .sec_inner {
		width: 100%;
	}
	
	#kirin #bath figure{
		margin: 0 auto 30px auto;
	}

	#kirin #roten dl dd {
		padding-left: 80px;
	}
	
	/*** spaetuk, la_celebisu ***/
	
	#spaetuk #information,
	#la_celebisu #information,
	#tocoyo #information{
		width: auto;
	}
	
	#spaetuk #information dd,
	#la_celebisu #information dd,
	#tocoyo #information dd{
		padding-left: 80px;
	}
	
	#spaetuk .sec_content,
	#la_celebisu .sec_content {
    padding-bottom: 20px;
	}
	
	#spaetuk .sec_inner,
	#la_celebisu .sec_inner {
		width: auto !important;
		float: none !important;
	}	
	
	#spaetuk  #physio figure,
	#la_celebisu  #physio figure,
	#spaetuk  #reflexology figure,
	#la_celebisu  #reflexology figure{
		margin-bottom: 30px;
		position: static;
		text-align: center;
	}	
	
	#spaetuk  #physio figure img,
	#la_celebisu  #physio figure img,
	#spaetuk  #reflexology figure img,
	#la_celebisu  #reflexology figure img{
		display:inline;
	}	
	
	#spaetuk .sec_content figure,
	#la_celebisu .sec_content figure {
    float: none;
    position: static;
	}

	#aroma #aroma_info{
		width: auto;
	}
	
	#aroma #aroma_info .oil{
		width: auto;
	}
	
	/*** la_celebisu ***/

	#la_celebisu #aroma_info .oil p{
		width: 62%;
		margin-top: 0;
	}
	
	#la_celebisu #aroma_info .oil figure{
		width: 32%;
	}
	
	#la_celebisu #aroma_info .oil figure img{
		max-width: 100%;
	}
		
	/*** spaetuk ***/

	#spaetuk #content #special {
    margin-bottom: 30px;
	}		

	/*** tocoyo, shimukappu ***/
	
	#tocoyo #gallery,
	#shimukappu #gallery{
		width: 100%;
		column-count:2;
		-moz-column-count:2;
		-webkit-column-count:2;
	}
	
	#tocoyo #gallery li,
	#shimukappu #gallery li{
		width: 100%;
		margin: 0 0 15px 0;
		float: none;
	}
	
	#tocoyo #gallery li img,
	#shimukappu #gallery li img{
		max-width: 100%;
	}
	article .sec_content figure {
    width: 100%;
    float: none;
}

	article .sec_content figure img {
    width: 100%;

}
article .sec_content .sec_inner {
    width: 100%;
    float: none;
}
}


.key {
    position: relative;
}
#emblem {
bottom: -60px;
    right: 60px;
    position: absolute;
    z-index: 100;
    width: 160px;
}
#emblem img {
width: 100%;
}
@media screen and (max-width: 1024px) {
#emblem {
    bottom: -60px;
    right: 60px;
    position: absolute;
    z-index: 100;
    width: 140px;
}
}
@media screen and (max-width: 768px) {
#emblem {
    bottom: -60px;
    right: 60px;
    position: absolute;
    z-index: 100;
    width: 140px;
}
}
@media screen and (max-width: 414px) {

#emblem {
    bottom: -34px;
    right: 20px;
    position: absolute;
    z-index: 100;
    width: 80px;
}
	
}
@media screen and (max-width: 375px) {
#emblem {
    bottom: -34px;
    right: 20px;
    position: absolute;
    z-index: 100;
    width: 80px;
}
}

@media screen and (max-width: 320px) {
#emblem {
    bottom: -34px;
    right: 20px;
    position: absolute;
    z-index: 100;
    width: 80px;
}
}
	
	