@charset "UTF-8";

.main {
  .u-mv {
    &::before {
      background-image: url('../../img/recruit/message/mv.png');
    }
  }

  /* =====================
    greeting
  ===================== */
  .greeting {
    position: relative;
    padding-block: 160px 108px;
    background: linear-gradient(180deg, #001636 15.73%, #002f4e 57.86%, #0c7db5 100%);

    @media only screen and (width <=768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 100%;
      block-size: 790px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/message/greeting_bg.png');
      background-repeat: no-repeat;
      background-position: top center;
      background-size: cover;
    }

    @media only screen and (width <=768px) {
      &::before {
        block-size: calc((100 / 390) * 790 * 1vw);
      }
    }

    .u-inner {
      position: relative;
      padding-inline: 40px;
      color: #fff;

      @media only screen and (width <=768px) {
        padding-inline: calc((100 / 390) * 24 * 1vw);
      }

      & h2.catch {
        font-size: 40px;
        font-weight: 500;
        line-height: 1.6;

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

      .wrap {
        display: block flex;
        gap: 81px;
        margin-block-start: 72px;

        @media only screen and (width <=768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 28 * 1vw);
          margin-block-start: calc((100 / 390) * 48 * 1vw);
        }

        & h3.catch {
          flex-shrink: 0;
          font-size: 32px;
          font-weight: 500;
          line-height: 1.6;

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

        .unit {
          .name-set {
            display: block flex;
            gap: 16px;
            align-items: center;
            justify-content: flex-end;
            margin-block-start: 24px;

            @media only screen and (width <=768px) {
              gap: calc((100 / 390) * 16 * 1vw);
              margin-block-start: calc((100 / 390) * 24 * 1vw);
            }

            & dd {
              font-size: 24px;
              font-weight: 500;
              line-height: 1.6;

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

  /* =====================
    personality
  ===================== */
  .personality {
    position: relative;
    padding-block: 120px 121px;

    @media only screen and (width <=768px) {
      padding-block: calc((100 / 390) * 80 * 1vw);
    }

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      inline-size: 100%;
      min-block-size: 1297px;
      pointer-events: none;
      content: '';
      background-image: url('../../img/recruit/message/personality_bg.png');
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    @media only screen and (width <=768px) {
      &::before {
        min-block-size: calc((100 / 390) * 1297 * 1vw);
      }
    }

    .u-inner {
      padding-inline: 40px;

      @media only screen and (width <=768px) {
        padding-inline: calc((100 / 390) * 24 * 1vw);
      }

      &>p {
        margin-block-start: 56px;

        @media only screen and (width <=768px) {
          margin-block-start: calc((100 / 390) * 36 * 1vw);
        }
      }

      .img {
        display: block flow;
        margin-block-start: 81px;
        margin-inline: auto;

        @media only screen and (width <=768px) {
          inline-size: 100%;
          margin-block-start: calc((100 / 390) * 64 * 1vw);
        }
      }

      .wrap {
        display: block flex;
        gap: 81px;
        margin-block-start: 80px;

        @media only screen and (width <=768px) {
          flex-direction: column;
          gap: calc((100 / 390) * 24 * 1vw);
          margin-block-start: calc((100 / 390) * 64 * 1vw);
        }

        & h3.catch {
          flex-shrink: 0;
          font-size: 32px;
          font-weight: 500;
          line-height: 1.6;

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

        .unit {
          .name-set {
            display: block flex;
            gap: 16px;
            align-items: center;
            justify-content: flex-end;
            margin-block-start: 24px;

            & dd {
              font-size: 24px;
              font-weight: 500;
              line-height: 1.6;
            }
          }
        }
      }
    }
  }
}