@charset "utf-8";


/*------------------------------------------------------------------------------------------
*
*
    /webcatalog/performance/ecology/
    hybrid-system.css
*
*
------------------------------------------------------------------------------------------ */
@media print, screen and (min-width : 769px){
#hym {
	width:848px; height:520px; /*600px*/
	background:url("../image/hym/base-pc.gif") left top no-repeat;
	position:relative;
	margin:0 auto;
	}
#hym h3 { position:absolute; top:30px; right:32px; margin-bottom:0; }

/* z-index */
.scene { z-index:10; }
.scene .car,
.car_patrs01, .car_patrs02,
.scene .wheel,
.scene h4,
.scene .system { z-index:12; }
.scene.current { z-index:20; }
.pager, #hym h3 { z-index:30; }

/* .scene */
.scene {
	position:absolute; top:0; left:0;
	width:848px; height:520px;
	overflow:hidden;
	background:url("../image/hym/base-pc.gif") left top no-repeat;
	filter:alpha(opacity=0); opacity:0;
	}
.scene.current {
	filter:alpha(opacity=100); opacity:1;
	}
.scene .car {
	position:absolute; top:182px; left:210px;
	width:638px; height:206px;
	background:url("../image/hym/car-pc.png") right top no-repeat;
	}
.scene .car img { display:block;}
.scene .system {
	position:absolute; bottom:22px; right:31px;
	width:335px; height:86px;
	}
.scene .system.sys01 { background:url(../image/hym/system01-pc.png) left top no-repeat; }
.scene .system.sys02 { background:url(../image/hym/system02-pc.png) left top no-repeat; }
.scene .system.sys03 { background:url(../image/hym/system03-pc.png) left top no-repeat; }
.scene .system.sys04 { background:url(../image/hym/system04-pc.png) left top no-repeat; }
.sys_arw {
	display:block; width:54px; height:30px;
	position:absolute;
	}
.sys_arw {background:url("../image/hym/system_arw01-pc.png") left top repeat; left:74px; top:19px;}
.sys_arw.sa_r {background:url("../image/hym/system_arw02-pc.png") left top repeat; left:73px; top:19px;}

/* bg */
.scene .bg { position:absolute; top:0; right:0; }
.scene .bg_1 {
	background: url(../image/hym/bg_building01-pc.gif) repeat-x right top;
	width: 5000px;
	height: 263px;
	top: 6px;
	z-index: 10;
	}
.scene_2 .bg_1, .scene_5 .bg_1 { background:url(../image/hym/bg_building02-pc.gif) repeat-x right top; }
.scene_3 .bg_1, .scene_4 .bg_1 { background:url(../image/hym/bg_building03-pc.gif) repeat-x right top; }
.scene .bg_2 {
	background:url(../image/hym/bg_line-pc.gif) repeat-x right top;
	width:14000px; height:6px;
	top:311px;
	z-index:11;
	}
.scene_4 .bg_2 {
	background:url(../image/hym/bg_highway-pc.png) repeat-x right top;
	height:107px;
	top:209px;
	}
.scene_6 .bg_2 {
	background:url(../image/hym/bg_stop-pc.gif) no-repeat left top;
	width:1050px;
	height:114px;
	top:272px;
	}

/* .wheel */
.scene .wheel {
	width:387px; height:67px;
	position:absolute; top:315px; left:332px;
	background:url(../image/hym/wheel_01-pc.png);
	}
.scene_2 .wheel { background-image:url(../image/hym/wheel_02-pc.png); }
.scene_3 .wheel { background-image:url(../image/hym/wheel_02-pc.png); }
.scene_4 .wheel { background-image:url(../image/hym/wheel_03-pc.png); }
.scene_5 .wheel { background-image:url(../image/hym/wheel_02-pc.png); }



/* ------------------------------
    #section_mode
------------------------------ */
#section_mode h4.sub_title{ margin-bottom: 20px;}
#section_mode .caption{ width: 880px; height: 90px !important; margin: 20px auto 20px auto;}
#section_mode .caption div{ display: none;}
#section_mode .caption h4{ margin: 0 0 15px 0; font-size: 20px; font-weight: bold; line-height: 1em;}
#section_mode .caption h4 span{ margin: 0 0 0 10px; font-size: 18px; font-weight: normal; line-height: 1em;}
#section_mode .caption h4 span.sup{ margin: 0; font-size: 10px; position: relative; top: -5px;}
#section_mode .caption .desc{ font-size: 16px; line-height: 1.5em;}
#section_mode .caption .desc .sup{margin: 0; font-size: 10px; position: relative; top: -5px;}
#section_mode .caption .caution{ margin: 15px 0 0 0; font-size: 11px; line-height: 1.5em;}

#section_mode .article_03 .scenes .scene .bg_1:after{
    width: 100%;
    content: '';
    display: block;
    border-top: 10px solid #f6f6f6;
    position: absolute;
    top: -5px;
    left: 0;
}

#section_mode .article_03 .scenes .scene .bg_2:after{
    width: 100%;
    content: '';
    display: block;
    border-top: 10px solid #f6f6f6;
    position: absolute;
    top: -5px;
    left: 0;
}

#section_mode .nav_wrap{
    text-align: center;
    position: relative;
}

#section_mode .pager{
    width: 100% !important;
    height: 40px;
    overflow: hidden;
    padding: 0 50px;
    display: table;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
}

#section_mode .pager:after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
}

#section_mode .pager li{
    width: 16.666%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: table-cell;
    background-color: #efefef;
    color: #fff;
    cursor: pointer;
    position: relative;
    outline: none;
}

#section_mode .pager li:after{
    content: '';
	border-top: 30px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 15px solid #fff;
    display: block;
    position: absolute;
    right: -25px;
    top: -10px;
    z-index: 2;
}

#section_mode .pager li:before{
    content: '';
	border-top: 30px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 15px solid #efefef;
    display: block;
    position: absolute;
    right: -20px;
    top: -10px;
    z-index: 3;
}

#section_mode .pager li:last-child:after,
#section_mode .pager li:last-child:before{
    display: none !important;
}

#section_mode .pager li:hover:before,
#section_mode .pager li.current:before{
    content: '';
	border-top: 30px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 15px solid #0064a1;
    display: block;
    position: absolute;
    right: -20px;
    top: -10px;
    z-index: 3;
}

#section_mode .pager li a{
    color:#444;
    outline: none;
}

#section_mode .pager li:hover,
#section_mode .pager li.current{
    background-color: #0064a1;
}

#section_mode .pager li:hover a,
#section_mode .pager li.current a{
    color: #fff;
}


}



@media screen and (max-width : 768px){
#hym {
	width:848px; height:520px; /*600px*/
	background:url("../image/hym/base-pc.gif") left top no-repeat;
	position:relative;
	margin:0 auto;
	}
#hym h3 { position:absolute; top:30px; right:32px; margin-bottom:0; }

/* z-index */
.scene { z-index:10; }
.scene .car,
.car_patrs01, .car_patrs02,
.scene .wheel,
.scene h4,
.scene .system { z-index:12; }
.scene.current { z-index:20; }
.pager, #hym h3 { z-index:30; }

/* .scene */
.scene {
	position:absolute; top:0; left:0;
	width:848px; height:520px;
	overflow:hidden;
	background:url("../image/hym/base-pc.gif") left top no-repeat;
	filter:alpha(opacity=0); opacity:0;
	}
.scene.current {
	filter:alpha(opacity=100); opacity:1;
	}
.scene .car {
	position:absolute; top:182px; left:210px;
	width:638px; height:206px;
	background:url("../image/hym/car-pc.png") right top no-repeat;
	}
.scene .car img { display:block;}
.scene .system {
	position:absolute; bottom:22px; right:31px;
	width:335px; height:86px;
	}
.scene .system.sys01 { background:url(../image/hym/system01-pc.png) left top no-repeat; }
.scene .system.sys02 { background:url(../image/hym/system02-pc.png) left top no-repeat; }
.scene .system.sys03 { background:url(../image/hym/system03-pc.png) left top no-repeat; }
.scene .system.sys04 { background:url(../image/hym/system04-pc.png) left top no-repeat; }
.sys_arw {
	display:block; width:54px; height:30px;
	position:absolute;
	}
.sys_arw {background:url("../image/hym/system_arw01-pc.png") left top repeat; left:74px; top:19px;}
.sys_arw.sa_r {background:url("../image/hym/system_arw02-pc.png") left top repeat; left:73px; top:19px;}

/* bg */
.scene .bg { position:absolute; top:0; right:0; }
.scene .bg_1 {
	background: url(../image/hym/bg_building01-pc.gif) repeat-x right top;
	width: 5000px;
	height: 263px;
	top: 6px;
	z-index: 10;
	}
.scene_2 .bg_1, .scene_5 .bg_1 { background:url(../image/hym/bg_building02-pc.gif) repeat-x right top; }
.scene_3 .bg_1, .scene_4 .bg_1 { background:url(../image/hym/bg_building03-pc.gif) repeat-x right top; }
.scene .bg_2 {
	background:url(../image/hym/bg_line-pc.gif) repeat-x right top;
	width:14000px; height:6px;
	top:311px;
	z-index:11;
	}
.scene_4 .bg_2 {
	background:url(../image/hym/bg_highway-pc.png) repeat-x right top;
	height:107px;
	top:209px;
	}
.scene_6 .bg_2 {
	background:url(../image/hym/bg_stop-pc.gif) no-repeat left top;
	width:1050px;
	height:114px;
	top:272px;
	}

/* .wheel */
.scene .wheel {
	width:387px; height:67px;
	position:absolute; top:315px; left:332px;
	background:url(../image/hym/wheel_01-pc.png);
	}
.scene_2 .wheel { background-image:url(../image/hym/wheel_02-pc.png); }
.scene_3 .wheel { background-image:url(../image/hym/wheel_02-pc.png); }
.scene_4 .wheel { background-image:url(../image/hym/wheel_03-pc.png); }
.scene_5 .wheel { background-image:url(../image/hym/wheel_02-pc.png); }




/* ------------------------------
    #section_mode
------------------------------ */
#section_mode h4.sub_title{ margin-bottom: 20px;}
#section_mode .scenes{ -webkit-transform-origin: left top !important; transform-origin: left top !important;}
#section_mode .caption{ padding: 0 15px; margin: 20px 0 15px auto;}
#section_mode .caption div{ display: none;}
#section_mode .caption h4{ margin: 0 0 15px 0; font-size: 16px; font-weight: bold; line-height: 1em;}
#section_mode .caption h4 span{ margin: 0 0 0 10px; font-size: 14px; font-weight: normal; line-height: 1em;}
#section_mode .caption h4 span.sup{ margin: 0; font-size: 10px; position: relative; top: -5px;}
#section_mode .caption .desc{ font-size: 14px; line-height: 1.5em;}
#section_mode .caption .desc .sup{margin: 0; font-size: 10px; position: relative; top: -5px;}
#section_mode .caption .caution{ margin: 5px 0 0 0; font-size: 12px; line-height: 1.5em;}

#section_mode .article_03 .scenes .scene .bg_1:after{
    width: 100%;
    content: '';
    display: block;
    border-top: 10px solid #f6f6f6;
    position: absolute;
    top: -5px;
    left: 0;
}

#section_mode .article_03 .scenes .scene .bg_2:after{
    width: 100%;
    content: '';
    display: block;
    border-top: 10px solid #f6f6f6;
    position: absolute;
    top: -5px;
    left: 0;
}

#section_mode .nav_wrap{
    text-align: center;
    position: relative;
}

#section_mode .pager{
    width: 100% !important;
    height: 40px;
    overflow: hidden;
    padding: 0 15px;
    display: table;
    box-sizing: border-box;
    position: relative;
    bottom: 0;
}

#section_mode .pager:after{
    content: '';
    display: block;
    width: 100%;
    height: 2px;
    background-color: #fff;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
}

#section_mode .pager li{
    width: 16.666%;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    display: table-cell;
    background-color: #efefef;
    color: #fff;
    cursor: pointer;
    position: relative;
    outline: none;
}

#section_mode .pager li:after{
    content: '';
	border-top: 30px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 15px solid #fff;
    display: block;
    position: absolute;
    right: -25px;
    top: -10px;
    z-index: 2;
}

#section_mode .pager li:before{
    content: '';
	border-top: 30px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 15px solid #efefef;
    display: block;
    position: absolute;
    right: -20px;
    top: -10px;
    z-index: 3;
}

#section_mode .pager li:last-child:after,
#section_mode .pager li:last-child:before{
    display: none !important;
}

#section_mode .pager li:hover:before,
#section_mode .pager li.current:before{
    content: '';
	border-top: 30px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 15px solid #0064a1;
    display: block;
    position: absolute;
    right: -20px;
    top: -10px;
    z-index: 3;
}

#section_mode .pager li a{
    color:#444;
    outline: none;
}

#section_mode .pager li:hover,
#section_mode .pager li.current{
    background-color: #0064a1;
}

#section_mode .pager li:hover a,
#section_mode .pager li.current a{
    color: #fff;
}


}