@media screen and (max-width: 1140px){
	.modaal-gallery-control{ bottom: -60px!Important; }
	.modaal-gallery-next-inner,
	.modaal-wrapper .modaal-close,
	.modaal-gallery-prev,
	.modaal-gallery-next{ width: 40px!Important; height: 40px!Important; }
	.modaal-gallery-next{ right: 0!important; }
	.modaal-gallery-prev{ left: 0!important; }
	.modaal-gallery-prev:before, .modaal-gallery-next:after { margin: 1px 0 0!Important; }
	.modaal-gallery-control:after, .modaal-gallery-control:before { top: 16px!important; height: 10px!important; }
	.modaal-gallery-prev:after, .modaal-gallery-prev:before { left: 17px!important; }
	.modaal-gallery-next:after, .modaal-gallery-next:before { left: 20px!important; }
	.modaal-close:after, .modaal-close:before{ height: 15px!important; }
	.modaal-gallery-control{ background: none!important; }
	.modaal-gallery-control:focus:after, .modaal-gallery-control:focus:before, .modaal-gallery-control:hover:after, .modaal-gallery-control:hover:before, .modaal-close:focus:after, .modaal-close:focus:before, .modaal-close:hover:after, .modaal-close:hover:before { background: #fff!Important; }
}

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

	header{ position: fixed!important; }
	header .box .left{ max-width: 167px; }
	header .box .left .logo2{ display: none!important; }

	header .box .left .logo4{ display: none; }
	header.head_fixed .box .left .logo3{ display: none; }
	header.head_fixed .box .left .logo4{ display: block; }

	header .right nav{ transition: 0.3s; background: var(--sub-color); position: fixed; top: 0; right: -100%; bottom: 0; height: 100%; width: 100%; z-index: 990; }
	header .right nav.active{ right: 0; }
	header .right .active{ right: 0; }
	header .box .right ul{ overflow: scroll;  }
	header .box .right ul li{ width: 100%; margin-right: 0!important; }
	header .box .right ul li a{ position: relative; width: 100%; text-align: left; font-size: 1.4rem; color: #fff!important; padding: 20px 0; border-bottom: 1px solid #fff; }
	header .box .right ul li a:before { content: ""; z-index: 0; position: absolute; background: url(../images/nav-arrow.svg) no-repeat; background-size: contain; background-position: right center; height: 9px; width: 9px; right: 0; top: 0; bottom: 0; margin: auto; }
	header .box .right ul{ height: 100%; display: block; }
	header .box .right ul li .head-btn{ display: none; }
	header .modalbtn{ padding: 13px; display: block; position: fixed; right: 0; top: 0; width: 50px; height: 50px; background: var(--main-color); z-index: 999; }
	header .modalbtn:before{ content: ""; transition: 0.3s; position: absolute; width: 20px; height: 2px; background: #fff; top: 21px; left: 0; right: 0; margin: auto; }
	header .modalbtn:after{ content: ""; transition: 0.3s; position: absolute; width: 20px; height: 2px; background: #fff; bottom: 21px; left: 0; right: 0; margin: auto; }
	header .modalbtn.active:before{ content: ""; -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 24px; }
	header .modalbtn.active:after{ content: ""; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); bottom: 24px; }
	header .box .right ul li.sp{ display: block; }
	header .box .right ul li a:hover .en{margin-top: 0;}

	.mobilelogo{ display:block; }
	.mobilelogo{ height:60px; width:auto; padding:10px 10px; }	
	header .box .right ul li a:before { content: ""; z-index: 0; position: absolute; background: url(../images/mmenu-icon.png) no-repeat; background-size: contain; background-position: right center; height: 9px; width: 9px; right: 0; top: 0; bottom: 0; margin: auto; }
	header .box .right ul{ padding:20px 50px 100px 20px; }
	header .right nav{ background: var(--sub-color); background-size:30% auto; }
	header .box .right ul .mmenulist{ display:block; }
	header .box .mmenulist img{ width:8px; vertical-align:middle; margin-left: 5px; }
	header .box .right ul .mmenulist a:before{ content:""; background:none; }
	header .box .right ul .mmenulist a{ border:none; padding-top:5px; padding-bottom:5px; }
	header .box .right ul .mbutton{ width:48%; }
	header .box .right ul .mmenulist1{ display:flex; padding-top:40px; padding-bottom:20px; }			
	header .box .right ul .mbtn1{ background:#265AA4; border:1px solid #fff; padding:15px 10px; font-size:14px; color:#fff; text-align:center; }
	header .box .right ul .mbtn2{ background:#000000; border:1px solid #fff; padding:15px 10px; font-size:14px; color:#fff; text-align:center; }	
	#top-about .flex{padding-right: 3%; gap: 6rem;}
	#top-about .txt-block{padding: 3%;}
	#top-about .img img{width: 100%;}

	#about .c_ttl{
		font-size: 4rem;
	}
	#about .c_ttl2{
		font-size: 2.8rem;
	}
	#recruit .recruit-cta .box{
		margin: 3rem;
	}
}




@media screen and (max-width: 820px) {
	.footer-sns-icon{
		justify-content: center;
	}
	.pc{ display: none; }
	.sp{ display: block; }
	.ipad { display: none; }

	#top .fv .movie{  padding-top: 180.15%; }

	#access .a_box .left .tel li{ flex-wrap: wrap; }
	#access .a_box .left .tel li .left { width: auto; margin-bottom: 10px; }
	#access .a_box .left .tel li{ margin-bottom: 20px; }
	
	#about_box .link_box ul a{
		width: 48%;
	}
	footer .box .right nav .banner-box{
		margin-left: 0;
		margin-top: 30px;
	}

	footer{ padding: 50px 0 75px; }
	footer .box{ display: block; text-align: center; }
	footer .box .left{ width: 100%; margin-bottom: 70px; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	footer .box .left .logo{ margin-right: 50px; }
	footer .box .left .text-box{ text-align: left; }
	footer .box .right{ width: 100%; }
	footer .box .right nav{ border-top: 1px solid #ffffff63; display: block; width: calc( 100% + 50px ); margin-left: -25px; }
	footer .box .right nav ul{ width: 100%!important; max-width: 100%!important; }
	footer .box .right nav ul li{ text-align: left; border-bottom: 1px solid #ffffff63; margin-bottom: 0; }
	footer .box .right nav ul li ul li{ margin-bottom: 0!important; border-bottom: 1px solid #ffffff63; }
	footer .box .right nav ul li ul li:last-child{ border-bottom: 0; }
	footer .box .right nav ul li .accordion-item, footer .box .right nav ul li .accordion-initem{ margin-bottom: 0; }
	footer .box .right nav ul li .accordion-item span,
	footer .box .right nav ul li a,
	footer .box .right nav ul li .accordion-initem span{ font-size: 1.5rem; padding: 18px 15px; }
	footer .box .right nav ul li .accordion-item,
	footer .box .right nav ul li .accordion-initem{ padding-left: 0!important; }
	footer .box .right nav ul li ul{ padding: 0; background: #d4d4d478; }
	footer .box .right nav ul li ul li a,
	footer .box .right nav ul li ul li .accordion-initem span{ font-size: 1.4rem; width: 100%; display: block; }
	footer .box .right nav ul li a:after, footer .box .right nav ul li .accordion-item:after,
	footer .box .right nav ul li ul li a:after, footer .box .right nav ul li ul li .accordion-initem:after{ content: none; }
	footer .box .right nav ul li .accordion-item span:before,
	footer .box .right nav ul li .accordion-initem span:before{ top: 0; bottom: 0; margin: auto; right: 19.5px; }
	footer .box .right nav ul li .accordion-item span:after,
	footer .box .right nav ul li .accordion-initem span:after{ top: 0; bottom: 0; margin: auto; right: 15px; }
	footer small{ display: block; text-align: center; }
	footer .box .left p .sp{ display: none!important; }
	footer .box .right nav ul li a.brank:before{ right: 0; }
	footer .box .left{ margin-bottom: 50px; display: block; }
	footer .box .left .logo{ margin: 0 auto 30px; }
	footer .box .left p{ text-align: center; }
	footer .box .left p .sp{ display: block!important; }
	footer .box .left p.text2 .big{ padding-right: 0; pointer-events: none;}
	footer .box .right nav ul li a{ display: inline-block; padding-right: 10px; }
	
	#mygreeting #sec03 .box{ padding:0; }
	#mygreeting #sec04 .inbox{ margin-left:20px; margin-right:20px; }	

	#ctalk #sec01 .box{ flex-wrap:wrap; }
#ctalk #sec01 .box .left{ width:100%; margin:0; }
#ctalk #sec01 .box .right{ width:100%; margin:0; }
#ctalk #sec01 .box .inright{ max-width: 100%; padding:30px 20px; }
#ctalk #sec01 .box1 .inleft	{ max-width: 100%; padding:30px 20px; }
#ctalk #sec01 .box1 .inright{ padding:0; }
#ctalk #sec01 .box .inleft img,
#ctalk #sec01 .box1 .inright img{ max-width: 100%; }
#ctalk #sec01 .imagebox img{ width:90%; text-align:center; }
#ctalk #sec01 p{ padding-left:20px; padding-right:20px; }
#ctalk #sec01 p br{ display:none; }	
#ctalk #sec01 .box{ margin-bottom:0px; }

#recruit #sec01 .flex{flex-direction: column;}
	#recruit #sec01 .left {width: 100%;}
	#recruit #sec01 .right {width: 100%;padding-left: 0px;}
	#recruit #sec01 .right ul .item a{flex-direction: row;}
	#recruit #sec01 .left .top-sectitle{margin-bottom: 20px;}
	#recruit #sec01 .left p{margin-bottom: 15px;}
	#recruit #sec01 .left .btn-box{margin-bottom: 30px;}
	#recruit .r_topmessage .flex{flex-direction: column-reverse;}
	#recruit .r_topmessage .flex .left{width: 100%;}
	#recruit .r_topmessage .flex .right{padding-left: 0;width: 100%;}
	#recruit .r_topmessage{padding: 0 15px;}
	#recruit .r_topmessage .flex .right h4{font-size: 21px;}
	#recruit .r_topmessage .pa{right: -59px!important;}
	#recruit .r_topmessage .img-flex{margin-top: 15px;}
	#recruit .r_topmessage .img-flex .right{padding-left: 10px;}
	#recruit_box .link_box ul{flex-wrap: wrap;}
	#recruit_box .link_box ul a {width: 100%;}
	#recruit_box .top{margin-bottom: 30px;flex-direction: column;}
	#recruit_box .top .ttl{font-size: 50px;}
	#recruit_box .top p{font-size: 18px;text-align: center;margin-top: 16px;line-height: 1.5;}
	#recruit_box .link_box ul a{ margin-bottom: 10px; }
	#recruit_box .link_box ul a li{ padding: 40px 25px; }
	#recruit_box{padding: 80px 0 70px; background: url(../images/recruit_bgsp.jpg) no-repeat; background-size: cover; background-position: center; }
	#recruit_box .link_box ul a li h4 {font-size: 2.3rem;font-weight: bold;margin-bottom: 11px;}
	#recruit_box .link_box ul a li h4 span{ font-size: 1.5rem; }

	#question .link_box ul a li h4 span{ font-size: 1.5rem; }
	#question .link_box ul a li{margin-bottom: 10px; padding: 40px 25px;}
	#question .link_box ul a li h4 {font-size: 2.3rem;font-weight: bold;margin-bottom: 11px;}
	#question .link_box ul{flex-wrap: wrap;}
	#question .link_box ul a {width: 100%;}
	#question .tac ul{flex-direction: column;margin-top: 25px;}

	#company #company_box .link_box ul a li h4 { margin-bottom: 15px; font-size: 2.3rem; }
	#company #company_box .link_box ul a li p{ font-size: 1.5rem; }
	#company #company_box .link_box ul a li { padding: 40px 25px; }
		
	.r_message .flex{ width:100%; margin-left:0; padding: 0px 20px; flex-wrap:wrap; flex-direction:column-reverse; }
	.r_message .flex .left{ width:100%; padding-right:0; padding-top:30px;  }
	.r_message .flex .right{ width:100%; }
	.r_message .flex .left h4 br{ display:none; }

	.l_message .flex{ width:100%; margin-right:0; padding: 0px 20px; flex-wrap:wrap; flex-direction:column; }
	.l_message .flex .right{ width:100%; padding-left:0; padding-top:30px;  }
	.l_message .flex .left{ width:100%; }
	.l_message .flex .right h4 br{ display:none; }

	#recruit .r_topmessage .img-flex .left:before {width: 60%; left: -28%; bottom: -20%; }
	#recruit .r_topmessage .flex .left:before{ right: -20%; bottom: -15%; left: auto; width: 66%; }
	#recruit .r_topmessage .flex .left{ overflow: unset; }

	footer .page-top{ display: none!important; }
  .center-title-box .ttl{
		font-size: 3rem;
	}
	.center-title-box .enttl{font-size: 1.6rem;}
	.center-title-box p{font-size: 2rem;}

	.sdgs-sec_3-img img{
    width: 100%;
    padding-top: 3rem;
  }

  .sdgs-sec_2 h2{
    text-align: center;
  }

  .sdgs-sec_3 h2{
    text-align: center;
  }

  .sdgs-sec_2 ul li img{
    padding-top: 3rem;
    padding-bottom: 2rem;
  }

  .sdgs-sec_3 ul li img{
    padding-top: 3rem;
    padding-bottom: 2rem;
		width: 5rem;
  }
	.flex.sdgs-sec_3-img{
		flex-direction: column;
	}
}

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

	#office .br-sp { display: inline-block; }
	#top-about .flex{ flex-direction: column;
	padding: 0;
	}
	#top-about .txt-bg{
		width: 100%;
		height: auto;
		padding: 3rem 0;
	}
	#top-about .txt-block P{
		max-width: 100%;
	}
	#top section#top-about{
		padding-bottom: 6rem;
	}
}

@media screen and (max-width: 768px) {
	.sdgs-sec_01 .flex{
		flex-direction: column;
	}
	.sdgs-sec_01 .left{
		width: 100%;
	}
	.sdgs-sec_01 .right{
		width: 100%;
	}
	.vehicle-area .vehicle-box .flex{
		flex-direction: column;
	}
	.vehicle-box .left{
		width: 100%;
	}
	.vehicle-box .right{
		width: 100%;
	}
	#top .count-box-inner{
		gap: 3rem;
	}
	#top .count-box{
		width: 100%;
	}
	#top .count-box:nth-child(2){
		background-size: 20%;
	}
	#top .count-box > .flex .item .en{
		font-size: 5rem;
	}
	#top .count-box > .flex .item{
		margin-top: -2rem;
	}
	#top .count-box > .flex .title{
		font-size: 1.6rem;
	}
}

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

	.r_message .flex .left h4{ margin-bottom: 20px; font-size: 23px; }

	#recruit .r_topmessage .pa { right: -30px!Important; width: 150px; }

	#mygreeting #sec01 .box{ flex-wrap:wrap; flex-direction: column-reverse; }
	#mygreeting #sec01 .left{ width:100%; padding-right:0 }	
	#mygreeting #sec01 .right{ width:100%; padding-bottom:40px; }
	#mygreeting #sec01 span{ margin-left:10px; } 	
	#mygreeting #sec03 .box{ flex-wrap:wrap; flex-direction: column-reverse; }
	#mygreeting #sec03 .left{ width:100%; margin-right:0 }	
	#mygreeting #sec03 .right{ width:100%; padding-bottom:40px; text-align:center; padding-left:0; }		
	#mygreeting #sec03 .right img{ width:60%; }	

#contactus #sec01 .chbox{ flex-wrap:wrap; }
#contactus #sec01 .chboxleft{ padding-top: 0; width:100%; font-size: 1.5rem; }
#contactus #sec01 .chboxright{ width:100%; padding-top:10px;  }
#contactus #sec01 input,
#contactus #sec01 textarea,
#contactus #sec01 select{ font-size: 1.5rem; }
#contactus #sec01 .submit-box{ margin-top: 40px; }
#contactus #sec01 .wpcf7-list-item-label{ font-size: 1.4rem; }

#contactus #sec01 .back{ margin-left: 0; width: calc( 100% - 7.5px ); font-size: 1.4rem; }
#contactus #sec01 .msubmitcontect{ margin-left: 0; width: calc( 100% - 7.5px ); font-size: 1.4rem; }
#contactus #sec01 h3{ font-size: 2.2rem; }
#thanks #contactus #sec01 p,
#mid-career-form_thanks #contactus #sec01 p,
#new-graduate-form_thanks #contactus #sec01 p{ font-size: 1.4rem; margin-bottom: 40px; }
#contactus #sec01 .flex-chbox span { width: 100%; }
#contactus{ margin-bottom: 70px; }
	
#privacy #sec01  .tablebox{ width:100%; overflow: hidden; }
#privacy #sec01  .table-responsive{ width:800px; overflow-x: scroll; }	
	
#rec01 #sec01 .recboxleft{  padding: 20px 5px; }
#rec01 #sec01 .recboxright{ padding: 20px 5px 20px 5px; }
#rec01 #sec01 .mybox{ flex-wrap:wrap; }
#rec01 #sec01 .myboxleft{ width:100%; padding-right:0; }
#rec01 #sec01 .myboxright{ width:100%; padding-right:0; }
	
	
	
	.sub .title-box .img-box img{height: 30vh;}
	.sub .title-box .flex{flex-direction: column;}
	.sub .title-box .title-flex h2 span{font-size: 6.9rem;}
	.sub .title-box .title-flex .breadcrumbs{text-align: right;}
	.sub .page-nav ul li:not(:last-child),#question .tac ul li:not(:last-child){border-right: none;margin-bottom: 20px;}
	.sub .page-nav ul{flex-direction: column;width: 90%;}
	.sub section:not(:last-child){ padding: 60px 0; }
  	
	.contact-cva .text{flex-direction: column;}
	.contact-cva .text .left{margin-right: 0;margin-bottom: 20px;}
	.contact-cva .text .left a{font-size: 3.6rem;}
	#recruit .btn{font-size: 12px;}
		.contact-cva .btn-box a{font-size: 12px;}
	.sub .title-box .title-flex{padding-bottom: 50px;}
	#recruit .r_topmessage .flex .right h3{font-size: 40px; margin-bottom: 45px; }
	#recruit .r_topmessage .flex .right h3 span{font-size: 16px;}
	#listservice .item {width: 49%;margin-right: 0.33%;margin-bottom: 8px;}
#listservice .item {width: 49%;margin-right: 0.33%;margin-bottom: 6px;}
#listservice p{font-size: 1rem;}
#listservice h4{font-size: 22px;}
#company .c_ttl2{font-size: 20px;}
#company #sec01 .flex{flex-direction: column;}
#company #sec01 .flex .left{width: 100%;padding-right: 0;}
#company #sec01 .flex .right{width: 100%;margin-top: 30px;}
#company #company_box .link_box ul a{width: 100%;}
#company #company_box .link_box ul a li{padding: 25px;}
#company #company_box .top{margin-bottom: 44px;}
#access .a_box{flex-direction: column;}
#access .a_box .left{width: 100%;}
#access .a_box .right{width: 100%;}
/*#profile #sec01 .recbox{flex-direction: column;}
#profile #sec01 .recboxleft{width: 100%;}
#profile #sec01 .recboxright{width: 100%;}*/
#profile section .mybox{flex-direction: column;}
#profile section .myboxleft{width: 100%;}
#profile section .myboxright{width: 100%;}
#profile section .pdfgroupbutton{flex-wrap: wrap;}
#profile section .pdfbutton{width: 100%;margin-bottom: 10px;}
#profile section .recinall{margin: 30px 10px;}
.timelinebox{flex-direction: column;}
.timelineboxright{padding: 30px 0px 10px;width: 100%;}
/*#profile #sec01 .tlbox{flex-direction: column;}*/
#profile section .recinall{padding: 30px 35px 60px;}
.tlboxright{width: 100%;}
#newlist .pdfbtn1{width: 100%;}
#office #sec01 .box{flex-direction: column;}
#office #sec01 .right{width: 100%;flex-direction: column;}
#office #sec01 .map1{margin-top: 0;}
#office #sec01 ul{margin-right: 0;width: 100%;}
#office #sec01 .map{margin-bottom: 17px;}
#award #sec02 ul{justify-content: space-between;}
#award #sec02 li {width: 48%;margin-right: 0%;margin-bottom: 30px;}
#contactus #sec01 .chbox{flex-direction: column;}
.service_list .flex{flex-direction: column-reverse;}
.service_list .flex .right{width: 100%;}
.service_list .flex .left{width: 100%; margin-top: 70px; }
.service_list .flex .right .area .s_box .flex{flex-direction: row;}
.service_list .flex .right .area .s_box p{margin-bottom: 30px;}
.service_list .flex .right .main-ttl{font-size: 48px;}
.service_list .flex .right .main-ttl span{font-size: 17px;}


  footer .box { margin-bottom: 150px!important; }
	footer .box .right nav{ width: calc( 100% + 30px ); margin-left: -15px; }
	
	
	#footermenu{        
		display: flex;
		width: 100%;
		position: fixed;
		bottom: 90px;
		text-align: center;
		flex-direction: column;
		align-items: flex-end;
    gap: 2rem;
		right: 11px;
	}
	#footermenu li{ width:60px; height: 60px; text-align:center; color:#fff; font-size:1.6rem; padding:10px 10px; border-radius: 100%;}
	#footermenu li:nth-child(1){ background: #595959;}
	#footermenu li:nth-child(2){ background:var(--main-color); }
	#footermenu li:nth-child(1) img{ width:20px;}
	#footermenu li:nth-child(2) img{ width:30px;}
	#footermenu li a{      
		color: #fff;
		font-size: 1.6rem;
		display: flex;
		justify-content: center;
		flex-direction: column;
	  align-items: center;
	}
	#footermenu li .ftext{ font-weight: 700; color:#fff; font-size:1.6rem; line-height:1.3em; text-align:left; }	
	.banner-slider .slider.slider-for .slick-slide{ padding-bottom: 35px; }
	.banner-slider .slider.slider-for .slick-slide p{ position: unset; line-height: 1.3em; font-size: 1.3rem; }
	.banner-slider{ margin-top: 0px; }
	.slick-dots{ bottom: 0!important; }
	.slick-next{ right: 0!important; }

  .timelineboxleft{ width: 100%; }
  .timelineboxleft-jp{ width: auto; display: inline-block; }


	.news_single .container .recruitbtn-box { flex-wrap: wrap; }
	.news_single .container .recruitbtn-box a{ width: 100%; }
	.news_single .container .recruitbtn-box a:last-child{ margin-top: 10px; }
	

	#top .count-box-inner{
		flex-direction: column;
	}
}


@media screen and (max-width: 420px) {
	
	#mygreeting #sec01 h2{ font-size:38px; }
	#mygreeting #sec01 span{ font-size:12px; } 		
	#mygreeting #sec04 li{ font-size:3.8vw; }	
	#listservice .item{ width:49%; margin-right:2%; }
	#listservice .item:nth-child(2n){ margin-right:0; }
	#office #sec01 li { width: 100%; margin-right: 0; }
#rec01 #sec01 .recboxleft{ width: 100px; }
#rec01 #sec01 .recboxright{ width: calc( 100% - 100px ); }

	#footermenu li .ftext{ font-size:1.4rem; }
	.mobilelogo{ height:50px; }
	header .box .right ul{ padding:20px 20px 100px 15%; }
	header .right nav{ background: var(--sub-color); background-size:25% auto; }
	header .box .right ul li a{ padding:15px 0px; }
	header .box .right ul .mmenulist a{ font-size:11px; }
	#contactus #sec01 .selectqualification .wpcf7-list-item{ width:90%; }	
	#contactus #sec01 .mesdet{ padding-top:5px; }

	.btn{ padding: 18px; width: 100%; }
	.motto-list ul li{
		width: 150px;
		min-height: 150px;
		margin-bottom: 3rem;
	}
}