/* =====================================================================
   ProAttend — page.css  （下層ページ共通レイヤー）
   読み込み順: tokens.css → base.css → components.css → editorial.css → page.css
   方針: トップと同じエディトリアル言語（罫線主体・非対称・oリング差し色）を
        下層ページにも適用。サービス詳細／会社概要／お問い合わせ等で共用する
        レイアウト primitive を定義する。
   ===================================================================== */

/* =====================================================================
   1. ページヘッダー（サブページの導入部）
   ===================================================================== */
.page-hero {
  background: var(--color-ground);
  border-bottom: 1px solid var(--color-border);
  padding-block: clamp(40px, 3vw + 28px, 72px);
}
.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4) var(--space-7);
}
@media (min-width: 900px) {
  .page-hero__inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
  }
  .page-hero__lead { padding-bottom: 0.35em; }
}
.page-hero__eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
  margin-bottom: var(--space-3);
}
.page-hero__title {
  font-size: clamp(1.9rem, 1.3rem + 2.4vw, 2.9rem);
  line-height: 1.22;
  letter-spacing: var(--ls-tight);
  color: var(--c-navy);
  margin-bottom: var(--space-2);
  text-wrap: balance;
}
/* お知らせ記事など「短いページ名」ではなく一文のタイトルを載せる場合の見出しサイズ。
   特大の display サイズは短ラベル向けのため、記事タイトルは見出し相応に落として
   語中の不自然な折返しを避ける。 */
.page-hero__title--article {
  font-size: clamp(1.25rem, 1rem + 0.95vw, 1.75rem);
  line-height: var(--lh-snug);
  text-wrap: pretty;        /* 一文タイトルに balance は不向きなので上書き */
  word-break: keep-all;     /* CJK を語中で割らず、区切り（」・句読点・スペース）で改行 */
  overflow-wrap: anywhere;  /* 長すぎる語のみ折返してはみ出しを防止 */
}
.page-hero__lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--color-muted);
  max-width: 46ch;
}
.breadcrumb { margin-bottom: var(--space-5); }

/* 背景画像つきページヘッダー。個別ページで style="--hero-img:url(...)" を指定。
   ネイビー被膜（左→右で薄く）を重ねて白文字の可読性を確保する。トップのヒーロー(.hero-x)と同系。 */
.page-hero--image {
  position: relative;
  background-color: var(--c-navy);
  background-image:
    linear-gradient(90deg, rgba(22,38,63,0.92) 0%, rgba(22,38,63,0.80) 40%, rgba(22,38,63,0.60) 72%, rgba(22,38,63,0.44) 100%),
    var(--hero-img);
  background-size: cover;
  background-position: center;
  border-bottom: none;
  /* リード文の長短で高さが変わらないよう、全ページ共通の高さに固定して縦中央揃え */
  min-height: clamp(340px, 40vh, 460px);
  display: flex;
  align-items: center;
  padding-block: var(--space-7);
}
.page-hero--image > .container { width: 100%; }
/* 明るい画像（例: 導入事例）用に被膜を濃くして白飛びを抑える派生 */
.page-hero--dim {
  background-image:
    linear-gradient(90deg, rgba(22,38,63,0.95) 0%, rgba(22,38,63,0.84) 40%, rgba(22,38,63,0.66) 74%, rgba(22,38,63,0.50) 100%),
    var(--hero-img);
}
.page-hero--image .page-hero__title { color: #fff; }
.page-hero--image .page-hero__lead { color: rgba(255, 255, 255, 0.90); }
.page-hero--image .page-hero__eyebrow { color: rgba(255, 255, 255, 0.86); }
.page-hero--image .breadcrumb { color: rgba(255, 255, 255, 0.92); }
.page-hero--image .breadcrumb a { color: rgba(255, 255, 255, 0.78); }
.page-hero--image .breadcrumb li:not(:last-child)::after { color: rgba(255, 255, 255, 0.45); }
/* 狭幅では被膜を全体に均一化して可読性を確保 */
@media (max-width: 620px) {
  .page-hero--image {
    background-image:
      linear-gradient(0deg, rgba(22,38,63,0.82) 0%, rgba(22,38,63,0.62) 60%, rgba(22,38,63,0.56) 100%),
      var(--hero-img);
  }
  .page-hero--dim {
    background-image:
      linear-gradient(0deg, rgba(22,38,63,0.90) 0%, rgba(22,38,63,0.74) 60%, rgba(22,38,63,0.70) 100%),
      var(--hero-img);
  }
}

/* =====================================================================
   2. 本文（prose）— 読みやすいテキストブロック
   ===================================================================== */
.prose { max-width: 64ch; }
.prose p + p { margin-top: var(--space-4); }
.prose--lead p { font-size: var(--fs-lead); line-height: var(--lh-relaxed); color: var(--c-ink); }

/* リード文＋本文の2カラム（左：見出し／右：本文）。サービス概要などで使用 */
.split {
  display: grid; grid-template-columns: 1fr; gap: var(--space-5) var(--space-8);
}
@media (min-width: 900px) { .split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); align-items: start; } }
.split__aside .eyebrow { display: block; margin-bottom: var(--space-3); }

/* =====================================================================
   3. 提供内容（カテゴリごとのリスト）— 罫線主体の目録
   ===================================================================== */
.offer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6) var(--space-8);
}
@media (min-width: 760px) { .offer-grid { grid-template-columns: 1fr 1fr; } }
.offer-group { border-top: 2px solid var(--c-navy); padding-top: var(--space-4); }
/* サービス一覧: 説明文の行数差で箇条書き（下線）の開始位置がズレないよう、
   説明段落に最小高さ（本文3行 = 1.8 × 3）を確保して各カードの高さを揃える。 */
@media (min-width: 760px) {
  .offer-group > .prose:first-of-type { min-height: 5.4em; }
}
.offer-group__title {
  font-size: var(--fs-h5);
  color: var(--c-navy);
  margin-bottom: var(--space-3);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5em;
}
.offer-group__title .en {
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--c-ink);
}
.offer-list li {
  position: relative;
  padding: var(--space-3) 0 var(--space-3) 1.4em;
  border-bottom: 1px solid var(--color-border);
  color: var(--c-ink);
  line-height: var(--lh-snug);
}
.offer-list li::before {
  content: "";
  position: absolute; left: 0; top: calc(var(--space-3) + 0.55em);
  width: 6px; height: 6px; border-radius: 2px;
  background: var(--c-slate-soft);
}

/* 特徴（番号つきエディトリアル・カード化しない）— 「選ばれる理由」等で再利用 */
.points {
  display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--color-border);
}
@media (min-width: 820px) { .points { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } }
.point { padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border); }
.point__no {
  font-size: 1.4rem; font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
  color: var(--c-slate-soft); line-height: 1; margin-bottom: var(--space-3);
}
.point__title { font-size: var(--fs-h5); color: var(--c-navy); margin-bottom: var(--space-2); }
.point__body { color: var(--color-text); max-width: 46ch; }

/* 料金など強調ボックス（罫線・控えめ） */
.callout {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--c-accent);   /* oリング系の差し色を“面/線”で1か所 */
  background: var(--color-ground);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6);
}
.callout__label {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--c-ink); margin-bottom: var(--space-2);
}
.callout__big {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); font-weight: var(--fw-bold);
  color: var(--c-navy); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.callout__note { margin-top: var(--space-2); font-size: var(--fs-small); color: var(--color-muted); }

/* =====================================================================
   4. ボードメンバー（会社概要）
   ===================================================================== */
.board-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6);
}
@media (min-width: 720px) { .board-grid { grid-template-columns: repeat(3, 1fr); } }
.member {
  border-top: 2px solid var(--c-navy);
  padding-top: var(--space-4);
}
.member__photo {
  display: block;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-md);
  background: var(--color-ground);
  margin: 0 auto var(--space-5);   /* センター揃え */
}
/* 写真ありのボードメンバーは中央寄せ、テキストも中央で整える */
.board-grid .member { text-align: center; }
.board-grid .member .member__bio { text-align: left; }   /* 経歴は左寄せで可読性を保つ */

/* Googleマップ埋め込み（所在地） */
.map-embed {
  margin-top: var(--space-7);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 6;
  background: var(--color-ground);
}
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.map-cap { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-muted); }
.member__name { font-size: var(--fs-h5); color: var(--c-navy); }
.member__en { font-size: var(--fs-small); color: var(--c-ink); letter-spacing: var(--ls-wide); font-weight: var(--fw-medium); margin-left: 0.5em; }
.member__role { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--c-ink); font-weight: var(--fw-medium); }
.member__duty { margin-top: var(--space-1); font-weight: var(--fw-regular); }
.member__qual { margin-top: var(--space-1); font-size: var(--fs-small); color: var(--color-muted); }
.member__bio { margin-top: var(--space-3); font-size: var(--fs-caption); color: var(--color-text); line-height: var(--lh-normal); }

/* =====================================================================
   5. 沿革（タイムライン：年 ＋ 出来事）
   ===================================================================== */
.timeline { border-top: 1px solid var(--color-border); }
.timeline__row {
  display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-5);
  padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border);
}
@media (min-width: 600px) { .timeline__row { grid-template-columns: 7em 1fr; align-items: baseline; } }
.timeline__year {
  font-weight: var(--fw-bold); color: var(--c-navy); font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-wide);
}
.timeline__event { color: var(--c-ink); }
.timeline__event .sub { display: block; margin-top: 0.2em; font-size: var(--fs-caption); color: var(--color-muted); }

/* =====================================================================
   6. お問い合わせ（フォーム＋サイド情報の2カラム）
   ===================================================================== */
.contact-grid {
  display: grid; grid-template-columns: 1fr; gap: var(--space-7) var(--space-8);
}
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; } }
.form { max-width: none; }                 /* グリッド内では幅いっぱい */
.form-row { display: grid; grid-template-columns: 1fr; gap: var(--space-4); }
@media (min-width: 560px) { .form-row { grid-template-columns: 1fr 1fr; } }
.contact-aside {
  background: var(--color-ground);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}
.contact-aside h3 { font-size: var(--fs-h5); color: var(--c-navy); margin-bottom: var(--space-3); }
.contact-aside dl { font-size: var(--fs-caption); }
.contact-aside dt { font-weight: var(--fw-bold); color: var(--c-slate); margin-top: var(--space-4); }
.contact-aside .ca-ico { width: 1.05em; height: 1.05em; margin-right: 0.4em; color: var(--c-slate); vertical-align: -0.15em; }
.contact-aside dd { color: var(--c-ink); margin-top: var(--space-1); }
.contact-note {
  margin-top: var(--space-5); padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--fs-small); color: var(--color-muted);
}

/* =====================================================================
   7. ページ末尾の関連導線（次に見る）
   ===================================================================== */
.next-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4); margin-top: var(--space-6); }
@media (min-width: 700px) { .next-grid { grid-template-columns: 1fr 1fr; } }
.next-card {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5); text-decoration: none; color: var(--c-navy);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.next-card:hover { border-color: var(--c-accent); background: var(--c-accent); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.next-card:hover .next-card__desc { color: var(--c-navy); }
.next-card:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.next-card__text { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.next-card__label { font-weight: var(--fw-medium); }
.next-card__desc { font-size: var(--fs-small); line-height: 1.6; color: var(--color-muted); text-wrap: pretty; }
.next-card__arrow { color: var(--c-slate); flex: none; transition: transform var(--dur) var(--ease), color var(--dur) var(--ease); }
.next-card:hover .next-card__arrow { transform: translateX(3px); color: var(--c-navy); }

/* =====================================================================
   8. ブランドページ（大型ステートメント／Value・行動指針グリッド）
   単調さを避けるため、中央大型・2カラム罫線・ネイビー帯・番号リストを混在。
   ===================================================================== */
.brand-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: var(--c-ink); margin-bottom: var(--space-4);
}
.brand-hero { text-align: center; }
.brand-hero .brand-eyebrow { justify-content: center; }
.brand-statement {
  font-size: clamp(1.7rem, 1.15rem + 2.1vw, 2.8rem);
  line-height: 1.45; letter-spacing: var(--ls-tight);
  color: var(--c-navy); font-weight: var(--fw-bold);
  text-wrap: balance; max-width: 26em; margin: 0 auto;
}
.section--navy .brand-eyebrow { color: var(--c-accent); }
.section--navy .brand-statement { color: var(--c-white); }
/* 見出しステートメント（Mission / Brand Message の左カラム大文字） */
.brand-lead { font-size: var(--fs-h4); line-height: var(--lh-snug); color: var(--c-navy); font-weight: var(--fw-bold); text-wrap: balance; }
/* Value 4項目：2カラム罫線グリッド */
.brand-grid { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--color-border); }
@media (min-width: 760px) { .brand-grid { grid-template-columns: 1fr 1fr; column-gap: var(--space-8); } }
.brand-item { padding: var(--space-5) 0; border-bottom: 1px solid var(--color-border); }
.brand-item__title {
  font-size: var(--fs-h5); color: var(--c-navy);
  display: flex; align-items: baseline; gap: 0.55em; margin-bottom: var(--space-2);
}
.brand-item__title .n { font-size: var(--fs-caption); color: var(--c-accent); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); }
.brand-item__body { color: var(--c-ink); line-height: var(--lh-normal); }

/* =====================================================================
   9. 実績詳細ページ（/results/）— 経験年数バー・チップクラウド・エリア
   ===================================================================== */
/* 経験年数の分布（横バー）。fill の幅は style="--w:34%" で指定し、
   スプレッドシート連携時は JS が --w を書き換えるだけで反映できる。 */
.exp-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6) var(--space-7); }
@media (min-width: 900px) { .exp-grid { grid-template-columns: repeat(3, 1fr); } }
.exp-group__head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  padding-bottom: var(--space-3); margin-bottom: var(--space-4);
  border-bottom: 2px solid var(--c-navy);
}
.exp-group__title { font-size: var(--fs-h6); color: var(--c-navy); font-weight: var(--fw-bold); margin: 0; }
.exp-group__total { font-size: var(--fs-caption); color: var(--c-slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.exp-group__total [data-count] { color: var(--c-navy); font-weight: var(--fw-bold); }
.exp-bars { display: grid; gap: var(--space-3); }
.exp-bar { display: grid; grid-template-columns: 8.5em 1fr 3.4em; align-items: center; gap: var(--space-3); }
.exp-bar__label { font-size: var(--fs-small); color: var(--c-ink); white-space: nowrap; }
.exp-bar__track { position: relative; height: 14px; background: var(--c-lightgray); border-radius: var(--radius-pill); overflow: hidden; }
.exp-bar__fill { position: absolute; top: 0; left: 0; height: 100%; width: var(--w, 0%); min-width: 6px; background: var(--c-navy); border-radius: var(--radius-pill); transform-origin: left center; }
.exp-bar--max .exp-bar__fill { background: var(--c-accent); }
.exp-bar__val { font-size: var(--fs-small); color: var(--c-navy); text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.exp-bar--max .exp-bar__val { color: var(--c-accent-ink, var(--c-navy)); }
/* 視界進入でバーが左→右へ順に伸びる（JS有効・motion可のときのみ。幅は常に --w で描画） */
@media (prefers-reduced-motion: no-preference) {
  .js .exp-bars.reveal .exp-bar__fill { transform: scaleX(0); transition: transform 760ms var(--ease); transition-delay: calc(var(--i, 0) * 120ms + 100ms); }
  .js .exp-bars.reveal.is-in .exp-bar__fill { transform: scaleX(1); }
}

/* 実務経験年数の分布（円グラフ・ドーナツ）【2026-07-27】
   セグメント＝<circle> の stroke-dasharray="割合 100-割合"（r=15.915 → 円周≒100）。
   視界進入（reveal.js が .expd-group.reveal に .is-in を付与）で CSS だけで順に描画する。 */
.expd-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-7); }
@media (min-width: 900px) { .expd-grid { grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-7); } }
.expd-group__title {
  font-size: var(--fs-h6); color: var(--c-navy); font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4); text-align: center;
  padding-bottom: var(--space-3); border-bottom: 2px solid var(--c-navy);
}
.expd-figure { position: relative; width: min(210px, 62%); margin: 0 auto; }
.expd-svg { display: block; width: 100%; height: auto; transform: rotate(-90deg); }
.expd-ring { fill: none; stroke: var(--c-lightgray); stroke-width: 6.4; }
.expd-seg { fill: none; stroke-width: 6.4; }
/* 【2026-08-28】経験年数「豊富」の強調へ変更（クライアント指示）:
   最頻区分の強調をやめ、10年以上（seg3・seg4）を常にオレンジ2トーンで強調。短い年数は淡色に固定。 */
.expd-seg--1 { stroke: #C9D3DE; }   /* 5年未満（最も淡い） */
.expd-seg--2 { stroke: #8CA2B7; }   /* 5年以上10年未満（淡ネイビー） */
.expd-seg--3 { stroke: var(--c-accent); }  /* 10年以上15年未満（オレンジ） */
.expd-seg--4 { stroke: #C0790E; }   /* 15年超（濃いオレンジ） */
.expd-total {
  position: absolute; inset: 0; margin: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1em;
  color: var(--c-navy); pointer-events: none; text-align: center;
}
.expd-total__num { font-size: clamp(1.7rem, 1.45rem + 0.8vw, 2.1rem); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.expd-total__num .u { font-size: 0.55em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.05em; }
.expd-total__t { font-size: var(--fs-caption); color: var(--c-slate); font-weight: var(--fw-medium); line-height: 1.3; }
.expd-legend { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.expd-legend__row {
  display: flex; align-items: center; gap: var(--space-2);
  padding: 0.34rem 0; border-bottom: 1px dotted var(--color-border);
  font-size: var(--fs-small);
}
.expd-swatch { flex: none; width: 10px; height: 10px; border-radius: 2px; }
.expd-swatch--1 { background: #C9D3DE; }
.expd-swatch--2 { background: #8CA2B7; }
.expd-swatch--3 { background: var(--c-accent); }
.expd-swatch--4 { background: #C0790E; }
/* 10年以上の行を強調（凡例は経験の長い順に並べる） */
.expd-legend__row--em .expd-legend__lab { font-weight: var(--fw-medium); }
.expd-legend__lab { color: var(--c-ink); }
.expd-legend__val { margin-left: auto; color: var(--c-navy); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.expd-legend__val .u { font-size: 0.82em; color: var(--c-slate); margin-left: 0.05em; }
.expd-legend__val small { font-size: 0.86em; font-weight: var(--fw-regular, 400); color: var(--c-slate); margin-left: 0.15em; }
/* 描画アニメ: JS有効・motion可のときだけ 0 から伸ばす（インラインの dasharray を !important で上書き→ is-in で解除） */
@media (prefers-reduced-motion: no-preference) {
  .js .expd-group .expd-seg { transition: stroke-dasharray 860ms var(--ease); transition-delay: calc(var(--i, 0) * 140ms + 150ms); }
  .js .expd-group:not(.is-in) .expd-seg { stroke-dasharray: 0 100 !important; }
}

/* 登録プロフェッショナル（資格・語学）のコンパクトグリッド【2026-07-27】 */
.qual-sub {
  font-size: var(--fs-h6); color: var(--c-navy); font-weight: var(--fw-bold);
  margin: var(--space-6) 0 var(--space-3);
  display: flex; align-items: center; gap: var(--space-3);
}
.qual-sub::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.qual-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--color-border); border-left: 1px solid var(--color-border); }
@media (min-width: 640px) { .qual-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1000px) { .qual-grid { grid-template-columns: repeat(4, 1fr); } }
.qual-cell {
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-4);
  border-bottom: 1px solid var(--color-border); border-right: 1px solid var(--color-border);
  display: flex; flex-direction: column; gap: var(--space-1, 0.25rem);
}
.qual-cell__num { font-size: 1.45rem; font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1.1; font-variant-numeric: tabular-nums; }
.qual-cell--lg .qual-cell__num { font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem); }
.qual-cell__num .u { font-size: 0.55em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.1em; }
.qual-cell__lab { font-size: var(--fs-caption); color: var(--c-ink); line-height: var(--lh-snug); text-wrap: balance; }

/* 資格・語学のグループ表示（0727クライアント提供デザイン準拠）
   大見出し（qual-head）＝太下線＋右肩に延べ人数／各グループ＝左にカテゴリ名と小計・右に項目群 */
.qual-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  font-size: var(--fs-h4); color: var(--c-navy); font-weight: var(--fw-bold);
  margin: var(--space-8, 3rem) 0 0; padding-bottom: var(--space-3);
  border-bottom: 2px solid var(--c-navy);
}
.qual-head__total { font-size: var(--fs-small); font-weight: var(--fw-regular); color: var(--c-slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qual-group {
  display: grid; grid-template-columns: 1fr; gap: var(--space-4);
  padding: var(--space-6) 0; border-bottom: 1px solid var(--color-border);
}
.qual-groups .qual-group:last-child { border-bottom: 0; }
@media (min-width: 800px) {
  .qual-group { grid-template-columns: minmax(200px, 260px) 1fr; gap: var(--space-7); }
}
.qual-group__name { margin: 0; font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--c-navy); }
.qual-group__sum {
  margin: var(--space-2) 0 0; font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
  font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1; font-variant-numeric: tabular-nums;
}
.qual-group__sum .u { font-size: 0.45em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.12em; }
.qual-items {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-content: center; gap: var(--space-3) var(--space-7);
}
.qual-items li { display: flex; align-items: baseline; gap: 0.5em; }
.qual-item__lab { font-size: var(--fs-body); color: var(--c-ink); }
.qual-item__num { font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.qual-item__num .u { font-size: 0.6em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.1em; }

/* 知見・専門性／プロジェクトステージの人数表示【2026-07-27】 */
.brand-item__count { margin-left: auto; color: var(--c-navy); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 1.6rem; line-height: 1; }
.brand-item__count .u { font-size: 0.68em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.08em; }
.point__count { margin-top: var(--space-2); font-size: 1.6rem; font-weight: var(--fw-bold); color: var(--c-navy); line-height: 1; font-variant-numeric: tabular-nums; }
.point__count .u { font-size: 0.6em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.08em; }

/* 支援実績カード（/cases/） */
.case-list { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 720px) { .case-list { grid-template-columns: repeat(2, 1fr); } }
.case-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--color-border); border-top: 3px solid var(--c-navy);
  border-radius: var(--radius-md); padding: var(--space-6);
  transition: border-top-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.case-card:hover { border-top-color: var(--c-accent); box-shadow: var(--shadow-1); transform: translateY(-2px); }
.case-card__no { font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); color: var(--c-slate); font-variant-numeric: tabular-nums; }
.case-card__title { font-size: var(--fs-h5); color: var(--c-navy); margin: var(--space-2) 0 var(--space-4); text-wrap: pretty; }
.case-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px dotted var(--color-border); }
.case-card__meta > div { display: flex; align-items: baseline; gap: .5em; }
.case-card__meta dt { font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--c-ink); }
.case-card__meta dd { margin: 0; font-size: var(--fs-small); color: var(--c-ink); }
.case-card__body { font-size: var(--fs-caption); line-height: var(--lh-relaxed); color: var(--c-ink); }

/* 種別タブ（/cases/・cases-tabs.js が制御。JS無効時は非表示＝全件表示） */
.case-tabs { display: none; }
.js .case-tabs {
  display: flex; gap: var(--space-2);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  /* overflow-x:auto 指定時は縦も auto に計算され、タブの margin-bottom:-1px の
     はみ出しで不要な縦スクロールバーが出るため、縦は明示的に隠す */
  overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
}
.case-tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--c-slate); white-space: nowrap;
  padding: var(--space-3) var(--space-4);
  margin-bottom: -1px; /* 選択下線をタブ行の罫線に重ねる */
  border-bottom: 3px solid transparent;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.case-tab:hover { color: var(--c-navy); }
.case-tab:focus-visible { outline: 2px solid var(--c-navy); outline-offset: -2px; }
.case-tab[aria-selected="true"] { color: var(--c-navy); font-weight: var(--fw-bold); border-bottom-color: var(--c-navy); }
.case-tabs__note { margin: calc(-1 * var(--space-4)) 0 var(--space-6); font-size: var(--fs-small); color: var(--color-muted); }

/* もっと見る（cases-tabs.js が制御）。JS無効時は非表示＝全件がそのまま並ぶ */
.case-more { display: none; }
.js .case-more { display: flex; justify-content: center; margin-top: var(--space-6); }
.case-more [hidden] { display: none; }
.case-card[hidden] { display: none; }

/* チップクラウド（業界・エリア） */
.chip-cloud { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.area-group + .area-group { margin-top: var(--space-5); }
.area-group__name {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  color: var(--c-slate); margin-bottom: var(--space-3);
}

/* ============================================================
   対応可能エリア：日本地図＋立体縦棒グラフ（/results/）
   地図ベース = geolonia/japanese-prefectures (MIT)
   ============================================================ */
.area-map { margin-top: var(--space-6); }
.jmap { max-width: 640px; margin: 0 auto; position: relative; }
.jmap-svg { width: 100%; height: auto; display: block; overflow: visible; }
/* 棒ホバー時の人数ツールチップ */
.jmap__tip {
  position: absolute; transform: translate(-50%, -145%);
  background: var(--c-navy); color: #fff;
  font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap;
  padding: 0.3rem 0.6rem; border-radius: var(--radius-sm);
  pointer-events: none; z-index: 5; box-shadow: var(--shadow-1);
}
/* ベース地図（都道府県） */
.jmap-svg .svg-map polygon,
.jmap-svg .svg-map path { fill: #E6E4DD; stroke: #fff; stroke-width: 1.3; }
/* 立体の縦棒（前面＝ネイビー／上面＝スレート／側面＝濃紺） */
.jcols .jcol__front { fill: var(--c-navy); }
.jcols .jcol__side  { fill: #0E1A2E; }
.jcols .jcol__top   { fill: var(--c-slate); }
@media (hover: hover) {
  .jcols .jcol:hover .jcol__front { fill: var(--c-accent); }
  .jcols .jcol:hover .jcol__top   { fill: #F4BB57; }
  .jcols .jcol:hover .jcol__side  { fill: #C67F14; }
}
/* スクロールで棒が下から伸びる（JS有効・モーション許可時のみ） */
@media (prefers-reduced-motion: no-preference) {
  .js .area-map .jcol { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
  .js .area-map.is-in .jcol {
    transform: scaleY(1);
    transition: transform 800ms cubic-bezier(.2, .7, .2, 1);
    transition-delay: var(--d, 0ms);
  }
}
.area-map__cap {
  margin-top: var(--space-4); text-align: center;
  font-size: var(--fs-caption); color: var(--c-muted-text);
}

/* 海外（項目＋人数のみ） */
.area-ov { margin-top: var(--space-7); }
.area-ov__title {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  color: var(--c-slate); margin-bottom: var(--space-3);
}
.area-ov__list { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: 0; }
.area-ov__row {
  display: flex; align-items: baseline; gap: .45em;
  padding: .5rem 1rem; background: #fff;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
}
.area-ov__row dt { font-size: var(--fs-small); color: var(--c-ink); }
.area-ov__row dd { margin: 0; font-weight: var(--fw-bold); color: var(--c-navy); font-variant-numeric: tabular-nums; }
.area-ov__row .u { font-size: .78em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: .08em; }

/* 都道府県別の人数一覧（開閉） */
.area-detail { margin-top: var(--space-6); border-top: 1px solid var(--color-border); }
.area-detail > summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5em;
  padding: var(--space-4) 0; font-weight: var(--fw-medium); color: var(--c-navy);
}
.area-detail > summary::-webkit-details-marker { display: none; }
.area-detail > summary::before { content: "＋"; color: var(--c-slate); font-weight: 700; }
.area-detail[open] > summary::before { content: "−"; }
.area-detail__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-4) var(--space-6); padding-bottom: var(--space-5); }
@media (min-width: 640px) { .area-detail__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .area-detail__grid { grid-template-columns: repeat(3, 1fr); } }
.area-dl__region {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide);
  color: var(--c-slate); margin: 0 0 var(--space-2);
  padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border);
}
.area-dl dl { margin: 0; }
.area-dl__row { display: flex; justify-content: space-between; align-items: baseline; padding: .35rem 0; border-bottom: 1px dotted var(--color-border); }
.area-dl__row dt { color: var(--c-ink); font-size: var(--fs-small); }
.area-dl__row dd { margin: 0; color: var(--c-navy); font-weight: var(--fw-medium); font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.area-dl__row .u { font-size: .82em; color: var(--c-slate); margin-left: .08em; }

/* =====================================================================
   13. 代表者挨拶（会社概要・0721指示）
   ===================================================================== */
.greeting {
  display: grid; grid-template-columns: 1fr; gap: var(--space-6) var(--space-8);
  align-items: start;
}
@media (min-width: 820px) { .greeting { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
.greeting__photo { max-width: 300px; }
.greeting__photo img {
  display: block; width: 100%; height: auto;
  border-radius: var(--radius-md);
}
.greeting__name { margin-top: var(--space-3); font-weight: var(--fw-bold); color: var(--c-navy); }
.greeting__name .en { display: block; font-size: var(--fs-eyebrow); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--c-ink); margin-top: 0.3em; }
.greeting__role { font-size: var(--fs-caption); color: var(--c-ink); }
.greeting__body p + p { margin-top: var(--space-4); }

/* =====================================================================
   14. 採用ページ（募集ポジション枠・0721指示）
   ===================================================================== */
.job { border: 1px solid var(--color-border); border-top: 3px solid var(--c-navy); border-radius: var(--radius-md); background: var(--c-white); }
.job + .job { margin-top: var(--space-6); }
.job__head { padding: var(--space-6) var(--space-6) var(--space-4); }
.job__eyebrow { font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: var(--fw-bold); color: var(--c-slate); margin-bottom: var(--space-2); }
.job__title { font-size: var(--fs-h4); color: var(--c-navy); }
.job__lead { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--fs-caption); max-width: 60ch; }
.job__body { padding: 0 var(--space-6) var(--space-6); }
.job .deflist { border-top-color: var(--color-border); }
/* 準備中の項目値（差し替え前提のプレースホルダ表示） */
.tbd { color: var(--color-muted); }

/* 募集ポジションの行リスト【2026-09-02 採用ページ刷新】
   募集要項の確定前は行リストで簡潔に見せる（求人サイトの定石の体裁）。
   要項確定後は行を <details> 化するか、旧 .job カード（上記・CSS残置）へ戻して詳細を載せる。 */
.job-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.job-row {
  display: grid; grid-template-columns: 1fr; gap: var(--space-1) var(--space-6);
  padding: var(--space-5) var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
@media (min-width: 820px) {
  .job-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
}
.job-row__eyebrow {
  font-size: var(--fs-eyebrow); letter-spacing: var(--ls-wide); text-transform: uppercase;
  font-weight: var(--fw-bold); color: var(--c-slate); margin-bottom: var(--space-1);
}
.job-row__title { font-size: var(--fs-h5); color: var(--c-navy); margin: 0; }
.job-row__desc { margin-top: var(--space-1); color: var(--color-muted); font-size: var(--fs-small); max-width: 62ch; }
.job-row__status {
  justify-self: start; white-space: nowrap;
  font-size: var(--fs-caption); font-weight: var(--fw-medium); color: var(--c-slate);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  padding: 0.25em 0.9em; margin-top: var(--space-2);
}
@media (min-width: 820px) { .job-row__status { justify-self: end; margin-top: 0; } }

/* =====================================================================
   15. プロフェッショナルデータベース検索（/database/・0721指示）
   条件（業種・専門分野）を選ぶと該当人数を表示するUI。
   人数データはスプレッドシート整備後に assets/js/db-search.js の DATA へ投入。
   ===================================================================== */
.db-search {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-ground);
  padding: var(--space-6) var(--space-5);
}
@media (min-width: 900px) { .db-search { padding: var(--space-7); } }
.db-search__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-5); }
@media (min-width: 820px) { .db-search__grid { grid-template-columns: 1fr 1fr; } }
.db-search .field { margin-bottom: 0; }
/* 結果表示（大型数値＝実績帯と同じトーン。oリングを添える） */
.db-result {
  margin-top: var(--space-6);
  border-radius: var(--radius-md);
  background: var(--c-navy);
  color: var(--c-white);
  padding: var(--space-6) var(--space-5);
  display: grid; grid-template-columns: 1fr; gap: var(--space-2) var(--space-6);
  align-items: center; text-align: center;
}
.db-result__label { font-size: var(--fs-caption); color: var(--c-muted-on-navy); }
.db-result__cond { font-size: var(--fs-caption); color: rgba(255,255,255,0.92); }
.db-result__num {
  font-size: clamp(2.4rem, 1.6rem + 2.6vw, 3.6rem);
  font-weight: var(--fw-bold); line-height: 1.05;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.db-result__num .u { font-size: 0.42em; font-weight: var(--fw-medium); margin-left: 0.15em; color: var(--c-muted-on-navy); }
.db-result__note { font-size: var(--fs-small); color: var(--c-muted-on-navy); }
/* 上段=業種／下段=専門分野の2ユニット（0727続き・各プルダウン直下に結果） */
.db-unit { display: grid; gap: var(--space-4); }
@media (min-width: 820px) { .db-search .db-unit { grid-template-columns: 1fr 1fr; align-items: center; } }
.db-search .db-unit + .db-unit { margin-top: var(--space-6); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }
.db-result--unit { margin-top: 0; }
.db-search__note { margin-top: var(--space-5); margin-bottom: 0; font-size: var(--fs-small); color: var(--color-muted); }
/* 業種・専門分野の独立集計表示（0727続き・クライアント指示でクロス集計を廃止） */
.db-rows { display: grid; gap: var(--space-1, 0.25rem); }
.db-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid rgba(255,255,255,0.18); }
.db-row:last-child { border-bottom: 0; }
.db-row__lab { font-size: var(--fs-body); font-weight: var(--fw-medium); color: rgba(255,255,255,0.96); }
.db-row__num { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.3rem); font-weight: var(--fw-bold); color: var(--c-white); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.db-row__num .u { font-size: 0.45em; font-weight: var(--fw-medium); margin-left: 0.12em; color: var(--c-muted-on-navy); }
/* 整備中バッジ（データ投入までの表示） */
.db-badge {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--c-navy); background: var(--c-white);
  border-radius: var(--radius-pill); padding: 0.25em 0.9em;
  justify-self: center;
}
.db-badge::before { content: ""; width: 0.5em; height: 0.5em; border: 2px solid var(--c-accent); border-radius: 50%; }

/* =====================================================================
   支援実績カードの属性タグ（0817クライアント指示）
   - PEファンド案件: ファンドサイズ（ラージ／ミドル／スモールキャップ）
   - 事業会社案件: 上場企業／非上場企業
   - .case-card__top = 番号とタグを同じ行に並べるヘッダー行
   ===================================================================== */
.case-card__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.case-card__top .case-card__no { margin: 0; }
.case-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-1, 6px); margin: 0; }
.case-tag {
  display: inline-block;
  font-size: 0.75rem; font-weight: var(--fw-medium);
  line-height: 1;
  padding: 0.42em 0.95em;
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-navy);
  color: var(--c-navy); background: var(--c-white);
  white-space: nowrap;
}
.case-tag--fill { background: var(--c-navy); color: var(--c-white); }

/* ファンドサイズ別のグループ見出し（/clients/pe-fund/） */
.case-size-head {
  display: flex; align-items: baseline; gap: 0.7em;
  margin: var(--space-7) 0 var(--space-4);
  padding-left: 0.75em;
  border-left: 3px solid var(--c-accent);
  font-size: var(--fs-h5); color: var(--c-navy);
}
.case-size-head:first-of-type { margin-top: 0; }
.case-size-head .en {
  font-size: var(--fs-eyebrow); font-weight: var(--fw-medium);
  letter-spacing: var(--ls-wide); color: var(--c-slate);
}

/* =====================================================================
   M&Aプロセス別の支援実績（横型プロセスバー・/clients/pe-fund/）【2026-08-17】
   - 左（投資検討）→右（投資後）の時系列にフェーズを並べ、
     各フェーズの案件数を縦棒の高さで表現する。
   - 件数は li の style="--h:NN"（単位なし・最大フェーズ=100）と data-count で指定。
     ★数値はプロセス別案件数の共有後に差し替えること（現状は暫定値）。
   - 最多フェーズは .mna-flow__item--max でオレンジ強調。
   - バーは視界進入（.reveal.is-in）で下から伸長、件数はカウントアップ。
     reduced-motion / JS無効では静的表示。
   - 720px未満は横棒リスト（exp-bars と同型）に切り替えて可読性を確保。
   ===================================================================== */
.mna-flow { max-width: 100%; }
.mna-flow__list {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: end;
}
.mna-flow__item { display: flex; flex-direction: column; min-width: 0; }
.mna-flow__barwrap {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  height: 190px;
}
.mna-flow__count {
  font-size: var(--fs-h5); font-weight: var(--fw-bold); color: var(--c-navy);
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--space-2);
}
.mna-flow__count .u { font-size: 0.6em; font-weight: var(--fw-medium); color: var(--c-slate); margin-left: 0.1em; }
.mna-flow__bar {
  display: block; /* span のため明示（barwrap が flex でない狭幅レイアウトでも寸法が効くように） */
  width: min(58%, 64px);
  height: calc(var(--h, 0) * 1.4px); /* --h:100 → 140px（barwrap 190px から件数分を確保） */
  min-height: 6px;
  background: var(--c-navy);
  border-radius: 3px 3px 0 0;
  transform-origin: bottom center;
}
.mna-flow__item--max .mna-flow__bar { background: var(--c-accent); }
.mna-flow__item--max .mna-flow__count { color: var(--c-accent); }
.mna-flow__phase {
  margin: 0; padding-top: var(--space-3);
  border-top: 2px solid var(--c-navy);
  font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--c-navy);
  text-align: center; text-wrap: balance;
}
.mna-flow__desc {
  margin: var(--space-1, 6px) 0 0;
  font-size: 0.75rem; line-height: 1.5; color: var(--c-slate);
  text-align: center; text-wrap: pretty;
}
/* 時系列の軸ラベル（投資検討時 → 投資実行後） */
.mna-flow__axis {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0 0;
  font-size: var(--fs-small); color: var(--c-slate);
}
.mna-flow__axis::before,
.mna-flow__axis::after { content: ""; flex: 1; border-top: 1px dashed var(--c-border-strong, #C9C5BB); }
.mna-flow__axis .arr { color: var(--c-accent); }
/* 視界進入で棒が下から伸びる（JS有効・motion可のときのみ） */
@media (prefers-reduced-motion: no-preference) {
  .js .mna-flow.reveal .mna-flow__bar { transform: scaleY(0); transition: transform 760ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 100ms); }
  .js .mna-flow.reveal.is-in .mna-flow__bar { transform: scaleY(1); }
}
/* 狭幅: 横棒リストに切り替え
   【2026-09-02 修正】件数（.mna-flow__count）は .mna-flow__barwrap の「中」にあるため、
   barwrap に display:contents を当てて子要素（件数・棒）を行グリッドへ直接参加させる。
   旧実装は barwrap 自体を12pxのトラックにしていたため、中の件数が潰れて表示が壊れていた。 */
@media (max-width: 719px) {
  .mna-flow__list { grid-template-columns: 1fr; gap: var(--space-4); align-items: stretch; }
  .mna-flow__item {
    display: grid; grid-template-columns: 1fr auto;
    grid-template-areas: "phase count" "desc count" "bar bar";
    column-gap: var(--space-3);
  }
  .mna-flow__barwrap { display: contents; }
  .mna-flow__phase { grid-area: phase; text-align: left; border-top: 0; padding-top: 0; }
  .mna-flow__desc { grid-area: desc; text-align: left; }
  .mna-flow__count { grid-area: count; align-self: center; margin: 0; }
  /* 棒＝薄灰のトラック（.mna-flow__bar本体）＋ ::before の塗り（幅=--h%） */
  .mna-flow__bar,
  .mna-flow__item--max .mna-flow__bar {
    grid-area: bar; position: relative;
    width: 100%; height: 12px; margin-top: var(--space-2);
    background: var(--c-lightgray); border-radius: var(--radius-pill); overflow: hidden;
  }
  .mna-flow__bar::before {
    content: ""; position: absolute; inset: 0;
    width: calc(var(--h, 0) * 1%); min-width: 6px;
    background: var(--c-navy); border-radius: var(--radius-pill);
    transform-origin: left center;
  }
  .mna-flow__item--max .mna-flow__bar::before { background: var(--c-accent); }
  /* デスクトップ用の縦伸長アニメを打ち消し、横伸長は ::before 側で行う */
  .js .mna-flow.reveal .mna-flow__bar { transform: none; transition: none; }
  @media (prefers-reduced-motion: no-preference) {
    .js .mna-flow.reveal .mna-flow__bar::before { transform: scaleX(0); transition: transform 760ms var(--ease); transition-delay: calc(var(--i, 0) * 110ms + 100ms); }
    .js .mna-flow.reveal.is-in .mna-flow__bar::before { transform: scaleX(1); }
  }
}