@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: #ffffff url(../img/bg.gif) top left repeat; color: #000000; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif; font-size: 13px; line-height: 1.7em;} h1, h3, h4, h5, h6 {color:#000000;} 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: none;} li {list-style: none;} a:link {color: #000077; text-decoration: none;} a:visited {color: #000077; text-decoration: none;} a:hover, a:active {color: #0000cc; 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: 30px;} .hidden {display: none;} .important {color:#ac0000; font-weight: bold;} .error {color: #cc0000; font-weight: bold;} .translucidus {filter: alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;} .adv {width: 800px; margin: 0 0 0 70px; padding-bottom: 50px; color: #777777; font-size: 11px; font-family: "ＭＳ Ｐゴシック", sans-serif; line-height: 1.3em;} .adv .title span {font-weight: bold; text-decoration: underline;} .adv .title a {margin-left: 20px; color: #0000ff; text-decoration: underline;} .pagetop {margin-right: 30px; width: 130px; height: 20px; float: right;} #mailformHeader {margin-left: 59px; width:812px; height: 132px;} .wrapper {margin: 10px 40px 40px 40px; width: 840px;} .wrapper h3 {margin-bottom: 10px;} /* ------------------------------------------------------------ 4. Header Styles ------------------------------------------------------------ */ #header {width: 100%; height: 131px; background: url(/img/header/header_bg.gif) top left repeat-x;} #header .inner {margin: 0 auto; width: 920px; position: relative;} #header h1 {color: #ffffff; font-size: 12px; font-weight: normal; line-height: 1.8em;} #headerLogo {position: absolute; top: 30px; left: 0px;} #headerPhone {position: absolute; top: 30px; left: 350px;} #headerMailform {position: absolute; top: 30px; right: 0px;} /* ------------------------------------------------------------ 5. Global Navigation Styles ------------------------------------------------------------ */ ul#globalNav {position: absolute; top: 85px; left: 0px;} ul#globalNav li.navItem {height: 35px; float: left;} /* ------------------------------------------------------------ 6. Main Area Styles ------------------------------------------------------------ */ #main {width: 100%; height: 491px; background: url(/img/main/main_bg.jpg) top center repeat-x;} #main .inner {margin: 0 auto; width: 920px; height: 491px; background: url(/img/main/main.jpg) top left no-repeat; position: relative;} #mainTitle {position: absolute; top: 20px; left: 90px;} #mainPointTitle01 {position: absolute; top: 90px; left: 160px;} #mainPointTitle02 {position: absolute; top: 183px; left: 480px;} #mainPointTitle03 {position: absolute; top: 263px; left: 95px;} #mainReasonTitle {position: absolute; bottom: 25px; left: 0px;} #mainReason01 {position: absolute; bottom: 0px; left: 180px;} #mainReason02 {position: absolute; bottom: 0px; left: 365px;} #mainReason03 {position: absolute; bottom: 0px; left: 580px;} #mainAreaButton {position: absolute; bottom: 0px; right: 0px;} #mainPointButton01 {position: absolute; top: 175px; left: 250px;} #mainPointButton02 {position: absolute; top: 268px; left: 570px;} #mainPointButton03 {position: absolute; top: 350px; left: 188px;} #mainPointButton04 {position: absolute; top: 350px; left: 430px;} #mainTitleText {width: 920px; position: absolute; top: 30px; left: 0px; text-align: center; font-size: 22px; text-shadow: #999 1px 1px 1px;} #mainTitleText span {color: #003880; font-size: 36px;} #mainMin {width: 100%; height: 310px; background: url(/img/main/main_min_bg.jpg) top center repeat-x;} #mainMin .inner {margin: 0 auto; width: 920px; height: 310px; background: url(/img/main/main_min.jpg) top left no-repeat; position: relative;} /* ------------------------------------------------------------ 7. Content Area Styles ------------------------------------------------------------ */ #content {width: 100%;} #content .inner {margin: 0 auto; width: 940px; background: url(/img/bg_content.png) top left repeat-y;} #content .contactBannar {height: 160px; position: relative;} #content .contactBannar .mailform {position: absolute; top: 0px; left: 30px;} #content .contactBannar .phone {position: absolute; top: 0px; right: 30px;} /* ------------------------------------------------------------ 8. Top Page Styles ------------------------------------------------------------ */ .pointSection {margin: 30px 0 30px 10px; width: 920px;} .pointHeader {margin-bottom: 10px; position: relative;} .pointHeader .pointDescription {width: 690px; position: absolute; top: 100px; left: 170px;} .pointSection h3 {margin-left: 30px; margin-bottom: 10px;} .pointCopy {margin: 0 auto;} #point01 .pointHeader {height: 250px;} #point02 .pointHeader {height: 230px;} #point03 .pointHeader {height: 230px;} .point01Item {margin: 10px 0 10px 30px; position: relative;} .point01Item p {width: 280px; position: absolute; top: 100px; left: 370px;} #regacyProbrem {margin: 0 0 0 30px; width: 860px; height: 370px; position: relative;} #regacyProbrem h3 {margin-left: 0px;} #regacyProbrem p.text01 {width: 800px; position: absolute; top: 70px; left: 30px;} #regacyProbrem p.text02 {width: 260px; position: absolute; top: 190px; left: 260px;} #regacyProbrem p.text03 {width: 260px; position: absolute; top: 190px; left: 560px;} #regacyProbrem p.text04 {width: 260px; position: absolute; top: 270px; left: 260px;} #regacyProbrem p.text05 {width: 260px; position: absolute; top: 270px; left: 560px; line-height: 1.5em;} #hybridPlan01 {margin: 0 0 0 35px; width: 860px; height: 190px;} #hybridPlan02 {margin: 0 0 30px 35px; width: 860px; height: 250px;} #hybridPlan03 {margin: 0 0 30px 35px; width: 860px; height: 310px;} #planDescription {margin: 0 0 40px 40px; width: 840px;} #costPattern {margin: 0 0 30px 30px; width: 860px; height: 380px; position: relative;} #costPattern p.text01 {width: 370px; position: absolute; top: 110px; left: 30px;} #costPattern p.text02 {width: 370px; position: absolute; top: 110px; left: 460px;} #regacyFlow {margin: 0 0 0 30px;} #regacyFlow h4 {margin-bottom: 10px; width: 210px; height: 30px;} #regacyFlow p {margin: 0 0 10px 10px; width: 840px;} #ourFlow {margin: 0 0 0 30px;} #ourFlow h4 {margin-bottom: 10px; width: 210px; height: 30px;} #ourFlow p {margin: 0 0 10px 10px; width: 840px;} #ourFlow img {margin-bottom: 10px;} #promiss {margin: 0 0 30px 30px; width: 860px; height: 470px; position: relative;} #promiss h3 {margin-left: 0px;} #promiss p.text01 {width: 630px; position: absolute; top: 80px; left: 33px;} #promiss p.text02 {width: 630px; position: absolute; top: 180px; left: 33px;} #promiss p.text03 {width: 630px; position: absolute; top: 280px; left: 33px;} #promiss p.text04 {width: 630px; position: absolute; top: 400px; left: 33px;} #faq {padding-top: 100px; background: url(/img/faq_bg_01.gif) top left no-repeat;} #qanda {margin: 0 0 0 40px; width: 820px; font-size: 14px;} #qanda p.question {padding: 10px 0 5px 50px; background: url(/img/faq_question_bg.gif) top left no-repeat;} #qanda p.answer {margin-bottom: 20px; padding: 10px 0 5px 50px; background: url(/img/faq_answer_bg.gif) top left no-repeat; color: #7d6130;} /* ------------------------------------------------------------ 9. Tail Page Styles ------------------------------------------------------------ */ .prefecture h2 {margin-bottom: 20px; color: #003880; font-size: 32px; font-weight: normal;} .prefecture h3 {margin-bottom: 10px; color: #003880; font-size: 20px; font-weight: normal;} .prefecture p {margin-bottom: 10px;} .prefecture table {margin-left: 20px;} .prefecture td {width: 140px;} #locationText {margin: 0 auto 20px auto; padding: 7px; width: 780px; border: 1px solid #000000; font-size: 12px; line-height: 1.5em; background: url(/img/ad.jpg) top right no-repeat;} #locationText h3 {margin-bottom: 5px; color: #003880; font-size: 14px; font-weight: normal;} #locationText p {margin-bottom: 5px;} #otherArea {margin: 0 auto; width: 820px;} #location {margin: 0 auto; padding: 30px 0; width: 840px;} #location h2 {margin-bottom: 20px; color: #7D6130; font-size: 24px; font-weight: normal;} #location .summary {padding-bottom: 30px; width: 840px; background: url('/img/location/bg_location_01.gif') top right no-repeat;} #location .summary .title {margin-bottom: 30px;} #location .areaInfo {margin-bottom: 30px; width: 840px;} #location .areaInfo img {} #location .areaInfo .title {width: 840px; height: 60px;} #location .areaInfo .desc {padding: 20px 0; width: 840px; background: url(/img/location/bg_location_area_body.gif) 0 -16px repeat-y;} #location .areaInfo .descInner {margin: 0 30px; width: 780px;} #location .areaInfo .map {margin: 0 0 20px 20px; width: 343px; height: 304px; background: url('/img/location/bg_location_02.gif') top right no-repeat; float: right;} #location .areaInfo .map iframe {margin: 40px 0 0 10px;} #location .areaInfo .map .toGoogle {margin: 15px 0 0 0; text-align: center;} #location .areaInfo .footer { width: 840px; height: 10px; background: url(/img/location/bg_location_area_footer.gif) top left no-repeat;} #location .shops {margin-bottom: 30px;} #location .shops p {margin-bottom: 10px;} #location .shop {margin: 0 10px 10px 0; width: 410px; float: left; background: url(/img/location/bg_location_area_body.gif) 0 -100px repeat-y;} #location .shop .photo {margin: 10px; float: left;} #location .shop .information {margin: 10px 10px 10px 0; width: 310px; float: right;} #location .other .title {margin-bottom: 30px;} #location .other a:link {color: #000000; text-decoration: none;} #location .other a:visited {color: #000000; text-decoration: none;} #location .other a:hover, a:active {color: #000000; text-decoration: none;} /* ------------------------------------------------------------ 10. Chiiki Page Styles ------------------------------------------------------------ */ #prefectures {background: url(/img/bg_map02.gif) top right no-repeat;} /* ------------------------------------------------------------ 11. Company Page Styles ------------------------------------------------------------ */ table#company {margin-left: 30px; width: 800px;} table#company th {padding: 10px; width: 160px; border: 1px solid #000000; background-color: #e4e4cd; color: #7d6130;} table#company td {padding: 10px; border: 1px solid #000000;} /* ------------------------------------------------------------ 12. Nagare Page Styles ------------------------------------------------------------ */ .nagare {margin-bottom: 50px;} .nagare img {margin-right: 20px; width: 190px; float: left;} .nagare .summary {margin-top: 5px; width: 630px; float: left;} .nagare .summary h3 {margin-bottom: 10px; color: #003880; font-size: 20px; font-weight: normal;} /* ------------------------------------------------------------ 15. Footer Styles ------------------------------------------------------------ */ #footer {padding: 20px 0; width: 100%; border-top: 5px solid #000000; background-color: #ffffff;} #footer .inner {margin: 0 auto; width: 920px; position: relative;} #footer ul.nav {margin: 10px 0 10px 10px;} #footer ul.nav .item {margin-right: 20px; float: left;} .copyright {margin-top: 20px; text-align: center; font-size: 11px;} /* ------------------------------------------------------------ 16. Image Replacement ------------------------------------------------------------ */ .ir {position: relative; display: block; overflow: hidden;} .ir span {width: 100%; height: 100%; position: absolute;} /* ------------------------------------------------------------ 17. Hacks ------------------------------------------------------------ */ .clearfix {display: inline-block;} .clearfix:after {height: 0; clear: both; display: block; content: "."; visibility: hidden; font-size: 1px;}