@charset "Shift_JIS";

/*-------------------------------------------------------------------
 *
 * File Name   : products.css
 *
-------------------------------------------------------------------*/

#products { background:url(../../common/images/bg_01.gif) repeat-x left top; }
#products #wrapper { position:relative; width:100%; min-width:940px; margin:0 auto; padding:0; text-align:left; }

#products #contents { position:relative; width:100%; width:940px; height:auto !important; margin:0 auto; padding:0; background:none; }
#products.top #wrapper #contents a:hover img { opacity:0.8; filter:alpha(opacity=80); }

#products #wrapper .foot { background-color:#fff; }
#products .foot #footer { padding-top:20px; }

#products .pagetop { width:940px; margin:0 auto; padding:15px 0 0 0; font-size:84%; text-align:right; }

#products #contents .head { position:relative; margin-top:15px; text-align:center; }
#products #contents .head .ttl { background:url(../images/head_bg_01.gif) no-repeat center bottom; } 
#products #contents .head .nav { margin-top:15px; }
#products #contents .head .txt { margin-top:20px; }

#products .note01 { padding-left:1.25em; text-indent:-1.25em; font-size:12px; }

#products .list01 > li { display:table; }
#products .list01 > li:before { display:table-cell; content:"�E"; padding-right:0.3em; vertical-align:top; }
/*#products .list01 li span { display:table-cell; vertical-align:top; }
#products .list01 li span:first-child { padding-right:0.5em; white-space:nowrap; }*/


/*===================================================================
	top
===================================================================*/
#products.top .sns { position:absolute; bottom:15px; width:940px; height:23px; padding-right:0; overflow:hidden; }
#products.top .sns li { float:right; padding-right:5px; line-height:1; }
#products.top .sns li.facebook { padding-right:0; }

#products #contents .item { width:745px; margin:30px auto 0 auto; overflow:hidden; }
#products #contents .item ul.pdtList01 { width:750px; margin-left:-5px; }
#products #contents .item ul.pdtList01 li { float:left; padding:0 0 5px 5px; }

#products #contents .bnr { margin-top:30px; text-align:center; }
#products #contents .bnr li { display:inline-block; vertical-align:top; padding:0 15px; }

#products #contents .appeal { width:745px; margin:30px auto 0 auto; }
#products #contents .appeal .boxTop { width:745px; padding-top:20px; background:url(../images/bg_products_contents01.gif) no-repeat left top; }
#products #contents .appeal .boxBtm { width:100%; padding-bottom:5px; background:#fff url(../images/bg_products_contents03.gif) no-repeat left bottom; }
#products #contents .appeal .boxMdl { padding:0 20px; }

#products #contents .appeal .boxMdl .section { width:670px; margin-bottom:15px; margin-left:0; padding:7px 15px 13px; background:url(../images/bg_products_contents02.gif) no-repeat left bottom; text-align:justify; text-justify:inter-ideograph; }
#products #contents .appeal .boxMdl .pdtUnit01 { margin-top:3px; padding-top:8px; border-top:1px solid #d9eff7; }
#products #contents .appeal .boxMdl .pdtUnit01 p { display:inline-block; vertical-align:middle; width:595px; }
#products #contents .appeal .boxMdl .pdtUnit01 .img  { display:inline-block; vertical-align:middle; width:63px; }


/* @group items ----------------------------------------- */

#products.top #contents .items { width:880px; margin:0 auto; }
#products.top #contents .items ul { text-align:center; }
#products.top #contents .items ul li { display:inline-block; width:220px; height:255px; overflow:hidden; }
#products.top #contents .items ul li a:hover img { position:relative; top:-255px; opacity:1 !important; filter:alpha(opacity=100) !important; background-color:#fff; }

/*#products.top #contents .items ul li.plain { padding-left:110px; }
#products.top #contents .items ul li.plain_kato { padding-right:110px; }

#products.top #contents .items ul li.fourpot_natadecoco { padding-right:110px; }
#products.top #contents .items ul li.fourpot_aloe { padding-left:110px; }*/

#products.top #contents .items ul { width:660px; margin:0 auto; }

#products.top #contents .items .note01 { margin:5px 20px 0 68px; color:#999; }

#products.top #contents .items .note_wrapper { width:740px; margin:10px auto 0 auto; text-align:center; }
#products.top #contents .items .note_wrapper .note01 { display:inline-block; margin:0 0 0 0; color:#999; text-align:left; }


/*===================================================================
	detail
===================================================================*/
#products.detail #contents { position:relative; width:100%; min-width:940px; height:auto !important; margin:0 auto; padding:0; background:none; }

#products.detail #contents a:hover img { opacity:0.8; filter:alpha(opacity=80); }

#products.detail .util_col { width:850px; margin:30px auto 0 auto; }
#products.detail .util_col .left_col { float:left; width:50%; }
#products.detail .util_col .right_col { float:right; width:50%; }

#products.detail .nav_back { }

#products.detail .sns { padding-right:0; height:23px; overflow:hidden; }
#products.detail .sns li { float:right; padding-right:5px; line-height:1; }
#products.detail .sns li.facebook { padding-right:0; }

#products.detail .detail_wrapper { width:850px; margin:0 auto; }
#products.detail .detail_wrapper .detail_head { position:relative; display:table; width:850px; height:48px; margin-top:15px; background:url(../images/detail_ttl.png) no-repeat left top; }
#products.detail .detail_wrapper .detail_head .ttl { display:table-cell; vertical-align:middle; width:100%; padding:0 15px 2px 15px; font-size:20px; font-weight:bold; line-height:1.2; color:#001a6c; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }
#products.detail .detail_wrapper .detail_head .icon { display:table-cell; vertical-align:middle; padding:0 15px 2px 0; }

#products.detail .detail_wrapper .lead01 { margin-top:15px; }
#products.detail .detail_wrapper .btn { margin-top:40px; text-align:center; }
#products.detail .detail_wrapper .special { margin-top:40px; text-align:center; }


#products.detail .detail_wrapper .detail_main { margin-top:15px; }
#products.detail .detail_main ul { }
#products.detail .detail_main ul .img { float:left; width:350px; }
#products.detail .detail_main ul .data { float:right; width:470px; }

#products.detail .detail_main ul .data dl { background:url(../images/detail_bg_01.gif) repeat-y left top; }
#products.detail .detail_main ul .data dl dt { display:table; width:410px; height:43px; padding:0 30px; font-weight:bold; line-height:1.2; }
#products.detail .detail_main ul .data dl dt span { display:table-cell; vertical-align:middle; padding-bottom:5px; }
#products.detail .detail_main ul .data dl dd { padding:5px 30px 15px 30px; }

#products.detail .detail_main ul .data dl.data01 dt { background:url(../images/detail_sttl_01.gif) no-repeat left top; }
#products.detail .detail_main ul .data dl.data01 dd {  }

#products.detail .detail_main ul .data dl.data02 dt { background:url(../images/detail_sttl_02.gif) no-repeat left top; }
#products.detail .detail_main ul .data dl.data02 dd { background:url(../images/detail_bg_02.gif) no-repeat left bottom; }

#products.detail .detail_main ul .data .note01 { padding-top:5px; }


.links { margin-top:50px; background-color:#f5f5f5; }
/*.links .links_inner { width:850px; margin:0 auto; padding:7px 0 20px 0; overflow:hidden; }
.links .links_inner ul { width:865px; margin-left:-13px; }*/
.links .links_inner ul li { float:left; width:160px; height:65px; margin:13px 0 0 13px; overflow:hidden; }

.links .links_inner { width:679px; margin:0 auto; padding:7px 0 20px 0; overflow:hidden; }
.links .links_inner ul { width:692px; margin-left:-13px; }

#products.detail #contents .links .links_inner ul li a:hover img { opacity:1 !important; filter:alpha(opacity=100) !important; background-color:#fff; }

body#products.plain_kakeru .links .links_inner ul li.plain_kakeru a,
body#products.fourpot_creamy_strawberry .links .links_inner ul li.fourpot_creamy_strawberry a,
body#products.fourpot_creamy_vanilla .links .links_inner ul li.fourpot_creamy_vanilla a,
body#products.fourpot_plain_kato .links .links_inner ul li.fourpot_plain_kato a,
body#products.fourpot_fruit .links .links_inner ul li.fourpot_fruit a,
body#products.fourpot_polyphenol .links .links_inner ul li.fourpot_polyphenol a,
body#products.fourpot_peapin .links .links_inner ul li.fourpot_peapin a,
body#products.fourpot_strblu .links .links_inner ul li.fourpot_strblu a,
body#products.fourpot_natadecoco .links .links_inner ul li.fourpot_natadecoco a,
body#products.fourpot_variety .links .links_inner ul li.fourpot_variety a,
body#products.fourpot_aloe .links .links_inner ul li.fourpot_aloe a,
body#products.plain_nomu_zero .links .links_inner ul li.plain_nomu_zero a,
body#products.plain_nomu .links .links_inner ul li.plain_nomu a,
body#products.plain_kato .links .links_inner ul li.plain_kato a,
body#products.plain_zero .links .links_inner ul li.plain_zero a,
body#products.plain .links .links_inner ul li.plain a,
.links .links_inner ul li a:hover { position:relative; top:-65px; }


#products.detail .detail_main ul .data dd .list01 dl.overview { background:none; }
#products.detail .detail_main ul .data dd .list01 dl.overview dt { display:table-cell; vertical-align:top; width:120px; height:auto; padding:0; background:none; font-weight:normal; line-height:1.5; color:#4a4a4a; }
#products.detail .detail_main ul .data dd .list01 dl.overview dd { display:table-cell; vertical-align:top; padding:0; background:none; }




/* @group js ----------------------------------------- */
.layerBox { display:none; position:absolute; left:50%; z-index:100; width:581px; margin:-30px 0 0 -271px; background:#fff url(../images/bg_pu02.gif) repeat-y; }
*html .layerBox { margin:-25px 0 0 -280px; }
*+html .layerBox { margin:-25px 0 0 -280px; }
.layerBox .innerBox { background:url(../images/bg_pu01.gif) no-repeat top; }
.layerBox .innerBox .innerBox{ padding:19px; background:url(../images/bg_pu03.gif) no-repeat bottom; }
.layerBox .btn{ margin-top:20px; text-align:left; }
.layerBox .closeBtn{ clear:both; padding-top:20px; text-align:center; }
.infoBox { margin:2px 0 15px 58px; text-align:left; }
.popup { width:745px; padding-bottom:20px; background:url(../images/bg_pu02.gif) no-repeat left bottom; }
.line04 { margin:50px 0 0 -271px; }
*html .line04 { margin:45px 0 0 140px; }
*+html .line04 { margin:45px 0 0 -280px; }

/* END */