@charset "UTF-8";

/* =====================
  staffs
===================== */
.staffs {
  padding-block: 143px 117px;

  @media (width <= 768px) {
    padding-block: 24.5vw 22.5vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    padding-inline: 67px;

    @media (width <= 768px) {
      padding-inline: 0;
    }

    .list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 122px 103px;

      @media (width <= 768px) {
        display: block flex;
        flex-direction: column;
        gap: 18.9vw;
        align-items: center;
        justify-content: center;
      }
    }
  }
}

/* =====================
  detail
===================== */
.detail {
  padding-block: 142px 128px;

  @media (width <= 768px) {
    padding-block: 24vw 22.6vw;
  }

  /* ==== u-inner ==== */
  .u-inner {
    position: relative;
    display: block flex;
    gap: 177px;
    justify-content: space-between;
    padding-inline: 80px;

    @media (width <= 768px) {
      display: block grid;
      gap: 13vw;
      padding-inline: 0;
    }
  }

  /* ==== information ==== */
  .information {
    position: sticky;
    inset-block-start: 112px;
    inset-inline-start: 0;
    display: block grid;
    flex-shrink: 0;
    grid-template-rows: repeat(auto-fit, minmax(0, min-content));
    gap: 57px;
    block-size: fit-content;

    @media (width <= 768px) {
      .u-interview {
        order: 1;
        padding-inline: calc((100 / 390) * 48 * 1vw);
      }

      position: unset;
      inset: unset;
      display: contents;
      gap: 10.7vw;

      .u-anchor {
        order: 3;
        margin-inline: auto;
      }
    }
  }

  /* ==== qa ==== */
  .qa {
    display: block grid;
    gap: 40px;
    padding-block-start: 24px;

    @media (width <= 768px) {
      gap: 10.4vw;
      order: 2;
      padding-block: 0;
      padding-inline: calc((100 / 390) * 16 * 1vw);
    }

    /* ==== wrap ==== */
    > div {
      display: block grid;
      gap: 23px;

      @media (width <= 768px) {
        gap: 6vw;
      }

      dt {
        inline-size: fit-content;
        padding-block: 12px;
        padding-inline: 24px;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.8;
        color: white;
        background: var(--pink);
        border-radius: 16px 16px 16px 0;

        @media (width <= 768px) {
          padding-block: 2.1vw;
          padding-inline: 6.1vw 4.3vw;
          font-size: calc((100 / 390) * 16 * 1vw);
          border-radius: calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw) 0;
        }
      }

      dd {
        padding-block: 12px;
        padding-inline: 24px;
        background: white;
        border-radius: 16px 16px 0;

        @media (width <= 768px) {
          padding-block: 2.6vw 1.6vw;
          padding-inline: 6.1vw;
          font-size: calc((100 / 390) * 15 * 1vw);
          background: white;
          border-radius: calc((100 / 390) * 8 * 1vw) calc((100 / 390) * 8 * 1vw) 0 0;
        }
      }
    }
  }
}