@charset "UTF-8";
/* cms 1/3 ｜ 含む: 見出しのリッチ化（h2 / h3） / 基本のリスト（・リスト ul ／ 番号リスト ol） / 本文リンク（p / li / td / dd 内） / ボックス（cms-box） / CTAボタン（cms-btn） / 表（cms-table） / 簡易バーグラフ（cms-bars・SVG不要） ｜ 元: blog-components.css */
/* ブログ記事用の再利用ビジュアル部品（簡易CMS）。
   コピペ用スニペットと使い方は docs/blog-components.md を参照。
   すべて .article スコープ。色・角丸・影は base.css のトークンを使う。 */

/* ===== 見出しのリッチ化（h2 / h3） ===== */
/* Markdownの ## / ### がそのまま映えるよう、記事の基本見出しを強化（blog.cssを上書き）。 */
.article h2 {
  position: relative;
  margin: 56px 0 20px;
  padding: 8px 14px 10px 16px;
  font-size: 1.5rem;
  line-height: 1.5;
  border-left: 6px solid var(--color-button);
  border-bottom: 2px solid var(--color-accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: linear-gradient(90deg, var(--color-primary-light), transparent 72%);
}
.article h3 {
  position: relative;
  margin: 36px 0 14px;
  padding-left: 20px;
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--color-text);
}
.article h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 8px;
  height: 1.05em;
  border-radius: var(--radius-xs);
  background: linear-gradient(var(--color-button), var(--color-button-hover));
}

/* ===== 基本のリスト（・リスト ul ／ 番号リスト ol） ===== */
/* Markdownの - は「・」、1. はブランド色の番号に。cms-steps / cms-flow は独自なので除外。 */
.article ul:not(.cms-steps):not(.cms-toc__list),
.article ol:not(.cms-flow) { list-style: none; margin: 0 0 24px; padding-left: 0; }
.article ul:not(.cms-steps):not(.cms-toc__list) > li,
.article ol:not(.cms-flow) > li { position: relative; padding-left: 1.6em; margin-bottom: 8px; line-height: 1.9; }
/* ・リスト（ul） */
.article ul:not(.cms-steps):not(.cms-toc__list) > li::before {
  content: "・"; position: absolute; left: 0; top: 0;
  color: var(--color-button); font-weight: 700;
}
/* 番号リスト（ol） */
.article ol:not(.cms-flow) { counter-reset: li; }
.article ol:not(.cms-flow) > li::before {
  counter-increment: li; content: counter(li) ".";
  position: absolute; left: 0; top: 0;
  min-width: 1.4em;
  color: var(--color-button-hover); font-weight: 700;
}

/* ===== 本文リンク（p / li / td / dd 内） ===== */
/* base.css は a を「色継承・下線なし」にしているため、本文ではリンクと分かるよう上書き。
   ボタン（cms-btn / cms-social）は専用クラスの優先度で除外される。 */
.article :where(p, li, td, dd) a {
  color: #1565c0;
  text-decoration: none;
  transition: color var(--transition-base);
}
.article :where(p, li, td, dd) a:hover { color: #0d4a8a; opacity: 1; }
/* 外部リンクに ↗ を付けたいとき */
.article a.cms-link--ext::after { content: " ↗"; font-size: 0.85em; }

/* ===== ボックス（cms-box） ===== */
.article .cms-box {
  margin: 24px 0;
  padding: 16px 20px;
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-button);
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
}
.article .cms-box > :first-child { margin-top: 0; }
.article .cms-box > :last-child { margin-bottom: 0; }
.article .cms-box__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
}
/* 色＝役割。左バー＋背景＋見出し色で意味づけする。アイコンは原則なし
   （自動の絵文字はAI感が出るため。入れたいときは見出しに絵文字を直接書く）。
   point=要点(メイン) / merit=メリット(緑) / demerit=デメリット(赤)
   / caution=注意点(黄土色) / experience=実録「私の場合」(青) / summary=まとめ(グレー) */
.article .cms-box--point      { border-left-color: var(--color-button); background: var(--color-primary-light); }
.article .cms-box--merit      { border-left-color: #3fa372; background: #eef8f2; }
.article .cms-box--merit      .cms-box__title { color: #2e7d57; }
.article .cms-box--demerit    { border-left-color: #c94a4a; background: #fcecec; }
.article .cms-box--demerit    .cms-box__title { color: #b03a3a; }
.article .cms-box--caution    { border-left-color: #b8843a; background: #f8f0df; }
.article .cms-box--caution    .cms-box__title { color: #8a6320; }
.article .cms-box--experience { border-left-color: #5b6fb0; background: #eef0fa; }
.article .cms-box--experience .cms-box__title { color: #44509a; }
.article .cms-box--summary    { border-left-color: #6b7280; background: #f4f5f7; }
.article .cms-box--summary    .cms-box__title { color: #4b5563; }

/* 引用ボックス（cms-box--cite）：外部の引用＋出典。blockquote/cite で書く。 */
.article .cms-box--cite { border-left-color: #9aa3b2; background: #f6f7f9; }
.article .cms-box--cite > p { margin-bottom: 0; }
.article .cms-box__source {
  display: block;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px dashed var(--color-border);
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--color-text-sub);
}
.article .cms-box__source::before { content: "出典："; font-weight: 700; }
.article .cms-box__source a { color: var(--color-button-hover); }

/* ===== CTAボタン（cms-btn） ===== */
/* 役割で使い分け：無印=主CTA / official=公式・外部 / related=関連記事(内部) / subtle=補助・戻る。
   --block で横幅いっぱい、__sub で補足ラベル。 */
.article .cms-btn {
  display: inline-block;
  text-align: center;
  margin: 8px 0;
  padding: 12px 28px;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.4;
  color: #fff;
  background: var(--color-button);
  border: 2px solid var(--color-button);
  border-radius: var(--radius-lg);
  text-decoration: none;
  box-shadow: var(--shadow-card);
  transition: background var(--transition-base), border-color var(--transition-base), color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.article .cms-btn:hover { background: var(--color-button-hover); border-color: var(--color-button-hover); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.article .cms-btn:focus-visible { outline: 2px solid var(--color-button-hover); outline-offset: 2px; }
.article .cms-btn--block { display: block; }
.article .cms-btn__sub { display: block; margin-top: 2px; font-size: 0.75rem; font-weight: 500; opacity: 0.9; }

/* 公式サイト・外部リンクへ（製品/サービス・アフィリ含む）＝緑＋外部マーク */
.article .cms-btn--official { background: #3fa372; border-color: #3fa372; }
.article .cms-btn--official:hover { background: #2e7d57; border-color: #2e7d57; }
.article .cms-btn--official::after { content: " ↗"; font-weight: 700; }
/* 関連記事へ（内部回遊）＝アウトライン */
.article .cms-btn--related { color: var(--color-button-hover); background: transparent; box-shadow: none; }
.article .cms-btn--related:hover { background: var(--color-primary-light); }
/* 補助・戻る＝控えめ */
.article .cms-btn--subtle { color: var(--color-text-sub); background: transparent; border-color: var(--color-border); box-shadow: none; }
.article .cms-btn--subtle:hover { background: #f4f5f7; color: var(--color-text); }

/* ===== 表（cms-table） ===== */
.article .cms-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.article .cms-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; background: #fff; }
.article .cms-table caption {
  caption-side: top;
  text-align: left;
  padding: 12px 16px 0;
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--color-text-sub);
}
.article .cms-table th,
.article .cms-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--color-border); }
.article .cms-table thead th { background: var(--color-accent); color: var(--color-text); font-weight: 700; white-space: nowrap; }
.article .cms-table tbody tr:nth-child(even) { background: var(--color-primary-light); }
.article .cms-table tbody tr:last-child td { border-bottom: none; }
.article .cms-table td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ===== 簡易バーグラフ（cms-bars・SVG不要） ===== */
/* 各行に style="--val:70%" を指定して長さを表す */
.article .cms-bars { margin: 24px 0; display: grid; gap: 12px; }
.article .cms-bars__row { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 12px; }
.article .cms-bars__label { font-size: 0.875rem; color: var(--color-text-sub); }
.article .cms-bars__track { background: var(--color-border); border-radius: 999px; overflow: hidden; }