/*!
  @industry handmade
  @label ハンドメイド・工房
  @order 19
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「19. ハンドメイド作家・工房」スタイルの型（3型）
*/

/* @theme handmade-a
   @name 革と木
   @desc 生成り×こげ茶に深い赤を少し。明朝の見出しと大きな信条の1文、横長の写真の下に屋号を中央に置いて余白広め
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Shippori+Mincho:wght@500;700&display=swap
   @source 白×革色・木の色のナチュラル（HERZ・genten・Hacoa・iichi）。生成り #f5f4ec・#fcfaf8、こげ茶 #5c2700、補助 #6b584a・#a39b8d、深い赤 #9e1912、Shippori Mincho＋Noto Sans JP
   @adjust なし（#a39b8d は地との比が 2.49:1 のため、線と飾りだけに使う）
*/
:root[data-theme="handmade-a"] {
  --c-bg: #fcfaf8;
  --c-surface: #ffffff;
  --c-band: #f5f4ec;
  --c-text: #5c2700;
  --c-muted: #6b584a;
  --c-line: #dbd4c7;
  --c-accent: #9e1912;
  --c-accent-deco: #a39b8d;
  --c-accent-2: #6b584a;
  --c-btn-bg: #9e1912;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #5c2700;
  --c-btn2-border: #a39b8d;
  --c-price: #5c2700;
  --c-badge-bg: #9e1912;
  --c-badge-text: #ffffff;
  --c-focus: #9e1912;
  --c-ph-a: #efebe1;
  --c-ph-b: #ddd4c4;
  --c-ph-text: #5c2700;
  --c-map-bg: #f1eee6;
  --c-map-line: #e3ddd1;
  --c-map-road: #fcfaf8;
  --c-map-pin: #9e1912;

  --hero-bg: #fcfaf8;
  --hero-text: #5c2700;
  --hero-muted: #6b584a;
  --cta-top-bg: #f5f4ec;
  --cta-top-text: #5c2700;
  --cta-bottom-bg: #f5f4ec;
  --cta-bottom-text: #5c2700;
  --footer-bg: #5c2700;
  --footer-text: #f5f4ec;

  --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: "Shippori Mincho", "Hiragino Mincho ProN", serif;
  --font-num: "Shippori Mincho", "Noto Sans JP", serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.22em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.5rem, 5.4vw, 2.25rem);
  --label-size: 0.875rem;
  --label-weight: 500;
  --label-transform: uppercase;
  --label-ls: 0.28em;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 32px;
  --head-rule-h: 1px;

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

  /* 写真：横長の写真の下に、屋号と1文を中央に置く（積む型） */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;
  --hero-text-align: center;
  --hero-child-margin: auto;

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

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

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

/* @theme handmade-b
   @name モノトーン
   @desc 白×黒とグレーの帯、差し色はボタンの紺だけ。細いJostの大きな英字、全面の写真と詰めた作品の格子で見せる
   @fonts https://fonts.googleapis.com/css2?family=Jost:wght@300;500&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 白×黒のモノトーン・ミニマル（土屋鞄製造所・MOTHERHOUSE・CLASKA DO）。#202020・#3a3a3a、帯 #f5f5f5、線 #dadada、ボタン #004b87、Jost＋Noto Sans JP
   @adjust なし（#004b87 は白い文字と 8.91:1。写真に文字を重ねるため、黒を 0.58 重ねる）
*/
:root[data-theme="handmade-b"] {
  --c-bg: #ffffff;
  --c-surface: #f5f5f5;
  --c-band: #f5f5f5;
  --c-text: #202020;
  --c-muted: #3a3a3a;
  --c-line: #dadada;
  --c-accent: #202020;
  --c-accent-deco: #202020;
  --c-accent-2: #dadada;
  --c-btn-bg: #004b87;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #202020;
  --c-btn2-border: #202020;
  --c-price: #202020;
  --c-badge-bg: #202020;
  --c-badge-text: #ffffff;
  --c-focus: #004b87;
  --c-ph-a: #e6e6e6;
  --c-ph-b: #cdcdcd;
  --c-ph-text: #202020;
  --c-map-bg: #f0f0f0;
  --c-map-line: #e0e0e0;
  --c-map-road: #ffffff;
  --c-map-pin: #202020;

  --hero-bg: #202020;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(0, 0, 0, 0.58);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #202020;
  --cta-bottom-bg: #f5f5f5;
  --cta-bottom-text: #202020;
  --footer-bg: #202020;
  --footer-text: #f5f5f5;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-label: "Jost", "Noto Sans JP", sans-serif;
  --font-num: "Jost", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 1.9;
  --ls-hero: 0.24em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: 1rem;
  --label-size: clamp(2.25rem, 9vw, 4rem);
  --label-weight: 300;
  --label-transform: none;
  --label-ls: 0.02em;
  --label-color: #202020;
  --head-align: left;

  --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: end;
  --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: 0px;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-border-w: 0px;
  --point-num-text: #202020;
  --point-num-fs: 2rem;
  --card-pad: 0px;

  /* メニュー：写真カード型。面は敷かず、写真と文字だけを並べる */
  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 28px 12px;
  --menu-item-areas: "media" "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 0px;
  --menu-item-bg: transparent;
  --menu-item-rule: 0px;
  --menu-item-radius: 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: 4px;
}

/* @theme handmade-c
   @name 和の差し色
   @desc ベージュ×朱の丸い番号、金は細い線だけ。明朝の見出しとゴシックの本文、左に文字・右に写真で贈り物向けに
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500;700&display=swap
   @source 白×和の差し色（能作・中川政七商店）。ベージュ #f5efe7、金 #b48c0f、赤 #c83b31、Noto Serif JP＋Noto Sans JP
   @adjust 文字に使う赤 #c83b31→#bd3028（ベージュの地の上で 4.5:1 以上にするため。OKLCH で明度だけ下げた）。金 #b48c0f は地との比が 2.74:1 のため線と飾りだけに使う。ボタンと番号の丸は #c83b31 のまま（白い文字と 5.09:1）
*/
:root[data-theme="handmade-c"] {
  --c-bg: #f5efe7;
  --c-surface: #fbf8f3;
  --c-band: #fbf8f3;
  --c-text: #2f2a26;
  --c-muted: #574c44;
  --c-line: #dccfb8;
  --c-accent: #bd3028;
  --c-accent-deco: #b48c0f;
  --c-accent-2: #c83b31;
  --c-btn-bg: #c83b31;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fbf8f3;
  --c-btn2-text: #2f2a26;
  --c-btn2-border: #b48c0f;
  --c-price: #2f2a26;
  --c-badge-bg: #c83b31;
  --c-badge-text: #ffffff;
  --c-focus: #bd3028;
  --c-ph-a: #ece2d3;
  --c-ph-b: #dccab0;
  --c-ph-text: #3f352c;
  --c-map-bg: #efe7dc;
  --c-map-line: #e2d6c5;
  --c-map-road: #fbf8f3;
  --c-map-pin: #c83b31;

  --hero-bg: #fbf8f3;
  --hero-text: #2f2a26;
  --hero-muted: #bd3028;
  --cta-top-bg: #f5efe7;
  --cta-top-text: #2f2a26;
  --cta-bottom-bg: #ede4d8;
  --cta-bottom-text: #2f2a26;
  --footer-bg: #2f2a26;
  --footer-text: #f5efe7;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-num: "Noto Serif JP", "Noto Sans JP", serif;
  --fw-head: 700;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.12em;
  --ls-hero: 0.18em;
  --hero-title-size: clamp(2.25rem, 6vw, 3.5rem);
  --h2-size: clamp(1.375rem, 4.6vw, 1.75rem);
  --label-display: none;
  --head-align: center;
  --head-inline: auto;
  --head-rule-w: 40px;
  --head-rule-h: 2px;

  --container: 1040px;
  --space-section: clamp(72px, 13vw, 140px);
  --radius: 2px;
  --radius-img: 2px;
  --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: 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: #fbf8f3;
  --point-border-w: 1px;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 50%;
  --point-num-bg: #c83b31;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.0625rem;

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

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

/* @theme handmade-d
   @name 縫い進む線
   @desc 白とベージュに金の線と赤。いちばん上の段で作品の写真が重なって切り替わり、段の下の端を赤い糸の縫い目が縫い進む。屋号が1字ずつ浮かぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@500;600&display=swap
   @concept 映像で見せる
   @source ハンドメイドの調査で読めた10社に、ヒーローの動画はなかった（スライダー7社・写真1枚3社・動画0社）。動きの型は、同じ調査の能作の、左を全画面のスライドショー、右をロゴと主要メニューにした左右分割のヒーローから借りた。PC では左に写真の切り替え、右に屋号を置く分割のヒーローにし、写真の切り替えは作品の写真で表し、ヒーローの下の端を縫い進む縫い目と、1字ずつ浮かぶ屋号を足した。配色と書体は「白×和の差し色」の型（能作・中川政七商店）のうち、能作のベージュ #f5efe7、金 #b48c0f、赤 #c83b31、Noto Serif JP の見出しと Noto Sans JP の本文から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film stitch chars
   @slides hero works-1 works-4 works-6
   @adjust 文字に使う金 #b48c0f→#865f00（白 5.70:1、ベージュ #f5efe7 5.04:1）、価格の赤 #c83b31→#be3128（ベージュ 5.02:1）。どちらも OKLCH で明度だけ下げた。金 #b48c0f はボタンの地（文字は墨 #26221f で 5.03:1）と線・縫い目の下書きの線に、赤 #c83b31 は糸・バッジ・フォーカス枠（白 5.09:1、ベージュ 4.46:1）に使う。写真には色を重ねない（屋号は写真の外に置くため）
*/
:root[data-theme="handmade-d"] {
  --c-bg: #ffffff;
  --c-surface: #fbf8f3;
  --c-band: #f5efe7;
  --c-text: #26221f;
  --c-muted: #5b5048;
  --c-line: #e3d6bf;
  --c-accent: #865f00;
  --c-accent-deco: #b48c0f;
  --c-accent-2: #c83b31;
  --c-btn-bg: #b48c0f;
  --c-btn-text: #26221f;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #26221f;
  --c-btn2-border: #26221f;
  --c-price: #be3128;
  --c-badge-bg: #c83b31;
  --c-badge-text: #ffffff;
  --c-focus: #c83b31;
  --c-ph-a: #efe6d8;
  --c-ph-b: #e2d4bd;
  --c-ph-text: #3a322c;
  --c-map-bg: #f5efe7;
  --c-map-line: #e8dccb;
  --c-map-road: #ffffff;
  --c-map-pin: #c83b31;

  --hero-bg: #f5efe7;
  --hero-text: #26221f;
  --hero-muted: #865f00;
  --hero-ph-text: #3a322c;
  --cta-top-bg: #ffffff;
  --cta-top-text: #26221f;
  --cta-bottom-bg: #f5efe7;
  --cta-bottom-text: #26221f;
  --footer-bg: #26221f;
  --footer-text: #f5efe7;

  --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: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-num: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --fw-head: 600;
  --fw-hero: 500;
  --fw-num: 600;
  --lh-body: 1.95;
  --ls-head: 0.1em;
  --ls-hero: 0.16em;
  --hero-title-size: clamp(2.5rem, 5.6vw, 4rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-size: 0.8125rem;
  --label-weight: 500;
  --label-ls: 0.3em;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 1px;

  --space-section: clamp(72px, 12vw, 136px);
  --radius: 2px;
  --radius-img: 2px;
  --radius-btn: 2px;
  --radius-badge: 2px;

  /* 写真：スマホは写真の下に屋号、PC は左に写真・右に屋号（能作の左右分割の型）。段の下の端に縫い目 */
  --hero-areas: "media" "body";
  --hero-areas-lg: "media body";
  --hero-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --hero-media-ratio: 1 / 1;
  --hero-media-ratio-lg: 1 / 1;
  --hero-body-align: center;
  --hero-body-max: 26rem;
  --hero-body-pad: clamp(48px, 7vw, 88px);

  --about-media-ratio: 1 / 1;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #f5efe7;
  --point-border-w: 0px;
  --point-align: left;
  --point-num-size: 2.5rem;
  --point-num-radius: 0px;
  --point-num-bg: transparent;
  --point-num-text: #865f00;
  --point-num-border-w: 0px;
  --point-num-fs: 1.75rem;

  /* メニュー：写真カード型。ベージュの帯に白い面を並べる */
  --menu-cols: repeat(2, minmax(0, 1fr));
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 16px;
  --menu-item-areas: "media" "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 10px 10px 16px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 2px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.1875rem;
  --price-note-display: block;

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

  /* 縫い目：下書きの線は金、糸は赤 */
  --mv-wire: rgba(180, 140, 15, 0.55);
  --mv-pulse: #c83b31;
  --mv-toggle-bg: #26221f;
  --mv-toggle-fg: #f5efe7;
}

/* @theme handmade-e
   @name めくる作品集
   @desc グレーの紙に黒の文字、差し色は紺だけ。写真は止めたまま、大きな屋号と番号、線だけの英字で見せる。読み進めると英字がすべり、作品の写真が下からめくれて出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,400;1,400&family=Zen+Kaku+Gothic+New:wght@400;700;900&display=swap
   @concept 誌面で読ませる
   @source ハンドメイドの調査で読めた10社に、ヒーローの動画はなかった（0社）。キービジュアルの写真1枚で成り立っている社が3社（土屋鞄製造所・genten・木屋）あり、商品カードに価格を添える型（土屋鞄製造所・iichi）もあった。この2つの型を、写真を止めたまま、品ごとに節を立てて料金を添える誌面にした。20業種で共通だった「英字の大見出し＋日本語の小見出し」を、番号と線だけの大きな英字にした。配色は「白×黒のモノトーン・ミニマル」の型（土屋鞄製造所・MOTHERHOUSE・CLASKA DO）の黒 #202020・#3a3a3a、グレー #f5f5f5、線 #dadada、土屋鞄製造所のボタンの紺 #004b87、CLASKA DO の罫線の #89a5ba から。書体は、この型の欧文ゴシック Jost に、和文ゴシック（Zen Kaku Gothic New）を合わせた。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 黒の地の紹介の段では、番号に紺の代わりに罫線の色 #89a5ba を使う（6.33:1）。フォーカス枠は紺 #004b87 を OKLCH で明るくした #3978b7（グレーの紙 4.2:1、黒の地 3.53:1、白 4.6:1）
*/
:root[data-theme="handmade-e"] {
  --c-bg: #f5f5f5;
  --c-surface: #ffffff;
  --c-band: #ffffff;
  --c-text: #202020;
  --c-muted: #3a3a3a;
  --c-line: #dadada;
  --c-accent: #004b87;
  --c-accent-deco: #89a5ba;
  --c-accent-2: #202020;
  --c-btn-bg: #004b87;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #202020;
  --c-btn2-border: #202020;
  --c-price: #202020;
  --c-badge-bg: #202020;
  --c-badge-text: #ffffff;
  --c-focus: #3978b7;
  --c-ph-a: #e6e6e6;
  --c-ph-b: #d2d2d2;
  --c-ph-text: #202020;
  --c-map-bg: #ececec;
  --c-map-line: #dadada;
  --c-map-road: #ffffff;
  --c-map-pin: #202020;

  --hero-bg: #f5f5f5;
  --hero-text: #202020;
  --hero-muted: #3a3a3a;
  --cta-top-bg: #f5f5f5;
  --cta-top-text: #202020;
  --cta-bottom-bg: #ffffff;
  --cta-bottom-text: #202020;
  --footer-bg: #202020;
  --footer-text: #f5f5f5;

  /* 紹介の段は黒の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #202020;
  --about-text: #f5f5f5;
  --about-muted: #cfcfcf;
  --about-accent: #89a5ba;
  --about-surface: #2a2a2a;
  --about-line: #4a4a4a;
  --about-deco: #89a5ba;
  --menu-bg: #f5f5f5;
  --news-bg: #f5f5f5;
  --contact-bg: #f5f5f5;

  --font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-hero: "Zen Kaku Gothic New", "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif;
  --font-label: "Jost", "Zen Kaku Gothic New", sans-serif;
  --font-num: "Jost", "Zen Kaku Gothic New", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --fw-num: 400;
  --lh-body: 1.95;

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

  /* 型（premium/folio.css）の色：大きな英字の線は CLASKA DO の罫線の色 */
  --fo-outline: #89a5ba;
  --mv-toggle-bg: #202020;
  --mv-toggle-fg: #f5f5f5;
}

/* @theme handmade-f
   @name 作品の札から選ぶ
   @desc ベージュの卓に、こげ茶の太い線の札と深い赤。上に並べた品の写真の札が裏返って品名と料金を見せ、押すとその品が大きく開く。作品の写真は指で送り、お知らせは種類で絞り込める（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Zen+Maru+Gothic:wght@700;900&display=swap
   @concept 触って選ぶ
   @source 動きの型は、ハンドメイドの調査の3社と、カフェの1社から借りた。品を「衣・食・住・贈りもの」の4つに分けたタイル（中川政七商店）と、「買う・贈る／お店へ行く／工場見学・体験」の目的別の導線3本（能作）を、押して選ぶ品の札と、札で品を選ぶメニューにした。店舗の写真5枚のスライダー（CLASKA DO）を、指で送れる作品の写真の列にした。札が裏返るのは、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の型から。お知らせを、日付の文のお知らせとサムネ付きのイベントに分ける型（能作）を、種類で絞り込むボタンにした。配色は「白×革色・木の色のナチュラル」の型（HERZ・genten・Hacoa・iichi）の生成り #f5f4ec・#fcfaf8、こげ茶 #5c2700、補助 #6b584a・#a39b8d、深い赤 #9e1912、HERZ のベージュ #f0e1cc、iichi のベージュ #e5ddc7 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust なし（こげ茶 #5c2700 はベージュの卓 #f0e1cc と 9.37:1、英字の札 #e5ddc7 と 8.88:1。深い赤 #9e1912 は白と 8.07:1、卓と 6.28:1。#a39b8d は地との比が 2.64:1 のため、線と飾りだけに使う）
*/
:root[data-theme="handmade-f"] {
  --c-bg: #fcfaf8;
  --c-surface: #ffffff;
  --c-band: #f5f4ec;
  --c-text: #5c2700;
  --c-muted: #6b584a;
  --c-line: #e5ddc7;
  --c-accent: #9e1912;
  --c-accent-deco: #a39b8d;
  --c-accent-2: #e5ddc7;
  --c-btn-bg: #9e1912;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #5c2700;
  --c-btn2-border: #5c2700;
  --c-price: #9e1912;
  --c-badge-bg: #9e1912;
  --c-badge-text: #ffffff;
  --c-focus: #9e1912;
  --c-ph-a: #efebe1;
  --c-ph-b: #ddd4c4;
  --c-ph-text: #5c2700;
  --c-map-bg: #f5f4ec;
  --c-map-line: #e8e2d4;
  --c-map-road: #ffffff;
  --c-map-pin: #9e1912;

  --hero-bg: #f0e1cc;
  --hero-text: #5c2700;
  --hero-muted: #6b584a;
  --cta-top-bg: #fcfaf8;
  --cta-top-text: #5c2700;
  --cta-bottom-bg: #f0e1cc;
  --cta-bottom-text: #5c2700;
  --footer-bg: #5c2700;
  --footer-text: #f5f4ec;

  --menu-bg: #f5f4ec;
  --works-bg: #fcfaf8;
  --news-bg: #f5f4ec;
  --access-bg: #fcfaf8;
  --contact-bg: #f5f4ec;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-hero: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-label: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-num: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --fw-num: 700;
  --lh-body: 1.9;
  --hero-title-size: clamp(2.5rem, 11vw, 4.25rem);
  --label-transform: none;
  --label-size: 0.9375rem;
  --label-weight: 700;
  --label-ls: 0.08em;

  --radius: 10px;
  --radius-img: 8px;
  --radius-btn: 999px;
  --radius-badge: 999px;

  /* 作品の写真は横長が多いので、横に送る列は 4:3 にそろえる */
  --works-ratio: 4 / 3;

  /* 型（premium/touch.css）の色：押せるものの線と影はこげ茶、英字の札は iichi のベージュ */
  --tc-ink: #5c2700;
  --tc-sticker: #e5ddc7;
  --tc-radius: 10px;
  --mv-toggle-bg: #5c2700;
  --mv-toggle-fg: #f5f4ec;
}