@charset "utf-8";
/*全体
------------------------------------------------------------------------------------------------------------------*/
body {
	-webkit-text-size-adjust: 100%;
	width: 100%;
	overflow-x: hidden;
}
* { box-sizing: border-box; }
img {
	max-width: 100%;
	height: auto;
	width: auto;
}
table { width: 100%; }

#header, #top_header, #footer, #gnav {
	min-width: 0;
}
.inner, #sub_container, #top_container {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
}
#top_header .inner, #header .inner {
	position: relative;
	margin-bottom: 0px;
}

/*ヘッダー
------------------------------------------------------------------------------------------------------------------*/
#sns { top: 80%; width: 80px; margin: 0 0 0 auto; }
#sns img { width: 40%; margin: 2px; }

#header { padding: 5px 0 5px; height: 280px; }
#top_header { padding: 5px 0 5px; height:auto; }
#top_header_box { top:0; margin-top:-15%; }
#hdr_logo { text-align: center; margin: 0; }
#visual {
	background-size: 110%;
	background-position: center top;
	height:auto;
	padding-top:58%;
}

/*ナビげーション
------------------------------------------------------------------------------------------------------------------*/
ul#gnav_list { width: 100%; margin: 10px auto 0; height: auto; }
ul#gnav_list li{ background-size:80%; }
ul#gnav_list li a { height:55px; }

@media (max-width: 529px) {
	#top_container { margin-top: 0; padding: 0; }
	#top_header, #header { padding: 5px 0 5px; height: auto; }
	#top_header .inner, #header .inner { background-image:none; margin-bottom: 0px; height: auto; }
	#top_header > .inner {padding:0;}
	#top_header h1, #header h1, #header p { display: none; }
	#top_header_box { margin-top:-10%; }
	#hdr_logo { text-align:left; width: auto; }
	#container {
		position:relative;
		transition: transform .2s ease-in-out;
		-webkit-transition: .2s -webkit-transform ease-in-out;
		transform: translate3d(0px, 0px, 1px);
		-webkit-transform: translate3d(0px, 0px, 1px);
	}
	#container.on {
		transform: translate3d(-230px, 0px, 1px); /* xを、左は「サイドバー横幅」、右は「-サイドバー横幅」 */
		-webkit-transform: translate3d(-230px, 0px, 1px);
	}
	#globalbtn{
		display: block;
		z-index:98;
		position:absolute;
		right:0;
		top:0;
	}
	#gnav {
		background:#333;
		border:#666;
		position:fixed;
		overflow-x:auto;
		overflow-y:scroll;
		height: 100%;
		width:230px;
		left: 100%; /* 左は「-サイドバー横幅」、右は「100%」 */
		top: 0;
		min-width:230px;
		z-index:99;
	}
	ul#gnav_list{top:0;}
	ul#gnav_list li{
		display:block;
		height:50px;
		font-size: 100%;
		padding-left:10px;
		width:230px;
		text-align:left;
	}
	ul#gnav_list li a {
		display: block;
		width:100%;
		height:50px;
		text-indent:10px;
		padding: 5px 5px 0 0;
		color: #fff;
		border-bottom: 1px solid #fff;
		float:none;
		letter-spacing:normal;
		text-decoration:none;
	}
	#re_box{background-image:none;}
	#breadcrumb { display: none; }
}

/*フッター*/
#ftr_logo, #ftr_right{width:35%;}
#ftr_left{width:17%;}
#ftr_left ul{width:100px;}

@media (max-width: 699px) {
	#ftr_logo, #ftr_info, #ftr_right{
		float: none;
		width: 100%;
		height:auto;
	}
	#footer {
		padding: 30px 5px 15px 5px;
		position:relative;
	}
	#ftr_logo {
		width: 280px;
		margin: 0 auto;
	}
	#ftr_left{
		width: 260px;
		margin: 0 auto;
		float: none;
	
		height:auto;
	}
	#ftr_left ul {
		width: 100%;
		margin-bottom: 0;
	}
	#ftr_left ul li {
		margin-bottom: 0;
		padding:0;
		text-align: center;
	}
	#copyright {
		margin: 0;
	}
	#ftr_btn {
		width: 100%;
		max-width: 450px;
		margin: 0 auto;
	}
	
	#ftr_logo {
		margin: 10px auto 30px;
	}
	#ftr_right {
		float: none;
		width: 265px;
		margin: 0 auto 20px;
		padding: 0;
	}
	#copyright{
		position:absolute;
		bottom:0;
		left:0;
		right:0;
	}
}
/*その他
------------------------------------------------------------------------------------------------------------------*/
@media (max-width: 529px) {
	.img_left, .img_right, .float_left, .float_right { float: none; margin: 0 0 10px; text-align: center; }
	.noTab, .noTab caption, .noTab thead, .noTab tfoot, .noTab tbody, .noTab tr, .noTab th, .noTab td { display: block; width: 100%; }
}

/*==================================================================================================================
ページ個別に関する設定
==================================================================================================================*/
/*トップページ
------------------------------------------------------------------------------------------------------------------*/
#top_container {
	width:100%;
	margin-top: 0;
	padding: 0 10px;
}
#spa_box{
	width:62%;
	background-size:100%;
}
#spa_box .content > img{display:none;}
#spa_box h1{
	font-size:1.8em;
}
#esthe_box{
	width:35%;
	background-size:100%;
	padding:65px 30px 20px;
}
#esthe_box h1{
	font-size:2em;
}
#bnr_box{
	width:100%;
	height:auto;
}
#news_box{
	width:33%;
	background-size:100%;
	height:auto;
	min-height:250px;
}
#news_box ul{
	min-height:100px;
	margin: 50px 10px 5px;
}
.bnr_set{
	width:30%;
}

@media (max-width: 699px) {
	#spa_box {
		width:100%;
		margin-bottom:20px;
		float: none;
		background:none;
	}
	#spa_box .content {
		padding: 50px 15px 40px 15px;
		margin: 10px 0 28px;
		background-image: url(../../images/bg_concept.jpg);
	}
	#spa_box .content > img{
		display:none;
	}
	#spa_box h1 {
		font-size: 2em;
		margin-bottom: 20px;
		font-family: "HGP明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", 細明朝, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "MS PMincho", serif;
		letter-spacing: 1px;
		line-height:1.5;
	}
	#spa_box .content p{
		width: auto;
	}
	.spa_btn{margin:20px 0 0 40px;}
	#esthe_box {
		float: none;
		width: 312px;
		height: 385px;
		padding: 85px 35px 20px;
		margin:0 auto 20px;
	}
	#esthe_box h1{
		font-size: 2.3em;
		margin-bottom: 5px;
	}
	#bnr_box {
			background: none;
			padding: 0;
			width: 100%;
			height: auto;
			margin: 0 auto 4%;
		}
	.bnr_set {
		float: none;
		margin-right: 0;
		margin: 0 auto 4%;
		width: 100%;
		text-align:center;
	}
	#bnr_box a {
		color: #4f4946;
	}
	#news_box {
		width: 100%;
		max-width:331px;
		float: none;
		min-height:0;
		margin:0 auto 20px auto;
	}
	#news_box ul{
		margin: 70px 10px 5px;
		min-height:0;
	}
}
/*==================================================================================================================
サブページ共通
==================================================================================================================*/
#sub_container {
	padding: 0 3px 10px 3px;
	margin-bottom: 50px;
}
#container_footer {
	display: none;
}
h1.sh1 {
	font-size: 1.7em;
	margin-bottom: 15px;
	letter-spacing: 0;
}
.box_inner {
	padding: 15px;
}
.box01 { padding:15px 3px; }
.box_inner { padding:15px 3px; }
.box01 p {
	padding: 0;
}
.txt_big {
	line-height: 1.4;
}
h2 {
	font-size: 1.5em;
	line-height: 1.7em;
	letter-spacing: 0;
}
.box01 h2 {
	margin: 10px 0 10px;
	font-size: 1.6em;
	line-height: 1.3;
	padding: 18px 0;
}
.box02 {
	width: 100%;
}
.box02 h2 {
	padding: 12px 0;
}
#sub_h1 {
	margin-top: 10px;
}
h3 {
	font-size: 1.5em;
}
 @media (max-width: 529px) {
 .box01 h2 {
 font-size:1.5em;
 line-height:1.3;
 padding:15px 0;
}
}
/*サロン情報
------------------------------------------------------------------------------------------------------------------*/
.salon_txt {
	text-align: left;
}
#salon_photo {
	margin-bottom: 20px;
}
#photo_l, #photo_r {
	float: nonet;
	width: 100%;
	text-align: center;
}
#photo_l, #photo_r img {
	margin-bottom: 10px;
}
#salon_data table {
	text-align: left;
}
.staff_set {
	float: none;
	width: 100%;
	padding: 0;
	border-right: none;
	margin-bottom: 20px;
}
.staff_txt {
	width: 60%;
}
.staff_set img {
	width: 40%;
	height: auto;
	max-width: 160px;
}
/*タッフ募集
------------------------------------------------------------------------------------------------------------------*/




/*ギャラリー
------------------------------------------------------------------------------------------------------------------*/
#gallery {
	width: 280px;
	margin: 0 auto;
}
#gallery img {
	float: none;
	margin: 0 auto;
}
/*予約
------------------------------------------------------------------------------------------------------------------*/
#form {
	margin-bottom: 20px;
}
/*メニュー
-------------------------------------------------------------------------------------------------------------------*/
.time2 {
	float: none;
	margin: 0 auto;
}
.btn_price {
	float: none;
	margin: 10px auto;
	text-align: center;
}
.box02 dl {
	width: 100%;
	font-size: 1.4em;
}
dl.price dt, dl.price dd {
	float: none;
}
.price dd {
	text-align: right;
}

.menu_set ul{margin:0 0 10px;}
.menu_set ul li{
	width: auto;
	display:block;
}

/*ヘアエステ
------------------------------------------------------------------------------------------------------------------*/
.img_s {
	width: 28%;
	height: auto;
	float: left;
	margin-right: 15px;
}
ul.list_check {
	margin: 10px auto 20px;
	width: 100%;
	padding: 15px;
}
ul.list_num {
	margin: 10px auto 20px;
	width: 100%;
	padding: 15px;
}
.rei_set {
	width: 100%;
	height: auto;
	margin: 0 auto 20px;
	padding: 0;
	background: none;
}
.rei_txt {
	width: 100%;
	float: none;
	margin-right: 0 auto;
}
.rei_set h3 {
	padding: 22px 0 10px;
}
.rei_set img {
	width: 210px;
	margin: 0 auto 15px;
	float: none;
}

/*個人情報保護方針
------------------------------------------------------------------------------------------------------------------*/
ol#privacy {
	width: 100%;
}
ol#privacy .box_01 {
	padding: 8px 3px;
	max-width: 400px;
}

/*ギャラリー
------------------------------------------------------------------------------------------------------------------*/

#gallery {
	width:100%;
	margin: 0 auto;
	text-align:center;
}
#gallery img {
	float:none;
	margin: 5px;
}

/*新着情報
------------------------------------------------------------------------------------------------------------------*/
.news_detail { width:100%; }






/*料金
-------------------------------------------------------------------------------------------------------------------*/
table.price thead td{font-size: 75%; padding: 0;}
table.price .time{font-size: 75%; padding: 1px 4px;}
@media (max-width: 699px) {
	table.price{ width: 100%; margin: 20px auto;}
	table.price tbody, table.price tbody th{
		display:block;
		width: 100%;
	}
	table.price tbody td{
		text-align: right; border-top: none;
		display: inline-block;
		width: 50%;
	}
	table.price thead{display: none;}
	table.price tbody td:nth-child(2n){border-right: none;}
	table.price .length{display: inline-block; font-size: 75%; vertical-align: baseline;}
	table.price tbody th.smt_100, table.price td.smt_100{width: 100%; display: block;}
	table.price tbody td.smt_100{border-right:1px solid #beb1aa;}
}
@media (max-width: 519px) {
	table.price tbody td{width: 100%;}
	table.price tbody td:nth-child(2n){border-right:1px solid #beb1aa;}
}