/* ==========================================================================
   components.css — ページを組む共通部品（docs/design-system.md §6 の順に育てる）
   framed バンドル（top.css 系）で読む。値はすべて variables.css のトークン。
   ここに hex・生の px を書かない（§2・§8）。
   ========================================================================== */

/* ==========================================================================
   1. Section (.c-section) — §4 セクションの解剖図
   地色 4 段 / 余白 3 段（①セクション間 ②ブロック間 ③要素内）/ 幅 2 種（768 / 1200）
   ========================================================================== */
.c-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3xl);                       /* ②ブロック間 SP 32px */
  width: 100%;
  padding: var(--space-6xl) var(--mobile-gutter); /* ①セクション間 SP 64px */
  background-color: var(--color-white);
  color: var(--color-text-main);
}

/* ---- 地色（§2）。隣り合うセクションは同じ地色にしない ---- */
.c-section--white { background-color: var(--color-white); }
.c-section--cream { background-color: var(--color-cream); }
.c-section--gray  { background-color: var(--color-gray-light); }
.c-section--dark  {
  background-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* 同じ地色が続いてしまったときの保険: 境目に区切り線（§4「地色と余白の関係」） */
.c-section--white + .c-section--white,
.c-section--cream + .c-section--cream,
.c-section--gray  + .c-section--gray {
  border-top: 1px solid var(--color-border-subtle);
}

/* ---- 本文の幅（§1）。narrow=読ませる 768 / wide=見せる 1200 ---- */
.c-section__body {
  display: flex;                              /* body の中も「積む」: 部品同士の余白はここ 1 箇所で持つ（§5-1 Stack） */
  flex-direction: column;
  gap: var(--space-3xl);                      /* ②ブロック間 SP 32px（heading→body と同じ段） */
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.c-section__body > * { width: 100%; }
.c-section--wide .c-section__body { max-width: var(--container-max); }

/* wide（1200）の中でも「読む」要素の行長は 768 に保つ（§3 本文の行長 / 2026-08-25 夜に外枠 1200 を既定にしたときの規則）。
   直下に置いた段落・リスト・小見出し・figure が対象。図解・表・横並びの部品は 1200 いっぱいを使う */
.c-section--wide .c-section__body > :where(p, h3, ol, ul, figure, .c-prose, .c-h3) {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

/* 見出しも本文と同じ列に揃える（左揃えのとき本文の左端と見出しの左端が一致する） */
.c-section .c-heading {
  max-width: var(--container-narrow);
  margin-inline: auto;
}
.c-section--wide .c-heading { max-width: var(--container-max); }

/* ---- セクション末の導線 ---- */
.c-section__action {
  display: flex;
  justify-content: center;
  width: 100%;
}
.c-section--left .c-section__action { justify-content: flex-start; }

/* ---- 見出し左揃え（未決 2026-08-25。c-heading の修飾子 1 つで切り替える） ---- */
.c-heading--left { align-items: flex-start; }
.c-heading--left .c-heading__label,
.c-heading--left .c-heading__title,
.c-heading--left .c-heading__desc { text-align: left; }

/* ---- PC（64em〜）: ①96px（強調 104px）・②40px・内容を中央 1200 に寄せる式（§1） ---- */
@media (min-width: 64em) {
  .c-section {
    gap: var(--space-4xl);
    padding-block: var(--space-7xl);
    padding-inline: max(var(--pc-gutter), (100% - var(--container-max)) / 2 + var(--pc-gutter));
  }
  .c-section--emphasis { padding-block: var(--space-8xl); }
  .c-section__body { gap: var(--space-4xl); }   /* ② PC 40px */
}

/* ==========================================================================
   2. CardGrid (.c-card-grid) + Card (.c-card--panel) — §5-2 型 4 カード列
   見た目の出典: top.css .p-diff__card（3つの違い）。トップ側の CSS は触らず、同じ値でここに共通形を置く
   （トップが lower-pages ごと main に入った後で、.p-diff を c-card--panel に寄せる）
   ========================================================================== */
.c-card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);                 /* ③要素内: カード同士 20px */
  align-items: stretch;
  width: 100%;
}

/* .c-card（白・角丸 xl・緑影・縦 flex）は top.css の基本形を使う。ここは余白と行構造だけ */
.c-card--panel {
  gap: var(--space-md);
  padding: var(--space-xl);
  align-items: center;
  text-align: center;
}
.c-card--left {
  align-items: flex-start;
  text-align: left;
}

.c-card__badge {
  padding: var(--space-3xs) var(--space-10);
  font-size: var(--font-sm);
  line-height: 1.6;
}

.c-card__title {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: calc(var(--card-title-lines, 2) * 1lh); /* 行数の保険。増える側はコピーを短くする */
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: calc(32 / 24);
  color: var(--color-primary-dark);
}
.c-card--panel .c-card__title { justify-content: center; }
.c-card--left .c-card__title { justify-content: flex-start; }

.c-card__body {
  width: 100%;
  font-size: var(--font-base);
  line-height: 1.8;
  color: var(--color-text-main);
}
.c-card__body > * + * { margin-top: var(--space-sm); }

.c-card__foot {
  width: 100%;
  margin-top: auto;                     /* 全カードの下端に揃える */
}

@media (min-width: 64em) {
  .c-card-grid--2 { grid-template-columns: repeat(2, 1fr); }
  .c-card-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .c-card-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .c-card--panel { padding: var(--space-2xl) var(--space-xl); }
  .c-card__title { font-size: var(--font-2xl); }   /* §3 役割 5（h3）。旧 3xl は誤り */
  .c-card__body { font-size: var(--font-md); }
}

/* ==========================================================================
   3. CompareTable (.c-compare) — §5-2 型 5 比較表（features F0 の wf-table を昇格）
   SP: 行を積む（thead は視覚的に隠し、各値の上に data-col で列名を出す）／PC: 表
   列の対置はトップ .p-diff__vs-row と同じ約束: 一般側＝gray-light・ReSpark 側＝navy 地にライム文字（§2）。
   本文セルの after は cream 地＋navy 太字（navy の面積を見出し行だけに絞る）
   ========================================================================== */
.c-compare {
  width: 100%;
}
.c-compare__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font-sm);            /* §3 表の中 */
  line-height: 1.6;
  text-align: left;
  color: var(--color-text-main);
}

/* ---- SP: 積む ---- */
.c-compare__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.c-compare__table,
.c-compare__table tbody,
.c-compare__row,
.c-compare__label,
.c-compare__cell { display: block; }
.c-compare__row {
  overflow: hidden;
  background-color: var(--color-white);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-green);
}
.c-compare__row + .c-compare__row { margin-top: var(--space-md); }
.c-compare__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  background-color: var(--color-gray-light);
}
.c-compare__num {                              /* 行番号（目次兼用の印。下のセクションの 01〜05 と対応） */
  margin-right: var(--space-sm);
  font-family: var(--ff-en);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
}
.c-compare__cell { padding: var(--space-md) var(--space-lg); }
.c-compare__cell::before {                    /* SP だけ列名を出す */
  content: attr(data-col);
  display: block;
  margin-bottom: var(--space-2xs);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
  color: var(--color-text-muted);
}
.c-compare__cell--before { color: var(--color-text-sub); }
.c-compare__cell--after {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  background-color: var(--color-cream);
}
.c-compare__cell--after::before { color: var(--color-green-dark); }
.c-compare__value { display: block; }
.c-compare__jump {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;                        /* タップ領域 44px（§5-4） */
  margin-top: var(--space-2xs);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  text-decoration: none;
}
.c-compare__jump-icon {                        /* 丸い矢印。hover で navy に反転 */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.714rem;
  height: 1.714rem;
  font-family: var(--ff-en);
  line-height: 1;
  color: var(--color-primary-dark);
  border: 1px solid var(--color-primary-dark);
  border-radius: var(--border-radius-full);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.c-compare__jump:hover .c-compare__jump-icon { color: var(--color-lime); background-color: var(--color-primary-dark); }

/* ---- PC（64em〜）: 表 ---- */
@media (min-width: 64em) {
  .c-compare__head { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .c-compare__table {
    display: table;
    overflow: hidden;
    font-size: var(--font-base);
    background-color: var(--color-white);
    border-radius: var(--border-radius-xl);
    box-shadow: var(--shadow-green);
  }
  .c-compare__table tbody { display: table-row-group; }
  .c-compare__head { display: table-header-group; }
  .c-compare__row { display: table-row; border-radius: 0; background: transparent; box-shadow: none; }
  .c-compare__label,
  .c-compare__cell { display: table-cell; vertical-align: middle; }
  .c-compare__row + .c-compare__row { margin-top: 0; }
  .c-compare__row > * { border-top: 1px solid var(--color-border); }
  .c-compare__label {
    width: 12em;
    padding: var(--space-lg) var(--space-xl);
    font-size: var(--font-md);
    background-color: var(--color-white);
  }
  .c-compare__num { font-size: var(--font-base); }
  .c-compare__cell { padding: var(--space-lg) var(--space-xl); }
  .c-compare__cell--before { background-color: var(--color-gray-50); }
  .c-compare__cell::before { display: none; }
  .c-compare__corner,
  .c-compare__th {
    padding: var(--space-md) var(--space-xl);
    font-size: var(--font-base);              /* §3 役割 8 */
    font-weight: var(--font-weight-bold);
    text-align: center;
    color: var(--color-text-sub);
    background-color: var(--color-gray-light);
  }
  .c-compare__th--after {
    color: var(--color-lime);
    background-color: var(--color-primary-dark);
  }
  .c-compare__cell--after { position: relative; padding-right: var(--space-6xl); }
  .c-compare__value { display: inline; }
  .c-compare__jump {
    position: absolute;
    top: 50%;
    right: var(--space-xl);
    min-height: 0;
    margin: 0;
    transform: translateY(-50%);
    font-size: var(--font-sm);
  }
}

/* ==========================================================================
   4. MediaText (.c-media-text) — §5-2 型 3 画像＋文章（左右）
   SP: 画像→文章の縦積み／PC: 5:7（--even は 1:1）。--right で画像を右に
   ========================================================================== */
.c-media-text {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);                 /* ③要素内 */
  width: 100%;
  scroll-margin-top: var(--header-height-sp);
}

.c-media-text__media { width: 100%; }
.c-media-text--text-first .c-media-text__media { order: 2; }   /* SP: 文章→画像（操作してから見る型）。PC は grid の order が勝つ */
.c-media-text__media > * { margin-block: 0; }        /* wf-ph 等の外側余白を殺す */
.c-media-text__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--border-radius-lg);
}

.c-media-text__text {
  width: 100%;
  font-size: var(--font-base);
  line-height: 1.9;
  color: var(--color-text-main);
}
.c-media-text__text > * + * { margin-top: var(--space-lg); }   /* 段落間 */
.c-media-text__title {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary-dark);
}
.c-media-text__title + * { margin-top: var(--space-sm); }      /* 見出しと本文 */

@media (min-width: 64em) {
  .c-media-text {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: var(--space-4xl);
    align-items: center;
    scroll-margin-top: var(--header-height-pc);
  }
  .c-media-text--top { align-items: start; }
  .c-media-text--right { grid-template-columns: 7fr 5fr; }
  .c-media-text--right .c-media-text__media { order: 2; }
  .c-media-text--even { grid-template-columns: 1fr 1fr; }
  .c-media-text__text { font-size: var(--font-lg); }
  .c-media-text__title { font-size: var(--font-2xl); }
}

/* ==========================================================================
   5. BeforeAfter (.c-before-after) — §5-2 型 6 Before → After（features F4 を昇格）
   SP: 上下（矢印 ↓）／PC: 左右（矢印 →）。After は cream 地＋green-dark。幅は Section いっぱい（見せる型）
   ========================================================================== */
.c-before-after {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  width: 100%;
  font-size: var(--font-sm);            /* §3 表の中 */
  line-height: 1.6;
}
.c-before-after__col {
  padding: var(--space-lg) var(--space-xl);
  border-radius: var(--border-radius-lg);
}
.c-before-after__col--before {
  color: var(--color-text-sub);
  background-color: var(--color-gray-light);
}
.c-before-after__col--after {
  font-weight: var(--font-weight-bold);
  color: var(--color-green-dark);
  background-color: var(--color-cream);
  border: 1px solid var(--color-border);
}
.c-before-after__label {
  margin-bottom: var(--space-sm);
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-wide);
}
.c-before-after__list { list-style: none; margin: 0; padding: 0; }
.c-before-after__item {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.c-before-after__item:last-child { border-bottom: 0; }
.c-before-after__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-en);
  font-size: var(--font-4xl);
  line-height: 1;
  color: var(--color-text-muted);
}
.c-before-after__arrow::before { content: "↓"; }

@media (min-width: 64em) {
  .c-before-after {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md);
    align-items: stretch;
    font-size: var(--font-base);
  }
  .c-before-after__col { padding: var(--space-xl) var(--space-2xl); }
  .c-before-after__label { font-size: var(--font-sm); }
  .c-before-after__arrow::before { content: "→"; }
}

/* ==========================================================================
   6. Voice (.c-voice) — §5-2 型 8 声（写真＋引用）（features F4 を昇格）
   SP: 写真上・引用下／PC: 写真左・引用右。写真は常に左（交互にしない）
   ========================================================================== */
.c-voice {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-xl);
  background-color: var(--color-gray-light);
  border-radius: var(--border-radius-lg);
}
.c-voice__photo {
  display: block;
  width: 4rem;                          /* 56px（1rem=14px） */
  height: 4rem;
  border-radius: var(--border-radius-full);
  object-fit: cover;
}
.c-voice__quote {
  margin: 0;
  font-size: var(--font-base);
  line-height: 1.8;
  color: var(--color-text-main);
}
.c-voice__who {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-md);
  font-size: var(--font-sm);
  color: var(--color-text-sub);
}
.c-voice__link {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.c-voice__link:hover { color: var(--color-link-hover); }

@media (min-width: 64em) {
  .c-voice {
    grid-template-columns: auto 1fr;
    column-gap: var(--space-xl);
    padding: var(--space-2xl);
  }
  .c-voice__photo { grid-row: 1 / 3; width: 5.143rem; height: 5.143rem; }   /* 72px */
  .c-voice__quote { font-size: var(--font-lg); }
  .c-voice__who { font-size: var(--font-base); }     /* §3 役割 8 */
  .c-voice__who { grid-column: 2; }
}

/* ==========================================================================
   7. 文章の基本形 (.c-copy / .c-h3 / .c-caption) — §3 文字の段
   Section の body 直下に置く段落・小見出し。wide の中では自動で 768 に収まる（1. Section の規則）
   ========================================================================== */
.c-copy {
  font-size: var(--font-base);
  line-height: 1.9;
  color: var(--color-text-main);
}
.c-copy--center { text-align: center; }
.c-prose > * + * { margin-top: var(--space-lg); }   /* 続く段落同士は 16px（body の 32/40 より詰める） */
.c-h3 {
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary-dark);
  text-align: center;
}
.c-caption {                                   /* 監修・注釈の 1 行 */
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--color-text-sub);
  text-align: center;
}
@media (min-width: 64em) {
  .c-copy { font-size: var(--font-lg); }
  .c-h3 { font-size: var(--font-2xl); }
  .c-caption { font-size: var(--font-base); }
}

/* ==========================================================================
   8. Callout (.c-callout) — §5-2 型 2 の変種「補足の囲み」（反論への答え・但し書き）
   白地＋罫線＋ライムの左バー（ライムは面積の小さいものだけ §2）。gray 変種は白セクション用
   ========================================================================== */
.c-callout {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-xl);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: var(--space-2xs) solid var(--color-lime);
  border-radius: var(--border-radius-lg);
}
.c-callout--gray { background-color: var(--color-gray-light); border-color: transparent; border-left-color: var(--color-lime); }
.c-callout__title {
  font-size: var(--font-xl);                  /* §3 役割 5 */
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary-dark);
}
.c-callout__body {
  font-size: var(--font-base);
  line-height: 1.9;
  color: var(--color-text-main);
}
.c-callout__body > * + * { margin-top: var(--space-md); }
@media (min-width: 64em) {
  .c-callout { padding: var(--space-2xl) var(--space-3xl); }
  .c-callout__title { font-size: var(--font-2xl); }
  .c-callout__body { font-size: var(--font-md); }
}

/* ==========================================================================
   9. AppDemo (.c-demo) — §5-2 型 16「動くデモ（アプリ枠）」（2026-08-26・ExampleTabs 型 11 を置き換え）
   左＝本文・3 行の軸・人のタブ・プロフィール／右＝PhoneFrame（MediaText side=right・SP は文章→スマホ）。
   ここにあるのはサイト側の要素だけ。スマホ枠と中身（スピスピ本体の再現）は spispi-skin.css（px 直書きの例外・§9）
   ========================================================================== */
.c-demo { width: 100%; }

/* ---- 右：スマホ枠と、その外の操作 ---- */
.c-demo__stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}
.c-demo__phone { position: relative; }
.c-demo__play {                                  /* デモ再生（§5-4 ボタン 3 種の 3 つ目・2026-08-26）：スマホの右下角に重なる丸い lime。オレンジ＝CTA／白抜き＝2 次導線と役割を分ける */
  position: absolute;
  right: calc(-1 * var(--space-lg));            /* 枠の右下角に重ねる（画面の中身＝自己評価ボタンを隠さない） */
  bottom: calc(-1 * var(--space-lg));
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-6xl);                        /* 64px ≥ タップ領域 44px */
  height: var(--space-6xl);
  padding: 0;
  color: var(--color-primary-dark);
  background-color: var(--color-lime);
  border: 0;
  border-radius: var(--border-radius-full);
  box-shadow: var(--shadow-green);
  cursor: pointer;
  transition: transform var(--transition-fast);
}
.c-demo__play:hover { transform: scale(1.06); }
.c-demo__play[hidden] { display: none; }
.c-demo__play svg { width: var(--space-2xl); height: var(--space-2xl); margin-left: var(--space-3xs); }
.c-demo__play-note {                             /* §3 役割 9 */
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-text-sub);
}
.c-demo__stage-note {                            /* §3 役割 8 */
  max-width: 22rem;
  font-size: var(--font-xs);
  line-height: 1.6;
  color: var(--color-text-sub);
  text-align: center;
}

/* ---- 左：人の選択（役割チップ）＋プロフィール 2 行（方向画像 D/E・2026-08-26。「A さん」のタブと 4 行のプロフィールは廃止） ---- */
.c-demo__people { display: flex; flex-direction: column; gap: var(--space-md); }
.c-demo__heading { margin-bottom: var(--space-md); }       /* 左列の先頭に置く見出し（方向画像 D） */
.c-demo__chips {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;                              /* SP は横スクロール（右端が切れて「まだある」と分かる） */
  scrollbar-width: none;
  padding-bottom: var(--space-3xs);
}
.c-demo__chips::-webkit-scrollbar { display: none; }
.c-demo__chip {                                  /* §3 役割 12（タブ）。選択＝navy 塗り＋lime の点（対置ルール「ReSpark 側」の印 §2） */
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: var(--space-xs);
  min-height: 3.143rem;                          /* 44px */
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-family);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-text-main);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-full);
  cursor: pointer;
  transition: color var(--transition-fast), background-color var(--transition-fast), border-color var(--transition-fast);
}
.c-demo__chip:hover { border-color: var(--color-border-strong); }
.c-demo__chip.is-active {
  color: var(--color-text-inverse);
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}
.c-demo__chip-dot { display: none; width: var(--space-sm); height: var(--space-sm); border-radius: var(--border-radius-full); background-color: var(--color-lime); }
.c-demo__chip.is-active .c-demo__chip-dot { display: block; }
.c-demo__profiles { display: grid; }             /* 4 人を同じマスに重ねる → 高さは最大の人に固定 */
.c-demo__profile {
  grid-area: 1 / 1;
  padding: var(--space-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  visibility: hidden;
}
.c-demo__profile.is-active { visibility: visible; }
.c-demo__profile-title {                         /* §3 役割 7 */
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary-dark);
}
.c-demo__profile-goal {                          /* §3 役割 8 */
  margin: var(--space-2xs) 0 0;
  font-size: var(--font-sm);
  line-height: 1.7;
  color: var(--color-text-sub);
}

/* ---- SP（〜1023）：チップをスマホの直上、プロフィールを直下に。MediaText の 2 つの枠と people を display: contents にして 1 列に並べ替える ----
   順番＝本文（slot）→ チップ → スマホ（stage）→ プロフィール。2026-08-26 本人『SP で切替とスマホが遠い』→ 方向画像 E */
@media (max-width: 63.99em) {
  .c-demo .c-media-text__text,
  .c-demo .c-media-text__media,
  .c-demo__people,
  .c-demo__stage { display: contents; }
  .c-demo .c-media-text__text > * { margin-top: 0; }        /* 段落間の margin は親の gap に任せる */
  .c-demo__heading { order: 0; }
  .c-demo .c-prose { order: 1; }
  .c-demo__chips { order: 2; }
  .c-demo__phone { order: 3; align-self: center; }
  .c-demo__play-note { order: 4; align-self: center; }
  .c-demo__profiles { order: 5; }
  .c-demo__stage-note { order: 6; align-self: center; }
}

@media (min-width: 64em) {
  .c-demo__stage-note { max-width: 27rem; font-size: var(--font-sm); }
  .c-demo__play-note { font-size: var(--font-sm); }        /* §3 役割 9 */
  .c-demo__chip { font-size: var(--font-base); }           /* §3 役割 12（タブ） */
  .c-demo__profile-title { font-size: var(--font-md); }    /* §3 役割 7 */
  .c-demo__profile-goal { font-size: var(--font-base); }   /* §3 役割 8 */
}

/* ==========================================================================
   10. MenuStack (.c-menustack) — §5-2 型 4 カードの中身「学習メニューの積み木」（features F2）
   ゴールから逆算したメニューを積んで見せる。ゴール実践の行だけ navy ＋ lime（ReSpark 側の約束）
   ========================================================================== */
.c-menustack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-menustack__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--font-base);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  color: var(--color-text-sub);
  text-align: left;
  background-color: var(--color-gray-light);
  border-radius: var(--border-radius-md);
}
.c-menustack__row--goal {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
}
.c-menustack__tag {
  font-size: var(--font-xs);                  /* §3 役割 9（PC は sm・下の @media） */
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  color: var(--color-lime);
}

@media (min-width: 64em) {
  .c-menustack__row { font-size: var(--font-md); }   /* §3 役割 7 */
  .c-menustack__tag { font-size: var(--font-sm); }   /* §3 役割 9 */
}

/* ==========================================================================
   11. Scale (.c-scale) — §5-2 型 7 ステップの変種「期間の目盛り」（features F5）
   順序のある 4 点を 1 本の線に置く。最初の点だけ lime（ここから始められる）
   ========================================================================== */
.c-scale {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  max-width: var(--container-narrow);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.c-scale::before {                              /* 目盛りの線 */
  content: "";
  position: absolute;
  top: var(--space-md);
  left: 12.5%;
  width: 75%;
  height: var(--space-3xs);
  background-color: var(--color-border-strong);
}
.c-scale__stop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-align: center;
}
.c-scale__dot {
  display: block;
  width: var(--space-2xl);
  height: var(--space-2xl);
  border: var(--space-3xs) solid var(--color-primary-dark);
  border-radius: var(--border-radius-full);
  background-color: var(--color-white);
}
.c-scale__stop--start .c-scale__dot { background-color: var(--color-lime); }
.c-scale__label {
  font-family: var(--ff-en);
  font-size: var(--font-2xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  color: var(--color-primary-dark);
}
.c-scale__label small {
  font-family: var(--font-family);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
}
.c-scale__note {
  font-size: var(--font-xs);
  line-height: 1.5;
  color: var(--color-text-sub);
}
.c-scale__stop--start .c-scale__note { color: var(--color-green-dark); font-weight: var(--font-weight-bold); }
@media (min-width: 64em) {
  .c-scale__label { font-size: var(--font-4xl); }
  .c-scale__note { font-size: var(--font-sm); }
}

/* ==========================================================================
   12. Diagram (.c-diagram) — §9 図解（SVG・トークン色のみ）の外枠
   ========================================================================== */
.c-diagram { display: block; width: 100%; height: auto; }
.c-diagram text { font-family: var(--font-family); }
.c-diagram .c-diagram__en { font-family: var(--ff-en); }

/* 循環図（JitsumuLoop）: SP は縦積み 4 段（矢印 ↓）、PC は SVG。§5-3「SP で読めない図は縮小しない」 */
.c-loop { width: 100%; }
.c-loop__svg { display: none; }
.c-loop__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}
.c-loop__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--border-radius-md);
  text-align: center;
}
.c-loop__step + .c-loop__step { margin-top: var(--space-lg); }
.c-loop__step + .c-loop__step::before {        /* 段の間の矢印 */
  content: "↓";
  position: absolute;
  top: calc(-1 * var(--space-lg) - var(--space-3xs));
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--ff-en);
  font-size: var(--font-lg);
  line-height: 1;
  color: var(--color-text-muted);
}
.c-loop__step--you {
  color: var(--color-primary-dark);
  background-color: var(--color-white);
  border: 1px solid var(--color-primary-dark);
}
.c-loop__step--rs {
  color: var(--color-white);
  background-color: var(--color-primary-dark);
}
.c-loop__tag {
  font-size: var(--font-xs);                  /* SP 専用（PC は SVG） */
  font-weight: var(--font-weight-bold);
  color: var(--color-text-sub);
}
.c-loop__step--rs .c-loop__tag { color: var(--color-lime); }
.c-loop__text {
  font-size: var(--font-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
}
.c-loop__again {
  margin-top: var(--space-sm);
  font-size: var(--font-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-green-dark);
  text-align: center;
}
@media (min-width: 64em) {
  .c-loop__svg { display: block; }
  .c-loop__list { display: none; }
}

/* ==========================================================================
   13. Next (.c-next) — ページ間の回遊（features → program）
   ========================================================================== */
.c-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  width: 100%;
  text-align: center;
}
.c-next__label {
  font-size: var(--font-xl);                  /* §3 役割 4 */
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
  color: var(--color-primary-dark);
}
@media (min-width: 64em) {
  .c-next__label { font-size: var(--font-xl); }
}

/* ==========================================================================
   14. PageHero (.c-hero--page) — §5-2 型 1 ヒーロー（下層）: ページ名 1 回 ＋ 主張 1 文
   地色・ぼかし・h1 のサイズは layout.css の .c-hero。ここは「英字ラベルを消し、lead を足し、パンくずを外に出す」差分だけ
   ========================================================================== */
.c-hero--page .c-hero__hgroup { gap: var(--space-lg); }
.c-hero--page .c-hero__title {
  position: relative;
  padding-left: 1.125rem;                     /* ライムの小マーク（旧ラベルの印を h1 に移した） */
}
.c-hero--page .c-hero__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: var(--border-radius-sm);
  background-color: var(--color-lime);
  transform: translateY(-50%);
}
.c-hero__lead {
  max-width: var(--container-narrow);
  font-size: var(--font-xl);                  /* §3 役割 4（説明） */
  line-height: 1.8;
  color: var(--color-white);
}
/* パンくず: ヒーローの外・直下。セクションの内容と同じ左端に揃える */
.c-breadcrumb--below { padding-block: var(--space-sm); }
@media (min-width: 64em) {
  .c-hero--page .c-hero__hgroup { gap: var(--space-xl); }
  .c-hero__lead { font-size: var(--font-xl); }
  .c-breadcrumb--below {
    max-width: none;
    padding-inline: max(var(--pc-gutter), (100% - var(--container-max)) / 2 + var(--pc-gutter));
  }
}

/* ヘッダーがヒーローに重なるページ（is-hero-overlay）: 旧パンくずが担っていた上の余白を padding で持ち、外に出したパンくずは白ではなく通常色に戻す */
body.is-hero-overlay .c-hero--page { padding-top: calc(var(--header-height-sp) + var(--space-3xl)); }
body.is-hero-overlay .c-breadcrumb--below .c-breadcrumb__item a { color: var(--color-text-sub); }
body.is-hero-overlay .c-breadcrumb--below .c-breadcrumb__item a:hover { color: var(--color-text-main); }
body.is-hero-overlay .c-breadcrumb--below .c-breadcrumb__item[aria-current="page"] { color: var(--color-text-main); }
body.is-hero-overlay .c-breadcrumb--below .c-breadcrumb__item:not(:last-child)::after { color: var(--color-gray-400); }
@media (min-width: 64em) {
  body.is-hero-overlay .c-hero--page { padding-top: calc(var(--header-height-pc) + var(--space-4xl)); }
}

/* ==========================================================================
   15. ProductPanel (.c-product) — §5-2 型 17「製品の紹介パネル」（features F1 の締め・2026-08-26）
   既定＝白地＋罫線の囲み・768（Callout と違い左バーは持たない。lime は要点の見出しと dark のラベル・線だけ＝面積の小さいもの §2）
   --wide＝1200・要点は PC で 3 列／--dark＝navy 地（「ReSpark 側」の印 §2）／__family＝アイコン群を 1 本の線の上に並べる
   ========================================================================== */
.c-product {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  width: 100%;
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--space-xl);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  color: var(--color-text-main);
}
.c-product--wide { max-width: var(--container-max); }
.c-product--dark {
  background-color: var(--color-primary-dark);
  border-color: transparent;
  color: var(--color-text-inverse);
}
.c-product__top { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }
.c-product__head { display: flex; align-items: center; gap: var(--space-md); }
.c-product__icon {
  flex: none;
  width: var(--space-5xl);
  height: var(--space-5xl);
  border-radius: var(--border-radius-md);
}
.c-product__id { display: flex; flex-direction: column; gap: var(--space-3xs); }
.c-product__label {                              /* §3 役割 9 */
  font-size: var(--font-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--color-text-sub);
}
.c-product--dark .c-product__label { color: var(--color-lime); }
.c-product__name {                               /* §3 役割 5 */
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary-dark);
}
.c-product--dark .c-product__name { color: var(--color-text-inverse); }
.c-product__lead {                               /* §3 役割 6（本文）。行長は 768 まで */
  max-width: var(--container-narrow);
  font-size: var(--font-base);
  line-height: 1.9;
}
.c-product__lead > * + * { margin-top: var(--space-md); }
.c-product--wide .c-product__name { font-size: var(--font-3xl); }   /* §3 役割 5L：wide パネルの名前は一段大きい */
/* アイコン群：1 本の線の上に等間隔。線は白地では罫線色、dark では lime */
.c-product__family {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  padding: var(--space-md) 0;
  list-style: none;
}
.c-product__family::before {
  content: '';
  position: absolute;
  inset-inline: 0;
  top: 50%;
  border-top: 1px solid var(--color-border);
}
.c-product--dark .c-product__family::before { border-top-color: var(--color-lime); }
.c-product__family-item { position: relative; flex: none; }
.c-product__family-icon {
  display: block;
  width: var(--space-5xl);
  height: var(--space-5xl);
  border-radius: var(--border-radius-md);
}
.c-product__points {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin: 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.c-product--dark .c-product__points { border-top-color: color-mix(in srgb, var(--color-white) 15%, transparent); }
.c-product__point-title {                        /* §3 役割 5。navy（dark では白）太字＋lime 左バー（プロフィール見出しと同じ印） */
  padding-left: var(--space-sm);
  font-size: var(--font-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1.5;
  color: var(--color-primary-dark);
  border-left: 3px solid var(--color-lime);
}
.c-product--dark .c-product__point-title { color: var(--color-text-inverse); }
.c-product__point-body {                         /* §3 役割 7 */
  margin: var(--space-xs) 0 0;
  font-size: var(--font-base);
  line-height: 1.9;
}
.c-product--dark .c-product__point-body { color: var(--color-gray-300); }
.c-product__media { display: none; }              /* SP では出さない（直上に実物のスマホがある） */
.c-product__orbit { display: none; }
@media (min-width: 64em) {
  .c-product { padding: var(--space-2xl) var(--space-3xl); }
  .c-product--wide { padding: var(--space-3xl) var(--space-4xl); gap: var(--space-xl); }
  .c-product--wide .c-product__top { gap: var(--space-2xl); }
  .c-product__icon, .c-product__family-icon { width: var(--space-6xl); height: var(--space-6xl); }
  .c-product__label { font-size: var(--font-sm); }
  .c-product__name { font-size: var(--font-2xl); }
  .c-product--wide .c-product__name { font-size: var(--font-6xl); }   /* §3 役割 5L：h2（40）より小さく h3（20）より大きい。2026-08-26 に 5xl → 6xl */
  .c-product__lead { font-size: var(--font-lg); }
  .c-product__point-title { font-size: var(--font-2xl); }
  .c-product__point-body { font-size: var(--font-md); }
  .c-product--wide .c-product__family { padding: var(--space-lg) var(--space-2xl); }
  .c-product--wide .c-product__points {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3xl);
  }
  .c-product--wide .c-product__point:not(:first-child) { padding-left: var(--space-3xl); border-left: 1px solid var(--color-border); }
  .c-product--wide.c-product--dark .c-product__point:not(:first-child) { border-left-color: color-mix(in srgb, var(--color-white) 15%, transparent); }
}
/* 実物画面（media）：PC（64em＝1024px 以上。メディアクエリの em は root の 14px ではなく 16px 基準）で top の右に置く。
   高さを固定して下をフェードで切る（本人 2026-08-26『スマホが細長すぎる』→ 上 6 割だけ見せる）。要点は全幅に戻す（列が細くならない）。
   アイコン群はスマホの周りの弧（orbit・左右 3 つずつ、上から下へ少しずつ外へ）。横一列（family）は SP 用 */
@media (min-width: 64em) {
  .c-product--has-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    column-gap: var(--space-2xl);
    align-items: center;
  }
  .c-product--has-media .c-product__top { grid-column: 1; grid-row: 1; }
  .c-product--has-media .c-product__points { grid-column: 1 / -1; grid-row: 2; }
  .c-product--has-media .c-product__family { display: none; }
  .c-product--has-media .c-product__media {
    display: block;
    position: relative;
    grid-column: 2;
    grid-row: 1;
    width: calc(414px * 0.56 + 2 * var(--space-7xl));  /* スマホ＋左右のアイコン */
    height: calc(868px * 0.56 * 0.58);                /* 上 6 割弱（2026-08-26 本人『縦をもう少し狭く』→ 0.6×0.62 から 1 段詰めた） */
    overflow: hidden;                                /* 下は要点の罫線でスパッと切る（白い画面をフェードさせると灰色の滲みになる・2026-08-26） */
  }
  .c-product__media .c-phone { --phone-scale: 0.6; position: absolute; top: var(--space-md); left: 50%; translate: -50% 0; }
  .c-product__orbit {
    display: block;
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
  }
  .c-product__orbit-item { position: absolute; }
  .c-product__orbit-icon {
    display: block;
    width: var(--space-5xl);
    height: var(--space-5xl);
    border-radius: var(--border-radius-md);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--color-lime) 35%, transparent);
  }
  /* 左 3 つ・右 3 つ。上から下へ少しずつ外側へ（弧） */
  .c-product__orbit-item:nth-child(1) { top: 10%; left: 8%; }
  .c-product__orbit-item:nth-child(2) { top: 40%; left: 0; }
  .c-product__orbit-item:nth-child(3) { top: 72%; left: 6%; }
  .c-product__orbit-item:nth-child(4) { top: 8%;  right: 8%; }
  .c-product__orbit-item:nth-child(5) { top: 46%; right: 0; }   /* 5 個（navi は並べない・2026-08-26）：左 3・右 2 */
  .c-product__orbit-item:nth-child(2) .c-product__orbit-icon,
  .c-product__orbit-item:nth-child(5) .c-product__orbit-icon { width: var(--space-6xl); height: var(--space-6xl); }
}