/* be-do.jp 静的サイト 共通スタイル
   配色は現行サイト（TCD BEYOND）に合わせている：アクセント #9E012B。書体はWebフォントを読み込まず OS 標準のゴシック
   ルールの一覧は docs/design-rules.md */

/* ブレークポイント。@media (max-width: 767px) のように名前で書き、値はここだけで変える。
   ブラウザは @custom-media を読めないので、ビルド時に scripts/build.mjs が値に展開する
   --bp-nav-sp / --bp-nav-pc はヘッダーがハンバーガーに切り替わる幅（未決定。変えるときは2行とも同じ数字に） */

:root {
  --accent: #9e012b;
  --accent-dark: #7a0021;
  --text: #222;
  --text-sub: #555;
  --line: #ddd;
  --bg-gray: #f6f6f6;
  /* 装飾用の赤（英字ラベル・見出しのバーなど）。濃い赤 --accent はボタン専用 */
  --accent-deco: #c8324f;
  /* サービスカラー（サービスページだけ）。値は下の [data-service] で切り替える。未設定のページはコーポレートカラーの赤（--accent）
     --service-color：図・グラフ・ヒーローの帯など。--service-color-strong：白背景で文字に使っても 4.5:1 以上になる濃い版
     --service-color-light：淡い版。グラフの2系列目・アイコンや図の背景などの塗りだけ。文字には使わない */
  --service-color: var(--accent);
  --service-color-strong: var(--accent);
  --service-color-light: color-mix(in srgb, var(--service-color) 40%, white);
  /* 本文の太字の色（.prose strong）。既定は黒（未決定）。装飾用の赤に戻すときは var(--accent-deco) にする */
  --strong-color: var(--text);
  /* 章帯（.chapter）の背景。白とグレーを交互に使い、最後のCTA章だけ淡い赤 */
  --chapter-bg: #fff;
  --chapter-bg-gray: #f6f5f3;
  --chapter-bg-cta: #fbf1f3;
  --bg-dark: #222;
  --container: 1150px;
  /* 本文幅（.narrow）。左右の余白を含まない幅。現行サイトに合わせて800px */
  --content-narrow: 800px;
  --header-h: 72px;
  --radius-pill: 70px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  /* カードの薄い影（ページ冒頭のビジュアルなど） */
  --shadow-card: 0 4px 16px rgba(0, 0, 0, .08);
  /* 余白。新しく作る部品はこの5段階から選ぶ */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 40px;
  --space-xl: 64px;
  /* HEROIC診断のベン図（horoic_resultimage）の青緑と黄。比較カードの色に使う */
  --venn-teal: #33a7b3;
  --venn-yellow: #ffd725;
  /* タップ領域の最小サイズ */
  --tap-min: 44px;
  /* 本文の書体。Webフォントは使わず OS 標準（Mac・iPhone はヒラギノ、Windows は游ゴシック Medium／メイリオ）。游ゴシックは Regular だとかすれるので Medium を先に書く。
     -apple-system は書かない（英数字だけ San Francisco になり、和文と書体が分かれる。ふち取り（text-stroke）で継ぎ目も出る） */
  --font: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic Medium', YuGothic, Meiryo, sans-serif;
  /* 見出し（h1〜h3）の書体。既定は本文と同じゴシック。明朝にするページはスコープ内で上書きする（今は psycap-master だけ） */
  --font-heading: var(--font);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.8; letter-spacing: .04em; color: var(--text); background: #fff; -webkit-text-size-adjust: 100%; }
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: inherit; }
h1, h2, h3 { line-height: 1.5; font-weight: 600; font-family: var(--font-heading); }
/* 太字は 700 に固定する（既定の bolder だと 600 の中で 900 になり、ヒラギノは W9 まで持っているので極太で出る）。見出しの中の strong は見出しと同じ太さ（旧サイトから持ってきた <h2><strong>…</strong></h2> 対策） */
strong, b { font-weight: 700; }
:is(h1, h2, h3, h4, h5, h6) :is(strong, b) { font-weight: inherit; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 1000; background: #fff; padding: 8px 12px; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.narrow { box-sizing: content-box; width: auto; max-width: var(--content-narrow); }
.center { text-align: center; }
.muted { color: var(--text-sub); font-size: 13px; }

/* ---------- ヘッダー ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .96); border-bottom: 1px solid #eee; backdrop-filter: blur(6px); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-h); max-width: 1400px; margin: 0 auto; padding: 0 24px; }
.site-logo img { display: block; width: 120px; height: auto; }
.nav-toggle, .nav-toggle__btn { display: none; }
.gnav__list { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; align-items: center; }
.gnav__item { position: relative; }
.gnav__item > a { display: block; padding: 8px 12px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.gnav__item > a:hover, .gnav__item > a[aria-current] { color: var(--accent); }
.gnav__item.is-cta > a { background: var(--accent); color: #fff; border-radius: var(--radius-pill); padding: 8px 22px; margin-left: 8px; }
.gnav__item.is-cta > a:hover { background: var(--accent-dark); color: #fff; }
.gnav__sub { display: none; position: absolute; top: 100%; left: 0; min-width: 300px; list-style: none; margin: 0; padding: 8px 0; background: var(--bg-dark); }
.gnav__sub a { display: block; padding: 10px 20px; color: #fff; font-size: 13px; text-decoration: none; line-height: 1.5; }
.gnav__sub a:hover { background: var(--accent); }
.header-cta { display: none; }
.gnav__item.has-sub:hover .gnav__sub, .gnav__item.has-sub:focus-within .gnav__sub { display: block; }
/* PCのメニュー：現在ページは赤文字だけ、ホバー・フォーカス中は下線も出す（同時に下線が2本出ないように分ける）。
   サブメニューありは ▾ 付き。サブメニューはホバーとフォーカスで開き、マウスがパネルへ移る途中で閉じないよう閉じるのを .15s 遅らせる */
@media (width > 1100px) {
  .gnav__item:not(.is-cta) > a { position: relative; transition: color .2s; }
  .gnav__item:not(.is-cta) > a::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
  .gnav__item:not(.is-cta) > a:hover::after, .gnav__item:not(.is-cta) > a:focus-visible::after,
  .gnav__item.has-sub:hover > a::after, .gnav__item.has-sub:focus-within > a::after { transform: scaleX(1); }
  .gnav__item.has-sub:hover > a, .gnav__item.has-sub:focus-within > a { color: var(--accent); }
  .gnav__item.has-sub > a { padding-right: 24px; }
  .gnav__item.has-sub > a::before { content: ''; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .2s, margin-top .2s; }
  .gnav__item.has-sub:hover > a::before, .gnav__item.has-sub:focus-within > a::before { transform: rotate(-135deg); margin-top: -1px; }
  .gnav__item.is-cta > a { transition: background-color .2s, transform .2s, box-shadow .2s; }
  .gnav__item.is-cta > a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(158, 1, 43, .3); }
  .gnav__sub { display: block; visibility: hidden; opacity: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); transition: opacity .15s ease .15s, visibility 0s linear .3s; }
  .gnav__item.has-sub:hover .gnav__sub, .gnav__item.has-sub:focus-within .gnav__sub { visibility: visible; opacity: 1; transition: opacity .15s ease, visibility 0s; }
  .gnav__sub a { transition: background-color .2s, padding-left .2s; }
  .gnav__sub a:hover, .gnav__sub a:focus-visible { background: var(--accent); padding-left: 26px; }
}

/* ---------- パンくず ---------- */
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; max-width: var(--container); margin: 0 auto; padding: 12px 24px; font-size: 12px; color: var(--text-sub); }
.breadcrumb li + li::before { content: '>'; margin-right: 6px; }
.breadcrumb a { text-decoration: none; }
/* スマホではパンくずを1行にし、最後の項目（今のページ名）を省略する */
@media (max-width: 767px) {
  .breadcrumb ol { flex-wrap: nowrap; white-space: nowrap; }
  .breadcrumb li { flex: none; }
  .breadcrumb li:last-child { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}
.is-home .breadcrumb { display: none; }

/* ---------- ボタン ---------- */
.btn, .btn-outline { display: inline-block; min-width: 320px; padding: 18px 48px; border-radius: var(--radius-pill); text-align: center; text-decoration: none; font-weight: 600; font-size: 16px; line-height: 1.5; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); transition: background .2s, color .2s; }
.btn { background: var(--accent); color: #fff; }
.btn:hover { background: var(--accent-dark); }
.btn-outline { border: 1px solid var(--accent); color: var(--accent); background: #fff; }
.btn-outline:hover { background: var(--accent); color: #fff; }
/* トップは導線を目立たせるため大きめ */
.ext-icon { width: 1.1em; height: 1.1em; margin-left: 6px; vertical-align: -0.2em; fill: currentColor; }

/* ---------- 見出し・セクション ---------- */
.section { padding: 96px 0; }
.section--gray { background: var(--bg-gray); }
.section-title { text-align: center; font-size: 28px; margin: 0 0 24px; }
.section-title--left { text-align: left; }
.section-title__en { display: block; color: var(--accent); font-size: 13px; letter-spacing: .2em; font-weight: 600; margin-bottom: 4px; }
.section-lead { text-align: center; max-width: 760px; margin: 0 auto 48px; color: var(--text-sub); }
/* セクション見出し：ページ内の h2（記事系ページでは h3 にも使っている）。バーは装飾用の赤 */
.heading-line { font-size: 22px; padding-left: 16px; border-left: 4px solid var(--accent-deco); margin: var(--space-xl) 0 var(--space-md); }
/* h2 は文節で改行し、最後の行に1〜2文字だけ残らないよう行の長さを揃える（auto-phrase は対応ブラウザのみ） */
.heading-line, .chapter-heading__title { text-wrap: balance; word-break: auto-phrase; }
.wide-img { display: block; margin: 40px auto 0; }
.wide-img--narrow { max-width: 640px; }

.page-hero { background: var(--service-hero-bg, var(--bg-gray)); padding: 72px 0 64px; text-align: center; }
.page-hero--small { padding: 40px 0; }
.page-hero__en { color: var(--accent); letter-spacing: .2em; font-size: 13px; font-weight: 600; margin: 0; }
.page-hero__title { font-size: 32px; margin: 4px 0 0; }
/* ページタイトルもキャッチ（.lead-catch）と同じく文節で改行する。非対応ブラウザは <wbr> の位置で改行 */
.page-hero__title { word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance; }
.page-hero--small .page-hero__title { font-size: 24px; }
/* サービスページの冒頭：テキスト（英字ラベル・サービス名・キャッチ）とビジュアル（ロゴ入り画像かメインビジュアル）の2列。スマホは縦積み
   ビジュアルは白いカード（角丸＋薄い影）に載せ、カードの大きさは画像に合わせる（白背景の画像が灰色の帯の上で四角く浮かないように）
   画像は縮めるだけで切り抜かない */
.page-hero--service { text-align: left; padding: var(--space-xl) 0; }
.page-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); align-items: center; }
.page-hero--service .lead-catch { text-align: left; margin: var(--space-sm) 0 0; }
.page-hero--service .lead { text-align: left; max-width: none; margin: var(--space-sm) 0 0; }
.page-hero__visual { --hero-visual-h: 360px; justify-self: center; max-width: 100%; overflow: hidden; background: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-card); }
/* スマホで別の画像にするときは <picture>（build.mjs が heroImage.sp から出力） */
.page-hero__visual > picture { display: block; }
.page-hero__visual > img, .page-hero__visual > picture > img { display: block; width: auto; max-width: 100%; max-height: var(--hero-visual-h); }
.content { padding-top: 48px; padding-bottom: 96px; }
.lead-catch { font-size: 22px; font-weight: 600; color: var(--accent); text-align: center; margin: 0 0 8px; }
/* キャッチは文節で改行する。auto-phrase 非対応のブラウザは keep-all で、文言に入れた <wbr> の位置だけで改行する */
.lead-catch { word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance; }
.lead { text-align: center; max-width: 760px; margin: 0 auto 40px; }
/* リードを左揃えにする（ヒーローの直後のリードを中央揃えにしないページ） */
.lead--left { text-align: left; }

/* 移行待ちの目印（公開前にすべて消えていることを確認する） */
.todo-box { border: 2px dashed #e0a100; background: #fffaf0; padding: 16px 20px; margin: 24px 0; font-size: 14px; color: #6b4b00; }
span.todo-box { display: inline-block; padding: 2px 8px; margin: 0; }

/* ---------- トップ：ヒーロー ---------- */
.hero { position: relative; min-height: calc(100vh - var(--header-h)); display: grid; place-items: center; overflow: hidden; color: #fff; }
.hero__images { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); }
.hero__images img { width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1; }
.hero__body { position: relative; z-index: 2; text-align: center; padding: 48px 24px; }
.hero__title { font-size: clamp(26px, 4vw, 44px); margin: 0 0 40px; text-shadow: 0 2px 12px rgba(0, 0, 0, .3); }
.hero__stats { display: flex; justify-content: center; gap: 24px; list-style: none; margin: 0 0 48px; padding: 0; flex-wrap: wrap; }
.hero__stats li { display: flex; flex-direction: column; align-items: center; width: 190px; height: 190px; justify-content: center; border-radius: 50%; background: rgba(158, 1, 43, .85); }
.hero__stat-label { font-size: 14px; font-weight: 600; }
.hero__stat-num { font-size: 48px; font-weight: 700; line-height: 1.1; }
.hero__stat-num small { font-size: 22px; }
.hero__stat-note { font-size: 11px; opacity: .85; }
.hero .btn { border: 1px solid #fff; }

/* ---------- トップ：インフォメーション ---------- */
.info__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.info__item { display: grid; grid-template-columns: 100px 1fr; gap: 12px; align-items: baseline; padding: 18px 8px; border-bottom: 1px solid var(--line); }
.info__item time { color: var(--text-sub); font-size: 13px; }
/* .info__cat は HERO Me の記事ページのカテゴリ表示で使う */
.info__cat { display: inline-block; background: #000; color: #fff; font-size: 11px; padding: 2px 10px; text-align: center; line-height: 1.8; }
.info__item a { text-decoration: none; font-weight: 600; }
.info__item a:hover { color: var(--accent); }
.info__item--empty { display: block; color: var(--text-sub); }
.info__more { text-align: center; margin-top: 32px; }

/* ---------- サービスカード ---------- */
.service-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; margin-bottom: 48px; }
.service-card { display: flex; flex-direction: column; gap: 6px; padding: 28px; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.service-card:hover { border-color: var(--accent); box-shadow: 0 6px 20px rgba(0, 0, 0, .06); }
.service-card__catch { font-size: 12px; color: var(--accent); font-weight: 600; }
.service-card__name { font-size: 18px; font-weight: 600; line-height: 1.5; }
.service-card__lead { font-size: 13px; color: var(--text-sub); line-height: 1.8; }

/* ---------- 事例カード ---------- */
.case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px 24px; margin-bottom: 48px; }
.case-card { display: flex; flex-direction: column; gap: 6px; text-decoration: none; }
.case-card__thumb { aspect-ratio: 16 / 9; overflow: hidden; background: var(--bg-dark); display: grid; place-items: center; }
.case-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.case-card:hover .case-card__thumb img { transform: scale(1.04); }
.case-card__noimg { color: #fff; font-weight: 600; letter-spacing: .05em; }
.case-card__cat { align-self: flex-start; background: #000; color: #fff; font-size: 11px; padding: 0 10px; margin-top: 6px; }
.case-card__title { font-weight: 600; line-height: 1.6; }
.case-card:hover .case-card__title { color: var(--accent); }
.case-card__client { font-size: 13px; color: var(--text-sub); }
.case-card__excerpt { font-size: 13px; line-height: 1.8; }
/* 本文の中に置く事例カード：3列（タブレットも3列）。2列にして1枚余らせない */
.case-grid--3 { grid-template-columns: repeat(3, 1fr); gap: var(--space-md) var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.content .case-card__title { font-size: 15px; }
/* 事例一覧（/case/ の .case-grid--index）：セクション見出しでマガジンが分かるのでラベルは出さず、タイトルを大きく太く。
   note のタイトルは長く、balance だと文節に収まらず単語の途中で切れる（「活用方｜法」）ので、文節単位の通常の折り返しにする */
.case-grid--index { gap: var(--space-xl) var(--space-lg); }
.case-grid--index .case-card__title { margin-top: var(--space-xs); font-size: 18px; font-weight: 700; line-height: 1.5; text-wrap: wrap; }
.case-grid--top { grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
/* トップの事例カード（.case-grid--top）：運用中サイトに合わせた角丸の白いカード。ラベルは画像の下端に重ね、タイトルは3行で省略、日付は下端にそろえる */
.case-grid--top .case-card { gap: 0; background: #fff; border-radius: var(--radius-lg); overflow: hidden; }
.case-grid--top .case-card__thumb { aspect-ratio: 515 / 325; }
.case-grid--top .case-card__cat { position: relative; margin: -35px 0 0 var(--space-md); min-width: 90px; padding: 0 25px; font-size: 12px; line-height: 35px; text-align: center; }
.case-grid--top .case-card__title { margin: var(--space-md) var(--space-md) var(--space-sm); font-size: 20px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.case-grid--top .case-card__client { margin: auto var(--space-md) var(--space-md); font-size: 14px; }

/* ---------- トップ：数字の帯（事例の後。写真2枚の上に数字を左右に置く） ---------- */
.stat-band { position: relative; overflow: hidden; color: #fff; }
.stat-band__images { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; }
.stat-band__images img { width: 100%; height: 100%; object-fit: cover; }
.stat-band::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: 1; }
.stat-band__list { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; min-height: 450px; list-style: none; margin: 0; padding: 0; }
.stat-band__list li { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); padding: var(--space-lg) var(--space-sm); text-align: center; }
.stat-band__label { font-weight: 600; }
.stat-band__num { font-size: 68px; font-weight: 700; line-height: 1.1; }
.stat-band__num small { font-size: 28px; }
.stat-band__note { font-size: 12px; opacity: .85; }

/* ---------- メディア ---------- */
.media-block { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }

/* ---------- 資料 ---------- */
.doc-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.doc-cats a { padding: 6px 18px; border: 1px solid var(--line); border-radius: var(--radius-pill); font-size: 13px; text-decoration: none; }
.doc-cats a:hover { border-color: var(--accent); color: var(--accent); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 32px 24px; }
.doc-card { display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.doc-card__thumb { aspect-ratio: 4 / 3; background: var(--bg-gray); display: grid; place-items: center; overflow: hidden; border: 1px solid #eee; }
.doc-card__thumb img { max-height: 100%; object-fit: contain; }
.doc-card__title { font-size: 14px; font-weight: 600; line-height: 1.6; }
.doc-card:hover .doc-card__title { color: var(--accent); }
.doc-detail { display: grid; grid-template-columns: 1fr 420px; gap: 48px; padding-top: 48px; padding-bottom: 48px; align-items: start; }
.doc-detail__title { font-size: 26px; margin: 0 0 24px; }
.doc-detail__img { display: block; margin-bottom: 24px; border: 1px solid #eee; }
.doc-detail__form { position: sticky; top: calc(var(--header-h) + 24px); background: var(--bg-gray); padding: 28px; }
.doc-detail__form-title { font-size: 18px; margin: 0 0 16px; text-align: center; }
.check-list { padding-left: 0; list-style: none; }
.check-list li { padding-left: 1.6em; position: relative; }
.check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--accent); font-weight: 700; }

/* ---------- 会社情報 ---------- */
.def-list { display: grid; grid-template-columns: 160px 1fr; gap: 12px 24px; }
.def-list dt { font-weight: 600; color: var(--accent); }
.def-list dd { margin: 0; }
.member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 32px 24px; }
.member img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.member__role { font-size: 12px; color: var(--text-sub); margin: 8px 0 0; }
.member__name { font-weight: 600; margin: 0; }
.info-table { width: 100%; border-collapse: collapse; }
.info-table th, .info-table td { border-bottom: 1px solid var(--line); padding: 16px; text-align: left; vertical-align: top; }
.info-table th { width: 200px; background: var(--bg-gray); font-weight: 600; }
.logo-row { display: flex; gap: 24px; list-style: none; padding: 0; margin: 32px 0 0; flex-wrap: wrap; align-items: center; }
.logo-row img { height: 90px; width: auto; }
.access { display: grid; grid-template-columns: 220px 1fr; gap: 32px; }

/* ---------- お知らせ記事 ---------- */
.news-article__meta { display: flex; gap: 12px; align-items: center; color: var(--text-sub); font-size: 13px; }
.news-article__title { font-size: 26px; margin-top: 8px; }

/* ---------- 共通CTA・フッター ---------- */
.cta-band { background: var(--bg-dark); padding: 64px 0; }
.cta-band__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.cta-card { display: flex; flex-direction: column; gap: 8px; padding: 32px; border: 1px solid rgba(255, 255, 255, .25); color: #fff; text-decoration: none; transition: background .2s; }
.cta-card:hover { background: var(--accent); border-color: var(--accent); }
.cta-card__title { font-size: 20px; font-weight: 600; }
.cta-card__text { font-size: 13px; opacity: .85; flex: 1; }
.cta-card__more { font-size: 13px; font-weight: 600; }
.cta-card__more::after { content: ' →'; }
.site-footer { padding: 56px 0 32px; text-align: center; }
.site-footer__catch { font-weight: 600; margin: 0 0 16px; }
.site-footer__logo img { width: 120px; }
.site-footer__sns, .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; list-style: none; padding: 0; margin: 20px 0 0; font-size: 13px; }
.site-footer__sns a, .site-footer__legal a { text-decoration: none; }
.site-footer__sns a:hover, .site-footer__legal a:hover { color: var(--accent); }
.site-footer__copy { font-size: 12px; color: var(--text-sub); margin-top: 24px; }

/* ---------- スマホ ---------- */
@media (width <= 1100px) {
  :root { --header-h: 60px; }
  /* backdrop-filter があると fixed の .gnav がヘッダー基準になり、開いたメニューが潰れる */
  .site-header { backdrop-filter: none; }
  .nav-toggle__btn { display: flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; cursor: pointer; }
  .nav-toggle__btn span { display: block; height: 2px; background: #000; transition: transform .2s, opacity .2s; }
  .nav-toggle:checked + .nav-toggle__btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle:checked + .nav-toggle__btn span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked + .nav-toggle__btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .gnav { display: none; position: fixed; inset: var(--header-h) 0 0; background: var(--bg-dark); overflow-y: auto; padding: 16px 0 48px; }
  .nav-toggle:checked ~ .gnav { display: block; }
  .gnav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .gnav__item > a { color: #fff; padding: 14px 24px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 15px; }
  .gnav__item.is-cta { display: none; }
  /* スマホ・タブレットでは「お問合せ」だけメニューの外に出す */
  .header-cta { display: block; margin: 0 8px 0 auto; padding: 6px 18px; background: var(--accent); color: #fff; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600; text-decoration: none; white-space: nowrap; }
  .header-cta:hover { background: var(--accent-dark); }
  .gnav__sub { display: block; position: static; min-width: 0; padding: 0; background: transparent; }
  .gnav__sub a { padding: 10px 24px 10px 40px; opacity: .8; }
}
@media (max-width: 767px) {
  body { font-size: 15px; }
  .container { padding-left: 16px; padding-right: 16px; }
  .content { padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
  .section { padding: 64px 0; }
  .section-title { font-size: 22px; }
  .page-hero { padding: 48px 0 40px; }
  .page-hero__title { font-size: 24px; }
  .page-hero--service { padding: var(--space-lg) 0; }
  .page-hero__inner { grid-template-columns: 1fr; gap: var(--space-md); }
  .page-hero__visual { --hero-visual-h: 240px; }
  .hero__images { grid-template-columns: 1fr; }
  .hero__images img:not(:first-child) { display: none; }
  .hero__stats { gap: 10px; }
  .hero__stats li { width: 104px; height: 104px; }
  .hero__stat-label { font-size: 11px; }
  .hero__stat-num { font-size: 28px; }
  .hero__stat-num small { font-size: 14px; }
  .stat-band__images, .stat-band__list { grid-template-columns: 1fr; }
  .stat-band__list { min-height: 0; }
  .stat-band__list li { min-height: 220px; }
  .stat-band__num { font-size: 48px; }
  .stat-band__num small { font-size: 20px; }
  .hero__stat-note { font-size: 9px; }
  .info__item { grid-template-columns: 1fr; gap: 4px; }
  .service-grid, .case-grid { grid-template-columns: 1fr; }
  .case-grid--index { gap: var(--space-lg); }
  .doc-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
  .media-block, .doc-detail, .access, .cta-band__grid { grid-template-columns: 1fr; }
  .doc-detail__form { position: static; }
  .def-list { grid-template-columns: 1fr; gap: 4px; }
  .def-list dd { margin-bottom: 12px; }
  .info-table th, .info-table td { display: block; width: 100%; }
  .info-table th { border-bottom: 0; padding-bottom: 8px; }
  .btn, .btn-outline { min-width: 0; width: 100%; max-width: 360px; padding: 16px 24px; }
}

/* 資料（note へのリンクカード） */
.doc-card__sub { font-size: 12px; color: var(--text-sub); line-height: 1.6; }
.doc-card.is-pending { opacity: .6; cursor: default; }

/* 本文ブロック（現行サイトから移した記事系ページ用） */
.content h3 { font-size: 18px; margin: 40px 0 12px; }
.content h4 { font-size: 16px; margin: 32px 0 8px; color: var(--accent); }
/* 段落の余白は上下だけ。左右（margin-inline）は触らない。.lead・.section-lead などが margin-inline: auto で中央に置くのを打ち消さないため */
.content p { margin-block: 0 1em; line-height: 1.8; }
.content .frame__label, .content .tag-label, .content .style_h3 { line-height: 1.5; }
.note-small { font-size: 12px; color: var(--text-sub); }
.content .wide-img { max-width: 100%; height: auto; }
.box-gray { background: var(--bg-gray); padding: 8px 32px 24px; margin: 48px 0; }
.box-gray > .heading-line:first-child { margin-top: 24px; }
.frame { border: 1px solid var(--line); padding: 24px 28px 8px; margin: 40px 0; position: relative; }
/* ラベルは流れの中に置き、1行目だけ枠線の上に引き上げる（折り返した2行目以降は本文を押し下げる）。-24px は .frame の上の padding。.content p のマージンに負けないよう .frame から指定 */
.frame .frame__label { width: fit-content; max-width: 100%; background: #fff; padding: 0 12px; margin: calc(-24px - .75em) 0 12px -8px; font-size: 18px; font-weight: 700; line-height: 1.5; color: var(--accent); }
.box-gray .frame__label { background: var(--bg-gray); }
.marker { background: linear-gradient(transparent 60%, #ffe3ea 60%); font-weight: 600; }
.video { position: relative; aspect-ratio: 16 / 9; max-width: 720px; margin: 16px auto 32px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.link-cards { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 8px; }
.link-cards a { display: block; padding: 14px 40px 14px 20px; border: 1px solid var(--line); background: #fff; text-decoration: none; position: relative; }
.link-cards a::after { content: '›'; position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--accent); font-size: 20px; }
.link-cards a:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 767px) {
  .box-gray { padding: 8px 16px 16px; margin-left: -16px; margin-right: -16px; }
  .frame { padding: 24px 16px 8px; }
  .frame .frame__label { margin-left: -4px; max-width: calc(100% + 8px); }
}
.content hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
.content ul, .content ol { margin: 0 0 1.2em; }
.content li { margin-bottom: .4em; }
.content .img-left { float: left; margin: 4px 20px 8px 0; border-radius: 50%; }
.content p::after { content: ''; display: table; clear: both; }
.cols-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; margin: 24px 0; }
.cols-2 > div > :first-child { margin-top: 0; }
.cols-2 .wide-img { margin-top: 0; }
/* 3列（PC・タブレット3列、スマホ1列） */
.cols-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 24px 0; }
.cols-3 > div > :first-child { margin-top: 0; }
.cols-3 .wide-img { margin-top: 0; }
/* 本文中の中央寄せの大きな一文。strong は装飾用の赤 */
.content .statement { text-align: center; font-size: 24px; line-height: 1.7; margin: 64px 0 32px; }
.content .statement strong { color: var(--accent-deco); }
.content .statement--bold { font-weight: 700; }
.content .statement--lg { font-size: 28px; }
.content .statement + .wide-img, .content .statement + p > .wide-img:first-child { margin-top: 0; }
.tag-label { display: inline-block; background: var(--accent); color: #fff; font-weight: 600; font-size: 14px; padding: 4px 14px; margin: 16px 0 8px; }
.profile-row { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: start; margin: 32px 0; }
.profile-row .wide-img { margin: 0; width: 180px; }
.profile-row p { margin: 0; font-size: 14px; }
.map iframe { width: 100%; height: 360px; border: 0; }
.hbar { list-style: none; padding: 0; margin: 16px 0 24px; display: grid; gap: 8px; }
.hbar li { display: grid; grid-template-columns: 200px 1fr 56px; gap: 12px; align-items: center; margin: 0; font-size: 14px; }
.hbar__track { background: #f2f2f2; height: 18px; }
.hbar__fill { display: block; height: 100%; background: var(--accent); }
.hbar__fill--sub { background: var(--accent-deco); }
.hbar__val { font-weight: 700; text-align: right; }
/* サービスページ（<main data-service="slug">）では、サービスの目印になる部品だけをサービスカラーにする。本文の中の小見出し・ラベル・番号は赤のまま
   対象：ページ冒頭（.page-hero__en、.lead-catch）、h2 の左のバー（.heading-line）と章見出しの英字ラベル（.chapter-heading__en）、グラフ（.hbar）
   グラフ（.hbar）は1系列目がサービスカラー、2系列目（.hbar__fill--sub）が淡い版
   --service-color-light は --service-color から作るので、[data-service] の要素自身で宣言する（:root の値は赤のまま引き継がれるため） */
[data-service] { --service-color: var(--accent); --service-color-strong: var(--accent); --service-color-light: color-mix(in srgb, var(--service-color) 40%, white); }
[data-service] .page-hero__en, [data-service] .lead-catch { color: var(--service-color-strong); }
/* グラデーション（任意）：--service-grad-text を書いたページだけ英字ラベルをグラデーション文字にする。無いページは単色のまま */
[data-service] .page-hero__en { background: var(--service-grad-text, none); -webkit-background-clip: text; background-clip: text; color: var(--service-text-fill, var(--service-color-strong)); }
[data-service] .heading-line { border-left-color: var(--service-color); border-image-source: var(--service-grad-line, none); border-image-slice: 1; }
[data-service] .chapter-heading__en { color: var(--service-color); }
[data-service] .hbar__fill { background: var(--service-color); }
[data-service] .hbar__fill--sub { background: var(--service-color-light); }
/* サービスカラーの値（ロゴの色）。濃い版は白背景で 4.5:1 以上。ここに無いページは上の [data-service] の赤（--accent）
   --service-tint-own：色を設定したページの印。新しい色ルールのページで訴求帯の色に使う（無いページはグレー）。値は全ページ同じ式 */
[data-service="heroic"] { --service-color: #1f6799; --service-color-strong: #1f6799; --service-tint-own: color-mix(in srgb, var(--service-color) 9%, white); }
/* cg1：#234f45 は彩度が低く、白と混ぜると灰色に見えるので、訴求帯だけ同系で彩度の高い --service-tint-base から作る（濃さは 15%） */
[data-service="cg1"] { --service-color: #234f45; --service-color-strong: #234f45; --service-tint-base: #2f7a5f; --service-tint-own: color-mix(in srgb, var(--service-tint-base) 15%, white); }
[data-service="hero-me"] { --service-color: #5236c0; --service-color-strong: #5236c0; --service-tint-own: color-mix(in srgb, var(--service-color) 9%, white); }
[data-service="wellness"] { --service-color: #3d7613; --service-color-strong: #3d7613; --service-tint-own: color-mix(in srgb, var(--service-color) 9%, white); }
/* psycap-master：講座ページ（psycap-master.com、#A40000 系）に合わせてコーポレートカラーの赤。訴求帯は 9% の薄い赤で、濃い赤の塗りは主CTA（.btn）だけ */
[data-service="psycap-master"] { --service-color: var(--accent); --service-color-strong: var(--accent); --service-tint-own: color-mix(in srgb, var(--service-color) 9%, white); }
/* psycap-master の見出しは明朝（OS標準。Webフォントは読み込まない）。main の中だけなのでヘッダー・フッターはゴシックのまま
   Windows の游明朝は細いので 600。太字700の見出しもそろえる。明朝は小さく見えるので字間を少し広げる。h4・ページ冒頭のキャッチ（.lead-catch）・英字ラベル・本文はゴシック
   活躍例の注目ポイント（.interview-item__title）は名前との強弱で見せる見出しで、明朝だと強調に見えないのでゴシック（太さ・字間も元のまま） */
[data-service="psycap-master"] { --font-heading: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", serif; }
[data-service="psycap-master"] .interview-item__title { --font-heading: var(--font); }
[data-service="psycap-master"] :is(h1, h2, h3):not(.interview-item__title) { font-weight: 600; letter-spacing: .05em; }
/* licence-heroic（ライセンス）：HEROIC とは別色。明るさ・未来感を出す青＋シアンのグラデーション
   グラデーション用のトークンは任意。書かないページは単色・グレーのまま
   --service-color-glow：グラデーションの明るい側（シアン）。塗り・線だけに使い、文字や白文字の下地には使わない
   文字・番号バッジのグラデーションは --service-color-strong → --service-color（どちらも白と 4.5:1 以上） */
[data-service="licence-heroic"] {
  --service-color: #0a72d1; --service-color-strong: #0866bd; --service-tint-own: color-mix(in srgb, var(--service-color) 9%, white);
  --service-color-glow: #19b8e6;
  --service-grad-text: linear-gradient(120deg, var(--service-color-strong) 0%, var(--service-color) 100%);
  --service-text-fill: transparent;
  --service-grad-line: linear-gradient(180deg, var(--service-color) 0%, var(--service-color-glow) 100%);
  --service-badge-shadow: 0 2px 8px color-mix(in srgb, var(--service-color) 25%, transparent);
  --service-hero-bg:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--service-color-glow) 22%, transparent) 0%, transparent 55%),
    radial-gradient(90% 120% at 0% 100%, color-mix(in srgb, var(--service-color) 14%, transparent) 0%, transparent 60%),
    color-mix(in srgb, var(--service-color) 4%, white);
  --service-band-bg: linear-gradient(180deg, color-mix(in srgb, var(--service-color) 5%, white) 0%, color-mix(in srgb, var(--service-color-glow) 10%, white) 100%);
}
/* --service-hero-title：ページ冒頭のサービス名（.page-hero__title）の色。書かないページは本文と同じ黒 */
[data-service] .page-hero__title { color: var(--service-hero-title, inherit); }
/* 表：スマホで横にはみ出す表を包む。ページ全体は横スクロールさせない */
.table-scroll { overflow-x: auto; }
@media (max-width: 767px) {
  .profile-row { grid-template-columns: 1fr; }
  .cols-3 { grid-template-columns: 1fr; gap: 32px; }
  .content .statement { font-size: 19px; margin-top: 48px; }
  .content .statement--lg { font-size: 21px; }
  /* ラベルを棒の上に出すので、項目どうしの間隔を広げてどのラベルの棒か分かるようにする */
  .hbar { gap: var(--space-sm); }
  .hbar li { grid-template-columns: 1fr 56px; gap: 4px 12px; }
  .hbar__label { grid-column: 1 / -1; }
}

/* ---------- 章帯・章見出し（解説ページ共通） ----------
   <section class="chapter chapter--gray"><div class="container narrow">
     <hgroup class="chapter-heading"><p class="chapter-heading__en">02 — WHY NOW</p><h2 class="chapter-heading__title">…</h2></hgroup>
     <h3 class="heading-line">…</h3> …
   背景は .chapter（白）／ --gray ／ --cta。帯の中で画像を全幅にするときは container を閉じて .chapter__full で囲む */
.chapter { padding: 100px 0; background: var(--chapter-bg); font-size: 16px; }
.chapter--gray { background: var(--chapter-bg-gray); }
.chapter--cta { background: var(--chapter-bg-cta); }
/* サービスページの冒頭の直後の章帯は、通常の本文（.content）と同じ上余白にする */
.page-hero--service + .chapter { padding-top: 48px; }
.chapter-heading { text-align: center; margin: 0 0 56px; }
.chapter-heading__en { color: var(--accent-deco); font-size: 13px; letter-spacing: .2em; font-weight: 600; margin: 0; line-height: 1.6; }
.chapter-heading__title { font-size: 30px; margin: 4px 0 0; }
/* 本文（.content）の中の章見出し：.content p の余白を英字ラベルに当てない。直後の1行リードは見出しに寄せて中央に置く */
.content .chapter-heading__en { margin: 0; }
.content .chapter-heading:has(+ .section-lead) { margin-bottom: var(--space-sm); }
.content .chapter-heading + .section-lead { margin-block: 0 var(--space-lg); }
/* 章帯の中の h2 は h3（.heading-sub 18px）より一段大きく。章見出し（.chapter-heading__title）はさらに上の段 */
.chapter .heading-line { font-size: 24px; }
.chapter-heading + .heading-line, .chapter-heading + * > .heading-line:first-child, .content .chapter-heading + .heading--body { margin-top: 0; }
.chapter h4 { color: var(--text); }
.chapter .check-list li::before { color: var(--accent-deco); }
.chapter__full { margin: 0 0 64px; }
.chapter__full img { display: block; width: 100%; height: auto; max-height: 640px; object-fit: cover; }
.heading-kicker { color: var(--accent-deco); font-weight: 600; font-size: 14px; margin: 64px 0 4px; }
.heading-kicker + .heading-line { margin-top: 0; }

/* 図：スマホでは中の文字が小さくなるので、画像だけを開くリンクを添える */
.figure { margin: 40px 0; }
.figure img { display: block; margin: 0 auto; }
.figure__zoom { display: none; }
/* 添え図：本文幅の80%で中央寄せ（PCのみ。スマホは本文幅） */
.figure--narrow { max-width: 80%; margin-left: auto; margin-right: auto; }

/* 2列カード（PC・タブレット2列、スマホ1列） */
.card-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin: 24px 0 32px; }
.card { background: #fff; border: 1px solid var(--line); padding: 24px; }
.card > :last-child { margin-bottom: 0; }
.card__img { display: block; width: 100%; height: auto; margin: 0 0 16px; }
.chapter--gray .card { border-color: transparent; }
/* グレーの帯で本文幅のカードを縦に続けるときは、別のカードと分かるように間を空ける（.card-grid などの中は対象外） */
.chapter--gray .content > .card + .card { margin-top: var(--space-lg); }

/* 実践者の声 */
.voice__title { font-size: 17px; line-height: 1.6; margin: 0 0 4px; }
.voice__who { font-size: 14px; color: var(--text-sub); margin: 0 0 12px; }

/* CTAボタン：主（塗り）→副（枠線）の順 */
.cta-buttons { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-top: 48px; }
.cta-buttons .btn, .cta-buttons .btn-outline { width: 100%; max-width: 520px; padding-left: var(--space-md); padding-right: var(--space-md); text-wrap: balance; }

@media (max-width: 1023px) {
  .chapter { padding: 80px 0; }
}
@media (max-width: 767px) {
  .chapter { padding: 64px 0; }
  .chapter .container { padding: 0 20px; }
  .chapter-heading { margin-bottom: 40px; }
  .chapter-heading__en { font-size: 12px; }
  .chapter-heading__title { font-size: 23px; }
  .chapter .heading-line { font-size: 21px; }
  .chapter__full { margin-bottom: 48px; }
  .heading-kicker { margin-top: 48px; }
  .figure { margin: 32px 0; }
  .figure--narrow { max-width: none; }
  .figure__zoom { display: block; margin-top: 8px; text-align: right; font-size: 14px; color: var(--text-sub); }
  .card-grid { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 20px; }
  .cta-buttons { align-items: stretch; }
  .cta-buttons .btn, .cta-buttons .btn-outline { max-width: none; min-height: var(--tap-min); padding: 16px 12px; font-size: 15px; letter-spacing: 0; text-wrap: balance; }
}

/* ---------- 共通部品（docs/design-rules.md に使い方） ---------- */

/* 本文スタイル：本文を囲む要素に .prose を付ける。行間・段落の間隔を広めにし、太字は --strong-color */
.prose p { line-height: 1.9; margin-bottom: 1.5em; }
.prose strong { color: var(--strong-color); }
.prose .lead { font-size: 18px; text-wrap: balance; }
.prose .wide-img { margin-bottom: var(--space-md); }
.prose .lead strong { color: inherit; }

/* 番号付きカード・3列カード：.cols-3 に .card を並べる。番号は .card__num */
/* 見出しは語の途中で改行しないよう行の長さを揃える（word-break: auto-phrase は対応ブラウザのみ） */
.card__title { font-size: 17px; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.content .card__title { margin: 0 0 var(--space-xs); }
.card__num, .row-list__num { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: var(--space-sm); border-radius: 50%; background: var(--accent-deco); color: #fff; font-size: 18px; font-weight: 700; }
.card--center { text-align: center; }
.card--center p { text-wrap: balance; word-break: auto-phrase; }
.card--center .tag-list { justify-content: center; }
.card .crop { max-width: 180px; margin: 0 auto var(--space-sm); }

/* 4列カード：4要素の図などをHTMLに起こすとき。PC 4列／タブレット 2列／スマホ 1列 */
.cols-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-sm); margin: var(--space-md) 0 var(--space-lg); }
.cols-4 .card { padding: var(--space-md) var(--space-sm); }
.cols-4 .card .crop { max-width: 88px; border-radius: 50%; }
/* プロフィールカード（.card.card--profile を縦に積む）：左に円形の顔アイコン（img.card__avatar）、右に名前（.card__title）→ キャッチ（p.card__catch）→ 説明。
   人物の紹介に使う。説明文が長いのでカードは横並びにせず本文幅いっぱい。アイコンはテキストに対して上下中央。帯の上でも埋もれないよう薄い影を付ける。スマホはアイコンを上にして全体を中央揃え */
.card--profile { display: grid; grid-template-columns: 120px 1fr; column-gap: var(--space-md); align-items: start; align-content: center; margin: var(--space-md) 0; box-shadow: var(--shadow-card); border-radius: var(--radius-md); }
.card--profile > * { grid-column: 2; }
.card--profile > .card__avatar { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
.card__avatar { display: block; width: 120px; height: 120px; margin: 0; border-radius: 50%; object-fit: cover; }
.content .card--profile .card__title { margin-bottom: 0; font-size: 20px; }
.content .card__catch { margin: 0 0 var(--space-sm); color: var(--service-color-strong); font-size: 14px; font-weight: 600; line-height: 1.6; }
@media (max-width: 767px) {
  .card--profile { display: block; text-align: center; }
  .card__avatar { width: 100px; height: 100px; margin: 0 auto var(--space-sm); }
}

/* リード文：本文冒頭の説明段落。枠・背景・線は付けず、本文より一段大きい文字と広めの行間だけで区別する（引用に見せない） */
.content .lead-text { font-size: 18px; line-height: 2; }
.content .lead-text + .note-small { margin-top: var(--space-md); }
/* 出所の注記：直前の段落の根拠を示す脚注。段落との間を詰めて、その段落に付いた注記に見せる */
.content .note-small--source { margin-top: calc(-1 * var(--space-xs)); }
/* 監修者表示：ラベル＋氏名を1行目、肩書きを2行目に。箱にせず上下の線（--line）だけで本文と分ける。顔写真は置かない */
.supervisor { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); padding: var(--space-sm) 0; margin: 0 0 1.5em; border-block: 1px solid var(--line); }
.content .supervisor p { margin: 0; line-height: 1.6; }
.content .supervisor__label { padding: 0 10px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--text-sub); color: var(--text-sub); font-size: 12px; font-weight: 600; }
.content .supervisor__name { font-weight: 700; }
.content .supervisor__title { flex-basis: 100%; color: var(--text-sub); font-size: 13px; }
/* リード強調文：サービスページ冒頭のリード文の中で、いちばん伝えたい一文（strong.lead-emphasis）。リード文より一段大きい太字の装飾用の赤。
   新しい色ルールの例外（サービスカラーが寒色・深色のとき埋もれるため）。押せる要素と見分けるため --accent は使わない */
.content .lead-emphasis { color: var(--accent); font-size: 20px; font-weight: 700; }
/* 用語の強調：注記の中の用語と正式名称（strong.term）。サイズは本文のまま、色だけサービスカラー（濃い版） */
.content .term { color: var(--service-color-strong); font-weight: 700; }

/* 番号バッジ：見出しやリンクカードの先頭の丸数字（❶など）を CSS の円で出す。色はサービスカラー（白い数字を載せるので濃い版） */
.num-badge { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 1.6em; height: 1.6em; margin-right: var(--space-xs); border-radius: 50%; background: var(--service-grad-text, var(--service-color-strong)); box-shadow: var(--service-badge-shadow, none); color: #fff; font-size: .9em; font-weight: 700; line-height: 1; vertical-align: .1em; }

/* リンクカード：.card-grid の .card を a にして、ページ内の各セクションへ飛ばす */
.card--link { display: flex; align-items: center; min-height: var(--tap-min); font-weight: 700; line-height: 1.6; text-decoration: none; transition: border-color .2s; }
.card--link:hover { border-color: var(--accent); color: var(--accent); }
/* .card-grid--jump：直下の小見出しへのリンクカード。スマホでは直後の小見出しと同じ文言が続いて重複して見えるので出さない（下の @media） */

/* 画像＋テキストの横並びで、PCだけ画像を右に置く（HTMLは画像を先に書く。スマホは画像 → テキスト） */
.media-block--img-right > :first-child { order: 2; }
.media-block > .figure { margin: 0; }
.media-block { margin: var(--space-md) 0 var(--space-lg); }
.media-block p:last-child { margin-bottom: 0; }
/* 活躍例（.media-block.interview-item）：画像の横に、名前（小さい前置き）→ 注目ポイント（h3.heading--minor）→ 本文 → 矢印リンク。
   名前は控えめにして、注目ポイントとの大きさの差で強弱をつける。項目の間は --space-lg */
.media-block > .wide-img { margin: 0; }
.content .interview-item__name { margin: 0 0 4px; font-size: 14px; color: var(--text-sub); }
/* .content .heading--minor の上下の余白（後ろで定義）に負けないよう、2クラスで指定する */
.content .heading--minor.interview-item__title { margin: 0 0 var(--space-xs); }
/* 矢印付きテキストリンク（a.arrow-link）：繰り返し出る項目ごとの「続きを読む」系のリンク。ボタンにすると並んで本命のボタンが埋もれるときに使う */
.arrow-link { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); color: var(--accent); font-size: 14px; text-decoration: none; }
.arrow-link::after { content: '›'; font-size: 18px; line-height: 1; transition: transform .2s; }
.arrow-link:hover::after { transform: translateX(3px); }
.content p:has(> .arrow-link:only-child) { margin: var(--space-xs) 0 0; }
/* 画像の横に置く解説パネル（.media-block > .frame）：枠の外側の余白は .media-block に任せる */
.media-block > .frame { margin: 0; }
/* .media-block--wide：本文幅（.narrow）の中でも、PC・タブレットは --container の幅まで左右にはみ出して広げる。
   文字の入ったスクリーンショットを読める大きさで出したいとき。画面が狭いときは左右の余白（24px）を残して画面幅まで。
   直前の小見出し（h3.heading--minor）も同じ幅に広げて、左端を画像にそろえる */
.media-block--wide, .content .heading--minor:has(+ .media-block--wide) { --media-wide: min(calc(var(--container) - 48px), calc(100vw - 48px)); width: var(--media-wide); margin-left: calc((100% - var(--media-wide)) / 2); margin-right: calc((100% - var(--media-wide)) / 2); }
/* 画像を主役にして、横の解説パネルは細く縦長に（画像：パネル ＝ 5：3） */
.media-block--wide { grid-template-columns: 5fr 3fr; }
.media-block--wide.media-block--img-right { grid-template-columns: 3fr 5fr; }
/* 機能カード（ul.feature-cards > li.feature-cards__item > h3.feature-cards__title ＋ p）：機能・特長の一覧を、本文幅からはみ出した2列のパネルで。
   幅は .media-block--wide と同じ式（.content ul の margin に負けないよう .content を付ける）。パネルは置かれる背景の反対の色、タイトルはサービスカラー */
.content .feature-cards { --feature-wide: min(calc(var(--container) - 48px), calc(100vw - 48px)); display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); width: var(--feature-wide); margin: var(--space-lg) calc((100% - var(--feature-wide)) / 2); padding: 0; list-style: none; }
.content .feature-cards__item { margin: 0; padding: var(--space-lg); border-radius: var(--radius-md); background: var(--chapter-bg-gray); }
.chapter--gray .feature-cards__item { background: #fff; }
.content .feature-cards__title { margin: 0 0 var(--space-sm); color: var(--service-color-strong); font-size: 20px; font-weight: 700; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
.feature-cards__item > :last-child { margin-bottom: 0; }
/* 番号付きの縦並びリスト（ol.point-list > li > p.point-list__title（span.point-list__num ＋見出し）＋本文）。
   画像横の解説パネルなど、列が狭く .row-list の左右2列が窮屈な所で使う。項目間は区切り線だけで、箱にしない */
.point-list { list-style: none; padding: 0; }
.content .point-list { margin: 0; }
.content .point-list > li { margin: 0; padding: var(--space-sm) 0; }
.content .point-list > li:first-child { padding-top: 0; }
.point-list > li + li { border-top: 1px solid var(--line); }
.content .point-list__title { margin: 0 0 var(--space-xs); font-weight: 700; line-height: 1.6; }
.point-list__num { margin-right: var(--space-xs); color: var(--accent-deco); }
.content .point-list > li > :last-child { margin-bottom: 0; }

/* 事例カード（横長）：画像（左）とタイトル・日付（右）。1枚だけ置くとき。文字が短く右が空きすぎるので、画像を半分にしてカード幅を本文より狭める */
.case-card--wide { display: grid; grid-template-columns: 1fr 1fr; max-width: 640px; gap: var(--space-md); align-items: center; margin: var(--space-md) 0 var(--space-lg); padding: var(--space-sm); border: 1px solid var(--line); }
.case-card--wide:hover { border-color: var(--accent); }
.case-card__body { display: flex; flex-direction: column; gap: 6px; }
/* 続きの折りたたみ（details.more）：冒頭は常に見せ、続きを開閉する。JSなしで動き、印刷では開いた状態で出す
   summary の中は .more__open（閉じているときの文言）と .more__close（「閉じる」）。押せるものなので色は --accent */
.content :is(p, li > p):has(+ .more) { margin-bottom: 0; }
.content .more { margin: 0 0 1.5em; }
.more summary { display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap-min); cursor: pointer; list-style: none; color: var(--accent); font-size: 14px; font-weight: 600; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; font-size: 18px; line-height: 1; }
.more[open] summary::after { content: '−'; }
.more__close, .more[open] .more__open { display: none; }
.more[open] .more__close { display: inline; }
.more > :not(summary):last-child { margin-bottom: 0; }
@media print { .more summary { display: none; } }
@media print { .more::details-content { content-visibility: visible; display: block; } }
/* 声のリスト（ul.voice-list > li.voice-list__item）：アンケートの声を全文のカードで1列に並べる。折りたたまない
   中身は p.voice-list__tag（種類のラベル）→ h3.voice-list__title → 本文の p → p.voice-list__who（職種。区切り線の下に右寄せ）
   装飾は足さず、細い線・余白・文字の大きさの差で区切る。枠は白背景のカードでもグレーの帯の上でも見えるよう --line のまま */
.content .voice-list { display: grid; gap: var(--space-sm); list-style: none; padding: 0; margin: 0 0 var(--space-lg); }
.content .voice-list__item { margin: 0; padding: var(--space-lg); background: #fff; border: 1px solid var(--line); }
.content .voice-list__tag { width: fit-content; margin: 0; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--service-color) 35%, white); color: var(--service-color-strong); font-size: 12px; line-height: 1.8; white-space: nowrap; }
.content .voice-list__title { margin: var(--space-xs) 0 var(--space-sm); font-size: 20px; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.content .voice-list__item > p { line-height: 2; }
.content .voice-list__item > .voice-list__who { margin: var(--space-md) 0 0; padding-top: var(--space-sm); border-top: 1px solid var(--line); color: var(--text-sub); font-size: 14px; line-height: 1.6; text-align: right; }
@media (max-width: 767px) {
  .content .voice-list__item { padding: var(--space-md); }
  .content .voice-list__title { font-size: 18px; }
}
/* 章の1行リード（p.section-lead）：h2 の直後に、その章で何が分かるかを1文で。本文より少し小さく、補助の色 */
.content .section-lead { margin-block: calc(-1 * var(--space-xs)) var(--space-md); color: var(--text-sub); font-size: 15px; }
/* 資料カード（.case-card--doc）：資料の表紙は縦長・横長が混ざるので切り抜かずに全体を見せ、抜粋は2行で省略する */
.case-card--doc .case-card__thumb { background: var(--bg-gray); }
.case-card--doc .case-card__thumb img { object-fit: contain; }
.case-card--doc .case-card__excerpt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }

/* 資料DLカード：資料の表紙＋短い紹介＋白抜きボタン。上の線と見出しはサービスカラー（未設定のページは赤） */
.doc-cta { margin: var(--space-lg) 0; padding: var(--space-md); border: 1px solid var(--line); border-top: 4px solid var(--service-color); background: #fff; }
.content .doc-cta__title { margin: 0 0 var(--space-md); text-align: center; font-size: 18px; font-weight: 700; color: var(--service-color-strong); text-wrap: balance; word-break: auto-phrase; }
.doc-cta__body { display: grid; grid-template-columns: 240px 1fr; gap: var(--space-lg); align-items: center; }
.doc-cta__thumb { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.doc-cta__text { text-align: center; }
/* 紹介文が長いとき：本文だけ左揃えにする（ボタンは中央のまま） */
.doc-cta--long .doc-cta__text p { text-align: left; }
.content .doc-cta__lead { margin: 0 0 var(--space-sm); font-size: 20px; font-weight: 700; line-height: 1.6; }
@media (max-width: 1023px) {
  .cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* 比較カード：.card-grid の2枚。色はベン図に合わせる（上の太線と淡い背景） */
.card--teal { border-top: 6px solid var(--venn-teal); background: color-mix(in srgb, var(--venn-teal) 8%, #fff); }
.card--yellow { border-top: 6px solid var(--venn-yellow); background: color-mix(in srgb, var(--venn-yellow) 12%, #fff); }
/* 枠なし版：近くに同じ色の図があるとき。背景・枠を消し、上の太線と見出しの色だけ残す（見出しは読めるよう暗くする） */
.card--flat { background: none; border-right: 0; border-bottom: 0; border-left: 0; padding: var(--space-sm) 0 0; }
.card--flat.card--teal .card__title { color: color-mix(in srgb, var(--venn-teal) 70%, #000); }
.card--flat.card--yellow .card__title { color: color-mix(in srgb, var(--venn-yellow) 50%, #000); }

/* 横長リスト：番号＋タイトル（左）と本文（右）を1行に。本文が長くて .cols-3 に収まらないとき */
.row-list { list-style: none; padding: 0; margin: var(--space-md) 0 var(--space-lg); border-top: 1px solid var(--line); }
.content .row-list__item { display: grid; grid-template-columns: 30% 1fr; gap: var(--space-lg); margin: 0; padding: var(--space-md) 0; border-bottom: 1px solid var(--line); }
.row-list__head { display: flex; align-items: flex-start; gap: var(--space-sm); }
.row-list__num { flex: none; margin-bottom: 0; }
.content .row-list__title { margin: 6px 0 0; font-size: 17px; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.row-list__body > :last-child { margin-bottom: 0; }
/* 番号なし（ul.row-list.row-list--plain）：目次型の行。項目に順番がないとき。タイトル列は 35%、タイトルはサービスカラーで大きく */
.content .row-list--plain .row-list__item { grid-template-columns: 35% 1fr; }
.content .row-list--plain .row-list__title { margin: 0; color: var(--service-color-strong); font-size: 22px; font-weight: 700; line-height: 1.5; }
/* タイトルが短い（8文字前後）とき（.row-list--short-title を併用）：タイトル列を 25% に、列の間を詰める（例：psycap-master の8週間のプログラム詳細） */
.content .row-list--short-title .row-list__item { grid-template-columns: 25% 1fr; gap: var(--space-md); }
/* 線を項目の間だけに（.row-list--between を併用）：リストの上と最後の項目の下の線を消す（例：psycap-master の8週間のプログラム詳細） */
.row-list--between { border-top: 0; }
.content .row-list--between .row-list__item:last-child { border-bottom: 0; }
/* 対象者の列（ul.audience-list）：短い対象者を横4列に。列の間は縦の細い罫線だけで、箱・アイコン・番号なし（タブレット2×2、スマホ1列） */
.audience-list { display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; padding: 0; margin: var(--space-md) 0 0; }
.content .audience-list__item { margin: 0; padding: 0 var(--space-sm); }
.audience-list__item:first-child { padding-left: 0; }
.audience-list__item:last-child { padding-right: 0; }
.audience-list__item + .audience-list__item { border-left: 1px solid var(--line); }
.content .audience-list__title { margin: 0 0 var(--space-xs); color: var(--service-color-strong); font-size: 19px; font-weight: 700; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
.content .audience-list__item p { margin: 0; color: var(--text-sub); font-size: 14px; line-height: 1.7; }
/* 2×2（.audience-list--2col）：PCでも2列。タイトルの長さがばらつき、4列だと列幅が不揃いに見えるとき。スマホは1列のまま */
.audience-list--2col { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
.audience-list--2col .audience-list__item:nth-child(odd) { padding-left: 0; padding-right: var(--space-sm); border-left: 0; }
.audience-list--2col .audience-list__item:nth-child(even) { padding-left: var(--space-sm); padding-right: 0; }
@media (max-width: 1023px) {
  .audience-list { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-lg); }
  .content .audience-list__item:nth-child(odd) { padding-left: 0; padding-right: var(--space-sm); border-left: 0; }
  .content .audience-list__item:nth-child(even) { padding-left: var(--space-sm); padding-right: 0; }
}

/* 小見出し（h3）：上の余白と短い線で区切る。バーは h2 だけ */
.content .heading-sub { margin: var(--space-lg) 0 var(--space-sm); font-size: 18px; font-weight: 700; color: var(--text); }
/* 見出し・カードタイトルは文節で改行し、行の長さを揃える（auto-phrase 非対応のブラウザは通常の改行） */
.heading-sub, .card--link, .case-card__title { text-wrap: balance; word-break: auto-phrase; }
.heading-sub::before { content: ''; display: block; width: 32px; height: 2px; margin-bottom: var(--space-xs); background: var(--text); }

/* ---------- 見出しの4つの型（試行中：service/heroic・licence-heroic） ----------
   共通の .heading-line／.heading-sub は変えず、型のクラスを付けた見出しだけに効く（opt-in）。使い分けは docs/design-rules.md の「4つの型」
   装飾（線・番号バッジ・項目ラベル）はサービスカラー。ボタン・リンクは赤のまま
   --service-tint：訴求帯の背景。--service-color から作るので、--service-color-light と同じく [data-service] の要素自身でも宣言する */
:root, [data-service] { --service-tint: color-mix(in srgb, var(--service-color) 9%, white); }
/* 訴求帯：Type A の章をのせる全幅の帯（section.chapter に付ける）。白い章と交互に置き、帯どうしを続けない */
.chapter--tint { background: var(--service-band-bg, var(--service-tint)); }
/* --line-on-tint：帯の上の罫線。--line（#ddd）は帯の色に溶けて見えないので、帯の色にサービスカラーを 25% 混ぜる */
.chapter--tint { --line-on-tint: color-mix(in srgb, var(--service-color) 25%, var(--service-band-bg, var(--service-tint))); }
.chapter--tint .row-list, .chapter--tint .content .row-list__item { border-color: var(--line-on-tint); }
/* 帯の上の箱は白（背景の反対）。枠線は消す */
.chapter--tint .card { border-color: transparent; border-radius: var(--radius-md); }
.chapter--tint .content .pullquote { background: #fff; }
.chapter--tint .frame__label { background: var(--service-tint); }
/* Type A 訴求見出し（h2.heading--appeal）：中央・30px。装飾なし。直後の導入段落も中央揃え */
.content .heading--appeal { margin: var(--space-xl) 0 var(--space-md); text-align: center; font-size: 30px; font-weight: 700; text-wrap: balance; word-break: auto-phrase; }
.content .heading--appeal + p { max-width: 620px; margin: 0 auto var(--space-lg); text-align: center; font-size: 16px; text-wrap: balance; word-break: auto-phrase; }
/* 直後の段落を導入段落にせず、通常の本文（左揃え・本文幅）として出すとき（p.no-lead）。複数段落の説明が続く章で使う */
.content .heading--appeal + p.no-lead { max-width: none; margin: 0 0 1em; text-align: left; text-wrap: wrap; word-break: normal; }
/* Type B 本文見出し（h2.heading--body）：左揃え・22px。装飾は左の線だけ */
.content .heading--body { margin: var(--space-xl) 0 var(--space-md); padding-left: var(--space-sm); border-left: 4px solid var(--service-color); border-image-source: var(--service-grad-line, none); border-image-slice: 1; font-size: 22px; font-weight: 600; text-wrap: balance; word-break: auto-phrase; }
/* Type C 項目見出し：div.point-panel > h3.point-panel__title（span.point-panel__label ＋ <br> ＋ タイトル）＋本文
   パネルは置かれる背景の反対の色（白い章ではグレー、帯の上では白）。枠線・影は付けない */
.point-panel { margin: var(--space-md) 0; padding: var(--space-md); background: var(--chapter-bg-gray); border-radius: var(--radius-md); }
.chapter--tint .point-panel, .chapter--gray .point-panel { background: #fff; }
.content .point-panel__title { margin: 0 0 var(--space-sm); font-size: 18px; font-weight: 700; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.point-panel__label { font-size: 14px; color: var(--service-color); }
.point-panel > :last-child { margin-bottom: 0; }
/* パネルで番号見出しのまとまりを1つずつ囲むとき（h3.heading--numbered ＋本文）：見出しの上は詰め、見出し→本文は通常より少し狭く */
.content .point-panel > .heading--numbered { margin: 0 0 var(--space-sm); }
.point-panel > .heading--numbered + .cols-2 { margin-top: 0; }
.point-panel > .heading--numbered + .cols-2 > div > :last-child { margin-bottom: 0; }
/* Type D 手順見出し（h3.heading--numbered > span.num-badge ＋文言）：装飾はバッジだけ。
   バッジは1行目の高さの中央に置き、折り返した2行目は文字の先頭（バッジの右）に揃える */
.content .heading--numbered { --heading-fs: 20px; display: flex; align-items: flex-start; margin: var(--space-xl) 0 var(--space-sm); font-size: var(--heading-fs); font-weight: 700; line-height: 1.5; text-wrap: balance; word-break: auto-phrase; }
.heading--numbered::before { content: none; }
/* 章の見出しの直後に続くときは、見出しの下の余白だけ空ける */
.content :is(.heading--appeal, .heading--body) + .heading--numbered { margin-top: 0; }
.heading--numbered .num-badge { width: 28px; height: 28px; margin: calc((var(--heading-fs) * 1.5 - 28px) / 2) var(--space-xs) 0 0; font-size: 15px; vertical-align: 0; }
/* 小見出し（型に当てはまらない h3。h3.heading--minor）：線なし・18px。サイズと上の余白だけで区切る。カードのタイトルにも付ける */
.content .heading--minor { margin: var(--space-lg) 0 var(--space-sm); font-size: 18px; font-weight: 700; line-height: 1.6; }
.content .card .heading--minor { margin: 0 0 var(--space-xs); }
@media (max-width: 767px) {
  .content .heading--appeal { font-size: 24px; }
  .content .heading--body { font-size: 19px; }
  .content .heading--numbered { --heading-fs: 18px; }
  .point-panel { padding: var(--space-md) var(--space-sm); }
  .content .heading--minor { font-size: 17px; }
}
/* 声のカード（.card.voice-card）：先頭に顔写真＋会社名・役職・お名前のヘッダー行（div.voice-card__head > img.voice-card__photo ＋ h3.voice-card__name > span.voice-card__org）。
   本文とは区切り線で分ける */
.voice-card__head { display: flex; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-md); padding: 0 0 var(--space-md); border-bottom: 1px solid var(--line); }
.content .voice-card__photo { flex: none; width: 88px; height: 88px; margin: 0; border-radius: 50%; object-fit: cover; }
.content .voice-card__name { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.voice-card__org { display: block; color: var(--text-sub); font-size: 14px; font-weight: 400; }
@media (max-width: 1023px) {
}
@media (max-width: 767px) {
  .voice-card__head { gap: var(--space-sm); }
  .content .voice-card__photo { width: 64px; height: 64px; }
}

/* ---------- 新しい色ルール（移行中：<main data-color-rule="service">。front matter／services.json の colorRule: service） ----------
   装飾全般（線・番号・番号バッジ・ラベル・訴求帯の背景）をサービスカラーに、Be&Do の赤（--accent）はボタン・リンクだけ。docs/design-rules.md の「新しい色ルール」
   文字・白文字の下地は --service-color-strong、線・アイコンは --service-color。サービスカラー未設定のページは赤のまま（:root・[data-service] の既定値）
   全ページ移行後は data-color-rule を外し、ここを各部品の既定の色にする */
[data-color-rule="service"] { --service-tint: var(--service-tint-own, var(--chapter-bg-gray)); }
[data-color-rule="service"] .content h4,
[data-color-rule="service"] .frame__label,
[data-color-rule="service"] .content .split-blocks__label,
[data-color-rule="service"] .steps__num,
[data-color-rule="service"] .def-list dt,
[data-color-rule="service"] .content .statement strong,
[data-color-rule="service"] .heading-kicker,
[data-color-rule="service"] .section-title__en,
[data-color-rule="service"] .chapter-heading__en,
[data-color-rule="service"] .point-panel__label,
[data-color-rule="service"] .point-list__num { color: var(--service-color-strong); }
[data-color-rule="service"] .tag-label,
[data-color-rule="service"] .card__num,
[data-color-rule="service"] .row-list__num { background: var(--service-color-strong); }
/* 項目ラベルの控えめな版：対になるラベル（課題／実現する姿など）を見た目で分ける。--outline は塗りなしのグレー枠、--soft はサービスカラーの淡い塗り＋濃い文字 */
.tag-label.tag-label--outline { background: none; box-shadow: inset 0 0 0 1px var(--text-sub); color: var(--text-sub); border-radius: var(--radius-sm); }
.tag-label.tag-label--soft { background: color-mix(in srgb, var(--service-color) 12%, white); color: var(--service-color-strong); border-radius: var(--radius-sm); }
/* 文中に置くラベル：上下の余白で行間を広げないよう、余白は左だけにして小さめにする */
.tag-label.tag-label--inline { margin: 0 0 0 var(--space-xs); padding: 0 10px; font-size: 12px; vertical-align: .1em; }
[data-color-rule="service"] .steps__item:not(:last-child)::before { background: var(--service-color); }
[data-color-rule="service"] .check-list li::before { color: var(--service-color); }
[data-color-rule="service"] .marker { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--service-color) 15%, white) 60%); }
/* 淡い赤の背景（お問合せ帯と同じ色）を使っていた部品は、訴求帯の色にする。帯の上では白のまま */
[data-color-rule="service"] .content .pullquote { background: var(--service-tint); }
[data-color-rule="service"] .chapter--tint .content .pullquote { background: #fff; }

/* タグ：押せないラベル。枠線のみの小さな角丸 */
.tag-list { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: var(--space-sm) 0 0; }
.content .tag-list li { margin: 0; }
.tag { display: inline-block; padding: 2px 10px; border: 1px solid var(--text-sub); border-radius: var(--radius-sm); color: var(--text-sub); font-size: 13px; line-height: 1.6; cursor: default; }

/* 分類ブロック：【組織】【個人】【事業】のように並ぶ文を3つに分ける。.frame の中に置く */
.split-blocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-bottom: var(--space-sm); }
.content .split-blocks__label { margin: 0 0 var(--space-xs); color: var(--accent-deco); font-weight: 700; line-height: 1.5; }
.split-blocks p:last-child { margin-bottom: 0; }
/* 縦並び版：ブロックごとの文章量の差が大きいとき。ラベル（左・固定幅）＋本文（右）を区切り線で並べる */
.split-blocks--stack { grid-template-columns: 1fr; gap: 0; }
.split-blocks--stack > div { display: grid; grid-template-columns: 6em 1fr; gap: var(--space-md); padding: var(--space-sm) 0; }
.split-blocks--stack > :first-child { padding-top: 0; }
.split-blocks--stack > :last-child { padding-bottom: 0; }
.split-blocks--stack > * + * { border-top: 1px solid var(--line); }
.content .split-blocks--stack .split-blocks__label { margin: 0; }

/* ステップ：<ol class="steps"> に丸数字と本文。丸数字（①など）は文字のまま大きく出し、縦線でつなぐ */
.steps { list-style: none; padding: 0; margin: var(--space-lg) 0; }
.content .steps__item { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 0 var(--space-sm); margin: 0; padding-bottom: var(--space-lg); }
.steps__item:not(:last-child)::before { content: ''; position: absolute; left: 23px; top: 52px; bottom: var(--space-xs); width: 2px; background: var(--accent-deco); opacity: .4; }
.steps__num { color: var(--accent-deco); font-size: 40px; line-height: 48px; text-align: center; }
.content .steps__title { margin: 8px 0 var(--space-xs); }
.steps__body > :last-child { margin-bottom: 0; }

/* 引用ブロック：本文中で強調する一文。淡い赤の背景。
   補足文を添えるときは div.pullquote に p.pullquote__text ＋ p.pullquote__note を入れる */
.content .pullquote { margin: var(--space-xl) 0; padding: var(--space-lg) var(--space-md); background: var(--chapter-bg-cta); text-align: center; font-size: 20px; font-weight: 600; line-height: 1.8; }
.content .pullquote__text { margin: 0; line-height: 1.8; text-wrap: balance; word-break: auto-phrase; }
.content .pullquote__note { margin: var(--space-sm) 0 0; font-size: 15px; font-weight: 400; line-height: 1.8; }

/* バナー写真：写真を高さを抑えて切り出す（object-fit）。顔が切れるときは style="--focus: 50% 30%" で位置を指定 */
.banner-photo { display: block; width: 100%; aspect-ratio: 5 / 1; object-fit: cover; object-position: var(--focus, 50% 50%); margin: var(--space-lg) 0; }

/* ページ内目次：本文に {{toc}} を置くと、ビルド時に h2[id] から作る。PCはリスト、スマホは折りたたみ */
.toc { margin: var(--space-lg) 0; padding: var(--space-md); background: var(--bg-gray); }
.toc__title { margin: 0 0 var(--space-xs); font-weight: 700; }
.content .toc__list { columns: 2; column-gap: var(--space-lg); margin: 0; padding-left: 1.5em; }
.content .toc__list li { margin: 0 0 var(--space-xs); break-inside: avoid; }
.toc__list a { text-decoration: none; }
.toc__list a:hover { color: var(--accent); text-decoration: underline; }
.toc--sp { display: none; }
.toc--sp summary { display: flex; align-items: center; justify-content: space-between; min-height: var(--tap-min); cursor: pointer; font-weight: 700; list-style: none; }
.toc--sp summary::-webkit-details-marker { display: none; }
.toc--sp summary::after { content: '+'; color: var(--accent); font-size: 20px; }
.toc--sp[open] summary::after { content: '−'; }
.toc--sp[open] summary { margin-bottom: var(--space-xs); }

@media (max-width: 767px) {
  .heading-line { font-size: 19px; }
  .prose .lead { font-size: 16px; }
  .cols-4 { grid-template-columns: 1fr; }
  .content .lead-text { font-size: 17px; }
  .content .lead-emphasis { font-size: 19px; }
  .card-grid--jump { display: none; }
  .page-hero--service + .chapter { padding-top: var(--space-lg); }
  .media-block--img-right > :first-child { order: 0; }
  .media-block { gap: var(--space-md); }
  .media-block > .frame { margin-top: var(--space-xs); }
  .media-block--wide, .media-block--wide.media-block--img-right { width: auto; margin-left: 0; margin-right: 0; grid-template-columns: 1fr; }
  .content .heading--minor:has(+ .media-block--wide) { width: auto; margin-left: 0; margin-right: 0; }
  .case-card--wide { grid-template-columns: 1fr; gap: var(--space-sm); }
  .figure__zoom { display: flex; align-items: center; justify-content: flex-end; min-height: var(--tap-min); margin-top: 0; }
  .doc-cta { padding: var(--space-md) var(--space-sm); }
  .doc-cta__body { grid-template-columns: 1fr; gap: var(--space-md); }
  .doc-cta__thumb { max-width: 240px; margin: 0 auto; }
  .split-blocks { grid-template-columns: 1fr; gap: var(--space-sm); }
  .split-blocks > * + * { padding-top: var(--space-sm); border-top: 1px solid var(--line); }
  .split-blocks--stack > div { grid-template-columns: 1fr; gap: 0; }
  .content .split-blocks--stack .split-blocks__label { margin-bottom: var(--space-xs); }
  .content .row-list__item { grid-template-columns: 1fr; gap: var(--space-sm); }
  .content .row-list--plain .row-list__item { grid-template-columns: 1fr; }
  .content .row-list--short-title .row-list__item { gap: var(--space-sm); }
  .content .row-list--plain .row-list__title { font-size: 19px; }
  .content .feature-cards { grid-template-columns: 1fr; gap: var(--space-sm); }
  .content .feature-cards__item { padding: var(--space-md); }
  .content .feature-cards__title { font-size: 18px; }
  .audience-list { grid-template-columns: 1fr; row-gap: var(--space-md); }
  .content .audience-list .audience-list__item { padding: 0; border-left: 0; }
  .content .audience-list__title { font-size: 18px; }
  .content .heading-sub { font-size: 17px; }
  .content .steps__item { grid-template-columns: 32px 1fr; gap: 0 12px; }
  .steps__item:not(:last-child)::before { left: 15px; top: 40px; width: 1px; }
  .steps__num { font-size: 28px; line-height: 40px; }
  .content .steps__title { margin-top: 6px; }
  .content .pullquote { margin: var(--space-lg) 0; padding: var(--space-md) var(--space-sm); font-size: 17px; }
  .banner-photo { aspect-ratio: 3 / 1; margin: var(--space-md) 0; }
  .toc { padding: var(--space-xs) var(--space-sm); }
  .toc--pc { display: none; }
  .toc--sp { display: block; }
  .content .toc__list { columns: 1; }
  .toc__list a { display: inline-block; padding: 6px 0; }
}

/* 改行させない範囲：外部リンクのアイコンと直後の閉じかっこ（」など）を同じ行にまとめる。
   <span class="nowrap"><a>…<span class="nowrap__wrap">リンク文言の前半</span>）{{ext_icon}}</a>」</span> のように、
   折り返してよい部分は .nowrap__wrap で包む */
.nowrap { white-space: nowrap; }
.nowrap__wrap { white-space: normal; }

/* 参考ボックス：本文の補足（参考記事の紹介とURLなど）。グレーの背景。引用（.pullquote）とは別 */
.content .ref-box { margin: var(--space-lg) 0; padding: var(--space-md); background: var(--chapter-bg-gray); font-size: 15px; }
.chapter--gray .content .ref-box { background: #fff; }
.ref-box > :last-child { margin-bottom: 0; }
.ref-box a { overflow-wrap: anywhere; }

/* 3列（.cols-3）をタブレットから1列にする。1列あたりの文章が長く、タブレットの3列が窮屈なとき */
@media (max-width: 1023px) {
  .cols-3--tablet-1 { grid-template-columns: 1fr; gap: var(--space-lg); }
}
/* 列の先頭のイラスト（.cols-3 の中）。1列になる幅では縮めて中央に置く */
.content .illust { display: block; width: 100%; height: auto; margin: 0 auto var(--space-sm); }
.content .illust + .heading--minor { margin-top: 0; }
@media (max-width: 1023px) {
  .cols-3--tablet-1 .illust { max-width: 160px; }
}
@media (max-width: 767px) {
  .cols-3 .illust { max-width: 140px; }
}

/* 画像の上下の白い余白をスマホだけ詰める（PCはそのまま）。style="--iw:画像の幅;--trim-top:上の余白;--trim-bottom:下の余白"（画像のpx）。
   画像が親の幅いっぱいに表示されるとき（.wide-img など）に使う */
@media (max-width: 767px) {
  .content img.trim-sp { margin-top: calc(var(--trim-top, 0) / var(--iw) * -100%); margin-bottom: calc(var(--trim-bottom, 0) / var(--iw) * -100%); }
}

/* 図（横スクロール）：文字の入った横長の図。スマホでは縮めると読めないので、幅を保ったまま枠の中で横にスクロールさせる */
.figure-scroll { margin: var(--space-lg) 0; }
.figure-scroll img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) {
  .figure-scroll { overflow-x: auto; }
  .figure-scroll img { width: 960px; max-width: none; }
}

/* 番号タイムライン：<ol class="timeline"> の各 li の先頭に丸い番号バッジ（CSSで自動採番）を付け、縦線でつなぐ。
   li の中身はそのまま（太字のタイトル＋<br>＋本文、入れ子の ul も可）。番号を文字で書かないときに使う（文字で書くなら .steps） */
.content .timeline { list-style: none; padding: 0; margin: var(--space-lg) 0; counter-reset: timeline; }
.content .timeline > li { position: relative; counter-increment: timeline; margin: 0; padding: 0 0 var(--space-lg) 48px; }
.content .timeline > li:last-child { padding-bottom: 0; }
.timeline > li::before { content: counter(timeline); position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--service-color-strong); color: #fff; font-size: 15px; font-weight: 700; line-height: 1; }
.timeline > li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 40px; bottom: var(--space-xs); width: 2px; background: var(--service-color); opacity: .3; }
.content .timeline ul { margin: var(--space-xs) 0 0; }
@media (max-width: 767px) {
  .content .timeline > li { padding-left: 40px; }
  .timeline > li::before { width: 28px; height: 28px; font-size: 14px; }
  .timeline > li:not(:last-child)::after { left: 13px; top: 36px; }
}

/* CTAの導入：お問合せの帯（.chapter--cta）でボタンの上に置く、イラスト＋説明文。PCは横並び、スマホはイラストを小さく上に */
.cta-media { display: flex; align-items: center; justify-content: center; gap: var(--space-lg); }
.cta-media__img { flex: none; width: 200px; }
.content .cta-media__text { margin: 0; line-height: 2; }
@media (max-width: 767px) {
  .cta-media { flex-direction: column; gap: var(--space-sm); }
  .cta-media__img { width: 140px; }
  .content .cta-media__text { text-align: center; text-wrap: balance; word-break: auto-phrase; }
}

/* ---------- セミナー（/category/seminar/） ---------- */
.seminar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.seminar-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.seminar-card:hover { border-color: var(--accent); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); }
.seminar-card__thumb { aspect-ratio: 1280 / 670; overflow: hidden; background: var(--bg-dark); display: grid; place-items: center; color: #fff; font-weight: 600; letter-spacing: .1em; }
.seminar-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.seminar-card:hover .seminar-card__thumb img { transform: scale(1.04); }
.seminar-card__body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1; }
.seminar-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12px; color: var(--text-sub); }
.seminar-card__tag { border: 1px solid var(--accent-deco); color: var(--accent-deco); font-size: 11px; font-weight: 600; padding: 0 8px; line-height: 1.9; }
.seminar-card__title { font-size: 16px; font-weight: 700; line-height: 1.6; }
.seminar-card:hover .seminar-card__title { color: var(--accent); }
.seminar-card__desc { font-size: 13px; line-height: 1.8; color: var(--text-sub); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.seminar-card__more { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; border: 1px solid var(--accent); color: var(--accent); background: #fff; border-radius: var(--radius-pill); padding: 6px 20px; font-size: 13px; font-weight: 600; transition: background .2s, color .2s; }
.seminar-card:hover .seminar-card__more { background: var(--accent); color: #fff; }
.seminar-more { margin-top: 64px; padding: 48px 24px; background: var(--chapter-bg-cta); text-align: center; }
.seminar-more__en { color: var(--accent-deco); letter-spacing: .2em; font-size: 13px; font-weight: 600; margin: 0; }
.seminar-more__title { font-size: 22px; margin: 4px 0 12px; }
.content .seminar-more__text { margin-bottom: 28px; color: var(--text-sub); }
@media (width <= 1100px) {
  .seminar-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .seminar-grid { grid-template-columns: 1fr; gap: 20px; }
  .seminar-more { margin-top: 48px; padding: 40px 16px; }
  .seminar-more__title { font-size: 20px; }
}

/* ---------- 画像の一部を切り出して表示（.crop） ----------
   1枚の図から一部分だけを見せる。style で元画像の幅（--iw）と、切り出す範囲（--x, --y, --w, --h：元画像のpx）を渡す
   <span class="crop" style="--iw:1024;--x:31;--y:44;--w:260;--h:252"><img src="…" alt="…" width="1024" height="341"></span> */
.crop { display: block; position: relative; overflow: hidden; aspect-ratio: var(--w) / var(--h); }
.crop img { position: absolute; max-width: none; height: auto; margin: 0; width: calc(var(--iw) / var(--w) * 100%); left: calc(var(--x) / var(--w) * -100%); top: calc(var(--y) / var(--h) * -100%); }

/* ---------- サービス：自走型トレーニングフレームワーク（/service/autonomy-framework/） ----------
   本文が章帯（.chapter）を組む形。白とグレーを交互に敷く */
:root {
  /* 6テーマのバナー画像（organization_probrem）の紺。バナーを組み直しても配色を変えないよう、画像の色をそのまま使う */
  --banner-navy: #0b345d;
}
/* ヒーローからリードまでの余白を、ほかのサービスページ（.content の上余白）と揃える */
.chapter.svc-intro { padding-top: 48px; }
.svc-intro .lead { font-size: 20px; font-weight: 600; line-height: 1.7; margin-bottom: 32px; }
/* 中央揃えの文は、最後の行に1〜2文字だけ残らないよう行の長さを揃える */
.svc-intro .lead, .svc-intro ~ .chapter .statement { text-wrap: balance; word-break: auto-phrase; }
.svc-intro .content p:not(.lead):not(.lead-catch) { text-align: left; }
.chapter > .content { padding-top: 0; padding-bottom: 0; }
.chapter .content > :first-child { margin-top: 0; }
.chapter .content > :last-child { margin-bottom: 0; }

/* 課題カード：課題文と「私たちなら例えば…」を分け、解決の開始位置を3列で揃える（subgrid） */
.svc-issues { grid-template-rows: auto auto 1fr; row-gap: 0; }
.svc-issue { display: grid; grid-row: span 3; grid-template-rows: subgrid; background: #fff; }
.svc-issue > p:first-child { margin: 0; }
.content .svc-issue__problem { margin: 0; padding: 16px 20px; font-weight: 600; }
.svc-issue__solution { padding: 16px 20px 20px; background: var(--chapter-bg-cta); border-top: 2px solid var(--accent-deco); }
.svc-issue__solution > :last-child { margin-bottom: 0; }
.svc-issue__solution strong { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-deco); }
/* ✅ は文字として残し、見た目だけ赤いチェックのSVGにする（絵文字はOSで色と形が変わるため） */
.svc-check { display: inline-block; flex: none; width: 1.15em; height: 1.15em; overflow: hidden; color: transparent; background: var(--accent-deco); border-radius: 50%; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17.2-5-5 1.8-1.8 3.2 3.2 7-7 1.8 1.8z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-1.6 17.2-5-5 1.8-1.8 3.2 3.2 7-7 1.8 1.8z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* 3つの柱：柱・×・柱・×・柱の5列。説明文は各アイコンの直下 */
.svc-pillars { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 0 12px; align-items: start; margin: 40px 0 0; }
.svc-pillar .crop { max-width: 240px; margin: 0 auto 20px; }
.content .svc-pillar p { font-size: 15px; margin: 0; }
/* × はアイコンの高さの中ほどに合わせる */
.svc-pillars__x { margin-top: 58px; }

/* 6テーマ：紺の帯に円を並べ、ラベルを円の下に文字で出す */
.svc-themes { position: relative; background: var(--banner-navy); padding: 40px 32px 32px; margin: 0; }
.svc-themes::after { content: ''; position: absolute; left: 50%; bottom: -27px; transform: translateX(-50%); border: 28px solid transparent; border-top-color: var(--banner-navy); border-bottom: 0; }
.content .svc-themes__list { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px 12px; }
.content .svc-themes__list li { margin: 0; text-align: center; color: #fff; font-size: 13px; font-weight: 600; line-height: 1.5; letter-spacing: 0; }
.svc-themes__list .crop { width: 100%; max-width: 112px; margin: 0 auto 10px; border-radius: 50%; }
.svc-themes__text { max-width: 600px; margin: 0 auto; }

/* HERO図とラベル一覧。図はスマホで「拡大して見る」リンクを出す（.figure の共通ルール） */
.svc-figure { margin-bottom: 0; }
.content .svc-labels { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.content .svc-labels li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 14px; background: var(--bg-gray); font-size: 14px; font-weight: 600; line-height: 1.5; }
.svc-labels .crop { flex: none; width: 52px; }

/* 根拠の段落：本文と同じ大きさで、淡い赤の箱に入れる（グレーの章帯の上に置くため）。数字だけ大きく赤く */
.content .svc-evidence { background: var(--chapter-bg-cta); padding: 28px 32px; margin: 0; font-size: 16px; }
.svc-evidence strong { color: var(--accent); font-size: 1.6em; font-weight: 700; line-height: 1; white-space: nowrap; margin: 0 .1em; }

@media (max-width: 1023px) {
  .content .svc-themes__list { grid-template-columns: repeat(3, 1fr); gap: 24px 16px; }
  .content .svc-labels { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
  .chapter.svc-intro { padding-top: var(--space-lg); }
  .svc-intro .lead { font-size: 17px; }
  .content .svc-center { text-align: left; }
  .content .svc-center br { display: none; }
  .svc-issues { grid-template-rows: none; row-gap: 24px; }
  .svc-issue { grid-row: auto; display: block; border: 1px solid var(--line); }
  .svc-pillars { grid-template-columns: 1fr; gap: 0; margin: 32px 0 48px; }
  .svc-pillars__x { display: none; }
  .svc-pillars__x + .svc-pillar { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--line); }
  .svc-pillar .crop { max-width: 200px; margin-bottom: 16px; }
  .svc-themes { padding: 28px 16px 20px; margin-left: -4px; margin-right: -4px; }
  .content .svc-themes__list { gap: 20px 8px; }
  .content .svc-themes__list li { font-size: 12px; }
  .svc-themes__list .crop { max-width: 88px; margin-bottom: 8px; }
  .svc-themes__text { max-width: none; }
  .content .svc-labels { grid-template-columns: 1fr; gap: 8px; margin-top: 20px; }
  .content .svc-evidence { padding: 20px 16px; margin: 0 -4px; }
  .svc-evidence strong { font-size: 1.3em; }
}

/* ---------- 看板セクション（.signature-*） ----------
   サービスページごとに1つだけ許可する、そのページ専用の見た目（docs/design-rules.md の「看板セクション（例外）」）。ここ以外にページ専用CSSを書かない */

/* cg1：成果につながる理由。経済誌の特集ページ風に、箱を減らして文字の大きさ・細い罫線・余白で見せる。
   縦一列で 見出し（小さなラベル）→ 答え（このページで一番大きい文字）→ 98% の帯 → グラフの白パネル → 注記 → 根拠の本文（.signature-cg1 の外）。
   h2 はタグと id はそのまま、見た目だけラベルにする（.heading--appeal は付けない）。幅は本文幅（.narrow）のまま */
.signature-cg1 { margin: 0 0 var(--space-lg); }
.content .signature-cg1__label { margin: 0 0 var(--space-sm); text-align: center; color: var(--service-color-strong); font-size: 15px; font-weight: 700; line-height: 1.6; }
.content p.signature-cg1__statement { margin: 0 0 var(--space-lg); text-align: center; color: var(--text); font-size: 30px; font-weight: 700; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.content p.signature-cg1__statement strong { color: var(--service-color-strong); }
/* 98%：数字＋右にラベル・注記の横一列を、上下の罫線ではさむ帯。数字は中サイズの画面で大きくなりすぎないよう 48〜64px */
.signature-cg1__stat { display: flex; justify-content: center; align-items: center; gap: var(--space-md); margin: 0 0 var(--space-lg); padding: var(--space-md) 0; border-top: 1px solid var(--line-on-tint, var(--line)); border-bottom: 1px solid var(--line-on-tint, var(--line)); }
.content .signature-cg1__num { flex: none; margin: 0; color: var(--service-color-strong); font-size: clamp(48px, 6vw, 64px); font-weight: 700; line-height: 1; }
.signature-cg1__num small { font-size: .4em; }
.content .signature-cg1__stat-text > p { margin: 0; }
.content .signature-cg1__stat-label { font-size: 18px; font-weight: 700; line-height: 1.5; }
.content .signature-cg1__stat-note { color: var(--text-sub); font-size: 14px; line-height: 1.6; }
.signature-cg1__panel { padding: var(--space-lg); background: #fff; border-radius: var(--radius-md); }
.content .signature-cg1__title { margin: 0 0 var(--space-md); text-align: center; font-size: 18px; font-weight: 700; line-height: 1.6; text-wrap: balance; word-break: auto-phrase; }
.content .signature-cg1__chart { margin: 0; }
.content .signature-cg1__note { margin: var(--space-sm) 0 0; font-size: 14px; color: var(--text-sub); }
@media (max-width: 767px) {
  .content p.signature-cg1__statement { font-size: 22px; }
  .signature-cg1__stat { flex-direction: column; gap: var(--space-xs); text-align: center; }
  .content .signature-cg1__stat-label { font-size: 16px; }
  .content .signature-cg1__stat-note { font-size: 12px; text-wrap: balance; word-break: auto-phrase; }
  .signature-cg1__panel { padding: var(--space-md) var(--space-sm); }
}

/* 講座日程の行カード（psycap-master の「日程・受講料」）。期の行（ol.schedule-list）は build.mjs が出す
   パネルは白い章の中に置くのでグレー、行カードはその上で白（「背景の反対」）。直近の期（--next）はサービスカラーの淡い地＋左の線
   スマホ（--bp-xs）は行カードを 期番号 → 期間・締切 → バッジ の縦積みにし、バッジは左寄せ */
.schedule-panel { margin: 0 0 var(--space-lg); padding: var(--space-lg); background: var(--chapter-bg-gray); border-radius: var(--radius-md); }
.content .schedule-list { display: grid; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; }
.content .schedule-list__item { display: grid; grid-template-columns: 7em minmax(0, 1fr) auto; align-items: center; gap: var(--space-md); margin: 0; padding: var(--space-md); background: #fff; border: 1px solid var(--line); }
.content .schedule-list__item--next { background: var(--service-tint-own, color-mix(in srgb, var(--service-color) 9%, white)); box-shadow: inset 3px 0 0 var(--service-color); }
.content .schedule-list p { margin: 0; }
.content .schedule-list__num { font-family: var(--font-heading); font-size: 24px; font-weight: 700; line-height: 1.4; }
.content .schedule-list__next { font-size: 13px; color: var(--service-color); }
.content .schedule-list__range { font-family: var(--font-heading); font-size: 28px; font-weight: 600; line-height: 1.4; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.schedule-list__dash { color: var(--line); font-weight: 400; }
.content .schedule-list__deadline { margin-top: 4px; font-family: var(--font-heading); font-size: 14px; color: var(--text-sub); }
.content .schedule-list__note { margin-top: var(--space-xs); font-size: 12px; line-height: 1.7; color: color-mix(in srgb, var(--text-sub) 70%, white); }
.schedule-list__status { padding: 4px 20px; font-family: var(--font-heading); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; line-height: 1.5; white-space: nowrap; }
.schedule-list__status--open { color: var(--accent); background: #fff; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 50%, white); }
.schedule-list__status--closing { color: #fff; background: var(--accent); }
.schedule-panel .cta-buttons { margin-top: var(--space-lg); }
.content .schedule-panel__note { margin: var(--space-sm) 0 0; text-align: center; font-size: 14px; color: var(--text-sub); }
@media (max-width: 1023px) {
  .content .schedule-list__range { font-size: 24px; }
}
@media (max-width: 767px) {
  .schedule-panel { padding: var(--space-md) var(--space-sm); }
  .content .schedule-list__range { font-size: 22px; }
}
@media (max-width: 520px) {
  .content .schedule-list__item { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: var(--space-xs); padding: var(--space-sm); }
  .content .schedule-list__term { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--space-xs); }
  .content .schedule-list__num { font-size: 20px; }
  /* 「2026.10.27 —」が1行に収まる大きさ。入りきらなければ開始日と終了日の2行になる */
  .content .schedule-list__range { font-size: clamp(18px, 5.6vw, 22px); letter-spacing: 0; }
  .schedule-list__status { margin-top: var(--space-xs); }
}