/* ----------------------- CSS ----------------------- */ /* * ホーム : category_7 : Blue * CMS・MODx : category_8 : Orange * 制作実績 : category_9 : Yellow * 料金プラン : category_10 : Green * 制作の流れ : category_12 : Blue * お問合わせ : category_12 : Blue * その他 : category_12 : Blue * */ * { margin: 0; padding: 0; border: 0px; } body { margin : 0 auto; padding: 0 auto; background: url(images/head.jpg) no-repeat 50% 0 #e8e8e8 ; font-family: "sans-serif", "Arial"; } .clear { clear: both;} a { text-decoration: none; } a:link { color: #2480ab; } a:visited { color: #2480ab; } a:hover { color: #ff9329; } a:active { color: #ff9329; } li { list-style-type: none; } /*==============================================================================*/ /* 文　字　設　定 */ /*==============================================================================*/ /* font: font-style font-variant font-weight font-size/line-height font-family*/ /*------------------------------------------------------------------------------------------------------------------------------------------------------------- */ #body h3 { color: #168b3f; font: normal normal bold 18px/1.2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body h4 { color: #333333; font: normal normal bold 16px/1.8em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body h5 { color: #333333; font: normal normal bold 14px/24px 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body h6 { color: #333333; font: normal normal normal 14px/1.5em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body p { color: #333333; font: normal normal normal 12px/1.5em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body li { color: #333333; font: normal normal normal 12px/1.5em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body table { color: #333333; font: normal normal normal 12px/2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body th { color: #333333; font: normal normal bold 12px/1.5em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body td { color: #333333; font: normal normal normal 12px/1.5em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body dt { color: #333333; font: normal normal normal 12px/2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body dd { color: #333333; font: normal normal normal 12px/2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body q { color: #333333; font: normal normal normal 14px/2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body blockquote { color: #333333; font: normal normal normal 14px/2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body .caption { color: #333333; font: normal normal normal 12px/1.2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body .goTop { color: #333333; font: normal normal normal 12px/2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body #right .exposition p { color: #333333; font: normal normal normal 12px/1.4em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #side-menu li { color: #333333; font: normal normal normal 12px/1.7em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #body #contents .Breadcrumbs { color: #333333; font: normal normal normal 12px/1.2em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #works li { color: #333333; font: normal normal normal 12px/1.7em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } #index #contents #news li { color: #26586e; font: normal normal normal 12px/1.7em 'ＭＳ Ｐゴシック', Arial; text-decoration: none; } /*---------------------- カテゴリ別色 ----------------------*/ body.parent_1 h5 { color: #blue; } body.parent_5 h5 { color: #green; } body.parent_6 h5 { color: #green; } body.parent_7 h5 { color: #333333; } body.parent_8 h5 { color: #333333; } body.parent_9 h5 { color: #333333; } body.parent_3 h5 { color: #333333; } /*==============================================================================*/ /* container */ /*==============================================================================*/ #container, #head, #cover, #body, #foot { margin: 0 auto; padding: 0 auto; width: 980px; } #head { height: 174px; position: relative; } #cover { height: 120px; } #body { display: table; } #body #contents { width: 591px; padding-bottom: 5px; background: url(images/contents_back.gif) repeat-y 0 0; } #foot { margin : 15px auto; padding : 0 auto; text-align: center; } /*---------------------- head ----------------------*/ #head h1 { width: 213px; height: 62px; position: absolute; top: 25px; left: 66px; overflow: hidden; } #head h1 a { display: block; width: 213px; height: 62px; text-decoration: none; padding-top: 62px; } body.parent_5 { background: url(images/head_cms.jpg) no-repeat 50% 0 #e8e8e8 ;} body.parent_6 { background: url(images/head_works.jpg) no-repeat 50% 0 #e8e8e8 ;} body.parent_7 { background: url(images/head_price.jpg) no-repeat 50% 0 #e8e8e8 ;} body.parent_8 { background: url(images/head_flow.jpg) no-repeat 50% 0 #e8e8e8 ;} body.parent_9 { background: url(images/head_contact.jpg) no-repeat 50% 0 #e8e8e8 ;} /*---------------------- body-left ----------------------*/ #body-left { width: 787px; float: left; } /*---------------------- menu-box ----------------------*/ #body-left #menu-box { width: 196px; margin: 29px 0 0 0; float: left; } #body-left #menu-box h2 { width: 107px; height: 15px; background: url(images/h2_contents.gif) no-repeat 0 0; margin: 0 0 0 51px; text-indent: -1000em; } /*---------------------- main-menu ----------------------*/ #body-left #menu-box #main-menu { width: 116px; height: 178px; margin: 19px 0 0 51px; } #body-left #menu-box #main-menu li { display: block; width: 116px; height: 28px; list-style-type: none; margin-bottom: 2px; overflow: hidden; } #body-left #menu-box #main-menu li a{ display: block; width: 116px; height: 28px; padding-top: 28px; } #body-left #menu-box #main-menu li#main-menu1 a{ background: url(images/mein-menu.gif) no-repeat 0 0;} #body-left #menu-box #main-menu li#main-menu5 a{ background: url(images/mein-menu.gif) no-repeat 0 -30px;} #body-left #menu-box #main-menu li#main-menu144 a{ background: url(images/mein-menu.gif) no-repeat 0 -60px;} #body-left #menu-box #main-menu li#main-menu8 a{ background: url(images/mein-menu.gif) no-repeat 0 -90px;} #body-left #menu-box #main-menu li#main-menu7 a{ background: url(images/mein-menu.gif) no-repeat 0 -120px;} #body-left #menu-box #main-menu li#main-menu6 a{ background: url(images/mein-menu.gif) no-repeat 0 -150px;} #body-left #menu-box #main-menu li#main-menu9 a{ background: url(images/mein-menu.gif) no-repeat 0 -180px;} #body-left #menu-box #main-menu li#main-menu1 a:hover { background: url(images/mein-menu.gif) no-repeat -116px 0;} #body-left #menu-box #main-menu li#main-menu5 a:hover { background: url(images/mein-menu.gif) no-repeat -116px -30px;} #body-left #menu-box #main-menu li#main-menu144 a:hover { background: url(images/mein-menu.gif) no-repeat -116px -60px;} #body-left #menu-box #main-menu li#main-menu8 a:hover { background: url(images/mein-menu.gif) no-repeat -116px -90px;} #body-left #menu-box #main-menu li#main-menu7 a:hover { background: url(images/mein-menu.gif) no-repeat -116px -120px;} #body-left #menu-box #main-menu li#main-menu6 a:hover { background: url(images/mein-menu.gif) no-repeat -116px -150px;} #body-left #menu-box #main-menu li#main-menu9 a:hover { background: url(images/mein-menu.gif) no-repeat -116px -180px;} #body-left #menu-box #main-menu li#main-menu1.active a { background: url(images/mein-menu.gif) no-repeat -116px 0;} #body-left #menu-box #main-menu li#main-menu5.active a { background: url(images/mein-menu.gif) no-repeat -116px -30px;} #body-left #menu-box #main-menu li#main-menu144.active a { background: url(images/mein-menu.gif) no-repeat -116px -60px;} #body-left #menu-box #main-menu li#main-menu8.active a { background: url(images/mein-menu.gif) no-repeat -116px -90px;} #body-left #menu-box #main-menu li#main-menu7.active a { background: url(images/mein-menu.gif) no-repeat -116px -120px;} #body-left #menu-box #main-menu li#main-menu6.active a { background: url(images/mein-menu.gif) no-repeat -116px -150px;} #body-left #menu-box #main-menu li#main-menu9.active a { background: url(images/mein-menu.gif) no-repeat -116px -180px;} /*---------------------- side-menu ----------------------*/ #body-left #menu-box #side-menu { width: 116px; margin: 55px 0 0 52px; } #body-left #menu-box #side-menu li { display: block; width: 116px; margin-bottom: 5px; list-style-type: none; } /*---------------------- contents ----------------------*/ /*------画像関連-------*/ #body #contents .imgLeft { /* 左寄せ */ float: left; text-align: center; padding-right: 5px; display: table; } #body #contents .imgRight { /* 右寄せ */ float: right; text-align: center; padding-left: 5px; display: table; } #body #contents .imgCenter { /* 中央寄せ */ margin: 0 auto; text-align: center; display: table; } #body #contents h3 { width: 517px; height: 48px; margin : 0 0 17px 32px; padding-bottom: 10px; text-indent: -1000em; } #body #contents h3#cms { background: url(images/h3_cms.gif) no-repeat 0 0;} #body #contents h3#modx { background: url(images/h3_modx.gif) no-repeat 0 0;} #body #contents h3#trialmodx { background: url(images/h3_demo.gif) no-repeat 0 0;} #body #contents h3#works2007 { background: url(images/h3_works2007.gif) no-repeat 0 0;} #body #contents h3#works2008 { background: url(images/h3_works.gif) no-repeat 0 0;} #body #contents h3#works { background: url(images/h3_works.gif) no-repeat 0 0;} #body #contents h3#works2008_2 { background: url(images/h3_works.gif) no-repeat 0 0;} #body #contents h3#plan { background: url(images/h3_priceplan.gif) no-repeat 0 0;} #body #contents h3#light { background: url(images/h3_lightplan.gif) no-repeat 0 0;} #body #contents h3#custom { background: url(images/h3_customplan.gif) no-repeat 0 0;} #body #contents h3#flow { background: url(images/h3_flow.gif) no-repeat 0 0;} #body #contents h3#flowchart { background: url(images/h3_flow.gif) no-repeat 0 0;} #body #contents h3#contact { background: url(images/h3_contact.gif) no-repeat 0 0;} #body #contents h3#profile { background: url(images/h3_profile.gif) no-repeat 0 0;} #body #contents h3#recruit { background: url(images/h3_recruit.gif) no-repeat 0 0;} #body #contents h3#question { background: url(images/h3_question.gif) no-repeat 0 0;} #body #contents h3#sitemap { background: url(images/h3_sitemap.gif) no-repeat 0 0;} #body #contents h3#privacy { background: url(images/h3_privacy.gif) no-repeat 0 0;} #body #contents h3#message { background: url(images/h3_message.gif) no-repeat 0 0;} #body #contents h3#area { background: url(images/h3_area.gif) no-repeat 0 0;} #body #contents h3#laboratory { background: url(images/h3_service.gif) no-repeat 0 0;} #body #contents h3#glossary_alphabet { background: url(images/h3_glossary.gif) no-repeat 0 0;} #body #contents h3#glossary_hiragana { background: url(images/h3_glossary.gif) no-repeat 0 0;} .parent_5 #body #contents h3 { background: url(images/h3_modxmanual.gif) no-repeat 0 0;} .parent_56 #body #contents h3 { background: url(images/h3_introduction.gif) no-repeat 0 0;} .parent_340 #body #contents h3 { background: url(images/h3_area.gif) no-repeat 0 0;} .parent_1 #body #contents h3#news { background: url(images/h3_newslist.gif) no-repeat 0 0;} .parent_1 #body #contents h3 { background: url(images/h3_news2009.gif) no-repeat 0 0;} .group_170 #body #contents h3 { background: url(images/h3_glossary.gif) no-repeat 0 0;} #body #contents h4 { width: 500px; margin : 42px 0 17px 40px; padding-left: 5px; border-left: 5px solid #41a8e1; border-bottom: 1px solid #41a8e1; } #body #contents h4.top { width: 500px; margin : 25px 0 17px 40px; padding-left: 5px; border-left: 5px solid #41a8e1; border-bottom: 1px solid #41a8e1; } #body #contents h5 { width: 500px; margin : 30px 0 17px 45px; padding-left: 5px; } #body #contents h6 { width: 500px; margin : 30px 0 17px 45px; padding-left: 5px; } #body #contents p { width: 480px; margin : 0 0 17px 50px; } #body #contents ul, #body #contents ol { width: 480px; margin : 0 0 0 50px; } #body #contents li { list-style-type: none; margin : 0 0 10px 0; vertical-align: top; list-style-position: outside; } #body #contents table { width: 480px; margin : 17px 0 17px 65px; } #body #contents .page_button p { padding: 8px 0; } #body #contents .page_button a { font-size: 14px; padding: 5px; margin-right: 10px; color: #3333ff; border: solid 1px #aaaaff; background-color: #ddddff; float: left; } #body #contents .page_button a:hover { color: #3333ff; border: solid 1px #bbbbff; background-color: #eeeeff; } /*---------------------- Breadcrumbs ----------------------*/ #body .Breadcrumbs { margin: 0 45px 3px 0; text-align: right; text-indent: 10px; } /*---------------------- goTop ----------------------*/ #body .goTop { margin: 10px 40px 0 0; text-align: right; } /*---------------------- wrapper ----------------------*/ #body-left #wrapper{ width: 591px; padding-bottom: 12px; float: right; background: url(images/wrapper.gif) no-repeat 0 0; background-position: bottom; } /*---------------------- body-right ----------------------*/ #body #body-right { width: 193px; float: right; } /*---------------------- banner ----------------------*/ #body #body-right #banner { width: 135px; margin: 24px 0 0 18px; } #body #body-right #banner li { display: block; width: 135px; height: 65px; list-style-type: none; margin-bottom: 14px; overflow: hidden; } #body #body-right #banner li a{ display: block; width: 135px; height: 65px; padding-top: 65px; } #body #body-right #banner li#banner26 a{ background: url(images/banner_modx.gif) no-repeat 0 0;} #body #body-right #banner li#banner27 a{ background: url(images/banner_contact.gif) no-repeat 0 0px;} #body #body-right #banner li#banner26 a:hover { background: url(images/banner_modx.gif) no-repeat 0 -65px;} #body #body-right #banner li#banner27 a:hover { background: url(images/banner_contact.gif) no-repeat 0 -65px;} /*---------------------- works ----------------------*/ #body #body-right #works { width: 150px; margin: 0 0 0 18px; } #body #body-right #works h2 { width: 87px; height: 18px; background: url(images/works.gif) no-repeat 0 0; margin: 29px 0 23px 0; text-indent: -1000em; } #body #body-right #works li { width: 150px; padding: 0; margin: 0 0 10px 0; } /*---------------------- foot ----------------------*/ #foot p, #foot address { color: #888888; font-style: normal; font-size: 12px; }