@charset "utf-8";

/* ----------------------
        reset CSS  
-----------------------*/


html,body,
div,span,
object,iframe,
h1,h2,h3,h4,h5,h6,
p,blockquote,pre,
a,abbr,acronym,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,strong,sub,sup,tt,var,
ul,ol,li,dl,dt,dd,
form,fieldset,legend,label,
table,caption,tbody,tfoot,thead,tr,th,td,
header,nav,footer,figure {
  margin: 0;
  padding: 0;
  }

article, header, footer, section, nav, aside, figure {
  display:  block;
  }

audio[controls],
canvas,
video {
  display: inline-block;
  *display: inline;
  zoom: 1;
  }

html {
  font-size: 100%;
  overflow-y: scroll;
  }

ul,ol {
  list-style-type: none;
  } 

img {
  border: 0 none;
  line-height: 0;
  } 

em,
strong,
cite {
  font-style: normal;
  }

strong {
  font-weight: bold;
  }

table {
  border-collapse: collapse;
  border-spacing: 0;
  }

/* ----------------------
        common CSS  
-----------------------*/

body {
  background: url("../img/bg_body.gif") repeat left top #ffffff;
  color: #200101;
  font-family: "Times New Roman",Garamond,"小塚明朝 Pro","Kozuka Mincho Pro","ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","ＭＳ Ｐ明朝","MS PMincho",serif;
  font-size: 13px;
  line-height: 1.6;
}

.container {
  width: 100%;
  position: relative;
  }

/* 
a:hover img {
  opacity: 0.8;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* for IE 4以上 */
  -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* for IE 8以上 */ 
  } */

a { color: #1B1B44; }

a:link { color: #1B1B44; }
a:visited { color: #1B1B44; }
a:hover { color: #0E6AA3; }
a:active { color: #1B1B44; }

.clearfix,
#contentArea,
#header_content #glovalNavi,
.col .menuList {
   width: 100%;
}

.clearfix:after,
#contentArea:after,
#header_content #glovalNav:after,
.col .menuList:after {  
  content: ".";   
  display: block;   
  height: 0;   
  clear: both;   
  visibility:  hidden;  
}  

.linkArea {
  text-align: right;
}

.moreLink {
  padding-left: 1.2em;
  background: url("../img/icon_arrow_l.png") no-repeat left center transparent;
}

.topLink {
  padding-left: 1.2em;
  background: url("../img/icon_arrow_t.png") no-repeat left center transparent;
}  

.separator {
  margin-top: 30px;
}

.note li {
  font-size: 90%;
}
/* ----------------------
          header  
-----------------------*/

/* ------- common ------- */

#headerArea {
  width: 100%;
  min-width: 1080px;
  background: url("../img/bg_headerS.png") repeat-x center top transparent;
}

#headerArea h1 {
  position: absolute;
  left: 0;
  top: 0;
  line-height: 0;
}

#headerArea #description {
  position: absolute;
  left: 95px;
  top: 0;
  font-size: 80%;
}

#header_content {
  width: 1080px;
  height: 192px;
  margin: 0 auto;
  position: relative;
}


#header_content #topinfoArea {
  height: 56px;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 0;
}

#header_content #glovalNavi {
  width: 960px;
  height: 105px;
  position: absolute;
  left: 60px;
  bottom: 2px;
  zoom: 1;
}

#header_content #glovalNavi li {
  width: 192px;
  float: left;
}


/* ------- #top index.html ------- */

#top #headerArea {
  background: url("../img/bg_header.png") repeat-x center top transparent;
}

#top #header_content {
  height: 488px;
}


/* ----------------------
          #content
-----------------------*/


/* ------- common ------- */

#contentArea {
  width: 1000px;
  margin: 15px auto 5px;
  }

#mainContent {
  width: 680px;
  float: left;
}

#topicPath {
  padding: 7px 0 8px 30px;
  background: url("../img/bg_topic.png") no-repeat left bottom transparent;
  font-size: 12px;
}

#topicPath span {
  margin: 0 4px;
  font-size: 60%;
}


/* ------- #shopInfobox / shop information ------- */
 
#shopInfobox {
  width: 320px;
  height: 935px;
  margin-top: 15px;
  padding: 40px 36px 30px 34px;
  float: right;
  background: url("../img/bg_shopinfo.png") no-repeat left top transparent;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  }
  
#shopInfobox h3 {
  margin-top: 20px;
  padding-left: 25px;
  background: url("../img/icon_crown.png") no-repeat left center transparent;
  font-size: 1em;
}

#shopInfobox .tel,
#shopInfobox .shopinfoList {
  margin-top: 15px;
}

.shopinfoList dt {
  width: 5em;
  float: left;
  color: #03183E;
  font-weight: bold;
}

.shopinfoList dd.number {
  color: #7A5325;
  font-weight: bold;
}

#shopInfobox .address {
  margin: 15px 0  10px;
}

/* ------- #newsbox / News ------- */

#newsbox {
  margin: 20px 0 0 10px;
  position: relative;
  background: url("../img/bg_news.png") no-repeat left bottom transparent;
  }

#newsbox h2 {
  width: 186px;
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 2;
  }

#newsbox h3 {
  position: absolute;
  top: -5px;
  left: 0;
  z-index: 1;
  }

#newsbox #newsIndex {
  margin: 0 80px 0 60px;
  padding: 74px 0 50px;
  position: relative;
}

#newsbox #newsIndex .newslist li {
  margin-bottom: 1em;
  padding-bottom: 5px;
  background: url("../img/line01.gif") no-repeat center bottom transparent;
}

#newsbox #newsIndex .newslist li .data {
  width: 6em;
  padding-left: 25px;
  display: block;
  float: left;
  color: #023078;
  font-weight: bold;
  background: url("../img/icon_crown.png") no-repeat left center transparent;
}

#newsbox #newsIndex .newslist li a {
  display: block;
  overflow: hidden;
  color: #200101;
  text-decoration: none;
}

#newsbox #newsIndex .newslist li a:hover {
  color: #0E6AA3;
  text-decoration: underline;
}

/* ------- #guidebox / SalonGuide ------- */
  
#guidebox {
  height: 416px;
  margin-top: 20px;
  position: relative;
  background: url("../img/bg_topGuide.png") no-repeat left top transparent;
  }

#guidebox h2 {
  width: 186px;
  position: absolute;
  top: -15px;
  left: 0;
  z-index: 2;
  }
 
#guidebox h3 {
  width: 550px;
  position: absolute;
  top: 45px;
  right: 60px;
  z-index: 1;
  }

#guidebox h4 {
  width: 311px;
  position: absolute;
  top: 75px;
  right: 140px;
  z-index: 4;
  }
  
#guidebox .imgArea {
  width: 250px;
  position: absolute;
  top: 90px;
  left: 60px;
  z-index: 3;
  }

#guidebox p {
  width: 280px;
  position: absolute;
  top: 180px;
  left: 330px;
  line-height: 2;
  }

/* ------- #menubox / Menu & Price ------- */

#menubox {
  height: 426px;
  margin-top: 20px;
  position: relative;
  background: url("../img/bg_topMenu.png") no-repeat right top transparent;
  }
  
#menubox h2 {
  width: 200px;
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 2;
  }

#menubox h3 {
  width: 580px;
  position: absolute;
  top: 45px;
  left: 50px;
  z-index: 1;
  }

  
#menubox .indexL {
  width: 270px;
  position: absolute;
  top: 90px;
  left: 50px;
}

#menubox .indexR {
  width: 270px;
  position: absolute;
  top: 90px;
  left: 340px;
}
  
.col {
  margin: 0 0 30px 0;
  float:left;
  }

.col h4 {
  margin-bottom: 5px;
  line-height: 0;
  }


.col dt {
  width: 170px;
  padding-left: 20px;
  float: left;
  }

.col dd {
  width: 70px;
  float: left;
  text-align: right;
  }

/* ------- #detialbox ------- */

#detialbox {
  margin: 20px 10px 0 0;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#detialbox h2 {
  width: 186px;
  position: absolute;
  top: -20px;
  right: 0;
  z-index: 2;
  }

#detialbox h3 {
  position: absolute;
  top: -5px;
  left: 0;
  z-index: 1;
  }

#detialbox .introduction {
  margin-bottom: 40px;
  padding-left: 120px;
  min-height: 103px;
  }

#detialbox .introduction h4 {
  margin-bottom: 10px;
  }
  
/* ------- #top index.html ------- */

#top #mainContent {
  float: right;
}

#top #shopInfobox {
  float: left;
  }

/* ------- map.html ------- */

#map #detialbox {
  background: url("../img/bg_map.png") no-repeat left bottom transparent;
}

  #map #detialbox .introduction {
  background: url("../img/img_welcome.png") no-repeat left top transparent;
  }

#map #detialbox .inner {
  padding: 100px 78px 80px 50px;
  }

#map #detialbox .info {
  margin-bottom: 30px;
  overflow: hidden;
  background: url("../img/line02.png") no-repeat right 110px transparent;
}

#map #detialbox .info .imgArea {
  width: 260px;
  float: left;
  }  

#map #detialbox .info .txtArea {
  margin-top: 20px;
  }  

#map #detialbox .info .logo {
  margin-bottom: 30px;
  }  

#map #detialbox #map_googleMap iframe {
  width: 540px;
  height: 400px;
  border: 1px solid #999999;
}

#map #detialbox #map_googleMap iframe {
  width: 540px;
  height: 400px;
  border: 1px solid #999999;
}

#map #detialbox #map_googleMap a {
  display: block;
  text-align: right;
  font-size: 13px;
}

#map #detialbox #forAccess h4 {
  margin-top: 30px;
  padding-left: 25px;
  background: url("../img/icon_crown.png") no-repeat left center transparent;
  font-size: 1em;
}

#map #detialbox #forAccess h5 {
  margin-top: 20px;
  color: #2F5A6C;
   font-size: 1em;
}

#map #detialbox #forAccess .linkArea {
  margin: 20px 0 0;
}

/* ------- menu.html ------- */

#menu #detialbox {
  background: url("../img/bg_menu.png") no-repeat left bottom transparent;
}

#menu #detialbox .inner {
  padding: 100px 70px 80px 40px;
  }

#menu  #detialbox .introduction {
   background: url("../img/img_behappy.png") no-repeat left top transparent;
}

#detialbox .inner .indexL {
  width: 270px;
  float: left;
}

#detialbox .inner .indexR {
  width: 270px;
  float: right;
}

#menu #detialbox .inner .note {
  clear: both;
}

/* ------- news.html ------- */

#news #detialbox {
  background: url("../img/bg_news.png") no-repeat left bottom transparent;
}

#news #detialbox .inner {
  padding: 80px 70px 80px 70px;
  }
  
#news #detialbox .newspart {
  margin: 0 0 20px;
  padding-bottom: 10px;
  background: url("../img/line01.gif") no-repeat center bottom transparent;
}  
  
  
  
#news #detialbox .data {
  padding-left: 25px;
  color: #023078;
  font-weight: bold;
  background: url("../img/icon_crown.png") no-repeat left center transparent;
}

#news #detialbox .newsTitle {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

#news #detialbox .txtArea p {
  margin-bottom: 1em;
}

/* ----------------------
          footer 
-----------------------*/

#footerArea {
  width: 100%;
  min-width: 1080px;
  height: 108px;
  margin: 0;
  background: url("../img/bg_footer.png") repeat-x left bottom transparent;
}

#footer_content {
  width: 1080px;
  height: 108px;
  margin : 0 auto;
}

#footerArea #logoArea {
  width: 266px;
  float: left;
  line-height: 0;
}

#footerArea .utility {
  margin-top: 50px;
  float: right;
  text-align: right;
}

#footerArea #footerNav {
}

#footerArea #footerNav li {
  display: inline;
  border-left: 1px solid #200101;
  margin-left: 10px;
  padding-left: 10px;
  font-size: 90%;
  }
 
#footerArea #footerNav li.first {
  border-left: none;
  margin-left: 0;
  padding-left: 0;
  }
  
#footerArea #footerNav li a {
  color: #200101;
  text-decoration: underline;
  } 
    
#footerArea #footerNav li a:hover {
  color: #0E6AA3;
  } 
  
#footerArea .copyright {
  font-size: 80%;
  }