@charset "utf-8";

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

 File name:      products.css
 Adddate:        2010.10.04
 Upddate:        2011.2.25
 Style Info:     Producst Page CSS
----------------------------------------------------------- */
h3.title700 {
 width: 700px;
 margin: 0 23px 20px;
 background: url(../../../img/bg_title700_top.gif) no-repeat left top;
}
h3.title700 span {
 display: block;
 padding: 10px 15px;
 background: url(../../../img/bg_title700_bottom.gif) no-repeat left bottom;
 color: #008CCC;
 font-size: 123.1%;
 font-weight: bold;
}

/* カテゴリーから探す */
.cat-col335 {
 float: left;
 width: 335px;
 margin-right: 30px;
}
.cat-col335 h3 {
 width: 335px;
 margin-bottom: 15px;
 background: url(../../../img/bg_title335_top.gif) no-repeat left top;
}
.cat-col335 h3 span {
 display: block;
 padding: 8px 7px 7px 32px;
 background: url(../../../img/bg_title335_bottom.gif) no-repeat left bottom;
}
.cat-col335 h3 span a,
.cat-col335 h3 span a:link,
.cat-col335 h3 span a:visited,
.cat-col335 h3 span a:hover,
.cat-col335 h3 span a:active {
 color: #008CCC;
 font-size: 123.1%;
 font-weight: bold;
}
.cat-col335 img {
 margin-bottom: 10px;
}
.cat-col335 ul li {
 padding-bottom: 3px;
}
.cat-col335 ul li a {
 padding-left: 10px;
 background: url(../../../img/arrow01.gif) no-repeat left center;
 font-size: 108%;
}
.cat-col335 ul li a,
.cat-col335 ul li a:link,
.cat-col335 ul li a:visited,
.cat-col335 ul li a:hover,
.cat-col335 ul li a:active {
 color: #333;
}

h4.cat-title {
 margin: 0 23px 15px;
 padding-left: 17px;
 font-size: 116%;
 font-weight: bold;
 background: url(../../../img/arrow02.gif) no-repeat left center;
}
.cat-col220 {
 float: left;
 width: 220px;
 min-height:265px;
 height: auto !important;
 height: 265px;
 margin-right: 20px;
 background: url(../../img/bg_prd194_bottom.jpg) no-repeat left bottom;
}
.cat-col220 .photo {
 padding: 13px 13px 6px;
 background: url(../../img/bg_prd194_top.jpg) no-repeat left top;
}
.cat-col220 dl {
 padding: 0 13px 13px;
}
.cat-col220 dl dt {
 padding-bottom: 5px;
 font-weight: bold;
}
.cat-col220 dl dt a {
 padding-left: 8px;
 background: url(../../../img/arrow01.gif) no-repeat left 5px;
 color: #008CCC;
}
.cat-col220 dl dd {
 font-size: 93%;
}

.cat-col220-wrap {
 float: left;
 width: 240px;
}
.cat-col220-wrap-end {
 float: left;
 width: 220px;
}
.cat-col220-wrap .cat-col220, .cat-col220-wrap-end .cat-col220 {
 margin-right: 0;
}
.cat-col460-wrap {
 float: left;
 width: 460px;
}
.cat-col220-wrap h4.cat-title, .cat-col460-wrap h4.cat-title, .cat-col220-wrap-end h4.cat-title {
 margin: 0 0 15px
}

/* 製品名から探す */
#name-index {
 margin: 0 23px 30px;
 padding: 3px 20px;
 background-color: #F5F5F5;
}
#name-index .midashi {
 float: left;
 width: 80px;
 padding-top: 8px;
}
#name-index ul {
 float: left;
 width: 580px;
}
#name-index ul li {
 display: inline;
 padding-right: 8px;
}
#name-index ul li img {
 vertical-align: middle;
}
table#prd50 {
 width: 700px;
 margin: 0 23px 30px;
 border-top: solid 3px #E9E9E9;
}
table#prd50 col.head {
 width: 86px;
}
table#prd50 col.prd-img {
 width: 50px;
}
table#prd50 col.name {
 width: 544px;
}
table#prd50 td.head {
 padding: 8px 5px;
 font-size: 116%;
 font-weight: bold;
}
table#prd50 td.prd-img {
 padding: 3px 0;
 background: url(../../../img/border_dot_h01.gif) repeat-x left bottom;
}
table#prd50 td.name {
 padding-left: 10px;
 vertical-align: middle;
 background: url(../../../img/border_dot_h01.gif) repeat-x left bottom;
}
table#prd50 td.name a {
 padding-left: 8px;
 background: url(../../../img/arrow01.gif) no-repeat left center;
}
table#prd50 td.bb {
 border-bottom: solid 3px #E9E9E9;
 background: none;
}

/* お悩みから探す */
ul.trouble-index {
 background-color: #F7F7F7;
 padding: 0 15px;
}
ul.trouble-index li {
 display: inline;
 padding: 0 15px;
 background: url(../../img/border_v.gif) no-repeat left center;
 line-height: 2.2em;
}
ul.trouble-index li a {
 padding-left: 17px;
 background: url(../../../img/arrow02.gif) no-repeat left center;
 color: #333;
 font-weight: bold;
}
.trouble-img {
 float: left;
 width: 166px;
}
ul.trouble {
 float: right;
 width: 514px;
}
ul.trouble li {
 margin-bottom: 5px;
}
ul.trouble li p.expand-bt {
 padding-left: 17px;
 background: url(../../../img/arrow03.gif) no-repeat left center;
 font-size: 108%;
 color: #333;
 cursor: pointer;
}
ul.trouble li p.close {
 padding-left: 17px;
 background: url(../../../img/arrow02.gif) no-repeat left center;
}
.expand {
 display: none;
 width: 494px;
 margin: 5px 0 15px;
 padding: 10px 9px 0 10px;
 background: url(../../img/bg_prd_slide.jpg) repeat left top;
}
.expand ul {
 width: 494px;
}
.expand ul li {
 float: left;
 width: 108px;
 margin-right: 8px;
 padding: 7px 4px;
 background-color: #FFF;
 border-right: solid 1px #CBC6B8;
 border-bottom: solid 1px #CBC6B8;
 font-size: 85%;
 text-align: center;
}
.expand ul li.end {
 margin-right: 0;
}
.expand ul li .prd-photo, .expand ul li .prd-name {
 padding-bottom: 4px;
}
.expand ul li .prd-name {
 line-height: 1.2;
}

/* 製品詳細 */
.prdsection-top {
 padding: 15px 17px 0;
 background: url(../../img/bg_prdsection_top.jpg) no-repeat left top;
}
.prdsection-middle {
 margin: 0 20px 30px;
 width: 706px;
 background: url(../../img/bg_prdsection_middle.jpg) repeat-y left top;
}
.prdsection-bottom {
 padding: 0 17px 17px;
 background: url(../../img/bg_prdsection_bottom.jpg) no-repeat left bottom;
}


#prd-main {
 margin: 20px;
}
h2#prd-title {
 margin-bottom: 25px;
 padding-top: 25px;
}
h2#prd-title span {
 display: block;
 padding: 2px 0 0 15px;
 border-left: solid 7px #FF8A00;
 color: #000;
 line-height: 1em;
 font-size: 161.6%;
 font-weight: bold;
}
h2#prd-title span span {
 display: inline-block;
 padding: 0;
 border-left: 0;
 font-size: 80%;
}
h2#prd-title span span.iyaku {
 margin-left: 15px;
 padding: 3px 5px;
 border: 1px solid #333;
 background-color: #FFF;
}

#prd-img {
 float: left;
 width: 275px;
 padding: 35px 0;
 text-align: center;
 background: url(../../img/bg_prdimg.jpg) no-repeat left top;
}
#prd-img img{
 margin: 0 0 5px 0;
}
#prd-copy {
 float: right;
 width: 370px;
}
#prd-catch {
 margin-bottom: 25px;
 font-size: 138.5%;
 font-weight: bold;
 line-height: 1.6em;
}
.midashi-square {
 margin-top: 15px;
}
#prd-navi {
 background: url(../../img/bg_prdnavi_bottom.gif) no-repeat left bottom;
}
#prd-navi ul {
 padding: 8px 20px;
 background: url(../../img/bg_prdnavi_top.gif) no-repeat left top;
}
#prd-navi ul li {
 display: inline;
 margin-right: 18px;
 padding-right: 18px;
 border-right: solid 1px #4DBDF0;
}
#prd-navi ul li a {
 padding-left: 12px;
 background: url(../../../img/arrow_white.gif) no-repeat left center;
 color: #FFF;
 font-weight: bold;
}
#prd-navi ul li a:hover {
 color: #C5E4F2;
 text-decoration: none;
}

#lineup h3 {
 padding-left: 17px;
 margin-bottom: 3px;
 background: url(../../../img/ico_circle03.gif) no-repeat left center;
 font-size: 123.1%;
 font-weight: bold;
 color: #00A0E9;
}
#lineup ul {
 border-top: solid 4px #00A0E9;
 border-bottom: solid 4px #00A0E9;
 background: url(../../img/bg_lineup.gif) repeat-x left bottom;
}
#lineup ul li, #concern ul li {
 float: left;
 width: 150px;
 padding: 15px 12px 10px 13px;
 text-align: center;
 font-size: 93%;
}
#lineup ul li img, #concern ul li img {
 padding-bottom: 5px;
}

h3.prd-title {
 margin-bottom: 8px;
}
h3.prd-title span {
 display: block;
 padding: 2px 0 0 8px;
 border-left: solid 6px #FF8A00;
 line-height: 1em;
 font-size: 123.1%;
 font-weight: bold;
}

.prdsection-inner {
 padding: 15px;
 background-color: #FFF;
 border: solid 1px #E7E3D4;
}
.inner-wrap {
 width: 640px;
 margin-bottom: 20px;
}

.howto-wrap {
 width: 640px;
 margin-bottom: 15px;
 padding-bottom: 15px;
 background: url(../../../img/border_dot_h01.gif) repeat-x left bottom;
}
.howto-wrap-end {
 background: none;
 padding-bottom: 0;
}
.howto-order {
 float: left;
 width: 26px;
 margin-right: 20px;
}
.howto-img {
 float: left;
 width: 170px;
 margin-right: 20px;
 text-align: center;
}
.howto-text {
 float: left;
 width: 404px;
}
.howto-img2 {
 float: left;
 width: 240px;
 text-align: center;
}
.howto-text2 {
 float: left;
 width: 370px;
 margin-right: 30px;
}

.caution, .use-place {
 line-height: 34px;
 margin-bottom: 15px;
 padding: 0 10px;
 font-size: 108%;
 font-weight: bold;
 background: url(../../img/bg_h4.gif) no-repeat left top;
}
.caution span {
 padding-left: 30px;
 background: url(../../img/ico_caution.gif) no-repeat left center;
 color: #E00;
}

.alert {
 background-color: #FF0000;
 color: #FFFFFF;
 font-weight: bold;
 padding: 3px 2px;
}


.use-place-left {
 float: left;
 width: 260px;
}
/* コバエJｒ 2011年2月25日 */
.use-place-left2{
 float: left;
 width: 200px;
}

.use-place-right {
 float: right;
 width: 360px;
}

/* コバエJｒ 2011年2月25日 */
.use-place-right2{
 float: right;
 width: 420px;
}


.use-place-right ul {
 margin-bottom: 5px;
}
.use-place-right ul li, .mark-circle {
 padding: 0 0 2px 16px;
 background: url(../../../img/ico_circle05.gif) no-repeat left 4px;
}

#faq dl dt {
 padding: 3px 0 8px 43px;
 background: url(../../../faq/img/ico_q.gif) no-repeat left top;
 font-weight: bold;
}
#faq dl dd {
 margin: 0 0 15px 20px;
 padding: 3px 0 10px 43px;
 background: url(../../../faq/img/ico_a.gif) no-repeat left top;
}
#faq dl dd.end {
 margin-bottom: 0
}

#concern {
 margin: 0 22px 30px;
 border: solid 1px #CECECE;
}
#concern ul {
 width: 700px;
}
#concern h3 {
 padding-left: 28px;
 border-bottom: solid 1px #CACACA;
 background: url(../../img/bg_concern_title.gif) no-repeat left top #E2E2E2;
 font-size: 123.1%;
 font-weight: bold;
 line-height: 36px;
}

table.howto-tbl {
 margin-bottom: 20px;
}
table.howto-tbl th, table.howto-tbl td {
 padding: 4px 6px;
 border: solid 1px #BBB;
 font-size: 93%;
 vertical-align: middle;
}
table.howto-tbl th {
 background-color: #E2E2E2;
 font-weight: bold;
}


.col-end {
 margin-right: 0;
}

/* development */
#right-dev {
 float: right;
 width: 740px;
 padding: 0 3px;
}
#develop-wrap {
 width: 740px;
 background: url(../../img/bg_middle.gif) repeat-y left top;
}
#develop {
 width: 740px;
 background: url(../../img/bg_top.gif) no-repeat left top;
}
#develop-inner {
 width: 740px;
 padding: 40px 0 50px;
 background: url(../../img/bg_bottom.gif) no-repeat left bottom;
}

#develop h3 {
 margin-bottom: 20px;
}

.section01 {
 width: 630px;
 margin: 0 55px 40px;
}
.section02 {
 width: 612px;
 margin: 0 55px 0 73px;
}

.muteki-top-wrap {
 background: url(../../img/bg_muteki_top_bottom.gif) no-repeat 18px bottom;
}
.muteki-top {
 padding: 8px 15px 8px 0;
 background: url(../../img/bg_muteki_top_top.gif) no-repeat 18px top;
}
.muteki-top-left {
 float: left;
 width: 241px;
}
.muteki-top-right {
 float: left;
 width: 372px;
 font-size: 108%;
}
.muteki-top-right p {
 margin-top: 20px;
}
.muteki-arrow01 {
 padding: 10px 0 10px 300px;
}
.muteki-arrow02 {
 padding: 10px 0 10px 330px;
}

.muteki01-left {
 float: left;
 width: 381px;
}
.muteki01-right {
 float: right;
 width: 210px;
 padding-top: 40px;
}
.muteki01-left p {
 padding-right: 10px;
}

.muteki02-left {
 float: left;
 width: 239px;
 padding-top: 10px;
}
.muteki02-right {
 float: right;
 width: 337px;
}

.muteki-meeting {
 padding: 20px 0 0 120px;
}

.muteki03-left {
 float: left;
 width: 304px;
}
.muteki03-right {
 float: right;
 width: 305px;
}

.muteki-prd-wrap {
 margin-top: 40px;
 background: url(../../img/bg_muteki_bottom_bottom.gif) no-repeat left bottom;
}
.muteki-prd {
 padding: 60px 40px 10px;
 background: url(../../img/bg_muteki_bottom_top.gif) no-repeat left top;
}
.muteki-prd-left {
 float: left;
 width: 212px;
}
.muteki-prd-right {
 float: right;
 width: 290px;
}

.muteki-prdnm {
 font-size: 123.1%;
 font-weight: bold;
 color: #DD1500;
}
.muteki-prd-right p {
 margin-bottom: 20px;
}
.muteki-prd-bt {
 text-align: center;
}