@charset "UTF-8";

/* =====================
  01
===================== */
.tab-wanted {
  .article[data-id='1'] {
    padding-block-end: 160px;

    @media (width <=768px) {
      padding-block-end: var(--nudge-9);
    }

    /* ==== u-inner ==== */
    .u-inner {
      display: block grid;
      gap: 40px;

      @media (width > 768px) {
        padding-inline: 80px;
      }

      @media (width <=768px) {
        gap: var(--nudge-3);
      }
    }

    /* ==== body ==== */
    .body {
      line-height: 1.9;

      @media (width <=768px) {
        font-size: calc((100 / 390) * 15 * 1vw);
      }
    }

    /* ==== figure ==== */
    .figure {
      position: relative;
      display: grid;
      grid-template-rows: 422px auto;
      grid-template-columns: repeat(2, 1fr);
      align-items: flex-start;
      padding-inline: 40px;
      margin-block-start: 57px;

      @media (width <=768px) {
        grid-template-rows: 95vw auto;
        padding-inline: 0;
        margin-block-start: var(--nudge-4);
      }

      &::before {
        position: absolute;
        inset-block-start: 5px;
        inset-inline: 0;
        inline-size: 700px;
        aspect-ratio: 700 / 569;
        margin-inline: auto;
        pointer-events: none;
        content: '';
        background-image: url('../img/company/wanted/01.webp');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;

        @media (width <=768px) {
          inset-block-start: 38vw;
          inline-size: calc((100 / 390) * 293 * 1vw);
        }
      }

      @media (width <=768px) {
        margin-block-start: var(--nudge-3);
      }

      .unit {
        position: relative;
        z-index: 2;
        display: block grid;
        gap: 9px;
        inline-size: fit-content;

        h4 {
          font-size: 24px;
          font-weight: 600;

          @media (width <=768px) {
            font-size: calc((100 / 390) * 18 * 1vw);
          }
        }

        li {
          font-size: 16px;
          line-height: 1.9;

          @media (width <=768px) {
            padding-inline: 3.8vw calc((100 / 390) * 0 * 1vw);
            font-size: calc((100 / 390) * 13 * 1vw);
          }
        }
      }

      .unit[data-id='3'] {
        ul {
          @media (width > 768px) {
            max-inline-size: 300px;
          }
        }
      }

      .unit[data-id='2'],
      .unit[data-id='4'] {
        justify-self: end;
        padding-inline-end: 10px;

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

          h4 {
            text-align: right;
          }
        }
      }
    }
  }
}