body {
  background-color: #fff9f9;
}

.main {
  display: flex;
  justify-content: center;
  gap: 7.2rem;
  margin: 2.4rem 8rem 0;
}

@media (max-width: 1280px) {
  .main {
    gap: 2rem;
    margin: 2.4rem 1.5rem 0;
  }
}

@media (max-width: 880px) {
  .main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin: 0 1.5rem;
  }
}

.article {
  width: calc(100% - 34rem);
  max-width: 92.4rem;
}

@media (max-width: 980px) {
  .article {
    width: 100%;
  }
}

.section {
  max-width: 92.4rem;
  display: flex;
  flex-direction: column;
  padding: 5.6rem;
  background-color: #fff;
  border: 0.1rem solid transparent;
  border-radius: 1.2rem;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(90.94deg, #ff4f7e -1.38%, #ff76ef 38.23%, #8fa1ff 67.67%)
      border-box;
}

@media (max-width: 1280px) {
  .section {
    padding: 5.6rem 1.6rem;
  }
}

@media (max-width: 980px) {
  .section {
    padding: 1.6rem;
  }
}

.article-title_h1 {
  font-family: "Shippori Mincho", serif;
  width: 100%;
  font-weight: 600;
  font-size: 3.2rem;
  line-height: 1.5;
  letter-spacing: 0.15rem;
  color: #0c090d;
  margin: -0.6rem 0 1rem;
}

@media (max-width: 780px) {
  .article-title_h1 {
    font-size: 2rem;
    letter-spacing: 0.066rem;
    margin: -0.6rem 0 0.8rem;
  }
}

.article-info {
  width: 100%;
  display: flex;
  gap: 1.6rem;
  align-items: center;
  justify-content: flex-start;
  margin: 0 0 4rem;
}

.article-info_row {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.article-info_tag-list {
  padding: 0;
  display: flex;
  gap: 0.4rem 0.8rem;
  justify-content: flex-start;
  flex-wrap: wrap;
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 160%;
  letter-spacing: 0.03rem;
  text-align: center;
}

.article-info_tag-item {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
}

@media (max-width: 780px) {
  .article-info {
    gap: 0.6rem;
    margin: 0 0 2.4rem;
    flex-direction: column;
    align-items: start;
  }

  .article-info_row {
    gap: 0.8rem;
  }
}

.article-thumbnail_bg {
  width: calc(100% - 0.2rem);
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 0.8rem;
  margin: 0 0 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 0;
}

.article-thumbnail_image {
  width: 100%;
  height: 100%;
  border-radius: 0.8rem;
}

.article-thumbnail_bg::before {
  content: attr(data-year);
  position: absolute;
  top: -5.4rem;
  right: 9%;
  width: 15.6rem;
  height: 11.6rem;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: "Tenor Sans", serif;
  font-size: 1.6rem;
  font-weight: 400;
  color: #606283;
  z-index: 2;
}

.article-thumbnail_bg::after {
  /* 日付テキストのスタイル */
  content: attr(data-date);
  font-family: "Tenor Sans", serif;
  font-size: 2.8rem;
  font-weight: 400;
  color: #606283;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;

  /* 画像のスタイル */
  position: absolute;
  top: -2.8rem;
  right: 9%;
  width: 15.6rem;
  height: 11.6rem;
  background-image: url("./public/assets/image/date-bg.png");
  background-size: 100%;
  background-repeat: no-relative;
  z-index: 1;
}

@media (max-width: 1280px) {
  .article-thumbnail_bg {
    margin: 0 0 2.4rem;
  }
}

@media (max-width: 780px) {
  .article-thumbnail_bg::before {
    top: -6.5rem;
    right: -3.2rem;
    width: 15.6rem;
    height: 11.6rem;
    font-size: 1.2rem;
  }

  .article-thumbnail_bg::after {
    top: -1.6rem;
    right: -0.8rem;
    width: 11.148rem;
    height: 8.287rem;
    font-size: 2rem;
  }
}

.article-ad-banner_a {
  width: calc(100% - 0.2rem);
  height: auto;
  margin: 0 0 4rem;
}

.article-ad-banner_image {
  width: 100%;
  height: 100%;
}

@media (max-width: 780px) {
  .article-ad-banner_a {
    margin: 0 0 2.4rem;
  }
}

.article-toc {
  position: relative;
  width: 100%;
  padding: 7rem 0 2rem;
  margin: 0 0 4rem;
  overflow: hidden;
}

.article-toc::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.5rem;
  background-image: url("./public/assets/image/article-toc_bg.png");
  background-size: cover;
  background-position: top center;
}

.article-toc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2rem;
  background-image: url("./public/assets/image/article-toc_bg.png");
  background-size: cover;
  background-position: bottom center;
}

.article-toc_ol {
  width: 100%;
  margin: 0;
  background-image: url("./public/assets/image/article-toc_bg.png");
  background-size: 100% 200%;
  background-position: center;
  padding: 4.2rem 7rem 1.5rem;
  box-sizing: border-box;
  counter-reset: list-counter;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

@media (max-width: 460px) {
  .article-toc {
    position: relative;
    width: 100%;
    padding: 7rem 0 2rem;
    margin: 0 0 2.4rem;
  }

  .article-toc::before {
    width: 100%;
    height: 8.5rem;
    background-image: url("./public/assets/image/article-toc_bg-sp.png");
  }

  .article-toc::after {
    width: 100%;
    height: 2rem;
    background-image: url("./public/assets/image/article-toc_bg-sp.png");
  }

  .article-toc_ol {
    width: 100%;
    background-image: url("./public/assets/image/article-toc_bg-sp.png");
    padding: 1.2rem 3.6rem 0;
    gap: 0.8rem;
  }
}

.article-toc_li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  list-style-type: decimal;
}

.article-toc_li-link::before {
  content: "";
  font-family: "Tenor Sans", serif;
  font-size: 2.2rem;
  color: #606283;
  display: list-item;
}

.article-toc_li-link {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 180%;
  letter-spacing: 0.05rem;
  color: #0c090d;
  counter-increment: list-counter;
  display: flex;
  align-items: center;
}

.article-toc_a {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 180%;
  letter-spacing: 0.054rem;
  color: #0c090d;
  padding: 0.4rem 0 0 3rem;
  position: relative;
}

.article-toc_a::before {
  content: "";
  position: absolute;
  top: 0.85rem;
  left: 0.5rem;
  width: 2rem;
  height: 2rem;
  background-image: url("./public/assets/icon/bird-icon.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 780px) {
  .article-toc_li-link {
    font-size: 1.4rem;
    letter-spacing: 0.039rem;
  }

  .article-toc_li-link::before {
    font-size: 1.6rem;
  }

  .article-toc_a {
    font-size: 1.4rem;
  }

  .article-toc_a::before {
    top: 0.6rem;
  }
}

.article-headline_h2 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 150%;
  letter-spacing: 0.04rem;
  color: #0c090d;
  margin: 0 0 4rem;
  width: calc(100% - 0.2rem);
  padding: 0.8rem 1.6rem;
  box-sizing: border-box;
  background-image: url("./public/assets/image/article_h2_bg.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  border-top: 0.1rem solid #9597b6;
  border-bottom: 0.1rem solid #9597b6;
  background-color: rgba(255, 255, 255, 0.9);
  background-blend-mode: lighten;
}

@media (max-width: 780px) {
  .article-headline_h2 {
    font-size: 2rem;
    letter-spacing: 0.05rem;
    padding: 0.8rem 1.6rem;
    margin: 0 0 2.4rem;
  }
}

.article-headline_h3 {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 2rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  color: #0c090d;
  margin: 0 0 4rem;
  display: flex;
  align-items: center;
}

.article-headline_h3::before {
  content: "";
  width: 4rem;
  height: 4rem;
  display: inline-block;
  margin-right: 0.8rem;
  background-image: url("./assets/shining-diamond.webp");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 780px) {
  .article-headline_h3 {
    font-size: 1.8rem;
    margin: 0 0 2.4rem;
    display: flex;
    gap: 0.04rem;
  }

  .article-headline_h3::before {
    width: 2.8rem;
    height: 2.8rem;
  }
}

.article-headline_h4 {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 150%;
  letter-spacing: 0.05rem;
  color: #0c090d;
  display: inline-block;
  width: auto;
  margin: 0 0 4rem;
  border-bottom: 0.1rem solid #9597b6;
  padding: 0 0 0.3rem;
  position: relative;
  z-index: 0;
}

/* 複数行に適用するため div で対応 */
.article-headline_h4 div {
  font-family: "Shippori Mincho", serif;
  border-bottom: 0.2rem solid #9597b6;
  position: relative;
}

@media (max-width: 780px) {
  .article-headline_h4 {
    font-size: 1.6rem;
    margin: 0 0 2.4rem;
  }

  .article-headline_h4 div {
    padding: 0 0 0.4rem;
  }
}

.article_basic-text_p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 180%;
  letter-spacing: 0.05rem;
  color: #0c090d;
  margin: 0 0 4rem;
}

.article_basic-text_highlight {
  background-image: linear-gradient(to right, #e7d4eb 100%, #d2d8f8 0%);
  background-size: calc(100% - 0.8rem) 0.8rem;
  background-position: 0.6rem 1.7rem;
  background-repeat: no-repeat;
}

@media (max-width: 780px) {
  .article_basic-text_p {
    font-size: 1.4rem;
    letter-spacing: 0.05rem;
    margin: 0 0 2.4rem;
  }

  .article_basic-text_highlight {
    background-size: calc(100% - 0.6rem) 0.8rem;
    background-position: 0.4rem 1.2rem;
  }
}

.article_list-content_ul {
  width: 100%;
  border-radius: 0.8rem;
  padding: 2.4rem;
  margin: 0 0 4rem;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
  background: linear-gradient(131.97deg, #fff3f7 0%, #ebeeff 100%);
}

.article_list-content_li {
  height: 2.9rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 180%;
  letter-spacing: 0.054rem;
  color: #0c090d;
  display: flex;
  gap: 0.8rem;
  align-items: center;
}

.article_list-content_li::before {
  content: "";
  width: 2.4rem;
  height: 2.4rem;
  display: block;
  background-image: url("./public/assets/icon/bird-icon.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 780px) {
  .article_list-content_ul {
    padding: 1.6rem;
    margin: 0 0 2.4rem;
    gap: 0.4rem;
  }

  .article_list-content_li {
    height: 2.2rem;
    font-size: 1.2rem;
    letter-spacing: 0.05rem;
    line-height: 1.8;
    gap: 0.8rem;
  }

  .article_list-content_li::before {
    width: 2rem;
    height: 2rem;
  }
}

.article_description-list_table {
  width: 100%;
  margin: 0 0 6.4rem;
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 160%;
  letter-spacing: 0.054rem;
  border: 0.1rem solid #c3ccfc;
  border-radius: 1.6rem;
  border-spacing: 0;
  overflow: hidden;
}

.article_description-list_th {
  width: 22rem;
  font-weight: 400;
  background: linear-gradient(131.97deg, #fff3f7 0%, #ebeeff 100%);
  border-bottom: 0.1rem solid #c3ccfc;
  padding: 1.6rem;
  box-sizing: border-box;
  color: #586de0;
  text-align: center;
}

.article_description-list_td {
  padding: 1.6rem;
  color: #0c090d;
  background-color: #fff;
  border-bottom: 0.1rem solid #c3ccfc;
  vertical-align: top;
  line-height: 180%;
}

.article_description-list_tr:last-child th,
.article_description-list_tr:last-child td {
  border-bottom: none;
}

@media (max-width: 780px) {
  .article_description-list_table {
    margin: 0 0 3.2rem;
    font-size: 1.2rem;
    letter-spacing: 0.039rem;
    border-radius: 0.8rem;
  }

  .article_description-list_th {
    width: 12rem;
    padding: 0.8rem;
  }

  .article_description-list_td {
    padding: 0.8rem;
  }
}

.article_point-block {
  width: 100%;
  margin: 0 0 4rem;
  position: relative;
  z-index: 0;
}

@media (max-width: 780px) {
  .article_point-block {
    margin: 0 0 2.4rem;
  }

  .article_point-block::after {
    top: 0.817rem;
    left: 0.667rem;
  }
}

.article_point-block_bg-top {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 8.2rem;
  background-image: url("./public/assets/image/article-point_bg.png");
  background-size: cover;
  background-position: top center;
}

@media (max-width: 460px) {
  .article_point-block_bg-top {
    height: 6.2rem;
    background-image: url("./public/assets/image/article-point_bg-sp.png");
  }
}

.article_point-block_text {
  margin: 8.2rem 0 0;
  padding: 0 3.5rem 4.8rem;
  box-sizing: border-box;
  background-image: url("./public/assets/image/article-point_bg.png");
  background-size: 100% calc(200% + 25rem);
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  overflow: hidden;
}

@media (max-width: 460px) {
  .article_point-block_text {
    background-image: url("./public/assets/image/article-point_bg-sp.png");
  }
}

.article_point-block_p {
  font-weight: 400;
  font-size: 1.6rem;
  line-height: 280%;
  letter-spacing: 0.05rem;
  color: #0c090d;
  padding: 0 0 0.8rem;
  text-decoration: underline;
  text-decoration-color: #c3acac;
  text-decoration-style: dashed;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 1.5rem;
}

@media (max-width: 780px) {
  .article_point-block_text {
    padding: 2rem 2.3rem 2rem;
    margin: 6.2rem 0 0;
    background-size: 100% calc(200% + 12.5rem);
    height: 28rem;
  }

  .article_point-block_p {
    font-size: 1.2rem;
  }
}

@media (max-width: 430px) {
  .article_point-block_text {
    padding: 0 2.3rem 2rem;
  }
}

.article_point-block_bg-bottom {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6rem;
  background-image: url("./public/assets/image/article-point_bg.png");
  background-size: cover;
  background-position: bottom center;
}

@media (max-width: 460px) {
  .article_point-block_bg-bottom {
    background-image: url("./public/assets/image/article-point_bg-sp.png");
  }
}

.article_share-link {
  width: 100%;
  padding: 1.6rem 8.8rem 1.6rem 1.6rem;
  box-sizing: border-box;
  border-radius: 0.8rem;
  display: flex;
  align-items: center;
  gap: 1.6rem;
  position: relative;
  background: linear-gradient(131.97deg, #fff3f7 0%, #ebeeff 100%);
  margin-bottom: 4rem;
}

.article_relative-article-link,
.article_reference-article-link {
  position: relative;
}

.article_relative-article-link::before,
.article_reference-article-link::before {
  content: "";
  position: absolute;
  width: 9.4rem;
  height: 6.9rem;
  top: -1.65rem;
  right: -0.8rem;
  background-size: contain;
  background-position: top center;
  background-repeat: no-repeat;
}

.article_relative-article-link::before {
  background-image: url("./public/assets/image/relative-article_tag.png");
}

.article_reference-article-link::before {
  background-image: url("./public/assets/image/reference-article_tag.png");
}

@media (max-width: 780px) {
  .article_share-link {
    padding: 0.8rem 5.6rem 0.8rem 0.8rem;
    margin-bottom: 2.4rem;
    gap: 0.8rem;
  }

  .article_relative-article-link::before,
  .article_reference-article-link::before {
    width: 6.04rem;
    height: 4.4rem;
    top: -1.15rem;
    right: 0.478rem;
  }
}

.article_share-link_thumbnail {
  width: 15rem;
  height: 10rem;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 0.4rem;
}

.article_share-link_title {
  font-family: "Shippori Mincho", serif;
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: 0.05rem;
  color: #0c090d;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 780px) {
  .article_share-link_title {
    font-size: 1.2rem;
  }

  .article_share-link_thumbnail {
    width: 7.2rem;
    height: 4.8rem;
  }
}

.article_share-link_sns {
  width: 100%;
  box-sizing: border-box;
  padding: 3.2rem;
  border-radius: 1.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 4rem;
  align-items: center;
  justify-content: space-between;
  background-color: #f3f5fb;
  position: relative;
}

@media (max-width: 780px) {
  .article_share-link_sns {
    padding: 1.6rem;
    gap: 1.6rem;
  }
}

.article_share-link_sns:has(> *:nth-last-child(2):first-child) {
  justify-content: center;
}

.article_share-link_sns-illust {
  width: 15.1rem;
  height: 7.9rem;
}

@media (max-width: 780px) {
  .article_share-link_sns-illust {
    width: 13.2rem;
    height: 6.5rem;
  }
}

.article_share-link_sns-services {
  width: 53.1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
}

@media (max-width: 780px) {
  .article_share-link_sns-services {
    font-size: 1.1rem;
  }
}

.article_share-link_sns-services:has(> *:nth-last-child(4):first-child) {
  justify-content: center;
  width: auto;
}

.article_share-link_sns-service {
  width: calc((100% - 1.2rem) / 2);
  min-width: 11.2rem;
  height: 4.8rem;
  border-radius: 4.8rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Noto Sans JP", serif;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 160%;
  letter-spacing: 0.052rem;
  color: #0c090d;
}

.article_share-link_sns-icon {
  width: 2.8rem;
  height: 2.8rem;
}

.article_share-link_link-copy {
  width: 1.6rem;
  height: 1.6rem;
  margin-right: 0.4rem;
}

@media (max-width: 780px) {
  .article_share-link_sns-service {
    font-size: 1.2rem;
    letter-spacing: 0.036rem;
    height: 4rem;
  }

  .article_share-link_sns-icon {
    width: 2.4rem;
    height: 2.4rem;
  }

  .article_share-link_link-copy {
    width: 1.4rem;
    height: 1.4rem;
    margin-right: 0.4rem;
  }
}

.section__recommend {
  width: 100%;
  max-width: 92.4rem;
  margin: 6.4rem 0;
}

@media (max-width: 780px) {
  .section__recommend {
    margin: 4rem 0 5.6rem;
  }
}

.section__recommend-title {
  width: 100%;
}

/* 記事リスト */
.section__recommend-list {
  width: 100%;
  max-width: 92.4rem;
  margin: 3.2rem 0 0;
  padding: 0;
  display: flex;
  gap: 4.5rem 0.8rem;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.section__recommend-item {
  width: calc((100% - 2.5rem) / 4);
  max-width: 22.2rem;
  margin: 0;
  padding: 0;
  position: relative;
  transition: all 0.3s;
}

@media (max-width: 780px) {
  .section__recommend-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem 1.2rem;
    justify-content: center;
    margin: 1rem 0 0;
  }

  .section__recommend-item {
    width: 100%;
    max-width: 100%;
  }
}

.common_section-item_article:hover {
  cursor: pointer;
  opacity: 0.5;
}

.common_section-image_article {
  width: 100%;
  max-width: 45rem;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  border-radius: 0.8rem;
  margin: 0 0 0.3rem;
  padding: 0;
}

.section__recommend-image {
  width: 100%;
  max-width: 45rem;
  aspect-ratio: 6 / 4;
  object-fit: cover;
  border-radius: 0.8rem;
  margin: 0 0 0.3rem;
  padding: 0;
}

.section__recommend-date {
  font-family: "Tenor Sans", serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.04rem;
  color: #606283;
}

@media (max-width: 780px) {
  .section__recommend-date {
    font-size: 1.1rem;
  }
}

.section__recommend-text {
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 150%;
  color: #0c090d;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 780px) {
  .section__recommend-text {
    font-size: 1.2rem;
  }
}