/* =================================================================
 * c-prose — 本文リッチテキストのラッパー
 * Figma: タイポグラフィ スタイルガイド 5824:93221
 *
 *   ページ本文（段落・強調・上付き・ルビ・引用・ドロップキャップ）の
 *   タイポグラフィを 1 箇所に集約する。base.css の要素スタイル
 *   （em / sup / ruby / blockquote 等）を活かしつつ、.c-prose 配下で
 *   余白・拡張バリアントだけを足す薄いラッパーとして機能する。
 *
 * 使い方:
 *   <div class="c-prose">
 *     <p>段落 1。</p>
 *     <p>段落 2。<em class="is-accent">アクセント強調</em> も可。</p>
 *     <p class="c-prose__drop-cap">安心な商品・サービスの提供…</p>
 *     <blockquote class="is-on-white">…</blockquote>  {{-- 白背景セクション用 --}}
 *   </div>
 *
 * 対応する Figma 節:
 *   - 段落要素 p（5824:93273）        : .c-prose > p + p の上余白 = 1.5em
 *   - 文字の強調 em（5824:93290）      : <em>=太字、<em class="is-accent">=Key色
 *   - 上付き sup（5824:93304）         : base.css のグローバル sup をそのまま継承
 *   - ルビ ruby/rt（5824:93373）       : base.css のグローバル ruby をそのまま継承
 *   - ドロップキャップ（5824:93525）   : .c-prose__drop-cap::first-letter（138%）
 *   - 引用 blockquote（5824:93589）    : 上下 40px、白背景時は .is-on-white で bg-01
 * =================================================================*/

.c-prose {
  color: var(--color-text-default);
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  letter-spacing: var(--letter-spacing-body);
}

/* ---------- 段落（Figma 5824:93273）---------- */
/* 段落間は表示フォントサイズの 150%。em 指定で見出し格落としにも追従。 */
.c-prose > p + p {
  margin-top: 1.5em;
}

/* ---------- 強調（Figma 5824:93290）---------- */
/* base.css で em は font-weight:bold / font-style:normal 済み。
   アクセント色版は文中の単語をキー色で目立たせたい時に使う。 */
.c-prose em.is-accent {
  color: var(--color-key);
}

/* ---------- ドロップキャップ（Figma 5824:93525）---------- */
/* 1 文字目を 138% で大きく表示。色はキー色。 */
.c-prose__drop-cap::first-letter {
  font-size: 1.38em;
  font-weight: var(--fw-bold);
  color: var(--color-key);
}

/* ---------- 引用（Figma 5824:93589）---------- */
/* 引用テキストブロックの前後余白 40px。本体スタイルは base.css の blockquote。 */
.c-prose > blockquote {
  margin-block: var(--space-7);   /* 40rem ≒ 40px */
}

/* 白背景セクション（Figma 注: 「背景色が白の場合は Back Ground01 へ」） */
.c-prose blockquote.is-on-white,
blockquote.is-on-white {
  background-color: var(--color-bg-01);
}