/* ============================================================
   news-detail.html（お知らせ詳細）専用スタイル
   ------------------------------------------------------------
   読み込み順：common.css → news-detail.css
   構成はFigmaワイヤーフレーム node 559-949（SP-375）準拠。
   本テンプレートは記事1件分の静的モック。実運用時は記事ごとに複製 or CMS化する想定。
   配下ページはTOPより控えめな「一般レベル」の文字サイズにする
   ============================================================ */

/* ============ 記事本体：中央配置の白背景カード ============ */
.article-wrap {
  width: 100%;
  max-width: 880px;                 /* 読みやすい記事幅に頭打ち＋中央寄せ */
  margin-inline: auto;
  padding: clamp(40px, 6vw, 88px) var(--edge) clamp(24px, 3vw, 48px);
}
.article-card {
  background: #fff;
  border-radius: var(--radius-lg);  /* design system：大カードの角丸 */
  padding: var(--pad-card);         /* design system：カード内側 */
}

/* ============ 記事ヘッダー（WF 559:957〜598:1377） ============ */
.article__head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.article__title {
  font-size: var(--fs-jp-lg);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 2px;
  color: var(--teal-900);
}
.article__date {
  font-family: var(--font-en-serif);
  font-size: var(--fs-body-sm);
  letter-spacing: 2px;
  color: var(--teal-900);
  opacity: 0.8;
}

/* ============ 本文（WF 598:1467〜605:2061） ============ */
.article__body {
  margin-top: clamp(24px, 3vw, 40px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid #ece4d4;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.article__body p {
  font-size: var(--fs-body-sm);
  line-height: 1.85;
  letter-spacing: 1px;
  color: var(--neutral-800);
}
.article__body h2 {
  font-size: var(--fs-jp-md);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal-900);
  margin-top: 12px;
}
.article__body h3 {
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--teal-900);
  margin-top: 8px;
}
.article__link {
  align-self: flex-start;
  font-size: var(--fs-body-sm);
  letter-spacing: 1px;
  color: #3a87f1;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article__link:hover { opacity: 0.75; }

/* ============ 回遊誘導線（WF 598:1481〜598:1484）
   中央の「一覧に戻る」は共通CTA（.button-cta--dark）。
   前へ/次へはCTAの丸み・矢印スライドを踏襲した軽量ピルに。 ============ */
.article-pager {
  margin-top: clamp(40px, 5vw, 64px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 16px;
}
.article-pager__back { margin: 0; }

.pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;                       /* CTAと同じピル形状 */
  border: 1.5px solid rgba(14, 59, 52, 0.18);
  background: #fff;
  color: var(--teal-900);
  font-family: var(--font-jp);
  font-weight: 700;
  font-size: var(--fs-body-sm);
  letter-spacing: 2px;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.pager-nav:hover { border-color: var(--teal-300); background: var(--neutral-50); }
.pager-nav__icon { width: 20px; height: 20px; }
.pager-nav--prev .pager-nav__icon { transform: rotate(180deg); }
.pager-nav--prev:hover .pager-nav__icon { transform: rotate(180deg) translateX(4px); }
.pager-nav--next:hover .pager-nav__icon { transform: translateX(4px); }

@media (min-width: 600px) {
  /* 前へ＝左 / 一覧に戻る＝中央 / 次へ＝右。
     ⚠️ space-between は要素が3つ揃っている前提。記事が最古/最新のときは
     「前へ」または「次へ」が無く2要素になり、中央にあるべき「一覧に戻る」が
     端に寄ってしまう。3カラムのgridで位置を固定し、欠けた側は空セルにする */
  .article-pager {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
  }
  .article-pager__back { grid-column: 2; }
  .pager-nav--prev { grid-column: 1; justify-self: start; }
  .pager-nav--next { grid-column: 3; justify-self: end; }
}

/* ============ 関連ページ導線 ============ */
.article-related-section { padding-block: 0; }