#drawer {
  display: none; }

#drawer-area {
  display: none; }

/*---------------------------------------------------------------------------------------------------
--------------------------------------------* Media Query Smart Phone *------------------------------
-----------------------------------------------------------------------------------------------------*/
/* @media screen and (max-width: 834px) { */
#overlay {
  display: none;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.25);
  position: fixed;
  bottom: 0;
  right: 0; }

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

#gmenu-icon {
  position: fixed;
  z-index: 9010;
  top: 24px;
  right: 40px;
  width: 35px;
  height: 30px;
  margin: 0px; }
  #gmenu-icon span {
    position: absolute;
    z-index: 9011;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #50C0B4; }
    #gmenu-icon span:nth-of-type(1) {
      top: 0; }
    #gmenu-icon span:nth-of-type(2) {
      top: 14px; }
  #gmenu-icon.active span:nth-of-type(1) {
    transform: translateY(7px) rotate(-45deg); }
  #gmenu-icon.active span:nth-of-type(2) {
    transform: translateY(-7px) rotate(45deg); }

/* } */
@media screen and (max-width: 1024px) {
  /* drawer torigger btn */
  #drawer-area {
    display: block !important;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9010;
    width: 75px;
    height: 70px;
    transition: left .2s linear; }
    #drawer-area.toggle {
      left: 55%; }
    #drawer-area.move {
      -webkit-animation: headerMove .6s ease-in forwards;
      animation: headerMove .6s ease-in forwards; }

  #gmenu-icon {
    top: 2.5%;
    left: 3%;
    width: 25px;
    height: 30px;
    margin: 6px;
    transition: right .2s linear; }
    #gmenu-icon span:nth-of-type(1) {
      top: 0; }
    #gmenu-icon span:nth-of-type(2) {
      top: 9px; }
    #gmenu-icon.active {
      right: 56%; }
      #gmenu-icon.active span:nth-of-type(1) {
        transform: translateY(4px) rotate(-45deg); }
      #gmenu-icon.active span:nth-of-type(2) {
        transform: translateY(-4px) rotate(45deg); }
    #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;
    left: -70%;
    z-index: 8001;
    width: 70%;
    height: 100%;
    overflow: hidden;
    background: #fff;
    transition: all .5s ease;
    padding: 100px 12px 12px 12px; }
    #drawer.toggle {
      left: 0; }
    #drawer ul.d-main {
      width: 70%;
      margin: 0 auto; }
      #drawer ul.d-main li {
        width: 100%;
        margin: 0 auto 5px;
        padding-bottom: 10px;
        margin-bottom: 12px;
        border-bottom: 1px solid #50C0B4; }
        #drawer ul.d-main li a {
          color: #333;
          letter-spacing: .15em;
          padding-left: 3px;
          font-size: 1.6em;
          font-family: 'Noto Sans JP', sans-serif; }
          #drawer ul.d-main li a span {
            display: block;
            line-height: 1.5;
            color: #333;
            font-size: 1.4em; } }
  @media screen and (max-width: 1024px) and (max-width: 480px) {
    #drawer {
      left: -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; } }