@charset "UTF-8";

/* =====================
  introduction
===================== */
.introduction {
  padding-block: 100px 47px;

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

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 564px auto;
    gap: 89px 136px;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 12.2vw;
    }
  }

  /* ==== hgroup ==== */
  hgroup {
    display: block grid;
    grid-row: 1 / 1;
    grid-column: 1 / 3;
    gap: 37px;
    inline-size: fit-content;
    margin-inline: auto;
    text-align: center;

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

    [lang='en'] {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 56px;
      line-height: 1;

      @media (width <= 768px) {
        display: block grid;
        font-size: calc((100 / 390) * 40 * 1vw);
        line-height: 1.5;
      }
    }

    h2 {
      margin-block: calc((1em - 1lh) / 2);
      font-size: 21px;
      font-weight: 600;

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

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    align-self: flex-start;
    padding-block-start: 39px;
    font-weight: 500;
    line-height: 2.2;

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

  /* ==== img ==== */
  .img {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    align-self: flex-start;
    margin-block-start: -243px;
    margin-inline: auto 0;

    @media (width <= 768px) {
      inline-size: calc((100 / 390) * 219 * 1vw);
      block-size: calc((100 / 390) * 177 * 1vw);
      margin-block-start: -2vw;
    }
  }
}

/* =====================
  メッセージ
===================== */
.message {
  padding-block: 80px 127px;
  color: white;

  @media (width <= 768px) {
    padding-block: 10vw 22.5vw;
    padding-inline: calc((100 / 390) * 16 * 1vw);
  }

  /* ==== u-inner ==== */
  .u-inner {
    display: block grid;
    grid-template-columns: 520px auto;
    gap: 68px 80px;
    padding-block: 91px 79px;
    padding-inline: 80px;
    background-color: var(--color-text-primary);
    background-image: url('../../img/recruit/about/bg.webp');
    background-size: cover;

    @media (width <= 768px) {
      display: block flex;
      flex-direction: column;
      gap: 11.5vw;
      padding-block: 16.5vw 14.3vw;
      padding-inline: calc((100 / 390) * 24 * 1vw);
      background-image: url('../../img/recruit/about/bg_sp.webp');
    }
  }

  /* ==== u-hgroup ==== */
  .u-hgroup {
    grid-row: 1 / 2;
    grid-column: 1 / 3;
    inline-size: fit-content;
    margin-inline: auto;
  }

  /* ==== picture ==== */
  .picture {
    grid-row: 2 / 2;
    grid-column: 1 / 3;

    @media (width <= 768px) {
      width: calc((100 / 390) * 310 * 1vw);
      height: calc((100 / 390) * 220 * 1vw);
    }
  }

  /* ==== body ==== */
  .body {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    font-weight: 500;

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