#drawer {
  display: none;
}

#drawer-area {
  display: none;
}

#overlay {
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  position: fixed;
  bottom: 0;
  right: 0;
}

#gmenu-icon,
#gmenu-icon span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}

#drawer-area {
  display: block !important;
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9010;
  background-color: #2ECCC4;
  width: 66px;
  height: 66px;
  transition: all .2s ease-in-out .6s;
}
#drawer-area.toggle {
  top: 25px;
  right: 14px;
}
#drawer-area.move {
  -webkit-animation: headerMove .6s ease-in forwards;
  animation: headerMove .6s ease-in forwards;
}

#gmenu-icon {
  position: fixed;
  z-index: 9010;
  top: 36px;
  right: 32px;
  width: 30px;
  height: 30px;
  margin: 6px;
  transition: all .4s linear;
}
#gmenu-icon span {
  border-radius: 2em;
  transition: all .4s linear;
  position: absolute;
  z-index: 9011;
  right: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
}
#gmenu-icon span:nth-of-type(1) {
  top: 0px;
  left: 0px;
}
#gmenu-icon span:nth-of-type(2) {
  width: 103%;
  top: 10px;
  transform: translateY(-2px) rotate(32deg);
}
#gmenu-icon span:nth-of-type(3) {
  top: 17px;
  right: 0px;
}
#gmenu-icon.active {
  transition-duration: .4s;
  transform-origin: center;
  transform: translateY(0) rotate(90deg);
}
#gmenu-icon.active span:nth-of-type(1) {
  top: 0;
  left: 0;
}
#gmenu-icon.active span:nth-of-type(2) {
  top: 9px;
  transition-duration: .8s;
  transform-origin: center;
  transform: translateY(0) rotate(508deg);
}
#gmenu-icon.active span:nth-of-type(3) {
  top: 17px;
  right: 0;
}
#gmenu-icon.move {
  -webkit-animation: borderMove .6s ease-in forwards;
  animation: borderMove .6s ease-in forwards;
}

/* drawer body */
#drawer {
  display: block;
  position: fixed;
  top: 0;
  right: -70%;
  z-index: 8001;
  width: 70%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, rgba(3, 127, 206, 0.95), rgba(0, 221, 235, 0.95));
  transition: all .5s ease;
  padding: 100px 12px 12px 12px;
}
#drawer.toggle {
  right: 0;
}
#drawer ul.d-main {
  width: 70%;
  margin: 0 auto;
}
#drawer ul.d-main .logo {
  width: 100px;
  margin-bottom: 30px;
}
#drawer ul.d-main .ban {
  width: 100%;
  margin: 80px 0;
}
#drawer ul.d-main .last {
  border-bottom: none;
}
#drawer ul.d-main li {
  width: 100%;
  margin: 0 auto;
  padding: 10px 0;
  border-bottom: 1px solid #fff;
  transition-duration: .6s;
}
#drawer ul.d-main li:hover a {
  color: #fff;
}
#drawer ul.d-main li a {
  color: #fff;
  letter-spacing: .15em;
  padding-left: 10px;
  font-size: 1.6em;
  font-family: zen-maru-gothic, sans-serif;
  font-weight: 500;
  font-style: normal;
}
#drawer ul.d-main li a span {
  display: block;
  line-height: 1.5;
  color: #fff;
  font-size: 1.4em;
}
@media screen and (max-width: 768px) {
  #drawer {
    right: -100%;
    width: 100%;
  }
}

#drawer ul.d-main li.d-main-item.slidedown {
  padding-bottom: 0;
}
#drawer ul.d-main li.d-main-item.slidedown ul li {
  padding: 4px 0;
}

@keyframes headerMove {
  0% {
    opacity: 1;
    left: 0;
  }
  100% {
    opacity: 0;
    left: 200px;
  }
}
@keyframes borderMove {
  0% {
    opacity: 1;
    left: 11px;
  }
  100% {
    opacity: 0;
    left: 200px;
  }
}

/*# sourceMappingURL=drawer.css.map */