@charset "UTF-8";

/* **************************************************

Name: top.css

Create: 2016.09.02

***************************************************** */
html,body{height:100%;}

/* top img
=========================================================================================== */
#TopImg{position:absolute;left:0;top:0;width:100%;}
#TopImg li {height:1266px}
#TopImg img{position:absolute;top:0;left:50%;width:1920px;height:auto;margin-left:-960px;}
#TopImg .obj_icon {display:block;position:absolute;top:420px;left:50%;width:316px;height:86px;margin-left:-486px}
#TopImg .obj_icon img {position:static;width:100%;height:auto;margin:0;}
@media screen and (max-width: 994px){
	#TopImg img{position:static;top:auto;left:auto;width:100%;height:auto;margin-left:0;}
	#TopImg .obj_icon {display:none}
}

/* top banner
=========================================================================================== */
#Main{position:relative;overflow:hidden;padding-bottom:50px;background: #000 no-repeat 0 0;background-size:100% 100%;}
#Main .bx-wrapper{position:absolute;left:0;top:0;width:100%;}
#TopImg .TopImgItem.Current{display:block;}
#TopCont{position:relative;width:100%;height:350px;z-index:70;}
#TopCont #StatementArea{width:965px;height:100%;margin:0 auto;}
#StatementArea:before{content:"";display:inline-block;width:0;height:100%;margin: 0 0 0 -.36em;vertical-align: middle;}
#StatementArea .Inner{display:inline-block;width:100%;vertical-align: middle;}
#StatementArea .Statement{width:50%;}
#StatementArea .Statement .Copy{font-size:200%;font-weight:bold;color:#fff;line-height:120%;word-break: keep-all;text-shadow:1px 1px 10px rgb(0,0,0);}
#StatementArea .Statement .Note{padding-top:10%;font-size:110%;color:#fff;text-shadow:1px 1px 6px rgb(0,0,0);}
#StatementArea .Banner{margin-top:3%;}
#StatementArea .Banner:after{content:"";display:block;clear:both;}
#StatementArea .Banner li{float:left;margin:0 5px 5px 0;}
#StatementArea .Banner li:last-child{margin-left:0;}
#StatementArea .Banner li a{display:block;position:relative;background: #fff;}
#StatementArea .Banner li span{position:absolute;left:0;bottom:0;width:100%;padding-bottom:8px;font-size:75%;color:#fff;text-align:center;}
#StatementArea .Banner a:hover:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:5px;background: #e60027;}
#StatementArea .Banner a:hover span{color:#e60027;}
.TopBanController{margin-top:5px;}
.TopBanController a{display:inline-block;overflow:hidden;vertical-align: middle;}
.TopBanController .Prev{width:19px;height:19px;text-indent:-9999px;background:url(/image/ko/r5/top/btn_top_prev.png);}
.TopBanController .Prev:hover{background:url(/image/ko/r5/top/btn_top_prev_on.png);}
.TopBanController .Next{width:19px;height:19px;text-indent:-9999px;background:url(/image/ko/r5/top/btn_top_next.png);}
.TopBanController .Next:hover{background:url(/image/ko/r5/top/btn_top_next_on.png);}
.TopBanController .Switch{width:25px;height:24px;margin:0 3px;background:url(/image/ko/r5/top/btn_top_switch.png);}
.TopBanController .Switch{background:url(/image/ko/r5/top/btn_top_switch.png);text-indent:-9999px;}
.TopBanController .Switch.Stop{background:url(/image/ko/r5/top/btn_top_switch_on.png);}
.ProductBanner{position:relative;margin-top:30px;z-index:70; text-decoration:none;}
.ProductBanner.FirstItem{margin-top:200px;}
.ProductBanner .Inner{width:965px;margin:0 auto;}
.ProductBanner .Inner h2{font-size:150%;font-weight:bold;color:#fff;background: none;}
.MainBannerList:after{content:"";display:block;clear:both; }
.MainBannerList li{float:left;width:230px;margin:0 0 15px 15px; }
.MainBannerList.type2 li{width:32.2%;}
/* .MainBannerList.type2 li a{height:230px} */
.MainBannerList .FirstItem{margin-left:0;}
.MainBannerList li a{display:block;overflow:hidden;position:relative;border-radius: 8px;background: #fff; text-decoration:none;}
.MainBannerList.type2 li a{border-radius:0;}
.MainBannerList li img{width:100%;}
.MainBannerList.type2 li img{width:100%;}
.MainBannerList.type2 li .mo_img{display:none;}
.MainBannerList.type2 li .first{top:-45px;}
.MainBannerList.type2 li .third{top:-85px;}
.MainBannerList .Info{position:absolute;left:0;bottom:0;box-sizing:border-box;width:100%;height:23%;padding:0 6%;background: rgba(245,245,245,0.9);}
.MainBannerList.type2 .Info{background:unset;}
.MainBannerList .Info:after{content:"";display:inline-block;width:1px;height:100%;vertical-align: middle;}
.MainBannerList .Info strong{display:inline-block;width:96%;font-size:90%;font-weight:bold;color:#000;vertical-align: middle;}
.MainBannerList.type2 .Info strong{color:#fff}
.MainBannerList .Info span{display:block;font-size:82%;font-weight:bold;color:#e60027;}
#ServiceMenu{position:relative;background:url(/image/jp/r5/top/bg_itservice.jpg) no-repeat 50% 100%;background-size:cover;}
#ServiceMenu .Inner{width:965px;padding:55px 0 80px;margin:0 auto;}
#ServiceMenu .Inner h2{font-size:150%;font-weight:bold;color:#fff;background: none;}
#ServiceMenu .Inner .ServiceList{overflow:hidden;}
#ServiceMenu .ServiceList li{float:left;margin-left:15px;}
#ServiceMenu .ServiceList li:first-child{margin-left:0;}
#ServiceMenu .ServiceList li a{display:block;position:relative;background: #fff;}
#ServiceMenu .ServiceList a img{width:100%;}
#ServiceMenu .ServiceList .Info{position:absolute;left:20px;bottom:10px;line-height:140%}
#ServiceMenu .ServiceList .Info span{display:block;font-size:82%;font-weight:bold;color:#e60027;}
#ServiceMenu .ServiceList .Info strong{display:block;font-size:90%;font-weight:bold;color:#fff;}

#InfoArea .InfoList{padding:5% 0;}
#InfoArea .InfoList:after{content:"";display:block;clear:both;}
#InfoArea .InfoList>div{position:relative;float:left;box-sizing:border-box;}
#InfoArea .InfoColumn2{width:50%;}
#InfoArea .InfoColumn1{width:25%;}
#InfoArea .InfoList>div>a{display:block;position:relative;box-sizing:border-box;width:100%;height:155px;padding:0 15px;border-left:1px solid #e6e6e6;}
#InfoArea .InfoList>div:first-child>a{border-left:none;}
#InfoArea .InfoList h3{font-size:90%;font-weight:bold;color:#000;}
#InfoArea .InfoList strong, #InfoArea .InfoList p{width:60%;font-size:82%;color:#000;word-break: keep-all;}
#InfoArea .Notice strong{display:block;width:70%;}
#InfoArea .Notice p{width:70%;}
#InfoArea .Notice .Date{position:absolute;right:25px;top:33px;text-align:center;}
#InfoArea .Notice .Date span{display:block;font-size:72%;color:#aaa;line-height:110%}
#InfoArea .Notice .Date strong{display:block;font-size:300%;color:#aaa;line-height:110%;}
#InfoArea .Notice .SliderController{position:absolute;right:50%;bottom:5px;margin-right:-45px;}
#InfoArea .Company a:before{content:"";position:absolute;right:10px;bottom:-10px;width:91px;height:127px;background: url(/image/jp/r5/top/img_info_company.png) no-repeat 0 0;} 
#InfoArea .Recruit a:before{content:"";position:absolute;right:0;bottom:-10px;width:142px;height:117px;background: url(/image/jp/r5/top/img_info_recruit.png) no-repeat 0 0;} 




@media screen and (max-width: 1024px){
	
.TopBanController .Prev:hover img, .TopBanController .Next:hover img{margin-top:0}
}




@media screen and (max-width: 994px){
	#TopCont #StatementArea{width:100%;margin:0;}
	#StatementArea .Inner{width:auto;padding:0 15px;}
	#StatementArea .Statement{width:100%;}
	.ProductBanner.FirstItem {margin-top:0}
	.ProductBanner .Inner{width:auto;padding:15px 15px 0;}
	.MainBannerList{width:auto;margin-left:-15px;}
	.MainBannerList li{box-sizing:border-box;width:25%;padding:0 0 15px 15px;margin:0;}
	.MainBannerList.type2 li{width:33.3%;}
	.MainBannerList .FirstItem{padding-left:15px;}
	.MainBannerList .Info{height:23%;}
	#ServiceMenu .Inner{width:auto;padding:6% 15px 8%;}
	#ServiceMenu .ServiceList{width:auto;margin-left:-15px;}
	#ServiceMenu .ServiceList li{box-sizing:border-box;width:33.333%;padding:0 0 15px 15px;margin:0;}
	#InfoArea .InfoList{width:auto;padding:6% 15px 8%;}
	#InfoArea .Notice .SliderController{right:15px;margin-right:0;}
}
@media screen and (max-width: 900px){
	.MainBannerList.type2 li .second{left:-175px;}
	.MainBannerList.type2 li .third{left:-175px;}
}
@media screen and (max-width: 767px){
	#Main{height:auto;}
	#TopImg{overflow:hidden;height:100%;}
	#TopCont{height:auto;}
	.TopBanController .Prev:hover img, .TopBanController .Next:hover img{margin-top:0}
	#StatementArea:before{display:none;}
	#StatementArea .Inner{padding:100px 15px 0;}
	#StatementArea .Statement{width:100%;}
	#StatementArea .Statement .Copy{font-size:150%;}
	#StatementArea .Statement .Note{font-size:82%;}
	.ProductBanner{margin-top:40px;}
	.ProductBanner .Inner h2{margin:0;font-size:130%}
	.MainBannerList{background: none;}
	.MainBannerList li{width:33.333%;}
	.MainBannerList.type2{display:flex;flex-wrap:wrap;}
	.MainBannerList.type2 li{float:unset;width:50%;}
	#ServiceMenu .ServiceList li{width:50%;}
	#InfoArea .InfoList{padding:10px;margin-left:-1px;}
	#InfoArea .InfoList>div{padding:0 0 1px 1px;border-left:none;}
	#InfoArea .InfoList>div>a{padding:30px 10px 35px;background: #f2f2f2;}
	#InfoArea .InfoList .InfoColumn1{width:50%}
	#InfoArea .InfoList .InfoColumn2{width:100%;}
	#InfoArea .InfoList .InfoColumn2 a{height:auto;}
	#InfoArea .Notice .SliderController{right:50%;margin-right:-45px;}
	

}
@media screen and (max-width: 579px){
	.MainBannerList li{width:50%;}
	.MainBannerList.type2 li{width:100%;padding-bottom:0;}
	.MainBannerList.type2 li .pc_img{display:none;}
	.MainBannerList.type2 li .mo_img{display:block;}
	.MainBannerList.type2 li img.second{left:-188px}
	.MainBannerList.type2 li img.third{left:-188px}
	#ServiceMenu .Inner{padding:0;}
	#ServiceMenu .Inner h2{display:none;}
	#ServiceMenu .ServiceList{margin-left:0;}
	#ServiceMenu .ServiceList li{width:100%;padding:0;}
	#InfoArea .Inner .InfoColumn2 p{width:auto;}
	#InfoArea .Inner .InfoColumn2 .Date{display:none;}
	#InfoArea .InfoColumn1 p{display:none;}
	#StatementArea .Statement .Copy{font-size:150%;word-break:break-word;}
	
}

@media screen and (max-width: 507px){
	.MainBannerList.type2 li img.third {left:-213px}
}

@media screen and (max-width: 450px){
	.MainBannerList.type2 li img.third {left:-225px}
}

@media screen and (max-width: 430px){
	.MainBannerList.type2 li img.first{top:-60px;left:-190px}
	.MainBannerList.type2 li img.second{top:-24px;left:-200px}
	.MainBannerList.type2 li img.third{left:-230px}
}

@media screen and (max-width: 399px){
	#StatementArea .Banner{width:auto;margin-left:-5px;}
	#StatementArea .Banner li{box-sizing:border-box;width:50%;padding:0 0 5px 5px;margin:0;}
	#StatementArea .Banner li a img{width:100%;}
	.MainBannerList .Info strong{font-size:82%;line-height:120%;letter-spacing: -0.1em;}
	.MainBannerList .Info span{line-height:120%;}
	.MainBannerList.type2 li img.third{top:-100px;left:-243px}
	
}