.region-menu {
  display: flex;
  column-gap: var(--sp);
  justify-content: right;
  flex-direction: column;
  width: 100%;
  height: 100%;
  max-height: 0;
  transition: all .2s ease-out;
  position: fixed;
  /* background-color: var(--color-primary); */
  background-image: linear-gradient(to right bottom, rgba(247, 244, 255, 1), rgba(198, 185, 231, 1));

  overflow: hidden;
  /* padding-top: var(--header-height-mobile); */
  padding-top: 0;
  top: 0;
  left: 0;
}

.region-menu .navigation {
  transition: opacity .2s ease-out;
  opacity: 0;
}

@media (min-width: 768px) {
  .region-menu{
    flex-direction: row;
    max-height: none;
    height: auto;
    width: auto;
    background: none;
    align-items: center;
    position: relative;
    top: auto;
    padding-top: 0;
  }
}