/* ==========================================================================
   STATUS: DRAFT(代表確認前)
   Univo｜会社HP の2回目（194号・brand-web）：演出の層・止める手段・経営診断の画面例・1回目の確かめの直し
   corp.css の後に読む（同じ詳細度なら、こちらが勝つ）。値はトークンの var() だけ（色コード・書体名を書かない）。
   根拠：原則 §4.1・§4.4.1・§4.6（2026/10/06 改訂）／トークン §1・§1-2・§4-2・§8／追補 03_brief_追補_会社HPの演出.md
   2026/10/08（代表決定＝Web も白基調）：トークン §1-3 の「Web」の列で白い面へ読み替えた。
   --brand-bright・--signal・光彩とすりガラス（§4-2）は使わない（白い面の光彩は［代表確認］#10 が決まるまで）
   2026/10/08（写真の確かめ・202_work\S3）：#1 申込の音叉の寸法を文字から外す／#2 規約の窓の縁／#4 FIG.02 の指標の出し入れ
   （#3 表紙の波紋は corp-fx.js、#4 の名前の不透明度は corp.js）
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. 白い面の色（2026/10/08・トークン §1・§1-3・§6-2）
      行動と基準の線＝--brand、小さい橙の文字＝--brand-deep（corp.css の --corp-accent-text）。ロゴの v は --brand のまま。
      演出の層（WebGL・Canvas）が読む色は、ここの変数だけ（corp-fx.js が body の計算値から読む）。トークンの別名だけで、新しい値は持たない。
      改訂前（2026/10/06〜10/07）：ダーク面の橙＝--brand-bright（申込ボタンの地・光彩と艶・基準線・小さい橙の文字）。
        演出の層は --navy・--navy-soft・--line-on-navy・--signal・--muted-on-navy を直接読んでいた
   -------------------------------------------------------------------------- */
.corp {
  --corp-fx-ground: var(--surface);      /* 表紙の地＝白い面の段の地（corp.css の .corp-dark の --corp-bg）と同じ */
  --corp-fx-mist: var(--corp-fx-ground); /* 霧＝地と同じ（白い面のにじみは使わない） */
  --corp-fx-rule: var(--line);           /* 12カラムの縦線・力線・申込の音叉（装飾の線。旧 --line-on-navy） */
  --corp-fx-mark: var(--muted);          /* 波紋の前縁・砂鉄・一滴（旧 --signal・--muted-on-navy＝§1-3「線＝--muted」） */
}
/* ヘッダーのはみ出しを切る（194号で光彩のために付けた。白い面に光彩は無いが、360px〜の並びを撮り直すまで形を変えない） */
.corp-header { overflow: clip; }

/* --------------------------------------------------------------------------
   1. 止める手段（原則 §4.6.5）。文言は HTML の2つの span、表示の切り替えはここ。状態は html[data-motion]
   -------------------------------------------------------------------------- */
.corp-motion-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--corp-tap); padding: 0 var(--space-4);
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full);
  background: transparent; color: var(--corp-fg);
  font-family: var(--font-sans); font-size: var(--fs-note); line-height: 1; white-space: nowrap; cursor: pointer;
  transition: color var(--motion-duration-ui) var(--motion-ease), border-color var(--motion-duration-ui) var(--motion-ease);
}
.corp-motion-toggle:hover { color: var(--corp-fg); border-color: var(--corp-fg); }
.corp-motion-toggle [data-when="off"] { display: none; }
html[data-motion="off"] .corp-motion-toggle [data-when="on"] { display: none; }
html[data-motion="off"] .corp-motion-toggle [data-when="off"] { display: inline; }
.corp-header .corp-motion-toggle { display: none; }
.corp-hero-tools { position: absolute; z-index: 2; top: var(--space-1); right: var(--corp-pad-x); }
.corp-motion-toggle-menu { align-self: flex-start; }
@media (min-width: 64em) {
  .corp .corp-header .corp-motion-toggle { display: inline-flex; }
  /* JS が出すまで場所だけ取る（出たときにナビと申込ボタンがずれない） */
  .corp .corp-header .corp-motion-toggle[hidden] { display: inline-flex !important; visibility: hidden; }
  .corp-hero-tools { display: none; }
}

/* --------------------------------------------------------------------------
   2. 1回目の確かめの直し
   -------------------------------------------------------------------------- */
/* #1 前職の期間を折り返さない（列は最も長い期間に合わせる＝subgrid。使えない環境は 14em） */
@media (min-width: 48em) {
  .corp-career { grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--space-4); }
  .corp-career li { grid-column: 1 / -1; grid-template-columns: 14em minmax(0, 1fr); grid-template-columns: subgrid; }
  .corp-career-when { white-space: nowrap; }
}

/* #2 事業：PC は各まとまりを「題（左 4/12）＋中身（右 8/12）」の1行に（左右の高さの差を作らない） */
.corp-offer-body > * + * { margin-top: var(--space-4); }
.corp-offer-body > [data-univo-monitor-entry]:empty { display: none; }
@media (min-width: 64em) {
  .corp-service-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-8); }
  .corp-offer, .corp-shots { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--corp-gap); align-items: start; }
  .corp-offer-head, .corp-shots-head { grid-column: 1 / span 4; }
  .corp-offer-body, .corp-shots-body { grid-column: 5 / -1; min-width: 0; }
  .corp-shots + .corp-offer { margin-top: var(--space-6); }
}

/* #4 Cookie の帯（スマートフォン）：題は読み上げにだけ残し、行間と余白を詰める（ボタンの押せる大きさは変えない） */
@media (max-width: 47.99em) {
  .corp { --corp-cookie-h: 9rem; }
  .corp-cookie-inner { padding-top: var(--space-2); padding-bottom: var(--space-2); gap: var(--space-2); }
  .corp-cookie-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
  .corp-cookie-text { line-height: var(--lh-head); }
}
@media (min-width: 48em) and (max-width: 63.99em) { .corp { --corp-cookie-h: 10rem; } }

/* #5（2026/10/08）無償モニター募集の入口（束 monitor の部品）：表紙の差し込み口は HTML が data-theme="dark" のまま。
   白い面で暗い面の文字の色（--ink-on-navy など）にならないよう、部品の外からライトの色（部品の .umon-light と同じ）へ読み替える。
   HTML を data-theme="light" に直した後は効かなくなる（害はない） */
.corp .umon-dark .umon-body { color: var(--ink); }
.corp .umon-dark .umon-date { color: var(--brand-deep); }
.corp .umon-dark .umon-note,
.corp .umon-dark .umon-go { color: var(--muted); text-decoration-color: var(--muted); }

/* #6（2026/10/08・写真の確かめ #2）規約の窓の縁：窓（--surface）と下地（--paper の 92%）の差は 1.05:1、縁の --line も 1.23:1 で、
   窓の端がほとんど見えなかった（ex_w1440_light_legal_modal.png）。窓は閉じるまで読み手が操作する面＝操作部品の枠と同じ --muted で縁を示す
   （対 --surface 4.76:1・対 --paper 4.55:1＝WCAG 1.4.11 の 3:1 以上）。影・にじみは使わない。改訂前＝corp.css の --line のまま */
.legal-modal { border-color: var(--muted); }

/* --------------------------------------------------------------------------
   3. 経営診断の画面例（原則 §4.4.1・追補 §4-4-2）。画面そのものは加工しない（ぼかし・光・切り抜きなし）
   -------------------------------------------------------------------------- */
.corp-shots-lead { color: var(--corp-fg-2); max-width: var(--corp-measure); }
.corp-shots-list { display: grid; gap: var(--space-6); margin-top: var(--space-4); align-items: start; }
.corp-shot {
  margin: 0; min-width: 0; overflow: hidden;
  background: var(--surface); border: var(--stroke) solid var(--line); border-radius: var(--radius);
  transition: border-color var(--motion-duration-ui) var(--motion-ease);
}
.corp-shot-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-3); padding: var(--space-2) var(--space-3); border-bottom: var(--stroke) solid var(--line); }
.corp-tag-sample { color: var(--corp-muted); border-color: var(--corp-muted); }
.corp-shot-title { color: var(--ink); line-height: var(--corp-lh-mid); }
.corp-shot-img { display: block; width: 100%; height: auto; }
/* 194号（brand-designer 07 §3 #5・法務 P5-2）：画面例の但し書き＝札と同じ大きさ以上・画面のすぐ下 */
.corp-shot-caution { padding: var(--space-2) var(--space-3) 0; font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--ink); }
.corp-shot-dialog-caution { flex: none; padding: var(--space-2) var(--corp-pad-x) 0; font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--ink); }
/* 194号（brand-qa A-9）：「拡大して見る」は、JS が窓を開ける準備を終えてから出す（JS 無し・準備前に押して、札の無い画像のファイルへ行かない） */
.corp-shot-more { display: none; padding: var(--space-2) var(--space-3); border-top: var(--stroke) solid var(--line); }
.corp-shots.is-zoom:not(.is-tabs) .corp-shot-more { display: block; }
.corp-shot-zoom { padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }   /* 194号：窓を開くだけのボタン（見た目は本文のリンクと同じ） */
.corp-shots-note { margin-top: var(--space-4); max-width: var(--corp-measure); color: var(--corp-fg); line-height: var(--corp-lh-mid); }

/* PC＋JS：左に4つの切り替え（WAI-ARIA のタブ）、右に選んだ画面。自動では切り替えない */
.corp-shots-tabs { display: grid; gap: var(--space-2); margin-top: var(--space-6); }
.corp-shots-tab {
  position: relative; display: grid; grid-template-columns: 2em minmax(0, 1fr); column-gap: var(--space-2);
  padding: var(--space-3) var(--space-4); text-align: left; line-height: var(--corp-lh-mid);
  border: var(--stroke) solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); cursor: pointer;
  transition: border-color var(--motion-duration-ui) var(--motion-ease);
}
.corp-shots-tab-no { grid-row: span 2; font-family: var(--font-mono); font-size: var(--corp-fs-1); color: var(--muted); padding-top: 0.2em; }
.corp-shots-tab-k { font-weight: 600; }
.corp-shots-tab-v { font-size: var(--corp-fs-2); color: var(--muted); }
.corp-shots-tab:hover { border-color: var(--muted); }
.corp-shots-tab[aria-selected="true"] { border-color: var(--ink); }
.corp-shots-tab[aria-selected="true"]::before {
  content: ""; position: absolute; top: calc(-1 * var(--stroke)); bottom: calc(-1 * var(--stroke)); left: calc(-1 * var(--stroke));
  width: var(--stroke-accent); background: var(--ink); border-radius: var(--radius) 0 0 var(--radius);
}
.corp-shots.is-tabs .corp-shots-list { display: grid; }
.corp-shots.is-tabs .corp-shot { grid-area: 1 / 1; padding-bottom: var(--space-2); }
.corp-shots.is-tabs .corp-shot:not(.is-current) {
  visibility: hidden; opacity: 0;
  transition: opacity var(--motion-duration-ui) var(--motion-ease), visibility 0s linear var(--motion-duration-ui);
}
.corp-shots.is-tabs .corp-shot.is-current { visibility: visible; opacity: 1; transition: opacity var(--motion-duration-ui) var(--motion-ease), border-color var(--motion-duration-ui) var(--motion-ease); }
.corp-shots.is-tabs .corp-shot:hover { border-color: var(--muted); }
.corp-shots.is-tabs .corp-shot-more { display: none; }

/* 拡大の窓（スマートフォン＋JS）。地 --surface（2026/10/08。改訂前＝--navy）・画像は実寸で縦横にスクロール・Esc で閉じる（dialog の既定）。
   画像は白い面に載るので、画像の範囲を --line の縁で示す */
.corp-shot-dialog { width: 100%; max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; background: var(--surface); color: var(--ink); }
.corp-shot-dialog[open] { display: flex; flex-direction: column; }
.corp-shot-dialog::backdrop { background: var(--surface); }
.corp-shot-dialog-bar { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-2) var(--corp-pad-x); border-bottom: var(--stroke) solid var(--line); }
.corp-shot-dialog-title { flex: 1 1 auto; color: var(--ink); }
.corp-shot-dialog-close {
  min-height: var(--corp-tap); padding: 0 var(--space-4); cursor: pointer;
  border: var(--stroke) solid var(--muted); border-radius: var(--radius-full); background: transparent;
  color: var(--ink); font-family: var(--font-sans-jp); font-size: var(--corp-fs-2);
}
.corp-shot-dialog-body { flex: 1 1 auto; overflow: auto; padding: var(--space-4) var(--corp-pad-x); }
.corp-shot-dialog-body img { display: block; max-width: none; height: auto; background: var(--surface); border: var(--stroke) solid var(--line); }
.corp-shot-dialog-note { flex: none; padding: var(--space-2) var(--corp-pad-x) var(--space-3); border-top: var(--stroke) solid var(--line); font-size: var(--corp-fs-2); line-height: var(--corp-lh-mid); color: var(--ink); }

/* --------------------------------------------------------------------------
   4. 演出の層の共通（文字より下・aria-hidden・ポインタを取らない）
   -------------------------------------------------------------------------- */
.corp-fx { overflow: clip; }
.corp-fx-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity var(--motion-duration) var(--motion-ease); }
.corp-sec.is-fx-live .corp-fx-canvas { opacity: 1; }
.corp-fx-stick { position: sticky; top: var(--corp-header-h); width: 100%; height: calc(100vh - var(--corp-header-h)); }
.corp-fx-stick > .corp-fx-canvas { position: absolute; }
.corp-fx-off .corp-fork { display: none !important; }
@media (forced-colors: active) { .corp-fx, .corp-fork { display: none !important; } }

/* 表紙：WebGL が絵を出したら CSS の縦線を隠す（同じ位置の線をシェーダが描く。色はどちらも --line） */
#top.is-fx-live .corp-gridlines::before { visibility: hidden; }
/* 一滴：--corp-fx-mark の点（2026/10/08。改訂前＝--signal の点と光彩 --glow-signal） */
.corp-fx-drop {
  position: absolute; left: 0; top: 0; width: var(--space-2); height: var(--space-2);
  margin: calc(-1 * var(--space-1)) 0 0 calc(-1 * var(--space-1));
  border-radius: var(--radius-full); background: var(--corp-fx-mark); opacity: 0;
}
/* FIG.01 の12本の罫：波紋が届くまで待たせる（head の1行が付ける）／演出の層が引くときは土台の作図を外す */
.corp-fx-hold .corp-fig01 .corp-f1-rules line { animation-play-state: paused; }
.corp-fig01.is-fx-rules .corp-f1-rules line { animation: none; }
html[data-motion="off"] .corp-fig01 [data-draw] { animation: none !important; }
/* 表題欄の上の基準線に灯る光彩（.is-glow）と、FIG.02 の基準線の光彩（--corp-fx-glow）は、白い面では出さない
   （2026/10/08・白い面の光彩の値は無い＝［代表確認］#10。改訂前＝.corp-titleblock::before と .corp-f2-body::before に --glow-brand）。
   corp-fx.js はクラスと変数を付けるだけなので、見た目は変わらない */
.corp-titleblock { position: relative; }

/* 考え方 FIG.02：静止の目盛り（描けないときの絵） */
.corp-f2-row { position: relative; }
.corp-f2-row::before {
  content: ""; position: absolute; left: 3.2em; top: calc(var(--space-2) + var(--corp-lh-mid) * 0.5em);
  width: var(--space-4); height: var(--stroke); background: var(--corp-muted); pointer-events: none;
}
.corp-fig02.is-fx-live .corp-f2-row::before { opacity: 0; }
/* 2026/10/08（写真の確かめ #4）：収れんの途中で止めても、読ませる文字は最後の色のまま（名前に不透明度を掛けない＝corp.js）。
   指標（--muted の文字）は、ほぼ収まった所で出す（corp.js）。出し入れはこの短い切り替え（--motion-duration-ui）＝途中の薄さで残らない。
   改訂前＝名前は不透明度 0.45〜0.8 から 1 へ・指標は 0 から 1 へスクロールに合わせて（1440 で途中で止めると 3.0〜4.3:1） */
.corp-fig02.is-scrub .corp-f2-name { will-change: transform; }
.corp-fig02.is-scrub .corp-f2-ind { transition: opacity var(--motion-duration-ui) var(--motion-ease); }

/* 事業 FIG.03：結びは両端が水平な曲線。触れた分野の結び先に --brand の帯と点 */
.corp-f3-lines path { fill: none; stroke: currentColor; stroke-width: var(--stroke); vector-effect: non-scaling-stroke; }
.corp-f3-from { font-weight: 400; }
.corp-f3-cat { position: relative; }
.corp-f3-cat::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(-1 * var(--stroke)); width: var(--stroke-accent);
  background: var(--brand); opacity: 0; transition: opacity var(--motion-duration-ui) var(--motion-ease);
}
.corp-f3-cat.is-hl::before { opacity: 1; }
.corp-f3-cat.is-hl .corp-f3-from { color: var(--corp-fg); }
.corp-f3-dot { fill: var(--brand); stroke: none; }

/* 代表と体制 FIG.05：つなぎの線はスクロールで引く／点が 01→02→03 を1回だけ進む／03 の脇の音叉 */
.corp-fig05.is-fx-live .corp-f5-join line { transform-box: fill-box; transform-origin: 0 50%; }
.corp-fig05.is-fx-live .corp-f5-step:nth-child(2) .corp-f5-join line { transform: scaleX(var(--corp-fx-j1, 1)); }
.corp-fig05.is-fx-live .corp-f5-step:nth-child(3) .corp-f5-join line { transform: scaleX(var(--corp-fx-j2, 1)); }
.corp-f5-step-check { padding-right: calc(var(--space-8) + var(--space-4)); }
.corp-f5-fork { position: absolute; top: var(--space-3); right: 0; width: var(--space-8); height: auto; color: var(--corp-muted); }
.corp-fx-dot {
  position: absolute; left: 0; top: 0; width: var(--space-2); height: var(--space-2);
  margin: calc(-1 * var(--space-1)) 0 0 calc(-1 * var(--space-1));
  border-radius: var(--radius-full); background: var(--brand); opacity: 0;
}

/* 音叉の作図（表紙以外の2か所）。作図線 → 外形 → 寸法の順に1回。JS が無いとき・?fx=off は出さない */
.corp-fork { display: none; overflow: visible; }
.corp-fx-on .corp-fork { display: block; }
.corp-fork path { fill: none; stroke: currentColor; stroke-width: var(--stroke); }
.corp-fork-guide { opacity: 0.6; }
.corp-fork-dim { color: var(--brand); }
.corp-fork-wave { color: var(--corp-muted); }
.corp-fork-wave path { opacity: 0; transform-box: view-box; transform-origin: 28px 8px; }
.corp-fork-tines { transform-box: view-box; transform-origin: 28px 52px; }
.corp-fx-on .corp-fork :is(.corp-fork-guide, .corp-fork-body, .corp-fork-dim) path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.corp-fx-on .corp-fork.is-drawn :is(.corp-fork-guide, .corp-fork-body, .corp-fork-dim) path {
  stroke-dashoffset: 0; transition: stroke-dashoffset var(--motion-duration) var(--motion-ease);
}
.corp-fx-on .corp-fork.is-drawn .corp-fork-body path { transition-delay: var(--motion-duration); }
.corp-fx-on .corp-fork.is-drawn .corp-fork-dim path { transition-delay: calc(var(--motion-duration) * 2); }
@keyframes corp-fork-vib {
  0% { transform: scaleX(1); } 8% { transform: scaleX(1.06); } 16% { transform: scaleX(0.95); }
  26% { transform: scaleX(1.04); } 38% { transform: scaleX(0.97); } 52% { transform: scaleX(1.015); } 100% { transform: scaleX(1); }
}
@keyframes corp-fork-wave { 0% { opacity: 0; transform: scale(0.6); } 25% { opacity: 1; } 100% { opacity: 0; transform: scale(1.25); } }
.corp-fork.is-ring .corp-fork-tines { animation: corp-fork-vib calc(var(--motion-duration) * 2) var(--motion-ease) 1 both; }
.corp-fork.is-ring .corp-fork-wave path { animation: corp-fork-wave calc(var(--motion-duration) * 1.5) var(--motion-ease) 1 both; }
.corp-fork.is-ring .corp-fork-wave path:nth-child(2) { animation-delay: calc(var(--motion-duration-ui) / 2); }
.corp-fork.is-ring .corp-fork-wave path:nth-child(3) { animation-delay: var(--motion-duration-ui); }

/* 申込 #contact：見出しの奥（左）の大きな音叉。線 --corp-fx-rule（--line）・寸法 --brand（.corp-fork-dim）＝見出し・本文のコントラストを下げない淡さ
   （2026/10/08。改訂前＝線 --line-on-navy・寸法 --brand-bright） */
.corp-fx-fork-contact {
  position: absolute; top: var(--space-6); left: max(0px, calc((100% - var(--max-w)) / 2));
  width: calc(var(--space-12) * 2); height: auto; color: var(--corp-fx-rule);
}
.corp-fx-fork-contact .corp-fork-guide { opacity: 1; }
/* 2026/10/08（写真の確かめ #1）：橙の寸法を文字に重ねない。
   音叉は文字の列（.corp-wrap）の左端から始まり、寸法の縦線（SVG の x=24）は文字の書き出し（左の余白 --corp-pad-x＝スマートフォン 24px／PC 32px）と
   ほぼ同じ所に来ていた＝幅 390・360 で「07」の「0」を貫き、端の斜線が本文の書き出しに触れる／1440 で下端の斜線が「状」に触れる。
   → 寸法（縦線と端の斜線）を左の余白の中へ寄せる（左へ余白の半分＝縦線はスマートフォンで余白の中央・PC で書き出しの 24px 手前。斜線も余白の中）。
   本文の列を横切る補助線（音叉の外形から寸法へ引く水平の線＝最初の path）は橙をやめ、外形と同じ装飾の線（--corp-fx-rule）にする。長さと作図の順は変えない */
/* 2026/10/09（203号・写真の確かめ）：左の余白が --gutter（スマートフォン 16px）になり、上の「左へ余白の半分」では縦線（x=24）が書き出しの 16px に乗った。
   → 縦線を余白の中央（--corp-pad-x の半分）へ置く＝寄せる量は「余白の半分 − 24px」。端の斜線（x=18〜30）も余白の中に収まる（16px で 2〜14px） */
.corp-fx-fork-contact .corp-fork-dim { transform: translateX(calc(var(--corp-pad-x) / 2 - 24px)); }
.corp-fx-fork-contact .corp-fork-dim path:first-child { color: var(--corp-fx-rule); }

/* 進め方 FIG.04：一滴（--brand）と、各段の始まりの波紋。進んだ所までの棒が満ちる（色は文字の色＝橙の線は基準だけ） */
.corp-fx-droplet, .corp-fx-ring { position: absolute; left: 0; top: 0; border-radius: var(--radius-full); opacity: 0; pointer-events: none; }
.corp-fx-droplet { width: var(--space-3); height: var(--space-3); margin: calc(var(--space-3) / -2) 0 0 calc(var(--space-3) / -2); background: var(--brand); }
.corp-fx-ring { width: var(--space-6); height: var(--space-6); margin: calc(var(--space-6) / -2) 0 0 calc(var(--space-6) / -2); border: var(--stroke) solid var(--brand); }
.corp-f4-bar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: var(--stroke-accent); margin-top: calc(var(--stroke-accent) / -2);
  background: var(--corp-fg); transform: scaleX(var(--corp-fill, 0)); transform-origin: 0 50%; pointer-events: none;
}

/* 進め方の申込ボタン：マウスで触れると中心から同心の輪が1回広がる（位置と大きさは変えない・押したときの縮みなし） */
[data-fx-ripple] { position: relative; }
[data-fx-ripple]::before, [data-fx-ripple]::after {
  content: ""; position: absolute; z-index: -1; inset: calc(-1 * var(--stroke));
  border: var(--stroke) solid var(--brand-deep); border-radius: inherit; opacity: 0; pointer-events: none; /* 輪＝ボタンの縁が広がったもの＝地と同じ --brand-deep（206号） */
}
@keyframes corp-ripple { from { inset: calc(-1 * var(--stroke)); opacity: 1; } to { inset: calc(-1 * var(--space-6)); opacity: 0; } }
[data-fx-ripple].is-ripple::before { animation: corp-ripple calc(var(--motion-duration) * 1.5) var(--motion-ease) 1 both; }
[data-fx-ripple].is-ripple::after { animation: corp-ripple calc(var(--motion-duration) * 1.5) var(--motion-ease) var(--motion-duration-ui) 1 both; }

/* --------------------------------------------------------------------------
   5. 動きを減らす設定（corp.css の一括の停止に加えて）・印刷
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .corp-fx-drop, .corp-fx-ring { display: none; }
  .corp-shots.is-tabs .corp-shot { transition: none; }
}
@media print {
  .corp-motion-toggle, .corp-hero-tools, .corp-fork, .corp-shots-tabs, .corp-shot-more, .corp-shot-dialog,
  .corp-f4-bar::after, .corp-f3-cat::before { display: none !important; }
  .corp-shots .corp-shot { visibility: visible !important; opacity: 1 !important; grid-area: auto !important; break-inside: avoid; }
  .corp-shots.is-tabs .corp-shots-list { gap: var(--space-6); }
  .corp-f3-lines path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; }
  .corp-fig02 .corp-f2-row::before { opacity: 1 !important; }
  .corp-f5-join line { transform: none !important; }
}