@charset "UTF-8";
/* ==========================================================================
   showby.net 記事本文スタイル
   style.css を読み込んだ後に読み込むこと。
   <body class="page-article theme--<カテゴリスラッグ>"> を前提にする。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 記事レイアウト
   -------------------------------------------------------------------------- */
.article-layout {
  max-width: 820px;
  margin-inline: auto;
  padding-block: var(--sp-5) var(--sp-8);
}

.article { min-width: 0; }

/* 本文の行長は 36em 前後に収める（UIリニューアル フェーズ2: 可読性向上） */
.article__body { max-width: 36em; }

/* --------------------------------------------------------------------------
   2. 記事ヘッダー
   -------------------------------------------------------------------------- */
.article__header {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--c-line);
}
.article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.article__number {
  color: var(--c-ink-400);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}
/* 読了目安バッジ（UIリニューアル フェーズ2。.card__time と揃えた見た目） */
.article__time {
  color: var(--c-ink-400);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.article__time::before { content: "・"; margin-right: var(--sp-1); }
.article__title {
  font-size: 1.6rem;
  line-height: 1.4;
  letter-spacing: 0.005em;
}
.article__lead {
  margin-top: var(--sp-5);
  max-width: 44em;
  color: var(--c-ink-700);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}
.article__dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-4);
  color: var(--c-ink-400);
  font-size: var(--fs-xs);
}
.article__dates dt { font-weight: 700; }
.article__dates dd { margin: 0; }
.article__dates > div { display: flex; gap: var(--sp-2); }

/* --------------------------------------------------------------------------
   3. 「この記事でわかること」
   -------------------------------------------------------------------------- */
.takeaway {
  margin-top: var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-cat);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
}
.takeaway__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-base);
  color: var(--c-ink-900);
}
.takeaway__list { list-style: none; margin: 0; padding: 0; }
.takeaway__list > li {
  position: relative;
  padding-left: 1.6em;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.takeaway__list > li + li { margin-top: var(--sp-2); }
.takeaway__list > li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--c-cat);
}

/* --------------------------------------------------------------------------
   4. 目次（js/article.js が生成）
   -------------------------------------------------------------------------- */
.toc {
  margin-top: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
}
.toc__title { margin-bottom: var(--sp-3); font-size: var(--fs-base); }
.toc__list { list-style: none; margin: 0; padding: 0; counter-reset: toc; }
.toc__list > li { position: relative; padding-left: 1.9em; }
.toc__list > li + li { margin-top: var(--sp-2); }
.toc__list > li::before {
  counter-increment: toc;
  content: counter(toc) ".";
  position: absolute;
  left: 0;
  font-family: var(--font-serif);
  color: var(--c-cat);
  font-size: var(--fs-base);
  font-weight: 600;
}
.toc__sublist { list-style: none; margin: var(--sp-2) 0 0; padding: 0 0 0 var(--sp-2); }
.toc__sublist > li { position: relative; padding-left: 1em; }
.toc__sublist > li + li { margin-top: var(--sp-1); }
.toc__sublist > li::before {
  content: "–";
  position: absolute;
  left: 0;
  color: var(--c-ink-400);
}
.toc__link {
  color: var(--c-ink-700);
  font-size: var(--fs-sm);
  line-height: 1.6;
  text-decoration: none;
}
.toc__link:hover { color: var(--c-cat); text-decoration: underline; }
.toc__link.is-active { color: var(--c-cat); font-weight: 700; }
/* JS 無効時は空の目次を隠す */
.toc:not(.is-ready) { display: none; }

@media (min-width: 768px) {
  .toc { padding: var(--sp-5) var(--sp-6); }
}

/* --------------------------------------------------------------------------
   5. 本文組版
   -------------------------------------------------------------------------- */
.article__body { margin-top: var(--sp-6); font-size: var(--fs-md); line-height: var(--lh-relaxed); }

.article__body > * + * { margin-top: var(--sp-5); }

.article__body h2 {
  margin-top: var(--sp-8);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--c-cat);
  font-size: var(--fs-xl);
  line-height: 1.45;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.article__body h3 {
  margin-top: var(--sp-6);
  padding-left: var(--sp-3);
  border-left: 4px solid var(--c-cat);
  font-size: var(--fs-lg);
  line-height: 1.5;
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.article__body h4 { margin-top: var(--sp-5); font-size: var(--fs-md); }

.article__body p { text-align: justify; word-break: normal; overflow-wrap: anywhere; line-break: strict; }
.article__body a { color: var(--c-link); }
/* v2: グラデーションのマーカー風下線を廃止し、単色の弁柄の淡色地に置き換える
   （DESIGN_BRIEF v2。影・グラデーションは使わない） */
.article__body strong { font-weight: 700; background: var(--c-cat-soft); padding: 0 0.15em; }

.article__body ul,
.article__body ol { padding-left: 1.4em; }
.article__body li + li { margin-top: var(--sp-2); }
.article__body ul { list-style: disc; }
.article__body ol { list-style: decimal; }
.article__body li::marker { color: var(--c-cat); }

.article__body blockquote {
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--c-line-strong);
  background: var(--c-bg-subtle);
  color: var(--c-ink-700);
  font-size: var(--fs-base);
}
.article__body blockquote p + p { margin-top: var(--sp-3); }

.article__body code {
  padding: 0.1em 0.35em;
  border-radius: var(--radius-sm);
  background: var(--c-bg-sunken);
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* 数式・計算式の強調 */
.formula {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
  font-size: var(--fs-base);
  line-height: 1.8;
  text-align: center;
}
.formula__note { display: block; margin-top: var(--sp-2); color: var(--c-ink-500); font-size: var(--fs-xs); }

/* 本文内の特殊リスト（既定のリスト装飾を打ち消す） */
.article__body ol.steps,
.article__body ul.steps { list-style: none; padding-left: 0; }
.article__body .steps > li { padding-left: 2.75rem; }
.article__body .steps > li + li { margin-top: var(--sp-4); }
.article__body .summary__list { padding-left: 1.4em; }
.article__body .callout ul,
.article__body .callout ol { padding-left: 1.3em; }
.article__body .callout li + li { margin-top: var(--sp-1); }

/* --------------------------------------------------------------------------
   6. 表
   -------------------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
}
.table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  background: var(--c-bg-subtle);
}
.table caption {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg-subtle);
  color: var(--c-ink-700);
  font-size: var(--fs-xs);
  font-weight: 700;
  text-align: left;
}
.table th,
.table td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
  vertical-align: top;
}
.table thead th {
  background: var(--c-navy-900);
  color: var(--c-paper);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.table tbody th { background: var(--c-bg-subtle); font-weight: 700; white-space: nowrap; }
.table tbody tr:last-child th,
.table tbody tr:last-child td { border-bottom: 0; }
.table--numeric td { font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   7. 図表（figure / figcaption）
   -------------------------------------------------------------------------- */
.figure {
  margin: 0;
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
}
.figure__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
  background: var(--c-bg-subtle);
}
.figure__caption {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px dashed var(--c-line);
  color: var(--c-ink-500);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}
.figure__caption b { color: var(--c-ink-900); }

/* --------------------------------------------------------------------------
   8. 注記ボックス
   -------------------------------------------------------------------------- */
.callout {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-ink-400);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.callout__title {
  display: flex;
  font-weight: 700;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}
.callout__title::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: var(--c-ink-400);
}
.callout p + p,
.callout ul { margin-top: var(--sp-3); }

/* 数値・相場の扱いに関する注意（本連載で多用）
   v2: カテゴリ色との連動をやめ、注記の種類ごとに独立した識別色
   （--c-callout-*）を使う。背景色はダークモードで style.css 側の
   トークン上書きにより自動的に暗背景色へ切り替わる。 */
.callout--caution { border-left-color: var(--c-callout-accent); background: var(--c-callout-accent-soft); }
.callout--caution .callout__title::before { background: var(--c-callout-accent); }

/* 補足・用語解説 */
.callout--note { border-left-color: var(--c-callout-neutral); background: var(--c-callout-neutral-soft); }
.callout--note .callout__title::before { background: var(--c-callout-neutral); }

/* 実務チェック */
.callout--check { border-left-color: var(--c-callout-solid); background: var(--c-callout-solid-soft); }
.callout--check .callout__title::before { background: var(--c-callout-solid); }

/* --------------------------------------------------------------------------
   9. まとめ
   -------------------------------------------------------------------------- */
.summary {
  margin-top: var(--sp-7);
  padding: var(--sp-5);
  border: 1px solid var(--c-line);
  border-top: 3px solid var(--c-cat);
  border-radius: var(--radius);
  background: var(--c-bg-subtle);
}
.summary__list { margin: 0; padding-left: 1.3em; font-size: var(--fs-base); }
.summary__list > li + li { margin-top: var(--sp-2); }

/* --------------------------------------------------------------------------
   10. 記事フッター（免責・前後ナビ・関連記事）
   -------------------------------------------------------------------------- */
.article__footer { margin-top: var(--sp-7); }

.disclaimer {
  margin-top: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px dashed var(--c-line-strong);
  border-radius: var(--radius);
  color: var(--c-ink-500);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

.next-read__title,
.related__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
}
.next-read { margin-top: var(--sp-7); }
.related { margin-top: var(--sp-7); }

/* --------------------------------------------------------------------------
   12. UIリニューアル フェーズ2
       - ヘッダーのアイキャッチ（.article__hero は style.css で先行定義済み）
       - 次に読むカードの内側レイアウト（.pager__item-body）
       - デスクトップ 1080px 以上: 本文と目次の2カラム＋目次sticky化
   -------------------------------------------------------------------------- */
.article__hero { margin-bottom: var(--sp-5); }

/* 次に読むカード内の本文ブロック（.next-read--card 自体は style.css で定義） */
.pager__item-body { display: flex; flex-direction: column; gap: var(--sp-2); }

/* デスクトップの sticky 目次レイアウト。
   style.css の `.article-layout--sticky-toc` は .article-layout 自体を2カラム
   グリッド化する定義だが、.article-layout には next-read / related セクションも
   同居しており、そのままグリッド化すると2セクションが誤って2カラムに割り付けられて
   しまう。そのため article.css（後読み込み）側で .article-layout--sticky-toc 自体は
   通常のブロック表示に戻し、実際の2カラム化は .article（見出し・目次・本文・フッターの
   直接の親）に対して grid-template-areas で行う。DOMの並び順（takeaway の次に toc、
   その後に本文という現行構造）は変更していないため、1080px未満（モバイル・タブレット）
   では従来どおり目次が本文冒頭付近にそのまま表示される。
   詳細は ai-work/development/reports/ui-redesign.md を参照。 */
@media (min-width: 1080px) {
  .article-layout--sticky-toc { display: block; max-width: 1120px; }

  .article-layout--sticky-toc .article {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    grid-template-areas:
      "header   toc"
      "takeaway toc"
      "body     toc"
      "footer   toc";
    column-gap: var(--sp-7);
    align-items: start;
  }
  .article-layout--sticky-toc .article__header { grid-area: header; }
  .article-layout--sticky-toc .takeaway { grid-area: takeaway; }
  .article-layout--sticky-toc .article__body { grid-area: body; }
  .article-layout--sticky-toc .article__footer { grid-area: footer; }
  .article-layout--sticky-toc .toc {
    grid-area: toc;
    align-self: start;
    position: sticky;
    top: calc(var(--header-h) + var(--sp-5));
    max-height: calc(100vh - var(--header-h) - var(--sp-6));
    overflow-y: auto;
  }
}

/* --------------------------------------------------------------------------
   13. 印刷
   -------------------------------------------------------------------------- */
@media print {
  .article-layout { max-width: none; padding: 0; }
  .next-read, .related { display: none !important; }
  .article__body { max-width: none; font-size: 10.5pt; }
  .article__body h2 { border-bottom-color: #000; }
  .figure { break-inside: avoid; }
  .table-wrap { overflow: visible; }
  .cta-box { display: none !important; }
}

/* --------------------------------------------------------------------------
   14. CTA（記事内送客ボックス、2026-09-07追加）
       - ai-work/shared/CTA_BRIEF.md / ai-work/sales-marketing/CTA_PLAN.md に準拠。
       - DESIGN_BRIEF v2（紙色・墨・弁柄、グラデーション禁止、影なし、角丸0〜4px）を維持。
         周囲から浮く派手なバナーにはせず、上下のヘアライン罫だけで本文と区切る。
       - PRバッジは景品表示法のステマ規制対応として必須（視認できる位置に固定表示）。
       - 背景・罫線・本文色はダークモード追随トークン（--c-bg-subtle 等）を使う。
         PRバッジのみ --c-accent（弁柄・固定色）+ --c-paper（固定色）で両モード共通にし、
         既存 .btn--accent と同じ「固定色ペア」の考え方に揃える（後段のコントラスト検証対象）。
   -------------------------------------------------------------------------- */
.cta-box {
  margin: var(--sp-6) 0;
  padding: var(--sp-5);
  border-top: 1px solid var(--c-line-strong);
  border-bottom: 1px solid var(--c-line-strong);
  background: var(--c-bg-subtle);
  border-radius: var(--radius);
}
.cta-box__pr {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-3);
}
.cta-box__pr-badge {
  display: inline-block;
  padding: 0.1em 0.6em;
  border-radius: 2px;
  background: var(--c-accent);
  color: var(--c-paper);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.cta-box__pr-text {
  font-size: var(--fs-xs);
  color: var(--c-ink-700);
}
.cta-box__heading {
  margin: 0 0 var(--sp-2);
  font-family: var(--font-serif);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--c-ink-900);
}
.cta-box__body {
  margin: 0 0 var(--sp-4);
  color: var(--c-ink-700);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}
.cta-box__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin: 0;
}
.cta-box__external {
  font-size: var(--fs-xs);
  color: var(--c-ink-700);
}

/* 表の見出し行を黒地から明るい地に */
.table thead th {
  background: var(--c-paper-3);
  color: var(--c-sumi);
  border-bottom: 2px solid var(--c-bengara);
}