/* ===========================================================================
   Chikara Media — bundled theme stylesheet
   ---------------------------------------------------------------------------
   Generated by expanding mock-source/src/styles/main.css and its @import
   graph, in the same order main.css declares them (Tokens > Base > Layout >
   Components). Enqueued via inc/enqueue.php as the chikara-main handle.

   components/_form.css exists in mock-source but is not @imported by
   main.css and is not linked from any mockup HTML page, so it is excluded
   here to match the mockup's actual (effective) build output.
   =========================================================================== */

/* --- source: mock-source/src/styles/_tokens.css --- */
/* ===========================================================================
   デザイントークン
   すべての色・余白・文字サイズはここに集約する。
   個別のCSSファイルでは生の値（#fff や 24px）を直接書かない。
   ---------------------------------------------------------------------------
   方針（2026 リニューアル / 参考：電通報）

     - 構造は「墨と白」でつくる。ボタン・帯・見出しの罫は黒に寄せ、
       色は情報の分類にだけ使う。青を構造色に使うと、
       どのリンクが重要なのか区別がつかなくなる。
     - カテゴリは「色ドット＋黒文字」。色を文字に乗せないので、
       色は見分けやすさを優先して鮮やかにできる。
     - カードは枠線で囲まない。余白と画像の角丸で区切る。
       罫線で全部を囲うと、一覧が表組みのように見えて読み進めにくい。
     - セクション見出しは大きく。背後に英字を薄く敷いて、
       スクロール中でも「いまどのセクションか」が分かるようにする。
   =========================================================================== */

:root {
  /* --- 墨（構造と文字）----------------------------------------------------
     見出し・ボタン・帯はここ。白地に対して十分な濃さを確保する。 */
  --ink-900: #111111; /* 見出し・ボタン地・強調 */
  --ink-800: #1f1f1f;
  --ink-700: #333333; /* 本文 */
  --ink-500: #6e6e6e; /* 補助テキスト・日付 */
  --ink-400: #919191; /* さらに弱い補助。罫線寄り */
  --ink-300: #b5b5b5;

  /* --- ブランド（リンクと操作）--------------------------------------------
     構造色から降りて、「押せるもの」の目印に専念させる。
     現行の #4992E5 の系統を保ちつつ、白地で読める濃さにしている。 */
  --brand-700: #0b57c7;
  --brand-600: #1668e3; /* リンク・操作の主色 */
  --brand-500: #4e91fd; /* 図版・装飾 */
  --brand-200: #a9cbfe;
  --brand-100: #d3e4ff;
  --brand-050: #f1f6ff;

  /* --- 強調色（NEW・残席・警告）------------------------------------------ */
  --accent-700: #c22f20;
  --accent-600: #d93a29; /* 文字に使う濃さ */
  --accent-500: #ff5c5c; /* ドット・塗り */
  --accent-050: #fff1f0;

  /* --- 面と罫線 -----------------------------------------------------------
     面はほぼ白。区切りは余白が主役で、罫線は補助。 */
  --bg: #ffffff;
  --bg-soft: #f7f7f8;
  --bg-sunken: #efeff1;
  --surface: #ffffff;
  --surface-hover: #fafafa;
  --line: #e6e6e8;
  --line-strong: #d0d0d3;

  /* --- カテゴリ（5つのチカラ＋言葉のチカラ）------------------------------
     -vivid … 色ドット・帯・図版。彩度を上げて見分けやすさを優先。
     （無印）… 文字や細い罫に使う濃さ。白地でコントラストを確保する。
     文字に色を乗せる場面が残っているため、2段構えにしている。 */
  --cat-kotoba: #c0392b;
  --cat-kotoba-vivid: #ff5c5c;
  --cat-kotoba-bg: #fdeeec;

  --cat-money: #a06a00;
  --cat-money-vivid: #ffb020;
  --cat-money-bg: #fdf3e2;

  --cat-recruit: #c03a63;
  --cat-recruit-vivid: #fb77a6;
  --cat-recruit-bg: #fdedf3;

  --cat-dx: #5b46d6;
  --cat-dx-vivid: #7b61ff;
  --cat-dx-bg: #f0edff;

  --cat-web: #0e7d70;
  --cat-web-vivid: #36ad9f;
  --cat-web-bg: #e6f6f3;

  --cat-solution: #2f6fd0;
  --cat-solution-vivid: #4e91fd;
  --cat-solution-bg: #ecf3fe;

  /* --- 影 -----------------------------------------------------------------
     枠線を減らしたぶん、浮かせる場面では影を使う。ただし濃くしない。 */
  --shadow-sm: 0 1px 2px rgb(17 17 17 / 5%);
  --shadow-md: 0 4px 16px rgb(17 17 17 / 8%);
  --shadow-lg: 0 12px 32px rgb(17 17 17 / 12%);

  /* --- 角丸 ---------------------------------------------------------------
     画像とカードは大きめの角丸、ボタンとラベルは全丸。
     直角をやめて、情報の塊が「面」として見えるようにする。 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- タイポグラフィ -----------------------------------------------------
     本文は16px。見出しは思い切って大きくし、差をつける。 */
  --font-sans:
    "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
    "Yu Gothic Medium", "Meiryo", system-ui, sans-serif;
  --font-en: "Bricolage Grotesque", "Barlow Condensed", var(--font-sans);
  /* 見出しの格を上げたいところにだけ使う明朝。
     経営誌の見出しと同じ作法で、本文・UIはゴシックのまま残す。 */
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --fs-2xs: 0.75rem; /* 12px ラベル */
  --fs-xs: 0.8125rem; /* 13px 日付・補助 */
  --fs-sm: 0.875rem; /* 14px リスト項目 */
  --fs-base: 0.9375rem; /* 15px カード本文 */
  --fs-body: 1rem; /* 16px UI基準 */
  --fs-md: 1.0625rem; /* 17px */
  --fs-lg: 1.25rem; /* 20px 小見出し */
  --fs-xl: 1.5rem; /* 24px */
  --fs-2xl: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); /* 24〜32px セクション見出し */
  --fs-3xl: clamp(
    1.875rem,
    1.2rem + 2.6vw,
    2.75rem
  ); /* 30〜44px ページ見出し */
  --fs-display: clamp(2.25rem, 1.2rem + 4vw, 3.5rem); /* 特大 */

  /* 記事本文だけは別建てにする（UIのサイズ変更に引きずられないように） */
  --fs-prose: 1.0625rem;
  --fs-prose-pc: 1.125rem;

  --lh-tight: 1.35;
  --lh-snug: 1.55;
  --lh-ui: 1.75; /* 一覧・カード */
  --lh-body: 1.9; /* 記事本文 */

  /* --- 余白（4pxグリッド）------------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.25rem;
  --sp-6: 1.5rem;
  --sp-8: 2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* セクション間は広めに取る。詰めると一覧が単調に見える */
  --section-gap: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* --- レイアウト --------------------------------------------------------- */
  --container: 1200px;
  /* 右カラムの幅。MV・ランキング・本文横の追従枠で共通にして、
     ページの右端に1本の線が通るようにする */
  --rail-w: 320px;
  --container-narrow: 760px; /* 記事本文の1カラム幅 */
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --header-h: 56px;
  --header-h-pc: 64px; /* PCの上段（ロゴ段）の高さ。ナビ段は別途45px前後 */

  /* --- モーション ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  --z-header: 100;
  --z-drawer: 200;
  --z-overlay: 190;
}

/* --- source: mock-source/src/styles/_base.css --- */
/* ===========================================================================
   リセット & 基本タイポグラフィ
   =========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 追従ヘッダーの高さぶん、アンカー移動先をずらす */
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

@media (min-width: 900px) {
  html {
    scroll-padding-top: calc(var(--header-h-pc) + var(--sp-4));
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  font-feature-settings: "palt" 1; /* 日本語の詰め組み */
  color: var(--ink-700);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* 上の display:block はブラウザ標準の [hidden]{display:none} より強いので、
   hidden 属性が効かなくなる。明示的に打ち消しておく。 */
[hidden] {
  display: none !important;
}

img {
  height: auto;
  background: var(--bg-sunken);
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

h1,
h2,
h3,
h4 {
  color: var(--ink-900);
  line-height: var(--lh-tight);
  font-weight: 700;
  letter-spacing: 0.01em;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--brand-600);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

/* --- フォーカスリング -------------------------------------------------------
   マウス操作では出さず、キーボード操作のときだけはっきり出す。 */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* --- ユーティリティ -------------------------------------------------------- */

/* スクリーンリーダー専用テキスト */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* キーボードでTab移動した時だけ現れる「本文へスキップ」リンク */
.u-skip-link {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  z-index: calc(var(--z-drawer) + 10);
  padding: var(--sp-3) var(--sp-5);
  background: var(--brand-600);
  color: #fff;
  border-radius: var(--radius-md);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}

.u-skip-link:focus-visible {
  transform: translateY(0);
}

/* 行数で切り詰める（カードのタイトル・抜粋用） */
.u-clamp-2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.u-clamp-3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* --- source: mock-source/src/styles/_layout.css --- */
/* ===========================================================================
   レイアウト（コンテナ・セクション・グリッド）
   =========================================================================== */

.l-container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.l-container--narrow {
  max-width: var(--container-narrow);
}

.l-section {
  padding-block: var(--section-gap);
}

.l-section--soft {
  background: var(--bg-soft);
}

/* --- セクション見出し ------------------------------------------------------
   英字ラベル＋日本語見出しを重ねて、下に細い罫線を敷く。
   罫線の左端だけ色を変えることで、面を塗らずにセクションの色を示す。
   色は --section-color で差し替える（既定はブランドブルー）。 */
/* --- セクション見出し ------------------------------------------------------
   日本語の見出しを大きく置き、その背後に英字を薄く敷く。
   スクロール中に視線が上に戻ったとき、いまどのセクションを見ているかが
   一目で分かるようにするための仕掛け。
   罫線で囲まず、下の一本罫だけで区切る。 */
.l-section__head {
  position: relative;
  /* 背面の英字は本文より広い。はみ出しても横スクロールを出さない */
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-8);
  border-bottom: 1px solid var(--line);
}

.l-section__title {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: var(--lh-tight);
}

/* 見出しの頭に置く色の縦棒。セクションの主題色を示す */
.l-section__title::before {
  content: "";
  flex: none;
  width: 5px;
  align-self: stretch;
  min-height: 1.1em;
  border-radius: var(--radius-pill);
  background: var(--section-color, var(--ink-900));
}

/* 背後の英字。読ませるものではないので、うんと薄くする */
.l-section__label {
  position: absolute;
  z-index: 0;
  left: 0;
  bottom: 0.1em;
  margin: 0;
  font-family: var(--font-en);
  font-size: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  white-space: nowrap;
  color: var(--section-color, var(--ink-900));
  opacity: 0.07;
  text-transform: capitalize;
  pointer-events: none;
  user-select: none;
}

.l-section__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-body);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* 見出し右側の「もっと見る」 */
.l-section__more {
  position: relative;
  z-index: 1;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.l-section__more:hover {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.l-section__more::after {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.l-section__more:hover::after {
  transform: rotate(45deg) translate(2px, -2px);
}

/* --- 記事一覧グリッド ------------------------------------------------------ */
/* 列数はビューポート幅ではなく「入れ物の幅」で決める。
   記事ページのサイドバー付きレイアウトでは本文カラムが狭くなるので、
   メディアクエリで固定すると関連記事が極端に細くなってしまう。 */
.l-grid {
  display: grid;
  gap: var(--sp-6) var(--sp-5);
  grid-template-columns: 1fr;
}

.l-grid--2 {
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.l-grid--3 {
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

/* --- 本文＋サイドバーの2カラム -------------------------------------------- */
.l-with-sidebar {
  display: grid;
  gap: var(--sp-10);
  grid-template-columns: 1fr;
  /* 中身（バナー画像など）に押されて列が伸びると、スマホで横スクロールが出る */
  min-width: 0;
  /* align-items は既定の stretch のままにする。
     サイドバーを本文と同じ高さまで伸ばしておかないと、
     中の追従目次（position: sticky）が親の下端ですぐ外れてしまう。 */
}

@media (min-width: 1000px) {
  .l-with-sidebar {
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--sp-12);
  }
}

.l-with-sidebar > * {
  min-width: 0;
}

.l-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* 追従させたいブロック（目次など）に付ける。
   サイドバーの最後に置くこと。途中に置くと、追従中に後続の要素へ重なる。 */
@media (min-width: 1000px) {
  .l-sidebar__sticky {
    position: sticky;
    top: calc(var(--header-h-pc) + var(--sp-4));
    /* 伸びたサイドバーの余白ぶん、最後の要素が引き伸ばされないようにする */
    margin-bottom: auto;
  }
}

/* --- source: mock-source/src/styles/components/_button.css --- */
/* ===========================================================================
   ボタン
   =========================================================================== */

.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 47px; /* タップターゲットの下限 */
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--radius-pill);
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}

.c-btn:active {
  transform: translateY(1px);
}

/* 主要CTA（会員登録など）。
   構造色を黒に寄せたので、いちばん強い操作はここ。
   青を強調に使わないぶん、青は「リンク」の意味だけを持てる。 */
.c-btn--primary {
  background: var(--ink-900);
  color: #fff;
}

.c-btn--primary:hover {
  background: var(--ink-700);
}

/* 副次アクション（ログインなど） */
.c-btn--outline {
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink-900);
}

.c-btn--outline:hover {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
}

/* WordPress: honest deferred-Contact state (simulator.js/subsidy.js/
   estimate.js) — a real disabled control, not a link that knowingly 404s. */
.c-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* 一覧ページへの誘導など、控えめな導線 */
.c-btn--ghost {
  color: var(--ink-700);
  background: transparent;
}

.c-btn--ghost:hover {
  background: var(--bg-sunken);
  color: var(--ink-900);
}

.c-btn--sm {
  min-height: 47px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.c-btn--block {
  display: flex;
  width: 100%;
}

/* 「記事一覧へ」のような中央配置ボタン */
.c-btn-center {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-10);
}

/* --- アイコンボタン（ブックマーク・シェア・テーマ切替）--------------------- */
.c-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  color: var(--ink-500);
  background: transparent;
  border: 1px solid transparent;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.c-icon-btn:hover {
  background: var(--bg-sunken);
  color: var(--ink-900);
}

.c-icon-btn svg {
  width: 20px;
  height: 20px;
}

/* --- source: mock-source/src/styles/components/_chip.css --- */
/* ===========================================================================
   カテゴリラベル・業種チップ・キーワードタグ
   ---------------------------------------------------------------------------
   現行サイトは「5つのチカラ」と「業種（オフィス向け等）」と「キーワード」の
   3種類のタクソノミーが同じ見た目で並んでいて区別がつかない。
   役割ごとに見た目を変えて、情報の階層をはっきりさせる。

   BtoBメディア寄せの方針として、カテゴリは塗りバッジではなく
   「色ライン＋細字」で示す。面を塗らないぶん一覧が静かになり、
   記事タイトルの視認性が上がる。
   =========================================================================== */

/* --- 1. カテゴリラベル（5つのチカラ）= 色ドット＋黒文字。最上位 --------
   色は文字ではなくドットに乗せる。こうすると
     ・文字は常に黒なので、どのカテゴリでも読みやすさが変わらない
     ・色は見分けやすさだけを考えて選べる（彩度を上げられる）
   の2つが同時に成り立つ。 */
.c-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.5;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink-700);
  transition: color var(--dur) var(--ease);
}

.c-cat::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--cat-dot, var(--brand-500));
}

a.c-cat:hover {
  color: var(--ink-900);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-cat--kotoba {
  --cat-dot: var(--cat-kotoba-vivid);
}
.c-cat--money {
  --cat-dot: var(--cat-money-vivid);
}
.c-cat--recruit {
  --cat-dot: var(--cat-recruit-vivid);
}
.c-cat--dx {
  --cat-dot: var(--cat-dx-vivid);
}
.c-cat--web {
  --cat-dot: var(--cat-web-vivid);
}
.c-cat--solution {
  --cat-dot: var(--cat-solution-vivid);
}

/* サムネの上に重ねるときだけ、読めるように白地を敷く */
.c-cat--overlay {
  padding: 0.3em 0.6em;
  background: var(--bg);
  box-shadow: var(--shadow-sm);
}

/* --- 2. 業種チップ（オフィス向け・小売店向け…）= 角ばった枠線。絞り込み用 - */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  min-height: 32px;
  padding: 0.2em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-700);
  background: var(--surface);
  text-decoration: none;
  white-space: nowrap;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.c-chip:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
  background: var(--brand-050);
}

.c-chip[aria-pressed="true"],
.c-chip.is-active {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
  font-weight: 700;
}

/* 記事ヘッダーなど、絞り込みではなく表示目的で並べるときの小さい版 */
.c-chip--sm {
  min-height: 24px;
  padding: 0.1em 0.6em;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --- 3. キーワードタグ（#リニューアル）= テキストのみ。最下位 ------------ */
.c-tag {
  display: inline-block;
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.c-tag::before {
  content: "#";
  margin-right: 0.15em;
  color: var(--ink-400);
}

.c-tag:hover {
  color: var(--brand-600);
}

.c-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

/* --- 記事メタ（更新日・読了時間）------------------------------------------
   一覧では「最終更新日 2026.07.31」のような素のテキストにして、
   アイコンを減らす。アイコンが多いと一覧が散らかって見える。 */
.c-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

.c-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}

.c-meta__item svg {
  width: 13px;
  height: 13px;
  flex: none;
}

/* 項目の区切り（中黒） */
.c-meta__item + .c-meta__item::before {
  content: "";
  width: 3px;
  height: 3px;
  margin-right: 0.2em;
  border-radius: 50%;
  background: var(--line-strong);
}

/* --- source: mock-source/src/styles/components/_header.css --- */
/* ===========================================================================
   ヘッダー / グローバルナビ / ドロワー
   =========================================================================== */

.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--bg); /* 半透明＋blurはやめ、白地で固定する */
  border-bottom: 1px solid var(--line);
  transition: box-shadow var(--dur) var(--ease);
}

/* 少しでもスクロールしたら影をつけて、コンテンツとの境界を明確にする */
.c-header.is-scrolled {
  box-shadow: var(--shadow-sm);
}

/* --- 上段：ロゴ・検索・会員導線 -------------------------------------------- */
.c-header__bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  height: var(--header-h);
}

/* PCでは上段をロゴ専用の段にして、中央に大きく置く。
   雑誌の題字のように扱い、下の段にナビを分ける。 */
@media (min-width: 900px) {
  .c-header__bar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 64px;
    gap: var(--sp-4);
  }

  /* 3つとも同じ行に固定する。行を指定しないと、
     grid-column だけでは自動配置が次の行に送ってしまう */
  .c-header__logo {
    grid-area: 1 / 2;
    justify-self: center;
  }

  .c-header__actions {
    grid-area: 1 / 3;
    justify-self: end;
  }

  /* 中央寄せをspacerに邪魔させない */
  .c-header__spacer {
    display: none;
  }
}

.c-header__logo {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  text-decoration: none;
  color: var(--ink-900);
  /* AUN: force white specifically behind the logo itself, rather than
     relying on .c-header's own background (also white here, but a
     separate rule an unrelated future change could alter without anyone
     noticing it affects the logo too). Scoped to this one container —
     .c-header itself is untouched, so nothing else in the header changes
     color. !important per the explicit request, to guarantee this can't
     be silently overridden by a later, more specific rule. */
  background-color: #fff !important;
}

/* 支給ロゴ（410×66）。高さ基準で置き、狭い画面では少し縮める */
.c-header__logo-img {
  width: auto;
  height: 26px;
  background: #fff !important;
}

@media (min-width: 600px) {
  .c-header__logo-img {
    height: 34px;
  }
}

@media (min-width: 900px) {
  .c-header__logo-img {
    height: 40px;
  }
}

.c-header__logo-mark {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--brand-700);
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0;
}

.c-header__logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.c-header__logo-name {
  font-size: var(--fs-base);
  font-weight: 700;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.c-header__logo-sub {
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--ink-500);
  letter-spacing: 0.08em;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .c-header__logo-sub {
    display: none;
  }
}

.c-header__spacer {
  flex: 1 1 auto;
}

.c-header__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ログイン／会員登録はPCのみ。SPはドロワー内に集約する */
.c-header__auth {
  display: none;
}

@media (min-width: 900px) {
  .c-header__auth {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
  }
}

/* --- 下段：グローバルナビ（PCのみ）---------------------------------------- */
.c-gnav {
  display: none;
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  .c-gnav {
    display: block;
  }
}

/* 項目が7つあり、画面幅によっては入りきらない。
   ページごと横に広がってしまわないよう、ナビの中だけでスクロールさせる。 */
.c-gnav__list {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--sp-2);
  margin-inline: calc(var(--sp-2) * -1);
  overflow-x: auto;
  scrollbar-width: none;
}

.c-gnav__list::-webkit-scrollbar {
  display: none;
}

.c-gnav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}

.c-gnav__link:hover,
.c-gnav__link[aria-current="page"] {
  color: var(--ink-900);
}

/* カテゴリごとの色は小さな四角で示す。文字色は変えず、可読性を保つ。
   円より四角のほうが、直角基調のレイアウトになじむ。 */
/* カテゴリの色は丸ドットで示す。文字色は変えず、可読性を保つ */
.c-gnav__dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--brand-500);
}

.c-gnav__link[data-cat="kotoba"] .c-gnav__dot {
  background: var(--cat-kotoba-vivid);
}
.c-gnav__link[data-cat="money"] .c-gnav__dot {
  background: var(--cat-money-vivid);
}

/* 新サービスの目印。記事カテゴリではなくサービス紹介ページであることも兼ねて示す */
.c-gnav__new {
  margin-left: 0.4em;
  padding: 0.1em 0.35em;
  background: var(--accent-500);
  color: #fff;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  border-radius: var(--radius-sm);
  vertical-align: 0.15em;
}
.c-gnav__link[data-cat="recruit"] .c-gnav__dot {
  background: var(--cat-recruit-vivid);
}
.c-gnav__link[data-cat="dx"] .c-gnav__dot {
  background: var(--cat-dx-vivid);
}
.c-gnav__link[data-cat="web"] .c-gnav__dot {
  background: var(--cat-web-vivid);
}
.c-gnav__link[data-cat="solution"] .c-gnav__dot {
  background: var(--cat-solution-vivid);
}

/* 下線インジケーター。カテゴリ色をそのまま使う */
.c-gnav__link::after {
  content: "";
  position: absolute;
  inset-inline: var(--sp-2);
  bottom: 0;
  height: 3px;
  background: var(--brand-600);
  transform: scaleX(0);
  transition: transform var(--dur) var(--ease);
}

.c-gnav__link[data-cat="kotoba"]::after {
  background: var(--cat-kotoba);
}
.c-gnav__link[data-cat="money"]::after {
  background: var(--cat-money);
}
.c-gnav__link[data-cat="recruit"]::after {
  background: var(--cat-recruit);
}
.c-gnav__link[data-cat="dx"]::after {
  background: var(--cat-dx);
}
.c-gnav__link[data-cat="web"]::after {
  background: var(--cat-web);
}
.c-gnav__link[data-cat="solution"]::after {
  background: var(--cat-solution);
}

.c-gnav__link:hover::after,
.c-gnav__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* --- ハンバーガー（SPのみ）------------------------------------------------ */
.c-burger {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  color: var(--ink-900);
}

@media (min-width: 900px) {
  .c-burger {
    display: none;
  }
}

.c-burger:hover {
  background: var(--bg-sunken);
}

.c-burger__line {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

.c-burger[aria-expanded="true"] .c-burger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.c-burger[aria-expanded="true"] .c-burger__line:nth-child(2) {
  opacity: 0;
}

.c-burger[aria-expanded="true"] .c-burger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- ドロワー -------------------------------------------------------------- */
.c-drawer {
  position: fixed;
  inset-block: 0;
  right: 0;
  z-index: var(--z-drawer);
  width: min(340px, 88vw);
  padding: var(--sp-6) var(--sp-5) var(--sp-12);
  background: var(--bg);
  border-left: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.c-drawer.is-open {
  transform: translateX(0);
  visibility: visible;
}

.c-drawer__overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: rgb(10 14 20 / 45%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.c-drawer__overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.c-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--sp-6);
}

.c-drawer__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}

.c-drawer__nav {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-8);
}

.c-drawer__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
}

.c-drawer__link:hover {
  color: var(--brand-600);
}

.c-drawer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

/* モーダル系（ドロワー・検索・動画プレーヤー）が開いている間、背面を固定する。
   位置の保存と復元は scroll-lock.js が担当する。 */
body.is-scroll-locked {
  position: fixed;
  inset-inline: 0;
  width: 100%;
  overflow: hidden;
}

/* ===========================================================================
   ヘッダー左の現在日時
   ---------------------------------------------------------------------------
   中央にロゴを置いたことで空いた左側に入れる。
   数字が動くので、桁が揺れないよう等幅数字にしている。
   狭い画面では出さない。ヘッダーが2段になって、本文が下がるため。
   =========================================================================== */

/* --- 現在日時 --------------------------------------------------------------
   ニュース性のあるメディアなので「いま見ている時点」を左端に置く。
   ただの時計表示にすると、ただの飾りに見える。
   点灯インジケータ・日付・曜日・時刻を別々の要素として組み、
   毎秒動く「秒」だけを弱く見せて、主張と情報量のつり合いを取る。 */
.c-clock {
  display: none;
}

@media (min-width: 900px) {
  .c-clock {
    grid-area: 1 / 1;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    white-space: nowrap;
  }
}

/* 生きている表示であることの合図。ゆっくり明滅させる */
.c-clock__live {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--accent-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-500) 18%, transparent);
  animation: clock-live 2.4s var(--ease) infinite;
}

@keyframes clock-live {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-clock__live {
    animation: none;
  }
}

.c-clock__date {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* 数字は英字書体のほうが字面がそろう */
.c-clock__ymd {
  font-family: var(--font-en);
  font-size: var(--fs-xs);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: var(--ink-500);
}

/* 曜日は小さな黒地に白抜き。日付と時刻のあいだの区切りも兼ねる */
.c-clock__dow {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-sm);
  background: var(--ink-900);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: var(--bg);
}

.c-clock__time {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-left: var(--sp-1);
  font-family: var(--font-en);
  font-variant-numeric: tabular-nums;
}

.c-clock__hm {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink-900);
}

/* 秒は一段落とす。毎秒動くものを黒で出すと、そこばかり目に入る */
.c-clock__sec {
  font-size: var(--fs-2xs);
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--ink-400);
}

.c-clock__sec::before {
  content: ":";
  margin-right: 1px;
  color: var(--ink-300);
}

/* --- source: mock-source/src/styles/components/_search.css --- */
/* ===========================================================================
   検索（ヘッダーのトリガー ＋ オーバーレイ検索パネル）
   ---------------------------------------------------------------------------
   現行サイトには記事検索がない。読者は5カテゴリのタブか一覧を辿るしかなく、
   記事数が増えるほど目的の記事に届かない。ここでインクリメンタル検索を足す。
   =========================================================================== */

/* --- ヘッダー内のトリガー -------------------------------------------------- */
.c-search-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  height: 40px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  color: var(--ink-500);
  background: var(--surface);
  font-size: var(--fs-sm);
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.c-search-trigger:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.c-search-trigger svg {
  width: 18px;
  height: 18px;
  flex: none;
}

/* PCでは「記事を検索」というラベル付きの横長にする */
.c-search-trigger__label {
  display: none;
}

@media (min-width: 900px) {
  .c-search-trigger {
    width: 220px;
    justify-content: flex-start;
    padding-inline: var(--sp-4);
  }

  .c-search-trigger__label {
    display: inline;
  }
}

/* --- 検索パネル ------------------------------------------------------------ */
.c-search {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  grid-template-rows: auto 1fr;
  background: var(--bg);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.c-search.is-open {
  opacity: 1;
  visibility: visible;
}

@media (min-width: 900px) {
  .c-search {
    inset: 0;
    background: rgb(10 14 20 / 45%);
    backdrop-filter: blur(4px);
    display: block;
    padding-top: 12vh;
    overflow-y: auto;
  }
}

.c-search__panel {
  display: contents;
}

@media (min-width: 900px) {
  .c-search__panel {
    display: block;
    width: min(720px, 92vw);
    margin-inline: auto;
    margin-bottom: 12vh;
    background: var(--bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
  }
}

.c-search__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--gutter);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.c-search__field svg {
  width: 20px;
  height: 20px;
  flex: none;
  color: var(--ink-500);
}

.c-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 48px;
  border: none;
  background: transparent;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-900);
}

.c-search__input:focus {
  outline: none;
}

.c-search__input::placeholder {
  color: var(--ink-400);
  font-weight: 400;
}

.c-search__body {
  overflow-y: auto;
  padding: var(--sp-5) var(--gutter) var(--sp-12);
}

@media (min-width: 900px) {
  .c-search__body {
    max-height: 56vh;
    padding-block: var(--sp-5) var(--sp-6);
  }
}

.c-search__section-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-500);
}

.c-search__results {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.c-search__result {
  display: block;
  padding: var(--sp-3);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}

.c-search__result:hover,
.c-search__result:focus-visible {
  background: var(--bg-soft);
}

.c-search__result-title {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

/* 一致した部分をハイライト */
.c-search__result-title mark {
  background: color-mix(in srgb, var(--brand-500) 28%, transparent);
  color: inherit;
  border-radius: 2px;
  padding-inline: 0.1em;
}

.c-search__result-meta {
  margin-top: var(--sp-1);
}

.c-search__empty {
  padding: var(--sp-10) 0;
  text-align: center;
  color: var(--ink-500);
  font-size: var(--fs-base);
}

.c-search__hint {
  display: none;
}

@media (min-width: 900px) {
  .c-search__hint {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--gutter);
    border-top: 1px solid var(--line);
    background: var(--bg-soft);
    font-size: var(--fs-xs);
    color: var(--ink-500);
  }
}

.c-search__key {
  display: inline-block;
  padding: 0.1em 0.45em;
  margin-right: 0.4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ink-700);
}

/* --- source: mock-source/src/styles/components/_card.css --- */
/* ===========================================================================
   記事カード
   ---------------------------------------------------------------------------
   3つの型を用意する。
     .c-card            … 縦積み（一覧グリッドの標準）
     .c-card--row       … 横並び（サイドバー・カテゴリ別ブロック・関連記事）
     .c-card--feature   … 特集用の大型

   BtoBメディア寄せの方針：
     - 影とカード枠は使わず、サムネ＋文字だけで構成する。
     - カテゴリはサムネ上のバッジではなく、タイトルの上に色ラインつきで置く。
       画像に文字を重ねないぶん、一覧をざっと見たときに読みやすい。
   =========================================================================== */

.c-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--surface);
}

/* --- サムネイル ------------------------------------------------------------ */
.c-card__thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--bg-sunken);
}

.c-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform 400ms var(--ease),
    opacity var(--dur) var(--ease);
}

/* 枠線をやめたぶん、ホバーは画像側で示す */
.c-card:hover .c-card__thumb img {
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .c-card:hover .c-card__thumb img {
    transform: none;
  }
}

/* --- 本文 ------------------------------------------------------------------ */
.c-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1 1 auto;
}

.c-card__cat {
  order: -1; /* タイトルより先に読ませる */
}

.c-card__title {
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: 0.01em;
  color: var(--ink-900);
}

@media (min-width: 600px) {
  .c-card__title {
    font-size: var(--fs-md);
  }
}

.c-card:hover .c-card__title {
  color: var(--brand-600);
}

/* カード全体をクリック領域にする（擬似要素で覆う）。
   これで見出しリンクだけが押せる状態を避けつつ、
   カード内の他のリンク（タグなど）も z-index で前面に置ける。 */
.c-card__link {
  color: inherit;
  text-decoration: none;
}

.c-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.c-card__link:hover .c-card__title,
.c-card__link:focus-visible .c-card__title {
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.c-card__excerpt {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-card__foot {
  margin-top: auto;
  padding-top: var(--sp-1);
}

/* カード上の要素をクリック可能にするための持ち上げ */
.c-card__above {
  position: relative;
  z-index: 1;
}

/* --- 横並び型 -------------------------------------------------------------- */
.c-card--row {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--sp-3);
}

.c-card--row .c-card__thumb {
  flex: none;
  width: 92px;
}

.c-card--row .c-card__title {
  font-size: var(--fs-sm);
}

@media (min-width: 600px) {
  .c-card--row .c-card__title {
    font-size: var(--fs-base);
  }
}

/* --- サムネなし型（カテゴリ別ブロックの2件目以降）------------------------- */
.c-card--plain {
  gap: var(--sp-1);
}

.c-card--plain .c-card__title {
  font-size: var(--fs-sm);
  font-weight: 500;
}

/* --- 一覧の区切り（サイドバーなどで縦に並べるとき）------------------------ */
.c-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-card-list > * + * {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

/* --- 特集（大型カード）---------------------------------------------------- */
.c-card--feature .c-card__title {
  font-size: var(--fs-xl);
  line-height: 1.5;
}

@media (min-width: 900px) {
  .c-card--feature .c-card__title {
    font-size: var(--fs-2xl);
  }
}

.c-card--feature .c-card__excerpt {
  font-size: var(--fs-body);
}

/* --- ブックマークボタン（サムネ右上）-------------------------------------- */
.c-bookmark {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--ink-500);
  background: var(--bg);
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: color var(--dur) var(--ease);
}

.c-bookmark svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.c-bookmark:hover {
  color: var(--accent-500);
}

.c-bookmark[aria-pressed="true"] {
  color: var(--accent-500);
}

.c-bookmark[aria-pressed="true"] svg {
  fill: currentColor;
  stroke: currentColor;
}

/* --- Like button (c-post-head__tools, single-column.php) ---------------
   New feature, not from the mock (see inc/likes.php) — styled to match
   the existing .c-bookmark active-state pattern above for visual
   consistency, on top of the shared .c-icon-btn base. */
.c-like {
  width: auto;
  padding: 0 var(--sp-3);
  gap: 0.35em;
}

.c-like[aria-pressed="true"] {
  color: var(--accent-500);
}

.c-like[aria-pressed="true"] svg {
  fill: currentColor;
  stroke: currentColor;
}

.c-like__count {
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

/* --- source: mock-source/src/styles/components/_mv.css --- */
/* ===========================================================================
   メインビジュアル（トップページ最上部）
   ---------------------------------------------------------------------------
   現行MVの文言（「リアルな経営課題を解決」／課題タグ群／「中小企業のための
   オールインワン メディア」）はそのまま引き継ぐ。

   構成は 左＝コピー／右＝ピックアップ動画。
   「オールインワン メディア」と言葉で名乗るだけでなく、
   実際のコンテンツ（動画）をファーストビューに置いて中身の厚みを見せる。

   課題タグにはカテゴリ色を持たせ、どのチカラの担当かが分かるようにしている。
   =========================================================================== */

.c-mv {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  isolation: isolate;
}

/* --- 背景 ------------------------------------------------------------------ */
.c-mv__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

/* 白地に、カテゴリ色をごく淡くにじませる。
   方眼や濃い面を敷くと、その上の文字が読みにくくなるうえ、
   下に続く白いセクションと段差ができてしまう。
   色は「5つのチカラ」と同じ並びにして、下のセクションと呼応させている。 */
.c-mv__grid {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(
      42% 55% at 12% 18%,
      color-mix(in srgb, var(--cat-money-vivid) 16%, transparent),
      transparent
    ),
    radial-gradient(
      38% 50% at 88% 8%,
      color-mix(in srgb, var(--cat-solution-vivid) 18%, transparent),
      transparent
    ),
    radial-gradient(
      45% 60% at 70% 92%,
      color-mix(in srgb, var(--cat-recruit-vivid) 14%, transparent),
      transparent
    );
  filter: blur(8px);
}

/* もう一枚重ねて、時間をかけてゆっくり動かす。
   完全な静止画にしないための最小限の動き。 */
.c-mv__glow {
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(
      40% 50% at 30% 80%,
      color-mix(in srgb, var(--cat-dx-vivid) 14%, transparent),
      transparent
    ),
    radial-gradient(
      35% 45% at 85% 55%,
      color-mix(in srgb, var(--cat-web-vivid) 14%, transparent),
      transparent
    );
  filter: blur(10px);
  animation: mv-drift 26s ease-in-out infinite alternate;
}

@keyframes mv-drift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }
  to {
    transform: translate3d(-3%, 2%, 0) scale(1.08);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-mv__glow {
    animation: none;
  }
}

/* --- レイアウト ------------------------------------------------------------ */
.c-mv__inner {
  position: relative;
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  padding-block: var(--sp-10);
}

@media (min-width: 900px) {
  .c-mv__inner {
    gap: var(--sp-8);
    padding-block: var(--sp-10) var(--sp-12);
  }
}

/* --- コピー ----------------------------------------------------------------- */

/* 「リアルな経営課題を解決」
   ピルで塗ると、その下の見出しより先に目に入ってしまう。
   短い色罫と字間だけで、見出しの前置きとして置く。
   罫の色は「5つのチカラ」の並びで、下のセクションと呼応させている。 */
.c-mv__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--ink-500);
  animation: mv-in 600ms var(--ease) both;
}

/* 5色のグラデーションは見出しのマーカーで使う。
   前置きの罫まで同じ色を使うと、同じ主張が2回続いて散らかる。 */
.c-mv__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--ink-900);
}

/* --- 見出しのかたまり ------------------------------------------------------
   1行の中で役割を分ける。
   「オールインワン」は最も太い黒＋マーカーで立て、「メディア」は一段落として置く。
   同じ大きさ・同じ太さで流すと、読めても記憶に残らない。 */
.c-mv__lockup {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
}

.c-mv__title {
  position: relative;
  z-index: 1;
  margin-bottom: 0;
  font-weight: 700;
  color: var(--ink-900);
}

/* 行ごとに、下からせり上がって現れる */
.c-mv__line {
  display: block;
  overflow: hidden; /* マスク。中の span がこの外にいる間は見えない */
}

.c-mv__line > span {
  display: block;
  animation: mv-rise 800ms var(--ease) both;
}

/* 前置きの行。小さく、字間を大きく開けて、罫のように水平に伸ばす */
.c-mv__line--sm {
  margin-bottom: 0.15em;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.3em;
  color: var(--ink-500);
}

.c-mv__line--lg {
  /* せり上がりのマスクが下端で切るため、マーカーが出る分だけ箱を伸ばす */
  padding-bottom: 0.2em;
  font-size: clamp(1.75rem, 1.05rem + 2.6vw, 3rem);
  line-height: 1.18;
  letter-spacing: -0.035em;
}

.c-mv__line--sm > span {
  animation-delay: 100ms;
}

.c-mv__line--lg > span {
  animation-delay: 220ms;
}

/* 前半（オールインワン）は塗り。いちばん強い黒でベタに置く */
.c-mv__solid {
  position: relative;
  z-index: 0;
  font-style: normal;
  font-weight: 900;
  white-space: nowrap;
  color: var(--ink-900);
}

/* 塗りの背後に、斜めのマーカーを1本だけ通す。
   下線ではなく文字に少し掛けることで、手で引いた印象を残す。 */
.c-mv__solid::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.06em;
  right: -0.06em;
  bottom: -0.02em;
  height: 0.2em;
  background: linear-gradient(
    to right,
    var(--cat-money-vivid),
    var(--cat-recruit-vivid),
    var(--cat-dx-vivid),
    var(--cat-web-vivid),
    var(--cat-solution-vivid)
  );
  opacity: 1;
  transform: skewX(-12deg) scaleX(0);
  transform-origin: left center;
  animation: mv-marker 700ms var(--ease) 820ms both;
}

/* 後半（メディア）は一段落とす。
   輪郭だけの白抜きは目を引きすぎるので、太さと濃さで下げる。
   主役は「オールインワン」なので、ここは受けに回る。 */
.c-mv__hollow {
  margin-left: -0.04em;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: -0.01em;
  color: var(--ink-700);
}

/* 文末の点。ここで言い切る、という合図 */
.c-mv__dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  margin-left: 0.1em;
  border-radius: var(--radius-pill);
  background: var(--accent-500);
  animation: mv-in 500ms var(--ease) 1000ms both;
}

/* 英字の副題。日本語の見出しとは書体も役割もずらして、装飾として小さく敷く */
.c-mv__en {
  display: flex;
  /* スマホで2行になるため、罫は1行目に合わせる */
  align-items: flex-start;
  gap: var(--sp-3);
  margin: var(--sp-4) 0 0;
  font-family: var(--font-en);
  font-size: var(--fs-2xs);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  color: var(--ink-400);
  text-transform: uppercase;
  animation: mv-in 600ms var(--ease) 1000ms both;
}

.c-mv__en::before {
  content: "";
  flex: none;
  width: 28px;
  height: 1px;
  margin-top: 0.62em;
  background: var(--ink-400);
}

.c-mv__en b {
  /* ALL-IN-ONE がハイフンで折れると別の語に見える */
  white-space: nowrap;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink-700);
}

/* --- 課題タグ --------------------------------------------------------------
   それぞれの課題がどのチカラの担当かが分かるよう、左端にカテゴリ色を入れる。
   図解のパネルに並ぶ5色と対応している。 */
.c-mv__tags {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: mv-in 600ms var(--ease) 700ms both;
}

.c-mv__tags-label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-500);
}

.c-mv__tags-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.c-mv__tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-mv__tag::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-pill);
  background: var(--tag-color, var(--brand-500));
}

.c-mv__tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 36px;
  padding: 0.2em 1em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink-900);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  /* 1つずつ順に出す。遅延は nth-child で付ける */
  animation: mv-in 460ms var(--ease) both;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.c-mv__tag:hover {
  border-color: var(--tag-color, var(--brand-600));
  color: var(--tag-color, var(--brand-600));
  background: var(--bg-soft);
}

.c-mv__tag[data-cat="money"] {
  --tag-color: var(--cat-money-vivid);
}
.c-mv__tag[data-cat="recruit"] {
  --tag-color: var(--cat-recruit-vivid);
}
.c-mv__tag[data-cat="dx"] {
  --tag-color: var(--cat-dx-vivid);
}
.c-mv__tag[data-cat="web"] {
  --tag-color: var(--cat-web-vivid);
}
.c-mv__tag[data-cat="solution"] {
  --tag-color: var(--cat-solution-vivid);
}

.c-mv__tag--more::before {
  display: none;
}

.c-mv__tag--more {
  border-color: transparent;
  background: transparent;
  color: var(--ink-500);
  letter-spacing: 0.06em;
}

.c-mv__tag--more:hover {
  border-color: transparent;
  background: transparent;
  color: var(--brand-600);
  text-decoration: underline;
}

/* タグの出現をずらす */
.c-mv__tag-list li:nth-child(1) .c-mv__tag {
  animation-delay: 780ms;
}
.c-mv__tag-list li:nth-child(2) .c-mv__tag {
  animation-delay: 840ms;
}
.c-mv__tag-list li:nth-child(3) .c-mv__tag {
  animation-delay: 900ms;
}
.c-mv__tag-list li:nth-child(4) .c-mv__tag {
  animation-delay: 960ms;
}
.c-mv__tag-list li:nth-child(5) .c-mv__tag {
  animation-delay: 1020ms;
}
.c-mv__tag-list li:nth-child(6) .c-mv__tag {
  animation-delay: 1080ms;
}
.c-mv__tag-list li:nth-child(7) .c-mv__tag {
  animation-delay: 1140ms;
}
.c-mv__tag-list li:nth-child(8) .c-mv__tag {
  animation-delay: 1200ms;
}
.c-mv__tag-list li:nth-child(9) .c-mv__tag {
  animation-delay: 1260ms;
}
.c-mv__tag-list li:nth-child(10) .c-mv__tag {
  animation-delay: 1320ms;
}

/* --- アニメーション定義（共通）--------------------------------------------- */
@keyframes mv-rise {
  from {
    transform: translateY(105%);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes mv-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mv-underline {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* 斜めのまま伸ばす。scaleX だけの keyframes を使うと skew が消える */
@keyframes mv-marker {
  from {
    transform: skewX(-12deg) scaleX(0);
  }
  to {
    transform: skewX(-12deg) scaleX(1);
  }
}

/* 動きを減らす設定の環境では、すべて止めて最終状態で表示する。
   _base.css の一括指定でも止まるが、ここでも明示しておく。 */
@media (prefers-reduced-motion: reduce) {
  .c-mv__grid {
    animation: none;
  }

  .c-mv__solid::before {
    transform: skewX(-12deg) scaleX(1);
  }
}

/* ===========================================================================
   入口アイコンの並び（参考：渋谷区公式サイト）
   ---------------------------------------------------------------------------
   「オールインワン」と名乗るより、できることを並べて見せるほうが早い。
   自治体サイトのように、白い角丸カード＋線画アイコン＋短いラベルで置く。

   ラベルは名詞ではなく動詞にしている（「用語集」ではなく「経営用語集」、
   「シミュレーター」ではなく「コスト削減を試算」）。
   初めて来た人は機能の名前を知らないので、
   何ができるかで書いたほうが押す判断がつく。
   =========================================================================== */

.c-mv-nav__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-2);
}

@media (min-width: 560px) {
  .c-mv-nav__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

@media (min-width: 900px) {
  .c-mv-nav__list {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.c-mv-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: 100%;
  min-height: 116px;
  padding: var(--sp-4) var(--sp-2);
  border-radius: var(--radius-xl);
  background: var(--surface);
  text-decoration: none;
  text-align: center;
  transition:
    transform var(--dur) var(--ease),
    box-shadow var(--dur) var(--ease);
}

@media (min-width: 900px) {
  .c-mv-nav__item {
    min-height: 132px;
    padding: var(--sp-5) var(--sp-3);
  }
}

.c-mv-nav__item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .c-mv-nav__item:hover {
    transform: none;
  }
}

/* アイコンはカテゴリ色の線画。面を塗らず、線だけで軽く見せる */
.c-mv-nav__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: var(--icon-color, var(--brand-600));
}

@media (min-width: 900px) {
  .c-mv-nav__icon {
    width: 56px;
    height: 56px;
  }
}

.c-mv-nav__icon svg {
  width: 100%;
  height: 100%;
}

.c-mv-nav__label {
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.4;
  color: var(--ink-900);
}

@media (min-width: 900px) {
  .c-mv-nav__label {
    font-size: var(--fs-sm);
  }
}

.c-mv-nav__item:hover .c-mv-nav__label {
  color: var(--icon-color, var(--brand-600));
}

.c-mv-nav__item[data-cat="money"] {
  --icon-color: var(--cat-money);
}
.c-mv-nav__item[data-cat="recruit"] {
  --icon-color: var(--cat-recruit);
}
.c-mv-nav__item[data-cat="dx"] {
  --icon-color: var(--cat-dx);
}
.c-mv-nav__item[data-cat="web"] {
  --icon-color: var(--cat-web);
}
.c-mv-nav__item[data-cat="solution"] {
  --icon-color: var(--cat-solution);
}
.c-mv-nav__item[data-cat="kotoba"] {
  --icon-color: var(--cat-kotoba);
}

/* --- source: mock-source/src/styles/components/_hero.css --- */
/* ===========================================================================
   トップのヒーロー（よく読まれている記事）と「5つのチカラ」入口
   ---------------------------------------------------------------------------
   現行トップは MV画像 → 人気記事の横スクロール → 特集スライダー という順で、
   ファーストビューに「何のメディアか」も「どこから読むか」も出ていない。
   ここでは 1位の記事を大きく ＋ 2〜5位を行 で見せ、
   すぐ下に「5つのチカラ」の入口を置いて回遊の起点にする。
   =========================================================================== */

.c-hero {
  padding-block: var(--sp-6) var(--section-gap);
  background: var(--bg); /* 白地固定。面を塗らない */
  border-bottom: 1px solid var(--line);
}

.c-hero__inner {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .c-hero__inner {
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    gap: var(--sp-10);
    align-items: start;
  }
}

/* セクション見出しの英字が上のMVに被らないよう、上に余白を取る */
.c-hero .l-section__head {
  margin-top: var(--sp-4);
}

.c-hero__sub {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.c-hero__sub > * + * {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

@media (min-width: 900px) {
  /* 罫線で仕切らず、余白で離す */
  .c-hero__sub {
    padding-left: var(--sp-4);
  }
}

/* --- 1位の記事 -------------------------------------------------------------
   大型カードの左上に順位を重ねる。塗るのはこの1枚だけにして、
   2〜5位との差を「大きさ」と「色」の両方で出す。 */
.c-rank-lead {
  position: relative;
}

.c-rank-lead__badge {
  position: absolute;
  z-index: 1;
  top: var(--sp-3);
  left: var(--sp-3);
  display: inline-flex;
  align-items: baseline;
  gap: 0.1em;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.c-rank-lead__badge small {
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* 右カラムは 2位から始める */
.c-hero__sub .c-rank {
  counter-reset: rank 1;
}

/* 1位を別枠にしたので、この並びの先頭（＝2位）は色を付けない */
.c-hero__sub .c-rank__item:nth-child(1) .c-rank__num,
.c-hero__sub .c-rank__item:nth-child(2) .c-rank__num {
  background: color-mix(in srgb, var(--accent-500) 16%, transparent);
  color: var(--accent-600);
}

/* --- 5つのチカラ カード --------------------------------------------------- */
/* 5つのチカラ。罫線で詰めず、余白で離して並べる。
   1枚ずつが独立した入口に見えるようにする。 */
.c-power-grid {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 800px) {
  .c-power-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.c-power {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  text-decoration: none;
  color: inherit;
  transition:
    background var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.c-power:hover {
  background: var(--power-tint, var(--bg-sunken));
  transform: translateY(-2px);
}

/* 2列レイアウトのときに最後の1枚が半端に残るので、横幅いっぱいに広げる */
@media (max-width: 799px) {
  .c-power-grid > :last-child {
    grid-column: 1 / -1;
    align-items: center;
    gap: var(--sp-3);
  }
}

.c-power__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--power-color, var(--brand-600));
}

.c-power__icon svg {
  width: 26px;
  height: 26px;
}

.c-power__name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-power__desc {
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--ink-500);
}

.c-power__count {
  margin-top: auto;
  padding-top: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--power-color, var(--brand-600));
  font-variant-numeric: tabular-nums;
}

/* カテゴリ別の色（HTML側で data-cat を指定する）*/
.c-power[data-cat="money"] {
  --power-color: var(--cat-money);
  --power-tint: var(--cat-money-bg);
}
.c-power[data-cat="recruit"] {
  --power-color: var(--cat-recruit);
  --power-tint: var(--cat-recruit-bg);
}
.c-power[data-cat="dx"] {
  --power-color: var(--cat-dx);
  --power-tint: var(--cat-dx-bg);
}
.c-power[data-cat="web"] {
  --power-color: var(--cat-web);
  --power-tint: var(--cat-web-bg);
}
.c-power[data-cat="solution"] {
  --power-color: var(--cat-solution);
  --power-tint: var(--cat-solution-bg);
}

/* --- source: mock-source/src/styles/components/_catblock.css --- */
/* ===========================================================================
   カテゴリ別ブロック（トップページ）
   ---------------------------------------------------------------------------
   1カテゴリ ＝ 1カラム。見出しの下に色の罫線を敷き、
   その中に「主役1本＋見出しだけの数本」を並べる。

   現行トップは「5つのチカラ」がタブ切り替えになっていて、
   最初に見えるのは1カテゴリ分だけ。他の4つは押さないと存在に気づけない。
   全カテゴリを同時に見せて、読者が自分の課題の列を選べるようにする。
   =========================================================================== */

.c-catblock-grid {
  display: grid;
  gap: var(--sp-8) var(--sp-6);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.c-catblock {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

/* --- 見出し --------------------------------------------------------------- */
.c-catblock__head {
  position: relative;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
}

/* 見出しの頭に色ドット。カテゴリ色は文字ではなくドットに乗せる */
.c-catblock__label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-500);
}

.c-catblock__label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--cat-dot, var(--brand-500));
}

.c-catblock__name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  color: var(--ink-900);
}

.c-catblock__name a {
  color: inherit;
  text-decoration: none;
}

.c-catblock__name a:hover {
  color: var(--cat-color, var(--brand-600));
  text-decoration: underline;
}

.c-catblock__count {
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* --- 中身 ----------------------------------------------------------------- */
.c-catblock__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-catblock__list > * + * {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

/* ブロック内の主役カードでは、カテゴリラベルは重複するので隠す */
.c-catblock .c-card__cat {
  display: none;
}

.c-catblock__more {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--cat-color, var(--brand-600));
  text-decoration: none;
}

.c-catblock__more:hover {
  text-decoration: underline;
}

.c-catblock__more::after {
  content: " ›";
}

/* カテゴリ色の割り当て */
.c-catblock[data-cat="money"] {
  --cat-color: var(--cat-money);
  --cat-dot: var(--cat-money-vivid);
}
.c-catblock[data-cat="recruit"] {
  --cat-color: var(--cat-recruit);
  --cat-dot: var(--cat-recruit-vivid);
}
.c-catblock[data-cat="dx"] {
  --cat-color: var(--cat-dx);
  --cat-dot: var(--cat-dx-vivid);
}
.c-catblock[data-cat="web"] {
  --cat-color: var(--cat-web);
  --cat-dot: var(--cat-web-vivid);
}
.c-catblock[data-cat="solution"] {
  --cat-color: var(--cat-solution);
  --cat-dot: var(--cat-solution-vivid);
}

/* --- source: mock-source/src/styles/components/_video.css --- */
/* ===========================================================================
   動画コンテンツ枠
   ---------------------------------------------------------------------------
   現行トップの「▶ 注目記事」は再生マークが付いているだけで、中身は人気記事の
   一覧。動画は1本もない。ここを実際の動画枠として作り直す。

   構成は NewsPicks の動画枠に倣う。
     左：主役の1本（大きなポスター＋番組ロゴ＋タイトル＋概要）
     右：それ以外を行リストで（タイトル左・サムネ右・尺は右下）

   ポスターは記事サムネと違って濃色にしている。
   一覧の中で「これは動画だ」と地色だけで見分けられるようにするため。
   =========================================================================== */

.c-video-layout {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .c-video-layout {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
  }
}

/* --- ポスター（共通）------------------------------------------------------- */
.c-video-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid var(--line);
}

.c-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}

/* --- 再生ボタン ------------------------------------------------------------
   直角基調のサイトだが、再生ボタンだけは円のままにする。
   ここは形そのものが「再生」の記号なので、崩すと意味が伝わりにくくなる。 */
.c-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid rgb(255 255 255 / 85%);
  background: rgb(17 20 24 / 45%);
  backdrop-filter: blur(2px);
  color: #fff;
  transition:
    background var(--dur) var(--ease),
    scale var(--dur) var(--ease);
}

.c-video-play svg {
  width: 20px;
  height: 20px;
  margin-left: 2px; /* 三角形の重心ぶん、右にずらすと中央に見える */
  fill: currentColor;
}

.c-video-thumb--lead .c-video-play {
  width: 76px;
  height: 76px;
}

.c-video-thumb--lead .c-video-play svg {
  width: 28px;
  height: 28px;
}

.c-video-thumb:hover .c-video-play,
.c-video-thumb:focus-visible .c-video-play {
  background: var(--brand-600);
  border-color: var(--brand-600);
  scale: 1.06;
}

.c-video-thumb:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  .c-video-thumb:hover img {
    transform: none;
  }
}

/* --- 尺 --------------------------------------------------------------------- */
.c-video-time {
  position: absolute;
  right: var(--sp-2);
  bottom: var(--sp-2);
  padding: 0.15em 0.5em;
  border-radius: var(--radius-sm);
  background: rgb(17 20 24 / 78%);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}

/* --- 配信ステータス --------------------------------------------------------- */
.c-video-status {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.2em 0.6em;
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  background: rgb(17 20 24 / 78%);
  color: #fff;
}

.c-video-status--live {
  background: var(--accent-500);
}

/* LIVE の点滅。動きを減らす設定では止まる（_base.css の一括指定） */
.c-video-status--live::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
  animation: video-blink 1.4s ease-in-out infinite;
}

@keyframes video-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.c-video-status--new {
  background: var(--brand-600);
}

/* --- 会員限定の鍵 ---------------------------------------------------------- */
.c-video-lock {
  display: inline-flex;
  align-items: center;
  margin-right: 0.35em;
  vertical-align: -0.15em;
  color: var(--cat-money);
}

.c-video-lock svg {
  width: 14px;
  height: 14px;
}

/* --- 主役の1本 -------------------------------------------------------------- */
.c-video-lead__meta {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.c-video-lead__logo {
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
}

.c-video-lead__program {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-video-lead__title {
  margin-top: var(--sp-1);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

@media (min-width: 720px) {
  .c-video-lead__title {
    font-size: var(--fs-xl);
  }
}

.c-video-lead__title a {
  color: inherit;
  text-decoration: none;
}

.c-video-lead__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-video-lead__excerpt {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-video-lead__date {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* --- 行リスト --------------------------------------------------------------- */
.c-video-list {
  display: flex;
  flex-direction: column;
}

.c-video-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 128px;
  gap: var(--sp-3);
  align-items: start;
  padding-block: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.c-video-item:first-child {
  padding-top: 0;
}

@media (min-width: 480px) {
  .c-video-item {
    grid-template-columns: minmax(0, 1fr) 160px;
    gap: var(--sp-4);
  }
}

.c-video-item__title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-video-item__title a {
  color: inherit;
  text-decoration: none;
}

.c-video-item__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-video-item__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* 番組名。カテゴリラベルと混ざらないよう、枠線の小さなタグにする */
.c-video-item__program {
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-700);
  text-decoration: none;
}

.c-video-item .c-video-play {
  width: 34px;
  height: 34px;
  border-width: 1.5px;
}

.c-video-item .c-video-play svg {
  width: 12px;
  height: 12px;
}

/* ===========================================================================
   ピックアップ動画（ヒーロー右側）
   ---------------------------------------------------------------------------
   注目の数本を順番に流す枠。ストーリー風の進捗バーで、いま何本目かを示す。

   送りは setInterval ではなく、進捗バーのCSSアニメーションの
   animationend で行っている。こうするとホバーで一時停止したとき、
   バーの見た目と実際の送りがズレない。

   ポスター画像の代わりにループ再生のプレビュー動画を置く場合は、
   videos.js の previewSrc を埋めると <video> に切り替わる。
   =========================================================================== */

.c-pickup {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  animation: mv-in 700ms var(--ease) 400ms both;
}

.c-pickup__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}

.c-pickup__label::before {
  content: "";
  width: 18px;
  height: 3px;
  background: var(--accent-500);
}

/* --- 映像面 ----------------------------------------------------------------
   進捗バーは映像の上に重ねたいが、button の入れ子は作れないので、
   映像（button）とバー（div）を兄弟にして、この枠を基準に重ねる。 */
.c-pickup__frame {
  position: relative;
}

.c-pickup__stage {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ink-900);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.c-pickup__stage img,
.c-pickup__stage video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 切り替わるたびに、ゆっくり寄っていく。静止画でも映像らしさが出る */
.c-pickup__stage img {
  animation: pickup-zoom 7s linear both;
}

@keyframes pickup-zoom {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.06);
  }
}

.c-pickup__stage .c-video-play {
  width: 64px;
  height: 64px;
}

.c-pickup__stage .c-video-play svg {
  width: 24px;
  height: 24px;
}

/* 下端に文字が乗るので、暗く落として読めるようにする */
.c-pickup__scrim {
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, rgb(10 14 20 / 78%), transparent);
  pointer-events: none;
}

/* --- 進捗バー（ストーリー風）----------------------------------------------- */
.c-pickup__bars {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  left: var(--sp-2);
  display: flex;
  gap: 4px;
  /* ステータスバッジと重ならないよう、左側を空ける */
  padding-left: 96px;
}

.c-pickup__bar {
  flex: 1 1 0;
  height: 3px;
  background: rgb(255 255 255 / 35%);
  overflow: hidden;
}

.c-pickup__bar span {
  display: block;
  height: 100%;
  width: 100%;
  background: #fff;
  transform: scaleX(0);
  transform-origin: left;
}

/* 再生済みのぶんは、埋まったままにしておく */
.c-pickup__bar.is-done span {
  transform: scaleX(1);
}

.c-pickup__bar.is-active span {
  animation: pickup-fill 7s linear forwards;
}

.c-pickup.is-paused .c-pickup__bar.is-active span,
.c-pickup.is-paused .c-pickup__stage img {
  animation-play-state: paused;
}

@keyframes pickup-fill {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

/* --- 見出し（映像の上に重ねる）--------------------------------------------- */
.c-pickup__caption {
  position: absolute;
  inset: auto var(--sp-4) var(--sp-4) var(--sp-4);
  color: #fff;
  pointer-events: none;
}

.c-pickup__program {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgb(255 255 255 / 78%);
}

.c-pickup__title {
  margin-top: var(--sp-1);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: #fff;
  text-shadow: 0 1px 3px rgb(0 0 0 / 45%);
}

@media (min-width: 600px) {
  .c-pickup__title {
    font-size: var(--fs-md);
  }
}

/* --- 下の操作列 ------------------------------------------------------------- */
.c-pickup__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.c-pickup__count {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-pickup__count b {
  color: var(--ink-900);
}

.c-pickup__more {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
}

.c-pickup__more:hover {
  text-decoration: underline;
}

.c-pickup__more::after {
  content: "›";
}

/* 動きを減らす設定では自動送りしない（送りは animationend が起点なので、
   アニメーションを止めれば切り替わらなくなる）。バーの操作で手動送りは可能。 */
@media (prefers-reduced-motion: reduce) {
  .c-pickup__bar.is-active span {
    animation: none;
    transform: scaleX(1);
  }

  .c-pickup__stage img {
    animation: none;
  }
}

/* --- 動画プレーヤーのモーダル ----------------------------------------------
   本番では .c-player__frame の中に YouTube / Vimeo の iframe を入れる。
   モックでは差し込み位置を示すプレースホルダを置いている。 */
.c-player {
  position: fixed;
  inset: 0;
  z-index: var(--z-drawer);
  display: grid;
  place-items: center;
  padding: var(--gutter);
  background: rgb(10 14 20 / 82%);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease);
}

.c-player.is-open {
  opacity: 1;
  visibility: visible;
}

.c-player__panel {
  width: min(960px, 100%);
  background: var(--bg);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

.c-player__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink-900);
  display: grid;
  place-items: center;
  text-align: center;
  color: rgb(255 255 255 / 70%);
  font-size: var(--fs-sm);
  padding: var(--sp-6);
}

.c-player__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-player__foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.c-player__title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-player__meta {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-player__close {
  flex: none;
}

/* --- source: mock-source/src/styles/components/_ranking.css --- */
/* ===========================================================================
   人気記事ランキング
   ---------------------------------------------------------------------------
   現行は WordPress Popular Posts のデフォルト表示をそのまま使っていて
   「何位か」が読み取れない。順位を数字で立てて、1位だけ色を変える。
   =========================================================================== */

.c-rank {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  counter-reset: rank;
}

.c-rank__item {
  position: relative;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 72px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}

.c-rank__item + .c-rank__item {
  border-top: 1px solid var(--line);
}

.c-rank__item:hover {
  background: var(--bg-soft);
}

.c-rank__num {
  counter-increment: rank;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  background: var(--bg-sunken);
  color: var(--ink-500);
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.c-rank__num::before {
  content: counter(rank);
}

/* 上位3件は色で差をつける */
.c-rank__item:nth-child(1) .c-rank__num {
  background: var(--accent-500);
  color: #fff;
}

.c-rank__item:nth-child(2) .c-rank__num,
.c-rank__item:nth-child(3) .c-rank__num {
  background: color-mix(in srgb, var(--accent-500) 16%, transparent);
  color: var(--accent-600);
}

.c-rank__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-rank__item:hover .c-rank__title {
  color: var(--brand-600);
}

.c-rank__meta {
  margin-top: var(--sp-1);
}

.c-rank__thumb {
  width: 72px;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-sunken);
}

.c-rank__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* サイドバーの狭い幅ではサムネを省いて、タイトルの行数を確保する */
.c-rank--compact .c-rank__item {
  grid-template-columns: 28px minmax(0, 1fr);
}

.c-rank--compact .c-rank__thumb {
  display: none;
}

/* --- source: mock-source/src/styles/components/_cta.css --- */
/* ===========================================================================
   会員登録CTA
   ---------------------------------------------------------------------------
   現行はヘッダーの「すべての情報を見るには会員登録」というテキストリンクだけ。
   何が得られるのかが書かれていないので、登録メリットを3点添えて置き直す。

   白地ベースを崩さないため、面は淡い青のみ。
   目立たせる役目はボタン1つに集中させる。
   =========================================================================== */

.c-cta {
  padding: var(--sp-10) var(--sp-6);
  border: 1px solid var(--brand-100);
  border-top: 3px solid var(--brand-600);
  background: var(--brand-050);
  text-align: center;
}

@media (min-width: 720px) {
  .c-cta {
    padding: var(--sp-12) var(--sp-10);
  }
}

.c-cta__title {
  font-size: var(--fs-2xl);
  color: var(--ink-900);
  margin-bottom: var(--sp-3);
}

.c-cta__lead {
  max-width: 44em;
  margin-inline: auto;
  font-size: var(--fs-base);
  color: var(--ink-700);
}

.c-cta__benefits {
  display: grid;
  gap: 1px;
  margin: var(--sp-8) auto;
  max-width: 820px;
  grid-template-columns: 1fr;
  text-align: left;
  background: var(--brand-100);
  border: 1px solid var(--brand-100);
}

@media (min-width: 720px) {
  .c-cta__benefits {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-cta__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-cta__benefit svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 0.2em;
  color: var(--brand-600);
}

.c-cta__benefit b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
  margin-bottom: var(--sp-1);
}

.c-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

.c-cta__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 記事本文中に差し込む小さめのCTA -------------------------------------- */
.c-cta-inline {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  margin-block: var(--sp-10);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  background: var(--bg-soft);
}

@media (min-width: 720px) {
  .c-cta-inline {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-6);
  }
}

.c-cta-inline__title {
  font-size: var(--fs-md);
  color: var(--ink-900);
  font-weight: 700;
  margin-bottom: var(--sp-1);
}

.c-cta-inline__text {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-cta-inline .c-btn {
  flex: none;
}

/* --- source: mock-source/src/styles/components/_article.css --- */
/* ===========================================================================
   記事詳細
   ---------------------------------------------------------------------------
   本文（.c-prose）は WordPress のブロックエディタが吐く要素をそのまま受ける
   前提でスタイルを当てる。テーマ化のとき、記事本文側の修正が不要になる。
   =========================================================================== */

/* --- 記事ヘッダー ---------------------------------------------------------- */
.c-post-head {
  padding-bottom: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.c-post-head__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
}

.c-post-head__title {
  font-size: var(--fs-3xl);
  line-height: 1.45;
  letter-spacing: 0.005em;
  margin-bottom: var(--sp-5);
}

.c-post-head__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
}

.c-post-head__meta-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.c-post-head__tools {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
}

.c-post-hero {
  margin-bottom: var(--sp-8);
  border: 1px solid var(--line);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--bg-sunken);
}

.c-post-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- 本文タイポグラフィ ---------------------------------------------------
   スマホでの読みやすさを最優先。行間1.9・段落間1.6em・
   見出し前後の余白を大きめに取って、スクロール中の現在地を掴みやすくする。 */
.c-prose {
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

@media (min-width: 720px) {
  .c-prose {
    font-size: var(--fs-prose-pc);
  }
}

.c-prose > * + * {
  margin-top: 1.6em;
}

.c-prose p {
  margin-block: 0;
}

/* --- 見出し ---------------------------------------------------------------- */
.c-prose h2 {
  margin-top: 2.6em;
  margin-bottom: 1.2em;
  padding: var(--sp-4) var(--sp-5);
  border-left: 4px solid var(--brand-600);
  background: var(--bg-soft);
  font-size: 1.375rem;
  line-height: 1.5;
}

@media (min-width: 720px) {
  .c-prose h2 {
    font-size: 1.625rem;
  }
}

.c-prose h3 {
  margin-top: 2.2em;
  margin-bottom: 1em;
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--line);
  font-size: 1.25rem;
  line-height: 1.55;
}

@media (min-width: 720px) {
  .c-prose h3 {
    font-size: 1.4375rem;
  }
}

.c-prose h4 {
  margin-top: 2em;
  margin-bottom: 0.8em;
  font-size: 1.1875rem;
  color: var(--ink-900);
}

.c-prose h2:first-child,
.c-prose h3:first-child {
  margin-top: 0;
}

/* --- 文中の強調 ------------------------------------------------------------
   現行記事は <strong> が多用されている。太字だけだと本文に埋もれるので、
   下線マーカーで視線が止まるようにする。 */
.c-prose strong,
.c-prose b {
  font-weight: 700;
  color: var(--ink-900);
  background: linear-gradient(
    transparent 64%,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 0
  );
}

/* 本文中のリンク。記事内に差し込むボタン（.c-btn）は対象外にしないと、
   ボタンの文字色まで本文リンク色で塗りつぶしてしまう。 */
.c-prose a:not(.c-btn):not(.wp-element-button) {
  color: var(--ink-700);
}

.c-prose a:not(.c-btn):not(.wp-element-button):hover {
  color: var(--ink-700);
  text-decoration-thickness: 2px;
}

/* --- リスト ---------------------------------------------------------------- */
.c-prose ul,
.c-prose ol {
  padding-left: 1.6em;
  list-style: revert;
}

.c-prose ul {
  list-style: none;
  padding-left: 0;
}

.c-prose ul > li {
  position: relative;
  padding-left: 1.5em;
}

.c-prose ul > li::before {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.78em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-500);
}

.c-prose li + li {
  margin-top: 0.6em;
}

.c-prose ol > li::marker {
  font-weight: 700;
  color: var(--brand-600);
}

/* --- 引用・区切り ---------------------------------------------------------- */
.c-prose blockquote {
  padding: var(--sp-5) var(--sp-6);
  border-left: 4px solid var(--line-strong);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--bg-soft);
  color: var(--ink-500);
  font-size: var(--fs-base);
}

.c-prose hr {
  margin-block: 2.4em;
  border: none;
  border-top: 1px solid var(--line);
}

/* --- 画像 ------------------------------------------------------------------ */
.c-prose figure {
  margin-inline: 0;
}

.c-prose img {
  border-radius: var(--radius-md);
  width: 100%;
}

.c-prose figcaption {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-align: center;
}

/* --- 表 --------------------------------------------------------------------
   記事に比較表が多いので、スマホでは横スクロールさせて崩さない。 */
.c-prose figure.wp-block-table,
.c-prose .c-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
}

.c-prose table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.c-prose th,
.c-prose td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.c-prose thead th,
.c-prose tbody tr:first-child th {
  background: var(--bg-soft);
  color: var(--ink-900);
  font-weight: 700;
  white-space: nowrap;
}

.c-prose tbody tr:last-child th,
.c-prose tbody tr:last-child td {
  border-bottom: none;
}

.c-prose tbody tr:hover {
  background: var(--surface-hover);
}

/* --- 記事下のシェア -------------------------------------------------------- */
.c-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.c-share__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-share__list {
  display: flex;
  gap: var(--sp-2);
}

.c-share__btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  color: var(--ink-700);
  background: var(--surface);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.c-share__btn svg {
  width: 18px;
  height: 18px;
}

.c-share__btn:hover {
  color: #fff;
  background: var(--ink-900);
  border-color: var(--ink-900);
}

/* コピー完了のトースト */
.c-share__copied {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--cat-solution);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.c-share__copied.is-visible {
  opacity: 1;
}

/* --- 関連キーワード -------------------------------------------------------- */
.c-keywords {
  margin-top: var(--sp-8);
  padding: var(--sp-5);
  border-radius: var(--radius-md);
  background: var(--bg-soft);
}

.c-keywords__label {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

/* --- source: mock-source/src/styles/components/_supervisor.css --- */
/* ===========================================================================
   監修者
   ---------------------------------------------------------------------------
   3か所に出す。役割を分けているので、それぞれ見た目も変える。

     1. 記事ヘッダーの1行表記（.c-credit）
        「誰が書いて、誰が見ているか」を読み始める前に示す。
     2. 本文直後の監修者コメント（.c-supervisor）
        記事の内容に対して、監修者が現場の判断を一言添える枠。ここが主役。
     3. コメント枠の中のプロフィール（.c-supervisor__profile）
        肩書・所属・経歴。誰の発言かを裏づける。

   現行サイトには監修者の表示が一切ない。BtoBの情報メディアでは、
   書き手と監修者が明示されているかどうかが信頼性に直結する。
   =========================================================================== */

/* --- 1. 記事ヘッダーの1行表記 --------------------------------------------- */
.c-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-credit__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
}

.c-credit__label {
  padding: 0.1em 0.45em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
  white-space: nowrap;
}

.c-credit__name {
  color: var(--ink-900);
  font-weight: 700;
  text-decoration: none;
}

.c-credit__name:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

/* --- 2. 監修者コメント枠 ---------------------------------------------------
   本文の直後、シェアボタンの手前に置く。
   上辺の色帯と1px罫線だけで、白地の基調を崩さずに存在感を出す。 */
.c-supervisor {
  margin-top: var(--sp-12);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-600);
  background: var(--surface);
}

.c-supervisor__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-900);
}

.c-supervisor__head svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--brand-600);
}

.c-supervisor__body {
  padding: var(--sp-6) var(--sp-5);
}

@media (min-width: 720px) {
  .c-supervisor__body {
    padding: var(--sp-8) var(--sp-8);
  }
}

/* コメント本文。引用であることが伝わるよう、左に罫線を引く */
.c-supervisor__comment {
  position: relative;
  padding-left: var(--sp-5);
  border-left: 3px solid var(--brand-100);
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

@media (min-width: 720px) {
  .c-supervisor__comment {
    font-size: var(--fs-prose-pc);
  }
}

.c-supervisor__comment p + p {
  margin-top: 1.2em;
}

/* --- 3. プロフィール ------------------------------------------------------- */
.c-supervisor__profile {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

@media (min-width: 720px) {
  .c-supervisor__profile {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: var(--sp-5);
  }
}

.c-supervisor__avatar {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
  object-fit: cover;
}

.c-supervisor__role {
  display: inline-block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-600);
}

.c-supervisor__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--ink-900);
  margin-bottom: var(--sp-1);
}

.c-supervisor__kana {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-500);
}

.c-supervisor__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.c-supervisor__org {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-supervisor__bio {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-supervisor__more {
  margin-top: var(--sp-3);
}

.c-supervisor__more a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
}

.c-supervisor__more a::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-supervisor__more a:hover {
  text-decoration: underline;
}

/* --- source: mock-source/src/styles/components/_supervisors.css --- */
/* ===========================================================================
   監修者一覧・監修者プロフィール
   ---------------------------------------------------------------------------
   誰が記事を見ているのかを明示するためのページ。
   顔写真は大きくしすぎず、肩書と担当分野が先に読める並びにしている。
   =========================================================================== */

.c-sv-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-sv-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  }
}

/* --- 一覧のカード ----------------------------------------------------------- */
.c-sv-card {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-600);
  background: var(--surface);
}

.c-sv-card__photo {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
}

.c-sv-card__role {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-600);
}

.c-sv-card__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.c-sv-card__name a {
  color: inherit;
  text-decoration: none;
}

.c-sv-card__name a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-sv-card__kana {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-500);
}

.c-sv-card__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.c-sv-card__org {
  margin-top: 0.2em;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-sv-card__bio {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* 担当している分野。記事一覧と同じ色分けで示す */
.c-sv-card__cats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
}

.c-sv-card__link {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: var(--sp-4) calc(var(--sp-5) * -1) calc(var(--sp-5) * -1);
  padding: var(--sp-3) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
}

.c-sv-card__link::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-sv-card__link:hover {
  background: var(--bg-sunken);
  text-decoration: underline;
}

/* --- 個別ページの見出し ------------------------------------------------------ */
.c-sv-head {
  padding-block: var(--sp-8) var(--sp-10);
  border-top: 3px solid var(--brand-600);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.c-sv-head__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

@media (min-width: 620px) {
  .c-sv-head__inner {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: center;
  }
}

.c-sv-head__photo {
  width: 120px;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
}

@media (min-width: 620px) {
  .c-sv-head__photo {
    width: 100%;
  }
}

.c-sv-head__role {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-600);
}

.c-sv-head__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-3xl);
  color: var(--ink-900);
}

.c-sv-head__kana {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--ink-500);
}

.c-sv-head__title {
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-700);
}

.c-sv-head__org {
  margin-top: 0.2em;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-sv-head__count {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-sv-head__count b {
  font-size: var(--fs-xl);
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
  padding-right: 0.1em;
}

.c-sv-bio {
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

/* ===========================================================================
   TOPページ下部の監修者の帯
   ---------------------------------------------------------------------------
   主導線ではないので、面を塗らず罫線だけの静かな見た目にする。
   「誰が見ている記事なのか」が伝わればよく、詳細は一覧ページに任せる。
   =========================================================================== */

.c-sv-strip {
  padding: var(--sp-6);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-sv-strip__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.c-sv-strip__label {
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-600);
}

.c-sv-strip__title {
  flex: 1 1 auto;
  font-size: var(--fs-md);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sv-strip__more {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
  white-space: nowrap;
}

.c-sv-strip__more::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-sv-strip__more:hover {
  text-decoration: underline;
}

.c-sv-strip__list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
}

.c-sv-strip__person {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  color: inherit;
}

.c-sv-strip__person img {
  flex: none;
  width: 52px;
  height: 52px;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-sv-strip__person b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sv-strip__person:hover b {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-sv-strip__role {
  display: block;
  margin-top: 0.15em;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--ink-500);
}

.c-sv-strip__count {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
  .c-sv-bio {
    font-size: var(--fs-prose-pc);
  }
}

/* --- source: mock-source/src/styles/components/_service.css --- */
/* ===========================================================================
   サービス紹介ページ（言葉のチカラ）
   ---------------------------------------------------------------------------
   サービスサイトの内容をメディアの下層ページとして再構成したもの。
   元サイトは黒地＋赤のLP調だが、ここはメディアの中の1ページなので
   白地ベース・直角基調というサイト全体のルールに揃えている。
   ブランドの赤は、見出しの帯・数値・CTAといった要所だけに使う。

   このページ限定の部品なので、まとめてこのファイルに置く。
   =========================================================================== */

.p-service {
  /* このページのアクセント色。以下の部品はすべてこれを参照する */
  --svc: var(--cat-kotoba);
  --svc-bg: var(--cat-kotoba-bg);
}

/* --- ファーストビュー ------------------------------------------------------ */
.c-svc-hero {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  padding-block: var(--sp-10) var(--section-gap);
}

@media (min-width: 900px) {
  .c-svc-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: var(--sp-10);
    align-items: center;
    padding-block: var(--sp-12) var(--section-gap);
  }
}

.c-svc-hero__eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: var(--sp-5);
  padding: 0.45em 1em;
  background: var(--svc);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.14em;
}

.c-svc-hero__title {
  font-size: clamp(1.75rem, 1.15rem + 2.4vw, 2.75rem);
  line-height: 1.4;
  margin-bottom: var(--sp-5);
}

.c-svc-hero__lead {
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-700);
  margin-bottom: var(--sp-6);
}

.c-svc-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

/* このページのCTAはブランド赤で統一する */
.p-service .c-btn--primary {
  background: var(--svc);
}

.p-service .c-btn--primary:hover {
  background: color-mix(in srgb, var(--svc) 82%, #000);
}

/* --- セクション見出しの色をページ色に寄せる ------------------------------- */
.p-service .l-section__head {
  --section-color: var(--svc);
}

/* --- 3つの壁 --------------------------------------------------------------- */
.c-issue-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 760px) {
  .c-issue-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-issue {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  border-top: 3px solid var(--svc);
}

.c-issue__no {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--svc);
}

.c-issue__title {
  font-size: var(--fs-lg);
}

.c-issue__text {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-issue__figures {
  display: flex;
  gap: var(--sp-5);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-figure__num {
  display: block;
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-figure__label {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* 課題→解決のつなぎ */
.c-issue-bridge {
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  text-align: center;
  background: var(--svc-bg);
  border: 1px solid color-mix(in srgb, var(--svc) 22%, transparent);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--svc);
}

/* --- サービス概要の3点 ------------------------------------------------------ */
.c-points {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-top: var(--sp-8);
}

@media (min-width: 760px) {
  .c-points {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-point {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--svc);
}

.c-point__title {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-2);
}

.c-point__text {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- アナウンサー ---------------------------------------------------------- */
.c-ann-grid {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-ann-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-ann {
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-ann__photo {
  /* 支給素材が 272×408（2:3）なので、比率を合わせて顔が切れないようにする */
  aspect-ratio: 2 / 3;
  width: 100%;
  object-fit: cover;
  background: var(--bg-sunken);
  border-bottom: 1px solid var(--line);
}

.c-ann__body {
  padding: var(--sp-5);
}

.c-ann__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.c-ann__kana {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-500);
}

/* プロフィールは定義リストで組む。項目名と内容の対応が崩れない */
.c-ann__profile {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
}

.c-ann__profile dt {
  font-weight: 700;
  color: var(--ink-500);
}

.c-ann__profile dd {
  margin: 0;
  color: var(--ink-700);
}

/* --- 5ステップ ------------------------------------------------------------- */
.c-steps {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  counter-reset: step;
}

@media (min-width: 760px) {
  .c-steps {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

.c-step {
  position: relative;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--svc);
  background: var(--surface);
}

/* PCでは矢印で流れをつなぐ */
@media (min-width: 760px) {
  .c-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    right: calc(var(--sp-3) * -1 - 5px);
    width: 8px;
    height: 8px;
    border-top: 2px solid var(--line-strong);
    border-right: 2px solid var(--line-strong);
    transform: translateY(-50%) rotate(45deg);
  }
}

.c-step__no {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--svc);
}

.c-step__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
}

.c-step__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-steps-note {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  border-left: 3px solid var(--line-strong);
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

/* --- 5つの価値 ------------------------------------------------------------- */
.c-merits {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .c-merits {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .c-merits {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.c-merit {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
}

.c-merit__no {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--ink-400);
}

.c-merit__title {
  font-size: var(--fs-md);
}

.c-merit__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-merit__figure {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.c-merit__figure .c-figure__num {
  color: var(--svc);
}

/* --- 納品物 ---------------------------------------------------------------- */
.c-deliver {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .c-deliver {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-btn--primary {
    width: 224.7px;
  }

  .c-sim-tabs__tab {
    padding: 20px 10px;
  }
}

@media (max-width: 480px) {
  .l-section__label {
    display: none;
  }
  .l-section__head {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .c-prose .c-sim-cta .c-btn,
  .c-sim-cta .c-btn {
    width: 100%;
  }

  .c-sim-tabs__name {
    font-size: 14px !important;
  }

  .c-sv-card {
    grid-template-columns: 1fr;
  }

  .c-mg-table {
    width: 100%;
    min-width: 700px;
  }
}

@media (max-width: 390px) {
  .c-power-grid {
    grid-template-columns: 1fr;
  }

  .c-power-grid > :last-child {
    align-self: flex-start;
  }

  .c-gl-bar__result {
    display: none;
  }

  .l-section__title {
    font-size: 22px;
  }

  .p-service .c-btn--primary {
    width: 201px;
  }

  .c-btn--outline,
  .c-btn--accent {
    min-width: 0;
    width: 100%;
  }

  .c-cta-split__inner {
    display: flex !important;
    flex-direction: column;
  }

  .c-cta-split__col {
    padding: 0;
  }

  .c-btn--primary {
    width: 100%;
  }

  .c-page-head__title {
    font-size: var(--fs-2xl);
  }

  .c-cta-inline__title {
    font-size: 1rem;
  }

  .c-supervisor__profile {
    grid-template-columns: 1fr;
  }

  .c-empty {
    padding: 40px 20px;
  }

  .c-empty > .c-btn {
    margin-top: 0;
  }
}

@media (min-width: 1000px) {
  .c-deliver {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .c-power-grid > :last-child {
    align-self: flex-start;
  }
}

.c-deliver__item {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-deliver__badge {
  align-self: flex-start;
  padding: 0.15em 0.6em;
  background: var(--svc-bg);
  color: var(--svc);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.c-deliver__title {
  font-size: var(--fs-md);
}

.c-deliver__text {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-deliver__use {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 実績の数字 ------------------------------------------------------------ */
.c-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 900px) {
  .c-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.c-stat {
  padding: var(--sp-6) var(--sp-4);
  background: var(--surface);
  text-align: center;
}

.c-stat__num {
  display: block;
  font-size: clamp(1.625rem, 1.15rem + 1.6vw, 2.375rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--svc);
  font-variant-numeric: tabular-nums;
}

.c-stat__label {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-stat__note {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--ink-400);
}

/* --- 料金 ------------------------------------------------------------------ */
.c-price {
  border: 1px solid var(--line);
  border-top: 3px solid var(--svc);
  background: var(--surface);
}

.c-price__head {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  padding: var(--sp-6) var(--sp-5);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 760px) {
  .c-price__head {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-8);
  }
}

.c-price__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--svc);
}

.c-price__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.c-price__amount {
  display: flex;
  align-items: baseline;
  gap: 0.15em;
  white-space: nowrap;
}

.c-price__value {
  font-size: clamp(2.5rem, 1.8rem + 3vw, 3.75rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* 金額を出さず個別見積にする場合の表示 */
.c-price__quote {
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--svc);
  white-space: nowrap;
}

.c-price__unit {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-price__tax {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-price__body {
  padding: var(--sp-6) var(--sp-5);
}

@media (min-width: 760px) {
  .c-price__body {
    padding: var(--sp-8);
  }
}

.c-price__caption {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-price__items {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .c-price__items {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.c-price__item {
  padding: var(--sp-4);
  background: var(--surface);
}

.c-price__item b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
  margin-bottom: var(--sp-1);
}

.c-price__item span {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  line-height: var(--lh-ui);
}

.c-price__notes {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- ブーストオプション ---------------------------------------------------- */
.c-options {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .c-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .c-options {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.c-option {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-option__tag {
  align-self: flex-start;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--svc);
}

.c-option__title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.c-option__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-option__price {
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-option__effect {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* --- FAQ -------------------------------------------------------------------
   details/summary で作る。JSなしで開閉でき、キーボードでも操作できる。 */
.c-faq {
  border-top: 1px solid var(--line);
}

.c-faq__item {
  border-bottom: 1px solid var(--line);
}

.c-faq__q {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-10) var(--sp-4) 0;
  position: relative;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
  cursor: pointer;
  list-style: none;
}

.c-faq__q::-webkit-details-marker {
  display: none;
}

.c-faq__q::before {
  content: "Q";
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--svc);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* 開閉の＋／− */
.c-faq__q::after {
  content: "";
  position: absolute;
  top: 50%;
  right: var(--sp-3);
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: translateY(-70%) rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.c-faq__item[open] .c-faq__q::after {
  transform: translateY(-20%) rotate(-135deg);
}

.c-faq__q:hover {
  color: var(--svc);
}

.c-faq__a {
  display: flex;
  gap: var(--sp-3);
  padding: 0 var(--sp-10) var(--sp-5) 0;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-faq__a::before {
  content: "A";
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid var(--line-strong);
  color: var(--ink-500);
  font-size: var(--fs-xs);
  font-weight: 700;
}

/* --- 最後のCTA ------------------------------------------------------------- */
.c-svc-cta {
  padding: var(--sp-10) var(--sp-6);
  border: 1px solid color-mix(in srgb, var(--svc) 22%, transparent);
  border-top: 3px solid var(--svc);
  background: var(--svc-bg);
  text-align: center;
}

@media (min-width: 720px) {
  .c-svc-cta {
    padding: var(--sp-12) var(--sp-10);
  }
}

.c-svc-cta__title {
  font-size: var(--fs-2xl);
  margin-bottom: var(--sp-3);
}

.c-svc-cta__lead {
  max-width: 44em;
  margin: 0 auto var(--sp-8);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* --- source: mock-source/src/styles/components/_about.css --- */
/* ===========================================================================
   「中小企業のチカラとは」ページ
   ---------------------------------------------------------------------------
   既存ページの構成（メディアの位置づけ → 5つのチカラ → 人気/新着）を踏襲しつつ、
   文章だけだったプロジェクト内での役割を図に置き換えている。
   =========================================================================== */

/* 見出しの強調。ページタイトルの中の一節だけ色を差す */
.c-about-mark {
  font-style: normal;
  color: var(--brand-700);
  border-bottom: 3px solid var(--brand-500);
  padding-bottom: 0.05em;
}

.c-about {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .c-about {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: var(--sp-10);
    align-items: start;
  }
}

.c-about__text {
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

@media (min-width: 720px) {
  .c-about__text {
    font-size: var(--fs-prose-pc);
  }
}

.c-about__text > * + * {
  margin-top: 1.4em;
}

.c-about__text b {
  color: var(--ink-900);
  background: linear-gradient(
    transparent 64%,
    color-mix(in srgb, var(--brand-500) 22%, transparent) 0
  );
}

/* プロジェクト内の各ポータル */
.c-portal-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-portal-list li {
  padding: 0.25em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  background: var(--surface);
}

/* --- 役割の図 -------------------------------------------------------------- */
.c-about__figure {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-about__figure-title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-500);
}

.c-role-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-role {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--line-strong);
  background: var(--surface);
}

/* このメディアが担っている役割を色で立てる */
.c-role.is-current {
  border-left-color: var(--brand-600);
}

.c-role__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-400);
}

.c-role.is-current .c-role__label {
  color: var(--brand-600);
}

.c-role__name {
  font-size: var(--fs-md);
  color: var(--ink-900);
}

.c-role__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 5つのチカラ ----------------------------------------------------------- */
.c-chikara-list {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-chikara-list {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  }
}

.c-chikara {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 3px solid var(--chikara-color, var(--brand-600));
  background: var(--surface);
}

.c-chikara[data-cat="money"] {
  --chikara-color: var(--cat-money);
}
.c-chikara[data-cat="recruit"] {
  --chikara-color: var(--cat-recruit);
}
.c-chikara[data-cat="dx"] {
  --chikara-color: var(--cat-dx);
}
.c-chikara[data-cat="web"] {
  --chikara-color: var(--cat-web);
}
.c-chikara[data-cat="solution"] {
  --chikara-color: var(--cat-solution);
}

.c-chikara__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.c-chikara__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--chikara-color, var(--brand-600));
}

.c-chikara__name {
  margin-top: var(--sp-1);
  font-size: var(--fs-lg);
}

.c-chikara__body {
  flex: 1 1 auto;
  padding: 0 var(--sp-5) var(--sp-5);
}

.c-chikara__text {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-chikara__topics {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-chikara__topics dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ink-400);
}

.c-chikara__topics dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-chikara__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--chikara-color, var(--brand-600));
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.c-chikara__link::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-chikara__link:hover {
  background: var(--bg-sunken);
  text-decoration: underline;
}

/* --- source: mock-source/src/styles/components/_needs.css --- */
/* ===========================================================================
   ニーズから探す（おかね／採用のポータル共通）
   ---------------------------------------------------------------------------
   補助金ポータルの検索UIを参考にした、目的×業種×キーワードの絞り込み。
   ただしモーダルで選ばせる方式ではなく、選択肢を最初から開いて並べている。
   記事メディアでは選択肢の数が少なく、開閉の手間のほうが大きいため。

   件数はその場で更新する。0件の条件を選ばせないための表示。
   =========================================================================== */

/* ポータルページごとのアクセント色。
   --portal を差し替えるだけで、検索UI一式の色が切り替わる。 */
.p-money {
  --portal: var(--cat-money);
  --portal-bg: var(--cat-money-bg);
}

.p-recruit {
  --portal: var(--cat-recruit);
  --portal-bg: var(--cat-recruit-bg);
}

.p-money .c-page-head,
.p-recruit .c-page-head {
  --page-head-color: var(--portal);
}

.p-money .l-section__head,
.p-recruit .l-section__head {
  --section-color: var(--portal);
}

/* --- 検索パネル ------------------------------------------------------------ */
.c-needs {
  padding-block: var(--sp-8);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

.c-needs__head {
  margin-bottom: var(--sp-5);
}

.c-needs__title {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--fs-xl);
}

.c-needs__title::before {
  content: "";
  width: 4px;
  height: 1.1em;
  background: var(--portal);
}

.c-needs__lead {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--ink-500);
}

.c-needs__panel {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

@media (min-width: 760px) {
  .c-needs__panel {
    padding: var(--sp-6);
  }
}

.c-needs__row + .c-needs__row {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
}

.c-needs__label {
  display: block;
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-500);
}

/* --- 目的（ニーズ）のボタン ------------------------------------------------ */
.c-needs__options {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .c-needs__options {
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  }
}

.c-need {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
  /* WordPress-only: page-money.php/page-recruit.php render this as a real
     <a href> (server-rendered GET-param filtering, no JS required), not the
     source's <button type="button"> — buttons never get a default
     underline so the source CSS never needed this rule; an anchor does. */
  text-decoration: none;
  color: inherit;
}

.c-need:hover,
.c-need[aria-pressed="true"] {
  border-color: var(--portal);
  border-left-color: var(--portal);
  background: var(--portal-bg);
}

/* 選択済みであることを、色だけでなくチェック記号でも示す */
.c-need[aria-pressed="true"] .c-need__name::before {
  content: "✓ ";
  color: var(--portal);
}

.c-need__name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-need__desc {
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-need__count {
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--portal);
  font-variant-numeric: tabular-nums;
}

/* --- キーワード ------------------------------------------------------------ */
.c-needs__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 480px;
  padding: 0 var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.c-needs__field:focus-within {
  border-color: var(--portal);
}

.c-needs__field svg {
  width: 18px;
  height: 18px;
  flex: none;
  color: var(--ink-500);
}

.c-needs__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: none;
  background: transparent;
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-needs__input:focus {
  outline: none;
}

/* --- 件数と操作 ------------------------------------------------------------ */
.c-needs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-needs__count {
  font-size: var(--fs-base);
  color: var(--ink-700);
}

.c-needs__count b {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--portal);
  font-variant-numeric: tabular-nums;
  padding-inline: 0.15em;
}

/* --- 目的から選ぶ（一覧）---------------------------------------------------- */
.c-purpose-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .c-purpose-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .c-purpose-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-purpose {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6) var(--sp-5);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}

.c-purpose:hover {
  background: var(--portal-bg);
}

.c-purpose__name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-purpose__name::after {
  content: "›";
  color: var(--portal);
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-purpose__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-purpose__count {
  margin-top: auto;
  padding-top: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--portal);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   サービスカード
   ---------------------------------------------------------------------------
   ニーズ検索の結果には記事とサービスの両方を出す。
   読者が求めているのは解決手段であって、それが記事かサービスかは二の次のため。

   準備中のサービスもカードとして出す。
   「このニーズにも取り組んでいる」ことが伝わるほうが、
   一覧から消えているより読者にとって有益なため。
   =========================================================================== */

.c-service-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .c-service-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
}

.c-service {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 3px solid var(--portal);
  background: var(--surface);
}

.c-service.is-preparing {
  border-top-color: var(--line-strong);
  background: var(--bg-soft);
}

.c-service__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.c-service__badge {
  display: inline-block;
  margin-bottom: var(--sp-2);
  margin-right: var(--sp-1);
  padding: 0.15em 0.6em;
  background: var(--portal-bg);
  color: var(--portal);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.c-service__badge--soon {
  background: var(--bg-sunken);
  color: var(--ink-500);
}

.c-service__name {
  font-size: var(--fs-xl);
  color: var(--ink-900);
}

.c-service__tagline {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--portal);
}

.c-service.is-preparing .c-service__tagline {
  color: var(--ink-500);
}

.c-service__body {
  flex: 1 1 auto;
  padding: 0 var(--sp-5) var(--sp-5);
}

.c-service__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-service__points {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-service__points li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-service__points li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.42em;
  width: 0.5em;
  height: 0.28em;
  border-left: 2px solid var(--portal);
  border-bottom: 2px solid var(--portal);
  transform: rotate(-45deg);
}

.c-service.is-preparing .c-service__points li::before {
  border-color: var(--ink-400);
}

.c-service__needs {
  margin-top: var(--sp-4);
}

.c-service__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--portal);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  text-decoration: none;
  transition: opacity var(--dur) var(--ease);
}

.c-service__link::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-service__link:hover {
  opacity: 0.85;
}

/* 外部サイトへ出ることを記号で示す */
.c-service__ext {
  margin-left: 0.3em;
  font-size: var(--fs-xs);
}

.c-service__soon {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-sunken);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-500);
  text-align: center;
}

/* --- source: mock-source/src/styles/components/_web.css --- */
/* ===========================================================================
   WEBのチカラ ポータル
   ---------------------------------------------------------------------------
   ヒーローに見積シミュレーターを置く。
   「まず相場を知りたい」が最も多い入口なので、記事より先に出している。
   =========================================================================== */

.p-web {
  --portal: var(--cat-web);
  --portal-bg: var(--cat-web-bg);
}

.p-web .c-page-head__eyebrow {
  color: var(--cat-web);
}

.p-web .l-section__head {
  --section-color: var(--cat-web);
}

.c-web-hero {
  padding-block: var(--sp-8) var(--section-gap);
  border-top: 3px solid var(--cat-web);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.c-web-hero__inner {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .c-web-hero__inner {
    /* 左は読み物、右は操作。操作側を広く取る */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: var(--sp-10);
  }
}

/* PCでは、読んでいる間もシミュレーターが横に残るようにする */
@media (min-width: 1000px) {
  .c-web-hero__copy {
    position: sticky;
    top: calc(var(--header-h-pc) + 45px + var(--sp-6));
  }
}

.c-web-hero__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-3xl);
  color: var(--ink-900);
}

.c-web-hero__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

/* --- こんなときに ----------------------------------------------------------
   シミュレーターを使う理由を、読者の言葉で並べておく。 */
.c-web-hero__points {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat-web);
  background: var(--bg-soft);
}

.c-web-hero__points-title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cat-web);
}

.c-web-hero__points ul {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.c-web-hero__points li {
  position: relative;
  padding-left: 1.4em;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-web-hero__points li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.62em;
  width: 7px;
  height: 7px;
  background: var(--cat-web);
}

/* --- ヒーロー内のシミュレーター --------------------------------------------
   専用ページと違い、周りに記事や導線があるので、
   枠の主張はページ側に合わせて控えめにする。 */
.c-web-hero__sim .c-sim {
  border-top-color: var(--cat-web);
}

.c-web-hero__sim .c-sim__label,
.c-web-hero__sim .c-sim__section-title {
  color: var(--cat-web);
}

.c-web-hero__sim .c-sim__section-title {
  border-left-color: var(--cat-web);
  color: var(--ink-900);
}

/* --- source: mock-source/src/styles/components/_dx.css --- */
/* ===========================================================================
   DXのチカラ ポータル ＋ サービス詳細ページ
   =========================================================================== */

.p-dx {
  --portal: var(--cat-dx);
  --portal-bg: var(--cat-dx-bg);
}

.p-dx .c-page-head__eyebrow {
  color: var(--cat-dx);
}

.p-dx .l-section__head {
  --section-color: var(--cat-dx);
}

.p-dx .c-web-hero {
  border-top-color: var(--cat-dx);
}

.p-dx .c-web-hero__points {
  border-left-color: var(--cat-dx);
}

.p-dx .c-web-hero__points-title,
.p-dx .c-web-hero__sim .c-sim__label {
  color: var(--cat-dx);
}

.p-dx .c-web-hero__points li::before,
.p-dx .c-web-hero__sim .c-sim {
  background: var(--cat-dx);
}

.p-dx .c-web-hero__sim .c-sim {
  background: var(--surface);
  border-top-color: var(--cat-dx);
}

.p-dx .c-web-hero__sim .c-sim__section-title {
  border-left-color: var(--cat-dx);
}

/* ===========================================================================
   DX診断の結果
   =========================================================================== */

/* --- セキュリティの現在地 --------------------------------------------------
   時間では測れないので、現状と対策後を並べて示す。 */
.c-dx__security {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
  text-align: left;
}

.c-dx__security-title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-dx__gauge {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-dx__gauge-row {
  display: grid;
  grid-template-columns: 4em minmax(0, 1fr) 2.5em;
  align-items: center;
  gap: var(--sp-3);
}

.c-dx__gauge-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-dx__gauge-bar {
  height: 10px;
  background: var(--bg-sunken);
  overflow: hidden;
}

.c-dx__gauge-bar span {
  display: block;
  height: 100%;
  background: var(--ink-400);
  transition: width var(--dur) var(--ease);
}

.c-dx__gauge-row--after .c-dx__gauge-bar span {
  background: var(--cat-dx);
}

.c-dx__gauge-row--after .c-dx__gauge-label,
.c-dx__gauge-row--after .c-dx__gauge-num {
  color: var(--cat-dx);
}

.c-dx__gauge-num {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-dx__security-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 推奨サービス ---------------------------------------------------------- */
.c-dx__reco {
  margin-top: var(--sp-6);
  text-align: left;
}

.c-dx__reco-title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--ink-900);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-dx__reco-title span {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}

.c-dx__reco-list {
  display: grid;
  gap: var(--sp-3);
}

/* すでに一通り整っている場合 */
.c-dx__reco-none {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat-solution);
  background: var(--surface);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-dx__reco-item {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat-dx);
  background: var(--surface);
}

.c-dx__reco-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.c-dx__reco-name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-dx__reco-soon {
  padding: 0.1em 0.5em;
  background: var(--bg-sunken);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-dx__reco-tagline {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* なぜ勧めているのかを必ず書く。理由なしの推奨は信用されない */
.c-dx__reco-reason {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-3);
  background: var(--cat-dx-bg);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-dx__reco-reason span {
  flex: none;
  font-weight: 700;
  color: var(--cat-dx);
}

.c-dx__reco-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.c-dx__reco-points li {
  padding: 0.15em 0.6em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  color: var(--ink-700);
}

.c-dx__reco-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cat-dx);
}

.c-dx__reco-link::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

/* ===========================================================================
   サービス詳細ページ
   =========================================================================== */

/* サービス詳細ページは色だけを差し替えて使い回す。
   既定はDX色。採用のサービスでは body 側のクラスで上書きする。 */
body {
  --svc-accent: var(--cat-dx);
  --svc-accent-bg: var(--cat-dx-bg);
}

.p-recruit-svc {
  --svc-accent: var(--cat-recruit);
  --svc-accent-bg: var(--cat-recruit-bg);
}

.c-svc-head {
  padding-block: var(--sp-8) var(--sp-10);
  border-top: 3px solid var(--svc-accent);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.c-svc-head__kind {
  display: inline-block;
  padding: 0.2em 0.7em;
  background: var(--svc-accent-bg);
  color: var(--svc-accent);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.c-svc-head__name {
  margin-top: var(--sp-3);
  font-size: var(--fs-3xl);
  color: var(--ink-900);
}

.c-svc-head__tagline {
  margin-top: var(--sp-3);
  max-width: 44em;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-svc-head__specs {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .c-svc-head__specs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-svc-head__specs li {
  padding: var(--sp-4);
  background: var(--surface);
}

.c-svc-head__specs span {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-svc-head__specs b {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-xl);
  color: var(--svc-accent);
  font-variant-numeric: tabular-nums;
}

.c-svc-head__specs small {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-svc-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- 課題 ------------------------------------------------------------------ */
.c-svc-issues {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-svc-issues {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c-svc-issues li {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) var(--sp-8);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-svc-issues li::before {
  content: "✓";
  position: absolute;
  left: var(--sp-4);
  color: var(--svc-accent);
  font-weight: 700;
}

.c-svc-lead {
  margin-top: var(--sp-6);
  max-width: 52em;
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

@media (min-width: 720px) {
  .c-svc-lead {
    font-size: var(--fs-prose-pc);
  }
}

.c-svc-lead b {
  color: var(--ink-900);
  background: linear-gradient(
    transparent 64%,
    color-mix(in srgb, var(--svc-accent) 20%, transparent) 0
  );
}

/* --- 理由 ------------------------------------------------------------------ */
.c-svc-reasons {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-svc-reasons {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
}

.c-svc-reasons li {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--svc-accent);
  background: var(--surface);
}

.c-svc-reasons__no {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--svc-accent);
}

.c-svc-reasons__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.c-svc-reasons__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 機能 ------------------------------------------------------------------ */
.c-svc-features {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .c-svc-features {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .c-svc-features {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-svc-features > div {
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
}

.c-svc-features b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-svc-features span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 音声品質 -------------------------------------------------------------- */
.c-svc-quality {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .c-svc-quality {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-svc-quality article {
  display: flex;
  flex-direction: column;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-svc-quality__no {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}

.c-svc-quality__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.c-svc-quality__issue {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-svc-quality__fix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: auto;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-svc-quality__fix span {
  flex: none;
  font-weight: 700;
  color: var(--svc-accent);
}

/* --- 利用環境 -------------------------------------------------------------- */
.c-svc-env {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
}

@media (min-width: 720px) {
  .c-svc-env {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c-svc-env > div {
  padding: var(--sp-4);
  border-left: 3px solid var(--line-strong);
  background: var(--surface);
}

.c-svc-env__title {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-svc-env__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* --- 料金・比較の表 -------------------------------------------------------- */
.c-svc-price {
  display: grid;
  gap: var(--sp-5);
}

.c-svc-price table,
.c-svc-compare table {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--surface);
}

.c-svc-price caption {
  padding-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  text-align: left;
}

.c-svc-price th,
.c-svc-price td,
.c-svc-compare th,
.c-svc-compare td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  text-align: left;
}

.c-svc-price th {
  font-weight: 500;
  color: var(--ink-700);
}

.c-svc-price th small {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-svc-price td {
  text-align: right;
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.c-svc-compare {
  overflow-x: auto;
}

.c-svc-compare thead th {
  background: var(--bg-soft);
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}

.c-svc-compare tbody th {
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}

.c-svc-compare td {
  color: var(--ink-500);
}

/* その用途で選ぶならこちら、という印 */
.c-svc-compare td.is-pick {
  background: var(--svc-accent-bg);
  color: var(--ink-900);
  font-weight: 700;
}

.c-svc-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- CTA -------------------------------------------------------------------- */
.c-svc-cta {
  padding: var(--sp-8) var(--sp-6);
  border: 1px solid var(--svc-accent);
  border-top-width: 3px;
  background: var(--svc-accent-bg);
  text-align: center;
}

.c-svc-cta__title {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-svc-cta__text {
  max-width: 40em;
  margin: var(--sp-3) auto var(--sp-6);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-svc-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* ===========================================================================
   0円就活の詳細ページ固有
   =========================================================================== */

/* 学生側の「0円」施策。企業から見ると、これが母集団の質につながる */
.c-zero__concept {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 620px) {
  .c-zero__concept {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .c-zero__concept {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.c-zero__concept > div {
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border-top: 3px solid var(--svc-accent);
}

.c-zero__concept b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-zero__concept span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-zero__concept small {
  display: block;
  margin-top: var(--sp-1);
  font-size: var(--fs-2xs);
  color: var(--ink-400);
}

/* --- 学生が抱えている課題 --------------------------------------------------- */
.c-zero__cases {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-zero__cases {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.c-zero__cases article {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--svc-accent);
  background: var(--surface);
}

.c-zero__cases-label {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-zero__cases-text {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- source: mock-source/src/styles/components/_download.css --- */
/* ===========================================================================
   資料ダウンロード
   ---------------------------------------------------------------------------
   - .c-cta-split … DOWNLOAD / CONTACT の2分割CTA（参考：PINTO!）
   - .c-doc       … 資料カード
   - .c-form      … ダウンロードフォーム
   =========================================================================== */

/* --- 2分割CTA -------------------------------------------------------------- */
.c-cta-split {
  padding-block: var(--section-gap);
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
}

.c-cta-split__inner {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 760px) {
  .c-cta-split__inner {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c-cta-split__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-10) var(--sp-6);
  background: var(--surface);
  text-align: center;
}

@media (min-width: 760px) {
  .c-cta-split__col {
    padding: var(--sp-12) var(--sp-8);
  }
}

.c-cta-split__en {
  font-size: clamp(1.625rem, 1.25rem + 1.3vw, 2.25rem);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-900);
  line-height: 1.2;
}

.c-cta-split__ja {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-400);
}

.c-cta-split__text {
  margin: var(--sp-4) 0 var(--sp-6);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

/* PCだけ改行を効かせる（SPでは自然折り返しに任せる） */
.u-br-pc {
  display: none;
}

@media (min-width: 900px) {
  .u-br-pc {
    display: inline;
  }
}

/* このCTAだけは赤。会員登録の青と役割が違うことを色でも分ける */
.c-btn--accent {
  background: var(--accent-500);
  color: #fff;
  min-width: 260px;
}

.c-btn--accent:hover {
  background: var(--accent-600);
  color: #fff;
}

/* --- 資料カード ------------------------------------------------------------ */
.c-doc-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .c-doc-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  }
}

.c-doc {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-doc__cover {
  position: relative;
  padding: var(--sp-5) var(--sp-5) 0;
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

.c-doc__cover img {
  width: 100%;
  height: auto;
  /* 表紙の下端を切って、書類が差し込まれているように見せる */
  aspect-ratio: 1 / 0.72;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--line);
  border-bottom: none;
  box-shadow: var(--shadow-md);
}

.c-doc__popular {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 1;
  padding: 0.15em 0.6em;
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.c-doc__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
}

.c-doc__title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-doc__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-doc__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  margin-top: auto;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-doc__foot {
  padding: 0 var(--sp-5) var(--sp-5);
}

.c-doc__inquiry-link {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--ink-500);
  text-decoration: underline;
}

.c-doc__inquiry-link:hover {
  color: var(--brand-600);
}

/* --- フォーム -------------------------------------------------------------- */
.c-form {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-600);
  background: var(--surface);
}

@media (min-width: 760px) {
  .c-form {
    padding: var(--sp-8);
  }
}

.c-form__grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* 全幅で使う項目 */
  .c-form__row--wide {
    grid-column: 1 / -1;
  }
}

.c-form__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-form__req {
  padding: 0.1em 0.45em;
  background: var(--accent-050);
  color: var(--accent-600);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-form__opt {
  padding: 0.1em 0.45em;
  background: var(--bg-sunken);
  color: var(--ink-500);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-form__input,
.c-form__select,
.c-form__textarea {
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-body);
  color: var(--ink-900);
}

.c-form__input:focus,
.c-form__select:focus,
.c-form__textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-050);
}

.c-form__textarea {
  min-height: 120px;
  resize: vertical;
  line-height: var(--lh-body);
}

.c-form__select {
  appearance: none;
  padding-right: var(--sp-8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23767676' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px 8px;
  cursor: pointer;
}

.c-form__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-4);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-form__consent input {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1em;
  accent-color: var(--brand-600);
}

.c-form__submit {
  margin-top: var(--sp-6);
  text-align: center;
}

.c-form__submit .c-btn {
  min-width: 280px;
}

/* WordPress: server-side validation error states (Contact flow). The
   mock never round-trips a real submission, so no error-state CSS
   existed in source — added here only, matching the theme's existing
   form field styling and its --accent-600 "attention" color. */
.c-form__errors {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--accent-600);
  background: var(--accent-050);
  color: var(--accent-600);
}

.c-form__errors-title {
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.c-form__errors ul {
  margin: 0;
  padding-left: 1.2em;
}

.c-form__errors a {
  color: var(--accent-600);
  text-decoration: underline;
}

.c-form__error {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--accent-600);
}

.c-form__input[aria-invalid="true"],
.c-form__select[aria-invalid="true"],
.c-form__textarea[aria-invalid="true"] {
  border-color: var(--accent-600);
}

/* WordPress: confirmation-step field display (Contact flow step 2). */
.c-form__confirm {
  display: grid;
  gap: 1px;
  margin-bottom: var(--sp-6);
  background: var(--line);
  border: 1px solid var(--line);
}

.c-form__confirm > div {
  display: grid;
  gap: var(--sp-1);
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface);
}

.c-form__confirm dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-form__confirm dd {
  margin: 0;
  color: var(--ink-900);
}

.c-form__confirm-message {
  white-space: pre-line;
}

.c-form__submit--confirm {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* WordPress: Contact confirmation screen (MW WP Form, /contact/check/).
   MW WP Form re-renders the SAME post_content on the confirm view as the
   input view — each field shortcode swaps its own output, but the
   surrounding <label>...<span class="c-form__req/opt"> markup is static
   HTML shared by both screens, not something the plugin varies per view.
   Scoped to data-wp-contact-check-page (already on that page's <main>,
   set unconditionally by page-contact-check.php) so /contact/ and the
   Download request form — which also use .c-form__req/.c-form__opt —
   are completely unaffected. */
[data-wp-contact-check-page] .c-form__req,
[data-wp-contact-check-page] .c-form__opt {
  display: none;
}

/* Exact 60px gap between the confirmed field rows and the Back/Submit
   buttons: overrides .c-form__submit's own margin-top (var(--sp-6), i.e.
   24px) outright rather than adding to it — nothing else contributes
   margin between .c-form__grid's bottom edge and this element (the
   consent/topic hidden fields between them render display:none). */
[data-wp-contact-check-page] .c-form__submit {
  margin-top: 60px;
}

/* WordPress: every MW WP Form completion screen (U3) — Contact
   (/contact/check/finish/), Document Request (/download-complete/),
   Advertising Inquiry (/advertise-complete/), Seminar Application
   (/seminar-apply-complete/) — shares the exact same page-contact-finish.php-
   style structure: .c-empty wraps the plugin's own rendered completion
   message (which can include a download URL) directly followed by a
   "return" .c-btn, with no gap between them at all — this theme's global
   reset zeroes every element's default margin, so without a rule here the
   button visually touches the preceding text/URL. Previously fixed only
   for the Contact page via a page-scoped [data-wp-contact-finish-page]
   selector; generalized here so all four completion pages (and any future
   one built the same way) get it from one shared rule instead of each
   needing its own copy. .c-empty is also reused elsewhere as a plain
   "no results" block (.c-empty__title only, e.g. archive-seminar.php) —
   harmless there since a single child has no "+ *" sibling to apply
   margin-top to. */
.c-empty > * + * {
  margin-top: var(--sp-6);
}

.c-empty > .c-btn {
  margin-top: 60px;
}

/* モックであることを明示する帯。本番では消す */
.c-form__mock {
  margin-top: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--line-strong);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-align: center;
}

/* --- 選択中の資料の表示（Contactの「お問い合わせの対象」バナーと共用） ---------- */
.c-form__selected {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4);
  border: 1px solid var(--brand-100);
  background: var(--brand-050);
}

.c-form__selected-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-600);
}

.c-form__selected-title {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  color: var(--ink-900);
}

/* --- source: mock-source/src/styles/components/_glossary.css --- */
/* ===========================================================================
   経営用語集
   ---------------------------------------------------------------------------
   - .c-gl-bar    … 追従する検索バー（115語あるので、いつでも引き直せるように）
   - .c-term-item … 用語1件（開閉式）
   - .c-term      … 記事本文に自動で貼られる用語リンク
   - .c-term-tip  … その用語の意味を出すポップオーバー
   =========================================================================== */

/* --- 検索バー -------------------------------------------------------------- */
.c-gl-bar {
  position: sticky;
  top: var(--header-h);
  z-index: calc(var(--z-header) - 1);
  padding-block: var(--sp-4);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .c-gl-bar {
    /* PCはグローバルナビの2段ぶん下に貼り付く */
    top: calc(var(--header-h-pc) + 45px);
  }
}

.c-gl-bar__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.c-gl-bar__field {
  flex: 1 1 auto;
  max-width: none;
  background: var(--surface);
}

.c-gl-bar__result {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-gl-bar__result b {
  font-size: var(--fs-lg);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
  padding-right: 0.15em;
}

.c-gl-bar__cats {
  margin-top: var(--sp-3);
  /* カテゴリが多いので、狭い画面では横スクロールで逃がす */
  flex-wrap: nowrap;
  overflow-x: auto;
  padding-bottom: var(--sp-1);
  scrollbar-width: thin;
}

@media (min-width: 900px) {
  .c-gl-bar__cats {
    flex-wrap: wrap;
    overflow: visible;
  }
}

.c-chip__num {
  margin-left: 0.4em;
  font-size: var(--fs-2xs);
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.c-chip[aria-pressed="true"] .c-chip__num {
  color: rgb(255 255 255 / 70%);
}

/* --- カテゴリの見出し ------------------------------------------------------ */
.c-gl-group + .c-gl-group {
  margin-top: var(--sp-12);
}

.c-gl-group__title {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--ink-900);
  font-size: var(--fs-xl);
}

.c-gl-group__count {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* --- 用語1件 ---------------------------------------------------------------- */
.c-term-list {
  border-top: 1px solid var(--line);
}

/* 記事から #用語ID で飛んできたとき、追従ヘッダーと検索バーの下に
   隠れないようにする。ヘッダー＋バーの高さぶんを見込んだ値。 */
.c-term-item {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 220px;
}

@media (min-width: 900px) {
  /* ヘッダー(約115px)＋検索バー(約167px、top:109pxで重なる)の下に16px空ける */
  .c-term-item {
    scroll-margin-top: 292px;
  }
}

/* 記事から飛んできた用語を示す */
.c-term-item.is-target {
  background: var(--brand-050);
  box-shadow: inset 3px 0 0 var(--brand-600);
}

.c-term-item__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
  position: relative;
  cursor: pointer;
  list-style: none;
}

.c-term-item__head::-webkit-details-marker {
  display: none;
}

.c-term-item__head:hover {
  background: var(--surface-hover);
}

.c-term-item__head::after {
  content: "";
  position: absolute;
  top: var(--sp-6);
  right: var(--sp-4);
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--ink-500);
  border-bottom: 2px solid var(--ink-500);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}

.c-term-item[open] > .c-term-item__head::after {
  transform: rotate(-135deg);
}

.c-term-item__title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  grid-column: 1 / -1;
}

.c-term-item__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-term-item__cat {
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-term-item__meaning {
  grid-column: 1 / -1;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-term-item__body {
  padding: 0 var(--sp-4) var(--sp-6);
}

/* --- 用語の詳細 ------------------------------------------------------------ */
.c-term-def {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 720px) {
  .c-term-def {
    grid-template-columns: 12em minmax(0, 1fr);
  }
}

.c-term-def dt {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-term-def dd {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-term-item__issues {
  margin-top: var(--sp-4);
}

.c-term-item__issues-label {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

/* ===========================================================================
   記事本文の用語リンク
   ---------------------------------------------------------------------------
   本文リンク（青の下線）と区別がつくよう、点線の下線にしている。
   読んでいる途中で「押せる」と分かりつつ、通常リンクほど主張しない。
   =========================================================================== */

.c-prose .c-term,
.c-term {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dotted var(--brand-600);
  cursor: help;
  transition: background var(--dur) var(--ease);
}

.c-prose .c-term:hover,
.c-term:hover,
.c-term:focus-visible {
  background: var(--brand-050);
  border-bottom-style: solid;
  color: var(--brand-700);
}

/* --- ポップオーバー -------------------------------------------------------- */
.c-term-tip {
  position: absolute;
  z-index: calc(var(--z-header) + 5);
  width: min(320px, calc(100vw - 32px));
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-600);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  /* 「用語集で詳しく見る」を押せるように、吹き出し自体も操作対象にする。
     用語からここへカーソルを移す間は、JS側で閉じるのを待たせている。 */
}

.c-term-tip__cat {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--brand-600);
}

.c-term-tip__name {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-term-tip__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* 吹き出しの中のリンク。押せることが分かるよう、面で当たりを作る */
.c-term-tip__more {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--brand-100);
  background: var(--brand-050);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
  transition:
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.c-term-tip__more::after {
  content: "›";
  font-size: var(--fs-md);
  line-height: 1;
}

.c-term-tip__more:hover,
.c-term-tip__more:focus-visible {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

/* --- source: mock-source/src/styles/components/_learning.css --- */
/* ===========================================================================
   Eラーニング（参考：Google スキルショップ）
   ---------------------------------------------------------------------------
   会員限定だが、カリキュラムはログインなしでも見せる。
   何が学べるか分からないまま登録させないため。
   =========================================================================== */

/* --- 会員ステータスのバー -------------------------------------------------- */
.c-member-bar {
  padding-block: var(--sp-3);
  background: var(--brand-050);
  border-bottom: 1px solid var(--brand-100);
}

.c-member-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.c-member-bar__state {
  font-size: var(--fs-sm);
  color: var(--ink-700);
}

.c-member-bar__state--on {
  font-weight: 700;
  color: var(--brand-700);
}

.c-member-bar__state--on::before {
  content: "✓ ";
}

.c-member-bar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* --- コースカード ---------------------------------------------------------- */
.c-course-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 620px) {
  .c-course-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
  }
}

.c-course {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-top: 3px solid var(--course-color, var(--brand-600));
  background: var(--surface);
  transition: box-shadow var(--dur) var(--ease);
}

.c-course:hover {
  box-shadow: var(--shadow-md);
}

.c-course[data-cat="money"] {
  --course-color: var(--cat-money);
}
.c-course[data-cat="recruit"] {
  --course-color: var(--cat-recruit);
}
.c-course[data-cat="dx"] {
  --course-color: var(--cat-dx);
}
.c-course[data-cat="web"] {
  --course-color: var(--cat-web);
}
.c-course[data-cat="solution"] {
  --course-color: var(--cat-solution);
}

.c-course__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}

.c-course__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.c-course__level {
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-course__title {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.c-course__title a {
  color: var(--ink-900);
  text-decoration: none;
}

.c-course__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-course__summary {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-course__body {
  flex: 1 1 auto;
  padding: 0 var(--sp-5) var(--sp-5);
}

.c-course__spec {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-course__rate {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
}

.c-course__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--course-color, var(--brand-600));
  text-decoration: none;
}

.c-course__link::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-course__link:hover {
  background: var(--bg-sunken);
  text-decoration: underline;
}

/* --- 進捗バー -------------------------------------------------------------- */
.c-progress-bar {
  margin-top: var(--sp-3);
  height: 6px;
  background: var(--bg-sunken);
  overflow: hidden;
}

.c-progress-bar--lg {
  height: 10px;
  margin-bottom: var(--sp-6);
}

.c-progress-bar__fill {
  display: block;
  height: 100%;
  background: var(--brand-600);
  transition: width var(--dur) var(--ease);
}

/* --- レッスン一覧 ---------------------------------------------------------- */
.c-lesson-list {
  border-top: 1px solid var(--line);
}

.c-lesson {
  display: grid;
  grid-template-columns: 2.5em minmax(0, 1fr) 44px;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  border-bottom: 1px solid var(--line);
}

.c-lesson__no {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-400);
  font-variant-numeric: tabular-nums;
}

.c-lesson.is-done .c-lesson__no {
  color: var(--brand-600);
}

.c-lesson__title {
  display: block;
  font-size: var(--fs-body);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-lesson.is-done .c-lesson__title {
  color: var(--ink-500);
  text-decoration: line-through;
  text-decoration-color: var(--line-strong);
}

.c-lesson__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-lesson__type {
  padding: 0.1em 0.5em;
  background: var(--bg-sunken);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* 完了チェック */
.c-lesson__check {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: transparent;
  background: var(--surface);
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.c-lesson__check svg {
  width: 18px;
  height: 18px;
}

.c-lesson__check:hover {
  border-color: var(--brand-600);
  color: var(--brand-200);
}

.c-lesson__check[aria-pressed="true"] {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: #fff;
}

.c-lesson__lock {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--ink-400);
}

.c-lesson__lock svg {
  width: 18px;
  height: 18px;
}

.c-course__note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

/* --- 未ログイン時の案内 ---------------------------------------------------- */
.c-course__gate {
  margin-top: var(--sp-6);
  padding: var(--sp-6);
  border: 1px solid var(--brand-100);
  border-top: 3px solid var(--brand-600);
  background: var(--brand-050);
  text-align: center;
}

.c-course__gate-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-course__gate-text {
  margin: var(--sp-2) 0 var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-course__gate-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* --- 学べること ------------------------------------------------------------ */
.c-goal-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-goal-list li {
  position: relative;
  padding-left: 1.5em;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-goal-list li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.5em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--brand-600);
  border-bottom: 2px solid var(--brand-600);
  transform: rotate(-45deg);
}

/* --- source: mock-source/src/styles/components/_lesson.css --- */
/* ===========================================================================
   Eラーニングのレッスン本文
   ---------------------------------------------------------------------------
   記事と違い、読み飛ばさずに順に読む前提のページ。
   1行を短く、行間を広めにとって、長く読んでも疲れないようにする。

   数式・表・注記は本文と見た目を分ける。
   「覚えるところ」と「読むところ」が区別できないと、学習の教材にならない。
   =========================================================================== */

.c-lsn-head {
  padding-block: var(--sp-8) var(--sp-8);
  border-top: 3px solid var(--cat-money);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-lsn-head__course {
  font-size: var(--fs-sm);
  font-weight: 700;
}

.c-lsn-head__course a {
  color: var(--cat-money);
  text-decoration: none;
}

.c-lsn-head__course a:hover {
  text-decoration: underline;
}

.c-lsn-head__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-lsn-head__no {
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-lsn-head__type {
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-lsn-head__done {
  padding: 0.1em 0.5em;
  background: var(--cat-solution);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-lsn-head__title {
  margin-top: var(--sp-3);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  text-wrap: balance;
}

.c-lsn-head__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-lsn-head__rate {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-lsn-head .c-progress-bar {
  margin-top: var(--sp-5);
}

/* --- 動画の枠 ---------------------------------------------------------------- */
.c-lsn__video {
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  aspect-ratio: 16 / 9;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--ink-900);
  color: #fff;
  text-align: center;
}

.c-lsn__video p {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.c-lsn__video span {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 70%);
}

.c-lsn__video-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* A real video (inc/lesson-video.php — either WordPress's own oEmbed
   <iframe> for a YouTube/Vimeo URL, or wp_video_shortcode()'s own
   <div class="wp-video"><video>...</video></div> for an uploaded file)
   reuses the same aspect-ratio: 16/9 box above — that single property is
   what keeps either kind of player fluidly responsive on desktop/tablet/
   mobile — but swaps the centered placeholder layout for a plain
   full-bleed frame. wp_video_shortcode() emits a fixed inline
   `style="width: …px"` on its own .wp-video wrapper; overriding just that
   one property is what lets its <video> fill this same responsive box
   instead of staying pinned to that fixed pixel width. */
.c-lsn__video--embed {
  display: block;
  position: relative;
  padding: 0;
  border: 0;
  overflow: hidden;
}

.c-lsn__video--embed iframe,
.c-lsn__video--embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.c-lsn__video--embed .wp-video {
  width: 100% !important;
  height: 100%;
}

/* ===========================================================================
   本文
   =========================================================================== */

.c-lsn__body {
  margin-top: var(--sp-8);
}

.c-lsn__h3 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 2px solid var(--cat-money);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-lsn__body > :first-child {
  margin-top: 0;
}

.c-lsn__p {
  margin-top: var(--sp-5);
  font-size: var(--fs-prose);
  line-height: 2;
  color: var(--ink-900);
}

@media (min-width: 720px) {
  .c-lsn__p {
    font-size: var(--fs-prose-pc);
  }
}

.c-lsn__p b {
  font-weight: 700;
  background: linear-gradient(
    transparent 62%,
    var(--cat-money-bg, #f5ead2) 62%
  );
}

/* --- 標準コンテンツの本文中の箇条書き・番号付きリスト -------------------------------
   リッチテキスト本文（chikara_lesson_render_standard_block()）自身が出す
   素の <ul>/<ol> 用。手順ブロック専用の枠付きリスト（.c-lsn__list /
   .c-lsn__olist、直後のブロックで定義）とは別物なので、それらのクラスは
   明示的に除外している（特異度の衝突でボックス枠のスタイルを壊さないため）。 */
.c-lsn__body > ul:not(.c-lsn__list):not(.c-lsn__check),
.c-lsn__body > ol:not(.c-lsn__olist) {
  margin-top: var(--sp-5);
  padding-left: 1.4em;
  font-size: var(--fs-prose);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

@media (min-width: 720px) {
  .c-lsn__body > ul:not(.c-lsn__list):not(.c-lsn__check),
  .c-lsn__body > ol:not(.c-lsn__olist) {
    font-size: var(--fs-prose-pc);
  }
}

.c-lsn__body > ul:not(.c-lsn__list):not(.c-lsn__check) {
  list-style: disc;
}

.c-lsn__body > ol:not(.c-lsn__olist) {
  list-style: decimal;
}

.c-lsn__body > ul:not(.c-lsn__list):not(.c-lsn__check) li,
.c-lsn__body > ol:not(.c-lsn__olist) li {
  margin-top: var(--sp-2);
}

.c-lsn__body > ul:not(.c-lsn__list):not(.c-lsn__check) li::marker,
.c-lsn__body > ol:not(.c-lsn__olist) li::marker {
  color: var(--cat-money);
  font-weight: 700;
}

/* --- 箇条書き ---------------------------------------------------------------- */
.c-lsn__list,
.c-lsn__olist {
  margin-top: var(--sp-5);
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-prose);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

.c-lsn__list li {
  position: relative;
  padding-left: 1.2em;
}

.c-lsn__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  background: var(--cat-money);
}

.c-lsn__olist {
  counter-reset: lsn;
}

.c-lsn__olist li {
  position: relative;
  padding-left: 2em;
  counter-increment: lsn;
}

.c-lsn__olist li::before {
  content: counter(lsn);
  position: absolute;
  left: 0;
  top: 0.1em;
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  background: var(--cat-money);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

/* --- 計算式 ------------------------------------------------------------------
   覚えて使うものなので、本文とはっきり分ける */
.c-lsn__formula {
  margin-top: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  border: 2px solid var(--ink-900);
  background: var(--surface);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-ui);
  text-align: center;
  color: var(--ink-900);
}

@media (min-width: 720px) {
  .c-lsn__formula {
    font-size: var(--fs-lg);
  }
}

/* --- 表 ---------------------------------------------------------------------- */
.c-lsn__table-wrap {
  margin-top: var(--sp-5);
  overflow-x: auto;
  border: 1px solid var(--line);
}

.c-lsn__table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-base);
}

.c-lsn__table th,
.c-lsn__table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-ui);
}

.c-lsn__table thead th {
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
  white-space: nowrap;
}

.c-lsn__table tbody tr + tr th,
.c-lsn__table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.c-lsn__table tbody tr:nth-child(even) {
  background: var(--bg-soft);
}

.c-lsn__table tbody th {
  color: var(--ink-900);
  font-weight: 500;
}

.c-lsn__table td {
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

.c-lsn__table b {
  color: var(--ink-900);
}

/* --- 注記の3種 ---------------------------------------------------------------
   ワンポイント／注意／自社での確認。役割ごとに色と記号を変える */
.c-lsn__box {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--box-color, var(--brand-600));
  background: var(--surface);
}

.c-lsn__box-title {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-lsn__box-title::before {
  content: attr(data-mark);
  flex: none;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--box-color, var(--brand-600));
}

.c-lsn__box-text {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-lsn__box--note {
  --box-color: var(--brand-600);
  background: var(--brand-050);
}

.c-lsn__box--warn {
  --box-color: var(--accent-500);
  background: var(--accent-050);
}

.c-lsn__box--check {
  --box-color: var(--cat-solution);
  background: var(--bg-soft);
}

/* The POINT/注意/WORK label is real, escaped HTML text (data-mark, set by
   chikara_lesson_render_note_style_block() / chikara_lesson_render_work_block()
   in inc/lesson-content-blocks.php — always populated, defaulting to
   exactly these three words when the administrator leaves the label
   field blank) rather than a hardcoded per-variant ::before content
   value, so an administrator-provided custom label actually renders. */

/* 自社で確認する項目。チェックボックス風にする */
.c-lsn__check {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.c-lsn__check li {
  position: relative;
  padding-left: 2em;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

.c-lsn__check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--cat-solution);
  background: var(--surface);
}

/* ===========================================================================
   確認テスト
   =========================================================================== */

.c-quiz {
  margin-top: var(--sp-6);
}

.c-quiz__lead {
  padding: var(--sp-4);
  border-left: 3px solid var(--brand-600);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-quiz__item {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--line-strong);
  background: var(--surface);
}

.c-quiz__q {
  display: flex;
  gap: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-quiz__q span {
  flex: none;
  padding: 0.1em 0.5em;
  height: fit-content;
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-2xs);
  letter-spacing: 0.06em;
}

.c-quiz__choices {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
}

.c-quiz__choice {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  cursor: pointer;
}

.c-quiz__choice:hover {
  border-color: var(--brand-600);
  background: var(--brand-050);
}

.c-quiz__choice input {
  margin-top: 0.35em;
  accent-color: var(--brand-600);
}

.c-quiz__choice:has(input:checked) {
  border-color: var(--brand-600);
  background: var(--brand-050);
  font-weight: 700;
}

/* 採点後 */
.c-quiz__item.is-correct {
  border-top-color: var(--cat-solution);
}

.c-quiz__item.is-wrong {
  border-top-color: var(--accent-500);
}

.c-quiz__explain {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  padding: var(--sp-4);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-quiz__answer {
  font-weight: 700;
  color: var(--ink-900);
}

.c-quiz__item.is-correct .c-quiz__answer {
  color: var(--cat-solution);
}

.c-quiz__item.is-wrong .c-quiz__answer {
  color: var(--accent-600);
}

.c-quiz__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
}

.c-quiz__score {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-quiz__score.is-pass {
  color: var(--cat-solution);
}

/* ===========================================================================
   完了ボタンと前後の移動
   =========================================================================== */

.c-lsn__done {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3) var(--sp-4);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.c-lsn__done-note {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-lsn__nav {
  display: grid;
  gap: var(--sp-3);
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
}

@media (min-width: 620px) {
  .c-lsn__nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c-lsn__nav-item {
  display: block;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.c-lsn__nav-item:hover {
  background: var(--bg-soft);
  border-color: var(--brand-600);
}

.c-lsn__nav-item span {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--brand-600);
}

.c-lsn__nav-item b {
  display: block;
  margin-top: 0.3em;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-lsn__nav-item--next {
  text-align: right;
}

.c-lsn__toggle {
  margin-top: var(--sp-6);
  text-align: center;
}

.c-lsn__toggle button {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-decoration: underline;
}

.c-lsn__soon {
  margin-block: var(--sp-12);
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong);
  background: var(--bg-soft);
  text-align: center;
}

.c-lsn__soon-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-lsn__soon-text {
  margin-block: var(--sp-3) var(--sp-5);
  font-size: var(--fs-base);
  color: var(--ink-500);
}

/* 第1回であることの案内（未ログイン時） */
.c-lsn__free {
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 4px solid var(--cat-solution);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-lsn__free b {
  color: var(--ink-900);
}

/* --- 会員限定のゲート -------------------------------------------------------- */
.c-course__gate-lock {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin: 0 auto var(--sp-4);
  border-radius: 50%;
  background: var(--brand-050);
  color: var(--brand-600);
}

.c-course__gate-lock svg {
  width: 26px;
  height: 26px;
}

.c-course__gate-list {
  display: grid;
  gap: var(--sp-2);
  max-width: 26em;
  margin: var(--sp-5) auto 0;
  text-align: left;
}

.c-course__gate-list li {
  position: relative;
  padding-left: 1.8em;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-course__gate-list li::before {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.45em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--cat-solution);
  border-bottom: 2px solid var(--cat-solution);
  transform: rotate(-45deg);
}

.c-course__gate-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.c-course__gate-sub a {
  font-weight: 700;
  color: var(--brand-600);
}

.c-course__gate-sub button {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-decoration: underline;
}

/* 一覧で、本文が読める状態かを示す */
.c-course__ready,
.c-course__prep {
  padding: 0.1em 0.5em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.c-course__ready {
  background: var(--cat-solution);
  color: #fff;
}

.c-course__prep {
  border: 1px solid var(--line-strong);
  color: var(--ink-500);
}

/* カリキュラムの受講開始ボタン */
.c-course__start {
  margin-top: var(--sp-6);
}

/* レッスン名をリンクにしたので、押せることを示す */
a.c-lesson__title {
  color: var(--ink-900);
  text-decoration: none;
}

a.c-lesson__title:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

/* --- source: mock-source/src/styles/components/_login.css --- */
/* ===========================================================================
   ログイン・無料会員登録
   ---------------------------------------------------------------------------
   会員限定のコンテンツから来る人が多い画面なので、
   左にフォーム、右に「会員になるとできること」を並べる。
   何のために登録するのかを、入力しながら確認できるようにする。
   =========================================================================== */

.c-login {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
  padding-block: var(--sp-10) var(--section-gap);
}

@media (min-width: 900px) {
  .c-login {
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    gap: var(--sp-12);
    align-items: start;
  }
}

.c-login__main {
  max-width: 504px;
}

/* --- 切り替えタブ ------------------------------------------------------------ */
.c-login__tabs {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.c-login__tab {
  flex: 1 1 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.c-login__tab:hover {
  border-color: var(--ink-900);
}

.c-login__tab[aria-selected="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.c-login__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  color: var(--ink-900);
}

.c-login__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-login__form {
  margin-top: var(--sp-6);
}

.c-login__keep {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-700);
  cursor: pointer;
}

.c-login__keep input {
  accent-color: var(--brand-600);
}

.c-login__sub {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
}

.c-login__sub a {
  color: var(--brand-600);
  font-weight: 700;
}

/* --- もう一方への切り替え ---------------------------------------------------- */
.c-login__switch {
  margin-top: var(--sp-8);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
}

.c-login__switch button {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --- 右側：会員になるとできること -------------------------------------------- */
.c-login__side {
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
}

.c-login__side-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-600);
}

.c-login__side-title {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-login__benefits {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
}

.c-login__benefits li {
  position: relative;
  padding-left: 1.8em;
}

/* チェックのしるし。塗らずに線だけで置く */
.c-login__benefits li::before {
  content: "";
  position: absolute;
  left: 0.25em;
  top: 0.45em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--cat-solution-vivid);
  border-bottom: 2px solid var(--cat-solution-vivid);
  transform: rotate(-45deg);
}

.c-login__benefits b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-login__benefits span {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-login__side-note {
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- source: mock-source/src/styles/components/_mypage.css --- */
/* ===========================================================================
   マイページ
   ---------------------------------------------------------------------------
   会員が用事を済ませに来る場所。読み物ではないので、
   装飾より「探しているものがすぐ見つかる」ことを優先する。

   メディアの利用履歴と、グループとの取引情報を1つの画面に集める。
   出どころが違っても会員から見れば「チカラのマイページ」は1つなので、
   画面は分けない。ただし取引情報には出どころを明記する。
   =========================================================================== */

.c-my-head {
  padding-block: var(--sp-6) var(--sp-6);
  border-top: 3px solid var(--brand-600);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-my-head__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-600);
}

.c-my-head__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin-top: var(--sp-2);
}

.c-my-head__name b {
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--ink-900);
}

.c-my-head__name span {
  font-size: var(--fs-md);
  color: var(--ink-700);
}

.c-my-head__meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- レイアウト -------------------------------------------------------------- */
.c-my-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  padding-block: var(--sp-8) var(--sp-12);
}

@media (min-width: 900px) {
  .c-my-layout {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

/* --- メニュー ---------------------------------------------------------------- */
@media (min-width: 900px) {
  .c-my-nav {
    position: sticky;
    top: 180px;
  }
}

.c-my-nav__group + .c-my-nav__group {
  margin-top: var(--sp-5);
}

.c-my-nav__label {
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-500);
}

.c-my-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}

@media (min-width: 900px) {
  .c-my-nav ul {
    display: block;
    margin-top: 0;
  }
}

/* WordPress: real <a href> navigation, not the mock's client-side
   <button data-go> tab switcher — every My Page view is a real,
   independently access-checked page (?section=), so .c-my-nav only ever
   renders anchors now. Selector corrected from the mock's `button` to
   `a` (this class is My-Page-only; nothing else ever targets it), plus
   text-decoration: none since anchors need it explicitly where buttons
   didn't. */
.c-my-nav a {
  display: block;
  width: 100%;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-align: left;
  text-decoration: none;
  color: var(--ink-700);
  cursor: pointer;
  white-space: nowrap;
}

@media (min-width: 900px) {
  .c-my-nav a {
    border: none;
    border-left: 3px solid transparent;
    padding-block: var(--sp-3);
    white-space: normal;
  }
}

.c-my-nav a:hover {
  background: var(--brand-050);
  color: var(--brand-600);
}

.c-my-nav a[aria-current="true"] {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}

@media (min-width: 900px) {
  .c-my-nav a[aria-current="true"] {
    background: var(--brand-050);
    border-left-color: var(--brand-600);
    color: var(--brand-600);
  }
}

/* --- セクション -------------------------------------------------------------- */
.c-my-sec__head {
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-bottom: 2px solid var(--ink-900);
}

.c-my-sec__title {
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--ink-900);
}

.c-my-sec__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* データの出どころを示す小さなラベル */
.c-my-src {
  display: inline-block;
  padding: 0.1em 0.5em;
  margin-left: 0.3em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-my-h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--brand-600);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.c-my-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-my-note a {
  color: var(--brand-600);
  font-weight: 700;
}

/* --- 気にかけること（ホーム上部）--------------------------------------------- */
.c-my-alerts {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.c-my-alerts li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-500);
  background: var(--accent-050);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

.c-my-alerts button {
  margin-left: auto;
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-600);
  text-decoration: underline;
  cursor: pointer;
}

/* --- 数字のタイル ------------------------------------------------------------ */
.c-my-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 700px) {
  .c-my-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .c-my-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

/* WordPress: a real <a href> to the relevant page/section, not the
   mock's <button data-go> tab switcher — text-decoration: none since
   this class is now applied to an anchor (My-Page-only class; nothing
   else targets it). */
.c-my-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.c-my-stat:hover {
  background: var(--brand-050);
}

.c-my-stat__num {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-my-stat:hover .c-my-stat__num {
  color: var(--brand-600);
}

.c-my-stat__label {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* --- 受講中のコース ---------------------------------------------------------- */
.c-my-courses {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.c-my-course {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--cat-money);
  background: var(--surface);
}

.c-my-course__genre {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--cat-money);
}

.c-my-course__title {
  margin-block: 0.2em var(--sp-4);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.c-my-course__title a {
  color: var(--ink-900);
  text-decoration: none;
}

.c-my-course__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-my-course__rate {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-my-course__next {
  display: block;
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  text-decoration: none;
}

.c-my-course__next:hover {
  background: var(--brand-050);
  border-color: var(--brand-200);
}

.c-my-course__next span {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--brand-600);
}

.c-my-course__next b {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-my-finished {
  display: grid;
  gap: var(--sp-2);
}

.c-my-finished li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cat-solution);
  background: var(--surface);
}

.c-my-finished b {
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-my-finished span {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-my-finished a {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
}

/* --- 汎用のリスト ------------------------------------------------------------ */
.c-my-list {
  display: grid;
  gap: var(--sp-2);
}

.c-my-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-my-list a {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  text-decoration: none;
}

.c-my-list a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-my-list span {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- セミナー ---------------------------------------------------------------- */
.c-my-sem {
  display: grid;
  gap: var(--sp-2);
}

.c-my-sem li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-my-sem li > div {
  flex: 1 1 16em;
  min-width: 0;
}

.c-my-sem__date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cat-money);
  font-variant-numeric: tabular-nums;
}

.c-my-sem__title {
  margin-top: 0.2em;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.c-my-sem__title a {
  color: var(--ink-900);
  text-decoration: none;
}

.c-my-sem__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-my-sem__meta {
  margin-top: 0.2em;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 資料 -------------------------------------------------------------------- */
.c-my-docs {
  display: grid;
  gap: var(--sp-2);
}

.c-my-docs li {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-my-docs img {
  flex: none;
  width: 56px;
  height: auto;
  border: 1px solid var(--line);
}

.c-my-docs > li > div {
  flex: 1 1 auto;
  min-width: 0;
}

.c-my-docs__title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-my-docs__meta {
  margin-top: 0.2em;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 表（請求書・会員情報）--------------------------------------------------- */
.c-my-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.c-my-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-sm);
}

.c-my-table th,
.c-my-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-ui);
}

.c-my-table thead th {
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-xs);
  white-space: nowrap;
}

.c-my-table tbody tr + tr th,
.c-my-table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.c-my-table tbody th {
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}

.c-my-table td {
  color: var(--ink-700);
}

.c-my-table__num {
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.c-my-table__sub {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-my-table a {
  font-weight: 700;
  color: var(--brand-600);
}

.c-my-table--profile {
  min-width: 400px;
}

.c-my-table--profile tbody th {
  width: 10em;
  background: var(--bg-soft);
  font-weight: 500;
  color: var(--ink-500);
  font-size: var(--fs-xs);
}

/* --- 契約・問い合わせ -------------------------------------------------------- */
.c-my-purchase,
.c-my-inq {
  display: grid;
  gap: var(--sp-2);
}

.c-my-purchase li,
.c-my-inq li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-my-purchase li > div,
.c-my-inq li > div {
  flex: 1 1 16em;
  min-width: 0;
}

.c-my-purchase__name,
.c-my-inq__subject {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-my-purchase__meta,
.c-my-inq__meta {
  margin-top: 0.2em;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 状態のバッジ ------------------------------------------------------------ */
.c-my-badge {
  flex: none;
  padding: 0.15em 0.6em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid currentColor;
}

.c-my-badge.is-done {
  color: var(--cat-solution);
  background: color-mix(in srgb, var(--cat-solution) 10%, transparent);
}

.c-my-badge.is-warn {
  color: var(--accent-600);
  background: var(--accent-050);
}

.c-my-badge.is-off {
  color: var(--ink-500);
  background: var(--bg-sunken);
}

/* --- メール設定 -------------------------------------------------------------- */
.c-my-mail {
  display: grid;
  gap: var(--sp-2);
}

.c-my-mail label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
  cursor: pointer;
}

.c-my-mail label:hover {
  background: var(--bg-soft);
}

.c-my-mail input {
  margin-top: 0.3em;
  accent-color: var(--brand-600);
}

.c-my-mail b {
  display: block;
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-my-mail small {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-my-mock {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-3);
}

/* --- 空の状態 ---------------------------------------------------------------- */
.c-my-empty {
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong);
  background: var(--bg-soft);
  text-align: center;
}

.c-my-empty p {
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-my-empty .c-btn {
  margin-top: var(--sp-4);
}

/* --- source: mock-source/src/styles/components/_admin.css --- */
/* ===========================================================================
   運営管理ページ ＋ マイページのお知らせ
   ---------------------------------------------------------------------------
   管理ページは読み物ではなく道具。サイトの装飾を持ち込まず、
   情報量を詰めて、状態が一目で分かることだけを狙う。
   会員向けの画面と見分けがつくよう、ヘッダーの色と幅を変えている。
   =========================================================================== */

/* --- 注意書き（本番では出さない）-------------------------------------------- */
.c-adm-warn {
  padding: var(--sp-3) var(--sp-5);
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
}

.c-adm-warn b {
  margin-right: 0.6em;
}

.c-adm-head {
  padding-block: var(--sp-5);
  background: var(--ink-900);
  color: #fff;
}

.c-adm-head__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--brand-200);
}

.c-adm-head__title {
  margin-top: 0.1em;
  font-size: var(--fs-2xl);
  line-height: 1.2;
}

.c-adm-head__meta {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 70%);
}

.c-adm-head__meta a {
  color: var(--brand-200);
  font-weight: 700;
}

/* --- メニュー ---------------------------------------------------------------- */
.c-adm-nav {
  display: flex;
  gap: var(--sp-2);
  margin-block: var(--sp-5) var(--sp-6);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}

.c-adm-nav::-webkit-scrollbar {
  display: none;
}

.c-adm-nav button {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
  cursor: pointer;
}

.c-adm-nav button:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.c-adm-nav button[aria-current="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

/* --- セクション -------------------------------------------------------------- */
.c-adm-sec {
  padding-bottom: var(--sp-12);
}

.c-adm-sec__head {
  padding-bottom: var(--sp-3);
  margin-bottom: var(--sp-5);
  border-bottom: 2px solid var(--ink-900);
}

.c-adm-sec__title {
  font-size: var(--fs-xl);
  color: var(--ink-900);
}

.c-adm-sec__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-adm-src {
  display: inline-block;
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-adm-h3 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-adm-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-adm-note a {
  color: var(--brand-600);
  font-weight: 700;
}

/* --- 対応が必要なもの -------------------------------------------------------- */
.c-adm-todo {
  display: grid;
  gap: var(--sp-2);
  margin-bottom: var(--sp-6);
}

.c-adm-todo li {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent-500);
  background: var(--accent-050);
  font-size: var(--fs-base);
  color: var(--ink-900);
}

/* --- 数字 -------------------------------------------------------------------- */
.c-adm-stats {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 700px) {
  .c-adm-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .c-adm-stats {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

.c-adm-stat {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
}

.c-adm-stat:hover {
  background: var(--bg-soft);
}

.c-adm-stat__num {
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-adm-stat__num small {
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--ink-500);
  margin-left: 0.15em;
}

.c-adm-stat__label {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* --- 表 ---------------------------------------------------------------------- */
.c-adm-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.c-adm-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-sm);
}

.c-adm-table th,
.c-adm-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-ui);
}

.c-adm-table thead th {
  background: var(--bg-sunken);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
  border-bottom: 1px solid var(--line-strong);
}

.c-adm-table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.c-adm-table tbody tr:hover {
  background: var(--bg-soft);
}

.c-adm-table td {
  color: var(--ink-700);
}

.c-adm-table b {
  color: var(--ink-900);
}

.c-adm-sub {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-adm-pin {
  margin-left: 0.5em;
  padding: 0.05em 0.4em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* --- 操作ボタン -------------------------------------------------------------- */
.c-adm-ops {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-adm-ops button {
  padding: 0.2em 0.7em;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-700);
  white-space: nowrap;
  cursor: pointer;
}

.c-adm-ops button:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
}

.c-adm-ops button.is-danger:hover {
  border-color: var(--accent-500);
  color: var(--accent-600);
}

/* --- 状態バッジ -------------------------------------------------------------- */
.c-ad-badge {
  display: inline-block;
  padding: 0.1em 0.5em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid currentColor;
}

.c-ad-badge.is-done {
  color: var(--cat-solution);
}
.c-ad-badge.is-warn {
  color: var(--accent-600);
  background: var(--accent-050);
}
.c-ad-badge.is-off {
  color: var(--ink-500);
}
.c-ad-badge.is-brand {
  color: var(--brand-600);
}
.c-ad-badge.is-money {
  color: var(--cat-money);
}

/* --- 入力フォーム ------------------------------------------------------------ */
.c-adm-form {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-600);
  background: var(--bg-soft);
}

.c-adm-form__title {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-adm-form__grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 720px) {
  .c-adm-form__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-adm-field--wide {
    grid-column: 1 / -1;
  }
}

.c-adm-field {
  display: grid;
  gap: var(--sp-2);
}

.c-adm-field > span {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-adm-field > span b {
  padding: 0.05em 0.4em;
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-2xs);
}

.c-adm-field input,
.c-adm-field select,
.c-adm-field textarea {
  width: 100%;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-adm-field textarea {
  line-height: var(--lh-ui);
  resize: vertical;
}

.c-adm-field input:focus,
.c-adm-field select:focus,
.c-adm-field textarea:focus {
  outline: none;
  border-color: var(--brand-600);
}

/* 入稿規定など、入力欄に添える説明 */
.c-adm-field__hint {
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
  font-weight: 500;
}

.c-adm-upload {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  padding: var(--sp-3);
  border: 1px dashed var(--line-strong);
  background: var(--surface);
}

.c-adm-upload input {
  font-size: var(--fs-xs);
}

.c-adm-upload span {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-adm-preview:not(:empty) {
  display: block;
  padding: var(--sp-3);
  border: 1px solid var(--line);
  background: var(--bg-sunken);
}

.c-adm-preview img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
  background: var(--surface);
}

.c-adm-form__checks {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
}

.c-adm-form__checks label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  cursor: pointer;
}

.c-adm-form__checks input {
  accent-color: var(--brand-600);
}

.c-adm-form__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-adm-form__note {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- レポートの期間切替 ------------------------------------------------------ */
.c-adm-period {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  font-size: var(--fs-sm);
}

.c-adm-period > span {
  margin-right: var(--sp-2);
  font-weight: 700;
  color: var(--ink-500);
}

.c-adm-period button {
  padding: 0.3em 0.9em;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
}

.c-adm-period button[aria-pressed="true"] {
  background: var(--ink-900);
  border-color: var(--ink-900);
  color: #fff;
}

.c-adm-period button.is-reset {
  margin-left: auto;
  border-style: dashed;
  font-weight: 500;
  color: var(--ink-500);
}

.c-adm-period button.is-reset:hover {
  border-color: var(--accent-500);
  color: var(--accent-600);
}

/* --- 期間の指定 -------------------------------------------------------------- */
.c-adm-range {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-adm-range label {
  display: grid;
  gap: 0.3em;
}

.c-adm-range label span {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-adm-range input {
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-family: inherit;
  font-size: var(--fs-sm);
  color: var(--ink-900);
}

.c-adm-range input:focus {
  outline: none;
  border-color: var(--brand-600);
}

.c-adm-range__tilde {
  padding-bottom: 0.5em;
  color: var(--ink-500);
}

/* いま何を集計しているのかを、必ず文字で出す */
.c-adm-range__now {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-block: var(--sp-3) var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--ink-900);
  background: var(--surface);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-adm-range__now b {
  font-size: var(--fs-base);
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

.c-adm-range__now > span {
  padding: 0.1em 0.5em;
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

/* 数値は右寄せ。桁を比べられるようにする */
.c-adm-num {
  display: block;
  text-align: right;
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* --- 枠ごとの入稿カード ------------------------------------------------------
   表ではなくカードにする。入稿内容（見出し・説明文）は長さがまちまちで、
   表に押し込むと読めなくなるため。 */
.c-adm-slots {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

.c-adm-slot {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-left: 4px solid var(--line-strong);
  background: var(--surface);
}

.c-adm-slot.is-live {
  border-left-color: var(--cat-solution);
}
.c-adm-slot.is-paused {
  border-left-color: var(--accent-500);
}
.c-adm-slot.is-scheduled {
  border-left-color: var(--brand-600);
}
.c-adm-slot.is-empty,
.c-adm-slot.is-ended {
  border-left-color: var(--line-strong);
  background: var(--bg-soft);
}

.c-adm-slot__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.c-adm-slot__no {
  flex: none;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-adm-slot__name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-adm-slot__name small {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--ink-500);
}

/* 「＋広告を追加」。枠ごとに置く */
.c-adm-slot__add {
  flex: none;
  padding: 0.3em 0.8em;
  border: 1px solid var(--brand-600);
  background: var(--surface);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--brand-600);
  cursor: pointer;
}

.c-adm-slot__add:hover {
  background: var(--brand-600);
  color: #fff;
}

/* 同じ枠で複数が有効なときの注記 */
.c-adm-slot__rotate {
  padding: var(--sp-2) var(--sp-4);
  border-bottom: 1px solid var(--line);
  background: var(--brand-050);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--brand-600);
}

.c-adm-slot__empty {
  padding: var(--sp-5) var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 枠の中の広告1件 --------------------------------------------------------- */
.c-adm-ads {
  display: grid;
}

.c-adm-ad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-adm-ad:first-child {
  border-top: none;
}

/* 出ていないものは沈める。一覧の中で「いま出ているもの」を探せるように */
.c-adm-ad.is-paused,
.c-adm-ad.is-ended {
  background: var(--bg-soft);
}

.c-adm-ad.is-ended .c-adm-ad__title,
.c-adm-ad.is-paused .c-adm-ad__title {
  color: var(--ink-500);
}

/* 画像枠はサムネイルを添える。文字だけだと何のバナーか思い出せない */
.c-adm-ad__thumb {
  flex: none;
  width: 120px;
}

.c-adm-ad__thumb img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-adm-ad__main {
  flex: 1 1 16em;
  min-width: 0;
}

.c-adm-ad__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-adm-ad__adv {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
}

.c-adm-ad__campaign {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-adm-ad__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-adm-ad__text {
  margin-top: 0.3em;
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-adm-ad__period {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-adm-ad__period code {
  word-break: break-all;
}

/* --- 広告主別 ----------------------------------------------------------------
   1社が複数枠に出すので、社ごとにまとめて、開くと枠別の内訳が出る形にする */
.c-adm-advs {
  display: grid;
  gap: var(--sp-2);
}

.c-adm-adv {
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-adm-adv > summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  padding: var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.c-adm-adv > summary::-webkit-details-marker {
  display: none;
}

.c-adm-adv > summary::before {
  content: "▶";
  flex: none;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  transition: transform var(--dur-fast) var(--ease);
}

.c-adm-adv[open] > summary::before {
  transform: rotate(90deg);
}

.c-adm-adv > summary:hover {
  background: var(--bg-soft);
}

.c-adm-adv__head {
  flex: 1 1 14em;
  min-width: 0;
}

.c-adm-adv__name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-adm-adv__sub {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-adm-adv__nums {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
}

.c-adm-adv__nums b {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.c-adm-adv__body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line);
  padding-top: var(--sp-4);
}

/* --- 日別の棒 ---------------------------------------------------------------- */
.c-adm-bars {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-adm-bars li {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: var(--sp-2) var(--sp-3);
  align-items: center;
  font-size: var(--fs-xs);
}

@media (min-width: 720px) {
  .c-adm-bars li {
    grid-template-columns: 7em minmax(0, 1fr) 12em;
  }
}

.c-adm-bars__day {
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-adm-bars__track {
  height: 14px;
  background: var(--bg-sunken);
}

.c-adm-bars__fill {
  display: block;
  height: 100%;
  background: var(--brand-600);
}

.c-adm-bars__val {
  grid-column: 2;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
}

@media (min-width: 720px) {
  .c-adm-bars__val {
    grid-column: auto;
    text-align: right;
  }
}

/* --- 指標の定義 -------------------------------------------------------------- */
.c-adm-def {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  background: var(--bg-soft);
}

.c-adm-def li {
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-adm-def b {
  color: var(--ink-900);
}

/* ===========================================================================
   マイページ側のお知らせ
   =========================================================================== */

.c-my-notice-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-my-notice-bar b {
  color: var(--accent-600);
}

.c-my-notice-bar button {
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: underline;
  cursor: pointer;
}

.c-my-notices {
  display: grid;
  gap: var(--sp-2);
}

.c-my-notice {
  border: 1px solid var(--line);
  background: var(--surface);
}

/* 未読は左の帯で示す。色だけでなく「未読」の文字も出す */
.c-my-notice.is-unread {
  border-left: 4px solid var(--accent-500);
}

.c-my-notice > summary {
  padding: var(--sp-4);
  cursor: pointer;
  list-style: none;
}

.c-my-notice > summary::-webkit-details-marker {
  display: none;
}

.c-my-notice > summary:hover {
  background: var(--bg-soft);
}

.c-my-notice__top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-my-notice__date {
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-my-notice__pin {
  padding: 0.05em 0.4em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-my-notice__new {
  padding: 0.05em 0.5em;
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-my-notice__title {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-my-notice[open] > summary .c-my-notice__title {
  color: var(--brand-600);
}

.c-my-notice__body {
  padding: 0 var(--sp-4) var(--sp-4);
  border-top: 1px solid var(--line);
}

.c-my-notice__body p {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-my-notice__link {
  margin-top: var(--sp-4);
}

.c-my-notice__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
}

.c-my-notice__link a::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

/* マイページ「セミナー申込」タブ（Task 7）。既存の c-my-* コンポーネントと
   同じ余白・罫線トークンを使う。 */
.c-my-app-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-my-app {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.c-my-app__title {
  font-weight: 700;
  font-size: var(--fs-base);
}

.c-my-app__title a {
  color: inherit;
  text-decoration: none;
}

.c-my-app__title a:hover {
  color: var(--brand-600);
}

.c-my-app__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-my-app__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--sp-2);
  flex-shrink: 0;
}

/* 申込ステータスのバッジ。フロント（マイページ）と管理画面
   （chikara-semapp-status、assets/css/admin-seminar-applications.css）
   で同じ配色を使う。 */
.c-app-status {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: var(--radius-pill);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}

.c-app-status--pending {
  color: var(--brand-700);
  background: var(--brand-050);
}

.c-app-status--approved {
  color: #0b6b3a;
  background: #e8f6ee;
}

.c-app-status--rejected {
  color: var(--accent-700);
  background: var(--accent-050);
}

.c-app-status--waitlisted {
  color: #8a5a00;
  background: #fdf3e2;
}

.c-app-status--cancelled {
  color: var(--ink-500);
  background: var(--bg-sunken);
}

.c-btn--small {
  min-height: 36px;
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
}

.c-my-flash {
  margin-block: var(--sp-4) 0;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 700;
}

.c-my-flash--success {
  color: #0b6b3a;
  background: #e8f6ee;
}

.c-my-flash--error {
  color: var(--accent-700);
  background: var(--accent-050);
}

@media (max-width: 480px) {
  .c-my-app {
    flex-direction: column;
    align-items: flex-start;
  }

  .c-my-app__side {
    align-items: flex-start;
    width: 100%;
  }
}

.c-my-more {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: underline;
  cursor: pointer;
}

/* メニューの未読バッジ */
.c-my-nav__badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.5em;
  height: 1.5em;
  margin-left: 0.4em;
  padding-inline: 0.35em;
  border-radius: 999px;
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-2xs);
  font-variant-numeric: tabular-nums;
}

.c-my-nav button[aria-current="true"] .c-my-nav__badge {
  background: var(--accent-600);
}

/* --- source: mock-source/src/styles/components/_seminar.css --- */
/* ===========================================================================
   セミナー・イベント
   ---------------------------------------------------------------------------
   一覧のカードは「日時・会場・参加費」を必ず同じ位置に置く。
   セミナーを探している人は、まずそこを見て参加できるかを判断するため。

   状態（受付中／受付終了／アーカイブ）は色で分ける。
   受付中だけを塗り、それ以外は罫線と文字だけにして、押せる先を迷わせない。
   =========================================================================== */

.c-sem-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
}

/* --- 一覧のカード ----------------------------------------------------------- */
.c-sem {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-sem__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--bg-sunken);
}

.c-sem__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 状態バッジ。サムネの左上に重ねる */
.c-sem__status {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0.35em 0.9em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--accent-500);
}

.c-sem__status--closed {
  background: var(--ink-500);
}

/* Batch 2, Issue 9: 開催が終了したセミナー専用のバッジ色。既存の受付終了と
   区別できるよう、closedと同系統だがやや濃いトーンにしている。 */
.c-sem__status--ended {
  background: var(--ink-700);
}

.c-sem__status--archive {
  background: var(--brand-700);
}

.c-sem__body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  flex: 1 1 auto;
}

.c-sem__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.c-sem__format {
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
  white-space: nowrap;
}

.c-sem__title {
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-sem__title a {
  color: inherit;
  text-decoration: none;
}

.c-sem__title a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-sem__lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* 日時・会場・参加費。カードごとに位置がずれないよう表組みで揃える */
.c-sem__spec {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.c-sem__spec > div {
  display: grid;
  grid-template-columns: 4.5em minmax(0, 1fr);
  gap: var(--sp-3);
  align-items: baseline;
}

.c-sem__spec dt {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-sem__spec dd {
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sem__speaker {
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-sem__left {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-600);
}

.c-sem__cta {
  display: block;
  margin-top: auto;
  padding: var(--sp-3);
  border: 1px solid var(--brand-600);
  background: var(--brand-600);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  text-align: center;
  text-decoration: none;
}

.c-sem__cta:hover {
  background: var(--brand-700);
  border-color: var(--brand-700);
}

.c-sem__cta.is-off {
  border-color: var(--line-strong);
  background: var(--bg-sunken);
  color: var(--ink-500);
  cursor: default;
}

/* --- 種別のタブ --------------------------------------------------------------
   下線ではなく、選択中だけを塗った切り替え。
   件数を添えて、押す前にどちらに何件あるか分かるようにする。 */
.c-sim-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.c-sim-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-700);
  cursor: pointer;
  text-decoration: none;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

/* .c-sim-tab is a real <a href> (archive-seminar.php's status/theme
   filter tabs) — anchors are underlined by default in every browser
   unless overridden, and nothing here previously did, in any state.
   This class name is exclusive to this one archive (not shared with
   page-simulator.php's own, differently-named .c-sim-tabs__tab buttons —
   confirmed by direct inspection), so no extra page-scoping wrapper is
   needed for these rules to stay confined to the Seminar tag/filter
   controls specifically. */
.c-sim-tab:visited {
  color: var(--ink-700);
  text-decoration: none;
}

.c-sim-tab:hover {
  background: #fff;
  border-color: var(--ink-900);
  color: var(--ink-900);
  text-decoration: none;
}

.c-sim-tab:focus-visible {
  background: #fff;
  border-color: var(--ink-900);
  color: var(--ink-900);
  text-decoration: none;
  outline: 2px solid var(--brand-600);
  outline-offset: 2px;
}

/* Selected must stay visually distinguishable even while also hovered or
   keyboard-focused — redeclared (not just added text-decoration) so this
   still wins over the :hover/:focus-visible rules above for a tab that is
   both selected AND currently pointed at/focused. */
.c-sim-tab[aria-selected="true"] {
  border-color: var(--ink-900);
  background: var(--ink-900);
  color: #fff;
  text-decoration: none;
}

.c-sim-tab__num {
  padding: 0.1em 0.5em;
  background: var(--bg-sunken);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-sim-tab[aria-selected="true"] .c-sim-tab__num {
  background: rgb(255 255 255 / 20%);
  color: #fff;
}

/* 会員限定であることの注意書き（アーカイブのタブ） */
.c-sem-note {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* ===========================================================================
   詳細ページ
   =========================================================================== */

.c-sem-head {
  padding-block: var(--sp-8) var(--sp-10);
  border-top: 3px solid var(--sem-color, var(--brand-600));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.c-sem-head__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}

@media (min-width: 900px) {
  .c-sem-head__inner {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-8);
    align-items: start;
  }
}

.c-sem-head__badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-4);
}

/* 詳細では絶対配置をやめて、行の中に並べる */
.c-sem-head__badges .c-sem__status {
  position: static;
}

.c-sem-head__title {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  color: var(--ink-900);
  text-wrap: balance;
}

.c-sem-head__lead {
  margin-top: var(--sp-4);
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-sem-head__spec {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-base);
}

.c-sem-head__spec > div {
  display: grid;
  grid-template-columns: 5em minmax(0, 1fr);
  gap: var(--sp-4);
  align-items: baseline;
}

.c-sem-head__spec > div + div {
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.c-sem-head__spec dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-sem-head__spec dd {
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sem-head__spec dd b {
  font-size: var(--fs-lg);
  color: var(--sem-color, var(--brand-600));
}

.c-sem-head__cta {
  margin-top: var(--sp-5);
}

.c-sem-head__cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
}

/* --- 本文の見出し ----------------------------------------------------------- */
.c-sem-h2 {
  margin-top: var(--sp-10);
  margin-bottom: var(--sp-5);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--brand-600);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--ink-900);
  scroll-margin-top: 220px;
}

.c-sem-h2:first-child {
  margin-top: 0;
}

.c-sem-cols {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .c-sem-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-8);
  }

  .c-sem-cols .c-sem-h2 {
    margin-top: 0;
  }
}

/* --- チェックリスト --------------------------------------------------------- */
.c-sem-check {
  display: grid;
  gap: var(--sp-3);
}

.c-sem-check li {
  position: relative;
  padding-left: 1.9em;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-sem-check li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 1.15em;
  height: 1.15em;
  border: 1px solid var(--ink-500);
}

.c-sem-check li::after {
  content: "";
  position: absolute;
  left: 0.3em;
  top: 0.4em;
  width: 0.55em;
  height: 0.3em;
  border-left: 2px solid var(--ink-900);
  border-bottom: 2px solid var(--ink-900);
  transform: rotate(-45deg);
}

/* 持ち帰るものは前向きな内容なので、ブランド色にする */
.c-sem-check--get li::before {
  border-color: var(--brand-600);
}

.c-sem-check--get li::after {
  border-color: var(--brand-600);
}

/* --- プログラム ------------------------------------------------------------- */
.c-sem-program {
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-sem-program li {
  display: grid;
  grid-template-columns: 5.5em minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
}

.c-sem-program li + li {
  border-top: 1px solid var(--line);
}

.c-sem-program__time {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}

.c-sem-program__main b {
  display: block;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-sem-program__main span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 登壇者 ----------------------------------------------------------------- */
.c-sem-speakers {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
}

.c-sem-speaker {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-sem-speaker img,
.c-sem-speaker__blank {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--bg-sunken);
}

.c-sem-speaker__name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

.c-sem-speaker__title {
  margin-top: 0.2em;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.c-sem-speaker__org,
.c-sem-speaker__bio {
  margin-top: 0.3em;
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-sem-speaker__more {
  margin-top: var(--sp-2);
}

.c-sem-speaker__more a {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-600);
}

/* --- 会員ゲート・アーカイブ再生 --------------------------------------------- */
.c-sem-gate {
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--brand-600);
  background: var(--bg-soft);
  text-align: center;
}

.c-sem-gate__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-sem-gate__text {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-sem-gate__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-5);
}

.c-sem-play__frame {
  display: grid;
  place-content: center;
  gap: var(--sp-2);
  aspect-ratio: 16 / 9;
  padding: var(--sp-5);
  border: 1px solid var(--line);
  background: var(--ink-900);
  color: #fff;
  text-align: center;
}

.c-sem-play__frame p {
  font-size: var(--fs-lg);
  font-weight: 700;
}

.c-sem-play__frame span {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 70%);
}

.c-sem-play__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-sem-play__toggle {
  margin-left: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--brand-600);
  text-decoration: underline;
}

/* ===========================================================================
   トップページのセミナー枠
   =========================================================================== */

.c-sem-top {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
}

.c-sem-top__item {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.c-sem-top__item:hover {
  background: var(--bg-soft);
}

.c-sem-top__item img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border: 1px solid var(--line);
}

.c-sem-top__date {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}

.c-sem-top__date span {
  padding: 0.1em 0.45em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-sem-top__title {
  margin-top: 0.3em;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-sem-top__item:hover .c-sem-top__title {
  color: var(--brand-600);
  text-decoration: underline;
}

/* --- source: mock-source/src/styles/components/_ad.css --- */
/* ===========================================================================
   広告枠
   ---------------------------------------------------------------------------
   メディアガイド2026 SECTION 09 の11枠。
   資料の NOTE に「コンテンツフェアネス基準・広告ラベルを遵守」とあるため、
   どの型でも必ず PR / 広告 のラベルと広告主名を出す。

   記事と見分けがつかない広告は、短期的には押されても媒体の信頼を削る。
   ネイティブ枠（記事風）でも、上辺の色帯とラベルで記事とは区別できるようにしている。
   =========================================================================== */

.c-ad {
  --ad-color: var(--brand-600);
  display: block;
  position: relative;
}

.c-ad__inner {
  display: block;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--ad-color);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--dur) var(--ease);
}

.c-ad__inner:hover {
  background: var(--bg-soft);
}

/* 中身は ラベル / 本体 / ボタン の3ブロック。
   横並びの枠でも、この3つを並べ替えるだけで済むようにしている */
.c-ad__main {
  display: block;
}

/* --- ラベル ------------------------------------------------------------------
   広告主名まで出して、誰が出している広告かを明示する */
.c-ad__label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.c-ad__tag {
  flex: none;
  padding: 0.1em 0.5em;
  background: var(--ad-color);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.c-ad__sponsor {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.c-ad__title {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-ad__inner:hover .c-ad__title {
  color: var(--ad-color);
}

.c-ad__text {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-ad__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

.c-ad__points span {
  padding: 0.15em 0.6em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  color: var(--ink-700);
}

.c-ad__action {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-4);
}

.c-ad__cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.45em 1.1em;
  border: 1px solid var(--ad-color);
  background: var(--ad-color);
  color: #fff;
  font-size: var(--fs-sm);
  font-weight: 700;
}

.c-ad__cta::after {
  content: "›";
  font-size: var(--fs-base);
  line-height: 1;
}

.c-ad__note {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* ===========================================================================
   画像バナーの枠
   ---------------------------------------------------------------------------
   画像だけだと記事の図版と見分けがつかないので、上にラベルの帯を必ず置く。
   画像は枠幅に合わせて縮小し、拡大はしない（粗くなるため）。
   =========================================================================== */

.c-ad--img .c-ad__banner {
  display: block;
  border: 1px solid var(--line);
  border-top: 3px solid var(--ad-color);
  background: var(--surface);
  text-decoration: none;
}

.c-ad--img .c-ad__label {
  margin: 0;
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-ad--img img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/* サイドバーのレクタングルは、幅いっぱいに伸ばさず中央に置く */
.c-ad--rect.c-ad--img img {
  max-width: 300px;
  margin-inline: auto;
}

/* 全幅の枠は、コンテナ幅の中で中央寄せ */
.c-ad--billboard.c-ad--img,
.c-ad--fullwide.c-ad--img {
  max-width: var(--container);
  margin-inline: auto;
}

/* --- ファーストビューの帯 ---------------------------------------------------
   ここはページを開いて最初に見える場所。高くすると記事が下に押し出され、
   何のサイトか分からないまま離脱される。
   ラベルを画像の左に置いて縦を詰め、高さにも上限をかけている。
   上限は、規定より大きい画像が入稿されたときの保険。 */
.c-ad--billboard.c-ad--img {
  border-bottom: 1px solid var(--line);
  background: transparent;
}

.c-ad--billboard.c-ad--img .c-ad__banner {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
}

.c-ad--billboard.c-ad--img img {
  max-height: 120px;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 860px) {
  .c-ad--billboard.c-ad--img .c-ad__banner {
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--sp-4);
    padding-inline: var(--sp-4);
  }

  /* 左に縦組みのラベル。帯の高さを増やさずに広告主名まで出す */
  .c-ad--billboard.c-ad--img .c-ad__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2em;
    margin: 0;
    padding: 0;
    border-bottom: none;
    background: transparent;
    max-width: 12em;
  }
}

.c-ad--banner.c-ad--img {
  margin-block: var(--sp-6);
}

.c-ad--img .c-ad__banner:hover {
  background: var(--bg-soft);
}

/* ===========================================================================
   記事上部広告（template-parts/ad-top.php専用。U5対応）
   ---------------------------------------------------------------------------
   記事メタ／アクション行の下、アイキャッチ画像の直前に置く、記事ごとに
   選べる広告枠。選ばれる広告の画像は、この枠専用に作られるとは限らない
   （サイドバー用の縦長・正方形に近い画像が選ばれることもある）ため、
   枠自体を横長バナーの比率（728:90 = 推奨サイズと同じ）に固定し、
   その中に object-fit: contain で収める（引き伸ばし・トリミングはしない）。
   比率どおりの画像なら隙間なく全幅表示になり、比率が違う画像が入っても
   上下または左右に均等の余白ができるだけで、崩れたり切れたりしない。
   .c-ad--article-top というこの配置専用の修飾クラスだけを対象にしている
   ため、インラインPR（.c-ad--box）・サイドバー（.c-ad--rect）・トップ
   ページの各種枠・管理画面プレビューには一切影響しない。 */
.c-ad--article-top.c-ad--img img {
  display: block;
  width: 100%;
  aspect-ratio: 728 / 90;
  object-fit: contain;
  object-position: center;
}

/* テキスト構成（画像なしの広告が選ばれた場合）も、記事アイキャッチの
   直前という控えめな位置に合わせて、見出し・本文・ボタンを一段階
   小さくする。.c-ad--banner .c-ad__inner の基本レイアウト（2列グリッド等）
   はそのまま使う。 */
.c-ad--article-top:not(.c-ad--img) .c-ad__inner {
  padding: var(--sp-3) var(--sp-4);
}

.c-ad--article-top .c-ad__title {
  font-size: var(--fs-sm);
}

.c-ad--article-top .c-ad__text {
  font-size: var(--fs-xs);
}

.c-ad--article-top .c-ad__cta {
  padding: 0.35em 0.9em;
  font-size: var(--fs-xs);
}

/* ===========================================================================
   型ごとの見た目
   =========================================================================== */

/* ① ヒーローバナー：ヘッダー直下の全幅。記事より先に来るので圧を出しすぎない */
.c-ad--billboard {
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-ad--billboard .c-ad__inner {
  display: grid;
  gap: var(--sp-2) var(--sp-5);
  align-items: center;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--sp-4) var(--sp-5);
  border: none;
  border-top: 3px solid var(--ad-color);
  background: transparent;
}

@media (min-width: 860px) {
  /* ラベル｜本文｜ボタン の3列 */
  .c-ad--billboard .c-ad__inner {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .c-ad--billboard .c-ad__label {
    margin-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.3em;
    padding-right: var(--sp-5);
    border-right: 1px solid var(--line);
  }

  .c-ad--billboard .c-ad__text {
    margin-top: 0.2em;
  }

  .c-ad--billboard .c-ad__action {
    margin-top: 0;
  }
}

/* ★ 中段フルワイド：セクションの区切りとして使うので、面で見せる */
.c-ad--fullwide .c-ad__inner {
  display: grid;
  gap: var(--sp-3) var(--sp-6);
  align-items: center;
  padding: var(--sp-6) var(--sp-5);
  border-left: none;
  border-right: none;
  background: var(--bg-soft);
  text-align: center;
}

@media (min-width: 860px) {
  .c-ad--fullwide .c-ad__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: left;
    padding-inline: var(--sp-8);
  }

  /* ラベルは1行使って上に。本文とボタンを左右に振る */
  .c-ad--fullwide .c-ad__label {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .c-ad--fullwide .c-ad__action {
    margin-top: 0;
  }
}

.c-ad--fullwide .c-ad__title {
  font-size: var(--fs-xl);
}

/* ② ⑪ ネイティブ：記事カードの並びに入る。上辺の色帯とラベルで記事と分ける */
.c-ad--native .c-ad__inner {
  height: 100%;
}

.c-ad--native .c-ad__title {
  font-size: var(--fs-base);
}

/* ③ サイドバー：狭いので縦積み */
.c-ad--rect .c-ad__title {
  font-size: var(--fs-base);
}

.c-ad--rect .c-ad__cta {
  width: 100%;
  justify-content: center;
}

/* ④ ⑤ ⑧ 本文中のバナー：横長。本文の流れを止めすぎない高さにする */
.c-ad--banner {
  margin-block: var(--sp-6);
}

@media (min-width: 720px) {
  .c-ad--banner .c-ad__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-2) var(--sp-5);
    align-items: center;
  }

  .c-ad--banner .c-ad__label {
    grid-column: 1 / -1;
    margin-bottom: 0;
  }

  .c-ad--banner .c-ad__action {
    margin-top: 0;
  }
}

/* ⑥ 章間インフィード：本文の段落と同じ幅に置き、色帯だけで区別する */
.c-ad--infeed {
  margin-block: var(--sp-8);
}

.c-ad--infeed .c-ad__inner {
  border-left: 3px solid var(--ad-color);
  border-top: 1px solid var(--line);
}

/* ⑦ 関連商材ボックス：商材の説明枠。特徴を並べる */
.c-ad--box {
  margin-block: var(--sp-8);
}

.c-ad--box .c-ad__inner {
  background: var(--bg-soft);
}

.c-ad--box .c-ad__title {
  font-size: var(--fs-lg);
}

/* 広告（ad投稿タイプ）共通のカラーウェイ。管理者は7色の承認済み
   プリセットから選ぶだけで、自由な色・CSSは入力できない
   （chikara_ad_colorway select field, inc/custom-fields.php）。
   値はすべてこのプロジェクトの既存の承認済みブランド／カテゴリー
   パレットからの再利用で、新規に色を起こしてはいない。白文字の
   ラベル・ボタンとの十分なコントラストを確保するため、明度の高い
   "vivid" 系ではなく、通常濃度のトークンを使用している。
   .c-ad__tag や .c-ad__inner:hover .c-ad__title など、既存の
   --ad-color 依存ルールをそのまま再利用する。 */
.c-ad--preset-brand {
  --ad-color: var(--brand-600);
}

.c-ad--preset-accent {
  --ad-color: var(--accent-700);
}

.c-ad--preset-kotoba {
  --ad-color: var(--cat-kotoba);
}

.c-ad--preset-money {
  --ad-color: var(--cat-money);
}

.c-ad--preset-recruit {
  --ad-color: var(--cat-recruit);
}

.c-ad--preset-dx {
  --ad-color: var(--cat-dx);
}

.c-ad--preset-web {
  --ad-color: var(--cat-web);
}

/* 記事内固定PRバナー（3種、template-parts/column-pr-banner.php）専用の
   固定カラー。上のカラーウェイ選択とは別物 — 管理者は変更できない。 */
.c-ad--pr-banner-1 {
  --ad-color: var(--cat-money);
}

.c-ad--pr-banner-2 {
  --ad-color: var(--cat-dx);
}

.c-ad--pr-banner-3 {
  --ad-color: var(--brand-700);
}

/* PRカードの任意画像。.c-ad--box はこれまでテキスト構成のみだったため、
   画像を足す場合の最小限のレイアウトをここで補う。 */
.c-ad--box .c-ad__image {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
}

/* ⑨ 記事末尾CTA：読み終えた直後なので、面を塗って明確に見せる */
.c-ad--cta {
  margin-top: var(--sp-10);
}

.c-ad--cta .c-ad__inner {
  padding: var(--sp-6) var(--sp-5);
  border-top-width: 4px;
  background: var(--bg-soft);
}

.c-ad--cta .c-ad__title {
  font-size: var(--fs-lg);
}

/* ⑩ 会員限定コンテンツ予告：鍵アイコンで「まだ読めない」ことを示す */
.c-ad--member {
  margin-top: var(--sp-8);
}

.c-ad--member .c-ad__inner {
  border-style: dashed;
  border-top-style: solid;
}

.c-ad--member .c-ad__title::before {
  content: "";
  display: inline-block;
  width: 0.85em;
  height: 0.8em;
  margin-right: 0.4em;
  border: 2px solid currentColor;
  border-radius: 2px;
  border-top-width: 0.35em;
  vertical-align: -0.05em;
}

/* ===========================================================================
   空き枠（ハウス広告）
   売り物であることが分かる見た目にして、問い合わせ先まで出す
   =========================================================================== */

.c-ad__house {
  padding: var(--sp-5);
  border: 1px dashed var(--line-strong);
  background: var(--bg-soft);
  text-align: center;
}

.c-ad__house-label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--ink-500);
}

.c-ad__house-title {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-ad__house-text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-ad__house-link {
  display: inline-block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
}

/* ===========================================================================
   プレビューモード（?ads=preview）
   配置マップと実画面を突き合わせるための表示。通常の閲覧では出ない。
   =========================================================================== */

.c-ad__preview {
  position: absolute;
  z-index: 2;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.25em 0.7em;
  background: #111;
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 1.4;
  pointer-events: none;
}

.c-ad__preview b {
  font-size: var(--fs-sm);
  color: #ffd166;
}

.c-ad__preview span {
  font-weight: 500;
  color: rgb(255 255 255 / 75%);
}

.is-ads-preview .c-ad {
  outline: 2px dashed #111;
  outline-offset: 2px;
}

/* プレビュー中であることを常に分かるようにする */
.c-ads-preview-bar {
  position: fixed;
  z-index: calc(var(--z-header) + 30);
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-4);
  background: #111;
  color: #fff;
  font-size: var(--fs-xs);
}

.c-ads-preview-bar a {
  color: #ffd166;
  font-weight: 700;
}

/* --- source: mock-source/src/styles/components/_advertise.css --- */
/* ===========================================================================
   広告掲載のご案内
   ---------------------------------------------------------------------------
   読むのは広告主・代理店。出すのはメニューの内容と枠の位置まで。
   料金と媒体データ（会員数・会員属性・流入経路）は社外秘のため扱わない。
   問い合わせて資料を受け取るところまでを、迷わせずに済ませる作りにする。
   =========================================================================== */

.c-page-head--ad {
  border-top: 3px solid var(--brand-600);
}

.c-page-head__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

/* --- メニューの一覧カード --------------------------------------------------- */
.c-mg-menu-nav {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.c-mg-menu-card {
  display: block;
  padding: var(--sp-5) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
  text-decoration: none;
  color: inherit;
}

.c-mg-menu-card:hover {
  background: var(--brand-050);
  border-color: var(--brand-200);
}

.c-mg-menu-card__no {
  display: inline-block;
  padding: 0.1em 0.55em;
  background: var(--brand-700);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-mg-menu-card__name {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-mg-menu-card__en {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-600);
}

.c-mg-menu-card__text {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- メニュー詳細 ----------------------------------------------------------- */
.c-mg-menu + .c-mg-menu {
  margin-top: var(--sp-12);
  padding-top: var(--sp-12);
  border-top: 1px solid var(--line);
}

.c-mg-menu__head {
  margin-bottom: var(--sp-5);
  scroll-margin-top: 220px;
}

.c-mg-menu {
  scroll-margin-top: 220px;
}

.c-mg-menu__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--brand-600);
}

.c-mg-menu__eyebrow span {
  padding: 0.15em 0.5em;
  background: var(--brand-700);
  color: #fff;
  letter-spacing: 0.04em;
}

.c-mg-menu__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-mg-menu__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-mg-menu__sub {
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
}

/* 料金は出さないので、各メニューの最後に見積の導線を置く */
.c-mg-menu__ask {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-mg-menu__ask a {
  font-weight: 700;
  color: var(--brand-600);
}

/* --- 内容の表 ----------------------------------------------------------------
   横に長い表になるので、はみ出しは表の中だけでスクロールさせる */
.c-mg-table__wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
}

.c-mg-table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  background: var(--surface);
  font-size: var(--fs-sm);
}

.c-mg-table th,
.c-mg-table td {
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  vertical-align: top;
  line-height: var(--lh-ui);
}

.c-mg-table thead th {
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  white-space: nowrap;
}

.c-mg-table tbody tr + tr th,
.c-mg-table tbody tr + tr td {
  border-top: 1px solid var(--line);
}

.c-mg-table tbody tr:nth-child(even) {
  background: var(--bg-soft);
}

.c-mg-table tbody th {
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}

.c-mg-table td {
  color: var(--ink-700);
}

.c-mg-table__no {
  width: 3em;
  font-weight: 700;
  color: var(--ink-500);
}

.c-mg-table__desc {
  min-width: 16em;
  color: var(--ink-500);
}

/* --- 補足のかたまり --------------------------------------------------------- */
.c-mg-extras {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.c-mg-extras > div {
  padding: var(--sp-4);
  border-left: 3px solid var(--brand-600);
  background: var(--bg-soft);
}

.c-mg-extras__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-600);
}

.c-mg-extras__text {
  margin-top: 0.3em;
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-mg-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

.c-mg-chips li {
  padding: 0.3em 0.9em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.c-mg-list {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.c-mg-list li {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--brand-200);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* 料金の前提など、見落とすと困る注記 */
.c-mg-caution {
  margin-bottom: var(--sp-5);
  padding: var(--sp-4);
  border-left: 3px solid var(--accent-500);
  background: var(--accent-050);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

.c-mg-note {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 枠一覧 ------------------------------------------------------------------ */
.c-mg-slots__group + .c-mg-slots__group {
  margin-top: var(--sp-8);
}

.c-mg-slots__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.c-mg-slots__head span {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
}

.c-mg-preview-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.c-mg-preview-cta__note {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 制作フロー ------------------------------------------------------------- */
.c-mg-steps {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  background: var(--line);
  border: 1px solid var(--line);
}

.c-mg-step {
  padding: var(--sp-5) var(--sp-4);
  background: var(--surface);
  border-top: 3px solid var(--brand-600);
}

.c-mg-step__no {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-600);
}

.c-mg-step__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-mg-step__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-mg-support {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.c-mg-support__item {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-mg-support__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--brand-600);
}

.c-mg-support__title {
  margin-top: var(--sp-2);
  font-size: var(--fs-md);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-mg-support__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- source: mock-source/src/styles/components/_framework.css --- */
/* ===========================================================================
   経営分析フレームワーク（3C / 4C / 5C / SWOT）
   ---------------------------------------------------------------------------
   紙のワークシートの代わりになるページ。
   記入欄は大きく、罫線ははっきり。読み物ではなく「書く場所」として作る。

   SWOTだけは、内部／外部・プラス／マイナスの位置関係に意味があるので、
   縦横の位置を固定した2×2で並べる（順番を崩すと意味が変わる）。
   =========================================================================== */

.c-page-head--fw {
  border-top: 3px solid var(--accent-500);
}

.c-fw-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-5);
}

.c-fw-points li {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.9em;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.c-fw-points li::before {
  content: "";
  width: 0.5em;
  height: 0.28em;
  border-left: 2px solid var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  transform: rotate(-45deg) translateY(-0.15em);
}

/* ===========================================================================
   フレームワークの切り替えタブ
   ---------------------------------------------------------------------------
   「3C / 4C / 5C / SWOT」だけを並べても、どれを選べばいいか分からない。
   1枚のカードとして、略称・正式名・一言・枠数まで出す。

   選択中は面を塗り、下向きの三角で記入欄とつなぐ。
   色だけに頼らず、塗り・太字・三角の3つで現在地を示している。
   =========================================================================== */

.c-fw-tabs__guide {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-500);
}

.c-fw-tabs {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 760px) {
  .c-fw-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--sp-3);
  }
}

.c-fw-tab {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15em;
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.c-fw-tab:hover {
  border-color: var(--accent-500);
  background: var(--accent-050);
}

.c-fw-tab:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: 2px;
}

/* 略称。遠目でも拾えるように、ここだけ大きく置く */
.c-fw-tab__label {
  font-size: var(--fs-2xl);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--ink-300, #b5b5b5);
  transition: color var(--dur) var(--ease);
}

.c-fw-tab__name {
  margin-top: 0.35em;
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-fw-tab__note {
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--ink-500);
}

.c-fw-tab__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-2);
  width: 100%;
  border-top: 1px solid var(--line);
}

.c-fw-tab__cells {
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

/* 一度書いたフレームワークには印をつけ、続きから戻れるようにする */
.c-fw-tab__written {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--cat-solution);
}

.c-fw-tab__written::before {
  content: "";
  width: 0.45em;
  height: 0.25em;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg) translateY(-0.12em);
}

/* --- 選択中 ------------------------------------------------------------------ */
.c-fw-tab[aria-selected="true"] {
  border-color: var(--ink-900);
  background: var(--ink-900);
}

.c-fw-tab[aria-selected="true"] .c-fw-tab__label {
  color: var(--accent-500);
}

.c-fw-tab[aria-selected="true"] .c-fw-tab__name {
  color: #fff;
}

.c-fw-tab[aria-selected="true"] .c-fw-tab__note {
  color: rgb(255 255 255 / 72%);
}

.c-fw-tab[aria-selected="true"] .c-fw-tab__meta {
  border-top-color: rgb(255 255 255 / 22%);
}

.c-fw-tab[aria-selected="true"] .c-fw-tab__cells {
  color: rgb(255 255 255 / 72%);
}

.c-fw-tab[aria-selected="true"] .c-fw-tab__written {
  color: #7ddba0;
}

/* 記入欄とつなぐ三角。
   1行に並ぶ幅のときだけ出す。2×2に折り返すと下の段を指してしまうため */
@media (min-width: 760px) {
  .c-fw-tab[aria-selected="true"]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    border: 9px solid transparent;
    border-top-color: var(--ink-900);
  }
}

/* --- フレームワークの説明 ---------------------------------------------------- */
.c-fw__head {
  margin-block: var(--sp-6) var(--sp-5);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  background: var(--bg-soft);
}

.c-fw__title {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-fw__en {
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--accent-600);
}

.c-fw__lead {
  margin-top: var(--sp-3);
  font-size: var(--fs-prose);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

.c-fw__use {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-fw__use span {
  flex: none;
  padding: 0.1em 0.6em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-700);
}

.c-fw__howto {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 記入欄 ------------------------------------------------------------------ */
.c-fw-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .c-fw-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .c-fw-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* SWOTは2×2。左が内部・右が外部、上がプラス・下がマイナス */
  .c-fw-grid--matrix {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 5Cは 3C＋2 なので、下段2枠を広げて並びを整える */
@media (min-width: 760px) {
  .c-fw-grid--cols-3 > :nth-child(4):nth-last-child(2),
  .c-fw-grid--cols-3 > :nth-child(5):nth-last-child(1) {
    grid-column: span 1;
  }
}

@media (min-width: 760px) and (max-width: 1099px) {
  .c-fw-grid--cols-3 > :nth-child(5):last-child {
    grid-column: 1 / -1;
  }
}

.c-fw-cell {
  display: flex;
  flex-direction: column;
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--fw-color, var(--brand-600));
  background: var(--surface);
}

/* 枠ごとに色を変える。SWOTは象限の性格が伝わるように分ける */
.c-fw-cell[data-cell="strength"] {
  --fw-color: var(--cat-solution);
}
.c-fw-cell[data-cell="weakness"] {
  --fw-color: var(--cat-money);
}
.c-fw-cell[data-cell="opportunity"] {
  --fw-color: var(--cat-web);
}
.c-fw-cell[data-cell="threat"] {
  --fw-color: var(--cat-recruit);
}
.c-fw-cell[data-cell="customer"] {
  --fw-color: var(--cat-web);
}
.c-fw-cell[data-cell="competitor"] {
  --fw-color: var(--cat-recruit);
}
.c-fw-cell[data-cell="company"] {
  --fw-color: var(--cat-dx);
}
.c-fw-cell[data-cell="collaborator"] {
  --fw-color: var(--cat-solution);
}
.c-fw-cell[data-cell="context"] {
  --fw-color: var(--cat-money);
}

.c-fw-cell__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  cursor: pointer;
}

.c-fw-cell__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-fw-cell__en {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--fw-color, var(--brand-600));
}

.c-fw-cell__axis {
  margin-left: auto;
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
  white-space: nowrap;
}

.c-fw-cell__hint {
  margin-top: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-fw-cell__input {
  flex: 1 1 auto;
  width: 100%;
  min-height: 9.5em;
  padding: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: var(--fs-base);
  line-height: 1.9;
  color: var(--ink-900);
  resize: vertical;
}

.c-fw-cell__input:focus {
  outline: none;
  border-color: var(--fw-color, var(--brand-600));
  box-shadow: inset 0 0 0 1px var(--fw-color, var(--brand-600));
}

.c-fw-cell__input::placeholder {
  color: var(--ink-300, #9a9a9a);
  font-size: var(--fs-xs);
  line-height: 1.8;
}

.c-fw-cell__count {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  text-align: right;
}

.c-fw-cell__count b {
  font-size: var(--fs-sm);
  color: var(--fw-color, var(--brand-600));
  font-variant-numeric: tabular-nums;
}

/* --- 操作 -------------------------------------------------------------------- */
.c-fw__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.c-fw__saved {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ===========================================================================
   結果
   =========================================================================== */

.c-fw-out {
  margin-top: var(--sp-10);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--line);
  border-top: 4px solid var(--accent-500);
  background: var(--surface);
}

@media (min-width: 760px) {
  .c-fw-out {
    padding: var(--sp-8);
  }
}

.c-fw-out__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--line);
}

.c-fw-out__eyebrow {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-600);
}

.c-fw-out__title {
  font-size: var(--fs-2xl);
  line-height: 1.2;
  color: var(--ink-900);
}

.c-fw-out__meta {
  margin-left: auto;
  font-size: var(--fs-xs);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
}

.c-fw-out__h4 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--ink-900);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

/* --- 整理した内容 ------------------------------------------------------------ */
.c-fw-out__table {
  border: 1px solid var(--line);
}

.c-fw-out__row {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .c-fw-out__row {
    grid-template-columns: 12em minmax(0, 1fr);
  }
}

.c-fw-out__row + .c-fw-out__row {
  border-top: 1px solid var(--line);
}

.c-fw-out__label {
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-fw-out__label span {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-2xs);
  font-weight: 500;
  color: var(--ink-500);
}

.c-fw-out__body {
  padding: var(--sp-3) var(--sp-4);
}

.c-fw-out__body ul {
  display: grid;
  gap: var(--sp-2);
}

.c-fw-out__body li {
  position: relative;
  padding-left: 1.1em;
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

.c-fw-out__body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--ink-500);
}

.c-fw-out__empty {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-fw-out__note {
  padding: var(--sp-4);
  border: 1px dashed var(--line-strong);
  background: var(--bg-soft);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-fw-out__empty-state {
  margin-top: var(--sp-8);
  padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line-strong);
  background: var(--bg-soft);
  text-align: center;
}

.c-fw-out__empty-title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-fw-out__empty-text {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- クロスSWOT --------------------------------------------------------------
   4象限の位置は固定。SO（攻める）を左上、WT（守る）を右下に置く */
.c-fw-cross {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .c-fw-cross {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c-fw-cross__quad {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--quad-color, var(--brand-600));
  background: var(--surface);
}

.c-fw-cross__quad[data-quad="so"] {
  --quad-color: var(--cat-solution);
  background: var(--bg-soft);
}
.c-fw-cross__quad[data-quad="st"] {
  --quad-color: var(--cat-web);
}
.c-fw-cross__quad[data-quad="wo"] {
  --quad-color: var(--cat-money);
}
.c-fw-cross__quad[data-quad="wt"] {
  --quad-color: var(--cat-recruit);
}

.c-fw-cross__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--quad-color, var(--brand-600));
}

.c-fw-cross__name {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: 0.2em;
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

/* この象限で何をするか。組み合わせの読み方がこれで決まる */
.c-fw-cross__name span {
  padding: 0.15em 0.6em;
  background: var(--quad-color, var(--brand-600));
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
}

.c-fw-cross__hint {
  margin-top: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-fw-cross__list {
  display: grid;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
}

/* 掛け合わせた2つを「×」で並べる。文をつなげず、素材のまま見せる */
.c-fw-cross__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: var(--sp-2);
  align-items: center;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-900);
}

.c-fw-cross__list b {
  font-size: var(--fs-xs);
  color: var(--quad-color, var(--brand-600));
}

.c-fw-cross__more {
  margin-top: var(--sp-3);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* --- 重なりを探す（3C・5C）--------------------------------------------------- */
.c-fw-overlap {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--brand-600);
  background: var(--bg-soft);
}

.c-fw-overlap__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-fw-overlap__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-fw-overlap__list {
  display: grid;
  gap: var(--sp-3);
  counter-reset: ov;
  margin-top: var(--sp-4);
}

.c-fw-overlap__list li {
  position: relative;
  padding: var(--sp-3) var(--sp-4) var(--sp-3) 3em;
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-900);
  counter-increment: ov;
}

.c-fw-overlap__list li::before {
  content: counter(ov);
  position: absolute;
  left: var(--sp-4);
  font-weight: 700;
  color: var(--brand-600);
}

.c-fw-overlap__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 点検 -------------------------------------------------------------------- */
.c-fw-notes {
  display: grid;
  gap: var(--sp-2);
}

.c-fw-notes__item {
  padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--line-strong);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-fw-notes__item.is-warn {
  border-left-color: var(--accent-500);
  background: var(--accent-050);
  color: var(--ink-900);
}

.c-fw-notes__item.is-ok {
  border-left-color: var(--cat-solution);
}

/* --- 関連記事 ---------------------------------------------------------------- */
.c-fw-related {
  display: grid;
  gap: var(--sp-2);
}

.c-fw-related li {
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--surface);
}

.c-fw-related a {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--brand-600);
}

.c-fw-related__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

/* --- 結果の操作 -------------------------------------------------------------- */
.c-fw-out__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--line);
}

.c-fw-out__copied {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cat-solution);
}

.c-fw-cta {
  margin-top: var(--sp-6);
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-500);
  background: var(--bg-soft);
}

.c-fw-cta__title {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
}

.c-fw-cta__text {
  margin-block: var(--sp-2) var(--sp-4);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* ===========================================================================
   印刷
   ---------------------------------------------------------------------------
   会議に持っていく用。結果だけを残し、サイトの装飾は落とす。
   =========================================================================== */

@media print {
  .c-header,
  .c-footer,
  .c-breadcrumb,
  .c-page-head,
  .c-sim-tabs,
  .c-fw__head,
  .c-fw__howto,
  .c-fw-grid,
  .c-fw__actions,
  .c-fw-out__actions,
  .c-fw-cta,
  .c-chat,
  .c-to-top,
  .c-cta-dl,
  .c-cta-split,
  .l-section--soft {
    display: none !important;
  }

  .c-fw-out {
    margin: 0;
    padding: 0;
    border: none;
  }

  .c-fw-cross,
  .c-fw-out__row {
    break-inside: avoid;
  }

  .c-fw-out__h4 {
    break-after: avoid;
  }

  body {
    background: #fff;
  }
}

/* --- source: mock-source/src/styles/components/_rail.css --- */
/* ===========================================================================
   TOPページ右側の追従枠
   ---------------------------------------------------------------------------
   経営用語集とEラーニングは、記事とは性質の違う「引く／学ぶ」コンテンツで、
   下までスクロールしないと存在に気づけない。
   そこでトップの主要セクションの横に、スクロールしても付いてくる枠を置く。

   記事詳細ページには既存のサイドバー（人気記事・新着・追従目次）があるので、
   この枠は置かない。TOPページ専用。

   1000px 未満では2カラムを解いて、枠は本文の下に流す。
   =========================================================================== */

.l-top {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  align-items: start;
}

@media (min-width: 1000px) {
  .l-top {
    grid-template-columns: minmax(0, 1fr) var(--rail-w);
    gap: var(--sp-10);
  }
}

/* 追従させる本体。上端はヘッダーの下に合わせる */
.c-rail {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* 参考サイトと同じく、本文が流れても右カラムはその場に留まる。
   ただし fixed ではなく sticky にしている。
   fixed だとフッターまで来ても付いてきて重なるが、
   sticky なら親（.l-top）の終わりで自然に止まる。

   追従の基準位置（top）は rail.js が決める。
     ・枠が画面に収まる  → ヘッダーの下に貼りつく
     ・枠のほうが長い    → 下端が画面の底に来る位置に貼りつく
   高さで切って枠内スクロールにすると、中身が見切れていることに
   気づかれないまま終わってしまうため、切らずに全部見せる。 */
@media (min-width: 1000px) {
  .c-rail {
    position: sticky;
    top: var(--rail-top, calc(var(--header-h-pc) + 45px + var(--sp-5)));
  }
}

/* --- 枠ひとつ ---------------------------------------------------------------- */
/* 枠線で囲わず、面と余白で区切る。
   罫線で全部を囲うと、本文の横に「表」が並んでいるように見えてしまう。 */
.c-rail__block {
  /* 縮ませない。
     .c-rail は縦のflexなので、既定では中身が入りきらないとき
     各ブロックが押し縮められる。overflow:hidden と重なると、
     ブロックの中身が黙って切れてしまう。 */
  flex: none;
  border-radius: var(--radius-lg);
  background: var(--bg-soft);
  overflow: hidden;
}

.c-rail__head {
  padding: var(--sp-4);
}

/* 見出しの頭に色の縦棒を置いて、どの種類の枠かを示す */
.c-rail__label {
  position: relative;
  display: block;
  padding-left: var(--sp-3);
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--rail-color, var(--brand-600));
}

.c-rail__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1em;
  bottom: 0.1em;
  width: 4px;
  border-radius: var(--radius-pill);
  background: var(--rail-color, var(--brand-600));
}

.c-rail__title {
  margin-top: var(--sp-1);
  font-size: var(--fs-md);
  color: var(--ink-900);
}

.c-rail__text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
  color: var(--ink-500);
}

.c-rail__body {
  padding: 0 var(--sp-4) var(--sp-4);
}

.c-rail__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  padding: var(--sp-4);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--rail-color, var(--brand-600));
  text-decoration: none;
}

.c-rail__foot::after {
  content: "›";
  font-size: var(--fs-lg);
  line-height: 1;
}

.c-rail__foot:hover {
  background: var(--bg-sunken);
  text-decoration: underline;
}

/* 枠の中のリスト面。囲みをやめたぶん、面の色で内と外を分ける */
.c-rail-sim__menu,
.c-rail-terms,
.c-rail__body > div {
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
}

.c-rail-sim__menu {
  border: none;
}

/* --- シミュレーターの枠 ------------------------------------------------------
   枠の中で計算までさせず、専用ページへ送る。
   狭い枠に入力欄を詰め込むと使いづらいため。 */
.c-rail__block--sim {
  --rail-color: var(--accent-500);
}

/* 3種類あるので、ボタンを並べるより一覧にしたほうが選びやすい */
.c-rail-sim__menu {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
}

.c-rail-sim__menu li + li {
  border-top: 1px solid var(--line);
}

.c-rail-sim__menu a {
  display: flex;
  flex-direction: column;
  gap: 0.1em;
  padding: var(--sp-3) var(--sp-8) var(--sp-3) var(--sp-3);
  position: relative;
  text-decoration: none;
  transition: background var(--dur) var(--ease);
}

.c-rail-sim__menu a::after {
  content: "›";
  position: absolute;
  top: 50%;
  right: var(--sp-3);
  translate: 0 -55%;
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--accent-500);
}

.c-rail-sim__menu a:hover {
  background: var(--accent-050);
}

.c-rail-sim__menu b {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-rail-sim__menu a:hover b {
  color: var(--accent-600);
}

.c-rail-sim__menu span {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-rail-sim__items li {
  padding: 0.1em 0.5em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-rail-sim__note {
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
  text-align: center;
}

/* --- セミナーの枠 ------------------------------------------------------------
   日付が主役。枠が狭いので、サムネは出さず日時とタイトルだけにする。 */
.c-rail__block--seminar {
  --rail-color: var(--cat-money);
}

.c-rail-sem {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.c-rail-sem:first-child {
  border-top: none;
}

.c-rail-sem:hover {
  background: var(--bg-soft);
}

.c-rail-sem__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-rail-sem__date {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--cat-money);
  font-variant-numeric: tabular-nums;
}

.c-rail-sem__left {
  padding: 0.1em 0.45em;
  background: var(--accent-050);
  font-weight: 700;
  color: var(--accent-600);
}

.c-rail-sem__title {
  display: block;
  margin-top: 0.25em;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-rail-sem:hover .c-rail-sem__title {
  color: var(--brand-600);
}

/* --- 用語集の枠 -------------------------------------------------------------- */
.c-rail__block--glossary {
  --rail-color: var(--brand-600);
}

/* 枠の中の検索窓 */
.c-rail-search {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}

.c-rail-search:focus-within {
  border-color: var(--brand-600);
}

.c-rail-search svg {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--ink-500);
}

.c-rail-search input {
  flex: 1 1 auto;
  min-width: 0;
  height: 38px;
  border: none;
  background: transparent;
  font-size: var(--fs-sm);
  color: var(--ink-900);
}

.c-rail-search input:focus {
  outline: none;
}

/* 検索結果／ピックアップ用語 */
.c-rail-terms {
  display: flex;
  flex-direction: column;
  margin-top: var(--sp-3);
}

.c-rail-term {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.c-rail-term:first-child {
  border-top: none;
}

.c-rail-term:hover {
  background: var(--bg-soft);
}

.c-rail-term__name {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-rail-term:hover .c-rail-term__name {
  color: var(--brand-600);
}

.c-rail-term__meaning {
  display: block;
  margin-top: 0.15em;
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-rail-empty {
  padding: var(--sp-4) var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
  text-align: center;
}

/* --- Eラーニングの枠 --------------------------------------------------------- */
.c-rail__block--learning {
  --rail-color: var(--cat-dx);
}

.c-rail-course {
  display: block;
  padding: var(--sp-3) var(--sp-2);
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.c-rail-course:first-child {
  border-top: none;
}

.c-rail-course:hover {
  background: var(--bg-soft);
}

.c-rail-course__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-rail-course__genre {
  font-weight: 700;
  color: var(--cat-dx);
}

.c-rail-course__title {
  display: block;
  margin-top: 0.2em;
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
}

.c-rail-course:hover .c-rail-course__title {
  color: var(--brand-600);
}

/* 会員限定であることの表示 */
.c-rail__member {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--sp-3);
  padding: 0.2em 0.6em;
  background: var(--bg-sunken);
  font-size: var(--fs-2xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-rail__member svg {
  width: 12px;
  height: 12px;
}

/* --- source: mock-source/src/styles/components/_simulator.css --- */
/* ===========================================================================
   コスト削減シミュレーター（参考：KING OF TIME のコスト削減シミュレーター）
   ---------------------------------------------------------------------------
   ステップ式ではなく1画面完結。TOPと記事内の両方に置くので、
   親要素の幅に合わせて畳めるようにしている。

   費目の入力欄は既定で閉じておく。6つ全部を開いて出すと入力量が多く見えて、
   その場で離脱されるため。
   =========================================================================== */

.c-sim {
  display: block;
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-500);
  background: var(--surface);
}

/* シミュレーターのページは、入力に集中できるよう幅を絞る */
.l-container--sim {
  max-width: 860px;
}

/* ページ見出しの色をシミュレーターのアクセントに合わせる */
.c-page-head--sim {
  --page-head-color: var(--accent-500);
}

.c-sim__inner {
  padding: var(--sp-6) var(--sp-5);
}

@media (min-width: 720px) {
  .c-sim__inner {
    padding: var(--sp-8);
  }
}

/* --- 見出し ---------------------------------------------------------------- */
.c-sim__head {
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.c-sim__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-500);
}

.c-sim__title {
  margin-top: var(--sp-1);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sim__desc {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- セクション ------------------------------------------------------------ */
.c-sim__section {
  padding-block: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.c-sim__section-title {
  margin-bottom: var(--sp-4);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--accent-500);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sim__hint-text {
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* --- 従業員数 -------------------------------------------------------------- */
.c-sim__emp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-3);
}

.c-sim__emp-label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-sim__emp-value {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--ink-700);
}

.c-sim__emp-value input {
  width: 5em;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-sim__emp-value input:focus {
  outline: none;
  border-color: var(--accent-500);
}

/* スライダー。見た目をブラウザ既定に任せると浮くので最低限だけ整える */
.c-sim__range {
  width: 100%;
  margin-bottom: var(--sp-3);
  accent-color: var(--accent-500);
}

.c-sim__presets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}

.c-sim__preset {
  min-height: 34px;
  padding: 0.2em 0.9em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.c-sim__preset:hover {
  border-color: var(--accent-500);
  color: var(--accent-600);
}

.c-sim__preset[aria-pressed="true"] {
  border-color: var(--accent-500);
  background: var(--accent-500);
  color: #fff;
}

/* --- 費目 ------------------------------------------------------------------ */
.c-sim-items {
  border-top: 1px solid var(--line);
}

.c-sim-item {
  border-bottom: 1px solid var(--line);
}

.c-sim-item__toggle {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  padding: var(--sp-4) var(--sp-2);
  background: transparent;
  text-align: left;
}

.c-sim-item__toggle:hover {
  background: var(--bg-soft);
}

/* チェック。色だけに頼らず、形でも選択状態が分かるようにする */
.c-sim-item__check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  position: relative;
}

.c-sim-item.is-on .c-sim-item__check {
  border-color: var(--accent-500);
  background: var(--accent-500);
}

.c-sim-item.is-on .c-sim-item__check::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 6px;
  height: 11px;
  border-right: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(45deg);
}

.c-sim-item__name {
  display: block;
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sim-item__note {
  display: block;
  margin-top: 0.15em;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-sim-item__rate {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --- 費目を開いたときの中身 ------------------------------------------------ */
.c-sim-item__panel {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: 1fr;
  padding: 0 var(--sp-2) var(--sp-5) calc(22px + var(--sp-3) + var(--sp-2));
}

@media (min-width: 640px) {
  .c-sim-item__panel {
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: var(--sp-6);
  }
}

.c-sim-item__field label {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-sim-item__input {
  display: inline-flex;
  align-items: baseline;
  gap: var(--sp-2);
}

.c-sim-item__input input {
  width: 100%;
  max-width: 9em;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-sim-item__input input:focus {
  outline: none;
  border-color: var(--accent-500);
}

.c-sim-item__input span {
  flex: none;
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-sim-item__examples-title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-sim-item__examples ul {
  display: grid;
  gap: var(--sp-1);
}

.c-sim-item__examples li {
  position: relative;
  padding-left: 1.3em;
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-sim-item__examples li::before {
  content: "";
  position: absolute;
  left: 0.1em;
  top: 0.55em;
  width: 0.45em;
  height: 0.25em;
  border-left: 2px solid var(--accent-500);
  border-bottom: 2px solid var(--accent-500);
  transform: rotate(-45deg);
}

/* --- 選択肢（見直し時期）--------------------------------------------------- */
.c-sim__options {
  display: grid;
  gap: var(--sp-2);
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .c-sim__options {
    grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
  }
}

.c-sim__opt {
  display: flex;
  align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  text-align: left;
  transition:
    border-color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.c-sim__opt:hover,
.c-sim__opt[aria-pressed="true"] {
  border-color: var(--accent-500);
  border-left-color: var(--accent-500);
  background: var(--accent-050);
}

.c-sim__opt[aria-pressed="true"] .c-sim__opt-name::before {
  content: "✓ ";
  color: var(--accent-500);
}

.c-sim__opt-name {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

/* --- 計算ボタン ------------------------------------------------------------ */
.c-sim__submit {
  padding-top: var(--sp-6);
  text-align: center;
}

.c-sim__submit .c-btn {
  width: 100%;
  max-width: 420px;
  min-height: 56px;
  font-size: var(--fs-md);
}

/* --- 結果 ------------------------------------------------------------------ */
.c-sim__result {
  margin-top: var(--sp-8);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--accent-500);
  background: var(--accent-050);
  text-align: center;
}

.c-sim__result:focus {
  outline: none;
}

@media (min-width: 720px) {
  .c-sim__result {
    padding: var(--sp-8);
  }
}

.c-sim__result-label {
  display: inline-block;
  margin-bottom: var(--sp-4);
  padding: 0.2em 0.8em;
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.1em;
}

.c-sim__result-lead {
  font-size: var(--fs-md);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-sim__result-lead b {
  color: var(--accent-600);
}

/* 削減額。ここだけ大きく見せる */
.c-sim__rate {
  margin-block: var(--sp-2);
  color: var(--accent-600);
  font-variant-numeric: tabular-nums;
}

.c-sim__rate b {
  font-size: clamp(1.875rem, 1.2rem + 3.4vw, 3.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.c-sim__figures {
  display: grid;
  gap: 1px;
  grid-template-columns: 1fr;
  margin-top: var(--sp-6);
  background: var(--line);
  border: 1px solid var(--line);
  text-align: left;
}

@media (min-width: 560px) {
  .c-sim__figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.c-sim__figures > div {
  padding: var(--sp-4);
  background: var(--surface);
}

.c-sim__figures dt {
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
}

.c-sim__figures dd {
  margin: var(--sp-1) 0 0;
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* --- 内訳 ------------------------------------------------------------------ */
.c-sim__breakdown {
  width: 100%;
  margin-top: var(--sp-4);
  border: 1px solid var(--line);
  border-collapse: collapse;
  background: var(--surface);
  text-align: left;
}

.c-sim__breakdown caption {
  padding-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--ink-500);
  text-align: left;
}

.c-sim__breakdown th,
.c-sim__breakdown td {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}

.c-sim__breakdown th {
  font-weight: 700;
  color: var(--ink-900);
  white-space: nowrap;
}

.c-sim__breakdown td {
  color: var(--ink-700);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.c-sim__breakdown tr:last-child th,
.c-sim__breakdown tr:last-child td {
  border-bottom: none;
}

/* 前提を書いた注記。結果と同じ画面に必ず出す */
.c-sim__note {
  margin-top: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border-left: 3px solid var(--line-strong);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
  text-align: left;
}

.c-sim__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}

.c-sim__cta .c-btn--accent {
  width: 100%;
  max-width: 520px;
  min-height: 60px;
  font-size: var(--fs-md);
  line-height: 1.5;
  white-space: normal;
}

.c-sim__cta-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

/* ===========================================================================
   シミュレーターの切り替えタブ
   ---------------------------------------------------------------------------
   2種類を同時に出すと入力量が多く見えて手が止まるので、片方ずつ表示する。
   選択中は塗りにして、どちらを見ているかを一目で分かるようにする。
   =========================================================================== */

.c-sim-tabs {
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}

.c-sim-tabs__list {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line);
  border-inline: 1px solid var(--line);
}

/* 狭い画面では補足文まで入れると潰れるので、名前だけにする */
@media (max-width: 559px) {
  .c-sim-tabs__note {
    display: none;
  }

  .c-sim-tabs__tab {
    padding-inline: var(--sp-2);
  }

  .c-sim-tabs__name {
    font-size: var(--fs-sm);
  }
}

.c-sim-tabs__tab {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: var(--sp-4) var(--sp-3);
  background: var(--surface);
  border-top: 3px solid transparent;
  text-align: center;
  transition:
    background var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.c-sim-tabs__tab:hover {
  background: var(--accent-050);
}

.c-sim-tabs__tab[aria-selected="true"] {
  border-top-color: var(--accent-500);
  background: var(--surface);
}

/* 選択中を色以外でも示す */
.c-sim-tabs__tab[aria-selected="true"] .c-sim-tabs__name {
  color: var(--accent-600);
}

.c-sim-tabs__tab[aria-selected="false"] {
  background: var(--bg-sunken);
}

.c-sim-tabs__name {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sim-tabs__note {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ===========================================================================
   補助金・助成金の結果
   =========================================================================== */

.c-sub__cond {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-sub__list {
  display: grid;
  gap: var(--sp-3);
  margin-top: var(--sp-6);
  text-align: left;
}

.c-sub__item {
  padding: var(--sp-5);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-500);
  background: var(--surface);
}

.c-sub__item-head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
}

.c-sub__kind {
  flex: none;
  padding: 0.15em 0.6em;
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.c-sub__kind--ho {
  background: var(--cat-money-bg);
  color: var(--cat-money);
}

.c-sub__kind--jo {
  background: var(--cat-recruit-bg);
  color: var(--cat-recruit);
}

.c-sub__name {
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sub__authority {
  margin-top: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-sub__summary {
  margin-top: var(--sp-3);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-sub__target {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
  font-size: var(--fs-xs);
  color: var(--ink-700);
}

.c-sub__target span {
  flex: none;
  font-weight: 700;
  color: var(--ink-500);
}

/* やりたいことは項目が長いので、幅を広めに取る */
.c-sim__options--wide {
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .c-sim__options--wide {
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  }
}

.c-sim__options--wide .c-sim__opt {
  flex-direction: column;
  align-items: flex-start;
}

/* ===========================================================================
   HP制作見積
   =========================================================================== */

.c-est__tax {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-est__vague {
  display: inline-block;
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-sim__breakdown .c-est__total th,
.c-sim__breakdown .c-est__total td {
  border-top: 2px solid var(--ink-900);
  color: var(--ink-900);
  font-weight: 700;
}

/* --- 相場との対比から相談へ ------------------------------------------------ */
.c-est__pitch {
  margin-top: var(--sp-6);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--accent-500);
  background: var(--surface);
}

@media (min-width: 720px) {
  .c-est__pitch {
    padding: var(--sp-8);
  }
}

.c-est__pitch-head {
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--accent-600);
}

@media (min-width: 720px) {
  .c-est__pitch-head {
    font-size: var(--fs-xl);
  }
}

.c-est__pitch-sub {
  margin: var(--sp-3) 0 var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-est__pitch .c-btn--accent {
  width: 100%;
  max-width: 460px;
  min-height: 58px;
  font-size: var(--fs-md);
  line-height: 1.5;
  white-space: normal;
}

.c-est__pitch-note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* ===========================================================================
   試算の考え方（シミュレーターページ）
   ---------------------------------------------------------------------------
   根拠の分からない試算は使われないので、計算の考え方を同じページに書いておく。
   =========================================================================== */

.c-sim-about {
  border-top: 1px solid var(--line);
}

.c-sim-about__item {
  padding-block: var(--sp-5);
  border-bottom: 1px solid var(--line);
}

.c-sim-about__q {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sim-about__a {
  margin-top: var(--sp-2);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink-700);
}

/* ===========================================================================
   記事本文からシミュレーターへ送るCTA
   ---------------------------------------------------------------------------
   本文に計算機ごと埋めると記事が長くなるので、ここはボタンだけ置く。
   本文中の相談CTA（青）と役割が違うので、色で見分けられるようにしている。
   =========================================================================== */

.c-sim-cta {
  margin-block: var(--sp-10);
  padding: var(--sp-6) var(--sp-5);
  border: 1px solid var(--accent-500);
  border-left-width: 4px;
  background: var(--accent-050);
  text-align: center;
}

@media (min-width: 720px) {
  .c-sim-cta {
    padding: var(--sp-8) var(--sp-6);
  }
}

.c-sim-cta__label {
  font-size: var(--fs-2xs);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--accent-600);
}

.c-sim-cta__title {
  margin-top: var(--sp-1);
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--ink-900);
  line-height: var(--lh-snug);
}

.c-sim-cta__text {
  max-width: 34em;
  margin: var(--sp-3) auto var(--sp-5);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-sim-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
}

/* 本文リンクの色指定に負けないよう、ボタンは個別に上書きする。
   .c-sim-cta .c-btn* (「.c-prose 」なし) は、記事末尾に固定表示される
   シミュレーターCTA（inc/column-sections.php の
   chikara_column_render_simulator_cta()）用 — .c-prose の外側に置かれる
   ため、既存の本文埋め込み用ルールとは別に追加している。 */
.c-prose .c-sim-cta .c-btn,
.c-sim-cta .c-btn {
  min-height: 52px;
  padding-inline: var(--sp-6);
  text-decoration: none;
}

.c-prose .c-sim-cta .c-btn--accent,
.c-sim-cta .c-btn--accent {
  color: #fff;
}

.c-prose .c-sim-cta .c-btn--outline,
.c-sim-cta .c-btn--outline {
  color: var(--ink-900);
  background: var(--surface);
}

.c-sim-cta__note {
  margin-top: var(--sp-3);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- source: mock-source/src/styles/components/_chat.css --- */
/* ===========================================================================
   サイト内アシスタント（チャット）
   ---------------------------------------------------------------------------
   全ページの右下に常駐する。
   「トップへ戻る」ボタンと同じ角に出るので、そちらを上へ逃がしている。

   SPでは画面いっぱいのシートにする。狭い画面で小さな吹き出しに文字を詰めると読めないため。
   =========================================================================== */

.c-chat {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: calc(var(--z-header) + 20);
}

@media (min-width: 900px) {
  .c-chat {
    right: var(--sp-6);
    bottom: var(--sp-6);
  }
}

/* チャットが常駐するぶん、トップへ戻るボタンを上にずらす */
.c-to-top {
  bottom: calc(var(--sp-4) + 72px);
}

@media (min-width: 900px) {
  .c-to-top {
    bottom: calc(var(--sp-6) + 76px);
  }
}

/* --- 起動ボタン ------------------------------------------------------------
   ページの中で唯一の赤い要素にして、白基調の紙面から浮かせる。
   紺のボタン（ヘッダーの会員登録・記事内のCTA）と色を分けることで、
   「読む導線」と「聞く導線」が競合しないようにしている。 */
.c-chat__launcher {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  min-height: 60px;
  padding: 0 var(--sp-5) 0 var(--sp-3);
  border-radius: var(--radius-md);
  background: var(--accent-500);
  color: #fff;
  font-size: var(--fs-md);
  font-weight: 700;
  box-shadow: 0 10px 28px rgb(217 35 0 / 28%);
  transition:
    background var(--dur) var(--ease),
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease);
}

/* アイコンは白い丸に載せて、遠目にも「話しかけられる場所」だと分かるようにする */
.c-chat__launcher-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: 50%;
  background: rgb(255 255 255 / 18%);
}

.c-chat__launcher svg {
  width: 22px;
  height: 22px;
  flex: none;
}

.c-chat__launcher-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
}

.c-chat__launcher-text small {
  font-size: var(--fs-2xs);
  font-weight: 500;
  opacity: 0.85;
}

.c-chat__launcher:hover {
  background: var(--accent-600);
  box-shadow: 0 12px 32px rgb(217 35 0 / 36%);
}

.c-chat__launcher:active {
  transform: translateY(1px);
}

/* 最初の数秒だけ波紋を出す。ずっと動かすと読書の邪魔になるので3回で止める */
.c-chat__launcher::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid var(--accent-500);
  animation: chat-ping 2.4s var(--ease) 3;
  pointer-events: none;
}

@keyframes chat-ping {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }
  70%,
  100% {
    opacity: 0;
    transform: scale(1.18);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-chat__launcher::before {
    animation: none;
  }
}

/* --- 吹き出し（初回のみ）---------------------------------------------------
   ボタンがあることに気づいてもらうための一言。
   閉じたらそのセッション中は出さない。 */
.c-chat__teaser {
  position: absolute;
  right: 0;
  bottom: calc(100% + var(--sp-3));
  width: min(280px, calc(100vw - var(--sp-8)));
  padding: var(--sp-4);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-500);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  text-align: left;
  animation: chat-teaser-in var(--dur) var(--ease);
}

@keyframes chat-teaser-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .c-chat__teaser {
    animation: none;
  }
}

.c-chat__teaser-title {
  font-size: var(--fs-base);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--ink-900);
  padding-right: var(--sp-5);
}

.c-chat__teaser-text {
  margin-top: var(--sp-2);
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
}

.c-chat__teaser-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  color: var(--ink-500);
}

.c-chat__teaser-close svg {
  width: 14px;
  height: 14px;
}

.c-chat__teaser-close:hover {
  color: var(--ink-900);
}

/* 吹き出しの下端につける三角。ボタンとの関係を示す */
.c-chat__teaser::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 28px;
  border: 7px solid transparent;
  border-top-color: var(--surface);
  filter: drop-shadow(0 1px 0 var(--line));
}

.c-chat.is-open .c-chat__teaser {
  display: none;
}

/* パネルを開いている間は、起動ボタンを隠して重なりを避ける */
.c-chat.is-open .c-chat__launcher {
  display: none;
}

@media (min-width: 700px) {
  .c-chat.is-open .c-chat__launcher {
    display: inline-flex;
  }
}

/* --- パネル ---------------------------------------------------------------- */
.c-chat__panel {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-lg);
}

@media (min-width: 700px) {
  .c-chat__panel {
    position: absolute;
    inset: auto 0 calc(60px + var(--sp-3)) auto;
    width: 372px;
    height: min(560px, calc(100vh - 160px));
    border-top: 3px solid var(--brand-600);
  }
}

.c-chat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
  /* AUN revision: .c-chat__panel is a flex column with a capped total
     height (height: min(560px, ...)). None of its chrome children
     (.c-chat__head, .c-chat__quick, .c-chat__form, .c-chat__note) had
     flex-shrink set, so once the conversation grew past a couple of
     messages the flex algorithm shrank ALL of them to make room —
     confirmed by measuring every quick-reply pill's real
     getBoundingClientRect().height: 32.53px before any message, 21.42px
     after just one exchange, identically across all four pills (not only
     the one clicked) — with computed padding/border/line-height
     unchanged, meaning each pill's own box was being compressed below
     what its own declared box model asked for. flex-shrink: 0 here (and
     on the other three chrome elements below) fixes the actual root
     cause: only .c-chat__log, which already has overflow-y: auto and is
     the one element meant to absorb height pressure, should ever shrink.
  */
  flex-shrink: 0;
}

.c-chat__title {
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.4;
}

.c-chat__sub-title {
  margin-top: 2px;
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* --- 会話 ------------------------------------------------------------------ */
.c-chat__log {
  flex: 1 1 auto;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-chat__msg {
  display: flex;
}

.c-chat__msg--user {
  justify-content: flex-end;
}

.c-chat__bubble {
  max-width: 88%;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  background: var(--bg-soft);
  font-size: var(--fs-base);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

.c-chat__msg--user .c-chat__bubble {
  border-color: var(--brand-600);
  background: var(--brand-600);
  color: #fff;
}

.c-chat__bubble p + p {
  margin-top: var(--sp-2);
}

.c-chat__bubble b {
  color: var(--ink-900);
}

.c-chat__sub {
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

/* 記事の候補 */
.c-chat__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.c-chat__list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.c-chat__list span {
  font-size: var(--fs-2xs);
  color: var(--ink-500);
}

.c-chat__link {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  line-height: var(--lh-snug);
}

/* --- 返答に付く導線 -------------------------------------------------------- */
.c-chat__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--line);
}

.c-chat__action {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.35em 0.8em;
  border: 1px solid var(--brand-600);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-xs);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: none;
}

.c-chat__action::after {
  content: "›";
  font-size: var(--fs-base);
  line-height: 1;
}

.c-chat__action:hover {
  background: var(--brand-600);
  color: #fff;
}

/* --- よくある質問 ---------------------------------------------------------- */
.c-chat__quick {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
  /* This row's real bug (AUN revision): .c-chat__panel is a flex column
     with a capped total height, and NONE of its chrome children had
     flex-shrink set — so once the conversation grew past a couple of
     messages, the flex algorithm shrank every pill uniformly (measured:
     32.53px natural height → 21.42px after just one exchange, identical
     across all four pills, not only the clicked one). flex-shrink: 0
     here — and the same on .c-chat__head/.c-chat__form/.c-chat__note
     below — fixes that: only .c-chat__log (overflow-y: auto already) is
     meant to absorb height pressure, by scrolling.
     The edge fade (kept, still correct on its own terms) only ever
     addressed the DIFFERENT, real "last pill partially cut off"
     horizontal-clipping issue — not this vertical one. */
  flex-shrink: 0;
  mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--sp-6),
    #000 calc(100% - var(--sp-6)),
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    #000 var(--sp-6),
    #000 calc(100% - var(--sp-6)),
    transparent
  );
}

.c-chat__quick::-webkit-scrollbar {
  display: none;
}

.c-chat__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* Explicit floor, not just a side-effect of padding + line-height, so
     no future change up the cascade can silently make one pill taller
     than another — every pill's own height now comes from THIS rule
     alone. Matches the box model already in use (line-height 1 ×
     font-size 13px + padding 3.9px top/bottom + border 1px top/bottom =
     ~29.6px content box; min-height gives a small, deliberate margin
     above that floor rather than pinning it exactly, so slightly taller
     script in a browser's own font rendering still fits without
     clipping). */
  min-height: 33px;
  padding: 0.3em 0.8em;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: var(--fs-xs);
  line-height: 1;
  color: var(--ink-700);
  white-space: nowrap;
  vertical-align: middle;
}

.c-chat__chip:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
  background: var(--brand-050);
}

/* --- 入力 ------------------------------------------------------------------ */
.c-chat__form {
  display: flex;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid var(--line);
  flex-shrink: 0; /* see .c-chat__quick's own comment above */
}

.c-chat__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-base);
  color: var(--ink-900);
}

.c-chat__input:focus {
  outline: none;
  border-color: var(--brand-600);
}

.c-chat__send {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  background: var(--brand-600);
  color: #fff;
}

.c-chat__send svg {
  width: 20px;
  height: 20px;
}

.c-chat__send:hover {
  background: var(--brand-700);
}

/* --- 注記 ------------------------------------------------------------------
   何に答えられて何に答えられないかを、最初から書いておく。 */
.c-chat__note {
  padding: 0 var(--sp-4) var(--sp-4);
  font-size: var(--fs-2xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
  flex-shrink: 0; /* see .c-chat__quick's own comment above */
}

/* --- source: mock-source/src/styles/components/_toc.css --- */
/* ===========================================================================
   目次（本文内の折りたたみ ＋ サイドバーの追従版）
   ---------------------------------------------------------------------------
   現行は本文内とサイドバーに同じ目次が2つあり、どちらも現在地が分からない。
   ここでは本文内＝全体像の把握、サイドバー＝現在地の表示、と役割を分ける。
   =========================================================================== */

/* --- 本文内の目次 ---------------------------------------------------------- */
.c-toc {
  margin-bottom: var(--sp-10);
  border: 1px solid var(--line);
  background: var(--surface);
  overflow: hidden;
}

.c-toc__head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-4) var(--sp-5);
  background: var(--bg-soft);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-toc__head svg {
  width: 18px;
  height: 18px;
  color: var(--brand-600);
}

.c-toc__body {
  padding: var(--sp-4) var(--sp-5);
}

.c-toc__list {
  counter-reset: toc;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.c-toc__link {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--ink-700);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.c-toc__link::before {
  counter-increment: toc;
  content: counter(toc);
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 0.15em;
  background: var(--brand-600);
  color: #fff;
  font-size: var(--fs-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.c-toc__link:hover {
  color: var(--brand-600);
}

/* h3 レベルの項目。番号を振らず、ぶら下げて表示する */
.c-toc__item--sub {
  margin-left: calc(22px + var(--sp-3));
}

.c-toc__item--sub .c-toc__link {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-toc__item--sub .c-toc__link::before {
  counter-increment: none;
  content: "";
  width: 6px;
  height: 1px;
  margin-top: 0.85em;
  border-radius: 0;
  background: var(--line-strong);
}

/* --- サイドバーの追従目次 -------------------------------------------------- */
.c-toc-follow {
  border-left: 2px solid var(--line);
  padding-left: var(--sp-4);
  max-height: calc(100vh - var(--header-h-pc) - var(--sp-16));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.c-toc-follow__title {
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-500);
}

.c-toc-follow__link {
  display: block;
  padding: var(--sp-2) 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--ink-500);
  text-decoration: none;
  border-left: 2px solid transparent;
  margin-left: calc(var(--sp-4) * -1 - 2px);
  padding-left: var(--sp-4);
  transition:
    color var(--dur) var(--ease),
    border-color var(--dur) var(--ease);
}

.c-toc-follow__link:hover {
  color: var(--ink-900);
}

/* スクロール位置に応じて JS が付ける現在地マーカー */
.c-toc-follow__link.is-current {
  color: var(--brand-600);
  font-weight: 700;
  border-left-color: var(--brand-600);
}

/* --- 読了プログレスバー（ヘッダー下端に張り付く）-------------------------- */
.c-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 3px;
  width: 100%;
  background: transparent;
  pointer-events: none;
}

.c-progress__bar {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--brand-700));
  transform-origin: left;
  transition: width 80ms linear;
}

/* --- source: mock-source/src/styles/components/_misc.css --- */
/* ===========================================================================
   パンくず / 絞り込みバー / ページネーション / トップへ戻る / サイドバー枠
   =========================================================================== */

/* --- パンくず -------------------------------------------------------------- */
.c-breadcrumb {
  padding-block: var(--sp-4);
  font-size: var(--fs-xs);
  color: var(--ink-500);
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-2);
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-width: 0;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  content: "";
  width: 0.4em;
  height: 0.4em;
  border-top: 1px solid var(--ink-400);
  border-right: 1px solid var(--ink-400);
  transform: rotate(45deg);
}

.c-breadcrumb a {
  color: var(--ink-500);
  text-decoration: none;
}

.c-breadcrumb a:hover {
  color: var(--brand-600);
  text-decoration: underline;
}

.c-breadcrumb [aria-current="page"] {
  color: var(--ink-900);
  font-weight: 700;
  /* 長い記事タイトルで折り返しが暴れないよう1行に収める */
  max-width: min(28em, 100%);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- ページ見出し（カテゴリ一覧などの下層ページ）--------------------------
   背景は塗らない。カテゴリの色は上辺の帯と英字ラベルだけで示す。 */
.c-page-head {
  padding-block: var(--sp-6) var(--sp-8);
  border-top: 3px solid var(--page-head-color, var(--brand-600));
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}

.c-page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--page-head-color, var(--brand-600));
  text-transform: uppercase;
}

.c-page-head__title {
  font-size: var(--fs-3xl);
  margin-bottom: var(--sp-3);
}

.c-page-head__lead {
  max-width: 46em;
  font-size: var(--fs-base);
  color: var(--ink-500);
}

.c-page-head__count {
  margin-top: var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-page-head__count b {
  font-size: var(--fs-lg);
  color: var(--page-head-color, var(--brand-600));
  font-variant-numeric: tabular-nums;
}

/* --- 絞り込みバー ---------------------------------------------------------
   業種チップ＋並び替え。現行にはない機能で、記事数が増えても辿り着けるようにする。 */
.c-filter {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding-block: var(--sp-6);
  margin-bottom: var(--sp-6);
  border-bottom: 1px solid var(--line);
}

.c-filter__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.c-filter__label {
  flex: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-900);
}

.c-filter__spacer {
  flex: 1 1 auto;
}

.c-filter__select {
  height: 38px;
  padding: 0 var(--sp-8) 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  background: var(--surface)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236b7480' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
    no-repeat right var(--sp-3) center / 12px 8px;
  font-size: var(--fs-sm);
  color: var(--ink-900);
  appearance: none;
  cursor: pointer;
}

.c-filter__result {
  font-size: var(--fs-sm);
  color: var(--ink-500);
}

.c-filter__result b {
  color: var(--ink-900);
  font-variant-numeric: tabular-nums;
}

/* 絞り込みで0件になったときの表示 */
.c-empty {
  padding: var(--sp-16) var(--sp-4);
  text-align: center;
  color: var(--ink-500);
}

.c-empty__title {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
}

/* 404ページの検索フォーム（404.php）。ボックスの構造・枠線・アイコン・
   余白・タイポグラフィの比率・フォーカス時の挙動は、参照ページ
   (cl-development.sakura.ne.jp/hhr10149/membeship/) 自身の実際のCSS
   （.c-nf-search / .c-nf-search__field / .c-nf-search__field svg /
   .c-nf-search__field:focus-visible — そのサイトの本番スタイルシートから
   直接確認した値）をそのまま踏襲している。そのサイトは本テーマと同じ
   デザイントークン（--ink-*, --line-strong, --sp-*, --dur, --ease）を
   使っており、値は完全に一致する。ヘッダー・フッター・配色テーマなど
   ページ全体のデザインは踏襲していない — この検索コンポーネント単体の
   構造のみ。参照側は実際には<form>ではなく、JSモーダルを開くだけの
   <button>（送信もページ遷移も一切しない）だったため、送信の挙動だけは
   本テーマの実際のWordPress検索（search.php）に合わせた本物のフォームに
   置き換えている。 */
.c-404-search {
  margin-bottom: var(--sp-10);
}

.c-404-search__label {
  display: block;
  margin-bottom: var(--sp-4);
  font-size: var(--fs-lg);
  color: var(--ink-900);
}

.c-404-search__field {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  width: 100%;
  max-width: 640px;
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line-strong);
  background: var(--bg);
  transition: border-color var(--dur) var(--ease);
}

.c-404-search__field:focus-within {
  border-color: var(--ink-900);
}

.c-404-search__field svg:first-child {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--ink-700);
}

.c-404-search__input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: var(--fs-body);
  color: var(--ink-900);
}

.c-404-search__input:focus {
  outline: none;
}

.c-404-search__input::placeholder {
  color: var(--ink-500);
}

.c-404-search__submit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--ink-700);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}

.c-404-search__submit:hover {
  color: var(--ink-900);
}

.c-404-search__submit svg {
  width: 100%;
  height: 100%;
}

/* --- ページネーション ------------------------------------------------------ */
.c-pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-12);
}

.c-pager__link {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding-inline: var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition:
    border-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    background var(--dur) var(--ease);
}

.c-pager__link:hover {
  border-color: var(--brand-600);
  color: var(--brand-600);
  background: var(--brand-050);
}

.c-pager__link[aria-current="page"] {
  background: var(--brand-600);
  border-color: var(--brand-600);
  color: #fff;
}

.c-pager__ellipsis {
  color: var(--ink-400);
  padding-inline: var(--sp-1);
}

/* --- サイドバーのブロック枠 ------------------------------------------------ */
.c-widget__title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-4);
  padding-bottom: var(--sp-3);
  border-bottom: 2px solid var(--ink-900);
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--ink-900);
}

.c-widget__title svg {
  width: 18px;
  height: 18px;
  color: var(--brand-600);
}

/* サイドバー内の会員登録ミニCTA */
.c-widget-cta {
  padding: var(--sp-5);
  border: 1px solid var(--brand-100);
  border-top: 3px solid var(--brand-600);
  background: var(--brand-050);
  text-align: center;
}

.c-widget-cta__title {
  font-size: var(--fs-base);
  color: var(--ink-900);
  margin-bottom: var(--sp-2);
}

.c-widget-cta__text {
  font-size: var(--fs-xs);
  line-height: var(--lh-ui);
  color: var(--ink-500);
  margin-bottom: var(--sp-4);
}

/* --- トップへ戻る ---------------------------------------------------------- */
.c-to-top {
  position: fixed;
  right: var(--sp-4);
  bottom: var(--sp-4);
  z-index: calc(var(--z-header) - 1);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--bg);
  color: var(--ink-700);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--dur) var(--ease),
    visibility var(--dur) var(--ease),
    transform var(--dur) var(--ease),
    color var(--dur) var(--ease);
}

.c-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.c-to-top:hover {
  color: var(--brand-600);
  border-color: var(--brand-600);
}

.c-to-top svg {
  width: 20px;
  height: 20px;
}

@media (min-width: 900px) {
  .c-to-top {
    right: var(--sp-6);
    bottom: var(--sp-6);
  }
}

/* --- source: mock-source/src/styles/components/_footer.css --- */
/* ===========================================================================
   フッター
   =========================================================================== */

/* ページの終わりを面ではっきり示す。
   白い面が続いたあとに墨地が来ることで、記事の続きではないと分かる。 */
.c-footer {
  margin-top: var(--section-gap);
  padding-block: var(--sp-12) var(--sp-8);
  background: var(--ink-900);
  color: rgb(255 255 255 / 72%);
}

.c-footer a {
  color: rgb(255 255 255 / 72%);
}

.c-footer a:hover {
  color: #fff;
}

.c-footer__top {
  display: grid;
  gap: var(--sp-8);
  grid-template-columns: 1fr;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgb(255 255 255 / 14%);
}

@media (min-width: 800px) {
  .c-footer__top {
    grid-template-columns: minmax(0, 1.2fr) repeat(2, minmax(0, 1fr));
    gap: var(--sp-10);
  }
}

/* 支給ロゴは白地向けなので、墨地では白抜きにして置く */
/* 承認済みデザイン修正: 白背景の中に実カラーのロゴを乗せる（暗い背景に
   反転白ロゴを直置きする元のmock表現から変更）。ロゴ画像そのものは
   複製・再作成せず、既存ファイルをそのまま使う。 */
.c-footer__brand .c-header__logo-img {
  filter: none;
  background: #fff !important;
}

.c-footer__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: #fff;
  /* AUN: forced explicitly (!important, per the explicit request) so this
     one container's own white background can never be silently
     overridden — scoped to just this logo wrapper, not .c-footer itself,
     so the rest of the dark footer is untouched. */
  background-color: #fff !important;
}

.c-footer__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: rgb(255 255 255 / 62%);
  max-width: 30em;
}

.c-footer__company {
  margin-top: var(--sp-5);
  font-size: var(--fs-xs);
  line-height: 1.9;
  color: rgb(255 255 255 / 62%);
  font-style: normal;
}

.c-footer__company dt {
  font-weight: 700;
  color: rgb(255 255 255 / 85%);
}

.c-footer__heading {
  margin-bottom: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #fff;
}

.c-footer__list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.c-footer__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgb(255 255 255 / 72%);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}

.c-footer__link:hover {
  color: #fff;
  text-decoration: underline;
}

.c-footer__link .c-gnav__dot {
  width: 6px;
  height: 6px;
}

.c-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding-top: var(--sp-6);
}

.c-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-5);
}

.c-footer__copy {
  font-size: var(--fs-xs);
  color: rgb(255 255 255 / 55%);
}

/* --- WordPress: Simple Membership shortcode forms ---------------------------
   Restyles the plugin's own form markup ([swpm_login_form],
   [swpm_registration_form], [swpm_reset_form], [swpm_profile_form]) to match
   the theme's .c-form__ / .c-btn design tokens, without editing any plugin
   file. Placed inside .c-swpm-form on page-login.php / page-mypage.php. */

.c-swpm-form .swpm-login-widget-form,
.c-swpm-form .swpm-registration-widget-form,
.c-swpm-form .swpm-reset-widget-form,
.c-swpm-form .swpm-profile-widget-form,
.c-swpm-form .swpm-edit-profile-form {
  display: block;
}

.c-swpm-form .swpm-username-label,
.c-swpm-form .swpm-password-label,
.c-swpm-form .swpm-form-label-wrap {
  margin-bottom: var(--sp-2);
}

.c-swpm-form label,
.c-swpm-form .swpm-label {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-700);
}

.c-swpm-form .swpm-username-input,
.c-swpm-form .swpm-password-input,
.c-swpm-form .swpm-form-input-wrap {
  margin-bottom: var(--sp-4);
}

.c-swpm-form input[type="text"],
.c-swpm-form input[type="email"],
.c-swpm-form input[type="password"],
.c-swpm-form input[type="tel"],
.c-swpm-form select,
.c-swpm-form textarea {
  width: 100%;
  min-height: 48px;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: var(--fs-body);
  color: var(--ink-900);
}

.c-swpm-form input[type="text"]:focus,
.c-swpm-form input[type="email"]:focus,
.c-swpm-form input[type="password"]:focus,
.c-swpm-form input[type="tel"]:focus,
.c-swpm-form select:focus,
.c-swpm-form textarea:focus {
  outline: none;
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-050);
}

/* --- Signup form only (inc/member.php's chikara_swpm_registration_form_
   override()) — everything below is scoped under .swpm-registration-
   widget-form, the wrapper div that markup uniquely renders, so none of
   it can ever reach the login or reset forms (their own stock SWPM
   markup never has that class). Visual-only: no field name, id, required
   attribute, or validation rule is touched by any rule here. --- */

/* An explicit height (not just the shared rule's min-height above)
   pins every signup input to the same, precise 48px target instead of
   whatever this font's own line-height would otherwise land on
   (measured 54px with min-height alone) — box-sizing: border-box
   (global reset) means padding is absorbed into this height, not added
   on top of it. */
.c-swpm-form .swpm-registration-widget-form input[type="text"],
.c-swpm-form .swpm-registration-widget-form input[type="email"],
.c-swpm-form .swpm-registration-widget-form input[type="password"],
.c-swpm-form .swpm-registration-widget-form input[type="tel"] {
  height: 48px;
  padding-block: 0;
}

/* Black (not the site's usual blue brand-600) focus ring, matching the
   reference design's own signup-field focus state specifically. */
.c-swpm-form .swpm-registration-widget-form input[type="text"]:focus,
.c-swpm-form .swpm-registration-widget-form input[type="email"]:focus,
.c-swpm-form .swpm-registration-widget-form input[type="password"]:focus,
.c-swpm-form .swpm-registration-widget-form input[type="tel"]:focus {
  border-color: var(--ink-900);
  box-shadow: 0 0 0 2px var(--ink-900);
}

.c-swpm-form .swpm-registration-widget-form .c-form__req,
.c-swpm-form .swpm-registration-widget-form .c-form__opt {
  border-radius: 2px;
}

/* Password show/hide toggle: a plain ghost button laid over the input's
   own right edge (never a second, visually separate control), reusing
   the input's already-fixed 48px height above so vertical centering is
   exact. Extra right padding on the password input itself (below) keeps
   typed text from ever running under the button. */
.c-swpm-form .swpm-registration-widget-form .swpm-form-input-wrap--with-toggle {
  position: relative;
}

.c-swpm-form
  .swpm-registration-widget-form
  .swpm-form-input-wrap--with-toggle
  input[type="password"],
.c-swpm-form
  .swpm-registration-widget-form
  .swpm-form-input-wrap--with-toggle
  input[type="text"] {
  padding-right: 4.5em;
}

.c-swpm-form .swpm-registration-widget-form .swpm-password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  padding: 0 var(--sp-4);
  border: none;
  background: none;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--ink-500);
  cursor: pointer;
}

.c-swpm-form .swpm-registration-widget-form .swpm-password-toggle:hover {
  color: var(--ink-900);
}

.c-swpm-form
  .swpm-registration-widget-form
  .swpm-password-toggle:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: -2px;
}

/* Company / Telephone: one two-column row from tablet width up (both
   inputs share the same top edge via align-items: start, so a trailing
   helper line under only one of them — phone has one, company doesn't —
   never misaligns the inputs themselves), a plain stacked column below
   it. The wrapping div is purely presentational (inc/member.php); every
   field keeps its own existing name/id/required/validation untouched. */
.c-swpm-form .swpm-registration-widget-form .swpm-form-row-pair {
  display: block;
}

@media (min-width: 768px) {
  .c-swpm-form .swpm-registration-widget-form .swpm-form-row-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    column-gap: var(--sp-5);
  }
}

/* Consent row: full-width pale-gray rectangle around the (already
   correctly aligned/wrapped, see the rule below) checkbox + text. */
.c-swpm-form .swpm-registration-widget-form .swpm-pp-row {
  padding: var(--sp-4) 14px;
  background: var(--bg-soft);
  border-radius: var(--radius-sm);
}

.c-swpm-form .swpm-registration-widget-form .swpm-pp-row label {
  margin: 0;
}

/* Primary submit button: the one deliberately different-looking control
   on this page (full-width coral pill, vs. the site's default black
   submit buttons) — kept to this exact button class only, per this
   task's explicit "do not change other site buttons globally", so
   .c-swpm-form's shared button[type="submit"] rule above (used by the
   login form's own submit button too) is completely untouched. The
   extra .swpm-registration-widget-form ancestor class and explicit
   "button" tag in every rule below are deliberate, not decorative: the
   shared rule two blocks up is ".c-swpm-form button[type=\"submit\"]"
   (specificity 0-2-1), which would otherwise silently win over a
   plainer ".c-swpm-form .swpm-registration-submit-button" override
   (0-2-0) and keep the button black — confirmed by computing both
   selectors' specificity, not assumed. */
.c-swpm-form
  .swpm-registration-widget-form
  button.swpm-registration-submit-button {
  display: flex;
  width: 100%;
  min-width: 0;
  min-height: 48px;
  background: #ff5b5f;
}

.c-swpm-form
  .swpm-registration-widget-form
  button.swpm-registration-submit-button:hover {
  background: #f13d42;
}

.c-swpm-form
  .swpm-registration-widget-form
  button.swpm-registration-submit-button:active {
  background: #d92a2f;
}

.c-swpm-form
  .swpm-registration-widget-form
  button.swpm-registration-submit-button:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
}

.c-swpm-form .swpm-registration-widget-form .swpm-registration-note {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: center;
}

.c-swpm-form .swpm-remember-me,
.c-swpm-form .swpm-terms-row label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-700);
}

/* Consent row: kept separate from .swpm-remember-me/.swpm-terms-row above
   (SWPM's own stock templates, e.g. the plain [swpm_login_form] "remember
   me" row, which this theme does not override) so this signup-only fix
   never touches those other forms. align-items: flex-start (not center)
   matches every other consent checkbox on this site (.c-form__consent in
   this same file) — the checkbox stays pinned to the first line instead of
   drifting to the vertical middle once the sentence wraps to two lines at
   narrow widths. The label text is always wrapped in one <span> (never
   bare text nodes as flex children) so it wraps as a single text block
   instead of breaking unpredictably between the label's child nodes. */
.c-swpm-form .swpm-pp-row label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
  margin: var(--sp-4) 0;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--ink-700);
}

.c-swpm-form input[type="checkbox"] {
  accent-color: var(--brand-600);
  width: 18px;
  height: 18px;
}

.c-swpm-form .swpm-pp-row input[type="checkbox"] {
  flex: none;
  margin-top: 0.15em;
}

.c-swpm-form .swpm-login-submit,
.c-swpm-form .swpm-registration-submit-section,
.c-swpm-form .swpm-form-row.swpm-submit-section,
.c-swpm-form p.submit {
  margin-top: var(--sp-6);
  text-align: center;
}

.c-swpm-form input[type="submit"],
.c-swpm-form button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 240px;
  min-height: 47px;
  padding: var(--sp-3) var(--sp-6);
  border: none;
  border-radius: var(--radius-pill);
  background: var(--ink-900);
  color: #fff;
  font-size: var(--fs-base);
  font-weight: 700;
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}

.c-swpm-form input[type="submit"]:hover,
.c-swpm-form button[type="submit"]:hover {
  background: var(--ink-700);
}

/* The theme's own page already provides the login/signup tab switch and
   the reset-mode link, so the plugin's own duplicate nav links are hidden
   here (presentation only — never used to hide protected content). */
.c-swpm-form .swpm-forgot-pass-link,
.c-swpm-form .swpm-join-us-link {
  display: none;
}

.c-swpm-form .swpm-login-widget-action-msg,
.c-swpm-form .swpm_error {
  display: block;
  margin-top: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--accent-600);
  text-align: center;
}

/* Plain inline hints (e.g. "ログインIDになります。"), never an error — kept
   visually distinct from .swpm_error above (this class is only ever used
   for non-error copy; only appears in inc/member.php's own registration
   markup, confirmed nowhere else in the theme, so this never affects a
   genuine validation message). */
.c-swpm-form .swpm-form-desc {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-sm);
  color: var(--ink-500);
  text-align: left;
}

/* WordPress: styled success banner shown on /login/?activated=1 after a
   real Simple Membership email-activation redirect (see inc/member.php's
   swpm_after_email_activation_redirect_url filter). No mock source for
   this state existed (the mock never modeled email activation), so this
   follows the theme's existing .c-form__errors alert pattern but in the
   brand's positive/success palette instead of the error one. */
.c-login__activated {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--brand-600);
  border-radius: var(--radius-sm);
  background: var(--brand-050);
}

.c-login__activated svg {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 0.1em;
  color: var(--brand-600);
}

.c-login__activated-title {
  font-weight: 700;
  color: var(--ink-900);
}

.c-login__activated-text {
  margin-top: var(--sp-1);
  font-size: var(--fs-sm);
  line-height: var(--lh-ui);
  color: var(--ink-700);
}

/* エラー状態（無効・期限切れのアクティベーションリンク）。My Pageの
   .c-my-flash--error と同じ配色トークンを再利用し、新しい色を増やさない。 */
.c-login__activated--error {
  border-color: var(--accent-700);
  background: var(--accent-050);
}

.c-login__activated--error svg {
  color: var(--accent-700);
}

/* My Page電話番号フィールドのインラインエラー（U1）。My Pageの
   .c-my-flash--error / ログインページの .c-login__activated--error と
   同じ配色トークンを再利用する。 */
.c-field-error {
  margin: 0 0 var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--accent-700);
}

.swpm-form-field.c-field--error,
input.c-field--error {
  border-color: var(--accent-700) !important;
  background: var(--accent-050);
}

/* WordPress: "パスワードをお忘れですか？" link below the login form
   (page-login.php), and "ログインに戻る" below the reset form. No mock
   source for this state existed — styled consistently with the existing
   .c-login__switch link pattern (same brand color/underline from the
   global `a` rule) but its own block since it appears in a different
   position (directly under the login form, not the tab-switch footer). */
.c-login__forgot {
  margin-top: var(--sp-4);
  text-align: center;
}

.c-login__forgot a {
  display: inline-block;
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--brand-600);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.c-login__forgot a:hover {
  color: var(--brand-700);
}

/* WordPress: "学習中" (last-viewed, not yet completed) badge in the
   Curriculum list (single-course.php) — a new indicator this task adds;
   no mock source exists for it. Styled as the same small pill pattern as
   the existing .c-lesson__type/.c-course__ready badges, in the brand
   color so it reads distinctly from both the neutral .c-lesson__type
   chip and the "完了" done state (checkmark + strike-through), and never
   relies on color alone since it always carries its own text label. */
.c-lesson__current {
  padding: 0.1em 0.5em;
  background: var(--brand-050);
  color: var(--brand-600);
  font-size: var(--fs-2xs);
  font-weight: 700;
  white-space: nowrap;
}