@charset "utf-8";
/* CSS Document */

/* 製品タブ */
ul#products_tub{ width: 940px; margin: 0 auto; list-style: none; border-bottom: 1px solid #999;}
ul#products_tub li{display: block; float: left; font-size: 18px; width: 400px; height: 50px; text-align: center; line-height: 50px; color: #FFF; margin:0 12px -1px 0; padding:0; background: #999; border-bottom:1px #999 solid;}
ul#products_tub li.active{ color: #000; background: #FFF; border:1px #999 solid; border-bottom:1px #FFF solid;}
ul#products_tub li a{display: block; width: 400px; height: 50px; color: #FFF;}
ul#products_tub li a:hover{color: #000; background-color: #EEE; border:1px #999 solid;}
.tub_content{width: 940px; border:1px #999 solid; border-top:none; margin: 0 auto 30px;}
#product_category {width:920px; margin: 0 0 0 20px; padding: 15px 0 30px; list-style: none;}
#product_category li{width: 273px; margin:20px 0 0 20px; display: block; float: left; font-size: 12px;}

#product_usage{width:919px; margin: 0 0 0 21px; padding: 15px 0 30px; list-style: none;}
#product_usage li{width: 157px; margin:20px 0 0 19px; display: block; float: left; font-size: 12px;}
#product_usage li img{width: 100%; height: auto;}

#products_name_box{background: #000; min-width:960px;}
#products_name_pdd{width:960px; margin: 0 auto;}
#products_name{height:250px; width: 960px; color:#FFF; font-size: 20px; padding-left: 10px; line-height: 1.7em; display: table-cell; vertical-align: middle;}
.products_image{width: 270px; padding-left: 30px; background-color: #FFF; float: right; text-align: right;}
.products_image img{width: 240px; height: auto;}

.scroll{overflow: auto;}
.scroll::-webkit-scrollbar{ height: 8px;}
.scroll::-webkit-scrollbar-track{background: #F1F1F1;}
.scroll::-webkit-scrollbar-thumb {background: #BCBCBC;}
table.grade{border-top:#CCC 1px solid; border-right:#CCC 1px solid; width: 720px;}
table.grade th{background-color: #D8DDE2; border-left:#CCC 1px solid; border-bottom:#CCC 1px solid; text-align: center; padding: 3px; font-weight: bold; line-height: 1.4em;}
table.grade td{ border-left:#CCC 1px solid; border-bottom:#CCC 1px solid; padding: 3px; line-height: 1.4em;}

#prod_contact_box{background-color:#EFF2F6; border-radius: 8px; padding: 20px; margin: 30px 0 0;}
.prod_contact{font-size: 14px; font-weight: bold;}
.division{font-size: 15px; font-weight: bold; padding-bottom: 0;}
#division_box{width: 63%; float: left;}
span.number{font-size: 20px; font-weight: bold;}
#mail{margin: 20px 0 0;}
#mail a{display: block; width: 32%; line-height: 40px; padding: 0 0 0 60px; float: right; border-radius: 5px; color: #FFF; background: url(../images/icon_mail.png) no-repeat 20px 50% #014099; text-decoration: none;}
#mail a:visited{color: #FFF;}
#mail a:hover, #mail a:focus{background: url(../images/icon_mail.png) no-repeat 20px 50% #019994; color: #FFF;}

#catalog_dl{margin: 30px 0 0;}
#dl_title{background: #00123A; color: #FFF; padding: 3px 10px;}
#catalog_dl_list{border-bottom: #CCC 1px solid; border-left: #CCC 1px solid; border-right: #CCC 1px solid; list-style: none; padding: 5px 0;}
#catalog_dl_list li{display: block; width: 195px; padding:0; font-size: 12px; line-height: 1.4em;}
#catalog_dl_list li a{display: block; width: 195px; padding: 5px 0 5px 28px; background: url(../images/pdficon.png) no-repeat 5px 50%;}

#mainarea .usage_link{display: block; width: 50%; margin: 0 0 15px; line-height: 22px; font-size: 14px;}
#mainarea .usage_link a{color: #FFF; text-decoration: none; display: block; line-height: 22px; padding:8px 38px 8px 8px; border-radius: 5px; background: url(../images/arrow_wl.png) no-repeat 96% 50% #014099;}
#mainarea .usage_link a:hover, #mainarea .usage_link a:focus{color: #FFF; border-radius: 5px; background: url(../images/arrow_wl.png) no-repeat 96% 50% #019994;}

.wrapper_whatis{width:940px; margin: 0 auto 30px;}
#whatis dt{border-bottom: #00123A solid 1px; padding:5px 0; margin:15px 0; font-size: 18px; font-weight: bold; clear:both;}
#whatis dd{padding:0 0 0 40px; margin: 0 0 30px;}
#whatis dd p{width: 600px; float: left;}
#whatis dd div.whatis_photo{display: block; width: 220px; float: right;}
h3#whatis01, h3#whatis02, h3#whatis03, h3#whatis04, h3#whatis05{padding:110px 0 0; margin: -110px 0 15px;}

@media screen and (max-width: 640px) {

/* 製品タブ */
ul#products_tub{ width:100%; list-style: none; border-bottom: 1px solid #999;}
ul#products_tub li{font-size: 12px; width:45%; height: 30px; line-height: 30px;}
ul#products_tub li a{ width: 100%; height: 30px; color: #FFF;}
.tub_content{width:100%; border:none;}


#product_category {width:100%; margin:0; padding: 10px 10px 15px;}
#product_category li{width:100%; margin:10px 0 0 0; display: block; float:none; border-bottom: dotted 1px #CCC; padding: 0 0 8px 0;}
#product_category li img{border: 1px solid #FFF; width: 20%; height: auto; float: left; }
#product_category li p{ padding: 0 0 0 22%;}

#product_usage {width:100%; margin:0; padding: 10px 10px 15px;}
#product_usage li {width:100%; margin:10px 0 0 0; display: block; float:none; border-bottom: dotted 1px #CCC; padding: 0 0 8px 0;}
#product_usage li img{border: 1px solid #FFF; width: 20%; height: auto; float: left; }
#product_usage li p{ padding: 0 0 0 22%;}

#products_name_box{width:100%; min-width:inherit;}
#products_name_pdd{width:100%; margin: 0;}
#products_name{height:140px; width:640px; font-size: 18px; line-height: 1.7em;}
.products_image{width:80%; margin: 0 auto; padding-left:0; background-color: #FFF; float:none; text-align:center;}
.products_image img{width:100%; height: auto;}
table.grade{width:auto;}
table.grade th, table.grade td{font-size: 11px; line-height: 1.4em;}

#prod_contact_box{padding:20px 10px;}
.prod_contact{font-size: 13px; font-weight: bold;}
.division{font-size: 14px;}
#division_box{width:100%; float:none;}
#mail{margin: 10px 0 0; text-align: center;}
#mail a{display: block; padding: 0 0 0 30px; width: 100%; margin: 0 auto; float:none; background: url(../images/icon_mail.png) no-repeat 15% 50% #014099;}
#mail a:hover, #mail a:focus{background: url(../images/icon_mail.png) no-repeat 15% 50% #019994;}

#catalog_dl{margin:0;}
#catalog_dl_list li{width:100%;}
#catalog_dl_list li a{width:100%;}

#mainarea .usage_link{width:100%; margin: 0 auto 15px; font-size: 12px;}

.whatis_box{line-height: 2em; margin: 0; padding: 0;}
.wrapper_whatis{width:96%;}
#whatis dt{ padding:5px 0 0; margin:15px 0; font-size: 15px;}
#whatis dd{padding:0; margin:0 0 15px;}
#whatis dd p{width:100%; float:none;}
#whatis dd div.whatis_photo{display: block; width: 45%; margin-left: 5%}
#whatis dd div.whatis_photo img{width:100%; height:auto;}
h3#whatis01, h3#whatis02, h3#whatis03, h3#whatis04, h3#whatis05{margin: -110px 0 5px;}


}