/* ==========================================================================
   STATUS: DRAFT(代表確認前)
   Univo｜会社HP（univo.jp のトップ）の見た目（194号・brand-web）
   値の正本は knowledge/reference/brand-tokens.md。ここではトークンの var() だけを使う
   （色コード・書体名の直書き・影・ぼかし・繰り返しの動きは書かない）。
   トークンは assets/univo-tokens.css が .univo-tokens（body）の下に定義する。
   2回目（演出の層）は .corp-fx（各章の一番後ろ・文字より下）と data-fx-line の g に足す。
   2026/10/08（代表決定＝Web も白基調・トークン §1 面の規定・§1-3 の「Web」の列）：
   旧ダーク面（ヘッダー・メニュー・表紙・考え方・無料相談・フッター・規約の窓・チャットの丸）を白い面へ読み替えた。
   変えたのは色（地・文字・線）だけ。文言・大きさ・並びは変えていない。
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 文字の大きさ：2026/10/08 site-unify-261008 で、サイトの共通の段階（--fs-*）へ寄せた。
      段階は 2026/10/09 代表決定で正本の値になった（brand-tokens.md §2-4・実装＝assets/univo-tokens.css）。
      旧（白銀比 √2 の等比・基準 15px）＝12.61 / 15 / 17.84 / 21.21 / 30 / 42.43 / 60px。名前（--corp-fs-*）は使う所のために残す
   -------------------------------------------------------------------------- */
.corp {
  --corp-fs-1: var(--fs-index);     /* 13px：欧文と数字の索引の記号・表と図の短い項目名だけ（読ませる和文は --fs-note 以上） */
  --corp-fs-2: var(--fs-body);      /* 16px：本文 */
  --corp-fs-3: var(--fs-lead);      /* 18px：リード・小さな見出し */
  --corp-fs-4: var(--fs-heading-s); /* 24px：h3 */
  --corp-fs-5: min(var(--fs-heading), 2rem); /* 32px：文中の大きい数字（--fs-heading の下限＝段の端の値。brand-tokens.md §2-4 の例のとおり） */
  --corp-fs-6: var(--fs-heading);   /* 32〜45px：h2 */
  --corp-fs-7: var(--fs-display);   /* 40〜64px：h1 */
  --corp-measure: 34em;   /* 本文の1行の長さの上限（約34字） */
  --corp-cookie-h: 13rem; /* Cookie の帯が出ている間に下へ空ける高さ（スマートフォン） */

  /* トークンから作る値（新しい数を持たない） */
  --corp-lh-mid: calc((var(--lh-body) + var(--lh-head)) / 2);
  --corp-header-h: calc(var(--space-8) + var(--space-2));
  --corp-pad-x: var(--gutter);      /* 2026/10/08：画面の左右の余白はトークンの --gutter（ヘッダ・フッタと同じ）。旧＝24px／広い画面 32px */
  --corp-gap: var(--space-4);
  --corp-scrub: calc(var(--motion-scrub-length) / 2);
  --corp-tap: calc(var(--space-8) - var(--space-3));

  /* 面の意味（白基調＝2026/10/08 代表決定）。段ごとに変えるのは地（--corp-bg）だけ＝要素ごとに上書きしない */
  --corp-bg: var(--paper);
  --corp-fg: var(--ink);
  --corp-fg-2: var(--ink);
  --corp-muted: var(--muted);
  --corp-rule: var(--line);
  --corp-ctl: var(--muted);
  --corp-accent-text: var(--brand-deep);
  --corp-logo: var(--logo-navy);
}
@media (min-width: 64em) {
  .corp {
    --corp-gap: var(--space-6);
    --corp-cookie-h: 7rem;
  }
}

/* 白い面の段（2026/10/08）：トークン §1-3 の「Web」の列＝暗い面の地 → --surface（白い面）／--paper（主）。
   文字・線・橙は .corp の既定（ライト）をそのまま受け継ぐ。HTML のクラス名 .corp-dark は「白い面（--surface）の段」の印として読む
   （名前の付け替えは HTML を直す回に）。段の境は --line の罫（--paper と --surface の差 1.05:1 は見分けられない＝トークン §1）。
   改訂前（〜2026/10/07）：.corp-dark・.corp-header・.corp-menu・.corp-footer は地 --navy・文字 --ink-on-navy／--text-on-navy・線 --line-on-navy・color-scheme: dark */
.corp-dark, .corp-header, .corp-menu { --corp-bg: var(--surface); }
.corp-footer { --corp-bg: var(--paper); }
.corp-light { color-scheme: light; }

/* --------------------------------------------------------------------------
   1. 土台。部品（申込フォーム・規約の窓・チャット）の規則に勝たないよう、
      要素への既定は :where() で詳細度 0 にしてある
   -------------------------------------------------------------------------- */
/* OS のダーク設定・ブラウザの自動の暗色化でも白基調のまま（2026/10/08。only に対応しないブラウザは前の行の light を使う） */
html { color-scheme: light; color-scheme: only light; }
.corp {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--corp-fs-2);
  font-weight: 400;
  line-height: var(--lh-body);
  line-break: strict;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: light;
  color-scheme: only light;
}
.corp *, .corp *::before, .corp *::after { box-sizing: border-box; }
:where(.corp) :where(h1, h2, h3, h4, h5, h6, p, ol, ul, dl, dd, figure, blockquote) { margin: 0; }
:where(.corp) :where(ol, ul) { padding: 0; }
:where(.corp) :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; }
:where(.corp) :where(button, input, select, textarea) { font: inherit; color: inherit; }
:where(.corp) :where(button) { background: transparent; border: 0; padding: 0; cursor: pointer; }
:where(.corp) :where(img, svg) { display: block; vertical-align: middle; }
:where(.corp) :where(img) { max-width: 100%; height: auto; }
:where(.corp) :where(a) { color: inherit; text-decoration: inherit; }
:where(.corp) :where(svg line) { stroke: currentColor; stroke-width: var(--stroke); vector-effect: non-scaling-stroke; fill: none; }
:where(.corp) :focus-visible { outline: var(--stroke-accent) solid var(--brand); outline-offset: var(--space-1); }
.corp [hidden] { display: none !important; }

/* 台本（チャット・Cookie・規約の窓・申込フォーム）が切り替えるクラス */
.flex { display: flex; }
.hidden { display: none !important; }

.corp-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.corp-num { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* 本文へ移動（.site-skip）は共通の部品（assets/univo-site.css 2節）へ移した */
#main { outline: none; }

/* --------------------------------------------------------------------------
   2. ロゴ・ボタン・リンク・札
   -------------------------------------------------------------------------- */
/* ロゴ（.site-logo）は共通の部品（assets/univo-site.css 3節）へ移した */

.corp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--corp-tap); padding: var(--space-2) var(--space-6);
  border: var(--stroke) solid var(--brand-deep); border-radius: var(--radius-full);
  background: var(--brand-deep); color: var(--on-brand-deep); /* 2026/10/09 206号：地 --brand-deep・文字 白 */
  font-family: var(--font-sans); font-weight: 600; font-size: var(--corp-fs-2); line-height: var(--lh-head);
  text-decoration: none; cursor: pointer;
  transition: background-color var(--motion-duration-ui) var(--motion-ease),
              border-color var(--motion-duration-ui) var(--motion-ease),
              color var(--motion-duration-ui) var(--motion-ease);
}
.corp-btn:hover { text-decoration: none; } /* 色は変えない（矢印が進む＝univo-site.css の .site-btn-arrow） */
.corp-btn-sm { padding: var(--space-2) var(--space-4); }
.corp-btn-lg { min-height: var(--space-8); padding: var(--space-3) var(--space-8); font-size: var(--corp-fs-3); }
.corp-btn-line { background: transparent; color: var(--corp-fg); border-color: var(--corp-ctl); min-height: var(--space-8); padding: var(--space-3) var(--space-8); font-size: var(--corp-fs-3); }
.corp-btn-line:hover { background: transparent; color: var(--corp-accent-text); border-color: var(--corp-accent-text); }

.corp-textlink {
  color: var(--corp-accent-text);
  text-decoration: underline; text-decoration-thickness: var(--stroke); text-underline-offset: 0.25em;
}
.corp-textlink:hover { text-decoration-thickness: var(--stroke-accent); }

.corp-tag {
  display: inline-block; padding: 0 var(--space-2);
  border: var(--stroke) solid var(--corp-ctl); border-radius: var(--radius-sm);
  font-family: var(--font-mono); font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid);
  color: var(--corp-fg-2);
}
.corp-tag-status { color: var(--corp-accent-text); border-color: var(--corp-accent-text); margin-bottom: var(--space-4); }

/* --------------------------------------------------------------------------
   3. ヘッダーとメニュー：2026/10/08 site-unify-261008 で共通の部品（.site-header・.site-menu＝assets/univo-site.css 3節）へ移した。
      トップだけのもの（動きを止めるボタンの置き場）は corp-fx.css
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   4. 章・見出し・本文。各章の一番後ろに演出の層（.corp-fx・文字より下・いまは空）
   -------------------------------------------------------------------------- */
.corp-wrap { position: relative; z-index: 1; max-width: var(--max-w); margin: 0 auto; padding: 0 var(--corp-pad-x); }
.corp-sec {
  position: relative; isolation: isolate; overflow: clip;
  --corp-wash-pad: var(--space-8);   /* 224号 B1：章の上下の余白＝色が移る帯の長さ（同じ変数で指す） */
  padding: var(--corp-wash-pad) 0;
  background: var(--corp-bg); color: var(--corp-fg-2);
  scroll-margin-top: var(--corp-header-h);
}
@media (min-width: 64em) {
  .corp-sec { --corp-wash-pad: var(--space-12); }
  .corp-sec.corp-hero { padding-top: var(--space-8); }
}
/* 段の境は --line の罫（2026/10/08：白い面の段と --paper の段の差は見分けられない＝すべての段の間に引く。改訂前＝ライトの段どうしの間だけ） */
.corp-sec + .corp-sec { border-top: var(--stroke) solid var(--line); }

/* 224号 B1（ブリーフ＝作業記録 224_work\B1_brief_トップのスクロールの色.md 付録 D）：章の地の淡い色（白基調）。
   段＝0〜1（--surface と --wash を混ぜる割合）。--wash の値は univo-tokens.css（brand-tokens.md §1）。
   この章ごとの静止の地は、下の K3（スクロールに連動する固定の層）の退路＝対応していないブラウザ・動きを減らす設定のときに出る
   （強制配色・印刷では、その下の規則で単色の地 --corp-bg に戻す）。JavaScript・transition・animation を使わない。
   色が移るのは章の上下の余白だけ（文字の下では移らない）。深まるのは画面例の章（#service）で1回・申込の章へ向かって白へ澄む。
   表紙（#top）と申込（#contact）は段 0＝--surface のまま。 */
.corp-sec { --corp-wash-in: 0; --corp-wash-t: 0; --corp-wash-out: 0; }
#measure  { --corp-wash-in: 0;    --corp-wash-t: 0.5; --corp-wash-out: 0.75; }
#service  { --corp-wash-in: 0.75; --corp-wash-t: 1;   --corp-wash-out: 0.75; }
#trust    { --corp-wash-in: 0.75; --corp-wash-t: 0.5; --corp-wash-out: 0.5;  }
#process  { --corp-wash-in: 0.5;  --corp-wash-t: 0.5; --corp-wash-out: 0.5;  }
#partners { --corp-wash-in: 0.5;  --corp-wash-t: 0.5; --corp-wash-out: 0.25; }
#faq      { --corp-wash-in: 0.25; --corp-wash-t: 0;   --corp-wash-out: 0;    }
@supports (background: color-mix(in srgb, red 50%, blue)) {
  .corp-sec {
    --corp-wash-c-in:  color-mix(in srgb, var(--wash) calc(var(--corp-wash-in)  * 100%), var(--surface));
    --corp-wash-c:     color-mix(in srgb, var(--wash) calc(var(--corp-wash-t)   * 100%), var(--surface));
    --corp-wash-c-out: color-mix(in srgb, var(--wash) calc(var(--corp-wash-out) * 100%), var(--surface));
    background: linear-gradient(to bottom,
      var(--corp-wash-c-in) 0,
      var(--corp-wash-c) var(--corp-wash-pad),
      var(--corp-wash-c) calc(100% - var(--corp-wash-pad)),
      var(--corp-wash-c-out) 100%);
  }
}
/* 強制配色・印刷では淡い地を出さない（いまの単色の地へ戻す） */
@media (forced-colors: active), print { .corp-sec { background: var(--corp-bg); } }

/* 224号 K3（メインの決定 2026/10/22＝代表の依頼「スクロールに応じてグラデーションで色が変化する」）：
   ブリーフ付録 F-4 の作り＝画面に固定した地の層を1枚置き、その色をスクロールにつれて移す。CSS のスクロール連動のアニメーション
   （view-timeline・timeline-scope）だけで動かし、JavaScript は使わない。スクロールを止めれば色も止まる（追いかける補間をしない）。
   色の幅はブリーフと同じ（--surface〜--wash＝段 0〜1）。深さ＝境ごとの増減の和：
     #measure が入る +0.5／#service が入る +0.5／#trust が入る −0.5／#faq が入る −0.5（ほかの境は 0）＝白→淡→深→淡→淡→淡→白→白。
   各章の上端が画面の下に入ってから、章が画面を覆うまで（entry 0%〜100%）のあいだに、その境の分だけ移る。
   対応していないブラウザ・動きを減らす設定・強制配色・印刷では使わない＝上の章ごとの静止の地のまま。 */
@property --corp-w-measure { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --corp-w-service { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --corp-w-trust   { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --corp-w-faq     { syntax: "<number>"; inherits: false; initial-value: 0; }
@keyframes corp-w-measure { from { --corp-w-measure: 0; } to { --corp-w-measure: 1; } }
@keyframes corp-w-service { from { --corp-w-service: 0; } to { --corp-w-service: 1; } }
@keyframes corp-w-trust   { from { --corp-w-trust: 0; }   to { --corp-w-trust: 1; } }
@keyframes corp-w-faq     { from { --corp-w-faq: 0; }     to { --corp-w-faq: 1; } }
@supports (animation-timeline: view()) and (timeline-scope: --a) and (background: color-mix(in srgb, red 50%, blue)) {
  @media screen and (prefers-reduced-motion: no-preference) and (not (forced-colors: active)) {
    .corp { timeline-scope: --corp-v-measure, --corp-v-service, --corp-v-trust, --corp-v-faq; }
    #measure { view-timeline: --corp-v-measure block; }
    #service { view-timeline: --corp-v-service block; }
    #trust   { view-timeline: --corp-v-trust block; }
    #faq     { view-timeline: --corp-v-faq block; }
    /* 章の地は透かして、固定の層の色を見せる（章の境の罫はいまのまま） */
    .corp-sec { background: transparent; }
    .corp::before {
      content: ""; position: fixed; inset: 0 0 auto; height: 100lvh; z-index: -1; pointer-events: none;
      background-color: color-mix(in srgb, var(--wash) clamp(0%, calc((0.5 * var(--corp-w-measure) + 0.5 * var(--corp-w-service) - 0.5 * var(--corp-w-trust) - 0.5 * var(--corp-w-faq)) * 100%), 100%), var(--surface));
      animation-name: corp-w-measure, corp-w-service, corp-w-trust, corp-w-faq;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --corp-v-measure, --corp-v-service, --corp-v-trust, --corp-v-faq;
      animation-range: entry 0% entry 100%;
    }
  }
}
.corp-fx { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }

/* 表紙・考え方（旧ダーク面＝いまは白い面）だけ：12カラムの境目を縦線で静かに見せる（動かさない） */
.corp-gridlines::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  top: calc(-1 * var(--space-8)); bottom: calc(-1 * var(--space-8));
  left: var(--corp-pad-x); right: var(--corp-pad-x);
  border-left: var(--stroke) solid var(--corp-rule);
  border-right: var(--stroke) solid var(--corp-rule);
  background-image: repeating-linear-gradient(to right, var(--corp-rule) 0 var(--stroke), transparent var(--stroke) calc(100% / 12));
  background-size: calc(100% + var(--corp-gap)) 100%;   /* 194号：1枚で描く（タイルの拡大縮小で線がぼけない） */
  background-position: calc(var(--corp-gap) / -2) 0;
  background-repeat: no-repeat;
  background-origin: border-box;   /* 左右の枠線の外側を基準に並べる＝表紙（土台のグリッド）と同じ位置 */
  display: none;
}
.corp-gridlines > * { position: relative; z-index: 1; }
@media (min-width: 64em) {
  .corp-gridlines::before { display: block; top: calc(-1 * var(--space-12)); bottom: calc(-1 * var(--space-12)); }
}

.corp-sec-head { max-width: var(--max-w-text); margin-bottom: var(--space-8); }
.corp-label, .corp-eyebrow {
  display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4);
  font-family: var(--font-mono); font-size: var(--corp-fs-2); letter-spacing: var(--ls-label); line-height: var(--corp-lh-mid);
  color: var(--corp-muted);
}
.corp-eyebrow { color: var(--corp-accent-text); }
.corp-label-no { flex: none; color: var(--corp-accent-text); }   /* 203号：狭い幅で番号の列が縮み「0」「5」に割れていた＝縮めない */

.corp-h1, .corp-h2, .corp-h3 {
  margin: 0; font-family: var(--font-serif-jp); font-weight: 600; line-height: var(--lh-head);
  color: var(--corp-fg); font-feature-settings: "palt";
  word-break: auto-phrase; text-wrap: balance;
}
.corp-h1 { font-size: var(--fs-display); letter-spacing: var(--ls-head); }
.corp-h2 { font-size: var(--fs-heading); letter-spacing: var(--ls-head); }
.corp-h3 { font-size: var(--corp-fs-4); margin-bottom: var(--space-4); }
.corp-lead {
  margin-top: var(--space-6); max-width: var(--corp-measure);
  font-size: var(--corp-fs-3); line-height: var(--lh-body); color: var(--corp-fg-2);
  word-break: auto-phrase;
}
.corp-prose { max-width: var(--corp-measure); }
.corp-prose > * + * { margin-top: var(--space-4); }
.corp-prose > .corp-lead { margin-top: 0; color: var(--corp-fg); }

.corp-fact > p:first-child { font-size: var(--corp-fs-3); color: var(--corp-fg); }
.corp-fact-num { font-family: var(--font-sans); font-weight: 600; font-size: var(--corp-fs-5); line-height: 1; color: var(--corp-fg); font-variant-numeric: tabular-nums; }
.corp-source { margin-top: var(--space-2); font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--corp-muted); }
.corp-details { margin-top: var(--space-2); }
.corp-details summary {
  display: inline-flex; align-items: center; min-height: var(--corp-tap); cursor: pointer;
  color: var(--corp-accent-text); text-decoration: underline; text-underline-offset: 0.25em;
}
.corp-details summary::-webkit-details-marker { display: none; }
.corp-details-body { padding-left: var(--space-4); border-left: var(--stroke) solid var(--corp-rule); }
.corp-details-body p + p { margin-top: var(--space-3); }

.corp-cta-block { margin-top: var(--space-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.corp-cta-end { margin-top: var(--space-8); }
.corp-cta-note { font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--corp-muted); }
/* 194号（brand-qa B-1）：数と単位・図と指標の番号・条件の語を、行の途中で分けない */
.corp-nobr { white-space: nowrap; }
.corp-more { margin-top: var(--space-4); }

/* 仕様の表（dl）＝罫線で組む。カードの格子にしない */
.corp-spec { border-top: var(--stroke) solid var(--corp-rule); }
.corp-spec-row {
  display: grid; grid-template-columns: 5.5em minmax(0, 1fr); gap: var(--space-4);
  padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--corp-rule);
}
.corp-spec dt {
  font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label);
  line-height: var(--corp-lh-mid); color: var(--corp-muted); padding-top: 0.2em;
}
.corp-spec dd { color: var(--corp-fg); line-height: var(--corp-lh-mid); }
.corp-spec-compact .corp-spec-row { padding: var(--space-2) 0; }
@media (min-width: 48em) { .corp-spec-row { grid-template-columns: 8em minmax(0, 1fr); } }

.corp-price { font-family: var(--font-sans); font-size: var(--corp-fs-3); font-variant-numeric: tabular-nums; color: var(--corp-fg); }

.corp-table { width: 100%; border-collapse: collapse; margin-top: var(--space-4); }
.corp-table th, .corp-table td {
  padding: var(--space-2) var(--space-3) var(--space-2) 0; text-align: left; vertical-align: top;
  border-bottom: var(--stroke) solid var(--corp-rule); line-height: var(--corp-lh-mid); font-weight: 400; color: var(--corp-fg);
}
.corp-table thead th { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); color: var(--corp-muted); }
.corp-table .corp-num-col { text-align: right; padding-right: 0; white-space: nowrap; font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   5. 表紙
   -------------------------------------------------------------------------- */
.corp-hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--corp-gap); row-gap: var(--space-8); align-items: start; }
.corp-hero-main, .corp-titleblock, .corp-fig01 { grid-column: 1 / -1; }
@media (min-width: 64em) {
  .corp-hero-main { grid-column: 1 / span 7; }
  .corp-titleblock { grid-column: 9 / span 4; align-self: end; }
}
.corp-titleblock { border-top: var(--stroke-accent) solid var(--brand); border-bottom: var(--stroke) solid var(--corp-rule); }
.corp-tb-row { display: grid; grid-template-columns: 4.5em minmax(0, 1fr); gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--stroke) solid var(--corp-rule); }
.corp-tb-row:first-child { border-top: 0; }
.corp-titleblock dt { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); line-height: var(--corp-lh-mid); color: var(--corp-muted); padding-top: 0.2em; }
.corp-titleblock dd { color: var(--corp-fg); line-height: var(--corp-lh-mid); }
.corp-tb-sub { display: block; color: var(--corp-fg-2); }

/* --------------------------------------------------------------------------
   6. 図の共通（製図の文法）：外形＝--stroke・基準＝--stroke-accent（--brand）・線は太さを変えない
   -------------------------------------------------------------------------- */
.corp-fig { min-width: 0; }
.corp-fig-cap {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-6); padding-bottom: var(--space-2); border-bottom: var(--stroke) solid var(--corp-rule);
}
.corp-fig-no { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); color: var(--corp-accent-text); }
.corp-fig-title { color: var(--corp-fg); }
.corp-fig-note { margin-top: var(--space-4); max-width: var(--corp-measure); font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--corp-muted); }
.corp-stretch { display: block; width: 100%; height: 100%; overflow: visible; }
.corp-dot { flex: none; width: calc(var(--space-1) * 1.5); height: calc(var(--space-1) * 1.5); border-radius: var(--radius-full); background: currentColor; }

/* 寸法線（端は短い斜線・矢じりなし）。文字は線の上 */
.corp-dim { display: flex; flex-direction: column-reverse; gap: var(--space-1); color: var(--corp-muted); }
.corp-dim-line { display: flex; align-items: center; height: var(--space-3); }
.corp-dim-end { flex: none; width: var(--space-3); height: var(--space-3); overflow: visible; }
.corp-dim-bar { flex: 1 1 auto; height: var(--space-3); }
.corp-dim-text { text-align: center; color: var(--corp-fg); }

/* FIG.01 経営診断の仕様 */
.corp-f1 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.corp-f1-head { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); color: var(--corp-muted); margin-bottom: var(--space-3); }
.corp-f1-list { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.corp-f1-item { display: flex; align-items: center; gap: var(--space-3); padding-left: var(--space-3); border-left: var(--stroke) solid var(--corp-rule); }
.corp-f1-text { color: var(--corp-fg); line-height: var(--corp-lh-mid); }
.corp-f1-text .corp-num { font-size: var(--corp-fs-3); }
.corp-f1-sub { display: block; font-size: var(--corp-fs-2); color: var(--corp-muted); }
.corp-f1-leader { display: none; }
.corp-f1-join { display: block; width: var(--space-3); height: var(--space-6); margin: 0 auto; color: var(--corp-muted); }
.corp-f1-sheet { position: relative; width: 100%; max-width: 32rem; margin: 0 auto; aspect-ratio: 1.41421 / 1; }
.corp-f1-sheet-svg { display: block; width: 100%; height: 100%; overflow: visible; }
.corp-f1-rules { color: var(--corp-rule); }
.corp-f1-frame { color: var(--corp-muted); }
.corp-f1-sheet-label { position: absolute; left: 3%; top: 1.5%; font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); line-height: var(--lh-head); color: var(--corp-fg); }
.corp-f1-tick { position: absolute; left: 3%; transform: translateY(-50%); font-family: var(--font-mono); font-size: var(--corp-fs-1); line-height: 1; color: var(--corp-muted); }
.corp-f1-tick-first { top: 12%; }
.corp-f1-tick-last { top: 89%; }
.corp-f1-dim { margin-top: var(--space-2); }
@media (min-width: 64em) {
  .corp-f1 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 0; row-gap: var(--space-3); align-items: center; }
  .corp-f1-in { grid-column: 1; grid-row: 1; }
  .corp-f1-sheet { grid-column: 2; grid-row: 1; max-width: none; }
  .corp-f1-out { grid-column: 3; grid-row: 1; }
  .corp-f1-dim { grid-column: 2; grid-row: 2; margin-top: 0; }
  .corp-f1-join { display: none; }
  .corp-f1-item { padding-left: 0; border-left: 0; }
  .corp-f1-text { flex: 0 1 auto; max-width: 70%; }
  .corp-f1-leader { display: flex; flex: 1 1 var(--space-6); min-width: var(--space-6); align-items: center; height: var(--space-3); color: var(--corp-muted); }
  .corp-f1-leader > svg { flex: 1 1 auto; height: var(--space-1); }
  .corp-f1-out .corp-f1-head { padding-left: var(--space-8); }
}

/* --------------------------------------------------------------------------
   7. 考え方（FIG.02 12の領域の収れん）
   DOM は常に最終状態（12行の表）。散らばりは corp.js が名前に transform を与えるだけ
   -------------------------------------------------------------------------- */
.corp-measure-grid { display: grid; gap: var(--space-12); }
.corp-origin { color: var(--corp-fg-2); }
.corp-fig02 { min-width: 0; }
.corp-f2-stage { overflow: clip; }
.corp-f2-body { position: relative; font-size: var(--corp-fs-2); }
.corp-f2-base {
  position: absolute; top: 0; bottom: 0; left: calc(3.2em + var(--space-2));
  width: var(--stroke-accent); height: 100%; color: var(--brand);
}
.corp-f2-base line { stroke-width: var(--stroke-accent); }
.corp-f2-list { list-style: none; padding: 0; border-top: var(--stroke) solid var(--corp-rule); }
.corp-f2-row {
  display: grid; grid-template-columns: 3.2em minmax(0, 1fr); column-gap: var(--space-4);
  padding: var(--space-2) 0; border-bottom: var(--stroke) solid var(--corp-rule);
}
.corp-f2-no { grid-row: span 2; font-family: var(--font-mono); font-size: var(--corp-fs-1); line-height: var(--corp-lh-mid); color: var(--corp-muted); text-align: right; padding-top: 0.15em; }
.corp-f2-name { grid-column: 2; justify-self: start; color: var(--corp-fg); line-height: var(--corp-lh-mid); }
.corp-f2-seg { white-space: nowrap; } /* 領域の名前は「／」までの塊の間でだけ折り返す（経営診断のページの .pkg-domain-seg と同じ・206号 D2610091228129bfa） */
.corp-f2-ind { grid-column: 2; font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--corp-muted); }
@media (min-width: 64em) {
  .corp-f2-row { grid-template-columns: 3.2em minmax(0, 1fr) minmax(0, 1.25fr); align-items: baseline; }
  .corp-f2-no { grid-row: auto; }
  .corp-f2-ind { grid-column: 3; }
}
/* 収れん中（corp.js が付ける）：留める距離は --motion-scrub-length の半分 */
.corp-fig02.is-scrub .corp-f2-track { height: calc(100vh - var(--corp-header-h) + var(--corp-scrub)); }
.corp-fig02.is-scrub .corp-f2-stage {
  position: sticky; top: var(--corp-header-h); height: calc(100vh - var(--corp-header-h));
  display: flex; flex-direction: column; justify-content: center;
}
.corp-fig02.is-scrub .corp-f2-name { will-change: transform, opacity; }

/* --------------------------------------------------------------------------
   8. 事業（経営診断・財務ヘルスモニタリング・FIG.03）
   -------------------------------------------------------------------------- */
.corp-service-grid { display: grid; gap: var(--space-8); margin-bottom: var(--space-12); }
@media (min-width: 64em) { .corp-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(var(--corp-gap) * 2); } }
.corp-offer { padding-top: var(--space-4); border-top: var(--stroke-accent) solid var(--corp-fg); min-width: 0; }
.corp-offer-steps { display: flex; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); font-family: var(--font-mono); font-size: var(--corp-fs-2); letter-spacing: var(--ls-label); color: var(--corp-muted); }
.corp-offer-steps span + span::before {
  content: ""; display: inline-block; width: var(--space-4); height: var(--stroke);
  margin: 0 var(--space-2); background: currentColor; vertical-align: middle;
}
.corp-monthly { list-style: none; padding: 0; margin-bottom: var(--space-4); border-top: var(--stroke) solid var(--corp-rule); }
.corp-monthly li {
  display: grid; grid-template-columns: 2em minmax(0, 1fr); column-gap: var(--space-3);
  padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--corp-rule); line-height: var(--corp-lh-mid);
}
.corp-monthly-no { grid-row: span 2; font-family: var(--font-mono); font-size: var(--corp-fs-1); color: var(--corp-accent-text); padding-top: 0.2em; }
.corp-monthly-k { color: var(--corp-fg); font-weight: 600; }
.corp-monthly-v { color: var(--corp-fg-2); }

.corp-fig03 { margin-top: var(--space-4); }
.corp-f3 { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
.corp-f3-head { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); color: var(--corp-muted); }
.corp-f3-head-c, .corp-f3-lines, .corp-f3-clist { display: none; }
.corp-f3-flist, .corp-f3-clist { list-style: none; padding: 0; }
.corp-f3-flist { border-top: var(--stroke) solid var(--corp-rule); }
.corp-f3-field {
  display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding: var(--space-2) 0; border-bottom: var(--stroke) solid var(--corp-rule); line-height: var(--corp-lh-mid);
  transition: font-weight var(--motion-duration-ui) var(--motion-ease), color var(--motion-duration-ui) var(--motion-ease);
}
.corp-f3-no { font-family: var(--font-mono); font-size: var(--corp-fs-1); color: var(--corp-muted); min-width: 2em; }
.corp-f3-name { color: var(--corp-fg); }
.corp-f3-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); margin-left: auto; }
.corp-f3-cat {
  display: flex; flex-direction: column; justify-content: center;
  padding-left: var(--space-4); border-left: var(--stroke) solid var(--corp-rule); line-height: var(--corp-lh-mid);
  transition: font-weight var(--motion-duration-ui) var(--motion-ease);
}
.corp-f3-cname { color: var(--corp-fg); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--corp-fs-3); }
.corp-f3-from { font-family: var(--font-mono); font-size: var(--corp-fs-2); color: var(--corp-muted); }
.corp-f3-ln { transition: stroke var(--motion-duration-ui) var(--motion-ease), opacity var(--motion-duration-ui) var(--motion-ease); }
@media (min-width: 64em) {
  .corp-f3 { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr) minmax(0, 4fr); grid-template-rows: auto auto; column-gap: 0; row-gap: var(--space-3); }
  .corp-f3-head-f { grid-column: 1; grid-row: 1; }
  .corp-f3-head-c { display: block; grid-column: 3; grid-row: 1; padding-left: var(--space-4); }
  .corp-f3-flist { grid-column: 1; grid-row: 2; display: grid; grid-template-rows: repeat(12, minmax(0, 1fr)); }
  .corp-f3-lines { display: block; grid-column: 2; grid-row: 2; width: 100%; height: 100%; color: var(--corp-muted); pointer-events: none; }
  .corp-f3-clist { display: grid; grid-column: 3; grid-row: 2; grid-template-rows: repeat(12, minmax(0, 1fr)); }
  .corp-f3-tags { display: none; }
  .corp-f3-cat[data-c="fin"] { grid-row: 1 / span 2; }
  .corp-f3-cat[data-c="mgmt"] { grid-row: 3 / span 3; }
  .corp-f3-cat[data-c="rev"] { grid-row: 6 / span 2; }
  .corp-f3-cat[data-c="strat"] { grid-row: 8 / span 3; }
  .corp-f3-cat[data-c="data"] { grid-row: 11 / span 2; }
}
/* 触れたときの応答（JS を足さない）：分野に触れると結び先の線が --brand に、語が濃くなる */
@media (hover: hover) and (min-width: 64em) {
  .corp-f3-field:hover, .corp-f3-cat:hover { font-weight: 600; }
  .corp-fig03:has(.corp-f3-field:hover, .corp-f3-cat:hover) .corp-f3-ln { opacity: 0.35; }
  .corp-fig03:has(.corp-f3-field[data-f="01"]:hover) :is(.corp-f3-ln[data-f="01"], .corp-f3-cat[data-c="strat"]),
  .corp-fig03:has(.corp-f3-field[data-f="02"]:hover) :is(.corp-f3-ln[data-f="02"], .corp-f3-cat[data-c="strat"]),
  .corp-fig03:has(.corp-f3-field[data-f="03"]:hover) :is(.corp-f3-ln[data-f="03"], .corp-f3-cat[data-c="rev"]),
  .corp-fig03:has(.corp-f3-field[data-f="04"]:hover) :is(.corp-f3-ln[data-f="04"], .corp-f3-cat[data-c="rev"]),
  .corp-fig03:has(.corp-f3-field[data-f="05"]:hover) :is(.corp-f3-ln[data-f="05"], .corp-f3-cat[data-c="rev"]),
  .corp-fig03:has(.corp-f3-field[data-f="06"]:hover) :is(.corp-f3-ln[data-f="06"], .corp-f3-cat[data-c="rev"], .corp-f3-cat[data-c="data"]),
  .corp-fig03:has(.corp-f3-field[data-f="07"]:hover) :is(.corp-f3-ln[data-f="07"], .corp-f3-cat[data-c="mgmt"]),
  .corp-fig03:has(.corp-f3-field[data-f="08"]:hover) :is(.corp-f3-ln[data-f="08"], .corp-f3-cat[data-c="mgmt"]),
  .corp-fig03:has(.corp-f3-field[data-f="09"]:hover) :is(.corp-f3-ln[data-f="09"], .corp-f3-cat[data-c="fin"]),
  .corp-fig03:has(.corp-f3-field[data-f="10"]:hover) :is(.corp-f3-ln[data-f="10"], .corp-f3-cat[data-c="mgmt"], .corp-f3-cat[data-c="data"]),
  .corp-fig03:has(.corp-f3-field[data-f="11"]:hover) :is(.corp-f3-ln[data-f="11"], .corp-f3-cat[data-c="strat"]),
  .corp-fig03:has(.corp-f3-field[data-f="12"]:hover) :is(.corp-f3-ln[data-f="12"], .corp-f3-cat[data-c="strat"]),
  .corp-fig03:has(.corp-f3-cat[data-c="fin"]:hover) :is(.corp-f3-ln[data-c="fin"], .corp-f3-field[data-f="09"]),
  .corp-fig03:has(.corp-f3-cat[data-c="mgmt"]:hover) :is(.corp-f3-ln[data-c="mgmt"], .corp-f3-field:is([data-f="07"], [data-f="08"], [data-f="10"])),
  .corp-fig03:has(.corp-f3-cat[data-c="rev"]:hover) :is(.corp-f3-ln[data-c="rev"], .corp-f3-field:is([data-f="03"], [data-f="04"], [data-f="05"], [data-f="06"])),
  .corp-fig03:has(.corp-f3-cat[data-c="strat"]:hover) :is(.corp-f3-ln[data-c="strat"], .corp-f3-field:is([data-f="01"], [data-f="02"], [data-f="11"], [data-f="12"])),
  .corp-fig03:has(.corp-f3-cat[data-c="data"]:hover) :is(.corp-f3-ln[data-c="data"], .corp-f3-field:is([data-f="06"], [data-f="10"])) {
    stroke: var(--brand); stroke-width: var(--stroke-accent); opacity: 1; font-weight: 600;
  }
}

/* --------------------------------------------------------------------------
   9. 代表と体制（FIG.05・情報の扱い）
   -------------------------------------------------------------------------- */
.corp-trust-grid { display: grid; gap: var(--space-12); }
.corp-profile { max-width: var(--max-w-text); }
.corp-profile-name { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--corp-fs-4); line-height: var(--lh-head); }
.corp-career { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.corp-career li { display: grid; grid-template-columns: minmax(0, 1fr); }
.corp-career-when { font-family: var(--font-sans); font-variant-numeric: tabular-nums; color: var(--corp-muted); font-size: var(--fs-note); } /* 「年」「月」を含む＝読ませる和文（15px 以上） */
.corp-career-what { color: var(--corp-fg); }
@media (min-width: 48em) {
  .corp-career li { grid-template-columns: 12em minmax(0, 1fr); column-gap: var(--space-4); }
  .corp-career-when { font-size: var(--corp-fs-2); }
}
.corp-f5 { list-style: none; padding: 0; display: grid; gap: var(--space-6); }
.corp-f5-step { position: relative; display: flex; flex-direction: column; gap: var(--space-1); padding-top: var(--space-3); border-top: var(--stroke) solid var(--corp-muted); line-height: var(--corp-lh-mid); }
.corp-f5-join { display: none; }
.corp-f5-no { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); color: var(--corp-accent-text); }
.corp-f5-k { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--corp-fs-3); color: var(--corp-fg); }
.corp-f5-v { color: var(--corp-fg-2); }
.corp-f5-rules { margin-top: var(--space-2); padding-left: 1.2em; color: var(--corp-fg); }
.corp-f5-rules li::marker { color: var(--corp-muted); }
@media (min-width: 64em) {
  .corp-f5 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-8); }
  .corp-f5-join {
    display: block; position: absolute; top: calc(-1 * var(--space-1)); left: calc(-1 * var(--space-8));
    width: var(--space-8); height: var(--space-2); color: var(--corp-muted);
  }
}
.corp-care { margin-top: var(--space-12); max-width: var(--max-w-text); }
.corp-care-list { list-style: none; padding: 0; border-top: var(--stroke) solid var(--corp-rule); }
.corp-care-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2); padding: var(--space-4) 0; border-bottom: var(--stroke) solid var(--corp-rule); }
.corp-care-k { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--ls-label); color: var(--corp-muted); padding-top: 0.2em; }
.corp-care-v { color: var(--corp-fg); }
.corp-sa-mark { height: var(--space-12); width: auto; margin-top: var(--space-3); }
@media (min-width: 48em) { .corp-care-item { grid-template-columns: 10em minmax(0, 1fr); column-gap: var(--space-6); } }

/* --------------------------------------------------------------------------
   10. 進め方（FIG.04 標準の期間：棒の長さは日数から作る）
   -------------------------------------------------------------------------- */
.corp-fig04 { max-width: var(--max-w); }
.corp-f4-list { list-style: none; padding: 0; border-top: var(--stroke) solid var(--corp-rule); }
.corp-f4-row, .corp-f4-axis, .corp-f4-groups {
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr) 7.5em; column-gap: var(--space-3);
}
.corp-f4-row { grid-template-areas: "no text dur" ". track track"; row-gap: var(--space-2); padding: var(--space-3) 0; border-bottom: var(--stroke) solid var(--corp-rule); line-height: var(--corp-lh-mid); }
.corp-f4-no { grid-area: no; font-family: var(--font-mono); font-size: var(--corp-fs-1); color: var(--corp-muted); padding-top: 0.2em; }
.corp-f4-text { grid-area: text; }
.corp-f4-name { display: block; color: var(--corp-fg); }
.corp-f4-desc { display: block; color: var(--corp-fg-2); }
.corp-f4-dur { grid-area: dur; text-align: right; color: var(--corp-fg); white-space: nowrap; }
.corp-f4-track { grid-area: track; position: relative; height: var(--space-4); }
.corp-f4-bar {
  position: absolute; top: 0; bottom: 0; display: flex; align-items: center; color: var(--corp-muted);
  left: calc(var(--corp-start) * 100% / var(--corp-total));
  width: calc(var(--corp-days) * 100% / var(--corp-total));
}
.corp-f4-axis { margin-top: var(--space-3); }
.corp-f4-axis > svg { grid-column: 2 / 4; height: var(--space-2); color: var(--brand); }
.corp-f4-axis line { stroke-width: var(--stroke-accent); }
.corp-f4-groups { list-style: none; padding: 0; margin-top: var(--space-2); }
.corp-f4-group {
  grid-column: 2 / 4; grid-row: 1; min-width: 0;
  margin-left: calc(var(--corp-start) * 100% / var(--corp-total));
  width: calc(var(--corp-days) * 100% / var(--corp-total));
  padding: var(--space-1) var(--space-1) 0; text-align: center; line-height: var(--lh-head);
  border: var(--stroke) solid var(--corp-muted); border-bottom: 0;
}
.corp-f4-gk { display: block; color: var(--corp-fg); font-weight: 600; font-size: var(--corp-fs-2); }
.corp-f4-gv { display: block; font-size: var(--corp-fs-2); color: var(--corp-muted); }
.corp-f4-total { margin-top: var(--space-4); text-align: right; color: var(--corp-fg); font-weight: 600; }
@media (max-width: 63.99em) {
  .corp-f4-gv { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@media (min-width: 64em) {
  .corp-f4-row, .corp-f4-axis, .corp-f4-groups { grid-template-columns: 2.4em minmax(0, 24em) 8.5em minmax(0, 1fr); column-gap: var(--space-4); }
  .corp-f4-row { grid-template-areas: "no text dur track"; align-items: center; }
  .corp-f4-axis > svg, .corp-f4-group { grid-column: 4; }
  /* 194号（brand-designer 07 §3 #1）：括弧の中は期間だけ。説明は括弧の下に1行ずつ、段をずらして重ねない（最後の括弧は右端にそろえる） */
  .corp-f4-groups { margin-bottom: calc(3 * var(--corp-lh-mid) * 1em + var(--space-6)); }
  .corp-f4-group { position: relative; }
  .corp-f4-gv { position: absolute; left: 0; top: calc(100% + var(--space-2)); white-space: nowrap; text-align: left; line-height: var(--corp-lh-mid); }
  .corp-f4-group:nth-child(2) .corp-f4-gv { top: calc(100% + var(--space-2) + var(--corp-lh-mid) * 1em); }
  .corp-f4-group:nth-child(3) .corp-f4-gv { top: calc(100% + var(--space-2) + 2 * var(--corp-lh-mid) * 1em); left: auto; right: 0; text-align: right; }
}
@media (min-width: 80em) {
  .corp-f4-group:nth-child(3) .corp-f4-gv { left: 0; right: auto; text-align: left; }   /* 括弧の左端から入りきる幅 */
}
.corp-scope { margin-top: var(--space-12); max-width: var(--max-w-text); }
.corp-scope > p { color: var(--corp-fg); }
.corp-scope-list { margin-top: var(--space-4); padding-left: 1.2em; color: var(--corp-fg); }
.corp-scope-list li + li { margin-top: var(--space-2); }
.corp-scope-list li::marker { color: var(--corp-muted); }

/* --------------------------------------------------------------------------
   11. 提携先の方へ・よくあるご質問
   -------------------------------------------------------------------------- */
.corp-partners-grid { display: grid; gap: var(--space-8); }
@media (min-width: 64em) { .corp-partners-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: calc(var(--corp-gap) * 2); align-items: start; } }
.corp-note-block { padding-top: var(--space-4); border-top: var(--stroke-accent) solid var(--corp-fg); }
.corp-note-k { font-family: var(--font-mono); font-size: var(--fs-note); letter-spacing: var(--ls-label); color: var(--corp-muted); margin-bottom: var(--space-2); }
.corp-note-v { color: var(--corp-fg); font-size: var(--corp-fs-3); line-height: var(--corp-lh-mid); }

.corp-faq { max-width: var(--max-w-text); border-top: var(--stroke) solid var(--corp-rule); }
.corp-faq-item { border-bottom: var(--stroke) solid var(--corp-rule); }
.corp-faq-q {
  list-style: none; cursor: pointer; min-height: var(--corp-tap);
  display: grid; grid-template-columns: 3em minmax(0, 1fr) var(--space-4); align-items: baseline; column-gap: var(--space-3);
  padding: var(--space-4) 0;
}
.corp-faq-q::-webkit-details-marker { display: none; }
.corp-faq-no { font-family: var(--font-mono); font-size: var(--corp-fs-1); letter-spacing: var(--ls-label); color: var(--corp-accent-text); }
.corp-faq-qt { font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--corp-fs-3); line-height: var(--lh-head); color: var(--corp-fg); }
.corp-faq-icon { align-self: center; width: var(--space-4); height: var(--space-4); color: var(--corp-muted); }
.corp-faq-icon line { stroke-width: var(--stroke-accent); }
.corp-faq-v { transition: opacity var(--motion-duration-ui) var(--motion-ease); }
.corp-faq-item[open] .corp-faq-v { opacity: 0; }
.corp-faq-q:hover .corp-faq-qt { text-decoration: underline; text-decoration-thickness: var(--stroke); text-underline-offset: 0.25em; }
.corp-faq-a { padding: 0 0 var(--space-4) calc(3em + var(--space-3)); max-width: calc(var(--corp-measure) + 3em); color: var(--corp-fg-2); }
.corp-faq-end { margin-top: var(--space-6); }
@media (max-width: 47.99em) { .corp-faq-a { padding-left: 0; } }

/* --------------------------------------------------------------------------
   12. 無料相談（白い面＝--surface）：申込フォームの白いカード（部品の見た目のまま）が白い面に載る。境は部品の縁
   -------------------------------------------------------------------------- */
.corp-contact { padding-bottom: calc(var(--space-12) + var(--space-8)); }
.corp-contact-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "form" "details"; gap: var(--space-6); }
.corp-contact-intro { grid-area: intro; }
.corp-contact-form { grid-area: form; min-width: 0; }
.corp-contact-details { grid-area: details; }
.corp-contact-intro .corp-lead { margin-top: var(--space-4); }
@media (min-width: 64em) {
  .corp-contact { padding-bottom: calc(var(--space-12) + var(--space-8)); }
  .corp-contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro form" "details form"; column-gap: calc(var(--corp-gap) * 2); align-items: start; }
}
#contact-form-wrap { color-scheme: light; color: var(--ink); }
#slot-cal { color-scheme: light; }

/* --------------------------------------------------------------------------
   13. フッター：2026/10/08 site-unify-261008 で共通の部品（.site-footer＝assets/univo-site.css 4節）へ移した。
       トップだけのお知らせ（NEWS_FOOTER の間＝束 content が書き出す）は、li・a・日付の span の構造で当てる
   -------------------------------------------------------------------------- */
.site-footer-news { grid-column: 1 / -1; }
.corp-news { list-style: none; padding: 0; display: grid; gap: var(--space-2); }
.corp-news li a { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); min-height: var(--site-tap); color: var(--ink); text-decoration: none; line-height: var(--corp-lh-mid); }
.corp-news li a:hover { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.25em; }
.corp-news li a > span:first-child { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: var(--fs-note); color: var(--muted); }
.corp-footer-more { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   14. 部品：規約の窓（#modal-overlay）。台本が .is-open と .hidden を切り替える
   2026/10/08：白い面の窓（地 --surface・縁 --line）。下地は --paper で覆う（改訂前＝--navy の 92%・窓は --navy-soft）
   -------------------------------------------------------------------------- */
.legal-overlay {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
  background: var(--paper); background: color-mix(in srgb, var(--paper) 92%, transparent);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--motion-duration-ui) var(--motion-ease), visibility 0s linear var(--motion-duration-ui);
}
.legal-overlay.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity var(--motion-duration-ui) var(--motion-ease); }
.legal-modal {
  width: 100%; max-width: 45rem; max-height: 85vh; overflow-y: auto;
  padding: var(--space-8) var(--space-6);
  background: var(--surface); color: var(--ink);
  border: var(--stroke) solid var(--line); border-radius: var(--radius);
  color-scheme: light;
}
.legal-modal h2 { margin: 0 0 var(--space-2); font-family: var(--font-serif-jp); font-weight: 600; font-size: var(--corp-fs-4); line-height: var(--lh-head); color: var(--ink); }
.legal-modal .modal-meta { margin-bottom: var(--space-6); padding-bottom: var(--space-4); border-bottom: var(--stroke) solid var(--line); font-family: var(--font-mono); font-size: var(--corp-fs-2); letter-spacing: var(--ls-label); color: var(--muted); }
.legal-modal h3 { margin: var(--space-6) 0 var(--space-2); font-family: var(--font-mono); font-weight: 400; font-size: var(--corp-fs-2); letter-spacing: var(--ls-label); color: var(--brand-deep); }
.legal-modal p, .legal-modal li { margin: 0; font-size: var(--corp-fs-2); line-height: var(--lh-body); color: var(--ink); }
.legal-modal p + p { margin-top: var(--space-3); }   /* 197号 S8：同じ条の段落の間（.corp-details-body p + p と同じ） */
.legal-modal .modal-close {
  display: inline-flex; align-items: center; gap: var(--space-2); margin-top: var(--space-8);
  min-height: var(--corp-tap); padding: 0 var(--space-4);
  background: transparent; color: var(--ink);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  font-family: var(--font-sans); font-size: var(--corp-fs-2); cursor: pointer;
}
.legal-modal .modal-close:hover { border-color: var(--brand); }
.legal-modal .modal-close svg { width: var(--space-3); height: var(--space-3); }

/* --------------------------------------------------------------------------
   15. 部品：チャット（#chat-widget）。台本が作る要素は .corp-chat-*
   地を塗った橙は申込のボタンだけ＝チャットのボタンは塗らない。印（点）は出さない
   2026/10/08：丸と送信のボタンも白い面（地 --surface・縁 --muted・線 --ink）。改訂前＝地 --navy・線 --ink-on-navy
   -------------------------------------------------------------------------- */
#chat-widget { position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 60; }
@media (min-width: 64em) { #chat-widget { right: var(--space-6); bottom: var(--space-6); } }
#chat-toggle {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: var(--space-8); height: var(--space-8); padding: 0; cursor: pointer;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink);
  transition: border-color var(--motion-duration-ui) var(--motion-ease);
}
#chat-toggle:hover { border-color: var(--brand); }
#chat-toggle > span { display: none; }
#chat-icon-open, #chat-icon-close { width: calc(var(--space-4) + var(--space-2)); height: calc(var(--space-4) + var(--space-2)); color: var(--ink); }
#chat-panel {
  position: absolute; right: 0; bottom: calc(var(--space-8) + var(--space-3));
  width: min(22rem, calc(100vw - var(--space-4) * 2)); max-height: min(520px, 70vh);
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); color: var(--ink); color-scheme: light;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius);
  font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid);
  transition: opacity var(--motion-duration-ui) var(--motion-ease), transform var(--motion-duration-ui) var(--motion-ease);
}
#chat-panel.panel-hidden {
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(var(--space-3));
  transition: opacity var(--motion-duration-ui) var(--motion-ease), transform var(--motion-duration-ui) var(--motion-ease), visibility 0s linear var(--motion-duration-ui);
}
/* 見出し（2026/10/09 代表決定 D26100907011100e7＝brand-tokens.md §5「略した印」）。改訂前は構造（div:first-child）で当てていた＝見出しの HTML をクラスつきに直した */
.corp-chat-head {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); background: var(--paper); border-bottom: var(--stroke) solid var(--line);
}
.corp-chat-id { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
/* 略した印：「v」の1字だけ・--font-logo・--brand。枠の地 --surface・縁 --line の --stroke（影・光彩・橙の網をかけない）。ロゴの一部＝動かさない */
.corp-chat-mark {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(var(--space-6) + var(--space-2)); height: calc(var(--space-6) + var(--space-2));
  border: var(--stroke) solid var(--line); border-radius: var(--radius-full); background: var(--surface);
  font-family: var(--font-logo); font-weight: 400; font-size: var(--fs-heading-s); line-height: 1; color: var(--brand);
  padding-bottom: 0.12em; /* 小文字の「v」は字の箱の下寄りに座る＝丸の中央へ目で合わせる */
}
.corp-chat-title { margin: 0; font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-body); line-height: var(--lh-head); color: var(--ink); }
.corp-chat-sub { margin: var(--space-1) 0 0; font-family: var(--font-sans); font-size: var(--fs-note); line-height: var(--lh-head); color: var(--muted); }
#chat-close {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: var(--corp-tap); height: var(--corp-tap); padding: 0; cursor: pointer;
  background: transparent; color: var(--muted); border: 0; border-radius: var(--radius-full);
}
#chat-close:hover { color: var(--ink); }
#chat-close svg { width: var(--space-4); height: var(--space-4); }
#chat-messages { flex: 1 1 auto; min-height: 12rem; overflow-y: auto; padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); background: var(--paper); }
.corp-chat-msg { max-width: 90%; padding: var(--space-2) var(--space-3); border: var(--stroke) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.corp-chat-msg.is-user { align-self: flex-end; border-color: var(--muted); }
.corp-chat-msg.is-bot { align-self: flex-start; }
.corp-chat-typing { align-self: flex-start; display: flex; gap: var(--space-1); padding: var(--space-3); border: var(--stroke) solid var(--line); border-radius: var(--radius); background: var(--surface); }
.corp-chat-dot { width: calc(var(--space-1) * 1.5); height: calc(var(--space-1) * 1.5); border-radius: var(--radius-full); background: var(--muted); }
#chat-quick { flex: none; display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); background: var(--paper); }
#chat-quick:empty { display: none; }
.corp-chat-quick-btn {
  min-height: calc(var(--space-6) + var(--space-1)); padding: 0 var(--space-3); cursor: pointer;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--corp-fs-2);
}
.corp-chat-quick-btn:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
#chat-panel > div:last-child { flex: none; display: flex; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-top: var(--stroke) solid var(--line); background: var(--surface); }
#chat-input {
  flex: 1 1 auto; min-width: 0; min-height: calc(var(--space-6) + var(--space-2)); padding: 0 var(--space-4);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: max(var(--corp-fs-2), 1rem);
}
#chat-input::placeholder { color: var(--muted); }
#chat-send {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: calc(var(--space-6) + var(--space-2)); height: calc(var(--space-6) + var(--space-2)); padding: 0; cursor: pointer;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full); background: var(--surface); color: var(--ink);
  transition: border-color var(--motion-duration-ui) var(--motion-ease);
}
#chat-send:hover { border-color: var(--ink); }
#chat-send svg { width: var(--space-4); height: var(--space-4); }

/* --------------------------------------------------------------------------
   16. 部品：Cookie の帯（D-3・画面下の帯。窓にしない・地をぼかさない・2つのボタンは同じ大きさと強さ）
   -------------------------------------------------------------------------- */
.corp-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: var(--surface); color: var(--ink); color-scheme: light;
  border-top: var(--stroke-accent) solid var(--ink);
}
.corp-cookie-inner {
  max-width: var(--max-w); margin: 0 auto; padding: var(--space-3) var(--corp-pad-x);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2) var(--space-6);
}
.corp-cookie-title { font-weight: 600; line-height: var(--corp-lh-mid); }
.corp-cookie-text { font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--ink); }
.corp-cookie-text a { color: var(--brand-deep); text-decoration: underline; text-underline-offset: 0.2em; }
.corp-cookie-text b { font-weight: 600; }
.corp-cookie-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.corp-cookie-btn {
  min-height: var(--corp-tap); padding: 0 var(--space-6); cursor: pointer;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  background: var(--surface); color: var(--ink); font-family: var(--font-sans); font-size: var(--corp-fs-2);
}
.corp-cookie-btn:hover { border-color: var(--ink); }
@media (min-width: 64em) {
  .corp-cookie-inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title actions" "text actions"; align-items: center; }
  .corp-cookie-title { grid-area: title; }
  .corp-cookie-text { grid-area: text; }
  .corp-cookie-actions { grid-area: actions; }
}
.has-cookie-bar { padding-bottom: var(--corp-cookie-h); }
.has-cookie-bar #chat-widget { bottom: calc(var(--corp-cookie-h) + var(--space-4)); }
/* 194号：スマートフォンでは、Cookie の帯が出ている間はチャットの丸を出さない（帯の上に浮かせると申込ボタンに重なる） */
@media (max-width: 47.99em) { .has-cookie-bar #chat-widget { display: none; } }
/* 置き換え前の旧い形（窓）が残っている間の最小の見た目。地はぼかさない（2026/10/08：下地を --paper に。改訂前＝--navy） */
#cookie-banner:not(.corp-cookie) { position: fixed; inset: 0; z-index: 80; align-items: center; justify-content: center; padding: var(--space-4); }
#cookie-banner:not(.corp-cookie) > div:first-child { position: absolute; inset: 0; background: var(--paper); opacity: 0.6; }
#cookie-banner:not(.corp-cookie) > div:last-child { position: relative; max-width: 32rem; padding: var(--space-6); background: var(--surface); color: var(--ink); border: var(--stroke) solid var(--line); border-radius: var(--radius); }
#cookie-banner:not(.corp-cookie) svg { width: calc(var(--space-4) + var(--space-2)); height: calc(var(--space-4) + var(--space-2)); }
#cookie-banner:not(.corp-cookie) button { min-height: var(--corp-tap); padding: 0 var(--space-6); margin: var(--space-2) var(--space-2) 0 0; border: var(--stroke) solid var(--muted); border-radius: var(--radius-full); background: var(--surface); color: var(--ink); cursor: pointer; }

/* --------------------------------------------------------------------------
   17. 動き（原則 §4.6・値はトークン §8）。動きの印（html.corp-motion / .corp-io / .corp-io-draw）があるときだけ。
   無いとき（JS 無し・動きを減らす設定・印刷）は最初から最終状態
   -------------------------------------------------------------------------- */
@keyframes corp-draw-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes corp-draw-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes corp-fade { from { opacity: 0; } to { opacity: 1; } }

/* 出現：1回だけ（corp.js の reveal が画面に入った要素へ .is-in を付ける） */
.corp-io [data-corp-reveal] {
  transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
  transition-delay: calc(var(--corp-i, 0) * var(--motion-duration-ui) / 3);
}
.corp-io [data-corp-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--motion-reveal-distance)); }

/* 作図（FIG.01＝読み込み時に1回・CSS だけで終わる。作図線→外形→寸法→文字。合計は --motion-auto-limit 以内） */
.corp-motion .corp-fig01 [data-draw] {
  animation-duration: var(--motion-duration); animation-timing-function: var(--motion-ease); animation-fill-mode: both;
  animation-delay: calc(var(--corp-at, 0) * var(--motion-duration));
}
.corp-motion .corp-fig01 [data-draw="x"] { animation-name: corp-draw-x; transform-box: fill-box; transform-origin: 0 50%; }
.corp-motion .corp-fig01 [data-draw="y"] { animation-name: corp-draw-y; transform-box: fill-box; transform-origin: 50% 0; }
.corp-motion .corp-fig01 [data-draw="fade"] { animation-name: corp-fade; }

/* 作図（FIG.04＝画面に入ったとき1回。drawOnView が .is-in を付ける。最初から見えていたら .is-static） */
.corp-io-draw .corp-fig04:not(.is-in):not(.is-static) [data-draw] { opacity: 0; }
.corp-io-draw .corp-fig04.is-in [data-draw] {
  animation-duration: var(--motion-duration); animation-timing-function: var(--motion-ease); animation-fill-mode: both;
  animation-delay: calc(var(--corp-at, 0) * var(--motion-duration) + var(--corp-start, 0) * var(--motion-duration) / var(--corp-total));
}
.corp-io-draw .corp-fig04.is-in [data-draw="x"] { animation-name: corp-draw-x; transform-box: fill-box; transform-origin: 0 50%; }
.corp-io-draw .corp-fig04.is-in [data-draw="fade"] { animation-name: corp-fade; }

/* 入力中の印（チャット）：3回で止まる・不透明度だけ */
.corp-motion .corp-chat-dot { animation: corp-fade var(--motion-duration) var(--motion-ease) 3 alternate both; }
.corp-motion .corp-chat-dot:nth-child(2) { animation-delay: calc(var(--motion-duration-ui) / 2); }
.corp-motion .corp-chat-dot:nth-child(3) { animation-delay: var(--motion-duration-ui); }

@media (prefers-reduced-motion: reduce) {
  .corp *, .corp *::before, .corp *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .corp [data-corp-reveal], .corp [data-draw] { opacity: 1 !important; transform: none !important; }
}

/* --------------------------------------------------------------------------
   18. 強制カラー（ハイコントラスト）：線と境界を残す
   -------------------------------------------------------------------------- */
@media (forced-colors: active) {
  .corp-btn, .corp-btn-line, .corp-menu-btn, .corp-cookie-btn { border: var(--stroke) solid ButtonText; }
  .corp-titleblock { border-top-color: CanvasText; }
  .corp-gridlines::before { display: none; }
}

/* --------------------------------------------------------------------------
   19. 印刷：トークン §1-3（紙・PDF の列）。2026/10/08 から画面も白基調＝地と文字は画面と同じ（白い面の段も紙では --paper）。
       操作部品と状態の札は出さない
   -------------------------------------------------------------------------- */
@media print {
  .corp-dark, .corp-header, .corp-footer {
    --corp-bg: var(--paper); --corp-fg: var(--ink); --corp-fg-2: var(--ink);
    --corp-muted: var(--muted); --corp-rule: var(--line); --corp-accent-text: var(--brand-deep);
    --corp-logo: var(--logo-navy);
    color-scheme: light;
  }
  .corp-footer { background: var(--paper); }
  .corp-header, .corp-menu, .corp-menu-btn, .corp-skip, #chat-widget, #cookie-banner, .legal-overlay, .corp-fx,
  .corp-btn, .corp-btn-line, .corp-cta-block, .corp-contact-form, [data-univo-monitor-entry], .corp-faq-icon { display: none !important; }
  .corp-sec { padding: var(--space-6) 0; overflow: visible; }
  .corp-gridlines::before { display: none !important; }
  .corp-fig02 .corp-f2-track { height: auto !important; }
  .corp-fig02 .corp-f2-stage { position: static !important; height: auto !important; }
  .corp [data-corp-reveal], .corp [data-draw], .corp-f2-name, .corp-f2-ind { opacity: 1 !important; transform: none !important; animation: none !important; }
  .corp-fig, .corp-spec-row, .corp-faq-item, .corp-f4-row { break-inside: avoid; }
  .corp-contact { padding-bottom: var(--space-6); }
}