@charset "utf-8";


/*------------------------------------------------------------------------------------------
*
*
    /webcatalog/performance/ecology/
    hybrid-system.css
*
*
------------------------------------------------------------------------------------------ */
@media print, screen and (min-width : 769px){#section_mode .article_03 { width: 880px; height: 410px; margin: 0 auto 20px;}
#section_mode .article_03 .scenes { position: relative; width: 880px; height: 410px; background:#f6f6f6; overflow: hidden;}
#section_mode .article_03 .scenes h3 { position: absolute; top: 51px; left: 90px; z-index: 30;}
#section_mode .article_03 .scenes .scene { position: absolute; top: 0; left: 0; z-index: 10; width: 880px; height: 410px; overflow: hidden; filter: alpha(opacity=0); opacity: 0; z-index: -32;}
#section_mode .article_03 .scenes .scene.current { filter: alpha(opacity=100); opacity: 1; z-index:20; }
#section_mode .article_03 .scenes .scene .balloon { width: 360px; height: 80px; position: absolute; top: 35px; left: 260px; z-index:12; transform-origin: center bottom; transform: scale(0); background-color: #00a0e9; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; line-height: 1.5em; text-align: center;}
#section_mode .article_03 .scenes .scene_4 .balloon { background-color: #ed7d31; }
#section_mode .article_03 .scenes .scene .balloon::after { content: ""; border: 15px transparent solid; border-top-color: #00a0e9; position: absolute; bottom: -30px; left: 50%; border-left-width: 5px; border-right-width: 5px; }
#section_mode .article_03 .scenes .scene_4 .balloon::after { border-top-color: #ed7d31; }
#section_mode .article_03 .scenes .scene .balloon.on {transition: all 300ms cubic-bezier(.16, .52, .65, 1.32); transform: scale(1);}
#section_mode .article_03 .scenes .scene .car { position: absolute; top: 187px; left: 243px; z-index:12; width: 372px; transform: rotate(0.2deg);}
#section_mode .article_03 .scenes .scene .car img { width: 100%; height: auto;}
#section_mode .article_03 .scenes .scene_3 .car { top: 183px; transform: rotate(5deg);}
#section_mode .article_03 .scenes .scene_6 .car { top: 183px; transform: rotate(-5deg);}
#section_mode .article_03 .scenes .scene .status { width: 100%; position: absolute; bottom: 20px; left: 0; font-size: 16px; font-weight: bold; color: #00a0e9; text-align: center; z-index: 12;}
#section_mode .article_03 .scenes .scene_4 .status { color: #ed7d31;}
#section_mode .article_03 .scenes .scene .btn {position: absolute; top: 164px; right: 20px; opacity: 0; transform: translateX(-10px); visibility: hidden; z-index: 12;}
#section_mode .article_03 .scenes .scene .btn.on {transition: all 300ms ease-out; opacity: 1; cursor: pointer; transform: translateX(0); transition-delay: 200ms; visibility: visible;}
#section_mode .article_03 .scenes .scene_1 .bg_1,
#section_mode .article_03 .scenes .scene_2 .bg_1 { position: absolute; bottom: 0; left: 0; width: 12000px; height: 410px; background: url(../image/hybrid-system/sec01_bg.png) repeat-x left -67px; z-index:10; }
#section_mode .article_03 .scenes .scene_3 .bg_1,
#section_mode .article_03 .scenes .scene_6 .bg_1 { position: absolute; bottom: 0; left: 0; width: 880px; height: 410px; background: url(../image/hybrid-system/sec02_bg01.png) no-repeat left 27px; background-size: 100% auto; z-index:10; }
#section_mode .article_03 .scenes .scene_3 .bg_1 { transform: scaleX(-1); }
#section_mode .article_03 .scenes .scene_3 .bg_2,
#section_mode .article_03 .scenes .scene_6 .bg_2 { width: 3600px; height: 410px; position: absolute; bottom: 0; left: 0; background: url(../image/hybrid-system/sec02_bg02.png) repeat-x left 63px; background-size: 880px auto; }
#section_mode .article_03 .scenes .scene_4 .bg_1,
#section_mode .article_03 .scenes .scene_5 .bg_1 { position: absolute; width: 16000px; height: 410px; background: url(../image/hybrid-system/sec03_bg.png) repeat-x left -123px; }
#section_mode .article_03 .scenes .scene .wheel { position: absolute; top: 271px; left: 216px; z-index:12; width: 440px; height: 95px; background: url(../image/hybrid-system/sec_01_03_wheel_01.png); transform: scale(0.69);}
#section_mode .article_03 .scenes .scene_2 .wheel { background-image: url(../image/hybrid-system/sec_01_03_wheel_02.png); top: 271px; left: 217px; }
#section_mode .article_03 .scenes .scene_3 .wheel { background-image: url(../image/hybrid-system/sec_01_03_wheel_02.png); transform: rotate(5deg) scale(0.69); top: 268px; left: 211px; }
#section_mode .article_03 .scenes .scene_6 .wheel { background-image: url(../image/hybrid-system/sec_01_03_wheel_02.png); transform: rotate(-5deg) scale(0.69); top: 268px; left: 220px; }
#section_mode .article_03 .scenes .scene_6 .wheel.slow { background-image: url(../image/hybrid-system/sec_01_03_wheel_01.png);}
#section_mode .article_03 .scenes .scene_4 .wheel,
#section_mode .article_03 .scenes .scene_5 .wheel { background-image: url(../image/hybrid-system/sec_01_03_wheel_03.png); }





/* ------------------------------
    #section_mode
------------------------------ */
#section_mode h4.sub_title{ margin-bottom: 20px;}
#section_mode .caption{ width: 880px; height: 105px !important; margin: 0 auto 20px auto; letter-spacing: -0.4em;}
#section_mode .caption > div{ width: 0; overflow: hidden; display: inline-block; letter-spacing: normal; vertical-align: top;}
#section_mode .caption .inner { width: 880px;}
#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: 2px;}
#section_mode .caption .desc{ font-size: 16px; line-height: 1.5em;}
#section_mode .caption .desc .sup{margin: 0; font-size: 10px; position: relative; top: 2px;}
#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;
	margin-bottom: 10px;
    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;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
}

#section_mode .pager li{
    width: 45%;
    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:nth-child(2) {
	width: 20%;
}

#section_mode .pager li:nth-child(3) {
	width: 35%;
}

#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::before {
	background-color: #f8f8f8;
}

#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 #00a0e9;
    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: #00a0e9;
}

#section_mode .pager li:nth-child(2):hover,
#section_mode .pager li:nth-child(2).current {
	background-color: #ed7d31;
}

#section_mode .pager li:nth-child(2):hover::before,
#section_mode .pager li:nth-child(2).current::before {
	border-left-color: #ed7d31;
}

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

#section_mode .index {
	margin: 0 50px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
	
#section_mode .step {
	text-align: center;
	cursor: pointer;
}
	
#section_mode .step.current,
#section_mode .step:hover {
	color: #00a0e9;
}

#section_mode .nav_2 .step.current,
#section_mode .nav_2 .step:hover {
	color: #ed7d31;
}
	
#section_mode .index > div {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#section_mode .nav_1 {
	flex: 1 0 45%;
}

#section_mode .nav_2 {
	flex: 1 0 20%;
}

#section_mode .nav_3 {
	flex: 1 0 35%;
}


#section_mode .step > div {
	
}
#section_mode .scenes .balloon span {
    font-size:20px;
}

}



@media screen and (max-width : 768px){
#section_mode .article_03 { width: 1280px; height: 742px; margin: 0 0 10px;}
#section_mode .article_03 .scenes { position: relative; width: 1280px; height: 742px; background:#f6f6f6;}
#section_mode .article_03 .scenes .scene { position: absolute; top: 0; left: 0; z-index: 10; width: 1280px; height: 742px; overflow: hidden; filter: alpha(opacity=0); opacity: 0; z-index: -32;}
#section_mode .article_03 .scenes .scene.current { filter: alpha(opacity=100); opacity: 1; z-index:20; }
#section_mode .article_03 .scenes .scene .balloon { width: 680px; height: 240px; position: absolute; top: 54px; left: 280px; z-index:12; transform-origin: center bottom; transform: scale(0); background-color: #00a0e9; border-radius: 10px; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1.5em; text-align: center;}
#section_mode .article_03 .scenes .scene_4 .balloon { background-color: #ed7d31; }
#section_mode .article_03 .scenes .scene .balloon.on {transition: all 300ms cubic-bezier(.16, .52, .65, 1.32); transform: scale(1);}
#section_mode .article_03 .scenes .scene .balloon::after { content: ""; border: 60px transparent solid; border-top-color: #00a0e9; position: absolute; bottom: -120px; left: 50%; border-left-width: 20px; border-right-width: 20px; }
#section_mode .article_03 .scenes .scene_4 .balloon::after { border-top-color: #ed7d31; }
#section_mode .article_03 .scenes .scene .car { position: absolute; top: 404px; left: 357px; z-index:12; transform-origin: center; transform: rotate(0.2deg);}
#section_mode .article_03 .scenes .scene_3 .car { top: 394px; left: 366px; transform: rotate(5deg);}
#section_mode .article_03 .scenes .scene_6 .car { top: 394px; transform: rotate(-5deg);}
#section_mode .article_03 .scenes .scene .car img {width: 546px; height: auto;}
#section_mode .article_03 .scenes .scene .status { width: 100%; position: absolute; bottom: 25px; left: 0; font-size: 44px; font-weight: bold; color: #00a0e9; text-align: center; z-index: 12;}
#section_mode .article_03 .scenes .scene_4 .status { color: #ed7d31;}
#section_mode .article_03 .scenes .scene .btn {position: absolute; top: 257px; right: 60px; opacity: 0; transform: translateX(-10px); visibility: hidden; z-index: 12;}
#section_mode .article_03 .scenes .scene .btn.on {transition: all 300ms ease-out; opacity: 1; cursor: pointer; transform: translateX(0); transition-delay: 200ms; visibility: visible;}
	#section_mode .article_03 .scenes .scene .btn img {width: 123px;}
#section_mode .article_03 .scenes .scene_1 .bg_1,
#section_mode .article_03 .scenes .scene_2 .bg_1 { position: absolute; bottom: 0; left: 0; width: 12000px; height: 742px; background: url(../image/hybrid-system/sec01_bg.png) repeat-x left 226px; z-index:10; }
#section_mode .article_03 .scenes .scene_3 .bg_1,
#section_mode .article_03 .scenes .scene_6 .bg_1 { position: absolute; bottom: 0; left: 0; width: 1280px; height: 742px; background: url(../image/hybrid-system/sec02_bg01.png) no-repeat left 167px; z-index:10; }
#section_mode .article_03 .scenes .scene_3 .bg_1 { transform: scaleX(-1); }
#section_mode .article_03 .scenes .scene_3 .bg_2 { width: 5568px; height: 742px; position: absolute; bottom: 0; left: 0; background: url(../image/hybrid-system/sec02_bg02.png) repeat-x left 140px; }
#section_mode .article_03 .scenes .scene_6 .bg_2 { width: 5568px; height: 742px; position: absolute; bottom: 0; left: 0; background: url(../image/hybrid-system/sec02_bg02.png) repeat-x left 140px; transform: scale(-1, 1);}
#section_mode .article_03 .scenes .scene_4 .bg_1,
#section_mode .article_03 .scenes .scene_5 .bg_1 { position: absolute; width: 16000px; height: 742px; background: url(../image/hybrid-system/sec03_bg.png) repeat-x left 170px; }
#section_mode .article_03 .scenes .scene .wheel { position: absolute; top: 550px; left: 420px; z-index:12; width: 440px; height: 95px; background: url(../image/hybrid-system/sec_01_03_wheel_01.png);}
#section_mode .article_03 .scenes .scene_2 .wheel { transform-origin: center; left: 420px; background-image: url(../image/hybrid-system/sec_01_03_wheel_02.png); }
#section_mode .article_03 .scenes .scene_3 .wheel { transform-origin: center; transform: rotate(5deg); top: 537px; left: 425px; background-image: url(../image/hybrid-system/sec_01_03_wheel_02.png); }
#section_mode .article_03 .scenes .scene_6 .wheel { transform-origin: center; transform: rotate(-5deg); top: 537px; left: 425px; background-image: url(../image/hybrid-system/sec_01_03_wheel_02.png); }
#section_mode .article_03 .scenes .scene_6 .wheel.slow { background-image: url(../image/hybrid-system/sec_01_03_wheel_01.png);}
#section_mode .article_03 .scenes .scene_4 .wheel,
#section_mode .article_03 .scenes .scene_5 .wheel { background-image: url(../image/hybrid-system/sec_01_03_wheel_03.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; letter-spacing: -0.4em;}
#section_mode .caption > div{ width: 0; overflow: hidden; display: inline-block; letter-spacing: normal; vertical-align: top;}
#section_mode .caption .inner { width: 94vw; width: calc(100vw - 50px);}
#section_mode .caption h4{ margin: 0 0 15px 0; font-size: 16px; font-weight: bold; line-height: 1.5em;}
#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: 2px;}
#section_mode .caption .desc{ font-size: 14px; line-height: 1.5em;}
#section_mode .caption .desc .sup{margin: 0; font-size: 10px; position: relative; top: 2px;}
#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;
	margin-bottom: 15px;
    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;
    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 5;
}

#section_mode .pager li{
    width: 33.2%;
    height: 40px;
    line-height: 40px;
    font-size: 11px;
    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 {
	border-left-color: #f8f8f8;
}

#section_mode .pager li:active: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 #00a0e9;
    display: block;
    position: absolute;
    right: -20px;
    top: -10px;
    z-index: 3;
}

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

#section_mode .pager li:active,
#section_mode .pager li.current{
    background-color: #00a0e9;
}

#section_mode .pager li:nth-child(2):active,
#section_mode .pager li:nth-child(2).current{
    background-color: #ed7d31;
}

#section_mode .pager li:nth-child(2):active::before,
#section_mode .pager li:nth-child(2).current::before{
    border-left-color: #ed7d31;
}

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

#section_mode .index {
	margin: 0 15px;
	display: flex;
	justify-content: space-around;
}

#section_mode .index > div {
	flex: 0 0 33.2%;
}

#section_mode .step {
	font-size: 12px;
	line-height: 1.6em;
	cursor: pointer;
}

#section_mode .index .step.current {
	color: #00a0e9;
}

#section_mode .nav_2 .step.current {
	color: #ed7d31;
}
#section_mode .scenes .balloon span {
    font-size:50px;
}

}