/*reset*/
body,h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,blockquote,form,table{ margin: 0; padding: 0;}
h1,h2,h3,h4,h5,h6,th,td{ font-size: 100%;}
th,td{ font-size: 0.9em; line-height: 1.5;}
ol,ul{ list-style: none;}
img{ border: none; vertical-align: text-bottom;}
table{ border-collapse: collapse; border-spacing: 0;}
/*end reset*/

body{ background: #DFDFDC; color: #333; font-family:"Hiragino Kaku Gothic Pro","Meiryo","MS Gothic"; font-size: 0.9em; text-align: center; line-height:1.5;}
a{ color: #333;}
a:hover{ color: #06C;}
.center{ text-align: center;}
.note{ font-size: 0.8em;}
.font-s{ font-size: 0.8em;}

dl.dl-table{ margin: 0 0 20px; background: #EEE; border: 1px solid #AAA; border-top: none; overflow:hidden; height:auto !important; height:1%;}
dl.dl-table dt{ display: inline; clear: both; float: left; width: 13em; margin: 0 -13em 0 0; padding: 10px 0; border-top: 1px solid #AAA; text-indent: 10px;}
dl.dl-table dd{ margin: 0 0 0 13em; padding: 10px 0 10px 10px; background: #FFF; border-top: 1px solid #AAA; border-left: 1px solid #AAA;}

#wrap{ width: 820px; margin: 0 auto; text-align: left;}
#contetns{ padding: 0 10px 20px; background: url(../images/common/bg.png) no-repeat bottom;}

#header{ background: url(../images/common/header-bg.png) repeat-x;}
#header #catch{ height: 20px; padding: 0 0 0 5px; color: #FFF; font-size: 0.8em;}
#logo-space{ height: 76px;}
#logo-space .logo{ display: inline; float: left; padding:15px 15px 0;}
#logo-space .link{ float: right; margin: 40px 10px 0 0;}
#logo-space .link li{ display: inline; float: left;}
#logo-space .link li.twitter a{ display: block; width: 34px; height: 34px; background: url(../images/common/icon/icon-set.png) no-repeat; text-indent: -9999px;}

/*nav*/
#nav { clear: both; margin: 0 0 10px; background: url(../images/common/nav-bg.png) no-repeat; overflow:hidden; height:auto !important; height:1%;}
#nav li{ float: left; height: 62px; background: url(../images/common/nav.png) no-repeat; text-indent: -9999px;}
#nav li a{ display: block; height: 62px; background: url(../images/common/nav.png) no-repeat;}
#nav #nav-home a{ width: 146px;}
#nav #nav-home a:hover,#nav #nav-home .over{ background-position: 0 -62px;}
#nav #nav-company a{ width: 171px; background-position: -146px 0;}
#nav #nav-company a:hover,#nav #nav-company .over{ background-position: -146px -62px;}
#nav #nav-service a{ width: 156px; background-position: -317px 0;}
#nav #nav-service a:hover,#nav #nav-service .over{ background-position: -317px -62px;}
#nav #nav-contact a{ width: 159px; background-position: -473px 0;}
#nav #nav-contact a:hover,#nav #nav-contact .over{ background-position: -473px -62px;}

/*topic-path*/
#topic-path{ margin: 0 0 10px; padding: 0 0 8px; font-size: 0.8em; border-bottom: 1px solid #DDD; overflow:hidden; height:auto !important; height:1%;}
#topic-path ul{ list-style: none;}
#topic-path li{ float: left; margin: 0 8px 0 0; padding: 0 0 0 10px; background: url(/images/common/icon/topic-arrow.png) no-repeat 0 50%;}
#topic-path li.none{ padding: 0; background: none;}

/*main-contents*/
#main-contents{ width: 780px; margin: 0 10px; overflow:hidden; height:auto !important; height:1%;}

/*article*/
#article{ }
#article p{ margin: 0 0 0.8em;}
#article .key-visual{ margin: 0 0 10px;}
#article .article-l{ float: left; width: 300px;}
#article .article-r{ float: right; width: 460px;}

p.new-topics{ height: 18px; margin: 0 0 10px; border-bottom: 2px solid #333; background: url(../images/common/item/news-topics.png) no-repeat; text-indent: -9999px;}
dl.new-topics{ margin: 0 0 20px;}
dl.new-topics dd{ margin: 0 0 10px; padding: 0 0 10px; background: url(../images/common/line-01.png) repeat-x bottom; font-size: 0.8em; line-height: 1.2;}

p.service-btn{ height: 18px; margin: 0 0 10px; border-bottom: 2px solid #333; background: url(../images/common/item/service.png) no-repeat; text-indent: -9999px;}
ul.service-btn li a{ display: block; width: 220px; height: 82px; margin: 0 0 10px; background: url(../images/top/web-service.png) no-repeat; text-indent: -9999px;}
ul.service-btn li.web-production{ float: left;}
ul.service-btn li.web-production a:hover{ background-position: 0 -82px;}
ul.service-btn li.web-consulting{ float: right; }
ul.service-btn li.web-consulting a{ background-position: -220px 0;}
ul.service-btn li.web-consulting a:hover{ background-position: -220px -82px;}

p.production{ clear: both; height: 18px; margin: 0 0 10px; border-bottom: 2px solid #333; background: url(../images/common/item/production.png) no-repeat; text-indent: -9999px;}
ul.production{ padding: 0 0 0 10px;}
ul.production li{ display: inline; float: left; width: 140px; margin: 0 5px 10px; font-size:0.8em; overflow:hidden; height:auto !important; height:1%;}
ul.production li img{ display: inline; float: left; margin: 0 10px 0 0;}

.company .company-profile{ clear: both; height: 38px; margin: 0 0 10px; background: url(../images/title.png) no-repeat; font-size: 0.6em; text-indent: -9999px;}
.company .president{ clear: both; height: 38px; margin: 0 0 10px; background: url(../images/title.png) no-repeat 0 -38px; font-size: 0.6em; text-indent: -9999px;}
.company .president-name{ padding: 20px 0 20px 40px;}
.company dl.dl-table{ margin: 0 20px 20px;}

.service .production{ clear: both; height: 38px; margin: 0 0 10px; background: url(../images/title.png) no-repeat 0 -76px; font-size: 0.6em; text-indent: -9999px;}
.service .consulting{ clear: both; height: 38px; margin: 0 0 10px; background: url(../images/title.png) no-repeat 0 -114px; font-size: 0.6em; text-indent: -9999px;}
.service li{ display: inline; float: left; width: 240px; margin: 0 10px 20px; text-align: center; font-size: 0.9em;}
.service li a{ text-decoration: none;}
.service li a span{ text-decoration: underline;}
.service li strong{ display: block; margin: 0 0 10px; padding: 4px; background: #EEE;}
.service li img{ margin: 0 0 10px;}
.service ul.list-consulting li{ float: left; width: 370px; margin: 0 10px 20px; text-align: center; font-size: 0.9em;}

.privacy .privacy-policy{ clear: both; height: 38px; margin: 0 0 10px; background: url(../images/title.png) no-repeat 0 -190px; font-size: 0.6em; text-indent: -9999px;}
.privacy p{ padding:0 10px;}
.privacy h2{ margin: 0 0 10px; border-bottom: 2px solid #333;}
.privacy li{ list-style: disc; margin: 0 0 1em 3em; }

.contact .contact-title{ clear: both; height: 38px; margin: 0 0 10px; background: url(../images/title.png) no-repeat 0 -152px; font-size: 0.6em; text-indent: -9999px;}
.contact .info{ margin: 0 0 20px; padding: 10px; background: #EEE;}
.contact .info strong{ color: #F00;}

#contact-form {}
#contact-form input{ width: 220px; padding: 2px 0 2px; border:1px solid #CCC; color:#464646; font-size: 1.2em; }
#contact-form .name input{ width: 100px;}
#contact-form textarea{ width: 400px; height: 100px; padding: 2px 0 2px; border:1px solid #CCC; color:#464646; font-size: 1.2em; }
#contact-form .radio input{ width: auto; padding: 2px 0 2px; border:none;}
#contact-form input.submit-btn{ width: 365px; height: 45px; margin: 0 0 0 200px; border: none; background: url(../images/common/icon/icon-set.png) no-repeat -130px 0; cursor: pointer;}
#contact-form input.submit-btn:hover{ background: url(../images/common/icon/icon-set.png) no-repeat -130px -45px;}
#contact-form input.confirm{ margin: 0; background: url(../images/common/icon/icon-set.png) no-repeat -130px -90px;}
#contact-form input.confirm:hover{ background: url(../images/common/icon/icon-set.png) no-repeat -130px -135px;}
#contact-form input.back{ margin: 0 0 0 130px; width: 165px; background: url(../images/common/icon/icon-set.png) no-repeat -130px -180px;}
#contact-form input.back:hover{ background: url(../images/common/icon/icon-set.png) no-repeat -130px -225px;}
.must{ color: #F00;}

/*footer*/
#footer{ width: 800px; margin: 0 10px 20px; font-size: 0.9em; font-family: Arial; overflow:hidden; height:auto !important; height:1%;}
#footer .link{ float: left; padding: 0 0 0 10px;}
#footer li{ float: left; margin: 0 10px 0 0;}
#footer .copyright{ float: right;}