/*!
  @industry electric
  @label 電気工事
  @order 7
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「7. 個人電気工事業」スタイルの型
  （参考は大手のコーポレートサイトだけのため、色・書体・英日見出し・写真の並べ方だけを借り、電話・料金・対応エリアは固定の構成で補う）
*/

/* @theme electric-a
   @name ネイビーの信頼
   @desc 白地にネイビーと橙。英字・日本語の見出しとリードを全段でそろえ、写真の下の紺の帯に屋号。料金は写真カード
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@500;600&display=swap
   @source 白×ネイビー・英日見出しの洗練インフラ型（ユアテック・日本電設工業・三機工業）。ネイビー #003399・#00448c、差し色の橙 #f0830b・#f37e00、淡い青グレーの面 #eef2f7、濃紺 #1e283c、Noto Sans JP＋Oswald
   @adjust 紺の帯の上の小見出しの橙 #f0830b→#ffa64d（比を 4.5:1 以上にするため）。橙のボタンは白い文字だと比が足りないため、文字を濃紺 #0b1f4d に。フォーカス枠は白地と紺の帯の両方で 3:1 以上になる #d86a00
*/
:root[data-theme="electric-a"] {
  --c-bg: #ffffff;
  --c-surface: #eef2f7;
  --c-band: #eef2f7;
  --c-text: #1b2230;
  --c-muted: #4a5568;
  --c-line: #cfd8e3;
  --c-accent: #003399;
  --c-accent-deco: #f0830b;
  --c-accent-2: #00448c;
  --c-btn-bg: #f0830b;
  --c-btn-text: #0b1f4d;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #003399;
  --c-btn2-border: #003399;
  --c-price: #003399;
  --c-badge-bg: #003399;
  --c-badge-text: #ffffff;
  --c-focus: #d86a00;
  --c-ph-a: #e3e9f1;
  --c-ph-b: #cbd6e5;
  --c-ph-text: #25334b;
  --c-map-bg: #eef2f7;
  --c-map-line: #dce3ec;
  --c-map-road: #ffffff;
  --c-map-pin: #f0830b;

  --hero-bg: #003399;
  --hero-text: #ffffff;
  --hero-muted: #ffa64d;
  --cta-top-bg: #eef2f7;
  --cta-top-text: #1b2230;
  --cta-bottom-bg: #003399;
  --cta-bottom-text: #ffffff;
  --footer-bg: #1e283c;
  --footer-text: #eef2f7;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Oswald", "Noto Sans JP", sans-serif;
  --font-num: "Oswald", "Noto Sans JP", 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);
  --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;

  --space-section: clamp(56px, 10vw, 104px);
  --space-head: clamp(28px, 5vw, 48px);
  --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: #eef2f7;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 4px;
  --point-num-bg: #003399;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：白い写真カードを、スマホ2列・PC3列で並べる（写真カード型） */
  --h3-size: 1rem;
  --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: 4px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: 1.125rem;

  --works-cols: 2;
  --works-cols-lg: 3;
  --works-ratio: 4 / 3;
  --works-gap: 20px 16px;
}

/* @theme electric-b
   @name 緑の単色
   @desc 白地に緑1色、角のない形。番号つきの英字見出し、PCは文字と写真を左右に分け、料金は写真なしの行で並べる
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 白×緑／紫の単色コーポレート型（きんでん）。緑 #007d42・#009a44、Noto Sans JP＋Montserrat
   @adjust #009a44 は白地の文字・ボタンだと比が足りないため、線・番号の飾り・地図のピンだけに使い、文字とボタンは #007d42
*/
:root[data-theme="electric-b"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f1f7f3;
  --c-text: #1f2a24;
  --c-muted: #4d5a53;
  --c-line: #cfe0d5;
  --c-accent: #007d42;
  --c-accent-deco: #009a44;
  --c-accent-2: #009a44;
  --c-btn-bg: #007d42;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #007d42;
  --c-btn2-border: #007d42;
  --c-price: #1f2a24;
  --menu-price: #007d42;
  --c-badge-bg: #007d42;
  --c-badge-text: #ffffff;
  --c-focus: #007d42;
  --c-ph-a: #e4efe8;
  --c-ph-b: #cde1d4;
  --c-ph-text: #22402d;
  --c-map-bg: #eef5f0;
  --c-map-line: #d9e7de;
  --c-map-road: #ffffff;
  --c-map-pin: #009a44;

  --hero-bg: #ffffff;
  --hero-text: #1f2a24;
  --hero-muted: #007d42;
  --cta-top-bg: #f1f7f3;
  --cta-top-text: #1f2a24;
  --cta-bottom-bg: #ffffff;
  --cta-bottom-text: #1f2a24;
  --footer-bg: #0f3a24;
  --footer-text: #f1f7f3;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Montserrat", "Noto Sans JP", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.25rem, 8vw, 3.25rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.625rem);
  --h3-size: 1.0625rem;
  --label-size: 0.8125rem;
  --label-weight: 700;
  --label-ls: 0.2em;
  --label-transform: uppercase;
  --label-counter: counter(section, decimal-leading-zero) " ";
  --head-align: left;
  --head-rule-w: 24px;
  --head-rule-h: 4px;

  --space-section: clamp(56px, 9vw, 96px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --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: 3 / 2;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #ffffff;
  --point-border-w: 1px;
  --point-align: left;
  --point-num-size: 2.25rem;
  --point-num-radius: 0px;
  --point-num-border-w: 0px;
  --point-num-text: #007d42;
  --point-num-fs: 1.75rem;

  /* 料金：写真なしの行 */
  --price-size: 1.125rem;

  --works-cols: 2;
  --works-cols-lg: 3;
  --works-ratio: 1 / 1;
  --works-gap: 20px 4px;
}

/* @theme electric-c
   @name 流れる電気
   @desc 白と紺に黄色の光。現場の写真が番号つきで切り替わり、いちばん上の写真の下の線を光が流れ続ける（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@600;700&family=Yeseva+One&display=swap
   @source 動きの型は、業種別サイト傾向調査の動画のヒーロー（電気工事の日本電設工業：ループ動画）と、番号つきのスライダー（トーエネック：1/7 のカウンター）・4枚のクロスフェード（ダイダン）。調査の記述から型だけを借り、動画は見本の写真4枚の切り替えで表し、流れる電気の線を足した。配色と書体は日本電設工業の紺 #00448c と、Noto Serif JP・Yeseva One の組み合わせから。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film counter current
   @slides hero works-3 menu-4 about
   @adjust 黄色 #ffd23f は白地との比が 1.4:1 のため、文字には使わず、流れる光とボタンの地（文字は濃紺 #0b1f3a）だけに使う。フォーカス枠は、白地と濃紺の帯の両方で 3:1 以上になる #2f7df6
*/
:root[data-theme="electric-c"] {
  --c-bg: #ffffff;
  --c-surface: #f3f6fa;
  --c-band: #eef3f9;
  --c-text: #14213d;
  --c-muted: #45506a;
  --c-line: #d6dfeb;
  --c-accent: #00448c;
  --c-accent-deco: #6fa8ff;
  --c-accent-2: #ffd23f;
  --c-btn-bg: #ffd23f;
  --c-btn-text: #0b1f3a;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00448c;
  --c-btn2-border: #00448c;
  --c-price: #14213d;
  --c-badge-bg: #00448c;
  --c-badge-text: #ffffff;
  --c-focus: #2f7df6;
  --c-ph-a: #e3eaf3;
  --c-ph-b: #cfdaea;
  --c-ph-text: #1f2d4a;
  --c-map-bg: #eef3f9;
  --c-map-line: #dbe4ef;
  --c-map-road: #ffffff;
  --c-map-pin: #00448c;

  --hero-bg: #0b1f3a;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(6, 22, 48, 0.6);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #eef3f9;
  --cta-top-text: #14213d;
  --cta-bottom-bg: #0b1f3a;
  --cta-bottom-text: #ffffff;
  --footer-bg: #071429;
  --footer-text: #e3eaf3;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Yeseva One", "Noto Serif JP", serif;
  --fw-head: 600;
  --fw-hero: 700;
  --ls-head: 0.06em;
  --ls-hero: 0.1em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.75rem);
  --label-size: 1.5rem;
  --label-weight: 400;
  --label-ls: 0.02em;
  --label-transform: none;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 3px;

  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 4px;

  /* 写真：画面いっぱいの写真に紺を重ね、左に屋号。右下に何枚目か */
  --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(80svh, 720px);
  --hero-body-align: center;
  --hero-body-pad: clamp(56px, 12vw, 96px);

  --about-media-ratio: 4 / 3;
  --point-bg: #eef3f9;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 4px;
  --point-num-bg: #00448c;
  --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: 0px;
  --menu-item-radius: 4px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: 1.125rem;

  --works-cols: 2;
  --works-cols-lg: 3;
  --works-ratio: 4 / 3;
  --works-gap: 20px 16px;

  --mv-pulse: #ffd23f;
  --mv-wire: rgba(255, 255, 255, 0.45);
  --mv-toggle-bg: #0b1f3a;
  --mv-toggle-fg: #ffffff;
}

/* @theme electric-d
   @name めくる施工の記録
   @desc 淡い青グレーの紙に濃紺の文字と青の番号、紹介の段は濃紺の地に橙、ボタンは橙。写真は止めたまま、太い屋号と大きな番号で見せる。読み進めると線だけの橙の英字がすべり、PC では工事の内容の写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;500;700;900&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査の電気工事の白×ネイビー・英日見出しの型（トーエネック・ユアテック・日本電設工業・三機工業・ダイダン）の組み方から借りた。各セクションを「英語見出し＋日本語見出し＋1〜2行のリード＋ボタン1つ」にそろえる型（ダイダン・トーエネック）を、番号と線だけの大きな英字の誌面にし、余白を広く取って淡い青グレーの面で区切る組み方を、紙の地と、濃紺の地に反転した紹介の段にした。配色はユアテックの青 #003399 と淡い面 #f2f6fb、三機工業の濃紺 #1e283c・橙 #f0830b・淡い面 #dfe9ed、書体はこの型の Noto Sans JP と、トーエネックの英字の Barlow Condensed（斜体）から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 橙 #f0830b は紙との比が 2.43:1 のため、紙の上では線だけの英字・線・ボタンの地（ボタンの文字は濃紺 #1e283c で 5.59:1）だけに使い、番号の文字は青 #003399（紙と 10.01:1）にする。濃紺の地の紹介の段では #f0830b をそのまま文字に使う（5.59:1）。フォーカス枠は、#f0830b を OKLCH で明度だけ下げた #bf6603（紙と 3.78:1、下の帯 #dfe9ed と 3.33:1、濃紺の地と 3.59:1）
*/
:root[data-theme="electric-d"] {
  --c-bg: #f2f6fb;
  --c-surface: #ffffff;
  --c-band: #dfe9ed;
  --c-text: #1e283c;
  --c-muted: #4a5366;
  --c-line: #c9d3e0;
  --c-accent: #003399;
  --c-accent-deco: #f0830b;
  --c-accent-2: #00448c;
  --c-btn-bg: #f0830b;
  --c-btn-text: #1e283c;
  --c-btn2-bg: #f2f6fb;
  --c-btn2-text: #003399;
  --c-btn2-border: #003399;
  --c-price: #1e283c;
  --c-badge-bg: #003399;
  --c-badge-text: #ffffff;
  --c-focus: #bf6603;
  --c-ph-a: #e3e9f1;
  --c-ph-b: #cbd6e5;
  --c-ph-text: #25334b;
  --c-map-bg: #e8eef5;
  --c-map-line: #d5deea;
  --c-map-road: #ffffff;
  --c-map-pin: #f0830b;

  --hero-bg: #f2f6fb;
  --hero-text: #1e283c;
  --hero-muted: #4a5366;
  --cta-top-bg: #f2f6fb;
  --cta-top-text: #1e283c;
  --cta-bottom-bg: #dfe9ed;
  --cta-bottom-text: #1e283c;
  --footer-bg: #1e283c;
  --footer-text: #f2f6fb;

  /* 紹介の段は濃紺の地に橙（三機工業の濃紺と橙）。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #1e283c;
  --about-text: #f2f6fb;
  --about-muted: #c9d2e0;
  --about-accent: #f0830b;
  --about-surface: #283348;
  --about-line: #3e4a61;
  --about-deco: #f0830b;
  --menu-bg: #f2f6fb;
  --news-bg: #f2f6fb;
  --contact-bg: #f2f6fb;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-hero: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-label: "Barlow Condensed", "Noto Sans JP", sans-serif;
  --font-num: "Barlow Condensed", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --fw-num: 400;
  --lh-body: 1.9;

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

  /* 型（premium/folio.css）の色：線だけの大きな英字は橙 */
  --fo-outline: #f0830b;
  --mv-toggle-bg: #1e283c;
  --mv-toggle-fg: #f2f6fb;
}

/* @theme electric-e
   @name 仕事の札から選ぶ
   @desc 淡い緑の卓に、深い緑の太い線の札と緑のボタン。上に並べた工事の写真の札は、裏返って名前と料金を見せ、押すとその工事の写真と説明・料金が大きく開く。工事の写真は指で送り、お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Noto+Sans+JP:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査の電気工事の白×緑／紫の単色コーポレート型（きんでん・住友電設）と、同じ業種とカフェのほかの社から借りた。事業8分野を「写真＋日本語名＋英語名」のカードで並べ、マウスを乗せると画像が替わる型（住友電設）を、裏返ると工事の名前と料金が出る写真の札にし（裏返り方は、商品写真のタイルが向きを変えて切り替わるカフェのコメダ珈琲店のヒーローから）、サービスを写真カードの3列で並べる型（ユアテック8枚・住友電設8分野・三機工業9事業）を、札を押して選ぶと工事の写真と説明・料金が開くメニューにした。施工事例のカードスライダーとモーダル（三機工業）を、横に送り、押すと大きく開く工事の写真にした（写真の説明は A の地名・建物・工事のまま。きんでんは施工事例のカードに地名・年・施設種別の3つのタグを付けていた）。お知らせを種類で絞り込むボタンは、ニュースのタブ切替（関電工・ユアテック）から。配色はきんでんの緑 #007d42・#009a44、書体はきんでんの英字の Roboto Condensed から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust #009a44 は白地との比が 3.68:1 のため、線・点・地図のピンだけに使い、文字・ボタン・料金は #007d42（白い札と 5.23:1、地 #f1f7f3 と 4.82:1）。卓は #009a44 を OKLCH で明るくした #d6ebd9 で、上の文字は深い緑 #0f3a24（10.14:1）。英字の札 #a2e4ae（#009a44 を明るくした色）の上の文字も深い緑（8.63:1）。フォーカス枠 #007d42（卓と 4.17:1、地と 4.82:1）
*/
:root[data-theme="electric-e"] {
  --c-bg: #f1f7f3;
  --c-surface: #ffffff;
  --c-band: #d6ebd9;
  --c-text: #0f3a24;
  --c-muted: #4d5a53;
  --c-line: #cfe0d5;
  --c-accent: #007d42;
  --c-accent-deco: #009a44;
  --c-accent-2: #a2e4ae;
  --c-btn-bg: #007d42;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #0f3a24;
  --c-btn2-border: #0f3a24;
  --c-price: #007d42;
  --c-badge-bg: #007d42;
  --c-badge-text: #ffffff;
  --c-focus: #007d42;
  --c-ph-a: #e4efe8;
  --c-ph-b: #cde1d4;
  --c-ph-text: #22402d;
  --c-map-bg: #e8f2eb;
  --c-map-line: #d6e6db;
  --c-map-road: #ffffff;
  --c-map-pin: #009a44;

  --hero-bg: #d6ebd9;
  --hero-text: #0f3a24;
  --hero-muted: #4d5a53;
  --cta-top-bg: #f1f7f3;
  --cta-top-text: #0f3a24;
  --cta-bottom-bg: #d6ebd9;
  --cta-bottom-text: #0f3a24;
  --footer-bg: #0f3a24;
  --footer-text: #f1f7f3;

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

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-hero: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-label: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --font-num: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --fw-num: 700;
  --lh-body: 1.85;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --label-transform: uppercase;
  --label-size: 0.8125rem;
  --label-weight: 700;
  --label-ls: 0.16em;

  --radius: 12px;
  --radius-img: 10px;
  --radius-btn: 10px;
  --radius-badge: 2px;

  /* 型（premium/touch.css）の色：押せるものの線と影は深い緑、英字の札は明るい緑 */
  --tc-ink: #0f3a24;
  --tc-sticker: #a2e4ae;
  --tc-radius: 12px;
  --mv-toggle-bg: #0f3a24;
  --mv-toggle-fg: #ffffff;
}