@media (max-width: 1607px) {
  body {
    & #wrap {
      position: relative;
      width: auto;
      min-width: 320px;
      overflow: hidden;
    }
    #shifter {
      position: relative;
      width: 100%;
      left: 0;
      transition: left 0.4s ease;
      -webkit-transition: left 0.4s ease;
      background: var(--color-white);
    }
    & #close_menu {
      background-color: rgba(0, 0, 0, 0.01);
      position: fixed;
      top: 0;
      right: 0;
      z-index: 2147483647;
      width: 0;
      height: 100vh;
      display: block;
      transition:
        background-color 0.4s ease,
        right 0.4s ease;
      -webkit-transition:
        background-color 0.4s ease,
        right 0.4s ease;
    }
    & #header.sticky {
      transition: left 0.4s ease;
      -webkit-transition: left 0.4s ease;
    }
    &.menu_open {
      overflow: hidden;
      & #shifter {
        left: calc(-1 * min(90vw, 430px));
      }
      & #close_menu {
        display: block;
        background: rgba(0, 0, 0, 0.5);
        right: min(90vw, 430px);
        width: 100%;
      }
      & #header {
        &.sticky {
          left: calc(-1 * min(90vw, 430px));
          transition: left 0.4s ease;
          -webkit-transition: left 0.4s ease;
        }
        & .menu_content_container {
          left: calc(100% - min(90vw, 430px));
        }
      }
      & .menu_content_container {
        left: calc(100% - min(90vw, 430px));
      }
      &.show_menu_close {
        & #close_menu {
          background-color: rgba(0, 0, 0, 0.01);
          width: 100%;
          right: 0;
        }
        & #shifter {
          left: 0;
        }
        & #header {
          &.sticky {
            left: 0;
          }
          & .menu_content_container {
            left: 100%;
          }
        }
      }
    }
  }
  #header {
    & #mobile_logo {
      display: block;
      margin: 0 auto;
    }
    & #mobile_menu_button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 32px;
      padding: 6px 0;
      gap: var(--gap-xxs);
      & > div {
        border: 2px solid var(--color-text);
        border-radius: var(--border-radius-max);
      }
    }
    & .menu_content_container {
      display: flex;
      top: 0;
      left: 100%;
      width: min(90vw, 430px);
      z-index: 11;
      position: fixed;
      overflow-x: hidden;
      overflow-y: scroll;
      max-height: 100vh;
      transition: left 0.4s ease;
      -webkit-transition: left 0.4s ease;
      height: 100%;
      -ms-overflow-style: none; /* Internet Explorer 10+ */
      scrollbar-width: none; /* Firefox */
      box-sizing: border-box;
      padding: calc(var(--gap-xs) * 2) var(--gap-xs);
      background: var(--color-white);
      flex-direction: column;
      gap: var(--padding-xs);
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }
    & .main_menu {
      padding: 0;
      margin: 0;
      list-style: none;
      display: block;
      width: 100%;
      & li {
        margin-bottom: var(--gap-xxs);
        & a {
          display: block;
          background-color: var(--color-blue-light);
          color: var(--color-text);
          padding: var(--gap-xs);
          border-radius: var(--border-radius-m);
          transition: background-color 0.4s ease;
        }
        &:last-of-type {
          margin-bottom: 0;
        }
        &.current_page_item,
        &.current-page-ancestor {
          & > a {
            background-color: var(--color-pink) !important;
          }
        }
      }
      & > li {
        position: relative;
        &.menu-item-has-children {
          display: block;
          & ul {
            position: sticky;
            border-top: none;
            max-height: 0;
            margin-top: 0;
            margin-left: var(--gap-xs);
            transition:
              max-height 0.4s ease,
              margin-top 0.4s ease;
            overflow: hidden;
            & li {
              list-style: none;
              & a {
                background-color: hsl(
                  from var(--color-blue-light) h s calc(l - 8)
                );
              }
              &.current_page_item {
                & > a {
                  background-color: hsl(
                    from var(--color-pink) h s calc(l - 4)
                  ) !important;
                }
              }
            }
          }
          & > .expand_container {
            position: absolute;
            width: 55px;
            height: 55px;
            right: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            & > .expand_btn {
              transition: transform 0.4s;
              display: block;
              width: 8px;
              height: 5px;
              background-color: currentColor;
              mask: center / cover no-repeat
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' fill='none' viewBox='0 0 8 5'%3E%3Cpath fill='currentColor' d='M4 3.7592 1.0387.6962a.242.242 0 0 0-.3508 0 .2633.2633 0 0 0 0 .363l3.1369 3.2446a.242.242 0 0 0 .3508 0l3.1365-3.2443A.26.26 0 0 0 7.3846.878a.26.26 0 0 0-.0725-.1813.242.242 0 0 0-.3508 0z'/%3E%3Cpath fill='currentColor' fill-rule='evenodd' d='M3.8248 4.3038a.242.242 0 0 0 .3508 0l3.1365-3.2443.0084-.0091a.26.26 0 0 0 .0641-.1725.26.26 0 0 0-.0725-.1813.242.242 0 0 0-.3508 0L4 3.7592 1.0387.6962a.242.242 0 0 0-.3508 0 .2634.2634 0 0 0 0 .363zM4 2.87 1.4792.2626A.8535.8535 0 0 0 .2466.2635c-.3288.3414-.3288.887 0 1.2284l3.1377 3.2455a.8535.8535 0 0 0 1.2318 0l3.1365-3.2442A.884.884 0 0 0 8 .8779.883.883 0 0 0 7.7526.263a.8535.8535 0 0 0-1.2318 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
            }
          }
        }
        &.active {
          & > a {
            background-color: hsl(from var(--color-blue-light) h s calc(l - 8));
          }
          & ul {
            margin-top: var(--gap-xxs);
            max-height: 10000px;
            transition:
              max-height 0.4s ease,
              margin-top 0.4s ease;
          }
          & > .expand_container {
            & > span.expand_btn {
              transform: rotate(-180deg);
            }
          }
        }
        &.clicked {
          & > a:after {
            transform: rotate(-180deg);
          }
        }
      }
    }
  }
}