@charset "UTF-8";
/*------------------------------------
　Drawer Style（デザイン）
------------------------------------ */
.drawer {
}

.drawer-btn {
  background-color: #28427b;
  width: calc((68 / 390) * 100vw);
  height: calc((48 / 390) * 100vw);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column nowrap;
  gap: var(--sp-05);
  border-radius: var(--sp-05);
}

.drawer-btn__main {
}

.drawer-btn__main span {
  background-color: var(--clr-white);
}

.drawer-btn__txt {
  font-size: calc((8 / 390) * 100vw);
  font-weight: var(--fw-regular);
  color: var(--clr-white);
  text-align: center;
  white-space: nowrap;
  position: relative;
  line-height: 1;
  transform: translateY(calc((2 / 390) * 100vw));
}

.drawer-container {
  padding: calc((89 / 390) * 100vw) var(--sp-2);
  background-color: var(--clr-white);
}

/* .drawer__logo {
  display: block;
  width: 140px;
  margin-bottom: var(--sp-6, 48px);
}
.drawer__logo img {
  width: 100%;
} */

.drawer-nav {
  margin-bottom: var(--sp-10);
}

.drawer-nav__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1, 8px);
}

.drawer-nav__link {
  display: block;
  padding: var(--sp-2, 16px) 0;
  border-bottom: 1px solid var(--clr-border2, #d8d8d8);
  font-size: calc((22 / 390) * 100vw);
  font-weight: var(--fw-bold, 700);
  color: var(--clr-text2, #222);
}

.drawer__text1 {
  font-size: var(--fz-h4);
  font-weight: var(--fw-bold);
  text-align: center;
  line-height: 1.3;
  color: var(--clr-main3);
  margin-bottom: var(--sp-1);
}

.drawer__text2 {
  font-size: var(--fz-small);
  font-weight: var(--fw-regular);
  color: var(--clr-text);
  text-align: center;
}

.drawer__button {
  width: 100%;
  background: linear-gradient(var(--clr-gradient));
  border-radius: var(--sp-2);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row nowrap;
  gap: var(--sp-2);
  padding: calc((20 / 390) * 100vw);
  margin-bottom: var(--sp-1);

  &::before,
  &::after {
    display: block;
    content: "";
    position: relative;
    background: no-repeat center / contain;
  }

  &::before {
    width: var(--sp-5);
    height: var(--sp-5);
    background-image: url("../img/sp/drawer_deco1.webp");
  }

  &::after {
    width: var(--sp-3);
    height: var(--sp-3);
    background-image: url("../img/sp/drawer_deco2.webp");
  }
}

.drawer__button-box {
  flex-grow: 1;

  p {
    color: var(--clr-white);
    font-weight: var(--fw-bold);

    &:nth-child(1) {
      font-size: var(--fz-large);
      margin-bottom: var(--sp-05);
    }

    &:nth-child(2) {
      font-size: var(--fz-tiny);
    }
  }
}