@charset "utf-8";

.drawer-open .drawer-overlay{
  z-index:500;
  background-color:rgba(0,0,0,0.75);
}
.drawer-nav{
  box-sizing:border-box;
  width:50vw !important;
  height:100vh !important;
  padding:10vh 10vw;
  background:#fff;
}
.drawer-menu{
  text-align:left;
  padding-bottom:15vh !important;
}
.drawer-menu a{
  display:block;
  text-decoration:none;
  color:var(--base-color);
}
.drawer-menu a:hover{
  color:var(--link-color);
}
.drawer-menu > ul{
}
.drawer-menu > ul > li{
  font-size:1.0rem; line-height:1.8; font-weight:var(--normal);
}
.drawer-menu > ul > li:not(:first-child){
  margin-bottom:2.0rem;
}
.drawer-menu > ul > li > a{
  border-bottom:1px solid #999;
}
.drawer-menu > ul > li > ul{
  margin:0.5rem 0 2.0rem;
}
.drawer-menu > ul > li > ul > li{
  font-size:0.95rem; line-height:1.8; font-weight:var(--normal);
  margin-bottom:0.1rem;
}
.drawer-menu > ul > li > ul > li > a{
  position:relative;
  padding-left:1.0rem;
}
.drawer-menu > ul > li > ul > li > a::before{
  content:"";
  width:0.2rem; height:auto;
  aspect-ratio:1/1;
  border-radius:100%;
  background:var(--key-color);
  position:absolute;
  top:50%; left:0.2rem;
  transform:translateY(-50%);
}
.drawer-menu > ul > li > ul > li.sub > a{
  position:relative;
  padding-left:2.0rem;
}
.drawer-menu > ul > li > ul > li.sub > a::before{
  content:"";
  width:0.6rem; height:1px;
  background:var(--base-light-color);
  position:absolute;
  top:50%; left:1.0rem;
  transform:translateY(-50%);
}

#drawer{
  width:60px; height:auto;
  aspect-ratio:1/1;
  position:fixed;
  top:15px; right:20px; z-index:10000;
  transition:0.2s;
}
.scrolling #drawer{
  top:0;
}
#drawer > button{
  width:30px; height:auto;
  aspect-ratio:1/1;
  position:absolute;
  top:50%; left:50%; z-index:10000;
  transform:translate(-50%,-50%);
  padding:0;
}
#drawer .drawer-hamburger-icon,
#drawer .drawer-hamburger-icon::before,
#drawer .drawer-hamburger-icon::after{
  background-color:var(--base-light-color);
  margin:0;
}
#drawer .drawer-hamburger-icon::before{
  top:-8px;
}
#drawer .drawer-hamburger-icon::after{
  top:8px;
}
#drawer .drawer-hamburger::after{
  display:none;
}
.drawer-open #drawer .drawer-hamburger-icon{
  background-color:transparent !important;
}
.drawer-open #drawer .drawer-hamburger-icon::before,
.drawer-open #drawer .drawer-hamburger-icon::after{
  top:0;
}

.recruit .drawer-nav{
  background:var(--main-color);
}
.recruit #drawer .drawer-hamburger-icon,
.recruit #drawer .drawer-hamburger-icon::before,
.recruit #drawer .drawer-hamburger-icon::after{
  background-color: #fff;
}
.recruit #drawer .drawer-hamburger::after{
  content:"MENU";
  display:block;
  font-family:var(--eng-font);
  font-size:0.55rem; line-height:1.4;
  color:#fff;
}