@charset "utf-8";

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

 File name:      base.css
 Adddate:        2010.03.03
 Upddate:        2010.03.05
 Style Info:     化粧品づくりの考え方ページCSSファイル
----------------------------------------------------------- */

/* -----------------------------------------------------------
　　bodyID設定
----------------------------------------------------------- */
#idea-body {
}
#pickup-body {
}

#idea-body {
 background: url(../../img/bg.gif) repeat-x left 98px;
}

/* -----------------------------------------------------------
　　「ごあいさつ」〜「NEO3シリーズとは」レイアウト設定
----------------------------------------------------------- */
#container-idea {
 //background: url(../../img/bg.gif) repeat-x left top;
}
#idea {
 /*width: 968px;*/
 margin: 0 auto;
 text-align: center;
}

/* bgChange.jsで#ideaの背景を切り替える */
.bg01 {
 background: url(../../img/bg01.jpg) no-repeat center top;
}
.bg02 {
 background: url(../../img/bg02.jpg) no-repeat center 35px;
}
.bg03 {
 background: url(../../img/bg03.jpg) no-repeat center 35px;
}


#wrap {
 width: 964px;
 margin: 0 auto;
 padding-right: 4px;
 text-align: left;
}

#ui-tab {
}
/*#fragment-1, #fragment-2, #fragment-3 {
 margin: 0 auto;
 text-align: left;
}*/

.idea-left {
 float: left;
 width: 304px;
 margin-top: -37px;
}
.idea-right {
 float: right;
 width: 660px;
 margin-top: 10px;
 background: url(../../img/bg_right.gif) no-repeat left top #FFF;
 text-align: left;
}

/* -----------------------------------------------------------
　　ローカルメニューエリア設定
----------------------------------------------------------- */
ul#nav {
 position: relative;
 width: 638px;
 margin: 0 auto;
 padding-left: 326px;
 background: url(../../img/bg_tab.jpg) no-repeat left bottom;
}
ul#localmenu02 {
 width: 946px;
 margin: 0 auto 10px;
 padding-left: 22px;
 background: url(../../img/bg_menu2.gif) no-repeat left bottom;
}
ul#nav li, ul#localmenu02 li {
 float: left;
 width: 150px;
 height: 37px;
 padding: 0 2px;
 font-size: 1px;
 line-height: 1px;
}
#bt-pickup {
 position: absolute;
 right: 24px;
 bottom: 0;
}

/* ui.tabs.jsで切り替えるメニュー */
ul#nav li#local01.ui-tabs-selected {
 background: url(../../img/menu_01_on.jpg) no-repeat 2px top;
 text-indent: -9999px;
}

ul#nav li#local02.ui-tabs-selected {
 background: url(../../img/menu_02_on.jpg) no-repeat 2px top;
 text-indent: -9999px;
}

ul#nav li#local03.ui-tabs-selected {
 background: url(../../img/menu_03_on.jpg) no-repeat 2px top;
 text-indent: -9999px;
}
ul#nav li#local04 {
 text-indent: 0;
}


/* -----------------------------------------------------------
　　メインライナーエリア設定
----------------------------------------------------------- */
#idea-body .liner {
 width: 620px;
 margin: 30px 20px 0;
}
#pickup-body .liner {
 width: 656px;
 margin: 30px 20px 0;
}
.liner h3 {
 margin-bottom: 20px;
}
.liner p {
 margin-bottom: 10px;
}
.liner .img-left {
 float: left;
 margin: 0 20px 15px 0;
}
.liner .img-right {
 float: right;
 margin: 0 0 15px 20px;
}

.bt-detail {
 text-align: right;
}
.agg-safe {
 width: 640px;
 height: 126px;
 border-bottom: 1px solid #BBB;
 margin: 20px 0;
 background: url(../../img/bg_agg_safe.jpg) no-repeat left top;
}
#idea-body .agg-safe {
 margin-left: 10px;
}
#pickup-body .agg-safe {
 margin-left: 20px;
}
.agg-safe h3 {
 padding: 33px 10px 0 173px;
}
.agg-safe p {
 padding: 13px 10px 0 173px;
}


/* -----------------------------------------------------------
　　リンクエリア設定
----------------------------------------------------------- */
.link {
 width: 640px;
 height: 83px;
 margin: 20px 0 0 10px;
 background: url(../../img/bg_link.jpg) no-repeat left top;
}
.link-left {
 float: left;
 width: 221px;
 padding: 4px 0 0 4px;
}
ul.link-right {
 float: left;
 width: 263px;
 padding: 8px 0 0 20px;
}
ul.link-right li {
 padding-top: 8px;
}

/* -----------------------------------------------------------
　　aggの機能性設定
----------------------------------------------------------- */
#agg-effect-wrap {
 width: 636px;
 margin: 20px 0 0 10px;
 border: 2px solid #D9D4CB;
}
#agg-effect {
 /*width: 606px*/
 padding: 13px;
 background: url(../../img/bg_agg_effect.gif) repeat-y left bottom;
 border: 2px solid #FFF;
}
.agg-effect-inner {
 width: 606px;
 margin-top: 10px;
 background: url(../../img/bg_agg_effect_inner.gif) no-repeat left bottom;
}
.agg-effect-inner-left, .agg-effect-inner-right {
 width: 298px;
}
.agg-effect-inner-left {
 float: left;
}
.agg-effect-inner-right {
 float: right;
}
.agg-effect-inner-left .inner, .agg-effect-inner-right .inner {
 padding: 10px;
}
.agg-effect-inner .img-right {
 float: right;
 margin-left: 10px;
}

/* -----------------------------------------------------------
　　NEO3シリーズ設定
----------------------------------------------------------- */
#neo3-promice-wrap {
 margin: 20px 0 0 10px;
}
#neo3-promice {
 width: 592px;
 padding: 0 24px 40px;
 background: url(../../img/bg_promise.jpg) no-repeat left bottom;
}
#neo3-promice .inner {
 width: 517px;
 padding: 10px 25px 20px 50px;
 background: url(../../img/bg_promise_inner.gif) no-repeat left bottom;
}

#neo3-effect-wrap {
 width: 640px;
 margin: 20px 0 0 10px;
 background: url(../../img/bg_neo3_effect_middle.gif) repeat-y left top;
}
#neo3-effect {
 width: 615px;
 padding: 1px 12px 20px 13px;
 background: url(../../img/bg_neo3_effect_bottom.gif) no-repeat left bottom;
}
.neo3-effect-inner01 {
 width: 575px;
 padding: 10px 20px;
 background: url(../../img/bg_neo3_effect_01.gif) no-repeat left bottom;
}
.neo3-effect-inner01-left {
 float: left;
 width: 192px
}
.neo3-effect-inner01-right {
 float: right;
 width: 368px;
 font-size: 85%;
}
.neo3-effect-inner01-right-l {
 float: left;
 width: 180px
}
.neo3-effect-inner01-right-r {
 float: right;
 width: 180px
}

.neo3-effect-inner02 {
 width: 615px;
 background: url(../../img/bg_neo3_effect_02.gif) no-repeat left bottom;
 margin-top: 10px;
}
.neo3-effect-inner02 p {
 padding: 10px;
}
.neo3-effect-inner02-left {
 float: left;
 width: 199px;
}
.neo3-effect-inner02-right {
 float: right;
 width: 407px;
}
.neo3-effect-inner02-right-l {
 float: left;
 width: 199px;
}
.neo3-effect-inner02-right-r {
 float: right;
 width: 199px;
}

/* -----------------------------------------------------------
　　商品リストエリア設定
----------------------------------------------------------- */
#pickup-body .prd-list-title {
 margin-top: 10px;
 padding: 10px 0;
 background: url(../../../img/border_dot_h.gif) repeat-x left top;
}
#pickup-body .prd-list-title span.bold {
 padding: 0 25px 0 14px;
 background: url(../../img/icon_greenpo.gif) no-repeat left center;
 color: #006544;
 font-weight: bold;
}
#pickup-body ul.prd-list {
 /*padding-bottom: 20px;*/
}
#pickup-body ul.prd-list li {
 display: inline;
 margin-right: 2px;
}

/* -----------------------------------------------------------
　　成分ピックアップトップページ設定
----------------------------------------------------------- */
#container-pickup {
 background: url(../../img/bg_pickup_container.jpg) repeat-x left top #D0F7DE;
}
#pickup-wrap {
 xwidth: 1240px;
 xmargin: 0 auto;
 background: url(../../img/bg_pickup.jpg) no-repeat center top;
 padding-bottom: 10px;
}
#pickup {
 width: 968px;
 margin: 0 auto;
 text-align: left;
}

#pickup-title-wrap {
 width: 960px;
 margin: 0 4px;
}
#pickup-title {
 float: left;
 width: 202px;
}
ul#nav-pickup {
 float: right;
 width: 638px;
 padding-left: 22px;
 background: url(../../img/bg_menu.gif) no-repeat left bottom;
}
ul#nav-pickup li {
 float: left;
 width: 150px;
 height: 37px;
 padding: 0 2px;
 font-size: 1px;
 line-height: 1px;
}

#pickup-contents {
 width: 960px;
 margin: 0 4px;
}
#pickup-menu {
 width: 960px;
}
ul#pickup-menu-left {
 float: left;
 width: 618px;
}
#pickup-menu-right {
 float: right;
 width: 223px;
}
ul#pickup-menu-left li {
 float: left;
 width: 205px;
 padding-right: 1px;
}

/* -----------------------------------------------------------
　　成分ピックアップ詳細ページ設定
----------------------------------------------------------- */
#pickup-body .pickup h3 {
 margin-bottom: 10px;
}

.plant {
 width: 696px;
 margin-top: 30px;
 padding-bottom: 30px;
 /*background: url(../../../img/border_dot_h.gif) repeat-x left bottom;*/
}
.plant-left {
 float: left;
 width: 144px;
}
.plant-right {
 float: right;
 width: 532px;
}
#pickup-body .plant-right .prd-list-title {
 padding: 7px 0;
}