/*!
  @industry junk
  @label 不用品回収・片付け
  @order 14
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「14. 不用品回収・片付け業」スタイルの型（1型＋外れ値2社。到達できた5社は複数拠点の事業者・FC本部に偏る）
*/

/* @theme junk-a
   @name 安心と明朗会計
   @desc 白と淡い緑に、緑の連絡帯と橙の電話ボタン。文字と写真を左右に分け、積み放題の料金を赤い価格の写真カードで並べる
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@600;700&display=swap
   @source 白×グリーンの安心・格安（粗大ゴミ回収本舗・片付け堂・粗大ゴミ回収隊）。緑 #00b54a（見出しの線）・#03a58e、橙 #f18122（電話ボタン・地図のピン）、価格の赤 #cc0814（価格・人気ラベル）。Noto Sans JP＋Poppins。パック料金を並べる見せ方
   @adjust 文字と連絡帯に使う緑 #00b54a→#008235（白い文字・淡い緑の帯との比を 4.5:1 以上にするため）。橙のボタンは白い文字では足りないため、文字を濃い茶 #231a12 にした（6.44:1）。フォーカス枠は緑の帯の上でも見えるよう #111a15
*/
:root[data-theme="junk-a"] {
  --c-bg: #ffffff;
  --c-surface: #f3faf5;
  --c-band: #eef8f1;
  --c-text: #1f2a24;
  --c-muted: #4a5a51;
  --c-line: #d4e8da;
  --c-accent: #008235;
  --c-accent-deco: #00b54a;
  --c-accent-2: #03a58e;
  --c-btn-bg: #ffffff;
  --c-btn-text: #008235;
  --c-btn2-bg: #f18122;
  --c-btn2-text: #231a12;
  --c-btn2-border: #f18122;
  --c-price: #cc0814;
  --c-badge-bg: #cc0814;
  --c-badge-text: #ffffff;
  --c-focus: #111a15;
  --c-ph-a: #e5f3ea;
  --c-ph-b: #cde8d6;
  --c-ph-text: #22402d;
  --c-map-bg: #eef7f1;
  --c-map-line: #dbeee1;
  --c-map-road: #ffffff;
  --c-map-pin: #f18122;

  --hero-bg: #eef8f1;
  --hero-text: #1f2a24;
  --hero-muted: #008235;
  --cta-top-bg: #008235;
  --cta-top-text: #ffffff;
  --cta-bottom-bg: #008235;
  --cta-bottom-text: #ffffff;
  --footer-bg: #1f2a24;
  --footer-text: #eef8f1;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Poppins", "Noto Sans JP", sans-serif;
  --font-num: "Poppins", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 1.85;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.5rem, 11vw, 4rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 700;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-rule-w: 40px;
  --head-rule-h: 4px;
  --head-inline: auto;

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

  /* 写真：スマホは写真（4:3）の下に文字、PCは文字を左・写真を右に */
  --hero-areas-lg: "body media";
  --hero-cols-lg: minmax(0, 1fr) minmax(0, 1fr);
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 1 / 1;
  --hero-body-align: center;
  --hero-body-max: 28rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 999px;
  --point-num-bg: #008235;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.125rem;

  /* 料金：写真カード型（パック料金を並べる）。価格は折り返さないため、スマホの2列では「49,800円〜（税込）」が入る大きさに縮める */
  --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: 0px;
  --menu-item-radius: 12px;
  --menu-media-display: block;
  --menu-media-ratio: 4 / 3;
  --price-size: clamp(0.9375rem, 4.2vw, 1.375rem);

  /* 片付けの前と後を横に並べるため、PCでも2列 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;
  --works-gap: 12px;
}

/* @theme junk-b
   @name 青い説明上手
   @desc 白と水色の面に紺と橙。番号つきの英字見出しを左に置き、料金は写真つきの白いカードを2列に整えて並べる
   @fonts https://fonts.googleapis.com/css2?family=Kanit:wght@500;600&family=M+PLUS+1p:wght@400;700;800&display=swap
   @source 外れ値「白×ブルー×オレンジのLP型」（KADODE）。青 #2898ff（見出しの線・電話ボタンの枠）、紺 #004771（ヒーローの文字面・価格）、橙 #ff8700（LINEのボタン・人気ラベル・地図のピン）、水色の面 #ddf2ff（帯）。M PLUS 1p＋Kanit。定額パック（SS〜3L）を並べ、写真よりキャラクターのイラストとアイコンが中心
   @adjust 文字と番号に使う青 #2898ff→#0067c6（水色の帯・白い文字との比を 4.5:1 以上にするため）。橙のボタンは白い文字では足りないため、文字を濃紺 #10293b にした（6.22:1）
*/
:root[data-theme="junk-b"] {
  --c-bg: #ffffff;
  --c-surface: #f0f9ff;
  --c-band: #ddf2ff;
  --c-text: #10293b;
  --c-muted: #3c566a;
  --c-line: #c5e3f6;
  --c-accent: #0067c6;
  --c-accent-deco: #2898ff;
  --c-accent-2: #ff8700;
  --c-btn-bg: #ff8700;
  --c-btn-text: #10293b;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #004771;
  --c-btn2-border: #2898ff;
  --c-price: #004771;
  --c-badge-bg: #ff8700;
  --c-badge-text: #10293b;
  --c-focus: #0067c6;
  --c-ph-a: #e4f4ff;
  --c-ph-b: #c9e6fb;
  --c-ph-text: #123a57;
  --c-map-bg: #eaf6ff;
  --c-map-line: #d2eafb;
  --c-map-road: #ffffff;
  --c-map-pin: #ff8700;

  --hero-bg: #004771;
  --hero-text: #ffffff;
  --hero-muted: #ffd29e;
  --cta-top-bg: #ddf2ff;
  --cta-top-text: #10293b;
  --cta-bottom-bg: #c6e7ff;
  --cta-bottom-text: #10293b;
  --footer-bg: #004771;
  --footer-text: #ddf2ff;

  --font-body: "M PLUS 1p", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Kanit", "M PLUS 1p", sans-serif;
  --font-num: "Kanit", "M PLUS 1p", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --lh-body: 1.85;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.5rem, 11vw, 4rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 600;
  --label-transform: none;
  --label-ls: 0.02em;
  --label-counter: counter(section, decimal-leading-zero) " / ";
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 4px;
  --head-inline: 0;

  --space-section: clamp(48px, 8vw, 88px);
  --radius: 12px;
  --radius-img: 8px;
  --radius-btn: 8px;
  --radius-badge: 4px;
  --shadow: 0 6px 18px rgba(0, 71, 113, 0.1);

  /* 写真：写真（スマホ 4:3、PC 21:9）の下に、紺の面で屋号と1文を置く */
  --hero-media-ratio: 4 / 3;
  --hero-media-ratio-lg: 21 / 9;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-num-size: 2.75rem;
  --point-num-radius: 999px;
  --point-num-bg: #0067c6;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1rem;

  /* 料金：小さな写真つきの行を白いカードにして2列に。スマホで名前の列が狭くならないよう、写真の右に名前・価格・説明を縦に積む */
  --menu-cols-lg: repeat(2, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 88px minmax(0, 1fr);
  --menu-item-pad: 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: 2;
  --works-ratio: 4 / 3;
  --works-gap: 12px;
}

/* @theme junk-c
   @name ポップで気軽
   @desc ピーチの地に赤と黄。丸ゴシックと縁取りのボタン、角の丸い写真カードと人気のバッジでにぎやかに見せる
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@700;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @source 外れ値「白〜ピーチ×赤のポップな値ごろ感」（ゴミ屋敷バスター七福神）。ピーチの地 #fff3ea・#ffeee6、赤 #e60012（LINEのボタン・差し色の文字・価格）、黄 #fcf558（電話ボタン・人気のバッジ・番号の丸）、橙 #fc8657（見出しの線）。M PLUS Rounded 1c＋Noto Sans JP
   @adjust 文字に使う赤 #e60012→#d50011（ピーチの地で 4.40:1 のため）。橙 #fc8657 は 2.22:1 のため飾りだけに使った。黄は白い文字では読めないため、文字を濃い茶 #3a2a24 にした
*/
:root[data-theme="junk-c"] {
  --c-bg: #fff3ea;
  --c-surface: #ffeee6;
  --c-band: #ffffff;
  --c-text: #3a2a24;
  --c-muted: #6a4f45;
  --c-line: #f6d9c8;
  --c-accent: #d50011;
  --c-accent-deco: #fc8657;
  --c-accent-2: #fcf558;
  --c-btn-bg: #e60012;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #fcf558;
  --c-btn2-text: #3a2a24;
  --c-btn2-border: #3a2a24;
  --c-price: #d50011;
  --c-badge-bg: #fcf558;
  --c-badge-text: #3a2a24;
  --c-focus: #3a2a24;
  --c-ph-a: #ffe4d5;
  --c-ph-b: #ffd1ba;
  --c-ph-text: #5a3322;
  --c-map-bg: #fff8f3;
  --c-map-line: #ffe7d9;
  --c-map-road: #ffffff;
  --c-map-pin: #e60012;

  --hero-bg: #ffd1ba;
  --hero-text: #3a2a24;
  --hero-muted: #d50011;
  --hero-card-bg: rgba(255, 255, 255, 0.95);
  --hero-card-pad: clamp(20px, 5vw, 32px);
  --hero-card-radius: 24px;
  --cta-top-bg: #ffffff;
  --cta-top-text: #3a2a24;
  --cta-bottom-bg: #ffe3d3;
  --cta-bottom-text: #3a2a24;
  --footer-bg: #3a2a24;
  --footer-text: #fff3ea;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "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;
  --lh-body: 1.85;
  --ls-hero: 0.06em;
  --hero-title-size: clamp(2.5rem, 11vw, 4rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.5rem, 6vw, 2.5rem);
  --label-weight: 800;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-rule-w: 40px;
  --head-rule-h: 4px;
  --head-inline: auto;

  --space-section: clamp(48px, 8vw, 88px);
  --radius: 20px;
  --radius-img: 16px;
  --radius-btn: 999px;
  --radius-badge: 999px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  --btn-shadow: 0 4px 0 #3a2a24;

  /* 写真：全面の写真に、角の大きい白い面で屋号と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(78svh, 720px);
  --hero-body-align: end;
  --hero-body-max: 26rem;

  --about-media-ratio: 4 / 3;
  --point-bg: #ffffff;
  --point-align: center;
  --point-num-size: 3rem;
  --point-num-radius: 999px;
  --point-num-bg: #fcf558;
  --point-num-text: #3a2a24;
  --point-num-border-w: 2px;
  --point-num-fs: 1.125rem;

  /* 料金：写真カード型（角を大きく、白い帯の上にピーチのカード）。価格は折り返さないため、スマホの2列では「49,800円〜（税込）」が入る大きさに縮める */
  --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 16px;
  --menu-item-bg: #fff3ea;
  --menu-item-rule: 0px;
  --menu-item-radius: 20px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: clamp(0.9375rem, 4.2vw, 1.375rem);

  /* 作業の前と後を横に並べるため、PCでも2列。正方形だとPCで縦に長くなりすぎるので 4:3 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;
  --works-gap: 12px;
}

/* @theme junk-d
   @name 片付いていく写真
   @desc 深い緑を重ねた写真に白い文字、淡い緑の帯に緑と橙。片付いた部屋の写真から、仕分け・運び出し・積み込みの写真へ順に切り替わり、何枚目かの番号が出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Poppins:wght@400;600;700&display=swap
   @concept 映像で見せる
   @source 不用品回収・片付けの調査で読めた5社のヒーローはどれも静止画1枚で、スライダーや動画のヒーローは0社だった（本文には、バナーのスライダー（ゴミ屋敷バスター七福神）と、現場取材の動画のスライダー（粗大ゴミ回収本舗の YouTube）があった）。写真を切り替える型は、ほかの業種から借りた。施工写真の背景のスライドショー（外壁塗装のペイントホームズ）を、作業の写真を画面いっぱいに重ねて順に切り替える形にし、番号つきのスライダー（電気工事のトーエネックの 1/7 のカウンター）から、何枚目かの番号を借りた。配色と書体は粗大ゴミ回収本舗・片付け堂・粗大ゴミ回収隊の緑 #00b54a・#03a58e、橙 #f18122、価格の赤 #cc0814 と Poppins から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion film counter
   @slides hero menu-4 about menu-3
   @adjust 文字とボタンに使う緑 #00b54a→#008235（白い文字・白地と 4.95:1、淡い緑の帯と 4.55:1）。橙の電話ボタン #f18122 の文字は濃い茶 #231a12（6.44:1）。写真には、白い文字が 4.5:1 以上になるよう深い緑 #082818 の 62% を重ねる
*/
:root[data-theme="junk-d"] {
  --c-bg: #ffffff;
  --c-surface: #f3faf5;
  --c-band: #eef8f1;
  --c-text: #1f2a24;
  --c-muted: #4a5a51;
  --c-line: #d4e8da;
  --c-accent: #008235;
  --c-accent-deco: #00b54a;
  --c-accent-2: #03a58e;
  --c-btn-bg: #008235;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #f18122;
  --c-btn2-text: #231a12;
  --c-btn2-border: #f18122;
  --c-price: #cc0814;
  --c-badge-bg: #cc0814;
  --c-badge-text: #ffffff;
  --c-focus: #008235;
  --c-ph-a: #e5f3ea;
  --c-ph-b: #cde8d6;
  --c-ph-text: #22402d;
  --c-map-bg: #eef7f1;
  --c-map-line: #dbeee1;
  --c-map-road: #ffffff;
  --c-map-pin: #f18122;

  --hero-bg: #082818;
  --hero-text: #ffffff;
  --hero-muted: #ffffff;
  --hero-overlay: rgba(8, 40, 24, 0.62);
  --hero-ph-text: #ffffff;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1f2a24;
  --cta-bottom-bg: #eef8f1;
  --cta-bottom-text: #1f2a24;
  --footer-bg: #082818;
  --footer-text: #eef8f1;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Poppins", "Noto Sans JP", sans-serif;
  --font-num: "Poppins", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --lh-body: 1.85;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --h2-size: clamp(1.375rem, 4.8vw, 1.875rem);
  --label-size: 0.8125rem;
  --label-weight: 600;
  --label-transform: uppercase;
  --label-ls: 0.2em;
  --head-align: left;
  --head-rule-w: 40px;
  --head-rule-h: 4px;
  --head-inline: 0;

  --space-section: clamp(56px, 10vw, 104px);
  --radius: 10px;
  --radius-img: 8px;
  --radius-btn: 10px;
  --radius-badge: 4px;
  --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(88svh, 800px);
  --hero-body-align: end;
  --hero-body-max: 36rem;
  --hero-body-pad: clamp(56px, 12vw, 96px);

  --about-media-ratio: 4 / 3;
  --point-bg: #f3faf5;
  --point-border-w: 0px;
  --point-num-size: 2.75rem;
  --point-num-radius: 999px;
  --point-num-bg: #008235;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1rem;

  /* 料金：小さな写真つきの行を白いカードにしてPCで2列に。スマホで名前の列が狭くならないよう、写真の右に名前・価格・説明を縦に積む */
  --menu-cols-lg: repeat(2, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "media name" "media price" "media desc";
  --menu-item-cols: 88px minmax(0, 1fr);
  --menu-item-pad: 14px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 10px;
  --menu-media-display: block;
  --menu-media-ratio: 1 / 1;
  --price-size: 1.25rem;

  /* 片付けの前と後を横に並べるため、PCでも2列 */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;
  --works-gap: 12px;

  --mv-toggle-bg: #082818;
  --mv-toggle-fg: #ffffff;
}

/* @theme junk-e
   @name めくる料金の表
   @desc 淡い水色の紙に紺の文字と青い番号、橙のボタン。写真は止めたまま大きな太字と番号で見せ、読み進めると英字がすべり、PC では料金の品の写真がめくれて替わる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,400;1,400&family=M+PLUS+1p:wght@400;500;700;800&display=swap
   @concept 誌面で読ませる
   @source 不用品回収・片付けの調査で読めた5社のヒーローはどれも静止画1枚で、英字がすべり写真がめくれるような動きは見つからなかった。誌面の組み方は、同じ調査の料金の見せ方と、業種を問わない見出しの型から借りた。定額パックを並べる型（KADODE の SS〜3L）と、パックに含まれる費用と追加料金がかかる条件を並べる型（粗大ゴミ回収本舗・粗大ゴミ回収隊）を、読み進めると品ごとに写真がめくれて替わる料金の表にした。20業種で共通だった「英字の大見出し＋日本語の小見出し」を、番号と大きな英字の誌面にした。配色と書体は KADODE の青 #2898ff、紺 #004771、橙 #ff8700、水色の面 #ddf2ff と M PLUS 1p・Kanit から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字に使う青 #2898ff→#0067c6（紙 #f4faff と 5.32:1）。紹介の段は、フォーカス枠が紙と紺の段の両方で 3:1 以上になるよう、紺 #004771 を暗くした #003a5e にし、上の文字は白（11.89:1）、差し色は橙 #ff8700 を明るくした #ffb266（6.69:1）。橙のボタン #ff8700 の文字は濃紺 #10293b（6.22:1）。青 #2898ff は紙で 2.84:1 のため、線だけの英字に使う。フォーカス枠は青を暗くした #2585ea（紙と 3.55:1、水色の帯 #ddf2ff と 3.24:1、紺の段と 3.18:1）
*/
:root[data-theme="junk-e"] {
  --c-bg: #f4faff;
  --c-surface: #ffffff;
  --c-band: #ddf2ff;
  --c-text: #10293b;
  --c-muted: #3c566a;
  --c-line: #c5e3f6;
  --c-accent: #0067c6;
  --c-accent-deco: #2898ff;
  --c-accent-2: #ff8700;
  --c-btn-bg: #ff8700;
  --c-btn-text: #10293b;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #004771;
  --c-btn2-border: #004771;
  --c-price: #004771;
  --c-badge-bg: #ff8700;
  --c-badge-text: #10293b;
  --c-focus: #2585ea;
  --c-ph-a: #e4f4ff;
  --c-ph-b: #c9e6fb;
  --c-ph-text: #123a57;
  --c-map-bg: #eaf6ff;
  --c-map-line: #d2eafb;
  --c-map-road: #ffffff;
  --c-map-pin: #ff8700;

  --hero-bg: #f4faff;
  --hero-text: #10293b;
  --hero-muted: #3c566a;
  --cta-top-bg: #f4faff;
  --cta-top-text: #10293b;
  --cta-bottom-bg: #ddf2ff;
  --cta-bottom-text: #10293b;
  --footer-bg: #004771;
  --footer-text: #ddf2ff;

  /* 紹介の段は紺の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #003a5e;
  --about-text: #ffffff;
  --about-muted: #cfe8fb;
  --about-accent: #ffb266;
  --about-surface: #0b4a73;
  --about-line: #2e6891;
  --about-deco: #ffb266;
  --menu-bg: #f4faff;
  --news-bg: #f4faff;
  --contact-bg: #f4faff;

  --font-body: "M PLUS 1p", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-hero: var(--font-body);
  --font-label: "Kanit", "M PLUS 1p", sans-serif;
  --font-num: "Kanit", "M PLUS 1p", sans-serif;
  --fw-head: 800;
  --fw-hero: 800;
  --fw-num: 400;
  --lh-body: 1.9;

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

  /* 片付けの前と後の組は、誌面でも2列（folio.css） */
  --works-ratio: 4 / 3;

  /* 型（premium/folio.css）の色：線だけの大きな英字は青（紙でも紺の段でも見える） */
  --fo-outline: #2898ff;
  --mv-toggle-bg: #004771;
  --mv-toggle-fg: #ffffff;
}

/* @theme junk-f
   @name 回収の札から選ぶ
   @desc ピーチの地に橙の卓、茶色の太い線の写真の札と黄色の丸い札。回収の品の札が裏返ると料金が出て、押すとその品の写真と料金が開き、料金の表も札を押して選ぶ（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;700;800&family=Noto+Sans+JP:wght@400;700&display=swap
   @concept 触って選ぶ
   @source 不用品回収・片付けの調査で読めた5社のヒーローはどれも静止画1枚で、札が裏返るような動きは見つからなかった。押して選ぶ形は、同じ調査の観察と、カフェの1社から借りた。ティール一色の地にマスコット・円形の現場写真・バッジを置くヒーロー（片付け堂）を、一色の卓に写真の札と丸い札を並べる形にし、札は写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の型で裏返る。料金シミュレーション（ゴミ屋敷バスター七福神・粗大ゴミ回収本舗・粗大ゴミ回収隊）を、札の列で品を選ぶと写真と料金が開く料金の表にした。対応エリアの節（5社中4社。イラストの地図や市区町村のリンクで示し、Google マップの埋め込みは0社）は、地図の札にピンが落ちる形にした。配色はゴミ屋敷バスター七福神のピーチ #fff3ea・#ffeee6、赤 #e60012、黄 #fcf558、橙 #fc8657 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 文字に使う赤 #e60012→#d50011（白い札と 5.47:1、ピーチの地と 5.02:1）。ボタンは赤 #e60012 に白い文字（4.80:1）。橙 #fc8657 は卓の地にして、上の文字と線は濃い茶 #3a2a24（5.65:1）。黄 #fcf558 は丸い札の地にして、文字は濃い茶（11.94:1）。フォーカス枠も濃い茶（卓と 5.65:1、ピーチの地と 12.53:1）
*/
:root[data-theme="junk-f"] {
  --c-bg: #fff3ea;
  --c-surface: #ffffff;
  --c-band: #ffeee6;
  --c-text: #3a2a24;
  --c-muted: #6a4f45;
  --c-line: #f6d9c8;
  --c-accent: #d50011;
  --c-accent-deco: #fc8657;
  --c-accent-2: #fcf558;
  --c-btn-bg: #e60012;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #3a2a24;
  --c-btn2-border: #3a2a24;
  --c-price: #d50011;
  --c-badge-bg: #fcf558;
  --c-badge-text: #3a2a24;
  --c-focus: #3a2a24;
  --c-ph-a: #ffe4d5;
  --c-ph-b: #ffd1ba;
  --c-ph-text: #5a3322;
  --c-map-bg: #fff8f3;
  --c-map-line: #ffe7d9;
  --c-map-road: #ffffff;
  --c-map-pin: #e60012;

  --hero-bg: #fc8657;
  --hero-text: #3a2a24;
  --hero-muted: #3a2a24;
  --cta-top-bg: #fff3ea;
  --cta-top-text: #3a2a24;
  --cta-bottom-bg: #fc8657;
  --cta-bottom-text: #3a2a24;
  --footer-bg: #3a2a24;
  --footer-text: #fff3ea;

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

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Noto Sans JP", sans-serif;
  --font-hero: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "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: 24px;
  --radius-img: 18px;
  --radius-btn: 999px;
  --radius-badge: 999px;

  /* 片付けの前と後の組は、押すと裏返る札（touch.js） */
  --works-cols: 2;
  --works-cols-lg: 2;
  --works-ratio: 4 / 3;

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