/* ============================================================ tokens.css — 株式会社羽馬 採用HP プロトタイプ 参考サイトの実測値ベース（指示書 §6-1） ★このファイルは gen-tokens.js が生成する。直接編集しないこと。 値を変える時は gen-tokens.js の実測テーブルを直し、再生成する。 (node gen-tokens.js) ■ 数値の出どころ（目測ゼロ・すべて getComputedStyle 実測 / §12-3） - reference/measure-nolux.json … luxy.js を無効化して採った素の縦位置・余白 ※ luxy が #luxy に transform を掛けるため、素の tokens.json の sections[].top は使えない（負値になる）。offsetTop チェーンで採り直した。 - reference/measure2.json … ファーストビュー・ヘッダー・「…」ボタン - reference/color-map.json … 全色の OKLCH 青変換（recolor.js） - reference/src/style.css … 参考サイトの実ソース（宣言値の突合） ■ clamp() の作り方 SP=390px / PC=1440px の実測値を両端に厳密一致させ、間は線形補間。 生成時に 390/1440 で評価して検算済み（全項目 OK）。 参考サイト自身は 950/951px でハードに切り替わり、SERVICE 見出しが 950px:151.8px → 951px:116px と 36px 飛ぶ（＝元サイト側のカクつき）。 §7-2「clamp()でPC/SPを繋ぐ。ブレークポイントでのカクつきを減らす」に従い ここは連続にしている。両端の実測値は一致するため再現度は落ちない。 ============================================================ */ :root{ /* ---------- Color ---------- §6-2 の OKLCH 色相変換の結果。L(明度)・C(彩度)は元のまま、H(色相)だけ青へ。 ベタ書き禁止（§7-1）。全部ここから引くこと。 ※ 色域の都合で C が落ちる色がある: H=215 の sRGB 最大彩度は L≈0.80 が頂点で、 黄(L.866 C.171)と同じ彩度の青は物理的に存在しない。詳細は color-map.json。 */ --bg: #ffffff; /* 背景（body / bg_contents / footer） ← 元 #ffffff */ --surface: #eef5fc; /* SERVICE 背面ウォーターマークの面 ← 元 #f4f4f4 */ --ink: #2d3237; /* 本文インク・濃色面 ← 元 #303133 */ --ink-invert: #ffffff; /* 反転文字（動画・写真の上） ← 元 #ffffff */ --black: #000000; /* scroll-l の罫線と文字 ← 元 #000000 */ --accent: #76e5ff; /* ★テーマ色。L・H 完全維持。--ink 上で 8.89:1 ← 元 #F5D124 */ --accent-ink: #008197; /* （保険）白地にアクセント文字を置く時のみ。参考サイトに該当箇所なし ← L-0.31 / 4.58:1 */ --muted: #8d939a; /* ボーダー（円・左罫）と disabled 文字。本文には未使用 ← 元 #939292 */ --copyright-ink: #71777d; /* ★v4: footer copyright 用。白地 4.5:1（--muted の L を下げただけ・色相維持） */ --scroll-sub: #70767c; /* scroll-l のサブ文字 ← 元 #7b7b7b / L-0.02 調整 4.59:1 */ --line: #d3dae1; /* ボーダー ← 元 #d4dade */ --line-soft: #bac0c7; /* ボーダー（弱） ← 元 #bcbfcb */ --pill-bg: #dbe2e9; /* gnav 最終ピル（Contact）の背景 ← 元 #e1e1e1 */ --deco-line: #a7adb4; /* scroll-l のアニメーション罫線 ← 元 #acacac */ --shadow-color: #90969c; /* list--service の box-shadow ← 元 #959595 */ --surface-form: #edf3fa; /* フォーム入力の面 ← 元 #f0f2fa */ --link: #0079cf; /* リンク（元から青） ← 元 #2379dd */ --danger: #008298; /* エラー文字 ← 元 #ce4242 */ /* v6-② BBQ演出の色（style.css はこれらを var() 参照＝ベタ書きゼロを維持） */ --grad-skewer-done: linear-gradient(90deg, transparent 0 4%, #2c79a2 8%, #7fc4dc 25%, #2c79a2 50%, #7fc4dc 75%, #2c79a2 92%, transparent 96%); --grad-skewer-real: linear-gradient(90deg, transparent 0 4%, #b98f4e 8%, #dcbd7d 22%, #c39c56 50%, #dcbd7d 78%, #b98f4e 92%, transparent 96%); --shadow-bbq: 0 6px 10px rgba(11, 28, 37, 0.30); --shadow-bbq-sm: 0 1px 2px rgba(11, 28, 37, 0.35); --logo-halo: rgba(0, 0, 0, 0.55); /* ★参考に無い追加。実ロゴを無加工で成立させるための影（ロゴ自体は不変） */ --logo-halo-soft: rgba(0, 0, 0, 0.38); /* ★参考に無い追加。上記の外側の柔らかい影 */ --logo-filter: drop-shadow(0 0 1px var(--logo-halo)) drop-shadow(0 1px 4px var(--logo-halo-soft)); /* ★A-4: 濃色1色ロゴが届いたら `none` にするだけで参考の設計に戻る（logo.png も差し替え） */ --hero-text: var(--ink); /* ★Phase E 案B: ヒーロー中央ロックアップの文字色。案Aに戻すなら var(--ink-invert) */ --hero-scrim-0: rgba(0, 0, 0, 0.06); /* ★Phase E 案B: スクリムほぼ透明（案Aは 0.50） */ --hero-scrim-1: rgba(0, 0, 0, 0.05); /* ★Phase E 案B（案Aは 0.48） */ --hero-scrim-2: rgba(0, 0, 0, 0.03); /* ★Phase E 案B（案Aは 0.30） */ --hero-scrim-3: rgba(0, 0, 0, 0.01); /* ★Phase E 案B（案Aは 0.12） */ /* 半透明（アルファは維持し RGB だけ色相変換） */ --dot: rgba(255, 255, 255, 0.8); /* drawer__btn の「…」ドット ← 元 同値（白は L=1 で彩度が乗らない） */ --dot-border: rgba(255, 255, 255, 0.4); /* drawer__btn の円ボーダー ← 元 同値 */ --overlay: rgba(0, 0, 0, 0.5); /* drawer 背景オーバーレイ ← 元 同値（黒は L=0 で彩度が乗らない） */ --overlay-soft: rgba(0, 0, 0, 0.3); /* オーバーレイ（弱） ← 元 同値 */ --shadow: 0 0 20px rgba(0, 0, 0, 0.15); /* .box_shadow ← 元 同値 */ --shadow-service: 0 0 20px -5px var(--shadow-color); /* .list--service ← 元 0px 0px 20px -5px #959595 */ /* ---------- Type ---------- 参考サイトのフォントは Google Fonts のみ＝全て無料・商用可（有料ゼロ / §8-5）。 ★重要な実測事実: 和文は M PLUS 1p では描かれていない。OSのフォールバックで描かれている。 - 元CSS の指定は "M PLUS 1"、Google Fonts が配るファミリー名は "M PLUS 1p"。 名前が1文字違うので **絶対にマッチしない**。 - 裏取り: reference/assets.json のネットワークログで、実際にDLされた woff2 は Poppins(400/700) と Pacifico の3本のみ。**M PLUS 1p は一度もDLされていない。** - つまり参考サイトの和文の見た目 ＝ 游ゴシック体 / YuGothic / ヒラギノ角ゴ（＝閲覧環境のOSフォント）。 ★従ってこのスタックは元のまま1バイトも変えない（"M PLUS 1" の綴りも含む）。 ここで "M PLUS 1p" に「直す」と和文の書体が元と変わり、再現に失敗する（§1・§12-1）。 元サイトのバグに見えるが、結果として出ている見た目こそが再現対象。 ☆ただし からは M+PLUS+1p を外してよい（どうせ使われず落ちてもいない＝ 描画は1pxも変わらないまま、無駄な接続とCSSが減る）。読み込むのは Poppins と Pacifico だけ。 */ --font-body: "Poppins", "M PLUS 1", "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic Medium", BlinkMacSystemFont, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif; --font-display: "Pacifico", cursive; /* .mv_logo 周辺の筆記体（本体ロゴは SVG） */ /* font-size（SP390 / PC1440 の実測を両端に持つ clamp） */ --fs-logo: 28px; /* header h1.logo（縦組みロゴ） */ --fs-hero-en: clamp(20px, calc(16.286px + 0.9524vw), 30px); /* mv_subtit p:first-of-type / 元CSS clamp(30px,1.8vw,50px)＋SP上書き */ --fs-hero-ja: clamp(13px, calc(11.945px + 0.2705vw), 15.84px); /* mv_subtit p（和文サブ）/ 元CSS clamp(15px,1.1vw,25px) */ --fs-h1-company: clamp(38px, calc(25.371px + 3.2381vw), 72px); /* section--company .section--tit / PC 5vw・SP 3.8rem */ --fs-h1-recruit: clamp(32px, calc(19.282px + 3.261vw), 66.24px); /* section--recruit .section--tit / PC 4.6vw・SP 3.2rem */ --fs-h1-contact: clamp(40px, calc(32.571px + 1.9048vw), 60px); /* section--contact .section--tit / PC 6rem・SP 4rem */ --fs-h1-topics: 60px; /* section--topics .section--tit.sp / 6rem（PCは縦組み .pc 版） */ --fs-display-sv: clamp(70px, calc(30.747px + 10.0648vw), 175.68px); /* SERVICE one_letter / PC 12.2vw・SP max(7rem,16vw) */ --fs-display-wk: clamp(54.6px, calc(9.627px + 11.5314vw), 175.68px); /* WORKS one_letter / PC 12.2vw・SP 14vw */ --fs-h4: clamp(15.84px, calc(16.059px + -0.0152vw), 16px); /* tit_sub / PC max(1.5rem,1.1vw)・SP 1.6rem（SPの方が大きい） */ --fs-body: 14px; /* body / .txt 本文 1.4rem */ --fs-body-mv: clamp(11.52px, calc(12.178px + -0.0457vw), 12px); /* mainvisual 内 .txt / PC max(1.1rem,0.8vw) */ --fs-caption: 12px; /* .date キャプション 1.2rem */ --fs-label: 10px; /* .category ラベル 1rem */ --fs-lead: 10px; /* .simple_sentence リード 1rem */ --fs-nav: 14px; /* header gnav a 1.4rem */ --fs-btn: 12px; /* btn_contact a / gnavピル 1.2rem */ --fs-scroll: 11px; /* .scroll-l p 1.1rem */ /* line-height（実測） */ --lh-body: 1.8; /* body 25.2/14 = 1.8 */ --lh-tit: 1.2; /* .section--tit 共通 */ --lh-hero-en: 1.2; /* mv_subtit p:first 36/30 */ --lh-display-sv: 0.75; /* SERVICE one_letter（131.76/175.68） */ --lh-display-wk: 1; /* WORKS one_letter（175.68/175.68） */ --lh-lead: 1.6; /* .simple_sentence 16/10 */ --lh-label: 1; /* .category 10/10 */ --lh-flat: 1; /* .scroll-l p 11/11 */ /* letter-spacing: 参考サイトは letter-spacing を一切指定していない（全要素 normal）。 代わりに body で font-feature-settings:"palt" 1（和文の詰め）を効かせている。 */ --ls-base: normal; --font-feature: "palt" 1; /* ---------- Layout ---------- */ --gutter: clamp(10px, calc(-16px + 6.6667vw), 80px); /* section--inner の片側余白 / PC calc(100%-160px)・SP calc(100%-20px) */ --gutter-works: clamp(10px, calc(-16px + 6.6667vw), 80px); /* section--works .section--inner の padding 左右 */ --inner-w: calc(100% - (var(--gutter) * 2)); /* .section--inner の実体 */ --bp: 950px; /* 唯一のブレークポイント（max-width:950 / min-width:951） */ --radius-card: 20px; /* .box_shadow / company_policy */ --radius-pill: 20px; /* gnav ピル / btn_contact */ --radius-round: 30px; /* drawer__btn--inner（60px 円） */ /* ---------- Space（セクション縦余白のリズム） ---------- */ --space-mv: 100vh; /* .mainvisual = 100vh（実測は各VPの高さと一致） */ --space-company-pt: clamp(10px, calc(2.571px + 1.9048vw), 30px); /* .section--company padding-top */ --space-topics-pt: clamp(0px, calc(82.286px + -5.7143vw), 60px); /* .section--topics .section--inner padding-top（SPのみ） */ --space-topics-pb: clamp(50px, calc(12.857px + 9.5238vw), 150px); /* .section--topics padding-bottom */ --space-service-mt: clamp(-28.8px, calc(57.326px + -5.981vw), 34px); /* .section--service margin-top / PC -2vw・SP +34px（符号が逆転） */ --space-works-tit-mt: clamp(422px, calc(375.497px + 11.9238vw), 547.2px); /* .section--works .section--tit margin-top / PC 38vw・SP 50vh */ --space-works-tit-mb: clamp(-28.8px, calc(-0.535px + -1.9629vw), -8.19px); /* .section--works .section--tit margin-bottom / PC -2vw・SP -2.1vw */ --space-recruit-pt: 30px; /* .section--recruit padding-top */ --space-contact-py: clamp(85px, calc(57.737px + 6.9905vw), 158.4px); /* .section--contact .section--inner padding / PC 11vw・SP 85px */ --space-footer-pt: clamp(67px, calc(54.743px + 3.1429vw), 100px); /* footer padding-top */ --space-footer-pb: clamp(17px, calc(12.171px + 1.2381vw), 30px); /* footer padding-bottom */ --space-tit-mb-company: clamp(20px, calc(12.571px + 1.9048vw), 40px); /* company .section--tit margin-bottom */ --space-tit-mb-recruit: clamp(30px, calc(22.571px + 1.9048vw), 50px); /* recruit .section--tit margin-bottom */ --space-tit-mb-contact: 30px; /* contact .section--tit margin-bottom */ /* ---------- Motion（実測した duration / easing / delay / stagger） ---------- */ --dur-base: 0.3s; /* a / logo / gnav / category のホバー */ --dur-fade: 1000ms; /* .fadein / .fadeinAbove（translate 60px → 0） */ --dur-mask-slow: 1.8s; /* company の mask_tit（左右スライド） */ --dur-mask: 1s; /* recruit の mask_tit / one_letter の1文字 */ --dur-cursor: 0.6s; /* #mouse-stalker の追従 */ --dur-cursor-dot: 0.3s; /* #mouse の追従 / stalker のホバー拡大 */ --dur-video-fade: 0.6s; /* service 到達で video_box が opacity 0 へ */ --dur-grid: 0.8s; /* .grid_box / thumb / works_caption */ --stagger-letter: 0.08s; /* one_letter の1文字ごとの遅延（nth-child 2..7 で 0.08→0.48） */ --stagger-grid: 0.1s; /* .list--grid の grid_box nth-of-type（0.1→0.6） */ --ease-mask: cubic-bezier(0.215, 0.61, 0.355, 1); /* mask_tit / one_letter */ --ease-parallax: cubic-bezier(0, 0, 0, 0.1); /* simpleParallax の transition */ --ease-cursor: cubic-bezier(0.2, 1.01, 0.6, 1); /* #mouse */ --ease-stalker: cubic-bezier(0.4, 1, 0.95, 1); /* #mouse-stalker */ --ease-base: ease; /* 上記以外は全て ease（実測） */ /* .fadein の初期変位（実測） */ --fadein-y: 60px; --fadein-y-above: -60px; /* .fadeinAbove */ --letter-y: 105%; /* .one_letter span の初期 translate */ --mask-x: 110%; /* .mask_tit の初期 translate（親は -110%） */ /* パララックス（common.js の simpleParallax 設定＝実測値） */ --parallax-bg-delay: 1.2; /* .bg_parallax_inner scale なし */ --parallax-img-scale: 1.4; /* .parallax_img delay 2.2 */ --parallax-watch-scale: 1.6; /* .parallax_img_watch delay 2.4 */ } /* ============================================================ SP（<=950px）で符号・向きが変わるものだけ上書き。 clamp() で連続にできない「向きが逆」の値はここで切り替える。 ============================================================ */ @media screen and (max-width: 950px){ :root{ /* .section--service の margin-top は PC が負(-2vw)・SP が正(+34px)＝連続にできない */ --space-service-mt: 34px; /* .section--works .section--tit の margin-top は PC が vw・SP が vh 基準 */ --space-works-tit-mt: 50vh; } } /* ============================================================ アクセシビリティの最低ライン（§7-3）。トークン側で担保しておく。 ============================================================ */ @media (prefers-reduced-motion: reduce){ :root{ --dur-base: 0.01ms; --dur-fade: 0.01ms; --dur-mask-slow: 0.01ms; --dur-mask: 0.01ms; --dur-cursor: 0.01ms; --dur-cursor-dot: 0.01ms; --dur-video-fade: 0.01ms; --dur-grid: 0.01ms; --stagger-letter: 0s; --stagger-grid: 0s; --fadein-y: 0px; --fadein-y-above: 0px; --letter-y: 0%; --mask-x: 0%; } }