/*!
  @industry relax
  @label 整体・リラクゼーション
  @order 4
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「4. 整体・リラクゼーション」スタイルの型（2型＋外れ値1社）
*/

/* @theme relax-a
   @name 親しみ
   @desc 白×ネイビーにオレンジと黄。丸い欧文の大見出しと角丸のカードで、「60分 4,400円」を大きく見せる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Nunito:wght@400;700;800&display=swap
   @source 白地×ビビッド差し色の親しみやすいチェーン型（りらくる・Re.Ra.Ku・ラフィネ・カラダファクトリー）。薄グレー #f8f8f8、ネイビー #153163、オレンジ #ff5600、黄 #fbc422、黄緑 #82ae40、Noto Sans JP＋Nunito
   @adjust オレンジ #ff5600→#c94300（ボタンの地・価格の文字。白い文字・白いカードとの比を 4.5:1 以上にするため）。#ff5600 はメニューのカードの下線と地図のピン、黄 #fbc422 はネイビーの面の上の小見出しと下の連絡帯、黄緑 #82ae40 は見出しの線だけに使う
*/
:root[data-theme="relax-a"] {
  --c-bg: #ffffff;
  --c-surface: #f8f8f8;
  --c-band: #f2f4f7;
  --c-text: #222222;
  --c-muted: #555555;
  --c-line: #dfe4ec;
  --c-accent: #153163;
  --c-accent-deco: #82ae40;
  --c-accent-2: #fbc422;
  --c-btn-bg: #c94300;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #153163;
  --c-btn2-border: #153163;
  --c-price: #c94300;
  --c-badge-bg: #153163;
  --c-badge-text: #ffffff;
  --c-focus: #153163;
  --c-ph-a: #e9eef5;
  --c-ph-b: #d5deeb;
  --c-ph-text: #153163;
  --c-map-bg: #eef2f7;
  --c-map-line: #dde4ee;
  --c-map-road: #ffffff;
  --c-map-pin: #ff5600;

  --hero-bg: #153163;
  --hero-text: #ffffff;
  --hero-muted: #fbc422;
  --cta-top-bg: #ffffff;
  --cta-top-text: #222222;
  --cta-bottom-bg: #fff3cc;
  --cta-bottom-text: #222222;
  --footer-bg: #153163;
  --footer-text: #ffffff;

  --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: "Nunito", "Noto Sans JP", sans-serif;
  --font-num: "Nunito", "Noto Sans JP", sans-serif;
  --fw-hero: 900;
  --lh-body: 1.8;
  --ls-hero: 0.1em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 800;
  --label-ls: 0.02em;
  --label-transform: none;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 4px;

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

  /* 写真：写真の下に、ネイビーの面で屋号とひとことを中央に置く（積む型） */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-pad: clamp(28px, 6vw, 56px);
  --hero-body-max: 44rem;

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

  /* メニュー：写真なしのカード。時間を名前に、価格を大きく（下線はオレンジ） */
  --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 20px 20px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 4px;
  --menu-line: #ff5600;
  --menu-item-radius: 14px;
  --price-size: clamp(1.75rem, 7vw, 2.125rem);

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

/* @theme relax-b
   @name 上質・落ち着き
   @desc 白と生成りに深緑、金は線だけ。欧文セリフと明朝の2段見出し、余白を広く取り、写真の横に文字を置く
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Playfair+Display:ital,wght@1,400&family=Shippori+Mincho:wght@500;700&display=swap
   @source 白・生成り×深緑／ゴールドの上質・落ち着き系（クイーンズウェイ・整体院JITAN BODY）。生成り #ece8df、深緑 #104222、金 #b3a346・#ad976e、帯 #ededed、Shippori Mincho＋Playfair Display（英字）＋Noto Sans JP
   @adjust 金は文字に使うと比が足りないため、見出しの線・電話ボタンの枠だけに使う
*/
:root[data-theme="relax-b"] {
  --c-bg: #ffffff;
  --c-surface: #f7f5f0;
  --c-band: #ece8df;
  --c-text: #222222;
  --c-muted: #555049;
  --c-line: #d8d1c2;
  --c-accent: #104222;
  --c-accent-deco: #b3a346;
  --c-accent-2: #ad976e;
  --c-btn-bg: #104222;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #104222;
  --c-btn2-border: #ad976e;
  --c-price: #222222;
  --c-badge-bg: #104222;
  --c-badge-text: #ffffff;
  --c-focus: #104222;
  --c-ph-a: #ece8df;
  --c-ph-b: #dcd5c6;
  --c-ph-text: #3f3a31;
  --c-map-bg: #f1eee7;
  --c-map-line: #e2ddd1;
  --c-map-road: #ffffff;
  --c-map-pin: #104222;

  --hero-bg: #ece8df;
  --hero-text: #222222;
  --hero-muted: #104222;
  --cta-top-bg: #ffffff;
  --cta-top-text: #222222;
  --cta-bottom-bg: #ededed;
  --cta-bottom-text: #222222;
  --footer-bg: #104222;
  --footer-text: #ece8df;

  --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-label: "Playfair Display", "Shippori Mincho", serif;
  --font-num: "Shippori Mincho", "Noto Sans JP", serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.1em;
  --ls-hero: 0.14em;
  --hero-title-size: clamp(2rem, 8vw, 3.25rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.875rem, 7vw, 2.75rem);
  --label-weight: 400;
  --label-style: italic;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 1px;

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

  /* 写真：スマホは縦長の写真の下に文字、PCは写真を左・文字を右に（分割型） */
  --hero-areas: "media" "body";
  --hero-areas-lg: "media body";
  --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: #ffffff;
  --point-num-text: #104222;
  --point-num-border-w: 1px;
  --point-num-fs: 1.25rem;

  --price-size: 1.25rem;

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

/* @theme relax-c
   @name 白黒ミニマル
   @desc 白×黒と薄いグレーだけ。細い欧文の大見出しと細字の本文、全面写真に黒を重ね、写真を詰めて並べる
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@300;700&family=Noto+Sans+JP:wght@300;400;700&display=swap
   @source 白×黒のミニマル（てもみん）。白地に黒文字、グレー #efefef・#d9d9d9、細いウェイトの書体、余白多め・ボタン1つの構図。Jost＋Noto Sans JP
   @adjust なし
*/
:root[data-theme="relax-c"] {
  --c-bg: #ffffff;
  --c-surface: #f7f7f7;
  --c-band: #efefef;
  --c-text: #1a1a1a;
  --c-muted: #505050;
  --c-line: #d9d9d9;
  --c-accent: #1a1a1a;
  --c-accent-deco: #1a1a1a;
  --c-accent-2: #d9d9d9;
  --c-btn-bg: #1a1a1a;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a1a1a;
  --c-btn2-border: #1a1a1a;
  --c-price: #1a1a1a;
  --c-badge-bg: #1a1a1a;
  --c-badge-text: #ffffff;
  --c-focus: #1a1a1a;
  --c-ph-a: #efefef;
  --c-ph-b: #d9d9d9;
  --c-ph-text: #333333;
  --c-map-bg: #f4f4f4;
  --c-map-line: #e4e4e4;
  --c-map-road: #ffffff;
  --c-map-pin: #1a1a1a;

  --hero-bg: #1a1a1a;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.55);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1a1a1a;
  --cta-bottom-bg: #efefef;
  --cta-bottom-text: #1a1a1a;
  --footer-bg: #1a1a1a;
  --footer-text: #efefef;

  --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: "Jost", "Noto Sans JP", sans-serif;
  --font-num: "Jost", "Noto Sans JP", sans-serif;
  --fw-body: 300;
  --fw-head: 400;
  --fw-hero: 300;
  --lh-body: 2;
  --ls-body: 0.06em;
  --ls-head: 0.14em;
  --ls-hero: 0.4em;
  --hero-title-size: clamp(2rem, 9vw, 3.5rem);
  --h2-size: 0.9375rem;
  --label-size: clamp(2rem, 8vw, 3.25rem);
  --label-weight: 300;
  --label-ls: 0.2em;
  --label-transform: uppercase;
  --label-color: #1a1a1a;
  --head-align: left;
  --head-rule-w: 0px;

  --space-section: clamp(88px, 15vw, 168px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;
  --btn-weight: 400;

  /* 写真：全面の写真に黒を重ね、屋号を中央に細く大きく置く */
  --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, 820px);
  --hero-body-align: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 46rem;

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

  --price-size: 1.125rem;

  --works-cols: 2;
  --works-cols-lg: 3;
  --works-ratio: 4 / 5;
  --works-gap: 2px;
  --works-caption-display: none;
}

/* @theme relax-d
   @name 呼吸のリズム
   @desc 白と黒に淡い紫。1枚の写真がゆっくり寄っては戻り、屋号の文字が1字ずつ浮かぶ。写真の中央に、呼吸の速さで広がって戻る円を重ねる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@300;500&family=Noto+Sans+JP:wght@300;400;700&display=swap
   @source 動きの型は、業種別サイト傾向調査の「1枚写真のヒーローに見出し文字のアニメ」と、右下に固定した黒い円形のボタン（整体・リラクゼーションの1社）。調査の記述から型だけを借り、呼吸の円を足した。配色は同じ社の白黒・グレー #efefef と、ブランドの紫 #6d5d8c から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film chars breath
   @slides hero
   @adjust 紫 #6d5d8c は淡い紫の帯の上で比が足りないため、文字には同じ色相を暗くした #5b4c7a を使い、#8f82b3 は線とピンだけに使う。写真には、白い文字が 4.5:1 以上になるよう暗い紫 #14101e の 60% を重ねる
*/
:root[data-theme="relax-d"] {
  --c-bg: #ffffff;
  --c-surface: #f7f6fa;
  --c-band: #f3f1f7;
  --c-text: #1a1a1a;
  --c-muted: #4d4b55;
  --c-line: #dedbe6;
  --c-accent: #5b4c7a;
  --c-accent-deco: #8f82b3;
  --c-accent-2: #d9d9d9;
  --c-btn-bg: #1a1a1a;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a1a1a;
  --c-btn2-border: #1a1a1a;
  --c-price: #1a1a1a;
  --c-badge-bg: #5b4c7a;
  --c-badge-text: #ffffff;
  --c-focus: #5b4c7a;
  --c-ph-a: #efefef;
  --c-ph-b: #dcdce3;
  --c-ph-text: #333333;
  --c-map-bg: #f4f3f8;
  --c-map-line: #e4e2ec;
  --c-map-road: #ffffff;
  --c-map-pin: #6d5d8c;

  --hero-bg: #1a1a1a;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(20, 16, 30, 0.6);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1a1a1a;
  --cta-bottom-bg: #f3f1f7;
  --cta-bottom-text: #1a1a1a;
  --footer-bg: #1a1a1a;
  --footer-text: #efefef;

  --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: "Jost", "Noto Sans JP", sans-serif;
  --font-num: "Jost", "Noto Sans JP", sans-serif;
  --fw-head: 400;
  --fw-hero: 300;
  --lh-body: 2;
  --ls-body: 0.05em;
  --ls-head: 0.14em;
  --ls-hero: 0.42em;
  --hero-title-size: clamp(2.25rem, 10vw, 4rem);
  --h2-size: clamp(1.125rem, 4vw, 1.375rem);
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 300;
  --label-ls: 0.2em;
  --head-align: center;
  --head-rule-w: 0px;
  --head-inline: auto;

  --space-section: clamp(88px, 15vw, 168px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;
  --btn-weight: 400;

  /* 写真：画面いっぱいの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(90svh, 840px);
  --hero-body-align: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 40rem;

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

  --price-size: 1.125rem;

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

  --mv-toggle-bg: #1a1a1a;
  --mv-toggle-fg: #ffffff;
}

/* @theme relax-e
   @name めくるコース案内
   @desc 生成りの紙に黒に近い文字と深緑、線だけの英字は金、紹介の段は深緑に反転。写真は止めたまま、読み進めると英字がすべり、PC ではコースの大きな番号がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Playfair+Display:ital,wght@0,400;1,400&family=Shippori+Mincho:wght@500;700&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査の整体・リラクゼーションの型2（クイーンズウェイ・整体院JITAN BODY）と、カフェの型から借りた。整体の章に、読み進めると動く部品の記録はない。クイーンズウェイの「Salon｜サロン案内」のような欧文セリフ＋日本語の小見出しの2段見出しを、番号と線だけの大きな英字にし、整体院JITAN BODY の縦に長い1ページ（体験談 → 推薦 → 実績 → 口コミ → 9つの理由 → キャンペーン価格 → 予約）を、コースを1つずつ読み進める誌面にした。紹介の段を濃い地に反転する組み方は、カフェの上島珈琲店（ヒーローと About Us を黒地に反転）から借りた（整体の8社に暗い地の社はない）。配色はクイーンズウェイの深緑 #104222・金 #b3a346・文字 #333、整体院JITAN BODY の生成り #f8f6f1・#ece8df・金 #ad976e・緑 #009885、書体はクイーンズウェイの Playfair Display・Shippori Mincho・Noto Sans JP から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う差し色は深緑 #104222（紙 #f8f6f1 と 10.66:1）。金 #b3a346 は読み進めた量の線、#ad976e は線だけの英字・電話ボタンの枠・紹介の段の罫線に使い、紹介の段（深緑）の上の金は #b3a346→#c3b564（5.54:1）。フォーカス枠は緑 #009885 を少し暗くした #00957f（紙と 3.47:1、帯 #ece8df と 3.06:1、深緑と 3.07:1）
*/
:root[data-theme="relax-e"] {
  --c-bg: #f8f6f1;
  --c-surface: #ffffff;
  --c-band: #ece8df;
  --c-text: #333333;
  --c-muted: #555049;
  --c-line: #d8d1c2;
  --c-accent: #104222;
  --c-accent-deco: #b3a346;
  --c-accent-2: #ad976e;
  --c-btn-bg: #104222;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #104222;
  --c-btn2-border: #ad976e;
  --c-price: #333333;
  --c-badge-bg: #104222;
  --c-badge-text: #ffffff;
  --c-focus: #00957f;
  --c-ph-a: #ece8df;
  --c-ph-b: #dcd5c6;
  --c-ph-text: #3f3a31;
  --c-map-bg: #f1eee7;
  --c-map-line: #e2ddd1;
  --c-map-road: #ffffff;
  --c-map-pin: #104222;

  --hero-bg: #f8f6f1;
  --hero-text: #333333;
  --hero-muted: #104222;
  --cta-top-bg: #f8f6f1;
  --cta-top-text: #333333;
  --cta-bottom-bg: #ece8df;
  --cta-bottom-text: #333333;
  --footer-bg: #104222;
  --footer-text: #ece8df;

  /* 紹介の段は深緑に反転し、番号は金、罫線は金の線。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #104222;
  --about-text: #f8f6f1;
  --about-muted: #d3dccf;
  --about-accent: #c3b564;
  --about-surface: #114624;
  --about-line: #ad976e;
  --about-deco: #b3a346;
  --menu-bg: #f8f6f1;
  --news-bg: #f8f6f1;
  --contact-bg: #f8f6f1;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Playfair Display", "Shippori Mincho", serif;
  --font-num: "Playfair Display", "Shippori Mincho", serif;
  --fw-head: 700;
  --fw-hero: 500;
  --fw-num: 400;
  --lh-body: 2;

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

  /* 型（premium/folio.css）の色 */
  --fo-outline: #ad976e;
  --mv-toggle-bg: #104222;
  --mv-toggle-fg: #f8f6f1;
}

/* @theme relax-f
   @name 様子の写真を開く
   @desc 黄色の卓に、紺の太い線の札とオレンジのボタン、黄緑の英字の札。いちばん上に店内と施術の様子の写真の札を並べ、裏返ると写真の説明が出て、押すと写真が大きく開く。コースは名前の札を押して選ぶと、料金が大きく出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Sans+JP:wght@400;700&family=Nunito:wght@400;700;800&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査の整体・リラクゼーションの型1（りらくる・ラフィネ など）と、ほかの業種の型から借りた。3〜4枚のカードでメニューを見せる型1の組み方と、「60分 3,600円」を大きく出すりらくるの価格先出しを、コースの名前の札を押すと料金が大きく出るメニューにし、お悩みのタグから選ぶ入口（カラダファクトリーの7タグ）を、押して選ぶ名前の札の形にした。タブで切り替えるお知らせ（型1）を、種類で絞り込むボタンにした。メニューに写真がないため、ヒーローの札は店内と施術の様子の写真で作り、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の形で裏返る。配色はラフィネのネイビー #153163、りらくるの黄 #fbc422、カラダファクトリーのオレンジ #ff5600、Re.Ra.Ku の黄緑 #82ae40、型1の薄グレーの地 #f8f8f8、書体はラフィネの Nunito と M PLUS Rounded 1c から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust オレンジ #ff5600→#c94300（ボタンの地・選んだ札・料金の文字。白い文字・白い札と 4.90:1）、#ff5600 は行き方の行頭の点と地図のピンに回す。黄 #fbc422 は卓と下の連絡帯、黄緑 #82ae40 は英字の札と番号の丸に使い、上の文字は紺 #153163（黄と 7.88:1、黄緑と 4.89:1）。フォーカス枠は紺（卓と 7.88:1、地 #f8f8f8 と 11.97:1）
*/
:root[data-theme="relax-f"] {
  --c-bg: #f8f8f8;
  --c-surface: #ffffff;
  --c-band: #f2f4f7;
  --c-text: #153163;
  --c-muted: #555555;
  --c-line: #dfe4ec;
  --c-accent: #153163;
  --c-accent-deco: #ff5600;
  --c-accent-2: #82ae40;
  --c-btn-bg: #c94300;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #153163;
  --c-btn2-border: #153163;
  --c-price: #c94300;
  --c-badge-bg: #153163;
  --c-badge-text: #ffffff;
  --c-focus: #153163;
  --c-ph-a: #e9eef5;
  --c-ph-b: #d5deeb;
  --c-ph-text: #153163;
  --c-map-bg: #eef2f7;
  --c-map-line: #dde4ee;
  --c-map-road: #ffffff;
  --c-map-pin: #ff5600;

  --hero-bg: #fbc422;
  --hero-text: #153163;
  --hero-muted: #153163;
  --cta-top-bg: #ffffff;
  --cta-top-text: #153163;
  --cta-bottom-bg: #fbc422;
  --cta-bottom-text: #153163;
  --footer-bg: #153163;
  --footer-text: #ffffff;

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

  --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: "Nunito", "Noto Sans JP", sans-serif;
  --font-num: "Nunito", "Noto Sans JP", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --fw-num: 800;
  --lh-body: 1.8;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: none;
  --label-size: 0.9375rem;
  --label-weight: 800;
  --label-ls: 0.04em;

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

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