@charset "UTF-8";

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

  @media (width <= 767px) {
    /* ↓SP用背景画像を別で設定する場合に使用 */
    /* background: url("/assets/img/logo_bg_w.png"), url("/assets/img/recruit/benefits/benefits_title_bg_sp.jpg"); */
  }

  .cmn_ttl {
    img { /* ページタイトルsvg画像 */
      width: 380px;

      @media (768px <= width <= 1024px) {
        width: 270px;
      }
      @media (width <= 767px) {
        width: 240px;
      }
    }
  }
}

/*--------------------------------------------
  セクションタイトル
---------------------------------------------*/
.ttl_area {
  h2 {
    font-size: 3.4rem;
    font-weight: bold;
    line-height: 1.4;
    margin-bottom: 2.5%;

    @media (width <= 767px) {
      font-size: 2.4rem;
      margin-bottom: 5%;
    }
  }
}

/*--------------------------------------------
  社風
---------------------------------------------*/
.sec01 {
  /* padding: 6% 0 0; */

  .culture_list {
    background: linear-gradient(to bottom, #FFF 0, #FFF 4%, #ECF8FA 4%, #ECF8FA 100%);
    position: relative;
    padding: 11.5% 0 8.5%;

    &::after {
      content: "";
      background-color: #FFF;
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 11%;
      height: 100%;
      z-index: 1;
    }

    .wrap {
      justify-content: center;
      @media (width <= 767px) {
        flex-direction: column;
      }

      .img_area {
        width: 51%;
        @media (width <= 1024px) {
          text-align: center;
        }
        @media (width <= 767px) {
          width: 100%;
        }
        img {
          width: 100%;
        }
      }

      .txt_area {
        width: 44%;
        margin-left: 5%;

        @media (width <= 1024px) {
        }
        @media (width <= 767px) {
          margin-top: 8%;
          width: 100%;
          margin-left: 0;
        }

        .catch {
          font-size: 2.6rem;
          font-weight: bold;
          margin-bottom: 4%;
          text-indent: -2.7em;
          padding-left: 2.7em;

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

          .num {
            font-size: 3.6rem;
            color: #47B1CE;
            margin-right: 4.5%;
            padding: 2px 13px;
            line-height: 1.4;
            vertical-align: middle;

            @media (width <= 1024px) {
              position: relative;
              top: 5px;
            }
            @media (width <= 767px) {
              margin-right: 3%;
              padding: 2px 8px;
              font-size: 2.4rem;
              vertical-align: text-bottom;
            }
          }
        }
      }
      &:not(:last-child) {
        margin-bottom: 7%;
        @media (width <= 767px) {
          margin-bottom: 12%;
        }
      }

      &:nth-child(2) {
        @media (width <= 767px) {
          flex-direction: column-reverse;
        }
        
        .img_area {
          order: 2;
        }

        .txt_area {
          order: 1;
          margin: 0 5% 0 0;
          @media (width <= 767px) {
            margin: 5% 0 0;
          }
        }
        .catch {
          @media (width <= 767px) {
            margin-bottom: 5%;
          }
        }
        .num {
          @media (width <= 767px) {
            position: relative;
            top: 10px;
          }
        }
      }
    }
  }
}

/*--------------------------------------------
  福利厚生制度について
---------------------------------------------*/
.sec02 {
  padding: 7% 0 0;
  @media (width <= 767px) {
    padding: 15% 0 0;
  }

  .benefits_list {
    margin-top: 4%;
    @media (width <= 767px) {
      margin-top: 10%;
    }

    .flex {
      justify-content: space-between;
      @media (width <= 767px) {
        flex-direction: column;
      }
    }

    .flex:not(:last-child) {
      margin-bottom: 5%;
    }

    .wrap {
      width: calc(100% / 2 - 2.5%);

      @media (width <= 1024px) {
      }
      @media (width <= 767px) {
        width: 100%;
        margin-bottom: 10%;
      }

      .item_ttl {
        font-size: 2.6rem;
        font-weight: bold;
        color: #0F5CA8;
        padding-bottom: 4.5%;
        margin-bottom: 4%;
        border-bottom: solid 3px #0F5CA8;

        @media (width <= 767px) {
          font-size: 2rem;
        }
      }
      .cmn_txt {
        text-indent: -1em;
        padding-left: 1em;
      }
    }
  }
}