/* ─────────────────────────────────────────────────────────────
   SODAI SYSTEM · Brand Site · NEWS ARTICLE (お知らせ詳細)
   ─ Agentが生成する記事ページ専用。
     日付・カテゴリの見た目は news.css の .news__row に合わせている。
   ───────────────────────────────────────────────────────────── */

.news-article {
  max-width: 760px;
  margin: 0 auto;
  padding-bottom: clamp(48px, 6vw, 72px);
  border-bottom: 1px solid rgba(14, 20, 23, .18)
}

.news-article__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 0 22px
}

.news-article__meta .date {
  font-family: var(--display);
  font-weight: 500;
  font-size: 14px;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums
}

.news-article__meta .cat {
  font-family: var(--display);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--teal-1);
  background: rgba(15, 111, 118, .08);
  padding: 6px 12px
}

.news-article__title {
  font-family: var(--jp-bold);
  font-weight: 500;
  font-size: clamp(24px, 3.4vw, 34px);
  line-height: 1.5;
  letter-spacing: .01em;
  color: var(--ink-900);
  margin: 0 0 clamp(32px, 4vw, 48px)
}

.news-article__body {
  font-family: var(--jp);
  font-weight: 300;
  font-size: 16px;
  line-height: 2;
  color: var(--ink-700)
}

.news-article__body > * + * {
  margin-top: 1.6em
}

.news-article__body h2 {
  font-family: var(--jp-bold);
  font-weight: 500;
  font-size: clamp(19px, 2.2vw, 22px);
  line-height: 1.6;
  color: var(--ink-900);
  margin-top: 2.4em;
  padding-left: 16px;
  border-left: 3px solid var(--teal-1)
}

.news-article__body h3 {
  font-family: var(--jp-bold);
  font-weight: 500;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink-900);
  margin-top: 2em
}

.news-article__body ul,
.news-article__body ol {
  padding-left: 1.4em
}

.news-article__body li + li {
  margin-top: .6em
}

.news-article__body a {
  color: var(--teal-1);
  text-underline-offset: .2em
}

.news-article__body a:hover {
  color: var(--accent-deep)
}

.news-article__body strong {
  font-family: var(--jp-bold);
  font-weight: 500;
  color: var(--ink-900)
}

.news-article__body blockquote {
  padding: 4px 0 4px 20px;
  border-left: 2px solid var(--ink-100);
  color: var(--ink-500)
}

.news-article__figures {
  display: grid;
  gap: 16px
}

/* 1枚のときは本文の幅いっぱいにせず、写真として置く */
.news-article__figures[data-count="1"] {
  grid-template-columns: 50%
}

.news-article__figures[data-count="2"] {
  grid-template-columns: repeat(2, 1fr)
}

.news-article__figures[data-count="3"] {
  grid-template-columns: repeat(3, 1fr)
}

.news-article__figures[data-count="4"] {
  grid-template-columns: repeat(2, 1fr)
}

.news-article__figure {
  /* figure の既定の左右40pxを消す */
  margin: 0;
  display: flex;
  flex-direction: column
}

.news-article__figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px
}

/* 並べるときは比率を揃える。縦横がばらばらだと高さが合わず段差になる */
.news-article__figures:not([data-count="1"]) .news-article__figure img {
  aspect-ratio: 4 / 3;
  object-fit: cover
}

.news-article__figure figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-500)
}

@media (max-width: 767px) {
  /* 幅が足りないので縦に積む */
  .news-article__figures[data-count="2"],
  .news-article__figures[data-count="3"],
  .news-article__figures[data-count="4"] {
    grid-template-columns: 1fr
  }

  .news-article__figures[data-count="1"] {
    grid-template-columns: 1fr
  }

  .news-article__figure figcaption {
    font-size: 12px
  }
}

@media (max-width: 767px) {
  .news-article {
    padding-bottom: 40px
  }

  .news-article__meta {
    gap: 14px;
    margin-bottom: 18px
  }

  .news-article__body {
    font-size: 15px;
    line-height: 1.95
  }

  .news-article__body h2 {
    padding-left: 12px
  }
}