/* ============================================================================ tokens.css — デザインシステム CSS変数 全定義 出典: ../corporate-site/phase1_design_system.md 9章（このファイルの内容はそのまま同章の写し） 値は変更しない。意匠の正本はデザインシステム側（phase1_design_system.md）。 2026-07-28 移植時の変更点（COOレビュー指摘 C-1・dev-web-coding）: - `--ws-fs-display` は削除した。vw実装で横スクロールを誘発する不使用トークン （出典側 _tokens.css にも同旨の注記あり）。巨大タイポの実装は phase1_design_system.md 2-5「決定B」のcqw方式に従う（未実装・後工程）。 それ以外の値・構造は出典と完全に一致させている。 2026-07-29 dev-web-coding: visual_spec.md（新設・ビジュアル/モーションの正本）に基づき、 下記2ブロックを全面置換した（他は出典どおり据え置き）。 - 7. Layout: `--ws-container: 1120px` 固定を廃止し、幅トークンを4段階 （--ws-w-text/narrow/main/wide + .ws-bleed）に再構成（7-1）。 - 11. Motion: 全モーションを「拍（--ws-beat: 480ms）の整数倍」に全面置換（3章）。 旧 `--ws-dur-*` は削除し、参照側（components.css）も新トークンに置き換えた。 - 新設: 12. Aspect Ratio（写真の枠は5種類だけ。6章・asset_inventory.md実測に基づく）。 ⚠️ 要確認（値が確定していないもの。詳細は phase1_design_system.md 11章） - D-A / D-B: カラーHEXはスクリーンショットからの目視推定値。原本確認後に差し替える。 色の"役割・関係・コントラスト"は確定済みのため、HEX差し替えのみで構造は壊れない。 - ~~D-C: Display書体（明朝）の実体が未確認~~ → 解決（2026-07-30 COO）。 Noto Serif JP のサブセットを自ホストした（下の @font-face）。旧方針「自ホストはやらない・ システムフォントで組む」を撤回した理由は、OS標準任せだと「踊れ。」のような巨大な文字の 字形が Windows / Mac / iPhone で変わり、サイトで最も目立つ部分の印象が環境ごとに ばらつくため。フォールバックチェーンはそのまま残してあるので、フォント配信に失敗しても 従来通り表示される。 ============================================================================ */ /* --------------------------------------------------------------------------- 0. 自ホストWebフォント（2026-07-30 COO追加） --------------------------------------------------------------------------- 実体は Noto Serif JP のサブセット（SIL Open Font License 1.1）。 当サイトで明朝が実際に効く文字だけに絞って 400/700 各19KBに収めている。 生成・再生成: app/scripts/build-font-subset.js ライセンス全文: public/fonts/LICENSE-Noto-Serif-JP.txt ⚠️ ロゴ・章番号・KVの文言を変えたら上記スクリプトを再実行すること。 サブセットに無い文字はOS標準フォントで描かれ、その字だけ字形が浮く。 font-display: swap ＝ フォント取得中は先にフォールバックで表示する。 巨大タイポが数百ミリ秒消えるより、字形が一瞬入れ替わる方が害が小さい。 ⚠️ ここでは basePath を使えない（CSSは静的配信でテンプレート展開されない）。 url() はこのCSSファイルからの相対パスで書くこと。`/fonts/...` と絶対で書くと 将来 wellspec.co.jp/recruit/ 配下へ移設したときに404になる。 ------------------------------------------------------------------------- */ @font-face { font-family: "WS Mincho Display"; src: url("../fonts/ws-mincho-display-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "WS Mincho Display"; src: url("../fonts/ws-mincho-display-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* --- 1. Dance Colors（ダンスカラー） --------------------------------- */ --ws-magenta-050: #FCEFF6; --ws-magenta-500: #E5007F; /* Vivid：塗り面・ドット・イラスト用。文字色に使わない */ --ws-magenta-600: #C9006B; /* Ink ：文字・線・白文字を載せる塗り（白背景5.68:1） */ --ws-magenta-700: #A30057; /* Deep ：hover / active（白背景7.79:1） */ --ws-cyan-050: #E9F7FB; --ws-cyan-500: #00B4D8; /* 文字・線に使用禁止（白背景2.46:1）。塗り面専用 */ --ws-cyan-600: #00758C; /* 白背景5.35:1 */ --ws-cyan-700: #005C6E; --ws-blue-050: #EEF1FA; --ws-blue-500: #2B44A0; /* 白背景8.61:1。Vividだが文字にも使える唯一の色 */ --ws-blue-600: #24397F; --ws-blue-700: #1A2A5E; --ws-orange-050: #FDF0ED; --ws-orange-500: #F1543F; /* 本文に使用禁止（白背景3.45:1）。大文字・UI境界のみ */ --ws-orange-600: #C0341F; /* 白背景5.60:1 */ --ws-orange-700: #9A2817; --ws-purple-050: #F5EDF7; --ws-purple-500: #A833B8; /* 白背景5.48:1 */ --ws-purple-600: #8E2E9E; /* 白背景6.92:1 */ --ws-purple-700: #72237E; /* --- 2. Neutral（ニュートラル） --------------------------------------- */ --ws-ink: #1A1A1A; /* 本文・見出しの基本文字色（白背景17.4:1）。純黒#000は使わない */ --ws-ink-2: #4D4D4D; /* 補助テキスト（白背景8.45:1） */ --ws-ink-3: #6B6B6B; /* 最も薄い文字色の下限（白背景5.33:1）。これより薄くしない */ --ws-bg: #FFFFFF; --ws-bg-subtle: #F4F4F2; /* 弱い区切り用背景。1ページ2箇所まで・隣接禁止 */ --ws-bg-ink: #1A1A1A; /* フッター等の反転面 */ --ws-line: #E2E2DF; /* 装飾罫のみ。意味を担う境界には使わない */ --ws-line-strong: #767674; /* フォーム入力欄の枠線・意味を担う境界（白背景4.55:1） */ /* --- 3. State（状態色） ------------------------------------------------ */ --ws-error: #B3001B; /* 白背景7.16:1。色のみに頼らずテキスト併記が必須 */ --ws-success: #0F7A4D; /* 白背景5.37:1 */ --ws-warning: #8A5A00; /* 白背景5.93:1 */ --ws-focus: #2B44A0; /* 白背景8.61:1（=Blue 500） */ /* --- 4. Semantic（役割 → 色） ------------------------------------------ */ --ws-primary: var(--ws-magenta-600); --ws-primary-hover: var(--ws-magenta-700); --ws-primary-tint: var(--ws-magenta-050); --ws-text: var(--ws-ink); --ws-text-muted: var(--ws-ink-2); --ws-text-note: var(--ws-ink); /* セクション担当色の既定値。.ws-section--* （後工程のCSS）が上書きする */ --ws-section: var(--ws-blue-600); --ws-section-vivid: var(--ws-blue-500); --ws-section-tint: var(--ws-blue-050); /* --- 5. Typography（タイポグラフィ） ------------------------------------ */ --ws-font-display: "WS Mincho Display", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif; --ws-font-script: "WS Script", "EB Garamond", "Times New Roman", Times, serif; --ws-font-text: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Yu Gothic Medium", "YuGothic", "Meiryo", sans-serif; --ws-fs-h1: clamp(1.75rem, 1.1rem + 3.2vw, 3.5rem); --ws-fs-h2: clamp(1.5rem, 1.05rem + 2.2vw, 3rem); --ws-fs-h3: clamp(1.125rem, 0.98rem + 0.7vw, 1.5rem); --ws-fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); --ws-fs-body: clamp(1rem, 0.97rem + 0.13vw, 1.0625rem); --ws-fs-ui: 1rem; /* 16px固定。iOS Safariの自動ズーム防止 */ --ws-fs-note: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem); /* 13px下限。これ未満にしない */ --ws-lh-display: 1.15; --ws-lh-heading: 1.4; --ws-lh-body: 1.8; --ws-lh-ui: 1.5; --ws-ls-display: -0.02em; --ws-ls-heading: 0.01em; --ws-ls-body: 0.02em; --ws-ls-script: 0.04em; /* --- 6. Spacing（余白スケール・4px基準） -------------------------------- */ --ws-space-1: 4px; --ws-space-2: 8px; --ws-space-3: 12px; --ws-space-4: 16px; --ws-space-5: 24px; --ws-space-6: 32px; --ws-space-7: 40px; --ws-space-8: 48px; --ws-space-9: 64px; --ws-space-10: 80px; --ws-space-11: 96px; --ws-space-12: 120px; --ws-space-13: 160px; --ws-section-gap: var(--ws-space-9); /* SP 64px → lgで120px */ --ws-section-gap-lg: var(--ws-space-11); /* SP 96px → lgで160px */ --ws-block-gap: var(--ws-space-6); /* SP 32px → lgで48px */ --ws-item-gap: var(--ws-space-4); /* SP 16px → lgで24px */ /* --- 7. Layout（コンテナ・ガター・幅） --------------------------------- 出典: visual_spec.md 7-1。「1920pxで中央58%しか使わない」問題（V-5）を解消するため、 `--ws-container: 1120px` 固定を廃止し、4段階の幅トークンに置き換えた。 `.ws-container`（既存クラス・全ページで使用中）は当面 `--ws-w-main` を指す エイリアスとして維持し、下層ページの互換を保つ（7-1「使用箇所」の 『⑤CONDITIONS・下層の本文レイアウト全体』に一致する値のため実害がない）。 TOP専用の新セクション（①③⑧等）は `.ws-bleed` / `.ws-w-wide` を直接使う。 -------- */ --ws-gutter: 20px; /* → md 32px / lg 40px / xl 64px / xxl 80px（下記メディアクエリで上書き） */ --ws-w-text: 44rem; /* 704px 本文1カラム */ --ws-w-narrow: min( 880px, 100% - var(--ws-gutter) * 2); --ws-w-main: min(1280px, 100% - var(--ws-gutter) * 2); --ws-w-wide: min(1680px, 100% - var(--ws-gutter) * 2); /* full-bleed は 100%＝ガター無し（.ws-bleed） */ --ws-measure: 44rem; /* 本文最大幅 ≒720px（日本語で1行35〜40字）。--ws-w-text と同義 */ /* 1行の文字数（2026-08-05 大﨑さん指示「UIごとにちゃんと考えて」を受けて新設）。 ⚠️ 単位は em（rem ではない）。em はその要素自身の文字サイズを基準にするため、 文字を大きくした箇所でも「1行◯字」が保たれる。rem だと文字を大きくした分だけ 1行の字数が減り、リード文が本文より短い行になる（実測: 本文41字 / リード30字）。 字数を固定するのは「読ませる文章」だけ。カード・表など枠に合わせて読むものは 固定せず流し込む（設計方針は README「1行の文字数の決め方」を参照）。 */ --ws-measure-read: 40em; /* 読ませる文章の上限。日本語は40字を超えると次の行頭を見失いやすい */ --ws-measure-lead: 32em; /* リード文。文字が大きいぶん行は短くする */ /* --- 8. Shape（形状） --------------------------------------------------- */ --ws-radius-pill: 999px; /* ボタン・タグ・円アイコン */ --ws-radius-card: 16px; --ws-radius-input: 8px; /* 入力欄はピルにしない（テキスト左端が丸みに食われるため） */ /* --- 9. Component（コンポーネント寸法） --------------------------------- */ /* lower_pages_design.md 6章 論点1（COO決定・2026-07-30: 「足す」を採用）。 ヘッダーは padding-block(--ws-space-3)＋ロゴ2行で実測72px前後。components.css側の var(--ws-header-h, 72px) フォールバックと同値のため、既存の見た目は変わらない。 */ --ws-header-h: 72px; --ws-btn-h-lg: 56px; --ws-btn-h-md: 48px; --ws-btn-h-sm: 44px; /* タップ最小 */ --ws-btn-min-w: 15rem; /* 240px。同一セクション内で共有し、幅を揃える */ --ws-tapmin: 44px; --ws-fixedbar-h: 56px; /* --- 10. Dots（ドット・方針2の中核。画像0KB） ---------------------------- */ --ws-dot-grid: 16px; --ws-dot-size: 22%; --ws-dot-opacity: 0.30; /* テキスト背面に置く場合は0.15以下に落とす（後工程のCSS側で規律） */ /* --- 11. Motion（モーション） --- 出典: visual_spec.md 3章（正本・2026-07-29全面置換） ★オリジナリティ①「全ての動きが1つの拍（125BPM＝480ms）の整数倍で鳴る」の実装規律。 B-1（dev-web-verifyの機械的チェック対象）: `ms`/`s` の生値を書いてよいのはこのブロックだけ。 旧 `--ws-dur-*` は削除し、components.css 側の参照も全て置き換え済み（3-3対応表）。 `--ws-stagger` 系は名前を維持しつつ値だけ新トークンを参照させている（3-3）。 --------- */ --ws-beat: 480ms; /* ★基準（125BPM） */ --ws-t-8th: 60ms; /* 1/8拍 : 文字単位のstagger */ --ws-t-4th: 120ms; /* 1/4拍 : hover・focusの色変化 */ --ws-t-2nd: 240ms; /* 1/2拍 : ナビ開閉・小さな状態変化 */ --ws-t-1: 480ms; /* 1拍 : 入場の標準・写真のクロスフェード */ --ws-t-1h: 720ms; /* 1.5拍 : 巨大タイポのワイプ（M3の上限） */ --ws-t-2: 960ms; /* 2拍 : 数字のカウントアップ */ --ws-t-3: 1440ms; /* 3拍 : ★開幕シークエンスの総尺（M-01 OVERTURE） */ --ws-t-4: 1920ms; /* 4拍 : 拍の点の周期 */ --ws-t-6: 2880ms; /* 6拍 : CTAの鼓動（M-13） */ --ws-t-8: 3840ms; /* 8拍 : 待機中の呼吸・スクロール指標の1小節 */ --ws-t-12: 5760ms; /* 12拍 : 最も遅いループ（ドットの流れ等） */ --ws-t-kill: .01ms; /* reduced-motion時の実質ゼロ化専用（14-10）。生値の例外はここのみ */ /* 拍（stagger）。3-3: 名前は維持、値は新トークンへ全面置換 */ --ws-stagger-tight: var(--ws-t-8th); /* 60ms 文字単位の連なり */ --ws-stagger: var(--ws-t-4th); /* 120ms カード・行の連なり */ --ws-stagger-loose: var(--ws-t-2nd); /* 240ms 大物の連なり */ /* イージング（そのまま維持。3-3） */ --ws-ease: cubic-bezier(.2, .8, .2, 1); /* 既存。UIの標準 */ --ws-ease-dance: cubic-bezier(.16, 1, .3, 1); /* 入場。長い減速＝着地感 */ --ws-ease-beat: cubic-bezier(.34, 1.56, .64, 1);/* 跳ね。わずかにオーバーシュート */ --ws-ease-loop: cubic-bezier(.45, 0, .55, 1); /* 無限ループ用の対称ease */ /* 移動量（そのまま維持） */ --ws-move-enter: 24px; /* 入場時の translateY（SP） */ --ws-lift: -6px; /* hover時の浮き上がり量 */ --ws-sway: 8px; /* 基準振幅 */ /* --- v2から継承: スクロール連動の作用域トークン（12-1で引き継ぎ確定） -------- */ /* 連動の作用域。animation-range の％を散らさないためのトークン */ --ws-range-in-start: entry 10%; /* 入場の開始点 */ --ws-range-in-end: entry 85%; /* 入場の完了点（＝完全に読める状態になる点） */ --ws-range-out-start: exit 15%; /* 退場の開始点（画面から抜け始めてから） */ --ws-range-out-end: exit 100%; /* 奥行き（motion_spec.md v2 7章） */ --ws-depth-in: .93; /* 入場時の初期スケール */ --ws-depth-out: .96; /* 退場時の到達スケール */ --ws-depth-fade-out: .5; /* 退場時の到達opacity。0にしない（消えると不安になる） */ /* パララックス（motion_spec.md v2 11章）。要素高に対する比率。10%を超えない（酔い対策の上限） */ --ws-parallax: 8%; /* マーキー（motion_spec.md v2 6章）。3枚連結なので1周＝-33.333% */ --ws-marquee-shift: -33.333%; /* --- 12. Aspect Ratio（写真の枠。出典: visual_spec.md 6章／asset_inventory.md実測） ★枠は5種類だけ。素材の実寸をそのまま書く（P-1）。これ以外の aspect-ratio を新設しない（V-0）。 */ --ws-ar-A: 1600 / 700; /* 2.286 横長ワイド：ページ内写真のほぼ全部 */ --ws-ar-A2: 1456 / 620; /* 2.348 同グループ（about/pc・interview/05〜09_pic） */ --ws-ar-B: 480 / 630; /* 0.762 透過切り抜き（人物カード・FORMATION） */ --ws-ar-C: 670 / 800; /* 0.838 縦位置写真（interview/04_main-b） */ --ws-ar-D: 750 / 450; /* 1.667 SP専用素材（about/sp等） */ --ws-ar-D2: 750 / 860; /* 0.872 SP専用素材（recruit/sp/img02,04,05のみ。Dグループの例外） */ --ws-ar-E: 1600 / 488; /* 3.279 超横長（question/pc/img04-05のみ） */ } @media (min-width: 1024px) { :root { --ws-move-enter: 32px; } } /* --- Breakpoint: md (600px〜) -------------------------------------------- 要確認（E-6）: 現行テーマが独自のブレークポイント値を持つ場合はそちらに合わせる。 CSS変数はメディアクエリの条件式に使えないため、この2値（600px/1024px）だけは 数値のリテラルのまま持つ。 --------------------------------------------- */ @media (min-width: 600px) { :root { --ws-gutter: 32px; } } /* --- Breakpoint: lg (1024px〜) ------------------------------------------- */ @media (min-width: 1024px) { :root { --ws-gutter: 40px; --ws-section-gap: var(--ws-space-12); /* 120px */ --ws-section-gap-lg: var(--ws-space-13); /* 160px */ --ws-block-gap: var(--ws-space-8); /* 48px */ --ws-item-gap: var(--ws-space-5); /* 24px */ } } /* --- Breakpoint: xl (1440px〜) / xxl (1728px〜) -------------------------- 出典: visual_spec.md 7-5。大画面ほどガターを広げる（V-5対応・4段階目）。 ------- */ @media (min-width: 1440px) { :root { --ws-gutter: 64px; } } @media (min-width: 1728px) { :root { --ws-gutter: 80px; } }