@CHARSET "utf-8"; /**************************************** * Table of Contents * * 0. Zeroing out the margins and paddings * 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, code, img, b, i, ul, ol, li, dl, dd, dt, fieldset, form, input, textarea, legend, table, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; } /* ------------------------------------------------------------ 1. Layouts ------------------------------------------------------------ */ /* ------------------------------------------------------------ 2. Basic Elements Styles ------------------------------------------------------------ */ body {background-color: #ffffff; color: #000000; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; font-size: 13px; line-height: 1.5;} h1, h2, h3, h4, h5, h6 {color:#000000; font-weight: normal;} h1 {font-size: 185%;} h2 {font-size: 154%;} h3 {font-size: 139%;} h4 {font-size: 124%;} h5 {font-size: 108%;} h6 {font-size: 100%;} img {border: 0; vertical-align:top;} li {list-style: none;} a:link {color: #778D1F; text-decoration: none;} a:visited {color: #778D1F; text-decoration: none;} a:hover, a:active {color: #778D1F; text-decoration: underline;} input, select, textarea, label {padding: 2px; border: 1px solid #aaaaaa; font-size: 13px; font-family: inherit; vertical-align: middle;} textarea { overflow: auto; } label { cursor: pointer; } fieldset { border: none; } table {border-collapse: collapse; background: #ffffff; text-align:left;} /* ------------------------------------------------------------ 3. Common Styles ------------------------------------------------------------ */ .section {margin-bottom: 40px;} .subSection {margin-bottom: 40px;} .hidden {display: none;} .important {color:#778D1F; font-weight: bold;} .error {color: #cc0000; font-weight: bold;} .translucidus {filter: alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;} .adv {margin: 0 auto 50px auto; width: 500px; font-size: 11px; font-family: "ＭＳ Ｐゴシック", sans-serif;} .adv .title {margin-bottom: 10px;} .adv .title span {color: #333333; font-weight: bold; text-decoration: underline;} .adv .title a {color: #0000ff; text-decoration: underline;} .adv .text {color: #888888;} /* ------------------------------------------------------------ 4. Common Styles ------------------------------------------------------------ */ #headerText {width: 100%; background-color: #98B33E;} #headerText .inner {margin: 0 auto; width: 940px;} #headerText h1 {color: #ffffff; font-size: 12px;} #header {width: 100%; height: 171px; background: url(/img/header_bg.gif) top center repeat-x;} #header .inner {margin: 0 auto; width: 940px; height: 171px; position: relative;} #header #headerLogo {position: absolute; top: 26px; left: 4px;} #header #headerContact {position: absolute; top: 29px; left: 545px;} #header #headerMail {position: absolute; top: 34px; right: 0px;} #header #nav {position: absolute; top: 108px; left: 0px;} #header #nav li {margin-left: 10px; float: left;} #mainWrapper {margin-bottom: 50px; width: 100%; height: 735px; background: url(/img/main_area_03.gif) top center repeat;} #main {height: 735px; background: url(/img/main_bg_01.jpg) top center no-repeat;} #main .inner {margin: 0 auto; width: 940px; height: 735px; position: relative;} #main #mainTitle {width: 940px; position: absolute; top: 30px; left: 0px; text-align: center;} #main #mainText {width: 940px; position: absolute; top: 25px; left: 0px; text-align: center; font-size: 32px;} #main #mainText span {color:#778D1F;} #mainLowerWrapper {margin-bottom: 50px; width: 100%; height: 405px; background: url(/img/main_area_03.gif) top center repeat;} #mainLower {height: 405px; background: url(/img/main_bg_lower_01.jpg) top center no-repeat;} #mainLower .inner {margin: 0 auto; width: 940px; height: 405px; position: relative;} #mainLower #mainLowerDetail {position: absolute; top: 280px; left: 775px;} #content {width: 100%;} #content .inner {margin: 0 auto; width: 940px;} #mainContent {width: 650px; float: left;} #mainContent #breadcrumb {margin-bottom: 20px;} #mainContent h2 {margin-bottom: 30px; padding-bottom: 20px; width: 650px; background: url(/img/separator.png) bottom center repeat-x;} #mainContent .pageTop {margin-bottom: 30px; text-align: right;} #mainContent .contact {margin: 10px 50px 30px 50px; width: 550px; height: 90px; background: url(/img/bnr_contact_bg.gif) top left no-repeat; position: relative;} #mainContent .contact .tel {position: absolute; top: 25px; left: 110px;} #mainContent .contact .mailform {position: absolute; top: 25px; right: 40px;} #subContent {width: 250px; float: right;} #subAction {width: 250px; background: url(/img/sub_action_bg.gif) top left repeat;} #subAction .inner {margin: 0 10px; padding: 10px 0; width: 230px;} #subAction h2 {margin-bottom: 5px;} #subAction .image {margin-bottom: 10px;} #subAction .title {margin-bottom: 5px;} #subAction .desc {padding-bottom: 10px;} #subAction .separator {width: 230px; height: 11px; background: url(/img/separator.png) top center repeat-x;} #subArea {width: 250px; height: 263px; background: url(/img/sub_area_map.jpg) top left no-repeat;} #subVoices {width: 250px;} #subVoices .header, #subVoices .footer {width: 250px; height: 5px; background: url(/img/sub_area_01_header.gif) top left no-repeat;} #subVoices .body {padding: 15px 20px; width: 210px; background: url(/img/sub_area_01_body.gif) top left repeat-y;} #subVoices .name {margin-bottom: 5px; color: #778D1F;} #subVoices .desc {padding-bottom: 10px;} #subVoices .separator {width: 210px; height: 11px; background: url(/img/separator.png) top center repeat-x;} #subVoices .detail {width: 210px; text-align: center;} #subFaq {width: 250px; background: url(/img/main_area_03.gif) top left repeat;} #subFaq .inner {margin: 0 20px; padding: 20px 0; width: 210px;} #subFaq .q {margin-bottom: 5px; color: #778D1F;} #subFaq .a {padding-bottom: 10px;} #subFaq .separator {width: 210px; height: 11px; background: url(/img/separator.png) top center repeat-x;} #subFaq .detail {width: 210px; text-align: center;} #subBanners {font-size: 11px;} #subBanners img {margin-bottom: 5px;} #footer {padding: 30px 0; width: 100%; background: url(/img/main_area_03.gif) top left repeat;} #footer .inner {margin: 0 auto; width: 940px;} #footer #footerLogo {margin-bottom: 20px;} #footer #footerNav {margin-bottom: 20px;} #footer #footerCopyright {color: #777777; font-size: 11px; text-align: center;} /* ------------------------------------------------------------ 5. Top Page Styles ------------------------------------------------------------ */ #top #top01 .block {margin-bottom: 30px; padding-bottom: 30px; width: 650px; background: url(/img/separator.png) bottom center repeat-x;} #top #top01 .block .image {width: 240px; float: left;} #top #top01 .block .desc {width: 390px; float: right;} #top #top01 .block .desc .title {margin-bottom: 20px;} #top #top01 .block .desc p {margin-bottom: 10px;} #top #top01 .message {margin-bottom: 40px; width: 650px; text-align: center;} #top #top01 .attention {padding: 20px; width: 610px; background: url(/img/main_area_02.gif) top left repeat;} #top #top01 .attention h3 {margin-bottom: 20px;} #top #top01 .attention .detail {width: 610px;} #top #top01 .attention .detail .image {width: 240px; float: left;} #top #top01 .attention .detail .desc {width: 350px; float: right;} #top #top01 .attention .detail .desc .title {margin-bottom: 30px;} #top #top01 .attention .detail .desc p {margin-bottom: 10px;} #top #top02 .title {margin-bottom: 20px;} #top #top02 p {margin-bottom: 10px;} #topServices h2 {padding-bottom: 10px;} #topServices .row {margin-bottom: 30px; padding-bottom: 30px; width: 650px; background: url(/img/separator.png) bottom center repeat-x;} #topService01 {margin-right: 10px; width: 210px; height: 335px; background: url(/img/top_02_bg_01.gif) top left no-repeat; position: relative; float: left;} #topService01 .image {position: absolute; top: 75px; left: 20px;} #topService01 p {width: 170px; position: absolute; top: 190px; left: 20px;} #topService02 {margin-right: 10px; width: 210px; height: 335px; background: url(/img/top_02_bg_02.gif) top left no-repeat; position: relative; float: left;} #topService02 .image {position: absolute; top: 75px; left: 20px;} #topService02 p {width: 170px; position: absolute; top: 190px; left: 20px;} #topService03 {width: 210px; height: 335px; background: url(/img/top_02_bg_03.gif) top left no-repeat; position: relative; float: left;} #topService03 .image {position: absolute; top: 75px; left: 20px;} #topService03 p {width: 170px; position: absolute; top: 190px; left: 20px;} #topService04 {margin-right: 10px; width: 210px; height: 335px; background: url(/img/top_02_bg_04.gif) top left no-repeat; position: relative; float: left;} #topService04 .image {position: absolute; top: 75px; left: 20px;} #topService04 p {width: 170px; position: absolute; top: 190px; left: 20px;} #topService05 {width: 430px; height: 335px; background: url(/img/top_02_bg_05.gif) top left no-repeat; position: relative; float: left;} #topService05 .image {position: absolute; top: 75px; left: 20px;} #topService05 p.text01 {width: 210px; position: absolute; top: 80px; right: 20px;} #topService05 p.text02 {position: absolute; top: 290px; left: 20px;} #topService05 #plan01 {position: absolute; top: 200px; left: 20px;} #topService05 #plan02 {position: absolute; top: 200px; left: 150px;} #topService05 #plan03 {position: absolute; top: 200px; left: 280px;} /* ------------------------------------------------------------ 6. Other Page Styles ------------------------------------------------------------ */ #area #areaMap {width: 650px; height: 683px; background: url(/img/area_map.jpg) top left no-repeat; position: relative;} #area #areaMapCopy {position: absolute; top: 20px; left: 0px;} #area #areaList {position: absolute; top: 80px; left: 0px;} #warehouse {margin: 30px 0;} #warehouse p {margin-bottom: 20px;} #contact .desc {margin-bottom: 20px;} #contact #contactForm {width: 646px; border: 3px solid #999999;} #corporate table {width: 648px; border: 1px solid #423C22;} #corporate table th {padding: 15px; width: 150px; background: url(/img/main_area_02.gif) top left repeat; border-bottom: 1px dashed #423C22;} #corporate table td {padding: 15px; border-bottom: 1px dashed #423C22;} #faq {font-size: 14px;} #faq #toc {margin-bottom: 20px;} #faq .qas {margin-bottom: 20px; padding: 20px; width: 610px; background: url(/img/main_area_03.gif) top left repeat;} #faq .qas h3 {margin-bottom: 10px;} #faq .qas .qa {margin-bottom: 10px;} #faq .qas .qa .q {margin-bottom: 5px; color: #778D1F;} #faq .qas .qa .a {margin-bottom: 20px;} #faq .qas .separator {width: 610px; height: 21px; background: url(/img/separator.png) top center repeat-x;} #faq .pageTop {margin-bottom: 30px; font-size: 13px;} #flow .title {margin-bottom: 20px; width: 650px; text-align: center;} #flow #flow01 {width: 650px; height: 129px; background: url(/img/top_03_bg_01.gif) top left no-repeat; position: relative;} #flow #flow01 .text {width: 400px; position: absolute; top: 50px; left: 90px;} #flow #flow01 .image {position: absolute; top: 10px; right: 10px;} #flow #flow02 {width: 650px; height: 129px; background: url(/img/top_03_bg_02.gif) top left no-repeat; position: relative;} #flow #flow02 .text {width: 400px; position: absolute; top: 50px; left: 90px;} #flow #flow02 .image {position: absolute; top: 10px; right: 10px;} #flow #flow03 {width: 650px; height: 267px; background: url(/img/top_03_bg_03.jpg) top left no-repeat; position: relative;} #flow #flow03 .text {width: 400px; position: absolute; top: 50px; left: 90px;} #flow #flow03 .image {position: absolute; top: 20px; right: 10px;} #prices .desc {margin-bottom: 20px;} #prices .prices {margin-bottom: 30px; padding: 20px; width: 610px; background: url(/img/main_area_02.gif) top left repeat;} #prices .prices .price {margin-bottom: 30px;} #prices .prices .price h3 {margin-bottom: 10px; padding-left: 10px; border-left: 3px solid #423C22; color: #778D1F;} #prices .prices .price p {padding-bottom: 10px;} #voices {font-size: 14px;} #voices .voices .header, #voices .voices .footer {width: 650px; height: 5px; background: url(/img/main_area_01_header.gif) top left no-repeat;} #voices .voices .body {padding: 20px; width: 610px; background: url(/img/main_area_01_body.gif) top left repeat-y;} #voices .voices .voice .name {margin-bottom: 5px; color: #778D1F;} #voices .voices .voice .desc {padding-bottom: 20px;} #voices .voices .separator {width: 610px; height: 21px; background: url(/img/separator.png) top center repeat-x;} #contact #thanksTitle {margin-bottom: 10px; color: #778D1F; font-size: 20px;} #contact #thanksMessage {font-size: 14px;} /* ------------------------------------------------------------ 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; font-size: 1px;} div#pr{font-size:11px;} div#pr ul{list-style:none;} div#pr h3{font-size:11px;} div#webSeals{margin-top:20px;} div#notation{margin:0 0 30px 0;} div#insurance{margin-bottom:30px; overflow:hidden;} div#insuranceContent{width:330px; float:left;} img.insuranceImage{display:block; float:right;}