/*!
  @industry reform
  @label 内装・リフォーム
  @order 10
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「10. 内装・リフォーム業」スタイルの型（3種類）
*/

/* @theme reform-a
   @name 明るい実績
   @desc 白地に橙、生成りの帯、カードの縁は黄。写真に白い角丸の面を重ね、英字の大見出し。料金はプランごとの写真カード
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Source+Sans+3:wght@600;700&display=swap
   @source 白×オレンジ／イエローの明るい実績訴求型（ニッカホーム・フレッシュハウス・LIXILリフォームショップ）。文字 #333、橙 #ff6d1d・#ef6d22、黄 #fcc800（カードの縁）、生成りの帯 #f5eee7、Noto Sans JP＋Source Sans 3
   @adjust 文字に使う橙 #ff6d1d→#ba4200、ボタンの橙 #ff6d1d→#cd4900（白い文字・生成りの帯の上で 4.5:1 以上にするため）。#ff6d1d・#ef6d22 は線・ピン・ボタンの縁、黄は強みとカードの縁だけ
*/
:root[data-theme="reform-a"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f5eee7;
  --c-text: #333333;
  --c-muted: #555555;
  --c-line: #e8ddd2;
  --c-accent: #ba4200;
  --c-accent-deco: #ff6d1d;
  --c-accent-2: #fcc800;
  --c-btn-bg: #cd4900;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #333333;
  --c-btn2-border: #ef6d22;
  --c-price: #ba4200;
  --c-badge-bg: #cd4900;
  --c-badge-text: #ffffff;
  --c-focus: #333333;
  --c-ph-a: #fbe9dc;
  --c-ph-b: #f4dac4;
  --c-ph-text: #5b3217;
  --c-map-bg: #f7f1eb;
  --c-map-line: #ece2d8;
  --c-map-road: #ffffff;
  --c-map-pin: #ff6d1d;
  --about-line: #fcc800;
  --menu-line: #fcc800;

  --hero-bg: #f5eee7;
  --hero-text: #333333;
  --hero-muted: #ba4200;
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --hero-card-pad: clamp(20px, 5vw, 36px);
  --hero-card-radius: 12px;
  --cta-top-bg: #fff4c7;
  --cta-top-text: #333333;
  --cta-bottom-bg: #fff4c7;
  --cta-bottom-text: #333333;
  --footer-bg: #333333;
  --footer-text: #f5eee7;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Source Sans 3", "Noto Sans JP", sans-serif;
  --font-num: "Source Sans 3", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.25rem, 8.5vw, 3.5rem);
  --h2-size: 1.125rem;
  --h3-size: 1rem;
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 700;
  --label-ls: 0.04em;
  --label-transform: uppercase;
  --label-color: #ba4200;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 4px;

  --space-section: clamp(48px, 8vw, 88px);
  --radius: 12px;
  --radius-img: 8px;
  --radius-btn: 999px;
  --radius-badge: 999px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  /* 写真：全面の写真に、白い角丸の面で屋号とひとことを重ねる（重ねる型） */
  --hero-areas: "stack";
  --hero-areas-lg: "stack";
  --hero-media-area: stack;
  --hero-body-area: stack;
  --hero-media-ratio: auto;
  --hero-media-ratio-lg: auto;
  --hero-media-min-h: min(78svh, 700px);
  --hero-body-align: end;
  --hero-body-max: 34rem;
  --hero-body-pad: clamp(16px, 5vw, 56px);

  --about-media-ratio: 3 / 2;
  --point-bg: #ffffff;
  --point-border-w: 2px;
  --point-align: left;
  --point-num-size: 2.75rem;
  --point-num-radius: 50%;
  --point-num-bg: #cd4900;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：プランごとの白い写真カード。下の縁を黄色に（写真カード型） */
  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "media" "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 10px 10px 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 4px;
  --menu-item-radius: 12px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: 1.0625rem;
  --price-note-display: block;

  /* 実績：工事の前・後を1組ずつ、スマホ・PCとも2列 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;
  --works-gap: 16px 12px;
}

/* @theme reform-b
   @name 落ち着いた信頼
   @desc 白地に赤とチャコールの2色、区切りは薄いグレー。差し色はボタンと見出しの線だけ。PCは文字と写真を左右に、料金は行
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;500&display=swap
   @source 白×深色1色の落ち着いた企業信頼型（積水ハウスリフォーム・PanasonicリフォームClub・BXゆとりフォーム）。文字 #333、赤 #c03f3f、チャコール #3b3b41、区切り #f2f2f2、Noto Sans JP＋Roboto
   @adjust フォーカス枠は、赤 #c03f3f を同じ色相のまま明るくした #d9676a（白地とチャコールの帯の両方で 3:1 以上にするため）
*/
:root[data-theme="reform-b"] {
  --c-bg: #ffffff;
  --c-surface: #f2f2f2;
  --c-band: #f2f2f2;
  --c-text: #333333;
  --c-muted: #555555;
  --c-line: #dddddd;
  --c-accent: #3b3b41;
  --c-accent-deco: #c03f3f;
  --c-accent-2: #3b3b41;
  --c-btn-bg: #c03f3f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #3b3b41;
  --c-btn2-border: #3b3b41;
  --c-price: #333333;
  --c-badge-bg: #3b3b41;
  --c-badge-text: #ffffff;
  --c-focus: #d9676a;
  --c-ph-a: #ececec;
  --c-ph-b: #d9d9d9;
  --c-ph-text: #3b3b41;
  --c-map-bg: #f2f2f2;
  --c-map-line: #e2e2e2;
  --c-map-road: #ffffff;
  --c-map-pin: #c03f3f;

  --hero-bg: #f2f2f2;
  --hero-text: #333333;
  --hero-muted: #555555;
  --cta-top-bg: #ffffff;
  --cta-top-text: #333333;
  --cta-bottom-bg: #3b3b41;
  --cta-bottom-text: #ffffff;
  --footer-bg: #242428;
  --footer-text: #f2f2f2;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Roboto", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2rem, 5.5vw, 2.75rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.625rem);
  --h3-size: 1.0625rem;
  --label-size: 0.8125rem;
  --label-weight: 500;
  --label-ls: 0.2em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 2px;

  --space-section: clamp(56px, 10vw, 104px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 2px;
  --radius-badge: 0px;

  /* 写真：スマホは写真の下に文字、PCは文字を左・写真を右に（分割型） */
  --hero-areas: "media" "body";
  --hero-areas-lg: "body media";
  --hero-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 1 / 1;
  --hero-body-align: center;
  --hero-body-max: 28rem;

  --about-media-ratio: 1200 / 629;
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #f2f2f2;
  --point-align: left;
  --point-num-size: 2.25rem;
  --point-num-radius: 0px;
  --point-num-border-w: 0px;
  --point-num-text: #3b3b41;
  --point-num-fs: 1.75rem;

  /* 料金：写真なしの行（行型） */
  --price-size: 1.25rem;

  /* 実績：工事の前・後を1組ずつ、スマホ・PCとも2列 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 3 / 2;
  --works-gap: 20px 12px;
}

/* @theme reform-c
   @name 明朝のハイエンド
   @desc 黒い地にクリームの文字と金。明朝の見出しと大きな欧文、全面の写真に屋号を中央で重ね、余白を広く1画面1テーマ
   @fonts https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho:wght@500;600&display=swap
   @source 黒×クリーム・ゴールドの明朝ハイエンド型（三井のリフォーム）。黒 #241f1b、クリーム #e5e2ca、金 #b1a488、ライトグレー #e9e5e2、Zen Old Mincho＋EB Garamond＋Zen Kaku Gothic New
   @adjust 写真に重ねる色は黒 #241f1b の 70%（白い写真でもクリームの文字が 4.5:1 以上になるため）。写真の上の小見出しは金では比が足りないため、ライトグレー #e9e5e2
*/
:root[data-theme="reform-c"] {
  --c-bg: #241f1b;
  --c-surface: #2e2823;
  --c-band: #1c1815;
  --c-text: #e5e2ca;
  --c-muted: #bdb8a6;
  --c-line: #4a423b;
  --c-accent: #b1a488;
  --c-accent-deco: #b1a488;
  --c-accent-2: #e9e5e2;
  --c-btn-bg: #e5e2ca;
  --c-btn-text: #241f1b;
  --c-btn2-bg: transparent;
  --c-btn2-text: #e5e2ca;
  --c-btn2-border: #b1a488;
  --c-price: #e5e2ca;
  --c-badge-bg: #b1a488;
  --c-badge-text: #241f1b;
  --c-focus: #e9e5e2;
  --c-ph-a: #3a332d;
  --c-ph-b: #2a2420;
  --c-ph-text: #e5e2ca;
  --c-map-bg: #2e2823;
  --c-map-line: #3a332d;
  --c-map-road: #4a423b;
  --c-map-pin: #b1a488;

  --hero-bg: #241f1b;
  --hero-text: #e5e2ca;
  --hero-muted: #e9e5e2;
  --hero-overlay: rgba(36, 31, 27, 0.7);
  --hero-ph-text: #e5e2ca;
  --cta-top-bg: #1c1815;
  --cta-top-text: #e5e2ca;
  --cta-bottom-bg: #2e2823;
  --cta-bottom-text: #e5e2ca;
  --footer-bg: #14110f;
  --footer-text: #e5e2ca;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "EB Garamond", "Zen Old Mincho", serif;
  --font-num: "EB Garamond", "Zen Kaku Gothic New", serif;
  --fw-head: 500;
  --fw-hero: 600;
  --lh-body: 2;
  --ls-head: 0.1em;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2rem, 8vw, 3.25rem);
  --h2-size: 1rem;
  --h3-size: 1rem;
  --label-size: clamp(2rem, 8vw, 3.25rem);
  --label-weight: 400;
  --label-ls: 0.12em;
  --label-transform: uppercase;
  --label-color: #b1a488;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 1px;

  --space-section: clamp(80px, 14vw, 160px);
  --space-head: clamp(36px, 6vw, 64px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;
  --btn-weight: 500;

  /* 写真：全面の写真に黒を重ね、屋号とひとことを中央に（重ねる型） */
  --hero-areas: "stack";
  --hero-areas-lg: "stack";
  --hero-media-area: stack;
  --hero-body-area: stack;
  --hero-media-ratio: auto;
  --hero-media-ratio-lg: auto;
  --hero-media-min-h: min(88svh, 820px);
  --hero-body-align: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 36rem;

  --about-media-ratio: 16 / 9;
  --about-cols-lg: minmax(0, 7fr) minmax(0, 5fr);
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 3.25rem;
  --point-num-radius: 50%;
  --point-num-text: #b1a488;
  --point-num-fs: 1.25rem;

  /* 料金：面を敷かず、縦長の写真の下に名前と料金（写真カード型） */
  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 32px 12px;
  --menu-item-areas: "media" "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 0px;
  --menu-item-bg: transparent;
  --menu-item-rule: 0px;
  --menu-item-radius: 0px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 5;
  --price-size: 1.125rem;

  /* 実績：工事の前・後を1組ずつ、すき間を詰めて2列 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 3 / 2;
  --works-gap: 24px 4px;
}

/* @theme reform-d
   @name 前と後の見比べ
   @desc 白と黄色に赤を少し。画面いっぱいの写真が重なって切り替わりながら寄る。施工の前と後は、写真の上の線を左右に動かして見比べられる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Poppins:wght@600&display=swap
   @source 動きの型は、業種別サイト傾向調査の動画のヒーロー（内装・リフォームのフレッシュハウス：PC用とスマホ用で動画を出し分け）と、画面の高さいっぱいのフェード＋ズーム（三井のリフォーム）。調査の記述から型だけを借り、動画は見本の写真4枚の切り替えと寄りで表し、施工の前と後を見比べる部品を足した。配色はフレッシュハウスの黄 #fcc800 と赤 #cf1212 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film compare
   @slides hero works-4 works-6 menu-3
   @adjust 黄 #fcc800 は白い文字が読めないため、ボタンと屋号の面の地にして、文字は墨 #262626（11.6:1）にする。文字に使う赤は、薄い黄色の帯の上でも 4.5:1 以上になる #b3100f
*/
:root[data-theme="reform-d"] {
  --c-bg: #ffffff;
  --c-surface: #fffbea;
  --c-band: #fff6cc;
  --c-text: #262626;
  --c-muted: #4f4f4f;
  --c-line: #efe2a2;
  --c-accent: #b3100f;
  --c-accent-deco: #fcc800;
  --c-accent-2: #cf1212;
  --c-btn-bg: #fcc800;
  --c-btn-text: #262626;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #262626;
  --c-btn2-border: #262626;
  --c-price: #262626;
  --c-badge-bg: #cf1212;
  --c-badge-text: #ffffff;
  --c-focus: #b3100f;
  --c-ph-a: #f3eed8;
  --c-ph-b: #e6dfc0;
  --c-ph-text: #333333;
  --c-map-bg: #fff6cc;
  --c-map-line: #f1e6b0;
  --c-map-road: #ffffff;
  --c-map-pin: #cf1212;

  --hero-bg: #262626;
  --hero-text: #262626;
  --hero-muted: #262626;
  --hero-card-bg: #fcc800;
  --hero-card-pad: clamp(20px, 5vw, 36px);
  --hero-ph-text: #333333;
  --cta-top-bg: #ffffff;
  --cta-top-text: #262626;
  --cta-bottom-bg: #fff6cc;
  --cta-bottom-text: #262626;
  --footer-bg: #262626;
  --footer-text: #f5f5f5;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: var(--font-body);
  --font-label: "Poppins", "Noto Sans JP", sans-serif;
  --font-num: "Poppins", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.375rem, 5vw, 2rem);
  --label-size: 0.875rem;
  --label-weight: 600;
  --label-ls: 0.2em;
  --head-align: left;
  --head-rule-w: 56px;
  --head-rule-h: 6px;

  --radius: 8px;
  --radius-img: 8px;
  --radius-btn: 8px;

  /* 写真：画面の高さいっぱいの写真が切り替わり、左下の黄色い面に屋号 */
  --hero-areas: "stack";
  --hero-areas-lg: "stack";
  --hero-media-area: stack;
  --hero-body-area: stack;
  --hero-media-ratio: auto;
  --hero-media-ratio-lg: auto;
  --hero-media-min-h: min(100svh, 920px);
  --hero-body-align: end;
  --hero-body-max: 30rem;

  --about-media-ratio: 3 / 2;
  --point-bg: #fffbea;
  --point-border-w: 2px;
  --point-align: left;
  --point-num-size: 2.75rem;
  --point-num-radius: 50%;
  --point-num-bg: #fcc800;
  --point-num-text: #262626;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "media" "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 10px 10px 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 8px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: 1.0625rem;
  --price-note-display: block;

  /* 実績：施工の前と後を1枚に重ねた見比べる写真を、PCでは3つ並べる */
  --works-cols: 1;
  --works-cols-lg: 3;
  --works-ratio: 3 / 2;
  --works-gap: 28px 20px;

  --mv-toggle-bg: #262626;
  --mv-toggle-fg: #fcc800;
}

/* @theme reform-e
   @name めくる住まいの誌面
   @desc クリームの紙に黒の文字と金の線、紹介の段は黒の地。写真は止めたまま、大きな明朝と番号で見せる。読み進めると大きな英字がすべり、PC では工事の写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;700&family=Zen+Old+Mincho:wght@500;600;700&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査の内装・リフォームの三井のリフォームから借りた。全画面のヒーローで写真3枚をフェード＋ズームし、写真ごとに明朝のコピーを切り替える型を、写真は止めたまま、読み進めた工事の写真がめくれて替わる料金の欄にした。見出しを欧文＋日本語の二段で組み、セクションを9（10社中最少）に絞って1画面に1テーマを置く組み方を、節の番号と線だけの大きな英字で、1品に1つの節を使う誌面にした。配色は同じ社の黒 #241f1b・クリーム #e5e2ca・金 #b1a488・ライトグレー #e9e5e2 で、黒の地を反転してクリームを紙にした。書体も同じ社の Zen Old Mincho＋EB Garamond と、本文の Noto Sans JP。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 金 #b1a488 はクリームの紙 #e5e2ca との比が 1.88:1 のため、文字に使う金は同じ色相で暗くした #685c44（5.02:1）にし、元の金は線と、黒の地の上の番号（6.63:1）に使う。大きな英字の線は金を少し暗くした #a59676（紙と 2.22:1、黒の地と 5.61:1）。フォーカス枠は金を暗くした #857656（紙と 3.40:1、黒の地と 3.67:1、下の連絡帯のライトグレーと 3.55:1）
*/
:root[data-theme="reform-e"] {
  --c-bg: #e5e2ca;
  --c-surface: #efeedf;
  --c-band: #e9e5e2;
  --c-text: #241f1b;
  --c-muted: #564d45;
  --c-line: #c8c2a6;
  --c-accent: #685c44;
  --c-accent-deco: #b1a488;
  --c-accent-2: #e9e5e2;
  --c-btn-bg: #241f1b;
  --c-btn-text: #e5e2ca;
  --c-btn2-bg: transparent;
  --c-btn2-text: #241f1b;
  --c-btn2-border: #241f1b;
  --c-price: #241f1b;
  --c-badge-bg: #241f1b;
  --c-badge-text: #e5e2ca;
  --c-focus: #857656;
  --c-ph-a: #dcd8bf;
  --c-ph-b: #cdc8ab;
  --c-ph-text: #3a332d;
  --c-map-bg: #dcd8c1;
  --c-map-line: #d1ccb2;
  --c-map-road: #efeedf;
  --c-map-pin: #241f1b;

  --hero-bg: #e5e2ca;
  --hero-text: #241f1b;
  --hero-muted: #685c44;
  --cta-top-bg: #e5e2ca;
  --cta-top-text: #241f1b;
  --cta-bottom-bg: #e9e5e2;
  --cta-bottom-text: #241f1b;
  --footer-bg: #241f1b;
  --footer-text: #e5e2ca;

  /* 紹介の段は黒の地に反転し、番号は金。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #241f1b;
  --about-text: #e5e2ca;
  --about-muted: #bdb8a6;
  --about-accent: #b1a488;
  --about-surface: #2e2823;
  --about-line: #4a423b;
  --about-deco: #b1a488;
  --menu-bg: #e5e2ca;
  --news-bg: #e5e2ca;
  --contact-bg: #e5e2ca;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-hero: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "EB Garamond", "Zen Old Mincho", serif;
  --font-num: "EB Garamond", "Zen Old Mincho", serif;
  --fw-head: 600;
  --fw-hero: 700;
  --fw-num: 400;
  --lh-body: 2;

  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;

  /* 工事の前と後の組は、誌面でも2列（folio.css） */
  --works-ratio: 4 / 3;

  /* 型（premium/folio.css）の色 */
  --fo-outline: #a59676;
  --mv-toggle-bg: #241f1b;
  --mv-toggle-fg: #e5e2ca;
}

/* @theme reform-f
   @name 場所の札から選ぶ
   @desc 淡い橙の卓に、墨の太い線の札。いちばん上に並んだ工事の場所の写真の札が裏返って名前と料金を見せ、押すとその工事が大きく開く。前と後の写真も、押すと裏返る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Zen+Maru+Gothic:wght@700;900&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査の内装・リフォームの2社から借りた。施工事例を部位×テーマ×建物種別で探す検索（大和ハウスリフォーム）と、建物種別×場所×こだわりの検索・32設問の診断・お悩み6項目のイラスト（LIXILリフォームショップ）を、工事の場所の写真の札を押して選ぶ形にした。札は、写真のタイルが向きを変えて切り替わる型（カフェのコメダ珈琲店）で裏返る。配色は白×オレンジ／イエローの型の、ニッカホームの橙 #ff6d1d・生成りの帯 #f5eee7、LIXILリフォームショップの橙 #ef6d22、文字 #333 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 橙 #ff6d1d は白い文字と 2.82:1 のため、ボタン・選んだ札・英字の札の地にして、上の文字は墨 #2b2b2b（5.03:1。調査の文字色「黒〜#333」の範囲で、#333 では 4.49:1 のため暗くした）。文字と料金に使う橙は #ba4200（白と 5.43:1）。卓は橙を白に2割混ぜた #ffe2d2（墨と 11.50:1、フォーカス枠 #ba4200 と 4.41:1）
*/
:root[data-theme="reform-f"] {
  --c-bg: #fff8f4;
  --c-surface: #ffffff;
  --c-band: #f5eee7;
  --c-text: #2b2b2b;
  --c-muted: #555555;
  --c-line: #eadccf;
  --c-accent: #ba4200;
  --c-accent-deco: #ff6d1d;
  --c-accent-2: #ef6d22;
  --c-btn-bg: #ff6d1d;
  --c-btn-text: #2b2b2b;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #2b2b2b;
  --c-btn2-border: #2b2b2b;
  --c-price: #ba4200;
  --c-badge-bg: #ba4200;
  --c-badge-text: #ffffff;
  --c-focus: #ba4200;
  --c-ph-a: #fbe9dc;
  --c-ph-b: #f4dac4;
  --c-ph-text: #5b3217;
  --c-map-bg: #fbf1e8;
  --c-map-line: #f1e3d6;
  --c-map-road: #ffffff;
  --c-map-pin: #ff6d1d;

  --hero-bg: #ffe2d2;
  --hero-text: #2b2b2b;
  --hero-muted: #555555;
  --cta-top-bg: #fff8f4;
  --cta-top-text: #2b2b2b;
  --cta-bottom-bg: #ffe2d2;
  --cta-bottom-text: #2b2b2b;
  --footer-bg: #2b2b2b;
  --footer-text: #fff8f4;

  --menu-bg: #fff8f4;
  --works-bg: #ffffff;
  --news-bg: #fff8f4;
  --access-bg: #ffffff;
  --contact-bg: #fff8f4;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-hero: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-label: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-num: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --fw-num: 700;
  --lh-body: 1.85;
  /* 屋号は6字あるので、PC（960px〜）の左の列でも1行に収まる大きさまで */
  --hero-title-size: clamp(2.5rem, 11vw, 3.25rem);
  --label-transform: none;
  --label-size: 0.9375rem;
  --label-ls: 0.08em;

  --radius: 14px;
  --radius-img: 12px;
  --radius-btn: 999px;
  --radius-badge: 999px;

  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;

  /* 型（premium/touch.css）の色：押せるものの線と影、英字の札と番号の丸 */
  --tc-ink: #2b2b2b;
  --tc-sticker: #ff6d1d;
  --mv-toggle-bg: #2b2b2b;
  --mv-toggle-fg: #ff6d1d;
}