@CHARSET "utf-8"; /**************************************** * Table of Contents * * 1. Layouts * 2. Basic Elements Styles * 3. Common Styles * 4. Header Styles * 5. Navigations Styles * 6. Contents Styles * 7. Footer Styles * 15. Image Replacement * 16. Hacks * 17. Ajax * ****************************************/ /* ------------------------------------------------------------ 0. Zeroing out the margins and paddings ------------------------------------------------------------ */ html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, img, b, i, ul, ol, li, fieldset, form, input, legend, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } /* ------------------------------------------------------------ 1. Layouts ------------------------------------------------------------ */ body {width: 100%;} #wrapper {width: 910px; margin: 30px auto 0 auto;} #header {width: 910px; height: 50px;} #globalNavi {width: 910px; margin-bottom: 30px;} #sideBar {width: 225px; margin-left: 5px; float: left;} #content {width: 630px; margin-right: 5px; margin-bottom: 50px; float: right;} #footer {width: 910px; margin-bottom: 50px; clear: both;} /* ------------------------------------------------------------ 2. Basic Elements Styles ------------------------------------------------------------ */ body {background: #fff url(../img/bg.gif) top center repeat-y; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; font-size: 13px; line-height: 1.3;} h1, h3, h4, h5 {color:#00387F;} h3, h4, h5, p {margin-bottom: 10px;} h1 {font-size: 190%;} h3 {font-size: 130%;} img {border: none;} li {list-style: none;} input, select, textarea {padding: 2px; border: 1px solid #AAA; background: url(../img/form/bg_input.gif) #FFF top left repeat-x; font-size: 13px;} a {color: #00387f; text-decoration: none;} a:hover {color: #0a4c93; text-decoration: underline;} /* ------------------------------------------------------------ 3. Common Styles ------------------------------------------------------------ */ .section {margin-bottom: 30px;} .hidden {display: none;} .important {color:#00387F; font-weight: bold;} .error {font-weight: bold; color: #cc0000;} .translucidus {filter: alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;} p.title {color:#00387F; margin-bottom: 20px; font-size: 140%; font-weight: bold;} input.submit {border: 1px solid #d91281; color: #fff; font-weight: bold; background: url(../img/form/bg_button.gif) top left repeat-x;} input.submit:hover {cursor: pointer; background: url(../img/form/bg_button.gif) 0px -100px repeat-x;} .operations a {float: left; margin-right: 10px;} ul.bullet li {margin-bottom: 5px; padding-left: 20px; background: url(../img/icons/bullet_red.png) top left no-repeat; font-size: 14px;} table { width: 600px; border-collapse: collapse; background: #f6f6f6; text-align:left; } table a {color: #333333; text-decoration:none;} table a:hover {text-decoration:underline;} th {width: 100px; background: #eaeaea;} tbody th, tbody td {border: 1px solid #666; padding:8px;} .captcha {padding: 5px; border: 1px solid #ccc; background: #fff;} /* ------------------------------------------------------------ 4. Header Styles ------------------------------------------------------------ */ #header {position: relative;} #logo .ir {width: 300px; height: 40px; position: absolute; top: 0px; left: 5px;} #logo .ir span {background: url(../img/header.gif) 0px 0px no-repeat;} #phone .ir {width: 270px; height: 40px; position: absolute; top: 0px; right: 218px;} #phone .ir span {background: url(../img/header.gif) -300px 0px no-repeat;} #mail .ir {width: 215px; height: 40px; position: absolute; top: 0px; right: 3px;} #mail .ir span {background: url(../img/header.gif) -570px 0px no-repeat;} /* ------------------------------------------------------------ 5. Navigations Styles ------------------------------------------------------------ */ #globalNavi ul {height: 40px; position: relative; background: url(../img/global_navi.gif) 0px 0px no-repeat;} #globalNaviHome {position: absolute; top: 5px; left: 15px;} #globalNaviHome .ir {width: 83px; height: 30px;} #globalNaviHome .ir span {background: url(../img/global_navi.gif) -15px -5px no-repeat;} #globalNaviHome .ir:hover span {background: url(../img/global_navi.gif) -15px -45px no-repeat;} #globalNaviUwaki {position: absolute; top: 5px; left: 98px;} #globalNaviUwaki .ir {width: 149px; height: 30px;} #globalNaviUwaki .ir span {background: url(../img/global_navi.gif) -98px -5px no-repeat;} #globalNaviUwaki .ir:hover span {background: url(../img/global_navi.gif) -98px -45px no-repeat;} #globalNaviCompany {position: absolute; top: 5px; left: 247px;} #globalNaviCompany .ir {width: 97px; height: 30px;} #globalNaviCompany .ir span {background: url(../img/global_navi.gif) -247px -5px no-repeat;} #globalNaviCompany .ir:hover span {background: url(../img/global_navi.gif) -247px -45px no-repeat;} #globalNaviInquiry {position: absolute; top: 5px; left: 344px;} #globalNaviInquiry .ir {width: 166px; height: 30px;} #globalNaviInquiry .ir span {background: url(../img/global_navi.gif) -344px -5px no-repeat;} #globalNaviInquiry .ir:hover span {background: url(../img/global_navi.gif) -344px -45px no-repeat;} #sideNavi h3, #sideNavi h5 {margin-bottom: 0px;} #sideNavi ul {width: 220px;} #sideNavi li {width: 220px; padding: 5px 0; border-bottom: 1px solid #ccc;} #sideNavi .ir {width: 210px; height: 20px;} #sideNaviTitle span {background: url(../img/side_navi.gif) 0px 0px no-repeat;} #sideNavi li.title {margin-top: 10px;} #sideNaviUwaki span {background: url(../img/side_navi.gif) 0px -60px no-repeat;} #sideNaviChoko span {background: url(../img/side_navi.gif) 0px -120px no-repeat;} #sideNaviChoko:hover span {background: url(../img/side_navi.gif) -210px -120px no-repeat;} #sideNaviNagare span {background: url(../img/side_navi.gif) 0px -140px no-repeat;} #sideNaviNagare:hover span {background: url(../img/side_navi.gif) -210px -140px no-repeat;} #sideNaviIraisha span {background: url(../img/side_navi.gif) 0px -160px no-repeat;} #sideNaviIraisha:hover span {background: url(../img/side_navi.gif) -210px -160px no-repeat;} #sideNaviMitsumori span {background: url(../img/side_navi.gif) 0px -180px no-repeat;} #sideNaviMitsumori:hover span {background: url(../img/side_navi.gif) -210px -180px no-repeat;} #sideNaviCompany span {background: url(../img/side_navi.gif) 0px -80px no-repeat;} #sideNaviGaiyo span {background: url(../img/side_navi.gif) 0px -200px no-repeat;} #sideNaviGaiyo:hover span {background: url(../img/side_navi.gif) -210px -200px no-repeat;} #sideNaviChiiki span {background: url(../img/side_navi.gif) 0px -220px no-repeat;} #sideNaviChiiki:hover span {background: url(../img/side_navi.gif) -210px -220px no-repeat;} #sideNaviInquiry span {background: url(../img/side_navi.gif) 0px -100px no-repeat;} #sideNaviDenwa span {background: url(../img/side_navi.gif) 0px -240px no-repeat;} #sideNaviDenwa:hover span {background: url(../img/side_navi.gif) -210px -240px no-repeat;} #sideNaviMail span {background: url(../img/side_navi.gif) 0px -260px no-repeat;} #sideNaviMail:hover span {background: url(../img/side_navi.gif) -210px -260px no-repeat;} #sideNavi {width: 220px; margin-right: 50px;} /* ------------------------------------------------------------ 6. Contents Styles ------------------------------------------------------------ */ #image {width: 910px; height: 192px; margin-top: -5px;} #image span {background: url(../img/top/image.jpg) top left no-repeat;} #advantage {width: 630px; height: 111px;} #advantage span {background: url(../img/top/advantage.gif) top left no-repeat;} #bt-mitsumori, #bt-inquiry, #bt-mail {width: 165px; height: 25px;} #bt-mitsumori span {background: url(../img/buttons.gif) 0px 0px no-repeat;} #bt-mitsumori:hover span {background: url(../img/buttons.gif) -165px 0px no-repeat;} #bt-inquiry span {background: url(../img/buttons.gif) 0px -25px no-repeat;} #bt-inquiry:hover span {background: url(../img/buttons.gif) -165px -25px no-repeat;} #bt-mail span {background: url(../img/buttons.gif) 0px -100px no-repeat;} #bt-mail:hover span {background: url(../img/buttons.gif) -165px -100px no-repeat;} /* ------------------------------------------------------------ 7. Footer Styles ------------------------------------------------------------ */ #footer {padding-top: 10px; color: #999; border-top: 1px solid #ccc;} #footerNavi li {float: left; margin-right: 20px;} #footerNavi2 li {float: left; margin-right: 20px;} #footer .copyright {text-align: right;} /* ------------------------------------------------------------ 9. Image Replacement ------------------------------------------------------------ */ .ir {position: relative; display: block; overflow: hidden;} .ir span {width: 100%; height: 100%; position: absolute;} /* ------------------------------------------------------------ 9. Hacks ------------------------------------------------------------ */ .clearfix {display: inline-block;} .clearfix:after {height: 0; clear: both; display: block; content: "."; visibility: hidden;}