/* ==========================================================================
   BEARS NET — Journal（お知らせ・コラム / NEWS & COLUMN）
   style.css のトークン・共通クラス（.container / .eyebrow / .h2 / .lead /
   .btn / .link-text / .check / .fade / .tag など）を継承し、
   トップページのJOURNALセクション・記事一覧・記事詳細に必要な
   スタイルのみをこのファイルに追加する。
   ========================================================================== */

/* ------------------------------------------------------------
   Breadcrumb
   既存サイトに breadcrumb 相当の要素はないため新規実装。
   将来 Yoast SEO 等が出力するパンくずへそのまま置き換えられる
   ように、シンプルな nav > ol 構造にしている。
------------------------------------------------------------ */
.breadcrumb { margin: 0 0 28px; }
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  line-height: 1.6;
  color: var(--c-note);
}
.breadcrumb__item { display: flex; align-items: center; }
.breadcrumb__item a { color: var(--c-note); font-weight: 500; }
.breadcrumb__item a:hover { color: var(--c-blue); }
.breadcrumb__item + .breadcrumb__item::before {
  content: "/";
  color: var(--c-line);
  margin: 0 8px;
}
.breadcrumb__item[aria-current="page"] { color: var(--c-text-3); }

/* ------------------------------------------------------------
   Journal card
   トップページのJOURNALセクション／記事一覧／記事詳細の関連記事で
   共通して使う記事カード。WordPress化した際は投稿ループの
   1件分（投稿サムネイル＋タイトル＋抜粋）にそのまま対応する想定。
------------------------------------------------------------ */
.journal-card {
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(17, 27, 46, .03);
  transition: opacity .45s ease, box-shadow .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1);
}
.journal-card:hover,
.journal-card:focus-within {
  opacity: .8;
  box-shadow: 0 12px 28px rgba(17, 27, 46, .08);
  transform: translateY(-3px);
}
.journal-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: var(--c-text);
}
.journal-card__link:hover { color: var(--c-text); }
.journal-card__image {
  margin: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-sec-bg);
}
.journal-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  scale: 1;
  transition: scale .65s cubic-bezier(.22, 1, .36, 1);
}
.journal-card:hover .journal-card__image img,
.journal-card:focus-within .journal-card__image img { scale: 1.06; }
.journal-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 26px; }
.journal-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 14px; }
.journal-card__category {
  display: inline-flex;
  align-items: center;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: .04em;
  color: var(--c-blue);
  background: var(--c-blue-bg);
  border: 1px solid var(--c-blue-bd);
  border-radius: 999px;
  padding: 4px 12px;
}
/* 1記事が複数カテゴリーを持つ場合（例: お知らせ + クリエイティブ）に
   journal-card__category を並べて表示するためのラッパー。 */
.journal-card__categories { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.journal-card__date { font-family: var(--f-en); font-size: 12.5px; color: var(--c-note); }
.journal-card__title { margin: 0 0 10px; font-size: 17px; font-weight: 700; line-height: 1.55; color: var(--c-text); }
.journal-card__excerpt { margin: 0 0 18px; font-size: 13.5px; line-height: 1.85; color: var(--c-text-2); flex: 1; }
.journal-card__link-label { margin-top: auto; font-size: 13px; font-weight: 700; color: var(--c-blue); }
.journal-card:hover .journal-card__link-label { color: var(--c-blue-hover); }

@media (prefers-reduced-motion: reduce) {
  .journal-card,
  .journal-card__image img { transition: none; }
}

/* ------------------------------------------------------------
   01 トップページ — WEB JOURNAL セクション
------------------------------------------------------------ */
.journal { padding: var(--sec-y) 0; background: var(--c-sec-bg); }
.journal__head { margin: 0 0 52px; }
.journal__head .h2 { margin: 0 0 20px; }
.journal__head .lead { margin: 0; max-width: 640px; }
@media (min-width: 1101px) {
  .home .journal__head .h2 {
    font-size: clamp(34px, 3.1vw, 44px);
    white-space: nowrap;
  }
}
.journal__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
  margin: 0 0 48px;
}
.journal__foot { text-align: center; }

/* ------------------------------------------------------------
   02 記事一覧ページ（journal/index.html）
------------------------------------------------------------ */
.journal-hero {
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 4vw, 56px);
  background: var(--c-fv-bg);
  border-bottom: 1px solid var(--c-border-h);
}
.journal-hero .eyebrow { margin-bottom: 18px; }
.journal-hero .h2 { margin: 0 0 20px; }
.journal-hero .lead { margin: 0; max-width: 680px; }

/* カテゴリータブ（journal/index.html の絞り込みボタン）。
   <button> 要素にしているため、UAのデフォルト装飾をリセットしつつ
   .journal-categories__item.is-current で選択中の見た目を出している。
   WordPress化した際は、この一覧をカテゴリータームのループに置き換える想定。 */
.journal-categories { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.journal-categories__item {
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid var(--c-border);
  color: var(--c-text-3);
  background: #fff;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.journal-categories__item:hover { color: var(--c-blue); border-color: var(--c-blue-bd); }
.journal-categories__item:focus-visible { outline: 2px solid var(--c-blue); outline-offset: 2px; }
.journal-categories__item.is-current { color: #fff; background: var(--c-blue); border-color: var(--c-blue); }
.journal-categories__item.is-current:hover { color: #fff; }

.journal-list { padding: var(--sec-y) 0; background: #fff; }
.journal-list__categories { margin: 0 0 44px; }
.journal-list__empty { margin: 0 0 32px; font-size: 14px; color: var(--c-text-3); }
.journal-list__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 28px;
}

/* ------------------------------------------------------------
   03 記事詳細ページ（journal/各記事フォルダ/index.html）
------------------------------------------------------------ */
.journal-article-page { padding: clamp(48px, 6vw, 80px) 0 var(--sec-y); background: #fff; }
/* 記事詳細ページの幅ルール：
   single.php 側で .journal-article__inner に .container--sm（960px）を
   指定しているため、パンくず・記事ヘッダー・アイキャッチ・本文・表・
   カード・CTAなど、記事内のすべての要素はこの960px幅の中にそのまま
   収まる。コンポーネントごとに個別の max-width は指定しないこと
   （左右端をきれいに揃えるための最優先ルール）。 */

.journal-article__header { margin: 0 0 32px; }
.journal-article__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin: 0 0 18px; }
.journal-article__title { margin: 0 0 20px; font-size: clamp(24px, 3.2vw, 34px); font-weight: 900; line-height: 1.55; color: var(--c-text); }
.journal-article__lead { margin: 0; font-size: 16px; line-height: 1.9; color: var(--c-text-2); }

.journal-article__eyecatch { margin: 0 0 48px; border-radius: var(--radius-card); overflow: hidden; background: var(--c-sec-bg); }
.journal-article__eyecatch img { width: 100%; height: auto; display: block; }

/* 本文（article-content） */
.article-content h2 {
  position: relative;
  margin: clamp(56px, 6vw, 80px) 0 24px;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 800;
  line-height: 1.5;
  color: var(--c-text);
}
.article-content h2::before {
  content: "";
  display: block;
  width: 32px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--c-navy);
  border-radius: 2px;
}
.article-content h2:first-child { margin-top: 0; }
.article-content h3 { margin: 32px 0 14px; font-size: 17px; font-weight: 700; color: var(--c-text); }
.article-content p { margin: 0 0 20px; font-size: 15.5px; line-height: 1.95; color: var(--c-text-2); }
.article-content ul {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.article-content ul li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.85; color: var(--c-text-2); }
.article-content ul li .check { margin-top: 3px; }
.article-content strong { color: var(--c-text); font-weight: 700; }


/* ==========================================================================
   記事本文（article-content）用 追加コンポーネント一覧
   ここから下は the_content() 内で使う再利用可能なパーツ。すべて記事本文の
   直接の子として配置する想定（ネストして使うと上の幅リセットが効かない）。

   1. article-summary          … 冒頭の要点まとめ（この記事でわかること）
      .article-summary__title / .article-summary__list（li に .check を使用）
   2. article-toc              … 目次（この記事の内容）
      .article-toc__title / .article-toc__list（li 内に <a href="#見出しid">）
   3. article-point            … POINT強調ボックス
      .article-point__label / .article-point__body
   4. article-note             … 軽い補足ボックス（タイトル任意）
      .article-note__title / .article-note__body
   5. article-warning-grid / article-warning-card … 注意点リスト（縦に番号付きで並べる）
      .article-warning-card__num / .article-warning-card__title / .article-warning-card__desc
   6. article-price-grid / article-price-card … 料金カード（3列、1記事内で複数回使用可）
      .article-price-card__badge / __title / __price / __desc、中央強調は --featured
   7. article-feature-grid / article-feature-card … 機能タイル（4列→2列→1列）
      .article-feature-card__icon（中に別担当がinline SVGを入れる） / __label
   8. article-compare           … 2列比較（優劣をつけない同一デザイン）
      .article-compare__col / __title / __list
   9. article-checklist         … チェックリスト（依頼前チェックリスト等）
      li 内に .article-checklist__box + テキスト
   10. article-highlight        … 強調メッセージ（背景色なし、太字＋上下の細い罫線）
   11. article-diagram          … CSSのみの簡易図解（制作費 + 運用費）
      .article-diagram__box / __box-title / __box-desc / __box-items / .article-diagram__item / .article-diagram__plus
   12. article-cta--dark        … 既存 .article-cta の修飾クラス（ネイビー背景・白文字）
      併用: .article-cta__actions（ボタン2つを横並びで置くラッパー）
   13. article-section-label    … 廃止（H2前のSECTION表記はテンプレート感が強いため非表示化。
      新規記事では使わないこと。H2側の::beforeで短いネイビーのアクセントラインを自動表示する）
   ========================================================================== */

:root {
  /* 記事内カード・BOXの角丸はここで統一（コンポーネントごとにバラバラにしない）。 */
  --radius-card: 12px;
  /* 「格安の注意点」カード等で使う、赤を使わない軽い警告トーン。 */
  --c-warning-bg: #F8F4EC;
  --c-warning-bd: #ECE2CE;
}

/* 1. 要点まとめ（この記事でわかること） */
.article-summary {
  margin: 0 0 32px;
  padding: clamp(24px, 2.8vw, 30px);
  background: var(--c-blue-bg);
  border: 1px solid var(--c-blue-bd);
  border-radius: var(--radius-card);
}
.article-summary__title { margin: 0 0 16px; font-size: 16px; font-weight: 800; color: var(--c-text); }
.article-summary__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.article-summary__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.85; color: var(--c-text-2); }
/* 既存の .check（円形チェック）をそのまま li 内で使う運用を基本とするが、
   span.check を入れ忘れた場合のフォールバックとして擬似要素でも✓を出す。 */
.article-summary__list li .check { margin-top: 3px; }
.article-summary__list li:not(:has(.check))::before {
  content: "✓";
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--c-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

/* 2. 目次（この記事の内容） */
.article-toc {
  margin: 0 0 32px;
  padding: clamp(22px, 2.6vw, 28px);
  background: var(--c-sec-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.article-toc__title { margin: 0 0 16px; font-size: 15px; font-weight: 800; color: var(--c-text); }
.article-toc__list { margin: 0; padding: 0; list-style: none; counter-reset: article-toc; display: grid; gap: 4px; }
.article-toc__list li { counter-increment: article-toc; display: flex; align-items: baseline; gap: 10px; font-size: 14px; }
.article-toc__list li::before {
  content: counter(article-toc, decimal-leading-zero);
  flex: none;
  font-family: var(--f-en);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-blue);
}
.article-toc__list a { color: var(--c-blue); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s ease, color .15s ease; }
.article-toc__list a:hover { color: var(--c-blue-hover); border-color: currentColor; }

/* 3. POINTボックス */
.article-point {
  margin: 0 0 28px;
  padding: clamp(20px, 2.4vw, 26px) clamp(22px, 2.6vw, 28px);
  background: var(--c-blue-bg);
  border-left: 4px solid var(--c-navy);
  border-radius: 0 var(--radius-card) var(--radius-card) 0;
}
.article-point__label { display: block; margin: 0 0 8px; font-family: var(--f-en); font-weight: 800; font-size: 12px; letter-spacing: .08em; color: var(--c-blue); }
.article-point__body { margin: 0; font-size: 14.5px; line-height: 1.9; color: var(--c-text-2); }

/* 4. 軽い補足ボックス */
.article-note {
  margin: 0 0 28px;
  padding: clamp(18px, 2.2vw, 24px) clamp(20px, 2.4vw, 24px);
  background: var(--c-sec-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.article-note__title { margin: 0 0 8px; font-size: 13.5px; font-weight: 700; color: var(--c-text); }
.article-note__body { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--c-text-3); }

/* 5. 注意点リスト（格安ホームページの注意点など。カード4枚並びではなく、
   縦に番号付きで並べる構成。赤は使わずベージュで、POINTボックスと区別する） */
.article-warning-grid {
  display: grid;
  gap: 0;
  margin: 0 0 32px;
  padding: 0 clamp(20px, 2.4vw, 28px);
  background: var(--c-warning-bg);
  border: 1px solid var(--c-warning-bd);
  border-radius: var(--radius-card);
}
.article-warning-card {
  padding: clamp(18px, 2vw, 22px) 0;
}
.article-warning-card + .article-warning-card { border-top: 1px solid var(--c-warning-bd); }
.article-warning-card__num {
  display: block;
  margin: 0 0 8px;
  font-family: var(--f-en);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .06em;
  color: var(--c-text-3);
}
.article-warning-card__title { margin: 0 0 6px; font-size: 14.5px; font-weight: 700; color: var(--c-text); }
.article-warning-card__desc { margin: 0; font-size: 13px; line-height: 1.8; color: var(--c-text-2); }

/* 6. 料金カード（1記事内で複数回使う想定。中央強調に --featured） */
.article-price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 32px;
}
.article-price-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(24px, 2.6vw, 30px) clamp(18px, 2.2vw, 24px);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  text-align: center;
  transition: box-shadow .2s ease, border-color .2s ease;
}
.article-price-card__badge {
  display: inline-flex;
  align-items: center;
  margin: 0 0 14px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 700;
  color: var(--c-blue);
  background: var(--c-blue-bg);
  border: 1px solid var(--c-blue-bd);
  border-radius: 999px;
}
.article-price-card__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--c-text); }
.article-price-card__price { margin: 0 0 12px; font-size: clamp(24px, 2.6vw, 30px); font-weight: 800; line-height: 1.3; color: var(--c-blue); }
.article-price-card__price small { font-size: 13px; font-weight: 600; color: var(--c-note); }
.article-price-card__desc { margin: 0; font-size: 13.5px; line-height: 1.85; color: var(--c-text-2); }
.article-price-card--featured {
  border-color: var(--c-navy);
  box-shadow: 0 10px 30px rgba(0, 30, 70, .08);
}

/* 7. 機能タイル（8項目程度、アイコンは別担当がinline SVGを追加） */
.article-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 16px;
  margin: 0 0 32px;
}
.article-feature-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 14px;
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: 12px;
  text-align: center;
}
.article-feature-card__icon {
  flex: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--c-blue-bg);
  color: var(--c-blue);
  display: grid;
  place-items: center;
}
.article-feature-card__icon svg { width: 100%; height: 100%; }
.article-feature-card__label { font-size: 13px; font-weight: 700; line-height: 1.5; color: var(--c-text); }

/* 8. 比較レイアウト（優劣をつけないため左右とも同一クラス） */
.article-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 20px;
  margin: 0 0 32px;
}
.article-compare__col {
  padding: clamp(24px, 2.6vw, 30px);
  background: var(--c-sec-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.article-compare__title { margin: 0 0 16px; font-size: 16px; font-weight: 800; text-align: center; color: var(--c-text); }
.article-compare__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.article-compare__list li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.8; color: var(--c-text-2); }
.article-compare__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--c-blue); }

/* 9. チェックリスト（依頼前チェックリスト等） */
.article-checklist { margin: 0 0 28px; padding: 0; list-style: none; display: grid; gap: 14px; }
.article-checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 14.5px; line-height: 1.8; color: var(--c-text-2); }
.article-checklist__box { flex: none; width: 18px; height: 18px; margin-top: 3px; background: #fff; border: 1.5px solid var(--c-line); border-radius: 4px; }

/* 10. 強調メッセージ（背景色の大きな箱にはせず、太字＋上下の細いラインだけで見せる） */
.article-highlight {
  margin: 40px 0 36px;
  padding: 28px 0;
  border-top: 1px solid var(--c-border);
  border-bottom: 1px solid var(--c-border);
  text-align: center;
}
.article-highlight p,
.article-highlight { font-size: clamp(19px, 2.3vw, 25px); font-weight: 800; line-height: 1.7; color: var(--c-navy); }
.article-highlight p { margin: 0; }

/* 11. CSSのみの簡易図解（制作費 ＋ 運用費） */
.article-diagram {
  display: flex;
  align-items: stretch;
  gap: 18px;
  margin: 0 0 32px;
}
.article-diagram__box {
  flex: 1;
  min-width: 0;
  padding: clamp(22px, 2.6vw, 28px);
  background: #fff;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
  text-align: center;
}
.article-diagram__box-title { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--c-text); }
.article-diagram__box-desc { margin: 0; font-size: 13.5px; line-height: 1.8; color: var(--c-text-2); }
.article-diagram__box-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 0; }
.article-diagram__item {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c-blue);
  background: var(--c-blue-bg);
  border: 1px solid var(--c-blue-bd);
  border-radius: 999px;
}
.article-diagram__plus {
  flex: none;
  align-self: center;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  font-size: 20px;
  font-weight: 800;
  color: var(--c-navy);
}

/* 13. 見出し装飾（旧: h2直前の英字ラベル） — テンプレート感が強いため非表示化。
   H2側の::before（ネイビーの短いアクセントライン）に置き換えた。
   新規記事では article-section-label を使わないこと。 */
.article-section-label { display: none; }
/* h3 をわずかに強調する小さな四角アイコン（レイアウトは変更しない） */
.article-content h3::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 8px;
  background: var(--c-blue);
  border-radius: 1px;
  vertical-align: middle;
}

/* 関連サービス */
.article-services {
  margin: 12px 0 56px;
  padding: clamp(26px, 3vw, 34px);
  background: var(--c-sec-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.article-services__title { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--c-text); }
.article-services__desc { margin: 0 0 18px; font-size: 14px; line-height: 1.85; color: var(--c-text-2); }

/* この記事を書いた人（contact.html の c-person 構造を参考に記事用へ作り直したもの） */
.article-author {
  margin: 0 0 56px;
  padding: clamp(24px, 2.6vw, 30px);
  background: var(--c-sec-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-card);
}
.article-author__label { margin: 0 0 16px; font-family: var(--f-en); font-weight: 600; font-size: 11px; letter-spacing: .14em; color: var(--c-note); }
.article-author__row { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; }
.article-author__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; display: block; }
.article-author__meta { line-height: 1.4; }
.article-author__org { margin: 0 0 3px; font-size: 12px; color: var(--c-note); }
.article-author__name { margin: 0 0 3px; font-weight: 700; font-size: 16px; color: var(--c-text); }
.article-author__role { margin: 0; font-size: 12.5px; color: var(--c-text-3); }
.article-author__body { margin: 0; font-size: 14px; line-height: 1.9; color: var(--c-text-2); }

/* 関連記事 */
.article-related { margin: 0 0 56px; }
.article-related__title { margin: 0 0 24px; font-size: 19px; font-weight: 800; color: var(--c-text); }
.article-related__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 22px;
}

/* 問い合わせCTA（privacy-cta を参考に記事末尾用へ拡張） */
.article-cta {
  margin-top: clamp(48px, 5vw, 64px);
  padding: clamp(32px, 4vw, 44px) clamp(24px, 4vw, 40px);
  background: var(--c-blue-bg);
  border: 1px solid var(--c-blue-bd);
  border-radius: var(--radius-card);
  text-align: center;
}
.article-cta__title { margin: 0 0 14px; font-size: clamp(19px, 2vw, 23px); font-weight: 800; color: var(--c-text); }
.article-cta__body { margin: 0 0 26px; font-size: 14.5px; line-height: 1.9; color: var(--c-text-2); }

/* 12. article-cta のネイビー版（既存 .article-cta の中身は変更せず、修飾クラスで上書き） */
.article-cta.article-cta--dark { background: var(--c-navy); border-color: var(--c-navy); }
.article-cta--dark .article-cta__title { color: #fff; }
.article-cta--dark .article-cta__body { color: rgba(255, 255, 255, .78); }
/* ボタン2つ（メインボタン＋補助テキストリンク）を横並びで置くラッパー */
.article-cta__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 28px;
}
.article-cta--dark .article-cta__actions .btn { color: #fff; }
.article-cta--dark .article-cta__actions .link-text { color: #fff; border-color: rgba(255, 255, 255, .5); }
.article-cta--dark .article-cta__actions .link-text:hover { color: #fff; border-color: #fff; }

/* 15. 表（table）— 素の table/th/td にBEARS NETのトーンを合わせ、スマホでは横スクロール */
.article-content table {
  display: block;
  width: 100%;
  margin: 0 0 24px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  font-size: 14px;
}
.article-content table th,
.article-content table td {
  padding: 12px 16px;
  border: 1px solid var(--c-border);
  text-align: left;
  line-height: 1.7;
  color: var(--c-text-2);
}
.article-content table thead th {
  background: var(--c-sec-bg);
  font-weight: 700;
  color: var(--c-text);
  white-space: nowrap;
}

/* ------------------------------------------------------------
   レスポンシブ（既存ブレークポイント 1100 / 900 / 640 相当に合わせる）
------------------------------------------------------------ */
@media (max-width: 900px) {
  .journal__head { margin-bottom: 40px; }
  .article-author__row { align-items: flex-start; }
  .article-price-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .journal { padding: clamp(56px, 12vw, 80px) 0; }
  .journal__grid { gap: 20px; }
  .journal-card__body { padding: 20px 20px 22px; }
  .journal-list__grid { gap: 20px; }
  .journal-article__title { font-size: 24px; }
  .journal-article__lead { font-size: 15px; }
  .article-content h2 { margin: 40px 0 16px; }
  .article-content p,
  .article-content ul li { font-size: 14.5px; }
  .article-author__row { gap: 14px; }
  .article-author__photo { width: 56px; height: 56px; }
  .article-cta { padding: 28px 20px; }
  .article-related__grid { gap: 16px; }

  /* 記事内コンポーネント（幅広グリッド・図解・CTAボタン列）のスマホ調整 */
  .article-price-grid { grid-template-columns: 1fr; }
  .article-diagram { flex-direction: column; }
  .article-diagram__plus { margin: 0 auto; }
  .article-cta__actions { flex-direction: column; }
}

/* ==========================================================================
   SP Design System — お知らせ・コラム（journal）側の個別調整
   共通トークン（--sp-vw / --sp-side / --sp-section / --sp-card-radius /
   --sp-card-padding）は assets/css/style.css で定義したものをそのまま使う。
   ========================================================================== */
@media screen and (max-width: 48em) {
  /* 記事内カード・BOXの角丸をサイト全体のSP角丸ルールに統一。
     --radius-card を参照している全コンポーネント（summary/toc/point/note/
     price-card/feature-card/compare/diagram/services/author/cta等）に
     自動的に反映される。 */
  :root { --radius-card: var(--sp-card-radius); }

  /* 見出し・本文サイズ */
  .journal-hero { padding: calc(48 * var(--sp-vw)) 0 calc(32 * var(--sp-vw)); }
  .journal-hero .eyebrow { margin-bottom: calc(14 * var(--sp-vw)); }
  .journal__head { margin-bottom: calc(32 * var(--sp-vw)); }
  .journal__foot { text-align: left; }
  .journal-list__categories { margin-bottom: calc(28 * var(--sp-vw)); }

  .journal-article-page { padding-top: calc(32 * var(--sp-vw)); }
  .journal-article__header { margin-bottom: calc(24 * var(--sp-vw)); }
  .journal-article__title {
    font-size: clamp(22px, calc(26 * var(--sp-vw)), 27px);
    line-height: 1.5;
  }
  .journal-article__lead {
    font-size: clamp(14px, calc(15.5 * var(--sp-vw)), 16px);
    line-height: 1.8;
  }
  .journal-article__eyecatch { margin-bottom: calc(32 * var(--sp-vw)); }

  /* カードの余白・角丸・影を他セクションと統一 */
  .journal__grid,
  .journal-list__grid,
  .article-related__grid { gap: calc(16 * var(--sp-vw)); }
  .journal-card { border-radius: var(--sp-card-radius); box-shadow: none; }
  .journal-card__body { padding: var(--sp-card-padding) calc(18 * var(--sp-vw)) calc(20 * var(--sp-vw)); }
  .journal-card__title { font-size: clamp(15.5px, calc(16.5 * var(--sp-vw)), 17px); }
  .journal-card__excerpt { font-size: clamp(13px, calc(13.5 * var(--sp-vw)), 14px); }

  /* カテゴリー絞り込みボタン：タップしやすい高さを確保 */
  .journal-categories { gap: calc(8 * var(--sp-vw)); }
  .journal-categories__item {
    min-height: 40px;
    padding: 0 calc(16 * var(--sp-vw));
    font-size: clamp(12.5px, calc(13 * var(--sp-vw)), 13.5px);
  }

  /* 記事本文コンポーネントの文字サイズ */
  .article-content h2 {
    margin-top: calc(40 * var(--sp-vw));
    font-size: clamp(19px, calc(21 * var(--sp-vw)), 22px);
  }
  .article-content h3 { font-size: clamp(15.5px, calc(16.5 * var(--sp-vw)), 17px); }
  .article-content p,
  .article-content ul li {
    font-size: clamp(14px, calc(15 * var(--sp-vw)), 15.5px);
    line-height: 1.85;
  }

  .article-summary,
  .article-toc,
  .article-note,
  .article-warning-grid,
  .article-compare__col,
  .article-services,
  .article-author,
  .article-cta { padding: var(--sp-card-padding) calc(20 * var(--sp-vw)); }
  .article-price-card,
  .article-feature-card { padding: calc(20 * var(--sp-vw)) calc(16 * var(--sp-vw)); }
  .article-point { padding: calc(18 * var(--sp-vw)) calc(20 * var(--sp-vw)); }

  .article-author__photo { width: calc(52 * var(--sp-vw)); height: calc(52 * var(--sp-vw)); }
  .article-cta .btn { width: 100%; justify-content: center; }
}