.main {
  display: flex;
}
/* header.css部分の画像差し替え */
.side_image_wrap {
  background-image: url(../img/recuperation_care_point2.jpg);
  background-position: 47%;
}

/* =====
お知らせ
===== */
.news {
  width: 72.4rem;
  margin-top: 9rem;
  padding-bottom: 15rem;
  background-color: #ffffff;
  margin-left: 48.8rem;
}

.news_title_ja {
  font-size: min(2rem,20px);
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(27em / 20);
  color: #202124;
  margin-bottom: -0.2rem;
}

.news_title_en {
  font-size: min(5rem,50px);
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(80em / 60);
  color: #202124;
  margin-bottom: 5rem;
  padding-bottom: 1.05rem;
  border-bottom: solid 0.1rem #202124;
}

.category {
  font-size: min(2rem,20px);
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(27em / 20);
  color: #202124;
  margin-bottom: 1.7rem;
}

/* カテゴリーのタグ */
.tag_list {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-bottom: min(6rem,60px);
}

.tag_area {
  padding: 0.4rem 1.5rem 0.3rem;
  background: #FF99CC;
}

.tag_name {
  font-size: 1.5rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(20em / 15);
  color: #ffffff;
}

/* 記事一覧 */
.article_field {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  row-gap: 7.4rem;
  column-gap: 7rem;
  padding-bottom: 9.5rem;
}

.article {
  width: 32.7rem;
}

.article_img {
  width: 32.7rem;
  height: 20.4rem;
  margin-bottom: 1.1rem;
}

.article_data {
  display: block;
  width: fit-content;
  font-size: 1.4rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(19em / 14);
  color: #202124;
  margin-bottom: 0.6rem;
}

/* 記事欄のタグ */
.article_tag_list {
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  gap: 0.475rem;
  margin-bottom: 1rem;
}

.article_tag_area {
  padding: 0.4rem 1.4rem 0.3rem;
  background: #FF99CC;
}

.article_tag_name {
  font-size: 1.2rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(16em / 12);
  color: #ffffff;
}

.comment {
  width: fit-content;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 1.8rem;
  font-weight: 500;
  font-family: var(--NotoSans);
  line-height: calc(24em / 18);
  color: #202124;
}

.pagination {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.nav-links {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 2rem;
}

.page-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.arc_page_link,
.arc_page_link_selected,
.arc_page_list .prev,
.arc_page_list .next,
.arc_page_list .dots {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.9rem;
  font-weight: 700;
  font-family: var(--NotoSans);
  line-height: calc(23em / 19);
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  text-decoration: none; /* リンクの下線を消す */
}

/* 通常時カラー */
.arc_page_link,
.arc_page_list .prev,
.arc_page_list .next,
.arc_page_list .dots {
  background-color: #ffffff;
  border: 1px solid #202124;
  color: #202124;
}

/* ホバー時のカラー */
.arc_page_link:hover,
.arc_page_list .prev:hover,
.arc_page_list .next:hover,
.arc_page_list .dots:hover {
  background: #202124;
  border-color: #202124;
  color: #ffffff;
}

.arc_page_link_selected {
  background-color: #202124;
  border: 1px solid #202124;
  color: #ffffff;
}

/* 現在のページ（activeページ）のカラー */
.arc_page_list .current .arc_page_link {
  background-color: #202124;
  color: #ffffff;
  border-color: #202124;
}

.prev {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #202124;
  opacity: 0.6;
}

.prev_arrow {
  width: 2.2rem;
  height: 2.4rem;
  transform: rotate(180deg);
}

.next {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #202124;
}

.next_arrow {
  width: 2.2rem;
  height: 2.4rem;
  background-color: #202124;
  opacity: 1;
}

/* 修正 */
.current > .arc_page_link {
  background-color: #202124;
  border-color: #202124;
  color: #ffffff;
  pointer-events: none;
}

@media (max-width: 699.98px) {
  .main {
    display: flex;
    flex-flow: column;
  }

  .side_img {
    width: 37.5rem;
    height: 33.5rem;
  }

  /* =====
  お知らせ
  ===== */
  .news {
    width: 100%;
    margin-top: 33.4rem;
    margin-left: 0;
    padding: 3rem 2rem 10rem;
  }

  .news_title_ja {
    font-size: 1.5rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(20em / 15);
    color: #202124;
    margin-bottom: 0;
  }

  .news_title_en {
    font-size: 4.5rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(60em / 45);
    color: #202124;
    margin-bottom: 4rem;
    padding-bottom: 1rem;
    border-bottom: solid 0.1rem #202124;
  }

  .category {
    font-size: 1.8rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(24em / 18);
    color: #202124;
    margin-bottom: 1.7rem;
  }

  /* カテゴリーのタグ */
  .tag_list {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    margin-bottom: 4rem;
  }

  .tag_area {
    padding: 0.3rem 1rem;
  }

  .tag_name {
    font-size: 1.4rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(19em / 14);
    color: #ffffff;
  }

  /* 記事一覧 */
  .article_field {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 2rem;
    padding-bottom: 6rem;
  }

  .article {
    width: 30.5rem;
  }

  .article_img {
    width: 30.5rem;
    height: 20.5rem;
    margin-bottom: 1rem;
  }

  .article_data {
    font-size: 1.4rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(19em / 14);
    color: #202124;
    margin-bottom: 1rem;
  }

  /* 記事欄のタグ */
  .article_tag_list {
    display: flex;
    gap: 0.966rem;
    margin-bottom: 1rem;
    padding-left: 0.5rem;
  }

  .article_tag {
    padding: 0.3rem 1rem;
  }

  .article_tag_name {
    font-size: 1.2rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(16em / 12);
    color: #ffffff;
  }

  .comment {
    overflow: hidden;
    display: -webkit-box;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: var(--NotoSans);
    line-height: calc(21em / 16);
    color: #202124;
  }

  /* ページネーション */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.9rem;
    padding-right: 0;
  }

  .arc_page_link {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: var(--NotoSans);
    line-height: calc(22em / 18);
    width: 4.6rem;
    height: 4.6rem;
    border: solid 0.1rem #202124;
    border-radius: 50%;
    color: #202124;
  }

  .prev_link,
  .next_link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.6rem;
    height: 4.6rem;
    border: solid 0.1rem #202124;
    border-radius: 50%;
    color: #202124;
  }

  .prev {
    background-color: #202124;
    opacity: 0.6;
  }

  .prev_arrow {
    width: 2.1rem;
    height: 2.2rem;
    transform: rotate(180deg);
  }

  .next {
    background-color: #202124;
    opacity: 1;
  }

  .next_arrow {
    width: 2.1rem;
    height: 2.2rem;
  }
}