@charset "utf-8";

/* -----------------------------------------------------------
CSS Information

 File name:      menu.css
 Update:         2009.09.16
 Style Info:     サロンメニュー案内ページ設定
----------------------------------------------------------- */

/* -----------------------------------------------------------
　　ページ背景設定
----------------------------------------------------------- */
.bg {
 background: #FFF url(../../salonpage/menu/img/bg.jpg) no-repeat center top;
}
.bg-iris {
 background: #FFF url(../../salonpage/menu/img/bg_iris.jpg) no-repeat center top;
}
.bg-murier {
 background: #FFF url(../../salonpage/menu/img/bg_murier.jpg) no-repeat center top;
}
.bg-puri {
 background: #FFF url(../../salonpage/menu/img/bg_puri.jpg) no-repeat center top;
}
.bg-hyd {
 background: #FFF url(../../salonpage/menu/img/bg_framboise.jpg) no-repeat center top;
}
.bg-apa {
 background: #FFF url(../../salonpage/menu/img/bg_azulene.jpg) no-repeat center top;
}

/* -----------------------------------------------------------
　　コンテンツ背景設定
----------------------------------------------------------- */
.menu-right-intense, 
.menu-right-drain, 
.menu-right-anti, 
.menu-right-phyto, 
.menu-right-puri, 
.menu-right-hyd, 
.menu-right-apa 
{
 float: right;
 padding: 50px 29px 15px;
 width: 640px;
 border: 1px solid #CCC;
}
.menu-right-intense {
 background: #FFF url(../../salonpage/menu/img/bg_cont_intense.jpg) no-repeat left top;
}
.menu-right-drain {
 background: #FFF url(../../salonpage/menu/img/bg_cont_drain.jpg) no-repeat left top;
}
.menu-right-anti {
 background: #FFF url(../../salonpage/menu/img/bg_cont_anti.jpg) no-repeat left top;
}
.menu-right-phyto {
 background: #FFF url(../../salonpage/menu/img/bg_cont_phyto.jpg) no-repeat left top;
}
.menu-right-puri {
 background: #FFF url(../../salonpage/menu/img/bg_cont_puri.jpg) no-repeat left top;
}
.menu-right-hyd {
 background: #FFF url(../../salonpage/menu/img/bg_cont_hyd.jpg) no-repeat left top;
}
.menu-right-apa {
 background: #FFF url(../../salonpage/menu/img/bg_cont_apa.jpg) no-repeat left top;
}

/* -----------------------------------------------------------
　　各カラー設定
----------------------------------------------------------- */
.intense-color {
 color: #0E1E7D;
}
.drain-color {
 color: #A00026;
}
.anti-color {
 color: #857C7A;
}
.phyto-color {
 color: #34ADA0;
}
.puri-color {
 color: #F7C436;
}
.hyd-color {
 color: #F88EC5;
}
.apa-color {
 color: #98BCDA;
}

/* -----------------------------------------------------------
　　コンテンツ共通設定
----------------------------------------------------------- */
.menu-wrap {
 margin-top: 20px;
 width: 900px;
}
.menu-left {
 float: left;
 width: 180px;
}
.menu-right {
 float: right;
 padding: 50px 29px 15px;
 width: 640px;
 background-color: #FFF;
 border: 1px solid #CCC;
}

.menu-spec {
 margin-top: 15px;
 padding-top: 10px;
 width: 400px;
 background: url(../../salonpage/menu/img/bg_kadomaru_top.gif) no-repeat left top;
}
.menu-spec-end {
 padding-bottom: 10px;
 width: 400px;
 background: url(../../salonpage/menu/img/bg_kadomaru_end.gif) no-repeat left bottom;
}
.menu-spec-middle {
 padding: 5px 15px;
 width: 370px;
 background: url(../../salonpage/menu/img/bg_kadomaru_middle.gif) repeat-y left top;
}
.menu-spec-left {
 float: left;
 width: 195px;
}
.menu-spec-right {
 float: right;
 width: 170px;
}
.box-effect {
 padding: 5px;
 background-color: #DBDDEC;
 color: #0E1E7D;
}
.left-b-line {
 border-left: 1px solid #0E1E7D;
}

h4 {
 margin: 20px 0 10px;
}
h5 {
 margin: 30px 0 15px;
}

.step-maru {
 margin-top: 17px;
}
.step-box {
 margin: 15px;
}
.step-name {
 font-size: 14px;
 color: #0E1E7D;
}

/* -----------------------------------------------------------
　　STEP-BOX設定
----------------------------------------------------------- */
.intense-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_intense_step.jpg) no-repeat left top;
}
.drain-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_drain_step.jpg) no-repeat left top;
}
.anti-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_anti_step.jpg) no-repeat left top;
}
.phyto-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_phyto_step.jpg) no-repeat left top;
}
.puri-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_puri_step.jpg) no-repeat left top;
}
.hyd-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_hyd_step.jpg) no-repeat left top;
}
.apa-step-wrap {
 padding-left: 240px;
 background: url(../../salonpage/menu/img/bg_apa_step.jpg) no-repeat left top;
}

/* -----------------------------------------------------------
　　STEP背景設定
----------------------------------------------------------- */
.intense-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_intense.gif) no-repeat left bottom;
}
.drain-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_drain.gif) no-repeat left bottom;
}
.anti-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_anti.gif) no-repeat left bottom;
}
.phyto-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_phyto.gif) no-repeat left bottom;
}
.puri-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_puri.gif) no-repeat left bottom;
}
.hyd-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_hyd.gif) no-repeat left bottom;
}
.apa-step-box {
 margin-top: 3px;
 background: url(../../salonpage/menu/img/bg_step_apa.gif) no-repeat left bottom;
}

/* -----------------------------------------------------------
　　製品案内設定
----------------------------------------------------------- */
.product-box {
 margin-top: 10px;
 width: 640px;
}
.product-box li {
 display: inline;
 float: left;
 margin-right: 10px;
 width: 120px;
 font-size: 10px;
 text-align: center;
}
.product-box li img {
 margin: 5px 0;
}
.product-box li a, .product-box li a:link, .product-box li a:visited, 
.product-box li a:hover, .product-box li a:active {
 text-decoration: none;
}

/* -----------------------------------------------------------
　　製品案内ColorBox内設定
----------------------------------------------------------- */
.hidden {
 display:none;
}
.products-box {
 padding-bottom: 10px;
 background-color: #FFF;
}
.products-detail-wrap {
 /*padding: 15px 10px 0;*/
 width: 550px;
}
.products-detail-wrap dl {
 width: 550px;
 border-bottom: 1px solid #08204F;
}
.products-detail-wrap dt {
 float: left;
 /*width: 260px;*/
 font-size: 14px;
 font-weight: bold;
 color: #08204F;
}
.products-detail-wrap dd {
 float: right;
 /*width: 260px;*/
 text-align: right;
}

.products-detail-left {
 float: left;
 margin-top: 10px;
 width: 120px;
}
.products-detail-right {
 float: right;
 margin-top: 10px;
 width: 410px;
 text-align: left;
}
.detail-w410-wrap {
 width: 410px;
}
.detail-w410-left {
 float: left;
 margin-top: 5px;
 width: 250px;
}
.detail-w410-right {
 float: right;
 margin-top: 5px;
 width: 150px;
 font-size: 10px;
 color: #08204F;
}
.contour {
 border-right: 1px solid #08204F;
}
.products-detail-box {
 clear: both;
 margin-top: 10px;
 padding: 5px;
 background-color: #E6E8F2;
 font-size: 10px;
}

/* -----------------------------------------------------------
　　サブメニュー設定
----------------------------------------------------------- */
.menu-left ul {
 width: 180px;
 border-top: 1px solid #08204F;
}
.menu-left ul li {
 width: 180px;
 border-bottom: 1px solid #08204F;
}
.menu-left ul li ul {
 border: 0;
}
.menu-left ul li ul li {
 display: block;
 padding: 5px 0 5px 30px;
 width: 150px;
 border-top: 1px dashed #08204F;
 border-bottom: 0;
 background: url(../../products/img/submenu_nestlist.gif) no-repeat 20px center;
}
.menu-left ul li ul li a {
 display: block;
 width: 150px;
}
.menu-left ul li ul li a, 
.menu-left ul li ul li a:link, 
.menu-left ul li ul li a:visited {
 text-decoration: none;
}
.menu-left ul li ul li a:hover, 
.menu-left ul li ul li a:active {
 text-decoration: underline;
}

/* -----------------------------------------------------------
　　ホワイトインテンスメニュー特徴設定
----------------------------------------------------------- */
.chara-item {
 margin-top: 10px;
 font-size: 14px;
 color: #0E1E7D;
}
.chara-item img {
 margin-right: 7px;
 vertical-align: middle;
}
html>body .chara-item img {
 margin-right: 0;
}
.chara-details {
 margin-top: 10px;
}
.bg-darkblue {
background-color:#0E1E7D;
color:#FFFFFF;
}
.box-hara {
background-color:#E6E6E6;
margin-top:15px;
padding:15px;
width:610px;
}
.box-hara-left {
float:left;
width:100px;
}
.box-hara-right {
float:right;
width:500px;
}
.company-name span {
 font-size: 14px;
}
.hara-name {
 font-size: 16px;
 font-weight: bold;
 text-align: right;
}
.hara-name span {
 font-size: 12px;
}

/* -----------------------------------------------------------
　　ドレインメニュー特徴設定
----------------------------------------------------------- */
.chara-item02 {
 margin-top: 10px;
 font-size: 14px;
 color: #A00026;
}
.chara-item02 img {
 margin-right: 7px;
 vertical-align: middle;
}
.chara-details span {
 font-size: 10px;
}
.bio-godhand {
 padding: 15px 15px 15px 90px;
 background: #F7EE5F url(../../salonpage/menu/img/bio_img11.jpg) no-repeat left top;
}