@charset "UTF-8";
/* ==========================================================================
   MiraiVets Partners ｜ article.css（記事詳細 article.html 専用）
   --------------------------------------------------------------------------
   ・記事本文まわり（article__*）
   ※ ページヘッダー（page-hero）やパンくずは common.css にあります
   ========================================================================== */

.article { max-width: var(--container-narrow); margin-inline: auto; }
.article__header { margin-bottom: 36px; }
.article__meta { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.article__cat { font-size: 0.74rem; font-weight: 700; color: var(--c-white); background: var(--c-main); padding: 4px 14px; border-radius: var(--radius-pill); }
.article__date { font-family: var(--font-en); color: var(--c-muted); font-size: 0.9rem; }
.article__title { font-size: clamp(1.5rem, 3.6vw, 2.2rem); font-weight: 700; color: var(--c-main); line-height: 1.5; letter-spacing: 0.04em; }
/* 角丸は img 側に付ける。ラッパー側だと、幅がコンテナに満たない画像のときに
   角丸が画像に掛からず効いていないように見えるため */
.article__thumb { margin: 32px 0; }
.article__thumb img { border-radius: var(--radius-m); }
.article__body { line-height: 2.1; }
.article__body h3 {
  font-size: 1.4rem; font-weight: 700; color: var(--c-main);
  margin: 48px 0 18px; padding-left: 16px;
  border-left: 4px solid var(--c-sky);
}
.article__body h4 { font-size: 1.15rem; font-weight: 700; color: var(--c-accent); margin: 34px 0 12px; }
.article__body a { color: var(--c-sky); text-decoration: underline; }
.article__back { text-align: center; margin-top: 56px; }
.article-content { padding: 40px 20px 50px 20px; }

/* --------------------------------------------------------------------------
   本文の要素スタイル（WP化で追加）
   ブロックエディタが出力する「クラスの付かないタグ」にそのまま効くよう、
   クラス指定（.article__text 等）ではなく要素セレクタで指定する。
   -------------------------------------------------------------------------- */
.article__body p { margin-bottom: 22px; }
.article__body ul,
.article__body ol { margin: 0 0 22px; padding-left: 1.6em; }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body figure { margin: 0 0 22px; }
.article__body img { max-width: 100%; height: auto; }
.article__body > *:last-child { margin-bottom: 0; }