/* signature.css — 見本の店（/catalog/demo/th-xx/）の「署名」の層。site/lp/catalog_src/ が正本（theme_samples.py が配る）。
   - 下の層（tokens.css → themes.css → ds.css）は design-os の ds/ の写しで、直さない。
   - ここでは、テーマごとの「逸脱 D」（docs/themes.md の署名）を、北極星 §3.1 の 4 条件で実装する：
     目的 1 文（各テーマの見出しのコメント）／床 F は守る（文字は写真の上に置かない・4.5:1）／
     ページ全体で同じ強さで繰り返す／記録（docs/wpm/design/catalog-samples.md）。
   - 動きは design-os の motion.css・motion.js（catalog_src/vendor/ に写し）。ここでは動きを足さない。 */

/* ---- 見本の外側（テーマに関係なく同じ。ページの外の案内） ---- */
.cat-bar{background:#161616;color:#fff;font:14px/1.4 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;position:relative;z-index:20}
.cat-bar__in{max-inline-size:80rem;margin:0 auto;padding:var(--spacing-scale-2) var(--spacing-scale-3);display:flex;align-items:center;gap:var(--spacing-scale-2) var(--spacing-scale-3);flex-wrap:wrap}
.cat-bar__back{color:#fff}
.cat-bar__back{display:inline-flex;align-items:center;min-block-size:44px;text-decoration:underline;text-underline-offset:.2em}
.cat-bar__now{margin:0;flex:1 1 12rem;display:flex;flex-wrap:wrap;gap:var(--spacing-scale-1) var(--spacing-scale-2);align-items:center;max-inline-size:none}
.cat-bar__tag{font-size:13px;border:1px solid #8a8a8a;border-radius:999px;padding:var(--spacing-scale-1) var(--spacing-scale-2);color:#e6e6e6}
.cat-bar__name{font-weight:700}
/* 見本の外側の帯：ボタンは .ds-btn（主・text）のまま、色だけ無彩色にする（どのテーマでも同じ見た目） */
.cat-bar,.cat-order{--color-main:#FFFFFF;--color-on-main:#161616;--color-accent:#E6E6E6;--color-on-accent:#161616;--color-text:#FFFFFF;--color-surface:#2A2A2A;--color-border:#5A5A5A;--radius-control:999px;--typography-weight-heading:700;--typography-family-body:system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
.cat-bar .ds-btn,.cat-order .ds-btn{font-family:var(--typography-family-body)}
.cat-bar__cta{min-block-size:40px}
@media (max-width:599px){.cat-bar__now{display:none}.cat-bar__in{justify-content:space-between}}
.cat-order{background:#161616;color:#f2f2f2;font:16px/1.7 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif}
.cat-order__in{max-inline-size:52rem;margin:0 auto;padding:var(--spacing-scale-6) var(--spacing-scale-3) var(--spacing-scale-7)}
.cat-order__in > * + *{margin-block-start:var(--spacing-scale-3)}
.cat-order__eyebrow{font-size:13px;letter-spacing:.08em;color:#bdbdbd;margin:0}
.cat-order h2{font:700 clamp(1.4rem,4vw,2rem)/1.4 system-ui,-apple-system,"Hiragino Sans","Noto Sans JP",sans-serif;color:#fff;margin:0}
.cat-order p{max-inline-size:40em;margin:0}
.cat-order__ids{display:flex;flex-wrap:wrap;gap:var(--spacing-scale-2) var(--spacing-scale-4);margin:0;font-size:13px;color:#cfcfcf}
.cat-order__ids div{display:flex;gap:var(--spacing-scale-2)}.cat-order__ids dd{margin:0;font-family:ui-monospace,monospace}
.cat-order__actions{display:flex;flex-wrap:wrap;gap:var(--spacing-scale-3) var(--spacing-scale-4);align-items:center}

/* ---- 店のページの共通（全テーマ。トークンだけ） ---- */
/* 読みやすさ（B-8）：小さな文字の下限を 13px に（トークンの 12px は、スマホの注記には小さい）。TH-10 はさらに大きく */
.sg{--typography-size-caption:0.8125rem}
[data-theme="TH-10"] .sg{--typography-size-caption:0.9375rem}
.sg{overflow-x:clip}
.sg img{max-inline-size:100%;block-size:auto;display:block}
.sg-header{position:sticky;inset-block-start:0;z-index:10}
.sg-hero{position:relative;padding-block:var(--s6) var(--s7);overflow:clip}
.sg-hero__grid{display:grid;gap:var(--s5);align-items:center}
.sg-hero__text > * + *{margin-block-start:var(--s3)}
.sg-hero__text .ds-hero__lead{font-size:var(--typography-size-lead);color:var(--color-text-muted);max-inline-size:30em}
.sg-hero__text .ds-actions{margin-block-start:var(--s5)}
.sg-h1{font-size:var(--sg-h1, clamp(2rem, 7vw, 3.5rem));line-height:var(--sg-h1-lh, 1.3);letter-spacing:var(--sg-h1-ls, 0)}
.sg-hero__media{margin:0;position:relative}
.sg-hero__img{inline-size:100%;aspect-ratio:var(--sg-hero-ratio, 4 / 3);object-fit:cover;border-radius:var(--radius-card)}
.sg-cap{font-size:var(--typography-size-caption);color:var(--color-text-muted);margin-block-start:var(--s2)}
.sg-en{font-size:var(--typography-size-caption);letter-spacing:.2em;color:var(--color-text-muted);margin:0}
@media (min-width:900px){.sg-hero__grid{grid-template-columns:1fr 1fr;gap:var(--s7)}}
.sg-news{border-block:1px solid var(--color-border);padding-block:var(--s3)}
.sg-news .ds-wrap{display:grid;gap:var(--s2)}
.sg-news__h{font-size:var(--typography-size-caption);letter-spacing:.1em;color:var(--color-text-muted)}
.sg-news ul{display:grid;gap:var(--s1)}
.sg-news li{display:flex;gap:var(--s3);font-size:var(--typography-size-body)}
.sg-news time{font-variant-numeric:tabular-nums;color:var(--color-text-muted);flex:none}
@media (min-width:768px){.sg-news .ds-wrap{grid-template-columns:8rem 1fr;align-items:baseline}}
.sg-sec{padding-block:var(--sg-sec-pad, var(--s8))}
.sg-split{display:grid;gap:var(--s5);align-items:center}
.sg-photo{inline-size:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-card)}
@media (min-width:900px){.sg-split{grid-template-columns:5fr 6fr;gap:var(--s7)}}
.sg-split__text > * + *{margin-block-start:var(--s4)}
/* 料金表（部品の定義：行の構成を全部同じに・本文は左揃え・動かさない） */
.sg-price{margin:0;display:grid;border-block-start:1px solid var(--color-text)}
.sg-price__row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);padding-block:var(--s4);border-block-end:1px solid var(--color-border)}
.sg-price dt{display:grid;gap:var(--s1)}
.sg-price__name{font-family:var(--typography-family-heading);font-weight:var(--typography-weight-heading);font-size:var(--typography-size-lead)}
.sg-price__desc{font-size:var(--typography-size-caption);color:var(--color-text-muted)}
.sg-price dd{margin:0;font-family:var(--typography-family-heading);font-weight:var(--typography-weight-heading);font-size:var(--typography-size-heading);font-variant-numeric:tabular-nums;white-space:nowrap}
.sg-price dd small{font-size:var(--typography-size-caption);margin-inline-start:var(--spacing-scale-1)}
.sg-owner{max-inline-size:44rem}
.sg-band{padding-block:var(--s7)}
.sg-req{display:grid;gap:var(--s2);margin:var(--s4) 0 0;padding:var(--s3) var(--s4);border:var(--card-border);border-radius:var(--radius-card);background:var(--color-base)}
.sg-req div{display:flex;gap:var(--s3)}
.sg-req dt{color:var(--color-text-muted);min-inline-size:6em}
.sg-req dd{margin:0;font-weight:var(--typography-weight-heading)}

/* 動き：design-os の動きの部品集（motion.css・motion.js）。ここには足さない。
   html の data-ds-motion-level（TH-10 は none）・FV は data-ds-intro・節は data-ds-reveal・手順は data-ds-stagger・料金は data-ds-still。 */

/* ==== TH-01 余白と一枚：D-PHOTO「主役の 1 枚を画面いっぱいに置き、文字は小さく少なく」 ==== */
[data-theme="TH-01"]{--sg-h1:clamp(1.75rem,4.4vw,2.75rem);--sg-h1-lh:1.5;--sg-h1-ls:.04em;--sg-sec-pad:clamp(64px,12vw,160px)}
[data-theme="TH-01"] .sg-header{border-block-end-color:transparent}
[data-theme="TH-01"] .sg-hero--immerse{padding:0}
[data-theme="TH-01"] .sg-hero--immerse .sg-hero__img{aspect-ratio:auto;block-size:min(72svh,760px);min-block-size:360px;border-radius:0}
[data-theme="TH-01"] .sg-hero__panel{background:var(--color-base);padding:var(--s5) var(--s4) var(--s4);margin-block-start:calc(var(--s7) * -1);position:relative;max-inline-size:34rem}
[data-theme="TH-01"] .sg-hero__panel > * + *{margin-block-start:var(--s3)}
[data-theme="TH-01"] .sg-hero__panel .ds-actions{margin-block-start:var(--s5)}
[data-theme="TH-01"] .ds-hero__lead{font-size:var(--typography-size-body)}
[data-theme="TH-01"] .sg-split{grid-template-columns:1fr}
[data-theme="TH-01"] .sg-split .sg-photo{aspect-ratio:3/2;border-radius:0}
[data-theme="TH-01"] .sg-split__text{max-inline-size:34rem}
[data-theme="TH-01"] .ds-sechead h2{font-size:var(--typography-size-lead);letter-spacing:.06em}
[data-theme="TH-01"] .ds-section--alt{background:var(--color-base)}
[data-theme="TH-01"] .sg-news{border:0}
@media (min-width:900px){[data-theme="TH-01"] .sg-hero__panel{margin-block-start:calc((var(--spacing-scale-8) + var(--spacing-scale-7)) * -1);padding:var(--s6)}
  [data-theme="TH-01"] .sg-split .sg-photo{inline-size:78%;margin-inline-start:auto}}

/* ==== TH-02 白の上質：D-TYPE「見出しだけ明朝＋欧文セリフの大きな組で、価格より体験の質を伝える」 ==== */
[data-theme="TH-02"]{--sg-h1:clamp(2rem,6.2vw,4rem);--sg-h1-lh:1.45;--sg-h1-ls:.08em;--sg-hero-ratio:4/5;--sg-serif:'Cormorant Garamond',Georgia,'Times New Roman',serif}
[data-theme="TH-02"] .sg-en{font:italic 400 clamp(2.6rem,9vw,6rem)/1 var(--sg-serif);letter-spacing:0;color:var(--color-accent);opacity:.9}
[data-theme="TH-02"] .ds-eyebrow{font:italic 400 1.75rem/1 var(--sg-serif);letter-spacing:0;text-transform:none;color:var(--color-accent)}
[data-theme="TH-02"] .ds-eyebrow::before{display:none}
[data-theme="TH-02"] .ds-sechead h2{letter-spacing:.08em}
[data-theme="TH-02"] .sg-hero__media{padding:var(--s3);border:1px solid var(--color-border)}
[data-theme="TH-02"] .sg-hero__img,[data-theme="TH-02"] .sg-photo{border-radius:0}
[data-theme="TH-02"] .sg-price{border-block-start-color:var(--color-border)}
[data-theme="TH-02"] .sg-price dd{font-family:var(--sg-serif);font-weight:500;font-size:1.75rem}
@media (min-width:900px){[data-theme="TH-02"] .sg-hero__grid{grid-template-columns:6fr 5fr}}

/* ==== TH-03 紙とインク：D-LAYOUT「見出しを画面幅の 6〜9 割の図にする」＋D-ORNAMENT「端で切れた円・アーチ」 ==== */
[data-theme="TH-03"]{--sg-h1:clamp(3rem,13vw,8.5rem);--sg-h1-lh:1.08;--sg-h1-ls:-.02em}
[data-theme="TH-03"] .sg-hero--giant .sg-h1{max-inline-size:none;margin-block:var(--s3) var(--s6)}
[data-theme="TH-03"] .sg-hero--giant .sg-h1 .smp-nb{display:block}
[data-theme="TH-03"] .sg-hero__row{display:grid;gap:var(--s5);align-items:end;position:relative;z-index:1}
[data-theme="TH-03"] .sg-hero__row .sg-hero__text > * + *{margin-block-start:var(--s3)}
[data-theme="TH-03"] .sg-arch .sg-hero__img{aspect-ratio:3/4;border-radius:999px 999px 0 0}
[data-theme="TH-03"] .sg-hero--giant{isolation:isolate}
[data-theme="TH-03"] .sg-orb{position:absolute;inline-size:min(46vw,520px);aspect-ratio:1;border-radius:50%;background:var(--color-accent);inset-inline-end:-14vw;inset-block-end:-12%;z-index:-1}
[data-theme="TH-03"] .sg-en{font-weight:700;letter-spacing:.3em;color:var(--color-accent)}
[data-theme="TH-03"] .ds-eyebrow{font-family:var(--typography-family-heading);font-size:clamp(2.5rem,8vw,5rem);line-height:1;letter-spacing:0;text-transform:none;color:var(--color-accent)}
[data-theme="TH-03"] .ds-eyebrow::before{display:none}
[data-theme="TH-03"] .ds-sechead h2{font-size:clamp(1.75rem,5vw,3rem)}
[data-theme="TH-03"] .sg-split .sg-photo{aspect-ratio:3/4;border-radius:999px 999px 0 0}
[data-theme="TH-03"] .sg-price__row{border-block-end:1px dashed var(--color-text)}
@media (min-width:900px){[data-theme="TH-03"] .sg-hero__row{grid-template-columns:5fr 6fr}
  [data-theme="TH-03"] .sg-hero--giant .sg-h1 .smp-nb:nth-child(n+2){display:inline-block}
  [data-theme="TH-03"] .sg-arch{max-inline-size:420px}}
@media (max-width:899px){[data-theme="TH-03"] .sg-orb{inline-size:64vw;inset-block-end:auto;inset-block-start:42%;inset-inline-end:-34vw}
  [data-theme="TH-03"] .sg-arch{max-inline-size:78%}}

/* ==== TH-04 自然素材の温もり：D-ORNAMENT「地と同じ色の濃淡の有機形で、手ざわりを伝える」 ==== */
[data-theme="TH-04"]{--sg-h1:clamp(2rem,6.4vw,3.75rem);--sg-organic:58% 42% 46% 54% / 52% 44% 56% 48%}
[data-theme="TH-04"] .sg-hero__img{aspect-ratio:1;border-radius:var(--sg-organic)}
[data-theme="TH-04"] .sg-photo{border-radius:46% 54% 42% 58% / 56% 46% 54% 44%}
[data-theme="TH-04"] .sg-blob{position:absolute;background:var(--color-surface);border-radius:var(--sg-organic);z-index:-1}
[data-theme="TH-04"] .sg-hero{isolation:isolate}
[data-theme="TH-04"] .sg-blob--a{inline-size:min(80vw,640px);aspect-ratio:1.1;inset-inline-end:-18vw;inset-block-start:-10%}
[data-theme="TH-04"] .sg-blob--b{inline-size:min(40vw,280px);aspect-ratio:1;inset-inline-start:-10vw;inset-block-end:-8%;border-radius:44% 56% 60% 40% / 50% 40% 60% 50%}
[data-theme="TH-04"] .ds-section--alt{background:var(--color-surface);border-radius:48px 48px 0 0}
[data-theme="TH-04"] .sg-price{border-block-start:0;gap:var(--s2)}
[data-theme="TH-04"] .sg-price__row{background:var(--color-base);border:0;border-radius:24px;padding:var(--s4)}
[data-theme="TH-04"] .ds-section--alt .sg-price__row{background:var(--color-base)}

/* ==== TH-05 やわらかな透明感：D-COLOR「淡いグラデーションを FV の 1 面だけに。ほかは平らに」 ==== */
[data-theme="TH-05"]{--sg-h1:clamp(1.9rem,6vw,3.4rem);--sg-h1-lh:1.45;--sg-hero-ratio:4/5}
[data-theme="TH-05"] .sg-hero--gradient{background:linear-gradient(160deg,var(--color-base) 0%,#F7E6E8 55%,#EFE3F1 100%)}
[data-theme="TH-05"] .sg-hero__img{border-radius:200px 200px 24px 24px}
[data-theme="TH-05"] .sg-photo{border-radius:24px}
[data-theme="TH-05"] .sg-en{letter-spacing:.24em;color:var(--color-accent)}
[data-theme="TH-05"] .sg-price{border-block-start:0;gap:var(--s3)}
[data-theme="TH-05"] .sg-price__row{border:1px solid var(--color-border);border-radius:16px;padding:var(--s4);background:var(--color-base)}
@media (min-width:900px){[data-theme="TH-05"] .sg-hero__grid{grid-template-columns:7fr 5fr}[data-theme="TH-05"] .sg-hero__media{max-inline-size:440px;justify-self:end}}

/* ==== TH-06 ちいさな森：D-ORNAMENT「手描き風の図形と吹き出し」＋D-COLOR「同じ明るさの 3 色まで」 ==== */
[data-theme="TH-06"]{--sg-h1:clamp(2rem,7vw,3.6rem);--sg-c2:#2F6B4F;--sg-c3:#2B5C8A;--sg-tint1:#FBE3D2;--sg-tint2:#DCEFE3;--sg-tint3:#DCE8F5}
[data-theme="TH-06"] .sg-en{display:inline-block;position:relative;background:var(--color-accent);color:var(--color-on-accent);font-weight:700;letter-spacing:.08em;padding:var(--spacing-scale-2) var(--spacing-scale-3);border-radius:999px}
[data-theme="TH-06"] .sg-en::after{content:"";position:absolute;inset-inline-start:22px;inset-block-end:calc(var(--spacing-scale-2) * -1);border:8px solid transparent;border-block-start-color:var(--color-accent);border-block-end:0}
[data-theme="TH-06"] .sg-hero{isolation:isolate}
[data-theme="TH-06"] .sg-hero__img{border-radius:32px;border:4px solid var(--color-text);aspect-ratio:1}
[data-theme="TH-06"] .sg-hero__media::after{content:"";position:absolute;inset:calc(var(--spacing-scale-3) * -1) var(--spacing-scale-3) var(--spacing-scale-3) calc(var(--spacing-scale-3) * -1);border:3px dashed var(--sg-c2);border-radius:36px;z-index:-1}
[data-theme="TH-06"] .sg-blob{position:absolute;border-radius:50%;z-index:-1}
[data-theme="TH-06"] .sg-blob--a{inline-size:180px;aspect-ratio:1;background:var(--sg-tint2);inset-inline-start:-60px;inset-block-start:8%}
[data-theme="TH-06"] .sg-blob--b{inline-size:120px;aspect-ratio:1;background:var(--sg-tint3);inset-inline-end:6%;inset-block-end:-30px}
[data-theme="TH-06"] .ds-sechead h2{display:inline;background:linear-gradient(transparent 62%,var(--sg-tint1) 62%)}
[data-theme="TH-06"] .ds-eyebrow{color:var(--sg-c2)}
[data-theme="TH-06"] .ds-eyebrow::before{background:var(--sg-c2);border-radius:2px;block-size:4px}
[data-theme="TH-06"] .sg-photo{border-radius:32px;border:4px solid var(--color-text)}
[data-theme="TH-06"] .sg-price{border:0;gap:var(--s3)}
[data-theme="TH-06"] .sg-price__row{border:3px solid var(--color-text);border-radius:20px;padding:var(--s4);background:var(--color-base)}
[data-theme="TH-06"] .sg-price__row:nth-child(3n+1){box-shadow:6px 6px 0 var(--sg-tint1)}
[data-theme="TH-06"] .sg-price__row:nth-child(3n+2){box-shadow:6px 6px 0 var(--sg-tint2)}
[data-theme="TH-06"] .sg-price__row:nth-child(3n){box-shadow:6px 6px 0 var(--sg-tint3)}

/* ==== TH-07 色面ポップ：D-COLOR「1 色を画面の大部分に塗る」＋D-TYPE「極太の見出し」 ==== */
[data-theme="TH-07"]{--sg-h1:clamp(2.8rem,12vw,7.5rem);--sg-h1-lh:1.1;--sg-h1-ls:-.01em}
[data-theme="TH-07"] .sg-h1{font-weight:900}
[data-theme="TH-07"] .ds-sechead h2{font-weight:900;font-size:clamp(2rem,7vw,3.5rem);line-height:1.15}
[data-theme="TH-07"] .sg-en{font-weight:900;letter-spacing:.1em;color:var(--color-text);font-size:var(--typography-size-body)}
[data-theme="TH-07"] .sg-hero__img{border:3px solid var(--color-text);border-radius:var(--radius-card);box-shadow:10px 10px 0 var(--color-text);transform:rotate(-2deg);aspect-ratio:1}
[data-theme="TH-07"] .sg-photo{border:3px solid var(--color-text);box-shadow:8px 8px 0 var(--color-text)}
[data-theme="TH-07"] .sg-header{border-block-end:3px solid var(--color-text)}
[data-theme="TH-07"] .sg-news{border-block:3px solid var(--color-text);background:var(--color-text);color:var(--color-base)}
[data-theme="TH-07"] .sg-news time,[data-theme="TH-07"] .sg-news__h{color:var(--color-base)}
[data-theme="TH-07"] .sg-price{border-block-start:3px solid var(--color-text)}
[data-theme="TH-07"] .sg-price__row{border-block-end:3px solid var(--color-text)}
[data-theme="TH-07"] .sg-price dd{font-weight:900;font-size:clamp(1.75rem,6vw,2.5rem)}
[data-theme="TH-07"] .sg-band{background:var(--color-text);color:var(--color-base)}
[data-theme="TH-07"] .sg-band h2{color:var(--color-base);font-weight:900}
[data-theme="TH-07"] .sg-band .ds-btn{background:var(--color-base);color:var(--color-text);border-color:var(--color-base)}

/* ==== TH-08 実直な力強さ：D-TYPE「見出しを特大の太ゴシックで言い切る」 ==== */
[data-theme="TH-08"]{--sg-h1:clamp(2.6rem,10vw,6.5rem);--sg-h1-lh:1.12;--sg-h1-ls:-.02em;--sg-hero-ratio:16/9;--sg-sec-pad:var(--s7)}
[data-theme="TH-08"] .sg-h1{font-weight:900}
[data-theme="TH-08"] .sg-hero__grid{grid-template-columns:1fr}
[data-theme="TH-08"] .sg-hero__text{max-inline-size:none}
[data-theme="TH-08"] .sg-h1::after{content:"";display:block;inline-size:96px;block-size:10px;background:var(--color-accent);margin-block-start:var(--s4)}
[data-theme="TH-08"] .sg-hero__img{border-radius:0}
[data-theme="TH-08"] .sg-en{font-weight:900;letter-spacing:.18em;color:var(--color-text)}
[data-theme="TH-08"] .ds-eyebrow{font-size:clamp(2.5rem,8vw,4.5rem);line-height:1;font-weight:900;letter-spacing:0;color:var(--color-text)}
[data-theme="TH-08"] .ds-eyebrow::before{inline-size:12px;block-size:.9em;background:var(--color-accent)}
[data-theme="TH-08"] .ds-sechead h2{font-weight:900;font-size:clamp(1.9rem,6vw,3.25rem);line-height:1.2}
[data-theme="TH-08"] .sg-photo{border-radius:0;aspect-ratio:4/3}
[data-theme="TH-08"] .sg-price{border-block-start:4px solid var(--color-text)}
[data-theme="TH-08"] .sg-price dd{font-weight:900;font-size:clamp(1.6rem,5vw,2.25rem)}
[data-theme="TH-08"] .sg-band{background:var(--color-text)}
[data-theme="TH-08"] .sg-band,[data-theme="TH-08"] .sg-band h2{color:#fff}
[data-theme="TH-08"] .sg-band .ds-btn{background:#fff;color:var(--color-text);border-color:#fff}

/* ==== TH-09 誠実な信頼：逸脱なし。署名は「事実と読みやすさ」（料金・時間・流れを表で先に見せる） ==== */
[data-theme="TH-09"]{--sg-h1:clamp(1.9rem,5.4vw,3rem);--sg-h1-lh:1.45}
[data-theme="TH-09"] .sg-hero{background:var(--color-surface)}
[data-theme="TH-09"] .sg-hero__img{aspect-ratio:3/2}
[data-theme="TH-09"] .sg-en{letter-spacing:.16em;color:var(--color-accent);font-weight:700}
[data-theme="TH-09"] .ds-eyebrow{color:var(--color-accent)}
[data-theme="TH-09"] .ds-eyebrow::before{background:var(--color-accent)}
[data-theme="TH-09"] .sg-price{border:1px solid var(--color-border);border-radius:var(--radius-card);padding-inline:var(--s4);background:var(--color-base)}
[data-theme="TH-09"] .sg-price__row:last-child{border-block-end:0}

/* ==== TH-10 明快ユニバーサル：逸脱なし。署名は「大きな文字・大きなボタン・時間と連絡先を最初に」。動かさない（MO-none） ==== */
[data-theme="TH-10"]{--sg-h1:clamp(2rem,6vw,3.25rem);--sg-h1-lh:1.4;--typography-size-body:1.125rem;--typography-size-lead:1.25rem;--typography-size-caption:0.9375rem;--sg-sec-pad:var(--s7)}
[data-theme="TH-10"] body,[data-theme="TH-10"] .ds-page{font-size:1.125rem;line-height:1.8}
[data-theme="TH-10"] .ds-btn{min-block-size:56px;font-size:1.125rem}
[data-theme="TH-10"] .sg-req{border:2px solid var(--color-text);font-size:1.25rem}
[data-theme="TH-10"] .sg-hero__img{aspect-ratio:3/2}
[data-theme="TH-10"] .sg-price__name{font-size:1.25rem}
[data-theme="TH-10"] .ds-faq summary{font-size:1.125rem}

/* ==== TH-11 和紙と墨：D-TYPE「縦書きの見出し」＋D-ORNAMENT「墨の線と、判子風の朱」 ==== */
[data-theme="TH-11"]{--sg-h1:clamp(2.2rem,7vw,4rem);--sg-h1-lh:1.6;--sg-h1-ls:.18em;--sg-hero-ratio:3/4}
[data-theme="TH-11"] .sg-hero--vertical .sg-hero__grid{grid-template-columns:auto 1fr;gap:var(--s5) var(--s4);align-items:start}
[data-theme="TH-11"] .sg-hero--vertical .sg-h1{writing-mode:vertical-rl;grid-column:1;grid-row:1;margin:0;padding-block-start:var(--s2)}
[data-theme="TH-11"] .sg-hero--vertical .sg-h1 .smp-nb{display:block;white-space:nowrap}
[data-theme="TH-11"] .sg-hero--vertical .sg-h1{text-wrap:nowrap;word-break:normal;font-family:"Shippori Mincho B1","Hiragino Mincho ProN","Yu Mincho","Noto Serif JP","Noto Serif CJK JP",serif}
[data-theme="TH-11"] .sg-hero--vertical .sg-hero__media{grid-column:2;grid-row:1}
[data-theme="TH-11"] .sg-hero--vertical .sg-hero__text{grid-column:1 / -1;grid-row:2}
[data-theme="TH-11"] .sg-hero__img{border-radius:0}
[data-theme="TH-11"] .sg-seal{position:absolute;inset-inline-end:var(--spacing-scale-3);inset-block-end:var(--spacing-scale-3);writing-mode:vertical-rl;background:var(--color-accent);color:var(--color-on-accent);font-family:var(--typography-family-heading);font-weight:800;padding:var(--spacing-scale-2) var(--spacing-scale-2);letter-spacing:.2em;border-radius:4px}
[data-theme="TH-11"] .ds-sechead h2{display:flex;align-items:center;gap:var(--s3)}
[data-theme="TH-11"] .ds-sechead h2::before{content:"";inline-size:40px;block-size:3px;background:var(--color-text);border-radius:3px 1px 2px 1px;transform:rotate(-4deg)}
[data-theme="TH-11"] .sg-photo{border-radius:0}
[data-theme="TH-11"] .sg-price{border-block-start:2px solid var(--color-text)}
@media (min-width:900px){[data-theme="TH-11"] .sg-hero--vertical .sg-hero__grid{grid-template-columns:5fr auto 5fr;align-items:end}
  [data-theme="TH-11"] .sg-hero--vertical .sg-hero__text{grid-column:1;grid-row:1;padding-block-end:var(--s4)}
  [data-theme="TH-11"] .sg-hero--vertical .sg-h1{grid-column:2;align-self:start}
  [data-theme="TH-11"] .sg-hero--vertical .sg-hero__media{grid-column:3}}

/* ==== TH-12 先進プロダクト：D-COLOR「アクセントの淡いグラデーションを FV だけに。実際の画面（空き枠）を見せる」 ==== */
[data-theme="TH-12"]{--sg-h1:clamp(2.2rem,7vw,4.25rem);--sg-h1-lh:1.2;--sg-h1-ls:-.02em}
[data-theme="TH-12"] .sg-hero--product{background:radial-gradient(80% 60% at 85% 10%,#DCE7FB 0%,transparent 60%),radial-gradient(60% 50% at 0% 100%,#E8E4FB 0%,transparent 60%),var(--color-base)}
[data-theme="TH-12"] .sg-en{font-weight:700;letter-spacing:.2em;color:var(--color-accent)}
[data-theme="TH-12"] .sg-device{position:relative}
[data-theme="TH-12"] .sg-device .sg-hero__img{border-radius:20px;aspect-ratio:4/3}
[data-theme="TH-12"] .sg-panel{position:relative;margin:calc(var(--s7) * -1) var(--s3) 0 auto;max-inline-size:280px;background:var(--color-base);border:1px solid var(--color-border);border-radius:16px;box-shadow:0 12px 32px #0F172A1F;padding:var(--s3) var(--s4)}
[data-theme="TH-12"] .sg-panel__h{font-size:var(--typography-size-caption);color:var(--color-text-muted);margin:0 0 var(--s2)}
[data-theme="TH-12"] .sg-panel ul{display:grid;gap:var(--s2)}
[data-theme="TH-12"] .sg-panel li{display:flex;justify-content:space-between;padding:var(--s2) var(--s3);border-radius:10px;background:var(--color-surface)}
[data-theme="TH-12"] .sg-panel b{color:var(--color-accent);font-variant-numeric:tabular-nums}
[data-theme="TH-12"] .sg-photo{border-radius:20px}
[data-theme="TH-12"] .sg-price{border:0;gap:var(--s3)}
[data-theme="TH-12"] .sg-price__row{border:1px solid var(--color-border);border-radius:16px;padding:var(--s4);background:var(--color-base)}

/* ---- 動く部品：料金の目安（estimate.js）。料金表の下に、同じトークンで ---- */
.sg-est{margin-block-start:var(--s5);padding:var(--s4);border:var(--card-border);border-radius:var(--radius-card);background:var(--color-base)}
.sg-est fieldset{border:0;margin:0;padding:0;display:grid;gap:var(--s2)}
.sg-est legend{font-family:var(--typography-family-heading);font-weight:var(--typography-weight-heading);margin-block-end:var(--s3);padding:0}
.sg-est__opt{display:flex;align-items:center;gap:var(--s3);min-block-size:44px;padding-inline:var(--s2);border-radius:var(--radius-control);cursor:pointer}
.sg-est__opt:hover{background:var(--color-surface)}
.sg-est__opt input{inline-size:20px;block-size:20px;accent-color:var(--color-main);flex:none}
.sg-est__opt span:nth-child(2){flex:1}
.sg-est__p{font-variant-numeric:tabular-nums;color:var(--color-text-muted)}
.sg-est__out{margin-block-start:var(--s3);font-size:var(--typography-size-lead)}
.sg-est__out b{font-family:var(--typography-family-heading);font-size:var(--typography-size-heading);font-variant-numeric:tabular-nums}

/* ---- 反証のレビュー 1 周目の直し（2026-11-04） ---- */
/* 近接：見出し→リード 24px、リード→ボタン 32px。英字の札→見出しも 8px 以上 */
.sg-hero .sg-h1 + .ds-hero__lead{margin-block-start:var(--s4)}
.sg-hero__text .ds-actions,.sg-hero__panel .ds-actions{margin-block-start:var(--s5)}
.sg-en + .sg-h1{margin-block-start:var(--s3)}
/* 整列：副のテキストボタンは左の余白 0（主ボタン・本文と左端をそろえる） */
.sg .ds-actions .ds-btn--text{padding-inline:0}
/* 整列：よくある質問の回答の字頭を、質問の字頭にそろえる（Q の幅を 1.5em に固定） */
.sg .ds-faq summary .ds-q{inline-size:1.5em;flex:none}
/* 近接：料金の注記・合計 */
.sg .sg-price + .ds-caption{margin-block-start:var(--s3)}
.sg-est{margin-block-start:var(--s6)}
.sg-est__out{margin-block-start:var(--s4);padding-block-start:var(--s3);border-block-start:1px solid var(--color-border)}
/* 手順が 3 つの店は 3 列 */
@media (min-width:1024px){.sg-steps--3{grid-template-columns:repeat(3,1fr)}}
/* 読みやすさ：場所と時間の見出し・お知らせの日付は本文の色 */
.sg .smp-info dt,.sg .sg-news time{color:var(--color-text);font-weight:var(--typography-weight-heading)}
.sg-price__name{word-break:auto-phrase}
/* 見本の外側の末尾：本体と同じ左端（72rem）・まとまりの間 */
.cat-order__in{max-inline-size:72rem;padding-inline:var(--spacing-gutter)}
.cat-order__ids{margin-block-start:var(--spacing-scale-4)!important;font-size:14px;color:#E6E6E6}
.cat-order__actions{margin-block-start:var(--spacing-scale-5)!important}
.cat-order p{word-break:auto-phrase;text-wrap:pretty}
/* 節の間は 1 つの値（--s8） */
[data-theme="TH-01"]{--sg-sec-pad:var(--s8)}
/* TH-03：本文は見出しの直下（上揃え）。円は写真の下に置き、文字に重ねない */
[data-theme="TH-03"] .sg-hero__row{align-items:start}
[data-theme="TH-03"] .sg-orb{inset-inline-end:auto;inset-inline-start:-12vw;inset-block-end:-10%;inset-block-start:auto;inline-size:min(36vw,420px)}
@media (max-width:899px){[data-theme="TH-03"] .sg-orb{inset-inline-start:auto;inset-inline-end:-34vw;inset-block-start:auto;inset-block-end:4%}}
/* TH-05：英字の札は本文の色 */
[data-theme="TH-05"] .sg-en{color:var(--color-text)}
/* TH-06：吹き出しと見出しの間・点線の枠と注記の間・色の影は 8px。丸は本文の裏から外す */
[data-theme="TH-06"] .sg-hero__media .sg-cap{margin-block-start:var(--s5)}
[data-theme="TH-06"] .sg-blob--a{inset-block-start:auto;inset-block-end:-40px;inset-inline-start:-80px}
[data-theme="TH-06"] .sg-price__row:nth-child(3n+1){box-shadow:8px 8px 0 var(--sg-tint1)}
[data-theme="TH-06"] .sg-price__row:nth-child(3n+2){box-shadow:8px 8px 0 var(--sg-tint2)}
[data-theme="TH-06"] .sg-price__row:nth-child(3n){box-shadow:8px 8px 0 var(--sg-tint3)}
[data-theme="TH-06"] .sg-price + .ds-caption{margin-block-start:var(--s4)}
/* TH-07：影は 8px。写真の注記は影の下に、墨の色で。傾けるのは 600px 以上だけ（スマホでは余白の線から出さない） */
[data-theme="TH-07"] .sg-hero__img{box-shadow:8px 8px 0 var(--color-text);transform:none}
@media (min-width:600px){[data-theme="TH-07"] .sg-hero__img{transform:rotate(-2deg)}}
[data-theme="TH-07"] .sg-hero__media .sg-cap{margin-block-start:var(--s4);color:var(--color-text)}
/* TH-08：番号は本文の見出しより小さく。左の色の縦棒はやめ、見出しの下の線 1 本に */
[data-theme="TH-08"] .ds-eyebrow{font-size:clamp(1.5rem,4vw,2rem)}
[data-theme="TH-08"] .ds-eyebrow::before{display:none}

[data-theme="TH-08"] .sg-h1::after{block-size:8px;margin-block-start:var(--s3)}
/* 外側の帯：本体と同じ幅（72rem）。依頼のボタンは線だけ（店の主ボタンより目立たせない） */
.cat-bar__in{max-inline-size:72rem;padding-inline:var(--spacing-gutter)}
.cat-bar .ds-btn--secondary{color:#FFFFFF;border-color:#BDBDBD}
.cat-bar .ds-btn--secondary:hover{background:#2A2A2A;color:#FFFFFF;border-color:#FFFFFF}
/* 読みやすさ：文節で折る（1〜2 字だけの行を避ける） */
.sg p,.sg li,.sg dd,.sg dt,.sg h3{word-break:auto-phrase;text-wrap:pretty}
.sg-price dd small,.sg-est__p small{font-size:var(--typography-size-caption);margin-inline-start:var(--spacing-scale-1)}
/* TH-11：墨の線は見出しの上に（文字の左端を本文にそろえる） */
[data-theme="TH-11"] .ds-sechead h2{display:block}
[data-theme="TH-11"] .ds-sechead h2::before{display:block;margin-block-end:var(--s3)}
[data-theme="TH-11"] .sg-hero__media .sg-cap{margin-block-start:var(--s2)}
/* TH-12：写真の注記は FV の下に。スマホの空き枠は写真の左右にそろえる。節の英字もアクセントの色 */
[data-theme="TH-12"] .sg-device > .sg-cap{margin-block-start:var(--s3);text-align:end}
[data-theme="TH-12"] .ds-eyebrow{color:var(--color-accent)}
[data-theme="TH-12"] .ds-eyebrow::before{background:var(--color-accent)}
@media (max-width:599px){[data-theme="TH-12"] .sg-panel{max-inline-size:none;margin-inline:var(--s3)}}
[data-theme="TH-07"] .sg .sg-news time{color:var(--color-base)}
/* ---- 反証のレビュー 2 周目の直し ---- */
/* 近接：節の見出し→導入の文 16px */
.sg .ds-sechead .ds-sechead__lead{margin-block-start:var(--s3)}
/* 整列：手順の説明は列の幅いっぱいで折る */
.sg .ds-step p{max-inline-size:none}
/* 料金の目安：区切り線は箱の内幅いっぱい */
.sg-est__out{max-inline-size:none}
/* 外側の帯のボタンは、テーマの大きさに関係なく同じ寸法 */
[data-theme] .cat-bar .ds-btn{min-block-size:40px;font-size:14px;padding:var(--spacing-scale-2) var(--spacing-scale-3)}
[data-theme] .cat-order .ds-btn--lg{min-block-size:52px;font-size:1rem}
/* TH-08：見出しの下の線→導入の文 16px */

/* TH-10：節の見出しを一段大きく */
[data-theme="TH-10"] .ds-sechead h2{font-size:2rem}
/* TH-11：判子は写真の上の角（注記に重ねない）。PC は縦書きの見出しを文の列の隣に */
[data-theme="TH-11"] .sg-seal{inset-block-end:auto;inset-block-start:var(--s3)}
@media (min-width:900px){[data-theme="TH-11"] .sg-hero--vertical .sg-hero__grid{grid-template-columns:auto 5fr 6fr}
  [data-theme="TH-11"] .sg-hero--vertical .sg-h1{grid-column:1}
  [data-theme="TH-11"] .sg-hero--vertical .sg-hero__text{grid-column:2}}
/* 外側の帯：説明の文は幅いっぱい、依頼のボタンは右端（本体の右端とそろえる） */
.cat-bar p.cat-bar__now{max-inline-size:none}
.cat-bar__cta{margin-inline-start:auto}
.cat-order__eyebrow{font-size:14px;color:#E0E0E0}
/* 小さな文字は本文の色（大きさで段をつける。薄い灰色にしない） */
.sg .sg-price__desc,.sg .sg-cap,.sg .smp-info dd{color:var(--color-text)}
/* TH-01：白い地に重なる案内の面に、細い線を足して写真から浮かせる */
[data-theme="TH-01"] .sg-hero__panel{box-shadow:0 0 0 1px var(--color-border)}
/* TH-03：FV の行の空きを、下の節（写真と文）と同じに */
@media (min-width:900px){[data-theme="TH-03"] .sg-hero__row{gap:var(--s7)}}
/* TH-06：点線の枠は写真の大きさだけ（注記に重ねない） */
[data-theme="TH-06"] .sg-hero__media::after{inset:auto;inset-block-start:calc(var(--spacing-scale-3) * -1);inset-inline-start:calc(var(--spacing-scale-3) * -1);inline-size:100%;aspect-ratio:1}
/* ---- 反証のレビュー 3 周目の直し ---- */
/* 料金は折らない（text-wrap:pretty が nowrap を上書きしていた） */
.sg .sg-price dd,.sg .sg-est__p{text-wrap:nowrap;white-space:nowrap}
.sg p.sg-est__out{max-inline-size:none}
/* 末尾の案内：テキストのリンクは左の余白 0、見出しのまわりの空き、店のフッターとの境目 */
.cat-order{border-block-start:1px solid #3A3A3A}
.cat-order .ds-btn--text{padding-inline:0}
.cat-order h2{margin-block-start:var(--spacing-scale-2)!important}
.cat-order h2 + p{margin-block-start:var(--spacing-scale-3)!important}
/* 店のフッター：店名は 1 行の大きさに（2 列の上端をそろえる） */
.sg-footer .ds-footer__cols{align-items:start}
.sg-footer .ds-footer__cols h3{font-size:var(--typography-size-body)}
/* TH-01：案内の面→お知らせ */
[data-theme="TH-01"] .sg-news{margin-block-start:var(--s6)}
/* TH-02：欧文の店名は見出しより小さく（主役は見出し 1 つ） */
[data-theme="TH-02"] .sg-en{font-size:clamp(1.75rem,5vw,3rem)}
/* TH-03：スマホでは円を出さない（端の断片にしない） */
@media (max-width:599px){[data-theme="TH-03"] .sg-orb{display:none}}
/* TH-06：スマホの点線の枠は余白の線の内側に */
@media (max-width:599px){[data-theme="TH-06"] .sg-hero__media::after{inset-block-start:calc(var(--spacing-scale-2) * -1);inset-inline-start:calc(var(--spacing-scale-2) * -1)}}
/* ---- 3 周目の残り（TH-07〜12） ---- */
/* TH-08：見出しの下の線は ds.css の罫線 1 本だけ（太さは 8px の段階に） */
[data-theme="TH-08"] .ds-sechead h2{border-block-end-width:8px}
/* 料金の目安：選択肢の左右の内側を 0 にして、見出し・合計と左端をそろえる */
.sg-est__opt{padding-inline:0}
/* TH-10：ヘッダーのボタンはヘッダーの高さに合わせる。時間の枠は細い線にして、主ボタンと競わせない */
[data-theme="TH-10"] .ds-nav__cta{min-block-size:44px;font-size:1rem}
[data-theme="TH-10"] .sg-req{border:1px solid var(--color-border);background:var(--color-surface)}
/* TH-12：写真の注記は左寄せ */
[data-theme="TH-12"] .sg-device > .sg-cap{text-align:start}
/* 判子は縦書きなので、論理方向ではなく上・右で置く */
[data-theme="TH-11"] .sg-seal{inset:auto;top:var(--s3);right:var(--s3)}
/* ---- 「もしも」の点検（design-os docs/design_layers.md §1.7） ---- */
/* 区切りの無い長い語（URL・型番）も箱の端で折る */
.sg{overflow-wrap:break-word}  /* anywhere は最小幅を縮め、グリッドの見出しを細かく折ってしまう（TH-07）。break-word は箱の端でだけ折る */
/* ナビは折り返さない：768〜1023px はメニューの開閉にまとめ、1024px 以上で横に並べる */
.sg .ds-nav__list a{white-space:nowrap}
@media (min-width:768px) and (max-width:1023px){.sg .ds-nav__list,.sg .ds-nav__cta{display:none}.sg .ds-nav__m{display:block}}