/*!
  @industry paint
  @label 外壁塗装・屋根工事
  @order 9
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「9. 外壁塗装・屋根工事業」スタイルの型（2型）
*/

/* @theme paint-a
   @name 実績の見える化
   @desc 白と薄グレーの地に紺、飾りに黄と金、ボタンだけ赤。写真の下の紺の帯に屋号、施工の前後を大きく2列で並べる
   @fonts https://fonts.googleapis.com/css2?family=Oswald:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @source 白×紺×黄・金の実績訴求（ガイソー・児玉塗装・ペイントホームズ）。紺 #00395c・#174785、黄 #ffcb00、金 #cc9955、ボタンの赤 #d52424、薄グレーの地 #f6f6f6、Zen Kaku Gothic New＋Oswald
   @adjust フォーカス枠は、金 #cc9955 を同じ色相のまま暗くした #b07a33（白地と紺の帯の両方で 3:1 以上にするため）。黄と金は文字に使わず、紺の上の番号・小見出しと線だけに使う
*/
:root[data-theme="paint-a"] {
  --c-bg: #ffffff;
  --c-surface: #f6f6f6;
  --c-band: #f6f6f6;
  --c-text: #222a33;
  --c-muted: #50575f;
  --c-line: #d9dce0;
  --c-accent: #00395c;
  --c-accent-deco: #cc9955;
  --c-accent-2: #ffcb00;
  --c-btn-bg: #d52424;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00395c;
  --c-btn2-border: #00395c;
  --c-price: #00395c;
  --c-badge-bg: #00395c;
  --c-badge-text: #ffffff;
  --c-focus: #b07a33;
  --c-ph-a: #e6e9ec;
  --c-ph-b: #d0d7de;
  --c-ph-text: #28323d;
  --c-map-bg: #f1f2f4;
  --c-map-line: #e0e3e7;
  --c-map-road: #ffffff;
  --c-map-pin: #00395c;

  --hero-bg: #00395c;
  --hero-text: #ffffff;
  --hero-muted: #ffcb00;
  --cta-top-bg: #f6f6f6;
  --cta-top-text: #222a33;
  --cta-bottom-bg: #00395c;
  --cta-bottom-text: #ffffff;
  --footer-bg: #174785;
  --footer-text: #ffffff;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Oswald", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Oswald", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --h3-size: 1.0625rem;
  --label-size: 0.9375rem;
  --label-weight: 600;
  --label-ls: 0.16em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 3px;

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

  /* 写真：スマホ 4:3・PC 21:9 の家の写真の下に、紺の帯で屋号とひとこと（積む型） */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;
  --hero-body-max: 40rem;
  --hero-body-pad: clamp(28px, 6vw, 56px);

  --about-media-ratio: 4 / 3;
  --point-bg: #f6f6f6;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-bg: #00395c;
  --point-num-text: #ffcb00;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  /* 料金：完成価格の行（行型） */
  --price-size: 1.375rem;

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

/* @theme paint-b
   @name 相談しやすさ
   @desc 生成りの地に橙、連絡の帯は黄色。Poppinsの英字の大見出しを中央に、PCは文字と写真を左右に分け、料金は角丸の面
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@600;700&display=swap
   @source 白×オレンジの親しみ・相談しやすさ（プロタイムズ・外壁塗装の窓口）。生成り #f7f4f0、橙 #eb6120・#f16f21、黄 #fddd42、文字 #404040、Noto Sans JP＋Poppins
   @adjust 文字に使う橙 #eb6120→#a7400f、ボタンの橙 #eb6120→#c94d12（白い文字・生成り・黄色の上で 4.5:1 以上にするため）。#eb6120・#f16f21 は線・ピン・ボタンの縁だけ
*/
:root[data-theme="paint-b"] {
  --c-bg: #f7f4f0;
  --c-surface: #ffffff;
  --c-band: #ffffff;
  --c-text: #404040;
  --c-muted: #575757;
  --c-line: #e6ddd2;
  --c-accent: #a7400f;
  --c-accent-deco: #eb6120;
  --c-accent-2: #fddd42;
  --c-btn-bg: #c94d12;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #404040;
  --c-btn2-border: #f16f21;
  --c-price: #a7400f;
  --c-badge-bg: #c94d12;
  --c-badge-text: #ffffff;
  --c-focus: #a7400f;
  --c-ph-a: #fbe6d6;
  --c-ph-b: #fdf0c2;
  --c-ph-text: #5a3419;
  --c-map-bg: #f3ede6;
  --c-map-line: #e8dfd4;
  --c-map-road: #ffffff;
  --c-map-pin: #eb6120;

  --hero-bg: #f7f4f0;
  --hero-text: #404040;
  --hero-muted: #a7400f;
  --cta-top-bg: #fddd42;
  --cta-top-text: #404040;
  --cta-bottom-bg: #fddd42;
  --cta-bottom-text: #404040;
  --footer-bg: #404040;
  --footer-text: #f7f4f0;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Poppins", "Noto Sans JP", sans-serif;
  --font-num: "Poppins", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.25rem, 5.5vw, 3.25rem);
  --h2-size: 1.125rem;
  --h3-size: 1.0625rem;
  --label-size: clamp(1.625rem, 6.5vw, 2.5rem);
  --label-weight: 700;
  --label-ls: 0.02em;
  --label-transform: none;
  --label-color: #a7400f;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 4px;

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

  /* 写真：スマホは写真の下に文字、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: 4 / 3;
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #c94d12;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  /* 料金：行型を、生成りの角丸の面に1品ずつのせる */
  --menu-gap: 12px;
  --menu-item-pad: 16px 14px;
  --menu-item-bg: #f7f4f0;
  --menu-item-rule: 0px;
  --menu-item-radius: 16px;
  --price-size: 1.125rem;

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

/* @theme paint-c
   @name 動くイラスト
   @desc 方眼紙の地に、黒い線で斜め上から見た家のイラスト。家の壁がローラーで塗り替わり、施工の前と後の写真が流れる動きを入れる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @concept イラストで見せる
   @source 動きと見た目の型は、空き家の情報サイトの事例（akiyagurashi.com、2026-09-24 に確認。方眼紙の地・等角図のイラスト・斜めに置いてゆれる大きな文字・逆向きに流れ続けるカードの列・ゆれる大きなボタン・キャラクターの TOP ボタン）。配色は調査の型ではなく、塗料の色（山吹・珊瑚・若草・空色）から新しく決めた。文章・画像・コードは写していない
   @page custom（demo/paint/c.html は手で作る。イラストは scripts/iso.py が作る。variants.py は本文を作り直さず、デモ用バーの切り替えだけをそろえる。動きは premium/iso.css・premium/iso.js）
   @adjust 山吹 #ffcf3f・珊瑚 #ff8f6b・若草 #5fd3a6・空色 #6cb8ff は白地との比が 1.5〜2.6:1 のため、文字には使わず、面・線・イラストだけに使う。その上の文字はすべて墨 #1f2328（最も低い空色の上でも 7.48:1）。文字に使う差し色は、空色を暗くした #1b5fbf（白地で 6.11:1）。フォーカス枠は、白地と、下の連絡帯のグラデーション（山吹→若草→空色）の両方で 3:1 以上になるよう墨 #1f2328。斜めに置いた屋号（墨）は、イラストに重なっても読めるよう白い縁を付ける。お知らせの墨の板 #2b3038 の上は、本文 #ffffff 13.27:1・日付と説明 #c9cfd6 8.45:1・種類ラベルの山吹 9.00:1（--pair で測った）
*/
:root[data-theme="paint-c"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #ffffff;
  --c-text: #1f2328;
  --c-muted: #4b5563;
  --c-line: #d7dce2;
  --c-accent: #1b5fbf;
  --c-accent-deco: #ff8f6b;
  --c-accent-2: #ff8f6b;
  --c-btn-bg: #ffcf3f;
  --c-btn-text: #1f2328;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1f2328;
  --c-btn2-border: #1f2328;
  --c-price: #1f2328;
  --c-badge-bg: #1f2328;
  --c-badge-text: #ffffff;
  --c-focus: #1f2328;
  --c-ph-a: #eef0f3;
  --c-ph-b: #e2e6eb;
  --c-ph-text: #1f2328;
  --c-map-bg: #ffffff;
  --c-map-line: #edf0f4;
  --c-map-road: #ffffff;
  --c-map-pin: #ff8f6b;

  /* ヒーロー：屋号はイラストの上に斜めに置き、小見出しとひとことは墨の板にのせる（点検は板の色で測る） */
  --hero-bg: #ffffff;
  --hero-card-bg: #1f2328;
  --hero-text: #ffffff;
  --hero-muted: #ffcf3f;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1f2328;
  /* 下の連絡帯はグラデーション（--iso-grad）。点検では最も暗い空色の端で測る */
  --cta-bottom-bg: #6cb8ff;
  --cta-bottom-text: #1f2328;
  --footer-bg: #1f2328;
  --footer-text: #ffffff;


  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --font-label: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Dela Gothic One", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 700;
  --fw-hero: 400;
  --fw-num: 400;
  --ls-head: 0.08em;
  --ls-hero: 0.04em;
  --hero-title-size: clamp(2.5rem, 10.5vw, 5.5rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.875rem);
  --h3-size: 1.0625rem;
  --label-size: 0.875rem;
  --label-weight: 400;
  --label-ls: 0.06em;
  --label-transform: none;
  --head-align: center;
  --head-inline: auto;

  --container: 1120px;
  --space-section: clamp(72px, 12vw, 136px);
  --radius: 14px;
  --radius-img: 12px;
  --radius-btn: 14px;
  --radius-badge: 4px;
  --btn-min-h: 60px;
  --btn-border-w: 2px;

  --about-media-ratio: 3 / 2;
  --point-bg: #ffffff;
  --point-num-size: 2.5rem;
  --point-num-radius: 6px;
  --point-num-bg: #ffcf3f;
  --point-num-text: #1f2328;
  --point-num-border-w: 2px;
  --point-num-fs: 1rem;

  /* 料金：色見本のカード（上に色の帯）。スマホ1列・タブレット2列・PC3列 */
  --menu-cols-lg: repeat(2, minmax(0, 1fr));
  --menu-gap: 20px;
  --menu-item-areas: "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 0;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 14px;
  --price-size: 1.5rem;
  --map-ratio: 4 / 3;

  /* 動くイラストのスタイルだけで使う値（premium/iso.css・scripts/iso.py のクラス） */
  --iso-ink: #1f2328;
  --iso-paper: #ffffff;
  --iso-grid: #edf0f4;
  --iso-yellow: #ffcf3f;
  --iso-yellow-d: #eab21b;
  --iso-coral: #ff8f6b;
  --iso-mint: #5fd3a6;
  --iso-sky: #6cb8ff;
  --iso-cream: #fff1cf;
  --iso-lawn: #a9e59a;
  --iso-lawn-l: #7fcf73;
  --iso-lawn-r: #5fb357;
  --iso-concrete: #eef0f3;
  --iso-concrete-d: #cfd5dc;
  --iso-road: #9aa4b0;
  --iso-road-d: #7d8793;
  --iso-roof: #4b5f7d;
  --iso-roof-d: #3a4a63;
  --iso-roof-dd: #2e3b50;
  --iso-glass: #bfe3ff;
  --iso-door: #d99a5b;
  --iso-tree: #5fc36d;
  --iso-trunk: #9a6b43;
  --iso-skin: #ffd9b8;
  --iso-grad: linear-gradient(100deg, #ffcf3f 0%, #9fe0a6 45%, #6cb8ff 100%);
  /* お知らせは、方眼の地の上に置いた墨の板（iso.css の .iso-board。contrast.py の対象外なので @adjust に比を書いた） */
  --iso-board-bg: #2b3038;
  --iso-board-text: #ffffff;
  --iso-board-muted: #c9cfd6;
  --iso-board-accent: #ffcf3f;
  --iso-board-line: #4a515c;
}

/* @theme paint-d
   @name 塗り替わる写真
   @desc 白と淡い水色に青。いちばん上で、施工の前の写真の上をローラーが横切り、施工の後の写真に塗り替えていく。実績では、写真の上の線を左右に動かして、施工の前と後を見比べられる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Heebo:wght@500;800&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @source 動きの型は、業種別サイト傾向調査の外壁塗装・屋根工事の「写真4枚のフェードズーム」（三和ペイント。コピー「明日を塗り替える。」）と「施工写真の背景スライドショー」（ペイントホームズ）、施工事例・ビフォーアフターの写真を本文に並べる型（7社中5社）。調査の記述から型だけを借り、施工の前と後の写真の切り替えを、ローラーが横切って塗り替わる動きにした。配色は三和ペイントの青のグラデーション #008ad2・#204483・#44aeea と、Heebo の英語の小見出しから。文章・画像・コードは写していない。外壁塗装 C（等角図のイラスト）とは別の型
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film roller compare
   @slides hero works-1 works-2:roller works-3 works-4:roller
   @adjust 水色 #44aeea は白地との比が 2.5:1 のため、線とピンだけに使う。文字に使う差し色は #1b5a9e、ボタンは #1466ad（白い文字と 5.9:1）。屋号は写真の上の白い面（93%）に置き、ローラーが通る写真には色を重ねない
*/
:root[data-theme="paint-d"] {
  --c-bg: #ffffff;
  --c-surface: #f4f8fc;
  --c-band: #eaf3fb;
  --c-text: #172a45;
  --c-muted: #445672;
  --c-line: #cfe0ef;
  --c-accent: #1b5a9e;
  --c-accent-deco: #44aeea;
  --c-accent-2: #008ad2;
  --c-btn-bg: #1466ad;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #204483;
  --c-btn2-border: #204483;
  --c-price: #172a45;
  --c-badge-bg: #204483;
  --c-badge-text: #ffffff;
  --c-focus: #1466ad;
  --c-ph-a: #e4edf6;
  --c-ph-b: #d0dfee;
  --c-ph-text: #1f3150;
  --c-map-bg: #eaf3fb;
  --c-map-line: #d7e6f4;
  --c-map-road: #ffffff;
  --c-map-pin: #008ad2;

  --hero-bg: #0d2345;
  --hero-text: #172a45;
  --hero-muted: #1b5a9e;
  --hero-card-bg: rgba(255, 255, 255, 0.93);
  --hero-card-pad: clamp(22px, 5vw, 36px);
  --hero-card-radius: 6px;
  --hero-ph-text: #1f3150;
  --cta-top-bg: #eaf3fb;
  --cta-top-text: #172a45;
  --cta-bottom-bg: #eaf3fb;
  --cta-bottom-text: #172a45;
  --footer-bg: #0f2140;
  --footer-text: #e6eef7;

  --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: "Heebo", "Noto Sans JP", sans-serif;
  --font-num: "Heebo", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.375rem, 5vw, 2rem);
  --label-size: 0.875rem;
  --label-weight: 800;
  --label-ls: 0.22em;
  --head-align: left;
  --head-rule-w: 56px;
  --head-rule-h: 4px;

  --radius: 6px;
  --radius-img: 6px;
  --radius-btn: 6px;

  /* 写真：画面いっぱいの写真（色は重ねない）の左下に白い面と屋号。左上に「塗装前」「塗装後」の札 */
  --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(86svh, 780px);
  --hero-body-align: end;
  --hero-body-max: 30rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #f4f8fc;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 6px;
  --point-num-bg: #1466ad;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  --price-size: 1.3125rem;

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

  --mv-slide: 6s;
  --mv-toggle-bg: #204483;
  --mv-toggle-fg: #ffffff;
}

/* @theme paint-e
   @name めくる塗装の記録
   @desc 淡いグレーの紙に紺の文字と金の線、紹介の段は紺の地。写真は止めたまま、大きな明朝と番号で見せる。読み進めると大きな英字がすべり、施工の前と後の写真が下からめくれて出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Sawarabi+Mincho&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査の外壁塗装・屋根工事の観察から借りた。施工事例と施工の前後の写真を本文に並べる型（到達できた7社中5社。ガイソーと外壁塗装の窓口は、写真に工期・費用・都道府県を添える）を、番号を振って2列に並べる前と後の写真にした。実績を大きな数字で見せる型（オンテックスの月間契約件数・累計施工実績、ペイントホームズの実績カウンター、プロタイムズの写真のスライダーの数字バッジ）と、各セクションに英語のサブ見出しを添える型（三和ペイント）を、大きな番号と線だけの大きな英字で組む誌面にした（実績の数字は足さず、数字は A の本文にあるものだけ）。配色はガイソー・児玉塗装・ペイントホームズの紺 #00395c・#174785、黄 #ffcb00、金 #cc9955、ボタンの赤 #d52424、薄グレー #f6f6f6、書体は児玉塗装が見出しに使う Sawarabi Mincho と欧文の Cormorant Garamond。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 金 #cc9955 は紙 #f6f6f6 との比が 2.35:1 のため、線と大きな英字の線だけに使い、文字に使う金は同じ色相で暗くした #8b612a（紙と 5.06:1）。紺の地の上の番号は黄 #ffcb00（7.93:1）。ボタンの赤 #d52424 に白い文字（5.11:1）。フォーカス枠は paint-a と同じ #b07a33（紙と 3.42:1、紺の地と 3.26:1、下の連絡帯と 3.14:1）。下の連絡帯は、紺を白に9%混ぜた #e8edf0
*/
:root[data-theme="paint-e"] {
  --c-bg: #f6f6f6;
  --c-surface: #ffffff;
  --c-band: #e8edf0;
  --c-text: #00395c;
  --c-muted: #4a5563;
  --c-line: #cfd6dc;
  --c-accent: #8b612a;
  --c-accent-deco: #cc9955;
  --c-accent-2: #ffcb00;
  --c-btn-bg: #d52424;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00395c;
  --c-btn2-border: #00395c;
  --c-price: #00395c;
  --c-badge-bg: #00395c;
  --c-badge-text: #ffffff;
  --c-focus: #b07a33;
  --c-ph-a: #e6e9ec;
  --c-ph-b: #d0d7de;
  --c-ph-text: #28323d;
  --c-map-bg: #eceef0;
  --c-map-line: #dde2e6;
  --c-map-road: #ffffff;
  --c-map-pin: #d52424;

  --hero-bg: #f6f6f6;
  --hero-text: #00395c;
  --hero-muted: #8b612a;
  --cta-top-bg: #f6f6f6;
  --cta-top-text: #00395c;
  --cta-bottom-bg: #e8edf0;
  --cta-bottom-text: #00395c;
  --footer-bg: #174785;
  --footer-text: #ffffff;

  /* 紹介の段は紺の地に反転し、番号は黄。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #00395c;
  --about-text: #ffffff;
  --about-muted: #c9d4df;
  --about-accent: #ffcb00;
  --about-surface: #0a4468;
  --about-line: #33607f;
  --about-deco: #cc9955;
  --menu-bg: #f6f6f6;
  --news-bg: #f6f6f6;
  --contact-bg: #f6f6f6;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Sawarabi Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Sawarabi Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Cormorant Garamond", "Sawarabi Mincho", serif;
  --font-num: "Cormorant Garamond", "Sawarabi Mincho", serif;
  --fw-head: 400;
  --fw-hero: 400;
  --fw-num: 400;
  --lh-body: 1.9;

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

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

  /* 型（premium/folio.css）の色 */
  --fo-outline: #cc9955;
  --mv-toggle-bg: #00395c;
  --mv-toggle-fg: #ffffff;
}