@charset "utf-8";

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

 File name:      base.css
 Adddate:        2010.03.03
 Upddate:        2011.09.08
 Style Info:     商品紹介ページCSSファイル
----------------------------------------------------------- */

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

/* -----------------------------------------------------------
　　メインイメージ設定
----------------------------------------------------------- */
.main-lineup {
 position: relative;
 z-index: 1;
}

/* -----------------------------------------------------------
　　メイン内バナー設定
----------------------------------------------------------- */
#main-bn {
 position: absolute;
 left: 48px;
 top: 230px;
 z-index: 2;
}
#main-bt-top {
 position: absolute;
 right: 15px;
 top: 15px;
 z-index: 2;
}
#main-bt {
 position: absolute;
 right: 118px;
 bottom: 50px;
 z-index: 3;
}

/* -----------------------------------------------------------
　　商品一覧エリア設定
----------------------------------------------------------- */
.prd-list-wrap {
 width: 696px;
 margin-top: 25px;
 padding: 20px 15px 15px;
 background: url(../../img/bg_prdlist_top.gif) no-repeat left top #F2FFF2;
}
.prd-list {
 width: 696px;
 margin-top: 20px;
}
.prd-list-left, .prd-list-left02 {
 float: left;
 width: 338px;
 margin-right: 10px;
}
.prd-list-right, .prd-list-right02 {
 float: right;
 width: 338px;
 padding-left: 10px;
 background: url(../../img/border_lineup.jpg) no-repeat left center;
}
.prd-list-left, .prd-list-right {
 position: relative;
 min-height: 159px;
 height: auto !important;
 height: 159px;
}
.prd-list-left02, .prd-list-right02 {
 position: relative;
 min-height: 199px;
 height: auto !important;
 height: 199px;
}
.prd-list-left02 h4, .prd-list-right02 h4 {
 padding-bottom: 20px;
}
.prd-list .prd-img {
 float: left;
 margin-right: 10px;
}
.prd-list .prd-text {
 xmargin-left: 133px;
}
.prd-list p.bt-detail {
 position: absolute;
 bottom: 0;
 right: 0;
}

/* トライアルセット */
.prd-list-trial {
 width: 636px;
 margin-top: 20px;
 padding: 0 30px 10px;
}
.prd-list-trial-left {
 float: left;
 width: 259px;
}
.prd-list-trial-right {
 float: right;
 width: 337px;
}
.bt-detail-trial {
 text-align: right;
 margin-top: 20px;
}

/* gel */
.prd-list-gel-wrap {
 width: 670px;
 margin: 30px 13px;
 background: url(../../img/bg_pointcare_bottom.gif) no-repeat left bottom;
}
.prd-list-gel {
 width: 634px;
 padding: 16px 20px 16px 16px;
 background: url(../../img/bg_pointcare_top.gif) no-repeat left top;
}
.prd-list-gel-wrap h4 {
 margin-bottom: 20px;
}
.prd-list-gel-left {
 float: left;
 width: 265px;
 text-align: center;
}
.prd-list-gel-right {
 float: right;
 width: 317px;
}

/* -----------------------------------------------------------
　　商品詳細ページ設定
----------------------------------------------------------- */
#prd-liner {
 width: 726px;
}
#prd-liner-left {
 float: left;
 width: 546px;
}
#prd-liner-right {
 float: right;
 width: 170px;
}
#prd-title {
 width: 546px;
 padding-bottom: 15px;
}
#prd-title h3, #prd-title p.bt {
 display: inline;
}
#prd-title p.bt {
 margin-left: 15px;
}

#ingredient-wrap {
 width: 726px;
 background: url(../../img/bg_ingredient_top.gif) no-repeat left top;
}
#ingredient {
 position: relative;
 width: 686px;
 padding: 10px 20px 15px;
 background: url(../../img/bg_ingredient_bottom.gif) no-repeat left bottom;
}
#ingredient h4 {
 padding-bottom: 5px;
}
#ingredient .bt {
 position: absolute;
 top: 8px;
 right: 20px;
}
#ingredient-inner {
 width: 659px;
 /*margin-top: 5px;*/
 padding: 5px 5px 5px 20px;
 border: 1px solid #CEECDA;
 background: #FFF;
}
#ingredient-inner ul, .ingredient-inner-nest {
 float: left;
 width: 422px;
 margin-top: 5px;
}
#ingredient-inner ul li, ul.liner li {
 padding: 5px 0 0 13px;
 background: url(../../../img/icon_ingredient_list.gif) no-repeat left 10px;
}
#ingredient-inner .prd {
 float: right;
 width: 237px;
}

#step-wrap {
 width: 726px;
 margin-top: 20px;
 background: url(../../img/bg_step_top.jpg) no-repeat left top;
}
#step {
 width: 686px;
 padding: 15px 20px 20px;
 background: url(../../img/bg_step_bottom.jpg) no-repeat left bottom;
}
#step h4 {
 padding-bottom: 5px;
}
#step-inner {
 width: 644px;
 padding: 20px;
 border: 1px solid #E6E1D5;
 background: #FFF;
}
#step-inner .step {
 width: 644px
}
#step-inner .step-left {
 float: left;
 width: 440px;
 margin-top: 10px;
}
#step-inner .step ul.steptext {
}
#step-inner .step ul.steptext li {
 margin-top: 5px;
 xpadding-bottom: 10px;
 padding: 0 0 10px 25px;
 text-indent: -25px;
 background: url(../../img/arrow_orange.gif) no-repeat center bottom;
}
#step-inner .step ul.steptext li.end {
 padding-bottom: 0;
 background: none;
}
#step-inner .step ul.steptext li img {
 padding-right: 5px;
 vertical-align: middle;
}
#step-inner .step .illust {
 float: right;
 width: 177px;
 padding-left: 14px;
 text-align: center;
 background: url(../../../img/border_dot_v.gif) repeat-y left top;
}
.step-point {
 margin-top: 10px;
 width: 644px;
}
.step-point02 {
 margin-top: 10px;
 width: 440px;
}
.step-point img,
.step-point02 img {
 float: left;
 width: 54px;
}
.step-point ul,
.step-point02 ul {
 margin-left: 70px;
 padding-top: 10px;
}
.step-point ul li,
.step-point02 ul li {
 padding-left: 16px;
 background: url(../../img/icon_star.gif) no-repeat left 2px;
}


#link-wrap {
 width: 582px;
 margin-left: 72px;
 text-align: center;
}
#link-title {
 margin-top: 30px;
}
#link {
 width: 546px;
 padding: 18px;
 background: url(../../img/bg_link.gif) no-repeat left top;
}
#link .link-left {
 float: left;
 width: 268px;
}
#link .link-right {
 float: right;
 width: 268px;
}

#trial-step-wrap {
 width: 726px;
 padding-bottom: 16px;
 background: url(../../img/trial_step_bg.jpg) no-repeat left top;
}
#trial-step-wrap .step-title {
 margin-left: 15px;
}
ul#trial-step {
 width: 696;
 margin: 0 14px;
 text-align: center;
}
ul#trial-step li {
 float: left;
 width: 116px;
}
#trial-bt-wrap {
 margin: 0 auto;
 padding-top: 21px;
 width: 412px;
}
#trial-bt-wrap .prd {
 float: left;
 width: 203px;
}
#trial-bt-wrap .bt {
 float: right;
 width: 189px;
}

/* UVプロテクトベースページ */
#aboutuv-wrap {
 width: 726px;
 margin-top: 20px;
 background: url(../../img/bg_aboutuv_top.gif) no-repeat top left;
}
#aboutuv {
 width: 686px;
 padding: 10px 20px 20px;
 background: url(../../img/bg_aboutuv_bottom.gif) no-repeat bottom left;
}
#aboutuv h4 {
 padding-bottom: 10px;
}
#aboutuv-inner {
 width: 672px;
 padding: 6px;
 border: solid 1px #B0CFE9;
 background-color: #FFF;
}
#aboutuv-inner p {
 padding: 3px 10px 8px;
}


/* リバイタライジングジェルページ */
#aboutgel-wrap {
 width: 726px;
 margin: 10px 0 20px;
 background: url(../../img/bg_aboutgel_bottom.jpg) no-repeat left bottom;
}
#aboutgel {
 width: 686px;
 padding: 20px;
 background: url(../../img/bg_aboutgel_top.jpg) no-repeat left top;
}
#aboutgel-left {
 float: left;
 width: 428px;
}
#aboutgel-right {
 float: right;
 width: 238px;
}