@charset "UTF-8";

.recruit_sub {
  overflow: hidden;

  /*--------------------------------------------
    ページタイトル
  ---------------------------------------------*/
  .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;
                  }
                }
                &.border_none {
                  &::before {
                    display: none;
                  }
                }
              }
            }
          }
          .mb1 { margin-bottom: 1%; }
          .mb2 { margin-bottom: 2%; }
          .ml3 { margin-left: 3%; }
          .ml4 { margin-left: 4%; }
        }   
      }
    }
  }
}