@charset "UTF-8";



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



/* --------------------------------
	N-ONE Modulo X トップページ
-------------------------------- */

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

.section ul.btn li { float: left;}
.section ul.btn li.search { padding: 0 0 0 13px;}
.caution { margin: 20px 0 0; padding: 18px 24px; background-color:#f1f1f1; }
.caution em { color: #CC3333; }
 
/* main ---------- */

#section_main { margin: 40px auto 30px;}
#section_main .container { width: 910px; height:535px; margin: 0 auto 40px;}
#section_main .image { position:relative;}
#section_main ul.btn { position: absolute; top:455px; right:100px; width:156px; height:25px; z-index:10; }
#section_main div.cap { position: absolute; top: 510px; width: 900px; z-index: 11; text-align:right; font-size:60%;}
#modulox_header{
	margin: 0px auto 5px;
	width: 910px;
	height:35px;
	display:block;
	position: relative;
}
#modulox_header div{
width: 255px;
height: 30px;
position: absolute;
top: 0px;
}
#modulox_header p.back{
	padding: 0px 0px 0px 0px;
	width: 144px;
	height: 25px;
	position:absolute;
	left: 765px;
	top: 7px;
	text-align:right;
}

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

#section_01 { padding: 30px 0; }
#section_01 .container { width: 910px; height:500px; margin: 0 auto;}
#section_01 .image { position:relative;}
#section_01 ul.btn { position: absolute; top: 28px; left: 505px; height: 25px; z-index: 10; }
#section_01 ul.btn li { display:block; float:left;}
#section_01 ul.btn li.more { width:168px;}
#section_01 ul.btn li.search { width:136px;}


/* 02 ---------- */

#section_02 { padding: 30px 0; }
#section_02 .container { width: 910px; height:500px; margin: 0 auto;}
#section_02 .image { position:relative;}
#section_02 ul.btn { position: absolute; top: 70px; left: 31px; width:156px; height: 60px; z-index: 10; }
#section_02 ul.btn li { display:block;}
#section_02 ul.btn li.more { height: 25px; }
#section_02 ul.btn li.search { height: 25px; margin-top:10px; padding:0;}

/* 03 ---------- */

#section_03 { padding: 30px 0; }
#section_03 .container { width: 910px; height:500px; margin: 0 auto;}
#section_03 .image { position:relative;}
#section_03 ul.btn { position: absolute; top: 448px; left: 32px; height: 25px; z-index: 10; }
#section_03 ul.btn li { display:block; float:left;}
#section_03 ul.btn li.more { width:168px;}
#section_03 ul.btn li.search { width:136px;}

/* gallery ---------- */

#section_gallery { margin-bottom:20px; }
#section_gallery .bg { }
#section_gallery .container { width: 900px; margin: 0 auto;}
#section_gallery h2 { padding: 73px 0 0 21px;}
#section_gallery ul.btn { padding: 14px 0 0 21px;}

#section_gallery .type { }
#section_gallery .type .container { width: 900px; margin: 0 auto; padding: 59px 0 55px;}
#section_gallery .type .content { float: right; width: 479px;}

/* 右テーブル */
#section_gallery .type .content table.spec { width: 479px;}
#section_gallery .type .content table.spec th { text-align: center; background: #4b4b4b; border-right: 2px solid #fff; padding: 4px 0; color: #fff;}
#section_gallery .type .content table.spec th span { font-size: 10px; padding: 0 0 0 5px;}
#section_gallery .type .content table.spec th span a { color: #fff;}
#section_gallery .type .content table.spec td { text-align: center; background: #e4e4e4; border-top: 2px solid #fff; border-right: 2px solid #fff; padding: 4px 0;}
#section_gallery .type .content table.spec th.h_01 { width: 122px;}
#section_gallery .type .content table.spec th.h_02 { width: 79px;}
#section_gallery .type .content table.spec th.h_03 { width: 137px;}
#section_gallery .type .content table.spec th.h_04,
#section_gallery .type .content table.spec td.last { border-right: 0;}
/* 右ファンクション */
#section_gallery .type .content .function { position: relative; width: 479px; min-height: 118px; height: auto !important; height: 118px; margin: 20px 0 0;}
#section_gallery .type .content .function p.img { position: absolute; top: 0; left: 0; width: 118px;}
#section_gallery .type .content .function h5 { padding: 0 0 0 139px; line-height: 1.25; font-weight: bold;}
#section_gallery .type .content .function h6 { padding: 10px 0 0 139px; font-weight: bold;}
#section_gallery .type .content .function p.desc { padding: 3px 0 0 139px; line-height: 1.42;}
#section_gallery .type .content ul.btn { padding: 16px 0 0 124px;}
#section_gallery .type .content ul.btn li { float: left; height: 25px; padding: 0 0 0 15px;}
/* 右プライス */
#section_gallery .type .content p.price { position: relative; margin: 20px 0 0; padding: 20px 0 0;}
#section_gallery .type .content p.price span.anchor_01 { position: absolute; top: 43px; left: 193px; }
#section_gallery .type .content p.price span.anchor_02 { position: absolute; top: 48px; left: 455px;}

/* 右見積もり */
#section_gallery .type .content p.mitsumori { margin-top:17px;}

/* 左ギャラリー */
#section_gallery .type .gallery { float: left; width: 401px;}
#section_gallery .type .gallery .galleryContentWrap { position: relative; height: 391px;}
#section_gallery .type .gallery .galleryContent { display: none; position: absolute; top: 0; left: 0; height: 391px;}
#section_gallery .type .gallery .colorGallery { display: block; position: relative; width: 401px;}
#section_gallery .type .gallery .colorGallery .slide { position: absolute; top: 0; left: 0; display: none;}

/* カラー選択ナビ */
#section_gallery .type .gallery .colorGallery .colorSelector { position: absolute; top: 345px; left: 0; width: 401px; height: 38px;}
#section_gallery .type .gallery .colorGallery .colorSelector p.h { float: left; width: 47px; height: 38px; background: url(../image/type_color.png) no-repeat; font-size: 1px; text-indent: -9999px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav { overflow:hidden; }
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li { float: left; width: 27px; height: 19px; margin:4px 6px 0 0; }
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_01 { width: 27px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li a { display: block; height: 19px; background: url(../image/type_color.png) no-repeat;}

#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_01 a { background-position: -47px 0;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_02 a { background-position: -76px 0;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_03 a { background-position: -105px 0;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_04 a { background-position: -134px 0;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_05 a { background-position: -163px 0;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_06 a { background-position: -192px 0;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_07 a { background-position: -221px 0;}

#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_01 a:hover { background-position: -47px -38px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_02 a:hover { background-position: -76px -38px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_03 a:hover { background-position: -105px -38px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_04 a:hover { background-position: -134px -38px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_05 a:hover { background-position: -163px -38px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_06 a:hover { background-position: -192px -38px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_07 a:hover { background-position: -221px -38px;}

#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_01 a.js_current { background-position: -47px -76px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_02 a.js_current { background-position: -76px -76px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_03 a.js_current { background-position: -105px -76px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_04 a.js_current { background-position: -134px -76px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_05 a.js_current { background-position: -163px -76px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_06 a.js_current { background-position: -192px -76px;}
#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li.nav_07 a.js_current { background-position: -221px -76px;}

#section_gallery .type .gallery .colorGallery .colorSelector ul.nav li a span { display: none;}
 
/* スタイリング,室内,運転席周りnavi */
#section_gallery .type .gallery ul.galleryNav { height: 35px; overflow: hidden; padding: 21px 0 0; background: url(../image/type_border.png) repeat-x;}
#section_gallery .type .gallery ul.galleryNav li { float: left; width: 134px; height: 35px; font-size: 1px; text-indent: -9999px;}
#section_gallery .type .gallery ul.galleryNav li.nav_03 { width: 133px;}
#section_gallery .type .gallery ul.galleryNav li a { outline: none; display: block; height: 35px; background: url(../image/type_gallery_nav.png) no-repeat;}
#section_gallery .type .gallery ul.galleryNav li.nav_02 a { background-position: -134px 0;}
#section_gallery .type .gallery ul.galleryNav li.nav_03 a { background-position: -268px 0;}
#section_gallery .type .gallery ul.galleryNav li.nav_01 a:hover { background-position: 0 -35px;}
#section_gallery .type .gallery ul.galleryNav li.nav_02 a:hover { background-position: -134px -35px;}
#section_gallery .type .gallery ul.galleryNav li.nav_03 a:hover { background-position: -268px -35px;}
#section_gallery .type .gallery ul.galleryNav li.nav_01 a.js_current { background-position: 0 -70px;}
#section_gallery .type .gallery ul.galleryNav li.nav_02 a.js_current { background-position: -134px -70px;}
#section_gallery .type .gallery ul.galleryNav li.nav_03 a.js_current { background-position: -268px -70px;}

#section_gallery .type ul.note { padding: 25px 0 0;}

#section_gallery p.bnr01 { padding: 0 0 60px 0; text-align:center;}