@charset "utf-8"; /*文字コード指定*/

/* ----- css reset(各ブラウザで指定されているスタイルを初期化)と全体設定 ----- */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td, img {
	margin: 0; /*ボックス外側の余白*/
	padding: 0; /*ボックス内側の余白*/
	border: 0; /*境界線指定*/
}

body {
 line-height: 2;	/*行の高さ指定(数値のみの場合はfont-sizeの倍数)*/
 font-family: "メイリオ","Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
 color: #333333; /*文字色指定*/
 background:url(../images/bg-1.png) repeat-x top left;

}

ol, ul {
	list-style: none; /*リストマーカーの種類指定*/
}

a { /*リンクの文字設定*/
	color: #0000FF; /*文字色指定*/
	text-decoration: none; /*テキストの装飾指定(下線、上線など)*/
}

a:hover { /*リンクの文字設定*/
	color: #C74B15; /*文字色指定*/
	text-decoration: underline; /*テキストの装飾指定(下線、上線など)*/
}

.color1 {
	color: #FF0033; /*文字色指定*/
	
}

/* ----- ヘッダー----- */

header {
	position: relative; /*ボックスの配置方法(relativeは相対位置配置)*/
	height: 90px; /*領域の高さ指定*/
	width: auto; /*幅指定(autoは初期値に戻す)*/
	margin: auto; /*ボックス外側の余白(autoはボックス幅や隣接する他ボックス幅による自動余白割り当て)*/
	color: #333333; /*文字色指定*/
}

header p {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	right: 3%; /*右からの距離(positionで指定している場合に適用)*/
	top: 0px; /*上からの距離(positionで指定している場合に適用)*/
	font-size: 1em; /*フォントサイズ指定*/
	font-weight: normal; /*フォントの太さ指定(normalは標準)*/
}

#logo {
	position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
	left: 5%; /*左からの距離(positionで指定している場合に適用)*/
	top: 0px; /*上からの距離(positionで指定している場合に適用)*/
}

/* ----- ナビゲーションメニュー ----- */

nav ul {
 text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
 background:#000000;
}

nav li {
 display:inline;
}

nav li a {
 color: #fff; /*文字色指定*/
 line-height: 40px; /*行の高さ指定*/
 text-decoration: none; /*テキストの装飾指定(下線、上線など)*/
 display: inlineblock; /*要素の表示形式指定(blockはブロックレベルで表示)*/
 text-align: center; /*行の水平方向の揃え方(centerは中央揃え)*/
 font-size:18px;
 padding:0px 20px;
}

nav a:hover {
 background-image: url(../images/menu.gif); /*背景画像指定　url(画像ファイルを指定)*/
 background-repeat: repeat-x; /*背景画像の並べかた(repeat-xは横方向に繰り返し並べる)*/
 text-decoration:none;
 color:#00CCCC;
}

/*----- パンくずナビ -----*/
nav.breadcrumb{
 text-align:right;
 font-size:14px;
 height:20px;
}

nav.breadcrumb a{
 color:#000;
 font-size:14px;
}

nav.breadcrumb a:hover{
 color:#00CCCC;
 background-image: none;
 text-decoration:underline;
}


/* ----- レイアウト ----- */

article { /*container(入れ物、容器)の中に各要素(ボックス)を配置*/
 width: 950px; /*幅指定(100%は画面横幅いっぱいに表示)*/
 margin: auto; /*ボックス外側の余白(autoはボックス幅や隣接する他ボックス幅による自動余白割り当て)*/
 background-color:#ffffff; /*背景色指定*/
 clear:both;
}

article a:hover img { /*画像にマウスをのせた時半透明にする*/
 filter: Alpha(opacity=70); /*視覚効果(IE独自) Alphaは透過表示 opacityは開始透明度*/
 opacity: 0.7; /*要素の透明度*/
}

/* ----- フッター ----- */


footer{
 clear: both; /*floatの回り込みを解除*/
 height: 30px; /*領域の高さを指定*/
 width: auto; /*幅指定(autoは初期値に戻す)*/
 text-align:center;
 background:#000000;
 color:#fff;
 margin-top:30px;
}

/* ----- メインコンテンツ ----- */

article table{
 width:100%;
 margin-top:20px;
 margin-left:20px;
}

section {
 clear: both; /*floatの回り込みを解除*/
 width: auto; /*幅指定(autoは初期値に戻す)*/
 padding-top:20px;
}

section h2 {
 margin: 0; /*ボックス外側の余白*/
 font-size: 1.25em; /*フォントサイズ指定*/
 line-height: 30px; /*行の高さ指定*/
 border-bottom: solid 1px #cccccc; /*下境界線の一括指定*/
 margin: 20px 0px; /*ボックス外側下の余白*/
}


section h3 {
 clear:both;
 font-size: 1.75em; /*フォントサイズ指定*/
 line-height:1.5em; /*行の高さ指定*/
 font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6", "HG明朝E","ＭＳ Ｐ明朝","MS PMincho", "MS 明朝",serif;
 text-align:left;
 background:url(../images/bg_h3.png) no-repeat center bottom;
 padding:10px 0px 0px 84px;
}

section  p{
line-height:1.5em;
font-size:1.17em;
}


/*---- ヘッドスパ -----*/

#headspa {
 background:url(../shop/img/bg_headspa.jpg) no-repeat right bottom;
 padding-bottom:20px;
}


#headspa  p{
line-height:1.5em;
width:550px;
padding:5px 0px 0px 25px;
font-size:1.17em;
}


#headspa2  p{
line-height:1.5em;
padding:5px 25px 0px;
font-size:1.17em;
}


#headspa2 h5{
font-size:1.4em;
line-height:40px;
margin:20px 25px 0px;
padding-left:10px;
border-bottom:double 5px #000;
}

#headspa2 h6{
font-size:1.17em;
margin:15px 25px 0px 35px;
}

#headspa2 .tukare{
font-size:1.17em;
margin:0px 25px 0px 35px;
list-style:disc;
list-style-position:inside;
font-weight:bold;
}

.bgc{
margin:15px 35px;
padding:10px 5px;
border:solid 1px #999;
background:#e5f7f2;
}





/* ---- 画像リスト(ヘッドスパ)の設定 ----- */

.imglist{
 border:solid 3px #000;
 height:300px;
 padding-top:20px;
 }

.imglist p{
 clear:both;
 text-align:right;
}

.imglist ul {
 margin-left: 10px; /*ボックス外側左の余白*/
}

.imglist ul li {
 padding: 0; /*ボックス内側の余白*/
 float: left; /*要素を左か右に寄せて配置(leftは左に寄せる)*/
 display: inline; /*要素の表示形式指定(inlineはインラインレベルで表示(リストを横並び))*/
 margin-left: 10px; /*ボックス外側左の余白*/
 text-align:center;
}

#preview {
 position: absolute; /*ボックスの配置方法(absoluteは絶対位置配置)*/
 border: solid 1px #16160e; /*境界線の一括指定*/
 background-color: #16160e; /*背景色指定*/
 padding: 2px; /*ボックス内側の余白*/
 display:none; /*要素の表示形式指定(noneは表示しない)*/
 color: #ffffff; /*文字色指定*/
 text-align:center;
}

h4{
font-size:1.4em;
line-height:40px;
padding-top:15px;
font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6", "HG明朝E","ＭＳ Ｐ明朝","MS PMincho", "MS 明朝",
serif;
}

/*＝店舗紹介　アクセスマップ＝*/
#staff table{
width:900px;
text-align:center;
margin:20px auto;
}

#staff td{
width:230px;
line-height:24px;
font-size:16px;
vertical-align:top

}

#staff td h6{
font-size:14px;
}

#accessmap .tenpo{
width:43%;
float:left;
margin:20px 1%;
}

#accessmap .tenpo img{
width: 100%;
}

#accessmap h4{
 margin-bottom:10px;
 font-size:2em;
 letter-spacing:-2px;
}

#accessmap .add{
width:50%;
float:left;
margin:10px 1%;
}

#accessmap table{
 margin:10px 0px;
}

#accessmap th,#accessmap td{
 font-size:16px;
 text-align:left;
 font-weight:normal;
 border-bottom:solid 1px #000;
 padding:15px 10px 0px;
}

#accessmap th{
width:120px;
}

#accessmap th img{
width:100%;
}

#accessmap span{
font-size:0.8em;
color:#CC0000;
}

.s_photo img{
width:46%;
flat:left;
margin:1%;
}

.rtop{
 clear:both;
 text-align:center;
 font-size:14px;
 padding-top:15px;
}

.rtop a{
 color:#999;
}

/*メニュー表*/

#menu {
 background:url(../menu/img/bg-menu.jpg) no-repeat right 350px;
 padding-bottom:20px;
}


#text{
 background:url(../menu/img/bg_menu.jpg) no-repeat 520px 85px;
 padding-bottom:20px;
}


#text p{
line-height:1.5em;
padding:5px 0px 0px 0px;
font-size:1.17em;
}


#menu p{
padding-left:25px;
}

#menu table,#ladysmenu table{
text-align:left;
border-collapse:collapse;
margin:15px 30px;
width:580px;
}

#menu th,#ladysmenu th{
border-bottom:dotted 1px #666;
padding:20px 20px 5px;
font-size:20px;
width:380px;
text-align:left;
margin:0px;
font-weight:normal;
line-height:30px;
}

#menu td,#ladysmenu td{
border-bottom:dotted 1px #666;
padding:20px 20px 5px;
font-size:1.25em;
margin:0px;
line-height:30px;
}

#menu h5{
background:url(../images/border.png) repeat-x left bottom;
color:#000;
font-size:1em;
margin:0px 20px;
padding-top:15px;
padding-left:20px;
line-height:2em;
width:600px;
font-family: "ヒラギノ明朝 ProN W6","HiraMinProN-W6", "HG明朝E","ＭＳ Ｐ明朝","MS PMincho", "MS 明朝",serif;

}

strong{
font-size:30px;
padding-right:10px;
font-family: "メイリオ","Meiryo", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","ＭＳ Ｐゴシック", "MS P Gothic", Verdana, Arial, Helvetica, sans-serif;
}

#herbcolor p{
line-height:1.5em;
padding:5px 0px 0px 25px;
font-size:1.17em;
}

#nctoha {
 background:url(../menu/img/bg_nc.jpg) no-repeat right center;
}

#herbcolor p{
line-height:1.5em;
padding:5px 0px 0px 25px;
font-size:1.17em;
 width:600px;
}

.btext{
font-size:1.17em;
margin:5px 25px 0px 35px;
list-style:none;
font-weight:bold;
}

#kaiketu {
 background:url(../menu/img/bg_ncc.jpg) no-repeat right 100px;
}

#kaiketu h5{
font-size:1.4em;
line-height:1.4em;
margin:20px 0px 0px 25px;
padding-left:10px;
border-bottom:double 5px #000;
}

/*お顔そり美容法*/
#okaosoritoha {
 background:url(../shaving/img/bg_toha.jpg) no-repeat right center;
}

#okaosoritoha p{
line-height:1.5em;
width:560px;
padding:5px 0px 0px 25px;
font-size:1.17em;
}

#nagare table{
 border-collapse:collapse;
 margin:15px 50px 15px 0px;

}


article #nagare table img{
width:250px;
}

article #nagare table td{
width:200px;
text-align:center;
vertical-align:top;
margin:10px;
padding:10px 0px 15px;
}

article #nagare p{
padding:0px;
margin:0px auto;
width:250px;
text-align:left;
font-size:14px;
}

article #nagare h6{
padding:10px 0px 3px;
margin:0px auto;
font-size:14px;
background:#f9dede;
width:250px;
color:#333;
}




.bc{
 text-align:center;
  font-size:18px;
  font-weight:bold;
  padding-top:10px;
}

#voice {
 background:url(../shaving/img/bg_voice.jpg) no-repeat right bottom;
 height:400px;
}

#voice div{
    margin:10px;
    background-color:rgba(0, 0, 0, .1);
    width:240px;
    border-left:15px solid #666;
    padding:15px 20px;
    position:relative;
    z-index:1;
    margin-bottom:20px;
	float:left;
}

#voice div:before{
    content:" ";
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
    z-index:-2;
    box-shadow: 6px 2px 4px rgba(0, 0, 0, .1);
}

#voice div:after{
    content:" ";
    width:100%;
    height:100%;
    position:absolute;
    top:-5px;
    left:0px;
    z-index:-1;
    background-color:#fbdbf2;
    -webkit-transform: skew(0, -2deg);
    -moz-transform: rotate(-2deg);
    -o-transform: skew(0, -2deg);
    -ms-transform: skew(0, -2deg);
    transform: skew(0, -2deg);
}

#okaosori h5{
font-size:1.4em;
line-height:1.4em;
margin:20px 0px 15px 0px;
padding:10px 0px 0px 25px;
border-bottom:double 5px #000;
}

#ladysmenu{
 clear:both;
 background:url(../shaving/img/bg_ladysmenu.jpg) no-repeat right bottom;
}

#okaosori h6{
font-size:1.05em;
margin:15px 25px 0px 35px;
line-height:1.17em;
}

#course{
 background:url(../shaving/img/bg_course.jpg) no-repeat right 80px;
}

#course h5{
width:600px;
}

#course p{
padding:5px 0px 0px 20px;
width:570px;
}


.bc2{
  font-size:18px;
  font-weight:bold;
  padding-top:10px;
  padding-left:50px;
  line-height:18px;
}

.textmenu{
font-size:1.05em;
margin:5px 25px 0px 35px;
height:200px;
list-style:none;
}

/*電話連絡ボタン*/
#tel{
width:100%;
text-align:center;
font-size:14px;
margin-top:10px;
}

.button{
background:#000;
line-height:36px;
padding:10px;
margin:0px auto 10px;
color:#fff;
font-size:16px;
width:400px;
border-radius: 10px;
    -webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
    -moz-border-radius: 10px;   /* Firefox用 */  
}

.button a{
color:#fff;
}

.button a:hover{
color:#ff0;
}