@media (max-width: 1587px) {
  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_menu_button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 32px;
      gap: var(--gap-xxs);
      & > div {
        border: 2px solid var(--color-black);
        border-radius: var(--border-radius-max);
      }
    }
    & .menu_content_container {
      display: flex;
      top: 0;
      right: 100%;
      width: min(90vw, 430px);
      z-index: 11;
      position: fixed;
      overflow-x: hidden;
      overflow-y: scroll;
      max-height: 100vh;
      -webkit-transition: left 0.4s ease;
      height: 100%;
      -ms-overflow-style: none; /* Internet Explorer 10+ */
      scrollbar-width: none; /* Firefox */
      box-sizing: border-box;
      padding: var(--gap-s);
      background: var(--color-white);
      flex-direction: column;
      gap: var(--padding-xs);
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
    }
    & .contact_link_container {
      display: flex;
      flex-direction: column;
    }
    & .main_menu {
      padding: 0;
      margin: calc(0px - var(--gap-s)) calc(0px - var(--gap-s)) 0
        calc(0px - var(--gap-s));
      list-style: none;
      display: block;
      & li {
        & a {
          display: block;
          color: var(--error);
          padding: 20px;
          font-size: 20px;
          font-weight: 400;
          text-decoration: none;
        }
      }
      & > li {
        position: relative;
        border-bottom: 1px solid var(--color-grey-light);
        &.menu-item-has-children {
          display: block;
          & > a {
            padding-right: 54px;
          }
          & ul {
            position: sticky;
            border-top: none;
            max-height: 0;
            transition: max-height 0.4s ease-in-out;
            overflow: hidden;
            & li {
              & a {
                background-color: var(--color-white);
                padding-left: calc(var(--gap-s) + (var(--gap-s) / 2));
                border-top: 1px solid var(--color-grey-light);
                border-bottom: none;
                font-weight: 400;
              }
            }
          }
          & > .expand_container {
            position: absolute;
            height: 54px;
            aspect-ratio: 1;
            right: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            & > .expand_btn {
              transition: transform 0.4s;
              display: block;
              width: 13px;
              height: 9px;
              background-color: currentColor;
              mask: center / contain no-repeat
                url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='9' fill='none' viewBox='0 0 13 9'%3E%3Cpath fill='currentColor' d='M6.5 6.054 1.688 1.1213a.3957.3957 0 0 0-.5702 0 .421.421 0 0 0 0 .5844L6.2152 6.931a.3957.3957 0 0 0 .5702 0l5.0968-5.2246A.417.417 0 0 0 12 1.4138a.416.416 0 0 0-.1178-.2919.396.396 0 0 0-.5702 0z'/%3E%3Cpath fill='%23cd2b30' fill-rule='evenodd' d='M6.2152 6.9309a.3957.3957 0 0 0 .5702 0l5.0968-5.2246A.418.418 0 0 0 12 1.4138a.416.416 0 0 0-.1178-.2919.396.396 0 0 0-.5702 0L6.5 6.054 1.688 1.1214a.3957.3957 0 0 0-.5702 0c-.1524.1568-.157.4072-.0137.5696q.0066.0075.0137.0148zM6.5 4.6219 2.4039.423C1.8544-.1402.9513-.1422.4007.4244c-.5343.5497-.5343 1.4285 0 1.9782l5.0987 5.2266a1.3957 1.3957 0 0 0 2.0018 0l5.0968-5.2245A1.417 1.417 0 0 0 13 1.4138a1.416 1.416 0 0 0-.402-.9902 1.3957 1.3957 0 0 0-2.0017 0z' clip-rule='evenodd'/%3E%3C/svg%3E");
            }
          }
        }
        &.active {
          & ul {
            max-height: 10000px;
            transition: max-height 0.4s ease-in-out;
          }
          & > .expand_container {
            & > span.expand_btn {
              transform: rotate(-180deg);
            }
          }
        }
        &.clicked {
          & > a:after {
            transform: rotate(-180deg);
          }
        }
        &.menu-item-services {
          & ul {
            & li {
              & a {
                .image {
                  display: none;
                }
              }
            }
          }
        }
      }
    }
  }
}