@charset "UTF-8";

/* ------------------------- print ------------------------- */
@media print {
body { overflow-y: visible !important; -webkit-print-color-adjust: exact; }
#video { background: url(../images/video.jpg) center center no-repeat #000!important; }
video { display: none; }
.para div { opacity: 1!important; }
}
/* ------------------------- scroll ------------------------- */
*html body { /*IE6*/ overflow-y: auto; }
*+html body { /*IE7*/ overflow-y: auto; }
body { overflow-y: scroll; }
/* ------------------------- base ------------------------- */
body { font-family: 'Hiragino Kaku Gothic Pro', Meiryo, Arial, 'MS PGothic', sans-serif; font-size: 14px; line-height: 21px; color: #333; background-color: #fff; }
p { margin-bottom: 10px; }
a { color: #069; text-decoration: underline; }
a:hover { color: #036; }
input { font-size: 100%; }
hr { height: 1px; margin: 20px 0; border: none; border-top: solid 1px #ddd; }
.left { float: left; }
.right { float: right; }
.clear { display: block; clear: both; height: 1px; line-height: 0px; font-size: 0px; margin-bottom: -1px; }
.clearfix { width: 100%; overflow: auto; }
.clearfix:after { content: ""; display: block; clear: both; }
.align-left { text-align: left; }
.align-center { text-align: center; }
.align-right { text-align: right; }
.no-margin { margin: 0 !important; }
.fade { }
.swap { }
#header-nav { -moz-border-radius: 3px; /* gecko */ -webkit-border-radius: 3px; /* webkit */ border-radius: 3px; /* CSS3 standard */ -khtml-border-radius: 3px; /* old konkeror */ -webkit-border-bottom-right-radius: 3px; -webkit-border-bottom-left-radius: 3px; -webkit-border-top-right-radius: 3px; -webkit-border-top-left-radius: 3px; -khtml-border-radius-bottomright: 3px; -khtml-border-radius-bottomleft: 3px; -khtml-border-radius-topright: 3px; -khtml-border-radius-topleft: 3px; -moz-border-radius-bottomright: 3px; -moz-border-radius-bottomleft: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-topleft: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; border-top-right-radius: 3px; border-top-left-radius: 3px; }
#footer, .round { -moz-border-radius: 5px; /* gecko */ -webkit-border-radius: 5px; /* webkit */ border-radius: 5px; /* CSS3 standard */ -khtml-border-radius: 5px; /* old konkeror */ -webkit-border-bottom-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-top-right-radius: 5px; -webkit-border-top-left-radius: 5px; -khtml-border-radius-bottomright: 5px; -khtml-border-radius-bottomleft: 5px; -khtml-border-radius-topright: 5px; -khtml-border-radius-topleft: 5px; -moz-border-radius-bottomright: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-topleft: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; border-top-right-radius: 5px; border-top-left-radius: 5px; }
/* ------------------------- toppage ------------------------- */
#wrapper { min-width: 960px; }
#header { width: 960px; height: 80px; margin: 0 auto; }
#header-logo { float: left; width: 640px }
#header-nav { float: right; width: 320px; height: 30px; font-size: 11px; line-height: 30px; margin-top: 25px; background: #f5f5f5; overflow: hidden; }
.btn-fb, .btn-twitter, .btn-google { float: left; margin: 5px 0 0 5px; line-height: 20px; }
.btn-fb { width: 70px; overflow: hidden; }
.btn-twitter { width: 67px; overflow: hidden; }
#header-lang { float: right; }
#header-lang a { color: #666; text-decoration: none; padding: 0 8px 0 12px; background: url(../images/arrow-1.png) 0 3px no-repeat; }
#nav { position: relative; background: url(../images/bg-nav.png) top center no-repeat; z-index: 2; }
#nav ul { width: 960px; height: 60px; margin: 0 auto; }
#nav li { float: left; width: 137px; height: 60px; overflow: hidden; }
.eng #nav li { width: 240px; }
#billboard { width: 1040px; height: 360px; margin: 10px auto; overflow: hidden; }
#top { width: 960px; margin: 10px auto 40px; }
#top-banner { height: 120px; margin-bottom: 20px; padding-left: 5px; background: url(../images/bg-banner.png) top left no-repeat; }
#top-banner div { float: left; padding: 8px; }
#top-info { float: left; width: 620px; font-size: 13px; line-height: 21px; }
#top-side { float: right; width: 320px; }
.top-side-box { padding: 10px; background: #f5f5f5; }
#footer { font-size: 12px; line-height: 20px; width: 880px; margin: 0 auto; padding: 40px; background: #f5f5f5; }
#footer-logo { float: left; }
#footer-nav { float: right; }
#footer-nav ul { float: left; padding: 0 20px 0 20px; border-left: solid 1px #ccc; }
#footer-nav li { list-style: none; white-space: nowrap; }
#footer-nav a { color: #333; text-decoration: none; padding-left: 20px; background: url(../images/arrow-1.png) 0 3px no-repeat; }
#footer-gototop { float: right; }
#copyright { font-family: Verdana, Geneva, sans-serif; font-size: 11px; color: #999; height: 60px; line-height: 60px; text-align: center; }
/* ------------------------- page ------------------------- */
h1 { width: 960px; margin: 20px auto; }
h2 { clear: both; font-size: 20px; height: 50px; line-height: 50px; margin-bottom: 30px; padding-left: 30px; background: url(../images/bg-h2.png) left top no-repeat; }
h2 .small { font-size: 14px; }
h3 { clear: both; font-size: 16px; line-height: 40px; margin: 20px 0; border-bottom: solid 1px #ddd; }
#container { width: 860px; min-height: 500px; margin: 20px auto 0; padding: 50px; background: url(../images/bg-container.png) top left no-repeat; }
#container ul { margin: 0 0 10px 20px; }
#eco { background: url(../images/bg-eco.jpg) 460px 100px no-repeat; }
#history .left { width: 600px; }
#history .right { width: 240px; }
#select { margin-bottom: 10px; padding: 20px; border: solid 1px #ddd; }
#select ul { margin: 0!important; }
#select li { float: left; margin-bottom: 10px; padding: 0 20px 0 10px; background: url(../images/arrow-1.png) left 50% no-repeat; list-style: none; }
#show { padding: 30px 30px 50px 30px; border: solid 1px #ddd; }
#show table { margin: 0 auto; }
#show td { padding-left: 5px; text-align: left; }
.form input { width: 400px!important; }
.form textarea { width: 400px!important; }
.btn-submit { font-size: 16px; font-weight: bold; height: 50px; }
.item-q { padding-left: 30px; background: url(../images/icon-q.png) 0 0 no-repeat; text-decoration: underline; cursor: pointer; zoom: 1; }
.item-q:hover { color: #c30; }
.item-a { margin-bottom: 20px; padding: 0 0 20px 30px; border-bottom: solid 1px #ddd; background: url(../images/icon-a.png) 0 0 no-repeat; zoom: 1; }
/* ------------------------- 2015 ------------------------- */
#index { position: relative; top: -20px; z-index: 1; }
#video { height: 600px; background: #000; }
#video-overlay { color: #fff; position: absolute; width: 100%; height: 600px; background: rgba(0,0,0,0.5); text-align: center; }
#video-txt-1 { font-family: 'Roboto', sans-serif; font-size: 48px; font-weight: 300; font-style: italic; margin-top: 200px; }
#video-txt-2 { font-size: 18px; margin-top: 30px; }
#video-txt-3 { font-size: 16px; margin-top: 20px; }
#video-txt-3 a { display: inline-block; color: #fff; width: 300px; height: 70px; line-height: 70px; border: solid 1px #fff; border-radius: 4px; background-image: url(../images/arrow-4.png); background-position: 93% 50%; background-size: 8px; background-repeat: no-repeat; text-decoration: none; transition: all .2s; }
#video-txt-3 a:hover { background-position: 95% 50%; background-color: rgba(252,252,252,0.1); }
#video-inner { position: absolute; width: 100%; height: 600px; overflow: hidden; }
video { top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height: auto; }
.mobile #video-inner { background: url(../video/video.gif) center center no-repeat; background-size: cover; }
.mobile video { display: none; }
#index-main { width: 960px; margin: 0 auto; padding: 20px 0; }
#index-main a img { transition: all .2s; }
#index-main a:hover img { opacity: 0.8; }
#index-main h2 { font-family: 'Roboto', sans-serif; font-size: 30px; font-weight: 300; font-style: italic; height: auto; line-height: 1; margin: 40px 0; padding: 0; background: none; text-align: center; }
.index-bnr:after { content: ""; display: block; clear: both; }
.index-bnr-item { float: left; margin-right: 15px; }
.index-bnr-item:last-child { margin: 0; }
#index-info { margin-bottom: 20px; padding: 30px 50px; border: solid 1px #ddd; background: #f5f5f5; }
#index-info hr { margin: 15px 0; }
#techtom { position: relative; top: -20px; margin-bottom: 30px; z-index: 1; }
#techtom h2 { font-family: 'Roboto', sans-serif; font-size: 18px; height: auto; line-height: 1.5; margin: 0 0 20px; padding: 0; background: none; }
#tt-cover { position: relative; color: #fff; height: 500px; background: #000; text-align: center; overflow: hidden; }
#tt-cover-bg { position: absolute; width: 100%; height: 100%; background: url(../images/pic-tt-cover.jpg) center center no-repeat; background-size: cover; opacity: 0; }
#tt-cover-1 { position: relative; top: 200px; font-family: 'Roboto', sans-serif; font-size: 48px; font-weight: 300; font-style: italic; }
#tt-cover-2 { position: relative; top: 230px; font-size: 18px; }
.tt-sec { height: 500px; overflow: hidden; }
.tt-sec-orange { color: #fff; background: #c60; }
.tt-sec-grey { background: #f5f5f5; }
.tt-box { display: table; width: 960px; height: 100%; margin: 0 auto; }
.tt-box-inner { display: table-cell; width: 400px; padding: 40px; vertical-align: middle; }
.para { position: relative; display: inline-block; width: 400px; height: 400px; }
.para div { position: absolute; top: 0; left: 0; opacity: 0; }
#tt-footer { padding: 80px 0; background: #f5f5f5; text-align: center; overflow: hidden; }
#tt-footer h2 { margin-bottom: 30px; }
#tt-footer p { margin-bottom: 20px; }
#tt-footer a { color: #c60; text-decoration: none; transition: all .2s; }
#tt-footer a:hover { opacity: 0.9; }
#tt-footer .para { display: block; width: 880px; height: auto; margin: 0 auto; }
#tt-footer .para:after { content: ""; display: block; clear: both; }
#tt-footer .para div { position: relative; top: auto; left: auto; }
#tt-footer .para #p5-2, #tt-footer .para #p5-3 { float: left; font-weight: bold; width: 440px; height: auto; line-height: 2; text-align: left; }
#tt-footer .para #p5-3 { float: right; width: 400px; }
#tt-footer ul { margin: 0 0 0 20px; }
/* ------------------------- custom ------------------------- */
.box-1 { width: auto; margin-bottom: 10px; padding: 20px; border: solid 1px #ddd; }
.border-1 { clear: both; height: 1px; line-height: 1px; border-top: solid 1px #ddd; margin: 10px 0; overflow: hidden; }
.btn-three { display: table; width: 100%; margin-bottom: 20px; }
.btn-three div { display: table-cell; width: 33%; padding: 0 5px; }
.btn-three a { display: block; color: #fff; padding: 10px 0; border-radius: 3px; background: url(../images/arrow-3.png) 15px 50% no-repeat #c30; text-decoration: none; text-align: center; transition: all .3s; }
.btn-three a:hover { opacity: 0.8; }
.icon-link { padding-left: 20px; background: url(../images/arrow-1.png) 0 3px no-repeat; }
img.left { margin: 0 20px 20px 0; }
img.right { margin: 0 0 20px 20px; }
.list-1 {/*FCMナビ*/ width: 860px; height: 60px; margin: 0 0 20px 0!important; overflow: hidden; }
.list-1 li { float: left; list-style: none; background: #f5f5f5; }
.list-1 li:hover { background: #eee; }
.list-1 li a { display: block; color: #333; font-weight: bold; width: 171px; height: 60px; line-height: 60px; border-right: solid 1px #fff; background: url(../images/arrow-2.png) 20px 50% no-repeat; text-align: center; text-decoration: none; }
.list-2 li {/*サイトマップ*/ padding-left: 20px; background: url(../images/arrow-1.png) 0 6px no-repeat; list-style: none; }
.list-3 li {/*横並びリスト*/ float: left; margin: 0 20px 10px 0; padding-left: 15px; background: url(../images/arrow-1.png) 0 50% no-repeat; list-style: none; }
.list-3 a { white-space: nowrap; }
.style-1 {/*オレンジ・太字*/ color: #c30; font-weight: bold; }
.style-2 {/*グレー・小文字*/ color: #666; font-size: 12px; line-height: 18px; }
.style-3 {/*必須*/ color: #c30; font-size: 12px; }
.style-4 {/*文字大*/ font-size: 16px; font-weight: bold; line-height: 24px; }
.table-1 {/*標準テーブル（線のみ）*/ width: 100%; border-top: solid 1px #ddd; margin-bottom: 10px; }
.table-1 th { font-weight: normal; text-align: left; width: 100px; }
.table-1 th, .table-1 td { padding: 10px; border-bottom: solid 1px #ddd; }
.table-1 .even th, .table-1 .even td { background: #f7f7f7; }
.table-2 {/*標準テーブル（製品仕様）*/ width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.table-2 th { text-align: left; width: 100px; background: #f7f7f7; }
.table-2 th, .table-2 td { padding: 10px 20px; border: solid 1px #ddd; vertical-align: middle; }
.table-3 {/*グリッドレイアウト用*/ margin-bottom: 10px; }
.table-3 td { padding: 5px; vertical-align: top; }
.table-4 {/*標準テーブル（製品仕様）*/ width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.table-4 th { width: 100px; background: #f7f7f7; }
.table-4 td { font-size: 12px; }
.table-4 th, .table-4 td { padding: 10px 20px; border: solid 1px #ddd; text-align: left; vertical-align: middle; }
.table-4 {/*標準テーブル（製品比較）*/ width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.table-4 th { width: 100px; background: #f7f7f7; }
.table-4 td { font-size: 12px; }
.table-4 th, .table-4 td { padding: 10px 20px; border: solid 1px #ddd; text-align: left; vertical-align: middle; }
.table-5 {/*標準テーブル（機能比較）*/ font-size: 11px; line-height: 16px; width: 100%; margin-bottom: 10px; border-collapse: collapse; }
.table-5 th, .table-5 td { padding: 5px; border: solid 1px #ddd; text-align: center; }
.table-5 th { background: #f7f7f7; white-space: nowrap; text-align: left; vertical-align: middle; }
.table-6 {/*標準テーブル（線のみ、係数募集中）*/ width: 100%; border-top: solid 1px #ddd; margin-bottom: 10px; }
.table-6 th { font-weight: normal; text-align: left; white-space: nowrap; }
.table-6 th, .table-6 td { padding: 10px 20px 10px 0; border-bottom: solid 1px #ddd; vertical-align: top; }