@charset "UTF-8";
/* ==========================================================================
   article.css — 記事ページ共通テンプレート
   base.css → components.css → article.css の順で読み込む
   ※記事ごとにCSSを作らない。不足したスタイルはこのファイルへ追加する。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 記事レイアウト
   1カラム。読む幅を 720px に絞って可読性を確保する。
   -------------------------------------------------------------------------- */
.article-wrap {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--pad-x);
  padding-block: var(--s-5) var(--s-8);
}

@media (min-width: 768px) {
  .article-wrap { padding-block: var(--s-6) var(--s-9); }
}

/* --- パンくず --- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-2);
  margin-bottom: var(--s-4);
  font-size: 12px;
  color: var(--c-text-muted);
}
.breadcrumb li { display: flex; align-items: center; gap: var(--s-2); }
.breadcrumb li + li::before {
  content: "";
  width: 5px; height: 5px;
  border-top: 1px solid var(--c-border-strong);
  border-right: 1px solid var(--c-border-strong);
  transform: rotate(45deg);
}
.breadcrumb a { color: var(--c-text-sub); }

/* --- タイトル --- */
.article-title {
  font-family: var(--ff-head);
  font-size: 25px;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: .01em;
}

@media (min-width: 768px) {
  .article-title { font-size: 34px; }
}

/* --- 公開日・更新日 --- */
.article-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  margin-top: var(--s-3);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text-muted);
  font-size: 13px;
}
.article-dates time { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   2. 本文タイポグラフィ
   -------------------------------------------------------------------------- */
.article-body { font-size: 16px; line-height: 1.95; }

.article-body > p { margin-block: var(--s-4); }

.article-body h2 {
  margin-top: var(--s-8);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--c-border);
  font-family: var(--ff-head);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 600;
}

.article-body h3 {
  margin-top: var(--s-6);
  margin-bottom: var(--s-3);
  padding-left: var(--s-3);
  border-left: 3px solid var(--c-primary);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 600;
}

.article-body h4 {
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  font-size: 16px;
  font-weight: 600;
}

@media (min-width: 768px) {
  .article-body h2 { font-size: 26px; }
  .article-body h3 { font-size: 20px; }
}

.article-body ul,
.article-body ol {
  margin-block: var(--s-4);
  padding-left: var(--s-5);
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { margin-block: var(--s-2); }
.article-body li::marker { color: var(--c-text-muted); }

.article-body strong { font-weight: 600; }

.article-body a { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   3. 結論BOX（H1直後に置く。最優先で目に入る要素）
   -------------------------------------------------------------------------- */
.conclusion-box {
  margin-block: var(--s-5);
  padding: var(--s-4);
  background: var(--c-primary-light);
  border: 1px solid #c9d8d0;
  border-radius: var(--r-md);
}

@media (min-width: 768px) {
  .conclusion-box { padding: var(--s-5); }
}

.conclusion-box__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-3);
  padding: 2px var(--s-3);
  background: var(--c-primary);
  border-radius: var(--r-pill);
  color: var(--c-text-invert);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
}

.conclusion-box p { margin-block: var(--s-2); line-height: 1.9; }
.conclusion-box p:first-of-type { margin-top: 0; }
.conclusion-box p:last-child { margin-bottom: 0; }

/* 金額を目立たせる */
.amount {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--c-primary-dark);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   4. ポイントBOX / 注意BOX / ケース例BOX
   -------------------------------------------------------------------------- */
.point-box,
.caution-box,
.case-box {
  margin-block: var(--s-5);
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  background: var(--c-bg-surface);
}

.point-box  { border-left: 4px solid var(--c-primary); background: #f6faf8; }
.caution-box{ border-left: 4px solid var(--c-accent);  background: var(--c-accent-light); }
.case-box   { border-left: 4px solid var(--c-beige);   background: var(--c-beige-light); }

.point-box__title,
.caution-box__title,
.case-box__title {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-bottom: var(--s-2);
  font-size: 15px;
  font-weight: 600;
}
.point-box__title   { color: var(--c-primary-dark); }
.caution-box__title { color: #8f4f47; }
.case-box__title    { color: #7d6743; }

.point-box p,
.caution-box p,
.case-box p { margin-block: var(--s-2); font-size: 15px; line-height: 1.9; }
.point-box p:last-child,
.caution-box p:last-child,
.case-box p:last-child { margin-bottom: 0; }

.point-box ul,
.caution-box ul,
.case-box ul {
  margin-block: var(--s-2);
  padding-left: var(--s-5);
  list-style: disc;
  font-size: 15px;
}

/* --- 弔事記事用の修飾 ---
   香典・法事など弔事の記事では、慶事用の赤いアクセントを落ち着いた青みグレーに置き換える。
   暗くはしない（サイト全体の方針）。<div class="article-body article-body--quiet"> で使う。 */
.article-body--quiet .caution-box {
  border-left-color: var(--c-quiet);
  background: var(--c-quiet-light);
}
.article-body--quiet .caution-box__title { color: #4f5b65; }

.article-body--quiet .conclusion-box {
  background: #eef1f3;
  border-color: #d3dade;
}
.article-body--quiet .conclusion-box__label { background: var(--c-quiet); }
.article-body--quiet .amount { color: #46545f; }
.article-body--quiet .article-body h3,
.article-body--quiet h3 { border-left-color: var(--c-quiet); }
.article-body--quiet .point-box {
  border-left-color: var(--c-quiet);
  background: #f4f6f7;
}
.article-body--quiet .point-box__title { color: #4f5b65; }
.article-body--quiet .faq-item__q::before { background: var(--c-quiet); }

/* --------------------------------------------------------------------------
   5. 早見表
   スマホでは各行をカードに組み替えて「一目で分かる」状態を保つ。
   横スクロールはさせない。
   -------------------------------------------------------------------------- */
.table-block { margin-block: var(--s-5); }

.table-block__caption {
  margin-bottom: var(--s-2);
  font-size: 14px;
  font-weight: 600;
  color: var(--c-text-sub);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.data-table th,
.data-table td {
  padding: var(--s-3);
  border: 1px solid var(--c-border);
  text-align: left;
  vertical-align: top;
  line-height: 1.7;
}

.data-table thead th {
  background: var(--c-bg-subtle);
  font-weight: 600;
  white-space: nowrap;
}

.data-table tbody th {
  background: #fbfaf7;
  font-weight: 600;
}

/* 金額列 */
.data-table .num {
  white-space: nowrap;
  font-weight: 600;
  color: var(--c-primary-dark);
}

.table-note {
  margin-top: var(--s-2);
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.8;
}

/* --- スマホ：行をカード化 ---
   「項目」と「金額」を必ず同じ行に並べ、補足だけを下に落とす。
   縦に積むだけだと1行あたりが高くなり、早見表として一目で読めなくなるため。 */
@media (max-width: 639px) {
  .data-table,
  .data-table tbody { display: block; width: 100%; }

  .data-table thead { display: none; }

  .data-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    margin-bottom: var(--s-2);
    padding: var(--s-3);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    background: var(--c-bg-surface);
  }

  .data-table tbody th,
  .data-table td {
    display: block;
    padding: 0;
    border: 0;
    background: none;
  }

  /* 1行目：項目名（左）と金額（右） */
  .data-table tbody th { font-size: 15px; }

  .data-table td.num {
    text-align: right;
    padding-left: var(--s-3);
    font-size: 16px;
  }

  /* 2行目以降：補足は全幅で下に */
  .data-table td:not(.num) {
    grid-column: 1 / -1;
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px dashed var(--c-border);
    color: var(--c-text-sub);
    font-size: 13px;
    line-height: 1.75;
  }

  /* ラベルは補足セルのみに表示（金額は項目名の隣で自明なため不要） */
  .data-table td:not(.num)::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--c-text-muted);
    font-size: 11px;
  }

  /* 2列だけの表は補足が無いので、そのまま左右に並べる */
  .data-table tr:has(td:only-of-type) { align-items: center; }

  /* --- マトリクス表（年代別など、値の列が3つ以上ある表）---
     通常のカード化だと先頭の値が見出し行に並んでラベルを失うため、
     項目名を全幅に置き、値は「ラベル＋数値」を横3列で並べる。 */
  .data-table--matrix tr {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
    align-items: start;
  }

  .data-table--matrix tbody th {
    grid-column: 1 / -1;
    margin-bottom: var(--s-1);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-border);
  }

  /* 基底の .data-table td:not(.num) と同じ詳細度にして、後勝ちで上書きする */
  .data-table--matrix td:not(.num),
  .data-table--matrix td.num {
    grid-column: auto;
    margin: 0;
    padding: 0;
    border: 0;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--c-text);
  }

  .data-table--matrix td:not(.num)::before,
  .data-table--matrix td.num::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--c-text-muted);
    font-size: 11px;
    font-weight: 400;
  }
}

/* --------------------------------------------------------------------------
   6. 目次
   -------------------------------------------------------------------------- */
.toc {
  margin-block: var(--s-6);
  padding: var(--s-4);
  background: var(--c-bg-subtle);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.toc__title {
  margin-bottom: var(--s-2);
  font-size: 15px;
  font-weight: 600;
}

.toc ol { padding-left: 0; list-style: none; counter-reset: toc; }
.toc li { margin-block: 0; counter-increment: toc; }

.toc a {
  display: flex;
  gap: var(--s-2);
  min-height: 40px;
  align-items: center;
  padding-block: var(--s-1);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
}
.toc a::before {
  content: counter(toc) ".";
  flex: none;
  color: var(--c-primary);
  font-weight: 600;
}
.toc a:hover { color: var(--c-primary-dark); text-decoration: underline; }

/* --------------------------------------------------------------------------
   7. FAQ
   -------------------------------------------------------------------------- */
.faq-list { margin-block: var(--s-4); }

.faq-item {
  margin-bottom: var(--s-3);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-bg-surface);
  overflow: hidden;
}

.faq-item__q {
  display: flex;
  align-items: flex-start;
  gap: var(--s-3);
  padding: var(--s-4);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}
.faq-item__q::-webkit-details-marker { display: none; }

.faq-item__q::before {
  content: "Q";
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-text-invert);
  font-size: 13px;
}

/* 開閉マーク */
.faq-item__q::after {
  content: "";
  flex: none;
  width: 8px; height: 8px;
  margin-left: auto;
  margin-top: 7px;
  border-right: 2px solid var(--c-text-muted);
  border-bottom: 2px solid var(--c-text-muted);
  transform: rotate(45deg);
  transition: transform .2s;
}
.faq-item[open] .faq-item__q::after { transform: rotate(-135deg); }

.faq-item__a {
  display: flex;
  gap: var(--s-3);
  padding: 0 var(--s-4) var(--s-4);
  font-size: 15px;
  line-height: 1.9;
  color: var(--c-text-sub);
}
.faq-item__a::before {
  content: "A";
  flex: none;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-bg-subtle);
  color: var(--c-text-sub);
  font-size: 13px;
  font-weight: 600;
}
.faq-item__a p { margin-block: 0 var(--s-2); }
.faq-item__a p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   8. 関連記事
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   8.3 図解（SVG）
   写真は使わない方針のため、説明図はすべてインラインSVGで描く。
   インラインにするのは、CSS変数で慶事／弔事の色を切り替えるため。
   -------------------------------------------------------------------------- */
.figure {
  margin-block: var(--s-6);
}

.figure__body {
  padding: var(--s-4);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
}

.figure__body svg {
  display: block;
  width: 100%;
  height: auto;
}

.figure__caption {
  margin-top: var(--s-2);
  color: var(--c-text-muted);
  font-size: 13px;
  line-height: 1.7;
  text-align: center;
}

/* 図の中の文字。SVG内なので本文のフォント設定を継承させる */
.figure text {
  font-family: var(--ff-base);
  fill: var(--c-text);
}
.figure .fig-label { font-size: 15px; font-weight: 600; }
.figure .fig-sub   { font-size: 12px; fill: var(--c-text-muted); }

/* 記事冒頭のアイキャッチ。水引を抽象化した帯。
   カテゴリーごとに --fig-a / --fig-b を差し替えて色を変える。 */
.eyecatch {
  --fig-a: var(--c-accent);
  --fig-b: var(--c-beige);
  margin-bottom: var(--s-5);
  padding: var(--s-4) var(--s-4) var(--s-3);
  background: var(--c-bg-subtle);
  border-radius: var(--r-md);
}
.eyecatch svg { display: block; width: 100%; height: auto; }

.eyecatch--celebration { --fig-a: #b4685f; --fig-b: #c2ab8c; }
.eyecatch--gift        { --fig-a: #c2ab8c; --fig-b: #4a6b5d; }
.eyecatch--quiet       { --fig-a: #6e7b86; --fig-b: #9aa6ae; }
.eyecatch--noshi       { --fig-a: #4a6b5d; --fig-b: #c2ab8c; }

/* 弔事の記事では図解の赤を使わない */
.article-body--quiet .figure .fig-accent { stroke: var(--c-quiet); }

/* --------------------------------------------------------------------------
   8.5 クラスター一覧（親記事の冒頭に置く、子記事への地図）
   早見表の直後・目次の前に置く。「答え → 自分のケースへ分岐」の順にするため。
   リンクの見た目は .related__list / .related__link を再利用する。
   -------------------------------------------------------------------------- */
.cluster-nav {
  margin-block: var(--s-6);
  padding: var(--s-4);
  background: var(--c-primary-light);
  border: 1px solid var(--c-primary);
  border-radius: var(--r-md);
}

.cluster-nav__title {
  margin-bottom: var(--s-1);
  font-family: var(--ff-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--c-primary-dark);
}

.cluster-nav__lead {
  margin-bottom: var(--s-3);
  font-size: 14px;
  line-height: 1.7;
  color: var(--c-text-muted);
}

/* 弔事の記事では、慶事用の緑ではなく落ち着いた青みグレーにする */
.article-body--quiet .cluster-nav {
  background: var(--c-quiet-light, #f2f4f6);
  border-color: var(--c-quiet);
}
.article-body--quiet .cluster-nav__title { color: var(--c-quiet); }

.related {
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--c-border);
}

.related__title {
  margin-bottom: var(--s-3);
  font-family: var(--ff-head);
  font-size: 19px;
  font-weight: 600;
}

.related__list {
  display: grid;
  gap: var(--s-2);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .related__list { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); }
}

.related__link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  min-height: 56px;
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  color: var(--c-text);
  font-size: 15px;
  line-height: 1.55;
  text-decoration: none;
}
.related__link:hover {
  border-color: var(--c-primary);
  background: var(--c-primary-light);
  text-decoration: none;
}
.related__link::after {
  content: "";
  flex: none;
  width: 7px; height: 7px;
  margin-left: auto;
  border-top: 1.5px solid var(--c-text-muted);
  border-right: 1.5px solid var(--c-text-muted);
  transform: rotate(45deg);
}

/* 本文中に挟む単発の内部リンク */
.inline-link {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-block: var(--s-4);
  padding: var(--s-3) var(--s-4);
  background: var(--c-bg-warm);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  font-size: 15px;
  line-height: 1.6;
  text-decoration: none;
  color: var(--c-text);
}
.inline-link:hover { border-color: var(--c-beige); text-decoration: none; }
.inline-link::before {
  content: "▶";
  flex: none;
  color: var(--c-primary);
  font-size: 11px;
}
.inline-link span { text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   9. 参考情報
   -------------------------------------------------------------------------- */
.references {
  margin-top: var(--s-7);
  padding: var(--s-4);
  background: var(--c-bg-subtle);
  border-radius: var(--r-md);
}

.references__title {
  margin-bottom: var(--s-2);
  font-size: 15px;
  font-weight: 600;
}

.references ol {
  margin: 0;
  padding-left: var(--s-5);
  list-style: decimal;
  font-size: 13px;
  line-height: 1.9;
  color: var(--c-text-sub);
}
.references li { margin-block: var(--s-2); }

.references__note {
  margin-top: var(--s-3);
  color: var(--c-text-muted);
  font-size: 12px;
  line-height: 1.8;
}

/* --------------------------------------------------------------------------
   10. 免責
   -------------------------------------------------------------------------- */
.disclaimer {
  margin-top: var(--s-5);
  padding: var(--s-4);
  border: 1px dashed var(--c-border-strong);
  border-radius: var(--r-md);
  color: var(--c-text-sub);
  font-size: 13px;
  line-height: 1.9;
}