@charset "UTF-8"; /** * HONDA N-ONE * * index.css * @version 1.1 (updated: 2013.09.11) */ /* -------------------------------- N-ONE トップページ -------------------------------- */ /* メインビジュアル ---------- */ #mainVisual { height: 453px; background: url(../image/main_bg.png) repeat-x;} #mainVisual .container { width: 900px; margin: 0 auto; background: url(../image/main_bg_bg.png) no-repeat;} #mainVisual .content { float: right; width: 211px;} #mainVisual .content h1 { padding: 40px 0 0;} #mainVisual .content p.info { position: relative; margin: 11px 0 0;} #mainVisual .content p.info .anchor_01 { position: absolute; top: 2px; right: 1px;} #mainVisual .content p.info .anchor_02 { position: absolute; top: 82px; left: 79px;} #mainVisual .content ul.btn { padding: 6px 0 0;} #mainVisual .content ul.btn li { float: left; margin: 0 5px 0 0;} #mainVisual .content ul.btn li.btn_03 { margin: 0;} #mainVisual .content #rt-personalize-area-a { margin: 9px 0 0; padding: 0 0 0 18px; background: url(../image/main_rec_arw.png) no-repeat left center; font-size: 14px;} #mainVisual .content #rt-personalize-area-a a { color: #000;} #mainVisual .content ul.sns { position: relative; margin: 8px 0 0;} #mainVisual .content ul.sns li.twitter { position: absolute; top: 0; left: 0;} #mainVisual .content ul.sns li.facebook { position: absolute; top: 0; left: 105px;} #mainVisual .colorGallery { position: relative; float: left; width: 670px; height: 453px;} #mainVisual .colorGallery .slide { position: absolute; top: 0; left: 0; display: none;} #mainVisual .colorGallery p.desc { position: absolute; top: 337px; left: 0;} #mainVisual .colorGallery p.desc_01 .anchor_01 { position: absolute; top: 12px; left: 439px;} #mainVisual .colorGallery p.desc_01 .anchor_02 { position: absolute; top: 12px; left: 609px;} #mainVisual .colorGallery p.desc_02 .anchor_01 { position: absolute; top: 12px; left: 490px;} #mainVisual .colorGallery p.desc_02 .anchor_02 { position: absolute; top: 12px; left: 644px;} #mainVisual .colorGallery p.note { position: absolute; top: 368px; left: 0; line-height: 1.2;} #mainVisual .colorGallery p.thankyou { position: absolute; top: 257px; left: 0;} /* カラー選択ナビ */ #mainVisual .colorGallery .colorSelector { position: absolute; top: 398px; left: 0; width: 647px; height: 18px;} #mainVisual .colorGallery .colorSelector p.h { float: left; width: 64px; height: 18px; margin: 0 4px 0 0; background: url(../image/main_gallery_color.png) no-repeat; font-size: 1px; text-indent: -9999px;} #mainVisual .colorGallery .colorSelector ul.nav { position: relative;} #mainVisual .colorGallery .colorSelector ul.nav li { float: left; width: 27px; height: 18px; margin: 0 2px 0 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_01 { width: 26px;} #mainVisual .colorGallery .colorSelector ul.nav li a { display: block; height: 18px; background: url(../image/main_gallery_color.png) no-repeat;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_01 a { background-position: -68px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_02 a { background-position: -96px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_03 a { background-position: -125px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_04 a { background-position: -154px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_05 a { background-position: -183px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_06 a { background-position: -212px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_07 a { background-position: -241px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_08 a { background-position: -270px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_09 a { background-position: -299px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_10 a { background-position: -328px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_11 a { background-position: -357px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_12 a { background-position: -386px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_13 a { background-position: -415px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_14 a { background-position: -444px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_15 a { background-position: -473px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_16 a { background-position: -502px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_17 a { background-position: -531px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_18 a { background-position: -560px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_19 a { background-position: -589px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_20 a { background-position: -618px 0;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_01 a:hover { background-position: -68px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_02 a:hover { background-position: -96px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_03 a:hover { background-position: -125px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_04 a:hover { background-position: -154px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_05 a:hover { background-position: -183px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_06 a:hover { background-position: -212px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_07 a:hover { background-position: -241px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_08 a:hover { background-position: -270px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_09 a:hover { background-position: -299px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_10 a:hover { background-position: -328px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_11 a:hover { background-position: -357px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_12 a:hover { background-position: -386px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_13 a:hover { background-position: -415px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_14 a:hover { background-position: -444px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_15 a:hover { background-position: -473px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_16 a:hover { background-position: -502px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_17 a:hover { background-position: -531px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_18 a:hover { background-position: -560px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_19 a:hover { background-position: -589px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_20 a:hover { background-position: -618px -18px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_01 a.js_current { background-position: -68px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_02 a.js_current { background-position: -96px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_03 a.js_current { background-position: -125px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_04 a.js_current { background-position: -154px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_05 a.js_current { background-position: -183px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_06 a.js_current { background-position: -212px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_07 a.js_current { background-position: -241px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_08 a.js_current { background-position: -270px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_09 a.js_current { background-position: -299px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_10 a.js_current { background-position: -328px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_11 a.js_current { background-position: -357px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_12 a.js_current { background-position: -386px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_13 a.js_current { background-position: -415px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_14 a.js_current { background-position: -444px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_15 a.js_current { background-position: -473px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_16 a.js_current { background-position: -502px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_17 a.js_current { background-position: -531px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_18 a.js_current { background-position: -560px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_19 a.js_current { background-position: -589px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li.nav_20 a.js_current { background-position: -618px -36px;} #mainVisual .colorGallery .colorSelector ul.nav li a span { display: none;} #mainVisual .colorGallery .colorSelector p.currentColor { position: absolute; top: 22px; left: 67px;} #mainVisual .colorGallery .colorSelector p.currentColor sup { vertical-align: top; font-size: 80%;} /* アンカー ---------- */ #fixAnchor { position: absolute; top: 700px; right: 0; margin: -150px 0 0 0; z-index: 100; width: 32px; _display:none; } #fixAnchor.js_fixed { position: fixed; top: 50%;} #fixAnchor img { display: block; } #fixAnchor a { display: block; } #fixAnchor li { margin: 0 0 1px; height: 33px; overflow: hidden; font-size: 1px; } /* ニュース ---------- */ #topNews { height: 35px; font-size: 12px;} #topNews .inner { padding: 8px 0 15px;} /* 共通 ---------- */ .section ul.btn li { float: left;} .section ul.btn li.search { padding: 0 0 0 13px;} /* 01 ---------- */ #section_01 { height: 560px; background: url(../image/sec_01_bg.png) repeat-x;} #section_01 .bg { background: url(../image/sec_01_bg_bg.png) no-repeat center top;} #section_01 .container { width: 900px; margin: 0 auto;} #section_01 h2 { padding: 73px 0 0 21px;} #section_01 ul.btn { padding: 14px 0 0 21px;} #section_01 .slideGallery { position: relative; width: 900px; height: 406px;} #section_01 .slideGallery .slide { position: absolute; top: 0; left: 48px; z-index: 10;} #section_01 .slideGallery .slide span { position: absolute; top: 0; left: 0;} #section_01 .slideGallery ul.nav li { position: absolute; width: 44px; height: 44px; z-index: 11;} #section_01 .slideGallery ul.nav li.next { top: 185px; right: 3px;} #section_01 .slideGallery ul.nav li.prev { top: 185px; left: 4px;} #section_01 .slideGallery ul.pager { position: absolute; bottom: 8px; left: 374px; z-index: 11;} #section_01 .slideGallery ul.pager li { float: left; width: 11px; height: 11px; margin: 0 9px 0 0;} #section_01 .slideGallery ul.pager li a { outline: none; display: block; height: 11px; font-size: 1px; text-indent: -9999px; background: url(../image/sec_01_gallery_pager.png) no-repeat;} #section_01 .slideGallery ul.pager li a.current, #section_01 .slideGallery ul.pager li a:hover { background-position: -20px 0;} /* 02 ---------- */ #section_02 { height: 540px;} #section_02 .container { width: 900px; margin: 0 auto;} #section_02 h2 { float: left; padding: 51px 0 0 21px;} #section_02 ul.btn { float: left; padding: 61px 0 0 94px;} #section_02 p.img { position: relative; width: 906px; margin: 10px -4px 0 -2px;} /* 03 ---------- */ #section_03 { height: 475px; background: url(../image/sec_03_bg.png) repeat-x;} #section_03 .container { position: relative; width: 1000px; margin: 0 auto;} #section_03 .container .mask { position: absolute; top: 0; left: 0; width: 1000px; height: 475px; background: url(../image/sec_03_mask.png) no-repeat; z-index: 10;} #section_03 h2 { padding: 50px 0 0 71px; position: relative; z-index: 11;} #section_03 ul.btn { padding: 25px 0 0 71px; position: relative; z-index: 11;} #section_03 .gallery { overflow: hidden; position: relative; width: 1000px; height: 200px; margin: 54px 0 0;} #section_03 .gallery #section_03_car { position: absolute; top: 0; left: 1400px; width: 400px; height: 200px; background: url(../image/sec_03_gallery_img_02.jpg) no-repeat;} /* 04 ---------- */ #section_04 { height: 444px; background: url(../image/sec_04_bg.jpg) repeat-x;} #section_04 .bg { height: 444px; background: url(../image/sec_04_bg_bg.jpg) no-repeat center top;} #section_04 .container { position: relative; width: 1000px; margin: 0 auto;} #section_04 p.catch { padding: 52px 0 0 71px;} #section_04 h2 { padding: 8px 0 0 71px;} #section_04 ul.btn { padding: 27px 0 0 71px;} #section_04 p.note { padding: 19px 0 0 72px; color: #777;} #section_04 .gallery { position: absolute; top: 0; right: 15px; width: 530px; height: 444px; background: url(../image/sec_04_gallery_img_01.jpg) no-repeat;} #section_04 .gallery p.img { position: absolute; top: 0; left: 0; width: 530px; height: 444px; display: none;} /* 05 ---------- */ #section_05 { height: 479px; background: url(../image/sec_05_bg.jpg) repeat-x;} #section_05 .bg { height: 479px; background: url(../image/sec_05_bg_bg.jpg) no-repeat center top;} #section_05 .container { width: 900px; margin: 0 auto;} #section_05 h2 { padding: 141px 0 0 516px;} #section_05 ul.btn { padding: 27px 0 0 516px;} /* おすすめのタイプ ---------- */ #typeArea { padding: 56px 0 0;} #typeArea .container { width: 900px; margin: 0 auto;} #typeArea .type { width: 900px; border-top: 1px dotted #ccc;} #typeArea #type_01 { border: 0;} #typeArea .type .content { float: right; width: 502px;} #typeArea #type_01 .content { padding: 18px 0 0;} #typeArea #type_02 .content { padding: 34px 0 0;} #typeArea #type_03 .content { padding: 21px 0 0;} #typeArea .type .content p.lead { padding: 0 0 13px;} #typeArea .type .content h3 { float: left; padding: 17px 0 0 1px;} #typeArea .type .content p.price { position: relative; float: right; width: 194px;} #typeArea .type .content p.price .anchor_01 { position: absolute; top: 29px; left: 169px;} #typeArea .type .content p.note { line-height: 1.4; padding: 5px 0 0;} #typeArea .type .content table.spec { width: 501px; margin: 8px 0 0 1px;} #typeArea .type .content table.spec th { text-align: center; background: #4b4b4b; border-right: 2px solid #fff; padding: 4px 0; color: #fff;} #typeArea .type .content table.spec th span { font-size: 10px; padding: 0 0 0 5px;} #typeArea .type .content table.spec th span a { color: #fff;} #typeArea .type .content table.spec td { text-align: center; background: #e4e4e4; border-top: 2px solid #fff; border-right: 2px solid #fff; padding: 4px 0;} #typeArea .type .content table.spec th.h_01 { width: 160px;} #typeArea .type .content table.spec th.h_02 { width: 73px;} #typeArea .type .content table.spec th.h_03 { width: 124px;} #typeArea .type .content table.spec th.h_04, #typeArea .type .content table.spec td.last { border-right: 0;} #typeArea .type .content ul.btn { padding: 9px 0 0 2px;} #typeArea .type .content ul.btn li { padding: 4px 0 0;} #typeArea .type p.img { float: left; width: 362px;} #typeArea .noteArea { margin: 11px 0 0; background: none;} /* 純正ナビキャンペーン ---------- */ #jnavi { height: 320px;} #jnavi .container{ position: relative; width: 900px; margin: 0 auto;} #jnavi .border { width: 900px; border-top: 1px dotted #ccc; margin: 30px 0 30px;} #jnavi h3 { width: 495px; padding: 14px 0 19px 22px;} #jnavi .lead { width: 442px; padding: 0 0 22px 22px;} #jnavi .btn { width:161px; padding: 0 0 0 22px;} #jnavi .img { float:right; padding: 14px 0 0;} /* スモールストア ---------- */ #smallstore { height: 590px;} #smallstore .section01 { height:215px; padding: 18px 0 10px; background: url(../image/cars_store.jpg) no-repeat center top;} #smallstore .container { width: 900px; margin: 0 auto; } #smallstore .border { width: 900px; border-top: 1px dotted #ccc; padding:0 0 30px 0;} #smallstore h2 { float: left; padding: 0 0 0 10px;} #smallstore .btn { float:right; padding: 170px 10px 0 0;} #smallstore .lead { float:left; padding: 30px 0 0 10px;} #smallstore .section02 { height:267px; padding: 0 0 0; background: url(../image/cars_bg.jpg) no-repeat center top;} #smallstore .section02 ul.btn { width:455px; float: right; padding: 170px 0 0 0;} #smallstore .section02 ul.btn li { padding: 15px 50px 0 0;} /* ユーザーの声 ---------- */ #userVoice { width: 900px; margin: 0 auto; padding: 20px 0 0;} #userVoice .bnrArea { background: #ededed;} #userVoice .bnrArea ul.bnr { padding: 30px 0;} #userVoice .bnrArea ul.bnr li { float: left; padding: 0 0 0 40px;} #userVoice .bnrArea ul.bnr li.bnr_01 { margin: 0 1px 0 0; padding-right: 40px; border-right: 1px solid #bebebe;} /* Movie ---------- */ #movieArea { background: url(../image/movie_bg.png) repeat-x left bottom;} #movieArea .container { width: 900px; margin: 0 auto;} #movieArea h2 { padding: 69px 0 0;} #movieArea .wrap { width: 900px; margin: 16px 0 0; background: url(../image/movie_wrap_bg.jpg) no-repeat 0 0;} #movieArea .content { float: right; width: 164px; padding: 108px 29px 0 0;} #movieArea .content p.btn { padding: 7px 0 0 7px;} #movieArea .movie { float: left; width: 640px; height: 360px; padding: 11px 0 119px 12px;}