/*!
  @industry plumbing
  @label 水道・配管工事
  @order 8
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「8. 水道・配管工事業」スタイルの型（2型）
  （電話の帯を何度も繰り返す作りは借りず、連絡ボタンは固定の上と下の2か所だけにする）
*/

/* @theme plumbing-a
   @name 指定店の信頼
   @desc 白地に紺と青、黄色のボタン。写真の下の紺の帯に屋号、見出しの線は赤。料金は箇所ごとの行を1列で並べる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto+Condensed:wght@700&display=swap
   @source 白地×濃紺×赤の「指定工事店の信頼」型（クラシアン・水のトラブルサポートセンター・生活水道センター）。紺 #003664・#07307b、青 #0068b7、赤 #ed5555、黄・橙 #fdd835・#ff9000、Noto Sans JP＋Roboto Condensed
   @adjust お知らせの種類ラベルの赤 #ed5555→#d21616（淡い青の帯の上で 4.5:1 以上にするため）。黄色のボタンの文字は白では比が足りないため紺 #003664。#ed5555 はそのままフォーカス枠（白地・紺の帯の両方で 3:1 以上）と見出しの線に使う
*/
:root[data-theme="plumbing-a"] {
  --c-bg: #ffffff;
  --c-surface: #eaf2f9;
  --c-band: #eaf2f9;
  --c-text: #1a2533;
  --c-muted: #4a5666;
  --c-line: #c9d7e5;
  --c-accent: #0068b7;
  --c-accent-deco: #ed5555;
  --c-accent-2: #fdd835;
  --c-btn-bg: #fdd835;
  --c-btn-text: #003664;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #003664;
  --c-btn2-border: #ff9000;
  --c-price: #003664;
  --c-badge-bg: #003664;
  --c-badge-text: #ffffff;
  --c-focus: #ed5555;
  --c-ph-a: #e1ecf6;
  --c-ph-b: #c7daed;
  --c-ph-text: #1f3552;
  --c-map-bg: #eaf2f9;
  --c-map-line: #d3e1ee;
  --c-map-road: #ffffff;
  --c-map-pin: #ed5555;
  --news-accent: #d21616;

  --hero-bg: #003664;
  --hero-text: #ffffff;
  --hero-muted: #fdd835;
  --cta-top-bg: #07307b;
  --cta-top-text: #ffffff;
  --cta-bottom-bg: #003664;
  --cta-bottom-text: #ffffff;
  --footer-bg: #07307b;
  --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: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --font-num: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --h3-size: 1.0625rem;
  --label-size: 0.875rem;
  --label-weight: 700;
  --label-ls: 0.16em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 3px;

  --container: 960px;
  --space-section: clamp(56px, 10vw, 100px);
  --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: #ffffff;
  --point-border-w: 1px;
  --point-align: left;
  --point-num-size: 2.75rem;
  --point-num-radius: 50%;
  --point-num-bg: #003664;
  --point-num-text: #fdd835;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：箇所ごとの行を、PCでも1列の表のように並べる（行型） */
  --menu-cols-lg: minmax(0, 1fr);
  --price-size: 1.5rem;

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

/* @theme plumbing-b
   @name 元気な駆けつけ
   @desc 白地に明るい青と橙、水色の帯。写真に白い角丸の面を重ね、英字の大見出しを中央に。料金は箇所ごとの写真カード
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@700;900&display=swap
   @source 白地×明るい青×オレンジ・ピンクの「元気な駆けつけ」型（イースマイル・水110番）。青 #0088d6・#0077c2、橙 #f38530、ピンク #f2527e、黄 #f7d305、水色の帯 #c4edff、Noto Sans JP＋Roboto
   @adjust 文字に使う青 #0077c2→#0067a8（水色の帯の上で 4.5:1 以上にするため）。橙のボタンは白い文字では比が足りないため、文字を濃紺 #10283f に。#0088d6・ピンク・黄は線と飾りだけ
*/
:root[data-theme="plumbing-b"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #c4edff;
  --c-text: #10283f;
  --c-muted: #3d5266;
  --c-line: #9ed3ee;
  --c-accent: #0067a8;
  --c-accent-deco: #f38530;
  --c-accent-2: #f2527e;
  --c-btn-bg: #f38530;
  --c-btn-text: #10283f;
  --c-btn2-bg: #0077c2;
  --c-btn2-text: #ffffff;
  --c-btn2-border: #0077c2;
  --c-price: #0067a8;
  --c-badge-bg: #0077c2;
  --c-badge-text: #ffffff;
  --c-focus: #10283f;
  --c-ph-a: #e3f6ff;
  --c-ph-b: #fff3b3;
  --c-ph-text: #10283f;
  --c-map-bg: #e3f6ff;
  --c-map-line: #c4edff;
  --c-map-road: #ffffff;
  --c-map-pin: #f2527e;

  --hero-bg: #c4edff;
  --hero-text: #10283f;
  --hero-muted: #0067a8;
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --hero-card-pad: clamp(20px, 5vw, 32px);
  --hero-card-radius: 16px;
  --cta-top-bg: #fff6c7;
  --cta-top-text: #10283f;
  --cta-bottom-bg: #fff6c7;
  --cta-bottom-text: #10283f;
  --footer-bg: #0077c2;
  --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: "Roboto", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: 1.125rem;
  --h3-size: 1rem;
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 900;
  --label-ls: 0.02em;
  --label-transform: none;
  --label-color: #0067a8;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 4px;

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

  /* 写真：全面の写真に、白い角丸の面で屋号とひとことを重ねる（重ねる型） */
  --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(72svh, 640px);
  --hero-body-align: end;
  --hero-body-max: 36rem;
  --hero-body-pad: clamp(16px, 5vw, 48px);

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

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

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

/* @theme plumbing-c
   @name しずくの輪
   @desc 紺を重ねた写真に白い文字。台所・お風呂・洗面所の写真が、番号つきで切り替わる。写真の上には、水の輪が広がっては消える（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Oswald:wght@400;500;700&display=swap
   @concept 映像で見せる
   @source 水道の調査で読めた5社に、動画のヒーローはなかった（YouTube 動画の埋め込みは3社）。ヒーローは full_photo が4社、スライダーが1社（クラシアン。slick で4枚のキャンペーンを回す）で、full_photo の4社とも中身は文字を焼き込んだバナー画像だった。5社とも、写真より画像バナー・アイコン・イラストが中心。動きの型は、クラシアンの4枚のスライダーと、番号つきのスライダー（電気工事のトーエネック：1/7 のカウンター）から借り、見本の写真4枚の切り替えと「01 / 04」の番号にし、水の輪を足した。屋号とひとことは画像にせず、文字で重ねる。配色は指定工事店の信頼型（クラシアン・水のトラブルサポートセンター・生活水道センター）のうちクラシアンの紺 #003664・青 #0068b7 と、この型の赤 #ed5555・橙 #ff9000、書体は水のトラブルサポートセンター・生活水道センターの数字の Oswald から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film ripple counter
   @slides hero works-2 works-4 works-5
   @adjust 写真には、白い文字が 4.5:1 以上になるよう紺 #002240 の 64% を重ねる（白い写真の上で 5.03:1）。橙のボタン #ff9000 の文字は紺 #003664（5.40:1）。赤 #ed5555 は見出しの線・点・地図のピンとフォーカス枠だけに使う（フォーカス枠は白地と 3.48:1、淡い青の帯 #eaf2f9 と 3.08:1、紺の帯と 3.52:1）
*/
:root[data-theme="plumbing-c"] {
  --c-bg: #ffffff;
  --c-surface: #eaf2f9;
  --c-band: #eaf2f9;
  --c-text: #1a2533;
  --c-muted: #4a5666;
  --c-line: #c9d7e5;
  --c-accent: #0068b7;
  --c-accent-deco: #ed5555;
  --c-accent-2: #ff9000;
  --c-btn-bg: #ff9000;
  --c-btn-text: #003664;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #003664;
  --c-btn2-border: #003664;
  --c-price: #003664;
  --c-badge-bg: #003664;
  --c-badge-text: #ffffff;
  --c-focus: #ed5555;
  --c-ph-a: #e1ecf6;
  --c-ph-b: #c7daed;
  --c-ph-text: #1f3552;
  --c-map-bg: #eaf2f9;
  --c-map-line: #d3e1ee;
  --c-map-road: #ffffff;
  --c-map-pin: #ed5555;

  --hero-bg: #00284b;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 34, 64, 0.64);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #eaf2f9;
  --cta-top-text: #1a2533;
  --cta-bottom-bg: #003664;
  --cta-bottom-text: #ffffff;
  --footer-bg: #00284b;
  --footer-text: #eaf2f9;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: 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.9;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-size: 0.875rem;
  --label-weight: 500;
  --label-ls: 0.24em;
  --label-transform: uppercase;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 3px;

  --space-section: clamp(64px, 11vw, 120px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 4px;
  --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(84svh, 760px);
  --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: #003664;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：白い写真カードを、スマホ2列・PC3列で並べる */
  --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: 1 / 1;
  --price-size: 1.125rem;

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

  --mv-glint: #ffffff;
  --mv-toggle-bg: #003664;
  --mv-toggle-fg: #ffffff;
}

/* @theme plumbing-d
   @name めくる修理の案内
   @desc クリーム色の紙に紺の文字と赤い番号、紹介の段は紺の地に黄色。写真は止めたまま、明朝の屋号と大きな番号で見せる。読み進めると線だけの赤い英字がすべり、PC では修理の内容の写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=BIZ+UDPMincho:wght@400;700&family=Montserrat:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 誌面で読ませる
   @source 水道の調査で読めた5社に、動画のヒーローはなかった（スライダーはクラシアンの1社）。誌面の型は、この業種の長いページの読ませ方から借りた。トップに FAQ を置く社が5社中5社、ご利用の流れを置く社が5社中4社で、長いページを、ページ内アンカーナビ（水のトラブルサポートセンター）や場所別×症状別の2軸の入口（クラシアン）で探させていた。これを、節ごとの番号と線だけの大きな英字の誌面と、PC の右の端の番号の目次にした。料金は、3社（イースマイル・水のトラブルサポートセンター・生活水道センター）が「作業料金○○円〜」と「出張費・見積無料」を同じ帯に入れていたので、箇所ごとの料金と出張・お見積りを、1品ずつ番号を振った同じ品書きに並べた。配色は指定工事店の信頼型（クラシアン・水のトラブルサポートセンター・生活水道センター）のうちクラシアンの紺 #003664 と、この型の赤 #ed5555・黄 #fdd835、書体は生活水道センターの数字の Montserrat（斜体）から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う赤 #ed5555→#c93238（紙 #fdf9e6 と 4.97:1。OKLCH で明度だけ下げた）。紺の地の上の黄 #fdd835 はそのまま文字に使う（8.79:1）。#ed5555 は線だけの英字・線・フォーカス枠に使う（フォーカス枠は紙と 3.29:1、下の帯 #f9f2d8 と 3.10:1、紺の地と 3.52:1）。紙と帯は #fdd835 と同じ色相のごく淡い色
*/
:root[data-theme="plumbing-d"] {
  --c-bg: #fdf9e6;
  --c-surface: #ffffff;
  --c-band: #f9f2d8;
  --c-text: #003664;
  --c-muted: #46546a;
  --c-line: #dcd4b8;
  --c-accent: #c93238;
  --c-accent-deco: #ed5555;
  --c-accent-2: #fdd835;
  --c-btn-bg: #003664;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fdf9e6;
  --c-btn2-text: #003664;
  --c-btn2-border: #003664;
  --c-price: #003664;
  --c-badge-bg: #c93238;
  --c-badge-text: #ffffff;
  --c-focus: #ed5555;
  --c-ph-a: #f4eed6;
  --c-ph-b: #e6dcba;
  --c-ph-text: #003664;
  --c-map-bg: #f5f0dc;
  --c-map-line: #e7e0c6;
  --c-map-road: #ffffff;
  --c-map-pin: #c93238;

  --hero-bg: #fdf9e6;
  --hero-text: #003664;
  --hero-muted: #46546a;
  --cta-top-bg: #fdf9e6;
  --cta-top-text: #003664;
  --cta-bottom-bg: #f9f2d8;
  --cta-bottom-text: #003664;
  --footer-bg: #003664;
  --footer-text: #fdf9e6;

  /* 紹介の段は紺の地に黄色（指定工事店の紺と、ボタンの黄）。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #003664;
  --about-text: #ffffff;
  --about-muted: #d2deeb;
  --about-accent: #fdd835;
  --about-surface: #0b4274;
  --about-line: #2f5c8a;
  --about-deco: #fdd835;
  --menu-bg: #fdf9e6;
  --news-bg: #fdf9e6;
  --contact-bg: #fdf9e6;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-hero: "BIZ UDPMincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Montserrat", "Noto Sans JP", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --fw-num: 400;
  --lh-body: 1.95;

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

  /* 型（premium/folio.css）の色：線だけの大きな英字は赤 */
  --fo-outline: #ed5555;
  --mv-toggle-bg: #003664;
  --mv-toggle-fg: #ffffff;
}

/* @theme plumbing-e
   @name 修理の札から選ぶ
   @desc 水色の卓に、紺の太い線の札と黄色の英字の札、橙のボタン。上に並べた修理の写真の札は、裏返って名前と料金を見せ、押すとその修理の写真と説明・料金が大きく開く。お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700;900&family=Zen+Maru+Gothic:wght@700;900&display=swap
   @concept 触って選ぶ
   @source 水道の調査で読めた5社に、動画のヒーローはなかった（スライダーはクラシアンの1社）。5社中4社が症状別・お困りごと別の入口を持ち（クラシアンの症状別一覧、イースマイルと水のトラブルサポートセンターのよくある症状、水110番のお困りごと一覧）、元気な駆けつけ型（イースマイル・水110番）は、お困りごと→サービス一覧の順で症状から進ませていた。この入口を、修理の写真の札を押して選ぶと、その修理の写真と説明・料金が開く形にした。札は、商品写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の形で裏返る。配色はイースマイルの青 #0088d6・ピンク #f2527e・水色の帯 #c4edff、水110番の青 #0077c2、この型の橙 #f38530・黄 #f7d305、書体は水110番の数字の Roboto から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 価格とフォーカス枠のピンク #f2527e→#ce2d61（白い札と 5.03:1、水色の卓 #c4edff と 4.05:1。OKLCH で明度だけ下げた）。文字に使う青 #0077c2→#0067a8（白と 5.99:1）。橙のボタン #f38530 の文字は紺 #10283f（5.87:1）。水色の卓の上の文字は紺（12.10:1）、黄の英字の札 #f7d305 の上も紺（10.22:1）。#0088d6 は線と点だけに使う
*/
:root[data-theme="plumbing-e"] {
  --c-bg: #f0faff;
  --c-surface: #ffffff;
  --c-band: #c4edff;
  --c-text: #10283f;
  --c-muted: #3d5266;
  --c-line: #b5dff2;
  --c-accent: #0067a8;
  --c-accent-deco: #0088d6;
  --c-accent-2: #f7d305;
  --c-btn-bg: #f38530;
  --c-btn-text: #10283f;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #10283f;
  --c-btn2-border: #10283f;
  --c-price: #ce2d61;
  --c-badge-bg: #0077c2;
  --c-badge-text: #ffffff;
  --c-focus: #ce2d61;
  --c-ph-a: #e3f6ff;
  --c-ph-b: #fff3b3;
  --c-ph-text: #10283f;
  --c-map-bg: #e3f6ff;
  --c-map-line: #c4edff;
  --c-map-road: #ffffff;
  --c-map-pin: #f2527e;

  --hero-bg: #c4edff;
  --hero-text: #10283f;
  --hero-muted: #3d5266;
  --cta-top-bg: #f0faff;
  --cta-top-text: #10283f;
  --cta-bottom-bg: #c4edff;
  --cta-bottom-text: #10283f;
  --footer-bg: #0077c2;
  --footer-text: #ffffff;

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

  --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: "Roboto", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --fw-num: 900;
  --lh-body: 1.85;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --label-transform: uppercase;
  --label-size: 0.875rem;
  --label-weight: 900;
  --label-ls: 0.1em;

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

  /* 型（premium/touch.css）の色：押せるものの線と影は紺、英字の札は黄 */
  --tc-ink: #10283f;
  --tc-sticker: #f7d305;
  --tc-radius: 18px;
  --mv-toggle-bg: #10283f;
  --mv-toggle-fg: #f7d305;
}