/*!
  @industry hair
  @label 美容室
  @order 1
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「1. 個人美容室」スタイルの型（3型）
  と、vault/.raw/captured/2026-09-24-claude-code-site-trends-overview.md「最初に作るデモへのスタイル提案」サロン案A・C
*/

/* @theme hair-a
   @name 上品ナチュラル
   @desc 生成り×くすみピンク、明朝の見出し。余白広め、全面写真に生成りの面を重ねる
   @fonts https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;700&display=swap
   @source 生成り×くすみピンクの上品ナチュラル（AUBE HAIR・KENJE）。地 #f3ece8、差し色 #ba9b9b・#967373、ボタン #cf7078
   @adjust 文字に使う差し色 #967373→#7a5757、ボタン #cf7078→#a94a55（白い文字との比を 4.5:1 以上にするため）
*/
:root[data-theme="hair-a"] {
  --c-bg: #f3ece8;
  --c-surface: #faf7f5;
  --c-band: #ece3de;
  --c-text: #313131;
  --c-muted: #5b5250;
  --c-line: #d8c8c2;
  --c-accent: #7a5757;
  --c-accent-deco: #ba9b9b;
  --c-accent-2: #967373;
  --c-btn-bg: #a94a55;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #6e4c4c;
  --c-btn2-border: #ba9b9b;
  --c-price: #313131;
  --c-badge-bg: #7a5757;
  --c-badge-text: #ffffff;
  --c-focus: #7a3f47;
  --c-ph-a: #e7d9d3;
  --c-ph-b: #d9c3bb;
  --c-ph-text: #4d3d3a;
  --c-map-bg: #efe6e1;
  --c-map-line: #e0d2cc;
  --c-map-road: #fbf8f6;
  --c-map-pin: #a94a55;

  --hero-bg: #d9c3bb;
  --hero-text: #313131;
  --hero-muted: #6a4a4a;
  --hero-card-bg: rgba(243, 236, 232, 0.92);
  --hero-card-pad: clamp(20px, 5vw, 36px);
  --hero-card-radius: 2px;
  --cta-top-bg: #f3ece8;
  --cta-top-text: #313131;
  --cta-bottom-bg: #ece3de;
  --cta-bottom-text: #313131;
  --footer-bg: #3a302e;
  --footer-text: #f3ece8;

  --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: "EB Garamond", "Shippori Mincho", serif;
  --font-num: "EB Garamond", "Noto Sans JP", serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2rem, 8vw, 3.25rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.875rem);
  --label-size: 1.0625rem;
  --label-weight: 400;
  --label-style: italic;
  --label-transform: none;
  --label-ls: 0.06em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --container: 1040px;
  --space-section: clamp(72px, 14vw, 144px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 2px;
  --radius-img: 2px;
  --radius-btn: 999px;

  /* 写真：全面の写真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(82svh, 760px);
  --hero-body-align: end;
  --hero-body-pad: clamp(20px, 6vw, 56px);
  --hero-body-max: 30rem;

  --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-text: #7a5757;
  --point-num-fs: 1.25rem;

  --price-size: 1.1875rem;

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

/* @theme hair-b
   @name モード
   @desc 白×黒に深赤をごく少量。英字の大見出しと番号、写真を詰めて並べる
   @fonts https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&family=Noto+Sans+JP:wght@400;700&family=Roboto+Condensed:wght@400;700&display=swap
   @source 白×黒×深赤のモノトーン・モード（EARTH・MODE K's）。文字 #1a1a1a、深赤 #a31a30・#d12d40、英字 Cinzel＋Roboto Condensed
   @adjust フォーカス枠は黒い帯の上でも見えるよう #d12d40
*/
:root[data-theme="hair-b"] {
  --c-bg: #ffffff;
  --c-surface: #f5f5f5;
  --c-band: #f0f0f0;
  --c-text: #1a1a1a;
  --c-muted: #555555;
  --c-line: #1a1a1a;
  --c-accent: #a31a30;
  --c-accent-deco: #a31a30;
  --c-accent-2: #d12d40;
  --c-btn-bg: #a31a30;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a1a1a;
  --c-btn2-border: #1a1a1a;
  --c-price: #1a1a1a;
  --c-badge-bg: #a31a30;
  --c-badge-text: #ffffff;
  --c-focus: #d12d40;
  --c-ph-a: #d9d9d9;
  --c-ph-b: #bdbdbd;
  --c-ph-text: #1a1a1a;
  --c-map-bg: #f0f0f0;
  --c-map-line: #dcdcdc;
  --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: #1a1a1a;
  --cta-top-text: #ffffff;
  --cta-bottom-bg: #f0f0f0;
  --cta-bottom-text: #1a1a1a;
  --footer-bg: #1a1a1a;
  --footer-text: #f0f0f0;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: "Cinzel", "Noto Sans JP", serif;
  --font-label: "Cinzel", serif;
  --font-num: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --fw-hero: 600;
  --lh-body: 1.8;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.5rem, 12vw, 5.5rem);
  --h2-size: 1rem;
  --label-size: clamp(1.75rem, 7vw, 3rem);
  --label-weight: 500;
  --label-ls: 0.08em;
  --label-color: #1a1a1a;
  --label-counter: counter(section, decimal-leading-zero) " / ";
  --head-align: left;

  --space-section: clamp(56px, 9vw, 96px);
  --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(88svh, 820px);
  --hero-body-align: end;
  --hero-body-max: 44rem;

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

  --price-size: 1.375rem;

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

/* @theme hair-c
   @name 上質シンプル
   @desc 生成り×深緑、金は線だけ。英字の見出しに日本語を小さく添え、写真は縦長で大きく
   @fonts https://fonts.googleapis.com/css2?family=Belleza&family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @source 白／生成り×ゴールド差し色の上質シンプル（Agu. hair・TAYA）。地 #f3efec、深緑 #004729、金 #c3a766・#a38c15、Shippori Mincho＋Zen Kaku Gothic New＋Belleza
   @adjust 金は文字に使うと比が足りないため、線と面だけに使う
*/
:root[data-theme="hair-c"] {
  --c-bg: #f3efec;
  --c-surface: #faf8f6;
  --c-band: #ebe5e0;
  --c-text: #1f1f1f;
  --c-muted: #555049;
  --c-line: #d6cdc4;
  --c-accent: #004729;
  --c-accent-deco: #c3a766;
  --c-accent-2: #a38c15;
  --c-btn-bg: #004729;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #004729;
  --c-btn2-border: #004729;
  --c-price: #1f1f1f;
  --c-badge-bg: #004729;
  --c-badge-text: #ffffff;
  --c-focus: #7a6118;
  --c-ph-a: #e4ddd5;
  --c-ph-b: #d3c8bc;
  --c-ph-text: #3e3a35;
  --c-map-bg: #ece6e0;
  --c-map-line: #ddd4cb;
  --c-map-road: #faf8f6;
  --c-map-pin: #004729;

  --hero-bg: #f3efec;
  --hero-text: #1f1f1f;
  --hero-muted: #004729;
  --cta-top-bg: #f3efec;
  --cta-top-text: #1f1f1f;
  --cta-bottom-bg: #ebe5e0;
  --cta-bottom-text: #1f1f1f;
  --footer-bg: #004729;
  --footer-text: #f3efec;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Belleza", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Belleza", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.1em;
  --hero-title-size: clamp(2rem, 7vw, 3.25rem);
  --h2-size: 1.0625rem;
  --label-size: clamp(1.875rem, 6.5vw, 2.75rem);
  --label-weight: 400;
  --label-transform: none;
  --label-ls: 0.04em;
  --label-color: #1f1f1f;
  --head-rule-w: 40px;
  --head-rule-h: 1px;

  --space-section: clamp(72px, 13vw, 140px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;

  /* 写真：スマホは縦長の写真の下に文字、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: 3 / 4;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: transparent;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-border-w: 0px;
  --point-num-text: #004729;
  --point-num-fs: 1.5rem;

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

/* @theme hair-d
   @name 鏡の枠と流れる英字
   @desc 生成りに、ミルクティーベージュからラベンダーへのグラデーション。開いたときの演出、鏡の形の枠で切り替わる写真、横に流れる英字の帯、スクロールに合わせた動きを入れる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;1,400;1,500&family=Zen+Maru+Gothic:wght@400;500;700&display=swap
   @concept 映像で見せる
   @source 動きの型は採用サイトの事例（recruit.toyox.co.jp、2026-09-24 に確認。開いたときの幕・写真の切り替え・流れる英字・視差・横に動かす写真・マウスを追う円）。配色は調査の型ではなく、ヘアカラーの色名（ミルクティーベージュ・ピンクベージュ・ラベンダーアッシュ）から新しく決めた。文章・画像・コードは写していない
   @page custom（demo/hair/d.html は手で作る。variants.py は本文を作り直さず、デモ用バーの切り替えだけをそろえる。動きは premium/premium.css・premium/premium.js）
   @adjust ラベンダーアッシュ #b3a9d3 は地との比が 2.00:1 のため、線・点・面だけに使い、文字には同じ色相を暗くした #5d4f7a を使う。フォーカス枠は、生成りの地と、ココアの帯（仕上がりの写真）の両方で 3:1 以上になる #7a61c9。グラデーションの帯（下の連絡帯）では、文字とフォーカス枠をココア #2d2624 にする（最も薄いラベンダーの端でも 8.02:1）
*/
:root[data-theme="hair-d"] {
  --c-bg: #f7f3ef;
  --c-surface: #fffdfb;
  --c-band: #efe8e2;
  --c-text: #2d2624;
  --c-muted: #5f5550;
  --c-line: #ddd3cb;
  --c-accent: #5d4f7a;
  --c-accent-deco: #b3a9d3;
  --c-accent-2: #d9b99e;
  --c-btn-bg: #43395a;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #2d2624;
  --c-btn2-border: #2d2624;
  --c-price: #2d2624;
  --c-badge-bg: #5d4f7a;
  --c-badge-text: #ffffff;
  --c-focus: #7a61c9;
  --c-ph-a: #ece2da;
  --c-ph-b: #ddd3e6;
  --c-ph-text: #3d3438;
  --c-map-bg: #efe8e2;
  --c-map-line: #e2d8d0;
  --c-map-road: #fbf8f5;
  --c-map-pin: #5d4f7a;

  --hero-bg: #f7f3ef;
  --hero-text: #2d2624;
  --hero-muted: #5d4f7a;
  --cta-top-bg: #f7f3ef;
  --cta-top-text: #2d2624;
  /* 下の連絡帯はグラデーション（--pm-grad）。点検では最も薄い端の色で測る */
  --cta-bottom-bg: #e6cdb8;
  --cta-bottom-text: #2d2624;
  --footer-bg: #2d2624;
  --footer-text: #f7f3ef;

  /* 帯の色は「料金＝生成りより濃い帯、写真＝ココア、お知らせ・地図＝生成り、連絡先＝帯」の順 */
  --news-bg: #f7f3ef;

  /* 仕上がりの写真の帯だけ、ココアの地に生成りの文字 */
  --works-bg: #2d2624;
  --works-text: #f7f3ef;
  --works-muted: #d3c9c2;
  --works-accent: #cfc6ea;
  --works-surface: #3a322f;
  --works-line: #4d4440;
  --works-deco: #b3a9d3;

  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Cormorant Garamond", "Zen Maru Gothic", serif;
  --font-num: "Cormorant Garamond", "Zen Maru Gothic", serif;
  --fw-head: 500;
  --fw-hero: 500;
  --fw-num: 500;
  --lh-body: 2;
  --ls-body: 0.04em;
  --ls-head: 0.06em;
  --ls-hero: 0.14em;
  --hero-title-size: clamp(3.25rem, 15vw, 7rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.75rem);
  /* 大きな英字は横に流れる。一番長い「Information」が流れても画面に収まる大きさ */
  --label-size: clamp(2.75rem, 11vw, 6rem);
  --label-weight: 400;
  --label-style: italic;
  --label-transform: none;
  --label-ls: 0;
  --head-align: left;

  --container: 1120px;
  --space-section: clamp(88px, 13vw, 144px);
  --radius: 20px;
  --radius-img: 24px;
  --radius-btn: 999px;

  /* 写真：スマホは写真（鏡の形）の下に文字、PCは文字を左・写真を右に。写真は数秒ごとに切り替わる */
  --hero-areas: "media" "body";
  --hero-areas-lg: "body media";
  --hero-media-ratio: 4 / 5;
  --hero-media-ratio-lg: 4 / 5;
  --hero-body-align: center;
  --hero-body-max: 36rem;

  --about-media-ratio: 4 / 5;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #fffdfb;
  --point-num-radius: 0px;
  --point-num-border-w: 0px;
  --point-num-text: #5d4f7a;
  --point-num-fs: 2.75rem;

  /* スマホでは「トリートメント追加」が1行に入る大きさまで下げる */
  --price-size: clamp(1.375rem, 4vw, 1.625rem);
  --map-ratio: 4 / 3;

  /* 動きのあるスタイルだけで使う値（premium/premium.css） */
  --pm-grad: linear-gradient(115deg, #e6cdb8 0%, #dfc0bf 48%, #c3b9e0 100%);
  --pm-ink: #2d2624;
  --pm-ivory: #f7f3ef;
  --pm-deco-1: #d9b99e;
  --pm-deco-2: #b3a9d3;
  --pm-blob-1: rgba(230, 205, 184, 0.7);
  --pm-blob-2: rgba(195, 185, 224, 0.55);
  --pm-focus-dark: #b3a9d3;
}

/* @theme hair-e
   @name 円く開く写真
   @desc 黒と白に金を少し。いちばん上の写真が、中央から円く開いて次の写真に切り替わる。英字の大見出しは番号つきで、1字ずつせり上がる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,wght@1,400&family=Jost:wght@300;500&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @source 動きの型は、業種別サイト傾向調査の個人美容室の動画のヒーロー（Agu・MODE K's・ZELE：自動再生のループ動画。Agu はループ動画＋ボタン1つ）と、英字の大見出し＋セクション番号の雑誌風の構成（MODE K's）。調査の記述から型だけを借り、動画は見本の写真が中央から円く開いて切り替わる動きで表した。配色は Agu のゴールド #a38c15 と MODE K's の黒 #1a1a1a、書体は Brandon Grotesque・Didot の方向（Jost・Bodoni Moda で代用）。文章・画像・コードは写していない。美容室 D（採用サイトの事例から借りた動き）とは別の型
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film iris chars labelchars
   @slides hero works-1 works-3 works-5
   @adjust 金 #a38c15 は白地との比が 3.3:1 のため、文字には使わず線とピンだけに使い、文字に使う差し色は同じ色相を暗くした #6f5c10 にする。写真には、白い文字が 4.5:1 以上になるよう黒の 56% を重ねる
*/
:root[data-theme="hair-e"] {
  --c-bg: #ffffff;
  --c-surface: #f6f5f2;
  --c-band: #f3f1ec;
  --c-text: #141414;
  --c-muted: #53514d;
  --c-line: #dcd8cf;
  --c-accent: #6f5c10;
  --c-accent-deco: #a38c15;
  --c-accent-2: #d8c98a;
  --c-btn-bg: #141414;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #141414;
  --c-btn2-border: #141414;
  --c-price: #141414;
  --c-badge-bg: #141414;
  --c-badge-text: #ffffff;
  --c-focus: #6f5c10;
  --c-ph-a: #ecebe7;
  --c-ph-b: #dcdad3;
  --c-ph-text: #2b2a28;
  --c-map-bg: #f3f1ec;
  --c-map-line: #e4e0d6;
  --c-map-road: #ffffff;
  --c-map-pin: #a38c15;

  --hero-bg: #0e0e0e;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.56);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #141414;
  --cta-bottom-bg: #f3f1ec;
  --cta-bottom-text: #141414;
  --footer-bg: #0b0b0b;
  --footer-text: #e9e6df;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: "Jost", "Zen Kaku Gothic New", sans-serif;
  --font-label: "Bodoni Moda", "Didot", "Bodoni 72", serif;
  --font-num: "Jost", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 700;
  --fw-hero: 400;
  --lh-body: 1.95;
  --ls-head: 0.08em;
  --ls-hero: 0.42em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.5rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.625rem);
  --label-size: clamp(2.5rem, 10vw, 4.75rem);
  --label-weight: 400;
  --label-style: italic;
  --label-transform: none;
  --label-ls: 0;
  --label-color: #141414;
  --label-counter: counter(section, decimal-leading-zero) "  ";
  --head-align: left;
  --head-rule-w: 0px;

  --space-section: clamp(88px, 14vw, 160px);
  --space-head: clamp(28px, 5vw, 48px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 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(92svh, 860px);
  --hero-body-align: end;

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

  --price-size: 1.3125rem;

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

  --mv-toggle-bg: #141414;
  --mv-toggle-fg: #ffffff;
}

/* @theme hair-f
   @name 髪型の札から選ぶ
   @desc 白と淡いグレーに黒の太い線、深い赤の差し色。いちばん上に仕上がりの写真の札を並べ、裏返ると髪型の説明が出る。押すと写真が大きく開き、メニューは札を押して選ぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Roboto+Condensed:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査の個人美容室の2社から借りた。髪の長さ別のタブで仕上がりの写真を並べるカタログ（EARTH の short〜mens の6タブ、KENJE の LONG／BOB／SHORT／ARRANGE／COLOR）を、押すと大きく開く写真の札と、押して選ぶメニューにした。写真の札は、写真のタイルが向きを変えて切り替わる型（カフェのコメダ珈琲店）で裏返る。配色は EARTH・MODE K's の白×黒×深赤 #a31a30、Roboto Condensed から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 深い赤 #a31a30 は白と 7.64:1、グレーの卓 #ececec と 6.47:1。フォーカス枠も同じ赤
*/
:root[data-theme="hair-f"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #ececec;
  --c-text: #1a1a1a;
  --c-muted: #595959;
  --c-line: #dcdcdc;
  --c-accent: #a31a30;
  --c-accent-deco: #a31a30;
  --c-accent-2: #ffffff;
  --c-btn-bg: #1a1a1a;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1a1a1a;
  --c-btn2-border: #1a1a1a;
  --c-price: #a31a30;
  --c-badge-bg: #a31a30;
  --c-badge-text: #ffffff;
  --c-focus: #a31a30;
  --c-ph-a: #efefef;
  --c-ph-b: #dedede;
  --c-ph-text: #2b2b2b;
  --c-map-bg: #f2f2f2;
  --c-map-line: #e2e2e2;
  --c-map-road: #ffffff;
  --c-map-pin: #a31a30;

  --hero-bg: #ececec;
  --hero-text: #1a1a1a;
  --hero-muted: #595959;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1a1a1a;
  --cta-bottom-bg: #ececec;
  --cta-bottom-text: #1a1a1a;
  --footer-bg: #1a1a1a;
  --footer-text: #f2f2f2;

  --menu-bg: #ffffff;
  --works-bg: #f7f7f7;
  --news-bg: #ffffff;
  --contact-bg: #ffffff;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Sans JP", "Hiragino Sans", sans-serif;
  --font-hero: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --font-label: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --font-num: "Roboto Condensed", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 700;
  --fw-num: 700;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 0.8125rem;
  --label-ls: 0.16em;

  --radius: 6px;
  --radius-img: 4px;
  --radius-btn: 6px;
  --radius-badge: 2px;

  --tc-ink: #1a1a1a;
  --tc-sticker: #ffffff;
  --tc-radius: 6px;
  --mv-toggle-bg: #1a1a1a;
  --mv-toggle-fg: #ffffff;
}