@charset "UTF-8";



/**
 * HONDA N-ONE
 *
 * index.css
 * @version  1.0  (updated: 2013.09.04)
 */



/* --------------------------------
	スタイリング
-------------------------------- */

/* 共通 ---------- */



/* 01 ---------- */

#section_01 { height: 680px; 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;}



/* 01b ---------- */

#section_01b { background:#f6f6f6;}
#section_01b .container { width: 910px; margin: 0 auto;}

#section_01b .content { height: 390px; position: relative; width: 900px; margin:0 auto 0; }
#section_01b .content h3 { padding: 0 0 0 451px;}
#section_01b .content p.lead { padding: 20px 0 0 452px; }
#section_01b .content .gallery { position: absolute; top: 0; left: 0;}
#section_01b .content p.img_01 { padding: 15px 0 0 452px; }

#section_01b p.btn { position: absolute; bottom: 50px; right: 5px; z-index: 12;}


/* 02_01 ---------- */
#section_02_01 { padding: 55px 0 0; }
#section_02_01 .container { width: 900px; margin: 0 auto;}

#section_02_01 .content { position: relative; width: 900px; height: 354px; margin: 58px auto 0; }

#section_02_01 .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_01 .slideGallery .slide { position: absolute; top: 0; left: 17px;}
#section_02_01 .slideGallery .slide p.img { padding: 22px 0 0 23px;}
#section_02_01 .slideGallery .slide p.caption { padding: 25px 0 0 3px;}
#section_02_01 .slideGallery h3 { padding: 21px 0 0 451px;}
#section_02_01 .slideGallery p.lead { padding: 12px 22px 0 452px;}
#section_02_01 .slideGallery ul.pager { position: absolute; top: 283px; left: 451px;}

#section_02_01 .colorGallery { position: relative; width: 880px; height: 475px; margin: 0 0 0 20px;}
#section_02_01 .colorGallery .slide { position: absolute; top: 0; left: 0; display: none;}

/* カラー選択ナビ */
#section_02_01 .colorGallery .colorSelector { position: absolute; top: 410px; left: 0px; width: 446px; height: 18px;}
#section_02_01 .colorGallery .colorSelector p.h { float: left; width: 70px; height: 18px; margin: 0 11px 0 0; background: url(../image/sec_02_01_gallery_02_color.png) no-repeat; font-size: 1px; text-indent: -9999px;}
#section_02_01 .colorGallery .colorSelector ul.nav {}
#section_02_01 .colorGallery .colorSelector ul.nav li { float: left; width: 27px; height: 18px; margin: 0 2px 0 0; font-size: 1px; text-indent: -9999px;}

#section_02_01 .colorGallery .colorSelector ul.nav li a { outline: none; display: block; height: 18px; background: url(../image/sec_02_01_gallery_02_color.png) no-repeat;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_01 a { background-position: -71px 0;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_02 a { background-position: -100px 0;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_03 a { background-position: -129px 0;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_04 a { background-position: -158px 0;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_05 a { background-position: -187px 0;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_06 a { background-position: -216px 0px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_07 a { background-position: -245px 0px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_08 a { background-position: -274px 0px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_09 a { background-position: -303px 0px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_10 a { background-position: -332px 0px;}

#section_02_01 .colorGallery .colorSelector ul.nav li.nav_01 a:hover { background-position: -71px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_02 a:hover { background-position: -100px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_03 a:hover { background-position: -129px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_04 a:hover { background-position: -158px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_05 a:hover { background-position: -187px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_06 a:hover { background-position: -216px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_07 a:hover { background-position: -245px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_08 a:hover { background-position: -274px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_09 a:hover { background-position: -303px -18px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_10 a:hover { background-position: -332px -18px;}

#section_02_01 .colorGallery .colorSelector ul.nav li.nav_01 a.js_current { background-position: -71px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_02 a.js_current { background-position: -100px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_03 a.js_current { background-position: -129px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_04 a.js_current { background-position: -158px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_05 a.js_current { background-position: -187px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_06 a.js_current { background-position: -216px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_07 a.js_current { background-position: -245px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_08 a.js_current { background-position: -274px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_09 a.js_current { background-position: -303px -36px;}
#section_02_01 .colorGallery .colorSelector ul.nav li.nav_10 a.js_current { background-position: -332px -36px;}

#section_02_01 .colorGallery p.note { position: absolute; top: 412px; left: 375px;}
#section_02_01 .colorGallery p.info { position: absolute; top: 448px; left: 0;}

#section_02_01 .noteArea_01 { background: none; padding-top: 0; padding-bottom: 0;}


/* 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: 0 0 0 451px;}
#section_02 .content p.lead { padding: 12px 22px 0 452px;}
#section_02 .content p.caution { margin:13px 0 0 452px;padding: 10px 14px; border:solid 1px #dadada;width:401px;}
#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: 430px; left: 0; width: 448px; height: 18px;}
#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 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: -216px 0px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_07 a { background-position: -245px 0px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_08 a { background-position: -274px 0px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_09 a { background-position: -303px 0px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_10 a { background-position: -332px 0px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_11 a { background-position: -361px 0px;}

#section_02 .colorGallery .colorSelector ul.nav li.nav_01 a:hover { background-position: -71px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_02 a:hover { background-position: -100px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_03 a:hover { background-position: -129px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_04 a:hover { background-position: -158px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_05 a:hover { background-position: -187px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_06 a:hover { background-position: -216px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_07 a:hover { background-position: -245px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_08 a:hover { background-position: -274px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_09 a:hover { background-position: -303px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_10 a:hover { background-position: -332px -18px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_11 a:hover { background-position: -361px -18px;}

#section_02 .colorGallery .colorSelector ul.nav li.nav_01 a.js_current { background-position: -71px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_02 a.js_current { background-position: -100px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_03 a.js_current { background-position: -129px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_04 a.js_current { background-position: -158px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_05 a.js_current { background-position: -187px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_06 a.js_current { background-position: -216px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_07 a.js_current { background-position: -245px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_08 a.js_current { background-position: -274px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_09 a.js_current { background-position: -303px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_10 a.js_current { background-position: -332px -36px;}
#section_02 .colorGallery .colorSelector ul.nav li.nav_11 a.js_current { background-position: -361px -36px;}

#section_02 .colorGallery p.note { position: absolute; top: 432px; left: 400px;}
#section_02 .colorGallery p.info { position: absolute; top: 470px; left: 0;}

#section_02 p.bnr01 { padding: 50px 0 0 80px;}
#section_02 p.bnr02 { 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;}