@charset "UTF-8";

/* ---------------------
 * FONTSIZE MODEL * 
 * ---------------------
 *  63% ->	10pxに相当
 *  70% ->	11pxに相当
 *  75% ->	12pxに相当
 *  82% ->	13pxに相当
 *  88% ->	14pxに相当
 *  94% ->	15pxに相当
 * 100% ->	16pxに相当
 * 107% ->	17pxに相当
 * 113% ->	18pxに相当
 * 119% ->	19pxに相当
 * 125% ->	20pxに相当
 * --------------------- */


/* ========BASIC======== */
* {
	/*font-family:osaka, "MS ゴシック", "Hiragino Mincho Pro W3", "ヒラギノ明朝 Pro W3", serif;*/
   color:#000;
}

body {
   margin:10px 0;
   padding:0;
   letter-spacing:1px;
   line-height:25px;
   background:url("http://metro-hair.jp/common/images/bg.jpg");
}

br {
   letter-spacing:normal;
}

a {
   color:#000;
   text-decoration:none;
}

a:hover {
   color:#999;
   text-decoration:underline;
}

img {
   border:0;
   vertical-align:bottom;
}

h1,h2,h3,h4,h5,h6 {
   margin:0;
}
hr{
	color: #999999;
}

/* ========TEMPLATE LAYOUT======== */
div#top {
   width:980px;
   margin:0 auto;
   /*padding:10px 10px;*/
   background:#fff;
   box-shadow:0 0 5px #999;
   -moz-box-shadow:0 0 5px #999;
   -webkit-box-shadow:0 0 5px #999;
   behavior: url(PIE.htc);/* for IE */

}

div#header {
	position:relative;
	width:980px;
	background-color: #590322;
	background: url(../images/head.jpg);
	height: 65px;
}

div#pr {
   position:absolute;
   left:0;
   top:0;
}

div#message {
	position:absolute;
	top:10px;
	right:0;
	color: #FFFFFF;
}

div#gnavi {
	position:absolute;
	bottom:0;
	right:0;
	padding: 0px 5px 5px 0px;
}

div#menu {
	float:left;
	width:980px;
	margin-top:10px;
}

div#icatch {
	float:left;
	width:980px;
	margin-top:10px;
	border-bottom: 1px solid #999999;
	padding-bottom: 10px;
}

div#contents {
	float:left;
	width:980px;
	background:#fff;
	font-size: 20px;
}

div#main {
	float:left;
	width:740px;
	margin-left: 10px;
	margin-top: 10px;
}
div#catalog {
	float:left;
	width:970px;
	margin-left: 10px;
	margin-top: 10px;
	height: 300px;
}

div#sub {
	float:right;
	width:220px;
	margin-right: 10px;
	margin-top: 10px;
	font-size: 14px;
}

div#totop {
   clear:both;
}

div#footer {
	clear:both;
	width:980px;
	background: url(../images/under.gif);
	height: 99px;
}
.left{
	float: left;
	padding: 5px 20px 0px 20px;
}
.left_bd{
	float: left;
	padding: 5px 20px 0px 20px;
	background-image: url(../images/a1.png);
}

.right{
	float: right;
	padding: 10px;
	margin-right: 20px;
}

/* ========HEADER CUSTOMIZE======== */
div#header h1 {
   margin:0;
   padding:10px 0 5px 5px;
   font-size:200%;/* 32px相当 */
   line-height:1.0;
}

div#header h1 a:hover {
   color:#f1f1f1;
}

div#header #message {
   font-size:70%;/* 11px相当 */
}

div#header #gnavi ul {
   list-style:none;
}

div#header #gnavi li {
   float:left;
   margin-left:15px;
   font-size:70%;/* 11px相当 */
}

div#header #gnavi li a {
	display:block;
	padding-left:8px;
	background:url("images/bg_arrow.gif") 0 50% no-repeat;
	color: #FFFFFF;
}


/* ========MENU CUSTOMIZE======== */
/* メインメニュー */
#menu ul {
   display:block;
   list-style-type: none;
   margin:0;
   padding:0;
}

/* サブメニュー1段目 */
#menu ul ul {
   display:none;
   position:absolute;
   top:100%;
   left:0;
}

/* サブメニュー2段目以降 */
#menu ul ul ul {
   top:0;
   left:100%;
}

/* リスト */
#menu li {
   float:left;
}

#menu li li {
   clear:both;
}

#menu li:hover {
   position:relative;
}

#menu li:hover > ul {
   display: block
}

/* デザイン */
div#menu ul {
   float:left;
   margin:0;
   padding:0;
   font-size:12px;
   list-style:none;
   border-top:1px solid #999;
   border-bottom:1px solid #999;
   background:#fff url("images/bg_menu.gif") 0 0 repeat-x;
}

div#menu li ul {
   border-top:1px solid #999;
   border-bottom:none;
}

div#menu li li {
   margin-left:0;
   background:#f5f5f5;
   border-bottom:1px solid #999;
}

div#menu li li a:hover {
   margin-left:0;
   background:#fff;
}

div#menu li a {
   display:block;
   width:122px;
   padding:10px 0;
   text-align:center;
   outline:none;
}

div#menu li li a {
   display:block;
   width:120px;
   padding:10px 5px;
   line-height:20px;
   text-align:left;
   outline:none;
}

div#menu li a:hover {
   color:#666;
   text-decoration:none;
}
.mds{
	background:#fff url("../images/bg_arrow.gif") 0 0 no-repeat;
	background-position: 15px;
	text-indent: 25px;
	padding: 5px 0px 5px 0px;
	font-weight: bold;
	font-size: 20px;
	color: #999933;
}
.mdss{
	background:#fff url("../images/bg_arrow.gif") 0 0 no-repeat;
	background-position: 15px;
	text-indent: 25px;
	padding: 5px 0px 5px 0px;
	font-weight: bold;
	font-size: 14px;
	color: #999933;
}
/* ========フォトギャラリー用======== */
#gimg{
	width: 740px;
	margin: 0px auto;
	padding-bottom: 10px;
}

.smallimage {
 background-color: #fff;
 border: 1px solid #CCC;
 padding: 3px;
 margin: 10px 5px 0 0;
}


/* ========TOPICPATH CUSTOMIZE======== */
div#topicpath {
   padding:5px 0;
   font-size:12px;
}


/* ========MAINCONTENTS CUSTOMIZE======== */
div#main a {
   color:#d9890f;
}

div#main a:hover {
   text-decoration:underline;
}

div#main h2 {
	font-size:16px;
	color:#e54c81;
	background-repeat: no-repeat;
 }
div#main h3 {
	font-size:16px;
	color:#e54c81;
	background-image: url(../images/ttl_bg02.png);
	padding-top: 18px;
	text-indent: 65px;
	background-repeat: no-repeat;
	padding-bottom: 15px;
}

div#main h3 a {
   color:#e54c81;
   text-decoration:none;
}

div#main h3 a:hover {
   color:#e54c81;
   text-decoration:underline;
}

div#main h4 {
	font-size:16px;
	color:#e54c81;
	background-image: url(../images/ttl_bg03.png);
	padding-top: 20px;
	text-indent: 60px;
	background-repeat: no-repeat;
	padding-bottom: 15px;
}

div#main h5 {
   margin-bottom:5px;
   padding-bottom:2px;
   font-size:75%;/* 12px相当 */
   background:url("images/bg_dotline.gif") 0 100% repeat-x;
}

div#main h6 {
   margin-bottom:3px;
   padding-left:8px;
   font-size:75%;/* 12px相当 */
   font-weight:normal;
   background:url("images/bg_arrow.gif") no-repeat left 50%;
}

/*h2カスタマイズ*/
.h2_tp {
	background-image: url(../images/ttl_bg01.png);
	text-indent: 60px;
	padding: 10px 0px 15px 0px;
 }
.h2_sp {
	background-image: url(../images/ttl_bg02.png);
	padding: 15px 0px 20px 0px;
	text-indent: 65px;
 }
.h2_cp {
	background-image: url(../images/ttl_bg03.png);
	text-indent: 60px;
	padding: 20px 0px 20px 0px;
 }
.h2_ct {
	background-image: url(../images/ttl_bg04.png);
	text-indent: 60px;
	padding: 10px 0px 15px 0px;
 }
.h2_mn {
	background-image: url(../images/ttl_bg05.png);
	text-indent: 65px;
	padding: 25px 0px 15px 0px;
 }
.h2_ht {
	background-image: url(../images/ttl_bg06.png);
	text-indent: 65px;
	padding: 15px 0px 20px 0px;
 }
.h2_ca {
	background-image: url(../images/ttl_bg07.png);
	text-indent: 60px;
	padding: 20px 0px 20px 0px;
 }
.h2_ct2 {
	background-image: url(../images/ttl_bg01.jpg);
	text-indent: 80px;
	padding: 10px 0px 15px 0px;
	font-size:16px;
	color:#e54c81;
	background-repeat: no-repeat;
	height: 50px;
 }

div#main p {
   margin:0 0 1em 0;
   font-size:75%;/* 12px相当 */
}

div#main ul,ol,dl {
   font-size:75%;/* 12px相当 */
}

div#main dt {
	margin-bottom:3px;
	background-color: #FFFFFF;
	color: #993300;
}

div#main dd {
   padding:3px;
   margin:0 0 0.5em 1em;
   padding:3px;
   background:#ffffff;
}

/* INFORMATION CUSTOMIZE */
div#main dl.information {
   margin:0 0 20px 0;
}
div#main dl.information dt {
   float:left;
   padding-top:5px;
}

div#main dl.information dd {
   margin:0 0 5px 0;
   padding: 5px 0px 5px 9em;
   background:url("images/bg_dotline.gif") 0 100% repeat-x;
}

/* BANNER CUSTOMIZE */
div.banner ul {
   margin:0 0 0 -6px;
   padding:0;
   list-style:none;
   zoom:1;/* for IE6 bug */
}

div.banner li {
   float:left;
   margin-left:6px;
   display:inline;/* for IE6 bug */
}

/* MENU・PRICE CUSTOMIZE */
#main dl.menu {
	margin: 0 0 15px;
	padding: 0 10px 10px;
	border: 7px #EEEEEE solid;
	width: 690px;
	font-size: 12px;
}
#main dl.menu dt {
	float: left;
	padding: 10px 0;
	font-weight: bold;
	line-height: 150%;
	margin-left: 10px;
}
#main dl.menu dd {
	padding: 10px 0 10px 180px;
	line-height: 150%;
	border-bottom: 1px #CCCCCC solid;
}

/*写真横並び*/
#grid {
	width: 740px;
}
#grid ul {
	padding: 0;
	margin: 0;
}
#grid li {
	margin: 2px;
	float: left;
	list-style: none;
}

/*写真テーブル*/
.img_tbl{
	width: 690px;
	text-align: left;
	margin: 10px 0px 0px 20px;
	padding: 10px;
}
.img_tbl th{
	background-color:#FFCCCC;
	font-style: normal;
	font-size: 14px;
	color: #990000;
	text-indent: 10px;
}
.img_tbl td{
	vertical-align:top;
	padding: 10px;
}

/*スタッフテーブル*/
.stf_tbl{
	width: 660px;
	text-align: center;
	margin-top: 10px;
	padding: 10px;
	margin-left: 25px;
}
.stf_tbl th{
	background-color:#FFCCCC;
	width: 33%;
	font-size: 14px;
}
.stf_tbl td{
	vertical-align:top;
	font-size: 12px;
}

/*予約テーブル*/
.yyk_tbl{
	width: 690px;
	text-align: center;
	margin: 0px 0px 0px 0px;
	padding: 10px;
}
.yyk_tbl th{
	background-color:#FFCCCC;
	font-style: normal;
	font-size: 14px;
	color: #990000;
	text-indent: 10px;
}
.yyk_tbl td{
	vertical-align:top;
	padding: 10px;
	border-bottom:1px solid #cccccc;
	color:#CD3C7F;
	font-weight: bold;
}
/* ========SUBCONTENTS CUSTOMIZE======== */
div#sub .section {
   margin-bottom:10px;
}

div#sub h2 {
   padding-bottom:2px;
   font-size:88%;/* 14px相当 */
   font-weight:bold;
   text-align:center;
   border-bottom:1px solid #999;
   background:#FFF3EF url("images/bg_arrow.gif") 5px 50% no-repeat;
   text-decoration:none;
}

div#sub h3 {
   padding:5px;
   font-size:75%;/* 12px相当 */
   font-weight:bold;
   background:#EFEBEF;
}
div#sub p {
   font-size:100%;/* 12px相当 */
   text-align:center;
   margin-bottom:20px;
}

div#sub ul {
   margin:0;
   padding:0;
   border:1px solid #EFEBEF;
}

div#sub li {
   padding:5px;
   font-size:75%;/* 12px相当 */
   line-height:1.8;
   list-style:none;
   border-bottom:1px solid #E7E7EF;
}

div#sub li a {
   display:block;
   padding:5px 5px 5px 15px;
   background:url("images/bg_arrow.gif") 5px 50% no-repeat;
}

div#sub li a:hover {
   display:block;
   color:#333;
   background:#FFF3EF url("images/bg_arrow.gif") 5px 50% no-repeat;
   text-decoration:none;
}


/* ========TOTOP CUSTOMIZE========= */
div#totop {
   text-align:right;
   font-size:70%;/* 11px相当 */
}

div#totop a {
   padding:0 0 0 12px;
   background:url("images/bg_totop.gif") 0 50% no-repeat;
}


/* ========FOOTMENU CUSTOMIZE======== */
div#footer ul {
   margin:20px 0;
   padding-top:20px;
   text-align:center;
   border-top:1px solid #ddd;
}

div#footer li {
   display:inline;
   margin:0 0 0 20px;
   font-size:75%;/* 12px相当 */
   list-style:none;
}

div#footer li a {
   color:#FFFFFF;
}

div#footer li a:hover {
   color:#666;
   text-decoration:underline;
}


/* ========FOOTER CUSTOMIZE======== */
div#footer address {
	color:#FFFFFF;
	text-align:center;
	line-height: 3.0;
	padding-top: 55px;
	font-size: 12px;
}

/*----------------------------------------------------------------
 *　 横幅
----------------------------------------------------------------*/
.tx16{
	width:160px;
}
.tx30{
	width:340px;
}
.tx40{
	width:400px;
}
.tx45{
	width:450px;
}
.tx50{
	width:500px;
}
.tx55{
	width:550px;
}
.tx60{
	width:600px;
}
.tx65{
	width:650px;
}
.tl{
	text-align: left;
}
.tr{
	text-align: right;
}

/*----------------------------------------------------------------
 *　 フォントデザイン
----------------------------------------------------------------*/
.ftbl{
	color:#000000;
	font-weight: bold;
}
.ftb{
	color:#0066CC;
	font-weight: bold;
}
.ftbt{
	color:#0066CC;
	font-weight: bold;
	background-color: #CCCCFF;
	padding: 5px;
}
.ftbr{
	color:#CD3C7F;
	font-weight: bold;
}
.ftbrb{
	color:#CD3C7F;
	font-weight: bold;
}

.ftbr2{
	color:#000099;
	font-weight: bold;
	font-size: 10px;
}
.ftr{
	color:#CC0000;
	font-weight: bold;
}
.ftrt{
	color:#660000;
	font-weight: bold;
	padding: 5px;
	background-image: url(../images/a1.png);
}

.ftp{
	color:#FF99CC;
	font-weight: bold;
}
.ftg{
	color:#339933;
	font-weight: bold;
}
.ft20{
	font-size:24px;
}
/*カレンダー
=============================================================*/

table.calendar{
	width:220px;
	border:solid 2px #00c0c0;
    border-collapse:separate;
    border-spacing:1px;
    empty-cells:show;
    font-size:0.65em;
	vertical-align:middle;
	text-align:center;
}

.calendar td.ti{
    padding:1px;
	font-size:14px;
	color:#F90;
}

.calendar td{
    padding:1px;
}

.calendar td.sun{
    background-color:#FFE3E6;
    color:#F00;
	padding:1px;
}

.calendar td.sat{
    background-color:#FFE3E6;
    color:#06F;
	padding:1px;
}

.calendar td.close{
    background-color:#FFD700;
	padding:1px;
}

/*カレンダー（ＨＰ用）
=============================================================*/
table.cal {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 30px;
}
table.cal tr th, table.cal tr td {
  border: 1px solid #dddddd;
  padding: 7px;
  font-size: 10px;
  font-size: 1rem;
}
table.cal tr th.cal_title {
  background: #ffe2d2;
  text-align: center;
}
table.cal tr th.weekday {
  background: #fffcec;
  text-align: center;
}
table.cal tr td.day_sunday {
  background: #fff0e8;
}
table.cal tr td {
  width: 137px;
  height: 80px;
  vertical-align: top;
}
table.cal tr td ul {
  margin-left: -40px;
  font-size: 5px;
}
table.cal tr td ul li {
  list-style: none;
}
table.cal tr td ul li a {
  text-decoration: none;
  color: #0591d2;
}