@charset "utf-8";

html{ font-size: 62.5%;}

body{
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN","メイリオ",Meiryo,sans-serif;
	color:#515151;
	font-size: 1.6em;
	line-height:1.8;
	background:#fff;
	}


h1{ font-size:80%; text-align: center; color:#999;}

h3{
	font-size: 160%;
	text-align:center;
	margin-bottom: 30px;
	padding:10px;
	background:#000;
	color:#fff;}

header { margin-bottom:30px;}

.wrapper {
    width: 80%;
    margin: 0 auto 30px;
    padding: 0 0;}
	
.wrapper h2{ 
	font-size: 200%;
    font-weight: normal;
    line-height: 150%;
	padding:0 0 10px;
	margin:60px 0 40px;
	border-bottom: dotted #CCC;
	text-align:center;}
	

#logobox {width:28%; float:left;}  
#logobox h2{ margin:40px 60px 20px;}
#logobox .mailBox{ margin:0px 70px 0px; text-align:center;}
#logobox img { padding-bottom:4px;}
#logobox .mailBox img.ico{ max-width: 36px; padding:0 2px;}
#logobox p{ margin:0; padding:0;}
#logobox a { display:inline;}



.bnBox {width:31%; float:left; text-align:center; margin:1%;}
.bnBox img {padding:10px;}
.bnBox.bgG{ background:#09BBAD;}
.bnBox.bgY{ background:#EFCC29;} 
.bnBox.bgP{ background:#EF4545;} 


#sublogobox {width:22%; float:left; text-align:center;}
#sublogobox p{ margin-bottom:0; padding-bottom:0;}
#sublogobox img { max-width:200px;}

#sublogobox h2{ padding:20px 30px 0px;}
 
#photobox{width:auto;}
#subPhoto { width:75%; float:right;}

#logobox img, #sublogobox img, #photobox img, #subPhoto img {width:100%; height:auto;}

a:link, a:visited, a:active { color: #09BBAD;}

a:hover {opacity: 0.6;}

	
.subHdWrapper {
    width: 90%;
    margin: 0 auto 0px;
    padding: 0 0;}	
		
.contentBox {
    width: 90%;
    margin: 0 auto;
    text-align: left;}
	

p{ padding-bottom:1.6em;}
	
.imgCr img{ max-width:100%; height:auto;}

.Inlink{display:inline;}

.title_name {
    display: inline-block;
    background: #000;
    color: #fff;
	font-size:90%;
    border-radius: 4px;
    padding: 10px 16px 10px 16px;
	margin-right:12px;
    line-height: 1; }


	
/* slider(main photo)
---------------------------------------------*/		

.slider{
  display: none;
}
.slider.slick-initialized{
  display: block; /*slick-initializedが付与されたら表示*/
}

/* お知らせ
---------------------------------------------*/	

#topics{
    width: 100%;
    margin: 0 auto 40px;
    padding-top: 20px;
	background:#000;
	color:#ccc;
	}
	
.topicsWrapper {
    width: 80%;
    margin: 0 auto;
    padding: 0 0 20px;}

#topics a{ display:inline; background:none;}

#topics h2 {margin:0; padding:0;}

#topics dl{margin:10px auto;}

#topics dt, #topics dd{
	float:left;
	text-align:left;
	padding:0;
	line-height:160%;
	}
	 
#topics dt{
	width:15%;
	padding-bottom:6px;	}
	
#topics dd{
	width:85%;
	padding-bottom:6px;}
	
/* プライス
---------------------------------------------*/

table.price td { text-align:left; padding:24px 10px 10px 0; border-bottom:1px solid #ccc;}
table.price td span { font-size:80%;}
table.price td.end { text-align:right; padding:24px 0 10px 0; vertical-align:bottom; border-bottom:1px solid #ccc; font-size:100%; width:60px;}	

table.herfPrBox {width:45%; float:left;}
table.herfPrBoxR {width:45%; float:right;}

table.box3Pr {width:30%; margin-right:55px; float:left;}
table.box3PrR {width:30%; float:left;}

table.price td a {display:inline;}

h4.price{
	font-size: 140%;
	text-align:center;
	margin-bottom: 30px;}

.priceTitle {
    display: inline-block;
    background: #000;
    color: #fff;
	font-size:90%;
    border-radius: 4px;
    padding: 10px 16px 10px 16px;
	margin-right:12px;
    line-height: 1; }
	
.minato_notice{
	margin-top:50px;
	padding:20px;
	text-align:center;
	border:1px dashed #ccc;}	
	
/* スパ
---------------------------------------------*/

h3.spa{ background:#09BBAD;}
h4.spa{
	font-size: 160%;
	text-align:center;
	margin-bottom: 30px;
	padding:10px;
	background:#fff;
	border:solid 1px #09BBAD;
	color:#09BBAD;}
	
.SpaLeftSub {
	width: 58%;
	text-align:left;
	float:left;
    }
	
.SpaLeftSub h5{
	font-size:100%;
	font-weight:bold;
	text-align:left;
	padding:0 0 10px;
	margin:0 0 20px;
	border-bottom: dotted #CCC;}
	
.SpaRightSub {
	width:31%;
    padding-left: 5%;
    float: right;
	text-align:left;
	}
	
#spa ol { margin-bottom:40px;}
#spa ol li{ padding-left:0px; margin-left:40px; list-style-type:decimal;}

/* スタッフ
---------------------------------------------*/

.herfSfBox {width:45%; float:left;} 
.herfSfBoxR {width:45%; float:right;} 


h4.staffH4{
	font-weight:bold;
	padding:0 0 10px;
	margin:0 auto 15px;
	border-bottom: dotted #CCC;
	text-align:center;}

	

/* リクルート
---------------------------------------------*/	
.rcnavi{ border:1px solid #333; padding:12px; text-align:center;}
.rcnavi a{ display:inline;}
.rcBox{ border:1px solid #333; padding:12px;}
.qpflow .num{ font-weight:bold; color:#fff; background:#ff6666; padding:4px;}
.qpflow li {padding-bottom:16px;}
.qpflowDot li { border-bottom:1px dashed #CCC; line-height:2em; text-align:left; padding:10px 0;}
.qpflowDot a, .qpflow a {display:inline;}

#recruit dl.faq dt {background:url(../img/ico_q.jpg) no-repeat 0 10px; padding:10px 3px; border-bottom:1px dashed #ccc; margin-bottom:6px; font-weight:bold; color:#393 }
#recruit dl.faq dd{background:url(../img/ico_a.jpg) no-repeat 0 10px; padding:10px 3px; border-bottom:1px dashed #ccc; margin-bottom:40px; }
#recruit dl.faq dt,
#recruit dl.faq dd{ padding-left:38px;}

.num{ font-weight:bold; color:#fff; background:#31BBB0; padding:4px;}


/* footer
---------------------------------------------*/	

#footerWrapper{
    width: 100%;
    margin: 0 auto;
    padding: 30px 0 0;
	background:#000;
	color:#ccc;
	}
	
#footerWrapper .wrapper{ margin-bottom:0;}

#footerWrapper a:link, #footerWrapper a:visited, #footerWrapper a:active { color: #ccc;}


.leftFooterBox {
	width: 63%;
    padding-right: 5%;
	float:left;
    }
	
.rightFooterBox {
	width:26%;
    padding-left: 5%;
    float: right;
	text-align:center;
	}

#footerWrapper dl{
	margin:0 auto;
	}

.leftFooterBox span{ font-size:140%;}

#footerWrapper dt, #footerWrapper dd{
	float:left;
	text-align:left;
	padding:0 0 20px;
	line-height:160%;
	 }
	 
#footerWrapper dt{
	width:15%;
	}
	
#footerWrapper dd{
	width:85%;}
	
#footerWrapper a {display:inline;}

#footerWrapper .linkBox {
	width:80%;
	border-top: 1px solid #fff;
    margin: 0 auto;
    padding: 20px 0;
	text-align:center;
	}

#bottomFooter{text-align:center; padding-top:5px; line-height:120%; color:#999}

#bottomFooter a { display:inline; text-align:center;}		


footer nav {margin:0 auto;}
	
.linkBox li{
	flex-grow: 1;
	flex-basis:auto;
	}
	 
#footerWrapper .linkBox .flex {	display: flex;}

#map {
    width: 80%;
	text-align:center;
    margin: 0 auto 30px;
    padding: 0 0;}

/*
---------------------------------------------*/	
	

.clearfix::after {
	
	display: block;
	content: "";
	clear:both;
	}
	
.borderBox{ width:100%; height:21px; background:url(../img/line_orange.gif) repeat-x;}	
	

#pagetop {
 display:inline-block;
 position:fixed;
 bottom:0;
 right:0;
}
 
 
#pagetop a {
 padding:10px;
 display:block;
}




/* ここから上がPC向け
---------------------------------------------------- */

@media screen and (max-width: 480px) {

/* ここから下がスマホ向け
---------------------------------------------------- */

body{
	font-size: 1.3em;
	line-height:1.8;
	}
	
	
h1{ display:none;}

.bnBox img {width:70%; } 

#logobox, #sublogobox {width:100%; margin-top:1rem; margin-bottom:0;} 

#sublogobox, .bnBox, .SpaRightSub, .SpaLeftSub, .herfSfBox, .herfSfBoxR, table.herfPrBox, table.herfPrBoxR, table.box3Pr, table.box3PrR{width:100%; margin-bottom:2px;}


	

h2{ font-size:120%; font-weight:bold; margin-bottom:15px}
h3{ font-size:100%; margin-bottom:15px}

p{ margin-bottom:0px;}


h2 img { margin-bottom:0px}




#subPhoto {width:100%; margin-bottom:0;} 

#photobox, #subPhoto, #sublogobox { clear:both;} 

img {
        border: 0;
        max-width: 100%;
        height: auto;}
		
#bottomFooter img{ width:50%;}		
		
.wrapper, .subHdWrapper {
    width: 90%;}
	
.rightFooterBox img	{ max-width:80%;}

	
.leftFooterBox { width:100%; text-align:left; border:none; margin:0; padding:0; }
.rightFooterBox { width:100%; border:none; margin:0; padding:0; }


#topics dt {
	width: 100%;
    padding: 10px 0;}
		
#topics dd {
	width: 100%;
    padding-left: 0;
    margin-left: 0;}


#footerWrapper{ text-align:left;}	
	
#footerWrapper dt {
	width: 100%;
    padding: 10px 0;}
		
#footerWrapper dd {
    width: 100%;
	padding-left: 0;
	margin-left: 0;}
	
	
#footerWrapper .linkBox, footer nav {
        width: 100%;}
		
#footerWrapper .linkBox li {
        flex-grow: 1;
        flex-basis: auto;
        border-bottom: 1px solid #c0c0c0;
        padding: 1rem 0;
    }
	
#footerWrapper .linkBox li: first-child {
        border-top: 1px solid #c0c0c0;
    }

#footerWrapper .linkBox .flex {display: block;}

#footerWrapper .linkBox {
    padding: 0;
	} 
	
	
/*** adjust parts ***/
				
	.flex{display:block;}
	
	
}



/* その他
---------------------------------------------------- */
.pt20{ padding-top:20px;}
.pt40{ padding-top:40px;}
.pt60{ padding-top:60px;}

.pb40{ padding-bottom:40px;}

.mb05{	margin-bottom:05px;}	
.mb10{	margin-bottom:10px;}	
.mb15{	margin-bottom:15px;}	
.mb20{	margin-bottom:20px;}
.mb40{	margin-bottom:30px;}
.mb40{	margin-bottom:40px;}
.mb50{	margin-bottom:50px;}
.mb60{	margin-bottom:60px;}
.mb80{	margin-bottom:80px;}
	
.mt05{	margin-top:5px;}
.mt08{	margin-top:8px;}
.mt10{	margin-top:10px;}
.mt15{	margin-top:15px;}
.mt20{	margin-top:20px;}
.mt30{	margin-top:30px;}
.mt40{	margin-top:40px;}
.mt50{	margin-top:50px;}
.mt60{	margin-top:60px;}
.mt100{	margin-top:100px;}

.mr10{ margin-right:10px;}
.mr20{ margin-right:20px;}
.mr30{ margin-right:30px;}


.toCenter{ text-align:center;}
.toL{ float:left;}
.toR{ float:right;}

.toOrange { color:#F07302;}
.toGreen { color:#090;}

.mpnone{ margin:0; padding:0;}

a.Dpinline{ display:inline}