@charset "UTF-8";
/* CSS Document */

/*-----------------------------------------------------------
PC-- header
-----------------------------------------------------------*/
header{
	border-top:10px solid rgb(180,120,180);
	background-color:#FFF;}

header h1{
	position:absolute;
	top:-10px;
	left:24px;
	width:288px;
	height:162px;
	background:url(../images/bg_logo.png) no-repeat;
	-moz-background-size:100% auto;
	background-size:100% auto;
	text-align:center;}

header h1 img{
	width:230px;
	height:auto;
	padding-top:15px;}

header #mainImage{
	margin-left:0px;
	width:100%;
	height:488px;}

.salon header p.topTelNo{
	height:40px;
	font-size:28px;
	line-height:39px;
	background-image:url("../images/tel_h_t.png");
	background-size:150px 40px;
	border-radius:20px;
	padding:0 15px 0 150px;}

/*-----------------------------------------------------------
PC-- message & outline
-----------------------------------------------------------*/
#message {
	margin-top:1.5em;
	padding:0 20px;}

#message br{
	display:none;}

#message h2{
	font-size:135.714%;
	font-weight:bold;
	line-height:1.6;
	text-align:center;
	color:rgb(100,100,100);
	margin-bottom:1em;}

ul#outline {
	text-align:center;}

ul#outline li{
	width:25%;
	display:inline-block;
	vertical-align:top;
	margin:0 1.5%;
	text-align:center;}

p.sign{
	margin-top:0.75em;
	padding-bottom:1em;
	margin-bottom:1.5em;}

ul#outline li a{
	display:block;
	color: rgb(60,60,60);
	-webkit-transition: background-color 0.5s ease-out;
	   -moz-transition: background-color 0.5s ease-out;
	        transition: background-color 0.5s ease-out;}

ul#outline li a:hover{
    border-radius: 10px;
	text-decoration:none;}

li.moclr_s a:hover{/*salon*/
	background-color:rgb(250,240,250);}
li.moclr_w a:hover{/*women*/
	background-color:rgb(255,242,246);}
li.moclr_m a:hover{/*men*/
	background-color:rgb(238,244,250);}

/*-----------------------------------------------------------
PC-- mainContents
-----------------------------------------------------------*/

#mainContents{
	float:right;
	width:680px;
	margin-left:0;}

/*news*/
#news{
	float:left;
    height: 500px;
    width:100%;
    overflow-x: hidden;
    overflow-y: scroll;
}
#newsImg h2{
	border-top:3px solid rgb(180,120,180);
	border-bottom:1px solid rgb(180,120,180);
	padding:5px 0 3px 2px;
	line-height:1.0;}
#newsImg h2 img{
	width:auto;
	height:17px;
}

	#news dl{
		float:left;
		margin-bottom:10px;
	}
	#news dt{
		float:left;
		width:98px;
		padding-top:2px;
		font-size:85.714%;
		color:rgb(180,120,180);
	}
	#news dd{
		float: left;
		width: 560px;
	}

@media (max-width: 767px) {
	#news dl{
		float: none;
		margin-bottom:0;
	}
	#news dt{
		float:left;
		width:98px;
		padding-top:2px;
		font-size:85.714%;
		color:rgb(180,120,180);
	}
	#news dd{
		float: left;
		width: auto;
		margin-bottom:10px;
	}
}
/*-----------------------------------------------------------
PC-- menu
-----------------------------------------------------------*/
#menu{
	float:none;
	height:auto;}


@media (max-width: 970px) {
/*Tabret PC <768-970>768*/

/*-----------------------------------------------------------
Tabret PC -- header
-----------------------------------------------------------*/

header h1{
	top:-10px;
	left:24px;
	width:230px;}

header h1 img{
	width:184px;}

.salon header p.topTelNo{
	top:15px;
	right:20px;
	height:32px;
	font-size:22px;
	line-height:31px;
	background-image:url("../images/tel_h_t.png");
	background-size:130px auto;
	border-radius:16px;
	padding:0 12px 0 120px;}

header #mainImage{
	height:390px;}

/*-----------------------------------------------------------
Tabret PC -- mainContents
-----------------------------------------------------------*/

#mainContents{
	width:548px;}
}

@media (max-width: 767px) {
/*SmartPhone <-767>100%*/

/*-----------------------------------------------------------
SmartPhone -- header
-----------------------------------------------------------*/

.salon header {
	border-top:6px solid rgb(180,120,180);
	background-color:#FFF;
	margin-bottom:20px;

}

header #mainImage{
	height:auto;
}

header h1{
	background:none;
	top:12px;
	left:0;
	width:100%;}

header h1 img{
	width:160px;
	height:auto;
	padding:0;}

.salon header p.topTelNo{
	top:97px;
	right:0px;
	left:0px;
	border-top:1px solid #ddd;
	height:42px;
	font-size:20px;
	line-height:42px;
	background-color:rgba(255,255,255,1.0);
	background-image:url("../images/tel_mark.png");
	background-size:17px 25px;
	background-position:18pt 8pt;
	border-radius:0px;
	padding:0 0 0 40px;}

/*-----------------------------------------------------------
SmartPhone -- message & outline
-----------------------------------------------------------*/
#message h2{
		font-size:120%;}

#message br{
	display:inherit;}


ul#outline {}

ul#outline li{
	margin:0;
	width:100%;
	display:inherit;
	margin-bottom:5px;
	text-align:center;}

ul#outline li a{
	margin:0 20px;
	text-align:center;}

ul#outline li img{
	width:100px;
	height:auto;}

ul#outline li p.sign{
	font-size:110%;

}

/*-----------------------------------------------------------
SmartPhone -- mainContents
-----------------------------------------------------------*/

#mainContents{
	float:none;
	width:auto;
	margin-left:20px;
	margin-right:20px;
	min-height:0;
	margin-bottom:30px;
	}

/*news*/
#news dt{
	float:none;}

/*-----------------------------------------------------------
SmartPhone -- menu
-----------------------------------------------------------*/

#menu{
	float:none;
	position:inherit;
	width:auto;
	margin:0;
	padding:20px;
}


#menuItems{
	display:block;
}

/*bannerList（トップページはトグルメニューにしない）*/

#menu ul.bannerList li{
	margin-bottom:10px;
	border:1px solid #DDD;
	width:100%;

}

#menu ul.bannerList li a{
	display:block;}

}