@charset "utf-8";

/**********************************

	products.css
		
		/products/

**********************************/

/*-------------------------- #sideContentsArea */

#sideContentsArea #lNavi {
    display: inline;
    line-height: 0;
    font-size: 1%;
}

#sideContentsArea #lNavi li.natto {
    position: relative;
}

#sideContentsArea #lNavi li.natto ul {
    position: absolute;
    top: 48px;
    left: 14px;
}

a {
    text-decoration: none;
}

/*--------------------------------- index.html -*/

/*=================================

		#subVisual

=================================*/

#subVisualWrapper {
    margin-top: -39px;
    height: 457px;
    overflow: hidden;
}

#subVisual {
    position: relative;
    background: url(../images/bg_subVisual.jpg) repeat-x;
}



/*---------------------------------
		#subVisual > #subVisualArea
---------------------------------*/

#subVisual #subVisualArea {
    position: relative;
    margin: 0 auto;
    width: 1040px;
    height: 297px;
    background: url(../images/bg_subVisual_shadow.jpg) top left no-repeat;
}

#subVisual #subVisualArea h2 {
    position: relative;
    margin: 0 auto;
    width: 1001px;
    height: 297px;
    background: url(../../products/images/bg_subVisual.jpg) top left no-repeat;
}

#subVisual #subVisualArea h2 img {
    display: block;
    position: absolute;
    top: 108px;
    left: 63px;
}


/*---------------------------------
		#subVisual > #pankuzu
---------------------------------*/

#subVisual #pankuzu {
    position: absolute;
    top: 0%;
    left: 50%;
    margin: -15px 0 0 -792px;
    width: 1584px;
    height: 362px;
    z-index: 10;
}

#subVisual #pankuzu ul {
    margin: 46px 0 0 350px;
}

#subVisual #pankuzu ul li {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    font-size: 78%;
    color: #333333;
}

#subVisual #pankuzu ul li a {
    color: #aca6a1;
}

#subVisual #pankuzu ul li a:hover {
    color: #aca6a1;
}

#subVisual p.bg_btm {
    position: absolute;
    bottom: -83px;
    left: 50%;
    margin: 0 0 0 -792px;
    width: 1584px;
    z-index: 100;
}

/*=================================

		#prAreaWrapper

=================================*/

#prAreaWrapper {
    position: relative;
    margin: -14px 0 10px 9px;
    padding: 6px 0 32px 0;
    background: url(../../products/images/bg_recBtm.png) left bottom no-repeat;
}

#prAreaInner {
    padding: 0 0 0 5px;
    width: 698px;
    overflow: hidden;
    background: url(../../products/images/bg_rec.png) 0 0 repeat-y;
}

#prArea {
    position: relative;
    margin: 0 auto;
    width: 588px;
    padding-left: 5px;
}

#prArea ul {
    margin: 0 0 10px 0;
    padding-top: 39px;
    overflow: hidden;
}

#prAreaWrapper ul li {
    position: relative;
    float: left;
    width: 147px;
    text-align: center;
    font-size: 86%;
}

#prAreaWrapper ul li img.newIcon {
    position: absolute;
    top: -30px;
    right: 10px;
    z-index: 100;
}

#prAreaWrapper ul li a {
    color: #000;
}

#prAreaWrapper ul li a:hover {
    color: #c62705;
}


#prArea_prev,
#prArea_next {
    position: absolute;
    top: 58px;
    width: 19px;
    height: 31px;
    cursor: pointer;
}

#prArea_prev {
    left: -33px;
    background: url(../../products/images/icon_recNaviL.gif) no-repeat;
}

#prArea_next {
    right: -33px;
    background: url(../../products/images/icon_recNaviR.gif) no-repeat;
}

#prArea_wrap {
    height: 140px !important;
}

#prArea a {
    text-decoration: none;
}



p.okametofuBtn {
    margin: 10px 14px 0 0;
    text-align: right;
    font-weight: bold;
    font-size: 86%;
}

p.okametofuBtn a {
    color: #000;
}

p.okametofuBtn a:hover {
    color: #c62705;
}

/*=================================

		#natto

=================================*/

#nattoWrapper {
    margin-left: 9px;
    padding-bottom: 15px;
    width: 703px;
    background: url(../../products/images/bg_recBtm.png) bottom no-repeat;
}

#natto {
    background: url(../../products/images/bg_rec.png) repeat-y;
}

#natto div.nattoArea {
    float: left;
    width: 356px;
}

#natto div.nattoArea p.nattoText {
    position: relative;
    font-size: 86%;
    margin: -70px 35px 0 34px;
}

#natto ul li {
    float: left;
    line-height: 0;
    height: 1%;
}

#natto ul li img {
    line-height: 0;
}

/*=================================

		.miniBox

=================================*/

#miniBoxArea {
    margin: 10px 0 14px 0;
    overflow: hidden;
}

#mainContents a.miniBox {
    display: block;
    float: left;
    margin: 0 0 0 9px;
    padding-bottom: 21px;
    width: 346px;
    background: url(../../fun/images/bg_funBoxBtm.gif) left bottom no-repeat;
    font-size: 92%;
    color: #000000;
    text-decoration: none;
}

#mainContents a.miniBox div {
    margin-top: 20px;
    _zoom: 1;
}

#mainContents a.miniBox div h4 {
    position: relative;
    margin-top: -20px;
    height: 192px;
    overflow: hidden;
}

#mainContents a.miniBox div h4.tofu {
    background: url(../../products/images/ttl_tofu_on.png) no-repeat
}

#mainContents a.miniBox div h4.other {
    background: url(../../products/images/ttl_other_on.png) no-repeat
}

#mainContents a.miniBox div p.funText {
    padding: 15px 23px 0 23px;
    width: 300px;
    font-size: 92%;
    background: url(../../fun/images/bg_funBox.gif) repeat-y;
}

/*=================================

		#area

=================================*/

#areaArea {
    margin-left: 9px;
    width: 703px;
    background: url(../../products/images/bg_area.png) left bottom no-repeat;
    height: 221px;
}

#areaArea a p {
    display: block;
    padding-left: 30px;
}

#areaArea h4 {
    width: 703px;
    overflow: hidden;
    background: url(../../products/images/ttl_area_on.png) no-repeat;
}

#areaArea a:hover h4 {
    text-indent: -9999px;
}


/*--------------------------------- contents -*/

.categoryList {
    margin: -14px 0 0 9px;
    width: 705px;
}

.contents .bg_lineUp {
    background: url(../../products/images/bg_products.png) repeat-y;
}

.contents .bg_productsBtm {
    width: 705px;
    margin-top: -4px;
    background: url(../../products/images/bg_productsBtm.png) bottom no-repeat;
    padding-bottom: 22px;
}

.contents .bg_productsListBtm {
    background: url(../../products/images/bg_productsBtm.png) left bottom no-repeat;
    padding-bottom: 22px;
}

/*=================================

		.contents #categoryList

=================================*/

ul#categoryArea {
    margin: 0 0 0 8px;
    padding: 5px 0 20px 0;

}

ul#categoryArea li {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    margin: 30px 0 0 17px;
    width: 147px;
    vertical-align: top;
    text-align: center;
    font-size: 86%;
}

ul#categoryArea li a {
    color: #000;
}

ul#categoryArea li a img {
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
}

ul#categoryArea li a:hover {
    color: #81511c;
}

ul#categoryArea li a:hover img {
    border-color: #81511c;
}

/*=================================

		.contents .productsList

=================================*/

.contents #mainContents {
    position: relative;
}

div.productsList h3 {
    text-align: center;
    /zoom: 1;
}

div.productsList .upperCat {
    position: absolute;
    top: 7px;
    left: 470px;
}

div.productsList dl.productsArea {
    margin: 0 0 0 26px;
    width: 650px;
}

div.productsList dl.productsArea dt {
    font-size: 1.3em;
    color: #6a3906;
    font-weight: bold;
}

div.productsList dl.productsArea dd {
    display: table;
    margin-top: 16px;
}

div.productsList dl.productsArea dd ul {
    margin-left: -18px;
    overflow: hidden;
}

div.productsList dl.productsArea dd ul li {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    margin: 30px 0 0 16px;
    width: 147px;
    vertical-align: top;
    text-align: center;
    font-size: 86%;
}

div.productsList dl.productsArea dd ul li a {
    display: inline-block;
    /zoom: 1;
    text-align: center;
    text-decoration: none;
    color: #000000;
}

div.productsList dl.productsArea dd ul li a span {
    display: table-cell;
    /zoom: 1;
    margin-bottom: 10px;
    border: 1px solid #e5e5e5;
    width: 145px;
    height: 145px;
    vertical-align: middle !important;
}

div.productsList dl.productsArea dd ul li a:hover {
    color: #81511c;
}

div.productsList dl.productsArea dd ul li a:hover span {
    border-color: #81511c;
}



/*=================================

		.contents .productsList

=================================*/

/*--------------------------------- umefumi -*/

#productArea {
    position: relative;
    margin: -4px 0 0 0;
}

#productArea h3 {
    margin: 0;
    text-align: left;
}


#productArea .upperCat {
    position: absolute;
    top: 15px;
    left: 504px;
}



/*--------------------------------- sp -*/

/*=================================

		#spMenu

=================================*/

#spMenu {
    position: relative;
    padding: 0 0 17px 26px;
    background: url(../../products/images/bg_products.png) repeat-y;
    /zoom: 1;
}

#spMenu li {
    float: left;
}

/*=================================
=================================*/

div.bg_sp h4 {
    margin: 0 0 20px 26px;
}

.contents .bg_sp {
    background: url(../../products/natto/umaaji/images/bg_sp.png) repeat-y;
}

.contents div.spBox {
    margin: 0 0 0 26px;
    width: 650px;
}

.contents dl.spContents {
    margin-left: 26px;
    padding: 0 213px 0 0;
    width: 447px;
    line-height: 2;
}

.contents dl.spContents dt {
    font-weight: bold;
    font-size: 110%;
}

.contents dl.spContents dd {
    padding-bottom: 45px;
    font-size: 86%;
}


/*----------------------------------------------umaaji-*/

.umaaji #spMenu li {
    position: relative;
    float: left;
    margin-top: -90px;
}

.contents dl.umaaji1 {
    background: url(../../products/natto/umaaji/images/img_sp001_01.png) right 27px no-repeat;
}

.contents dl.umaaji2 {
    background: url(../../products/natto/umaaji/images/img_sp001_02.png) right 9px no-repeat;
}

.umaaji #mainContents dl.spContents {
    width: 650px;

}

p.imgSp002 {
    margin-left: 26px;
    padding-bottom: 45px;
}

p.ssttlSp003 {
    margin-left: 26px;
}

.contents dl.umaaji3 {
    padding: 0 0 45px 0;
    width: 660px;
}

.umaaji00201 img {
    margin: -25px 0 20px 20px;
    float: right;
}

.umaaji00201 p img {
    margin-top: 40px;
    float: none;
}

.umaaji00201 p {
    text-align: center;
}

.umaaji #mainContents dl.umaaji00202 {
    margin-bottom: 20px;
    padding-right: 176px;
    width: 474px;
    background: url(../../products/natto/umaaji/images/img_sp002_03.png) top right no-repeat;
}

.umaaji #mainContents dl span {
    font-size: 92%;
    color: #888;
}


.umaaji #mainContents dl.umaaji00203 dd {
    min-height: 166px;
    height: auto !important;
    height: 166px;
    padding-right: 176px;
    width: 474px;
    background: url(../../products/natto/umaaji/images/img_sp002_04.png) top right no-repeat;

}


p.imgSp00302 {
    margin-top: 15px;
}

.umaaji dl.spContents dt img {
    margin-bottom: 10px;
}

dl.umaaji001_03 dd p {
    margin-top: 15px;
}

.umaaji #mainContents dl.umaaji001_04 {
    position: relative;
    margin-top: -20px;
    padding: 20px 164px 0 0;
    width: 452px;
    background: url(../../products/natto/umaaji/images/img_sp001_04.png) right top no-repeat;
}


.umaaji #mainContents dl.umaaji001_05 {
    position: relative;
    margin-top: -30px;
    padding: 20px 164px 0 0;
    width: 452px;
    background: url(../../products/natto/umaaji/images/img_sp001_05.png) right top no-repeat;
}

.umaaji #mainContents dl.umaaji003 dd {
    padding-right: 200px;
    width: 450px;
    background: url(../../products/natto/umaaji/images/bg_sp003.png) right top no-repeat;
}

.umaaji #mainContents div.specialMovie {
    margin-left: 25px;
    padding: 19px 31px;
    width: 588px;
    border: 1px solid #eeecec;
}

.umaaji #mainContents div.specialMovie p.ttl {
    margin-bottom: 15px;
    font-weight: bold;
    font-size: 115%;
}

.umaaji #mainContents div.specialMovie div.img {
    float: left;
    margin-right: 18px;
}

.umaaji #mainContents div.specialMovie dl.contents {
    float: left;
    width: 315px;
}

.umaaji #mainContents div.specialMovie dl.contents dt {
    margin-bottom: 13px;
    font-weight: bold;
}

.umaaji #mainContents div.specialMovie dl.contents dd {
    margin-bottom: 23px;
}

.umaaji #mainContents div.specialMovie ul.dlBtn {
    margin-top: 23px;
}

.umaaji #mainContents div.specialMovie ul.dlBtn li {
    float: left;
    margin-right: 18px;
}

.umaaji #mainContents div.specialMovie p.memo {
    clear: both;
    padding-top: 18px;
    font-size: 75%;
}

.umaaji #mainContents div.specialMovie div.wmpArea {
    margin-top: 10px;
    overflow: hidden;
}

.umaaji #mainContents div.specialMovie div.wmpArea p {
    float: left;
}

.umaaji #mainContents div.specialMovie div.wmpArea p img {
    margin-right: 10px;
}

.umaaji #mainContents div.specialMovie div.wmpArea p.txt {
    float: left;
    font-size: 75%;
    width: 480px;
    /zoom: 1;
}


/*----------------------------------------------kokusan-*/

.kokusan #spMenu li {
    margin-left: 7px;
    margin-right: 6px;
}

.contents .kokusan dl.spContents {
    margin: 25px 0 0 0;
    width: 434px;
    background: url(../../products/natto/kokusan/images/img_sp001_01.jpg) right top no-repeat;
}

.kokusan dl.kokusan1 dt {
    color: #b13232;
}

.kokusan dl.kokusan1 dd {
    margin: 5px 0 0 0;
    padding-bottom: 30px;
}

.contents dl.kokusan1 {
    background: url(../../products/natto/kokusan/images/img_sp001_01.jpg) 377px 0 no-repeat;
}

.kokusan div.kokusan2 {
    margin-bottom: 30px;
    padding: 28px 25px 28px 5px;
    background: #fff7e5;
    /zoom: 1;
}

.kokusan div.kokusan2 dl {
    float: left;
    padding-left: 20px;
    width: 280px;
    font-size: 86%;
}

.kokusan div.kokusan2 dt {
    font-size: 115%;
    font-weight: bold;
}

.kokusan div.kokusan2 dt span {
    color: #b13232;
}

.kokusan div.kokusan2 dd em {
    display: block;
    margin: 8px 0 8px 0;
    font-style: normal;
    color: #b13232;
}

.kokusan div.kokusan2 dd ol li {
    list-style-type: decimal;
    margin-left: 20px;
    font-size: 85%;
}

.kokusan div.kokusan03 {
    position: relative;
    margin: 30px 0 0 -15px;
    width: 704px;
}

.kokusan div.kokusan03 dl {
    float: left;
    width: 207px;
    font-size: 85%;
    margin-left: 15px;
}

.kokusan div.kokusan03 dt {
    margin-bottom: 10px;
}

.kokusan div.kokusan03 dd {
    text-align: center;
    margin-bottom: 27px;
}

.kokusan div.kokusan03 dd p {
    margin-bottom: 15px;
    text-align: left;
}

.kokusan div.kokusan04 {
    position: relative;
    margin: 8px 0 0 -15px;
    width: 704px;
}

.kokusan div.kokusan04 dl {
    float: left;
    width: 207px;
    font-size: 85%;
    margin-left: 15px;
}

.kokusan div.kokusan04 dt {
    margin-bottom: 10px;
}

.kokusan div.kokusan04 dd {
    text-align: center;
    margin-bottom: 20px;
}

.kokusan div.kokusan04 dd p {
    margin-bottom: 15px;
    text-align: left;
}

.kokusan div.kokusan04 dl li {
    float: left;
}

.kokusan div.kokusan04 dl li.last-item {
    padding-left: 6px;
}

.kokusan div.kokusan04 p.notice {
    margin: 0 0 25px 16px;
    width: 640px;
    font-size: 77%;
}


div.kokusan2 span.memo {
    font-size: 92%;
    color: #000;
}

/*----------------------------------------------fuwarin-*/

.fuwarin #spMenu li {
    position: relative;
    float: left;
    margin-top: -90px;
}

.fuwarin p.fuwarin {
    text-align: center;
    margin-bottom: 25px;
}

.fuwarin div.fuwarin003 {
    padding: 0 26px 35px 300px;
    background: #fed947 url(../../products/natto/fuwarin/images/bg_sp003.jpg) left center no-repeat;
}

.fuwarin div.fuwarin003 ul li {
    float: left;
    margin: 16px 10px 17px 0;
}

.fuwarin div.fuwarin003 p.notice {
    margin-left: 13px;
    width: 298px;
    font-size: 77%;
}

.fuwarin div.bnrWmp {
    margin: 10px 0 25px 0;
}

.fuwarin div.bnrWmp p.bnr {
    float: left;
}

.fuwarin div.bnrWmp p.text {
    float: left;
    margin-left: 9px;
    width: 550px;
    font-size: 77%;
}

/*----------------------------------------------itonochikara-*/

.itonochikara #spMenu li {
    position: relative;
    float: left;
    margin-top: -126px;
}


.itonochikara dl.sp001 {
    width: 650px;
    margin: 20px 0 0 0;
    padding: 0;
    background: url(../../products/natto/itonochikara/images/img_sp001.jpg) right top no-repeat;
}

.itonochikara dl.sp001 dt {
    color: #d6180c;
    margin-bottom: 15px;
    padding-right: 175px;
}

.itonochikara dl.sp001 dd p {
    margin-bottom: 25px;
}

.itonochikara dl.sp001 dd p em {
    font-style: normal;
    color: #d6180c;
}

.itonochikara ol li dl.spContents {
    width: 650px;
    margin: 20px 0 0 0;
    padding: 0;
}

.itonochikara ol li dl dt {
    color: #d6180c;
    padding-left: 25px;
}

.itonochikara ol li dl.spContents dd {
    padding-bottom: 30px;
}

.itonochikara ol li dl dt.sp1 {
    background: url(../../products/natto/itonochikara/images/icon_sp002_1.gif) left 6px no-repeat;
}

.itonochikara ol li dl dt.sp2 {
    background: url(../../products/natto/itonochikara/images/icon_sp002_2.gif) left 6px no-repeat;
}

.itonochikara ol li dl dt.sp3 {
    background: url(../../products/natto/itonochikara/images/icon_sp002_3.gif) left 6px no-repeat;
}

.itonochikara ol li dl dd.sp2 {
    width: 410px;
    padding-right: 241px;
    background: url(../../products/natto/itonochikara/images/img_sp002.jpg) right top no-repeat;
}


/*----------------------------------------------collagen-*/

div.collagenBg {
    background: url(../../products/images/bg_products.png) left top repeat-y;
    /zoom: 1;
}

.collagen #spMenu {
    position: relative;
    margin-top: -96px;
    background: none;
}

.collagen #spMenu li {
    float: left;
}

.collagen div.spBox {
    margin: 0 0 20px 26px;
}

.collagen dl.spContents {
    width: 650px;
    margin: 25px 0 0 0;
    padding: 0;
}

.collagen dl.spContents dt {
    color: #e74569;
    font-weight: bold;
}

.collagen dl.sp00101 {
    padding: 0 164px 0 0;
    width: 486px;
    background: url(../../products/natto/hakkoucollagen/images/img_sp001_01.gif) right top no-repeat;
}

.collagen dl.spContents dd {
    margin: 0;
    padding: 0 0 5px 0;
}

.collagen dl.sp00102 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) left top repeat-x;
    padding-top: 30px;
}

dl.sp00102 p {
    margin: 25px 0 10px 0;
}

.collagen dl.spContents dt img {
    vertical-align: middle;
    padding-right: 10px;
}

.collagen dl.spContents dd dl {
    margin-top: 10px;
}

.collagen dl.spContents dd dl dt {
    font-size: 110%;
    font-weight: bold;
    color: #2a95ff;
    background: none;
    padding: 0;
}

.collagen dl.spContents dd dl dt span {
    font-size: 77%;
}

.collagen dl.spContents dd dl dd {
    font-size: 100%;
    padding: 0;
    margin: 0;
}

.collagen p.sp004Lead {
    margin: 20px 0;
    font-size: 86%;
}

.collagen ul.spContents {
    margin-left: -10px;
}

.collagen ul.spContents li {
    float: left;
    margin: 0 0 10px 10px;
    width: 155px;
    text-align: center;
    font-size: 86%;
}

.collagen ul.spContents li img {
    margin-bottom: 6px;
    border: 1px solid #eeeeee;
}

.collagen ul.spContents li a {
    color: #e74569;
    text-decoration: none;
}

.collagen ul.spContents li a:hover {
    color: ;
}

.collagen dl.sp00201 {
    background: url(../../products/natto/hakkoucollagen/images/img_sp002_01.jpg) right top no-repeat;
}

.collagen dl.sp00202 dt {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp00202 dd dl {
    float: left;
    width: 391px;
}

.collagen dl.sp00202 dd img {
    float: left;
    padding: 10px 0 0 20px;
}

.collagen dl.sp00202 dd p.notice {
    float: right;
    font-size: 85%;
    text-indent: -3em;
}

.collagen dl.sp00203 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp00204 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp00205 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp00206 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp003011 {
    padding: 0 164px 0 0;
}

.collagen dl.sp00301 {
    background: url(../../products/natto/hakkoucollagen/images/img_sp003_01.jpg) right top no-repeat;
    padding-right: 225px;
    width: 425px;
}

.collagen dl.sp00302 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp00303 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen ul.sp00402 {
    margin-top: 19px;
    padding-top: 29px;
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) repeat-x;
}

.collagen p.searchRes {
    color: #ff0000;
    font-size: 77%;
}

.collagen p.searchRes img {
    margin-bottom: 10px;
}

.collagen dl.sp00501 {
    margin-top: 30px;
    padding-top: 30px;
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
}

.collagen dl.sp00501 dd dl {
    margin-right: 20px;
    float: left;
    width: 305px;
}

.collagen dl.sp00501 dd dl dt {
    color: #e74569;
}


.collagen dl.sp00501 dd p {
    float: left;
    padding-top: 42px;
}

.collagen dl.sp00501 dd dl dd {
    margin-bottom: 15px;
}

.collagen dl.sp00501 dd dl dd p {
    float: none;
    margin-top: 25px;
    padding: 0;
    text-align: center;
}

.collagen dl.sp00502 {
    background: url(../../products/natto/hakkoucollagen/images/dot_line.gif) top left repeat-x;
    padding-top: 30px;
}

.collagen dl.sp00502 dt {
    margin-bottom: 30px;
}

.collagen dl.sp00502 dd li {
    margin-bottom: 12px;
    padding-top: 30px;
    width: 647px;
    background: url(../../products/natto/hakkoucollagen/images/arrow_sp005.gif) center top no-repeat;
}

.collagen dl.sp00502 dd li.noAr {
    padding-top: 0;
    background: none;
}

.collagen dl.sp00502 dd li p {
    position: relative;
    padding: 30px;
    width: 587px;
    text-align: center;
    background: #ffeaee;
}

.collagen dl.sp00502 dd li p img {
    position: absolute;
    top: 0;
    left: 0;
}


/*----------------------------------------------gopan-*/

.gopan #spMenu {
    padding: 0 0 17px 16px;
}

.gopan #spMenu li {
    position: relative;
    float: left;
    margin-top: -110px;
}

.gopan div.sp00101 {
    padding-top: 35px;
    width: 647px;
    background: url(../../products/natto/gopan/images/bg_sp001.gif) left top no-repeat;
}

.gopan div.sp00101 dl {
    margin-bottom: 30px;
    padding-bottom: 35px;
    background: url(../../products/natto/gopan/images/bg_sp001.gif) left bottom no-repeat;
}

.gopan div.sp00101 dt {
    padding: 0 30px;
    background: #fff8c9;
}

.gopan div.sp00101 dd {
    padding: 20px 30px 0 30px;
    background: #fff8c9;
}

.gopan p.sp00201 {
    margin-bottom: 16px;
}

.gopan p.recipeBtn {
    padding-bottom: 20px;
    text-align: right;
}


/*----------------------------------------------detail-*/

#products div#mainContentsAreaWrapper {
    margin-top: -5px;
    padding-top: 8px;
}

#products .bg_area {
    margin-top: 0;
}

#detailArea {
    margin: 0 0 0 26px;
}

#detailArea .goList {
    padding-top: 10px;
    width: 650px;
    text-align: right;
}

#productInfoArea {
    overflow: hidden;
    margin-bottom: 10px;
}

#productInfoArea p.productImg {
    padding-right: 20px;
    width: 252px;
    float: left;
}

#productInfoArea dl.productInfo {
    float: left;
    width: 372px;
    overflow: hidden;
}

#productInfoArea dl.productInfo dt.productTitle {
    padding-left: 17px;
    background: url(../../products/images/icon_detail.gif) no-repeat;
    font-size: 1.5em;
    font-weight: bold;
    color: #81511c;
}

#productInfoArea dl.productInfo dd.productContents {
    font-size: 86%;
}

#productInfoArea dl.productInfo dl.clearfix {
    overflow: hidden;
}

#productInfoArea dl.productInfo dl.clearfix dt {
    float: left;
    margin: 20px 15px 0 0;
    width: 79px;
    border-right: 1px solid #c5c5c5;
}

#productInfoArea dl.productInfo dl.clearfix dd {
    margin-top: 20px;
    float: left;
}

#detailArea ul.localNaviBtn {
    margin: 0 auto;
    width: 408px;
    overflow: hidden;
    text-align: center;
}

#detailArea ul.localNaviBtn li {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    margin: 0 6px;
    width: 187px;
}

#detailArea dl.infoBox {
    margin-top: 17px;
    border: 1px solid #f0ebe6;
    font-size: 86%;
    width: 650px;
    overflow: hidden;
}

#detailArea dl.infoBox dt {
    border-bottom: 1px solid #f0ebe6;
    padding: 15px 10px;
    color: #734516;
    font-weight: bold;
    background: #f6f3ef;
}

#detailArea dl.infoBox dd {
    padding: 15px 22px;
    overflow: hidden;
}

#detailArea dl.infoBox dd img {
    float: left;
    margin-right: 20px;
}

#detailArea dl.column {
    overflow: hidden;
}

#detailArea dl.column dt {
    float: left;
    border: none;
    width: 120px;
    text-align: center;
}

#detailArea dl.column dd {
    float: left;
    border-left: 1px solid #f0ebe6;
}

#detailArea dl.infoBox dd dl.featureBox {
    margin: 0;
    padding: 5px 0 20px 0;
    border: none;
    font-size: 100%;
    width: auto;
}

#detailArea dl.infoBox dd dl.featureBox dt {
    padding: 0 0 10px 0;
    border: none;
    font-size: 100%;
    background: #ffffff;
    font-weight: bold;
    color: #734516;
}

#detailArea dl.infoBox dd dl.featureBox dd {
    padding: 0;
}

#detailArea dl.infoBox dd dl.featureBox dd ul {
    position: relative;
    margin-top: -10px;
}

#detailArea dl.infoBox dd dl.featureBox dd li {
    padding-top: 10px;
    margin-left: 1.5em;
    list-style-type: disc;
}

#detailArea #composition {
    margin-top: 17px;
    width: 650px;
    text-align: left;
    border: 1px solid #f0ebe6;
    font-size: 86%;
}

#detailArea #composition thead {
    color: #734516;
    font-weight: bold;
    background: #f6f3ef;
}

#detailArea #composition thead th {
    padding: 15px 10px;
    overflow: hidden;
}

#detailArea #composition thead p {
    float: left;
}

#detailArea #composition thead p.contain {
    margin-top: -1.4em;
    width: 100%;
    text-align: right;
    font-size: 85%;
    color: #000;
}


#detailArea #composition tr {
    border-top: 1px solid #f0ebe6;
}

#detailArea #composition tbody th {
    padding: 15px 10px;
    border-right: 1px solid #f0ebe6;
    width: 120px;
    text-align: center;
}

#detailArea #composition tbody td {
    padding: 15px 22px;
}

.btm {
    margin-top: 17px !important;
}

.btnBtm {
    margin-bottom: 10px;
}

/*----------------------------------------service*/

/*=================================

		#service

=================================*/

/*----------------------------------------tare*/

#serviceArea h3 {
    padding-top: 6px;
    margin: 0 0 22px 25px;
    border-bottom: 3px solid #81511c;
    width: 650px;
}

#serviceContents {
    margin-left: 24px;
}

.tare #serviceContents dl {
    width: 650px;
    background: url(../../products/service/img/dotLine_tare.gif) left bottom repeat-x;
    margin-bottom: 12px;
    padding-bottom: 45px;
}

.tare #serviceContents dl.lastList {
    background: none;
    padding-bottom: 25px;
}

.tare #serviceContents dl dt {
    margin-bottom: 10px;
    font-weight: bold;
    color: #6a3906;
    font-size: 115%;
}

.tare #serviceContents dl dd {
    text-align: center;
}

.tare #serviceContents dl dd img {
    margin-bottom: 10px;
}

.tare #serviceContents dl dd ul {
    margin-left: -20px;
    overflow: hidden;
}

.tare #serviceContents dl dd ul li {
    float: left;
    margin-left: 20px;
    width: 90px;
    font-size: 86%;
}

.tare #serviceContents dl dd ul li a {
    color: #000;
}

.tare #serviceContents dl dd ul li a:hover {
    color: #81511c;
}

/*----------------------------------------area*/

.area div.area {
    position: relative;
    margin-top: -22px;
    height: 550px;
    background: url(../../products/service/img/bg_area.jpg) no-repeat;

}

.area div.area ul {
    position: absolute;
    top: 33px;
    left: 31px;
}

.area div.area ul li {
    margin-bottom: 16px;
    font-weight: bold;
}

.area div.area ul li.area1 a {
    color: #ff84b5;
}

.area div.area ul li.area2 a {
    color: #fd656d;
}

.area div.area ul li.area3 a {
    color: #fda240;
}

.area div.area ul li.area4 a {
    color: #bce72b;
}

.area div.area ul li.area5 a {
    color: #4fb7fb;
}

.area div.area ul li.area6 a {
    color: #607bfb;
}

.area div.area p {
    position: absolute;
    top: 263px;
    left: 28px;
    font-size: 86%;
}

#sizeArea {
    padding-bottom: 23px;
}


#sizeList {
    margin: 22px 0 0 -27px;
    padding-bottom: 76px;
    background: url(../../products/service/img/img_size_07.jpg) center bottom no-repeat;
    overflow: hidden;
}

#sizeList li {
    float: left;
    margin-left: 27px;
}

#knowledge {
    width: 717px;
    margin: 0 5px 0 8px;
    padding-bottom: 23px;
    background: url(../../products/service/img/bg_size_bottom.png) left bottom no-repeat;
}

#knowledgeArea {
    padding-left: 9px;
    background: url(../../products/service/img/bg_size.png) repeat-y;
}

#knowledgeArea dl {
    position: relative;
    margin-bottom: -10px;
    padding: 30px 60px 0 40px;
}

#knowledgeArea dl dt {
    margin-bottom: 10px;
    font-weight: bold;
    color: #734516;
}

#knowledgeArea dl dd {
    font-size: 85%;
    padding-bottom: 26px;
}

#knowledgeArea dl dd em {
    font-style: normal;
    font-weight: bold;
}


/*----------------------------------------result*/

.result h3 {
    margin-top: 20px;
    padding-bottom: 10px !important;
    font-size: 1.5em;
    color: #6a3906;
    font-weight: bold;
}

.result #serviceArea h4 {
    margin-left: 26px;
    font-size: 1.3em;
    font-weight: bold;
}

.result #serviceArea ul {
    position: relative;
    margin: -25px 0 0 8px;
    padding: 5px 0 20px 0;
    width: 670px;
}

.result #serviceArea ul li {
    display: inline-block;
    /display: inline;
    /zoom: 1;
    margin: 30px 0 0 16px;
    width: 147px;
    vertical-align: top;
    text-align: center;
    font-size: 86%;
}

.result #serviceArea ul li a {
    display: inline-block;
    /zoom: 1;
    text-align: center;
    color: #000;
}

.result #serviceArea ul li a img {
    border: 1px solid #e5e5e5;
    margin-bottom: 10px;
}

.result #serviceArea ul li a:hover {
    color: #81511c;
}

.result #serviceArea ul li a:hover img {
    border-color: #81511c;
}


p.seriesTop {
    margin: 10px 0 10px 26px;
    width: 650px;
    text-align: right;
    font-size: 86%;
    font-weight: bold;
}


p.seriesTop a {
    color: #000;
}

p.seriesTop a:hover {
    color: #c62705;
}