@charset "utf-8";

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

 File name:      base.css
 Adddate:        2010.03.03
 Upddate:        2010.03.05
 Style Info:     お手入れステップガイドページCSSファイル
----------------------------------------------------------- */

/* -----------------------------------------------------------
　　bodyID設定
----------------------------------------------------------- */
#step-body {
}

/* -----------------------------------------------------------
　　お手入れステップcontainer設定
----------------------------------------------------------- */
#step-container-top, #step-container {
 margin: 0 4px;
 background-color: #FAF8F4;
}
#step-container-top {
 width: 714px;
 padding: 0 7px 10px;
}
#step-container {
 width: 698px;
 padding: 10px 15px;
}

/* -----------------------------------------------------------
　　お手入れステップトップページ設定
----------------------------------------------------------- */
ul.step-list {
 width: 714px;
}
ul.step-list li {
 width: 351px;
 margin-top: 15px;
}
.step-list-left {
 float: left;
}
.step-list-right {
 float: right;
}

/* -----------------------------------------------------------
　　お手入れステップコンテンツページ設定
----------------------------------------------------------- */
/* タイトル設定 */
#step-title {
 width: 698px;
 position: relative;
}
#step-title-bt {
 position: absolute;
 right: 0;
 bottom: 0;
}

/* インデックス設定 */
ul#step-index {
 width: 675px;
 margin: 20px 0;
 padding: 10px 0 10px 23px;
 background-color: #FFF;
}
ul#step-index li {
 display: inline;
 line-height: 27px;
 padding-left: 20px;
 background: url(../../../img/arrow02.gif) no-repeat 7px center;
}
ul#step-index li.top {
 padding-left: 0px;
 background: none;
}

#step-index-total-wrap {
 position: relative;
 width: 698px;
}
.index-pointcare {
 position: absolute;
 top: 37px !important;
 top: 58px;
 left: 175px;
 z-index: 10;
}
.index-specialcare {
 position: absolute;
 top: 37px !important;
 top: 58px;
 left: 358px;
 z-index: 11;
}
ul#step-index-total {
 width: 688px;
 margin: 20px 0 30px;
 padding: 10px 0 20px 5px;
 background-color: #FFF;
}
ul#step-index-total li {
 display: inline;
 line-height: 27px;
 padding-left: 16px;
 background: url(../../../img/arrow02.gif) no-repeat 5px center;
}
ul#step-index-total li.top {
 padding-left: 0px;
 background: none;
}

/* 各ステップエリア設定 */
.step-pre-wrap {
 width: 698px;
 text-align: center;
}
.step-pre {
 width: 470px;
 margin: 0 auto 10px;
 text-align: left;
}
.step-pre-left {
 float: left;
 width: 166px;
}
.step-pre-right {
 float: right;
 width: 294px;
 padding-top: 10px;
}
.step-wrap {
 width: 698px;
 background: url(../../img/bg_step_top.jpg) no-repeat left top;
}
.step {
 width: 650px;
 padding: 20px 24px;
 background: url(../../img/bg_step_bottom.gif) no-repeat left bottom;
}
.step-end {
 background: url(../../img/bg_step_bottom_end.gif) no-repeat left bottom;
}
.step-title02 {
 width: 650px;
 padding-bottom: 5px;
 background: url(../../img/border_title.gif) no-repeat left bottom;
}
.step-title02 img {
 margin-right: 15px;
}
.step-inner {
 width: 650px;
 margin-top: 10px;
 padding-bottom: 15px;
 background: url(../../../img/border_dot_v.gif) repeat-y 490px top;
}
.step-left {
 float: left;
 width: 473px;
 font-size: 93%;
}
.step-left p {
 margin-bottom: 3px;
}
.step-right {
 float: right;
 width: 159px;
 font-size: 85%;
}
.step-right p {
 margin-bottom: 7px;
}
.step-left-l {
 float: left;
 width: 179px;
 text-align: center;
}
.step-left-r {
 float: right;
 width: 286px;
}
.step-right-l {
 float: left;
 width: 59px;
}
.step-right-r {
 float: right;
 width: 100px;
}
.step-point {
 width: 276px;
 margin-top: 10px;
 padding: 5px 5px 2px;
 background-color: #FDF5EA;
}
.step-point-left {
 float: left;
 width: 53px;
}
.step-point-right {
 float: right;
 width: 218px;
}
.prd-title {
 margin-left: 10px;
}
.indent {
 padding-left: 1.5em;
 text-indent: -1.5em;
}

/* セット商品エリア設定 */
.setprd-wrap {
 width: 698px;
 margin-top: 20px;
 background: url(../../img/bg_set_top.jpg) no-repeat left top #F9FEFA;
}
.setprd {
 width: 698px;
 padding-bottom: 15px;
 background: url(../../img/bg_set_bottom.jpg) no-repeat left bottom;
}
.setprd-left {
 float: left;
 margin-right: 40px;
}
.setprd-right {
 float: left;
 width: 310px;
}
.setprd-right p{
 margin-bottom: 7px;
 line-height: 1.3;
}
.setprd-title {
 font-size: 116%;
 font-weight: bold;
 margin-top: 25px;
}
.setprd-item {
 font-size: 85%;
 line-height: 1.2;
}
.price {
 display: inline;
}
.setprice {
 display: inline;
 padding-left: 30px;
 background: url(../../../img/arrow_black.gif) no-repeat 12px center;
 color: #EE0000;
 font-weight: bold;
}
.setprice span {
 font-size: 138.5%;
 padding: 0 4px;
}

/* ローカルメニュー設定 */
#step-menu-wrap {
 width: 632px;
 margin: 20px 0 0 20px;
 padding: 13px;
 background: #FFFEF5;
}
#step-menu-wrap ul {
 margin-top: 10px;
}
#step-menu-wrap ul li {
 float: left;
 width: 150px;
 padding: 0 4px;
}