@charset "UTF-8";

/*--------------------------------------------
  ページタイトル
---------------------------------------------*/
.page_title {
  background-image: url("/assets/img/logo_bg_w.png"), url("/assets/img/recruit/message/message_title_bg.jpg");

  @media (width <= 767px) {
    /* ↓SP用背景画像を別で設定する場合に使用 */
    /* background: url("/assets/img/logo_bg_w.png"), url("/assets/img/recruit/message/message_title_bg_sp.jpg"); */
  }
  
  .cmn_ttl {
    img { /* ページタイトルsvg画像 */
      width: 185px;

      @media (768px <= width <= 1024px) {
        width: 150px;
      }
      @media (width <= 767px) {
        width: 120px;
      }
    }
  }
}

/*--------------------------------------------
  intro
---------------------------------------------*/
.intro {
  .flex_b {
    justify-content: flex-start;
    align-items: flex-start;

    .txt_area {
      max-width: 800px;
      width: 55%;
      margin-right: 10%;

      @media (width <= 1024px) {
        width: 100%;
      }

      .cmn_txt {
        padding-bottom: 5%;
      }
    }

    img {
      max-width: 600px;
      width: 30%;
      margin-top: -5%;

      @media (width <= 1024px) {
        width: 50vw;
        display: block;
        margin: 5% auto 0;
      }
      @media (width <= 767px) {
        width: 60vw;
        max-width: 500px;
      }

    }
  }
}

/*--------------------------------------------
  採用メッセージ
---------------------------------------------*/
.message {
  background: url("/assets/img/recruit/message/message_bg01.jpg") no-repeat bottom right;
  background-size: 90%;

  @media (width <= 1024px) {
    background-size: cover;
  }
  @media (width <= 767px) {
    margin-top: 18%;
  }

  .inner {
    padding: 7% 0;
    @media (width <= 767px) {
      padding: 12% 0 18%;
    }
  }

  .flex {
    @media (width <= 767px) {
      flex-direction: column-reverse;
    }
  }

  .img_area {
    min-width: 562px;

    @media (width <= 1024px) {
      min-width: auto;
      width: 40%;
      text-align: center;
    }
    @media (width <= 767px) {
      margin-top: 12%;
      width: 100%;
    }

    img {
      max-width: 562px;
      width: 100%;
    }

    p {
      margin-top: 2%;
      font-size: 2rem;
      font-weight: 500;
      text-align: center;

      @media (width <= 1024px) {
        margin-top: 4%;
        font-size: 1.6rem;
      }
    }
  }

  .txt_area {
    padding: 2% 4% 0;
    @media (width <= 1024px) {
      width: 60%;
    }
    @media (width <= 767px) {
      padding: 0;
      width: 100%;
    }

    .catch {
      font-size: 3.4rem;
      line-height: 1.6;
      margin-bottom: 6%;

      @media (width <= 1024px) {
        font-size: 2.4rem;
      }

    }
  }
}