@charset "utf-8";

/*******************
Layout
********************/
#wrapper {
	width: 100%;
}
#contents {
	width: 100%;
}
#side .banners,
#side #course{
	display: none;
}
#side {
	float: none;
	width: 100%;
}
#side #banners{
	padding: 10% 2%;
	margin: 0px;
}
#side #banners ul{
	display: block;
	margin: 0px auto;
	padding: 0px;
	width: 60%;
}
#side #banners ul li{
	display: block;
	margin: 0px 0 15px;
	padding: 0px;
	width: 100%;
	text-align:center;
}



#main {
	width: 100%;
	float: none;
	background-color: #FFF;
}
/*******************
Header
********************/
#header {
	position: relative;
	width: 100%;
	height: 70px;
	display:table;
}
#header h1 {
	padding: 0 0 0 20px;
	vertical-align: middle;
	display: table-cell;
	width: 170px;
	height: 70px;
}

#header h1 img{
	height: 35px;
	width: auto;
}

#header .nav-reserve{
	padding: 0;
	vertical-align: middle;
	display: table-cell;
	height: 70px;
}

#header .nav-reserve img{
	height: 35px;
	width: auto;
}


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

#header h1 {
	width: 140px;
}

#header h1 img{
	height: 30px;
	width: auto;
}

#header .nav-reserve img{
	height: 30px;
	width: auto;
}

}


/*******************
Bread Crumb Nav
********************/
#bread-crumb-nav {
	display: none;
}


.cont {
	width: 100%;
	padding: 10% 0 0;
}

/*******************
 Brand Shared Class
********************/
#brand-index .cont h2 {
	margin-bottom: 20px;
}

#brand-index .cont .course-list-open {
	margin-bottom: 20px;
}

#brand-index .cont .course-list-close {
	margin-bottom: 20px;
	display: none;
}

#brand-index .cont .row-block{
	margin: 0px;
	padding: 0px;
	position: relative;
}

#brand-index .cont .row-block .course-nav{
	margin: 0px;
	padding: 3% 0px;
	position: absolute;
	background: #ff7094;
	width: 100%;
	left: 0px;
	top: -10px;
	display: none;
	z-index: 100;
}

#brand-index .cont .row-block .course-nav li a{
	color: #FFF;
	text-align: center;
	display: block;
	margin: 0px;
	padding: 3% 0%;
	font-size:1rem;
}
/*******************
Course List
********************/
#brand-index .course-list .row {
	width: 95%;
	border: #EEE 1px solid;
	overflow: hidden;
	height: auto;
	margin-bottom: 2.5%;
	margin-right: auto;
	margin-left: auto;
	position: relative;
}

#brand-index .course-list .row p.img {
	float: none;
	width: 150px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#brand-index .course-list .row p.img img{
	height: auto;
	width: 100%;
}

#brand-index .course-list .row .prop {
	float: none;
	width: auto;
	padding: 120px 0px 0px 0px;
	box-sizing: content-box;
	background: url(../../images/contents/couse_list_row_bg.png) no-repeat 150px 0;
	background-size: 30px auto;
	position: relative;
}

#brand-index .course-list .row .prop dt {
	margin: 0px;
	padding: 0px;
	position: absolute;
	left: 170px;
	top: 30px;
	text-align: left;
	font-size: 1.2rem;
	line-height: 1.4rem;
}

#brand-index .course-list .row .prop dd {
	text-align: left;
	margin: 0px;
	padding: 10px 15px;
}

#brand-index .course-list .row .prop p.bt {
	margin: 0px;
	padding: 0px 15px 0px 0px;
	position: absolute;
	left: 170px;
	top: 85px;
	font-size: .7rem;
}

#brand-index .course-list .row .prop p.bt a{
	font-size: .7rem;
}

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

#brand-index .course-list .row .prop p.bt a{
	font-size: .5rem;
}

}

/*******************
Actions
********************/
.actions{
	text-align:center;
	margin:5% 0;
}

/*******************
Brand Shop-list
********************/
#brand-index .shop-list{
	padding-top: 15%;
	border-bottom: 1px solid #e5e5e5;
	padding-bottom: 5%;
}
#brand-index .shop-list .block{
	width: 90%;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
}

#brand-index .shop-list h3{
	text-align: left;
	margin-bottom: 20px;
	margin-top: 20px;
}
#brand-index .shop-list ul li{
	width: 100%;
	margin-bottom: 15px;
	display: block;
}

/*******************
Contents Common Nav
********************/
#contents-common-nav {
	width: 100%;
	margin-top: 10%;
}
#contents-common-nav ul {
	overflow: hidden;
	height: auto;
	margin-bottom: 0px;
	display: table;
	width: 100%;
}

#contents-common-nav ul.brand-list li {
	float: none;
	width: 33%;
	height: auto;
	margin: 0;
	display: table-cell;

}
#contents-common-nav ul.brand-list li.facial {
	background: url(../../images/sp/contents/btn_facial.jpg) no-repeat 0 0;
	background-size:100% 100%;
}
#contents-common-nav ul.brand-list li.depilation {
	background: url(../../images/sp/contents/btn_depilation.jpg) no-repeat 0 0;
	background-size:100% 100%;
}
#contents-common-nav ul.brand-list li.body {
	background: url(../../images/sp/contents/btn_body.jpg) no-repeat 0 0;
	background-size:100% 100%;
}

#contents-common-nav ul.brand-list li.facial a,
#contents-common-nav ul.brand-list li.depilation a,
#contents-common-nav ul.brand-list li.body a{
	display: block;
	margin: 0px;
	padding: 60% 0px 0px;
	height: auto;
	width: 100%;
	background:none;
}


#contents-common-nav ul.brand-list li a span {

}


/*******************
Heading
********************/
h2.hd {
	font-size: 1.8rem;
	line-height: 1.8rem;
	height: auto;
	box-sizing: content-box;
	padding: 15px 0;
	background-color: #F4F4F4;
	text-align: center;
}