/*!
  @industry garden
  @label 造園・庭木の手入れ
  @order 12
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「12. 造園・庭木剪定業」スタイルの型（2型。読めたのは4社で、小規模な剪定業者のサイトは読めていない）
*/

/* @theme garden-a
   @name 和の格調
   @desc オフホワイトに深緑と藍、ベージュの細線。明朝の見出しを中央に置き、全面写真に白い面で屋号と1文だけを重ねる
   @fonts https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500;600&display=swap
   @source 白×深緑・濃紺の和の格調（東光園緑化・植彌加藤造園）。地 #fcfcfc、深緑 #103f00（屋号・差し色の文字・ボタン）、濃紺 #003366（小見出し・価格・電話ボタン）、ベージュ #a19476（見出しの線・電話ボタンの枠）、黄緑 #b6c136（強みの番号の丸を淡くして使う）。Noto Serif JP＋Noto Sans JP＋EB Garamond
   @adjust ベージュ #a19476 は地との比が 2.92:1 のため文字に使わず、線と枠だけにした。黄緑 #b6c136 は 1.92:1 のため、白と混ぜた #edf0d4 を番号の丸の面にした
*/
:root[data-theme="garden-a"] {
  --c-bg: #fcfcfc;
  --c-surface: #f6f4ef;
  --c-band: #f3f0e8;
  --c-text: #1f2b36;
  --c-muted: #4d5660;
  --c-line: #d9d1c0;
  --c-accent: #103f00;
  --c-accent-deco: #a19476;
  --c-accent-2: #b6c136;
  --c-btn-bg: #103f00;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #003366;
  --c-btn2-border: #a19476;
  --c-price: #003366;
  --c-badge-bg: #103f00;
  --c-badge-text: #ffffff;
  --c-focus: #003366;
  --c-ph-a: #e6e9dc;
  --c-ph-b: #d2d8c1;
  --c-ph-text: #33402b;
  --c-map-bg: #eef0e6;
  --c-map-line: #dee2d2;
  --c-map-road: #fcfcfc;
  --c-map-pin: #103f00;

  --hero-bg: #d2d8c1;
  --hero-text: #103f00;
  --hero-muted: #003366;
  --hero-card-bg: rgba(252, 252, 252, 0.9);
  --hero-card-pad: clamp(24px, 6vw, 44px);
  --hero-card-radius: 0px;
  --cta-top-bg: #fcfcfc;
  --cta-top-text: #1f2b36;
  --cta-bottom-bg: #e9e4d8;
  --cta-bottom-text: #1f2b36;
  --footer-bg: #103f00;
  --footer-text: #f3f0e8;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "EB Garamond", "Noto Serif JP", serif;
  --font-num: "EB Garamond", "Noto Serif JP", serif;
  --fw-head: 500;
  --fw-hero: 600;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.24em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --hero-lead-size: clamp(0.9375rem, 3.4vw, 1.125rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.875rem);
  --label-size: 0.9375rem;
  --label-weight: 500;
  --label-transform: uppercase;
  --label-ls: 0.24em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --container: 1040px;
  --space-section: clamp(72px, 13vw, 140px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 2px;
  --radius-badge: 0px;

  /* 写真：全面の写真1枚の中央に、白い面で屋号と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(80svh, 760px);
  --hero-body-align: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 26rem;

  --about-media-ratio: 4 / 3;
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 3.5rem;
  --point-num-radius: 50%;
  --point-num-bg: #edf0d4;
  --point-num-text: #103f00;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  --price-size: 1.1875rem;

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

/* @theme garden-b
   @name 清潔な緑
   @desc 白とアイボリーに緑とティール。英字の見出しに日本語を添えて左に寄せ、料金は小さな写真つきの行で並べる
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@500;600&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @source 白×グリーン・ティールの企業的クリーン（西武造園・日比谷アメニス）。アイボリー #f2f1e9（帯）、緑 #28a88b（見出しの線・ヒーローの文字面）、黄緑 #66a125、ティール #028c9b（英字の見出し・電話ボタン）。Zen Kaku Gothic New＋Jost、英語見出し＋日本語サブ
   @adjust 文字に使うティール #028c9b→#027986、ボタンの緑 #28a88b→#1d7b66、ヒーローの文字面 #28a88b→#1b6f5c（白い文字・アイボリーの帯との比を 4.5:1 以上にするため）
*/
:root[data-theme="garden-b"] {
  --c-bg: #ffffff;
  --c-surface: #f7f6f0;
  --c-band: #f2f1e9;
  --c-text: #22302b;
  --c-muted: #4f5b56;
  --c-line: #d9ddd3;
  --c-accent: #027986;
  --c-accent-deco: #28a88b;
  --c-accent-2: #66a125;
  --c-btn-bg: #1d7b66;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #027986;
  --c-btn2-border: #028c9b;
  --c-price: #22302b;
  --c-badge-bg: #1d7b66;
  --c-badge-text: #ffffff;
  --c-focus: #027986;
  --c-ph-a: #e3efe9;
  --c-ph-b: #cbe2d8;
  --c-ph-text: #23413a;
  --c-map-bg: #edf3ef;
  --c-map-line: #dae7df;
  --c-map-road: #ffffff;
  --c-map-pin: #28a88b;

  --hero-bg: #1b6f5c;
  --hero-text: #ffffff;
  --hero-muted: #d4efe5;
  --cta-top-bg: #f2f1e9;
  --cta-top-text: #22302b;
  --cta-bottom-bg: #e2f1ea;
  --cta-bottom-text: #22302b;
  --footer-bg: #1f3a33;
  --footer-text: #f2f1e9;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Jost", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Jost", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 1.85;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: 1.0625rem;
  --label-size: clamp(1.75rem, 6.5vw, 2.5rem);
  --label-weight: 500;
  --label-transform: none;
  --label-ls: 0.02em;
  --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: 4px;

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

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

  /* 料金：小さな写真つきの行。スマホで名前の列が狭くならないよう、写真の右に名前・価格・説明を縦に積む */
  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 88px minmax(0, 1fr);
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.25rem;

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

/* @theme garden-c
   @name 舞う葉
   @desc 白と深緑に濃紺。深緑を重ねた庭の写真がゆっくり重なって切り替わり、淡い緑の葉が舞う。屋号が1字ずつ浮かぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;600&display=swap
   @concept 映像で見せる
   @source 動きの型は、業種別サイト傾向調査の造園・庭木剪定の観察から借りた。読めた4社すべてがヒーローの写真をスライドかフェードで切り替え、植彌加藤造園は人物のない庭園の風景を3枚のフェードで替え、白抜きのロゴだけを重ねてキャッチコピーを置かない。この静かな切り替えを、深緑を重ねた庭の写真がゆっくり重なって替わる動きにし、屋号が1字ずつ浮かぶ動きと、舞う葉を足した。配色は東光園緑化・植彌加藤造園の深緑 #103f00・濃紺 #003366・ベージュ #a19476・黄緑 #b6c136・地 #fcfcfc、書体は同じ型の明朝の見出しを、A の Noto Serif JP と見分けるため Shippori Mincho にした。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film leaves chars
   @slides hero menu-1 menu-2 menu-3
   @adjust 写真には、白い文字が 4.5:1 以上になるよう、深緑 #103f00 を同じ色相で暗くした #0a2800 の 62% を重ねる（白い写真の上で 4.65:1）。舞う葉は、黄緑 #b6c136 を白に3割混ぜた #e9ecc3。ベージュ #a19476 は地との比が 2.92:1 のため、見出しの線と電話ボタンの枠だけに使う
*/
:root[data-theme="garden-c"] {
  --c-bg: #fcfcfc;
  --c-surface: #f3f5ef;
  --c-band: #edf1e7;
  --c-text: #1c2a21;
  --c-muted: #4b584f;
  --c-line: #d4dccb;
  --c-accent: #003366;
  --c-accent-deco: #a19476;
  --c-accent-2: #b6c136;
  --c-btn-bg: #003366;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #103f00;
  --c-btn2-border: #a19476;
  --c-price: #103f00;
  --c-badge-bg: #103f00;
  --c-badge-text: #ffffff;
  --c-focus: #003366;
  --c-ph-a: #e6e9dc;
  --c-ph-b: #d2d8c1;
  --c-ph-text: #33402b;
  --c-map-bg: #eef1e8;
  --c-map-line: #dfe4d6;
  --c-map-road: #fcfcfc;
  --c-map-pin: #103f00;

  --hero-bg: #0a2800;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(10, 40, 0, 0.62);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #fcfcfc;
  --cta-top-text: #1c2a21;
  --cta-bottom-bg: #edf1e7;
  --cta-bottom-text: #1c2a21;
  --footer-bg: #003366;
  --footer-text: #fcfcfc;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-hero: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-num: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fw-head: 500;
  --fw-hero: 600;
  --fw-num: 600;
  --lh-body: 2;
  --ls-head: 0.1em;
  --ls-hero: 0.32em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.75rem);
  --hero-lead-size: clamp(0.9375rem, 3.4vw, 1.125rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.875rem);
  --label-size: 0.8125rem;
  --label-weight: 500;
  --label-ls: 0.32em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 1px;
  --head-inline: 0;

  --space-section: clamp(80px, 14vw, 150px);
  --space-head: clamp(32px, 6vw, 56px);
  --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(90svh, 840px);
  --hero-body-align: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 36rem;

  --about-media-ratio: 3 / 2;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: transparent;
  --point-border-w: 1px;
  --point-align: left;
  --point-num-size: 2.75rem;
  --point-num-radius: 0px;
  --point-num-bg: transparent;
  --point-num-text: #003366;
  --point-num-border-w: 0px;
  --point-num-fs: 1.625rem;

  /* 料金：面を敷かない写真カード（スマホ2列・PC3列） */
  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 28px 14px;
  --menu-item-areas: "media" "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 0px;
  --menu-item-bg: transparent;
  --menu-item-rule: 0px;
  --menu-item-radius: 0px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.1875rem;
  --price-note-display: block;

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

  --mv-slide: 8s;
  --mv-fade: 2s;
  --mv-leaf: #e9ecc3;
  --mv-toggle-bg: #0a2800;
  --mv-toggle-fg: #ffffff;
}

/* @theme garden-d
   @name めくる庭の帳面
   @desc アイボリーの紙に深緑と濃紺の文字とベージュの線、紹介の段は深緑の地。写真は止めたまま、大きな明朝と番号で見せる。読み進めると大きな英字がすべり、PC では手入れの写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Kaisei+Tokumin:wght@500;700;800&family=Noto+Sans+JP:wght@400;700&family=Philosopher:ital,wght@0,400;1,400&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査の造園・庭木剪定の2社の見出しの組み方から借りた。和文の見出しに英文のサブと短い説明を添えた2枚のカード（植彌加藤造園）と、英語の見出しに日本語のサブを添える二段構成（西武造園）を、節の番号と線だけの大きな英字に明朝の見出しを重ねる誌面にした。配色は、西武造園・日比谷アメニスのアイボリー #f2f1e9 を紙にし、東光園緑化・植彌加藤造園の深緑 #103f00・濃紺 #003366・ベージュ #a19476・黄緑 #b6c136 を文字と線に使った。欧文の Philosopher は西武造園が使う書体。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust ベージュ #a19476 は紙 #f2f1e9 との比が 2.64:1 のため、線と大きな英字の線（深緑の地と 4.05:1）だけに使う。深緑の地の上の番号は黄緑 #b6c136（6.16:1）。フォーカス枠は、ベージュを同じ色相で暗くした #8f8264（紙と 3.34:1、深緑の地と 3.20:1、下の連絡帯 #eae8de と 3.08:1）。下の連絡帯は、ベージュを紙に1割混ぜた #eae8de
*/
:root[data-theme="garden-d"] {
  --c-bg: #f2f1e9;
  --c-surface: #f8f7f1;
  --c-band: #eae8de;
  --c-text: #103f00;
  --c-muted: #4a5842;
  --c-line: #d6d0bd;
  --c-accent: #003366;
  --c-accent-deco: #a19476;
  --c-accent-2: #b6c136;
  --c-btn-bg: #103f00;
  --c-btn-text: #f2f1e9;
  --c-btn2-bg: transparent;
  --c-btn2-text: #003366;
  --c-btn2-border: #a19476;
  --c-price: #003366;
  --c-badge-bg: #103f00;
  --c-badge-text: #f2f1e9;
  --c-focus: #8f8264;
  --c-ph-a: #e6e9dc;
  --c-ph-b: #d2d8c1;
  --c-ph-text: #33402b;
  --c-map-bg: #e9e8dd;
  --c-map-line: #deddd0;
  --c-map-road: #f8f7f1;
  --c-map-pin: #103f00;

  --hero-bg: #f2f1e9;
  --hero-text: #103f00;
  --hero-muted: #003366;
  --cta-top-bg: #f2f1e9;
  --cta-top-text: #103f00;
  --cta-bottom-bg: #eae8de;
  --cta-bottom-text: #103f00;
  --footer-bg: #003366;
  --footer-text: #f2f1e9;

  /* 紹介の段は深緑の地に反転し、番号は黄緑。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #103f00;
  --about-text: #f2f1e9;
  --about-muted: #d3dcc8;
  --about-accent: #b6c136;
  --about-surface: #1b4a0c;
  --about-line: #3d6a2d;
  --about-deco: #a19476;
  --menu-bg: #f2f1e9;
  --news-bg: #f2f1e9;
  --contact-bg: #f2f1e9;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Kaisei Tokumin", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-hero: "Kaisei Tokumin", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Philosopher", "Kaisei Tokumin", serif;
  --font-num: "Philosopher", "Kaisei Tokumin", 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;

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

  /* 型（premium/folio.css）の色 */
  --fo-outline: #a19476;
  --mv-toggle-bg: #103f00;
  --mv-toggle-fg: #f2f1e9;
}

/* @theme garden-e
   @name 手入れの札から選ぶ
   @desc 淡い若草色の卓に、濃い緑の太い線の札と、緑の見出しの札。いちばん上に並んだ手入れの写真の札が裏返って名前と料金を見せ、押すとその手入れが大きく開く。前と後の写真も、押すと裏返る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査の造園・庭木剪定の2社から借りた。ヒーローの上に「3つの柱」のボタンを重ねてページ内へ誘導し、12の事業カテゴリを画像のバナーのグリッドで一覧にする型（日比谷アメニス）を、いちばん上に並べた手入れの写真の札（押すとその手入れへ移る）にした。サービスの流れをステップのスライダーで、実績を地名のタグ付きのカードのカルーセルで見せる型（西武造園）を、札を押すか矢印で1つずつ開く料金と、地名を添えた前と後の写真の札にした。札は、写真のタイルが向きを変えて切り替わる型（カフェのコメダ珈琲店）で裏返る。配色は西武造園・日比谷アメニスのアイボリー #f2f1e9、緑 #28a88b、黄緑 #66a125、ティール #028c9b から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 文字と料金に使うティール #028c9b→#02717d（アイボリーの地と 5.06:1、白と 5.74:1）。ボタンと選んだ札も #02717d に白い文字（5.74:1）。緑 #28a88b は見出しと番号の札の地にして、上の文字は #22302b（4.63:1）。卓は黄緑 #66a125 を白に22%混ぜた #ddeacf（文字 #22302b と 10.98:1、フォーカス枠 #02717d と 4.57:1）
*/
:root[data-theme="garden-e"] {
  --c-bg: #f2f1e9;
  --c-surface: #ffffff;
  --c-band: #ddeacf;
  --c-text: #22302b;
  --c-muted: #4f5b56;
  --c-line: #d9ddd3;
  --c-accent: #02717d;
  --c-accent-deco: #28a88b;
  --c-accent-2: #66a125;
  --c-btn-bg: #02717d;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #22302b;
  --c-btn2-border: #22302b;
  --c-price: #02717d;
  --c-badge-bg: #02717d;
  --c-badge-text: #ffffff;
  --c-focus: #02717d;
  --c-ph-a: #e3efe9;
  --c-ph-b: #cbe2d8;
  --c-ph-text: #23413a;
  --c-map-bg: #edf3ef;
  --c-map-line: #dae7df;
  --c-map-road: #ffffff;
  --c-map-pin: #28a88b;

  --hero-bg: #ddeacf;
  --hero-text: #22302b;
  --hero-muted: #4f5b56;
  --cta-top-bg: #f2f1e9;
  --cta-top-text: #22302b;
  --cta-bottom-bg: #ddeacf;
  --cta-bottom-text: #22302b;
  --footer-bg: #22302b;
  --footer-text: #f2f1e9;

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

  --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: "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: 16px;
  --radius-img: 14px;
  --radius-btn: 999px;
  --radius-badge: 999px;

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

  /* 型（premium/touch.css）の色：押せるものの線と影、英字の札と番号の丸 */
  --tc-ink: #22302b;
  --tc-sticker: #28a88b;
  --mv-toggle-bg: #22302b;
  --mv-toggle-fg: #ddeacf;
}