/* ============================================================
   記事詳細（/knowledge/<slug>）共通テンプレート
   Figma: お役立ち資料 記事詳細（177:1047）／ SP デザインなし（TOP SP ルールに準拠）

   構成：
   <section class="article-hero">   … パンくず・公開日・タイトル・リード（青背景）
   <div class="article">            … 目次（.article-toc）＋本文（.article-body）
   ※ パンくず .breadcrumb・ページ先頭へ戻る .page-top は style.css の共通部品

   本文は CMS から流し込む想定。.article-body 配下は
   h2 / h3 / h4 / p / ul / ol / figure / img / table / blockquote / a / strong / hr
   をクラス無しで整形する（記事ごとの追加 CSS は不要）。
   ============================================================ */

:root {
  --article-width: 768px;
  --article-fs: 16px;         /* 本文 */
  --article-lh: 1.8;
  --article-table-border: #9dacbe;   /* Figma: text-bluegary */
  --article-figure-bg: #f9f8f3;      /* Figma: 図版の背景 */
}
@media (max-width: 767px) {
  :root { --article-fs: 14px; }
}

/* ---------- hero ---------- */
.article-hero {
  background: var(--mainblue);
  color: #fff;
  padding: calc(var(--header-h) + 24px) var(--gutter) 117px;
}
.article-hero .breadcrumb {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: 15px;
}
.article-hero .breadcrumb ol { color: var(--lightblue); }

.article-hero__inner {
  max-width: var(--article-width);
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.article-hero__date {
  font-family: var(--ff-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: var(--lh);
}
.article-hero__title {
  font-size: 32px;
  font-weight: 500;
  line-height: var(--lh);
  text-align: center;
}
.article-hero__lead {
  font-family: var(--ff-noto);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.95;
  text-align: center;
}

/* ---------- 目次＋本文 ---------- */
.article {
  padding: 64px var(--gutter) 195px;
}
.article__inner {
  max-width: var(--article-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 56px;
}

/* 目次 */
.article-toc {
  background: #fff;
  border-radius: 0 var(--radius-card) var(--radius-card) var(--radius-card);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.article-toc__title { font-size: 24px; font-weight: 500; line-height: var(--lh); color: var(--darktext); }
.article-toc__list { display: flex; flex-direction: column; gap: 16px; }
.article-toc__list li { border-bottom: 1px solid var(--lightblue); padding-bottom: 8px; }
.article-toc__list a {
  display: block;
  font-size: 16px;
  font-weight: 500;
  line-height: var(--lh);
  color: var(--darktext);
  transition: color .2s;
}
.article-toc__list a:hover { color: var(--mainblue); }
/* 小見出し（h3）を目次に出す場合 */
.article-toc__list .is-sub a { padding-left: 1em; font-size: 14px; }
.article-toc__list .is-sub2 a { padding-left: 2em; font-size: 13px; }

/* 筆者 */
.article-author {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: #fff;
  border-radius: var(--radius-card);
  padding: 20px;
  color: var(--darktext);
}
.article-author__photo { flex: none; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.article-author__text { display: flex; flex-direction: column; gap: 4px; }
.article-author__label { font-size: 12px; font-weight: 700; color: var(--mainblue); }
.article-author__name { font-size: 18px; font-weight: 700; line-height: var(--lh); }
.article-author__bio { margin-top: 4px; font-size: 14px; line-height: 1.8; }

/* ---------- 本文（CMS 流し込み） ---------- */
.article-body {
  color: var(--darktext);
  font-size: var(--article-fs);
  font-weight: 400;
  line-height: var(--article-lh);
  overflow-wrap: anywhere;
}
.article-body > * + * { margin-top: 16px; }
.article-body p + p { margin-top: calc(var(--article-lh) * 1em); }  /* Figma：段落間に1行分の空き */
.article-body p:empty { display: none; }

.article-body h2,
.article-body h3,
.article-body h4 {
  font-weight: 500;
  line-height: var(--lh);
  color: var(--darktext);
  scroll-margin-top: 24px;
}
.article-body h2 { font-size: 32px; }
.article-body h3 { font-size: 24px; }
.article-body h4 { font-size: 20px; }
.article-body > * + h2 { margin-top: 64px; }
.article-body > * + h3 { margin-top: 40px; }
.article-body > * + h4 { margin-top: 32px; }

.article-body a { color: var(--mainblue); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { text-decoration: none; }
.article-body strong { font-weight: 700; }

.article-body ul,
.article-body ol { padding-left: 1.5em; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li + li { margin-top: 4px; }
.article-body li::marker { color: var(--mainblue); }

/* 図版 */
.article-body figure {
  background: var(--article-figure-bg);
  border-radius: var(--radius-card);
  overflow: hidden;
  padding: 15px 37px 10px 44px;
}
.article-body figure img { margin: 0 auto; }
.article-body figcaption {
  margin-top: 8px;
  font-size: 14px;
  line-height: var(--lh);
  text-align: center;
}
.article-body figcaption:empty { display: none; }
.article-body > img { border-radius: var(--radius-card); }

/* 表（横に長い表は .table-scroll で横スクロール） */
.article-body .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.article-body table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.article-body th,
.article-body td {
  border: 1px solid var(--article-table-border);
  text-align: center;
  vertical-align: middle;
}
.article-body th {
  background: var(--lightblue);
  padding: 4px 8px;
  font-size: 14px;
  font-weight: 400;
  line-height: var(--lh);
}
.article-body td {
  background: #fff;
  padding: 12px;
}
.article-body th p + p,
.article-body td p + p { margin-top: 0; }

/* 引用 */
.article-body blockquote {
  margin: 0;
  background: #fff;
  border-left: 4px solid var(--mainblue);
  border-radius: 0 12px 12px 0;
  padding: 16px 20px;
}
.article-body hr { border: 0; border-top: 1px solid var(--article-table-border); margin: 40px 0; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .article-hero .breadcrumb { padding-left: 20px; }
}
@media (max-width: 767px) {
  .article-author { padding: 16px; gap: 12px; }
  .article-author__photo { width: 56px; height: 56px; }
  .article-author__bio { font-size: 13px; }
  .article-hero { padding: calc(var(--header-h) + 16px) var(--gutter) 48px; }
  .article-hero .breadcrumb { padding-left: 0; }
  .article-hero .breadcrumb li:last-child { min-width: 0; }
  .article-hero .breadcrumb li:last-child span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .article-hero__inner { margin-top: 32px; gap: 12px; }
  .article-hero__date { font-size: 12px; }
  .article-hero__title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-tight); text-align: left; }
  .article-hero__lead { font-size: 13px; line-height: 1.8; text-align: left; }

  .article { padding: 40px var(--gutter) 100px; }
  .article__inner { gap: 40px; }
  .article-toc { padding: 20px 16px; gap: 12px; }
  .article-toc__title { font-size: 18px; font-weight: 700; }
  .article-toc__list { gap: 12px; }
  .article-toc__list a { font-size: 14px; }

  .article-body h2 { font-size: var(--fs-h2); font-weight: 700; }
  .article-body h3 { font-size: 18px; font-weight: 700; }
  .article-body h4 { font-size: 16px; font-weight: 700; }
  .article-body > * + * { margin-top: 12px; }
  .article-body > * + h2 { margin-top: 48px; }
  .article-body > * + h3 { margin-top: 32px; }
  .article-body > * + h4 { margin-top: 24px; }
  .article-body figure { padding: 8px; border-radius: 12px; }
  .article-body th { font-size: 12px; }
  .article-body td { padding: 8px; font-size: 13px; }

}