/*!
  @industry carwash
  @label 出張洗車・コーティング
  @order 16
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「16. 出張洗車・カーコーティング業」スタイルの型（3型）
*/

/* @theme carwash-a
   @name 元気な量販
   @desc 白地に赤・黄・青。赤い面に太い屋号、細長の英字の大見出し。料金は写真カードで並べ、角丸と影でにぎやかに
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Oswald:wght@400;700&display=swap
   @source 白×ブランドカラーのバナー量販型（KeePer LABO・カーコンビニ倶楽部・オートバックス・イエローハット）。赤 #cd1125・#e5001e、黄 #fabe00・#fbf500、青 #114da4、欧文 Oswald
   @adjust なし（黄は文字に使わず、ヒーローの小見出し（#cd1125 の面に #fbf500）と連絡ボタンの帯の地だけに使う）
*/
:root[data-theme="carwash-a"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f3f4f6;
  --c-text: #1a1a1a;
  --c-muted: #4d4d4d;
  --c-line: #dcdfe4;
  --c-accent: #cd1125;
  --c-accent-deco: #fabe00;
  --c-accent-2: #114da4;
  --c-btn-bg: #e5001e;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #114da4;
  --c-btn2-border: #114da4;
  --c-price: #cd1125;
  --c-badge-bg: #cd1125;
  --c-badge-text: #ffffff;
  --c-focus: #114da4;
  --c-ph-a: #eef1f5;
  --c-ph-b: #dde3ea;
  --c-ph-text: #34404d;
  --c-map-bg: #eef1f5;
  --c-map-line: #dde3ea;
  --c-map-road: #ffffff;
  --c-map-pin: #e5001e;

  --hero-bg: #cd1125;
  --hero-text: #ffffff;
  --hero-muted: #fbf500;
  --cta-top-bg: #fabe00;
  --cta-top-text: #1a1a1a;
  --cta-bottom-bg: #fff6cc;
  --cta-bottom-text: #1a1a1a;
  --footer-bg: #114da4;
  --footer-text: #ffffff;
  --label-color: #114da4;

  --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: 900;
  --lh-body: 1.8;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.5rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 700;
  --label-ls: 0.04em;
  --head-align: center;
  --head-rule-w: 48px;
  --head-rule-h: 5px;
  --head-inline: auto;

  --space-section: clamp(48px, 8vw, 88px);
  --space-head: clamp(24px, 5vw, 40px);
  --radius: 12px;
  --radius-img: 10px;
  --radius-btn: 10px;
  --radius-badge: 6px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  --btn-shadow: 0 4px 0 rgba(0, 0, 0, 0.18);

  /* 写真：横長の写真の下に、赤い面で屋号を大きく */
  --hero-body-pad: clamp(24px, 5vw, 40px);
  --hero-body-max: 44rem;

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

  /* 料金：写真カード型 */
  --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: 12px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.375rem;
  --price-note-display: block;

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

/* @theme carwash-b
   @name 技術系
   @desc 白とグレーに黒、差し色は橙。全面写真に黒を重ね、細い英字の大見出し。施工例は黒地に並べ、角は立てる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@300;400;700&display=swap
   @source 白×グレーに黒基調写真の技術系コーティング型（G'ZOX・NOJ）。#ffffff・#dedede・#bdbdbd・#313131・#212121、差し色 #f08200、赤いボタン #e54437、欧文 Roboto
   @adjust ボタン #e54437→#d23d31（白い文字との比を 4.5:1 以上にするため）。フォーカス枠は白地と黒地の両方で 3:1 以上になるよう #f08200→#c96a00。#f08200 は線と番号の面にだけ使う
*/
:root[data-theme="carwash-b"] {
  --c-bg: #ffffff;
  --c-surface: #f4f4f4;
  --c-band: #eeeeee;
  --c-text: #212121;
  --c-muted: #4f4f4f;
  --c-line: #bdbdbd;
  --c-accent: #212121;
  --c-accent-deco: #f08200;
  --c-accent-2: #313131;
  --c-btn-bg: #d23d31;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #212121;
  --c-btn2-border: #212121;
  --c-price: #212121;
  --c-badge-bg: #212121;
  --c-badge-text: #ffffff;
  --c-focus: #c96a00;
  --c-ph-a: #3a3a3a;
  --c-ph-b: #262626;
  --c-ph-text: #f2f2f2;
  --c-map-bg: #eeeeee;
  --c-map-line: #dedede;
  --c-map-road: #ffffff;
  --c-map-pin: #f08200;

  --hero-bg: #212121;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.55);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #f4f4f4;
  --cta-top-text: #212121;
  --cta-bottom-bg: #313131;
  --cta-bottom-text: #ffffff;
  --footer-bg: #212121;
  --footer-text: #dedede;

  /* 施工例：黒地に写真を並べる */
  --works-bg: #212121;
  --works-text: #ffffff;
  --works-muted: #c4c4c4;
  --works-accent: #f08200;
  --works-line: #3d3d3d;
  --works-surface: #2b2b2b;

  --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-hero: 0.04em;
  --hero-title-size: clamp(2.75rem, 12vw, 5.5rem);
  --h2-size: 1rem;
  --label-size: clamp(2.25rem, 9vw, 3.5rem);
  --label-weight: 300;
  --label-ls: 0.04em;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 3px;

  --space-section: clamp(80px, 14vw, 160px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;

  /* 写真：全面の写真に黒を重ね、屋号を左下に大きく */
  --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: end;
  --hero-body-max: 44rem;

  --about-media-ratio: 3 / 2;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #f4f4f4;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-bg: #f08200;
  --point-num-text: #212121;
  --point-num-border-w: 0px;
  --point-num-fs: 1rem;

  /* 料金：小さな写真を左に置き、名前・説明・価格を縦に積む行 */
  --menu-item-areas: "media name" "media desc" "media price";
  --menu-item-cols: 96px minmax(0, 1fr);
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.25rem;

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

/* @theme carwash-c
   @name 濃紺のプレミアム
   @desc 濃紺と白に金の線。左に濃紺の文字、右に写真の分割型。料金は濃紺の帯に金の価格、ボタンは金の丸形
   @fonts https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;700&family=Noto+Sans+JP:wght@400;700&family=Zen+Kaku+Gothic+New:wght@500&display=swap
   @source 濃紺×ゴールドのプレミアム出張型（MobilityBox）。濃紺 #073746・#07546d・#005070、金 #ad8e50・#b99a59、本文のブロックは白〜淡いブルーグレー、Hind Madurai＋Noto Sans JP＋Zen Kaku Gothic New
   @adjust 金は白地では比が足りないため、文字には濃紺の上でだけ #b99a59 を使い（4.5:1 以上）、#ad8e50 は線にだけ使う。フォーカス枠は白地と濃紺の両方で 3:1 以上になるよう #005070→#1f8fb3
*/
:root[data-theme="carwash-c"] {
  --c-bg: #ffffff;
  --c-surface: #f5f8f9;
  --c-band: #edf2f4;
  --c-text: #1c2a30;
  --c-muted: #4a5a61;
  --c-line: #d5dfe3;
  --c-accent: #07546d;
  --c-accent-deco: #ad8e50;
  --c-accent-2: #b99a59;
  --c-btn-bg: #b99a59;
  --c-btn-text: #073746;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #073746;
  --c-btn2-border: #073746;
  --c-price: #1c2a30;
  --c-badge-bg: #07546d;
  --c-badge-text: #ffffff;
  --c-focus: #1f8fb3;
  --c-ph-a: #dfe7eb;
  --c-ph-b: #c9d6dc;
  --c-ph-text: #22343b;
  --c-map-bg: #edf2f4;
  --c-map-line: #d5dfe3;
  --c-map-road: #ffffff;
  --c-map-pin: #ad8e50;

  --hero-bg: #073746;
  --hero-text: #ffffff;
  --hero-muted: #b99a59;
  --cta-top-bg: #edf2f4;
  --cta-top-text: #1c2a30;
  --cta-bottom-bg: #073746;
  --cta-bottom-text: #ffffff;
  --footer-bg: #04252f;
  --footer-text: #e6eef1;

  /* 料金：濃紺の帯に白い文字と金の価格 */
  --menu-bg: #073746;
  --menu-text: #ffffff;
  --menu-muted: #c5d5db;
  --menu-accent: #b99a59;
  --menu-line: #2a5a69;
  --menu-surface: #0b4254;
  --menu-price: #b99a59;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-label: "Hind Madurai", "Noto Sans JP", sans-serif;
  --font-num: "Hind Madurai", "Noto Sans JP", sans-serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 1.9;
  --ls-head: 0.1em;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2.25rem, 6vw, 3.25rem);
  --h2-size: 1.0625rem;
  --label-size: clamp(1.75rem, 6vw, 2.5rem);
  --label-weight: 300;
  --label-ls: 0.16em;
  --head-align: center;
  --head-rule-w: 40px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --container: 1040px;
  --space-section: clamp(80px, 14vw, 150px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 999px;
  --radius-badge: 999px;

  /* 写真：スマホは縦長の写真の下に濃紺の面、PCは文字を左・写真を右に */
  --hero-areas-lg: "body media";
  --hero-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --hero-media-ratio: 4 / 5;
  --hero-media-ratio-lg: 4 / 3;
  --hero-body-align: center;
  --hero-body-max: 26rem;
  --hero-body-pad: clamp(36px, 8vw, 72px);

  --about-media-ratio: 4 / 5;
  --about-cols-lg: minmax(0, 5fr) minmax(0, 6fr);
  --point-bg: #f5f8f9;
  --point-num-size: 2.5rem;
  --point-num-radius: 50%;
  --point-num-text: #07546d;
  --point-num-fs: 1rem;

  --menu-item-pad: 20px 0;
  --price-size: 1.25rem;

  --works-cols: 2;
  --works-cols-lg: 3;
  --works-ratio: 3 / 2;
  --works-gap: 24px 12px;
}

/* @theme carwash-d
   @name 光が走る
   @desc 白とグレーに黒、差し色は橙。暗くした写真が重なって切り替わり、車体の光沢のように光が横切る。写真を画面に固定した帯を挟む（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:ital,wght@0,700;1,300&display=swap
   @source 動きの型は、業種別サイト傾向調査の動画のヒーロー（出張洗車・コーティングの MobilityBox：黒を50%重ねた背景動画。カーコンビニ倶楽部：動画）と、背景を固定した全画面の動画（G'ZOX）。調査の記述から型だけを借り、動画は見本の写真の切り替えで、光沢は横切る光で表した。配色は G'ZOX の白・グレー #dedede・黒 #313131 と橙 #f08200、書体は Roboto から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film gloss
   @slides hero works-4 works-1 menu-4
   @window works-6
   @adjust 橙 #f08200 は白地で比が足りないため、ボタンの地と、黒いブロックの文字だけに使う（ボタンの文字は墨 #1b1f23）。白地の文字には同じ色相を暗くした #a85400 を使う。フォーカス枠は、白地と黒いブロックの両方で 3:1 以上になる #d06a00。写真に重ねる黒は、調査の 50% では白い文字が 4.5:1 に届かないため 56% にした
*/
:root[data-theme="carwash-d"] {
  --c-bg: #ffffff;
  --c-surface: #f4f5f6;
  --c-band: #eceef0;
  --c-text: #1b1f23;
  --c-muted: #4c535a;
  --c-line: #d7dbdf;
  --c-accent: #a85400;
  --c-accent-deco: #f08200;
  --c-accent-2: #dedede;
  --c-btn-bg: #f08200;
  --c-btn-text: #1b1f23;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1b1f23;
  --c-btn2-border: #1b1f23;
  --c-price: #1b1f23;
  --c-badge-bg: #1b1f23;
  --c-badge-text: #ffffff;
  --c-focus: #d06a00;
  --c-ph-a: #e3e6e9;
  --c-ph-b: #cdd2d7;
  --c-ph-text: #262b30;
  --c-map-bg: #eceef0;
  --c-map-line: #dcdfe3;
  --c-map-road: #ffffff;
  --c-map-pin: #f08200;

  --hero-bg: #15181b;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.56);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #eceef0;
  --cta-top-text: #1b1f23;
  --cta-bottom-bg: #15181b;
  --cta-bottom-text: #ffffff;
  --footer-bg: #0e1012;
  --footer-text: #e4e6e8;

  /* 施工例は黒いブロック */
  --works-bg: #15181b;
  --works-text: #ffffff;
  --works-muted: #c3c7cb;
  --works-accent: #f08200;
  --works-line: #33383d;
  --works-surface: #202428;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: "Roboto", "Noto Sans JP", sans-serif;
  --font-label: "Roboto", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --ls-head: 0.06em;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.625rem);
  --label-size: clamp(1.75rem, 6vw, 2.5rem);
  --label-weight: 300;
  --label-ls: 0.08em;
  --label-style: italic;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 2px;

  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 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(88svh, 800px);
  --hero-body-align: center;

  --about-media-ratio: 3 / 2;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #f4f5f6;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-bg: #1b1f23;
  --point-num-text: #f08200;
  --point-num-border-w: 0px;
  --point-num-fs: 1rem;

  --menu-item-areas: "media name" "media desc" "media price";
  --menu-item-cols: 96px minmax(0, 1fr);
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.25rem;

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

  --mv-window-h: 100svh;
  --mv-window-overlay: rgba(0, 0, 0, 0.3);
  --mv-toggle-bg: #15181b;
  --mv-toggle-fg: #f08200;
}

/* @theme carwash-e
   @name めくる洗車メニュー
   @desc 淡いブルーグレーの紙に濃紺の文字と金、紹介の段は濃紺の地に反転。読み進めると線だけの大きな英字がすべり、写真が下からめくれて出て、PC ではメニューの写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;1,400&family=IBM+Plex+Sans+JP:wght@500;700&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 誌面で読ませる
   @source 出張洗車の調査で記録された動きは、ヒーローのスライダー5社・動画2社（カーコンビニ倶楽部・MobilityBox）と、背景を固定した全画面の動画（G'ZOX）で、読み進めて見せる動きの記録はなかった。出張洗車の専業の MobilityBox は、背景の動画の下に、会員数のカウンター、利用シーン4枚、前と後の写真のカルーセル、3つの特長、料金の3分岐のカード、対応エリア、体験レポート3件、LINE の連絡ボタンと、節を順に重ねていた。この節を重ねる作りと、20業種で共通だった「英字の大見出し＋日本語の小見出し」を、節ごとに番号と大きな英字を付けた誌面にした。配色は濃紺×ゴールドのプレミアム出張型（MobilityBox）の濃紺 #073746・#07546d、金 #ad8e50・#b99a59 と、本文の地の淡いブルーグレーから。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う金 #ad8e50→#7c6639（紙 #f3f6f7 と 5.07:1）。濃紺の地の上の金は #b99a59（4.76:1）。フォーカス枠は金を同じ色相で暗くした #997e47（紙と 3.56:1、濃紺と 3.30:1）
*/
:root[data-theme="carwash-e"] {
  --c-bg: #f3f6f7;
  --c-surface: #ffffff;
  --c-band: #e5ecef;
  --c-text: #073746;
  --c-muted: #43565e;
  --c-line: #cbd7dc;
  --c-accent: #7c6639;
  --c-accent-deco: #ad8e50;
  --c-accent-2: #07546d;
  --c-btn-bg: #073746;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #073746;
  --c-btn2-border: #073746;
  --c-price: #073746;
  --c-badge-bg: #07546d;
  --c-badge-text: #ffffff;
  --c-focus: #997e47;
  --c-ph-a: #dfe7eb;
  --c-ph-b: #c9d6dc;
  --c-ph-text: #22343b;
  --c-map-bg: #e5ecef;
  --c-map-line: #d3dfe3;
  --c-map-road: #ffffff;
  --c-map-pin: #ad8e50;

  --hero-bg: #f3f6f7;
  --hero-text: #073746;
  --hero-muted: #7c6639;
  --cta-top-bg: #f3f6f7;
  --cta-top-text: #073746;
  --cta-bottom-bg: #e5ecef;
  --cta-bottom-text: #073746;
  --footer-bg: #04252f;
  --footer-text: #e6eef1;

  /* 紹介の段は濃紺の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #073746;
  --about-text: #ffffff;
  --about-muted: #c5d5db;
  --about-accent: #b99a59;
  --about-surface: #062f3c;
  --about-line: #2a5a69;
  --about-deco: #ad8e50;
  --menu-bg: #f3f6f7;
  --news-bg: #f3f6f7;
  --contact-bg: #f3f6f7;

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

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

  --works-ratio: 4 / 3;

  /* 型（premium/folio.css）の色：大きな英字の線は金 */
  --fo-outline: #ad8e50;
  --mv-toggle-bg: #073746;
  --mv-toggle-fg: #ffffff;
}

/* @theme carwash-f
   @name メニューの札から選ぶ
   @desc 薄い青の卓に黒の太い線の札、赤と黄の差し色。いちばん上にメニューの写真の札を並べ、裏返ると品名と料金が出る。押すとその品が開き、施工例の写真は横に送れる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Sans+JP:wght@400;700&family=Outfit:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 出張洗車の調査では、KeePer LABO がサービスを画像のタイル9枚で一覧にし、症状別（水垢・鉄粉・花粉・ヘッドライトの黄ばみ）の入口を別に用意していた。カーコンビニ倶楽部は困りごとからメニューを並べ、お知らせを新着情報・イベント・クーポンのタブに分けていた。このタイルの一覧を、押すとその品が開くメニューの札にし、タブをお知らせの種類の絞り込みにした。札が裏返る動きは、カフェのコメダ珈琲店の、商品写真のタイルが向きを変えて切り替わるヒーローから借りた。配色は白×ブランドカラーのバナー量販型（KeePer LABO・カーコンビニ倶楽部・オートバックス・イエローハット）の赤 #cd1125・#e5001e、黄 #fabe00・#fbf500、青 #114da4、英字の書体はオートバックスの Outfit から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 卓は青 #114da4 を同じ色相で明るくした #b3cdf0（上の文字 #1a1a1a と 10.70:1）。ボタンと料金の赤は #cd1125（白い文字と 5.67:1）、#e5001e は線とピンに使う。黄 #fbf500 は英字と番号の札に使い、上の文字は #1a1a1a（15.05:1）。フォーカス枠は青 #114da4（卓と 4.92:1）
*/
:root[data-theme="carwash-f"] {
  --c-bg: #f5f7fa;
  --c-surface: #ffffff;
  --c-band: #b3cdf0;
  --c-text: #1a1a1a;
  --c-muted: #4d4d4d;
  --c-line: #dcdfe4;
  --c-accent: #114da4;
  --c-accent-deco: #e5001e;
  --c-accent-2: #fbf500;
  --c-btn-bg: #cd1125;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a1a1a;
  --c-btn2-border: #1a1a1a;
  --c-price: #cd1125;
  --c-badge-bg: #cd1125;
  --c-badge-text: #ffffff;
  --c-focus: #114da4;
  --c-ph-a: #eef1f5;
  --c-ph-b: #dde3ea;
  --c-ph-text: #34404d;
  --c-map-bg: #eef1f5;
  --c-map-line: #dde3ea;
  --c-map-road: #ffffff;
  --c-map-pin: #e5001e;

  --hero-bg: #b3cdf0;
  --hero-text: #1a1a1a;
  --hero-muted: #3d3d3d;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1a1a1a;
  --cta-bottom-bg: #fabe00;
  --cta-bottom-text: #1a1a1a;
  --footer-bg: #1a1a1a;
  --footer-text: #ffffff;

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

  --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: "Outfit", "Noto Sans JP", sans-serif;
  --font-num: "Outfit", "Noto Sans JP", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --fw-num: 700;
  --lh-body: 1.8;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 0.9375rem;
  --label-weight: 700;
  --label-ls: 0.1em;

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

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

  /* 型（premium/touch.css）の色：押せるものの線と影、英字と番号の札 */
  --tc-ink: #1a1a1a;
  --tc-sticker: #fbf500;
  --tc-radius: 12px;
  --mv-toggle-bg: #1a1a1a;
  --mv-toggle-fg: #fbf500;
}