/* ===== single-news 専用CSS =====
   汎用パーツ(.section / .container / .btn)と、グローバルな prefers-reduced-motion
   ブロックは assets/css/common.css に集約済みのため、ここには記述しない。
   動きは他ページで確定済みの「弱・translateY(12px)・0.5s ease-out」の
   フェードアップパターンを踏襲している。
*/

/* ===== 記事本体 ===== */
.article-layout { display: flex; flex-direction: column; gap: 40px; }

.article-sidebar__accent { width: 32px; height: 2px; background: var(--color-main); margin-bottom: 14px; }
.article-sidebar__heading { font-family: var(--font-heading-en); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; color: var(--color-main); margin-bottom: 14px; }
.article-sidebar__list { display: flex; flex-wrap: wrap; gap: 8px; }
.article-sidebar__list a { display: inline-flex; align-items: center; padding: 8px 14px; font-size: 0.8125rem; color: var(--color-text-sub); border: 1px solid var(--color-border); }
.article-sidebar__list a[aria-current="page"] { background: var(--color-main); color: var(--color-white); border-color: var(--color-main); font-weight: 700; }

.article-body__meta { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.article-body__date { font-family: var(--font-heading-en); font-size: 0.8125rem; color: var(--color-text-mute); }
.article-body__cat { display: inline-block; background: var(--color-main-soft); color: var(--color-main); font-size: 0.6875rem; font-weight: 700; padding: 3px 10px; }
.article-body h1 {
  font-family: var(--font-heading-jp);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
  margin-bottom: 24px;
  font-size: clamp(1.38rem, 1.38rem + 0.37rem * ((100vw - 375px) / (768px - 375px)), 1.75rem);
}
.article-body__eyecatch { margin-bottom: 24px; }
.article-body__eyecatch img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.article-body__rule { border: none; border-top: 1px solid var(--color-border); margin: 0 0 28px; }
.article-body__content p { color: var(--color-text-sub); line-height: 1.9; margin-bottom: 20px; }
.article-body__content p:last-child { margin-bottom: 0; }

@media (width >= 768px) {
  .article-layout { flex-direction: row; align-items: flex-start; gap: 48px; }
  .article-sidebar { flex: 0 0 22%; }
  .article-sidebar__list { flex-direction: column; }
  .article-sidebar__list a { justify-content: space-between; }
  .article-sidebar__list a::after { content: "›"; }
  .article-body { flex: 1; min-width: 0; }
  .article-body h1 { font-size: clamp(1.75rem, 1.75rem + 0.25rem * ((100vw - 768px) / (1440px - 768px)), 2rem); }
}
@media (width >= 1440px) {
  .article-body h1 { font-size: clamp(2rem, 2rem + 0.25rem * ((100vw - 1440px) / (1920px - 1440px)), 2.25rem); }
}

/* ===== 記事ナビゲーション ===== */
.article-nav { display: flex; flex-direction: column; gap: 16px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--color-border); }
.article-nav__prev, .article-nav__next { font-size: 0.875rem; color: var(--color-text-sub); }
.article-nav__prev.is-disabled, .article-nav__next.is-disabled { color: var(--color-text-mute); opacity: 0.5; }
.article-nav__index { display: inline-flex; align-self: center; padding: 12px 24px; font-size: 0.8125rem; border: 1px solid var(--color-text); }
@media (width >= 768px) {
  .article-nav { flex-direction: row; align-items: center; justify-content: space-between; }
  .article-nav__prev { text-align: left; }
  .article-nav__next { text-align: right; }
}

/* ===== 出現アニメーション(弱。サイドバー→メタ→見出し→アイキャッチ→本文→ナビの順に0.06sずつずらしてフェードアップ) ===== */
.article-sidebar--anim-init,
.article-body__meta--anim-init,
.article-body__heading--anim-init,
.article-body__eyecatch--anim-init,
.article-body__content--anim-init,
.article-nav--anim-init {
  opacity: 0;
  transform: translateY(12px);
}
.article-sidebar--anim-init.is-in-view,
.article-body__meta--anim-init.is-in-view,
.article-body__heading--anim-init.is-in-view,
.article-body__eyecatch--anim-init.is-in-view,
.article-body__content--anim-init.is-in-view,
.article-nav--anim-init.is-in-view {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.article-body__meta--anim-init.is-in-view { transition-delay: 0.06s; }
.article-body__heading--anim-init.is-in-view { transition-delay: 0.12s; }
.article-body__eyecatch--anim-init.is-in-view { transition-delay: 0.18s; }
.article-body__content--anim-init.is-in-view { transition-delay: 0.24s; }