@charset "UTF-8";
/*------------------------------------
　Drawer Default（機能・構造）
------------------------------------ */
body.active {
  overflow: hidden;
}

.drawer-btn {
  position: fixed;
  top: calc(var(--header-height, 72px) / 2);
  /* right: var(--sp-2, 16px); */
  right: calc((2 / 390) * 100vw);
  transform: translateY(-50%);
  z-index: calc(var(--z-index-header, 100) + 1);
  cursor: pointer;
  transition: var(--transition);
}

.drawer-btn__main {
  position: relative;
  display: block;
  width: calc((22 / 390) * 100vw);
  height: calc((17 / 390) * 100vw);
}
.drawer-btn__main span {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc((2 / 390) * 100vw);
  border-radius: calc((2 / 390) * 100vw);
  transition: all 0.3s ease;
}
.drawer-btn__main--top {
  top: 0;
}
.drawer-btn__main--middle {
  top: 50%;
  transform: translateY(-50%);
}
.drawer-btn__main--bottom {
  bottom: 0;
}
.drawer-btn.active .drawer-btn__main--top {
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}
.drawer-btn.active .drawer-btn__main--middle {
  opacity: 0;
}
.drawer-btn.active .drawer-btn__main--bottom {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%) rotate(-45deg);
}

.drawer-btn.active {
  background-color: var(--clr-white);
}

.drawer-btn.active .drawer-btn__main span {
  background-color: #28427b;
}

.drawer-btn.active .drawer-btn__txt {
  color: #28427b;
}

.drawer-container {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  visibility: hidden;
  opacity: 0;
  z-index: var(--z-index-drawer, 90);
  transition: all 0.3s ease;
}
.drawer-container.active {
  visibility: visible;
  opacity: 1;
}