@charset "UTF-8";

/* ------------------------------------------------------------
	base
   ------------------------------------------------------------ */

body {
  font-family: "Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  font-size: 14px;
	font-weight: 400;
  min-width: 1260px;
  -webkit-text-size-adjust: 100%;
  color: #333;
  width: 100%;
}

.main{
  display: block;
}
.container{
  margin-top: 52px;
}

img{vertical-align:bottom;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}

img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  vertical-align: middle;
  font-size: 0;
}

table {
	font-size:inherit;
	font:100%;
}

* {
	max-height: 999999px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;   
}
.fRoboto{font-family: 'Roboto', sans-serif;}
a:focus{outline: none;}
@media only screen and (max-width:767px){
  body{
    min-width: 0;
  }
  .container{
    margin-top: 60px;
  }  
}


/* header */
.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  min-width: 1260px;
  height: 52px;
}
.header a{
  text-decoration: none;
  background-size: 0;
}
.header_wrap{
  position: relative;
}
.header_logo{
  position: absolute;
  left: 0;
  top: 0;
  z-index: 20;
  width: 100%;
  pointer-events: none;
}
.header_logo_inner{
  width: 42.8%;
  height: 52px;
  display: flex;
  align-items: center;
  background: #FFF;
  position: relative;
}
.header_logo_inner::before{
  content: "";
  width: 400px;
  height: 100%;
  background: #FFF;
  position: absolute;
  top: 0;
  left: -399px;
  z-index: -1;
}
.header_logo_inner::after{
  content: "";
  width: 34px;
  height: 52px;
  border-top: 52px solid #FFF;
  border-right: 34px solid transparent;  
  position: absolute;
  top: 0;
  right: -34px;
}
.header_logo_link{
  pointer-events: all;
  max-width: 140px;
}
/* navSp */
.header_nav_sp{
  position: fixed;
  width: 100%;
  background: rgba(0,0,0,0.9);
  z-index: 30;  
  padding: 120px 0 100px;
  display: none;
}
.headerActive_on{
  display: none;
}
.navSp_wrap{
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 7% 100px;
  height: 100vh;
}
.navSp_contact{
  font-size: 14px;
  color: #f39800;
  text-align: center;
  padding: 5px 0;
  border: #f39800 solid 1px;
  width: 112px;
  display: block;
  position: absolute;
  right: 20vw;
  top: 14px;
}
.navSp_lang {
  font-size: 12px;
  color: #fff;
  text-align: center;
  display: block;
  position: absolute;
  right: 5%;
  top: 66px;
}
.navSp_lang_link {
  color: #fff;
}
.navSp_top{
  font-size: 0;
}
.navSp_top_item{
  display: inline-block;
  vertical-align: top;
  margin: 20px 45px 0 0;
  padding: 0;
}
.navSp_top_item::before{
  display: none;
}
.navSp_top_item:last-child{
  margin-right: 0;
}
.navSp_top_item-arrow{
  width: 100%;
  margin: 0;
}
.navSp_top_link{
  color: #FFF;
  font-size: 16px;
  font-weight: 700;
}
.navSp_top_link-arrow{
  display: block;
  width: 100%;
  padding: 0 0 10px;
  border-bottom: #FFF solid 1px;
  background: url(/en/common/img/icon_arrow_down_wh.png) right center /12px 8px no-repeat;  
}
.navSp_top_link-arrow:hover{
  background-size: 0;
}
.navSp_top_link-arrow.open{
  background-image: url(/en/common/img/icon_arrow_up_wh.png);
}
.navSp_top_open{
  display: none;
}
.navSp_bottom{
  padding-bottom: 120px;
}
.navSp_bottom_item{
  margin-top: 30px;
  padding: 0;
}
.navSp_bottom_item::before{
  display: none;
}
.navSp_bottom_link{
  font-size: 18px;
  color: #FFF;
  font-weight: 700;
}
.navSp_bottom_link:hover{
  background-size: 0;
}
.navSp_bottom_link-plus{
  display: block;
  position: relative;
}
.navSp_bottom_link-plus::before,
.navSp_bottom_link-plus::after{
  content: "";
  background: #FFF;
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  transition: all 0.2s ease-out;
}
.navSp_bottom_link-plus::before{
  width: 17px;
  height: 2px;
  right: 0;
}
.navSp_bottom_link-plus::after{
  width: 2px;
  height: 17px;
  right: 7px;
}
.navSp_bottom_link-plus.open::after{
  opacity: 0;
}
.navSp_bottom_open{
  display: none;
}
.navSp_bottom_open .navSp_bottom_item{
  margin-top: 20px;
  padding-left: 20px;
}
.navSp_bottom_open .navSp_bottom_link{
  font-size: 15px;
}


@media only screen and (max-width:1400px){
  .header_logo_inner{
    width: 36%;
  }
}
@media only screen and (max-width:767px){
  .header{
    min-width: 0;
    width: 100%;
    height: 60px;
    background: rgba(255,255,255,.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
  }
  .header_logo{
    width: 90%;
    margin: 0 auto;
    right: 0;
    z-index: 40;
  }
  .header_logo_inner{
    height: 60px;
    background: none;
  }
  .header_logo_inner::before{
    display: none;
  }
  .header_logo_inner::after{
    display: none;
  }  
  .header_logo_link{
    max-width: 160px;
  }
  .header_menu{
    position: absolute;
    right: 5%;
    top: 7px;
    background: rgba(0,0,0,1);
    width: 46px;
    height: 46px;
    z-index: 40;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;     
    cursor: pointer;
    margin: auto;
  }
  .header_menu_bar{
    width: 30px;
    height: 2px;
    background: #FFF;
    display: block;
    position: absolute;
    left: 8px;
    -webkit-transition: all 0.2s ease-out;
    transition: all 0.2s ease-out;        
  }
  .header_menu_bar:nth-child(1){
    top: 18px;
  }
  .header_menu_bar:nth-child(2){
    top: 28px;
    width: 19px;
  }
  .header_menu.open{
    background: rgba(0,0,0,0);
    right: 5%;
  }
  .open .header_menu_bar{
    left: 0;
    right: 0;
    top: 15px;
    margin: 0 auto;
  }
  .open .header_menu_bar:nth-child(1){
    -webkit-transform: translateY(9px) rotate(-45deg);
    transform: translateY(9px) rotate(-45deg);
  }
  .open .header_menu_bar:nth-child(2){
    width: 31px;
    -webkit-transform: translateY(9px) rotate(45deg);
    transform: translateY(9px) rotate(45deg);
  }
  .headerActive .header_logo_link img{
    filter: brightness(0) invert(1);
  }
}

/* cmn_nav */
.cmn_nav{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 10;
  min-width: 1260px;
}
.cmn_nav_box-1{
  background: rgba(22,22,22,0.8);
}
.cmn_nav_box-2{
  background: rgba(255,255,255,0.8);
}
.cmn_nav_boxRe{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.cmn_nav_list{
  margin-right: 30px;
  font-size: 13px;
  line-height: 1;
  padding-left: 0;
  margin-top: 0;
  position: static;
}
.cmn_nav_list::before{
  display: none;
}
.cmn_nav_list:last-child{
	margin-right: 0;
}
.cmn_nav_list:has(+ .cmn_nav_list-lang){
  margin-right: 30px;
}
.cmn_nav_list-lang {
  color: #FFF;
  font-weight: 700;
  padding-right: 20px;
}
.cmn_nav_list-2{
  margin-right: 0;
}
.cmn_nav_list__recruit{
  position: relative;
}
.cmn_nav_link__recruit::before{
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-bottom: 2px solid #FFF;
  border-right: 2px solid #FFF;
  transform: rotate(45deg);
  position: absolute;
  right: -17px;
  top: 0;
  bottom: 5px;
  margin: auto;
  opacity: 0;
  transition: .2s all;
}
.cmn_nav_link__recruit:hover,
.cmn_nav_link__recruit.open{
  color: #FFF!important;
}
.cmn_nav_link__recruit:hover::before,
.cmn_nav_link__recruit.open::before{
  opacity: 1;
}
.cmn_nav_link__recruit:hover::after,
.cmn_nav_link__recruit.open::after{
  display: none;
}
.cmn_nav_recruitSub{
  position: absolute;
  left: -20px;
  top: 52px;
  z-index: 10;
  display: none;
}
.cmn_nav_recruitSub a{
  display: block;
  width: 271px;
  background: rgba(22,22,22,.8);
  border-top: #8f8f8f solid 1px;
  color: #FFF;
  font-size: 14px;
  padding: 15px 80px 15px 20px;
  position: relative;
}
.cmn_nav_recruitSub a::before,
.cmn_nav_recruitSub a::after{
  content: "";
  position: absolute;
  right: 20px;
  top: 24px;
}
.cmn_nav_recruitSub a::before{
  background: #FFF;
  width: 47px;
  height: 1px;
}
.cmn_nav_recruitSub a::after{
  width: 6px;
  height: 5px;
  right: 15px;
  border-top: 5px solid transparent;
  border-left: 6px solid #FFF;
  box-sizing: border-box;
  top: 20px;
}
.cmn_nav_recruitSub a:hover{
  opacity: 1;
  color: #f39800; 
}
.cmn_nav_recruitSub a:hover::before{
  background: #f39800;
}
.cmn_nav_recruitSub a:hover::after{
  border-left-color: #f39800;
}
/*.tabOn .cmn_nav_list-2{
  margin-right: 25px;
}
.tabOn .cmn_nav_list:last-child{
  margin-right: 0;
}*/
.cmn_nav_list-2
.cmn_nav_list:last-child{
  margin-right: 0;
}
.cmn_nav_link{
  color: #FFF;
  font-weight: 700;
  letter-spacing: 0.5px;
  height: 52px;
  display: flex;
  align-items: center;
  position: relative;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;    
  font-size: 13px;
  cursor: pointer;
}
.tabOn .cmn_nav_link{
	font-size: 13px;
}
.cmn_nav_link-2{
  color: #5d5d5d;
  padding: 0 12px;
}
.tabOn .cmn_nav_link-2{
  padding: 0 7px;
}
.cmn_nav_link::after{
  content: "";
  height: 1px;
  width: 0;
  background: #f39800;
  position: absolute;
  left: 0;
  bottom: 0;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;        
}
.cmn_nav_link:hover,
.cmn_nav_link.open,
.cmn_nav_link.active{
  color: #f39800;
  opacity: 1;
}
.cmn_nav_link:hover::after,
.cmn_nav_link.open::after,
.cmn_nav_link.active::after{
  width: 100%;
}
.cmn_nav_link-contact{
  background: #f39800;
  padding: 0 50px 0 35px;
  margin-left: 15px;
}
.cmn_nav_link-contact.active{
	color: #FFF;
}
.cmn_nav_link-contact::before{
  content: "";
  display: block;
  vertical-align: top;
  border-bottom: 52px solid #f39800;
  border-left: 15px solid transparent;  
  position: absolute;
  top: 0;
  left: -14px;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;          
}
.cmn_nav_link-contact:hover{
  background: #FFF;
	color: #f39800;
}
.cmn_nav_link-contact:hover::after{
  display: none;
}
.cmn_nav_link-contact:hover::before{
  border-bottom-color: #FFF;
}
.cmn_nav_list-arrow{
  position: relative;
}
.cmn_nav_link-arrow{
  padding-right: 20px;
  background: url(/en/common/img/icon_arrow_down_wh.png) right center /10px 7px no-repeat;
}
.cmn_nav_link-arrow:hover,
.cmn_nav_link-arrow.open{
  color: #FFF!important;
  opacity: .4;
  background-size: 10px 7px;
}
.cmn_nav_link-arrow.open{
  background-image: url(/en/common/img/icon_arrow_up_wh.png);  
}
.cmn_nav_link-arrow:hover::after{
  display: none;
}
.cmn_nav_link-lang {
  display: inline;
}
.cmn_nav_link-lang::after {
  display: none;
}
.cmn_nav_open{
  position: absolute;
  left: -38%;
  top: 52px;
  background: rgba(22,22,22,.8);
  z-index: 2;
  display: none;
}
.cmn_nav_open_link{
  color: #FFF;
  text-align: center;
  border-top: #FFF solid 1px;
  display: block;
  width: 139px;
  font-size: 14px;
  padding: 13px 10px;
  font-weight: 700;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;            
}
.cmn_nav_open_link:hover{
  opacity: .8;
}
/* mega */
.cmn_mega{
  position: absolute;
  top: 103px;
  right: 0;
  width: 100%;
  font-size: 0;
  background: rgba(54,63,131,.8);
  visibility: hidden;
	transition: all 0.2s ease-out;
  display: block;
  opacity: 0;
  z-index: -1;
}
.cmn_mega.open,
.cmn_mega:hover{
  visibility: visible;
  opacity: 1;
}
/*.cmn_mega::before{
  content: "";
  width: 42.8%;
  height: 100%;
  background: #FFF;
  position: absolute;
  left: 0;
  bottom: 0;
}*/
.cmn_mega_wrap{
  display: flex;
  /*justify-content: flex-end;*/
  min-width: 1260px;  
}
.cmn_mega_left{
  width: 400px;
  min-height: 162px;
  position: relative;
  color: #FFF;
  display: flex;  
  flex-direction: column;
  align-items: flex-end;
  z-index: 2;
  padding: 35px 0 0;
  background-size: cover;
  background-position: center;
}
.cmn_mega_left::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(22,22,22,.7);  
  z-index: -1;
}
.cmn_mega_left-service{
  background-image: url(/en/common/img/bg_nav_service.jpg);
}
.cmn_mega_left-casestudies{
  background-image: url(/en/common/img/bg_nav_casestudies.jpg);
}
.cmn_mega_left-company{
  background-image: url(/en/common/img/bg_nav_company.jpg);
}
.cmn_mega_left-ir{
  background-image: url(/en/common/img/bg_nav_ir.jpg);
}
.cmn_mega_left-sustainability{
  background-image: url(/en/common/img/bg_nav_sustainability.jpg);
}
.cmn_mega_right{
  width: calc(100% - 400px);
  padding: 10px 0 10px 50px;
  display: flex;
  align-items: center;
}
.cmn_mega_tit{
  margin-right: 50px;
}
.cmn_mega_titEn{
  font-size: 30px;
}
.cmn_mega_titJa{
  font-size: 14px;
  margin: 5px 0 0;
  letter-spacing: 1px;
}
.cmn_mega_btn{
  font-size: 10px;
  color: #FFF;
  position: absolute;
  right: 20px;
  bottom: 15px;
}
.cmn_mega_btnArrow{
  display: block;
  width: 72px;
  height: 5px;  
  position: relative;
}
.cmn_mega_btnArrow::before{
  content: "";
  width: 100%;
  height: 1px;
  background: #FFF;
  position: absolute;
  right: 0;
  bottom: 0;
}
.cmn_mega_btnArrow::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  border-right: 7px solid transparent;
  border-bottom: 5px solid #FFF;
}
.cmn_mega_list{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.cmn_mega_item{
  width: 23%;
  margin: 15px 2% 15px 0;
  display: flex;
  align-items: center;
  font-size: 14px;
  padding-left: 0;
}
.cmn_mega_item::before{
  display: none;
}
.cmn_mega_item:nth-child(4n){
  margin-right: 0;
}
.cmn_mega_link{
  color: #FFF;
  font-size: 14px;
  position: relative;
  padding-left: 12px;
}
.cmn_mega_link::before{
  content: "";
  border-top: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-left: 7px solid #FFF;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto 0;
  box-sizing: border-box;
  width: 7px;
  height: 6px;
}


/* footer */
.footer a{
  text-decoration: none;
  background-size: 0;
}
.footer_main_flex{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.footer_linkRe{
  display: flex;
  margin-right: 80px;
}
.footer_btnContact_arrow{
  background: #f39800;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #FFF;  
  width: 270px;
  height: 270px;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;    
}
.footer_btnContact_arrow:hover{
  background: #f6b241;
}
.footer .btnArrow_inner-footer{
  position: relative;
  display: block;
  right: 0;
  top: auto;
  margin: 5px 0 0;
  width: 107px;
}
.footer .btnArrow_inner-footer::before,
.footer .btnArrow_inner-footer::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
}
.footer .btnArrow_inner-footer::before {
  background: #FFF;
  width: 100%;
  height: 1px;
  display: block;
}
.footer .btnArrow_inner-footer::after{
  width: 6px;
  height: 5px;
  right: 1px;
  border-top: 5px solid transparent;
  border-left: 6px solid #FFF;
  border-bottom: none;
  border-right: none;
  box-sizing: border-box;
  top: auto;
  margin: 0;
}
.footer_btnContact_txt{
  font-weight: 500;
  font-size: 20px;
  letter-spacing: 0.5px;
  min-width: 107px;
}
.footer_linkList{
  padding: 0 70px 0 12px;
  border-left: #d7d9e6 solid 1px;
}
.footer_linkList_item{
  margin-bottom: 30px;
}
.footer_linkList:nth-child(1) .footer_linkList_item:nth-last-child(3),
.footer_linkList_item:last-child{
  margin-bottom: 0;
}
.footer_linkList_link{
  color: #363f83;
	-webkit-transition: all 0.2s ease-out;
	transition: all 0.2s ease-out;  
}
.footer_linkList_link:hover{
  color: #f39800;
  background-size: 0;
}
.footer_logo{
  margin: 0 75px 0 0;
}
.footer_linkList_link_inner{
  padding-bottom: .25em;
  background: linear-gradient(#f39800, #f39800) 0 100%/0 1px no-repeat;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  display: inline;
}
.footer_linkList_link:hover .footer_linkList_link_inner{
  background-size: 100% 1px;
}
.copy{
  background: #161616;
  color: #FFF;
  text-align: center;
  line-height: 1.2;
  padding: 31px 0;
  font-size: 12px;
  letter-spacing: 2px;
}
@media only screen and (max-width:767px){
  .footer_main_flex{
    display: flex;
    flex-direction: column;
  }
  .footer_linkRe{
    display: flex;
    width: 92%;
    margin: 0 auto;
  }
  .footer_btnContact{
    order: 1;
    width: 100%;
  }
  .footer_btnContact_arrow{
    width: 100%;
    height: 136px;
  }
  .footer_btnContact_txt{
    font-size: 18px;
    min-width: 95px;
  }
  .footer .btnArrow_inner-footer{
    width: 95px;
  }
  .footer_linkRe{
    order:3;
    margin: 0 auto 55px;
  }
  .footer_linkList{
    padding: 0 15px 0 10px;
    width: 50%;
  }
  .footer_linkList:nth-child(1){
    width: 58%;
  }
  .footer_linkList_item{
    margin-bottom: 25px;
  }
  .footer_linkList:nth-child(1) .footer_linkList_item:nth-last-child(3){
    margin-bottom: 25px;  
  }
  .footer_linkList_item:last-child{
    margin-bottom: 0;
  }
  .footer_linkList_link{
  }
  .footer_logo{
    margin: 45px auto 35px;
    width: 167px;
    order:2;
  }
  .copy{
    padding: 19px 0;
    font-size: 10px;
  }
}

.content{
  position: relative;
  width: 100%;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);  
  max-width: 1920px;
}

/* cmn_btnGo */
.cmn_btnGo{
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 10;
  transform: translateY(150px);
}
.cmn_btnGo.active{
  transform: translateY(0);
}
.cmn_btnGo:hover{
  background: none;
  opacity: 1;
}  
@media only screen and (min-width:768px){
  .cmn_btnGo:hover{
    transform: translateY(-10px);
  }  
}
@media only screen and (max-width:767px){
  .cmn_btnGo{
    display: block;
    width: 60px;
    right: 10px;
    bottom: 10px;
  }
}
