/* ============================================================================
I.D.Works 住宅サイト C-1統一トンマナ テーマ層 c1-theme.css
----------------------------------------------------------------------------
目的 : 全ページ共通のトンマナ層。ファイル名は C-1 由来だが、
**2026-08-10 クライアント決定により中身は「表現案B（カーサ編集）×赤」へ更新**
（C-1＝design-rules §9 は旧・上書き済み。現行の正典 = design/design-rules.md §10）。
出典 : design/pages/works-detail-proposal.html の B案 × accent1（編集の赤 #c0392b）と
home-proposal.html の B案の実装値を抽出し汎用化。
履歴 : 08-07 C案×赤で新設 → 08-09 無彩色化（赤=図解のみ） → **08-10 B案×赤へ（本版）**
前提 : 読み込み順は global-nav.css → tokens.css → Google Fonts → design-system.css
→ **本ファイル（最後）**。design-system.css の後に読む上書きレイヤー。
方針 : 既存クラスの破壊的変更はしない。追加クラス（.c1-*）＋
`body.c1` スコープの限定的上書きのみ（＝c1-theme を読まないページは不変）。
段階 : Phase 3 / C-1統一トンマナ バッチ1 作成 2026-08-07 design-assistant
注記 : ⚠️＝ディレクター確認事項（報告に記載）
============================================================================ */
:root{
/* --- accent ---
2026-08-10 クライアント決定「表現案B（カーサ編集）×アクセントカラー赤」＝**赤を復活**。
8/09の無彩色化（--c1-accent:#767676）はこの決定により上書き（design-rules §9→§10）。
#c0392b＝編集の赤。白地 5.9:1（小級数ラベルもAA）。
使用箇所は design-rules §10-3 に定義（タイトルサブの英字ラベル／ティック／読解線／
現在地表示／図解）。**面（背景・ボタン塗り）には使わない・1画面1〜3点**の原則は不変。 */
--c1-accent: #c0392b;
/* 図解専用の赤。§10でaccentと同値に戻ったが、図解だけ色を動かす余地を残すため変数は温存 */
--c1-diagram-accent: #c0392b;
/* ==========================================================================
B確定トンマナ タイポスケール（2026-08-10クライアント決定・design-rules §10-2）
--------------------------------------------------------------------------
出典＝works-detail-proposal.html body[data-variant="b"] の実装値
.section__title 40px/.04em ／ .dual-label__en 20px/500/accent ／ .point__title 24px
home-proposal.html body[data-variant="b"] の .section__lead clamp(15,1.35vw,19)
考え方＝**階層はサイズジャンプで作る（太字禁止・500上限は不変）**。
本文15pxを固定したまま見出しを飛ばすことで、ジャンプ率を C案 2.13倍 → **B案 2.67倍** へ。
========================================================================== */
/* [20260821j] 2026-08-21 ディレクター指示「英字赤見出しと、その下の黒字見出しを home.html 基準に」。
home.html は c1-theme.css を読み込まない自己完結ページ（Figma正）で、共有トークン（tokens.css）の
値で組まれている。＝L1見出しは **SP --fs-h2-sm(28px) / 768以上 --fs-h2(32px)・字間 --ls-h2(1.68px)・
ウェイト400**。旧値 clamp(26,2.8vw,40)/.04em/500（2026-08-10 B確定）は本指示で上書き。
※変数を直す方式にした理由: --c1-fs-h2 は共有CSSの .c1 .section__title だけでなく、
20ページのページ内CSS（.article__title / .prop-head__title / .faq-category__title /
.mh-name / .iv-fv__quote / .tel-card__num など＝いずれも同じL1階層）からも参照されている。
変数側を直せば全参照が一斉に追従し、取りこぼしが出ない。 */
--c1-fs-h2: var(--fs-h2-sm); /* L1 セクション見出し = SP28 → 768以上で32 */
--c1-fs-h3: clamp(17px, 1.5vw, 22px); /* L2 小見出し（旧=--fs-h3 18px固定） */
--c1-fs-lead: clamp(15px, 1.35vw, 19px); /* L2' リード */
--c1-fs-label-en: 14px; /* 二層ラベルの英字 = SP14 → 768以上で16（home基準） */
--c1-ls-h2: var(--ls-h2); /* = 1.68px 固定（home基準。旧 .04em） */
/* --- 読み幅（本文の組み） --- */
--c1-measure: 720px; /* 標準の本文ブロック（design-rules §9-1「本文720px基準」） */
--c1-measure-narrow: 640px; /* 宣言文・引用など、意図的に狭く組むブロック */
/* --- C-1 タイポスケール（1ページ原則5段） ---
L1 見出し2 = --fs-h2 / --fs-h2-sm（tokens: PC32 / SP22）
L2 見出し3・リード = --fs-h3（PC18 / SP16）
L3 本文 = --fs-body（15）
L4 キャプション・補足 = --fs-caption（13）
L5 ラベル・注記 = --fs-micro（11） */
--c1-fs-label: var(--fs-micro);
/* --- 段落間隔（「打ち込んだだけ」の解消） --- */
--c1-para-gap: 2.2em;
}
/* ============================================================================
1. 二層ラベル（.c1-label）
----------------------------------------------------------------------------
works-detail-proposal の `.dual-label`（SCENES OF LIVING ／ 暮らしの風景 型）を汎用化。
使い方: セクション見出し（h2.section__title）の直前に置く。
PROCESS
家づくりの進め方
英字はページ内容に即した一般英語のみ。**新しい「用語」を発明しない**
（承認済み英語表記は docs/03 の4種＝LIFE ID / BCID / I.D.Method / Design Translation）。
---------------------------------------------------------------------------- */
.c1-label{display:block;text-align:center;margin-bottom:18px;}
.c1-label__en{
/* 2026-08-10 B確定: 級数を13px固定 → clamp(16,1.5vw,20)（B参照実装=20px）へ引き上げ、
色を**赤（--c1-accent）へ復帰**。＝「タイトルサブの赤文字アクセント」（design-rules §10-3） */
display:block;font-family:var(--ff-en);font-weight:500;
font-size:var(--c1-fs-label-en);letter-spacing:.22em;line-height:1.3;
color:var(--c1-accent); /* ← 編集の赤（design-rules §10-3） */
}
.c1-label__jp{
display:block;font-size:var(--c1-fs-label);letter-spacing:.18em;
color:var(--c-text-note);margin-top:5px;line-height:1.5;
}
.c1-label--left{text-align:left;}
@media(max-width:767px){
.c1-label{margin-bottom:14px;}
.c1-label__en{letter-spacing:.2em;} /* 級数は --c1-fs-label-en のSP値(14px)が効く */
}
/* [20260821j] home基準の768pxブレークポイント。home.html は clamp ではなく
「SP値 → 768px以上で PC値」の切替方式（.section__title 自身と同じ分岐）なので、それに合わせる。 */
@media(min-width:768px){
:root{
--c1-fs-h2: var(--fs-h2); /* 32px */
--c1-fs-label-en: 16px;
}
/* ※密度モードの768px以上の値は、後方の §9 .c1.c1-dense ブロックの直後で指定する。
ここに書くと同一詳細度（0,2,0）で後方の .c1.c1-dense{--c1-fs-h2:24px} に負ける。 */
}
/* ============================================================================
2. キャプション（.c1-cap）＝写真ごと2〜3行の「体験の言語化」
----------------------------------------------------------------------------
先頭に読解線ティック（accent 14×1px）。CB手法2「キャプション主導」。
※本バッチ（20260807c）ではキャプション本文＝新規コピーのため未投入。
文言はweb-writerマター。写真確定後に本クラスで組む。
---------------------------------------------------------------------------- */
.c1-cap{
max-width:var(--c1-measure);margin:14px auto 0;
font-size:var(--fs-caption);line-height:1.9;letter-spacing:var(--ls-1);
color:var(--c-text-sub);text-align:left;
}
.c1-cap::before{
content:"";display:inline-block;width:14px;height:1px;
background:var(--c1-accent);vertical-align:middle;
margin-right:10px;transform:translateY(-1px);
}
.c1-cap--center{text-align:center;}
.c1-cap--plain::before{content:none;} /* ティックなし（1画面3点を超える場合の逃げ） */
/* ============================================================================
3. クレジット行（.c1-credit）＝ design_ / photo_（CB手法6）
----------------------------------------------------------------------------
使い方: design_ ○○photo_ ○○
※当面は社名。個人名の掲載可否はクライアント確認事項。
---------------------------------------------------------------------------- */
.c1-credit{
display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-top:20px;
font-family:var(--ff-en);font-size:var(--c1-fs-label);letter-spacing:.14em;
color:var(--c-text-note);line-height:1.6;
}
.c1-credit--left{justify-content:flex-start;}
/* ============================================================================
4. 本文ブロックの標準組（.c1-prose）＝裸の 連打の解消
----------------------------------------------------------------------------
max-width / 行間 / 段落間隔 / 左揃え を必ず持つ本文コンテナ。
---------------------------------------------------------------------------- */
.c1-prose{
max-width:var(--c1-measure);margin-inline:auto;text-align:left;
font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
}
.c1-prose--narrow{max-width:var(--c1-measure-narrow);}
.c1-prose > p{margin-bottom:var(--c1-para-gap);}
.c1-prose > p:last-child{margin-bottom:0;}
.c1-prose__note{
margin-top:20px;font-size:var(--fs-caption);line-height:1.9;color:var(--c-text-sub);
}
/* ============================================================================
5. 図版・写真枠（ジャンプ率＝「大判 → 小組 → 大判」の縦リズム）
----------------------------------------------------------------------------
.c1-figure--full … 大判（コンテンツ幅いっぱい・16:7）。narrow なセクションでも
section 直下（.section__inner の兄弟）に置けば1480px幅で効く。
.c1-figure--mid … 中判（980px・4:3寄り）
.c1-bleed … section 直下に置いた要素をコンテンツ幅（1480px）で中央に置く箱
※vw を使わない（100vw はスクロールバー分の横スクロールを生むため恒久禁止）。
---------------------------------------------------------------------------- */
.c1-bleed{max-width:var(--w-content);margin-inline:auto;}
.c1-figure{margin:0;}
/* バグ修正 2026-08-10（aboutのOUR VALUES中央ずれ指摘の根本原因・QA発見）:
直前の .c1-figure{margin:0} が同詳細度・後勝ちで .c1-bleed の margin-inline:auto を
打ち消し、.c1-bleed.c1-figure 併用の大判が全ページで左寄せになっていた。
併用時の中央寄せを高詳細度で再確保（対象9ページ: design/house系/performance/realestate/renovation/works） */
.c1-figure.c1-bleed{margin-inline:auto;}
.c1-figure--full,.c1-figure--mid{margin-top:56px;}
.c1-figure--full{width:100%;}
.c1-figure--full > .is-photo,
.c1-figure--full > img{width:100%;height:auto;aspect-ratio:16/7;min-height:0;object-fit:cover;display:block;}
/* ↑ height:auto 追記 2026-08-10: ![]()
の presentational hint が
aspect-ratio:16/7 を無効化するのを防ぐ（実写差し替え時に顕在化するバグの恒久対策） */
.c1-figure--mid{width:100%;max-width:980px;margin-inline:auto;}
.c1-figure--mid > .is-photo,
.c1-figure--mid > img{width:100%;aspect-ratio:16/9;min-height:0;object-fit:cover;display:block;}
/* 未支給スロット（.ph プレースホルダ）は「空の大穴」を作らないよう高さをclampで抑える。
実写真差し替え時は上の aspect-ratio 側が効く。 */
.c1-figure--full > .ph{height:clamp(260px,27vw,430px);min-height:0;}
.c1-figure--mid > .ph{height:clamp(220px,20vw,320px);min-height:0;}
@media(max-width:767px){
.c1-figure--full,.c1-figure--mid{margin-top:40px;}
.c1-figure--full > .is-photo,
.c1-figure--full > img{aspect-ratio:4/3;}
.c1-figure--full > .ph{height:clamp(200px,52vw,260px);}
.c1-figure--mid > .ph{height:clamp(180px,44vw,220px);}
}
/* ============================================================================
6. 余白の「さざなみ」再調整ヘルパ
----------------------------------------------------------------------------
等間隔にしない。大見出しの前＝大きく／関連要素間＝詰める（design-rules §9-2）。
トークン --sp-6/7/8・--sp-sec-sm から選ぶ（新しい数値を発明しない）。
---------------------------------------------------------------------------- */
.c1 .c1-sec--join{padding-top:var(--sp-sec-sm);} /* 直前セクションと一続き＝詰める */
.c1 .c1-sec--close{padding-bottom:var(--sp-sec-sm);} /* 直後セクションと一続き＝詰める */
.c1 .c1-sec--air{padding-top:var(--sp-8);} /* 山場の前＝最大の間 */
.c1 .c1-sec--airb{padding-bottom:var(--sp-8);} /* 山場の直後＝最大の間 */
/* ============================================================================
7. 既存クラスへの限定的上書き（body.c1 スコープ＝c1-theme 未読込ページは不変）
---------------------------------------------------------------------------- */
/* --- 7-1. セクション見出し＝和文500・B確定のジャンプ率（design-rules §10-2） --- */
.c1 .section__title{
/* [20260821ae] 2026-08-21 ディレクター指示「黒字見出しは **500** に揃える」。
20260821j で home 基準として一旦400へ下げたが、本指示で **500へ戻す**。
★docs/22 R09（c1-theme.css 変更禁止）の**明示的な例外**＝ディレクター「B案を許可します」。
20260821j で私が変更した行を元に戻すだけの措置。以後この状態を凍結の基準点とする。
太字(600以上)禁止は不変（design-rules §0/§6-3）。 */
font-weight:500;
/* 2026-08-10 B確定: 級数を --fs-h2（PC32/SP22 固定）→ --c1-fs-h2（clamp 26〜40px）へ。
本文15px据え置きでジャンプ率 2.13倍 → 2.67倍。B参照実装 40px と同値で頭打ち。 */
font-size:var(--c1-fs-h2);
/* 字間＝旧C-1は .08em（720px箱に21文字を1行で収める実測値）。B確定で級数が上がり
1行に収める前提そのものが成立しなくなったため、**B参照実装と同じ .04em** に統一。
長い見出しは2行に折り返す（B案=見出し大きく・キャッチーの既定）。 */
letter-spacing:var(--c1-ls-h2);
/* 字間を広げた分だけ折返し位置が変わるため、和文は文節単位で折り返す
（.hero-intro__catch と同じ手当て。非対応ブラウザは従来どおりの折返し）。
＝「…になる／る」のような1文字残りを防ぐ。 */
word-break:auto-phrase;
}
/* [20260821j] ページ冒頭キャッチも同じ「黒字見出し」なので home基準へ（旧 500 / .12em）。
※ここを揃えないと、セクション見出しが32pxに下がる一方でキャッチが40pxのまま残り、
20260810n で解消した「キャッチ > セクション見出し」の序列崩れが再発する。 */
.c1 .hero-intro__catch{font-weight:500;letter-spacing:var(--ls-h2);} /* [20260821ae] 400→500 */
.c1 .statement__copy{
/* 山場の宣言文＝ページ内で最大の級数（tokens --fs-statement: PC36 / SP22）。
セクション見出し32pxを上回らせて「宣言」のジャンプ率を確保する。 */
font-weight:500;font-size:var(--fs-statement);line-height:1.6;letter-spacing:.1em;
}
/* --- 7-2. リード＝home基準（15px）・720px・左揃え・行間広め --- */
.c1 .section__lead{
font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
max-width:var(--c1-measure);margin-inline:auto;text-align:center;color:var(--c-text-sub);
}
@media(max-width:767px){
.c1 .section__lead{text-align:left;}
}
.c1 .page-hero__lead{
font-size:var(--c1-fs-lead);line-height:1.95;letter-spacing:var(--ls-1);
max-width:var(--c1-measure);margin-inline:auto;text-align:left;color:var(--c-text-sub);
}
.c1 .hero-intro__lead{
font-size:var(--fs-body);line-height:var(--lh-body);letter-spacing:var(--ls-body);
}
/* --- 7-3. 宣言文の本文＝左揃え固定（PCの中央揃えを解除＝可読性と「編集」的な組みへ） --- */
.c1 .statement__body{
max-width:var(--c1-measure-narrow);margin-inline:auto;text-align:left;
}
@media(min-width:768px){
.c1 .statement__body{text-align:left;} /* design-system §statement のPC中央揃えを上書き */
}
.c1 .statement__body > p{margin-bottom:var(--c1-para-gap);}
.c1 .statement__body > p:last-child{margin-bottom:0;}
/* --- 7-4. 本文級数の統合（L3=15px へ寄せる。中間サイズの乱立を解消） --- */
.c1 .feature__text,
.c1 .mel__text,
.c1 .pillar__text,
.c1 .faq__panel-in,
.c1 .faq__panel > p,
.c1 .faq__a{font-size:var(--fs-body);line-height:var(--lh-body);}
/* --- 7-5. 小見出し（L2）＝B確定で clamp(17,1.5vw,22)（B参照実装 .point__title 24px 相当） --- */
.c1 .feature__title,
.c1 .pillar__title,
.c1 .faq__q{font-size:var(--c1-fs-h3);font-weight:500;letter-spacing:var(--ls-2);}
/* --- 7-6. サブメニュー現在地＝下線を accent に（accent適用対象「現在地表示」） --- */
.c1 .sub-nav__link--current{border-bottom-color:var(--c1-accent);}
/* --- 7-7. next-read ラベル＝二層ラベルと同じ字間・accent（画面あたりの点数は1） --- */
.c1 .next-read__label{letter-spacing:.22em;font-size:var(--fs-caption);}
/* 2026-08-10 B確定: 英字ラベルは赤（§10-3）。ただし写真上の白文字版（--hero）は除外＝可読性優先 */
.c1 .next-read:not(.next-read--hero) .next-read__label{color:var(--c1-accent);}
/* ============================================================================
9. 密度モード（.c1-dense）＝文字量の多いページの唯一の逃げ道（design-rules §10-5）
----------------------------------------------------------------------------
性能・品質保証系など本文量が多いページで、ページ固有CSSに px を直書きして
恣意的に詰める運用を禁止する代わりに用意した**規定の1段階**。
使い方:
。効果は「級数を1段落とす＋セクション縦余白を1段詰める」
のみで、色・字間・本文級数（15px）・読み幅（720/640）は標準と同一に保つ。
※2段階目（さらに詰める）は用意しない。足りない場合は情報設計側で分割する。
---------------------------------------------------------------------------- */
.c1.c1-dense{
/* [20260821j] L1が clamp(26-40) → 28/32固定 になったため、密度モードも同じ「1段下」に付け替える。
＝SP24px / 768以上 --fs-h2-sm(28px)。新しい級数は作らず既存トークンの範囲で1段落とす
（2026-08-21 ディレクター判断「密度モードは維持する」）。 */
--c1-fs-h2: 24px;
--c1-fs-h3: clamp(16px, 1.3vw, 19px);
--c1-para-gap: 1.9em;
--sp-6: var(--sp-sec-sm); /* 標準セクション 150px → 108px（SP 88→64） */
--sp-7: 150px; /* 読み物系 180px → 150px */
--sp-8: 180px; /* 宣言直後 220px → 180px */
}
@media(max-width:767px){
.c1.c1-dense{ --sp-7:88px; --sp-8:110px; }
}
/* [20260821j] 密度モードの768px以上の見出し級数＝1段下の28px（--fs-h2-sm）。
上の .c1.c1-dense{--c1-fs-h2:24px} と同一詳細度なので、**この位置（後方）** で上書きする。
＝標準 SP28/PC32 に対し、密度モードは SP24/PC28 で常に1段下を保つ。 */
@media(min-width:768px){
.c1.c1-dense{ --c1-fs-h2: var(--fs-h2-sm); }
}
/* ============================================================================
8. reduced-motion / 印刷 等の配慮
----------------------------------------------------------------------------
本ファイルはアニメーションを持たない（演出は既存レイヤーのまま）。
accent は罫線・文字色のみで面には使わないため、ハイコントラスト環境でも破綻しない。
---------------------------------------------------------------------------- */
@media print{
.c1-label__en,.c1-cap::before{color:var(--c-text);background:var(--c-text);}
}