@charset "utf-8";

#visualWrap {}
#visualWrap .bx-viewport{height: auto !important;}
#visualWrap .visualSlide{display: none;height: 437px;}
#visualWrap .visual{height: 437px;width: 100%}
#visualWrap a{display: block;}

#visualWrap .visual.synerjetpro{background: url(../image/main/241114/main_visual06.jpg?v=1) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.newdoublo{background: url(../image/main/241114/main_visual01.jpg?v=1) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.Silkro{background: url(../image/main/241114/main_visual02.jpg?v=1) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.PICOHI{background: url(../image/main/241114/main_visual03.jpg?v=2) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.PLASONIC{background: url(../image/main/241114/main_visual04.jpg) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.slimus{background: url(../image/main/241114/main_visual05.jpg) no-repeat 50% 50%;background-size: auto 100%;}


#visualWrap .visual.together{background: url(../image/main/new/en_hironic_bn_eco.jpg) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.ultravera{background: url(../image/main/new/main_ultravera.jpg) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.doublogold{background: url(../image/main/new/main_doublogold.jpg) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.easymo{background: url(../image/main/new/main_easymo.png) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.qfit{background: url(../image/main/new/main_qfit.png) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.GENTLO{background: url(../image/main/new/main_GENTLO.jpg) no-repeat 50% 50%;background-size: auto 100%;}
#visualWrap .visual.world-class{background: url(../image/main/main_world_class.jpg) no-repeat 50% 50%;background-size: auto 100%;}


#visualWrap .visualSlideControler{padding: 1.5% 0}
#visualWrap .visualSlideControler span{background: #7c7c7c}
#visualWrap .visualSlideControler span.on{background: none;border-color: #7c7c7c}

#containerM #contArea {padding: 60px 0 0;}
#containerM #contArea h3{text-align: center;font-size: 46px;color: #4c4c4d;font-weight: 100}
#containerM #contArea .productsContentWrap{width: 1410px;margin: 25px auto 0}
#containerM #contArea .productsContentWrap .productsContent{float: left;width: 20%;box-sizing: border-box;padding: 0 0 0 0.75%}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(1){padding-left: 0%;padding-right: 0.75%}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(2){padding-left: 0.25%;padding-right: 0.50%}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(3){padding-left: 0.50%;padding-right: 0.25%}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(4){padding-left: 0.75%;padding-right: 0%}
#containerM #contArea .productsContentWrap .productsContent img{display: block;width: 100%;margin: 0 auto}
#containerM #contArea .productsContentWrap .productsContent .title{color: #000;font-size: 18px;font-weight: 900;padding-top: 25px;padding-bottom: 10px}
#containerM #contArea .productsContentWrap .productsContent .textContent{font-size: 15px;color: #5d5d5d;line-height: 130%}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(1) .textContent{letter-spacing: -0.06em}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(2) .textContent{letter-spacing: -0.03em}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(3) .textContent{letter-spacing: -0.04em}
#containerM #contArea .productsContentWrap .productsContent:nth-of-type(4) .textContent{letter-spacing: -0.03em}

#containerM #contArea .latestContentWrap{width: 1010px;margin: 6% auto 9%}
#containerM #contArea .latestContentWrap .latestContent{width: 33.3333%;float: left;padding: 0 1%;box-sizing: border-box;position:relative;}
#containerM #contArea .latestContentWrap .latestContent:nth-of-type(1){padding-left: 0}
#containerM #contArea .latestContentWrap .latestContent:nth-of-type(2){padding: 0 2%}
#containerM #contArea .latestContentWrap .latestContent:nth-of-type(3){padding-right: 0}
#containerM #contArea .latestContentWrap .latestContent .title{color: #000031;font-size: 30px;padding-bottom: 15px;font-weight: 100}
#containerM #contArea .latestContentWrap .latestContent .title .moreBtn{padding: 3px 20px;border-radius: 100px;color: #fff;font-size: 13px;font-weight: 900;float: right;background: #b7b6b6;margin-top: 5px;}
#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap{}
#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap > a{padding: 18px 10px 10px;border-bottom: 1px solid #dddddd;display: block;}
#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p{font-size: 15px;color: #5d5d5d}
#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p.latestTitle{margin-bottom: 4px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;line-height: 120%;font-weight: 600}
#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p.latestDate{text-align: right;font-weight: 600}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap {background: #969696}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText{text-align: center;color: #fff;font-size: 16px;line-height: 130%;letter-spacing: -0.03em;padding: 10px 0 0 0 ;height: 52px}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText > p{display: none;}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText > p.on{display: block}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningSlideControler {position: relative;}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningSlideControler p{position: absolute;right: 30%;top: 16px;cursor: pointer;}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningSlideControler p.play{border-right: 7px solid transparent;border-left: 7px solid #000;border-bottom: 6px solid transparent;border-top: 6px solid transparent}
#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningSlideControler p.stop{border-top: none;border-bottom: none;border-left: 2px solid #000;border-right: 2px solid #000;width: 3px;height: 12px;margin-right: 7px}

#containerM #contArea .latestContentWrap .latestContent .exhibitionSlideControler {position: absolute;width:100%;bottom:0;}
#containerM #contArea .latestContentWrap .latestContent .exhibitionSlideControler p{position: absolute;bottom: 30%;top: 16px;cursor: pointer;}
#containerM #contArea .latestContentWrap .latestContent .exhibitionSlideControler p.play{border-right: 7px solid transparent;border-left: 7px solid #000;border-bottom: 6px solid transparent;border-top: 6px solid transparent}
#containerM #contArea .latestContentWrap .latestContent .exhibitionSlideControler p.stop{border-top: none;border-bottom: none;border-left: 2px solid #000;border-right: 2px solid #000;width: 3px;height: 12px;margin-right: 7px}

.SlideControler{text-align: center;padding: 15px 0}
.SlideControler span{display: inline-block; width: 8px ;height: 8px;border-radius: 111px;margin:0 7px;background: #fff;vertical-align: middle;cursor: pointer;}
.SlideControler span.on{width: 11px;height: 11px;border: 1px solid #fff;background: none}

.bx-wrapper{box-shadow: none;border:none;margin:0;}
.bx-wrapper img {width: 100%}
@media only screen and (max-width:1024px) {   
	#visualWrap .visual {height: 43vw}
	#visualWrap .visualSlide{height: 43vw}

	#containerM #contArea .productsContentWrap{width: 100%;padding: 0 5%;box-sizing: border-box;}
	#containerM #contArea .latestContentWrap{width: 100%;padding: 0 5%;box-sizing: border-box;}
	#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p.latestTitle {font-size: 1.3vw}
	#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p.latestDate {font-size: 1.3vw}
	#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap > a {padding: 6.2% 4% 4.2%;}
	#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText {padding-top: 5%}
	#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText > p{font-size: 1.4vw;line-height: 110%}

	.SlideControler{padding: 3% 0}
	#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningSlideControler p{top: 32%}
}
 
@media only screen and (max-width:640px) { 
	#visualWrap .visual{height: 145vw;}
	#visualWrap .visualSlide{height: 145vw}

	#visualWrap .visual.synerjetpro{background: url(../image/main/241114/mmain_visual06.jpg) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.newdoublo{background: url(../image/main/241114/mmain_visual01.jpg) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.Silkro{background: url(../image/main/241114/mmain_visual02.jpg?v=1) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.PICOHI{background: url(../image/main/241114/mmain_visual03.jpg?v=2) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.PLASONIC{background: url(../image/main/241114/mmain_visual04.jpg) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.slimus{background: url(../image/main/241114/mmain_visual05.jpg) no-repeat 50% 50%;background-size: auto 100%;}

	
	#visualWrap .visual.together{background: url(../image/main/new/en_hironic_bn_eco_m.jpg) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.ultravera{background: url(../image/main/new/main_ultravera_m.jpg) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.easymo{background: url(../image/main/new/main_easymo_m.png) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.qfit{background: url(../image/main/new/main_qfit_m.png) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.GENTLO{background: url(../image/main/new/main_gentlo_m.jpg?v=1) no-repeat 50% 50%;background-size: auto 100%;}	
	#visualWrap .visual.world-class{background: url(../image/main/main_world_class_m.jpg) no-repeat 50% 50%;background-size: auto 100%;}
	#visualWrap .visual.doublogold{background: url(../image/main/241114/main_doublogold_m.jpg) no-repeat 50% 50%;background-size: auto 100%;}

	#containerM #contArea{padding-bottom: 0}
	#containerM #contArea h3{font-size: 8.6vw}    
	#containerM #contArea .productsContentWrap{padding: 0 7%;box-sizing: border-box;margin-top: 5%}
	#containerM #contArea .productsContentWrap .productsContent{float: none;width: 100%}
	#containerM #contArea .productsContentWrap .productsContent .title{font-size: 6vw;padding-top: 7%;padding-bottom: 5%}
	#containerM #contArea .productsContentWrap .productsContent .textContent{font-size: 6vw;font-size: 4.7vw;margin-bottom: 10%}
	#containerM #contArea .productsContentWrap .productsContent:nth-of-type(1) .textContent{letter-spacing: -0.05vw}
	#containerM #contArea .productsContentWrap .productsContent:nth-of-type(2) .textContent{letter-spacing: -0.05vw}
	#containerM #contArea .productsContentWrap .productsContent:nth-of-type(3) .textContent{letter-spacing: -0.05vw}
	#containerM #contArea .productsContentWrap .productsContent:nth-of-type(4) .textContent{letter-spacing: -0.05vw}
	
	#containerM #contArea .latestContentWrap{padding: 0 7%;box-sizing: border-box;margin-top: 17%;margin-bottom: 0}
	#containerM #contArea .latestContentWrap .latestContent{float: none;width: 100%;margin-bottom: 17%}
	#containerM #contArea .latestContentWrap .latestContent:nth-of-type(3){margin-bottom: 0}
	#containerM #contArea .latestContentWrap .latestContent .title{text-align: center;font-size: 8.6vw;position: relative;padding-bottom: 7%}
	#containerM #contArea .latestContentWrap .latestContent .title .moreBtn{position: absolute;right: 0;top: 17%;padding: 1% 4%;font-size: 20px;font-size: 3vw;}
	#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p.latestTitle {font-size: 4.2vw}
	#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap p.latestDate {font-size: 4.2vw}
	#containerM #contArea .latestContentWrap .latestContent .newsLatestWrap > a{padding: 5% 3% 3%;}
	#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText{height: auto}
	#containerM #contArea .latestContentWrap .latestContent .elearningContentWrap .elearningText p{font-size: 3.9vw;}

	
}  

@media only screen and (max-width:422px) { 
	

}