/*!
  @industry housekeeping
  @label 家事代行
  @order 15
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「15. 家事代行業」スタイルの型（クリーム地×オレンジの温かみ・白×マゼンタの大手感。外れ値の白×深緑は使わない）
*/

/* @theme housekeeping-a
   @name 温かみ
   @desc クリーム地に橙と緑、丸ゴシックの見出し。余白を広く取り、水彩の絵を右に置く分割型。強みは丸番号
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700&family=Playfair+Display:ital,wght@1,400&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @source クリーム地×オレンジの温かみ（CaSy・ミニメイド・サービス・サニーメイドサービス・キャットハンド・ピナイ家事代行サービス）。地 #f8f4ed・#f9f8f4、橙 #f09502・#e57645、文字 #3c2c1c、緑 #419759、英字 Playfair Display
   @adjust 文字に使う橙 #e57645→#a8471c、ボタン #e57645→#b4501f、電話ボタンの緑 #419759→#2f7443（4.5:1 以上にするため）。#f09502・#419759 は線と番号の丸などの飾りに使う
*/
:root[data-theme="housekeeping-a"] {
  --c-bg: #f8f4ed;
  --c-surface: #fffdf9;
  --c-band: #f1e7d6;
  --c-text: #3c2c1c;
  --c-muted: #6a5443;
  --c-line: #e2d3bd;
  --c-accent: #a8471c;
  --c-accent-deco: #f09502;
  --c-accent-2: #419759;
  --c-btn-bg: #b4501f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #2f7443;
  --c-btn2-border: #419759;
  --c-price: #3c2c1c;
  --c-badge-bg: #a8471c;
  --c-badge-text: #ffffff;
  --c-focus: #2f7443;
  --c-ph-a: #f1e4cf;
  --c-ph-b: #e8d5b9;
  --c-ph-text: #5a4330;
  --c-map-bg: #f3ead9;
  --c-map-line: #e6d8c2;
  --c-map-road: #fffdf9;
  --c-map-pin: #e57645;

  --hero-bg: #f8f4ed;
  --hero-text: #3c2c1c;
  --hero-muted: #a8471c;
  --cta-top-bg: #f1e7d6;
  --cta-top-text: #3c2c1c;
  --cta-bottom-bg: #fbe8cc;
  --cta-bottom-text: #3c2c1c;
  --footer-bg: #3c2c1c;
  --footer-text: #f8f4ed;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS Rounded 1c", "Zen Kaku Gothic New", "Hiragino Maru Gothic ProN", sans-serif;
  --font-label: "Playfair Display", "Zen Kaku Gothic New", serif;
  --font-num: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 2;
  --ls-head: 0.06em;
  --ls-hero: 0.1em;
  --hero-title-size: clamp(2.25rem, 6.5vw, 3.25rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.625rem);
  --label-size: 1.125rem;
  --label-weight: 400;
  --label-style: italic;
  --label-transform: none;
  --label-ls: 0.04em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 2px;
  --head-inline: auto;

  --container: 1040px;
  --space-section: clamp(72px, 13vw, 140px);
  --space-head: clamp(32px, 6vw, 52px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 999px;

  /* 写真：スマホは絵の下に文字、PCは文字を左・絵を右に。絵は切らずに見せる */
  --hero-areas-lg: "body media";
  --hero-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --hero-media-ratio: 3 / 2;
  --hero-media-ratio-lg: 4 / 3;
  --hero-body-align: center;
  --hero-body-max: 26rem;
  --hero-body-pad: clamp(32px, 7vw, 64px);

  --about-media-ratio: 4 / 3;
  --about-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 3.5rem;
  --point-num-radius: 50%;
  --point-num-bg: #fffdf9;
  --point-num-text: #a8471c;
  --point-num-fs: 1.25rem;

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

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

/* @theme housekeeping-b
   @name 明るい
   @desc 白と淡いグレーにマゼンタ、太い英字の見出し。絵の下にマゼンタの面、料金は白い角丸カードで並べる
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @source 白×マゼンタの大手感（ベアーズ・カジタク）の配色だけ。地 白・#f5f7f7、マゼンタ #e6007d・#b60081、文字 #00233a、橙 #df9300、薄グレーの帯 #f6f6f6、Noto Sans JP＋Montserrat
   @adjust ヒーローの面 #e6007d→#df0079（白い文字との比に余裕を持たせるため）。文字とボタンは #b60081。#e6007d・#df9300 は線と飾りだけに使う
*/
:root[data-theme="housekeeping-b"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f5f7f7;
  --c-text: #00233a;
  --c-muted: #4a5d6b;
  --c-line: #dfe5e8;
  --c-accent: #b60081;
  --c-accent-deco: #e6007d;
  --c-accent-2: #df9300;
  --c-btn-bg: #b60081;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00233a;
  --c-btn2-border: #00233a;
  --c-price: #b60081;
  --c-badge-bg: #b60081;
  --c-badge-text: #ffffff;
  --c-focus: #00233a;
  --c-ph-a: #f8e8f0;
  --c-ph-b: #efd5e3;
  --c-ph-text: #5a2a46;
  --c-map-bg: #f5f7f7;
  --c-map-line: #e3e9ea;
  --c-map-road: #ffffff;
  --c-map-pin: #e6007d;

  --hero-bg: #df0079;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #00233a;
  --cta-bottom-bg: #fdeaf4;
  --cta-bottom-text: #00233a;
  --footer-bg: #00233a;
  --footer-text: #ffffff;

  --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: 900;
  --lh-body: 1.85;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.5rem, 10vw, 4rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 800;
  --label-ls: 0.06em;
  --head-align: center;
  --head-rule-w: 24px;
  --head-rule-h: 4px;
  --head-inline: auto;

  --space-section: clamp(48px, 8vw, 88px);
  --space-head: clamp(24px, 5vw, 40px);
  --radius: 14px;
  --radius-img: 14px;
  --radius-btn: 999px;
  --shadow: 0 6px 18px rgba(0, 35, 58, 0.08);

  /* 写真：絵を横いっぱいに見せ、その下のマゼンタの面に屋号を中央寄せで置く */
  --hero-media-ratio: 3 / 2;
  --hero-media-ratio-lg: 2 / 1;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 46rem;
  --hero-body-pad: clamp(24px, 5vw, 44px);

  --about-media-ratio: 21 / 9;
  --about-areas-lg: "media" "text";
  --about-cols-lg: minmax(0, 1fr);
  --point-bg: #ffffff;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #df0079;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：写真を使わない行型を、白い角丸カードにして並べる */
  --menu-gap: 12px;
  --menu-item-pad: 16px 20px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 14px;
  --price-size: 1.25rem;

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

/* @theme housekeeping-c
   @name 陽だまりの絵
   @desc クリーム地に橙の線と焦げ茶の文字。暖かい茶色を重ねた水彩の絵が重なって切り替わり、左上の灯りがゆらいで、屋号が1字ずつ浮かぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Lora:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Zen+Old+Mincho:wght@600&display=swap
   @concept 映像で見せる
   @source 家事代行の調査では、動画のヒーローは見つからなかった（0社）。ヒーローはスライダーが5社で、うち3社（CaSy・カジタク・キャットハンド）はキャンペーンやプランのデザインバナー、2社は実写（ミニメイド・サービスは2列の写真の帯を縦に流し続け、ピナイ家事代行サービスはスタッフの写真3枚）。全面写真は3社（ベアーズ・タスカジ・サニーメイドサービス）で、実写を前面に出す社は8社中5社だった。この全面写真と実写の切り替えを、見本の絵が重なって切り替わる形にし、灯りのゆらぎと、屋号が1字ずつ浮かぶ動きを足した。配色はクリーム地×オレンジの温かみの型（CaSy・ミニメイド・サービス・サニーメイドサービス・キャットハンド・ピナイ家事代行サービス）の地 #f9f8f4、橙 #f09502・#e57645、文字 #3c2c1c から。見出しの明朝は、同じ型でサニーメイドサービスだけが見出しに明朝を使っていたことから。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film glow chars
   @slides hero about
   @adjust 文字に使う橙 #f09502→#925b01（地 #f9f8f4 と 5.31:1、帯 #f3ecdf と 4.81:1）。#f09502 はボタンの地（文字は焦げ茶 #3c2c1c で 5.74:1）と線に使う。フォーカス枠は同じ色相の #b67102（地と 3.69:1、帯と 3.34:1、焦げ茶の帯と 3.41:1）。絵には、白い文字が 4.5:1 以上になるよう焦げ茶 #2e1d0e の 62% を重ねる
*/
:root[data-theme="housekeeping-c"] {
  --c-bg: #f9f8f4;
  --c-surface: #fffefa;
  --c-band: #f3ecdf;
  --c-text: #3c2c1c;
  --c-muted: #6a5443;
  --c-line: #e6dac6;
  --c-accent: #925b01;
  --c-accent-deco: #f09502;
  --c-accent-2: #e57645;
  --c-btn-bg: #f09502;
  --c-btn-text: #3c2c1c;
  --c-btn2-bg: #fffefa;
  --c-btn2-text: #3c2c1c;
  --c-btn2-border: #3c2c1c;
  --c-price: #3c2c1c;
  --c-badge-bg: #3c2c1c;
  --c-badge-text: #fffefa;
  --c-focus: #b67102;
  --c-ph-a: #f1e4cf;
  --c-ph-b: #e8d5b9;
  --c-ph-text: #5a4330;
  --c-map-bg: #f3ecdf;
  --c-map-line: #e6dac6;
  --c-map-road: #fffefa;
  --c-map-pin: #e57645;

  --hero-bg: #2b1f14;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(46, 29, 14, 0.62);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #f3ecdf;
  --cta-top-text: #3c2c1c;
  --cta-bottom-bg: #3c2c1c;
  --cta-bottom-text: #f9f8f4;
  --footer-bg: #2b1f14;
  --footer-text: #f3ecdf;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Lora", "Zen Old Mincho", serif;
  --font-num: "Lora", "Noto Sans JP", serif;
  --fw-head: 600;
  --fw-hero: 600;
  --lh-body: 1.95;
  --ls-head: 0.1em;
  --ls-hero: 0.24em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.625rem);
  --label-size: 0.8125rem;
  --label-weight: 400;
  --label-transform: uppercase;
  --label-ls: 0.28em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --space-section: clamp(80px, 14vw, 150px);
  --radius: 6px;
  --radius-img: 6px;
  --radius-btn: 999px;

  /* 写真：画面いっぱいの絵に焦げ茶を重ね、中央に屋号 */
  --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;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: transparent;
  --point-border-w: 1px;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 0px;
  --point-num-bg: transparent;
  --point-num-text: #925b01;
  --point-num-border-w: 0px;
  --point-num-fs: 1.75rem;

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

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

  /* 灯り：窓のある左上に、暖かい光 */
  --mv-glow-x: 22%;
  --mv-glow-y: 20%;
  --mv-glow-color: rgba(255, 196, 112, 0.7);
  --mv-toggle-bg: #3c2c1c;
  --mv-toggle-fg: #ffffff;
}

/* @theme housekeeping-d
   @name めくる暮らしの帳面
   @desc 淡いグレーの紙に濃紺の文字とマゼンタ、紹介の段は濃紺の地に反転。読み進めると線だけの大きな英字がすべり、絵が下からめくれて出て、PC ではプランの番号がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:ital,wght@0,400;1,400&family=Zen+Kaku+Gothic+New:wght@500;700;900&display=swap
   @concept 誌面で読ませる
   @source 家事代行の調査で、スクロールで動くものとして記録されていたのは、2社の固定バー（ミニメイド・サービスはスクロールのあとにせり上がり、ベアーズはスクロールの位置で表示を切り替える）だけだった。構成は、コンセプト・メニューと料金・ご利用の流れ・口コミ・FAQ・提供エリア・お知らせと節を重ねる順が共通で、口コミとFAQをともに載せる社が8社中6社、「ご利用の流れ」を持つ社が4社（CaSy・カジタク・サニーメイドサービス・キャットハンド）だった。この節を重ねる構成と、20業種で共通だった「英字の大見出し＋日本語の小見出し」を、節ごとに番号と大きな英字を付けた誌面にした。配色は白×マゼンタの大手感の型（ベアーズ・カジタク）の淡グレー #f5f7f7、マゼンタ #e6007d・#b60081、濃紺 #00233a、英字の書体はベアーズの Roboto から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字とボタンのマゼンタは #b60081（紙 #f5f7f7 と 5.91:1）。濃紺の地の上のマゼンタは、#e6007d を同じ色相で明るくした #ff85c7（7.25:1）。フォーカス枠は #e6007d（紙と 4.19:1、濃紺と 3.58:1）
*/
:root[data-theme="housekeeping-d"] {
  --c-bg: #f5f7f7;
  --c-surface: #ffffff;
  --c-band: #e9eef0;
  --c-text: #00233a;
  --c-muted: #4a5d6b;
  --c-line: #cfd9de;
  --c-accent: #b60081;
  --c-accent-deco: #e6007d;
  --c-accent-2: #df9300;
  --c-btn-bg: #b60081;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #00233a;
  --c-btn2-border: #00233a;
  --c-price: #00233a;
  --c-badge-bg: #b60081;
  --c-badge-text: #ffffff;
  --c-focus: #e6007d;
  --c-ph-a: #e6ecef;
  --c-ph-b: #d5dfe4;
  --c-ph-text: #1f3a4d;
  --c-map-bg: #e9eef0;
  --c-map-line: #d8e1e5;
  --c-map-road: #ffffff;
  --c-map-pin: #e6007d;

  --hero-bg: #f5f7f7;
  --hero-text: #00233a;
  --hero-muted: #b60081;
  --cta-top-bg: #f5f7f7;
  --cta-top-text: #00233a;
  --cta-bottom-bg: #e9eef0;
  --cta-bottom-text: #00233a;
  --footer-bg: #00233a;
  --footer-text: #f5f7f7;

  /* 紹介の段は濃紺の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #00233a;
  --about-text: #ffffff;
  --about-muted: #c8d5de;
  --about-accent: #ff85c7;
  --about-surface: #0a2f47;
  --about-line: #2e5068;
  --about-deco: #ff85c7;
  --menu-bg: #f5f7f7;
  --news-bg: #f5f7f7;
  --contact-bg: #f5f7f7;

  --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", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --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: #cf95b6;
  --mv-toggle-bg: #00233a;
  --mv-toggle-fg: #ffffff;
}

/* @theme housekeeping-e
   @name 仕上がりの札を開く
   @desc クリーム地に緑と橙、焦げ茶の太い線。薄い緑の卓に仕上がりの札を並べ、裏返ると説明が出る。押すと大きく開き、プランは札を押して選ぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@400;700&family=Zen+Maru+Gothic:wght@700;900&display=swap
   @concept 触って選ぶ
   @source 家事代行の調査では、押して選ぶ部品として、サービスを切り替えるナビ（ベアーズは5つのアイコン、カジタクはヘッダーの3つのタブ）があり、ピナイ家事代行サービスはプランを「こんな人向け」の箇条書きで2つに振り分けていた。これを、押して選ぶプランの札にした。ヒーローは写真1枚の社が3社（ベアーズ・タスカジ・サニーメイドサービス。タスカジは右に写真、左に文字と登録ボタン）で、見本もヒーローの写真は1枚のままにし、下に作業の写真の札を並べた。札が裏返る動きは、カフェのコメダ珈琲店の、商品写真のタイルが向きを変えて切り替わるヒーローから借りた。配色はクリーム地×オレンジの温かみの型の緑 #419759（ピナイ家事代行サービス）・橙 #f09502（サニーメイドサービス）・文字 #3c2c1c（CaSy）、英字の書体はピナイ家事代行サービスの Oswald から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust ボタンの緑 #419759→#2f7443（白い文字と 5.68:1）。料金とフォーカス枠の橙 #f09502→#9b6001（白と 5.16:1、薄い緑の卓 #d9eedd と 4.23:1）。#f09502 は英字と番号の札に使い、上の文字は焦げ茶 #3c2c1c（5.74:1）
*/
:root[data-theme="housekeeping-e"] {
  --c-bg: #fbf8ef;
  --c-surface: #ffffff;
  --c-band: #d9eedd;
  --c-text: #3c2c1c;
  --c-muted: #5f4b3a;
  --c-line: #e5dcc8;
  --c-accent: #2f7443;
  --c-accent-deco: #419759;
  --c-accent-2: #f09502;
  --c-btn-bg: #2f7443;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #3c2c1c;
  --c-btn2-border: #3c2c1c;
  --c-price: #9b6001;
  --c-badge-bg: #2f7443;
  --c-badge-text: #ffffff;
  --c-focus: #9b6001;
  --c-ph-a: #eef4e8;
  --c-ph-b: #dbe9d6;
  --c-ph-text: #34462f;
  --c-map-bg: #eef4e8;
  --c-map-line: #dbe9d6;
  --c-map-road: #ffffff;
  --c-map-pin: #f09502;

  --hero-bg: #d9eedd;
  --hero-text: #3c2c1c;
  --hero-muted: #5f4b3a;
  --cta-top-bg: #fbf8ef;
  --cta-top-text: #3c2c1c;
  --cta-bottom-bg: #d9eedd;
  --cta-bottom-text: #3c2c1c;
  --footer-bg: #3c2c1c;
  --footer-text: #fbf8ef;

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

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-hero: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
  --font-label: "Oswald", "Noto Sans JP", sans-serif;
  --font-num: "Oswald", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --fw-num: 700;
  --lh-body: 1.85;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 0.9375rem;
  --label-weight: 700;
  --label-ls: 0.1em;

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

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

  /* 型（premium/touch.css）の色：押せるものの線と影、英字と番号の札 */
  --tc-ink: #3c2c1c;
  --tc-sticker: #f09502;
  --mv-toggle-bg: #3c2c1c;
  --mv-toggle-fg: #d9eedd;
}