/* 製造者：平野 */
@charset "utf-8";

/* ページ共通設定 */
.single_space {
  background-color: #D9EAF2;
  padding-top: 10.6rem;
}

/* 投稿部分共通設定 */
.post_sec {
  width: 100%;
  padding-block: 9.2rem 14.8rem;
  padding-inline: 10.0rem;
  background-color: #EAECEF;
  border: #000000 0.1rem solid;
  border-radius: 0 5.0rem 0 0;
  font-family: var(--NotoSans);
  letter-spacing: 0;
  color: #000000;
}

.archive_decoration {
  font-size: 1.3rem;
  padding: 0.1rem 4rem;
  color: #FFF;
  background-color: #000;
  border-radius: 1.1rem;
  height: 2.1rem;
  position: relative;
  z-index: 1;
}
.archive_category_area {
  gap: 1.4rem 2rem;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  /* margin-bottom: 2rem; */
  position: relative;
}
.archive_category_area::before {
  content: "";
  width: 108rem;
  height: 0.2rem;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 1rem;
}
.archive_category_area.line::before { /* カテゴリが2列以上のときだけ横線を追加 */
  content: "";
  width: 108rem;
  height: 0.2rem;
  background-color: #000;
  position: absolute;
  left: 0;
  top: 1rem;
}



/* お知らせタイトル部分 */
.sec_title {
  width: fit-content;
  margin-inline: auto;
  font-weight: 400;
  font-size: 1.3rem;
  color: #FFFFFF;
  padding-block: 0.1rem;
  padding-inline: 4.0rem;
  background-color: #000000;
  border-radius: 100vh;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    top: calc((100% - 0.2rem) / 2);
    left: calc((100% - 108rem) / 2);
    width: calc((108rem - 100%) / 2);
    height: 0.2rem;
    background-color: #000000;
  }

  &::after {
    position: absolute;
    content: "";
    top: calc((100% - 0.2rem) / 2);
    left: 100%;
    width: calc((108rem - 100%) / 2);
    height: 0.2rem;
    background-color: #000000;
  }
}

/* 投稿記事関連 */
.post_title_group {
  width: fit-content;
  margin-inline: auto;
  margin-block: 4.0rem 2.7rem;
  text-align: center;
}

.post_date_div {
  margin-bottom: 0.3rem;
}

.post_date {
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: 0.08rem;
  font-family: var(--ZenOldMincho);
  line-height: calc(24 / 16);
}

.post_title {
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.095rem;
  line-height: calc(27 / 19);
  overflow-wrap: break-word;
}

.post_text {
  width: 70rem;
  margin: 0 auto;
  font-weight: 400;
  font-size: 1.5rem;
  letter-spacing: 0.075rem;
  line-height: calc(32 / 15);
  overflow-wrap: break-word;
  margin-bottom: 9.9rem;
}

.post_img_div {
  width: fit-content;
  margin-inline: auto;
  margin-bottom: 4.4rem;
}

.post_img {
  aspect-ratio: 700 / 433;
  width: 70rem;
  border-radius: 1.0rem;
  border: #000000 0.2rem solid;
}
.wp-block-image {
  border-radius: 1rem;
}

.wp-block-image img {
  border: 0.2rem solid #000;
  border-radius: 1rem;
}


/* 一覧へ戻る部分 */
.back_link {
  display: block;
  width: fit-content;
  margin-inline: auto;
  font-weight: 400;
  font-size: 1.5rem;
  color: #FFFFFF;
  padding-block: 0.2rem;
  padding-inline: 4.45rem;
  background-color: #000000;
  border-radius: 100vh;
  position: relative;

  &::before {
    position: absolute;
    content: "";
    top: calc((100% - 0.2rem) / 2);
    left: calc((100% - 108rem) / 2);
    width: calc((108rem - 100%) / 2);
    height: 0.2rem;
    background-color: #000000;
    pointer-events: none;
  }

  &::after {
    position: absolute;
    content: "";
    top: calc((100% - 0.2rem) / 2);
    left: 100%;
    width: calc((108rem - 100%) / 2);
    height: 0.2rem;
    background-color: #000000;
    pointer-events: none;
  }
}

@media (width <=699.98px) {

  /* ページ共通設定 */
  .single_space {
    padding-top: 8.0rem;
  }

  .archive_category_area::before {
    width: 100%;
    height: 0.2rem;
    background-color: #000;
    position: absolute;
    left: 0rem;
    top: 1rem;
  }

  .archive_category_wrap {
    position: relative;
  }
  .archive_category_wrap::before {
    content: "";
    width: 31.5rem;
    height: 0.2rem;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 1rem;
   }

  .archive_category_area.line::before { /* カテゴリが3列以上のときだけ横線を追加 */
    content: "";
    width: 31.5rem;
    height: 0.2rem;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 3.6rem;
  }
  .archive_category_area.line::after { /* カテゴリが3列のときだけ横線を追加 */
    content: "";
    width: 31.5rem;
    height: 0.2rem;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 6.4rem;
  }
  .archive_category_area.line3::after { /* カテゴリが3列のときだけ横線を追加 */
    content: "";
    width: 31.5rem;
    height: 0.2rem;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 6.4rem;
  }

  .archive_category_area.line2::before { /* カテゴリが2列以上のときだけ横線を追加 */
    content: "";
    width: 31.5rem;
    height: 0.2rem;
    background-color: #000;
    position: absolute;
    left: 0;
    top: 3.6rem;
  }

  .archive_category_area {
    padding: 0 2rem;
    /* margin-bottom: 0.5rem; */
    row-gap: 0.6rem;
    justify-content: left;
  }

  .archive_decoration {
    font-size: 1.3rem;
    padding: 0.1rem 3.5rem;
  }

  /* 投稿部分共通設定 */
  .post_sec {
    padding-block: 6.0rem 15.0rem;
    padding-inline: 3.0rem;
  }

  /* お知らせタイトル部分 */
  .sec_title {
    margin-inline: 2.0rem auto;

    &::before {
      left: -2.0rem;
      width: 2.0rem;
    }

    &::after {
      left: 100%;
      width: calc(31.5rem - 100% - 2.0rem);
    }
  }

  /* 投稿記事関連 */
  .post_title_group {
    margin-inline: 0.025rem auto;
    margin-block: 1.6rem 1.0rem;
    text-align: left;
  }

  .post_date_div {
    margin-bottom: 1.0rem;
  }

  .post_date {
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    line-height: calc(20 / 14);
  }

  .post_title {
    font-size: 1.5rem;
    letter-spacing: 0.075rem;
    line-height: calc(21 / 15);
  }

  .post_text {
    width: 100%;
    font-size: 1.4rem;
    letter-spacing: 0.07rem;
    line-height: calc(32 / 14);
    margin-bottom: 10.4rem;
  }

  .post_img_div {
    margin-bottom: 1.0rem;
  }

  .post_img {
    aspect-ratio: 315 / 199;
    width: 31.5rem;
  }

  /* 一覧へ戻る部分 */
  .back_link {
    font-size: 1.3rem;
    padding-block: 0.1rem;
    padding-inline: 2.6rem;

    &::before {
      left: calc((100% - 31.5rem) / 2);
      width: calc((31.5rem - 100%) / 2);
    }

    &::after {
      width: calc((31.5rem - 100%) / 2);
    }
  }
}