/* single.css — お知らせ詳細
   Figma: 926:23553。メイン列は上 120 / 下 80 / gap 40。記事幅 888（左右 56） */

.single-news {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding: var(--space-120) 0 var(--space-80);
}

/* 記事ヘッダー（パンくず → タイトル → 日付 → 画像。間隔はすべて 16）Figma: 1975:15902 */
.article-header {
  --article-header-deco-width:  calc(622.879 / 16 * 1rem);
  --article-header-deco-height: calc(411.088 / 16 * 1rem);
  --article-header-deco-top:    calc(-109 / 16 * 1rem);
  --article-header-deco-right:  calc(-140.88 / 16 * 1rem);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  width: var(--width-article);
  max-width: 100%;
  margin-inline: auto;
}

.article-header__deco {
  position: absolute;
  top: var(--article-header-deco-top);
  right: var(--article-header-deco-right);
  z-index: 0;
  width: var(--article-header-deco-width);
  height: var(--article-header-deco-height);
  pointer-events: none;
}

.article-header > :not(.article-header__deco) {
  position: relative;
  z-index: 1;
}

.article-header__image {
  width: 100%;
  aspect-ratio: var(--ratio-golden);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.article-header__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 本文 Figma: 1944:54286 ---------------------------------------------------- */
.article {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-40);
  padding: var(--space-40) 0;
}

.article .article__body {
  width: var(--width-article);
  max-width: 100%;
  margin-inline: auto;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-loose);
  color: var(--color-black);
}

/* 本文内の流れ：ブロック間 40、見出し直後と引用の前は 32、段落同士は 1 行分
   ※ components/article.css の margin: 0 より優先させるため .article を付けて詳細度を上げる */
.article .article__body > * {
  margin: 0;
}

.article .article__body > * + * {
  margin-top: var(--space-40);
}

.article .article__body > h2 + *,
.article .article__body > h3 + *,
.article .article__body > blockquote {
  margin-top: var(--space-32);
}

.article .article__body > p + p {
  margin-top: calc(var(--font-size-body) * var(--line-height-loose));
}

.article__body img {
  max-width: 100%;
  height: auto;
}

/* 目次 Figma: 1944:54532 */
.article-toc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-16);
  padding: var(--space-32) var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-gray-light);
  font-size: var(--font-size-h3);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
}

.article-toc__title {
  margin: 0;
}

.article-toc__list {
  --article-toc-indent: calc(27.435 / 16 * 1rem);

  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  width: 100%;
  margin: 0;
  padding-left: var(--article-toc-indent);
}

.article-toc__list a {
  color: inherit;
  text-decoration: none;
}

.article__footer {
  display: flex;
  justify-content: flex-end;
  width: var(--width-article);
  max-width: 100%;
  margin-inline: auto;
}

/* SP：背景ロゴの透かしは他ページ（page-header.css）と同じ大きさ・位置（PC 実値の 50%）*/
@media (max-width: 767px) {
  .article-header {
    --article-header-deco-width:  calc(622.879 / 16 * 0.5rem);
    --article-header-deco-height: calc(411.088 / 16 * 0.5rem);
    --article-header-deco-top:    calc(-151.998 / 16 * 0.5rem);
    --article-header-deco-right:  calc(-140.88 / 16 * 0.5rem);
  }

  .single-news {
    padding-bottom: var(--space-40);
  }

  .article {
    padding-top: 0;
  }
}