/* 株式会社ヴァンガードリクリエイト — 図（線画＋面）の静的な見た目
   - 図の実体は assets/img/figures/*.svg（正典）。HTML には同じ内容をインラインで埋める（動きを CSS/JS で付けるため）
   - 色は :root の変数だけ（style.css）。hex を書かない。深紅は矢印の先・点・短い印に限る
   - 動き（描かれる・現れる・進む・点く）は main.js／style.css 側。ここでは何も動かさない
   - 動きの印（class）：f-step[data-step]（順番の組）f-line（描かれる線：stroke-dasharray で描ける path）f-box（現れる箱）
     f-arrow／f-arrow-head（進む矢印と先）f-dot（点く点）f-text（文字）f-mark（深紅の印）f-fill（塗られる面：data-i の順） */

/* 図の入れ物：写真の枠を図に転用したもの（.photo.is-fig）。点線の枠・灰の面・注記は使わない */
.photo.is-fig {
  background: var(--vr-white); border: 1px solid var(--vr-line); border-style: solid;
  padding: 0; aspect-ratio: auto; display: block; gap: 0;
}
.photo.is-fig svg.figure { display: block; width: 100%; height: auto; }
/* 幅の広い図（導入の順番・拠点と現場）：本文幅いっぱいにせず、760px までで中央 */
.photo.is-fig.wide { max-width: 760px; margin: 28px auto 0; }
.photo.is-fig.mid { max-width: 640px; margin: 0 0 28px; }
/* 事業カードの枠（4:3）と姿勢の面の枠（4:5）は、SVG の viewBox（400×300／400×500）がそのまま比率になる */

/* SVG の中身 */
svg.figure {
  color: var(--vr-ink); fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: square; stroke-linejoin: miter;
  font-family: var(--vr-sans); font-feature-settings: "palt";
}
svg.figure .c-ink { stroke: var(--vr-ink); }
svg.figure .c-strong { stroke: var(--vr-line-strong); }
svg.figure .c-light { stroke: var(--vr-line); }
svg.figure .c-white { stroke: var(--vr-white); }
svg.figure .c-signal { stroke: var(--vr-signal); }
svg.figure .c-caution { stroke: var(--vr-caution); }
svg.figure .c-dash { stroke-dasharray: 4 4; }
svg.figure .fill-white { fill: var(--vr-white); }
svg.figure .fill-paper { fill: var(--vr-paper); }
svg.figure .fill-surface { fill: var(--vr-surface); }
svg.figure .fill-line { fill: var(--vr-line); }
svg.figure .fill-strong { fill: var(--vr-line-strong); }
svg.figure .fill-ink { fill: var(--vr-ink); }
svg.figure .fill-signal { fill: var(--vr-signal); }
svg.figure .f-fill { stroke: none; }
svg.figure .f-dot, svg.figure .f-mark.fill-signal { stroke: none; }
svg.figure rect.f-box.fill-ink { stroke: none; }
svg.figure text { stroke: none; fill: var(--vr-ink); font-family: var(--vr-sans); }
svg.figure text.t-muted { fill: var(--vr-ink-light); }
svg.figure text.t-signal { fill: var(--vr-signal); }
svg.figure text.t-white { fill: var(--vr-white); }
svg.figure text.t-latin { font-family: var(--vr-latin); }
/* 矢印の先は塗らない（線だけの V 字） */
svg.figure .f-arrow-head { fill: none; stroke-linecap: square; }

/* style.css の .fig は f-line などを「塗り」の色名として使っている（旧・模式図）。図の中では打ち消す */
.fig svg.figure .f-line, .fig svg.figure .f-box, .fig svg.figure .f-arrow { fill: none; }
.fig svg.figure text { fill: var(--vr-ink); } .fig svg.figure text.t-muted { fill: var(--vr-ink-light); }
.fig svg.figure rect.f-box.fill-white { fill: var(--vr-white); } .fig svg.figure rect.f-box.fill-paper { fill: var(--vr-paper); }
.fig svg.figure rect.f-box.fill-ink { fill: var(--vr-ink); } .fig svg.figure .f-dot { fill: var(--vr-signal); }

/* 導入の順番の図は、本文の ol.steps の上に置く */
#steps .photo.is-fig.wide { margin-top: 28px; }

/* 事業ページの柱の図と、自社の取り組みの小さな図
   - services の柱 2・3（#organization／#business）の図：本文の幅いっぱいにしない。440px まで、左寄せ
   - 自社の取り組み（ブロックアート）：小さな図（viewBox 240×100、文字なし。読ませる文は隣の 1 行と本文）。
     services #own は 240px まで、ホームのカードの下の 1 行（.own-line）の横は 120px */
.photo.is-fig.pillar { max-width: 440px; margin: 0 0 28px; }
.photo.is-fig.mini { max-width: 240px; margin: 0 0 16px; }
.own-line.has-fig { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.own-line.has-fig .photo.is-fig.mini { flex: 0 0 120px; max-width: 120px; margin: 0; }
.own-line.has-fig > p { flex: 1 1 240px; margin: 0; }