/* --------------------------------------------------------------------------
   WordPress 版だけで必要な上乗せCSS

   HTML版の記事本文は .article__lead / .article__para / .article__subhead を
   1つずつ手で書いていたが、WPでは顧客がエディタで書くのでクラスが付かない。
   エディタが出す素のタグに、HTML版と同じ見た目を与える。

   ⚠️ 数値は assets/css/style.css の .article__* からそのまま持ってきている。
      style.css 側を変えたらここも合わせること。
   -------------------------------------------------------------------------- */

/* 本文の最初の段落＝リード文（HTML版の .article__lead と同じ） */
.article__body > p:first-child { margin-top: 20px; font-size: 15px; line-height: 2; }

/* 以降の段落（.article__para） */
.article__body > p { font-size: 14px; line-height: 2.1; }
.article__body > p + p { margin-top: 14px; }

/* 見出し（.article__subhead） */
.article__body > h2,
.article__body > h3,
.article__body > h4 {
  margin: 40px 0 14px;
  padding-left: 14px;
  border-left: 4px solid var(--color-sub);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-ink);
}

/* 本文中の画像（.article__img） */
.article__body figure { margin: 28px 0 8px; }
.article__body figure img,
.article__body > p > img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
}
.article__body figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-text-nav);
}

/* 箇条書き。HTML版には無いがエディタからは普通に入るので用意しておく */
.article__body ul,
.article__body ol {
  margin: 14px 0 14px 1.5em;
  font-size: 14px;
  line-height: 2.1;
}
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }

.article__body blockquote {
  margin: 20px 0;
  padding: 14px 18px;
  border-left: 3px solid var(--color-sub);
  font-size: 14px;
  line-height: 2;
}

.article__body a { text-decoration: underline; }

/* 一覧のページ送り */
.blog-pager {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}
.blog-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--color-sub);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--color-ink);
  text-decoration: none;
}
.blog-pager .page-numbers.current {
  background: var(--color-badge);
  border-color: var(--color-badge);
  color: #fff;
}