@charset "utf-8";
/* CSS Document */

/*nav*/
#drawernav ul .primaryBtn a{ color:#fff!Important; }

button#botton_vacancy_inquiry{ padding: 6px 20px; display: block; background-color: transparent; border: none; cursor: pointer; outline: none; appearance: none; font-size: 16px;line-height: 20px;}

.drawerFooterbox .primaryBtn{ top: -50px; }

.contactNum{ font-size:13px; }

#drawerLogo{ display:none; width: 100%;}

/*drawer-------------------------------------------------------------------------*/
#page{
  z-index: 0;/*3*/
  left: 0;
  overflow: hidden;
  background: #fff;
  -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}
		
/*nav*/
#drawerInner{ height:100%; width:100%;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  }


#drawernav ul{list-style: none;}

#navqa li{ float:left; letter-spacing:0; }

#drawerLeft,
#drawerLeft .accordionlist{  float:left; }


/*humberger*/
#humberger{
  display:none;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 9;
  width: 50px;
  padding: 23px 12px 7px;
  cursor: pointer;
  border-radius: 4px;
  background:rgba(35,94,134,0.8);
  overflow: hidden; 
}

#humberger:hover{ background:rgba(22,79,110,0.8); }

#humberger::before {
  content: "MENU";
  color: #fff;
  letter-spacing: -1px;
  font-size: 15px;
  position: absolute;
  top: 0;
  margin-left: -8px;
}

.drawer-opened #humberger::before {
  content: "CLOSE";
}

/*humbergerの動き*/
.icon-bar{
  height: 2px;
  background: #fff;
  display: block;
  margin-bottom: 4px;
  -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}
.fixed-content{
  right: inherit;
  width: 100%;
  z-index: 2;
  -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
}

/*overlay*/
#overlay{
  z-index:-1;
  opacity: 0;
  background: #000;
  left: 0;
  top: -10px;
  bottom: -10px;
  width: 100%;
  display: none;

  position: fixed;
  -webkit-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition: all 400ms cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */

  -webkit-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	 -moz-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
	   -o-transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); 
		  transition-timing-function: cubic-bezier(1.000, 0.000, 0.000, 1.000); /* easeInOutExpo */
		  overflow: hidden;
		  
		  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
	
/*closeBtn*/
.closeBtn { display:none; }
	
.drawer-dropdown-menu{ background:none; color:#fff; }



.accordionTitle1 a{padding: 10px 0;}

.navigation--tier-two-inner .navigation--item{
color:#545454;display:block;font-size:14px;font-weight:400;white-space:normal;width:100%}
.navigation--tier-two-inner .navigation--item:hover,
.navigation--tier-two-inner .navigation--item:focus,
.navigation--tier-two-inner .navigation--item.is-active{background-color:#f5f5f5}


/*logo-------------------------------------------*/
#drawerLogo {font-family: 'Noto Serif JP', serif;}
#drawerLogo a{ color:#131313 }

@media screen and (max-width: 1419px) {
/*nav*/
#drawerInnerMenu{ width:100%; }

}




/*pc*/
@media all and (min-width:1060px) {
.navigation--main {
  background-color: #fff;
  overflow: visible;
  transition: none;
  width: 100%;
  z-index: 1002;
}

#drawerInner .mailBtn a{ display:none; }

}



@media screen and (min-width: 491px) and (max-width: 1059px) {
#drawerLogo img{ height:80%; }

}

@media screen and (min-width: 1025px) and (max-width: 1059px) {
  .drawer-opened .navigation--main {right:0;  transition: all .5s; }
}

@media screen and (max-width: 1059px) {
.navigation--main { position: fixed/*absolute*/; top:0; right:-73.5%; bottom: 0; z-index: 1002; height: 100%; box-shadow:none; background-color: #fff;
   will-change: width,box-shadow; width:73.5%; overflow: visible;
   /*transition: .5s;*/
  }


.drawer-opened .navigation--main {right:0; }


/*ゆっくりスライド*/
.drawer-opened #drawernav { transform: translateZ(0); }

#drawernav{
overflow-y: auto;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-top: 64px;
  background: #fff;
  color: #333;
  z-index: 8;/*1001*/
 overflow: hidden;
}

#drawernav #drawerLogo{ display:block; position:absolute; left:0; top:0;
  height:71px;
  box-shadow: 0 1px 2px rgba(0,0,0,.24);
  padding: 0 0 0 4%;
  overflow-y: hidden;
  display: flex;
  align-items: center;
}

#drawerLogo img{ width:auto;}

body #page{right: 0;}

body.drawer-opened .hidden-item{ display:block; }

body.drawer-opened #overlay{
	display: block;
  z-index: 1001;
  opacity: 0.3;
}

/*　drawer */
#humberger{ display:block; }

body.drawer-opened #humberger .icon-bar{ background: #fff; }
body.drawer-opened #humberger :nth-child(1){
  -webkit-transform:translate(0,8px) rotate(45deg);
  transform:translate(0,8px) rotate(45deg);
}
body.drawer-opened #humberger :nth-child(2){
  -webkit-transform:translate(-20px ,0);
  transform:translate(-20px ,0);
  opacity:0;
}
body.drawer-opened #humberger :nth-child(3){
  -webkit-transform:translate(0,-4px) rotate(-45deg);
  transform:translate(0,-4px) rotate(-45deg);
}

body.drawer-opened .closeBtn {
  position: fixed;
  top: 10px;
  right: 10px;
  overflow: hidden;
  text-indent:-120px;
  display:block;
  width: 50px;
  height:55px;
  padding: 21px 15px 17px;
  cursor: pointer;
  z-index:100;
}


 /*お問い合わせ*/
/*drawerMail*/
#drawerInner .mailBtn a{ border-radius:inherit; border:none; border-bottom:1px solid #ccc; padding-left:40px;  }
#drawerInner .mailBtn a:before{ left: 3%; }
@media screen and (-webkit-min-device-pixel-ratio:0) {
#drawerInner .mailBtn a:before{  top:20px; }
}

body.drawer-opened .box_close{ display: none; height:1px;}

  

#drawerInner{ box-shadow:none; display:block; overflow-y: auto; height: 100%; position: relative; }
#drawerInner li{  border-bottom:1px dotted #ccc; }
#drawerInner .accordionlist li{ border-bottom:none;  }

.navigation--main-wrapper{height:100%;overflow-y:scroll;padding-bottom:285px;  padding-left:30px;padding-right:2%;}

#drawerInnerMenu{ width:100%; font-size: 16px;}


.drawerNav a{ padding:20px;}
}

@media all and (max-width:1024px) {
.navigation--main { transition: all .5s;}
#mainNav span{ position: relative; }
.navName i{ margin-left: 5px;
  position: absolute;
  right: -20px;
  top: -10px; }

}
@media all and (max-width:490px) {
  #drawerLogo a{ display: block; width: 76%; font-size: 4vw; }
}

@media all and (max-width:320px) {
#drawerLogo a{ width: 72%; }
}