/* ==========================================================================
   デザイントークン（Figma 202610_TRUSS の Variables・テキストスタイルと同じ名前）
   - 全サイト（コーポレート・採用・塗装・防水・かなさホーム・TEYLL）で読み込む（inc/setup.php）
   - 色・余白・角丸の変数名は Figma の WEB の Code syntax（var(--color-text-primary) など）。2026-10-02 に Figma から写した
   - 色の Primitives は直接使わない。画面ではセマンティック（--color-* / --kanasa-* / --teyll-*）を使う
   - 文字はテキストスタイルごとに --fs-*（大きさ）・--ls-*（字間）・--text-*（font の一括指定）
       使い方: font: var(--text-h2); letter-spacing: var(--ls-h2);
   - SP（767px 以下）は、余白（Spacing の SP モード）と文字の大きさ（SP/* のテキストスタイル）を下の @media で上書きする
   ========================================================================== */

:root {
	/* ---------- Primitives（Figma: Primitives） ---------- */
	--blue-50: #f0f4fa;
	--blue-100: #dfe8f5;
	--blue-200: #bccde9;
	--blue-300: #8da9d6;
	--blue-400: #5c82c0;
	--blue-500: #3a67b0;
	--blue-600: #2956a3; /* TRUSS BLUE（ブランドカラー） */
	--blue-700: #214785;
	--blue-800: #1a3867;
	--blue-900: #12284a;
	--blue-600-a10: rgb(41 86 163 / 10%); /* TRUSS BLUE の 10%（塗装・防水の影の色） */
	--navy-700: #3d5666; /* 2026-10-02 法人ページ（Figma 09 Trial）で足した。濃紺の面の上の線 */
	--navy-800: #29414f;
	--navy-900: #1e3340;
	--navy-950: #152530;
	--neutral-0: #ffffff;
	--neutral-50: #f7f8fa;
	--neutral-100: #eef0f3;
	--neutral-200: #e1e4e9;
	--neutral-300: #c9ced6;
	--neutral-400: #9da3ad;
	--neutral-450: #8f959f; /* 2026-10-03：入力欄の枠に使う。白地でちょうど 3:1（TEYLL） */
	--neutral-500: #666d79; /* 2026-10-02 監視役：淡い地 #F7F8FA の上でも AA（4.9:1）になるよう少し濃く（元 #6E7581） */
	--neutral-600: #4f5560;
	--neutral-800: #333333;
	--neutral-900: #1f2329;
	--red-500: #f74540;
	--red-600: #d7322c; /* CTA（白文字で AA を満たすため #F74540 より濃くしている） */
	--red-700: #b92a25;
	--green-500: #419766;
	--sky-50: #f2f7fc;
	--sky-100: #c9e0f5;
	--sky-400: #70b7ee;
	--teal-300: #88cccc;
	--kanasa-green-100: #eef7ec;
	--kanasa-green-300: #cee6ca;
	--kanasa-green-500: #82c575;
	--kanasa-green-700: #2e7d4f;
	--kanasa-yellow-400: #f2be51;
	--kanasa-yellow-600: #ebaf12;
	--kanasa-cream: #fcf8f0;
	--kanasa-ink: #404040;
	--kanasa-pink: #e0318a;
	--teyll-navy-900: #233349;
	--teyll-navy-700: #3a4a63;
	--teyll-green-500: #57ac00;
	--teyll-green-700: #3d7413;
	--teyll-purple-500: #8156a1;
	--teyll-purple-50: #f3eef7;
	--teyll-sky-500: #57c2e4;
	--teyll-sky-50: #e8f6fb;
	--teyll-yellow-400: #ffe200;
	--teyll-yellow-600: #e5c700;
	--teyll-yellow-50: #fffadb;
	--teyll-gray-50: #f4f6f9;
	--teyll-red-600: #c32b2b;
	--teyll-indigo-600: #2c4190; /* TEYLL の CTA（ロゴのインディゴ） */
	--teyll-indigo-700: #22346f;

	/* ---------- Color（コーポレート・採用・塗装・防水。Figma: Color） ---------- */
	--color-bg-canvas: var(--neutral-0);
	--color-bg-subtle: var(--neutral-50);
	--color-bg-muted: var(--blue-50);
	--color-bg-brand: var(--blue-600);
	--color-bg-brand-strong: var(--blue-800);
	--color-bg-inverse: var(--navy-900);
	--color-bg-inverse-raised: var(--navy-800);
	--color-bg-inverse-deep: var(--navy-950); /* 法人ページのヘッダー・フッター・信頼の帯 */
	--color-bg-footer: var(--navy-950);
	--color-bg-stage-top: var(--sky-100); /* 家の絵の舞台（空のグラデーション）の上。カラーシミュレーション */
	--color-bg-stage-bottom: var(--sky-50); /* 同じグラデーションの下 */
	--color-text-primary: var(--neutral-800);
	--color-text-secondary: var(--neutral-600);
	--color-text-tertiary: var(--neutral-500);
	--color-text-brand: var(--blue-600);
	--color-text-on-brand: var(--neutral-0);
	--color-text-on-brand-muted: var(--blue-200);
	--color-text-accent: var(--teal-300);
	--color-text-cta: var(--red-600);
	--color-text-navy: var(--navy-900); /* 法人ページの見出し */
	--color-border-default: var(--neutral-200);
	--color-border-strong: var(--neutral-400);
	--color-border-brand: var(--blue-600);
	--color-border-on-brand: var(--blue-400);
	--color-border-on-inverse: var(--navy-800);
	--color-border-on-inverse-strong: var(--navy-700); /* 濃紺の面の上の区切り線（法人ページ） */
	--color-border-input: var(--neutral-500); /* 入力欄の枠（白地で 5.3:1。法人向けのお問い合わせ） */
	--color-action-primary: var(--blue-600);
	--color-action-primary-hover: var(--blue-700);
	--color-action-cta: var(--red-600);
	--color-action-cta-hover: var(--red-700);
	--color-business-paint: var(--blue-600);
	--color-business-care: var(--green-500);
	--color-business-it: var(--sky-400);
	--color-shadow-brand: var(--blue-600-a10); /* 浮かせる箱の影の色（塗装・防水） */

	/* ---------- かなさホーム（Figma: Kanasa） ---------- */
	--kanasa-bg-canvas: var(--kanasa-cream);
	--kanasa-bg-surface: var(--neutral-0);
	--kanasa-bg-green: var(--kanasa-green-500);
	--kanasa-bg-green-soft: var(--kanasa-green-100);
	--kanasa-bg-green-strong: var(--kanasa-green-700);
	--kanasa-bg-yellow: var(--kanasa-yellow-400);
	--kanasa-text-primary: var(--kanasa-ink);
	--kanasa-text-green: var(--kanasa-green-700);
	--kanasa-text-on-green: var(--neutral-0);
	--kanasa-text-secondary: var(--neutral-600);
	--kanasa-text-pink: var(--kanasa-pink);
	--kanasa-border-default: var(--kanasa-green-300);
	--kanasa-border-strong: var(--kanasa-green-700);
	--kanasa-action-primary: var(--kanasa-green-700);
	--kanasa-action-accent: var(--kanasa-yellow-400);

	/* ---------- TEYLL（Figma: TEYLL） ---------- */
	--teyll-bg-canvas: var(--neutral-0);
	--teyll-bg-subtle: var(--teyll-gray-50);
	--teyll-bg-navy: var(--teyll-navy-900);
	--teyll-bg-green: var(--teyll-green-500);
	--teyll-bg-purple-pale: var(--teyll-purple-50);
	--teyll-bg-sky-pale: var(--teyll-sky-50);
	--teyll-bg-yellow-pale: var(--teyll-yellow-50);
	--teyll-text-primary: var(--teyll-navy-900);
	--teyll-text-secondary: var(--teyll-navy-700);
	--teyll-text-on-dark: var(--neutral-0);
	--teyll-text-link: var(--teyll-indigo-600);
	--teyll-accent-purple: var(--teyll-purple-500);
	--teyll-accent-sky: var(--teyll-sky-500);
	--teyll-accent-yellow: var(--teyll-yellow-400);
	--teyll-accent-yellow-deep: var(--teyll-yellow-600);
	--teyll-accent-green: var(--teyll-green-500);
	--teyll-accent-indigo: var(--teyll-indigo-600);
	--teyll-border-default: var(--neutral-200);
	--teyll-border-input: var(--neutral-450); /* 入力欄・選択肢の枠（白地で 3.0:1。2026-10-03 ユーザー決定） */
	--teyll-action-primary: var(--teyll-navy-900);
	--teyll-action-cta: var(--teyll-indigo-600);
	--teyll-action-cta-hover: var(--teyll-indigo-700);

	/* ---------- Spacing（Figma: Spacing の PC モード。SP は下の @media） ---------- */
	--space-2xs: 4px;
	--space-xs: 8px;
	--space-sm: 12px;
	--space-md: 16px;
	--space-lg: 24px;
	--space-xl: 32px;
	--space-2xl: 40px;
	--space-3xl: 48px;
	--space-4xl: 64px;
	--space-5xl: 80px;
	--space-6xl: 120px;
	--space-7xl: 160px;
	/* 塗装・防水（案B）のセクションの余白（Figma: space/paint/*。SP は下の @media） */
	--space-paint-section: 112px; /* セクションの上下 */
	--space-paint-heading: 56px; /* セクションの見出しから中身まで */
	/* 塗装・防水の部品の余白（Figma: space/paint/*。SP も同じ値。2026-10-03 に paint/*.css の直接の値から名前を付けた） */
	--space-paint-intro: 96px; /* ページのはじめの大きい余白（ヒーローの下・コラム一覧と保存した配色の上） */
	--space-paint-wide: 56px; /* 広いあいだ（2列のあいだ・大きい箱の左右・ヒーローの上） */
	--space-paint-panel: 36px; /* 大きい箱の内側（見積もりの結果・料金・工事の流れ・目次・診断の帯） */
	--space-paint-button: 30px; /* ボタンの文字の側の左右（矢印の反対側） */
	--space-paint-card: 28px; /* カードの内側・まとまりのあいだ */
	--space-paint-row: 22px; /* 行の上下（よくある質問・料金の表・グラフ） */
	--space-paint-control: 18px; /* 入力欄・ボタン・表のセルの内側 */
	--space-paint-inner: 14px; /* 部品の中のあいだ（見出しと文・札の左右・行の上下） */

	/* ---------- Radius（Figma: Radius） ---------- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-full: 999px;
	/* 塗装・防水（Figma: radius/paint/*。SP も同じ値。SP で小さくする所は、SP のルールで小さいほうのトークンを当てる） */
	--radius-paint-surface: 48px; /* 大きい面・大きい写真（ヒーロー・ページ見出しの写真・フッター・お問い合わせの帯） */
	--radius-paint-panel: 32px; /* パネル・帯（お悩み・診断の帯・判定の面。SP の大きい面） */
	--radius-paint-card: 28px; /* カード・箱 */
	--radius-paint-box: 20px; /* カードの中の箱・行（家の絵・写真の枠・おすすめの工事。SP の箱） */
	--radius-paint-thumb: 12px; /* SP の小さい家の絵 */
	--radius-paint-check: 6px; /* チェックボックス */

	/* ---------- 影（Figma: Effect Styles） ---------- */
	--shadow-paint-float: 0 8px 28px var(--color-shadow-brand); /* Shadow/Paint-Float：浮かせる箱（塗装・防水のヘッダー・見積もりの結果など） */
	--shadow-paint-up: 0 -4px 8px var(--color-shadow-brand); /* Shadow/Paint-Up：上向きの影（SP の固定バー） */

	/* ---------- 書体（事業ごとのフォントは inc/setup.php で読み込む。ファイルは assets/fonts） ---------- */
	--font-en: "Barlow Condensed", "Barlow Condensed Fallback", sans-serif; /* Fallback は書体が届くまでの代わり（端末の書体を同じくらいの幅に。assets/fonts/barlow-condensed） */
	--font-ja: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--font-paint: "LINE Seed JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
	--font-kanasa: "Zen Maru Gothic", "Zen Maru Gothic Fallback", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif; /* Fallback は書体が届くまでの数字だけの代わり（ヒラギノ丸ゴの数字を同じくらいの幅に。assets/fonts/zen-maru-gothic） */
	--font-teyll-en: "Sora", sans-serif;
	--font-teyll-ja: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;

	/* ---------- 文字: コーポレート・採用（Figma: PC/* ・ SP/*） ---------- */
	--fs-en-hero: 140px;
	--fs-en-h1: 96px;
	--fs-en-h2: 64px;
	--fs-en-h3: 40px;
	--fs-en-number: 72px;
	--fs-en-label: 18px;
	--fs-en-date: 16px;
	--fs-en-caption: 14px;
	--fs-en-tel: 28px; /* PC/EN/Tel（法人ページのヘッダーの電話番号。2026-10-02） */
	--fs-catch: 56px;
	--fs-h1: 44px;
	--fs-h2: 34px;
	--fs-h3: 26px;
	--fs-h4: 20px;
	--fs-h5: 18px;
	--fs-lead: 19px;
	--fs-body: 16px;
	--fs-body-bold: 16px;
	--fs-body-s: 14px;
	--fs-caption: 13px; /* 2026-10-02：コーポレートの文字は 13px 以上（元 12px。Figma の PC/SP Caption も直す） */
	--fs-label-l: 16px;
	--fs-label-m: 14px;
	--fs-label-s: 13px; /* 2026-10-02：コーポレートの文字は 13px 以上（元 12px。Figma の PC/SP Label-S も直す） */

	--ls-en-hero: 0;
	--ls-en-h1: 0;
	--ls-en-h2: 0;
	--ls-en-h3: 0;
	--ls-en-number: 0;
	--ls-en-label: 0.02em;
	--ls-en-date: 0.02em;
	--ls-en-caption: 0.04em;
	--ls-en-tel: 0.02em;
	--ls-catch: 0.02em;
	--ls-h1: 0.04em;
	--ls-h2: 0.04em;
	--ls-h3: 0.04em;
	--ls-h4: 0.04em;
	--ls-h5: 0.04em;
	--ls-lead: 0.04em;
	--ls-body: 0.04em;
	--ls-body-bold: 0.04em;
	--ls-body-s: 0.04em;
	--ls-caption: 0.04em;
	--ls-label-l: 0.06em;
	--ls-label-m: 0.06em;
	--ls-label-s: 0.06em;

	--text-en-hero: 600 var(--fs-en-hero)/0.9 var(--font-en);
	--text-en-h1: 600 var(--fs-en-h1)/0.95 var(--font-en);
	--text-en-h2: 600 var(--fs-en-h2)/1 var(--font-en);
	--text-en-h3: 600 var(--fs-en-h3)/1.1 var(--font-en);
	--text-en-number: 600 var(--fs-en-number)/1 var(--font-en);
	--text-en-label: 500 var(--fs-en-label)/1.2 var(--font-en);
	--text-en-date: 500 var(--fs-en-date)/1.2 var(--font-en);
	--text-en-caption: 500 var(--fs-en-caption)/1.2 var(--font-en);
	--text-en-tel: 600 var(--fs-en-tel)/1 var(--font-en);
	--text-catch: 900 var(--fs-catch)/1.4 var(--font-ja);
	--text-h1: 700 var(--fs-h1)/1.5 var(--font-ja);
	--text-h2: 700 var(--fs-h2)/1.5 var(--font-ja);
	--text-h3: 700 var(--fs-h3)/1.6 var(--font-ja);
	--text-h4: 700 var(--fs-h4)/1.6 var(--font-ja);
	--text-h5: 700 var(--fs-h5)/1.6 var(--font-ja);
	--text-lead: 500 var(--fs-lead)/2 var(--font-ja);
	--text-body: 400 var(--fs-body)/2 var(--font-ja);
	--text-body-bold: 700 var(--fs-body-bold)/2 var(--font-ja);
	--text-body-s: 400 var(--fs-body-s)/1.8 var(--font-ja);
	--text-caption: 400 var(--fs-caption)/1.6 var(--font-ja);
	--text-label-l: 700 var(--fs-label-l)/1.5 var(--font-ja);
	--text-label-m: 700 var(--fs-label-m)/1.5 var(--font-ja);
	--text-label-s: 500 var(--fs-label-s)/1.5 var(--font-ja);

	/* ---------- 文字: 塗装・防水（Figma: Paint/PC/*。字間はすべて 0） ---------- */
	--fs-paint-h1: 50px;
	--fs-paint-h2: 40px;
	--fs-paint-h3: 24px;
	--fs-paint-h4: 20px;
	--fs-paint-lead: 17px;
	--fs-paint-body: 17px;
	--fs-paint-body-s: 16px;
	--fs-paint-body-bold: 16px;
	--fs-paint-caption: 14px;
	--fs-paint-label-l: 17px;
	--fs-paint-label-m: 15px;
	--fs-paint-label-s: 13px;
	--fs-paint-number-l: 52px;
	--fs-paint-number-m: 36px;
	--fs-paint-caption-bold: 14px;
	/* 部品の役割ごとの文字（Figma: Paint/PC/Tel など。PC の部品だけで使う） */
	--fs-paint-tel: 22px; /* ヘッダーの電話番号 */
	--fs-paint-tile-title: 21px; /* お問い合わせの帯のタイルの題 */
	--fs-paint-hours: 15px; /* お問い合わせの帯の受付時間 */
	--fs-paint-footer-body: 15px; /* フッターの住所 */
	--fs-paint-footer-link: 15px; /* フッターのリンク */
	--fs-paint-footer-area: 14px; /* フッターの対応エリアの市町村 */
	--fs-paint-footer-area-bold: 14px; /* フッターの対応エリアのまとまりの名前 */
	--fs-paint-faq-mark: 18px; /* よくある質問の Q・A の丸 */
	--fs-paint-badge: 14px; /* 施工前・施工後・人気の札 */
	--fs-paint-tag: 14px; /* 施工事例のカードの分類・地域 */
	/* PC・SP で同じ大きさの所（下の @media で上書きしない。SP のテキストスタイルを 768px 以上でも使う部品など。2026-10-06） */
	--fs-paint-button: 17px; /* c-button-paint（Paint/PC/Label-L。SP の画面でも 17） */
	--fs-paint-menu-label: 14px; /* ヘッダーの「メニュー」・全画面メニューの「閉じる」（Paint/SP/Label-S。768〜1199px でも 14） */
	--fs-paint-menu-item: 16px; /* 全画面メニューの項目（Paint/SP/Label-L） */
	--fs-paint-menu-tel: 28px; /* 全画面メニューの電話番号（Paint/SP/Number-M） */
	--fs-paint-h1-narrow: 25px; /* 幅 360px 未満のページ見出し（Paint/SP/H1 30 を縮める。「カラーシミュレーション」を1行に） */
	--fs-paint-mark: 13px; /* フォームのエラーの「!」の印（丸 20px） */
	--fs-paint-mark-s: 12px; /* 同じ印の小さい形（お問い合わせ。丸 18px） */

	--ls-paint: 0;

	--text-paint-h1: 800 var(--fs-paint-h1)/1.45 var(--font-paint);
	--text-paint-h2: 700 var(--fs-paint-h2)/1.4 var(--font-paint);
	--text-paint-h3: 700 var(--fs-paint-h3)/1.5 var(--font-paint);
	--text-paint-h4: 700 var(--fs-paint-h4)/1.5 var(--font-paint);
	--text-paint-lead: 400 var(--fs-paint-lead)/1.9 var(--font-paint);
	--text-paint-body: 400 var(--fs-paint-body)/1.85 var(--font-paint);
	--text-paint-body-s: 400 var(--fs-paint-body-s)/1.8 var(--font-paint);
	--text-paint-body-bold: 700 var(--fs-paint-body-bold)/1.5 var(--font-paint);
	--text-paint-caption: 400 var(--fs-paint-caption)/1.7 var(--font-paint);
	--text-paint-label-l: 700 var(--fs-paint-label-l)/1.4 var(--font-paint);
	--text-paint-label-m: 700 var(--fs-paint-label-m)/1.4 var(--font-paint);
	--text-paint-label-s: 700 var(--fs-paint-label-s)/1.4 var(--font-paint);
	--text-paint-number-l: 800 var(--fs-paint-number-l)/1.2 var(--font-paint);
	--text-paint-number-m: 800 var(--fs-paint-number-m)/1.3 var(--font-paint);
	--text-paint-caption-bold: 700 var(--fs-paint-caption-bold)/1.7 var(--font-paint);
	--text-paint-tel: 700 var(--fs-paint-tel)/1.3 var(--font-paint);
	--text-paint-tile-title: 700 var(--fs-paint-tile-title)/1.5 var(--font-paint);
	--text-paint-hours: 400 var(--fs-paint-hours)/1.5 var(--font-paint);
	--text-paint-footer-body: 400 var(--fs-paint-footer-body)/1.9 var(--font-paint);
	--text-paint-footer-link: 400 var(--fs-paint-footer-link)/1.6 var(--font-paint);
	--text-paint-footer-area: 400 var(--fs-paint-footer-area)/1.8 var(--font-paint);
	--text-paint-footer-area-bold: 700 var(--fs-paint-footer-area-bold)/1.8 var(--font-paint);
	--text-paint-faq-mark: 800 var(--fs-paint-faq-mark)/1.2 var(--font-paint);
	--text-paint-badge: 700 var(--fs-paint-badge)/1.4 var(--font-paint);
	--text-paint-tag: 400 var(--fs-paint-tag)/1.4 var(--font-paint);

	/* ---------- 文字: かなさホーム（Figma: Kanasa/PC/* ・ Kanasa/SP/*。字間は Number だけ 0、ほかは 0.04em） ---------- */
	--fs-kanasa-catch: 56px;
	--fs-kanasa-h1: 40px;
	--fs-kanasa-h2: 32px;
	--fs-kanasa-h3: 24px;
	--fs-kanasa-h4: 20px;
	--fs-kanasa-lead: 20px;
	--fs-kanasa-body: 17px;
	--fs-kanasa-body-s: 15px;
	--fs-kanasa-label: 16px;
	--fs-kanasa-number: 64px;

	--ls-kanasa: 0.04em;
	--ls-kanasa-number: 0;

	--text-kanasa-catch: 900 var(--fs-kanasa-catch)/1.4 var(--font-kanasa);
	--text-kanasa-h1: 700 var(--fs-kanasa-h1)/1.5 var(--font-kanasa);
	--text-kanasa-h2: 700 var(--fs-kanasa-h2)/1.5 var(--font-kanasa);
	--text-kanasa-h3: 700 var(--fs-kanasa-h3)/1.6 var(--font-kanasa);
	--text-kanasa-h4: 700 var(--fs-kanasa-h4)/1.6 var(--font-kanasa);
	--text-kanasa-lead: 500 var(--fs-kanasa-lead)/1.9 var(--font-kanasa);
	--text-kanasa-body: 500 var(--fs-kanasa-body)/2 var(--font-kanasa);
	--text-kanasa-body-s: 500 var(--fs-kanasa-body-s)/1.9 var(--font-kanasa);
	--text-kanasa-label: 700 var(--fs-kanasa-label)/1.5 var(--font-kanasa);
	--text-kanasa-number: 900 var(--fs-kanasa-number)/1.1 var(--font-kanasa);

	/* ---------- 文字: TEYLL（Figma: TEYLL/PC/* ・ TEYLL/SP/*） ---------- */
	--fs-teyll-en-hero: 88px;
	--fs-teyll-en-h1: 56px;
	--fs-teyll-en-label: 14px;
	--fs-teyll-h1: 44px;
	--fs-teyll-h2: 32px;
	--fs-teyll-h3: 22px;
	--fs-teyll-body: 16px;
	--fs-teyll-body-s: 14px;
	--fs-teyll-label: 14px;

	--ls-teyll-en-hero: -0.02em;
	--ls-teyll-en-h1: -0.01em;
	--ls-teyll-en-label: 0.08em;
	--ls-teyll: 0.02em; /* H1〜H3・Body・Body-S */
	--ls-teyll-label: 0.04em;

	--text-teyll-en-hero: 700 var(--fs-teyll-en-hero)/1.1 var(--font-teyll-en);
	--text-teyll-en-h1: 700 var(--fs-teyll-en-h1)/1.1 var(--font-teyll-en);
	--text-teyll-en-label: 600 var(--fs-teyll-en-label)/1.2 var(--font-teyll-en);
	--text-teyll-h1: 700 var(--fs-teyll-h1)/1.5 var(--font-teyll-ja);
	--text-teyll-h2: 700 var(--fs-teyll-h2)/1.5 var(--font-teyll-ja);
	--text-teyll-h3: 700 var(--fs-teyll-h3)/1.6 var(--font-teyll-ja);
	--text-teyll-body: 400 var(--fs-teyll-body)/2 var(--font-teyll-ja);
	--text-teyll-body-s: 400 var(--fs-teyll-body-s)/1.8 var(--font-teyll-ja);
	--text-teyll-label: 700 var(--fs-teyll-label)/1.5 var(--font-teyll-ja);
}

/* ==========================================================================
   SP（767px 以下。Figma の SP は幅 375px）
   ========================================================================== */
@media (max-width: 767px) {
	:root {
		/* Spacing の SP モード（2xs〜md は PC と同じ） */
		--space-lg: 20px;
		--space-xl: 24px;
		--space-2xl: 32px;
		--space-3xl: 40px;
		--space-4xl: 48px;
		--space-5xl: 56px;
		--space-6xl: 64px;
		--space-7xl: 80px;
		--space-paint-section: 56px;
		--space-paint-heading: 28px;
		/* --space-paint-intro〜inner・--radius-paint-* は SP も同じ値なので上書きしない */

		/* SP/*（コーポレート・採用） */
		--fs-en-hero: 64px;
		--fs-en-h1: 52px;
		--fs-en-h2: 44px;
		--fs-en-h3: 28px;
		--fs-en-number: 48px;
		--fs-en-label: 16px;
		--fs-en-date: 14px;
		--fs-en-caption: 13px;
		--fs-catch: 30px;
		--fs-h1: 28px;
		--fs-h2: 24px;
		--fs-h3: 20px;
		--fs-h4: 17px;
		--fs-h5: 16px;
		--fs-lead: 16px;
		--fs-body: 15px;
		--fs-body-bold: 15px;
		--fs-body-s: 13px;
		--fs-caption: 13px;
		--fs-label-l: 15px;
		--fs-label-m: 14px;
		--fs-label-s: 13px;

		/* Paint/SP/*（塗装・防水） */
		--fs-paint-h1: 30px;
		--fs-paint-h2: 26px;
		--fs-paint-h3: 20px;
		--fs-paint-h4: 18px;
		--fs-paint-lead: 16px;
		--fs-paint-body: 16px;
		--fs-paint-body-s: 15px;
		--fs-paint-body-bold: 16px;
		--fs-paint-caption: 14px; /* 注意書きは 14px（2026-10-02 ユーザー決定）なので縮めない */
		--fs-paint-label-l: 16px;
		--fs-paint-label-m: 15px;
		--fs-paint-label-s: 14px;
		--fs-paint-number-l: 40px;
		--fs-paint-number-m: 28px;
		--fs-paint-caption-bold: 14px; /* Paint/SP/Caption-Bold（Caption と同じく縮めない） */
		/* tel・tile-title・hours・footer-*・faq-mark は PC の部品だけの文字（SP の画面は Paint/SP/H4・Body-S・Caption・Label-L を使う）。
		   badge・tag は SP も 14px のまま（Paint/SP/Label-S と同じ大きさ）。どれも SP で上書きしない */

		/* Kanasa/SP/* */
		--fs-kanasa-catch: 32px;
		--fs-kanasa-h1: 26px;
		--fs-kanasa-h2: 22px;
		--fs-kanasa-h3: 19px;
		--fs-kanasa-h4: 17px;
		--fs-kanasa-lead: 16px;
		--fs-kanasa-body: 15px;
		--fs-kanasa-body-s: 14px;
		--fs-kanasa-label: 15px;
		--fs-kanasa-number: 44px;

		/* TEYLL/SP/* */
		--fs-teyll-en-hero: 48px;
		--fs-teyll-en-h1: 36px;
		--fs-teyll-en-label: 13px; /* Figma の TEYLL/SP/EN-Label（2026-10-02 に 13px へ上げた） */
		--fs-teyll-h1: 28px;
		--fs-teyll-h2: 22px;
		--fs-teyll-h3: 18px;
		--fs-teyll-body: 15px;
		--fs-teyll-body-s: 13px;
		--fs-teyll-label: 13px;
	}
}