@charset "UTF-8";

/* =====================
  what
===================== */
section[data-type='what'] {
  padding-block: 121px 132px;

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 37 * 1vw) 17vw;
    padding-inline: calc((100 / 750) * 40 * 1vw);

    hgroup {
      margin-block-end: calc((100 / 750) * 36 * 1vw);
    }
  }

  & p {
    margin-block-start: 43px;

    @media not all and (width >=768px) {
      margin-block-start: 0.9vw;
      font-size: calc((100 / 750) * 26 * 1vw);
      line-height: 1.76;
    }
  }

  & img {
    display: block;
    margin-block-start: 78px;
    margin-inline: auto;

    @media not all and (width >=768px) {
      margin-block-start: calc((100 / 750) * 78 * 1vw);
    }
  }
}

/* =====================
  contents
===================== */
section[data-type='contents'] {
  padding-block: 121px 185px;
  background-image: url('../img/recruit/interview/bg.webp');

  @media not all and (width >=768px) {
    padding-block: calc((100 / 750) * 118 * 1vw) 28.2vw;
    padding-inline: calc((100 / 750) * 40 * 1vw);
    background-image: url('../img/recruit/interview/bg_sp.webp');
  }

  .wrap[data-id='1'] {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    justify-content: space-between;
    margin-block-start: 52px;

    @media not all and (width >=768px) {
      grid-auto-flow: row;
      justify-content: center;
      margin-block-start: calc((100 / 750) * 52 * 1vw);
    }

    .text {
      display: grid;
      gap: 20px;
      max-inline-size: 580px;

      @media not all and (width >=768px) {
        gap: 0;
        max-inline-size: 100%;
      }

      & h2 {
        margin-block-end: 12px;
        font-size: 30px;
        font-weight: bold;

        @media not all and (width >=768px) {
          margin-block: calc((100 / 750) * 38 * 1vw) 3.9vw;
          font-size: calc((100 / 750) * 40 * 1vw);
        }
      }

      @media not all and (width >=768px) {
        & p {
          font-size: calc((100 / 750) * 26 * 1vw);
          line-height: 1.76;
        }
      }
    }

    & img {
      max-inline-size: 485px;

      @media not all and (width >=768px) {
        display: block;
        grid-row: -1 / -1;
        max-inline-size: calc((100 / 750) * 590 * 1vw);
        margin-inline: auto;
      }
    }
  }

  .wrap[data-id='2'] {
    display: grid;
    gap: 75px;
    margin-block-start: 75px;

    @media not all and (width >=768px) {
      gap: 9.5vw;
      margin-block-start: calc((100 / 750) * 55 * 1vw);
    }

    & h3 {
      position: relative;
      display: grid;
      grid-auto-flow: column;
      align-items: baseline;
      justify-content: flex-start;
      padding-inline-start: 3px;
      font-family: var(--yumin);
      font-weight: bold;

      @media not all and (width >=768px) {
        padding-inline-start: 0;
      }

      &::before {
        display: block;
        inline-size: 17px;
        aspect-ratio: 1 / 1;
        margin-inline-end: 7px;
        content: '';
        background: var(--blue);
        border-radius: 2px;
      }

      @media not all and (width >=768px) {
        &::before {
          inline-size: calc((100 / 750) * 26 * 1vw);
          margin-inline-end: calc((100 / 750) * 12 * 1vw);
        }
      }

      span:first-child {
        margin-inline-end: 7px;
        font-size: 22px;
        letter-spacing: 0.1px;

        @media not all and (width >=768px) {
          margin-inline-end: calc((100 / 750) * 12 * 1vw);
          font-size: calc((100 / 750) * 33 * 1vw);
        }
      }

      span:last-child {
        font-size: 30px;

        @media not all and (width >=768px) {
          font-size: calc((100 / 750) * 45 * 1vw);
        }
      }

      &::after {
        position: absolute;
        top: 47%;
        left: 0;
        display: block;
        inline-size: 100%;
        block-size: 1px;
        content: '';
        background: var(--blue);
        clip-path: inset(0 0 0 150px);
        translate: 0 -50%;
      }

      @media not all and (width >=768px) {
        &::after {
          top: 42%;
          clip-path: inset(0 0 0 31%);
        }
      }
    }

    & ul {
      display: grid;
      gap: 20px;
      align-items: flex-start;
      margin-block-start: 3px;

      @media not all and (width >=768px) {
        gap: 4.4vw 0;
        margin-block-start: 4.4vw;
      }

      & li {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: span 3;
        align-items: center;
        min-block-size: 180px;
        padding-inline-end: 30px;
        overflow: hidden;
        background: white;
        border: 1px solid var(--blue);
        border-radius: 8px;

        @media not all and (width >=768px) {
          grid-column: row;
          min-block-size: 100%;
          padding-block-end: 7.8vw;
          padding-inline-end: 0;
          border-radius: calc((100 / 750) * 6 * 1vw);
        }

        .text {
          display: grid;
          gap: 2px;
          justify-content: flex-start;
          padding-block: 1em;
          padding-inline: 20px 12px;

          @media not all and (width >=768px) {
            gap: 2px;
            gap: 3.8vw;
            padding-block: 5.5vw;
            padding-inline: 20px calc((100 / 750) * 40 * 1vw);
          }

          & h4 {
            font-size: 20px;
            font-weight: 700;

            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 40 * 1vw);
            }
          }

          & p {
            @media not all and (width >=768px) {
              font-size: calc((100 / 750) * 26 * 1vw);
              line-height: 1.76;
            }
          }
        }

        & img:first-child {
          display: block;
          max-inline-size: 400px;
          block-size: 100%;
          object-fit: cover;

          @media not all and (width >=768px) {
            max-inline-size: 100%;
            block-size: calc((100 / 750) * 290 * 1vw);
          }
        }

        & img:last-child {
          display: block;
          max-inline-size: 120px;

          @media not all and (width >=768px) {
            margin-inline: auto;
          }
        }
      }
    }
  }
}