/* ============================================================================
I.D.Works 住宅サイト デザイントークン tokens.css
----------------------------------------------------------------------------
出典 : Figma トップページPCデザイン
fileKey nYC4MTlFM5CO9n37Vy5Bot / node 1:19630（1680w light・原寸1667×16787）
抽出 : Figma MCP get_variable_defs（Figma変数）＋ get_design_context（実測 computed 値）
方針 : 現行WF（wireframes/home.html の :root ＋ assets/global-nav.css）の
CSS変数体系をそのまま踏襲し、この1ファイルの読み込みだけで
「基調色・フォント・タイポ階層・余白」を上書きできるようにする。
段階 : Phase 3 第1段（トークン化） 作成 2026-07-19 design-assistant
注記 : 値は Figma 実測。⚠️＝ディレクター確認事項（README参照）。
※このファイルは「補助」成果物。最終決定は人間（ブランドディレクター）。
============================================================================ */
:root{
/* ========================================================================
1. カラー ─ 完全アクロマティック（無彩色のみ／彩色アクセントなし）
------------------------------------------------------------------------
Figma「IDW/○○」変数 → WF変数 への対応。
デザインの重要な発見：Figmaトップは色相を一切持たない純グレースケール。
ヒエラルキーは「色の濃淡＋サイズ＋字間＋余白」だけで作られている。
======================================================================== */
/* --- テキスト --- */
--c-text: #1a1a1a; /* Figma IDW/Cod Gray ← WF --c-text 本文・見出し */
--c-text-sub: #666666; /* Figma IDW/Dove Gray ← WF --c-text-sub リード・補足 */
--c-text-note: #888888; /* Figma IDW/Gray ← WF --c-text-note 注記・キャプション */
--c-text-mute: #777777; /* Figma IDW/Boulder （新）ph内テキスト・弱い補足 */
--c-text-label:#555555; /* Figma IDW/Emperor （新）タグ／小ラベル文字 */
/* --- 罫線 --- */
--c-line: #cccccc; /* Figma IDW/Silver ← WF --c-line 標準罫線 */
--c-line-dark: #999999; /* Figma IDW/Dusty Gray ← WF --c-line-dark 濃い罫線（= c/line-dark 変数） */
--c-line-soft: #dddddd; /* Figma IDW/Alto （新）薄い区切り線 */
--c-line-hair: #aaaaaa; /* Figma IDW/Silver Chalice （新）中間トーン罫線 */
/* --- 背景 --- */
--c-bg: #ffffff; /* Figma IDW/White ← WF --c-bg 基本背景 */
--c-bg-sub: #f4f4f4; /* Figma IDW/Wild Sand ← WF --c-bg-sub 副背景（帯） */
--c-bg-soft: #f9f9f9; /* Figma IDW/Alabaster （新）ごく淡い副背景 */
/* --c-bg-wm 削除（2026-07-29 大型WM廃止・参照0） */
--c-bg-95: rgba(255,255,255,.95); /* Figma IDW/White 95% 縮小ヘッダー透過背景 */
/* --- 写真プレースホルダ --- */
--c-ph: #e6e6e6; /* Figma IDW/Mercury ← WF --c-ph 写真ダミー面 */
/* --- ボタン／ダーク面 --- */
--c-btn: #2b2b2b; /* Figma IDW/Mine Shaft ← WF --c-btn 塗りボタン・ダーク面 */
--c-btn-text: #ffffff; /* 塗りボタンの文字 */
--c-btn-line: #cccccc; /* 線ボタンの枠（= Silver）。白地＋細枠＋濃文字が基本形 */
--c-dark: #1a1a1a; /* 反転セクション背景（「in design your identity」帯など）＝Cod Gray */
--c-on-dark: #ffffff; /* 反転面の文字 */
/* ========================================================================
2. タイポグラフィ
------------------------------------------------------------------------
和文 = Noto Sans JP（Regular 400 を基調に単一ウェイト運用）
欧文 = Jost（ExtraLight 200 / Regular 400。英字ラベル・タグライン用）
いずれも Web配信可（ディレクター確認済み＝実フォント名で定義してよい）。
Google Fonts / セルフホスト @font-face を実装時に読み込む（下部コメント参照）。
WF段階では未配信でも fallback で破綻しないスタックにしてある。
------------------------------------------------------------------------
設計思想：ウェイトを上げず「サイズ・字間・余白・色」で見出しを立てる
（AITOHUS型／font-benchmark.md 参照）。太字はほぼ使わない。
======================================================================== */
/* --- ファミリー --- */
/* フォント指定（ディレクター確定 2026-07-27）
英字=Jost／日本語=Noto Sans JP。和欧混植でも英字部分はJostで表示するため、
スタックを Jost（欧文グリフのみ）→ YakuHanJP（約物半角グリフのみ）→ Noto Sans JP の順に。
YakuHanJP: https://yakuhanjp.qranoko.jp/ （CDN読込は各ページ） */
--ff-jp: "Jost","YakuHanJP","Noto Sans JP","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",YuGothic,Meiryo,sans-serif;
--ff-en: "Jost","Century Gothic","Futura","Trebuchet MS",var(--ff-jp); /* 英字ラベル・タグライン */
--ff-base: var(--ff-jp);
/* --- ウェイト（単一ウェイト運用。太字は原則不使用） --- */
--fw-thin: 200; /* Jost ExtraLight（大タグライン） */
--fw-normal:400; /* 本文・見出しとも基本これ */
/* --- サイズ階層（Figma実測。PC基準。SP縮小は各コンポーネントでclamp） ---
display FV大見出し 52px “私たち”を、家にする。
statement 宣言文 36px 探すのは、家になる前の、
h2 セクション見出し(和) 32px （28pxの派生あり）
en-title 英字ラベル(Jost) 32px Case Study / OB Interview …
h3 小見出し 18px （19pxの派生あり）
body 本文 15px 行間2.05
body-sm 小さめ本文 14px
caption キャプション 13px
note 注記 12px
micro ナビ・極小 11px
tagline 大英字タグライン(Jost)50px in design your identity（反転面・白） */
--fs-display: 52px;
--fs-statement:36px;
--fs-h2: 32px;
--fs-h2-sm: 28px;
--fs-en-title:32px; /* Jost Regular */
--fs-tagline: 50px; /* Jost ExtraLight */
--fs-h3: 18px;
--fs-h3-lg: 19px;
--fs-lead: 16px; /* リード文（wp medium 相当） */
--fs-body: 15px; /* ← WF body 15px と一致 */
--fs-body-sm: 14px;
--fs-caption: 13px;
--fs-note: 12px;
--fs-micro: 11px;
/* --- 行間（line-height） ---
本文系は 2.05（Figma Noto Sans JP 標準＝WF line-height:2.05 と一致）。
見出しは詰める。 */
--lh-body: 2.05; /* 15px→30.75 / 14→28.7 / 13→26.65 / 12→24.6 実測一致 */
--lh-lead: 2.0;
/* [20260821cn] ディレクター指摘（2026-08-24）「.hero-intro__catch が少し詰まって見える」。
旧1.31は Figma実測の leading-42（32px→42px）をそのまま入れた値だが、
**和文の実際の字面に対して行送りが足りず、行が重なっていた**。
実測（house.html）: 上の行の下端と次の行の上端が **−4px**＝食い込み。
1.31→−4px ／ 1.40→−1px ／ **1.45→+1px** ／ 1.50→+2px ／ 1.60→+5px
重なりが取れる最小値としてディレクター選択で **1.45** を採用。
このトークンは `.hero-intro__catch` と `.section__title` の両方が参照しているため、
SPで2行以上になる見出し（house.html だけでも6件が−3〜−4px）が同時に解消する。
1行に収まる見出しの見え方は変わらない（ブロック高が数px増えるのみ）。 */
--lh-h2: 1.45; /* 旧1.31（Figma leading-42）＝行が重なるため改訂 */
--lh-h3: 2.05; /* 18px→36.9 */
--lh-statement:2.05; /* 36px→73.8 */
--lh-display: 1.7; /* 52px→88.4 */
--lh-en: 1.31; /* Jost 32px→42 */
--lh-tight: 1.4;
/* --- 字間（letter-spacing）Figma実測トークン化 --- */
--ls-0: 0;
--ls-1: 0.6px; /* 英小ラベル */
--ls-body: 0.96px; /* 本文（0.88〜1.12の中央） */
--ls-2: 1.12px; /* 小見出し・ナビ和文 */
--ls-nav: 1.4px; /* ナビ大（HOME 等 14px） */
--ls-h2: 1.68px; /* セクション見出し・英字ラベル */
--ls-wide: 3.12px; /* FV大見出し */
--ls-xwide: 7.2px; /* 宣言文 */
/* --ls-wm 削除（2026-07-29 大型WM廃止・参照0） */
/* ========================================================================
3. 余白スケール
------------------------------------------------------------------------
微小〜中間は WF スケールと Figma（sp/1=8, sp/3=24, sp/4=40）が一致。
セクション縦リズムは Figma 実測 py-150px を基準に再設定（下記 --sp-sec）。
WF の「さざなみ」リズム（山場は前後を広く）は --sp-sec-lg で継承。
======================================================================== */
--sp-1: 8px; /* Figma sp/1 = WF --sp-1 */
--sp-2: 16px; /* WF --sp-2（Figma wp normal 16 に一致） */
--sp-3: 24px; /* Figma sp/3 = WF --sp-3 */
--sp-4: 40px; /* Figma sp/4 = WF --sp-4 */
--sp-5: 56px; /* Figma p-56（gnav/h も56）※WFは64。Figma寄せで56 */
/* セクション縦リズム（WFが .section 系で消費する変数名。Figma実測 py-150 を基準に
「さざなみ」＝標準150／読み物・山場前180／宣言直後220 で緩急をつける。
この3つがWFの --sp-6/7/8 を上書きし、全セクションの縦余白を design 版に切替える） */
--sp-6: 150px; /* 標準セクション（Figma py-150 実測） */
--sp-7: 180px; /* 読み物系・山場前（大きめの間） */
--sp-8: 220px; /* 宣言セクション直後の最大の間 */
/* 別名 */
--sp-sec-lg: var(--sp-8);
--sp-sec-sm: 108px; /* Figma p-108（詰めたいセクション） */
/* [20261027b] コンテンツページのセクション上下余白を統一（ディレクター指示 2026-10-27）。
基本＝上下120px。同一背景が続くとき（白→白／グレー→グレー）は前のセクションの下だけ
--sp-sec-join-bottom に詰める（次の赤ラベルまでの合計＝120+40=160）。
合計を120にしたい場合は --sp-sec-join-bottom を 0px にする（この1行だけで変わる）。
※--sp-6/7/8・--sp-sec-sm は内側の余白にも使うため値は変えない。 */
--sp-sec: 120px;
--sp-sec-join-bottom: 40px;
/* コンポーネント内 gap（Figma item-spacing 実測） */
--gap-1: 6px;
--gap-2: 10px;
--gap-3: 14px;
--gap-4: 20px; /* = 12分割グリッド gap（レイアウト基盤と一致） */
--gap-5: 48px;
--gap-6: 108px;
/* ========================================================================
4. レイアウト（WF レイアウト基盤と一致：確定値）
======================================================================== */
--w-content: 1480px; /* コンテンツ最大幅（ディレクター確定） */
--pad-side: 3vw; /* 1480px未満は左右3%可変（global-nav.css と同値） */
--grid-cols: 12; /* 12分割 */
--grid-gap: 20px; /* gap 20px（= --gap-4） */
--gnav-h: 56px; /* Figma gnav/h＝ヘッダー基準高。実際は --gnav-h をJSで実測上書き */
/* ========================================================================
5. ボタン・罫線・角丸・影
======================================================================== */
/* 線（アウトライン）ボタン＝基本形：白地・細枠・濃文字・右端に横棒32×1px（WF既存仕様） */
--btn-min-w: 360px; /* Figma w-360 / WF min-width:360px 確定 */
--btn-pad-y: 15px; /* Figma py-15 */
--btn-pad-x: 64px; /* Figma px-65≒WF pad64。統一で64 */
--btn-dash-w: 32px; /* 枠内右端の横棒 幅 */
--btn-dash-h: 1px;
--bd: 1px; /* Figma stroke-weight/1（標準罫線幅） */
--bd-hair: 0.5px; /* Retina ヘアライン（Figma 0.18〜0.59） */
--radius: 0; /* 基本は角丸なし（シャープな面） */
--radius-sm: 2px; /* ごく僅かな角丸（タグ等） */
--radius-pill: 999px; /* Figma corner-radius/999（bizピルボタンのみ） */
--shadow-none: none; /* デザインは基本フラット（Figmaに影の定義なし） */
--shadow-soft: none; /* 影を使う場合の枠。既定は無効＝shadowlessが正 */
}
/* デスクトップ拡張：セクション縦リズムは Figma が既にPC値。
SP（〜767px）ではセクション余白と大見出しを縮める。 */
@media (max-width:767px){
:root{
--sp-6: 88px; /* SPセクション縦（WFのSPレイアウト＋新トークン＝ディレクター方針） */
--sp-7: 110px;
--sp-8: 130px;
--sp-sec-sm: 64px;
--sp-sec: 72px; /* [20261027b] 150→88 の比率(0.59)を120へ当てた値 */
--sp-sec-join-bottom: 24px;
--fs-display: 30px; /* SPは新トークン＋WFのSPレイアウト（ディレクター方針） */
/* [20260821ae] 2026-08-21 ディレクター指示「宣言文とセクション見出しの序列をSPでも合わせる」。
旧22pxは SP の --fs-h2(22px) と対で決めた値だが、20260821j で
.c1 .section__title が --fs-h2-sm(28px) を使うようになり、SPだけ
「宣言文22px < セクション見出し28px」と序列が逆転していた（実測）。
PCの比率（36/32＝1.125）を SP に当てると 28×1.125＝31.5 → 既存トークンと同じ **32px** とした。
新しい級数は増やさない（design-rules §10-2「中間サイズを新設しない」）。
---
[20260821cm] ディレクター指示（2026-08-24）「SP時28pxにして下さい」。32px → **28px**。
実測390px: 32pxでは「「“私たち”を、家にす／る。」」と2行に割れていたが、28pxで**1行に収まる**。
⚠️これにより SPでは 宣言文28px ＝ L1セクション見出し(--fs-h2-sm 28px) と**同値**になる
（PCは 宣言36px ＞ L1 32px のまま差が残る）。ディレクターへ報告済み。
このトークンを参照しているのは c1-theme.css の `.c1 .statement__copy` のみ＝
**about.html / consultation.html / house.html の宣言コピー3箇所**に同時に効く（＝指示どおり統一）。 */
--fs-statement:28px;
--fs-h2: 22px;
/* [20261029d] ディレクター指示「SPの見出しは24px」（2026-10-29）。28px では 375px で1行12〜13字しか入らず、
冒頭キャッチやセクション見出しが3〜4行に割れ・最終行が1〜2字になる見出しが多かった（主要25ページ実測＝8件）。
SP の L1 見出し（.c1 .section__title／.hero-intro__catch ほか --fs-h2-sm を使う見出し）がすべて24px になる。
768px以上は従来どおり（PC32px・密度モード28px）。宣言文（--fs-statement 28px）は見出しより大きいまま。 */
--fs-h2-sm: 24px;
--fs-en-title:24px;
--fs-tagline: 30px;
--fs-h3: 16px;
}
}
/* ============================================================================
Webフォント読み込み（実装時に有効化）
----------------------------------------------------------------------------
ディレクター確認済み＝Noto Sans JP / Jost とも Web配信可。
WF段階ではシステムフォント fallback（上の --ff-jp / --ff-en 末尾）で表示。
本実装では下記いずれかを で読み込む：
● Google Fonts（最短）:
● セルフホスト（表示速度・GDPR配慮）: woff2 を用意し @font-face 定義。
※ Jost は Regular(400) と ExtraLight(200)、Italic（Jost Light Italic を
Figmaで使用＝タグライン）も必要。Noto Sans JP は 400 主体（500 予備）。
============================================================================ */
/* ----------------------------------------------------------------------------
基本タイプの適用ヘルパ（design/pages 用。任意で使用）
WF側の body 定義を上書きしたい場合のユーティリティ。
---------------------------------------------------------------------------- */
body{
font-family: var(--ff-base);
color: var(--c-text);
background: var(--c-bg);
font-size: var(--fs-body);
line-height: var(--lh-body);
letter-spacing: var(--ls-body);
}