@media (max-width: 1367px) {
  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 {
    & .menu_cta {
      display: none;
    }
    & #mobile_logo {
      display: block;
      margin: 0 auto;
    }
    & #mobile_menu_button {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 40px;
      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;
      transition: left 0.4s ease;
      height: 100%;
      -ms-overflow-style: none; /* Internet Explorer 10+ */
      scrollbar-width: none; /* Firefox */
      background: var(--color-white);
      flex-direction: column;
      gap: var(--padding-xs);
      &::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
      }
      & ul.main_menu {
        & li {
          & a {
            color: var(--color-black);
          }
          &.current-menu-item,
          &.current-page-ancestor {
            & > a {
              color: var(--color-green);
            }
          }
          &:is(:hover, :focus) {
            > a {
              color: var(--color-green);
            }
          }
        }
      }
    }
    & .main_menu {
      padding: 0;
      margin: 0;
      list-style: none;
      display: block;
      width: 100%;
      & li {
        & a {
          display: block;
          padding: 20px var(--gap-s);
          font-weight: 400;
        }
      }
      & > li {
        position: relative;
        border-bottom: 1px solid var(--color-grey);
        &.menu-item-has-children {
          display: block;
          & ul {
            background-color: var(--color-green-lightest);
            position: sticky;
            border-top: none;
            max-height: 0;
            transition: max-height 0.5s ease-in-out;
            overflow: hidden;
            & li {
              & a {
                border-top: 1px solid var(--color-grey);
                border-bottom: none;
              }
            }
          }
          & > .expand_container {
            position: absolute;
            width: 64px;
            height: 67px;
            right: 0;
            top: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            & > .expand_btn {
              transition: transform 0.4s;
              display: block;
              width: 16px;
              height: 10px;
              background: center / cover no-repeat
                url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' fill='none'%3e%3cpath stroke='%2356AE31' stroke-linecap='square' stroke-width='2' d='m14.2 2.2-6 6-6-6'/%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);
          }
        }
      }
    }
  }
}