/*!
  @industry bento
  @label 弁当・惣菜
  @order 18
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「18. 弁当・惣菜店」スタイルの型（3型）
  と、vault/.raw/captured/2026-09-24-claude-code-site-trends-overview.md「飲食案B・C」
*/

/* @theme bento-a
   @name 元気なほか弁
   @desc 白地に赤と黄、クリームの帯。極太のゴシックと英字の大見出し、角丸の写真カードに税込価格とNEWを載せる
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @source 白地×赤×黄の元気なほか弁型（ほっともっと・本家かまどや・からやま）。赤 #ed1c24・#da340b・#d1292e、黄 #f9be00・#fff328、クリーム #fff9e8、紺 #0b308e、Noto Sans JP＋価格の数字に Montserrat
   @adjust なし（文字・ボタン・屋号の面には白い文字と 5.16:1 の #d1292e を使い、#ed1c24・#da340b は地図のピンなどの飾りに回した）
*/
:root[data-theme="bento-a"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #fff9e8;
  --c-text: #222222;
  --c-muted: #555555;
  --c-line: #f0e2bd;
  --c-accent: #d1292e;
  --c-accent-deco: #f9be00;
  --c-accent-2: #ed1c24;
  --c-btn-bg: #d1292e;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #0b308e;
  --c-btn2-border: #0b308e;
  --c-price: #d1292e;
  --c-badge-bg: #f9be00;
  --c-badge-text: #0b308e;
  --c-focus: #0b308e;
  --c-ph-a: #fff3c4;
  --c-ph-b: #ffd9a8;
  --c-ph-text: #5b2b00;
  --c-map-bg: #fff6dc;
  --c-map-line: #f4e5ba;
  --c-map-road: #ffffff;
  --c-map-pin: #ed1c24;

  --hero-bg: #d1292e;
  --hero-text: #ffffff;
  --hero-muted: #fff9e8;
  --hero-card-bg: #d1292e;
  --hero-card-pad: clamp(20px, 5vw, 32px);
  --hero-card-radius: 16px;
  --cta-top-bg: #f9be00;
  --cta-top-text: #0b308e;
  --cta-bottom-bg: #fff9e8;
  --cta-bottom-text: #222222;
  --footer-bg: #0b308e;
  --footer-text: #ffffff;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-label: "Montserrat", "Noto Sans JP", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --lh-body: 1.8;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --h2-size: 1.125rem;
  --h3-size: clamp(0.9375rem, 2.3vw, 1.0625rem);
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 800;
  --label-transform: uppercase;
  --label-ls: 0.04em;
  --head-align: center;
  --head-inline: auto;

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

  /* 写真：全面の写真に、赤い面で屋号を重ねる（販促の看板のように） */
  --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(72svh, 680px);
  --hero-body-align: end;
  --hero-body-max: 26rem;

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

  /* メニュー：写真カード型（全品に税込価格） */
  --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: 14px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: clamp(1.0625rem, 5.6vw, 1.375rem);

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

/* @theme bento-b
   @name カタログ
   @desc 生成り地にマゼンタの差し色、ボタンだけ青。横長の小さな写真の下に屋号、白い商品カードを整然と並べる
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 生成り地×商品カードのカタログ型（オリジン弁当・キッチンオリジン）。生成り #f7f6ed、墨色 #322f2f、マゼンタピンク #dc2c82、注文導線の青 #056bb7、Noto Sans JP＋価格の数字に Montserrat
   @adjust 文字・価格・バッジ・番号のマゼンタ #dc2c82→#cb1274（生成りの地・白い文字との比を 4.5:1 以上にするため。OKLCH で明度だけ下げた）。#dc2c82 はカードの下線と見出しの線に使う
*/
:root[data-theme="bento-b"] {
  --c-bg: #f7f6ed;
  --c-surface: #ffffff;
  --c-band: #efeee2;
  --c-text: #322f2f;
  --c-muted: #575252;
  --c-line: #dcdacb;
  --c-accent: #cb1274;
  --c-accent-deco: #dc2c82;
  --c-accent-2: #056bb7;
  --c-btn-bg: #056bb7;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #056bb7;
  --c-btn2-border: #056bb7;
  --c-price: #cb1274;
  --c-badge-bg: #cb1274;
  --c-badge-text: #ffffff;
  --c-focus: #056bb7;
  --c-ph-a: #ecebdf;
  --c-ph-b: #dedccb;
  --c-ph-text: #322f2f;
  --c-map-bg: #eeede2;
  --c-map-line: #e0dfd0;
  --c-map-road: #ffffff;
  --c-map-pin: #dc2c82;

  --hero-bg: #ffffff;
  --hero-text: #322f2f;
  --hero-muted: #cb1274;
  --hero-body-pad: clamp(20px, 5vw, 40px);
  --cta-top-bg: #ffffff;
  --cta-top-text: #322f2f;
  --cta-bottom-bg: #ffffff;
  --cta-bottom-text: #322f2f;
  --footer-bg: #322f2f;
  --footer-text: #f7f6ed;

  /* メニューの段だけ、カードの下線をマゼンタにする */
  --menu-line: #dc2c82;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-label: "Montserrat", "Noto Sans JP", sans-serif;
  --font-num: "Montserrat", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 1.8;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2rem, 8vw, 3rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.5rem);
  --h3-size: clamp(0.9375rem, 2.3vw, 1.0625rem);
  --label-size: 0.8125rem;
  --label-weight: 700;
  --label-transform: uppercase;
  --label-ls: 0.16em;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 3px;

  --space-section: clamp(56px, 9vw, 96px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 6px;
  --radius-badge: 2px;

  /* 写真：横長の写真を小さめに置き、その下に屋号（積む型） */
  --hero-media-ratio: 2 / 1;
  --hero-media-ratio-lg: 3 / 1;

  --about-media-ratio: 4 / 3;
  --about-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --point-bg: #ffffff;
  --point-border-w: 1px;
  --point-num-size: 2.25rem;
  --point-num-radius: 4px;
  --point-num-bg: #cb1274;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 0.9375rem;

  /* メニュー：写真カード型。写真は横長、カードの下にマゼンタの線 */
  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 10px;
  --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: 3px;
  --menu-item-radius: 4px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: clamp(1.0625rem, 5.6vw, 1.375rem);

  --works-cols: 3;
  --works-cols-lg: 6;
  --works-ratio: 1 / 1;
  --works-gap: 8px;
}

/* @theme bento-c
   @name 上質デリ
   @desc 白地に深緑の細い線、赤は使わない。明朝の見出しと本文、EB Garamondの英字、分割の写真と行の品書きで余白広め
   @fonts https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&family=Noto+Serif+JP:wght@400;600&display=swap
   @source 白地×深緑×明朝の上質デリ型（RF1）。深緑 #007e3d・#196c4b、墨色 #4c4948、焦げ茶 #4f240c、Noto Serif JP＋EB Garamond
   @adjust なし（深緑 #007e3d・#196c4b と墨色 #4c4948 は、白地・帯の上でそのまま 4.5:1 以上）
*/
:root[data-theme="bento-c"] {
  --c-bg: #ffffff;
  --c-surface: #f6f8f5;
  --c-band: #f3f6f2;
  --c-text: #4c4948;
  --c-muted: #5a5755;
  --c-line: #d7e0d6;
  --c-accent: #196c4b;
  --c-accent-deco: #007e3d;
  --c-accent-2: #4f240c;
  --c-btn-bg: #007e3d;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #196c4b;
  --c-btn2-border: #196c4b;
  --c-price: #4c4948;
  --c-badge-bg: #196c4b;
  --c-badge-text: #ffffff;
  --c-focus: #007e3d;
  --c-ph-a: #eef2ec;
  --c-ph-b: #dae4d8;
  --c-ph-text: #34443a;
  --c-map-bg: #f1f4f0;
  --c-map-line: #e0e7df;
  --c-map-road: #ffffff;
  --c-map-pin: #007e3d;

  --hero-bg: #ffffff;
  --hero-text: #4c4948;
  --hero-muted: #196c4b;
  --cta-top-bg: #f3f6f2;
  --cta-top-text: #4c4948;
  --cta-bottom-bg: #f3f6f2;
  --cta-bottom-text: #4c4948;
  --footer-bg: #4f240c;
  --footer-text: #ffffff;

  --font-body: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "EB Garamond", "Noto Serif JP", serif;
  --font-num: "EB Garamond", "Noto Serif JP", serif;
  --fw-head: 600;
  --fw-hero: 600;
  --lh-body: 2;
  --ls-body: 0.04em;
  --ls-head: 0.1em;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.75rem);
  --label-size: 1rem;
  --label-weight: 400;
  --label-transform: uppercase;
  --label-ls: 0.24em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 1px;

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

  /* 写真：スマホは写真の下に文字、PCは文字を左・写真を右に */
  --hero-areas: "media" "body";
  --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;
  --about-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --point-bg: transparent;
  --point-align: center;
  --point-num-size: 3.25rem;
  --point-num-radius: 50%;
  --point-num-bg: transparent;
  --point-num-text: #196c4b;
  --point-num-border-w: 1px;
  --point-num-fs: 1.25rem;

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

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

/* @theme bento-d
   @name 湯気のロゴ
   @desc 生成りにマゼンタ、ラベルだけ青。開くと、屋号から湯気が立ちのぼるロゴの画面が2秒ほど出る。写真はゆっくり寄っては戻り、湯気がうっすら立つ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Montserrat:wght@700&family=Noto+Sans+JP:wght@400;700;900&display=swap
   @source 動きの型は、業種別サイト傾向調査の全画面のスプラッシュ（弁当・惣菜のオリジン弁当・キッチンオリジン：1.5秒で消えるロゴの演出）。調査の記述から型だけを借り、ロゴの演出に湯気を足した。配色は同じ社の生成り #f7f6ed・マゼンタピンク #dc2c82・青 #056bb7 と、数字の Montserrat から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion opening-steam film steam
   @slides hero
   @adjust マゼンタ #dc2c82 は生成りの帯の上で比が足りないため、文字とボタンには同じ色相を暗くした #b3166a を使い、#dc2c82 は開いたときの画面の地（白い屋号。大きい文字で 3:1 以上）・線・ピンに使う
*/
:root[data-theme="bento-d"] {
  --c-bg: #fffdf8;
  --c-surface: #ffffff;
  --c-band: #f7f6ed;
  --c-text: #322f2f;
  --c-muted: #58524f;
  --c-line: #e8e3d6;
  --c-accent: #b3166a;
  --c-accent-deco: #dc2c82;
  --c-accent-2: #056bb7;
  --c-btn-bg: #b3166a;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #322f2f;
  --c-btn2-border: #322f2f;
  --c-price: #b3166a;
  --c-badge-bg: #056bb7;
  --c-badge-text: #ffffff;
  --c-focus: #056bb7;
  --c-ph-a: #f1ede1;
  --c-ph-b: #e4ddcc;
  --c-ph-text: #3a3533;
  --c-map-bg: #f7f6ed;
  --c-map-line: #e8e5d8;
  --c-map-road: #ffffff;
  --c-map-pin: #dc2c82;

  --hero-bg: #fffdf8;
  --hero-text: #322f2f;
  --hero-muted: #b3166a;
  --cta-top-bg: #f7f6ed;
  --cta-top-text: #322f2f;
  --cta-bottom-bg: #f7f6ed;
  --cta-bottom-text: #322f2f;
  --footer-bg: #322f2f;
  --footer-text: #f7f6ed;

  --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;
  --ls-hero: 0.14em;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --h2-size: clamp(1.375rem, 5vw, 1.875rem);
  --label-size: 0.875rem;
  --label-weight: 700;
  --label-ls: 0.22em;
  --head-align: center;
  --head-rule-w: 40px;
  --head-rule-h: 4px;
  --head-inline: auto;

  --radius: 6px;
  --radius-img: 6px;
  --radius-btn: 999px;

  /* 写真：横長の写真の下に屋号（写真の料理に湯気を重ねる） */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;
  --hero-text-align: center;
  --hero-child-margin: auto;
  --hero-body-max: 36rem;

  --about-media-ratio: 4 / 3;
  --about-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --point-bg: #ffffff;
  --point-border-w: 1px;
  --point-num-size: 2.25rem;
  --point-num-radius: 50%;
  --point-num-bg: #b3166a;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 0.9375rem;

  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 10px;
  --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: 3px;
  --menu-item-radius: 6px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: clamp(1.0625rem, 5.6vw, 1.375rem);

  --works-cols: 3;
  --works-cols-lg: 6;
  --works-ratio: 1 / 1;
  --works-gap: 8px;

  --mv-steam-x: 86%;
  --mv-steam-y: 80%;
  --mv-opening-bg: #dc2c82;
  --mv-opening-ink: #ffffff;
  --mv-toggle-bg: #322f2f;
  --mv-toggle-fg: #ffffff;
}

/* @theme bento-e
   @name めくる献立
   @desc 生成りの紙に墨色の文字と深緑、紹介の段は焦げ茶の地に反転。読み進めると線だけの大きな英字がすべり、写真が下からめくれて出て、PC では品書きの写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;800&display=swap
   @concept 誌面で読ませる
   @source 弁当・惣菜の調査で記録された動きは、ヒーローのスライダー4社と全画面のスプラッシュ（オリジン弁当・キッチンオリジン）で、読み進めて見せる動きの記録はなかった。RF1 は、ヒーローのスライダーのあとに新商品、「商品をさがす／お店をさがす」の2つのボタン、コラム8件、コンセプト、NEWS9件を並べ、読み物（コラム）と告知（NEWS）を分けていた。この読み物の節の作りと、20業種で共通だった「英字の大見出し＋日本語の小見出し」を、節ごとに番号と大きな英字を付けた誌面にした。オリジン弁当・キッチンオリジンは全カードに税込価格を載せ、価格の数字だけを欧文の書体（Montserrat）にしていて、見本も料金の数字を欧文の書体にした。配色は白地×深緑×明朝の上質デリ型（RF1）の深緑 #007e3d・#196c4b、墨色 #4c4948、焦げ茶 #4f240c から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 深緑 #196c4b・#007e3d と墨色 #4c4948 は、紙 #f8f7f2 の上でそのまま 4.5:1 以上。焦げ茶 #4f240c の地の上の緑は、#007e3d を同じ色相で明るくした #a4dabe（8.40:1）。フォーカス枠は同じ色相の #009447（紙と 3.68:1、焦げ茶と 3.35:1）
*/
:root[data-theme="bento-e"] {
  --c-bg: #f8f7f2;
  --c-surface: #ffffff;
  --c-band: #edeee6;
  --c-text: #4c4948;
  --c-muted: #5a5755;
  --c-line: #d7dcd1;
  --c-accent: #196c4b;
  --c-accent-deco: #007e3d;
  --c-accent-2: #4f240c;
  --c-btn-bg: #007e3d;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #4c4948;
  --c-btn2-border: #4c4948;
  --c-price: #4c4948;
  --c-badge-bg: #196c4b;
  --c-badge-text: #ffffff;
  --c-focus: #009447;
  --c-ph-a: #eef2ec;
  --c-ph-b: #dae4d8;
  --c-ph-text: #34443a;
  --c-map-bg: #eeefe8;
  --c-map-line: #dfe2d8;
  --c-map-road: #ffffff;
  --c-map-pin: #007e3d;

  --hero-bg: #f8f7f2;
  --hero-text: #4c4948;
  --hero-muted: #196c4b;
  --cta-top-bg: #f8f7f2;
  --cta-top-text: #4c4948;
  --cta-bottom-bg: #edeee6;
  --cta-bottom-text: #4c4948;
  --footer-bg: #196c4b;
  --footer-text: #ffffff;

  /* 紹介の段は焦げ茶の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #4f240c;
  --about-text: #ffffff;
  --about-muted: #e6d8cb;
  --about-accent: #a4dabe;
  --about-surface: #5c2d13;
  --about-line: #7a4a31;
  --about-deco: #a4dabe;
  --menu-bg: #f8f7f2;
  --news-bg: #f8f7f2;
  --contact-bg: #f8f7f2;

  --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: "Cormorant Garamond", "Shippori Mincho", serif;
  --font-num: "Cormorant Garamond", "Shippori Mincho", 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;

  --works-ratio: 1 / 1;

  /* 型（premium/folio.css）の色 */
  --fo-outline: #a6ad98;
  --mv-toggle-bg: #4c4948;
  --mv-toggle-fg: #ffffff;
}

/* @theme bento-f
   @name お弁当の札から選ぶ
   @desc 黄色の卓に紺の太い線の札、赤の差し色。いちばん上にお弁当とお惣菜の写真の札を並べ、裏返ると品名と料金が出る。押すとその品が大きく開き、お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Noto+Sans+JP:wght@400;700&family=Roboto:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 弁当・惣菜の調査では、本家かまどやがメニューをカテゴリの画像タイル7枚で見せ、ほっともっとは「ピックアップ」「人気ランキング」で商品写真と商品名のカードを並べていた。オリジン弁当・キッチンオリジンには、アレルギーでの絞り込みがあった。このタイルとカードを、押すとその品の写真・説明・料金が開くおかずの札にし、絞り込みの型をお知らせの種類の絞り込みにした。札が裏返る動きは、カフェのコメダ珈琲店の、商品写真のタイルが向きを変えて切り替わるヒーローから借りた。配色は白地×赤×黄の元気なほか弁型（ほっともっと・本家かまどや・からやま）の赤 #ed1c24・#d1292e、黄 #f9be00・#fff328、クリーム #fff9e8、紺 #0b308e（本家かまどや）、英字の書体は同じ型の Roboto から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust なし（赤 #d1292e は白い文字と 5.16:1、クリーム #fff9e8 と 4.91:1 で、文字・ボタン・料金に使う。黄 #f9be00 は卓とバッジ、#fff328 は英字と番号の札に使い、上の文字は紺 #0b308e（6.78:1・9.91:1）。#ed1c24 は線とピンだけ）
*/
:root[data-theme="bento-f"] {
  --c-bg: #fff9e8;
  --c-surface: #ffffff;
  --c-band: #f9be00;
  --c-text: #0b308e;
  --c-muted: #3d4a70;
  --c-line: #f0e2bd;
  --c-accent: #d1292e;
  --c-accent-deco: #ed1c24;
  --c-accent-2: #fff328;
  --c-btn-bg: #d1292e;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #0b308e;
  --c-btn2-border: #0b308e;
  --c-price: #d1292e;
  --c-badge-bg: #f9be00;
  --c-badge-text: #0b308e;
  --c-focus: #0b308e;
  --c-ph-a: #fff3c4;
  --c-ph-b: #ffd9a8;
  --c-ph-text: #5b2b00;
  --c-map-bg: #fff6dc;
  --c-map-line: #f4e5ba;
  --c-map-road: #ffffff;
  --c-map-pin: #ed1c24;

  --hero-bg: #f9be00;
  --hero-text: #0b308e;
  --hero-muted: #3d4a70;
  --cta-top-bg: #ffffff;
  --cta-top-text: #0b308e;
  --cta-bottom-bg: #f9be00;
  --cta-bottom-text: #0b308e;
  --footer-bg: #0b308e;
  --footer-text: #ffffff;

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

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Dela Gothic One", "Noto Sans JP", sans-serif;
  --font-hero: "Dela Gothic One", "Noto Sans JP", sans-serif;
  --font-label: "Roboto", "Noto Sans JP", sans-serif;
  --font-num: "Roboto", "Noto Sans JP", sans-serif;
  --fw-head: 400;
  --fw-hero: 400;
  --fw-num: 700;
  --lh-body: 1.8;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --label-transform: uppercase;
  --label-size: 0.9375rem;
  --label-weight: 700;
  --label-ls: 0.1em;

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

  --works-cols: 2;
  --works-cols-lg: 3;
  --works-ratio: 1 / 1;

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