@charset "utf-8";

/*
  Site Name: Hair Ship FARO
  Description: base style[base & module, layout ]
  Version: 1.0
  Author: jun.watanabe
*/

/*
===== CONTENTS ===========================================

  // baseStyles //
  // modulestyles //
  // layoutStyles //

  // forPC[min-width481px] //
    // baseStyles //
    // modulestyles //
    // layoutStyles //

==========================================================
*/

/*--------------------------------
//////////  baseStyles  //////////
--------------------------------*/

/*****  bodyBaseStyle  *****/

body {
  text-align:center;/* box centering */
  /*Gothic*/
  /* ont-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
  /*Mincho*/
  font-family:"ヒラギノ明朝 Pro W6","Hiragino Mincho Pro","HGS明朝E","ＭＳ Ｐ明朝", "メイリオ", Meiryo, Osaka,serif;
  color: #646472;
  font-weight: normal;
  letter-spacing: 0.2em;
  font-size: 62.5%;
  margin: 0px;
  padding: 0px;
  background-color: #F2F2E8;
  width: 100%;
  height: 100%;
  position:relative;
}


/*****  generalParams  *****/
h1, h2, h3, h4, h5, h6,
div, p, pre, ul, ol, dl, dt, dd,
address, form, blockquote{
  padding: 0;/* margin&padding reset */
  line-height: 1.6em;/* base line height */
  text-align: left;
  display: block;
  margin: 0px;
  font-size:100%;
}
table {margin : 0;empty-cells: show; font-size:small;}
hr,.areaAnchor,.anchor { display : none; }

img {
  border: none;/* img do not want a border */
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic; 
}
li { list-style: none; }/* link do not want a dot */


/*****  acronymsAndAbbreviationsSytles  *****/

acronym,abbr{cursor:help;}


/*****  formSettings  *****/

option{ padding-right:10px; }
*+html option{padding-right:0;}/* for IE7&Opera */
* html option{padding-right:0;}/* for IE6 */　　　

/*
  button {
  cursor:pointer;
  padding:0;
  margin:0;
  border:none;
  background:none;
}

input,
  textarea {
  background:#f8f7ff;
  border:1px solid #cccccc;
}

.focus {
  color:#666666;
  background:#ffeff5;
  border:1px solid #eeeeeee;
  margin-left:10em;
}

.error {
  color:#e4043d;
  margin-left:1em;
  font-size:0.75em;
  vertical-align:middle;
}
*/


/*****  LinkSettings  *****/

a {
  color: #400D01;
  text-decoration:none;
}

/**/
a:link{
  color: #400D01;
  text-decoration:none;
}
a:visited{
  color: #400D01;
  text-decoration:none;
}
a:hover{
  color: #400D01;
  /*background:#664466*/;
  text-decoration:underline;
}
a:active{
  color: #400D01;
  text-decoration:none;
}


/*****  contentsSettings  *****/
/*// contentsCentered //*/

#header,
nav#gNavi,
#footer{
  width: 100%;
}

#header header,
nav#gNavi ul{
  width: 100%;
}

footer{
  width: 100%;
}

/*// imageAlpha //*/
.sideBtn:hover,
.sideBtn a:hover{
  opacity:0.75;
  filter: alpha(opacity=75);
  -ms-filter: "alpha( opacity=75 )";
  -moz-opacity:0.75; /*FF*/
}

/*// caution text //*/
/*// for block element //*/
.caution {
  font-size:0.9em; /* font-size == text-indent - == margin-left */
  padding-left:0.9em !important; /*※sign break indent setting */
  text-indent:-0.9em !important; /*※sign break indent setting */
  margin-top:5px !important;
  display: block;
}

.caution strong {
  color:#e4043d;
}

ul.sentList li{
  font-size: 1.0em;
  padding-left: 1.0em;
  text-indent: -1.0em;
  display: block;
}

.btn{
    background-image:-moz-linear-gradient(47% 1% -90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%); 
    background-image:-webkit-gradient(linear,47% 1%,47% 71%,color-stop(0, rgb(255,255,255)),color-stop(0.52, rgb(243,242,238)),color-stop(0.94, rgb(227,224,216)),color-stop(0.97, rgb(226,223,214)));
    background-image:-webkit-linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%);
    background-image:-ms-linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%);
    background-image:linear-gradient(-90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%);
    width:132px;
    height:26px;
    border:1px solid rgb(255,255,255);
    border-radius:5px ;
    -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffe2dfd6,GradientType=0)";
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffffff,endColorstr=#ffe2dfd6,GradientType=0);
  display: block;
  text-align: center;
  line-height: 26px;
  box-shadow: 0 0 1px #666;
  text-decoration: none !important;
  font-weight: bold;
}

.btn:hover{
background-image:-moz-linear-gradient(47% 1% 90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%); 
background-image:-webkit-gradient(linear,47% 1%,47% 71%,color-stop(0, rgb(255,255,255)),color-stop(0.52, rgb(243,242,238)),color-stop(0.94, rgb(227,224,216)),color-stop(0.97, rgb(226,223,214)));
background-image:-webkit-linear-gradient(90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%);
background-image:-ms-linear-gradient(90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%);
background-image:linear-gradient(90deg,rgb(255,255,255) 0%,rgb(243,242,238) 52%,rgb(227,224,216) 94%,rgb(226,223,214) 97%);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2dfd6,endColorstr=#ffffffff,GradientType=0)";
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffe2dfd6,endColorstr=#ffffffff,GradientType=0);
}

/*// sideBarDefault //*/
aside#sideBar ul li{
  margin-bottom: 10px;
  background: none;
}

#sideBnCoupon{
  position: relative;
  display: block;
}

#sideBnCoupon span.overlay{
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

/*--------------------------------
//////////  moduleStyles  //////////
--------------------------------*/

/*****  clearFix  *****/
.clearfix{
    zoom:1;/*for IE 5.5-7*/
}
.clearfix:after{/*for modern browser*/
    content:".";
    display: block;
    height:0px;
    clear:both;
    visibility:hidden;
}
* html .clearfix{
  display:inline-table;
  /*\*/display:block;/**/
}

/*****  pageTop  *****/

/*
.pagetop{
  text-align:right;
  padding:1em;
}
*/

/*****  maxImageScaling  *****/

/*
img.maximg{
  position:fixed !important;
}

#wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
}
*/

/* add before<body> tag

<!-- maxImage Scaling settings -->
<script type="text/javascript">
$(function(){
  jQuery('img.maximg').maxImage({
    isBackground: true,
    slideShow: false,
    slideShowTitle: false,
    slideDelay: 5,
    overflow: 'auto',
    verticalAlign:'top'
  });
});
</script>
<!-- /maxImage Scaling settings -->
*/

/*****  colorBox  *****/

#cboxTitle {
  display: none !important;
}

/*****  floatList  *****/
ul.flList {
  width: 100%;
  overflow: hidden;
}

ul.flList li {
  float: left;
}

/*--------------------------------
//////////  layoutStyles  //////////
--------------------------------*/

/*****  container  *****/
#wrap {width: 100%;}
#main {width: 100%;font-size: 1.2em;}


/*****  header  *****/
#header{
  background: url(../img/common/header_bg.png) no-repeat center top;
}

header h1{
  text-align: center;
}


header h2{
  font-size: 0.65em;
  text-align: center;
}

header p#tel {
  height: 57px;
  text-align: center;
  margin-top:6px;
}

header p#tel img{
  width: 300px;
}



/*****  footer  *****/
#footer{
  background: url(../img/common/footer_bg.png) no-repeat center;
  height: 90px;
}

footer {
  overflow: hidden;
  height: 90px;
}

footer div#copyright {
  width: 235px;
  height: 11px;
  margin: 40px auto 0;
}

/*****  navigation  *****/
/*// globalNavigation //*/
nav#gNavi {
  margin-bottom:20px;
}

nav#gNavi ul li,nav#gNavi a{
  width: 33%;
  height: 60px;
  display: inline;
  text-align: center;
  background: url(../img/common/gnavi_bg_sp.png) repeat-x 0 0 transparent;
}

body.first nav#gNavi ul li#gNavi01 {background-position: 0 -60px; }
body.menuprice nav#gNavi ul li#gNavi02 {background-position: 0 -60px; }
body.haircatalog nav#gNavi ul li#gNavi03 {background-position: 0 -60px; }
body.single-haircatalog nav#gNavi ul li#gNavi03 {background-position: 0 -60px; }
body.staff nav#gNavi ul li#gNavi04 {background-position: 0 -60px; }
body.access nav#gNavi ul li#gNavi05 {background-position: 0 -60px; }
body.category-item nav#gNavi ul li#gNavi06 {background-position: 0 -60px; }
body.usces-cart nav#gNavi ul li#gNavi06 {background-position: 0 -60px; }

nav#gNavi ul li{
  float: left;
  line-height: 60px;
  text-align: center;
  border-right: 1px solid #ccc;
}

nav#gNavi ul li img{
  vertical-align: middle;
  height: 20px;
}

/*// footerNavigation //*/
nav#fNavi {
  display: none;
}


  /*****  contents  *****/
#contents{
  width: 90%;
  margin: 0 auto;
}
 

#contents h3{
  width: 100%;
  border-bottom: 2px #BFA965 solid;
  box-shadow:0px 2px 0px #fff;
  padding: 0 0 6px 2px;
  margin-bottom: 20px;
  height: 16px;
}

#contents h3 img{
  height: 10px;
}

#contents h4{
  width: 100%;
  background: url(../img/common/h4_title_bg.png) no-repeat 0 0;
  padding: 16px 0 0 0;
  font-weight: bold;
  font-size: 0.9em;
  color: #724610;
  text-shadow: 1px 1px 0px #fff,-1px -1px 0 #fff,1px 1px 1px #999;
  margin-bottom:10px;
}

#contents h5{
  font-weight: bold;
  color: #724610;
  font-size: 0.8em;
}

#contents h6{
  font-weight: bold;
  font-size: 0.7em;
}

#contents section{
  width: 100%;
  margin-bottom:10px;
  overflow: hidden;
  clear: both;
}

#contents p {
  margin-bottom:1em;
}

#contents p.leftImg,
#contents p.rightImg{
  text-align: center;
}

#contents table{
  width: 100%;
  border-collapse:separate;
  clear: both;
}

#contents table th{
  background: #EEEDE4;
  color: #3F0C00;
  font-weight: bold;
}

#contents table td{
  background: #F6F5EF;
}

#contents table th,
#contents table td{
  padding: 5px 10px;
  border-top:1px solid #fff;
  border-left:1px solid #fff;
  box-shadow: inset 1px 1px 1px #eee;
  text-align: left;
  font-size: 0.75em;
}

#contents table th.row,
#contents table td.row{
  width: 33%;
}

#contents table th.row{
  background: #D3D2CA;
}

#contents table th.col{
  width: 70%;
}
#contents table td.col{
  width: 30%;
}

#contents dl {
  width: 100%;
  overflow: hidden;
  font-size: 0.75em;
}

#contents dt{
  clear: left;
  float: left;
  width: 20%;
  margin-top:0.75em;
  font-weight: bold;
  color: #724610;
}

#contents dd{
  width: 80%;
  margin-top:0.75em;
  padding-left:20%;
  padding-bottom:0.75em;
  border-bottom: 1px solid #e4e4e4;
  box-shadow: 0 2px 0 #F6F5EF;
}

#contents dd:last-child{
  border-bottom: none;
}


/*// bannerLinks //*/
aside#sideBanner{margin-bottom:20px;}

aside#sideBanner ul li{
  margin-bottom: 10px;
  margin-right: 10px;
  width: 48%;
  float: left;
}

aside#sideBanner ul li:nth-child(even){
  margin-right: 0;
}

aside#sideBanner ul li img{
  width: 100%;
}

aside#reserveBtn{margin-bottom:20px;}
aside#reserveBtn ul > li a img{width: 100%;height: auto;}

div#sideMovie{margin-bottom:20px;}
  div#sideMovie > ul > li {margin-bottom:1em;}
  div#sideMovie > ul > li iframe {width: 100%;height: auto;}

/*--------------------------------
///////////////////////////////////////////
////////// forPC[min-width481px] //////////
///////////////////////////////////////////
--------------------------------*/
@media only screen and (min-width:481px){
/*--------------------------------
//////////  baseStyles  //////////
--------------------------------*/
/*****  contentsSettings  *****/
/*// contentsCentered //*/

  body{
    min-width: 980px;
  }

  #header header,
  nav#gNavi ul,
  #contents{
    width: 940px;
    margin-left: auto;
    margin-right: auto;
  }
  
  footer{
    width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .btn{
      width:218px;
  }

  /*// sideBarDefault //*/
  
  #sideBnCoupon span.overlay{
    display: block;
  }

/*--------------------------------
//////////  moduleStyles  //////////
--------------------------------*/
  /*****  cssStickyFooter  *****/
  
  html, body {height: 100%;}
  
  #wrap {min-height: 100%;}
  
  .ie7 #wrap {
    display: table;height: 100%;
  }
  
  #main {
    overflow:hidden;
    padding-bottom: 90px;}  /* must be same height as the footer */
  
  footer {
    position: relative;
    margin-top: -90px; /* negative value of footer height */
    height: 90px;
    clear:both;} 
  
  /*Opera Fix*/
  body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px;/
  }
  
  /* And on your html page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others);
  
  <!--[if !IE 7]>
    <style type="text/css">
      #wrap {display:table;height:100%}
    </style>
  <![endif]-->
  */
  
  
  
  /* reference URL [http://www.cssstickyfooter.com/using-sticky-footer-code.html] */

/*****  colorBox  *****/

  #cboxTitle {
    display: block !important;
  }


/*--------------------------------
//////////  layoutStyles  //////////
--------------------------------*/

  #header{
    height: 100%;
  }
  
  header {
    height:60px;
    position:relative;
    overflow: hidden;
    margin-bottom:0;
  }
  
  header h1{
    position:absolute;
    top:16px;
    left:15px;
  }
  
  header h2{
    position: absolute;
    top:37px;
    left:166px;
    font-size: 0.85em;
  }
  
  header p#tel {
    width: 358px;
    height: 57px;
    position: absolute;
    top: 0;
    right: 0;
    margin-top:0;
  }
  
  header p#tel img{
    width: 100%;
  }
  
  /*****  footer  *****/
  /*
  footer div  #toPageTop {
    position: absolute;
  }
  */
  
  footer div#copyright {
    margin: 0px auto;
  }
  
  /*****  navigation  *****/
  /*// globalNavigation //*/
  nav#gNavi {
    height:60px;
    background: url(../img/common/gnavi_wrap_bg.png) no-repeat center -60px;
  }
  
  nav#gNavi ul{
    height:60px;
    width: 942px;
  }
  
  nav#gNavi ul li,nav#gNavi a{
    width: 155px;
    display: block;
    padding:0 1px;
    background: none;
  }
  
  nav#gNavi ul li{
    border-right: none;
  }
  
  nav#gNavi ul li img{
    /margin-top:20px;
    height: 24px;
  }
  
  nav#gNavi ul li a,nav#gNavi ul li a:hover{
    background: url(../img/common/gnavi_bg.png) no-repeat;
  }
  
  nav#gNavi ul li#gNavi01 a{background-position: -52px 0;}
  nav#gNavi ul li#gNavi01 a:hover,
  body.first nav#gNavi ul li#gNavi01 a{background-position: -52px -60px; }
  
  nav#gNavi ul li#gNavi02 a{background-position: -207px 0;}
  nav#gNavi ul li#gNavi02 a:hover,
  body.menuprice nav#gNavi ul li#gNavi02 a{background-position: -207px -60px; }
  
  nav#gNavi ul li#gNavi03 a{background-position: -364px 0;}
  nav#gNavi ul li#gNavi03 a:hover,
  body.haircatalog nav#gNavi ul li#gNavi03 a{background-position: -364px -60px; }
  body.single-haircatalog nav#gNavi ul li#gNavi03 a{background-position: -364px -60px; }
  
  nav#gNavi ul li#gNavi04 a{background-position: -521px 0;}
  nav#gNavi ul li#gNavi04 a:hover,
  body.staff nav#gNavi ul li#gNavi04 a{background-position: -521px -60px; }
  
  nav#gNavi ul li#gNavi05 a{background-position: -678px 0;}
  nav#gNavi ul li#gNavi05 a:hover,
  body.access nav#gNavi ul li#gNavi05 a{background-position: -678px -60px; }
  nav#gNavi ul li#gNavi06 a{background-position: -836px 0;}
  nav#gNavi ul li#gNavi06 a:hover,
  body.category-item nav#gNavi ul li#gNavi06 a{background-position: -836px -60px; }
  body.usces-cart nav#gNavi ul li#gNavi06 a{background-position: -836px -60px; }
  
  
  /*// footerNavigation //*/
  nav#fNavi {
    height:30px;
    display: block;
  }
  
  nav#fNavi ul{
    height:16px;
    margin:40px auto 0;
  }
  
  nav#fNavi ul li,nav#fNavi a{
    display: block;
  }
  
  nav#fNavi ul li{
    margin-right: 5px;
    line-height: 10px;
    float: left;
    background: url(../img/common/link_icon.png) no-repeat left center;
    padding-left: 0.8em;
    font-size: 0.9em;
  }
  
  /*****  contents  *****/

  /*// 1 Columns
  #contents div#centerColumn {
    width:960px;
  }
  //*/
  
  /*// 2 Columns //*/
  #contents div#leftColumn ,#contents div#rightColumn {
    float: left;
  }
  
  #contents div#leftColumn {
    width:700px;
  }
  
  #contents div#rightColumn {
    width: 222px;
    margin-left:18px;
  }
  
  
  /*// 3 Columns
  #contents div#leftColumn ,#contents div#centerColumn,#contents div#rightColumn {
    float: left;
  }
  
  #contents div#leftColumn {
    width:190px;
  }
  
  #contents div#centerColumn {
    width:560px;
    margin-left:10px;
  }
  
  #contents div#rightColumn {
    width: 190px;
    margin-left:10px;
  }
  
  #sideBanner,#sideBanner li,#sideBanner li a{
    width:190px;
  }
  
  #sideBanner li,#sideBanner li a{
    height: 30px;
  }
   //*/
  
  #contents{
    margin-bottom:40px;
    margin-left: auto;
    margin-right: auto;
  }
   
  #contents h3 img{
    height: 16px;
  }

  #contents h4{
    font-size: 1.2em;
  }
  
  #contents h5{
    font-size: 1.1em;
  }
  
  #contents h6{
    font-size: 1.0em;
  }
  
  #contents section{
    width: 100%;
    margin-bottom:30px;
    overflow: hidden;
    clear: both;
  }

  #contents p.leftText{
    width: 460px;
    float: left;
    margin-right:20px;
  }
  
  #contents p.rightText{
    width: 460px;
    float: right;
  }
  
  #content p.leftImg{
    width: 220px;
    float: left;
    margin-right:20px;
  }
  
  #contents p.rightImg{
    width: 220px;
    float: right;
  }
  
#contents table th,
#contents table td{
  font-size: 1em;
}


  #contents dl {
  font-size: 1em;
  }
  
  #contents dt{
    width: 10%;
  }
  
  #contents dd{
    width: 80%;
  }
  
  #contents dd:last-child{
    border-bottom: none;
  }
  
  
  /*// bannerLinks //*/
  aside#sideBanner ul li{
    background: #666666;
    margin-right: 0;
    width: 100%;
    float: none;
  }

}