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

/* @theme nail-a
   @name 値ごろポップ
   @desc 白×マゼンタに黄を少し。太い英字の大見出しと角丸の写真カードで、定額デザインを価格つきで並べる
   @fonts https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap
   @source 白×ビビッドピンクの値ごろポップ（DASHING DIVA・TRU）。文字 #333、主色 #e4007f、淡ピンクの帯 #f7e2eb、黄 #ffeb36、Bebas Neue＋Zen Kaku Gothic New
   @adjust 文字に使う主色 #e4007f→#c4006e（淡ピンクの帯の上で 4.5:1 以上にするため）。ボタン・写真の下の面は #e4007f のまま（白い文字と 4.56:1）
*/
:root[data-theme="nail-a"] {
  --c-bg: #ffffff;
  --c-surface: #fdf1f6;
  --c-band: #f7e2eb;
  --c-text: #333333;
  --c-muted: #5c5c5c;
  --c-line: #efc7d8;
  --c-accent: #c4006e;
  --c-accent-deco: #ffeb36;
  --c-accent-2: #e4007f;
  --c-btn-bg: #e4007f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #c4006e;
  --c-btn2-border: #e4007f;
  --c-price: #c4006e;
  --c-badge-bg: #c4006e;
  --c-badge-text: #ffffff;
  --c-focus: #8f004f;
  --c-ph-a: #fbe6ef;
  --c-ph-b: #f5c9dc;
  --c-ph-text: #7a1446;
  --c-map-bg: #fdf1f6;
  --c-map-line: #f7dbe7;
  --c-map-road: #ffffff;
  --c-map-pin: #e4007f;

  --hero-bg: #e4007f;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #333333;
  --cta-bottom-bg: #ffeb36;
  --cta-bottom-text: #333333;
  --footer-bg: #c4006e;
  --footer-text: #ffffff;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: var(--font-body);
  --font-label: "Bebas Neue", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Montserrat", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --lh-body: 1.8;
  --ls-hero: 0.1em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: 1.125rem;
  --h3-size: 1rem;
  --label-size: clamp(2rem, 9vw, 3.25rem);
  --label-weight: 400;
  --label-ls: 0.04em;
  --label-transform: uppercase;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 44px;
  --head-rule-h: 6px;

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

  /* 写真：写真の下に、マゼンタの面で屋号とひとことを中央に置く（積む型） */
  --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;
  --about-cols-lg: minmax(0, 4fr) minmax(0, 5fr);
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #e4007f;
  --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.25rem;

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

/* @theme nail-b
   @name ケアと信頼
   @desc 白×くすみローズにミントを少し。欧文セリフの英字、余白を広く取った行型のメニュー、写真に白い面を重ねる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Spectral:ital,wght@0,400;0,600;1,400&display=swap
   @source 白×くすみピンクの上品ナチュラル・ケア信頼型（Nail Quick・NAIL STATION）。文字 #5d5855、主色 #ce617f・#943d57、淡ピンク #fef5fa・#f9f1f3、ミント #75c1ae、Spectral＋Noto Sans JP
   @adjust ボタン #ce617f→#b24a68、強みの番号の文字にミント #75c1ae→#2e6e5f（白い文字・淡いミントの丸の上で 4.5:1 以上にするため）。#ce617f は電話ボタンの枠と地図のピン、ミントは見出しの線と丸の地に回す
*/
:root[data-theme="nail-b"] {
  --c-bg: #ffffff;
  --c-surface: #f9f1f3;
  --c-band: #fef5fa;
  --c-text: #5d5855;
  --c-muted: #6b6461;
  --c-line: #eadde1;
  --c-accent: #943d57;
  --c-accent-deco: #75c1ae;
  --c-accent-2: #ce617f;
  --c-btn-bg: #b24a68;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #943d57;
  --c-btn2-border: #ce617f;
  --c-price: #943d57;
  --c-badge-bg: #943d57;
  --c-badge-text: #ffffff;
  --c-focus: #943d57;
  --c-ph-a: #f9f1f3;
  --c-ph-b: #efdde3;
  --c-ph-text: #6b3a4a;
  --c-map-bg: #fbf5f7;
  --c-map-line: #f0e4e8;
  --c-map-road: #ffffff;
  --c-map-pin: #ce617f;

  --hero-bg: #efdde3;
  --hero-text: #5d5855;
  --hero-muted: #943d57;
  --hero-card-bg: rgba(255, 255, 255, 0.92);
  --hero-card-pad: clamp(20px, 5vw, 36px);
  --hero-card-radius: 4px;
  --cta-top-bg: #fef5fa;
  --cta-top-text: #5d5855;
  --cta-bottom-bg: #f9f1f3;
  --cta-bottom-text: #5d5855;
  --footer-bg: #943d57;
  --footer-text: #ffffff;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Spectral", "Noto Sans JP", serif;
  --font-num: "Spectral", "Noto Sans JP", serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.1em;
  --ls-hero: 0.2em;
  --hero-title-size: clamp(2rem, 8vw, 3.25rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.625rem);
  --label-size: 1.25rem;
  --label-weight: 400;
  --label-style: italic;
  --label-transform: none;
  --label-ls: 0.04em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 2px;

  --space-section: clamp(72px, 13vw, 140px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 4px;
  --radius-img: 4px;
  --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(80svh, 760px);
  --hero-body-align: end;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 32rem;

  --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: #e3f3ef;
  --point-num-text: #2e6e5f;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  --price-size: 1.1875rem;

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

/* @theme nail-c
   @name 金の写真主体
   @desc 白×黒に金の線と面。筆記体の英字を大きく置き、全面写真に黒を重ね、見本の写真を詰めて並べる
   @fonts https://fonts.googleapis.com/css2?family=Allura&family=Maven+Pro:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&display=swap
   @source 白×ゴールドの写真主体ミニマル（RounGe）。文字 #000・#333、金 #eec400、Maven Pro＋Allura（筆記体）。見た目だけを借り、構成は固定のまま
   @adjust 金 #eec400 は文字に使うと比が足りないため、見出しの線・強みの枠・LINEボタンの地（文字は #000）・地図のピンだけに使う
*/
:root[data-theme="nail-c"] {
  --c-bg: #ffffff;
  --c-surface: #f7f7f5;
  --c-band: #f5f5f3;
  --c-text: #333333;
  --c-muted: #555555;
  --c-line: #e2e2dc;
  --c-accent: #000000;
  --c-accent-deco: #eec400;
  --c-accent-2: #eec400;
  --c-btn-bg: #eec400;
  --c-btn-text: #000000;
  --c-btn2-bg: #111111;
  --c-btn2-text: #ffffff;
  --c-btn2-border: #111111;
  --c-price: #000000;
  --c-badge-bg: #000000;
  --c-badge-text: #ffffff;
  --c-focus: #000000;
  --c-ph-a: #ecebe6;
  --c-ph-b: #d9d7cf;
  --c-ph-text: #333333;
  --c-map-bg: #f3f3f0;
  --c-map-line: #e2e1db;
  --c-map-road: #ffffff;
  --c-map-pin: #eec400;

  --hero-bg: #000000;
  --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: #333333;
  --cta-bottom-bg: #f5f5f3;
  --cta-bottom-text: #333333;
  --footer-bg: #000000;
  --footer-text: #f5f5f3;

  --font-body: "Maven Pro", "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: "Allura", cursive;
  --font-num: "Maven Pro", "Noto Sans JP", sans-serif;
  --fw-head: 500;
  --fw-hero: 400;
  --lh-body: 1.9;
  --ls-head: 0.12em;
  --ls-hero: 0.3em;
  --hero-title-size: clamp(2.25rem, 10vw, 4rem);
  --h2-size: 1rem;
  --label-size: clamp(2.75rem, 11vw, 4.5rem);
  --label-weight: 400;
  --label-transform: none;
  --label-ls: 0;
  --label-color: #000000;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 2px;

  --space-section: clamp(80px, 14vw, 160px);
  --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: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 44rem;

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

  /* メニュー：写真つきの行。スマホでも名前が折れないよう、価格は名前の下に置く（README の「名前の列が狭いとき」の並び） */
  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 112px minmax(0, 1fr);
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.125rem;

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

/* @theme nail-d
   @name 動画のような写真
   @desc 白と桜色、明朝の見出し。いちばん上の写真が、動画のように重なって切り替わりながらゆっくり寄り、小さな光がまたたく（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;700&family=Tinos:ital@1&display=swap
   @source 動きの型は、業種別サイト傾向調査の動画のヒーロー（ネイルサロンMARCH：自動再生のループ動画）。調査の記述から型だけを借り、動画は見本の写真4枚の切り替えと寄りで表した。配色は同じ社の桜色 #ffa0a0 と、游明朝・Times New Roman の見出しの組み合わせから。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film sparkle
   @slides hero works-3 menu-4 works-1
   @adjust 桜色 #ffa0a0 は白地との比が 1.9:1 のため、線・電話ボタンの縁・地図のピンだけに使い、文字とボタンには同じ色相を暗くした #ad3d57 を使う。屋号は写真に重ねた白い面（92%）の上に置く
*/
:root[data-theme="nail-d"] {
  --c-bg: #ffffff;
  --c-surface: #fff7f7;
  --c-band: #fff0f0;
  --c-text: #3b2f31;
  --c-muted: #665659;
  --c-line: #f2d4d4;
  --c-accent: #ad3d57;
  --c-accent-deco: #ffa0a0;
  --c-accent-2: #ffd2d2;
  --c-btn-bg: #ad3d57;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #8f2f46;
  --c-btn2-border: #ffa0a0;
  --c-price: #3b2f31;
  --c-badge-bg: #ad3d57;
  --c-badge-text: #ffffff;
  --c-focus: #ad3d57;
  --c-ph-a: #f7e4e4;
  --c-ph-b: #efd3d6;
  --c-ph-text: #4a3438;
  --c-map-bg: #fff0f0;
  --c-map-line: #f6dcdc;
  --c-map-road: #ffffff;
  --c-map-pin: #f08080;

  --hero-bg: #fff0f0;
  --hero-text: #3b2f31;
  --hero-muted: #8f2f46;
  --hero-card-bg: rgba(255, 255, 255, 0.92);
  --hero-card-pad: clamp(22px, 5vw, 36px);
  --hero-card-radius: 4px;
  --hero-ph-text: #4a3438;
  --cta-top-bg: #ffffff;
  --cta-top-text: #3b2f31;
  --cta-bottom-bg: #fff0f0;
  --cta-bottom-text: #3b2f31;
  --footer-bg: #3b2f31;
  --footer-text: #fbeeee;

  --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: "Tinos", "Times New Roman", serif;
  --fw-head: 700;
  --fw-hero: 500;
  --ls-hero: 0.2em;
  --hero-title-size: clamp(2.5rem, 10vw, 4rem);
  --h2-size: clamp(1.375rem, 5vw, 1.875rem);
  --label-size: 1.375rem;
  --label-weight: 400;
  --label-ls: 0.02em;
  --label-transform: none;
  --label-style: italic;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --radius: 4px;
  --radius-img: 4px;

  /* 写真：画面いっぱいの写真が切り替わり、左下の白い面に屋号 */
  --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(84svh, 760px);
  --hero-body-align: end;
  --hero-body-max: 28rem;

  --about-media-ratio: 4 / 5;
  --about-cols-lg: minmax(0, 4fr) minmax(0, 5fr);
  --point-bg: #fff7f7;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: transparent;
  --point-num-text: #ad3d57;
  --point-num-fs: 1rem;

  --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: 0;
  --menu-item-rule: 0px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.125rem;
  --price-note-display: block;

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

  --mv-toggle-bg: #3b2f31;
  --mv-toggle-fg: #ffffff;
}

/* @theme nail-e
   @name めくるデザイン帳
   @desc 淡いピンクの紙にグレーの文字と深いローズ、紹介の段は濃いワイン色にミントの番号。写真は止めたまま、読み進めると線だけの大きな英字がすべり、PC ではデザインの写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Spectral:ital,wght@0,400;1,400&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査のネイルサロンの型2（Nail Quick・NAIL STATION）と、同じ章の見出しと作品写真の観察から借りた。ネイルの章に、読み進めると動く部品の記録はない。1セクションに1テーマを置き、作品写真を6点のグリッドで見せる型2の組み方を、写真を止めたまま品ごとに1つの節を読ませるメニューと、6点の組み写真にした。8社中7社が使う「英字の大見出し＋日本語の小見出し」を、番号と線だけの大きな英字にし、作品写真に番号・品番を添える型（3社）と税込価格を添える型（4社）を、品の番号と料金の並びにした。紹介の段を濃い地に反転する組み方は、カフェの上島珈琲店（ヒーローと About Us を黒地に反転）から借りた（ネイルの8社に暗い地の社はない）。配色は Nail Quick のローズピンク #ce617f・ミント #75c1ae、NAIL STATION の文字 #5d5855・くすみピンク #943d57、2社の淡いピンク #fef5fa・#f9f1f3、書体は Nail Quick の Spectral と NAIL STATION の Noto Sans JP から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使うくすみピンクは #943d57（紙 #f9f1f3 と 6.17:1）。#ce617f は電話ボタンの枠・地図のピン・フォーカス枠、ミント #75c1ae は読み進めた量の線と紹介の段の番号に回す。紹介の段とフッターの地は #943d57 を同じ色相で暗くした #532231（淡いピンク #fef5fa の文字と 11.98:1、ミントの番号と 6.09:1）。フォーカス枠 #ce617f は紙と 3.35:1、帯 #f4e7eb と 3.10:1、紹介の段と 3.44:1
*/
:root[data-theme="nail-e"] {
  --c-bg: #f9f1f3;
  --c-surface: #fef5fa;
  --c-band: #f4e7eb;
  --c-text: #5d5855;
  --c-muted: #6b6461;
  --c-line: #e3cfd6;
  --c-accent: #943d57;
  --c-accent-deco: #75c1ae;
  --c-accent-2: #ce617f;
  --c-btn-bg: #943d57;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fef5fa;
  --c-btn2-text: #943d57;
  --c-btn2-border: #ce617f;
  --c-price: #5d5855;
  --c-badge-bg: #943d57;
  --c-badge-text: #ffffff;
  --c-focus: #ce617f;
  --c-ph-a: #f3e4ea;
  --c-ph-b: #ead3dc;
  --c-ph-text: #6b3a4a;
  --c-map-bg: #f4e7eb;
  --c-map-line: #ecdce2;
  --c-map-road: #fef5fa;
  --c-map-pin: #ce617f;

  --hero-bg: #f9f1f3;
  --hero-text: #5d5855;
  --hero-muted: #943d57;
  --cta-top-bg: #f9f1f3;
  --cta-top-text: #5d5855;
  --cta-bottom-bg: #f4e7eb;
  --cta-bottom-text: #5d5855;
  --footer-bg: #532231;
  --footer-text: #fef5fa;

  /* 紹介の段は濃いワイン色に反転し、番号はミント。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #532231;
  --about-text: #fef5fa;
  --about-muted: #e9d3db;
  --about-accent: #75c1ae;
  --about-surface: #5e2737;
  --about-line: #943d57;
  --about-deco: #75c1ae;
  --menu-bg: #f9f1f3;
  --news-bg: #f9f1f3;
  --contact-bg: #f9f1f3;

  --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: "Spectral", "Noto Sans JP", serif;
  --font-num: "Spectral", "Noto Sans JP", serif;
  --fw-head: 700;
  --fw-hero: 700;
  --fw-num: 400;
  --lh-body: 2;

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

  /* 型（premium/folio.css）の色 */
  --fo-outline: #d49bad;
  --mv-toggle-bg: #532231;
  --mv-toggle-fg: #fef5fa;
}

/* @theme nail-f
   @name デザインの札から選ぶ
   @desc 淡いピンクの卓に、濃いグレーの太い線の札とマゼンタ、黄色を少し。いちばん上のデザインの写真の札が裏返って名前と料金を見せ、押すとそのデザインの写真と説明・料金が大きく開く。見本の写真は指で送り、お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@400;700&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査のネイルサロンの型1（DASHING DIVA・TRU など）と、ほかの業種の型から借りた。爪のアップを No.＋税込価格付きでカタログ状に並べる型（DASHING DIVA・TRU）を、表にデザインの写真、裏に名前と料金を出す札にし、カードと slick・bxslider のスライダーで詰める型1の組み方を、札を押して選ぶメニューと、指で送る見本の写真にした。ヒーローを文字入りのキャンペーンバナーのスライダーにする型（FASTNAIL・DASHING DIVA）を、ヒーローの札がときどき裏返って名前と料金を見せる形にした。札は、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の形で裏返り、お知らせを種類で絞り込むのは、整体のチェーン型のタブで切り替えるお知らせから借りた。配色は DASHING DIVA のマゼンタ #e4007f・黄 #ffeb36、型1の文字 #333・淡いピンクの帯 #f7e2eb、書体は TRU・prish の Bebas Neue、TRU の Montserrat、prish の Zen Kaku Gothic New から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 文字と料金に使うマゼンタ #e4007f→#c4006e（白い札と 5.88:1、淡いピンクの卓 #f7e2eb と 4.77:1）。ボタンと選んだ札は #e4007f のまま（白い文字と 4.56:1）。黄 #ffeb36 は英字の札と番号の丸だけに使い、上の文字は #333（10.34:1）。フォーカス枠 #c4006e は卓と 4.77:1、地 #fdf1f6 と 5.34:1
*/
:root[data-theme="nail-f"] {
  --c-bg: #fdf1f6;
  --c-surface: #ffffff;
  --c-band: #f7e2eb;
  --c-text: #333333;
  --c-muted: #5c5c5c;
  --c-line: #efc7d8;
  --c-accent: #c4006e;
  --c-accent-deco: #e4007f;
  --c-accent-2: #ffeb36;
  --c-btn-bg: #e4007f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #333333;
  --c-btn2-border: #333333;
  --c-price: #c4006e;
  --c-badge-bg: #c4006e;
  --c-badge-text: #ffffff;
  --c-focus: #c4006e;
  --c-ph-a: #fbe6ef;
  --c-ph-b: #f5c9dc;
  --c-ph-text: #7a1446;
  --c-map-bg: #fdf1f6;
  --c-map-line: #f7dbe7;
  --c-map-road: #ffffff;
  --c-map-pin: #e4007f;

  --hero-bg: #f7e2eb;
  --hero-text: #333333;
  --hero-muted: #5c5c5c;
  --cta-top-bg: #ffffff;
  --cta-top-text: #333333;
  --cta-bottom-bg: #f7e2eb;
  --cta-bottom-text: #333333;
  --footer-bg: #333333;
  --footer-text: #fdf1f6;

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

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: var(--font-body);
  --font-label: "Bebas Neue", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Montserrat", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --fw-num: 700;
  --lh-body: 1.8;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 1.25rem;
  --label-weight: 400;
  --label-ls: 0.06em;

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

  /* JavaScript が動かないときのメニュー：写真カード（見本の写真＋名前＋税込価格） */
  --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.25rem;

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