/*!
  @industry music
  @label 音楽教室
  @order 20
  出典：vault/.raw/captured/2026-09-24-claude-code-site-trends-by-industry.md「20. 個人音楽教室」スタイルの型（3型）
*/

/* @theme music-a
   @name 清潔なスクール
   @desc 白と淡い水色に青、ボタンだけ緑。英字の見出しを左に寄せて太い短い線。写真の下に青い面、料金は白い行で整える
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@400;700&display=swap
   @source 白×ブルーの清潔スクール型（シアーミュージック・EYS音楽教室・NAYUTAS・JOYミュージックスクール）。青 #066292・#017deb・#299ad6、ボタン 緑 #7dbf00、淡い水色の帯 #edf6fa、欧文 Open Sans
   @adjust ボタンの緑 #7dbf00→#537e00（白い文字との比を 4.5:1 以上にするため）。#299ad6 は線、#017deb はフォーカス枠に使う
*/
:root[data-theme="music-a"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #edf6fa;
  --c-text: #1f2d3a;
  --c-muted: #4b5a67;
  --c-line: #cfe3ee;
  --c-accent: #066292;
  --c-accent-deco: #299ad6;
  --c-accent-2: #017deb;
  --c-btn-bg: #537e00;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #066292;
  --c-btn2-border: #066292;
  --c-price: #1f2d3a;
  --c-badge-bg: #066292;
  --c-badge-text: #ffffff;
  --c-focus: #017deb;
  --c-ph-a: #e3eff6;
  --c-ph-b: #cfe2ee;
  --c-ph-text: #22435a;
  --c-map-bg: #edf6fa;
  --c-map-line: #d6e8f2;
  --c-map-road: #ffffff;
  --c-map-pin: #066292;

  --hero-bg: #066292;
  --hero-text: #ffffff;
  --hero-muted: #d7ecf8;
  --cta-top-bg: #ffffff;
  --cta-top-text: #1f2d3a;
  --cta-bottom-bg: #ffffff;
  --cta-bottom-text: #1f2d3a;
  --footer-bg: #0b3a57;
  --footer-text: #ffffff;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Open Sans", "Noto Sans JP", sans-serif;
  --font-num: "Open Sans", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --hero-title-size: clamp(2.25rem, 9vw, 3.75rem);
  --h2-size: clamp(1.0625rem, 3.6vw, 1.25rem);
  --label-size: clamp(1.5rem, 5.5vw, 2rem);
  --label-weight: 700;
  --label-ls: 0.08em;
  --head-align: left;
  --head-rule-w: 48px;
  --head-rule-h: 3px;

  --space-section: clamp(56px, 10vw, 104px);
  --radius: 4px;
  --radius-img: 4px;
  --radius-btn: 4px;
  --radius-badge: 4px;

  /* 写真：横長の写真の下に、青い面で屋号とひとこと */
  --hero-body-pad: clamp(24px, 5vw, 48px);
  --hero-body-max: 27rem;

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

  /* 料金：行型を白い行にして、水色の帯に並べる */
  --menu-gap: 8px 16px;
  --menu-item-pad: 16px 20px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 4px;

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

/* @theme music-b
   @name 元気なポップ
   @desc 白地に赤とサーモン、紺の筆記体の英字見出し。サーモンの面の分割型で、角丸のカードと赤い丸番号でにぎやかに
   @fonts https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&family=Nunito+Sans:wght@400;800&family=Pacifico&display=swap
   @source 白×赤・オレンジの元気なポップ型（カワイ音楽教室・アバロンミュージックスクール・Beeミュージックスクール）。赤 #e11923、サーモン #f79080、橙 #e5521f、帯 #fff1ef・#ffe2b9・#fdeee8、英字見出しの紺 #1c408c、Nunito Sans・Pacifico
   @adjust 文字に使う赤 #e11923→#cc1520（淡い帯の上で 4.5:1 以上にするため。ボタンと番号の丸は #e11923 のまま）。サーモン・橙の面の上の文字は濃い茶 #33211d にする
*/
:root[data-theme="music-b"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #fff1ef;
  --c-text: #33211d;
  --c-muted: #6b4a42;
  --c-line: #f5d3cc;
  --c-accent: #cc1520;
  --c-accent-deco: #f79080;
  --c-accent-2: #e5521f;
  --c-btn-bg: #e11923;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #1c408c;
  --c-btn2-border: #1c408c;
  --c-price: #cc1520;
  --c-badge-bg: #cc1520;
  --c-badge-text: #ffffff;
  --c-focus: #1c408c;
  --c-ph-a: #ffe9e4;
  --c-ph-b: #fcd3c8;
  --c-ph-text: #6b2a1c;
  --c-map-bg: #fff1ef;
  --c-map-line: #fbdcd5;
  --c-map-road: #ffffff;
  --c-map-pin: #e5521f;

  --hero-bg: #f79080;
  --hero-text: #33211d;
  --hero-muted: #33211d;
  --cta-top-bg: #ffffff;
  --cta-top-text: #33211d;
  --cta-bottom-bg: #ffe2b9;
  --cta-bottom-text: #33211d;
  --footer-bg: #1c408c;
  --footer-text: #ffffff;
  --label-color: #1c408c;

  /* 帯は3色を使い分ける（料金は淡い橙、連絡先は淡いピンク） */
  --menu-bg: #ffe2b9;
  --contact-bg: #fdeee8;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: var(--font-body);
  --font-label: "Pacifico", "Noto Sans JP", cursive;
  --font-num: "Nunito Sans", "Noto Sans JP", sans-serif;
  --fw-head: 700;
  --fw-hero: 900;
  --lh-body: 1.85;
  --ls-hero: 0.08em;
  --hero-title-size: clamp(2.75rem, 12vw, 4.5rem);
  --h2-size: 1.125rem;
  --label-size: clamp(1.75rem, 7vw, 2.5rem);
  --label-weight: 400;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-rule-w: 28px;
  --head-rule-h: 4px;
  --head-inline: auto;

  --space-section: clamp(48px, 8vw, 88px);
  --space-head: clamp(24px, 5vw, 40px);
  --radius: 16px;
  --radius-img: 16px;
  --radius-btn: 999px;
  --radius-badge: 999px;
  --shadow: 0 6px 18px rgba(0, 0, 0, 0.08);

  /* 写真：スマホは写真の下にサーモンの面、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-text-align: center;
  --hero-child-margin: auto;
  --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: #ffffff;
  --point-align: center;
  --point-num-size: 3.25rem;
  --point-num-radius: 50%;
  --point-num-bg: #e11923;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  /* 料金：写真を使わないカード。名前・説明・価格を縦に積む */
  --menu-cols: minmax(0, 1fr);
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 18px 20px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 16px;
  --price-size: 1.5rem;

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

/* @theme music-c
   @name やさしいナチュラル
   @desc 白とクリームにコーラル、明朝の見出しと手書き風の英字。全面写真に生成りの面を重ね、余白を広く取る
   @fonts https://fonts.googleapis.com/css2?family=Caveat:wght@500&family=Lato:wght@400;700&family=Noto+Sans+JP:wght@400;700&family=Zen+Old+Mincho:wght@500&display=swap
   @source 白×ベージュのナチュラル・やさしい型（島村楽器の音楽教室・椿音楽教室）。文字 #2f1d19、帯 #fff7ef・#deceba・#bba89c、差し色 コーラル #e75f5f、淡い水色 #b5dbe8（面）、Lato＋手書き風の欧文
   @adjust 文字とボタンに使うコーラル #e75f5f→#ad4747、写真に重ねる面の小見出しは #9a3d3d（4.5:1 以上にするため）。#e75f5f は線と地図のピンに使う
*/
:root[data-theme="music-c"] {
  --c-bg: #ffffff;
  --c-surface: #fffaf5;
  --c-band: #fff7ef;
  --c-text: #2f1d19;
  --c-muted: #6a574f;
  --c-line: #deceba;
  --c-accent: #ad4747;
  --c-accent-deco: #e75f5f;
  --c-accent-2: #b5dbe8;
  --c-btn-bg: #ad4747;
  --c-btn-text: #ffffff;
  --c-btn2-bg: transparent;
  --c-btn2-text: #2f1d19;
  --c-btn2-border: #bba89c;
  --c-price: #2f1d19;
  --c-badge-bg: #ad4747;
  --c-badge-text: #ffffff;
  --c-focus: #ad4747;
  --c-ph-a: #f5ece2;
  --c-ph-b: #e8d9c6;
  --c-ph-text: #4a3530;
  --c-map-bg: #fff7ef;
  --c-map-line: #efe3d3;
  --c-map-road: #ffffff;
  --c-map-pin: #e75f5f;

  --hero-bg: #e8d9c6;
  --hero-text: #2f1d19;
  --hero-muted: #9a3d3d;
  --hero-card-bg: rgba(255, 247, 239, 0.92);
  --hero-card-pad: clamp(24px, 6vw, 44px);
  --hero-card-radius: 2px;
  --cta-top-bg: #fff7ef;
  --cta-top-text: #2f1d19;
  --cta-bottom-bg: #b5dbe8;
  --cta-bottom-text: #2f1d19;
  --footer-bg: #2f1d19;
  --footer-text: #fff7ef;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --font-label: "Caveat", "Zen Old Mincho", cursive;
  --font-num: "Lato", "Noto Sans JP", sans-serif;
  --fw-head: 500;
  --fw-hero: 500;
  --lh-body: 2;
  --ls-head: 0.08em;
  --ls-hero: 0.14em;
  --hero-title-size: clamp(2.25rem, 9vw, 3.5rem);
  --h2-size: clamp(1.25rem, 4.4vw, 1.75rem);
  --label-size: clamp(1.625rem, 5.5vw, 2rem);
  --label-weight: 500;
  --label-transform: none;
  --label-ls: 0.02em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 1px;
  --head-inline: auto;

  --container: 1040px;
  --space-section: clamp(72px, 13vw, 140px);
  --space-head: clamp(32px, 6vw, 56px);
  --radius: 2px;
  --radius-img: 2px;
  --radius-btn: 2px;
  --radius-badge: 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: 32rem;
  --hero-body-pad: clamp(20px, 6vw, 56px);

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

  --menu-item-pad: 20px 0;
  --price-size: 1.1875rem;

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

/* @theme music-d
   @name 音符のイントロ
   @desc 白と淡いオレンジに朱色。開くと、五線と音符の短い演出が出て、写真の上を音符がゆっくり昇っていく（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Outfit:wght@500&family=Zen+Maru+Gothic:wght@400;700&display=swap
   @source 動きの型は、業種別サイト傾向調査の読み込み時のイントロアニメーション（音楽教室の Bee ミュージックスクール）。調査の記述から型だけを借り、五線と音符に置き換えた。配色は同じ社の朱色 #e5521f と淡いオレンジ #fdeee8 から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・motion.js）
   @motion opening-notes film notes
   @slides hero
   @adjust 朱色 #e5521f は白地との比が 3.6:1 のため、線・音符・ピンだけに使い、文字とボタンには同じ色相を暗くした #b0400f を使う
*/
:root[data-theme="music-d"] {
  --c-bg: #ffffff;
  --c-surface: #fff8f4;
  --c-band: #fdeee8;
  --c-text: #33211d;
  --c-muted: #5e4a44;
  --c-line: #f3d9cc;
  --c-accent: #b0400f;
  --c-accent-deco: #e5521f;
  --c-accent-2: #f7b267;
  --c-btn-bg: #b0400f;
  --c-btn-text: #ffffff;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #33211d;
  --c-btn2-border: #33211d;
  --c-price: #33211d;
  --c-badge-bg: #b0400f;
  --c-badge-text: #ffffff;
  --c-focus: #b0400f;
  --c-ph-a: #f8e6dd;
  --c-ph-b: #efd4c6;
  --c-ph-text: #3d2a25;
  --c-map-bg: #fdeee8;
  --c-map-line: #f5ddd2;
  --c-map-road: #ffffff;
  --c-map-pin: #e5521f;

  --hero-bg: #fdeee8;
  --hero-text: #33211d;
  --hero-muted: #b0400f;
  --cta-top-bg: #ffffff;
  --cta-top-text: #33211d;
  --cta-bottom-bg: #fdeee8;
  --cta-bottom-text: #33211d;
  --footer-bg: #33211d;
  --footer-text: #fdeee8;

  --font-body: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --font-head: var(--font-body);
  --font-hero: var(--font-body);
  --font-label: "Outfit", "Zen Maru Gothic", sans-serif;
  --font-num: "Outfit", "Zen Maru Gothic", sans-serif;
  --fw-head: 700;
  --fw-hero: 700;
  --ls-hero: 0.12em;
  --hero-title-size: clamp(2.5rem, 10vw, 4rem);
  --h2-size: clamp(1.375rem, 5vw, 1.875rem);
  --label-size: 0.875rem;
  --label-weight: 500;
  --label-ls: 0.22em;
  --head-align: center;
  --head-rule-w: 32px;
  --head-rule-h: 4px;
  --head-inline: auto;

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

  /* 写真：スマホは写真の下に屋号、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-media-radius: 0px;
  --hero-body-align: center;

  --about-media-ratio: 1 / 1;
  --about-areas-lg: "text media";
  --about-cols-lg: minmax(0, 6fr) minmax(0, 5fr);
  --point-bg: #fff8f4;
  --point-align: center;
  --point-num-size: 3.25rem;
  --point-num-radius: 50%;
  --point-num-bg: #b0400f;
  --point-num-text: #ffffff;
  --point-num-border-w: 0px;
  --point-num-fs: 1.25rem;

  --menu-cols: minmax(0, 1fr);
  --menu-cols-lg: repeat(3, minmax(0, 1fr));
  --menu-gap: 12px;
  --menu-item-areas: "name" "desc" "price";
  --menu-item-cols: minmax(0, 1fr);
  --menu-item-pad: 18px 20px;
  --menu-item-bg: #ffffff;
  --menu-item-rule: 0px;
  --menu-item-radius: 16px;
  --price-size: 1.5rem;

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

  --mv-opening-bg: #fdeee8;
  --mv-opening-ink: #33211d;
  --mv-opening-accent: #e5521f;
  --mv-toggle-bg: #33211d;
  --mv-toggle-fg: #ffffff;
}

/* @theme music-e
   @name めくるレッスン帳
   @desc クリームの紙に焦げ茶の文字とコーラル。写真は止めたまま、大きな明朝の屋号と番号、線だけの斜体の英字で見せる。読み進めると英字がすべり、写真が下からめくれて出る（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;1,400&family=Noto+Sans+JP:wght@400;700&family=Zen+Antique+Soft&display=swap
   @concept 誌面で読ませる
   @source 音楽教室の調査で読めた10社に、ヒーローの動画はなかった（0社）。椿音楽教室は、特徴（Feature）の節の直後に Movie の節を置き、そこで動画を自動で再生していた。この「ヒーローではなく、本文の途中で動かす」型を、写真は止めたまま、読み進めると大きな英字がすべり、写真がめくれて出る誌面にした。料金をトップに載せていた1社（アバロンミュージックスクール）は、回数×時間の表に、1回の単価と入学金を添えていた。この型を、コースごとに節を立て、回数と時間を添えた月謝を大きく見せる形にした。英単語の見出しと日本語のリード（シアー・EYS・椿・アバロン・JOY の5社）を、番号と線だけの大きな英字にした。配色は「白×ベージュのナチュラル・やさしい型」（島村楽器の音楽教室・椿音楽教室）の文字 #2f1d19、帯 #fff7ef・#deceba・#bba89c、コーラル #e75f5f、淡い水色 #b5dbe8 から。書体は、椿の A1明朝の代わりに Zen Antique Soft を、手書き風の欧文の代わりに斜体のあるセリフ体 Lora を当てた。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・folio.css・motion.js・folio.js）
   @motion folio
   @adjust 文字とフォーカス枠に使うコーラル #e75f5f→#c64044（クリームの紙 #fff7ef 4.69:1、焦げ茶の地 3.22:1、帯 #deceba 3.23:1。OKLCH で明度だけ下げた）。焦げ茶の地の紹介の段の番号は #e75f5f のまま（4.73:1）。#bba89c は地との比が 2.15:1 のため、大きな英字の線だけに使う
*/
:root[data-theme="music-e"] {
  --c-bg: #fff7ef;
  --c-surface: #fffbf6;
  --c-band: #deceba;
  --c-text: #2f1d19;
  --c-muted: #6a574f;
  --c-line: #deceba;
  --c-accent: #c64044;
  --c-accent-deco: #e75f5f;
  --c-accent-2: #b5dbe8;
  --c-btn-bg: #2f1d19;
  --c-btn-text: #fff7ef;
  --c-btn2-bg: #fff7ef;
  --c-btn2-text: #2f1d19;
  --c-btn2-border: #2f1d19;
  --c-price: #2f1d19;
  --c-badge-bg: #c64044;
  --c-badge-text: #ffffff;
  --c-focus: #c64044;
  --c-ph-a: #f5ece2;
  --c-ph-b: #e8d9c6;
  --c-ph-text: #4a3530;
  --c-map-bg: #f7ecdf;
  --c-map-line: #ecdecb;
  --c-map-road: #fffbf6;
  --c-map-pin: #e75f5f;

  --hero-bg: #fff7ef;
  --hero-text: #2f1d19;
  --hero-muted: #6a574f;
  --cta-top-bg: #fff7ef;
  --cta-top-text: #2f1d19;
  --cta-bottom-bg: #deceba;
  --cta-bottom-text: #2f1d19;
  --footer-bg: #2f1d19;
  --footer-text: #fff7ef;

  /* 紹介の段は焦げ茶の地に反転。ほかの段は帯を塗らず、線で区切る */
  --about-bg: #2f1d19;
  --about-text: #fff7ef;
  --about-muted: #deceba;
  --about-accent: #e75f5f;
  --about-surface: #2a1814;
  --about-line: #5b453e;
  --about-deco: #b5dbe8;
  --menu-bg: #fff7ef;
  --news-bg: #fff7ef;
  --contact-bg: #fff7ef;

  --font-body: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-head: "Zen Antique Soft", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-hero: "Zen Antique Soft", "Yu Mincho", "Hiragino Mincho ProN", serif;
  --font-label: "Lora", "Zen Antique Soft", serif;
  --font-num: "Lora", "Zen Antique Soft", serif;
  --fw-head: 400;
  --fw-hero: 400;
  --fw-num: 400;
  --lh-body: 2;

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

  /* 型（premium/folio.css）の色：大きな英字の線は帯の #bba89c */
  --fo-outline: #bba89c;
  --mv-toggle-bg: #2f1d19;
  --mv-toggle-fg: #fff7ef;
}

/* @theme music-f
   @name レッスンの写真を開く
   @desc 淡い水色の卓に、紺の太い線の札と黄緑。上に並べたレッスンの写真の札が裏返って説明を見せ、押すと写真が大きく開く。コースは札を押して選び、教室の写真は指で送れる（付けるかどうかは相談して決める）
   @fonts https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@800&family=Noto+Sans+JP:wght@400;700&family=Open+Sans:wght@700;800&display=swap
   @concept 触って選ぶ
   @source 動きの型は、音楽教室の調査の観察と、カフェの1社から借りた。音楽教室では、ヒーローをスライダーにする社が5社（カワイ・EYS・アバロン・NAYUTAS・JOY）あり、主な連絡先は10社中8社が体験レッスンの申し込みだった。スライダーを、ときどき裏返るレッスンの写真の札にし（裏は写真の説明）、押すと写真が大きく開く形にした。体験レッスンもコースの札に並べたまま、選ぶと内容と料金が開く。札が裏返るのは、写真のタイルが向きを変えて切り替わるヒーロー（カフェのコメダ珈琲店）の型から。配色は「白×ブルーの清潔スクール型」（シアーミュージック・EYS音楽教室・NAYUTAS・JOYミュージックスクール）の青 #066292・#017deb・#299ad6、ボタンの黄緑 #7dbf00、淡い水色の帯 #edf6fa、欧文の Open Sans から。文章・画像・コードは写していない
   @page motion（A から variants.py が作る。動きは premium/motion.css・touch.css・motion.js・touch.js）
   @motion touch
   @adjust 黄緑 #7dbf00 のボタンと英字の札の文字は紺 #0b3a57（5.31:1。白い文字では足りないため）。淡い水色の卓 #edf6fa の上の文字は紺（10.91:1）。フォーカス枠は #017deb（白 4.09:1、卓 3.73:1）
*/
:root[data-theme="music-f"] {
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-band: #edf6fa;
  --c-text: #0b3a57;
  --c-muted: #3f5b6e;
  --c-line: #cfe3ee;
  --c-accent: #066292;
  --c-accent-deco: #299ad6;
  --c-accent-2: #7dbf00;
  --c-btn-bg: #7dbf00;
  --c-btn-text: #0b3a57;
  --c-btn2-bg: #ffffff;
  --c-btn2-text: #0b3a57;
  --c-btn2-border: #0b3a57;
  --c-price: #066292;
  --c-badge-bg: #066292;
  --c-badge-text: #ffffff;
  --c-focus: #017deb;
  --c-ph-a: #e3eff6;
  --c-ph-b: #cfe2ee;
  --c-ph-text: #22435a;
  --c-map-bg: #edf6fa;
  --c-map-line: #d6e8f2;
  --c-map-road: #ffffff;
  --c-map-pin: #017deb;

  --hero-bg: #edf6fa;
  --hero-text: #0b3a57;
  --hero-muted: #3f5b6e;
  --cta-top-bg: #ffffff;
  --cta-top-text: #0b3a57;
  --cta-bottom-bg: #ffffff;
  --cta-bottom-text: #0b3a57;
  --footer-bg: #0b3a57;
  --footer-text: #ffffff;

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

  --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: "Open Sans", "Noto Sans JP", sans-serif;
  --font-num: "Open Sans", "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: uppercase;
  --label-size: 0.8125rem;
  --label-weight: 700;
  --label-ls: 0.14em;

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

  /* 型（premium/touch.css）の色：押せるものの線と影は紺、英字の札と番号の丸はボタンの黄緑 */
  --tc-ink: #0b3a57;
  --tc-sticker: #7dbf00;
  --mv-toggle-bg: #0b3a57;
  --mv-toggle-fg: #ffffff;
}