/**
 * article-body.css — 記事本文のタイポグラフィ・装飾
 * 編集画面(be-editor)とフロント(article.php)の両方で読み込まれる
 * 単一ソースとしてWYSIWYG一致を保証する
 *
 * テーマ追加時の注意:
 *   このファイルはCSS変数（--font-heading, --c-accent 等）を参照するため、
 *   テーマCSSで変数を切り替えるだけで見た目が自動で変わる
 *
 * デザイン基準: cms-design A-default の _article.css のタイポグラフィに整合
 */

/* 記事本文コンテナ
   margin-top はタイトル直下に必ず入るアイキャッチ画像ブロックの自然な余白に任せるため不要 */
.article-body {
  letter-spacing: var(--letter-spacing, 0.02em);
  font-family: var(--font-body, "Noto Sans JP", "Hiragino Sans", sans-serif);
  font-size: var(--font-size-base, 17px);
  line-height: var(--line-height, 1.95);
  color: var(--c-text);
  word-break: break-word;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- 見出し ----
 * 見出し直前は大きく空け、直後は段落より気持ち広めに。
 * これで「見出し→本文→見出し」のリズムが息継ぎしやすくなる。
 */
.article-body h2 {
  font-family: var(--font-heading);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.6;
  margin: 88px 0 30px;
  padding: 22px 0 0;
  border-top: 2px solid var(--c-text);
  border-bottom: none;
  letter-spacing: 0.03em;
}

.article-body h3 {
  font-family: var(--font-heading);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  margin: 60px 0 20px;
  padding-left: 14px;
  letter-spacing: 0.03em;
  position: relative;
  border-left: none; /* 既存スタイルを打ち消し、::before で短い縦バーを描く */
}

.article-body h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 3px;
  height: 1em;
  background: var(--c-text);
}

.article-body h4 {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.6;
  margin: 40px 0 16px;
  letter-spacing: 0.03em;
}

/* ---- 段落 ----
 * margin-bottom を 1.4em → 1.7em に拡大しゆとりを出す。
 * p+p の負マージンは「ぎゅっと詰まる」原因のため撤去。
 */
.article-body p {
  margin: 0 0 1.7em;
}

.article-body p + p {
  margin-top: 0;
}

/* ---- 整形済みテキスト（pre）----
 * デフォルトの white-space: pre は折り返さず横スクロールを生むため、
 * 改行は保持しつつ長行は自動折り返しさせる。
 * メール文面・トーク例など「コピペOK」用途を想定。
 */
.article-body pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  margin: 0 0 1.7em;
  /* フォントは本文に揃える（等幅にしない方が読みやすい） */
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  background: transparent;
  padding: 0;
  border: none;
}

/* ボックス内の pre はボックスのフォントサイズ・行間を継承し、最終行の余白は不要 */
.article-body .block-box pre,
.article-body .block-box-content pre {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* ---- インライン強調 ---- */
/* A-default 準拠: strong は単純太字、装飾はem側で */
.article-body strong {
  font-weight: 700;
}

/* em は A-default の .em 風: ベージュ系の薄いマーカー */
.article-body em {
  font-style: normal;
  background: linear-gradient(transparent 62%, var(--c-highlight) 62%);
}

/* ---- リンク ----
 * 本文中の素のリンク（class なし）にだけ装飾を当てる。
 * ボタン状の <a>（block-product-ec-btn / block-ranking-cta / 各 cta-btn 等）や
 * TOC リンク（class が付与される or 親で別途上書き）には適用されない。
 * 色は --c-link 経由（管理画面で上書き可・空欄ならアクセントカラー）。
 */
.article-body a:not([class]) {
  color: var(--c-link, var(--c-accent));
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.article-body a:not([class]):hover {
  text-decoration-thickness: 2px;
}

/* TOC のリンクは A-default の .toc li a 準拠: 通常下線なし、hover で accent + 下線 */
.article-body nav.toc a,
.article-body .toc-list a,
.article-body .toc-item a {
  color: var(--c-text);
  text-decoration: none;
}

.article-body nav.toc a:hover,
.article-body .toc-list a:hover,
.article-body .toc-item a:hover {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
}

/* ボタンブロックのリンク（block-button 配下の素の <a>）は本文リンク装飾を解除
 * 特異度 0,2,1 で .article-body a:not([class]) (0,2,1) と同等以上にして勝つ
 * 基底（normal/solid/shine）は黒背景 + 白文字、outline/more は白背景 + ink文字 */
.article-body .block-button a {
  color: #fff;
  text-decoration: none;
}

.article-body .block-button a:hover {
  color: #fff;
  text-decoration: none;
}

/* outline/more は白背景 + ink 文字（特異度 0,3,1 で基底に勝つ） */
.article-body .block-button--outline a,
.article-body .block-button--more a {
  color: var(--c-text);
  text-decoration: none;
}

.article-body .block-button--outline a:hover {
  color: #fff;
  text-decoration: none;
}

.article-body .block-button--more a:hover {
  color: var(--c-text);
  text-decoration: none;
}

/* 記事末 CTA ボタン */
.article-body .block-cta-button {
  text-decoration: none;
}

.article-body .block-cta-button:hover {
  text-decoration: none;
}

/* 内部リンクカード（block-link-card 配下の素の <a>）も同様に保護
 * HTML は <div class="block-link-card"><a href>...</a></div> で a に class 無し
 * 特異度 0,3,1 で .article-body a:not([class]) (0,2,1) に確実に勝つ */
.article-body .block-link-card a {
  color: inherit;
  text-decoration: none;
}

.article-body .block-link-card a:hover {
  color: inherit;
  text-decoration: none;
}

/* ---- リスト ---- */
.article-body ul,
.article-body ol {
  margin: 20px 0 20px 24px;
  list-style: revert;
}

.article-body ul.checklist {
  list-style: none;
  margin-left: 0;
}

.article-body li {
  margin: 8px 0;
  line-height: 1.95;
}

.article-body ul li::marker {
  color: var(--c-muted);
}

/* ---- 画像 ---- */
.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 28px 0;
}

.article-body img.block-ranking-logo {
  margin: 0;
  border-radius: 0;
}

/* figure 内の img は figure の margin を使うので 0 にリセット
 * （.article-body .block-image img の特異度 0,3,1 で勝つ） */
.article-body .block-image img {
  margin: 0;
}

/* ロゴ画像（block-product-svc-logo）も同様に独自余白を維持 */
.article-body .block-product-svc-logo {
  margin: 14px auto 0;
}

/* ---- 引用 (A-default の .quote 風: 左ボーダーのみのシンプルな装飾) ---- */
/* CMS 出力は <blockquote class="block-quote"> と <div class="block-quote"> の2種類があるため両対応 */
.article-body blockquote,
.article-body .block-quote {
  margin: 24px 0;
  padding: 6px 0 6px 18px;
  border-left: 2px solid var(--c-text);
  background: transparent;
  border-radius: 0;
  font-family: var(--font-heading);
  font-size: 14.5px;
  line-height: 1.95;
  color: var(--c-text);
  font-style: normal;
}

.article-body blockquote p,
.article-body .block-quote p {
  margin: 8px 0;
}

.article-body blockquote cite,
.article-body .block-quote cite {
  display: block;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-size: 11.5px;
  font-style: normal;
  color: var(--c-muted);
  letter-spacing: 0.04em;
}

/* ============================================================
   記事末CTA (.bottom-cta) — Phase 5 で cms-design A-default 構造に置換
   出典: cms-design A-default _article.css の bottom-cta セクション
   ============================================================ */
.bottom-cta {
  margin: 56px 0 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--lp-header-bg, #FBFAF7);
}
.bottom-cta .visual {
  aspect-ratio: 16 / 7;
  background:
    linear-gradient(135deg, rgba(26, 26, 26, 0.04), rgba(26, 26, 26, 0.12)),
    repeating-linear-gradient(135deg, #EFEDE6 0 16px, #E6E3D9 16px 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.bottom-cta .visual::before {
  content: "BANNER";
  position: absolute;
  color: #7A7975;
  font-size: 11px;
  letter-spacing: 0.2em;
}
/* 管理画面で画像を設定した場合は visual を画像に切替 */
.bottom-cta .visual.has-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.bottom-cta .visual.has-image::before {
  display: none;
}
.bottom-cta .visual .ribbon {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ink);
  color: #fff;
  font-size: 11px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  letter-spacing: 0.1em;
}
.bottom-cta .body {
  padding: 28px 28px 32px;
  text-align: center;
}
.bottom-cta .eyebrow {
  font-size: 11.5px;
  letter-spacing: 0.2em;
  color: var(--muted);
  margin-bottom: 10px;
}
.bottom-cta h3.cta-h {
  margin: 0 0 10px;
  padding: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.55;
  border: none;
}
.bottom-cta h3.cta-h::before {
  display: none;
}
.bottom-cta p.cta-p {
  margin: 0 auto 22px;
  max-width: 520px;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.95;
}
.bottom-cta .cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 52px;
  padding: 0 32px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: transform 0.12s ease, background 0.15s ease;
  text-decoration: none;
}
.bottom-cta .cta-btn:hover {
  background: #000;
  color: #fff;
  transform: translateY(-1px);
}
.bottom-cta .cta-btn .arr {
  transition: transform 0.2s ease;
}
.bottom-cta .cta-btn:hover .arr {
  transform: translateX(4px);
}
.bottom-cta .fineprint {
  margin-top: 14px;
  font-size: 11px;
  color: var(--muted-2);
  letter-spacing: 0.06em;
}

/* ========================================
   記事シェアボタン（X / Facebook / LINE / コピー）
   ======================================== */
.article-share {
  margin: 40px 0 24px;
  padding: 24px 0 0;
  border-top: 1px solid var(--c-border);
  text-align: center;
}
.article-share-label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  color: var(--c-muted);
  margin-bottom: 14px;
  font-weight: 500;
  text-transform: uppercase;
}
.article-share-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.article-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  font-family: inherit;
}
.article-share-btn svg {
  flex-shrink: 0;
}
.article-share-btn:hover {
  transform: translateY(-1px);
}
.article-share-btn--x:hover {
  background: #000;
  border-color: #000;
  color: #fff;
}
.article-share-btn--facebook:hover {
  background: #1877F2;
  border-color: #1877F2;
  color: #fff;
}
.article-share-btn--line:hover {
  background: #06C755;
  border-color: #06C755;
  color: #fff;
}
.article-share-btn--copy:hover {
  background: var(--c-highlight);
  border-color: var(--c-text);
  color: var(--c-text);
}
.article-share-btn--copy.is-copied {
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: #fff;
}

@media (max-width: 480px) {
  .article-share-list {
    gap: 6px;
  }
  .article-share-btn {
    height: 36px;
    padding: 0 12px;
    font-size: 11.5px;
  }
  .article-share-btn span:not(.article-share-btn-label) {
    display: none;
  }
  .article-share-btn--copy span {
    display: inline;
  }
}