@charset 'utf-8';

/**
 *  Global Style
 *  
 *  @date       31/1/2008
 *  @author     Sotaro KARASAWA <sotaro.k[at]gmail.com>
 *  @package    Society of Japanese Value Engeneering
 *  @version    1.0.0
 */
 
@import url("init.css");
@import url("class.css");

/* Layout
 ----------------------------------- */

div#frame{
text-align: center;
}
div#container{
text-align: left;
margin: 0 auto;
padding: 0;
width: 960px;
}


/* Header
 ----------------------------------- */

#header{
  width:960px;
  height:50px;
  background: url(/images/header_bg.jpg) no-repeat;
  
}

#header h1{
  background: url(/images/header_logo.jpg) no-repeat;
  text-indent:-9999px;
  height:50px;
  width:200px;
  float:left;
  overflow:none;
}

#header h1 a{
  display:block;
  height:50px;
  width:200px;
}

.header_bottom
{
  height:58px;
}
.header1{background: url(/images/header1_bottom.jpg) no-repeat;}
.header2{background: url(/images/header2_bottom.jpg) no-repeat;}
.header3{background: url(/images/header3_bottom.jpg) no-repeat;}
.header4{background: url(/images/header4_bottom.jpg) no-repeat;}
.header5{background: url(/images/header5_bottom.jpg) no-repeat;}
.header6{background: url(/images/header6_bottom.jpg) no-repeat;}
.header7{background: url(/images/header7_bottom.jpg) no-repeat;}
.header9{background: url(/images/header9_bottom.jpg) no-repeat;}
.header10{background: url(/images/header10_bottom.jpg) no-repeat;}
.header11{background: url(/images/header11_bottom.jpg) no-repeat;}
.header12{background: url(/images/header12_bottom.jpg) no-repeat;}
.header13{background: url(/images/header13_bottom.jpg) no-repeat;}
.header14{background: url(/images/header14_bottom.jpg) no-repeat;}
.header15{background: url(/images/header15_bottom.jpg) no-repeat;}


/* Footer 
 ----------------------------------- */

#footer1{
  clear:both;
  color: #000;
  background: url(../images/footer1_bg.jpg) no-repeat;
  height:16px;
  padding:150px 0 0 5px;
}

#footer2{
  clear:both;
  color: #000;
  background: url(../images/footer2_bg.jpg) no-repeat;
  height:16px;
  padding:30px 0 0 5px;
}

.footer_bottom {
  height: 62px;
}
.footer2_bottom {
  height: 60px;
}

.footer_b1{background: url(/images/footer1_bottom.jpg) no-repeat;}
.footer_b2{background: url(/images/footer1_bottom2.jpg) no-repeat;}
.footer_b3{background: url(/images/footer1_bottom3.jpg) no-repeat;}
.footer_b4{background: url(/images/footer1_bottom4.jpg) no-repeat;}
.footer_b5{background: url(/images/footer1_bottom5.jpg) no-repeat;}
.footer_b6{background: url(/images/footer1_bottom6.jpg) no-repeat;}
.footer2_b2{background: url(/images/footer2_bottom2.jpg) no-repeat;}
.footer2_b3{background: url(/images/footer2_bottom3.jpg) no-repeat;}
.footer2_b4{background: url(/images/footer2_bottom4.jpg) no-repeat;}
.footer2_b5{background: url(/images/footer2_bottom5.jpg) no-repeat;}
.footer2_b6{background: url(/images/footer2_bottom6.jpg) no-repeat;}
.footer2_b7{background: url(/images/footer2_bottom7.jpg) no-repeat;}
.footer2_b8{background: url(/images/footer2_bottom8.jpg) no-repeat;}
.footer2_b9{background: url(/images/footer2_bottom9.jpg) no-repeat;}


/* Global Navigation 
 ----------------------------------- */

#global-navi{
}

#global-navi ul{
  float:right;
  margin:0;
  padding:0;
  height:50px;
}

#global-navi ul li{
  float:left;
  list-style:none;
}

#global-navi ul li a{
  text-indent:-9999px;
  display:block;
  height:50px;
  width:100px;
  overflow:hidden;
}

#global-navi ul li.navi-concept a{
  background:url(/images/navi_concept.jpg) no-repeat;
}
#global-navi ul li.navi-information a{
  background:url(/images/navi_information.jpg) no-repeat;
}
#global-navi ul li.navi-menu a{
  background:url(/images/navi_menu.jpg) no-repeat;
}
#global-navi ul li.navi-products a{
  width:101px;
  background:url(/images/navi_products.jpg) no-repeat;
}
#global-navi ul li.navi-salons a{
  background:url(/images/navi_salons.jpg) no-repeat;
}
#global-navi ul li.navi-profile a{
  background:url(/images/navi_profile.jpg) no-repeat;
}
#global-navi ul li.navi-recruit a{
  width:101px;
  background:url(/images/navi_recruit.jpg) no-repeat;
}
#global-navi ul li.navi-sitemap a{
  width:30px;
  background:url(/images/navi_sitemap.jpg) no-repeat;
}

#global-navi ul li.ncurrent a,
#global-navi ul li a:hover{
  background-position:0px -50px;
}

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

.common-side,
.common-side2{
width:170px;
float:left;
}
.common-side{
padding-top:82px;
}
.common-side2{
padding-top:91px;
}

.common-side ul,
.common-side2 ul{
float:right;
}

.common-side ul li,
.common-side2 ul li{
list-style:none;
width:170px;
}
.common-side ul li a,
.common-side2 ul li a{
overflow:hidden;
display:block;
text-indent: -9999px;
width:170px;
height:17px;
}

.common-side2 ul.products-navi li.sncurrent a,
.common-side ul.menu-side-main li.sncurrent a,
.common-side ul.menu-side-sub li.sncurrent a,
.common-side2 ul.products-navi li a:hover,
.common-side ul.menu-side-main li a:hover,
.common-side ul.menu-side-sub li a:hover{
background-position:-170px 0;
}

ul.menu-side-main
{

}
/* menu page */
ul.menu-side-main li.menu-navi-hairmake a{background:url(/images/menu_navi_01.jpg) no-repeat;}
ul.menu-side-main li.menu-navi-care a{background:url(/images/menu_navi_02.jpg) no-repeat;height:28px;}
ul.menu-side-main li.menu-navi-nail a{background:url(/images/menu_navi_03.jpg) no-repeat;}
ul.menu-side-main li.menu-navi-other a{background:url(/images/menu_navi_04.jpg) no-repeat;}

ul.products-navi li.products-haircare a{background:url(/images/products_navi_01.jpg) no-repeat; height:18px;}
ul.products-navi li.products-scalp a{background:url(/images/products_navi_02.jpg) no-repeat;height:18px;}
ul.products-navi li.products-nail a{background:url(/images/products_navi_03.jpg) no-repeat;}

ul.menu-side-sub{
margin-top:17px;
}

/* menu page */
ul.menu-side-sub li.menu-navi-priceinfo a{background:url(/images/menu_navi_05.jpg) no-repeat; height:18px;}
ul.menu-side-sub li.menu-navi-aboutguide a{background:url(/images/menu_navi_06.jpg) no-repeat; height:18px;}

ul.products-sub li.products-haircare_n1 a{background:url(/images/products_navi_01_01.jpg) no-repeat; height:26px;width:72px;}
ul.products-sub li.products-haircare_n2 a{background:url(/images/products_navi_01_02.jpg) no-repeat;height:24px;width:72px;}

ul.products-sub li.sncurrent a,
ul.products-sub li a:hover{
background-position:-74px 0;
}

/* Main 
 ----------------------------------- */
#main{
  height:304px;
  background: url(/images/main_bg.jpg) no-repeat;
}
#main2{
  height:426px;
  background: url(/images/main2_bg.jpg) no-repeat;
  position: relative;
}
#main3{
  height:426px;
  padding-right:44px;
  background: url(/images/main2_bg.jpg) no-repeat;
  position: relative;
}

#main4{
background: url(/images/products_h_bg.jpg) no-repeat;
height:304px;
padding-right:82px;
}

#main5{
background: url(/images/products_care_bg.jpg) no-repeat;
height:304px;
padding-right:82px;
}


/* concept
 ----------------------------------- */
.concept-main{
height:265px;
float:left;
padding-top: 39px;
padding-left:231px;
width:415px;
background: url(/images/concept_bg.jpg) right top no-repeat;
}

.concept-main h2{
line-height:100%;
margin:5px 0;
}

.concept-right{
float:right;
width:256px;
padding-right:40px;
}

.concept-p{
clear:both;
width:355px;
padding:0;
margin:5px auto;
}

/* menu page
 ----------------------------------- */

.menu-main1{
float:right;
padding-right:243px;
width:414px;
background: url(/images/menu_bg.jpg) left top no-repeat;
height:426px;
}

.menu-main1 h2{
margin-top:20px;
}

.menu-main1 p{
margin:20px 35px 45px;
}

/* hairmake //
 --*/

.menu-main2{
float:right;
width:746px;
background: url(/images/menu_bg_hairmake.jpg) left top no-repeat;
height:426px;
}

#menu-t1{
position:absolute;
top:-15px;
width:539px;
font-size:10px;
border-right-color:#000;
border-collapse:collapse;
}

#menu-t1-3{
position:absolute;
top:273px;
width:539px;
font-size:10px;
border-right-color:#000;
border-collapse:collapse;
}
#menu-t1-2{
margin-top:30px;
width:540px;
font-size:10px;
border-collapse:collapse;
}

#menu-t2{
width:260px;
border-collapse:collapse;
}
#menu-t4{
width:263px;
height:426px;
border-collapse:collapse;
}

#menu-t5{
margin-right:1px;
width:262px;
height:426px;
border-collapse:collapse;

}


#menu-t3{
margin-top:20px;
width:515px;
border-collapse:collapse;
}



#menu-t1 th{
color:#000;
width:80px;
padding:3px;
font-size:9px;
text-align:center;
}


#menu-t5 td,
#menu-t4 td,
#menu-t1 td,
#menu-t1-2 td,
#menu-t1-3 td,
#menu-t2 td,
#menu-t3 td{
text-align:center;
padding:4px 0;
border:none;
border-collapse:collapse;

border-left:solid 3px #000;
border-right:solid 3px #000;

/*
border-left-width: 3px;
border-right-width: 3px;
*/
border-color:none;
vertical-align:top;
}
#menu-t2 td,
#menu-t4 td{
border-right-color:#1a1a1a;
}
#menu-t1-3 tr.tbodyr td{
border-right-color:#000;
}

#menu-t1-3 tr td.tbodyrg{
border-right-color:#000;
}
#menu-t5 td,
#menu-t4 td{
padding: 3px 0;
}
#menu-t3 td.tbody{
text-align:left;
padding-left: 25px;
}
#menu-t3 td.tbody2{
text-align:left;
border: none;
padding-left: 25px;
}
#menu-t5 td.tbody,
#menu-t4 td.tbody{
width:88px;
}

#menu-t5 td,
#menu-t4 td,
#menu-t1-2 td,
#menu-t1 td{
background:#302f2e;
}

#menu-t1-3 td.thead,
#menu-t1-2 td.thead,
#menu-t1 td.thead
{
text-align:right; width:155px;padding-right:4px; border-left:none; background:none;
border-color:#000;
}
#menu-t1-3 td.thead{
width:166px;
}

#menu-t1  td.thead-space
{padding-top:40px;}

#menu-t5  td.thead-space,
#menu-t4  td.thead-space
{padding-top:20px;}

#menu-t5 td.thead,
#menu-t4 td.thead
{text-align:right; width:164px;padding-right:4px; border-left:none; background:none;
border-right:solid 3px #000;
}
#menu-t2 td.thead
{text-align:right; width:166px;padding-right:4px; border-left:none; background:none;
border-right:solid 3px #000;
}

#menu-t5 td.thead{
border-right:solid 3px #1a1a1a;
}

#menu-t3 td.thead
{text-align:right; width:166px;padding-right:4px; border-left:none; background:none;
border-right:solid 3px #000;
}


#menu-t1 tr td.nothl{
background:none;
}
#menu-t5 tr.highlight td,
#menu-t4 tr.highlight td,
#menu-t2 tr.highlight td,
#menu-t1-3 tr.highlight td,
#menu-t1 tr.highlight td{
background:#3d3d3d;
}



.menu-center{
float:left;
width:537px;
padding-right:26px;
}

.menu-mouse{
overflow:hidden;
float:right;
margin-top:15px;
height:391px;
width:163px;
padding:10px;
background: url(/images/menu_hairmake_mousebg.jpg) no-repeat;
}

.menu-hl{
line-height:100%;
display:none;
}
.menu-hl p{
font-size:9px;
line-height:140%;
}
.menu-hl h3{
font-size:9px;
font-weight: normal;
margin-bottom:5px;
}

/* care
 --*/
.main-center-div{
padding:5px 0px 5px 173px;
}

.main-center-div p{
margin: 5px 25px;
}

/* priceinfo
 --*/
.menu-main3{
float:right;
padding: 0 104px 0 0px;
margin-left: 38px;
height:426px;
width: 604px;
background: url(/images/menu_bg_priceinfo.jpg) left top no-repeat;
}

.menu-priceinfo{
width: 239px;
height:186px;
padding: 20px 30px 0;
}

.menu-priceinfo h2{
font-size:10px;
font-weight:normal;
margin-bottom:20px;
}

.priceinfo-bottom{
margin-top:13px;
}



/* info
 ----------------------------------- */

.info-left{
float:left;
width: 782px;
height: 304px;
}


#info-left-main{
float:right;
width:403px;
padding: 20px;
height: 264px;
background: url(/images/info_bg.jpg) no-repeat;
}

#info-left-main h2{
color:#dec139;
font-size:12px;
margin-bottom: 10px;
}

#info-left-main p{

}


.info-left-photo{
float:left;
width:281px;
padding: 10px 20px 0 38px;
}


.info-side{
float:right;
padding: 15px;
width:148px;
}

.info-side ul li{
list-style: none;
background: url(/images/list.jpg) 0 5px no-repeat;
padding-left: 10px;
}


/* products
 ----------------------------------- */

.products-main
{
float:right;
width:592px;
}
.products-main2
{
float:right;
width:470px;
}

.products-main2 h2,
.products-main h2{
padding-top:20px;
padding-left:20px;
font-size:11px;
}
.products-main p{
padding-left:20px;
}
.products-main2 p{
padding:0 20px;
}

.products-side{
float:left;
width:285px;
}

.products-p2-side{
float:left;
width:408px;
}

.products-side2{
float:right;
padding-top:128px;
width:115px;
}
.products-side3{
float:right;
padding-top:41px;
width:228px;
}


/* products navi
--*/

ul.products-sub{
margin-left:20px;
width: 74px;
}

ul.products-sub li{
width: 74px;
list-style:none;
}

ul.products-sub li a{
display:block;
overflow:hidden;
height:26px;
text-indent:-9999px;
}
ul.products-sub li.products-haircare a{background: url(/images/products_navi_01_01.jpg) no-repeat;}
ul.products-sub li.products-scalp a{background: url(/images/products_navi_01_02.jpg) no-repeat;}

ul.products-sub li.sncurrent a,
ul.products-sub li a:hover{
background-position: -74px 0;
}

#products-main-scroll{
width:572px;
height:238px;
padding-left:20px;
}

#products-main-scroll2{
width:470px;
height:238px;
margin-top:20px;
}

#products-main-scroll img.ileft{
margin:0 10px 10px 0;
}

#products-main-scroll img.iright{
margin:0 20px 10px 10px;
}

#products-main-scroll p{
padding:0 20px 5px 0;
}

#products-main-scroll h3{
font-size:10px;
padding:0 0 5px 0;
color:#dec139
}


/* salons
 ----------------------------------- */

/* navi */


.salons-side-maps{
}

.salons-side2{
float:right;
width:97px;
margin-right:30px;
padding-top:194px;
}

.salons-navi{
margin-top:15px;
}
.salons-navi2{
margin-top:18px;
}

.salons-side2 ul li,
.salons-side-maps ul li{
text-indent: -9999px;
list-style:none;
}
.salons-side2 ul li a,
.salons-side-maps ul li a{
display:block;
overflow:hidden;
}

.common-side2 ul li.sncurrent a,
.common-side2 ul li a:hover{
background-position: -170px 0;
}

ul.salons-navi-sub li.sncurrent a,
ul.salons-navi-sub li a:hover{
background-position:-97px 0;
}
ul.salons-navi-sub li{
width:97px;
}


.salons-navi li.salons-honten a  {background: url(/images/salons_navi_01.jpg) no-repeat; height: 17px;}
.salons-navi li.salons-shimo a   {background: url(/images/salons_navi_02.jpg) no-repeat; height: 18px;}
.salons-navi li.salons-studio a  {background: url(/images/salons_navi_03.jpg) no-repeat; height: 17px;}
.salons-navi li.salons-offices a {background: url(/images/salons_navi_04.jpg) no-repeat; height: 16px;}
.salons-navi2 li.salons-maps a    {background: url(/images/salons_navi_05.jpg) no-repeat; height: 19px;}
.salons-navi-sub li.salons-maps-honten a{background: url(/images/salons_navi_05_01.jpg) no-repeat; height: 29px;}
.salons-navi-sub li.salons-maps-shimo a{background: url(/images/salons_navi_05_02.jpg) no-repeat; height: 18px;}

/* main */
.salons-main{
float:right;
width:790px;
}

.salons-main-left{
float:left;
}
.salons-main-right{
float:right;
width:401px;
height:426px;
margin:0;
padding:0;
overflow:hidden;
}

.salons-main-right object,
.salons-main-right embed{
width:401px;
height:426px;
margin:0;
padding:0;
}

.salons-main .salons-main-left{
padding-left:20px;
width: 369px;
height: 426px;
background: url(/images/salons_bg.jpg) right top no-repeat;
}

.salons-main .salons-main-left2{
padding-left:110px;
width: 369px;
height: 426px;
background: url(/images/salons_studio_bg.jpg) right top no-repeat;
}

.salons-main .salons-main-left3{
padding-left:30px;
width: 641px;
height: 426px;
background: url(/images/salons_offices_bg.jpg) right top no-repeat;
}

.salons-main-left3 table{
border-collapse: collapse;
}

.salons-main-left3 table .thead{
width: 47px;
}

.salons-main-left3 table th{
font-weight: normal;
text-align:right;
}

.salons-main-left3 table .th2{
padding: 5px 4px;

}

.salons-main-left3 table .td2{
border-left: solid 10px #000000;
}

.salons-main-left3 table td{
padding: 5px 20px;

}



.salons-main .salons-main-right{
}

.salons-main-left2 h2{
margin-left: 97px;
}
.salons-main-left2 p{
margin-left: 97px;
width: 235px;
padding: 15px;
}

.salons-main-left h2{
margin-left: 97px;
}
.salons-main-left2 table,
.salons-main-left table{
width: 369px;
}
.salons-main-left2 table th,
.salons-main-left table th{
font-weight: normal;
text-align:right;
padding: 5px 4px;
width: 84px;
}

.salons-main-left2 table td,
.salons-main-left table td{
padding: 5px 20px;
}

.salons-main-left table td dt{
float:left;
}

.salons-main-left table td dd{
margin-left: 60px;
line-height:130%;
padding-bottom:5px;
}


.salons-main2{
float:right;
width:647px;
height: 426px;
background: url(/images/salons_map_bg.jpg) left top no-repeat;
}


.salons-main2 .salons-main-left p{
width: 460px;
margin-left: 20px;
margin-bottom:5px;
}

#map{
}

/* profile
 ----------------------------------- */

#profile-main{
height:264px;
}


.profile-left{
padding-left:189px;
float:left;
width:468px;
}

.profile-left h2{
height: 40px;
}

.profile-dl{
width:400px;
margin: 0 auto;
}

.profile-dl dt{
float:left;
width: 40px;
text-align:right;
}
.profile-dl dd{
margin-left: 50px;
}



/* recruit
 ----------------------------------- */
/* sitemap
 ----------------------------------- */
.sitemap-left h2{
font-size:11px;
width:187px;
text-align:right;
font-weight:normal;
}
.sitemap-main{
background: url(/images/sitemap_bg.jpg) no-repeat;
height:304px;
width:860px;
padding-left:100px;
}

.sitemap-left{
float:left;
width:657px;
}

.sitemap-right{
float:right;
width:153px;
padding:10px 30px 10px 20px;
}

.sitemap-left table{
width:657px;
border-collapse: collapse;
}

.sitemap-left table tr th{
width:172px;
padding: 4px 5px;
padding-right:15px;
text-align:right;
font-weight:normal;
}

.sitemap-left table tr td{
padding: 4px 5px;
padding-left:20px;
line-height: 150%;
border-width:3px;
}

.sitemap-right dl dt{
font-size:12px;
}
.sitemap-right dl dd{

}

dl.reqruit-dl dt{
font-size:10px;
background: url(/images/list.jpg) left 5px no-repeat;
}
dl.reqruit-dl dt,
dl.reqruit-dl dd{
padding-left: 8px;
}