@charset "utf-8";


/* --------背景色-------- */

.single_works_background {
  width: 100%;
  height: fit-content;
  background-color: #D9EAF2;
  padding-top: 10.6rem;
}


/* --------worksセクション-------- */

.works_article_section {
  width: 100%;
  height: fit-content;
  padding: 9.4rem 10rem 20.05rem;
  background-color: #EAECEF;
  border-radius: 0 5rem 0 0;
  border: .1rem solid #000000;
  font-family: var(--NotoSans);
}

/* ----カテゴリー---- */
.works_blackbox {
  width: 18.3rem;
  height: 2.1rem;
  background-color: #000000;
  margin: 0 auto;
  border-radius: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 1.3rem;
  font-weight: 400;
  position: relative;
}

.blackbox_with_line::before {
  content: "";
  width: 44.85rem;
  height: .2rem;
  background-color: #000000;
  position: absolute;
  left: -44.85rem;
}

.blackbox_with_line::after {
  content: "";
  width: 44.85rem;
  height: .2rem;
  background-color: #000000;
  position: absolute;
  right: -44.85rem;
}


/* ----本文(案件内容)---- */
.works_article_wrapper {
  width: 91.4rem;
  margin: 6.9rem auto 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  right: .2rem;
}

.article_wrapper {
  width: 48rem;
  height: fit-content;
}

.client_name {
  font-size: 1.3rem;
  line-height: 1.9rem;
  font-weight: 500;
  letter-spacing: .02rem;
}

.case_title {
  font-size: 2rem;
  line-height: 2.9rem;
  font-weight: 500;
  letter-spacing: .03rem;
}

.case_detail {
  margin-top: 2.3rem;
  font-size: 1.7rem;
  line-height: 2em;
  font-weight: 400;
  letter-spacing: .026rem;
}

/* ----案件概要---- */
.article_acf_wrapper {
  width: 35rem;
  letter-spacing: .026rem;
}

.acf_works_list {
  font-size: 1.7rem;
  font-weight: 500;
}

.acf_works_list dt {
  margin-top: 1.8rem;
}

.acf_works_list dt:first-of-type {
  margin-top: 0;
}

.acf_works_list dd {
  margin: .5rem 0 0;
  position: relative;
  font-weight: 400;
  line-height: 2.5rem;
}

.acf_works_list dd::after {
  content: "";
  width: 35rem;
  height: .1rem;
  background-color: #707070;
  position: absolute;
  left: 0;
  bottom: -1rem;
}

/* ----PCデザイン==== */
.blackbox_pc_design {
  margin-top: 13rem;
}

.case_image_pc {
  width: 76rem;
  height: 47.1rem;
  border: .2rem solid #000000;
  border-radius: 1rem;
  margin: 2rem auto 0;
  overflow: hidden;
}

/* ----SPデザイン---- */
.blackbox_sp_design {
  margin-top: 15rem;
}

.case_sp_wrapper {
  width: 56.6rem;
  height: fit-content;
  margin: 2rem auto 0;
  display: flex;
  justify-content: space-between;
}

.case_image_sp {
  width: 25.2rem;
  height: 50.1rem;
  border-radius: 3rem;
  overflow: hidden;
  position: relative;
  display: flex;
  justify-content: center;
  /* background-color: #000000; */
}

.case_image_sp::before {
  content: "";
  width: 24rem;
  height: 50.1rem;
  background-color: #000000;
  border-radius: 3rem;
  overflow: hidden;
  position: absolute;
  left: .5rem;
  top: 0;
}

.case_image_sp::after {
  content: "";
  width: 25.2rem;
  height: 50.1rem;
  background-image: url(../img/phone.png);
  background-size: cover;
  border-radius: 3rem;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
}

.case_sp_image {
  width: 23rem;
  height: 48rem;
  object-fit: contain;
  position: relative;
  top: 1rem;
  border-radius: 2.7rem;
}

/* ----一覧へ戻るボタン---- */
.back_to_archive_button {
  margin-top: 15rem;
  width: 16.4rem;
  height: 2.6rem;
  font-size: 1.5rem;
}

.back_to_archive_button::before {
  content: "";
  width: 45.8rem;
  height: .2rem;
  background-color: #000000;
  position: absolute;
  left: -45.8rem;
}

.back_to_archive_button::after {
  content: "";
  width: 45.8rem;
  height: .2rem;
  background-color: #000000;
  position: absolute;
  right: -45.8rem;
}

.back_to_archive {
  width: 100%;
  height: 100%;
  border-radius: 1.1rem;
  display: flex;
  justify-content: center;
  align-items: center;
}


@media screen and (max-width: 699.98px) {


  /* --------背景色-------- */

  .single_works_background {
    padding-top: 8rem;
  }


  /* --------worksセクション-------- */

  .works_article_section {
    padding: 5.9rem 2rem 15rem;
    border: .1rem solid #000000;
    font-family: var(--NotoSans);
  }

  /* ----カテゴリー---- */
  .blackbox_with_line::before {
    content: "";
    width: 6.6rem;
    height: .2rem;
    background-color: #000000;
    position: absolute;
    left: -6.6rem;
  }

  .blackbox_with_line::after {
    content: "";
    width: 6.6rem;
    height: .2rem;
    background-color: #000000;
    position: absolute;
    right: -6.6rem;
  }


  /* ----本文(案件内容)---- */
  .works_article_wrapper {
    width: 31.5rem;
    margin: .5rem auto 0;
    flex-direction: column;
    justify-content: start;
  }

  .article_wrapper {
    width: 100%;
  }

  .client_name {
    line-height: 1.9rem;
    letter-spacing: .02rem;
  }

  .case_title {
    font-size: 1.8rem;
    line-height: 2.6rem;
    margin-top: .5rem;
    letter-spacing: .027rem;
  }

  .case_detail {
    margin-top: 1rem;
    font-size: 1.6rem;
    letter-spacing: .024rem;
  }

  /* ----案件概要---- */
  .article_acf_wrapper {
    width: 31.5rem;
    margin-top: 2.9rem;
    letter-spacing: .023rem;
  }

  .acf_works_list {
    font-size: 1.5rem;
    font-weight: 500;
  }

  .acf_works_list dt {
    margin-top: 1.7rem;
  }

  .acf_works_list dt:nth-child(2) {
    margin-top: 0;
  }

  .acf_works_list dd {
    margin: .2rem 0 0;
    position: relative;
  }

  .acf_works_list dd::after {
    content: "";
    width: 31.5rem;
  }

  /* ----PCデザイン==== */
  .blackbox_pc_design {
    margin-top: 10rem;
  }

  .case_image_pc {
    width: 33.5rem;
    height: 20.7rem;
    margin: 1.5rem auto 0;
  }

  /* ----SPデザイン---- */
  .blackbox_sp_design {
    margin-top: 10rem;
  }

  .case_sp_wrapper {
    width: 33.5rem;
    margin: 1.5rem auto 0;
  }

  .case_image_sp {
    width: 15.45rem;
    height: 30.687rem;
    border-radius: 2.35rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .case_image_sp::before {
    content: "";
    width: 15.45rem;
    height: 30.687rem;
    background-color: #000000;
    border-radius: 2rem;
    overflow: hidden;
    position: absolute;
    left: .2rem;
    top: 0;
  }

  .case_image_sp::after {
    content: "";
    width: 15.45rem;
    height: 30.687rem;
    background-image: url(../img/phone.png);
    background-size: cover;
    border-radius: 2rem;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
  }

  .case_sp_image {
    width: 14.5rem;
    height: 29.6rem;
    border-radius: 2rem;
    top: 0.05rem;
  }

  /* ----一覧へ戻るボタン---- */
  .back_to_archive_button {
    margin-top: 10rem;
    width: 11.6rem;
    height: 2.1rem;
    font-size: 1.3rem;
  }

  .back_to_archive_button::before {
    content: "";
    width: 9.95rem;
    height: .2rem;
    background-color: #000000;
    position: absolute;
    left: -9.95rem;
  }

  .back_to_archive_button::after {
    content: "";
    width: 9.95rem;
    height: .2rem;
    background-color: #000000;
    position: absolute;
    right: -9.95rem;
  }

  .back_to_archive {
    width: 100%;
    height: 100%;
    border-radius: 1.1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 400;
  }

}