/* ============================================================= * tokens.css — デザイントークン定義(wf.css から分離) * ------------------------------------------------------------- * ・値はデザインカンプ(handoff/design/*.png)からの逆算で暫定確定したのち、 * 2026-09-29 に Figma(Exa_IR「01 JA」/ V3_0918)の実数値と照合した。 * 「Figma実測で確定」と付いたものは Figma の変数・ノード実測値 * 棚卸しの根拠と正規化メモ: handoff/design/tokens-draft.md * Figma 変数との対応表: handoff/design/figma-variables.md * ・wf.css 側は var(--wf-*) を参照するだけにして、生値を持たない * ・トークン値は「意図値」。コンポーネント固有の微調整は wf.css 側で行い、 * ここの値は変えない(CLAUDE.md「デザイントークンの扱い」参照) * ============================================================= */ :root { /* ---------- カラー ---------- */ --wf-color-bg: #FFFFFF; /* ページ背景 */ /* Figma実測で確定: 変数 color/surface(旧値 #F7F9FA は neutral/n50 と同値) */ --wf-color-surface: #F2F4F5; /* 面差し(カード・表ヘッダー・参照情報) */ /* UIパターン適用(Step 3)で追加: Figma の面・線の使い分け */ --wf-color-surface-subtle: #F7F9FA; /* 図版パネル・steps・製品リスト項目。Figma: neutral/n50 */ --wf-color-surface-strong: #EDF0F2; /* data-table のヘッダー行。Figma: neutral/n100 */ --wf-color-hairline: #EEF1F3; /* 表の行間・カード内の区切り。Figma: color/hairline */ --wf-color-text-body-strong: #2C3843; /* def-list・製品リストの本文。Figma: neutral/n800 */ --wf-color-brand-deep: #0A0A45; /* statement の文字色。Figma: brand/b900(nav-bg と同値) */ --wf-color-border: #E4E9EC; /* ヘアライン・カード枠。#E9EBEC を統合 */ --wf-color-text: #151E27; /* 見出し・KPI値 */ --wf-color-sub: #4E5C68; /* 本文・補助テキスト。#64707B を統合 */ --wf-color-muted: #93A1AC; /* キャプション・淡色ラベル。Figma実測で確定: 変数 color/muted */ --wf-color-primary: #1400C8; /* ページ番号・リンク・強調・現在地 */ --wf-color-on-primary: #FFFFFF; /* プライマリー面上の文字 */ /* 濃紺面(サイドナビ・フッター)の配色 */ --wf-color-nav-bg: #0A0A45; /* サイドナビ・フッターのベタ */ --wf-color-nav-text: #FFFFFF; /* 現在ページ・BACK/NEXT・INDEX */ /* Figma実測で確定: 変数 neutral/n600(Nav Item state=default)。 紺地 #0A0A45 とのコントラスト比 3.21:1 で WCAG AA(4.5:1)未達。改善案は figma-variables.md */ --wf-color-nav-text-muted: #5A6874; /* サイドナビの非アクティブ項目 */ /* Figma の Footer にこの色は無い(フッターのテキストはすべて白)。WF専用のロゴ画像ID表示にだけ使う */ --wf-color-nav-sub: #A3A3B9; /* サイドナビのロゴ画像ID(WF専用) */ /* Figma実測で確定: フッターの Rule は color/bg(白)の不透明度100%・1px */ --wf-color-nav-border: #FFFFFF; /* フッターの区切り線 */ /* Figma実測で確定: Nav Item state=current の Underline(白 14.4% → 透明 の横グラデーション・1px) */ --wf-gradient-nav-underline: linear-gradient(90deg, #FFFFFF 14.4%, rgba(255, 255, 255, 0) 100%); /* Figma に該当要素なし(言語切替の上の区切りは WF 構造上の区切り)。値は WF 仮置き。 copyright 上のヘアライン(旧 --wf-color-nav-divider-weak)は Figma 最新版に無いため削除 */ --wf-color-nav-divider: rgba(255, 255, 255, 0.24); /* 言語切替の上ヘアライン */ /* TODO(要デザイナー確認): hover / focus はカンプ未定義のため実装標準で仮置き (2026-09-29 Figma 確認: どのコンポーネントにも hover / focus の state 定義なし。仮置き継続) */ --wf-color-primary-hover: #3A27DD; /* リンク hover(プライマリーを1段明るく) */ --wf-color-focus-ring: #1400C8; /* フォーカスリング */ /* Figma実測で確定: Hero / Background の Accent 1〜3(ページ別に差し替える色)。 既定値は 02 トップメッセージ。03〜07 はファイル末尾の body[data-page-id] で上書きする */ --wf-hero-accent-1: #1400C8; /* Accent 1(右上の大きい楕円) */ --wf-hero-accent-2: #A296EC; /* Accent 2(下の楕円) */ --wf-hero-accent-3: #E4E0FA; /* Accent 3(右端の楕円) */ /* TODO(要デザイナー確認): Figma のカバー背景は「写真素材(AdobeStock・不透明度40%)+ ブラー付き楕円5枚」の合成で、CSS グラデーションに置き換えられない。 カンプからのサンプリング近似を継続(Figma 照合済み・値は未確定) */ --wf-gradient-cover: linear-gradient(115deg, #E8EAF8 0%, #D5DFF8 28%, #AECAF1 60%, #C0ECED 85%, #DDF1F3 100%); /* WF専用(公開ビルドでは body.wf-debug が外れて非表示になる) */ --wf-color-image-existing: #EEEEEE; --wf-color-image-new: #CCCCCC; --wf-color-image-tag-bg: rgba(255, 255, 255, 0.88); /* 実画像に重ねる画像IDラベルの下地(WF専用) */ /* ---------- タイポグラフィ ---------- */ /* TODO(要デザイナー確認): 欧文 Inter 採用はデザイナー確認中(Figma は欧文に Inter を使用)。 欧文グリフは Inter、和文グリフは Noto Sans JP で描画するスタック */ --wf-font-family: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif; /* Figma実測で確定: Cover / KV の「INTEGRATED REPORT 2026」(Inter Medium 120px / line-height 1) */ --wf-font-size-display-lg: 120px; --wf-font-size-h1: 52px; /* 記事ページの欧文タイトル */ /* ヒーローのタイトルはコンテナ幅(cqi)基準で追従させる(vw は使わない。2026-10-06)。 コンテナ = タイトルを直接包む要素(.wf-cover / .wf-page-header__main。container-type: inline-size)。 cqi = コンテナの内容幅の 1%。左ナビ表示時(本文 = 画面幅 − ナビ 220px)も本文側の幅で決まる。 clamp(最小, N cqi, PC の値)。N = 375px 時の目標値 / 375px 時のコンテナ内容幅 × 100 - カバー h1 : 48 / 343 = 14cqi → 内容幅 857px 以上で 120px(1280px 時 996px → 120px)。 最長語 INTEGRATED は 6.28em なので 14cqi では内容幅の 88%(どの幅でも収まる) - 記事・バナー h1: 40 / 311 = 12.86cqi → 記事 404px 以上で 52px / バナー 420px 以上で 54px。 最長語(記事 Highlights 5.40em / バナー Sustainability 6.22em)は内容幅の 69% / 80%。 最小値はナビ表示時の最も狭い本文(769px: 記事の文字列 195px)で語が収まるよう 24px - カバーの和文サブ・社名: 20 / 343 = 5.83cqi → 内容幅 412px 以上で 24px *-vw は container query 非対応ブラウザ向けのフォールバック(@supports で切り替える) */ --wf-font-size-display-lg-cq: clamp(48px, 14cqi, var(--wf-font-size-display-lg)); --wf-font-size-h1-cq: clamp(24px, 12.86cqi, var(--wf-font-size-h1)); --wf-font-size-cover-sub-cq: clamp(20px, 5.83cqi, var(--wf-font-size-h3)); --wf-font-size-display-lg-vw: clamp(48px, 12.8vw, var(--wf-font-size-display-lg)); --wf-font-size-h1-vw: clamp(40px, 10.667vw, var(--wf-font-size-h1)); --wf-font-size-cover-sub-vw: clamp(20px, 5.333vw, var(--wf-font-size-h3)); --wf-font-size-h2: 30px; /* 中項目。Figma実測で確定: JA/Section Title(Medium 30 / 1.5) */ --wf-font-size-h3: 24px; /* 小項目 */ --wf-font-size-h4: 20px; /* セル見出し */ --wf-font-size-body: 16px; /* 本文 */ --wf-font-size-sub: 14px; /* 補助 */ /* テキスト属性の総当たり照合(2026-09-29・V3_0918)で追加 */ --wf-font-size-nav: 15px; /* ナビ系テキスト: サイドナビ項目・フッターリンク・INDEX。Figma: Nav Item / Footer Links */ --wf-font-size-label: 12px; /* 欧文ラベル・最小注記: ページ番号・アンカーナビ見出し・footer_note。Figma: EN/Hero Num・EN/Pager Label */ --wf-font-size-toc-num: 11px; /* home INDEX カードのページ番号。Figma: TOC Card の Number(Inter SemiBold 11) */ --wf-font-size-nav-site: 9px; /* サイドナビのサイト名。Figma: Shell / Side Nav の Brand テキスト(Inter Medium 9) */ --wf-font-size-caption: 13px; /* キャプション・KPI指標名。Figma実測で確定: JA/Caption・JA/KPI Label */ --wf-font-size-statement: 34px; /* statement(ミッション・キャッチコピー)。Figma実測で確定: JA/Statement */ /* statement は本文幅(cqi)基準で追従させる(2026-10-06 SP(9)。考え方はヒーローのタイトルと同じ)。 - カード(ミッション等): 23 / 343 = 6.7cqi(コンテナ = 本文 wf-content)→ 本文 508px 以上で 34px(PC 986px は 34 のまま) - ヒーロー内(キャッチコピー): 24 / 311 = 7.6cqi(コンテナ = ヒーローのテキスト列)→ 448px 以上で 34px(1280px 時 450px → 34) 最小 22px(仮置き)。container query 非対応ブラウザは 34px のまま */ --wf-font-size-statement-min: 22px; --wf-font-size-statement-cq: clamp(var(--wf-font-size-statement-min), 6.7cqi, var(--wf-font-size-statement)); --wf-font-size-statement-hero-cq: clamp(var(--wf-font-size-statement-min), 7.6cqi, var(--wf-font-size-statement)); --wf-font-size-kpi: 48px; /* KPI値(表示専用)。Figma実測で確定: EN/KPI Value */ /* KPI カード(kpi-grid)の値はカード幅(cqi)基準で追従させる(2026-10-06 SP(11)。仮置き)。 コンテナ = カード(.wf-pattern-kpi__item)の内容幅。25cqi → 内容幅 192px 以上で 48px (PC で最も狭い cols 4 のカードは内容幅 194px → 48px のまま)。375px の 2 列(内容幅 約123px)で 30.6px、下限 28px */ --wf-font-size-kpi-min: 28px; --wf-font-size-kpi-cq: clamp(var(--wf-font-size-kpi-min), 25cqi, var(--wf-font-size-kpi)); /* Figma実測で確定: Footer / Pager の BACK・NEXT(Inter Medium 40px / line-height 1) */ --wf-font-size-pager: 40px; --wf-line-height-tight: 1.2; /* 欧文h1(2行組) */ --wf-line-height-heading: 1.4; /* 和文見出し(h3・h4)・数値 */ --wf-line-height-section: 1.5; /* h2。Figma実測で確定: JA/Section Title */ --wf-line-height-normal: 1.6; /* 補助・キャプション */ --wf-line-height-relaxed: 1.8; /* 本文 */ --wf-line-height-flat: 1; /* アイコン(Material Symbols) */ --wf-line-height-snug: 1.25; /* サイドナビ項目のラベル。Figma: Nav Item */ --wf-line-height-comfortable: 1.7; /* ページヘッダーの和文サブタイトル。Figma: JA/Hero Label */ /* 字間(Figma の letterSpacing % を em で持つ) */ --wf-letter-spacing-xs: 0.02em; /* 2%: BACK/NEXT・copyright */ --wf-letter-spacing-sm: 0.04em; /* 4%: 和文の本文系(JA/Body・Body S)・フッターリンク・言語切替・チップ */ --wf-letter-spacing-md: 0.05em; /* 5%: 欧文タイトル(EN/Hero Title)・サイドナビのサイト名 */ --wf-letter-spacing-lg: 0.1em; /* 10%: 和文見出し・ページヘッダーの和文サブ(JA/Hero Label) */ --wf-letter-spacing-xl: 0.2em; /* 20%: 欧文ラベル(EN/Hero Num・EN/Pager Label・INDEX) */ --wf-letter-spacing-2xl: 0.26em; /* 26%: home INDEX カードのページ番号(2.86px / 11px) */ --wf-letter-spacing-display: 0.08em; /* 8%: statement カード(04 価値創造 / Statement インスタンス 4162:9518 の実測) */ --wf-font-weight-regular: 400; --wf-font-weight-medium: 500; --wf-font-weight-semibold: 600; /* 欧文数字(KPI値・steps番号)。Figma: Inter Semi Bold */ --wf-font-weight-bold: 700; /* ---------- 余白スケール ---------- */ --wf-space-1: 8px; --wf-space-2: 16px; --wf-space-3: 24px; /* グリッド gutter */ --wf-space-4: 32px; --wf-space-5: 48px; /* 中項目内の要素間 */ --wf-space-6: 64px; /* 見出し間 */ --wf-space-7: 120px; /* ページヘッダー・フッター帯の内側上余白 */ --wf-space-8: 160px; /* 大セクション間 */ /* Figma実測で確定: セクション(h2)間 96px(V3 全9ページ・32箇所で一致)。 アンカーナビ → 最初のセクションも 96px、ページヘッダー → アンカーナビは 64px(--wf-space-6) */ --wf-space-section: 96px; --wf-space-list-indent: 20px; /* カード内箇条書きのぶら下げ */ /* UIパターン適用(Step 3)で追加: Figma 実測の用途別余白 */ --wf-space-h4-gap: 20px; /* h4 見出し → 中身(Figma: Subsub 内 gap 20) */ --wf-space-card-pad: 20px; /* カード内パディング(KPI Item / Card Item / Case Card) */ --wf-space-panel-gap: 40px; /* 図版パネル内の列間・def-list 行の上下 */ --wf-space-media-caption: 14px; /* 図版パネル(media-text)の本文 → 出典・注。Figma実測(V4_261002 / Chart パネルの Text gap 14) */ --wf-space-step-pad-x: 28px; /* steps パネルの左右パディング */ --wf-space-step-gap: 12px; /* steps のパネル間。Figma実測(V4_261002 / Steps / 特定プロセス 4297:17162 の gap 12) */ --wf-space-statement-y: 88px; /* statement カードの上下パディング */ --wf-space-statement-y-sp: 32px; /* statement カードの上下パディング(本文 508px 未満。仮置き 2026-10-06) */ --wf-space-statement-x-sp: 20px; /* statement カードの左右パディング(本文 508px 未満。仮置き 2026-10-06) */ /* カード / KPI(Figma実測で確定: V4_261002 / 03 Business Highlights の Case Grid 4311:12524・KPI Grid 4311:12565。 Card Item(4297:17044)・invest-intent の KPI Grid(4311:11886)も同値) */ --wf-space-card-gap: 16px; /* カード間(Case Grid / Card Item の Row gap) */ --wf-space-card-inner: 10px; /* カード本文の要素間(Card Body の gap。タイトル → 本文) */ --wf-space-kpi-gap: 14px; /* KPI カード間(KPI Grid の列間・行間) */ --wf-space-kpi-pad-top: 22px; /* KPI カードの上パディング(左右は --wf-space-card-pad 20) */ --wf-space-kpi-pad-bottom: 18px; /* KPI カードの下パディング */ --wf-space-kpi-inner: 6px; /* KPI カードの要素間(指標名 → 値 → 前年比) */ /* 3P カード(card-list variant: pillar)。Figma実測で確定: V4_261002 / 07 Business Strategy の Card / 人(4297:16999)。 パディング 24(--wf-space-3)・段落間 10(--wf-space-card-inner) */ --wf-space-pillar-gap: 14px; /* 見出し(名称 + 英語サブ)→ リード文 → 本文 */ --wf-space-pillar-head: 2px; /* 名称 → 英語サブ */ /* 共通コンポーネントの内部レイアウト(Figma実測で確定: V3_0918。2026-09-29 総当たり照合で追加) */ --wf-space-tight: 10px; /* ナビ番号↔ラベル・ラベル↔現在地下線・言語切替の項目間・カバーのタイトル↔和文サブ */ --wf-space-nav-brand: 14px; /* サイドナビのロゴ → サイト名(Shell / Side Nav の Brand gap) */ --wf-space-nav-item: 23px; /* サイドナビの項目間(Nav List の gap) */ /* フッター(Figma実測で確定: V3_0918 の Footer インスタンス 4162:8860 / 4162:9508) */ --wf-space-footer-gap: 28px; /* BACK/NEXT → INDEX / リンク項目の間隔 / リンク群 → copyright */ --wf-space-footer-rule: 60px; /* INDEX → 区切り線 / 区切り線 → リンク群 */ --wf-space-footer-row: 12px; /* リンク群の行間(1行目 → 2行目) */ --wf-space-footer-meta: 6px; /* copyright → footer_note */ /* ---------- 角丸 ---------- */ /* Figma実測で確定: 変数 radius/sm = 4 / radius/lg = 8。 使い分けも Figma の使用実態に合わせる: 面を持つ入れ物(KPI Item / Card Item / Case Card / 図版パネル)は lg、小さな UI 部品(バッジ・ボタン・フォーカスリング等)は sm */ --wf-radius-sm: 4px; /* バッジ・ボタン・フォーカスリング */ --wf-radius-lg: 8px; /* カード・画像枠・図版・パネル */ --wf-radius-portrait: 6px; /* 人物カードの写真。Figma実測(V4_261002 / Exec の Photo マスク rx 6) */ --wf-radius-pill: 999px; /* ピル形(アンカーチップ。次ステップで適用) */ /* ---------- レイアウト ---------- */ --wf-nav-width: 220px; --wf-content-max: 1050px; --wf-size-lead-max: 720px; /* lead の最大幅 */ --wf-size-text-max: 860px; /* 本文テキスト(text パターン・パターン冒頭の導入文)の最大幅。Figma実測(V3_0918 全ページの本文 860px) */ --wf-size-nav-width-sp: 260px; /* SP ドロワー幅 */ --wf-size-touch: 48px; /* ハンバーガーのタップ領域 */ /* 横スクロール表(SP)の端フェード。「続きがある」ことがかすかに分かる程度(2026-10-06 渥美フィードバックで控えめに)。 TODO(要デザイナー確認): いずれも仮置き */ --wf-size-hscroll-fade: 12px; /* 幅。セルの内側余白(data-table 16px)に収まる幅 */ --wf-opacity-hscroll-fade-end: 0.6; /* 右端(続きがある側): 面の色 60% → 透明 */ --wf-opacity-hscroll-fade-start: 0.35; /* 左端(戻れる側): 右端より一段薄く */ /* data-table の固定列(1 列目。横スクロール中も左端に残す。matrix は既定で有効)。TODO(要デザイナー確認): 仮置き 幅: 日本語は Figma の 1 列目 92px 相当(matrix の 9.2% × 最小幅 960 = 88px。最長の氏名 52 + 左右 8 で収まる)。 英語は最長の氏名(Masayuki Watanabe 116px)+ 左右 8 = 132px で折り返さない幅 */ --wf-size-sticky-col: 88px; --wf-size-sticky-col-en: 132px; --wf-shadow-sticky-col: inset -1px 0 0 var(--wf-color-border); /* 固定列の右端の境目。横スクロールが 1px 以上起きたときだけ出す(1px の線。ぼかした影は使わない) */ --wf-color-hscroll-bg: var(--wf-color-bg); /* 横スクロール表の端フェードの色 = 表が置かれた面の色(パネル内はパターン側で上書き) */ --wf-color-overlay: rgba(0, 0, 0, 0.5); /* TODO(要デザイナー確認): SP ドロワー展開中の背面オーバーレイ。不透明度は仮置き */ /* ページ内アンカー(#block-*)の着地位置。PC は固定ヘッダーが無い(サイドナビは左)ので見出しの上に 32 の余白だけ取る。 SP は右上の固定ハンバーガー(上 16 + 高さ 48)に隠れないよう、その下端 + 16 に着地させる(仮置き) */ --wf-scroll-margin-top: var(--wf-space-4); --wf-scroll-margin-top-sp: calc(var(--wf-space-2) + var(--wf-size-touch) + var(--wf-space-2)); --wf-size-step-num-col: 48px; /* steps の番号カラム幅。Figma実測 */ --wf-size-def-term: 280px; /* def-list の項目名カラム幅。Figma実測(Credo) */ --wf-size-media-text-col: 380px; --wf-size-media-portrait-col: 262px; /* media-text(variant: plain)の画像列幅。Figma実測(Top Message / Body + Portrait 4162:8849) */ /* media-text の本文カラム幅。Figma実測(Chart パネル内 Text) */ --wf-size-logo-h: 32px; /* サイドナビのロゴ枠(プレースホルダー時) */ --wf-size-nav-logo-w: 160px; /* サイドナビの実ロゴの表示幅。Figma実測で確定(V4_261002 / Shell / Side Nav の Logo / ExaWizards (white) 160×25.6) */ --wf-size-hero-h: 440px; /* バナー型ヒーロー(08 サステナビリティ / 09 ガバナンス。Figma実測で確定: Hero / Banner 4162:10983 / 4162:11181) */ --wf-size-banner-text-col: 640px; /* テキスト列の幅(Overlay) */ --wf-font-size-banner-title: 54px; /* 欧文タイトル(Inter Medium 54) */ --wf-font-size-banner-title-cq: clamp(24px, 12.86cqi, var(--wf-font-size-banner-title)); /* 上の h1 と同じ考え方 */ --wf-font-size-banner-title-vw: clamp(40px, 10.667vw, var(--wf-font-size-banner-title)); --wf-line-height-banner-title: 1.05; --wf-letter-spacing-banner-title: -0.015em; /* -0.81px / 54px */ --wf-gradient-banner-scrim: linear-gradient(66.6deg, rgba(7, 11, 44, 0.82) 7.5%, rgba(7, 11, 44, 0.5) 35.1%, rgba(7, 11, 44, 0) 61%); /* ページヘッダー(ヒーロー)の高さ。Figma: Hero / Message・Hero / Standard */ --wf-size-cover-h: 720px; --wf-aspect-toc-thumb: 490 / 208; /* home INDEX カードのサムネイル比。Figma: TOC Card の Thumb 490×208 */ /* home カバーの最小高さ。Figma: Cover / KV */ --wf-size-footer-max: 800px; /* フッター中身の幅(中央揃え)。Figma: Footer の px 210 / 1220 */ --wf-size-chip-h: 39px; /* アンカーナビのチップ高さ。Figma実測で確定: Pill */ /* ---------- 画像枠の高さ(カンプは実画像のため WF 値のまま) ---------- */ --wf-size-kv-h: 280px; --wf-size-figure-h: 320px; /* figure(variant: logo)のロゴ枠。Figma実測で確定(V4_261002 / 06 AI Solution Service の Logo / Xware 4297:16890・ Logo / スタジアム 4297:16907・Logo / ele& 4297:16915): 400×150、左右 32。横長ロゴは高さ 56(Xware 224×56・ STADIUM 226×56)、縦組みロゴは高さ 110(ele& 161×110。Figma は py40 を越えて上下 20 まで使う)ため、 ロゴ領域は 336×110 とする */ --wf-size-logo-frame-w: 400px; --wf-size-logo-frame-h: 150px; --wf-space-logo-frame-x: 32px; --wf-space-logo-frame-y: 19px; /* 枠線 1 + 19 = 20(Figma の ele& ロゴ y=20)。内側の高さがちょうど 110 になる */ --wf-size-media-h: 240px; --wf-size-photo-h: 200px; --wf-size-card-img-h: 120px; /* 人物カード(card-list variant: person)。Figma実測で確定: V4_261002 / 09 Governance の 役員一覧(4297:17271) */ --wf-size-person-w: 187px; /* カード(写真)の幅。全グループ共通の列幅で左寄せ */ --wf-ratio-person: 187 / 250; /* 写真の比率(縦長 3:4 相当) */ --wf-space-person-inner: 12px; /* 写真 → 氏名 → 役職 */ --wf-space-person-group: 40px; /* グループ(取締役 / 社外取締役 / 監査役)の間 */ /* スキルマトリックス(data-table variant: matrix)。Figma実測で確定: V4_261002 / 09 Governance の Skill Matrix(4297:17356) */ --wf-size-matrix-col1: 9.2%; /* 氏名列(92 / 1000) */ --wf-size-matrix-col2: 16.8%; /* 特記すべき専門分野列(168 / 1000)。残りの列は均等 */ --wf-size-matrix-min: 960px; /* これより狭い画面では枠内で横スクロール */ --wf-space-matrix-cell-y: 10px; /* セルの上下パディング */ --wf-space-matrix-cell-x: 8px; /* 1〜2 列目の左右パディング */ --wf-space-matrix-mark-x: 6px; /* スキル列(◎)の左右パディング */ --wf-ratio-card-thumb: 238 / 125; /* 画像付きカードのサムネイル比率。Figma実測(V4_261002 / Case Card の Thumb 238×125) */ --wf-space-link-row-gap: 12px; /* リンク行どうしの間。Figma実測(V4_261002 / ESGデータの Links 4297:17246 の gap 12) */ --wf-space-link-row-stack-gap: 6px; /* TODO(要デザイナー確認): リンク行の縦並び(狭い幅)でのラベル → URL の間隔。仮置き */ --wf-space-link-row-y: 20px; /* リンク行の上下パディング。Figma実測(V4_261002 / Link 行 py20 / px24) */ --wf-font-size-link-icon: 14px; /* リンク行の外部リンクアイコン。Figma実測(↗ Inter Medium 14) */ } /* ---------- ヒーロー背景(Hero / Background) ---------- Figma実測で確定: 楕円5枚の放射グラデーションを同じ中心・半径・色・不透明度で再現 (上から Tone/Bloom → Accent 3 → Accent 1 → Accent 2 → Tone/Brand → 白地)。 % はヒーロー帯全体(テキスト面 + KV)に対する比率。 Accent 1〜3 はページごとに変わるため、body でも宣言し直して body[data-page-id] の上書きを反映させる */ :root, body { --wf-gradient-hero: radial-gradient(38.52% 68.75% at 54.92% 33.33%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)), radial-gradient(29.51% 75% at 101.64% 79.17%, color-mix(in srgb, var(--wf-hero-accent-3) 30%, transparent), transparent), radial-gradient(43.44% 110.42% at 76.23% 20.83%, color-mix(in srgb, var(--wf-hero-accent-1) 46%, transparent), transparent), radial-gradient(36.07% 91.67% at 45.90% 116.67%, color-mix(in srgb, var(--wf-hero-accent-2) 34%, transparent), transparent), radial-gradient(36.89% 93.75% at 12.30% -2.08%, rgba(20, 0, 200, 0.1), rgba(20, 0, 200, 0)), #FFFFFF; } /* ページ別アクセント色(Figma V3_0918 の各ページの Hero Background インスタンスから実測) */ body[data-page-id="business"] { --wf-hero-accent-1: #1100A4; --wf-hero-accent-2: #6D5BE0; --wf-hero-accent-3: #C9C2F4; } body[data-page-id="mission"] { --wf-hero-accent-1: #1400C8; --wf-hero-accent-2: #A296EC; --wf-hero-accent-3: #C9C2F4; } body[data-page-id="aiproducts"] { --wf-hero-accent-1: #1100A4; --wf-hero-accent-2: #A296EC; --wf-hero-accent-3: #E4E0FA; } body[data-page-id="aiss"] { --wf-hero-accent-1: #1400C8; --wf-hero-accent-2: #6D5BE0; --wf-hero-accent-3: #E4E0FA; } body[data-page-id="strategy"] { --wf-hero-accent-1: #1100A4; --wf-hero-accent-2: #6D5BE0; --wf-hero-accent-3: #C9C2F4; } /* SP ブレークポイントは 768px。メディアクエリでは変数を使えないため wf.css 側にリテラルで記述する(変更時は両方を直す)。 */