/*!
  @industry cleaning
  @label ハウスクリーニング
  @order 13
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「13. ハウスクリーニング業」スタイルの型（3型。読めた8社はすべて全国ブランドかFC本部で、単店は含まない）
*/

/* @theme cleaning-a
   @name 家庭的ポップ
   @desc 白とクリームにピンクと橙、茶色の文字。丸ゴシックの大きな英字見出しと、写真カードの料金表でにぎやかに
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 型1「白×ピンクの家庭的ポップ」（ハートクリーニング・クリーンクルー・ベアーズ）。ピンク #e6007d（LINEのボタン・番号の丸）・#f14886（電話ボタンの枠）、橙 #f59625（見出しの線・人気ラベル）、青 #015cab（フォーカス枠）、文字 ブラウン #704040。料金を写真カードで先に見せる
   @adjust 文字に使うピンク #e6007d→#d90076（クリームの帯で 4.24:1 のため）、ヒーローの小見出し #e6007d→#c4006a（白い面を黒い写真に重ねたときに 4.5:1 を取るため）。人気ラベルは白い文字では足りないため、文字を濃い茶 #3d1f1f にした
*/
:root[data-theme="cleaning-a"] {
  --c-bg: #ffffff;
  --c-surface: #fff7ec;
  --c-band: #fff7ec;
  --c-text: #704040;
  --c-muted: #7a5450;
  --c-line: #f3dccf;
  --c-accent: #d90076;
  --c-accent-deco: #f59625;
  --c-accent-2: #015cab;
  --c-btn-bg: #e6007d;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #704040;
  --c-btn2-border: #f14886;
  --c-price: #d90076;
  --c-badge-bg: #f59625;
  --c-badge-text: #3d1f1f;
  --c-focus: #015cab;
  --c-ph-a: #ffeef3;
  --c-ph-b: #ffd9e5;
  --c-ph-text: #7a3b4b;
  --c-map-bg: #fff4f7;
  --c-map-line: #ffe3ec;
  --c-map-road: #ffffff;
  --c-map-pin: #e6007d;

  --hero-bg: #ffd9e5;
  --hero-text: #704040;
  --hero-muted: #c4006a;
  --hero-card-bg: rgba(255, 255, 255, 0.94);
  --hero-card-pad: clamp(20px, 5vw, 32px);
  --hero-card-radius: 20px;
  --cta-top-bg: #fff0f5;
  --cta-top-text: #704040;
  --cta-bottom-bg: #fff0f5;
  --cta-bottom-text: #704040;
  --footer-bg: #704040;
  --footer-text: #fff7ec;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "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;
  --lh-body: 1.85;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.25rem, 10vw, 3.75rem);
  --h2-size: 1.125rem;
  --h3-size: 1.0625rem;
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 800;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 4px;
  --head-inline: auto;

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

  /* 写真：全面の写真に、角の丸い白い面で屋号と1文を重ねる */
  --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(76svh, 700px);
  --hero-body-align: end;
  --hero-body-max: 28rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 999px;
  --point-num-bg: #e6007d;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：写真カード型。価格は折り返さないため、スマホの2列では「12,100円（税込）」が入る大きさに縮める */
  --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 8px 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 16px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: clamp(0.9375rem, 4.4vw, 1.25rem);

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

/* @theme cleaning-b
   @name きちんと信頼
   @desc 白と薄いグレーに赤い線、こげ茶の文字。小さな英字見出しを左に寄せ、写真の下のこげ茶の面に屋号を置く
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@500;600&display=swap
   @source 型2「白×赤のコーポレート信頼型」（おそうじ本舗・ダスキン・おそうじ革命）。赤 #e60012（ボタン・見出しの線・番号）、こげ茶 #4b3e2e（文字・ヒーローの文字面）、ベージュ #a99883（飾り）、帯 #f5f5f7。Noto Sans JP＋Oswald。「選ばれる理由」を3点に絞る見せ方
   @adjust 文字に使う赤 #e60012→#d50011（薄いグレーの帯で 4.41:1 のため）。ベージュ #a99883 は白地で 2.80:1 のため、文字には使わず、下の連絡帯の面 #efe9e1 に薄めて使った
*/
:root[data-theme="cleaning-b"] {
  --c-bg: #ffffff;
  --c-surface: #f5f5f7;
  --c-band: #f5f5f7;
  --c-text: #4b3e2e;
  --c-muted: #6a5c4c;
  --c-line: #e0d9cf;
  --c-accent: #d50011;
  --c-accent-deco: #e60012;
  --c-accent-2: #a99883;
  --c-btn-bg: #e60012;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #4b3e2e;
  --c-btn2-border: #4b3e2e;
  --c-price: #4b3e2e;
  --c-badge-bg: #e60012;
  --c-badge-text: #ffffff;
  --c-focus: #e60012;
  --c-ph-a: #eeeae4;
  --c-ph-b: #ddd5ca;
  --c-ph-text: #4b3e2e;
  --c-map-bg: #f3f1ee;
  --c-map-line: #e4dfd8;
  --c-map-road: #ffffff;
  --c-map-pin: #e60012;

  --hero-bg: #4b3e2e;
  --hero-text: #ffffff;
  --hero-muted: #e3d8c9;
  --cta-top-bg: #ffffff;
  --cta-top-text: #4b3e2e;
  --cta-bottom-bg: #efe9e1;
  --cta-bottom-text: #4b3e2e;
  --footer-bg: #2e261d;
  --footer-text: #f5f5f7;

  --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;
  --lh-body: 1.85;
  --ls-hero: 0.1em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-size: 0.875rem;
  --label-weight: 500;
  --label-transform: uppercase;
  --label-ls: 0.22em;
  --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;

  /* 写真：写真（スマホ 4:3、PC 21:9）の下に、こげ茶の面で屋号と1文を置く */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;

  --about-media-ratio: 4 / 3;
  --point-bg: #f5f5f7;
  --point-border-w: 0px;
  --point-num-size: 2.25rem;
  --point-num-radius: 2px;
  --point-num-bg: #e60012;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：行型（写真は出さない） */
  --price-size: 1.375rem;

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

/* @theme cleaning-c
   @name すっきり淡色
   @desc 淡いピンクの帯にマゼンタと水色。余白と角丸を大きく取り、写真と文字を左右に分け、料金は白いカードで並べる
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 型3「淡色地×ピンク・水色のEC風」（カジタク・東京ガスのハウスクリーニング）。淡いピンクの帯 #f5e8f1・#ffe5e5、マゼンタ #b60081（差し色の文字・ボタン・価格）、ピンク #e56d8d（見出しの線・地図のピン）、水色 #4bb1d6（番号の丸・人気ラベル・電話ボタンの枠）、文字 濃紺 #00233a。Noto Sans JP＋Montserrat
   @adjust 水色 #4bb1d6 は白い文字では 2.45:1 のため、番号とラベルの文字を濃紺 #00233a にした（6.58:1）。ピンク #e56d8d は 3.04:1 のため飾りだけに使った
*/
:root[data-theme="cleaning-c"] {
  --c-bg: #ffffff;
  --c-surface: #fdf6fa;
  --c-band: #f5e8f1;
  --c-text: #00233a;
  --c-muted: #3f5566;
  --c-line: #ecd9e6;
  --c-accent: #b60081;
  --c-accent-deco: #e56d8d;
  --c-accent-2: #4bb1d6;
  --c-btn-bg: #b60081;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00233a;
  --c-btn2-border: #4bb1d6;
  --c-price: #b60081;
  --c-badge-bg: #4bb1d6;
  --c-badge-text: #00233a;
  --c-focus: #b60081;
  --c-ph-a: #f8eef4;
  --c-ph-b: #ebd9e5;
  --c-ph-text: #3b2a44;
  --c-map-bg: #eff7fb;
  --c-map-line: #dcecf4;
  --c-map-road: #ffffff;
  --c-map-pin: #e56d8d;

  --hero-bg: #f5e8f1;
  --hero-text: #00233a;
  --hero-muted: #b60081;
  --cta-top-bg: #ffffff;
  --cta-top-text: #00233a;
  --cta-bottom-bg: #ffe5e5;
  --cta-bottom-text: #00233a;
  --footer-bg: #00233a;
  --footer-text: #f5e8f1;

  --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-head: 700;
  --fw-hero: 700;
  --lh-body: 1.9;
  --ls-hero: 0.14em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.75rem);
  --label-size: 0.8125rem;
  --label-weight: 600;
  --label-transform: uppercase;
  --label-ls: 0.24em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 2px;
  --head-inline: auto;

  --space-section: clamp(64px, 11vw, 120px);
  --radius: 24px;
  --radius-img: 20px;
  --radius-btn: 999px;
  --radius-badge: 999px;
  --shadow: 0 8px 24px rgba(0, 35, 58, 0.06);

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

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 999px;
  --point-num-bg: #4bb1d6;
  --point-num-text: #00233a;
  --point-num-border-w: 0px;
  --point-num-fs: 1.0625rem;

  /* 料金：小さな写真つきの行を、角の丸い白いカードにする。スマホで名前の列が狭くならないよう、写真の右に名前・価格・説明を縦に積む */
  --menu-cols-lg: repeat(2, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 88px minmax(0, 1fr);
  --menu-item-pad: 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 20px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.1875rem;

  /* 作業の前と後を横に並べるため、PCでも2列。正方形だとPCで縦に長くなりすぎるので 4:3 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;
  --works-gap: 16px;
}

/* @theme cleaning-d
   @name 泡と拭き上げ
   @desc 濃紺を重ねた写真に白い文字、淡いピンクの帯にマゼンタと水色。いちばん上の掃除の写真が重なって切り替わり、下から泡が浮かんでは消える（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 映像で見せる
   @source ハウスクリーニングの調査で読めた8社に、ヒーローに動画を使う社はなかった（本文に動画を埋め込む社は、おそうじ革命の YouTube とカジタクの Instagram のリール）。ヒーローはスライダー5社（おそうじ本舗・ダスキン・カジタク・クリーンクルー・東京ガス。どれも文字入りのキャンペーンバナーを回す）と、全画面の写真1枚3社（おそうじ革命・ベアーズ・ハートクリーニング）だった。この2つの型を合わせて、文字を焼き込まない掃除の写真を画面いっぱいに重ねて切り替える形にし、泡の飾りを足した。配色と書体はカジタク・東京ガスのハウスクリーニングの淡いピンク #f5e8f1・#ffe5e5、マゼンタ #b60081、ピンク #e56d8d、水色 #4bb1d6、濃紺 #00233a と Montserrat から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film bubbles
   @slides hero about menu-1 menu-2
   @adjust 写真には、白い文字が 4.5:1 以上になるよう濃紺 #00233a の 62% を重ねる。水色 #4bb1d6 は白い文字では 2.45:1 のため、番号の丸とラベルの地にして文字を濃紺にする（6.58:1）。ピンク #e56d8d は白地で 3.04:1 のため、線と地図のピンだけに使う
*/
:root[data-theme="cleaning-d"] {
  --c-bg: #ffffff;
  --c-surface: #fdf6fa;
  --c-band: #f5e8f1;
  --c-text: #00233a;
  --c-muted: #3f5566;
  --c-line: #ecd9e6;
  --c-accent: #b60081;
  --c-accent-deco: #e56d8d;
  --c-accent-2: #4bb1d6;
  --c-btn-bg: #b60081;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00233a;
  --c-btn2-border: #4bb1d6;
  --c-price: #b60081;
  --c-badge-bg: #4bb1d6;
  --c-badge-text: #00233a;
  --c-focus: #b60081;
  --c-ph-a: #f8eef4;
  --c-ph-b: #ebd9e5;
  --c-ph-text: #3b2a44;
  --c-map-bg: #eff7fb;
  --c-map-line: #dcecf4;
  --c-map-road: #ffffff;
  --c-map-pin: #e56d8d;

  --hero-bg: #00233a;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 35, 58, 0.62);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #00233a;
  --cta-bottom-bg: #ffe5e5;
  --cta-bottom-text: #00233a;
  --footer-bg: #00233a;
  --footer-text: #f5e8f1;

  --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-head: 700;
  --fw-hero: 700;
  --lh-body: 1.9;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.75rem);
  --label-size: 0.8125rem;
  --label-weight: 600;
  --label-transform: uppercase;
  --label-ls: 0.24em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 2px;
  --head-inline: auto;

  --space-section: clamp(64px, 11vw, 120px);
  --radius: 20px;
  --radius-img: 16px;
  --radius-btn: 999px;
  --radius-badge: 999px;
  --shadow: 0 8px 24px rgba(0, 35, 58, 0.06);

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

  --about-media-ratio: 4 / 3;
  --point-bg: #fdf6fa;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 999px;
  --point-num-bg: #4bb1d6;
  --point-num-text: #00233a;
  --point-num-border-w: 0px;
  --point-num-fs: 1.0625rem;

  /* 料金：小さな写真つきの行を、角の丸い白いカードにする。スマホで名前の列が狭くならないよう、写真の右に名前・価格・説明を縦に積む */
  --menu-cols-lg: repeat(2, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 88px minmax(0, 1fr);
  --menu-item-pad: 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 20px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.1875rem;

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

  --mv-toggle-bg: #00233a;
  --mv-toggle-fg: #ffffff;
}

/* @theme cleaning-e
   @name めくる掃除の手引き
   @desc 白い紙にこげ茶の文字と赤い番号、線だけの英字はベージュ。写真は止めたまま大きな明朝と番号で見せ、読み進めると英字がすべり、PC では掃除する場所の写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500;700&family=Roboto+Condensed:ital,wght@0,400;1,400&display=swap
   @concept 誌面で読ませる
   @source ハウスクリーニングの調査で読めた8社の観察と、業種を問わない見出しの型から、誌面の組み方を借りた。「選ばれる理由」を3点に絞る見せ方（おそうじ本舗）と、ヒーローの近くに置く「追加料金なし／再作業無料」の帯（おそうじ革命）を、こげ茶の地に反転した紹介の段で、3つの強みを大きな番号で読ませる形にした。箇所別（エアコン・キッチン・浴室）のサービス写真をカードで並べる見せ方を、読み進めると場所の写真が1枚ずつめくれて替わる料金の段にした。20業種で共通だった「英字の大見出し＋日本語の小見出し」を、番号と大きな英字の誌面にした。英字がすべり写真がめくれる動きは調査では見つからず、誌面の型で足した。配色はおそうじ革命の赤 #e60012・こげ茶 #4b3e2e・ベージュ #a99883 と、同じ型の薄いグレーの帯 #f5f5f7 から、見出しの明朝はおそうじ本舗が一部に使う Noto Serif JP、英字と数字はダスキンの Roboto Condensed から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う赤 #e60012→#d50011（白い紙と 5.47:1）。こげ茶の地の上の赤は #ffa89c（5.59:1）。ボタンは赤 #e60012 に白い文字（4.80:1）。ベージュ #a99883 は白い紙で 2.80:1 のため、線だけの英字に使う。フォーカス枠は、白い紙・薄いグレーの帯・こげ茶の段のどれでも 3:1 以上になるよう、赤を明るくした #ff4a3d（白と 3.33:1、#f5f5f7 と 3.06:1、こげ茶と 3.11:1）
*/
:root[data-theme="cleaning-e"] {
  --c-bg: #ffffff;
  --c-surface: #f5f5f7;
  --c-band: #f5f5f7;
  --c-text: #4b3e2e;
  --c-muted: #6a5c4c;
  --c-line: #ddd5ca;
  --c-accent: #d50011;
  --c-accent-deco: #e60012;
  --c-accent-2: #a99883;
  --c-btn-bg: #e60012;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #4b3e2e;
  --c-btn2-border: #4b3e2e;
  --c-price: #4b3e2e;
  --c-badge-bg: #d50011;
  --c-badge-text: #ffffff;
  --c-focus: #ff4a3d;
  --c-ph-a: #eeeae4;
  --c-ph-b: #ddd5ca;
  --c-ph-text: #4b3e2e;
  --c-map-bg: #f3f1ee;
  --c-map-line: #e4dfd8;
  --c-map-road: #ffffff;
  --c-map-pin: #e60012;

  --hero-bg: #ffffff;
  --hero-text: #4b3e2e;
  --hero-muted: #6a5c4c;
  --cta-top-bg: #ffffff;
  --cta-top-text: #4b3e2e;
  --cta-bottom-bg: #f5f5f7;
  --cta-bottom-text: #4b3e2e;
  --footer-bg: #4b3e2e;
  --footer-text: #f5f5f7;

  /* 紹介の段はこげ茶の地に反転（おそうじ革命のこげ茶）。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #4b3e2e;
  --about-text: #ffffff;
  --about-muted: #e3d8c9;
  --about-accent: #ffa89c;
  --about-surface: #574836;
  --about-line: #75644f;
  --about-deco: #ffa89c;
  --menu-bg: #ffffff;
  --news-bg: #ffffff;
  --contact-bg: #ffffff;

  --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: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --font-num: "Roboto Condensed", "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;

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

  /* 型（premium/folio.css）の色：線だけの大きな英字はベージュ（白い紙でもこげ茶の段でも見える） */
  --fo-outline: #a99883;
  --mv-toggle-bg: #4b3e2e;
  --mv-toggle-fg: #ffffff;
}

/* @theme cleaning-f
   @name 場所の札から選ぶ
   @desc ピンクの卓に、茶色の太い線の写真の札。掃除する場所の札が裏返ると料金が出て、押すとその場所の写真と料金が開き、メニューも札を押して選ぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 動きの型は、ハウスクリーニングの調査の観察と、カフェの1社から借りた。場所別・お悩み別のタブ（おそうじ本舗・ダスキン）と、カテゴリのカードをタブで切り替え、横に並べて送るメニュー（白×赤のコーポレート型。おそうじ本舗・ダスキン・おそうじ革命）を、札の列で場所を選ぶと写真と料金が開くメニューにした。箇所別（エアコン・キッチン・浴室）のサービス写真をカードで並べる見せ方と、アイコンと短いラベルのカテゴリの入口（カジタク・東京ガス）を、いちばん上に並べる場所の写真の札にした。札が裏返る動きはハウスクリーニングの調査では見つからず、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）から借りた。配色はハートクリーニング・クリーンクルー・ベアーズのピンク #e6007d・#f14886、橙 #f59625、青 #015cab と、ハートクリーニングの文字のブラウン #704040 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 文字とボタンに使うピンク #e6007d→#d90076（白い札・白い文字と 4.99:1。#e6007d は白い文字と 4.51:1 で余裕がないため）。卓はピンク #f14886 を薄めた #ffd9e5 にし、上の文字は茶色 #704040（6.53:1）。橙 #f59625 は茶色の文字と 3.71:1 のため、丸い札には明るくした #ffcf8f（5.84:1）を使い、#f59625 は人気のラベルの地（文字は濃い茶 #3d1f1f、6.56:1）にする。フォーカス枠は青 #015cab（卓と 5.23:1、地と 6.48:1）
*/
:root[data-theme="cleaning-f"] {
  --c-bg: #fffaf3;
  --c-surface: #ffffff;
  --c-band: #ffd9e5;
  --c-text: #704040;
  --c-muted: #7a5450;
  --c-line: #f3dccf;
  --c-accent: #d90076;
  --c-accent-deco: #f14886;
  --c-accent-2: #ffcf8f;
  --c-btn-bg: #d90076;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #704040;
  --c-btn2-border: #704040;
  --c-price: #d90076;
  --c-badge-bg: #f59625;
  --c-badge-text: #3d1f1f;
  --c-focus: #015cab;
  --c-ph-a: #ffeef3;
  --c-ph-b: #ffd9e5;
  --c-ph-text: #7a3b4b;
  --c-map-bg: #fff4f7;
  --c-map-line: #ffe3ec;
  --c-map-road: #ffffff;
  --c-map-pin: #e6007d;

  --hero-bg: #ffd9e5;
  --hero-text: #704040;
  --hero-muted: #7a5450;
  --cta-top-bg: #fffaf3;
  --cta-top-text: #704040;
  --cta-bottom-bg: #ffd9e5;
  --cta-bottom-text: #704040;
  --footer-bg: #704040;
  --footer-text: #fff7ec;

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

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-hero: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "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;
  --lh-body: 1.85;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: none;
  --label-size: 0.9375rem;
  --label-ls: 0.08em;

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

  /* 掃除の前と後の組は、押すと裏返る札（touch.js） */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;

  /* 型（premium/touch.css）の色：押せるものの線と影、英字と番号の丸い札 */
  --tc-ink: #704040;
  --tc-sticker: #ffcf8f;
  --tc-radius: 20px;
  --mv-toggle-bg: #704040;
  --mv-toggle-fg: #ffffff;
}