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

/* @theme lash-a
   @name 上品ナチュラル
   @desc 薄桃の地に濃いピンクと金。明朝の本文と筆記体の英字、強みは3つの丸で、写真の下寄りに淡い面を重ねる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600&family=Pinyon+Script&display=swap
   @source 白×ピンク×ゴールドの上品ナチュラル（MAQUIA・Rian）。地 #f9f5f4、ピンク #cf7078・#c23a63、金 #aa9268、文字 #313131、Noto Serif JP＋Pinyon Script
   @adjust 文字に使うピンク #c23a63→#a8305a、金 #aa9268→#7a6240（英字・強みの番号。地と帯の上で 4.5:1 以上にするため）。ボタンは #c23a63 のまま（白い文字と 5.15:1）。#cf7078 は電話ボタンの枠、#aa9268 は見出しの線に回す。面は写真の中央から下寄りに移した（2026-09-24、本人選択。目元のアップの写真が面に隠れたため）
*/
:root[data-theme="lash-a"] {
  --c-bg: #f9f5f4;
  --c-surface: #fdfbfa;
  --c-band: #f3ebe8;
  --c-text: #313131;
  --c-muted: #5c5452;
  --c-line: #e3d6d1;
  --c-accent: #a8305a;
  --c-accent-deco: #aa9268;
  --c-accent-2: #cf7078;
  --c-btn-bg: #c23a63;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #a8305a;
  --c-btn2-border: #cf7078;
  --c-price: #313131;
  --c-badge-bg: #a8305a;
  --c-badge-text: #ffffff;
  --c-focus: #8a2449;
  --c-ph-a: #f1e4e1;
  --c-ph-b: #e6d0cb;
  --c-ph-text: #5a3f3b;
  --c-map-bg: #f4ecea;
  --c-map-line: #e8dcd8;
  --c-map-road: #fdfbfa;
  --c-map-pin: #c23a63;

  --hero-bg: #e6d0cb;
  --hero-text: #313131;
  --hero-muted: #a8305a;
  --hero-card-bg: rgba(249, 245, 244, 0.9);
  --hero-card-pad: clamp(24px, 6vw, 44px);
  --hero-card-radius: 2px;
  --cta-top-bg: #fdfbfa;
  --cta-top-text: #313131;
  --cta-bottom-bg: #f3ebe8;
  --cta-bottom-text: #313131;
  --footer-bg: #5b4838;
  --footer-text: #f9f5f4;

  --font-body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-head: var(--font-body);
  --font-label: "Pinyon Script", "Noto Serif JP", cursive;
  --font-num: var(--font-body);
  --fw-head: 600;
  --fw-hero: 600;
  --lh-body: 2;
  --ls-body: 0.04em;
  --ls-head: 0.08em;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2rem, 8vw, 3.25rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.75rem);
  --label-size: clamp(1.875rem, 7vw, 2.5rem);
  --label-weight: 400;
  --label-transform: none;
  --label-ls: 0.02em;
  --label-color: #7a6240;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 1px;

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

  --about-media-ratio: 4 / 5;
  --about-cols-lg: minmax(0, 4fr) minmax(0, 5fr);
  /* 強み：白い大きな丸に金の細い線（3つの丸） */
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 4.5rem;
  --point-num-radius: 50%;
  --point-num-bg: #ffffff;
  --point-num-text: #7a6240;
  --point-num-border-w: 1px;
  --point-num-fs: 1.375rem;

  --price-size: 1.1875rem;

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

/* @theme lash-b
   @name 明快ポップ
   @desc 白×ビビッドピンクにコーラル。太い英字の大見出しと角丸の写真カード、施術例に税込価格を添える
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 白×ビビッドピンク／コーラルの明快ポップ（TRU NAIL & EYE・DOLCE）。文字 #222、ピンク #ff7cbb・#ed0264、コーラル #f45963、Montserrat＋Noto Sans JP
   @adjust ボタン #ed0264→#e0005f、文字に使うピンク #ed0264→#c8005a（白い文字・淡いピンクの帯の上で 4.5:1 以上にするため）。#ff7cbb は強みの丸（文字は #222）、#f45963 は見出しの線と地図のピンに回す
*/
:root[data-theme="lash-b"] {
  --c-bg: #ffffff;
  --c-surface: #fff5f9;
  --c-band: #fff0f6;
  --c-text: #222222;
  --c-muted: #555555;
  --c-line: #ffd1e5;
  --c-accent: #c8005a;
  --c-accent-deco: #f45963;
  --c-accent-2: #ff7cbb;
  --c-btn-bg: #e0005f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #222222;
  --c-btn2-border: #222222;
  --c-price: #c8005a;
  --c-badge-bg: #c8005a;
  --c-badge-text: #ffffff;
  --c-focus: #222222;
  --c-ph-a: #ffe3ef;
  --c-ph-b: #ffc4dc;
  --c-ph-text: #7a1840;
  --c-map-bg: #fff5f9;
  --c-map-line: #ffe0ed;
  --c-map-road: #ffffff;
  --c-map-pin: #f45963;

  --hero-bg: #fff0f6;
  --hero-text: #222222;
  --hero-muted: #c8005a;
  --cta-top-bg: #ffffff;
  --cta-top-text: #222222;
  --cta-bottom-bg: #ffe3ef;
  --cta-bottom-text: #222222;
  --footer-bg: #353535;
  --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: "Montserrat", "Noto Sans JP", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
  --fw-hero: 700;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: 1.125rem;
  --h3-size: 1rem;
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 800;
  --label-ls: 0.04em;
  --label-transform: uppercase;
  --head-align: left;
  --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: 999px;
  --radius-badge: 999px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  --btn-shadow: 0 4px 12px rgba(224, 0, 95, 0.25);

  /* 写真：PCは文字を左・写真を右に分け、文字の側を淡いピンクにする（分割型） */
  --hero-areas-lg: "body media";
  --hero-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --hero-media-ratio: 1 / 1;
  --hero-media-ratio-lg: 1 / 1;
  --hero-body-align: center;
  --hero-body-max: 26rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-align: left;
  --point-num-size: 2.75rem;
  --point-num-radius: 50%;
  --point-num-bg: #ff7cbb;
  --point-num-text: #222222;
  --point-num-border-w: 0px;
  --point-num-fs: 1rem;

  /* メニュー：写真カード型（施術例の写真＋メニュー名＋税込価格） */
  --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: 8px;
}

/* @theme lash-c
   @name 落ち着きミニマル
   @desc クリーム地にくすみ金とセージ。細い欧文と明朝の見出しを左に寄せ、余白を多く取り、小さな写真つきの行で並べる
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@300;700&family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho:wght@500;700&display=swap
   @source 白〜クリーム×くすみゴールド／セージの落ち着きミニマル（Bianca・Blanc）。地 #fdf6eb、文字 rgba(102,102,102)、くすみ金 #8c793f、セージ #a2ac87、カーキ #b0a986、Zen Kaku Gothic New＋Zen Old Mincho＋Jost
   @adjust 文字のグレー #666666→#555555（本文）、文字に使う金 #8c793f→#6c5d2c、ボタンにセージ #a2ac87→#5f6b43（地・白い文字との比を 4.5:1 以上にするため）。#a2ac87 は電話ボタンの枠、#b0a986 は見出しの線に回す
*/
:root[data-theme="lash-c"] {
  --c-bg: #fdf6eb;
  --c-surface: #fffbf4;
  --c-band: #f6eddc;
  --c-text: #555555;
  --c-muted: #666666;
  --c-line: #e3d8c2;
  --c-accent: #6c5d2c;
  --c-accent-deco: #b0a986;
  --c-accent-2: #a2ac87;
  --c-btn-bg: #5f6b43;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #5f6b43;
  --c-btn2-border: #a2ac87;
  --c-price: #555555;
  --c-badge-bg: #5f6b43;
  --c-badge-text: #ffffff;
  --c-focus: #5f6b43;
  --c-ph-a: #f3eadb;
  --c-ph-b: #e2dac4;
  --c-ph-text: #55503d;
  --c-map-bg: #f6efe2;
  --c-map-line: #ebe2cf;
  --c-map-road: #fffbf4;
  --c-map-pin: #8c793f;

  --hero-bg: #fdf6eb;
  --hero-text: #555555;
  --hero-muted: #6c5d2c;
  --cta-top-bg: #f6eddc;
  --cta-top-text: #555555;
  --cta-bottom-bg: #f6eddc;
  --cta-bottom-text: #555555;
  --footer-bg: #5f6b43;
  --footer-text: #fdf6eb;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Jost", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Jost", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-body: 0.04em;
  --ls-head: 0.1em;
  --ls-hero: 0.24em;
  --hero-title-size: clamp(1.875rem, 7vw, 2.75rem);
  --h2-size: clamp(1.25rem, 4.2vw, 1.625rem);
  --label-size: 0.8125rem;
  --label-weight: 300;
  --label-ls: 0.32em;
  --label-transform: uppercase;
  --head-align: left;
  --head-rule-w: 24px;
  --head-rule-h: 1px;

  --space-section: clamp(88px, 15vw, 168px);
  --space-head: clamp(36px, 6vw, 64px);
  --radius: 0px;
  --radius-img: 0px;
  --radius-btn: 0px;
  --radius-badge: 0px;
  --btn-weight: 500;

  /* 写真：横長の写真の下に、クリームの地で屋号を中央に小さく置く（積む型） */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-pad: clamp(44px, 10vw, 96px);
  --hero-body-max: 44rem;

  --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: #6c5d2c;
  --point-num-border-w: 0px;
  --point-num-fs: 1.5rem;

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

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

/* @theme lash-d
   @name まばたきの演出
   @desc クリームとくすんだ緑、明朝の屋号を中央に。開くと、まぶたが開くように写真が現れ、屋号の下にまつげの線が引かれる。写真はゆっくり切り替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@300;500&family=Zen+Kaku+Gothic+New:wght@400;700&family=Zen+Old+Mincho:wght@400;700&display=swap
   @source 動きの型は、業種別サイト傾向調査の動画背景のヒーロー（まつげサロンのBianca：動画の背景に、ロゴを中央に置いて余白を多く取る）。調査の記述から型だけを借り、動画は見本の写真の切り替えで、開いたときの演出は「まばたき」に置き換えた。配色は同じ社のクリーム #fdf6eb・セージ #a2ac87・カーキ #b0a986 と、明朝と細い欧文の組み合わせから。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion opening-blink film lashline
   @slides hero works-1 menu-3 works-3
   @adjust セージ #a2ac87 は地との比が 2.2:1 のため、線とまつげの線の飾りだけに使い、文字とボタンには同じ色相を暗くした #5f6b43 を使う。写真には、白い文字が 4.5:1 以上になるよう深い緑 #1a1c14 の 62% を重ねる
*/
:root[data-theme="lash-d"] {
  --c-bg: #fdf6eb;
  --c-surface: #fffaf2;
  --c-band: #f4ecdc;
  --c-text: #3d3a31;
  --c-muted: #5b5649;
  --c-line: #e3dac6;
  --c-accent: #5f6b43;
  --c-accent-deco: #a2ac87;
  --c-accent-2: #b0a986;
  --c-btn-bg: #5f6b43;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fffaf2;
  --c-btn2-text: #3d3a31;
  --c-btn2-border: #a2ac87;
  --c-price: #3d3a31;
  --c-badge-bg: #5f6b43;
  --c-badge-text: #ffffff;
  --c-focus: #5f6b43;
  --c-ph-a: #efe6d4;
  --c-ph-b: #e2d8c2;
  --c-ph-text: #3d3a31;
  --c-map-bg: #f4ecdc;
  --c-map-line: #e6dcc8;
  --c-map-road: #fffaf2;
  --c-map-pin: #8c793f;

  --hero-bg: #2f3326;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(26, 28, 20, 0.62);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #fdf6eb;
  --cta-top-text: #3d3a31;
  --cta-bottom-bg: #f4ecdc;
  --cta-bottom-text: #3d3a31;
  --footer-bg: #2f3326;
  --footer-text: #efe8d6;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Zen Old Mincho", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Jost", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Jost", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 400;
  --fw-hero: 400;
  --lh-body: 2;
  --ls-head: 0.12em;
  --ls-hero: 0.36em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.5rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.625rem);
  --label-size: 0.8125rem;
  --label-weight: 500;
  --label-ls: 0.34em;
  --head-align: center;
  --head-rule-w: 1px;
  --head-rule-h: 32px;
  --head-inline: auto;

  --space-section: clamp(80px, 14vw, 150px);
  --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(90svh, 820px);
  --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-border-w: 1px;
  --point-align: center;
  --point-num-size: 2rem;
  --point-num-radius: 0px;
  --point-num-bg: transparent;
  --point-num-text: #5f6b43;
  --point-num-border-w: 0px;
  --point-num-fs: 1.5rem;

  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 104px minmax(0, 1fr);
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.0625rem;

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

  --mv-lash: #f4eedf;
  --mv-opening-bg: #fdf6eb;
  --mv-opening-accent: #6c5d2c;
  --mv-toggle-bg: #3f4633;
  --mv-toggle-fg: #fdf6eb;
}

/* @theme lash-e
   @name めくる施術帳
   @desc 薄桃の紙に濃いグレーの文字と濃いピンク、線だけの英字は金、紹介の段は濃いグレーに反転。写真は止めたまま、読み進めると英字がすべり、PC ではメニューの目元の写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Noto+Serif+JP:wght@400;500;600&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査のまつげサロンの型1（MAQUIA・Rian）と、カフェの型から借りた。まつげの章に、読み進めると動く部品の記録はない。写真は1セクションに1枚で点数が少なく、文章で丁寧に説明する型1の組み方を、写真を止めたまま読ませる誌面にし、各セクションの小文字の英字の見出し（points／menu／flow など）を、番号と線だけの大きな英字にした。セクションごとに写真1枚を背景にして黒の半透明を重ねる MAQUIA の組み方と、ヒーローと About Us を黒地に反転するカフェの上島珈琲店の組み方から、紹介の段を濃いグレーに反転した。配色は MAQUIA の地 #f9f5f4・ピンク #cf7078・金 #aa9268、Rian の文字 #313131、型1の近縁の EYE MAJIC のピンク #c23a63、書体は MAQUIA の Noto Serif JP と Lora から（Rian の筆記体 Pinyon Script は斜体がないため、英字と数字は Lora の斜体にした）。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使うピンクは #c23a63（紙 #f9f5f4 と 4.75:1、ボタンの白い文字と 5.15:1）。#cf7078 は電話ボタンの枠、金 #aa9268 は線だけの英字・読み進めた量の線・紹介の段の罫線に使う。紹介の段は文字色 #313131 の地に反転し、上の金は #aa9268→#bba886（5.61:1）。フォーカス枠は #cf7078 を少し暗くした #cb656e（紙と 3.45:1、帯 #f3ebe8 と 3.17:1、紹介の段と 3.49:1）
*/
:root[data-theme="lash-e"] {
  --c-bg: #f9f5f4;
  --c-surface: #fdfbfa;
  --c-band: #f3ebe8;
  --c-text: #313131;
  --c-muted: #5c5452;
  --c-line: #e3d6d1;
  --c-accent: #c23a63;
  --c-accent-deco: #aa9268;
  --c-accent-2: #cf7078;
  --c-btn-bg: #c23a63;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fdfbfa;
  --c-btn2-text: #313131;
  --c-btn2-border: #cf7078;
  --c-price: #313131;
  --c-badge-bg: #c23a63;
  --c-badge-text: #ffffff;
  --c-focus: #cb656e;
  --c-ph-a: #f1e4e1;
  --c-ph-b: #e6d0cb;
  --c-ph-text: #5a3f3b;
  --c-map-bg: #f4ecea;
  --c-map-line: #e8dcd8;
  --c-map-road: #fdfbfa;
  --c-map-pin: #c23a63;

  --hero-bg: #f9f5f4;
  --hero-text: #313131;
  --hero-muted: #c23a63;
  --cta-top-bg: #f9f5f4;
  --cta-top-text: #313131;
  --cta-bottom-bg: #f3ebe8;
  --cta-bottom-text: #313131;
  --footer-bg: #313131;
  --footer-text: #f9f5f4;

  /* 紹介の段は文字色の濃いグレーに反転し、番号と罫線は金。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #313131;
  --about-text: #f9f5f4;
  --about-muted: #ddd3cf;
  --about-accent: #bba886;
  --about-surface: #3b3938;
  --about-line: #aa9268;
  --about-deco: #aa9268;
  --menu-bg: #f9f5f4;
  --news-bg: #f9f5f4;
  --contact-bg: #f9f5f4;

  --font-body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-head: var(--font-body);
  --font-hero: var(--font-body);
  --font-label: "Lora", "Noto Serif JP", serif;
  --font-num: "Lora", "Noto Serif JP", serif;
  --fw-head: 600;
  --fw-hero: 600;
  --fw-num: 400;
  --lh-body: 2;
  --ls-body: 0.04em;

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

  /* 型（premium/folio.css）の色 */
  --fo-outline: #aa9268;
  --mv-toggle-bg: #313131;
  --mv-toggle-fg: #f9f5f4;
}

/* @theme lash-f
   @name 施術の札から選ぶ
   @desc ピンクの卓に、黒に近い太い線の札と濃いピンクのボタン、コーラルの英字の札。いちばん上に並べた目元の写真の札が裏返って名前と料金を見せ、押すとその施術の写真と説明・料金が大きく開く。仕上がりの写真は指で送り、お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査のまつげサロンの型2（TRU NAIL & EYE・DOLCE）と、ほかの業種の型から借りた。施術例の写真に No.・税込価格・予約ボタンを添えたカードを slick で横に並べる型（TRU NAIL & EYE）を、表に目元の写真、裏に名前と料金を出す札と、札を押して選ぶメニューにした。ヒーローのスライドに見出しとサービス別のボタンを載せて業態を分ける型（DOLCE）を、ヒーローに並べた札から施術を選ぶ形にし、スタッフの顔写真を横に送るスライダー（DOLCE）を、指で送る仕上がりの写真にした。札は、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の形で裏返り、お知らせを種類で絞り込むのは、整体のチェーン型のタブで切り替えるお知らせから借りた。配色は TRU NAIL & EYE のピンク #ff7cbb・#ed0264、DOLCE のコーラル #f45963、型2の文字 #222・#353535、書体は TRU NAIL & EYE の Montserrat と Noto Sans JP から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust ボタンと選んだ札のピンク #ed0264→#e0005f（白い文字と 4.84:1）、文字と料金のピンク #ed0264→#c8005a（白い札と 5.83:1）。ピンク #ff7cbb は卓と下の連絡帯に使い、上の文字は #222（6.71:1）。コーラル #f45963 は英字の札と番号の丸（#222 と 4.89:1）、行き方の行頭の点と地図のピン。フォーカス枠は #222（卓と 6.71:1、地 #fff5f9 と 14.91:1）
*/
:root[data-theme="lash-f"] {
  --c-bg: #fff5f9;
  --c-surface: #ffffff;
  --c-band: #ffe3ef;
  --c-text: #222222;
  --c-muted: #555555;
  --c-line: #ffd1e5;
  --c-accent: #c8005a;
  --c-accent-deco: #f45963;
  --c-accent-2: #ff7cbb;
  --c-btn-bg: #e0005f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #222222;
  --c-btn2-border: #222222;
  --c-price: #c8005a;
  --c-badge-bg: #c8005a;
  --c-badge-text: #ffffff;
  --c-focus: #222222;
  --c-ph-a: #ffe3ef;
  --c-ph-b: #ffc4dc;
  --c-ph-text: #7a1840;
  --c-map-bg: #fff5f9;
  --c-map-line: #ffe0ed;
  --c-map-road: #ffffff;
  --c-map-pin: #f45963;

  --hero-bg: #ff7cbb;
  --hero-text: #222222;
  --hero-muted: #222222;
  --cta-top-bg: #ffffff;
  --cta-top-text: #222222;
  --cta-bottom-bg: #ff7cbb;
  --cta-bottom-text: #222222;
  --footer-bg: #353535;
  --footer-text: #fff5f9;

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

  --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: "Montserrat", "Noto Sans JP", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
  --fw-head: 900;
  --fw-hero: 900;
  --fw-num: 700;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 0.875rem;
  --label-weight: 800;
  --label-ls: 0.12em;

  --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: #222222;
  --tc-sticker: #f45963;
  --mv-toggle-bg: #222222;
  --mv-toggle-fg: #ffffff;
}