@charset "UTF-8"; /* 全体の背景画像 */ body { margin: 0; padding: 0 20px; background: url(../images/background_shadow.png) repeat-y top left; } /* 画像で置換したテキストを消す */ .alt_text { display: block; position: reletive; text-indent:-9999px; overflow:hidden; } a { color: #b38000; font-weight: bold; } a:visited { color: #d99b00; } /* バグ全称セレクタがコメントと勘違いされて読み込めない？ */ /*========== 共通 ==========*/ /* 構成 ┏━━━━━━━━┓ ┃┏━━.container━━┓┃ ┃┃┏━━━━━━━┓┃┃ ┃┃┃ #header　　 ┃┃┃ ┃┃┗━━━━━━━┛┃┃ ┃┃┏━━━━━━━┓┃┃ ┃┃┃ #header_nav ┃┃┃ ┃┃┗━━━━━━━┛┃┃ ┃┃┏━━━━━━━┓┃┃ ┃┃┃ ┃┃┃ ┃┃┃ #main ┃┃┃ ┃┃┃ ┃┃┃ ┃┃┗━━━━━━━┛┃┃ ┃┃┏━━━━━━━┓┃┃ ┃┃┃ #footer_nav ┃┃┃ ┃┃┗━━━━━━━┛┃┃ ┃┃┏━━━━━━━┓┃┃ ┃┃┃ #footer ┃┃┃ ┃┃┗━━━━━━━┛┃┃ ┃┗━━━━━━━━━┛┃ ┗━━━━━━━━━━━┛ */ /* 背景画像をのぞいた中身 */ #container { width: 740px; background-color: rgb(255,255,140); } /* ページ上部のヘッダー */ #header { position: relative; width: 740px; height: 77px; background-color: rgb(255,184,0); } #header #logo { position: absolute; width: 176px; height: 106px; background: url(../images/logo.png) no-repeat; } #header #link_saas { display: block; position: absolute; left: 514px; top: 10px; width: 118px; height: 58px; background: url(../images/buttons.png) no-repeat -336px 0; } #header a#link_saas:hover { background-position: -336px -58px; } #header #link_download { display: block; position: absolute; left: 639px; top: 10px; width: 91px; height: 58px; background: url(../images/buttons.png) no-repeat -454px 0; } #header a#link_download:hover { background-position: -454px -58px; } /* ページ上部のナビゲーション */ ul#header_nav { display: block; position: relative; width: 740px; height: 50px; z-index:100; } ul#header_nav li{ position: absolute; } ul#header_nav li, ul#header_nav li a, ul#header_nav li a span, ul#header_nav li a div{ display: block; width: 148px; height: 50px; cursor:pointer; } ul#header_nav li#link_top { left: 0px; } ul#header_nav li#link_product { left: 148px; } ul#header_nav li#link_inquiry { left: 296px; } ul#header_nav li#link_blog { left: 444px; } ul#header_nav li#link_manual { left: 592px; } ul#header_nav li a { background-image: url(../images/header_nav_new.png); } ul#header_nav li#link_top a { background-position: 0 0; } ul#header_nav li#link_product a { background-position: -148px 0; } ul#header_nav li#link_inquiry a { background-position: -296px 0; } ul#header_nav li#link_blog a { background-position: -444px 0; } ul#header_nav li#link_manual a { background-position: -592px 0; } ul#header_nav li#link_blog a#dev_blog { background-position: -444px -100px; display:none; } ul#header_nav li#link_blog a#dev_forum { background-position: -444px -150px; display:none; } body.product ul#header_nav li#link_product a { background-position: -148px -50px; } body.inquiry ul#header_nav li#link_inquiry a { background-position: -296px -50px; } body.blog ul#header_nav li#link_blog a { background-position: -444px -50px; } body.manual ul#header_nav li#link_manual a { background-position: -592px -50px; } ul#header_nav li#link_top a:hover { background-position: 0 -50px; } ul#header_nav li#link_product a:hover { background-position: -148px -50px; } ul#header_nav li#link_inquiry a:hover { background-position: -296px -50px; } ul#header_nav li#link_blog a:hover { background-position: -444px -50px; } ul#header_nav li#link_manual a:hover { background-position: -592px -50px; } ul#header_nav li#link_blog:hover #dev_blog { display:block;} ul#header_nav li#link_blog:hover #dev_forum { display:block;} ul#header_nav li#link_blog a#dev_blog:hover {background-position: -592px -100px;} ul#header_nav li#link_blog a#dev_forum:hover {background-position: -592px -150px;} /* フッターナビ */ #footer_nav { clear: both; padding: 2px 0 4px; text-align: center; } #footer_nav ul li{ display: inline; margin: 0 4px; font-size: 90%; } /* フッター（著作権表示） */ #footer { height: 25px; color: white; font-size: 80%; font-weight: bold; clear: both; text-align: center; padding: 17px 0px 4px; background: rgb(127,148,57) url(../images/footer_background.png) repeat-x top left; } #footer a{ color: white; text-decoration: none; } #footer a:hover{ text-decoration: underline; } /* コンテンツ部分 */ #main { } #main #contents_header { width: 590px; height: 12px; margin: 12px auto 0; background: url(../images/box_header_bottom.png) no-repeat 0 0; } #main #contents { width: 590px; margin: 0 auto; height: auto; padding: 1ex 0px; background: url(../images/background_box.png) repeat-y 0 0; } #main #contents_footer { width: 590px; height: 12px; margin: 0 auto; background: url(../images/box_header_bottom.png) no-repeat 0 -12px; } /* フキだし */ #main .title { width: 442px; padding: 12px 40px 0 0; margin: 0 auto; height: 60px; background: url(../images/fukidashi.png) no-repeat; text-align: center; color: #819438; font-weight: bold; font-size: 24px; overflow: hidden; } /*========== トップページ ==========*/ /* トップページのヘッダー */ body.top #header { position: relative; width: 740px; height: 376px; background: rgb(255,184,0) url(../images/top_header_background.png) no-repeat; } body.top #header #logo { z-index: -1; background: transparent; } body.top #header a#link_saas { display: block; position: absolute; left: 508px; top: 239px; width: 112px; height: 128px; background: url(../images/buttons.png) no-repeat 0 0; } body.top #header a#link_saas:hover { background-position: -112px 0; } body.top #header a#link_saas:active { background-position: -224px 0; } body.top #header a#link_download { display: block; position: absolute; left: 620px; top: 239px; width: 112px; height: 128px; background: url(../images/buttons.png) no-repeat 0 -128px; } body.top #header a#link_download:hover { background-position: -112px -128px; } body.top #header a#link_download:active { background-position: -224px -128px; } /* トップページの新着情報・製品特徴の共通設定 */ body.top .item .item_header, body.top .item .item_contents, body.top .item .item_footer { width: 740px; clear: both; } body.top .item .item_contents { padding-top: 5px; } body.top .item .item_contents dt, body#feature.product #desc_contents .features dt { font-size:18px; font-weight:bold; border-bottom: 1px solid lightgrey; clear:both; } body.top .item .item_contents dt div, body#feature.product #desc_contents .features dt { padding-left: 8px; padding-bottom: 5px; } body.top .item .item_contents dd, body.top .feature .feature_content p, body#product.product #desc_contents .feature .feature_content p, body#feature.product #desc_contents .features dd, body#license.product #desc_contents p, body#license.product #desc_contents dl dt, body#license.product #desc_contents ul li, body#license.product #desc_contents ol li, body#download.product #desc_contents p, body#download.product #desc_contents dl { padding-bottom: 15px; font-size:14px; line-height:1.5em; letter-spacing:.1em; } body#download.product #desc_contents p { margin:10px 0; } body#download.product #desc_contents dd { margin-left: 15px; } body#license.product #desc_contents dl dt, body#license.product #desc_contents ol li, body#license.product #desc_contents ul li{ padding-bottom:0; } body#license.product #desc_contents p, body#license.product #desc_contents dl dd, body#license.product #desc_contents ol, body#license.product #desc_contents ul { margin-left: 20px; } body#license.product #desc_contents dl dd { margin-bottom: 15px; } body#license.product #desc_contents h3 { margin-top: 15px; } body.top .item .item_contents dd p { margin: 0px 0px 10px; } body.top .item .item_contents dd ul { list-style-type: disc; margin: 10px 0px 10px 40px; } body.top .item .item_contents dd ol{ list-style: decimal outside; margin: 10px 0px 10px 40px; } body.top .item .item_contents dd li { /*margin-bottom: 7px;*/ } body.top .item .item_header { height: 27px; background-image: url(../images/box_header_bottom.png); } body.top .item .item_header_without_title { height: 13px; background-image: url(../images/box_header_bottom.png); } body.top .item .item_footer { height: 12px; background-image: url(../images/box_header_bottom.png); } /* トップページの新着情報・お知らせ */ body.top .item#news .item_header, body.top .item#info .item_header { margin-top:14px; } body.top .item#news .item_header { background-position: 0 -48px; } body.top .item#info .item_header { background-position: 0 -124px; } body.top .item#news .item_contents, body.top .item#info .item_contents { background: rgb(255,255,140) url(../images/background_news.png) repeat-y; } body.top .item#news .item_footer, body.top .item#info .item_footer { margin-bottom:14px; background-position: 0 -75px; } body.top .item#news .item_contents dt, body.top .item#info .item_contents dt { position: relative; left: 28px; top: -1ex; width: 670px; padding-top: 1px; padding-bottom: 1px; padding-left: 14px; margin-top: 2ex; margin-bottom: 1ex; } body.top .item#news .item_contents dt.news, body.top .item#info .item_contents dt.news { background: url(../images/list_marker.png) no-repeat left center; } body.top .item#news .item_contents dt.info, body.top .item#info .item_contents dt.info { background: url(../images/list_marker_green.png) no-repeat left center; } body.top .item#news .item_contents dd, body.top .item#news .item_contents dd, body.top .item#info .item_contents dd, body.top .item#info .item_contents dd { position: relative; left: 42px; top: -1ex; width: 670px; padding-top: 1px; padding-bottom: 1px; } body.top .item#news .item_contents dd dt, body.top .item#news .item_contents dd dd, body.top .item#info .item_contents dd dt, body.top .item#info .item_contents dd dd { top: 0px; font-size: 14px; left: 28px; width: 628px; } /* トップページの製品特徴 */ body.top .item#features .item_header { margin-top: 14px; background-position: 0 -87px; } body.top .item#features .item_contents { background: rgb(255,255,140) url(../images/background_features.png) repeat-y; } body.top .item#features .item_footer { background-position: 0 -114px; } /* トップページの製品特徴各特徴 */ body.top .feature{ width: 700px; clear: both; margin: 0 20px; background-color: white; overflow: hidden; } body.top .feature_odd img { float: right; margin-left: 1ex; margin-bottom: 1ex; } body.top .feature_even img { float: left; margin-right: 1ex; margin-bottom: 1ex; } body.top .feature .title { clear: none ! important; } body.top .feature .feature_content h4 { font-weight: bold; font-size: large; color: #819438; margin: 1ex 8px; } body.top .feature .feature_content p { margin: 1ex 8px 2ex; } /*========== 製品情報 ==========*/ body.product #main { position: relative; padding-top: 12px; } /* 左のリンク */ body.product #main #menu { position: absolute; left: 14px; width: 136px; height: 96px; background: rgb(255,255,140) url(../images/product_menu.png) no-repeat; } body.product #main #menu li{ position: absolute; } body.product #main #menu li, body.product #main #menu li a, body.product #main #menu li a span, body.product #main #menu li a div { display: block; width: 136px; height: 28px; } body.product #main #menu li#link_product { top: 2px; } body.product #main #menu li#link_feature { top: 35px; } body.product #main #menu li#link_license { top: 66px; } /* 本文 */ body.product #main #description { position: relative; width: 590px; margin-left: 150px; background: rgb(255,255,140) url(../images/background_box.png) repeat-y; } body.product #main #description #desc_header { height: 12px; background: rgb(255,255,140) url(../images/box_header_bottom.png) no-repeat; } body.product #main #description #desc_contents { padding: 0 0 0 26px; width: 538px; } body.product #main #description #desc_footer { height: 12px; background: rgb(255,255,140) url(../images/box_header_bottom.png) no-repeat 0 -12px; clear: both; } /* 製品 > 特徴 */ body.product#product #desc_contents .feature { position: relative; background-color: white; clear: both; } body.product#product #desc_contents .feature .title { position: relative; left: -4px; text-align: left; padding-left: 90px; width: 419px; clear: both ! important; } body.product#product #desc_contents .feature#feature2 .title { padding-left: 80px; padding-right: 0; width: 469px; } body.product#product #desc_contents .feature#feature1 .title { background-position: 0 -144px; } body.product#product #desc_contents .feature#feature2 .title { background-position: 0 -216px; } body.product#product #desc_contents .feature#feature3 .title { background-position: 0 -288px; } body.product#product #desc_contents .feature#feature4 .title { background-position: 0 -360px; } body.product#product #desc_contents .feature#feature5 .title { background-position: 0 -432px; } body.product#product #desc_contents .feature .feature_content { width: 538px; margin: 1ex 0 2ex; } body.product#product #desc_contents .feature .feature_content h4 { float: left; width: 330px; } body.product#product #desc_contents .feature .feature_content img { float: right; width: 180px; margin-bottom: 2ex; } body.product#product #desc_contents .feature .feature_content h4 { font-weight: bold; font-size: large; color: #819438; margin: 0 8px 1ex; } body.product#product #desc_contents .feature .feature_content p { margin: 1ex 8px 2ex; } body.product#product #desc_contents .feature .feature_content h4#feature0,.feature0 { float: left; width: 500px; } /* 製品 > 機能一覧 */ body.product#feature #desc_contents .title {} body.product#feature #desc_contents .features, body.product#feature #desc_contents .note { padding: 0 2ex 1ex; } body.product#feature #desc_contents .features dt{ position: relative; padding-top: 1px; padding-bottom: 1px; padding-left: 14px; margin-top: 2ex; margin-bottom: 1ex; background: url(../images/list_marker.png) no-repeat left center; } body.product#feature #desc_contents .features dd{} body.product#feature #desc_contents .note { font-size: small; } /* 製品 > ライセンス・価格 */ body.product#license #desc_contents p, body.product#license #desc_contents ul, body.product#license #desc_contents dl, body.product#license #desc_contents h3, body.product#license #desc_contents pre { padding: 0 2ex 1ex; line-height:1.5; } body.product#license #desc_contents h3 { font-size: large; font-weight: bold; } body.product#license #desc_contents #term { font-size: small; } body.product#license #desc_contents ul li{ margin-left: 1em; list-style: disc; } body.product#license #desc_contents dl{ margin-left: 1em; } body.product#license #desc_contents dl dt{ font-weight: bold; } /* 製品 > ダウンロード */ body.product#download #desc_contents p, body.product#download #desc_contents ul, body.product#download #desc_contents ol, body.product#download #desc_contents dl, body.product#download #desc_contents h3, body.product#download #desc_contents pre { padding: 0 2ex 1ex; line-height: 1.5; } body.product#download #desc_contents h3 { font-size: large; font-weight: bold; margin-top: 1em; padding-bottom: 0; } body.product#download #desc_contents ul li{ margin-left: 1em; list-style: disc; } body.product#download #desc_contents ol{ list-style: decimal outside; margin-left: 1em; } body.product#download #desc_contents ol li{ margin-left: 1em; } body.product#download #desc_contents dl{ margin-left: 1em; } body.product#download #desc_contents dl dt{ font-weight: bold; } /*========== お問い合わせ ==========*/ body.inquiry #main #contents form dl dt { width: 16ex; padding-left: 14px; background: url(../images/list_marker.png) no-repeat left center; } body.inquiry #main #contents form dl dd { padding-left: 14px; margin: 1ex 0 2ex; } body.inquiry #main #contents form dl dd input, body.inquiry #main #contents form dl dd textarea { width: 100%; } body.inquiry #main #contents form .submit { width: 25%; margin: 0 0 0 14px; } body.inquiry #main #contents p, body.inquiry #main #contents form { width: 482px; margin: 1ex auto; } body.inquiry #main #contents p.message { text-align: center; font-weight: bold; color: OrangeRed; } body.inquiry #inquiry_form{ width:482px; margin: 1ex auto; } body.inquiry #inquiry_form th{ width :130px; vertical-align:top; } /*========== blog 準備中 ==========*/ body.blog#not_blog #main #contents p { width: 482px; margin: 1ex auto; } /*========== 404 Not Found ==========*/ body.not_found #main #contents p { width: 482px; margin: 1ex auto; } /*========== マニュアル ==========*/ body.manual #main #contents_header { width: 740px; background-position: 0 -24px; } body.manual #main #contents { width: 700px; padding-left: 20px; padding-right: 20px; background: url(../images/background_box_long.png) repeat-y 0 0; } body.manual #main #contents_footer { width: 740px; background-position:0 -36px; } /*=========== 広告 ==============*/ .banners { position: absolute; top: 20px; left:800px; } .banner { position: relative; margin-bottom: 20px; } table.server_list{ margin : 10px 0 0 0; white-space: nowrap; } .server_list th { text-align:left; font-size:80%; } .server_list td { font-size:80%; padding:0 6px 0 0; } .server_list tr.reference td{ padding-bottom : 15px; }