/*!
  @industry pet
  @label ペットトリミング
  @order 6
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「6. ペットトリミングサロン」スタイルの型のうち
  「白×オレンジ・水色の元気ポップ」と「生成り×ブラウン・くすみグリーンのナチュラル」（「白×赤・青の量販店風」は1ページに合わないため作らない）
*/

/* @theme pet-a
   @name 元気ポップ
   @desc 白地に水色・橙・コーラルの3色、ベージュの帯。丸ゴシックと太い英字、角丸の写真カードで明るく詰める
   @fonts https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&family=Zen+Maru+Gothic:wght@500;700&display=swap
   @source 白×オレンジ・水色の元気ポップ（Coo&RIKU・アミーゴ）。文字 #534741、水色 #64c9e1、橙 #f5a868、コーラル #fc817b、ベージュの帯、Zen Maru Gothic＋Nunito
   @adjust ボタン・バッジのコーラル #fc817b→#c34e4c、価格と小見出しのコーラル #fc817b→#b54140、英字の見出し・番号の水色 #64c9e1→#06768b（白い文字・地との比を 4.5:1 以上にするため。OKLCH で明度だけ下げた）。元の3色は線・面・地図のピンに使う
*/
:root[data-theme="pet-a"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f7efe4;
  --c-text: #534741;
  --c-muted: #665851;
  --c-line: #eadfd2;
  --c-accent: #06768b;
  --c-accent-deco: #f5a868;
  --c-accent-2: #fc817b;
  --c-btn-bg: #c34e4c;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #06768b;
  --c-btn2-border: #64c9e1;
  --c-price: #b54140;
  --c-badge-bg: #c34e4c;
  --c-badge-text: #ffffff;
  --c-focus: #06768b;
  --c-ph-a: #e5f6fa;
  --c-ph-b: #fde6d3;
  --c-ph-text: #534741;
  --c-map-bg: #eef8fb;
  --c-map-line: #d7eef4;
  --c-map-road: #ffffff;
  --c-map-pin: #fc817b;

  --hero-bg: #e5f6fa;
  --hero-text: #534741;
  --hero-muted: #b54140;
  --hero-card-bg: rgba(255, 255, 255, 0.94);
  --hero-card-pad: clamp(20px, 5vw, 32px);
  --hero-card-radius: 24px;
  --cta-top-bg: #e5f6fa;
  --cta-top-text: #534741;
  --cta-bottom-bg: #fdf0e4;
  --cta-bottom-text: #534741;
  --footer-bg: #534741;
  --footer-text: #ffffff;

  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-label: "Nunito", "Zen Maru Gothic", sans-serif;
  --font-num: "Nunito", "Zen Maru Gothic", sans-serif;
  --fw-body: 500;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 1.9;
  --ls-head: 0.04em;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.5rem, 11vw, 4rem);
  --h2-size: 1.125rem;
  --h3-size: clamp(1rem, 2.4vw, 1.125rem);
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 800;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 4px;

  --space-section: clamp(48px, 8vw, 88px);
  --radius: 16px;
  --radius-img: 16px;
  --radius-btn: 999px;
  --radius-badge: 999px;
  --shadow: 0 6px 18px rgba(83, 71, 65, 0.1);
  --btn-shadow: 0 3px 0 rgba(83, 71, 65, 0.18);

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

  --about-media-ratio: 4 / 5;
  --about-cols-lg: minmax(0, 5fr) minmax(0, 6fr);
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #06768b;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* メニュー：写真カード型 */
  --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.1875rem;
  --price-note-display: block;

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

/* @theme pet-b
   @name ナチュラル
   @desc 生成り×くすみ緑、橙は線と点だけ。ゴシックとDosisの英字、左に文字・右に写真の分割で余白を広めにとる
   @fonts https://fonts.googleapis.com/css2?family=Dosis:wght@500;600&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 生成り×ブラウン・くすみグリーンのナチュラル（ペッツファースト・ジョーカー）。地 #fbf8f4、文字 #4c372b、橙 #f3981c、くすみ緑 #518077、Noto Sans JP＋Dosis
   @adjust 文字に使うくすみ緑 #518077→#437169、ボタン #518077→#4e7d74（地・白い文字との比を 4.5:1 以上にするため。OKLCH で明度だけ下げた）。橙 #f3981c は飾りだけに使う
*/
:root[data-theme="pet-b"] {
  --c-bg: #fbf8f4;
  --c-surface: #ffffff;
  --c-band: #f2ede5;
  --c-text: #4c372b;
  --c-muted: #65503f;
  --c-line: #e3dacd;
  --c-accent: #437169;
  --c-accent-deco: #f3981c;
  --c-accent-2: #518077;
  --c-btn-bg: #4e7d74;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #437169;
  --c-btn2-border: #518077;
  --c-price: #4c372b;
  --c-badge-bg: #437169;
  --c-badge-text: #ffffff;
  --c-focus: #437169;
  --c-ph-a: #efe9df;
  --c-ph-b: #dde6e0;
  --c-ph-text: #4c372b;
  --c-map-bg: #f1ece4;
  --c-map-line: #e4ddd2;
  --c-map-road: #fbf8f4;
  --c-map-pin: #f3981c;

  --hero-bg: #fbf8f4;
  --hero-text: #4c372b;
  --hero-muted: #437169;
  --cta-top-bg: #eef2ee;
  --cta-top-text: #4c372b;
  --cta-bottom-bg: #eef2ee;
  --cta-bottom-text: #4c372b;
  --footer-bg: #4c372b;
  --footer-text: #fbf8f4;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-label: "Dosis", "Noto Sans JP", sans-serif;
  --font-num: "Dosis", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 2;
  --ls-head: 0.06em;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.25rem, 6vw, 3.5rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.625rem);
  --h3-size: 1.0625rem;
  --label-size: 1rem;
  --label-weight: 600;
  --label-transform: uppercase;
  --label-ls: 0.24em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 2px;

  --container: 1040px;
  --space-section: clamp(64px, 12vw, 128px);
  --space-head: clamp(28px, 5vw, 52px);
  --radius: 8px;
  --radius-img: 8px;
  --radius-btn: 8px;
  --radius-badge: 4px;

  /* 写真：スマホは写真の下に文字、PCは文字を左・写真を右に */
  --hero-areas: "media" "body";
  --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 / 5;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #ffffff;
  --point-border-w: 1px;
  --point-align: center;
  --point-num-size: 3.25rem;
  --point-num-radius: 50%;
  --point-num-bg: transparent;
  --point-num-text: #437169;
  --point-num-border-w: 1px;
  --point-num-fs: 1.25rem;

  /* メニュー：行型（写真は出さない） */
  --menu-item-pad: 20px 0;
  --price-size: 1.3125rem;

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

/* @theme pet-c
   @name 足あと
   @desc 濃い茶を重ねた写真に白い文字、生成りの地に橙とくすみ緑。いちばん上の写真が重なって切り替わり、写真の上を橙の足あとが左下から右上へ歩いていく（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Dosis:wght@500;600&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 映像で見せる
   @source ペットの調査で読めた7社は、どれも子犬・子猫を販売するペットショップのチェーンで、トリミング専門のサロンは0社だった。ヒーローは7社ともスライダーで（動画は0社）、中身は文字入りの告知バナーが5社、写真が主体の社が2社（アミーゴ・ジョーカー。ジョーカーはドッグランとトリミングの風景）。ペッツファーストは、ヒーローの直下に1行のティッカーを置いていた。動きの型は、ジョーカーの写真が主体のスライダーから借り、写真の切り替えにトリミングの様子と仕上がりの写真を使い、写真の上を歩いていく足あとを足した。配色と書体は「生成り×ブラウン・くすみグリーンのナチュラル」の型（ペッツファースト・ジョーカー）の地 #fbf8f4、文字 #4c372b、橙 #f3981c、くすみ緑 #518077、ペッツファーストの見出しの欧文 Dosis から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film paws
   @slides hero menu-1 about works-1
   @adjust 文字に使うくすみ緑 #518077→#437169（生成りの地 5.21:1。OKLCH で明度だけ下げた、B と同じ値）。橙 #f3981c のボタンと強みの番号の丸は、文字を濃い茶 #4c372b にする（4.93:1）。写真には、白い文字が 4.5:1 以上になるよう、暖かい濃い茶 #4c2c14 の 68% を重ねる。足あとは橙 #f3981c（重ねる色の下に置く飾り）
*/
:root[data-theme="pet-c"] {
  --c-bg: #fbf8f4;
  --c-surface: #ffffff;
  --c-band: #f2ede5;
  --c-text: #4c372b;
  --c-muted: #65503f;
  --c-line: #e3dacd;
  --c-accent: #437169;
  --c-accent-deco: #f3981c;
  --c-accent-2: #518077;
  --c-btn-bg: #f3981c;
  --c-btn-text: #4c372b;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #4c372b;
  --c-btn2-border: #4c372b;
  --c-price: #4c372b;
  --c-badge-bg: #437169;
  --c-badge-text: #ffffff;
  --c-focus: #437169;
  --c-ph-a: #efe9df;
  --c-ph-b: #dde6e0;
  --c-ph-text: #4c372b;
  --c-map-bg: #f1ece4;
  --c-map-line: #e4ddd2;
  --c-map-road: #fbf8f4;
  --c-map-pin: #f3981c;

  --hero-bg: #3a2312;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(76, 44, 20, 0.68);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #fbf8f4;
  --cta-top-text: #4c372b;
  --cta-bottom-bg: #eef2ee;
  --cta-bottom-text: #4c372b;
  --footer-bg: #4c372b;
  --footer-text: #fbf8f4;

  --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: "Dosis", "Noto Sans JP", sans-serif;
  --font-num: "Dosis", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --fw-num: 600;
  --lh-body: 1.95;
  --ls-head: 0.06em;
  --ls-hero: 0.2em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.75rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.75rem);
  --label-size: 0.9375rem;
  --label-weight: 600;
  --label-transform: uppercase;
  --label-ls: 0.3em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 3px;
  --head-inline: auto;

  --space-section: clamp(64px, 12vw, 128px);
  --radius: 12px;
  --radius-img: 12px;
  --radius-btn: 999px;
  --radius-badge: 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: 36rem;

  --about-media-ratio: 4 / 5;
  --about-cols-lg: minmax(0, 5fr) minmax(0, 6fr);
  --point-bg: #ffffff;
  --point-border-w: 0px;
  --point-align: center;
  --point-num-size: 3.25rem;
  --point-num-radius: 50%;
  --point-num-bg: #f3981c;
  --point-num-text: #4c372b;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  /* メニュー：小さな写真つきの行。PC は2列 */
  --menu-item-areas: "media name" "media desc" "media price";
  --menu-item-cols: 88px minmax(0, 1fr);
  --menu-item-pad: 18px 0;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.25rem;

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

  /* 足あとの色（写真に重ねる濃い茶の下に置くので、白では明るい写真に紛れる。橙にする） */
  --mv-glint: #f3981c;
  --mv-toggle-bg: #4c372b;
  --mv-toggle-fg: #ffffff;
}

/* @theme pet-d
   @name めくるトリミング帳
   @desc 生成りの紙に濃い茶の文字と橙、紹介の段は深い緑に反転。写真は止めたまま、大きな屋号と番号、線だけの英字で見せる。読み進めると英字がすべり、写真が下からめくれて出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@500;700;800&family=Mulish:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 誌面で読ませる
   @source ペットの調査で読めた7社は、どれも子犬・子猫を販売するペットショップのチェーンで、トリミング専門のサロンは0社だった。そのうち Coo&RIKU・アミーゴ・ジョーカーは、見出しを英字と日本語の2段にして、全部の節でそろえていた。この型を、番号と線だけの大きな英字の誌面にした。ヒーローは7社ともスライダーだったが、この見本では写真を止め、読み進めたときだけ英字と写真を動かす。配色は「生成り×ブラウン・くすみグリーンのナチュラル」の型（ペッツファースト・ジョーカー）の地 #fbf8f4、文字 #4c372b、橙 #f3981c、くすみ緑 #518077 から。英字と数字は、ペッツファーストの Avenir Next の代わりに Mulish の斜体を当てた。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使うくすみ緑 #518077→#437169（生成りの紙 5.21:1）、紹介の段の地は #518077 を暗くした #16463e（生成りの文字 10.02:1、橙 #f3981c の番号 4.71:1）。どちらも OKLCH で明度だけ下げた。フォーカス枠は橙 #f3981c を同じ方法で暗くした #cf7700（紙 3.15:1、深い緑 3.18:1、白 3.34:1）
*/
:root[data-theme="pet-d"] {
  --c-bg: #fbf8f4;
  --c-surface: #ffffff;
  --c-band: #f2ede5;
  --c-text: #4c372b;
  --c-muted: #65503f;
  --c-line: #e3dacd;
  --c-accent: #437169;
  --c-accent-deco: #f3981c;
  --c-accent-2: #518077;
  --c-btn-bg: #4c372b;
  --c-btn-text: #fbf8f4;
  --c-btn2-bg: #fbf8f4;
  --c-btn2-text: #4c372b;
  --c-btn2-border: #4c372b;
  --c-price: #4c372b;
  --c-badge-bg: #437169;
  --c-badge-text: #ffffff;
  --c-focus: #cf7700;
  --c-ph-a: #efe9df;
  --c-ph-b: #dde6e0;
  --c-ph-text: #4c372b;
  --c-map-bg: #f1ece4;
  --c-map-line: #e4ddd2;
  --c-map-road: #fbf8f4;
  --c-map-pin: #f3981c;

  --hero-bg: #fbf8f4;
  --hero-text: #4c372b;
  --hero-muted: #65503f;
  --cta-top-bg: #fbf8f4;
  --cta-top-text: #4c372b;
  --cta-bottom-bg: #ffffff;
  --cta-bottom-text: #4c372b;
  --footer-bg: #4c372b;
  --footer-text: #fbf8f4;

  /* 紹介の段は深い緑の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #16463e;
  --about-text: #fbf8f4;
  --about-muted: #cfded8;
  --about-accent: #f3981c;
  --about-surface: #123d36;
  --about-line: #3f6c63;
  --about-deco: #f3981c;
  --menu-bg: #fbf8f4;
  --news-bg: #fbf8f4;
  --contact-bg: #fbf8f4;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS 1p", "Noto Sans JP", sans-serif;
  --font-hero: "M PLUS 1p", "Noto Sans JP", sans-serif;
  --font-label: "Mulish", "Noto Sans JP", sans-serif;
  --font-num: "Mulish", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 800;
  --fw-num: 400;
  --lh-body: 1.95;

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

  /* 型（premium/folio.css）の色：大きな英字の線は橙 */
  --fo-outline: #f3981c;
  --mv-toggle-bg: #4c372b;
  --mv-toggle-fg: #fbf8f4;
}

/* @theme pet-e
   @name お手入れの札から選ぶ
   @desc 水色の卓に、茶色の太い線の札と橙・コーラル。上に並べたメニューの写真の札が裏返って名前と料金を見せ、押すとその品が大きく開く。仕上がりの写真は指で送れる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Zen+Maru+Gothic:wght@500;700;900&display=swap
   @concept 触って選ぶ
   @source ペットの調査で読めた7社は、どれも子犬・子猫を販売するペットショップのチェーンで、トリミング専門のサロンは0社だった。7社とも、ページの上半分に「ペットを探す」（犬種や条件で在庫を探す検索か、新着の子犬・子猫の一覧）を置き、ヒーローは7社ともスライダーだった。この「上のほうで探して選ぶ」型を、ヒーローに並べたメニューの写真の札から選ぶ形にし、押すとその品の説明と料金が開くメニューにした。札が裏返るのは、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の型から。配色と書体は「白×オレンジ・水色の元気ポップ」の型（Coo&RIKU・アミーゴ）の文字 #534741、水色 #64c9e1、橙 #f5a868、コーラル #fc817b、Coo&RIKU の英字の Nunito、アミーゴの丸ゴシック Zen Maru Gothic から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust A と同じく、ボタンのコーラル #fc817b→#c34e4c（白い文字 4.65:1）、価格のコーラル #fc817b→#b54140（白 5.53:1）、文字に使う水色 #64c9e1→#06768b（白 5.29:1）。水色の卓 #64c9e1 の上の文字は茶色 #534741（4.68:1）、英字の札は橙 #f5a868 に茶色の文字（4.56:1）。フォーカス枠は #06768b をさらに暗くした #006277（卓 3.64:1、白 6.99:1）
*/
:root[data-theme="pet-e"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f7efe4;
  --c-text: #534741;
  --c-muted: #665851;
  --c-line: #eadfd2;
  --c-accent: #06768b;
  --c-accent-deco: #f5a868;
  --c-accent-2: #fc817b;
  --c-btn-bg: #c34e4c;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #534741;
  --c-btn2-border: #534741;
  --c-price: #b54140;
  --c-badge-bg: #c34e4c;
  --c-badge-text: #ffffff;
  --c-focus: #006277;
  --c-ph-a: #e5f6fa;
  --c-ph-b: #fde6d3;
  --c-ph-text: #534741;
  --c-map-bg: #eef8fb;
  --c-map-line: #d7eef4;
  --c-map-road: #ffffff;
  --c-map-pin: #fc817b;

  --hero-bg: #64c9e1;
  --hero-text: #534741;
  --hero-muted: #534741;
  --cta-top-bg: #ffffff;
  --cta-top-text: #534741;
  --cta-bottom-bg: #64c9e1;
  --cta-bottom-text: #534741;
  --footer-bg: #534741;
  --footer-text: #ffffff;

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

  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-hero: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-label: "Nunito", "Zen Maru Gothic", sans-serif;
  --font-num: "Nunito", "Zen Maru Gothic", sans-serif;
  --fw-body: 500;
  --fw-head: 700;
  --fw-hero: 900;
  --fw-num: 800;
  --lh-body: 1.9;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --label-transform: none;
  --label-size: 1.0625rem;
  --label-weight: 800;
  --label-ls: 0.04em;

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

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