@charset "UTF-8"; /** * HONDA N-ONE * * index.css * @version 1.0 (updated: 2013.09.04) */ /* -------------------------------- スタイリング -------------------------------- */ /* 共通 ---------- */ /* 01 ---------- */ #section_01 { height: 711px; background: url(../image/sec_01_bg.png) repeat-x left bottom;} #section_01 .container { width: 910px; margin: 0 auto;} #section_01 h2 { padding: 48px 0 0 5px;} #section_01 .slideGallery { position: relative; width: 910px; height: 528px; margin: 40px 0 0;} #section_01 .slideGallery .slide { position: absolute; top: 0; left: 0; z-index: 10;} #section_01 .slideGallery .slide p.lead { padding: 15px 0 0 36px;} #section_01 .slideGallery ul.nav li { position: absolute; width: 44px; height: 44px; z-index: 11;} #section_01 .slideGallery ul.nav li.next { top: 196px; right: 8px;} #section_01 .slideGallery ul.nav li.prev { top: 196px; left: 8px;} #section_01 .slideGallery ul.pager { position: absolute; bottom: 47px; left: 680px; z-index: 11;} #section_01 .slideGallery ul.pager li.nav_7 { margin: 0;} #section_01 .slideGallery p.btn { position: absolute; bottom: 0; right: 5px; z-index: 12;} /* 02 ---------- */ #section_02 { padding: 55px 0 0; background: url(../image/sec_02_bg.png) repeat-x left bottom;} #section_02 .container { width: 900px; margin: 0 auto;} #section_02 .content { position: relative; width: 900px; height: 354px; margin: 58px auto 0; background: url(../image/sec_02_gallery_01_bg.png) no-repeat 17px 0;} #section_02 .content h3 { padding: 21px 0 0 451px;} #section_02 .content p.lead { padding: 12px 22px 0 452px;} #section_02 .content .gallery { position: absolute; top: 0; left: 17px;} #section_02 .content .gallery p.img { padding: 22px 0 0 23px;} #section_02 .slideGallery { position: relative; width: 900px; height: 354px; margin: 58px auto 0; background: url(../image/sec_02_gallery_01_bg.png) no-repeat 17px 0;} #section_02 .slideGallery .slide { position: absolute; top: 0; left: 17px;} #section_02 .slideGallery .slide p.img { padding: 22px 0 0 23px;} #section_02 .slideGallery .slide p.caption { padding: 25px 0 0 3px;} #section_02 .slideGallery h3 { padding: 21px 0 0 451px;} #section_02 .slideGallery p.lead { padding: 12px 22px 0 452px;} #section_02 .slideGallery ul.pager { position: absolute; top: 283px; left: 451px;} #section_02 .colorGallery { position: relative; width: 880px; height: 520px; margin: 0 0 0 20px;} #section_02 .colorGallery .slide { position: absolute; top: 0; left: 0; display: none;} /* カラー選択ナビ */ #section_02 .colorGallery .colorSelector { position: absolute; top: 330px; left: 631px; width: 216px; height: 39px;} #section_02 .colorGallery .colorSelector p.h { float: left; width: 60px; height: 18px; margin: 0 11px 0 0; background: url(../image/sec_02_gallery_02_color.png) no-repeat; font-size: 1px; text-indent: -9999px;} #section_02 .colorGallery .colorSelector ul.nav {} #section_02 .colorGallery .colorSelector ul.nav li { float: left; width: 27px; height: 18px; margin: 0 2px 0 0; font-size: 1px; text-indent: -9999px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_06, #section_02 .colorGallery .colorSelector ul.nav li.nav_07, #section_02 .colorGallery .colorSelector ul.nav li.nav_08, #section_02 .colorGallery .colorSelector ul.nav li.nav_09 { margin-top: 3px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_06 { padding-left: 71px;} #section_02 .colorGallery .colorSelector ul.nav li a { outline: none; display: block; height: 18px; background: url(../image/sec_02_gallery_02_color.png) no-repeat;} #section_02 .colorGallery .colorSelector ul.nav li.nav_01 a { background-position: -71px 0;} #section_02 .colorGallery .colorSelector ul.nav li.nav_02 a { background-position: -100px 0;} #section_02 .colorGallery .colorSelector ul.nav li.nav_03 a { background-position: -129px 0;} #section_02 .colorGallery .colorSelector ul.nav li.nav_04 a { background-position: -158px 0;} #section_02 .colorGallery .colorSelector ul.nav li.nav_05 a { background-position: -187px 0;} #section_02 .colorGallery .colorSelector ul.nav li.nav_06 a { background-position: -71px -21px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_07 a { background-position: -100px -21px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_08 a { background-position: -129px -21px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_09 a { background-position: -158px -21px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_01 a:hover { background-position: -71px -39px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_02 a:hover { background-position: -100px -39px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_03 a:hover { background-position: -129px -39px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_04 a:hover { background-position: -158px -39px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_05 a:hover { background-position: -187px -39px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_06 a:hover { background-position: -71px -60px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_07 a:hover { background-position: -100px -60px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_08 a:hover { background-position: -129px -60px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_09 a:hover { background-position: -158px -60px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_01 a.js_current { background-position: -71px -78px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_02 a.js_current { background-position: -100px -78px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_03 a.js_current { background-position: -129px -78px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_04 a.js_current { background-position: -158px -78px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_05 a.js_current { background-position: -187px -78px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_06 a.js_current { background-position: -71px -99px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_07 a.js_current { background-position: -100px -99px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_08 a.js_current { background-position: -129px -99px;} #section_02 .colorGallery .colorSelector ul.nav li.nav_09 a.js_current { background-position: -158px -99px;} #section_02 .colorGallery p.note { position: absolute; top: 381px; left: 631px;} #section_02 .colorGallery p.info { position: absolute; top: 448px; left: 0;} #section_02 p.bnr { padding: 35px 0 0 76px;} #section_02 .noteArea { margin: 28px 0 0;} #section_02 .noteArea_01 { background: none; margin: 40px 0 0; padding-top: 0; padding-bottom: 0;}