@charset "UTF-8";



/**
 * HONDA N-ONE
 *
 * index.css
 * @version  1.0  (updated: 2012.10.22)
 */



/* --------------------------------
	インテリア
-------------------------------- */

/* 共通 ---------- */

.section .article h4 { font-weight: bold;}


/* 01 ---------- */

#section_01 { padding: 0 0 56px; 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_01 { position: relative; width: 910px; height: 528px; margin: 40px 0 0;}
#section_01 .slideGallery_01 .slide { position: absolute; top: 0; left: 0; z-index: 10;}
#section_01 .slideGallery_01 .slide p.lead { padding: 15px 0 0 36px;}
#section_01 .slideGallery_01 ul.nav li { position: absolute; width: 44px; height: 44px; z-index: 11;}
#section_01 .slideGallery_01 ul.nav li.next { top: 196px; right: 8px;}
#section_01 .slideGallery_01 ul.nav li.prev { top: 196px; left: 8px;}

#section_01 .slideGallery_01 ul.pager { position: absolute; bottom: 47px; left: 713px; z-index: 11;}
#section_01 .slideGallery_01 ul.pager li.nav_6 { margin: 0;}

#section_01 .article_01 { width: 903px; margin: 0 0 0 2px; padding: 29px 0 0;}
#section_01 .article_01 .content { float: right; width: 339px; padding: 64px 0 0;}
#section_01 .article_01 .content p.lead { padding: 20px 0 0;}
#section_01 .article_01 .content p.btnMore { padding: 54px 0 0; text-align: right;}
#section_01 .article_01 p.img { float: left; width: 535px;}


/* section_color ---------- */

#section_color { padding: 0 0 60px; }
#section_color .container { width: 906px; margin: 0 auto;height:1056px; position:relative; }
#section_color h2 { padding: 56px 0 0 3px;}
#section_color h3 { padding: 0 0 0 3px;}

#section_color .slideGallery_Color { position: relative; width: 903px; height: 600px; margin: 0 0 0 3px;}
#section_color .slideGallery_Color .slide { position: absolute; top: 0; left: 0; z-index: 10;}

/* スライドギャラリー */
#section_color .slideGallery_Color ul.nav li { position: absolute; width: 44px; height: 44px; z-index: 11;}
#section_color .slideGallery_Color ul.nav li.next { top: 154px; right: 6px;}
#section_color .slideGallery_Color ul.nav li.prev { top: 154px; left: 3px;}

#section_color .slideGallery_Color ul.pager {
 position: absolute; top: 369px; left:0;
 z-index: 11;
 height:300px;
 background: url(../image/sec_color_gallery_bg.png) no-repeat;
 background-position:0 41px;
 }

#section_color .slideGallery_Color ul.pager li { width: 123px; margin: 0; }
#section_color .slideGallery_Color ul.pager li.nav_3 { padding-left:22px; }
#section_color .slideGallery_Color ul.pager li.nav_7 { padding-left:23px; }
#section_color .slideGallery_Color ul.pager li.nav_7 { width:117px; }

#section_color .slideGallery_Color ul.pager li a { background: url(../image/sec_color_gallery_nav.png) no-repeat; height: 248px; display:block; }
#section_color .slideGallery_Color ul.pager li.nav_2 a { background-position: -123px 0; }
#section_color .slideGallery_Color ul.pager li.nav_3 a { background-position: -246px 0; }
#section_color .slideGallery_Color ul.pager li.nav_4 a { background-position: -369px 0; }
#section_color .slideGallery_Color ul.pager li.nav_5 a { background-position: -492px 0; }
#section_color .slideGallery_Color ul.pager li.nav_6 a { background-position: -615px 0; }
#section_color .slideGallery_Color ul.pager li.nav_7 a { background-position: -738px 0; }


#section_color .slideGallery_Color ul.pager li.nav_1 a:hover { background-position: 0px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_2 a:hover { background-position: -123px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_3 a:hover { background-position: -246px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_4 a:hover { background-position: -369px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_5 a:hover { background-position: -492px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_6 a:hover { background-position: -615px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_7 a:hover { background-position: -738px -496px;}


#section_color .slideGallery_Color ul.pager li.nav_1 a.current { background-position: 0px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_2 a.current { background-position: -123px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_3 a.current { background-position: -246px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_4 a.current { background-position: -369px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_5 a.current { background-position: -492px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_6 a.current { background-position: -615px -496px;}
#section_color .slideGallery_Color ul.pager li.nav_7 a.current { background-position: -738px -496px;}


#section_color p.bnr01 { padding: 121px 0 0 80px;}


/* 02 ---------- */

#section_02 { padding: 0 0 60px; background: url(../image/sec_02_bg.png) repeat-x left bottom;}
#section_02 .container { width: 906px; margin: 0 auto;}
#section_02 h2 { padding: 20px 0 0 3px;}

#section_02 .article_01 { width: 880px; padding: 40px 0 0 3px;}
#section_02 .article_01 .content { float: right; width: 398px; padding: 73px 0 0;}
#section_02 .article_01 .content h4 { padding: 20px 0 0;}
#section_02 .article_01 p.img { float: left; width: 455px;}

#section_02 .article_02 { position: relative; width: 906px; height: 362px; margin: 44px 0 0; background: url(../image/sec_02_02_bg.png) no-repeat;}
#section_02 .article_02 .slide { position: absolute; top: 27px; left: 23px; z-index: 10;}
#section_02 .article_02 h3 { padding: 22px 0 0 458px;}
#section_02 .article_02 h4 { padding: 20px 0 0 458px;}
#section_02 .article_02 p.desc { padding: 0 40px 0 458px;}
#section_02 .article_02 ul.pager { position: absolute; bottom: 29px; left: 458px; z-index: 11;}

#section_02 .article_03 { width: 906px; height:725px; margin: 44px 0 0; background: url(../image/sec_02_03_bg.png) no-repeat;}
#section_02 .article_03 h3 { padding: 22px 0 0 23px;}
#section_02 .article_03 .wrap { padding: 12px 0 0 23px;}

#section_02 .article_03 .block_01 { width:861px;height:251px; position: relative;}
#section_02 .article_03 .block_01 h4 { position:absolute;top:170px;left:28px;}
#section_02 .article_03 .block_01 p.img { position:absolute;top:0;left:0;}

#section_02 .article_03 .block_02_03 { overflow:hidden;width:861px;margin:20px 0; }
#section_02 .article_03 .block_02 { float: left; width: 420px;}
#section_02 .article_03 .block_03 { float: right; width: 420px;}
#section_02 .article_03 .block p.lead { padding: 19px 0 0;}
#section_02 .article_03 .block h4 { padding: 9px 0 0; white-space: nowrap;}
#section_02 .article_03 .block p.desc { line-height: 1.2;}
#section_02 .article_03 p.link { padding: 0 23px 0 0; text-align: right;}

#section_02 .article_04 { width: 906px; height: 430px; margin: 38px 0 0; background: url(../image/sec_02_04_bg.png) no-repeat;}
#section_02 .article_04 h3 { padding: 18px 0 0 23px;}
#section_02 .article_04 p.lead { padding: 3px 0 5px 23px;}
#section_02 .article_04 .wrap { padding: 0 0 0 3px;}
#section_02 .article_04 .wrap .block { float: left; width: 273px; padding: 0 0 0 20px;}
#section_02 .article_04 .wrap .block h4 { line-height: 1.36; padding: 6px 0 0;}
#section_02 .article_04 .wrap .block p.note { line-height: 1.4; padding: 8px 0 0;}

#section_02 p.btnMore { padding: 16px 3px 0 0; text-align: right;}


/* 03 ---------- */

#section_03 { background: url(../image/sec_03_bg.png) repeat-x left bottom;}
#section_03 .container { width: 1000px; margin: 0 auto;}
#section_03 h2 { padding: 56px 0 0 50px;}

#section_03 .article_01 { position: relative; width: 953px; height: 586px; margin: 36px 0 0 47px; background: url(../image/sec_03_01_bg.png) no-repeat 0 171px;}
#section_03 .article_01 h3 { padding: 10px 0 0 23px;}
#section_03 .article_01 h4 { padding: 20px 0 0 23px;}
#section_03 .article_01 p.desc { padding: 0 0 0 23px;}
#section_03 .article_01 .slide { position: absolute; top: 194px; left: 23px; z-index: 10;}
#section_03 .article_01 p.link { position: absolute; bottom: 0; right: 50px;}
#section_03 .article_01 ul.pager { position: absolute; bottom: 44px; left: 263px; z-index: 11;}
#section_03 .article_01 .gallery { position: absolute; top: 0; left: 538px; z-index: 12;}
#section_03 .article_01 .gallery p.img { position: absolute; top: 0; left: 0; display: none;}

#section_03 .article_02 { width: 906px; margin: 55px auto 0;}
#section_03 .article_02 .slideGallery { position: relative; width: 906px; height: 352px; background: url(../image/sec_03_02_bg.png) no-repeat;}
#section_03 .article_02 .slide { position: absolute; top: 22px; left: 23px; z-index: 10;}
#section_03 .article_02 h3 { padding: 39px 0 0 458px;}
#section_03 .article_02 h4 { padding: 20px 0 0 458px;}
#section_03 .article_02 p.desc { padding: 0 25px 0 458px;}
#section_03 .article_02 ul.pager { position: absolute; bottom: 24px; left: 458px; z-index: 11;}
#section_03 .article_02 p.link { padding: 14px 3px 0 0; text-align: right;}

#section_03 .article_03 { position: relative; width: 952px; height: 486px; margin: 53px 0 0 48px;}
#section_03 .article_03 h3 { padding: 0 0 0 2px;}
#section_03 .article_03 h4 { padding: 6px 0 0 2px;}
#section_03 .article_03 .gallery { position: relative; width: 309px; width: 237px; margin: 109px 0 0;}
#section_03 .article_03 .gallery .slide { position: absolute; top: 0; left: 0; display: none;}
#section_03 .article_03 p.img { position: absolute; top: 0; right: 0;}
#section_03 .article_03 ul.num li { position: absolute; width: 24px; height: 24px;}
#section_03 .article_03 ul.num li.num_01 { top: 107px; right: 428px;}
#section_03 .article_03 ul.num li.num_02 { top: 57px; right: 285px;}
#section_03 .article_03 ul.num li.num_03 { top: 89px; right: 381px;}
#section_03 .article_03 ul.num li.num_04 { top: 118px; right: 401px;}
#section_03 .article_03 ul.num li.num_05 { top: 116px; right: 367px;}
#section_03 .article_03 ul.num li.num_06 { top: 141px; right: 388px;}
#section_03 .article_03 ul.num li.num_07 { top: 137px; right: 350px;}
#section_03 .article_03 ul.num li.num_08 { top: 99px; right: 313px;}
#section_03 .article_03 ul.num li.num_09 { top: 99px; right: 272px;}
#section_03 .article_03 ul.num li.num_09_02 { top: 184px; right: 476px;}
#section_03 .article_03 ul.num li.num_10 { top: 158px; right: 187px;}
#section_03 .article_03 ul.num li.num_10_02 { top: 264px; right: 428px;}
#section_03 .article_03 ul.num li.num_11 { top: 152px; right: 239px;}
#section_03 .article_03 ul.num li.num_11_02 { top: 188px; right: 322px;}
#section_03 .article_03 ul.num li.num_12 { top: 285px; right: 152px;}
#section_03 .article_03 ul.num li a:hover,
#section_03 .article_03 ul.num li a.js_current { opacity: 0.6;}
#section_03 .article_03 p.note { position: absolute; top: 373px; left: 376px;}
#section_03 .article_03 p.btn { position: absolute; top: 416px; left: 376px; width: 188px; height: 40px;}
#section_03 .article_03 p.btn_02 { display: none;}

#section_03 p.btnMore { padding: 0 50px 0 0; text-align: right;}

#section_03 .noteArea { margin: 40px auto 0;}