/*!
  @industry aircon
  @label エアコン設置・修理
  @order 11
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「11. エアコン設置・修理業」スタイルの型（1型。読めたのは家電量販の3社だけで、専業店の見た目は取れていない）
*/

/* @theme aircon-a
   @name 清潔な青
   @desc 白地に紺の文字面と橙のボタン。見出しは左寄せで赤い短線を引き、料金は行で、作業の写真は4:3で並べる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@500;700&display=swap
   @source 白地×企業ブルー×赤差し色の量販店コーポレート（エディオン・ヤマダデンキ・ノジマ）。紺 #1a2f77（ヒーローの文字面・下の連絡帯）、青 #004ca0（差し色の文字）・#284db4、赤 #e50c0c（見出しの線・地図のピン）、橙 #f08d00（LINEのボタン）、本文 Noto Sans JP
   @adjust 橙のボタンの文字 白→紺 #1a2f77（白では 2.47:1 のため。紺で 4.96:1）。フォーカス枠は白地と紺の帯の両方で 3:1 を取るため、#284db4 を明るくした #4a84ec
*/
:root[data-theme="aircon-a"] {
  --c-bg: #ffffff;
  --c-surface: #f4f7fb;
  --c-band: #eef3fa;
  --c-text: #1c2433;
  --c-muted: #4a5568;
  --c-line: #d3dce8;
  --c-accent: #004ca0;
  --c-accent-deco: #e50c0c;
  --c-accent-2: #284db4;
  --c-btn-bg: #f08d00;
  --c-btn-text: #1a2f77;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #004ca0;
  --c-btn2-border: #004ca0;
  --c-price: #1a2f77;
  --c-badge-bg: #004ca0;
  --c-badge-text: #ffffff;
  --c-focus: #4a84ec;
  --c-ph-a: #e4ebf5;
  --c-ph-b: #ccd8ea;
  --c-ph-text: #27364f;
  --c-map-bg: #eaf0f8;
  --c-map-line: #d6e0ee;
  --c-map-road: #ffffff;
  --c-map-pin: #e50c0c;

  --hero-bg: #1a2f77;
  --hero-text: #ffffff;
  --hero-muted: #cfdcf5;
  --cta-top-bg: #eef3fa;
  --cta-top-text: #1c2433;
  --cta-bottom-bg: #1a2f77;
  --cta-bottom-text: #ffffff;
  --footer-bg: #0f1c49;
  --footer-text: #e9eef8;

  --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-head: 700;
  --fw-hero: 700;
  --lh-body: 1.85;
  --ls-head: 0.04em;
  --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.8125rem;
  --label-weight: 700;
  --label-ls: 0.18em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 3px;
  --head-inline: 0;

  --space-section: clamp(56px, 10vw, 104px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 4px;
  --radius-badge: 2px;
  --btn-shadow: 0 2px 0 rgba(15, 28, 73, 0.25);

  /* 写真：写真（スマホ 4:3、PC 21:9）の下に、紺の面で屋号と1文を置く */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;
  --hero-body-pad: clamp(28px, 6vw, 56px);

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-border-w: 1px;
  --point-num-size: 2.5rem;
  --point-num-radius: 4px;
  --point-num-bg: #1a2f77;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1rem;

  --price-size: 1.25rem;

  /* 作業の前と後を横に並べるため、PCでも2列 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;
  --works-gap: 16px;
}

/* @theme aircon-b
   @name 風の流れ
   @desc 紺を重ねた写真に白い文字。写真が切り替わり、作業の前の写真は光の帯が横切って作業の後に替わる。細い風の線が流れる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@500;700&display=swap
   @concept 映像で見せる
   @source エアコンの調査で読めたのは家電量販店の企業サイト3社だけで、動画は見つからなかった。動きの型は、同じ調査のノジマのスライダー（PC とスマホで4枚ずつ）と、施工の前と後の写真を本文に並べる型（外壁塗装7社中5社）から借り、前と後の写真を光の帯で拭き替える動きと、風の線を足した。配色はエディオン・ヤマダデンキ・ノジマの紺 #1a2f77、青 #004ca0、赤 #e50c0c、橙 #f08d00 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film breeze sweep
   @slides hero works-1 works-2:sweep works-3 works-4:sweep
   @adjust 橙のボタンの文字は紺 #1a2f77（4.96:1）。写真には、白い文字が 4.5:1 以上になるよう紺 #0c1840 の 62% を重ねる。フォーカス枠 #4a84ec（白地と 3.4:1 以上）
*/
:root[data-theme="aircon-b"] {
  --c-bg: #ffffff;
  --c-surface: #f4f7fb;
  --c-band: #eef3fa;
  --c-text: #1c2433;
  --c-muted: #4a5568;
  --c-line: #d3dce8;
  --c-accent: #004ca0;
  --c-accent-deco: #e50c0c;
  --c-accent-2: #284db4;
  --c-btn-bg: #f08d00;
  --c-btn-text: #1a2f77;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #004ca0;
  --c-btn2-border: #004ca0;
  --c-price: #1a2f77;
  --c-badge-bg: #004ca0;
  --c-badge-text: #ffffff;
  --c-focus: #4a84ec;
  --c-ph-a: #e4ebf5;
  --c-ph-b: #ccd8ea;
  --c-ph-text: #27364f;
  --c-map-bg: #eaf0f8;
  --c-map-line: #d6e0ee;
  --c-map-road: #ffffff;
  --c-map-pin: #e50c0c;

  --hero-bg: #0f1c49;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(12, 24, 64, 0.62);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #eef3fa;
  --cta-top-text: #1c2433;
  --cta-bottom-bg: #1a2f77;
  --cta-bottom-text: #ffffff;
  --footer-bg: #0f1c49;
  --footer-text: #e9eef8;

  --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-head: 700;
  --fw-hero: 700;
  --ls-hero: 0.14em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-ls: 0.2em;
  --head-align: center;
  --head-rule-w: 40px;
  --head-rule-h: 3px;
  --head-inline: auto;

  --space-section: clamp(64px, 11vw, 120px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 999px;
  --radius-badge: 2px;

  /* 写真：画面いっぱいの写真に紺を重ね、中央に屋号 */
  --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: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 40rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-border-w: 1px;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #1a2f77;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;

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

  --mv-glint: #ffffff;
  --mv-toggle-bg: #1a2f77;
  --mv-toggle-fg: #ffffff;
}

/* @theme aircon-c
   @name めくる作業の記録
   @desc 淡い青白の紙に紺の文字と赤い線。写真は止めたまま、大きな番号と線だけの英字で見せる。読み進めると英字がすべり、料金の品が1つずつ出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto+Condensed:ital,wght@0,400;1,400&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap
   @concept 誌面で読ませる
   @source エアコンの調査で読めた3社のうち、エディオンは写真1枚に、文字で組んだ言葉（SVG のテキスト）を重ねていた。この「文字で見せる」型と、20業種で共通だった「英字の大見出し＋日本語の小見出し」を、番号と大きな英字の誌面にした。配色は同じ3社の紺 #1a2f77、赤 #e50c0c から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う赤 #e50c0c→#c4151c（紙 #f7f9fc と 5.74:1）。紺の地の上の赤は #ffb4ab（7.2:1）。フォーカス枠 #4a84ec（紙と 3.43:1、紺と 3.38:1）
*/
:root[data-theme="aircon-c"] {
  --c-bg: #f7f9fc;
  --c-surface: #ffffff;
  --c-band: #eaf0f8;
  --c-text: #14213d;
  --c-muted: #4a5568;
  --c-line: #cfd8e6;
  --c-accent: #c4151c;
  --c-accent-deco: #e50c0c;
  --c-accent-2: #1a2f77;
  --c-btn-bg: #1a2f77;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a2f77;
  --c-btn2-border: #1a2f77;
  --c-price: #14213d;
  --c-badge-bg: #c4151c;
  --c-badge-text: #ffffff;
  --c-focus: #4a84ec;
  --c-ph-a: #e4ebf5;
  --c-ph-b: #ccd8ea;
  --c-ph-text: #27364f;
  --c-map-bg: #eaf0f8;
  --c-map-line: #d6e0ee;
  --c-map-road: #ffffff;
  --c-map-pin: #e50c0c;

  --hero-bg: #f7f9fc;
  --hero-text: #14213d;
  --hero-muted: #4a5568;
  --cta-top-bg: #f7f9fc;
  --cta-top-text: #14213d;
  --cta-bottom-bg: #eaf0f8;
  --cta-bottom-text: #14213d;
  --footer-bg: #1a2f77;
  --footer-text: #e9eef8;

  /* 紹介の段は紺の地に反転 */
  --about-bg: #1a2f77;
  --about-text: #ffffff;
  --about-muted: #dfe6f5;
  --about-accent: #ffb4ab;
  --about-surface: #22388a;
  --about-line: #4a5fa3;
  --about-deco: #ffb4ab;
  --menu-bg: #f7f9fc;
  --news-bg: #f7f9fc;
  --contact-bg: #f7f9fc;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", sans-serif;
  --font-hero: "Zen Kaku Gothic New", "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: 900;
  --fw-hero: 900;
  --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;

  --fo-outline: #9fb0cc;
  --mv-toggle-bg: #1a2f77;
  --mv-toggle-fg: #ffffff;
}

/* @theme aircon-d
   @name 裏返して見比べる
   @desc 空色の卓に、紺の太い線の札。いちばん上の札が裏返って作業の前と後を見せ、押すとその作業の写真へ移る。作業の写真も、押すと前と後が裏返る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 触って選ぶ
   @source エアコンの調査で読めた3社には、動きも押して選ぶ部品も見つからなかった。同じ調査のほかの業種から、施工の前と後の写真を本文に並べる型（外壁塗装7社中5社）と、ビフォーアフターのスライダー（パーソナルジムの ELEMENT）、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）を借り、前と後が裏返る札にした。配色はエディオン・ヤマダデンキ・ノジマの紺 #1a2f77、橙 #f08d00、青 #004ca0 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch board-pairs
   @adjust 橙のボタンの文字は紺 #1a2f77（4.96:1）。空色の卓 #d6ebff の上の文字は紺（10.01:1）。フォーカス枠 #b3121a（白と 6.96:1）
*/
:root[data-theme="aircon-d"] {
  --c-bg: #f5f9ff;
  --c-surface: #ffffff;
  --c-band: #d6ebff;
  --c-text: #1a2f77;
  --c-muted: #40506a;
  --c-line: #cddcf0;
  --c-accent: #004ca0;
  --c-accent-deco: #f08d00;
  --c-accent-2: #ffffff;
  --c-btn-bg: #f08d00;
  --c-btn-text: #1a2f77;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a2f77;
  --c-btn2-border: #1a2f77;
  --c-price: #b3121a;
  --c-badge-bg: #b3121a;
  --c-badge-text: #ffffff;
  --c-focus: #b3121a;
  --c-ph-a: #e4ebf5;
  --c-ph-b: #ccd8ea;
  --c-ph-text: #1a2f77;
  --c-map-bg: #e8f2ff;
  --c-map-line: #d3e3f7;
  --c-map-road: #ffffff;
  --c-map-pin: #f08d00;

  --hero-bg: #d6ebff;
  --hero-text: #1a2f77;
  --hero-muted: #40506a;
  --cta-top-bg: #f5f9ff;
  --cta-top-text: #1a2f77;
  --cta-bottom-bg: #d6ebff;
  --cta-bottom-text: #1a2f77;
  --footer-bg: #1a2f77;
  --footer-text: #f5f9ff;

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

  --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: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-num: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --fw-num: 800;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --label-transform: none;
  --label-size: 0.9375rem;
  --label-ls: 0.08em;

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

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

  --tc-ink: #1a2f77;
  --mv-toggle-bg: #1a2f77;
  --mv-toggle-fg: #ffffff;
}