@charset "UTF-8";

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

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

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

      @media (768px <= width <= 1024px) {
        width: 250px;
      }
      @media (width <= 767px) {
        width: 220px;
      }
    }
  }
}

/*--------------------------------------------
  ボタン（ページ内リンク）
---------------------------------------------*/
.btn_area {
  margin: 10% 0 6%;

  @media (width <= 1024px) {
    margin: 20% 0 10%;
  }
  @media (width <= 767px) {
    margin: 0 0 12%;
  }

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

  .btn {
    width: calc(100% / 3 - 2%);

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

    &::after {
      top: 45%;
      transform: translateY(-25%) rotate(135deg);
    }

    @media (width <= 767px) {
      &:not(:last-child) {
        margin-bottom: 20px;
      }
    }
  }
}

/*--------------------------------------------
  募集要項内容 共通
---------------------------------------------*/
.info_area {
  padding: 3% 0 9%;
  background-color: #F2F2F2;

  @media (width <= 1024px) {
    padding: 10% 0;
  }

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

    li:not(:last-child) {
      margin-bottom: 6%;
    }

    .ttl {
      font-size: 3.4rem;
      font-weight: bold;
      line-height: 1.4;
      margin-bottom: 4%;
      padding-top: 120px;
      margin-top: -120px;
      scroll-behavior: smooth;

      @media (width <= 1024px) {
        padding-top: 80px;
        margin-top: -80px;
        font-size: 2.8rem;
      }
      @media (width <= 767px) {
        padding-top: 60px;
        margin-top: -60px;
        margin-bottom: 30px;
      }
    }

    .list_wrap {
      padding: 5% 7% 5.5%;
      background-color: #FFF;

      @media (width <= 1024px) {
        padding: 5% 5% 5.5%;
      }
      @media (width <= 767px) {
        padding: 6% 7% 10%;
        margin-bottom: 20%;
      }

      .items {
        border-bottom: solid 3px #0F5CA8;
        padding-bottom: 3%;

        @media (width <= 767px) {
          padding-bottom: 6%;
          flex-direction: column;
        }

        &.aic {
          align-items: center;
        }

        &:not(:last-child) {
          margin-bottom: 3%;

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

        .item_ttl {
          font-size: 2rem;
          font-weight: bold;
          color: #0F5CA8;
          width: 23%;

          @media (width <= 1024px) {
            width: 25%;
          }
          @media (width <= 767px) {
            width: 100%;
            padding-top: 2%;
            margin-bottom: 5%;
          }
        }
        .item_txt {
          width: 77%;

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

          dt {
            line-height: 2;

            @media (width <= 1024px) {
              line-height: 1.8;
            }
          }

          .border_list {
            .txt {
              position: relative;
              padding-left: 40px;

              @media (width <= 1024px) {
              }

              &::before {
                position: absolute;
                background-color: #0F5CA8;
                width: 20px;
                height: 1px;
                content: "";
                display: block;
                top: 50%;
                left: 0;
                transform: translateY(-50%);

                @media (width <= 1024px) {
                  width: 15px;
                }
              }
            }
          }
        }
        .mb1 { margin-bottom: 1%; }
        .mb2 { margin-bottom: 2%; }
        .ml3 { margin-left: 3%; }
        .ml4 { margin-left: 4%; }
      }   
    }
  }
}