/* =====================================================================
   components.css — 共通コンポーネント（BEM風）
   SPEC §4 準拠：Header / Footer / Hero / Section Heading / Button /
   Card群 / CTA Band / Callout / Steps / Tabs / Form
   ===================================================================== */

/* =========================================================
   Buttons
   ========================================================= */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  min-height: 48px;                 /* タップ領域確保（A11y） */
  padding: var(--space-6) var(--space-16);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur-fast) var(--ease);
}
.c-btn:active { transform: translateY(1px); }

.c-btn--primary {
  /* 白文字とのコントラスト約6:1（AA適合）。明るい --color-accent は装飾用に温存 */
  background-color: var(--color-accent-ink);
  color: var(--color-on-accent);
  border-color: var(--color-accent-ink);
}
.c-btn--primary:hover { background-color: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #fff; }

.c-btn--secondary {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink-soft);   /* bg比 約5.5:1（WCAG 1.4.11 非テキスト3:1を満たす） */
}
.c-btn--secondary:hover { border-color: var(--color-ink); color: var(--color-ink); background-color: var(--color-surface); }

.c-btn--text {
  min-height: 44px;              /* タップ領域確保（A11y / WCAG 2.5.5） */
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) 0;
  border-radius: 0;
  color: var(--color-accent-ink);
  font-weight: var(--fw-medium);
}
.c-btn--text::after { content: "\2192"; transition: transform var(--dur) var(--ease); }
.c-btn--text:hover { color: var(--color-ink); }
.c-btn--text:hover::after { transform: translateX(4px); }

.c-btn--block { width: 100%; }
.c-btn--lg { min-height: 56px; padding-inline: var(--space-24); font-size: var(--fs-lead); }

/* =========================================================
   Header / Global Nav
   ========================================================= */
.c-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  /* 既定は不透明（color-mix/backdrop-filter 非対応でも本文が透けない） */
  background-color: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
/* スクロール連動：少し下げると影、下方向スクロールで隠し上方向で出す（ashiya準拠） */
.c-header.is-scrolled { box-shadow: var(--shadow-sm); }
.c-header.is-hidden { transform: translateY(-100%); }
/* 対応ブラウザのみ半透明＋ブラー。
   ※ デスクトップ幅限定：backdrop-filter は position:fixed の含有ブロックを作るため、
     モバイルの全画面メニュー(.c-nav fixed)が header 内に閉じ込められる不具合を避ける。 */
@media (min-width: 881px) {
  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and (background: color-mix(in srgb, white, black)) {
    .c-header {
      background-color: color-mix(in srgb, var(--color-bg) 88%, transparent);
      -webkit-backdrop-filter: saturate(140%) blur(8px);
      backdrop-filter: saturate(140%) blur(8px);
    }
  }
}
.c-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--header-h);
}
.c-header__logo {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: var(--fw-medium);
  letter-spacing: 0.06em;
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.c-header__logo span { color: var(--color-accent-ink); }

.c-nav { display: flex; align-items: center; gap: var(--space-8); }
.c-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-8), 1.2vw, var(--space-16));
  list-style: none;
}
.c-nav__link {
  position: relative;
  display: inline-block;
  padding: var(--space-6) var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  text-decoration: none;
  white-space: nowrap;
}
.c-nav__link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 2px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur) var(--ease);
}
.c-nav__link:hover::after,
.c-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.c-nav__link[aria-current="page"] { color: var(--color-accent-ink); }

.c-nav__cta { margin-left: var(--space-4); }
/* 常設CTAをテキストリンク群から分離して目立たせる（ToB最優先・SPEC §3） */
.c-nav__cta .c-btn { box-shadow: var(--shadow-sm); white-space: nowrap; }

/* ハンバーガー */
.c-burger {
  display: none;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
}
.c-burger__box { position: relative; width: 22px; height: 16px; }
.c-burger__box::before,
.c-burger__box::after,
.c-burger__line {
  content: "";
  position: absolute; left: 0;
  width: 100%; height: 2px;
  background: var(--color-ink);
  border-radius: 2px;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), top var(--dur) var(--ease);
}
.c-burger__box::before { top: 0; }
.c-burger__line { top: 7px; }
.c-burger__box::after  { top: 14px; }
.c-burger[aria-expanded="true"] .c-burger__box::before { top: 7px; transform: rotate(45deg); }
.c-burger[aria-expanded="true"] .c-burger__line { opacity: 0; }
.c-burger[aria-expanded="true"] .c-burger__box::after { top: 7px; transform: rotate(-45deg); }

/* モバイルナビ */
@media (max-width: 880px) {
  .c-burger { display: inline-flex; }
  .c-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: var(--z-menu);
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;            /* デスクトップの center を打ち消し、項目を全幅に */
    gap: 0;
    padding: var(--space-16) var(--gutter) var(--space-32);
    background: var(--color-bg);
    border-top: 1px solid var(--color-line);
    transform: translateX(100%);
    transition: transform var(--dur) var(--ease);
    overflow-y: auto;
    visibility: hidden;
  }
  .c-nav.is-open { transform: translateX(0); visibility: visible; }
  .c-nav__list { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .c-nav__link {
    display: block;
    padding: var(--space-12) var(--space-4);
    font-size: var(--fs-lead);
    border-bottom: 1px solid var(--color-line);
  }
  .c-nav__link::after { display: none; }
  .c-nav__cta { margin: var(--space-16) 0 0; }
  .c-nav__cta .c-btn { width: 100%; }
  body.is-menu-open { overflow: hidden; }
}

/* =========================================================
   Footer
   ========================================================= */
.c-footer {
  background-color: var(--color-ink);
  color: #E8E2D9;
  padding-block: var(--space-48) var(--space-24);
}
.c-footer a { color: #E8E2D9; text-decoration: none; }
.c-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; }
.c-footer__grid {
  display: grid;
  gap: var(--space-24);
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .c-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
}
.c-footer__brand-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: #fff;
  letter-spacing: 0.06em;
}
.c-footer__tagline { color: #B8AFA3; font-size: var(--fs-small); margin-top: var(--space-6); }
.c-footer__heading {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: #B8AFA3;
  margin-bottom: var(--space-8);
}
.c-footer__links { list-style: none; display: grid; gap: var(--space-6); font-size: var(--fs-small); }
.c-footer__social { display: flex; gap: var(--space-12); margin-top: var(--space-12); }
.c-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-pill);
}
.c-footer__social a:hover { background: rgba(255,255,255,0.1); text-decoration: none; }
.c-footer__bottom {
  margin-top: var(--space-32);
  padding-top: var(--space-16);
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-16);
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-small);
  color: #B8AFA3;
}

/* =========================================================
   Hero
   ========================================================= */
.c-hero {
  position: relative;
  padding-block: clamp(3.5rem, 2rem + 8vw, 7rem);
  overflow: hidden;
}
.c-hero__inner {
  display: grid;
  gap: var(--space-32);
  align-items: center;
}
@media (min-width: 880px) {
  .c-hero__inner { grid-template-columns: 1.05fr 0.95fr; }
}
.c-hero__title {
  font-size: var(--fs-display);
  font-weight: var(--fw-medium);
  line-height: 1.4;
  /* 大型見出しは keep-all より自然改行＋balance の方が綺麗（アクセント語は nowrap で保護） */
  word-break: normal;
  overflow-wrap: normal;
}
.c-hero__title .accent { color: var(--color-accent-ink); white-space: nowrap; }
.c-hero__lead { margin-top: var(--space-16); max-width: 32em; }
.c-hero__actions { margin-top: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-12); }
.c-hero__media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, var(--color-surface-alt), #DCE7EB);
}
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* モバイル：CTAは全幅・縦並びで幅を揃える。写真を上に出して世界観を先に見せる */
@media (max-width: 600px) {
  .c-hero__actions { flex-direction: column; align-items: stretch; }
  .c-hero__actions .c-btn { width: 100%; }
  .c-hero__media { order: -1; aspect-ratio: 4 / 3; }
}

/* サービス概要カード（ヒーロー内のオファー要約） */
.c-offer { height: auto; align-self: center; gap: var(--space-6); }
.c-offer .c-card__title { font-size: var(--fs-h3); margin-top: var(--space-4); }
.c-offer .c-btn { margin-top: var(--space-12); }
.c-speclist { list-style: none; padding: 0; margin: var(--space-8) 0 0; display: grid; gap: var(--space-8); }
.c-speclist li { display: grid; grid-template-columns: 4.5em 1fr; gap: var(--space-8); align-items: baseline; font-size: var(--fs-small); }
.c-speclist span { color: var(--color-ink-soft); }
.c-speclist strong { font-weight: var(--fw-medium); color: var(--color-ink); }

/* 画像未設定時のプレースホルダ表現 */
.c-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  background:
    repeating-linear-gradient(45deg, transparent, transparent 12px, rgba(70,144,171,0.07) 12px, rgba(70,144,171,0.07) 24px),
    linear-gradient(135deg, var(--color-surface-alt), #DCE7EB);
  text-align: center;
}

/* =========================================================
   Page Header（ヒーロー画像のない一覧/文書ページの見出し帯）
   ========================================================= */
.c-pagehead { padding-block: clamp(2.25rem, 1.75rem + 3vw, 3.75rem); }
.c-pagehead .c-heading { margin-bottom: 0; }
.c-pagehead .c-heading__title { font-size: var(--fs-h1); }

/* =========================================================
   Section Heading（日本語見出し + 英語ラベル + リード）
   ========================================================= */
.c-heading { margin-bottom: var(--space-24); }
.c-heading--center { text-align: center; }
.c-heading--center .c-heading__lead { margin-inline: auto; }
.c-heading__label { margin-bottom: var(--space-6); }
.c-heading__title { font-size: var(--fs-h2); }
.c-heading__lead { margin-top: var(--space-8); max-width: 42em; color: var(--color-ink-soft); }

/* =========================================================
   Card（基本）+ 各種
   ========================================================= */
.c-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  padding: var(--space-16);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
a.c-card, .c-card--link { text-decoration: none; color: inherit; }
a.c-card:hover, .c-card--link:hover { box-shadow: var(--shadow); transform: translateY(-3px); border-color: var(--color-line-strong); }
.c-card__title { font-size: var(--fs-h3); margin-bottom: var(--space-6); }
.c-card__text { color: var(--color-ink-soft); font-size: var(--fs-small); }
.c-card__meta { margin-top: auto; padding-top: var(--space-12); font-size: var(--fs-small); color: var(--color-ink-soft); }
.c-card__meta--external { color: var(--color-accent-ink); font-weight: var(--fw-medium); }
.c-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-12); }
.c-tag {
  font-size: var(--fs-label);
  color: var(--color-accent-2-ink);
  background: color-mix(in srgb, var(--color-accent-2) 12%, transparent);
  padding: 2px var(--space-6);
  border-radius: var(--radius-pill);
}
/* 対象者タグ＝温色（テラコッタ）。内容タグ（緑）と視覚的に区別 */
.c-tag--audience {
  color: var(--color-accent-ink);
  background: color-mix(in srgb, var(--color-accent) 14%, transparent);
}

/* 2分岐の入口カード（大） */
.c-pathway {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-24);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  text-decoration: none;
  color: inherit;
  min-height: 220px;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.c-pathway:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--color-accent); }
.c-pathway__title { font-size: var(--fs-h2); }
.c-pathway__text { color: var(--color-ink-soft); flex: 1; }
.c-pathway__cta { color: var(--color-accent-ink); font-weight: var(--fw-medium); }
.c-pathway__cta::after { content: " \2192"; }
/* カード全体をクリック可能にするストレッチリンク（見出しは h3 内の <a>）。
   フォーカス時は見出しテキストに標準アウトラインが出る（全ブラウザ対応） */
.c-pathway__link { color: inherit; text-decoration: none; }
.c-pathway__link::after { content: ""; position: absolute; inset: 0; }
.c-pathway--featured { border-color: var(--color-accent); background: linear-gradient(180deg, #fff, #F1F6F8); }
.c-pathway__badge {
  position: absolute; top: var(--space-12); right: var(--space-12);
  font-size: var(--fs-label); letter-spacing: var(--tracking-wide);
  background: var(--color-accent-ink); color: #fff;
  padding: 2px var(--space-8); border-radius: var(--radius-pill);
}

/* 実績ロゴタイル：全タイル同寸・最終行は中央寄せ（孤立も肥大もしない） */
.c-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-8);
}
.c-logo-tile {
  flex: 0 1 calc(50% - var(--space-8));   /* モバイル：2列 */
  min-height: 88px;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-12);
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  color: var(--color-ink-soft);
  font-size: var(--fs-small);
  text-align: center;
}
@media (min-width: 600px) { .c-logo-tile { flex-basis: calc(33.333% - var(--space-8)); } }
@media (min-width: 880px) { .c-logo-tile { flex-basis: 180px; min-height: 96px; } }
.c-logo-tile img { max-height: 48px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.85; }

/* 声カード */
.c-quote {
  display: flex; flex-direction: column; height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-left: 3px solid var(--color-accent-2);
  border-radius: var(--radius);
  padding: var(--space-16) var(--space-16) var(--space-12);
}
.c-quote__text { font-size: var(--fs-lead); line-height: 1.8; flex: 1; }
.c-quote__text::before { content: "\201C"; font-family: var(--font-serif); color: var(--color-accent-2); font-size: 2rem; line-height: 0; vertical-align: -0.4em; margin-right: 0.1em; }
.c-quote__cite { margin-top: var(--space-12); font-size: var(--fs-small); color: var(--color-ink-soft); font-style: normal; }
.c-quote__cite strong { color: var(--color-ink); font-weight: var(--fw-medium); }

/* =========================================================
   Profile（ABOUT 人物紹介）
   ========================================================= */
.c-profile { display: grid; gap: var(--space-24); }
@media (min-width: 760px) { .c-profile { grid-template-columns: 300px 1fr; align-items: start; } }
.c-profile__media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.c-profile__media .c-placeholder { border-radius: var(--radius); }
.c-profile__name { font-family: var(--font-serif); font-size: var(--fs-h3); }
.c-profile__role { font-family: var(--font-sans); font-size: var(--fs-small); color: var(--color-accent-2-ink); margin-left: var(--space-6); }
.c-profile__subtitle { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-bold); margin-bottom: var(--space-8); }
/* 経歴リスト：日付＋内容の年表。最終行は罫線なし */
.c-list--plain .c-row:last-child { border-bottom: none; }

/* 経歴（年表ではなく順序のみのリスト） */
.c-career { list-style: none; padding: 0; margin: 0; }
.c-career li { padding: var(--space-8) 0; border-bottom: 1px solid var(--color-line); }
.c-career li:last-child { border-bottom: none; }
.c-career__role { color: var(--color-ink-soft); font-size: var(--fs-small); margin-left: var(--space-6); }

/* メディア / イベント項目（リスト行） */
.c-list { list-style: none; display: grid; gap: 0; }
.c-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--space-8) var(--space-16);
  align-items: baseline;
  padding-block: var(--space-12);
  border-bottom: 1px solid var(--color-line);
}
.c-row__date { font-size: var(--fs-small); color: var(--color-ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-row__badge {
  align-self: center;
  font-size: var(--fs-label);
  padding: 2px var(--space-6);
  border-radius: var(--radius-pill);
  background: var(--color-surface-alt);
  color: var(--color-ink-soft);
  white-space: nowrap;
}
/* ステータス色分け：受付中=緑強調 / 予定=温色 / 終了=減衰 */
.c-row__badge--open { background: var(--color-accent-2-ink); color: var(--color-on-accent); }
.c-row__badge--upcoming { background: color-mix(in srgb, var(--color-accent) 14%, transparent); color: var(--color-accent-ink); }
.c-row__badge--past { background: var(--color-surface-alt); color: var(--color-ink-faint); }
.c-row__title { font-weight: var(--fw-medium); }
.c-row__title a { color: var(--color-ink); text-decoration: none; }
.c-row__title a:hover { color: var(--color-accent-ink); text-decoration: underline; }
.c-row__sub { display: block; font-size: var(--fs-small); color: var(--color-ink-soft); font-weight: var(--fw-regular); }
@media (max-width: 600px) {
  .c-row { grid-template-columns: 1fr; gap: var(--space-2); }
  .c-row__badge { justify-self: start; }
}

/* note記事カード */
.c-note-card { overflow: hidden; padding: 0; }
.c-note-card__thumb { position: relative; aspect-ratio: 3 / 2; background: var(--color-surface-alt); overflow: hidden; }
.c-note-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--dur-slow) var(--ease); }
.c-note-card:hover .c-note-card__thumb img { transform: scale(1.05); }
.c-note-card__tag {
  position: absolute; left: var(--space-8); top: var(--space-8);
  font-family: var(--font-serif);
  font-size: var(--fs-label); letter-spacing: var(--tracking-wide);
  background: rgba(255,255,255,0.92); color: var(--color-accent-ink);
  padding: 2px var(--space-8); border-radius: var(--radius-pill);
}
.c-note-card__body { padding: var(--space-12) var(--space-16) var(--space-16); display: flex; flex-direction: column; flex: 1; }
.c-note-card__title { font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.6; }
/* サムネ無し：大きな空枠の代わりに細いアクセント帯（本番サムネ投入時は通常表示に戻る） */
.c-note-card--noimg .c-note-card__thumb { aspect-ratio: auto; height: 8px; }
.c-note-card--noimg:nth-child(3n+1) .c-note-card__thumb { background: var(--color-accent); }
.c-note-card--noimg:nth-child(3n+2) .c-note-card__thumb { background: var(--color-accent-2); }
.c-note-card--noimg:nth-child(3n)   .c-note-card__thumb { background: var(--color-line-strong); }

/* 最近の発信：先頭を大きく見せる注目レイアウト（トップ用） */
.c-notes-feature { display: grid; gap: var(--space-16); grid-template-columns: 1fr; }
@media (min-width: 760px) {
  .c-notes-feature { grid-template-columns: 1fr 1fr; }
  .c-notes-feature > .c-note-card:first-child { grid-column: 1 / -1; flex-direction: row; align-items: stretch; min-height: 300px; }
  .c-notes-feature > .c-note-card:first-child .c-note-card__thumb { flex: 0 0 56%; aspect-ratio: auto; }
  .c-notes-feature > .c-note-card:first-child .c-note-card__body { justify-content: center; padding: var(--space-32); }
  .c-notes-feature > .c-note-card:first-child .c-note-card__title { font-size: var(--fs-h2); line-height: var(--lh-heading); }
  .c-notes-feature > .c-note-card:first-child .c-card__text { font-size: var(--fs-body); }
}

/* Instagram グリッド（正方形タイル） */
.c-ig-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-8); grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) { .c-ig-grid { grid-template-columns: repeat(6, 1fr); } }
.c-ig-tile { display: block; aspect-ratio: 1 / 1; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--color-line); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.c-ig-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.c-ig-tile .c-placeholder { width: 100%; height: 100%; }

/* =========================================================
   CTA Band（全幅・複数ページ末尾で再利用）
   ========================================================= */
.c-cta {
  /* 白文字が AA 適合するよう濃色グラデ（accent-ink #2F7088 で約5.5:1） */
  background: linear-gradient(135deg, var(--color-accent-ink), var(--color-accent-deep));
  color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(var(--space-24), 5vw, var(--space-48));
  text-align: center;
}
.c-cta__title { color: #fff; font-size: var(--fs-h2); }
.c-cta__text { color: rgba(255,255,255,0.92); margin-top: var(--space-8); max-width: 40em; margin-inline: auto; }
.c-cta__actions { margin-top: var(--space-24); display: flex; flex-wrap: wrap; gap: var(--space-12); justify-content: center; }
.c-cta .c-btn--primary { background: #fff; color: var(--color-accent-ink); border-color: #fff; }
.c-cta .c-btn--primary:hover { background: var(--color-bg); color: var(--color-accent-ink); }
.c-cta .c-btn--secondary { color: #fff; border-color: rgba(255,255,255,0.6); }
.c-cta .c-btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,0.12); color: #fff; }

/* =========================================================
   Callout（ToC→ToB の「小さな橋」）
   ========================================================= */
.c-callout {
  display: grid;
  gap: var(--space-12);
  padding: var(--space-24);
  border: 1px dashed var(--color-accent-ink);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  box-shadow: var(--shadow-sm);
}
.c-callout__label { color: var(--color-accent-ink); }
.c-callout__title { font-size: var(--fs-h3); }
.c-callout__text { color: var(--color-ink-soft); }

/* =========================================================
   Steps（番号付きプロセス）
   ========================================================= */
.c-steps { list-style: none; display: grid; gap: var(--space-16); counter-reset: step; }
@media (min-width: 760px) { .c-steps { grid-template-columns: repeat(4, 1fr); } }
.c-step { position: relative; padding-top: var(--space-32); }
.c-step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute; top: 0; left: 0;
  z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  color: var(--color-on-accent);
  background: var(--color-accent-ink);     /* 主ボタンと同じ濃さ：白文字 約6:1 */
  border-radius: var(--radius-pill);
}
/* デスクトップ：番号どうしを横線でつなぎ「流れ」を可視化 */
@media (min-width: 760px) {
  .c-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 21px; left: 44px; right: calc(-1 * var(--space-16));
    height: 2px;
    background: var(--color-line-strong);
    z-index: 0;
  }
}
.c-step__title { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.c-step__text { font-size: var(--fs-small); color: var(--color-ink-soft); }

/* =========================================================
   Tabs（contact の用途切替で利用）
   ========================================================= */
.c-tabs__list { display: flex; flex-wrap: wrap; gap: var(--space-4); border-bottom: 1px solid var(--color-line); margin-bottom: var(--space-24); }
.c-tabs__tab {
  padding: var(--space-8) var(--space-16);
  font-weight: var(--fw-medium);
  color: var(--color-ink-soft);
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  margin-bottom: -1px;
}
.c-tabs__tab[aria-selected="true"] {
  color: var(--color-accent-ink);
  background: var(--color-surface);
  border-color: var(--color-line);
  border-bottom: 2px solid var(--color-accent);
}
.c-tabs__panel[hidden] { display: none; }

/* =========================================================
   Form
   ========================================================= */
.c-field { display: grid; gap: var(--space-6); margin-bottom: var(--space-16); }
.c-field__label { font-weight: var(--fw-medium); font-size: var(--fs-small); }
.c-field__req {
  display: inline-block;
  font-size: var(--fs-label); font-weight: var(--fw-bold); line-height: 1.5;
  color: var(--color-on-accent); background: var(--color-accent-ink);
  padding: 0 var(--space-4); border-radius: var(--radius-sm);
  margin-left: var(--space-6); vertical-align: middle;
}
.c-field__hint { font-size: var(--fs-small); color: var(--color-ink-soft); }
.c-input, .c-textarea, .c-select {
  width: 100%;
  padding: var(--space-8) var(--space-12);
  background: var(--color-surface);
  border: 1.5px solid var(--color-ink-faint);   /* 白地比 約3:1（WCAG 1.4.11）。線が空間に溶けない */
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.c-input:focus, .c-textarea:focus, .c-select:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 22%, transparent);
}
.c-textarea { min-height: 8rem; resize: vertical; }
.c-input[aria-invalid="true"], .c-textarea[aria-invalid="true"], .c-select[aria-invalid="true"] {
  border-color: #B3261E;
  background: #FDF6F5;   /* エラー欄を面でも示す */
}
.c-field__error { font-size: var(--fs-small); color: #B3261E; min-height: 1.2em; }
.c-checkbox { display: flex; gap: var(--space-8); align-items: flex-start; font-size: var(--fs-small); padding-block: var(--space-6); min-height: 44px; }
.c-checkbox input { width: 1.4em; height: 1.4em; margin-top: 0.1em; flex-shrink: 0; }
/* honeypot：人間には不可視（bot 用） */
.c-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* fieldset リセット & 任意ラベル */
.c-field--fieldset { border: none; padding: 0; margin: 0 0 var(--space-16); min-inline-size: 0; }
.c-field__opt-label { font-weight: var(--fw-regular); color: var(--color-ink-soft); font-size: var(--fs-small); }

/* Segmented control（用途選択：ラジオをボタン群に） */
.c-segmented { display: flex; flex-wrap: wrap; gap: var(--space-6); margin-top: var(--space-6); }
.c-segmented__opt { position: relative; }
.c-segmented__opt input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.c-segmented__opt span {
  display: flex; align-items: center; justify-content: center;
  min-height: 44px;
  padding: var(--space-6) var(--space-16);
  border: 1.5px solid var(--color-line-strong);
  border-radius: var(--radius-pill);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.c-segmented__opt:hover input:not(:checked) + span { border-color: var(--color-ink-soft); }
.c-segmented__opt input:checked + span { background: var(--color-accent-ink); border-color: var(--color-accent-ink); color: #fff; }
.c-segmented__opt input:focus-visible + span { outline: 3px solid var(--color-focus); outline-offset: 2px; }

.c-form__status { padding: var(--space-12) var(--space-16); border-radius: var(--radius-sm); margin-bottom: var(--space-16); }
.c-form__status--ok { background: color-mix(in srgb, var(--color-accent-2) 14%, #fff); border: 1px solid var(--color-accent-2); }
.c-form__status--err { background: #FCEEED; border: 1px solid #E6A39E; border-left: 4px solid #B3261E; color: #7A1C16; }

/* =========================================================
   Breadcrumb / misc
   ========================================================= */
.c-breadcrumb { font-size: var(--fs-small); color: var(--color-ink-soft); padding-block: var(--space-12); }
.c-breadcrumb a { color: var(--color-ink-soft); }
.c-breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); padding: 0; margin: 0; }
.c-breadcrumb__list li { display: flex; align-items: center; gap: var(--space-6); }
.c-breadcrumb__list li + li::before { content: "\FF0F"; color: var(--color-ink-faint); }
.c-breadcrumb [aria-current="page"] { color: var(--color-ink); }
.c-divider { border: none; border-top: 1px solid var(--color-line); margin-block: var(--space-24); }
.c-note { font-size: var(--fs-small); color: var(--color-ink-soft); background: var(--color-surface-alt); border-left: 3px solid var(--color-accent-2); border-radius: var(--radius-sm); padding: var(--space-12); }

/* Prose：規約・ポリシー等の長文 */
.c-prose h2 { font-size: var(--fs-h3); }
.c-prose__list { padding-left: 1.4em; display: grid; gap: var(--space-4); }
.c-prose__list li { list-style: disc; }
.c-prose.stack-lg > * + * { margin-top: var(--space-32); }  /* 法務文書の節目を強める */
/* 下書き注記：本番前に内容確定すべき箇所を視覚的に隔離 */
.c-draft { background: #FFF6E5; border-left: 3px solid var(--color-accent-ink); padding: 1px var(--space-6); border-radius: var(--radius-sm); color: var(--color-ink-soft); font-size: var(--fs-small); }

/* 年表（経歴）の行間を詰める */
.c-list--plain .c-row { padding-block: var(--space-8); }