﻿@charset "UTF-8";



/**
 * HONDA N-BOX SLASH
 *
 * index.css
 * @version  1.0  (updated: 2014.11.16)
 */



/* --------------------------------
	スタイリング
-------------------------------- */

/* 01 ---------- */
#section_01 .container { padding-bottom: 171px; background: url(../image/section_01_bg.png) #f0f0f0 center bottom no-repeat; }
.section_01_gallery { position: relative; overflow: hidden; width: 980px; height: 569px; margin: 35px 0 0; }
.section_01_gallery_list { position: absolute; top: 0; left: 0; width: 980px; height: 569px; }
.section_01_gallery_list img { opacity: 0; filter: alpha(opacity=0); }
.section_01_gallery_list:after { position: absolute; bottom: 0; left: 0; background: url(../image/section_01_gallery_mask.png) 0 0 no-repeat; width: 980px; height: 73px; display: block; content: '';}
.section_01_gallery_list_01,
.section_01_gallery_list_02 { background: url(../image/section_01_gallery_bg.png) 0 0 no-repeat; }

.section_01_gallery_img { position: absolute; top: 533px; left: 813px; }
.section_01_gallery_01_img_01,
.section_01_gallery_02_img_01 { top: 0; left: 0; }

.section_01_gallery_01_img_02 { top: 0; left: 474px; }
.section_01_gallery_01_img_03 { top: 0; left: 774px; }
.section_01_gallery_01_img_04 { top: 95px; left: 674px; }
.section_01_gallery_01_img_05 { top: 195px; left: 774px; }
.section_01_gallery_01_img_06 { top: 295px; left: 874px; }

.section_01_gallery_03_img_01,
.section_01_gallery_04_img_01 { top: 0; left: 0; }

.section_01_gallery_03_img_02,
.section_01_gallery_04_img_02 { top: 0; left: 410px; }

.gallery_pager { position: absolute;top: 533px; left: 813px; }

.section_01_txt { margin: 19px 40px 0; font-size: 12px; }
.section_01_wheels { margin: 20px 0 0; padding: 0 40px; height: 390px; }
.section_01_wheel { float: left; width: 180px; height: 167px; position: relative; }

.section_01_wheel .section_01_wheel_img { position: absolute; width: 146px; height: 145px; z-index: 100;}
.section_01_wheel .section_01_wheel_txt { position: absolute; width: 160px; top: 186px; font-size: 12px; line-height: 1.84; }
.section_01_wheel_01 .section_01_wheel_img { top: 19px; left: 7px; }
.section_01_wheel_02 .section_01_wheel_img { top: 19px; left: 13px; }
.section_01_wheel_03 .section_01_wheel_img { top: 19px; left: 17px; }
.section_01_wheel_04 .section_01_wheel_img { top: 19px; left: 22px; }
.section_01_wheel_05 .section_01_wheel_img { top: 19px; left: 25px; }

.section_01_wheel_01 .section_01_wheel_txt { left: 0; }
.section_01_wheel_02 .section_01_wheel_txt { left: 5px; }
.section_01_wheel_03 .section_01_wheel_txt { left: 10px; }
.section_01_wheel_04 .section_01_wheel_txt { left: 14px; }
.section_01_wheel_05 .section_01_wheel_txt { left: 18px; }

.section_01_wheel_shadow { position: absolute; top: 0; left: 0; }
.section_01_wheel_note { font-size: 10px; padding: 0 40px; }


.section_01_btn { margin-top: 18px; }

/* 02 ---------- */
#section_02 { position: relative; padding: 83px 0 0; }

.section_02_gallery { position: relative; width: 980px; height: 340px; margin: 19px 0 0; }
.section_02_gallery li { position: absolute; top: 0; left: 0; }
.section_02_gallery_note { font-size: 10px; margin: 10px auto 0; width: 900px; }
.section_02_gallery_note li { margin: 5px 0 0; }
.section_02_gallery_note li:first-child { margin: 0; }

.section_02_gallery_overlay { position: absolute; top: 301px; left: 630px; z-index: 100; }

.section_02_gallery_btn { position: absolute; z-index: 100; left: 630px; width: 300px; }
.section_02_gallery_btn_01 { top: 344px; }
.section_02_gallery_btn_02 { top: 430px; }
.section_02_gallery_btn_h { overflow: hidden; width: 104px; height: 24px; text-indent: -9999px; }
.section_02_gallery_btn_01_h { background: url(../image/section_02_gallery_btn_01_h.png) 0 0 no-repeat; }
.section_02_gallery_btn_02_h { background: url(../image/section_02_gallery_btn_02_h.png) 0 0 no-repeat; }
.section_02_gallery_btn ul { position: relative; margin: -4px 0 0 -4px; }
.section_02_gallery_btn ul li { float: left; overflow: hidden; width: 34px; height: 24px; margin: 4px 0 0 4px; text-indent: -9999px; background: url(../../../common/image_common/styling_gallery_color.png) 0 0 no-repeat; }
.section_02_gallery_btn ul li:hover {cursor: pointer;}
.section_02_gallery_btn ul li.btn_01 { background-position: 0 0; }
.section_02_gallery_btn ul li.btn_02 { background-position: -38px 0; }
.section_02_gallery_btn ul li.btn_03 { background-position: -76px 0; }
.section_02_gallery_btn ul li.btn_04 { background-position: -114px 0; }
.section_02_gallery_btn ul li.btn_05 { background-position: -152px 0; }
.section_02_gallery_btn ul li.btn_06 { background-position: -190px 0; }
.section_02_gallery_btn ul li.btn_07 { background-position: -228px 0; }
.section_02_gallery_btn ul li.btn_08 { background-position: -266px 0; }
.section_02_gallery_btn ul li.btn_09 { background-position: -304px 0; }
.section_02_gallery_btn ul li.btn_10 { background-position: -342px 0; }
.section_02_gallery_btn ul li.btn_11 { background-position: -380px 0; }
.section_02_gallery_btn ul li.btn_12 { background-position: -418px 0; }
.section_02_gallery_btn ul li.btn_13 { background-position: -456px 0; }
.section_02_gallery_btn ul li.btn_14 { background-position: -494px 0; }
.section_02_gallery_btn ul li.btn_15 { background-position: -532px 0; }
.section_02_gallery_btn ul li.btn_16 { background-position: -570px 0; }
.section_02_gallery_btn ul li.btn_17 { background-position: -608px 0; }
.section_02_gallery_btn ul li.btn_18 { background-position: -646px 0; }
.section_02_gallery_btn ul li.btn_19 { background-position: -684px 0; }
.section_02_gallery_btn ul li.btn_20 { background-position: -722px 0; }
.section_02_gallery_btn ul li.btn_21 { background-position: -760px 0; }
.section_02_gallery_btn ul li.btn_22 { background-position: -798px 0; }
.section_02_gallery_btn ul li.btn_23 { background-position: -836px 0; }
.section_02_gallery_btn ul li.btn_24 { background-position: -874px 0; }
.section_02_gallery_btn ul li.btn_25 { background-position: -912px 0; }

.section_02_gallery_btn ul li.btn_01:hover { background-position: 0 -26px; }
.section_02_gallery_btn ul li.btn_02:hover { background-position: -38px -26px; }
.section_02_gallery_btn ul li.btn_03:hover { background-position: -76px -26px; }
.section_02_gallery_btn ul li.btn_04:hover { background-position: -114px -26px; }
.section_02_gallery_btn ul li.btn_05:hover { background-position: -152px -26px; }
.section_02_gallery_btn ul li.btn_06:hover { background-position: -190px -26px; }
.section_02_gallery_btn ul li.btn_07:hover { background-position: -228px -26px; }
.section_02_gallery_btn ul li.btn_08:hover { background-position: -266px -26px; }
.section_02_gallery_btn ul li.btn_09:hover { background-position: -304px -26px; }
.section_02_gallery_btn ul li.btn_10:hover { background-position: -342px -26px; }
.section_02_gallery_btn ul li.btn_11:hover { background-position: -380px -26px; }
.section_02_gallery_btn ul li.btn_12:hover { background-position: -418px -26px; }
.section_02_gallery_btn ul li.btn_13:hover { background-position: -456px -26px; }
.section_02_gallery_btn ul li.btn_14:hover { background-position: -494px -26px; }
.section_02_gallery_btn ul li.btn_15:hover { background-position: -532px -26px; }
.section_02_gallery_btn ul li.btn_16:hover { background-position: -570px -26px; }
.section_02_gallery_btn ul li.btn_17:hover { background-position: -608px -26px; }
.section_02_gallery_btn ul li.btn_18:hover { background-position: -646px -26px; }
.section_02_gallery_btn ul li.btn_19:hover { background-position: -684px -26px; }
.section_02_gallery_btn ul li.btn_20:hover { background-position: -722px -26px; }
.section_02_gallery_btn ul li.btn_21:hover { background-position: -760px -26px; }
.section_02_gallery_btn ul li.btn_22:hover { background-position: -798px -26px; }
.section_02_gallery_btn ul li.btn_23:hover { background-position: -836px -26px; }
.section_02_gallery_btn ul li.btn_24:hover { background-position: -874px -26px; }
.section_02_gallery_btn ul li.btn_25:hover { background-position: -912px -26px; }

.section_02_gallery_btn ul li.btn_01.is-current { background-position: 0 -52px; }
.section_02_gallery_btn ul li.btn_02.is-current { background-position: -38px -52px; }
.section_02_gallery_btn ul li.btn_03.is-current { background-position: -76px -52px; }
.section_02_gallery_btn ul li.btn_04.is-current { background-position: -114px -52px; }
.section_02_gallery_btn ul li.btn_05.is-current { background-position: -152px -52px; }
.section_02_gallery_btn ul li.btn_06.is-current { background-position: -190px -52px; }
.section_02_gallery_btn ul li.btn_07.is-current { background-position: -228px -52px; }
.section_02_gallery_btn ul li.btn_08.is-current { background-position: -266px -52px; }
.section_02_gallery_btn ul li.btn_09.is-current { background-position: -304px -52px; }
.section_02_gallery_btn ul li.btn_10.is-current { background-position: -342px -52px; }
.section_02_gallery_btn ul li.btn_11.is-current { background-position: -380px -52px; }
.section_02_gallery_btn ul li.btn_12.is-current { background-position: -418px -52px; }
.section_02_gallery_btn ul li.btn_13.is-current { background-position: -456px -52px; }
.section_02_gallery_btn ul li.btn_14.is-current { background-position: -494px -52px; }
.section_02_gallery_btn ul li.btn_15.is-current { background-position: -532px -52px; }
.section_02_gallery_btn ul li.btn_16.is-current { background-position: -570px -52px; }
.section_02_gallery_btn ul li.btn_17.is-current { background-position: -608px -52px; }
.section_02_gallery_btn ul li.btn_18.is-current { background-position: -646px -52px; }
.section_02_gallery_btn ul li.btn_19.is-current { background-position: -684px -52px; }
.section_02_gallery_btn ul li.btn_20.is-current { background-position: -722px -52px; }
.section_02_gallery_btn ul li.btn_21.is-current { background-position: -760px -52px; }
.section_02_gallery_btn ul li.btn_22.is-current { background-position: -798px -52px; }
.section_02_gallery_btn ul li.btn_23.is-current { background-position: -836px -52px; }
.section_02_gallery_btn ul li.btn_24.is-current { background-position: -874px -52px; }
.section_02_gallery_btn ul li.btn_25.is-current { background-position: -912px -52px; }

/* overlay */
.overlay { position: absolute; z-index: 9999; top: 0; left: 0; display: none; width: 100%; }
.overlay_mask { position: fixed; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.5; background: #000; }
.overlay_close { position: absolute; top: 0; right: 0; }
.overlay_close:hover { cursor: pointer; opacity: 0.7; filter: alpha(opacity=70); }
.overlay_item { position: relative; left: 50%; display: none; width: 900px; margin: 0 0 0 -450px; background: #fff;　}
.overlay_cnt { display: none; padding: 40px 40px 50px; }
.overlay_cont_h { font-size: 18px; font-weight: bold; }
.overlay_cont_h img { vertical-align: 0; padding: 0 5px;  }
.overlay_cont_note { font-size: 10px; text-align: right; position: absolute; top: 60px;/*top: 70px; original*/ right: 40px; }
.overlay_cont_txt { margin: 12px 0 0; font-size: 12px; line-height: 1.41; }
.overlay_cont_txt span { display: block; margin: 5px 0 0; font-size: 10px; }
.overlay table { width: 100%; margin: 20px 0 0; }
.overlay table th,
.overlay table td { padding: 10px; text-align: center;}
.overlay table th { background: #dcdcdc; font-weight: bold; text-align: center; font-size: 12px; line-height: 1.4; border-right: 1px solid #fafafa; }
.overlay table td { border-right: 1px solid #dcdcdc; border-top: 1px solid #dcdcdc; }
.overlay table .last { border-right: none; }
.overlay table .type { width: 98px; }
.overlay table .type_last { border: none; }
.overlay table .color { text-align: left; }
.overlay table .color_01,
.overlay table .color_02,
.overlay table .color_03,
.overlay table .color_04,
.overlay table .color_05 { position: relative; padding-left: 42px; }
.overlay table .color_01:after,
.overlay table .color_02:after,
.overlay table .color_03:after,
.overlay table .color_04:after,
.overlay table .color_05:after { position: absolute; top: -4px; left: 0; display: block; width: 34px; height: 24px; content:''; background: url(../../../common/image_common/interior_gallery_color.png) 0 0 no-repeat; }

.overlay table .color_01:after { background-position: -38px 0; }
.overlay table .color_02:after { background-position: 0 0; }
.overlay table .color_03:after { background-position: -76px 0; }
.overlay table .color_04:after { background-position: -114px 0; }
.overlay table .color_05:after { background-position: -152px 0; }


/* 03 ---------- */
#section_03 { margin: 79px 0 0; }
#section_03 .section_h,
#section_03 .section_lead,
#section_03 .section_btn { position: relative; z-index: 1; }

.section_03_img { position: absolute; z-index: 0; top: 167px; left: 400px; }

.section_03_btn_01 { margin-top: 292px; }


/* ----------------------------------------
	2015.12.03
---------------------------------------- */

.overlay table .type {
 	width: 75px;
	padding: 10px 5px;
}

.overlay table .color {
	white-space: nowrap;
}

.overlay table .color_01,
.overlay table .color_02,
.overlay table .color_03,
.overlay table .color_04,
.overlay table .color_05 {
	padding-left: 32px;
}
.overlay table .color_01:after,
.overlay table .color_02:after,
.overlay table .color_03:after,
.overlay table .color_04:after,
.overlay table .color_05:after {
	width: 24px;
}

#cv_wrap {
	max-width: 1268px;
	margin: 70px auto 0;
	background: #f0f0f0;
}

#cv_title {
	width: 900px;
	margin: 0 auto 30px;
	padding-top: 50px;
}

#cv_frame {
	overflow: hidden;
	position: relative;
	width: 900px;
	height: 664px;
	margin: auto;
}
#cv_frame iframe {
	position: absolute;
	left: -50px;
	/*top: -586px; original*/
	top: -646px;
	width: 1000px;
	height: 1600px;
	border: 0;
}
