/*!
  @industry cafe
  @label カフェ・喫茶店
  @order 17
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「17. 個人カフェ・喫茶店」スタイルの型（3型）
  と、vault/.raw/captured/2026-09-24-claude-code-site-trends-overview.md「飲食案A〜C」
*/

/* @theme cafe-a
   @name レトロ喫茶
   @desc 生成り×こげ茶の帯に赤の差し色。明朝の見出しと筆記体の英字、品ごとに小さな写真を添えた行で看板の品を見せる
   @fonts https://fonts.googleapis.com/css2?family=Allura&family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;700&display=swap
   @source 白・生成り地×こげ茶×赤オレンジのレトロ喫茶（高倉町珈琲・元町珈琲・喫茶室ルノアール）。生成り #f2eee9・#e8d8c5、こげ茶 #503322・#2e1e16、赤 #e34034・#bc3320、橙 #f19431、Shippori Mincho＋Noto Sans JP＋Allura
   @adjust 文字に使う赤 #bc3320→#b32a17（帯 #e8d8c5 の上で 4.5:1 以上にするため。OKLCH で明度だけ下げた）、フォーカス枠 #e34034→#d9482f（こげ茶の帯と生成りの帯の両方で 3:1 以上にするため）。ボタンは #bc3320 のまま（白い文字と 5.78:1）
*/
:root[data-theme="cafe-a"] {
  --c-bg: #f2eee9;
  --c-surface: #f8f5f1;
  --c-band: #e8d8c5;
  --c-text: #503322;
  --c-muted: #664a39;
  --c-line: #d3bfa8;
  --c-accent: #b32a17;
  --c-accent-deco: #e34034;
  --c-accent-2: #f19431;
  --c-btn-bg: #bc3320;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #f2eee9;
  --c-btn2-text: #503322;
  --c-btn2-border: #503322;
  --c-price: #503322;
  --c-badge-bg: #bc3320;
  --c-badge-text: #ffffff;
  --c-focus: #d9482f;
  --c-ph-a: #e8d8c5;
  --c-ph-b: #d6bda2;
  --c-ph-text: #503322;
  --c-map-bg: #ece3d8;
  --c-map-line: #dfd1c0;
  --c-map-road: #f8f5f1;
  --c-map-pin: #e34034;

  --hero-bg: #2e1e16;
  --hero-text: #2e1e16;
  --hero-muted: #b32a17;
  --hero-card-bg: rgba(242, 238, 233, 0.93);
  --hero-card-pad: clamp(20px, 5vw, 36px);
  --hero-card-radius: 2px;
  --cta-top-bg: #2e1e16;
  --cta-top-text: #f2eee9;
  --cta-bottom-bg: #e8d8c5;
  --cta-bottom-text: #503322;
  --footer-bg: #2e1e16;
  --footer-text: #f2eee9;

  --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: "Allura", "Shippori Mincho", cursive;
  --font-num: "Shippori Mincho", "Noto Sans JP", serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-size: clamp(1.75rem, 6vw, 2.25rem);
  --label-weight: 400;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 1px;

  --container: 1040px;
  --space-section: clamp(72px, 13vw, 140px);
  --radius: 2px;
  --radius-img: 2px;
  --radius-btn: 4px;
  --radius-badge: 2px;

  /* 写真：全面の写真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-body-max: 28rem;

  --about-media-ratio: 1 / 1;
  --about-cols-lg: minmax(0, 5fr) minmax(0, 6fr);
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 3.5rem;
  --point-num-radius: 50%;
  --point-num-text: #b32a17;
  --point-num-fs: 1.25rem;

  /* メニュー：小さな写真つきの行。スマホで品名が折れないよう、価格は説明の下に置く */
  --menu-item-areas: "media name" "media desc" "media price";
  --menu-item-cols: 96px minmax(0, 1fr);
  --menu-item-pad: 20px 0;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.1875rem;

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

/* @theme cafe-b
   @name 商品タイル
   @desc 白地に橙と黄の帯、赤い価格。手書き風の見出しと大きな英字、角丸12pxの写真カードに全品の価格を並べる
   @fonts https://fonts.googleapis.com/css2?family=Klee+One:wght@600&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 白地×商品写真タイル×オレンジの親しみ型（コメダ珈琲店・さかい珈琲）。橙 #e95513、テラコッタ #d86a35、赤 #aa0e0e、黄 #ffde14、ベージュ #f0efe7、文字のこげ茶 #40220f、Noto Sans JP＋手書き風の Klee One
   @adjust ボタン・番号の橙 #e95513→#cf4701、文字に使う橙 #e95513→#bf4000（白い文字・地との比を 4.5:1 以上にするため。OKLCH で明度だけ下げた）。赤 #aa0e0e はそのまま価格とバッジに、黄 #ffde14 は帯だけに使う
*/
:root[data-theme="cafe-b"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #f0efe7;
  --c-text: #40220f;
  --c-muted: #5e4636;
  --c-line: #e4e0d4;
  --c-accent: #bf4000;
  --c-accent-deco: #e95513;
  --c-accent-2: #ffde14;
  --c-btn-bg: #cf4701;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #bf4000;
  --c-btn2-border: #cf4701;
  --c-price: #aa0e0e;
  --c-badge-bg: #aa0e0e;
  --c-badge-text: #ffffff;
  --c-focus: #aa0e0e;
  --c-ph-a: #fff4c2;
  --c-ph-b: #fbd8bf;
  --c-ph-text: #40220f;
  --c-map-bg: #f5f3ec;
  --c-map-line: #e7e3d6;
  --c-map-road: #ffffff;
  --c-map-pin: #e95513;

  --hero-bg: #ffde14;
  --hero-text: #40220f;
  --hero-muted: #aa0e0e;
  --cta-top-bg: #f0efe7;
  --cta-top-text: #40220f;
  --cta-bottom-bg: #ffde14;
  --cta-bottom-text: #40220f;
  --footer-bg: #40220f;
  --footer-text: #ffffff;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-hero: "Klee One", "Noto Sans JP", sans-serif;
  --font-label: "Klee One", "Noto Sans JP", sans-serif;
  --fw-hero: 600;
  --lh-body: 1.8;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --hero-body-pad: clamp(24px, 5vw, 48px);
  --h2-size: 1.125rem;
  --h3-size: clamp(1rem, 2.4vw, 1.125rem);
  --label-size: clamp(1.75rem, 7vw, 2.75rem);
  --label-weight: 600;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: left;

  --space-section: clamp(48px, 8vw, 88px);
  --radius: 12px;
  --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;

  --about-media-ratio: 1 / 1;
  --point-bg: #ffffff;
  --point-num-size: 2.75rem;
  --point-num-radius: 50%;
  --point-num-bg: #cf4701;
  --point-num-text: #ffffff;
  --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 8px 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 12px;
  --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: 10px;
}

/* @theme cafe-c
   @name 老舗の上質
   @desc 墨黒の地に金の線、クリームの本文面。明朝の見出しとJostの英字、上の写真と紹介の段を暗い地に反転する
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@400;500&family=Shippori+Mincho:wght@500;700&family=Zen+Kaku+Gothic+New:wght@400;700&display=swap
   @source 白×深色×ゴールドの上質・老舗感（上島珈琲店・倉式珈琲店・珈琲館）。墨黒 #080000、クリーム #fcf8ef・#f8e7d1、金 #e1c45f・#daa761、ブラウン #603813、Shippori Mincho＋Zen Kaku Gothic New＋Jost
   @adjust フォーカス枠 #daa761→#ab7a33（墨黒の地とクリームの地の両方で 3:1 以上にするため。OKLCH で明度だけ下げた）。金 #daa761 は線と飾り、#e1c45f は暗い地の上の文字とボタンだけに使う
*/
:root[data-theme="cafe-c"] {
  --c-bg: #fcf8ef;
  --c-surface: #ffffff;
  --c-band: #f8e7d1;
  --c-text: #080000;
  --c-muted: #603813;
  --c-line: #e6d3b3;
  --c-accent: #603813;
  --c-accent-deco: #daa761;
  --c-accent-2: #e1c45f;
  --c-btn-bg: #e1c45f;
  --c-btn-text: #080000;
  --c-btn2-bg: transparent;
  --c-btn2-text: #fcf8ef;
  --c-btn2-border: #daa761;
  --c-price: #080000;
  --c-badge-bg: #603813;
  --c-badge-text: #fcf8ef;
  --c-focus: #ab7a33;
  --c-ph-a: #ecdfc7;
  --c-ph-b: #d9c29c;
  --c-ph-text: #3b2410;
  --c-map-bg: #f4ebdb;
  --c-map-line: #e8dac1;
  --c-map-road: #fcf8ef;
  --c-map-pin: #603813;

  --hero-bg: #080000;
  --hero-text: #fcf8ef;
  --hero-muted: #e1c45f;
  --cta-top-bg: #080000;
  --cta-top-text: #fcf8ef;
  --cta-bottom-bg: #080000;
  --cta-bottom-text: #fcf8ef;
  --footer-bg: #603813;
  --footer-text: #fcf8ef;

  /* 紹介の段を墨黒の地に反転する（6色をそろえる） */
  --about-bg: #080000;
  --about-text: #fcf8ef;
  --about-muted: #d9ccb6;
  --about-accent: #e1c45f;
  --about-line: #4a3a22;
  --about-surface: #17100b;

  --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: "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-head: 0.1em;
  --ls-hero: 0.18em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.75rem);
  --label-size: 0.8125rem;
  --label-weight: 500;
  --label-transform: uppercase;
  --label-ls: 0.32em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 48px;
  --head-rule-h: 1px;

  --container: 1040px;
  --space-section: clamp(80px, 14vw, 152px);
  --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: 1 / 1;
  --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: 3rem;
  --point-num-radius: 0px;
  --point-num-bg: transparent;
  --point-num-text: #e1c45f;
  --point-num-border-w: 0px;
  --point-num-fs: 1.75rem;

  /* メニュー：行型（写真は出さない） */
  --menu-item-pad: 22px 0;
  --price-size: 1.3125rem;

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

/* @theme cafe-d
   @name 湯気と灯り
   @desc 生成りと紺に金の線。いちばん上の写真が重なって切り替わり、湯気と灯りがゆらぐ。屋号が1字ずつ浮かぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@400&family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500;700&display=swap
   @source 動きの型は、業種別サイト傾向調査の動画のヒーロー（カフェ・喫茶店の倉式珈琲店：自動再生の動画にロゴを重ねる）と、スライドごとに1行のひとことをフェードで出す型（高倉町珈琲）。調査の記述から型だけを借り、動画は見本の写真の切り替えで表し、湯気と灯りのゆらぎを足した。配色と書体は倉式珈琲店の濃紺 #0e3461・金 #daa761・クリーム、Noto Serif JP と futura-pt（Jost で代用）から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film chars steam glow
   @slides hero works-1 works-2 works-5
   @adjust 金 #daa761 は生成りの地との比が 2.1:1 のため、線と見出しの飾りだけに使い、文字とボタンは濃紺 #0e3461 にする。写真には、白い文字が 4.5:1 以上になるよう濃紺 #0a1a34 の 60% を重ねる
*/
:root[data-theme="cafe-d"] {
  --c-bg: #fcf8ef;
  --c-surface: #fffdf8;
  --c-band: #f3ecdc;
  --c-text: #1d2433;
  --c-muted: #4d5363;
  --c-line: #e3d8c0;
  --c-accent: #0e3461;
  --c-accent-deco: #daa761;
  --c-accent-2: #b8894a;
  --c-btn-bg: #0e3461;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fffdf8;
  --c-btn2-text: #0e3461;
  --c-btn2-border: #0e3461;
  --c-price: #1d2433;
  --c-badge-bg: #0e3461;
  --c-badge-text: #ffffff;
  --c-focus: #0e3461;
  --c-ph-a: #ece3d1;
  --c-ph-b: #ddd2bb;
  --c-ph-text: #2b2f3a;
  --c-map-bg: #f3ecdc;
  --c-map-line: #e6dcc6;
  --c-map-road: #fffdf8;
  --c-map-pin: #0e3461;

  --hero-bg: #0e1f3a;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(10, 26, 52, 0.6);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #fcf8ef;
  --cta-top-text: #1d2433;
  --cta-bottom-bg: #f3ecdc;
  --cta-bottom-text: #1d2433;
  --footer-bg: #0e1f3a;
  --footer-text: #f3ecdc;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Jost", "Noto Sans JP", sans-serif;
  --font-num: "Jost", "Noto Sans JP", sans-serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 1.95;
  --ls-head: 0.12em;
  --ls-hero: 0.3em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: clamp(1.25rem, 4.6vw, 1.625rem);
  --label-size: 0.8125rem;
  --label-weight: 400;
  --label-ls: 0.32em;
  --head-align: center;
  --head-rule-w: 40px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --space-section: clamp(80px, 14vw, 150px);
  --radius: 2px;
  --radius-img: 2px;
  --radius-btn: 2px;

  /* 写真：画面いっぱいの写真に濃紺を重ね、中央に屋号 */
  --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, 800px);
  --hero-body-align: center;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 40rem;

  --about-media-ratio: 1 / 1;
  --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: 3rem;
  --point-num-radius: 0px;
  --point-num-bg: transparent;
  --point-num-text: #0e3461;
  --point-num-border-w: 0px;
  --point-num-fs: 1.75rem;

  --menu-item-areas: "media name price" "media desc desc";
  --menu-item-cols: 88px minmax(0, 1fr) auto;
  --menu-item-pad: 20px 0;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.1875rem;

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

  --mv-steam-x: 50%;
  --mv-steam-y: 100%;
  --mv-steam-size: 1.4;
  --mv-glow-x: 58%;
  --mv-glow-y: 14%;
  --mv-toggle-bg: #0e3461;
  --mv-toggle-fg: #ffffff;
}

/* @theme cafe-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+B1:wght@500;800&display=swap
   @concept 誌面で読ませる
   @source 動きの型は、業種別サイト傾向調査のカフェ・喫茶店の2社と、業種を問わない見出しの型から借りた。看板の品1つに1つの節を使い、スライドごとに1行のひとことを出す型（高倉町珈琲）を、読み進めると写真がめくれて替わる品書きにした。上の写真と紹介の段を黒に反転し、明朝2行のキャッチを置く型（上島珈琲店）を、墨の地の紹介の段にした。20業種で共通だった「英字の大見出し＋日本語の小見出し」を、番号と大きな英字の誌面にした。配色は高倉町珈琲・元町珈琲の生成り #f2eee9、こげ茶 #2e1e16、赤 #bc3320 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う朱 #bc3320→#b32a17（生成り #f2eee9 と 5.58:1）。墨の地の上の朱は #e8866f（6.65:1）。フォーカス枠は #d9482f（生成りと 3.70:1、墨と 4.05:1）
*/
:root[data-theme="cafe-e"] {
  --c-bg: #f2eee9;
  --c-surface: #f8f5f0;
  --c-band: #e6dac8;
  --c-text: #231815;
  --c-muted: #5a4a42;
  --c-line: #cdbfae;
  --c-accent: #b32a17;
  --c-accent-deco: #bc3320;
  --c-accent-2: #2e1e16;
  --c-btn-bg: #231815;
  --c-btn-text: #f2eee9;
  --c-btn2-bg: #f2eee9;
  --c-btn2-text: #231815;
  --c-btn2-border: #231815;
  --c-price: #231815;
  --c-badge-bg: #b32a17;
  --c-badge-text: #ffffff;
  --c-focus: #d9482f;
  --c-ph-a: #e6dac8;
  --c-ph-b: #d9cab4;
  --c-ph-text: #2e1e16;
  --c-map-bg: #ebe4da;
  --c-map-line: #dcd1c2;
  --c-map-road: #f8f5f0;
  --c-map-pin: #b32a17;

  --hero-bg: #f2eee9;
  --hero-text: #231815;
  --hero-muted: #5a4a42;
  --cta-top-bg: #f2eee9;
  --cta-top-text: #231815;
  --cta-bottom-bg: #e6dac8;
  --cta-bottom-text: #231815;
  --footer-bg: #231815;
  --footer-text: #f2eee9;

  /* 紹介の段は墨の地に反転（上島珈琲店の型）。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #231815;
  --about-text: #f2eee9;
  --about-muted: #cfc3b5;
  --about-accent: #e8866f;
  --about-surface: #2e2320;
  --about-line: #54453d;
  --about-deco: #e8866f;
  --menu-bg: #f2eee9;
  --news-bg: #f2eee9;
  --contact-bg: #f2eee9;

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

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

  /* 型（premium/folio.css）の色 */
  --fo-outline: #b8a893;
  --mv-toggle-bg: #231815;
  --mv-toggle-fg: #f2eee9;
}

/* @theme cafe-f
   @name 並んだ写真から選ぶ
   @desc 黄色の卓に、太い線の写真の札。上に並べた品の写真を押すと、その品の写真と説明・料金が大きく開く。店の写真は指で送り、お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@500;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 動きの型は、業種別サイト傾向調査の3社と、お知らせの見せ方から借りた。商品写真のタイルが向きを変えて切り替わるヒーロー（コメダ珈琲店）を、押せる写真の札にし、看板の品を大きく開いて税込価格を見せる型（さかい珈琲）を、選んだ品が大きく開くメニューにした。店の様子の写真を横に送る型（元町珈琲の16枚）を、指で送れる写真の列にした。お知らせをタブで分ける型（電気工事の関電工・ユアテック、整体のチェーン型）を、種類で絞り込むボタンにした。配色はコメダ珈琲店・さかい珈琲の橙 #e95513、黄 #ffde14、赤 #aa0e0e、こげ茶 #40220f から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust ボタンの橙 #e95513→#cf4701（白い文字と 4.61:1）、文字に使う橙は #bf4000（地 #fff8ec と 5.04:1）。黄 #ffde14 は地と帯だけに使い、上の文字はこげ茶 #40220f（10.81:1）
*/
:root[data-theme="cafe-f"] {
  --c-bg: #fff8ec;
  --c-surface: #ffffff;
  --c-band: #ffde14;
  --c-text: #40220f;
  --c-muted: #5e4636;
  --c-line: #eadcc2;
  --c-accent: #bf4000;
  --c-accent-deco: #e95513;
  --c-accent-2: #ffde14;
  --c-btn-bg: #cf4701;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #40220f;
  --c-btn2-border: #40220f;
  --c-price: #aa0e0e;
  --c-badge-bg: #aa0e0e;
  --c-badge-text: #ffffff;
  --c-focus: #aa0e0e;
  --c-ph-a: #fff4c2;
  --c-ph-b: #fbd8bf;
  --c-ph-text: #40220f;
  --c-map-bg: #fff3d6;
  --c-map-line: #f3e2b8;
  --c-map-road: #ffffff;
  --c-map-pin: #e95513;

  --hero-bg: #ffde14;
  --hero-text: #40220f;
  --hero-muted: #5e4636;
  --cta-top-bg: #fff8ec;
  --cta-top-text: #40220f;
  --cta-bottom-bg: #ffde14;
  --cta-bottom-text: #40220f;
  --footer-bg: #40220f;
  --footer-text: #fff8ec;

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

  --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: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --font-num: "M PLUS Rounded 1c", "Noto Sans JP", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --fw-num: 800;
  --lh-body: 1.85;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: none;
  --label-size: 0.9375rem;
  --label-ls: 0.08em;

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

  /* 型（premium/touch.css）の色：押せるものの線と影 */
  --tc-ink: #40220f;
  --mv-toggle-bg: #40220f;
  --mv-toggle-fg: #ffde14;
}