@charset "utf-8";

.drawer {
  background: #5a5c64;
  height: 100vh;
  height: 100svh;
  overflow-y: scroll;
  position: fixed;
  right: 0;
  top: 0;
  transition: translate 0.5s ease;
  translate: 101%;
  width: 280px;
  z-index: 21;
}

.drawer.js-show {
  translate: 0;
}

.drawer__icon {
  display: none;
}

@media screen and (width <= 899px) {
  .drawer__icon {
    user-select: none;
       user-select: none;
    aspect-ratio: 24/17;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    height: auto;
    justify-content: space-between;
    position: fixed;
    right: 20px;
    top: 40px;
            user-select: none;
    width: 24px;
    z-index: 22;
  }
}

.drawer__icon-bar {
  background: #fff;
  height: 2px;
  transition: all 0.3s ease;
  width: 24px;
}

.drawer__icon.js-show .drawer__icon-bar:nth-of-type(1) {
  rotate: 45deg;
  translate: 0 7.5px;
}

.drawer__icon.js-show .drawer__icon-bar:nth-of-type(2) {
  display: none;
}

.drawer__icon.js-show .drawer__icon-bar:nth-of-type(3) {
  rotate: -45deg;
  translate: 0 -7.5px;
}

.drawer__body {
  height: fit-content;
  height: fit-content;
  padding-block: 88px 40px;
  padding-inline-start: 34px;
  width: 100%;
}

.drawer__list {
  display: flex;
  flex-direction: column;
  margin-block-end: 40px;
  margin-inline: auto;
  row-gap: 32px;
  width: fit-content;
  width: fit-content;
}

.drawer__list li a {
  color: #fff;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
}

.drawer__btn {
  background: #fff;
  border-radius: 100vmax;
  color: #001a75;
  display: inline-block;
  font-size: 20px;
  font-weight: 400;
  line-height: normal;
  padding: 6px 30px;
}

.drawer__list-item a {
  display: flex;
  flex-direction: column;
  text-align: center;
}

.drawer__list-item p:nth-of-type(2) {
  font-size: 0.875rem;
}