@charset "utf-8"; /*================================================================ 1 : Basic Setting ================================================================*/ /*======== 1-1 : ========*/ html{ height: 100%; } /*======== 1-2 : ========*/ body{ text-align: center; height: 100%; background-color: #ececec; font:12px/1.8 "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Verdana,"ＭＳＰゴシック",sans-serif; } html* body {/*Safari + IE5.5-6*/ font-size:11px; } * html body {/*IE5.5-6*/ font-size:75%; } *:first-child+html body {/*IE7*/ font-size:75%; } /*======== 1-3 : Block Level ========*/ h1,div,p,ul,ol,li{ font-size: 12px; text-align: left; } h1{ font-size: 16px; font-weight: bold; background: url(../images/h1Back.gif) repeat-x 0 0; border-bottom: 1px solid #e4e4e4; margin: 0 0 10px 0; padding: 13px 10px 10px 10px; clear: both; } h1 strong{ font-size: 21px; padding-left: 0.8em; } h2{ font-size: 14px; font-weight: bold; background: url(../images/h2Back.gif) repeat-x 0 0; border-bottom: 1px solid #e4e4e4; margin: 0 0 10px 0; padding: 13px 10px 10px 10px; clear: both; } h2 span{ color: #666666; font-size: 13px; font-weight: bold; display: block; } h3{ font-size: 14px; font-weight: bold; background: url(../images/h3Back.gif) repeat-x 0 0; border-bottom: 1px solid #cccccc; margin: 10px 0; padding: 0.7em 10px 0.5em 10px; clear: both; } h4{ font-size: 12px; font-weight: bold; clear: both; } h5{ font-size: 12px; font-weight: bold; } /*IE6*/ * html h1, * html h2, * html div{ height: 1px; } /*======== 1-4 : List ========*/ ul{ list-style: none; font-size: 12px; } ol{ font-size: 12px; margin-bottom: 10px; } /*======== 1-5 : ========*/ a:link{ color: #0000CC; text-decoration: underline; } a:visited{ color: #6666CC; text-decoration: underline; } a:hover{ color: #9999FF; text-decoration: none; } a:active{ color: #9999FF; text-decoration: none; } a span { display: none; } /*======== 1-6 : etc ========*/ th, td { vertical-align: top; } img.right { float: right; padding-left: 10px; } img.left { float: left; padding-right: 10px; } .center { text-align: center; } /*================================================================ 2 : Layout Setting ================================================================*/ /*======== 2-1 : div#All ========*/ div#wrapper{ width: 100%; min-height: 100%; margin: 0 auto; position: relative; } /*======== 2-2 : div#header ========*/ div#header{ width: 100%; height: 90px; background-image: url(../images/headerBack.gif); background-repeat: repeat-x; } div#header .container{ width: 900px; height: 90px; margin:0 auto; position: relative; } div#header h1#logo{ background-image: none; border-bottom: none; margin: 0; padding: 0; position: absolute; top: 30px; } div#header p#logo{ position: absolute; top: 30px; } div#header #description{ font-size: 11px; color: #dfdfdf; position: absolute; top: 7px; left: 0; } div#header ul{ position: absolute; width: 380px; top: 7px; right: 0; } div#header ul li{ font-size: 10px; _font-size: 9px; display: block; float: right; background-position: 0 2px; background-repeat: no-repeat; margin-left: 13px; padding-left: 16px; } div#header ul li a:link, div#header ul li a:visited{ color: #e6e6e6; text-decoration: none; } div#header ul li a:hover{ color: #a5c2f8; text-decoration: underline; } div#header ul li.access{ background-image: url(../images/liAccess.gif); } div#header ul li.privacy{ background-image: url(../images/liPrivacy.gif); } div#header ul li.sitemap{ background-image: url(../images/liSitemap.gif); } div#header ul li.english{ background-image: url(../images/liEnglish.gif); } div#header p.contact a{ position: absolute; top: 45px; right: 0; width: 150px; height: 25px; background: url(../images/headerContact.gif) no-repeat 0 0; } div#header p.contact a:hover{ background: url(../images/headerContact.gif) no-repeat 0 -25px; } /*======== 2-3 : div#nav ========*/ div#nav{ width: 100%; } div#nav .container{ width: 900px; margin:0 auto; } div#nav .container ul{ width: 900px; display: block; } div#nav .container ul li a{ text-decoration: none; } /*======== 2-4 : div#globalMenu ========*/ div#nav #globalMenu{ height: 40px; background-image: url(../images/navGlobalBack.gif); background-repeat: repeat-x; } div#nav #globalMenu ul{ height: 40px; background: url(../images/navGlobalMenu.gif) no-repeat 0 0; } div#nav #globalMenu ul li{ display: block; float: left; } div#nav #globalMenu ul li a{ color: #313131; font-size: 1px; height: 40px; text-align: center; display: block; text-decoration: none; } div#nav #globalMenu ul li a:hover{ color: #767676; } div#nav #globalMenu ul li a.root{ color: #5a8ce7; } div#nav #globalMenu ul li.business a, div#nav #globalMenu ul li.business a:visited{ background: url(../images/navGlobalMenu.gif) no-repeat 0 0; width: 210px; } div#nav #globalMenu ul li.business a:hover{ background: url(../images/navGlobalMenu.gif) no-repeat 0 -40px; } div#nav #globalMenu ul li.business a.root{ background: url(../images/navGlobalMenu.gif) no-repeat 0 -80px; } div#nav #globalMenu ul li.appli a, div#nav #globalMenu ul li.appli a:visited{ background: url(../images/navGlobalMenu.gif) no-repeat -210px 0; width: 210px; } div#nav #globalMenu ul li.appli a:hover{ background: url(../images/navGlobalMenu.gif) no-repeat -210px -40px; } div#nav #globalMenu ul li.appli a.root{ background: url(../images/navGlobalMenu.gif) no-repeat -210px -80px; } div#nav #globalMenu ul li.sensor a, div#nav #globalMenu ul li.sensor a:visited{ background: url(../images/navGlobalMenu.gif) no-repeat -420px 0; width: 210px; } div#nav #globalMenu ul li.sensor a:hover{ background: url(../images/navGlobalMenu.gif) no-repeat -420px -40px; } div#nav #globalMenu ul li.sensor a.root{ background: url(../images/navGlobalMenu.gif) no-repeat -420px -80px; } div#nav #globalMenu ul li.company a, div#nav #globalMenu ul li.company a:visited{ background: url(../images/navGlobalMenu.gif) no-repeat -630px 0; width: 135px; } div#nav #globalMenu ul li.company a:hover{ background: url(../images/navGlobalMenu.gif) no-repeat -630px -40px; } div#nav #globalMenu ul li.company a.root{ background: url(../images/navGlobalMenu.gif) no-repeat -630px -80px; } div#nav #globalMenu ul li.career a, div#nav #globalMenu ul li.career a:visited{ background: url(../images/navGlobalMenu.gif) no-repeat -765px -0; width: 135px; } div#nav #globalMenu ul li.career a:hover{ background: url(../images/navGlobalMenu.gif) no-repeat -765px -40px; } div#nav #globalMenu ul li.career a.root{ background: url(../images/navGlobalMenu.gif) no-repeat -765px -80px; } /*======== 2-5 : div#subMenu ========*/ div#nav #subMenu{ height: 30px; background-image: url(../images/navSubBack.gif); background-repeat: repeat-x; clear: both; } div#nav #subMenu div.container{ width: 900px; margin:0 auto; text-align: center; position: relative; } div#nav #subMenu div.container ul{ width: auto; height: 30px; position: absolute; } div#nav #subMenu div.container ul#subAppli{ left: 208px; } div#nav #subMenu div.container ul#subSensor{ left: 380px; } div#nav #subMenu div.container ul#subCompany, div#nav #subMenu div.container ul#subRecruit{ right: -20px; } div#nav #subMenu ul li{ color: #f9f9f9; font-size: 12px; line-height:2.5em; float:left; margin-right: 20px; } div#nav #subMenu ul li a{ color: #f9f9f9; display:block; padding: 0 15px 0 0; } div#nav #subMenu ul li a span{ display: block; padding: 0 0 0 15px; } div#nav #subMenu ul li a:hover{ color: #f9f9f9; } div#nav #subMenu ul li a:hover, div#nav #subMenu ul li a.root{ background:url(../images/navSubMenuRight.gif) no-repeat right center; } div#nav #subMenu ul li a:hover span, div#nav #subMenu ul li a.root span{ background:url(../images/navSubMenuLeft.gif) no-repeat left center; } /*======== 2-6 : div#breadcrumbs ========*/ div#nav #breadcrumbs{ height: 30px; background-image: url(../images/navBreadcrumbsBack.gif); background-repeat: repeat-x; clear: both; } div#nav #breadcrumbs ul{ height: 30px; } div#nav #breadcrumbs ul li{ color: #555555; font-size: 11px; _font-size: 10px; line-height:2.7em; padding-left:.75em; float:left; } div#nav #breadcrumbs ul li a{ color: #555555; background:url(../images/navBreadcrumbsArrow.gif) no-repeat right center; display:block; padding:0 15px 0 0; } div#nav #breadcrumbs ul li a:hover{ color: #a5c2f8; } /*======== 2-7 : div#content ========*/ div#indexContent{ background-color: #ececec; width: 100%; min-height: 100px; margin: 0 auto; } div#indexImage{ width: 906px; height: 206px; margin: 0 auto; padding: 5px 0; } div#indexContent01{ background: url(../images/indexContent01Back.gif) no-repeat left bottom; width: 906px; min-height: 130px; margin: 0 auto; overflow: auto; _overflow: visible; } div#indexContent02{ background: url(../images/indexContent02Back.gif) no-repeat left bottom; width: 906px; min-height: 180px; margin: 6px auto 0 auto; overflow: auto; _overflow: visible; } div#indexContent02 h2{ background-image: none; margin: 0; padding: 0; border-bottom: none; } /*======== 2-8 : div#section ========*/ #section{ width: 900px; margin: 10px auto 7px auto; } /*======== 2-9 : div.article div.sectionFooter ========*/ div.articleHeader{ width: 860px; padding: 20px 20px 0 20px; background: url(../images/articleHeaderBack.gif) no-repeat 0 0; clear: both; } div.article{ width: 860px; padding: 20px; margin-bottom: 3px; background: url(../images/articleBack.gif) no-repeat 0 bottom; overflow: auto; _overflow: visible; clear: both; position: relative; } div.sectionFooter{ width: 880px; padding: 10px 10px 20px 10px; margin-bottom: 3px; background: url(../images/articleBack.gif) no-repeat 0 bottom; overflow: auto; _overflow: visible; clear: both; } div.sectionFooter{ border-top: 1px solid #CCCCCC; } /*======== div#footer ========*/ div#footer{ background-color: #161616; margin-top: 35px; width: 100%; height: 105px; /* 任意の数値 */ clear: both; background-image: url(../images/footerBack.gif); background-repeat: repeat-x; background-position: left top; /*position: absolute; bottom: 0;*/ } .index div#footer{ margin-top: 10px; } div#footer div.container{ width: 900px; height: 90px; margin:0 auto; padding-top: 15px; position: relative; } div#footer p{ color: #e6e6e6; font-size: 11px; _font-size: 10px; } div#footer .container p#companyProfile{ width: 280px; display: block; float: left; } div#footer p a:link, div#footer p a:visited{ color: #e6e6e6; text-decoration: underline; } div#footer p a:hover{ color: #a5c2f8; text-decoration: none; } div#footer .container div{ width: 620px; display: block; float: right; text-align: right; } div#footer .container div p{ text-align: right; height: 20px; } div#footer .container div ul{ display: block; height: 20px; } div#footer ul li{ font-size: 10px; _font-size: 9px; display: block; } div#footer ul.mainMenu li{ background: url(../images/footerLiLine.gif) no-repeat 0 3px; margin-left: 5px; padding-left: 5px; float: right; } div#footer ul.mainMenu li.first{ background: none; } div#footer ul.subMenu li{ float: right; } div#footer ul li.access, div#footer ul li.privacy, div#footer ul li.sitemap{ background-position: 0 2px; background-repeat: no-repeat; margin-left: 13px; padding-left: 15px; } div#footer ul li.access{ background-image: url(../images/liAccess.gif); } div#footer ul li.privacy{ background-image: url(../images/liPrivacy.gif); } div#footer ul li.sitemap{ background-image: url(../images/liSitemap.gif); } div#footer ul li a:link, div#footer ul li a:visited{ color: #e6e6e6; text-decoration: none; } div#footer ul li a:hover{ color: #a5c2f8; text-decoration: underline; } div#footer p#backtoPagetop { position: absolute; top: -30px; left: 780px; } div#footer p#backtoPagetop a span { display: none; } div#footer p#backtoPagetop a { background: url(../images/footerBtnPagetop.gif) no-repeat 0 0; width: 120px; height: 30px; display: block; } div#footer p#backtoPagetop a:hover { background: url(../images/footerBtnPagetop.gif) no-repeat 0 -30px; }