/*!
  @industry gym
  @label パーソナルジム
  @order 5
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「5. パーソナルトレーナー・小規模ジム」スタイルの型（3種類）
*/

/* @theme gym-a
   @name 高級・信頼
   @desc 白と薄いグレーを交互に、金の線と赤橙のボタン。小さな英字の見出しを左に寄せ、写真の下に濃い帯を敷く
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Oswald:wght@500;700&family=Zen+Old+Mincho:wght@700&display=swap
   @source 白×ゴールドの高級感・結果訴求（RIZAP・UNDEUX SUPERBODY・BEYOND）。交互の地 #f0f2f3・#f6f4f2、金 #b29540・#c3a36a、黒地 #2f2725、ボタン #d9533b、Noto Sans JP＋Oswald＋Zen Old Mincho
   @adjust ボタン #d9533b→#bf4631、文字に使う金 #b29540→#7a6428（白い文字・薄いグレーの地との比を 4.5:1 以上にするため）。#b29540 は見出しの線、#c3a36a は黒地の上の小見出しと番号に使う
*/
:root[data-theme="gym-a"] {
  --c-bg: #ffffff;
  --c-surface: #f6f4f2;
  --c-band: #f0f2f3;
  --c-text: #222222;
  --c-muted: #555555;
  --c-line: #dcdfe1;
  --c-accent: #7a6428;
  --c-accent-deco: #b29540;
  --c-accent-2: #c3a36a;
  --c-btn-bg: #bf4631;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #2f2725;
  --c-btn2-border: #2f2725;
  --c-price: #2f2725;
  --c-badge-bg: #2f2725;
  --c-badge-text: #ffffff;
  --c-focus: #2f2725;
  --c-ph-a: #eceeef;
  --c-ph-b: #d9dcde;
  --c-ph-text: #2f2725;
  --c-map-bg: #f0f2f3;
  --c-map-line: #dfe2e4;
  --c-map-road: #ffffff;
  --c-map-pin: #bf4631;

  --hero-bg: #2f2725;
  --hero-text: #ffffff;
  --hero-muted: #c3a36a;
  --cta-top-bg: #ffffff;
  --cta-top-text: #222222;
  --cta-bottom-bg: #f6f4f2;
  --cta-bottom-text: #222222;
  --footer-bg: #2f2725;
  --footer-text: #f6f4f2;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Oswald", "Noto Sans JP", sans-serif;
  --font-num: "Oswald", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.75rem);
  --label-size: 0.875rem;
  --label-weight: 500;
  --label-ls: 0.2em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 3px;

  --space-section: clamp(56px, 10vw, 104px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 4px;
  --radius-badge: 4px;

  /* 写真：写真の下に、黒に近い帯で屋号を明朝で置く（積む型） */
  --hero-body-pad: clamp(28px, 6vw, 56px);
  --hero-body-max: 44rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #f6f4f2;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 4px;
  --point-num-bg: #2f2725;
  --point-num-text: #c3a36a;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  --price-size: 1.375rem;

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

/* @theme gym-b
   @name 値ごろ
   @desc 薄いグレー地に白いカード、ピンクと紺にティールと黄。料金は月額と1回あたりの金額をカードで並べる
   @fonts https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @source 白×ピンク・赤の元気な値ごろ感（Apple GYM・OUTLINE・24/7Workout）。薄グレー地 #f4f4f4、ピンク #f24579、赤 #ff373c、紺 #1e2f43、ティール #52acc1、黄 #f0c73e、Lato＋Noto Sans JP
   @adjust ボタン #f24579→#d42a5e、文字に使うピンク #f24579→#c42456、価格の赤 #ff373c→#d1232b（白い文字・薄いグレーの地・白いカードとの比を 4.5:1 以上にするため）。#f24579 はフォーカス枠と地図のピン、ティールは強みの丸（文字は紺）、黄は見出しの線に使う
*/
:root[data-theme="gym-b"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f4f4f4;
  --c-text: #1e2f43;
  --c-muted: #4f5b69;
  --c-line: #dde1e6;
  --c-accent: #c42456;
  --c-accent-deco: #f0c73e;
  --c-accent-2: #52acc1;
  --c-btn-bg: #d42a5e;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1e2f43;
  --c-btn2-border: #1e2f43;
  --c-price: #d1232b;
  --c-badge-bg: #1e2f43;
  --c-badge-text: #ffffff;
  --c-focus: #f24579;
  --c-ph-a: #eef1f4;
  --c-ph-b: #d9e0e7;
  --c-ph-text: #1e2f43;
  --c-map-bg: #f4f4f4;
  --c-map-line: #e4e6e9;
  --c-map-road: #ffffff;
  --c-map-pin: #f24579;

  --hero-bg: #d9e0e7;
  --hero-text: #1e2f43;
  --hero-muted: #c42456;
  --hero-card-bg: #ffffff;
  --hero-card-pad: clamp(20px, 5vw, 32px);
  --hero-card-radius: 16px;
  --cta-top-bg: #1e2f43;
  --cta-top-text: #ffffff;
  --cta-bottom-bg: #1e2f43;
  --cta-bottom-text: #ffffff;
  --footer-bg: #131e2b;
  --footer-text: #f4f4f4;

  --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: "Lato", "Noto Sans JP", sans-serif;
  --font-num: "Lato", "Noto Sans JP", sans-serif;
  --fw-hero: 900;
  --lh-body: 1.8;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.25rem, 10vw, 3.75rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 900;
  --label-ls: 0.04em;
  --label-transform: uppercase;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 5px;

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

  /* 写真：全面の写真の下の方に、角の丸い白いカードで屋号とひとことを重ねる */
  --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: 32rem;

  --about-media-ratio: 4 / 5;
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #52acc1;
  --point-num-text: #1e2f43;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* メニュー：写真なしのカード。名前の下に月額を大きく、説明に1回あたりの金額 */
  --menu-cols: minmax(0, 1fr);
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "name" "price" "desc";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 18px 16px 20px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 16px;
  --price-size: 1.5rem;

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

/* @theme gym-c
   @name ナチュラル
   @desc クリーム地にこげ茶を1色、見出しの下にマーカー風の黄。明朝の見出しと広い余白、写真の横に文字を置く
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;600;700&display=swap
   @source 淡色地×差し色1色のミニマル・ナチュラル（ELEMENT）。クリーム地 #f7f7ee、こげ茶 #5a4335、マーカー風の黄 #eded70、Shippori Mincho＋Noto Sans JP
   @adjust なし（黄 #eded70 は見出しの線と強みの丸の地だけに使い、文字は #5a4335）
*/
:root[data-theme="gym-c"] {
  --c-bg: #f7f7ee;
  --c-surface: #fcfcf6;
  --c-band: #efeee0;
  --c-text: #5a4335;
  --c-muted: #6b574a;
  --c-line: #dcd8c4;
  --c-accent: #5a4335;
  --c-accent-deco: #eded70;
  --c-accent-2: #eded70;
  --c-btn-bg: #5a4335;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #5a4335;
  --c-btn2-border: #5a4335;
  --c-price: #5a4335;
  --c-badge-bg: #5a4335;
  --c-badge-text: #ffffff;
  --c-focus: #5a4335;
  --c-ph-a: #efeee0;
  --c-ph-b: #e0dcc6;
  --c-ph-text: #4a3a2f;
  --c-map-bg: #f1f0e4;
  --c-map-line: #e4e2d0;
  --c-map-road: #fcfcf6;
  --c-map-pin: #5a4335;

  --hero-bg: #f7f7ee;
  --hero-text: #5a4335;
  --hero-muted: #5a4335;
  --cta-top-bg: #efeee0;
  --cta-top-text: #5a4335;
  --cta-bottom-bg: #efeee0;
  --cta-bottom-text: #5a4335;
  --footer-bg: #5a4335;
  --footer-text: #f7f7ee;

  --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-num: "Shippori Mincho", "Noto Sans JP", serif;
  --fw-head: 600;
  --fw-hero: 700;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-display: none;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 72px;
  --head-rule-h: 8px;

  --space-section: clamp(72px, 13vw, 140px);
  --space-head: clamp(32px, 6vw, 56px);
  --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: 4 / 5;
  --hero-media-ratio-lg: 1 / 1;
  --hero-body-align: center;
  --hero-body-max: 26rem;

  --about-media-ratio: 4 / 5;
  --about-cols-lg: minmax(0, 4fr) minmax(0, 5fr);
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 3.5rem;
  --point-num-radius: 50%;
  --point-num-bg: #eded70;
  --point-num-text: #5a4335;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  --price-size: 1.25rem;

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

/* @theme gym-d
   @name タイルの切り替え
   @desc 淡いグレーと黒を交互に、差し色は赤の1色。写真がタイルに分かれて切り替わり、見出しの下にマーカーが引かれる。写真を画面に固定した帯を挟む（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@1,800&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @source 動きの型は、業種別サイト傾向調査の「差し色を1系統に絞り、黒背景セクション・固定背景・パララックス・タイル分割アニメーション・マーカー風下線で見せる」型（パーソナルジムの Dr.トレーニング・REAL WORKOUT）。調査の記述から型だけを借りた。配色は Dr.トレーニングの濃いグレー #3c3c3c と赤 #ff0000、REAL WORKOUT の淡いグレーの地 #f8f8f8 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film tiles mark
   @slides hero works-1 about works-2
   @window works-4
   @adjust 赤 #ff0000 は淡いグレーの地で比が足りないため、明るいブロックの文字とボタンは #c80000、黒いブロックの文字は #ff6b6b にし、#ff0000 は線とマーカーだけに使う。フォーカス枠は、淡い地と黒い地の両方で 3:1 以上になる #e51a1a
*/
:root[data-theme="gym-d"] {
  --c-bg: #f8f8f8;
  --c-surface: #ffffff;
  --c-band: #ececec;
  --c-text: #1c1c1c;
  --c-muted: #474747;
  --c-line: #d6d6d6;
  --c-accent: #c80000;
  --c-accent-deco: #ff0000;
  --c-accent-2: #3c3c3c;
  --c-btn-bg: #c80000;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1c1c1c;
  --c-btn2-border: #1c1c1c;
  --c-price: #1c1c1c;
  --c-badge-bg: #c80000;
  --c-badge-text: #ffffff;
  --c-focus: #e51a1a;
  --c-ph-a: #e6e6e6;
  --c-ph-b: #d2d2d2;
  --c-ph-text: #2e2e2e;
  --c-map-bg: #ececec;
  --c-map-line: #dcdcdc;
  --c-map-road: #ffffff;
  --c-map-pin: #ff0000;

  --hero-bg: #1c1c1c;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.56);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #f8f8f8;
  --cta-top-text: #1c1c1c;
  --cta-bottom-bg: #1c1c1c;
  --cta-bottom-text: #ffffff;
  --footer-bg: #111111;
  --footer-text: #e8e8e8;

  /* 料金と連絡先は黒いブロック */
  --menu-bg: #1c1c1c;
  --menu-text: #ffffff;
  --menu-muted: #c9c9c9;
  --menu-accent: #ff6b6b;
  --menu-line: #3a3a3a;
  --menu-surface: #262626;
  --menu-price: #ffffff;
  --menu-mark: rgba(255, 0, 0, 0.55);
  --contact-bg: #1c1c1c;
  --contact-text: #ffffff;
  --contact-muted: #c9c9c9;
  --contact-accent: #ff6b6b;
  --contact-line: #3a3a3a;
  --contact-surface: #262626;
  --contact-mark: rgba(255, 0, 0, 0.55);

  --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: "Inter Tight", "Noto Sans JP", sans-serif;
  --font-num: "Inter Tight", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --ls-head: 0.04em;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.5rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.75rem);
  --label-size: clamp(2rem, 8vw, 3.25rem);
  --label-weight: 800;
  --label-ls: 0.01em;
  --label-style: italic;
  --head-align: left;

  --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(86svh, 780px);
  --hero-body-align: end;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-bg: #1c1c1c;
  --point-num-text: #ff6b6b;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  --price-size: 1.375rem;

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

  --mv-tile: #1c1c1c;
  --mv-tile-2: #c80000;
  --mv-mark: rgba(255, 0, 0, 0.2);
  --mv-reveal-x: -32px;
  --mv-reveal-y: 0px;
  --mv-window-overlay: rgba(0, 0, 0, 0.2);
  --mv-toggle-bg: #1c1c1c;
  --mv-toggle-fg: #ffffff;
}

/* @theme gym-e
   @name めくるトレーニング誌
   @desc 薄いグレーの紙に黒の文字と金の線、紹介の段は黒の地に金、ボタンは赤橙。写真は止めたまま、明朝の屋号と大きな番号で見せる。読み進めると線だけの金の英字がすべり、コースと料金が1つずつ出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Source+Sans+3:ital,wght@0,400;1,400&family=Zen+Old+Mincho:wght@500;700;900&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査のパーソナルジムの白×ゴールドの型（RIZAP・UNDEUX SUPERBODY・BEYOND）の、見出しと地の組み方から借りた。英字のセクション見出し＋日本語の小見出しの2段（ABOUT／PRICE／VOICE、About／Method／Price）を、番号と線だけの大きな英字の誌面にし、白とライトグレーの交互の地で節を区切る組み方（BEYOND・UNDEUX SUPERBODY）を、紙の地と、黒の地に反転した紹介の段（BEYOND の黒地×ゴールド）にした。体の前後の写真と数値は借りていない。配色は BEYOND の地 #f6f4f2・#f0f2f3 と黒 #2f2725、RIZAP の金 #b29540、UNDEUX SUPERBODY の金 #c3a36a とボタンの赤橙 #d9533b、書体は BEYOND のキャッチの Zen Old Mincho と、UNDEUX SUPERBODY の英字見出しの Source Sans Pro（Google Fonts の Source Sans 3）から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う金 #b29540→#7a6428（紙 #f6f4f2 と 5.20:1）。黒の地の上の金は #c3a36a（6.10:1）。ボタン #d9533b→#bf4631（白い文字と 5.08:1）。フォーカス枠は #d9533b のまま（紙と 3.65:1、黒の地と 3.65:1、下の帯 #f0f2f3 と 3.56:1）。#b29540 は線だけの英字と線だけに使う
*/
:root[data-theme="gym-e"] {
  --c-bg: #f6f4f2;
  --c-surface: #fbfaf8;
  --c-band: #f0f2f3;
  --c-text: #2f2725;
  --c-muted: #5c5450;
  --c-line: #d9d3cd;
  --c-accent: #7a6428;
  --c-accent-deco: #b29540;
  --c-accent-2: #c3a36a;
  --c-btn-bg: #bf4631;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #f6f4f2;
  --c-btn2-text: #2f2725;
  --c-btn2-border: #2f2725;
  --c-price: #2f2725;
  --c-badge-bg: #2f2725;
  --c-badge-text: #f6f4f2;
  --c-focus: #d9533b;
  --c-ph-a: #eceae6;
  --c-ph-b: #dcd8d3;
  --c-ph-text: #2f2725;
  --c-map-bg: #eeebe7;
  --c-map-line: #e0dbd5;
  --c-map-road: #fbfaf8;
  --c-map-pin: #bf4631;

  --hero-bg: #f6f4f2;
  --hero-text: #2f2725;
  --hero-muted: #5c5450;
  --cta-top-bg: #f6f4f2;
  --cta-top-text: #2f2725;
  --cta-bottom-bg: #f0f2f3;
  --cta-bottom-text: #2f2725;
  --footer-bg: #2f2725;
  --footer-text: #f6f4f2;

  /* 紹介の段は黒の地に金（BEYOND の黒地×ゴールド）。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #2f2725;
  --about-text: #f6f4f2;
  --about-muted: #d3cbc5;
  --about-accent: #c3a36a;
  --about-surface: #3a312e;
  --about-line: #574c47;
  --about-deco: #b29540;
  --menu-bg: #f6f4f2;
  --news-bg: #f6f4f2;
  --contact-bg: #f6f4f2;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-hero: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Source Sans 3", "Noto Sans JP", sans-serif;
  --font-num: "Source Sans 3", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --fw-num: 400;
  --lh-body: 1.95;

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

  /* 型（premium/folio.css）の色：線だけの大きな英字は金 */
  --fo-outline: #b29540;
  --mv-toggle-bg: #2f2725;
  --mv-toggle-fg: #f6f4f2;
}

/* @theme gym-f
   @name トレーニングの写真を開く
   @desc ピンクの卓と薄いグレーの地に、紺の太い線の札と黄色の英字の札、ピンクのボタン。上に並べたトレーニングの写真の札は、裏返って説明を見せ、押すと大きく開く。コースは札を押して選ぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=BIZ+UDPGothic:wght@400;700&family=Lato:wght@400;700;900&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査のパーソナルジムの白×ピンク・赤の型（Apple GYM・OUTLINE・24/7Workout）と、カフェの1社から借りた。この型の、薄グレー地に白いカードを並べる組み方を、太い線の押せる白い札にし、月額×回数×1回単価の3列の料金表（Apple GYM・24/7Workout・ELEMENT は税込で併記）を、コースの札を押して選ぶと、その料金と説明（1回あたりの金額など）が開くメニューにした。写真の札は、商品写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の形で裏返る。この型の体の前後の写真と数値のカード、他社比較表（調査は大手だけの要素とした）は借りていない。配色は OUTLINE のピンク #f24579・ティール #52acc1、Apple GYM の紺 #1e2f43・赤 #ff373c、この型の黄 #f0c73e、24/7Workout の薄グレー地 #f2f2f2、書体はこの型のゴシック（A-OTF UD新ゴ など。BIZ UDPGothic で代用）と OUTLINE の Lato から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust ボタン #f24579→#d42a5e（白い文字と 4.89:1）、文字に使うピンク #f24579→#c42456（白い札と 5.62:1、薄グレーの地と 5.02:1）、価格の赤 #ff373c→#d1232b（白い札と 5.27:1）。卓は #f24579 を OKLCH で明るくした #ffdee3 で、上の文字は紺 #1e2f43（10.90:1）。黄の英字の札 #f0c73e の上の文字も紺（8.39:1）。フォーカス枠 #c42456（卓と 4.50:1、地と 5.02:1）。#f24579 は地図のピン、ティール #52acc1 は線と点だけに使う
*/
:root[data-theme="gym-f"] {
  --c-bg: #f2f2f2;
  --c-surface: #ffffff;
  --c-band: #ffdee3;
  --c-text: #1e2f43;
  --c-muted: #4f5b69;
  --c-line: #dde1e6;
  --c-accent: #c42456;
  --c-accent-deco: #52acc1;
  --c-accent-2: #f0c73e;
  --c-btn-bg: #d42a5e;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1e2f43;
  --c-btn2-border: #1e2f43;
  --c-price: #d1232b;
  --c-badge-bg: #1e2f43;
  --c-badge-text: #ffffff;
  --c-focus: #c42456;
  --c-ph-a: #eef1f4;
  --c-ph-b: #d9e0e7;
  --c-ph-text: #1e2f43;
  --c-map-bg: #ebedf0;
  --c-map-line: #dde1e6;
  --c-map-road: #ffffff;
  --c-map-pin: #f24579;

  --hero-bg: #ffdee3;
  --hero-text: #1e2f43;
  --hero-muted: #4f5b69;
  --cta-top-bg: #f2f2f2;
  --cta-top-text: #1e2f43;
  --cta-bottom-bg: #ffdee3;
  --cta-bottom-text: #1e2f43;
  --footer-bg: #1e2f43;
  --footer-text: #f2f2f2;

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

  --font-body: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-hero: "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-label: "Lato", "BIZ UDPGothic", sans-serif;
  --font-num: "Lato", "BIZ UDPGothic", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --fw-num: 900;
  --lh-body: 1.85;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 0.875rem;
  --label-weight: 900;
  --label-ls: 0.12em;

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

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