/* 撮影なし動画パッケージ LP — スタイル
   方針: LP_デザイン方針_2026-10.md（主役は映像、UI は暗転した上映室）
   色はトークンだけを使う。動かすのは transform と opacity だけ。スマホを基準に min-width で広げる */

/* ---------- 書体（ヒラギノ W3/W6 を 400/700 に割り当て、偽ボールドを防ぐ） ---------- */
@font-face { font-family: "PT JP"; font-weight: 400; font-display: swap;
  src: local("Hiragino Kaku Gothic ProN W3"), local("HiraKakuProN-W3"), local("ヒラギノ角ゴ ProN W3"); }
@font-face { font-family: "PT JP"; font-weight: 700; font-display: swap;
  src: local("Hiragino Kaku Gothic ProN W6"), local("HiraKakuProN-W6"), local("ヒラギノ角ゴ ProN W6"); }

/* ---------- トークン（§3.7） ---------- */
:root {
  color-scheme: dark;
  --c-bg:#111111; --c-surface-1:#171717; --c-surface-2:#1F1F1F; --c-surface-3:#262626;
  --c-line:#2A2A2A; --c-line-strong:#767676;
  --c-text:#F2F0EB; --c-text-2:#CCCCCC; --c-text-3:#9A9892;
  --c-accent:#C9A227; --c-accent-hover:#D6B43F; --c-accent-ink:#111111;
  --c-steel:#8FA3B3; --c-danger:#F28B82; --c-success:#81C995;
  --scrim: linear-gradient(180deg, rgba(17,17,17,.62) 0%, rgba(17,17,17,.46) 16%, rgba(17,17,17,.55) 42%, rgba(17,17,17,.94) 100%); /* 上端を .30→.62（ヘッダーの文字のコントラスト。レビュー #2） */
  --scrim-sp: linear-gradient(180deg, rgba(17,17,17,.62) 0%, rgba(17,17,17,.6) 18%, rgba(17,17,17,.7) 40%, rgba(17,17,17,.94) 100%); /* スマホは文字が画面の大半に乗るので、中ほども .68 以上（いちばん明るいコマでもリード 4.5:1） */
  --ff-jp:"PT JP","Noto Sans JP","Hiragino Sans","Yu Gothic UI",Meiryo,sans-serif;
  --ff-display:"Instrument Serif","Times New Roman",serif;
  --ff-mono:"Geist Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
  --fs-display:clamp(2.125rem,1.4rem + 3vw,4rem);
  --fs-h2:clamp(1.5rem,1.15rem + 1.45vw,2.5rem);
  --fs-h3:clamp(1.125rem,1rem + .5vw,1.375rem);
  --fs-lead:clamp(1.0625rem,.95rem + .5vw,1.25rem);
  --fs-body:clamp(1rem,.96rem + .12vw,1.0625rem);
  --fs-small:.875rem; --fs-caption:.8125rem; --fs-eyebrow:.75rem;
  --fs-price:clamp(2.75rem,2rem + 3vw,4rem); --fs-stat:clamp(2.5rem,1.8rem + 2.6vw,3.5rem);
  --lh-body:1.75; --lh-h2:1.45; --lh-h3:1.5; --lh-display:1.3;
  --ls-body:.04em; --ls-heading:.02em; --ls-display:.01em; --ls-eyebrow:.16em;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  --section-y:clamp(4.5rem,2.5rem + 7vw,10rem); --gutter:clamp(1rem,3.5vw,3rem);
  --container:1200px; --prose:36em;
  --hero-max:1920px; /* ヒーロー（NO CAMERA.）とヘッダーの最大幅。1920 までの画面では語が左右の余白いっぱいに広がる（本文は --container） */
  --r:8px; --r-pill:999px;
  --shadow-float:0 -8px 32px rgba(0,0,0,.5); --shadow-modal:0 24px 64px rgba(0,0,0,.6);
  --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:600ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-standard:cubic-bezier(.2,0,0,1);
  --header-h:56px; --sticky-h:72px; --rise:12px;
  --menu-pull:10px; /* メニューボタン（44px）を右へ寄せる負の余白（アイコンの右端を本文の右端にそろえる）。隠れた「無料見積り」の位置の計算にも使う */
  /* 枠（パネル）と差し色（2026-10-02 ユーザーの指示・4回目＋参考画像「金の細い枠に、右上から薄く金がにじむ」。方針 §3.1 の改訂）
     金の「塗り」は主 CTA（.btn-primary）と再生ボタン（.btn-play）だけ。金の細い枠・ラベル・アイコン・数字の単位は差し色として使ってよいが、1画面で主役の1〜2か所まで */
  --gold-line:rgba(201,162,39,.55);       /* 主役の枠（1px） */
  --gold-line-soft:rgba(201,162,39,.3);   /* アイコンの枠・主役の枠の中の区切り線 */
  --gold-glow:rgba(201,162,39,.17);       /* 主役の枠の右上ににじむ金（グラデーションの頂点。いちばん明るい所でも本文 #BDBBB5 は 6.5:1・金のラベルは 5.1:1 以上） */
  --gold-tint:rgba(201,162,39,.1);        /* アイコンの枠の面 */
  --panel:rgba(255,255,255,.022);         /* 枠の面（地 #111 → 約 #161616、帯 #171717 → 約 #1C1C1C） */
  --panel-line:rgba(255,255,255,.11);     /* 脇役の枠（灰色の細線） */
  --panel-glow:radial-gradient(130% 100% at 100% 0%, var(--gold-glow) 0%, rgba(201,162,39,.055) 36%, rgba(201,162,39,0) 66%);
  --r-panel:12px;                          /* 枠の角丸（モーダルと同じ 12px。カード・入力欄は 8px のまま） */
  --c-text-body:#BDBBB5;                   /* 枠の中の本文（text-2 より一段控えめ。枠の面 #1C1C1C の上で 8.9:1） */
  --fs-panel-title:clamp(1.3125rem, 1.16rem + .6vw, 1.625rem);  /* 枠の見出し: SP 21px → PC 1280 で 26px（上限 26px） */
  --fs-panel-title-sm:clamp(1.1875rem, 1.1rem + .3vw, 1.375rem); /* 脇役の枠の見出し: SP 19px → PC 22px */
  --fs-panel-body:clamp(.9375rem, .9rem + .1vw, 1rem);           /* 枠の本文: SP 15px → PC 16px（行送り 1.85） */
  --fs-panel-label:.8125rem;               /* 枠のラベル 13px（字間 .14em） */
  --fs-fact:clamp(2.25rem, 1.88rem + 1.52vw, 3.25rem);            /* 要点の数字（7営業日・2回 など）SP 36px → PC 1440 で 52px（rev04 レビュー修正: SP 40 → 36px） */
}
@media (min-width:1024px) { :root { --header-h:72px; --lh-display:1.22; --rise:16px; } }

/* ---------- 土台 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--c-bg); scroll-padding-top: calc(var(--header-h) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
@media (max-width:1023px) { html { scroll-padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom) + 16px); } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--c-bg); color: var(--c-text);
  font: 400 var(--fs-body)/var(--lh-body) var(--ff-jp); letter-spacing: var(--ls-body);
  font-synthesis: none; line-break: strict; text-autospace: normal; overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .25em; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, .h2, .h3, .btn, .label-jp, .field-label, .q-label, legend { font-weight: 700; font-feature-settings: "palt" 1; }
h1, h2, h3, .h2, .h3 { text-wrap: balance; word-break: auto-phrase; }
p, li, dd { text-wrap: pretty; }
strong, b { font-weight: 700; }
.ph { display: inline-block; }
.nowrap { white-space: nowrap; }
/* 読ませる文章は文節の途中で折り返さない（2026-10-02 ユーザーの指摘「06 FILMS の説明が『構／成』『ご／依頼』と割れる」）:
   ビルドが文節の境目に <wbr> を入れ（build/phrase.mjs の prose）、ここで keep-all。かな・漢字・英数字が続く所では折り返さず、
   <wbr>・空白・約物（、。）など）の所でだけ折り返す。iPhone の Safari は auto-phrase が効かないので CSS だけに頼らない（keep-all と <wbr> は効く）。
   画面より長い語だけは overflow-wrap: anywhere で折る。最後の行に1〜3文字だけ残るのは、ビルドが最後の短い文節の前の境目を外して防ぐ（＋text-wrap: pretty）。
   概算の結果は JS が書き直すが、文言はビルドが作った <wbr> 入りの HTML を使う（js/estimator-view.js）。
   「条件を細かく指定する」の要約とフォームの概算の要約は、JS が書く文も「／」「：」「・」「、」や空白で切れる短い語の並びなので keep-all のまま
   （最初の文はビルドの <wbr> 入り）。JS が後から書くフォームのエラー・送信の状態と、入力欄は <wbr> が無いので、ふつうの折り返しに戻す */
.bx { word-break: keep-all; overflow-wrap: anywhere; }
.bx :is(.form-errors, .field-error, .form-status, input, textarea, select) { word-break: normal; } /* 入力欄はお客様が打つ文なので、ふつうの折り返し */
.bx :is(dt, th, td, summary, blockquote, label, legend) { text-wrap: pretty; }
/* textarea の placeholder（読ませる例文）は、ビルドが文節の境目にゼロ幅スペース（&#8203;）を入れているので keep-all（2026-10-02 レビュー「60秒く／らい」）。
   お客様が打ち始めたら（placeholder が消えたら）ふつうの折り返しに戻る。::placeholder に効かないブラウザ向けに :placeholder-shown でも指定 */
.bx textarea:placeholder-shown, .bx textarea::placeholder { word-break: keep-all; overflow-wrap: anywhere; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
::selection { background: rgba(201,162,39,.35); color: var(--c-text); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--c-text); color: var(--c-bg); padding: 10px 16px; border-radius: var(--r-pill); font-weight: 700; } /* 2026-10-02（4回目）: 金の塗りは主 CTA と再生ボタンだけにしたので、白の面に */
.skip-link:focus { top: 12px; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.container.narrow { max-width: calc(760px + var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.surface-1 { background: var(--c-surface-1); } /* 2026-10-02 rev05 から節には使わない（節の地は下の .band） */

/* ---------- 節の帯（地の色）（2026-10-02 ユーザーの指示・5回目「セクション変わりの背景色を、もう少し分かりやすく。今、何の話をしているのかを分かりやすく」） ----------
   変更前は #111（地）↔ #171717（surface-1）の交互で、相対輝度の比 1.05・明度（L*）の差 2.7。しかも比較 → FAQ → 問い合わせ → 会社概要は同じ #111 が続いていた。
   いまは隣り合う節が必ず「黒 ↔ 明るい帯」で切り替わる（比 1.264・L* の差 10.6。build.mjs の BAND と整合チェック）:
     ink  #111111 … ページの地。サンプル（上映室）・3つの約束と比較（金の枠が主役）・料金とフォーム（面の多い節）
     char #272727 … 明るめのチャコール（無彩色）。制作体制・ご依頼の流れ・概算・よくある質問・会社概要
   2026-10-02 レビュー修正: 温かいチャコール（warm #2B2720。制作体制・会社概要）はやめた（全幅だと茶色・オリーブ色に見え、金の枠と色相が近く主役の枠が沈む）。
   旧版は _old/rev05_before/review_fix_before/style.css。明るい帯は char の1色（無彩色の上なら金の枠が色相の差でも締まる）。
   明るい帯の中では、カード・入力欄・線・控えめの文字の色（--c-surface-*・--c-line*・--c-text-3 など）を帯に合わせて置き直す
   （黒の上の値のままだと、#1F1F1F のカードが帯より暗く沈み、#2A2A2A の線が消え、控えめの文字が AA を割るため）。
   節の上の端には細い明るい線（--band-edge）を1本。グラデーションは使わない（暗い大きな面のグラデーションは段がつきやすい） */
:root {
  --band-ink:#111111; --band-char:#272727; --band-deep:#0B0B0B;
}
.band { background: var(--band-bg, var(--c-bg)); box-shadow: inset 0 1px 0 var(--band-edge, transparent); scroll-margin-top: -16px; }
/* ↑ メニュー・ナビ・#〜 で節へ飛んだとき、節の上の端をヘッダーのすぐ下にそろえる（html の scroll-padding-top＝ヘッダー＋16px のままだと、
   前の節の帯が 16px だけヘッダーの下に残って見える。節の中の部品へのフォーカス・ジャンプは今までどおり 16px 空く） */
/* 2026-10-02 レビュー修正: PC は帯の上の余白を 104px まで（--section-y は PC 1280 で 130px・1440 で 141px）。境目が画面の中ほどに来ても、
   境目と章の見出しが同じ視野に入る（見出しを自分の帯の端に寄せる）。下の余白は今までどおり。スマホ（64〜72px）・タブレットは変わらない */
.band { padding-top: min(var(--section-y), 6.5rem); }
.band--ink { --band-bg: var(--band-ink); --band-edge: rgba(255,255,255,.06); }
.band--char {
  --band-bg: var(--band-char);
  --band-edge: rgba(255,255,255,.07);
  --c-surface-1:#2D2D2D; --c-surface-2:#323232; --c-surface-3:#3B3B3B;
  --c-line:#3A3A3A;                     /* 区切りの細線（帯 #272727 の上で 1.3:1。飾り） */
  --c-line-strong:#8A8A8A;              /* 入力欄・副ボタンの枠（明るい帯のカード #323232 の上で 3.7:1、入力欄 #2D2D2D の上で 4.0:1） */
  --c-text-3:#A8A6A0;                   /* 注記（カード #323232 の上で 5.3:1。#9A9892 のままだと 4.4:1） */
  --c-text-body:#C6C4BE;                /* 枠の中の本文 */
  --c-steel:#9DB0BF;                    /* 英字ラベル・アイコン・章の番号（枠のにじみの上でも 4.5:1 以上） */
  --panel:rgba(255,255,255,.03);        /* 枠の面（帯より一段明るく浮かせる） */
  --panel-line:rgba(255,255,255,.13);   /* 脇役の枠 */
  /* 主役の枠（制作体制の「人の仕事」）: 黒の上より地が明るいぶん、金の線を 55 → 62% にして線の締まりを黒の上（地に対して 3.1:1）にそろえ、
     にじみは 17% のままだと金のラベルがにじみの頂点で 4.2:1 に落ちるので 13%（頂点でも 4.5:1。レビュー修正前の 11% から戻した） */
  --gold-line:rgba(201,162,39,.62);
  --gold-glow:rgba(201,162,39,.13);
  --panel-glow:radial-gradient(130% 100% at 100% 0%, var(--gold-glow) 0%, rgba(201,162,39,.05) 36%, rgba(201,162,39,0) 66%);
}
.band--char .btn-secondary { background: rgba(255,255,255,.03); } /* 黒の上の rgba(17,17,17,.2) のままだと、明るい帯の上で沈む */

/* ---------- 章の見出し（2026-10-02 rev05）: 節の頭に「番号・和文・英字」を同じ形で（例: 04 ご依頼の流れ  HOW IT WORKS） ----------
   上に細い罫線（帯の幅いっぱい＝本文の幅）と、番号の上だけ短い太線。和文は太字（主役）、番号と英字は等幅のスチール（旧 .eyebrow と同じ）。
   金は使わない（金の細い枠・ラベルは各画面の主役だけ）。読み上げは h2 の頭の「章の名前：」（見た目は隠す）が受け持つので、この行は aria-hidden。
   2026-10-02 レビュー修正:
   - 番号は欧文セリフ（SP 26px・PC 44px）→ 等幅のスチール（SP 14px・PC 16px・字間を広く）。手順の「01 02 03」（欧文セリフ 44px）や約束の統計の数字と
     同じ書体・同じ大きさで並ばないように（スマホでは章の番号のほうが小さく、上下が逆に見えていた）。方針 §3.2「Instrument Serif は 28px 未満で使わない」にも合わせた。
     ヘッダーの「いまの節」（等幅のスチール＋太字の和文）と同じ形
   - 英字は行の右端ではなく和文のすぐ後ろ（PC で 1,000px 離れて読まれなかった）。入りきらない幅では次の行に折り返す
   - 和文が h2 と同じ節（よくある質問・会社概要）は、h2 そのものが和文の位置に入る（.chapter--title。大きな h2 の行は出さない） */
.chapter { --chapter-rule: rgba(255,255,255,.16); position: relative; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 4px;
  margin: 0 0 var(--sp-5); padding-top: 12px; border-top: 1px solid var(--chapter-rule); }
.chapter::before { content: ""; position: absolute; left: 0; top: -1px; width: 40px; height: 2px; background: var(--c-text); }
.chapter-no { font: 400 .875rem/1 var(--ff-mono); letter-spacing: .12em; color: var(--c-steel); font-variant-numeric: tabular-nums; }
.chapter-name { margin: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.4; letter-spacing: .1em; color: var(--c-text); white-space: nowrap; font-feature-settings: "palt" 1; }
.chapter-en { font: 400 var(--fs-eyebrow)/1.4 var(--ff-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c-steel); white-space: nowrap; }
.grid > .chapter { grid-column: 1 / -1; margin-bottom: calc(var(--sp-5) - var(--sp-7)); } /* 節の中身が grid のとき（よくある質問・問い合わせ）。行の間（48px）を差し引いて、ほかの節と同じ 24px に */
@media (min-width:600px) { .chapter-en { letter-spacing: var(--ls-eyebrow); } }
@media (min-width:1024px) {
  .chapter { column-gap: 20px; padding-top: 16px; margin-bottom: var(--sp-7); }
  .chapter::before { width: 56px; }
  .chapter-no { font-size: 1rem; letter-spacing: .16em; }
  .chapter-name { font-size: 1.25rem; }
  .chapter-en { margin-left: 4px; }
  .grid > .chapter { margin-bottom: 0; }
}
/* サンプルの節（ヒーローのすぐ次）は、#samples に飛んだ直後の1画面に最初のサムネイルが入るよう（§14・§14.2 の目安: 390×664 で 50%・375×553 で 30% 以上）、
   章の見出しの下と、PC の節の上の余白を詰める（章の見出しの分だけ高くなったのを戻す。スマホの節の上の余白 16px は変えない）。
   2026-10-02 レビュー修正: 章の番号が小さくなって章の見出しの行が低くなったぶん、スマホの章の見出しと h2 の間を 8 → 12px に */
.samples-sec .chapter { margin-bottom: var(--sp-3); }
@media (min-width:600px) { .samples-sec .chapter { margin-bottom: var(--sp-4); } }
@media (min-width:1024px) { .samples-sec .chapter { margin-bottom: var(--sp-5); } }
.grid { display: grid; gap: var(--sp-7); }
@media (min-width:1024px) {
  .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--sp-7); }
  .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; }
}

/* ---------- 文字の部品 ---------- */
.eyebrow { font: 400 var(--fs-eyebrow)/1.4 var(--ff-mono); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--c-steel); }
.h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-heading); }
.h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-heading); }
.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--c-text-2); max-width: var(--prose); }
.caption { font-size: var(--fs-caption); line-height: 1.6; color: var(--c-text-3); }
.caption a, .caption-link { color: var(--c-text-3); }
.mono-meta { font: 400 .75rem/1.5 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); }
.num-serif { font: 400 var(--fs-stat)/1 var(--ff-display); letter-spacing: -.01em; color: var(--c-text-3); }
.label-gold { display: inline-block; font-size: var(--fs-caption); font-weight: 700; line-height: 1.5; letter-spacing: .08em; color: var(--c-accent); font-feature-settings: "palt" 1; }
.label-quiet { font-size: var(--fs-caption); color: var(--c-text-3); letter-spacing: .08em; }
.mini-title { font-size: var(--fs-small); font-weight: 700; color: var(--c-text-2); margin-top: var(--sp-4); margin-bottom: var(--sp-2); font-feature-settings: "palt" 1; }
.mini-title:first-child { margin-top: 0; }
.sec-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-7); }
.sec-head .h2 { max-width: 20em; }
@media (min-width:1024px) { .sec-head { gap: var(--sp-4); margin-bottom: var(--sp-8); } }

.price { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 4px; line-height: 1; }
.price-num { font: 400 var(--fs-price)/1 var(--ff-display); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.price-unit { font-size: calc(var(--fs-price) * .4); font-weight: 700; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.price-tax { font-size: var(--fs-caption); color: var(--c-text-3); margin-left: 6px; }
.price-sm .price-num { font-size: 2.5rem; }
.price-sm .price-unit { font-size: 1rem; }

.dash-list > li { position: relative; padding: var(--sp-4) 0 var(--sp-4) 2em; border-top: 1px solid var(--c-line); }
.dash-list > li:last-child { border-bottom: 1px solid var(--c-line); }
.dash-list > li::before { content: ""; position: absolute; left: 0; top: calc(var(--sp-4) + .875em); width: 1em; height: 1px; background: var(--c-steel); }
.dash-sm > li { padding-block: var(--sp-3); font-size: var(--fs-body); }
.dash-sm > li::before { top: calc(var(--sp-3) + .82em); }
.dot-list > li { position: relative; padding-left: 1.1em; }
.dot-list > li + li { margin-top: 4px; }
.dot-list > li::before { content: ""; position: absolute; left: .15em; top: .8em; width: 4px; height: 4px; border-radius: 50%; background: var(--c-steel); }
.check-list > li { position: relative; padding: 10px 0 10px 1.9em; border-top: 1px solid var(--c-line); }
.check-list > li:last-child { border-bottom: 1px solid var(--c-line); }
.check-list > li::before { content: ""; position: absolute; left: .2em; top: 1.05em; width: .8em; height: .42em; border-left: 1.5px solid var(--c-steel); border-bottom: 1.5px solid var(--c-steel); transform: rotate(-45deg); }

/* ---------- 枠（パネル）の共通部品（2026-10-02 ユーザーの指示・4回目＋参考画像 design_research/ref_gold_frame_2026-10-02.png） ----------
   .panel          … 灰色の細い枠（脇役。AI がやること・PROFILE・ご依頼の流れ・このあとの流れ・会社概要）
   .panel--accent  … 金の細い枠＋右上から薄くにじむ金（その画面の主役だけ。3つの約束の3枚・人が確かめること）。1画面に主役は1〜2か所まで
   中の並び: .panel-head（.panel-icon＝角丸のアイコン枠＋.panel-label＝小さなラベル）→ .panel-title（大きく太い）→ .panel-text（小さめ・行間広め・控えめの色）
   グラデーションは CSS の radial-gradient だけ（画像なし）。金の塗りは使わない。動かさない（影・光る縁も付けない） */
.panel { position: relative; border: 1px solid var(--panel-line); border-radius: var(--r-panel); background: var(--panel); padding: 22px 20px; }
@media (min-width:600px) { .panel { padding: 28px; } }
@media (min-width:1024px) { .panel { padding: var(--sp-6); } }
.panel--accent { border-color: var(--gold-line); background: var(--panel-glow), var(--panel); }
.panel-head { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.panel-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--panel-line); background: rgba(255,255,255,.03); }
.panel-icon .icon-line { width: 20px; height: 20px; }
.panel--accent .panel-icon { border-color: var(--gold-line-soft); background: linear-gradient(180deg, var(--gold-tint), rgba(201,162,39,.03)); }
.panel--accent .panel-icon .icon-line { stroke: var(--c-accent); }
.panel-label { font-size: var(--fs-panel-label); font-weight: 700; line-height: 1.5; letter-spacing: .14em; color: var(--c-text-3); font-feature-settings: "palt" 1; }
.panel--accent .panel-label { color: var(--c-accent); }
.panel-label-no { font: 400 .75rem/1 var(--ff-mono); letter-spacing: .08em; margin-right: .75em; }
.panel-title { font-size: var(--fs-panel-title); line-height: 1.45; font-weight: 700; letter-spacing: var(--ls-heading); color: var(--c-text); font-feature-settings: "palt" 1; text-wrap: balance; }
.panel-title--sm { font-size: var(--fs-panel-title-sm); line-height: 1.5; }
.panel-text { font-size: var(--fs-panel-body); line-height: 1.85; color: var(--c-text-body); }

/* ---------- ボタン ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; padding: 0 22px; border-radius: var(--r-pill); border: 1px solid transparent;
  font-size: 1rem; line-height: 1.3; letter-spacing: .04em; text-decoration: none; text-align: center;
  transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard), color var(--dur-2) var(--ease-standard), transform var(--dur-1) var(--ease-standard);
  -webkit-tap-highlight-color: transparent; background: none;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--c-accent); color: var(--c-accent-ink); }
.btn-secondary { border-color: var(--c-line-strong); color: var(--c-text); background: rgba(17,17,17,.2); }
.btn-ghost { color: var(--c-text-2); padding-inline: 12px; text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: .3em; }
.btn-lg { min-height: 56px; padding: 0 28px; }
.btn-sm { min-height: 44px; padding: 0 18px; font-size: .9375rem; }
.btn-block { display: flex; width: 100%; }
.btn .icon { width: 14px; height: 14px; }
.btn-label { display: inline; text-wrap: balance; }
.btn-block { padding-block: 8px; }
.icon-arrow { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--dur-2) var(--ease-standard); flex: none; }
.icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.icon-line { width: 24px; height: 24px; fill: none; stroke: var(--c-steel); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.link-btn { background: none; border: 0; padding: 10px 0; color: var(--c-text-3); text-decoration: underline; text-underline-offset: .3em; font-size: var(--fs-caption); min-height: 44px; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--c-accent-hover); }
  .btn-primary:hover .icon-arrow { transform: translateX(4px); }
  .btn-secondary:hover { border-color: var(--c-text); background: var(--c-surface-3); }
  .btn-ghost:hover, .link-btn:hover { color: var(--c-text); text-decoration-color: var(--c-text); }
  a:hover { text-decoration-thickness: 2px; }
}

/* ---------- ヘッダー（§4.4） ---------- */
.site-header { position: fixed; inset: 0 0 auto; z-index: 40; height: var(--header-h); transition: background-color var(--dur-2) var(--ease-standard), border-color var(--dur-2) var(--ease-standard); border-bottom: 1px solid transparent; }
.site-header.is-scrolled, .site-header.is-solid { background: var(--c-bg); border-bottom-color: var(--c-line); } /* 不透明（下の文字が透けないように。レビュー #7） */
.header-inner { height: 100%; display: flex; align-items: center; gap: var(--sp-5); }
/* ヘッダーはヒーローと同じ幅（ロゴと「NO」、「無料見積り」と句点の右端がそろう。本文の 1200px より広い） */
.site-header .container { max-width: calc(var(--hero-max) + var(--gutter) * 2); }
.logo { font: 500 .875rem/1 var(--ff-mono); letter-spacing: .32em; color: var(--c-text); text-decoration: none; padding: 14px 0; margin-right: auto; }
.nav { display: none; }
.btn-header { min-height: 36px; padding: 0 16px; font-size: .875rem; position: relative; }
.btn-header::after { content: ""; position: absolute; inset: -4px -2px; }
/* SP・タブレット: 固定 CTA や本文の金のボタンが見えている間は隠す（同じ画面に金は1つ。main.js が .cta-hidden を付ける） */
@media (max-width:1023px) {
  .btn-header { transition: opacity var(--dur-2) var(--ease-standard), visibility 0s linear 0s; }
  .js .site-header.cta-hidden .btn-header { opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-2); }
}
@media (min-width:1024px) {
  .nav { display: block; }
  .nav ul { display: flex; gap: var(--sp-5); }
  .nav a { display: block; padding: 12px 0; font-size: var(--fs-small); color: var(--c-text-2); text-decoration: none; position: relative; }
  .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--c-text); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-2) var(--ease-out); }
  .nav a[aria-current="true"] { color: var(--c-text); }
  .nav a[aria-current="true"]::after { transform: scaleX(1); }
  .btn-header { min-height: 40px; padding: 0 20px; }
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--c-text); } }
/* ヘッダーの「いまの節」（2026-10-02 rev05。スマホ・タブレット＝PC のナビが出ない 1023px 以下だけ）:
   ロゴの右に細い縦線と「04 ご依頼の流れ」を小さく。main.js が節の data-chapter・data-chapter-name を書く（画面の 45〜50% の高さの線にかかった節）。
   ヒーローの間は出さない。JS が無いときは出さない（空のまま隠す）。文字が替わるだけで動かさない（出入りは不透明度 0.2 秒だけ。動きを減らす設定では即時）。
   読み上げは節の見出しが受け持つので aria-hidden。599px 以下でヘッダーの「無料見積り」が出ている間は、番号を隠して名前だけ（幅が足りないとき） */
.here { display: none; }
@media (max-width:1023px) {
  .js .here { display: flex; align-items: baseline; gap: 6px; min-width: 0; margin: 0 auto 0 0; padding: 2px 0 2px 10px; border-left: 1px solid var(--c-line-strong);
    white-space: nowrap; overflow: hidden; opacity: 0; visibility: hidden; transition: opacity var(--dur-2) var(--ease-standard), visibility 0s linear var(--dur-2); }
  .js .here[data-on] { opacity: 1; visibility: visible; transition: opacity var(--dur-2) var(--ease-standard), visibility 0s; }
  .js .site-header .logo:has(+ .here) { margin-right: 0; flex: none; white-space: nowrap; } /* ロゴは縮めない・折り返さない（「PARTOU／T」にしない） */
  /* 隠れている「無料見積り」（.cta-hidden）は場所を取らない（ロゴの右の「いまの節」に幅を回す）。消える間も同じ位置のまま薄くなる。
     2026-10-02 レビュー修正: 右からの位置＝余白＋メニューボタン 44px − メニューボタンの負の右余白（--menu-pull 10px）＋間 8px。
     負の右余白を入れていなかったので、消える 0.2 秒の間にボタンが 10px 左へ跳んでいた（qa_rev05_fix/report_ctajump.json で、出ている間と消える途中の位置が同じ） */
  .header-inner { position: relative; }
  .js .site-header.cta-hidden .btn-header { position: absolute; top: 50%; right: calc(var(--gutter) + 44px - var(--menu-pull) + var(--sp-2)); translate: 0 -50%; }
  .here-no { flex: none; font: 400 .75rem/1 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); }
  .here-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--fs-caption); font-weight: 700; line-height: 1.3; letter-spacing: .06em; color: var(--c-text-2); font-feature-settings: "palt" 1; }
  .site-header.is-over-reel .here { opacity: 0; visibility: hidden; }
}
/* 599px 以下は番号を出さず名前だけ（2026-10-02 レビュー修正: 「無料見積り」の出入りのたびに番号が出たり消えたりして名前の位置がずれていたので、常に隠す） */
@media (max-width:599px) { .here-no { display: none; } }

/* ---------- ファーストビュー（§6.1）＝試作 B2「NO CAMERA.」（2026-10-01 差し替え。旧版は _old/hero_v1/hero.css） ----------
   1画面目: 「NO CAMERA.」の文字の中にリール＋見出し＋要点＋CTA。スクロールすると「CAMERA.」の句点が全画面のスクリーンに開く
   （開く区間は PC 60svh・SP 45svh）。2画面目: 全画面のリール＋次の一言＋CTA。開ききったあと PC 100svh・SP 160svh そのままとどまってから
   本文へ流れる（2026-10-02。下の html.hero-pin .hero）。
   ヒーローに限って動きの制約を緩めている（スクロールの乗っ取り・プリローダー・ポップアップは使わない。reduced-motion・Save-Data は静止画）。
   表示の型は html の hero-motion / hero-pin / hero-scrub / hero-intro（head の小さなスクリプトが最初の描画の前に付ける）。
   指定は .hero の中に閉じる。例外はヒーローの上にいる間のヘッダー（.site-header.is-over-reel / .is-over-hero。js/hero.js が付ける） */
.hero { position: relative; z-index: 0; background: var(--c-bg); }
.hero .hero__pin { position: relative; }

/* --kw / --kh: 切り抜きの語の大きさ。語の箱・見出しの組み・下の行が、いつもそろうように共有する。--ko-res は語のほかに残す高さ */
.hero .hero__screen {
  --ko-ar: 2.7252; --ko-res: 22rem; --scr-min: 560px;
  --kw: min(100vw - 2 * var(--gutter), var(--hero-max), (max(100vh, var(--scr-min)) - var(--ko-res)) * var(--ko-ar));
  --kh: calc(var(--kw) / var(--ko-ar));
  position: relative; height: 100vh; height: 100svh; min-height: var(--scr-min); overflow: hidden; overflow: clip;
  /* 中の列はヘッダーと同じ幅（--hero-max まで。ロゴと「NO」、ヘッダーの「無料見積り」と句点の右端がそろう）。本文の --container より広い */
  display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--hero-max)) minmax(var(--gutter), 1fr);
  /*                  ヘッダー          余白              語   語との間                   下の行 余白          メタ */
  grid-template-rows: var(--header-h) minmax(12px, 1fr) auto clamp(20px, 3.4vh, 40px) auto minmax(12px, 1fr) auto;
}
@supports (width: 1cqw) and (height: 1svh) {
  .hero .hero__screen { container-type: inline-size;
    --kw: min(100cqw - 2 * var(--gutter), var(--hero-max), (max(100svh, var(--scr-min)) - var(--ko-res)) * var(--ko-ar));
    grid-template-rows: var(--header-h) minmax(12px, 1fr) auto clamp(20px, 3.4svh, 40px) auto minmax(12px, 1fr) auto; }
}
.hero .hero__screen > * { grid-column: 2; }
/* 画面いっぱいの層: grid-area:auto の絶対配置＝パディングを含む箱全体（iOS の lvh の帯まで覆う） */
.hero .hero__screen > .hero__media, .hero .hero__screen > .hero__shade { grid-area: auto; }

.hero .hero__media { position: absolute; inset: 0; z-index: 0; background: var(--c-bg); }
.hero .hero__media picture, .hero .hero__poster, .hero .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
.hero .hero__poster, .hero .hero__video { object-fit: cover; object-position: 50% 50%; }
.hero .hero__video { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.hero .hero__video.is-on { opacity: 1; }
/* 1画面目（文字の中）だけ、映像の暗い所を持ち上げる: 白を 14% 重ねる（黒 → 約 #262625、白はそのまま。ふつうの合成なので軽い）。
   リールは暗めのグレードで、カットによっては文字の一部が #111 の地と見分けにくいため。句点が開くと消え、全画面のリールは元のグレード */
.hero .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: rgb(242,240,235); opacity: .14; }
/* リールの上のヘッダーを読みやすく（2画面目と最初の約2秒） */
.hero .hero__media::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 120px; pointer-events: none;
  background: linear-gradient(180deg, rgba(17,17,17,.62), rgba(17,17,17,0)); }

/* 語: 1本の even-odd のパス（大きな黒い四角から文字を抜いたもの）。.hero__screen で切る */
.hero .hero__ko { position: relative; z-index: 1; grid-row: 3; justify-self: start; width: var(--kw); height: var(--kh); }
.hero .ko { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; overflow: visible; }
.hero .ko--tall { display: none; }
.hero .ko-dive { fill: var(--c-bg); transform-box: view-box; transform-origin: 0 0; }
.hero .ko-dive > path { transition: fill-opacity 1.4s cubic-bezier(.65,0,.35,1); }
.hero .ko-line { fill: none; stroke: rgba(242,240,235,.45); stroke-width: 1px; transition: opacity 1.4s cubic-bezier(.65,0,.35,1); }
/* 読み込み直後: 文字の外にも映像を薄く出し、リールが動き出して約1.4秒後に黒で締める（js/hero.js）。
   4.5秒たっても動かないとき（遅い回線）は、止まった絵を薄く見せ続けずに、すぐ黒にする（hero-intro-cut） */
html.hero-intro .hero .ko-dive > path { fill-opacity: .6; }
html.hero-intro .hero .ko-line { opacity: .75; } /* 薄い映像の上でも文字の形が読めるように、輪郭は少し出しておく */
html.hero-intro-cut .hero .ko-dive > path, html.hero-intro-cut .hero .ko-line { transition-duration: .3s; }

.hero .hero__shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background:
    linear-gradient(180deg, rgba(17,17,17,.6) 0, rgba(17,17,17,0) 180px),
    linear-gradient(90deg, rgba(17,17,17,.6) 0%, rgba(17,17,17,.22) 45%, rgba(17,17,17,0) 70%),
    linear-gradient(0deg, rgba(17,17,17,.96) 0%, rgba(17,17,17,.86) 24%, rgba(17,17,17,.6) 44%, rgba(17,17,17,.18) 68%, rgba(17,17,17,0) 84%); }

/* 見出しは「NO」の右、ベースラインを「NO」にそろえる（PC 2行） */
.hero .hero__title { position: relative; z-index: 3; grid-row: 3; align-self: start; justify-self: start;
  margin: calc(var(--kh) * .4541 + var(--kw) * .003) 0 0 calc(var(--kw) * .3453);
  transform: translateY(-100%);
  font-size: clamp(1.5rem, var(--kw) * .0425, 4rem); line-height: 1.24; letter-spacing: var(--ls-display); text-wrap: nowrap; }

/* 「CAMERA.」の下の行: 左に要点、右（句点の真下）に CTA */
.hero .hero__act { position: relative; z-index: 3; grid-row: 5; justify-self: start; width: var(--kw);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; }
.hero .hero__facts { max-width: 440px; }
.hero .hero__facts-line { display: flex; flex-wrap: wrap; align-items: baseline; font-size: 1.0625rem; font-weight: 700; line-height: 1.25;
  letter-spacing: .04em; font-feature-settings: "palt" 1; }
.hero .hero__fact { white-space: nowrap; }
.hero .hero__num { font-family: var(--ff-display); font-weight: 400; font-size: 2.35em; line-height: 1; letter-spacing: 0; margin-right: .02em; font-variant-numeric: lining-nums; }
.hero .hero__sep { margin: 0 .55em; color: var(--c-text-3); font-weight: 400; }
.hero .hero__launch.campaign-on { display: block; margin-top: 10px; font-size: var(--fs-caption); line-height: 1.6; color: var(--c-text-2); letter-spacing: .04em; }
.hero .hero__launch::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%;
  background: var(--c-text-2); vertical-align: .2em; }
.hero .hero__ctas { display: grid; justify-items: end; gap: 12px; }
.hero .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero .hero__cta .btn { flex: none; }
.hero .hero__micro { font-size: var(--fs-caption); line-height: 1.5; color: var(--c-text-2); }

/* 最下段: SCROLL（左）／リールの情報＋注記＋一時停止（右） */
.hero .hero__meta { position: relative; z-index: 3; grid-row: 7; justify-self: end; align-self: end; padding-bottom: 28px;
  display: grid; grid-template-columns: auto 44px; grid-template-areas: "info pause" "cap pause"; column-gap: 16px;
  align-items: end; text-align: right; }
.hero .hero__reelinfo { grid-area: info; font: 400 .75rem/1.7 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); font-variant-numeric: tabular-nums; }
.hero .hero__reelinfo p { white-space: nowrap; }
.hero .hero__k { color: var(--c-text-3); margin-right: 12px; }
.hero .hero__now-name { font-family: var(--ff-jp); letter-spacing: .04em; margin-left: 12px; color: var(--c-text-2); }
/* NOW の行: いま出ている名前（live）と、全サンプルの名前（sizer・見えない）を同じマスに重ね、行の幅をいちばん長い名前に固定する
   （カットが変わっても、JS が測る前の最初の描画でも、注記や一時停止の位置が動かない） */
.hero .hero__now { display: grid; }
.hero .hero__now > span { grid-area: 1 / 1; }
.hero .hero__now-sizer { visibility: hidden; }
.hero .hero__caption { font-size: var(--fs-caption); line-height: 1.6; color: var(--c-text-3); }
.hero .hero__meta .hero__caption { grid-area: cap; margin-top: 2px; }
.hero .hero__pause { grid-area: pause; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-line-strong);
  background: rgba(17,17,17,.55); color: var(--c-text); display: grid; place-items: center; padding: 0;
  transition: border-color var(--dur-2) var(--ease-standard), background-color var(--dur-2) var(--ease-standard); }
.hero .hero__pause .icon { width: 16px; height: 16px; }
.hero .hero__i-pause, .hero .hero__i-play { display: grid; }
.hero .hero__i-play, .hero .hero__pause[aria-pressed="true"] .hero__i-pause { display: none; }
.hero .hero__pause[aria-pressed="true"] .hero__i-play { display: grid; }
/* タイムコードと一時停止は、リールが動いているときだけ（動きを減らす設定・Save-Data では ▶ だけ） */
.hero .hero__reelinfo, .hero .hero__pause { visibility: hidden; }
.hero.is-reel .hero__reelinfo, .hero.is-reel .hero__pause, .hero.is-manual .hero__pause { visibility: visible; }
@media (hover: hover) and (pointer: fine) { .hero .hero__pause:hover { border-color: var(--c-text); background: var(--c-surface-3); } }

.hero .hero__hint { position: relative; z-index: 3; grid-row: 7; justify-self: start; align-self: end; padding-bottom: 30px;
  display: flex; align-items: center; gap: 14px; font: 400 .75rem/1 var(--ff-mono); letter-spacing: .24em; color: var(--c-text-3); }
.hero .hero__hint-line { width: 56px; height: 1px; background: var(--c-line-strong); }

/* 2画面目: 次の一言＋CTA（html.hero-pin でないときは、1画面目の下のふつうの塊） */
.hero .hero__next { --edge: max(var(--gutter), calc((100% - var(--hero-max)) / 2));
  position: relative; z-index: 5; padding: 48px var(--edge) 72px; background: var(--c-bg); display: grid; justify-items: start; }
.hero .hero__next .eyebrow { margin-bottom: 16px; }
.hero .hero__big { font-size: clamp(1.5rem, 1rem + 1.9vw, 2.75rem); line-height: 1.4; font-weight: 700; letter-spacing: var(--ls-heading);
  font-feature-settings: "palt" 1; max-width: 22em; }
.hero .hero__chips { display: flex; flex-wrap: wrap; margin-top: 18px; font-size: var(--fs-caption); color: var(--c-text-2); }
.hero .hero__chips li + li::before { content: ""; display: inline-block; width: 1px; height: .9em; background: var(--c-line-strong); margin: 0 14px; vertical-align: -.1em; }
.hero .hero__next .hero__cta { margin-top: 28px; }
.hero .hero__next .hero__micro { margin-top: 12px; }
.hero .hero__caption--next { display: none; }
/* とどまりの進み具合の線（2026-10-02 ユーザーの指示）: 句点が開ききった全画面に「とどまる」間だけ、2画面目の左下（一言と CTA の下）で
   細い線が左から伸びる＝まだ先があると分かる。線はスクロールの位置だけで決まる（スクロールは奪わない）。
   ピンが無いとき（動きを減らす設定・横向きのスマホ・JS なし）は出さない。動かし方は下の html.hero-pin の .hero__hold-bar */
.hero .hero__hold { display: none; }
html.hero-pin .hero .hero__hold { display: flex; align-items: center; gap: 14px; margin-top: 26px;
  font: 400 .6875rem/1 var(--ff-mono); letter-spacing: .24em; color: var(--c-text-3); }
.hero .hero__hold-track { position: relative; width: 120px; height: 2px; background: rgba(242,240,235,.2); overflow: hidden; flex: none; }
.hero .hero__hold-bar { position: absolute; inset: 0; background: var(--c-text-2); transform-origin: 0 50%; transform: scaleX(0); }
/* ピンなし（動きを減らす設定・横向きのスマホ・JS なし）では2画面目が1画面目のすぐ下に続くので、CTA は1画面目の1組だけ（金は1画面に1つ） */
html:not(.hero-pin) .hero .hero__next :is(.hero__cta, .hero__micro) { display: none; }

/* 横向きのスマホ（ピンなし）: 画面より高い1画面目を、そのままスクロールする */
@media (min-aspect-ratio: 1/1) and (max-height: 539px) {
  .hero .hero__screen { --scr-min: 620px; --ko-res: 26rem; }
}

/* 縦長（スマホ・縦のタブレット）: 「NO / CAME / RA.」を画面幅いっぱいに3段、その下に見出し・要点・CTA */
@media (max-aspect-ratio: 1/1) {
  .hero .hero__screen {
    --ko-ar: 1.1551; --h1-fs: min(var(--fs-display), 4.1vh); --ko-res: calc(var(--h1-fs) * 3.9 + 19.5rem);
    /*                  ヘッダー          余白               語   間                  見出し 間                 下の行 余白 */
    grid-template-rows: var(--header-h) minmax(10px, .55fr) auto minmax(18px, .45fr) auto minmax(14px, .3fr) auto minmax(16px, 1fr);
    padding-bottom: env(safe-area-inset-bottom); }
  @supports (width: 1cqw) and (height: 1svh) {
    .hero .hero__screen { --h1-fs: min(var(--fs-display), 4.1svh); }
  }
  .hero .ko--wide { display: none; }
  .hero .ko--tall { display: block; }
  .hero .hero__media::after { height: 72px; }
  .hero .hero__shade { background:
    linear-gradient(180deg, rgba(17,17,17,.72) 0, rgba(17,17,17,.45) 130px, rgba(17,17,17,0) 210px),
    linear-gradient(0deg, rgba(17,17,17,.97) 0%, rgba(17,17,17,.9) 30%, rgba(17,17,17,.62) 48%, rgba(17,17,17,.15) 66%, rgba(17,17,17,0) 76%); }
  .hero .hero__title { grid-row: 5; margin: 0; transform: none; font-size: var(--h1-fs); line-height: 1.3; text-wrap: wrap; }
  .hero .hero__title .ph { display: block; }
  .hero .hero__br-wide { display: none; }
  .hero .hero__act { grid-row: 7; justify-self: stretch; width: auto; display: grid; gap: 18px; }
  .hero .hero__facts { max-width: none; }
  .hero .hero__facts-line { font-size: .9375rem; }
  .hero .hero__sep { margin: 0 .4em; }
  .hero .hero__launch.campaign-on { margin-top: 8px; font-size: .75rem; }
  .hero .hero__ctas { justify-items: stretch; gap: 0; }
  .hero .hero__cta { display: grid; gap: 2px; }
  .hero .hero__cta .btn-primary { width: 100%; min-height: 52px; }
  .hero .hero__cta .btn-secondary { border: 0; background: none; min-height: 44px; font-weight: 400; text-decoration: underline;
    text-underline-offset: 5px; text-decoration-color: var(--c-line-strong); }
  .hero .hero__ctas .hero__micro { display: none; }
  .hero .hero__hint { display: none; }
  /* リールの情報と一時停止は「NO」の右、注記は「RA.」の右（句点の隣） */
  .hero .hero__meta { grid-row: 3; justify-self: end; align-self: stretch; padding: 0; width: calc(100% - var(--kw) * .4929 - 14px);
    grid-template-columns: minmax(0, 1fr) 44px; grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "info pause" ". ." "cap cap"; column-gap: 8px; align-items: start; text-align: left; }
  .hero .hero__reelinfo { font-size: .6875rem; line-height: 1.65; padding-top: 3px; }
  .hero .hero__tc .hero__k { display: none; }
  .hero .hero__k { margin-right: 8px; }
  .hero .hero__now-name { display: none; }
  .hero .hero__meta .hero__caption { justify-self: end; align-self: end; width: calc(100% - var(--kw) * .0587); margin: 0;
    font-size: .75rem; line-height: 1.5; letter-spacing: .02em; word-break: keep-all; overflow-wrap: anywhere; }
  .hero .hero__next { padding-top: 32px; }
  .hero .hero__next .eyebrow, .hero .hero__chips { display: none; }
  .hero .hero__big { font-size: 1.375rem; line-height: 1.5; }
  .hero .hero__next .hero__cta { display: grid; width: 100%; margin-top: 20px; }
  .hero .hero__next .hero__micro { margin-top: 2px; }
}
@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .hero .hero__screen { --ko-res: calc(var(--h1-fs) * 3.9 + 21rem); }
  .hero .hero__cta .btn-primary { width: auto; justify-self: start; }
  .hero .hero__cta .btn-secondary { justify-self: start; padding: 0; }
  .hero .hero__next .hero__cta { width: auto; }
}

/* ---------- ピン＋スクロール連動（html.hero-pin） ----------
   iOS Safari: ピンは 100svh（ツールバーが縮んでもレイアウトは動かない）。中の画面は 100lvh で、差（lvh − svh）は下のパディング。
   ツールバーが隠れて出る帯もリールと黒で覆う。ピンより上の要素に overflow:hidden を付けない。
   view-timeline-inset:0 … 既定（auto）はページの scroll-padding-top（ヘッダーの高さ）を使い、区間がずれて始まるため
   ピンで止まる区間（2026-10-02 ユーザーの指示で「とどまり」を足した）:
     句点が開く（PC 60svh・SP 45svh）→ 開ききった全画面＝リール＋次の一言＋CTA のまま、とどまる（PC 100svh・SP 160svh。
     ホイール3ノッチずつで3回・ふつうの速さの慣性スワイプで2〜3回ぶん。SP は慣性で一気に進むので PC より長い。
     2026-10-02 レビュー修正で SP 90→160svh。慣性つきスワイプの実測は qa_rev01_fix/report_inertia.json）→ ピンが外れて本文へ。スクロール量は奪わない（sticky と区間の高さだけ）。動きを減らす設定はピンなし
   変えるときは3か所をそろえる: .hero の高さ（100＋開く＋とどまる）、--hero-range-end（開く ÷（開く＋とどまる））、build.mjs の HERO_BOOT の説明。
   tests/run.mjs がこの3つの数の整合を確かめる */
html.hero-pin .hero { height: 260vh; height: 260svh; --hero-range-end: 37.5%; view-timeline: --hero block; view-timeline-inset: 0px; }
@media (max-aspect-ratio: 1/1) { html.hero-pin .hero { height: 305vh; height: 305svh; --hero-range-end: 21.951%; } }
html.hero-pin .hero .hero__pin { position: sticky; top: 0; height: 100vh; height: 100svh; }
html.hero-pin .hero .hero__screen { position: absolute; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; min-height: 0;
  padding-bottom: calc(100lvh - 100svh); }
@media (max-aspect-ratio: 1/1) {
  html.hero-pin .hero .hero__screen { padding-bottom: calc(100lvh - 100svh + env(safe-area-inset-bottom)); }
}
html.hero-pin .hero .hero__next { position: absolute; z-index: 5; left: var(--edge); right: var(--edge); bottom: clamp(28px, 6svh, 64px);
  padding: 0; background: none; max-width: min(820px, 62%); }
@media (max-aspect-ratio: 1/1) {
  html.hero-pin .hero .hero__next { max-width: none; bottom: calc(14px + env(safe-area-inset-bottom)); }
  html.hero-pin .hero .hero__caption--next { display: block; margin-top: 6px; font-size: .75rem; color: var(--c-text-3); }
  html.hero-pin .hero .hero__hold { margin-top: 14px; }
  .hero .hero__hold-track { width: 96px; }
}

html.hero-pin .hero :is(.hero__title, .hero__act, .hero__hint) { animation-name: hero-fv; }
@media (max-aspect-ratio: 1/1) { html.hero-pin .hero .hero__meta .hero__caption { animation-name: hero-fv; } }
html.hero-pin .hero .hero__shade { animation-name: hero-shade; }
html.hero-pin .hero .hero__next { animation-name: hero-next; }
html.hero-pin .hero .ko { animation-name: hero-ko; }
html.hero-pin .hero .ko-dive { animation-name: hero-dive; }
/* アニメは区間の頭から --hero-range-end まで（句点が開ききる所）。その先の「とどまり」は最後のコマのまま（fill: both） */
html.hero-pin .hero .hero__media::before { animation: hero-lift 1ms linear both; animation-duration: auto; animation-timeline: --hero; animation-range: contain 0% contain var(--hero-range-end, 100%); }
html.hero-pin .hero :is(.hero__title, .hero__act, .hero__hint, .hero__caption, .hero__shade, .hero__next, .ko, .ko-dive) {
  animation-duration: 1ms; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
  animation-timeline: --hero; animation-range: contain 0% contain var(--hero-range-end, 100%); }
/* スクロール連動アニメが無いとき: js/hero.js が .hero に --p（0〜1。句点が開く区間の進み具合）を書く */
html.hero-pin.hero-scrub .hero :is(.hero__title, .hero__act, .hero__hint, .hero__caption, .hero__shade, .hero__next, .ko, .ko-dive) {
  animation-timeline: auto; animation-range: normal; animation-duration: 1s;
  animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); }
html.hero-pin.hero-scrub .hero .hero__media::before { animation-timeline: auto; animation-range: normal; animation-duration: 1s;
  animation-play-state: paused; animation-delay: calc(var(--p, 0) * -1s); }
/* とどまりの線: 開ききった所（--hero-range-end）からピンが外れる所（100%）までで、左から伸びる。
   スクロール連動アニメが無いときは js/hero.js が --p2（とどまる区間の進み具合 0〜1）を書く */
html.hero-pin .hero .hero__hold-bar { animation: hero-hold 1ms linear both; animation-duration: auto;
  animation-timeline: --hero; animation-range: contain var(--hero-range-end, 0%) contain 100%; }
html.hero-pin.hero-scrub .hero .hero__hold-bar { animation-timeline: auto; animation-range: normal; animation-duration: 1s;
  animation-play-state: paused; animation-delay: calc(var(--p2, 0) * -1s); }

/* 句点（0,0）を拡大しながら画面の中央へ。--dx/--dy（フォント単位）と --kmax は hero.js が測る（無くても画面は覆う） */
@keyframes hero-dive {
  0%, 3%  { transform: translate(0px, 0px) scale(1); }
  18%     { transform: translate(calc(var(--dx, 0) * .08px), calc(var(--dy, 0) * .08px)) scale(1.35); }
  32%     { transform: translate(calc(var(--dx, 0) * .24px), calc(var(--dy, 0) * .24px)) scale(2.4); }
  42%     { transform: translate(calc(var(--dx, 0) * .42px), calc(var(--dy, 0) * .42px)) scale(4.6); }
  50%     { transform: translate(calc(var(--dx, 0) * .64px), calc(var(--dy, 0) * .64px)) scale(10); }
  56%     { transform: translate(calc(var(--dx, 0) * .86px), calc(var(--dy, 0) * .86px)) scale(calc(var(--kmax, 90) * .6)); }
  61%, 100% { transform: translate(calc(var(--dx, 0) * 1px), calc(var(--dy, 0) * 1px)) scale(var(--kmax, 90)); }
}
@keyframes hero-ko    { 0%, 57% { opacity: 1; visibility: visible; } 61%, 100% { opacity: 0; visibility: hidden; } }
@keyframes hero-fv    { 0%, 2% { opacity: 1; translate: 0 0; visibility: visible; } 15%, 100% { opacity: 0; translate: 0 -16px; visibility: hidden; } }
@keyframes hero-shade { 0%, 50% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes hero-lift  { 0%, 40% { opacity: .14; } 57%, 100% { opacity: 0; } }
@keyframes hero-hold  { 0% { transform: scaleX(0); } 100% { transform: scaleX(1); } }
@keyframes hero-next  { 0%, 60% { opacity: 0; translate: 0 24px; visibility: hidden; } 80%, 100% { opacity: 1; translate: 0 0; visibility: visible; } }

/* ヒーローの上にいる間のヘッダー（js/hero.js が付ける）
   is-over-reel: 句点が開く区間でピンが止まっている間は透明（全画面のリールを帯で切らない）
   is-over-hero: PC の「無料見積り」はヒーローの間だけ枠線、過ぎたら金（同じ画面に金は1つ。§4.2） */
.site-header.is-over-reel { background: transparent; border-bottom-color: transparent; }
@media (min-width:1024px) {
  .site-header.is-over-hero .btn-header.btn-primary { background: rgba(17,17,17,.35); color: var(--c-text); border-color: var(--c-line-strong); }
}
@media (min-width:1024px) and (hover: hover) and (pointer: fine) {
  .site-header.is-over-hero .btn-header.btn-primary:hover { background: var(--c-surface-3); border-color: var(--c-text); }
}

/* ---------- 出現（§5.2。JS があるときだけ隠す） ---------- */
.js .reveal { opacity: 0; transform: translate3d(0, var(--rise), 0); }
.js .reveal.is-in { opacity: 1; transform: none; transition: opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out); transition-delay: calc(min(var(--i, 0), 4) * 60ms); }

/* ---------- お悩み＋3つの約束（#promises。2026-10-02 ユーザーの指示・3回目／CODEX 提案2で1つの節に統合。サンプル・制作体制の後） ----------
   調査の不満3つ（大きな数字）と、それぞれへの約束を1対1で縦に組む。灰色の箱は使わず、太めの線（上）と細い線（不満と約束の間）だけ。
   旧「お悩み」（.stats・.worries-body）と「3つの約束」（.bento-3）の組みは _old/rev03_before/style.css */
/* 2026-10-02（4回目の指示）: 数字・番号・アイコン・見出し・本文が同じ強さで並び、どこから読むか分からなかったので組み直した（旧版は _old/rev04_before/style.css）。
   読む順: 不満の数字（枠の外・大きな欧文セリフ）→ 約束の枠（金の細い枠＝この節の主役。3枚で1組）。
   枠の中: アイコン枠＋金のラベル「01 納期の約束」→ 見出し（SP 21px・PC 26px・太字）→ 短い本文（15〜16px・控えめの色）→ 要点（ラベル＋大きな数字か語） */
.pledges-key { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: var(--fs-caption); color: var(--c-text-3); margin-bottom: var(--sp-5); }
.pledges-arrow { color: var(--c-steel); }
.pledges { display: grid; gap: var(--sp-7); }
.pledge { display: grid; align-content: start; gap: var(--sp-3); }
.pledge-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px var(--sp-3); padding-left: 2px; }
.pledge-num { font: 400 var(--fs-stat)/1 var(--ff-display); letter-spacing: -.01em; color: var(--c-text); font-variant-numeric: lining-nums; }
.pledge-unit { font-size: .45em; margin-left: 2px; color: var(--c-text-2); }
.pledge-issue { font-size: var(--fs-small); color: var(--c-text-2); font-weight: 700; font-feature-settings: "palt" 1; }
.pledge-card { display: grid; align-content: start; gap: var(--sp-4); }
.pledge-title { margin-top: 2px; }
.pledge-facts { display: grid; gap: 10px; margin-top: var(--sp-1); padding-top: var(--sp-4); border-top: 1px solid var(--gold-line-soft); align-content: start; }
.pledge-facts-title { font-size: var(--fs-caption); line-height: 1.6; color: var(--c-text-3); letter-spacing: .04em; }
/* 2026-10-02 rev04 のレビュー修正: 項目名（dt）の行数が左右で違うと（1024〜1279px の3列で「ライト・／スタンダード」2行と「プレミアム」1行）値の高さがずれたので、
   .fact を2行ぶんの subgrid にして「項目名の行」「値の行」を左右でそろえる。項目名は下にそろえる（値のすぐ上） */
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px var(--sp-4); }
.fact { display: grid; align-content: start; gap: 6px; min-width: 0; grid-row: span 2; grid-template-rows: subgrid; }
.fact dt { font-size: var(--fs-caption); line-height: 1.5; color: var(--c-text-2); align-self: end; }
.fact dd { align-self: start; }
.fact dd { display: grid; gap: 4px; }
.fact-val { display: flex; align-items: baseline; gap: 3px; line-height: 1; white-space: nowrap; }
.fact-num { font: 400 var(--fs-fact)/1 var(--ff-display); letter-spacing: -.01em; color: var(--c-text); font-variant-numeric: lining-nums; }
.fact-unit { font-size: .9375rem; font-weight: 700; letter-spacing: .04em; color: var(--c-text); font-feature-settings: "palt" 1; }
.fact-word { font-size: clamp(1.625rem, 1.5rem + .35vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: .04em; color: var(--c-text); font-feature-settings: "palt" 1; }
.fact-note { font-size: var(--fs-caption); line-height: 1.5; color: var(--c-text-3); }
.pledges-source { margin-top: var(--sp-6); }
@media (max-width:599px) { .pledges { gap: var(--sp-6); } }
/* PC（3列）: 列ごとに「数字 → 枠（ラベル・見出し・本文・要点）」の行をそろえる（subgrid。無いブラウザは各列で上から詰める） */
@media (min-width:1024px) {
  .pledges { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
  .pledge { grid-row: span 5; grid-template-rows: subgrid; row-gap: var(--sp-4); }
  .pledge-card { grid-row: span 4; grid-template-rows: subgrid; row-gap: var(--sp-4); }
}
.closing { margin-top: var(--sp-6); font-size: var(--fs-h3); line-height: 1.6; font-weight: 700; font-feature-settings: "palt" 1; letter-spacing: var(--ls-heading); } /* 締めの一言（#director の .pd-closing が使う） */

/* ---------- サンプル（§6.2）。2026-10-02 ユーザーの指示・3回目／CODEX 提案2「作品を早く見せ、カードを軽くする」で組み直した（旧版は _old/rev03_before/style.css） ----------
   ヒーローのすぐ次。#samples に飛んだ直後の1画面に、最初のサムネイルの上半分以上が入るよう、節の頭（上の余白・見出し・リード・チップ）を詰めた。
   カード: 灰色の箱をやめ、大きい映像（角丸・細い枠）＋題・料金の目安・尺の短いキャプション＋ボタン＋「詳しく見る」（細い罫線の開閉）。
   PC は大小のあるベント（縦のカード4列・横のカード8列）。段の高さは縦のカード（4:5）で決まり、横のカードの映像はその高さいっぱいに切る
   （.sample を2行ぶんの subgrid にして、映像の行と文字の行を段ごとにそろえる。subgrid が無いブラウザは横のカードを 5:3） */
.samples-sec { padding-top: clamp(2.5rem, .5rem + 3vw, 3.5rem); } /* 2026-10-02 rev05: clamp(2.5rem, 1rem + 4vw, 5rem) → 章の見出しの分を詰めた（PC 1280 で 67 → 46px） */
.samples-head { margin-bottom: var(--sp-5); }
.samples-head .lead { max-width: 40em; }
@media (min-width:1024px) { .samples-head { gap: var(--sp-3); margin-bottom: var(--sp-5); } }
.filters { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 calc(var(--gutter) * -1) var(--sp-5); padding: 2px var(--gutter) 6px; }
.filters::-webkit-scrollbar { display: none; }
@media (min-width:768px) { .filters { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.chip { flex: none; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill); border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text-2); font-size: var(--fs-small); font-weight: 700; font-feature-settings: "palt" 1; transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); position: relative; }
.chip::after { content: ""; position: absolute; inset: -2px 0; }
.chip[aria-checked="true"] { background: var(--c-surface-3); border-color: var(--c-text); color: var(--c-text); }
@media (hover: hover) and (pointer: fine) { .chip:hover { color: var(--c-text); border-color: var(--c-text-2); } }

.samples-grid { display: grid; gap: var(--sp-7); }
@media (min-width:600px) { .samples-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-7) 20px; } }
@media (min-width:1024px) {
  .samples-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 0; }
  .sample[data-pc="tall"] { grid-column: span 4; }
  .sample[data-pc="wide"] { grid-column: span 8; }
  .samples-grid.is-filtered .sample { grid-column: span 4; }
  /* 2026-10-02 rev03 のレビュー修正: 映像・文字・「詳しく見る」の3行の subgrid（旧は2行で、「詳しく見る」は文字の行の中の margin-top: auto。
     片方を開くと段が伸び、隣の閉じた「詳しく見る」がその底まで押し下げられて、ボタンから 500〜870px 離れていた）。
     閉じた「詳しく見る」は3行目の頭（＝文字の行のすぐ下）にそろい、開いた方の中身だけが下へ伸びる */
  .sample { grid-row: span 3; }
  .sample > .card-more { padding-bottom: 56px; } /* 段と段の間（grid の row-gap の代わり。subgrid の中に余白を持ち込まないため） */
}
.sample.card { background: none; border: 0; border-radius: 0; overflow: visible; display: flex; flex-direction: column; min-width: 0; }
.card-media { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; border-radius: var(--r); }
.card-media::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(242,240,235,.1); border-radius: inherit; pointer-events: none; } /* 細い枠（映像の縁を締める） */
.card-media picture { position: absolute; inset: 0; }
.card-media picture, .card-poster { width: 100%; height: 100%; }
.sample[data-sp="tall"] .card-media { aspect-ratio: 4 / 5; }
@media (min-width:600px) { .sample[data-sp="tall"] .card-media { aspect-ratio: 16 / 9; } }
@media (min-width:1024px) {
  .sample[data-pc="tall"] .card-media { aspect-ratio: 4 / 5; }
  .sample[data-pc="wide"] .card-media { aspect-ratio: 5 / 3; }
  .samples-grid.is-filtered .sample[data-pc="wide"] .card-media { aspect-ratio: 16 / 9; }
  .sample[data-pc="wide"] .card-poster { object-position: var(--pos, 50% 50%); }
  @supports (grid-template-rows: subgrid) {
    .sample.card { display: grid; grid-template-rows: subgrid; row-gap: 0; }
    .sample.card > .card-more { margin-top: 0; align-self: start; }
    .samples-grid:not(.is-filtered) .sample[data-pc="wide"] .card-media { aspect-ratio: auto; height: 100%; min-height: 0; }
  }
}
.card-poster { object-fit: cover; transition: transform var(--dur-3) var(--ease-out); }
.card-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.sample.is-playing .card-media { aspect-ratio: var(--play-ratio, 16 / 9); }
/* 2026-10-02 rev03 のレビュー修正: スマホ・タブレットのカード内再生。映像の頭はヘッダーの下 16px（main.js の revealMedia がずらす）、縦型（9:16）の高さは
   「画面の高さ − ヘッダー − 下部固定 CTA − 余白」まで（ヘッダーの下 16px は html の scroll-padding-top がずらす）（390×664 で 358×636 だった縦型の下端とコントローラーが、固定 CTA の下に隠れていた）。
   幅は列いっぱいのまま、映像は object-fit: contain で左右に黒 */
@media (max-width:1023px) {
  .sample.is-playing .card-media { max-height: calc(100vh - var(--header-h) - var(--sticky-h) - 40px); max-height: calc(100svh - var(--header-h) - var(--sticky-h) - 40px - env(safe-area-inset-bottom)); }
}
.sample.is-playing .card-media picture, .sample.is-playing .card-badge, .sample.is-playing .card-hit, .sample.is-playing .card-playicon { display: none; }
.card-badge { position: absolute; left: 12px; top: 12px; right: 12px; width: fit-content; font-size: .75rem; line-height: 1.45; color: var(--c-text-2); background: rgba(17,17,17,.78); padding: 4px 10px; border-radius: var(--r-pill); pointer-events: none; z-index: 1; }
.card-hit { position: absolute; inset: 0; border: 0; background: transparent; }
.card-playicon { position: absolute; right: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(242,240,235,.5); background: rgba(17,17,17,.62); color: var(--c-text); pointer-events: none; transition: border-color var(--dur-3) var(--ease-out); }
.card-playicon .icon { width: 16px; height: 16px; margin-left: 2px; }
.sample[data-icon="left"] .card-playicon { right: auto; left: 12px; } /* ⑥周年: 右下の「AIによる再現演出」の表示に重ねない */

/* カードの文字: 尺（形式。小さな情報の色）→ 題（用途）→ 料金の目安 → ボタン → 「詳しく見る」 */
.card-body { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-4) 0 0; min-width: 0; }
.card-format { font-size: var(--fs-caption); line-height: 1.5; color: var(--c-steel); letter-spacing: .06em; }
.card-title { margin: 0; }
.card-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: var(--fs-small); }
.card-k { font-size: var(--fs-caption); color: var(--c-text-3); }
.card-price { display: inline-flex; align-items: baseline; gap: 2px; color: var(--c-text); white-space: nowrap; }
.card-price-num { font: 400 1.875rem/1 var(--ff-display); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.card-price-unit { font-size: .875rem; font-weight: 700; font-feature-settings: "palt" 1; }
.card-launch { white-space: nowrap; }
.card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: var(--sp-2) 0 var(--sp-3); }
.card-actions .btn .icon { width: 12px; height: 12px; }
.card-est { padding-inline: 4px; gap: 6px; }
.card-est .icon-arrow { width: 14px; height: 14px; }
/* 「この内容で概算する」の置き場所: スマホ・タブレット（カードの中で再生）は再生ボタンの並び、PC（モーダルで再生）はモーダルと「詳しく見る」の中 */
.card-est--more { display: none; }
@media (min-width:1024px) and (hover: hover) and (pointer: fine) {
  .card-est--inline { display: none; }
  .card-est--more { display: inline-flex; justify-self: start; align-self: flex-start; }
}
.sound-note { font-weight: 400; color: var(--c-text-3); font-size: .8125rem; margin-left: -4px; }
/* 「再生する」（2026-10-02 ユーザーの指示で金の面。方針 §3.1 の例外）。主 CTA（無料見積り 56px・右に →）とは
   大きさ（44px）・左の ▶・文言で格の差を付ける。.btn-primary ではないので、main.js の「1画面の金は1つ」の数には入らない
   （サンプルを見ている間も、スマホの固定 CTA は出たまま） */
.btn-play { background: var(--c-accent); color: var(--c-accent-ink); padding: 0 16px; gap: 8px; }
.btn-play .icon { margin-left: 1px; }
.btn-play .sound-note { color: var(--c-accent-ink); margin-left: -2px; }
@media (hover: hover) and (pointer: fine) { .btn-play:hover { background: var(--c-accent-hover); } }
.seg { display: inline-flex; border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 0; }
.seg button { min-height: 44px; min-width: 56px; padding: 0 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-text-3); font-size: var(--fs-caption); font-weight: 700; transition: background-color var(--dur-1), color var(--dur-1); position: relative; }
.seg button[aria-pressed="true"] { background: var(--c-surface-3); color: var(--c-text); }

/* 「詳しく見る」: 細い罫線の開閉。中は説明 → 題材・想定素材・制作方法・プラン・納期の表 → 注記。cardDemo(s) のブロック（.card-demo）は中のいちばん上 */
.card-more { border-top: 1px solid var(--c-line); margin-top: auto; } /* 2026-10-02 rev03 のレビュー修正で .sample の直下の子（映像・文字の後）に。タブレットの2列でも、閉じているときは同じ段の2枚で罫線の高さがそろう */
/* タブレット（2列）: どれかを開いている間は、閉じている「詳しく見る」を自分のボタンのすぐ下に置く（開いた隣のカードに引っぱられて段の底まで下がらない） */
@media (min-width:600px) and (max-width:1023px) { .samples-grid:has(.card-more[open]) .sample > .card-more:not([open]) { margin-top: 0; } }
.card-more > summary { list-style: none; cursor: pointer; min-height: 44px; display: flex; align-items: center; flex-wrap: wrap; column-gap: var(--sp-3); padding: 6px 28px 6px 0; position: relative; font-size: var(--fs-small); font-weight: 700; color: var(--c-text-2); font-feature-settings: "palt" 1; }
.card-more > summary::-webkit-details-marker { display: none; }
.card-more > summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.5px solid var(--c-text-3); border-bottom: 1.5px solid var(--c-text-3); transform: rotate(45deg); transition: transform var(--dur-2) var(--ease-standard); }
.card-more[open] > summary::after { transform: translateY(4px) rotate(-135deg); }
.card-more-hint { font-weight: 400; font-size: var(--fs-caption); color: var(--c-text-3); }
@media (hover: hover) and (pointer: fine) { .card-more > summary:hover { color: var(--c-text); } }
.card-more-body { display: grid; gap: var(--sp-3); padding: var(--sp-2) 0 var(--sp-4); }
.card-desc { font-size: var(--fs-body); color: var(--c-text-2); line-height: var(--lh-body); }
.card-spec { border-top: 1px solid var(--c-line); }
.card-spec-row { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--sp-3); padding: 10px 0; border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.7; }
.card-spec-row dt { color: var(--c-text-3); font-weight: 400; }
.card-spec-row dd { color: var(--c-text-2); }
.card-spec-row dd .caption { margin-top: 4px; }
@media (max-width:389px) { .card-spec-row { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.materials-img { margin-top: var(--sp-3); border-radius: 4px; border: 1px solid var(--c-line); }
.card-note, .card-ethics { margin-top: 2px; }
.card-ethics { color: var(--c-text-2); border-left: 1px solid var(--c-line-strong); padding-left: 10px; }
.samples-disclaimer { margin-top: var(--sp-6); }
@media (min-width:1024px) { .samples-disclaimer { margin-top: 0; } }
@media (hover: hover) and (pointer: fine) {
  .sample:hover .card-poster { transform: scale(1.03); }
  .sample:hover .card-playicon { border-color: var(--c-text); }
  .sample .card-media:hover ~ .card-body .card-title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
}
.sample.is-hidden { display: none !important; } /* 2026-10-02 rev03 のレビュー修正: 比較カードの .sample.tone.card { display: flex / grid }（詳細度 0,3,0）に負けて、どのチップでも比較カードが出ていた */
.samples-grid.is-fading { opacity: .001; }
.samples-grid { transition: opacity var(--dur-1) linear; }

/* ツキシロ食品の「詳しく見る」のいちばん上: 想定素材の一覧の代わりに、デモ（#demo-tsukishiro）への案内（2026-10-02 CODEX 提案1。同じ内容を2か所に書かない） */
.card-demo { display: grid; gap: 4px; padding: 4px 0 12px; border-bottom: 1px solid var(--c-line); }
.card-demo-k { font-size: var(--fs-caption); color: var(--c-text-3); letter-spacing: .04em; }
.card-demo-lead { font-size: var(--fs-small); line-height: 1.7; color: var(--c-text-2); }
.card-demo-link { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: var(--fs-small); font-weight: 700; color: var(--c-text); text-decoration: underline; text-decoration-color: var(--c-line-strong); text-underline-offset: .3em; font-feature-settings: "palt" 1; }
.card-demo-link .icon-arrow { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .card-demo-link:hover { text-decoration-color: var(--c-text); } .card-demo-link:hover .icon-down { transform: translateY(3px); } }
.card-demo-entry .icon-down { width: 14px; height: 14px; }
@media (hover: hover) and (pointer: fine) { .card-demo-entry:hover .icon-down { transform: translateY(3px); } }
.icon-down { transition: transform var(--dur-2) var(--ease-standard); }
.pi-demo { margin-top: 6px; font-size: var(--fs-caption); }
.pi-demo a { color: var(--c-text-2); text-underline-offset: .3em; }

/* ---------- 3段目の横型どうし（ノースリム・潮見。2026-10-02 3回目／CODEX 提案3で比較カードが1段まるごとになったため 6＋6・16:9） ---------- */
@media (min-width:1024px) {
  .sample[data-pc="half"] { grid-column: span 6; }
  .sample[data-pc="half"] .card-media { aspect-ratio: 16 / 9; }
}

/* ---------- フォトモ POP / DARK の比較カード（2026-10-02 ユーザーの指示・3回目／CODEX 提案3。build.mjs の toneCard・js/tone.js） ----------
   PC は1段まるごと（左に見せ場 16:9、右に題・トーンの切り替え・料金・ボタン）。スマホ・タブレットは見せ場の下に続ける。
   UI は黒・チャコール・金のまま（トーンを替えても UI の色は変えない。色の違いは映像の中だけ）。切り替えは白の下線（金にしない）で、
   横型・縦型の切り替え（.seg・ボタンの並び）とは置き場所とラベルを分ける。金は「全編を見る」（再生ボタンの例外）だけ */
.sample.tone { position: relative; }
.tone-anchor { position: absolute; top: 0; left: 0; width: 1px; height: 1px; pointer-events: none; } /* 旧カードの id（概算の「近いサンプル動画」のリンク先） */
.tone-stage { display: grid; gap: 8px; min-width: 0; align-content: start; }
.tone .card-media { aspect-ratio: 16 / 9; }
.tone-clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-2) linear; }
.tone-clip.is-on { opacity: 1; }
.sample.tone.is-playing .tone-clip { display: none; }
.sample.tone.is-playing .tone-caption { display: none; } /* 2026-10-02 rev03 のレビュー修正: 全編（音あり）の再生中に「音なし・くり返し」と出ていた・一時停止のボタンの跡が空いていた */
.sample.tone:hover .card-poster { transform: none; } /* 見せ場の映像と重なるので、ポスターだけ拡大しない */
/* 見せ場の一時停止・再生（映像の文字に重ならないよう、映像の下の注記の行の頭に置く。44px） */
.tone-pause { flex: none; width: 44px; height: 44px; margin: -6px 2px -6px 0; padding: 0; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--c-line-strong); background: transparent; color: var(--c-text); }
.tone-pause .icon { width: 16px; height: 16px; }
.tone-pause > span { display: grid; place-items: center; }
.tone-i-play, .tone-pause.is-paused .tone-i-pause { display: none !important; }
.tone-pause.is-paused .tone-i-play { display: grid !important; }
.tone-pause.is-paused .tone-i-play .icon { margin-left: 2px; }
@media (hover: hover) and (pointer: fine) { .tone-pause:hover { border-color: var(--c-text); } }
.no-js .tone-pause, .no-js .tone-state { display: none; } /* JS が無いときは見せ場を再生しない（ポスターだけ） */
.no-js .tone-pick { display: none; } /* JS が無いときは切り替えが効かないので隠し、2つの版の題と一言を両方出す */
.no-js .tone-info[hidden] { display: grid !important; }
.tone-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; padding-top: 4px; }
.tone-caption .tone-scene { flex: 1 1 14em; min-width: 0; }
.tone-scene { color: var(--c-text-2); }
.tone-state { color: var(--c-steel); }
.tone-disclaimer { margin-top: -2px; }
.tone-lead { font-size: var(--fs-small); line-height: 1.75; color: var(--c-text-2); }
.tone-pick { display: grid; gap: 6px; margin-top: var(--sp-2); }
.tone-pick-k { font-size: var(--fs-caption); color: var(--c-text-3); letter-spacing: .04em; }
.tone-switch { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.tone-opt { position: relative; min-height: 56px; display: flex; align-items: baseline; gap: 10px; padding: 14px 4px 12px 0; border: 0; background: transparent; color: var(--c-text-3); text-align: left; -webkit-tap-highlight-color: transparent; transition: color var(--dur-1) linear; }
.tone-opt + .tone-opt { padding-left: 16px; border-left: 1px solid var(--c-line); }
.tone-opt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-text); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-2) var(--ease-standard); }
.tone-opt[aria-checked="true"] { color: var(--c-text); }
.tone-opt[aria-checked="true"]::after { transform: none; }
.tone-no, .tone-name-no { font: 400 .75rem/1 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); }
.tone-label { font: 400 1.75rem/1 var(--ff-display); letter-spacing: .04em; }
@media (hover: hover) and (pointer: fine) { .tone-opt:hover { color: var(--c-text); } }
.tone-info { display: grid; gap: 2px; margin-top: var(--sp-2); }
.tone-name { font-size: var(--fs-small); font-weight: 700; color: var(--c-text); font-feature-settings: "palt" 1; }
.tone-name-no { margin-right: 8px; }
.tone-summary { font-size: var(--fs-small); color: var(--c-text-2); }
.tone-body .card-facts { margin-top: var(--sp-2); }
.tone-same { margin-top: -2px; }
.tone-points { margin-bottom: 2px; }
.tone-ver + .tone-ver { margin-top: 10px; }
.tone-ver-k { display: block; font-weight: 700; color: var(--c-text); }
.tone-head { display: grid; gap: 6px; }
@media (min-width:600px) { .samples-grid .sample.tone { grid-column: 1 / -1; } }
/* スマホ・タブレット: 題 → 見せ場 → 注記の行（一時停止）→ POP / DARK → 版の説明 → 架空の注記 → 料金・ボタン。
   切り替えを映像のすぐ下に置き、押して映像が替わるのを同じ画面で見られるようにする（375×667 でも映像と切り替えが1画面に入る）。
   .tone-stage・.tone-body を display: contents にして、中身をカードの縦の並び（flex）に order で並べる */
@media (max-width:1023px) {
  .sample.tone.card { display: flex; flex-direction: column; }
  .sample.tone .tone-stage, .sample.tone .tone-body { display: contents; }
  .tone-head { order: 1; margin-bottom: var(--sp-4); }
  .sample.tone .card-media { order: 2; }
  .tone-caption { order: 3; margin-top: 6px; }
  .tone-pick { order: 4; margin-top: var(--sp-2); }
  .tone-info { order: 5; }
  .tone-disclaimer { order: 6; margin-top: var(--sp-3); }
  .tone-body .card-facts { order: 7; margin-top: var(--sp-3); }
  .tone-same { order: 8; margin-top: 2px; }
  .sample.tone .card-actions { order: 9; }
  .sample.tone > .card-more { order: 10; }
}
/* PC: 左に見せ場（＋注記）、右に 題 → POP / DARK → 版の説明 → 料金 → ボタン → 詳しく見る */
@media (min-width:1024px) {
  .samples-grid .sample.tone, .samples-grid.is-filtered .sample.tone { grid-column: 1 / -1; }
  .sample.tone.card { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); grid-template-areas: "stage head" "stage body" "more more"; grid-template-rows: auto 1fr auto; column-gap: 24px; align-items: start; padding-bottom: 56px; }
  .tone-stage { grid-area: stage; }
  .tone-head { grid-area: head; }
  .sample.tone .card-body { grid-area: body; padding: var(--sp-2) 0 0; }
  /* 2026-10-02 rev03 のレビュー修正: 「詳しく見る」は右の列（392px）だけで 1,031px 伸び、左の見せ場の下が空いていた → カードの幅いっぱい・中は2列 */
  .sample.tone > .card-more { grid-area: more; margin-top: var(--sp-5); padding-bottom: 0; }
  .sample.tone .card-more-body { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: start; }
  .sample.tone .card-more-body > * { grid-column: 1 / -1; }
  .sample.tone .tone-points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .sample.tone .tone-points > li { border-bottom: 1px solid var(--c-line); }
  .sample.tone .card-more-body > .card-spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 0; }
  .sample.tone .card-spec-row { border-top: 1px solid var(--c-line); border-bottom: 0; }
  .sample.tone .card-spec-row:first-child { grid-column: 1 / -1; }
  .sample.tone .card-spec > .card-spec-row:nth-last-child(-n+2) { border-bottom: 1px solid var(--c-line); }
  .tone-vers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .tone-vers .tone-ver + .tone-ver { margin-top: 0; }
}

/* ---------- 「素材 → 構成 → 完成」のデモ（2026-10-02 ユーザーの指示・3回目／CODEX 提案1。build.mjs の demoBlock・js/demo.js） ----------
   サンプルの一覧の後に1ブロック。タブ3つ（白の下線。金にしない）＋6つのマス（素材＝場面）。「素材を見る」→「構成を見る」でマスが場面の並びへ
   移り（FLIP。transform だけ）、「完成を見る」で同じマスの中の素材が完成フレームに溶ける（opacity だけ）。スマホの「構成を見る」はマスを1列にして
   右に場面の情報（尺・テロップ・ナレーション・使う素材）。注記（サンプル用の想定素材）は見出しの下にいつも出す */
.demo { margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid var(--c-line-strong); }
@media (min-width:1024px) { .demo { margin-top: var(--sp-2); padding-top: var(--sp-7); } }
.demo + .samples-disclaimer { margin-top: var(--sp-6); }
.demo-head { display: grid; gap: var(--sp-3); margin-bottom: var(--sp-5); max-width: 48em; }
.demo-title { font-size: clamp(1.375rem, 1.1rem + 1.1vw, 2rem); line-height: 1.45; letter-spacing: var(--ls-heading); }
.demo-lead { color: var(--c-text-2); }
.demo-notice { display: flex; align-items: flex-start; gap: 10px; width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r); font-size: var(--fs-small); line-height: 1.7; color: var(--c-text-2); }
.demo-notice .icon-line { width: 20px; height: 20px; margin-top: 2px; }
.demo-notice-main { display: block; color: var(--c-text); font-weight: 700; font-feature-settings: "palt" 1; }
.demo-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--c-line); margin-bottom: var(--sp-4); }
.demo-tab { position: relative; min-height: 56px; display: flex; align-items: baseline; gap: 10px; padding: 14px 8px 12px 0; border: 0; background: transparent; color: var(--c-text-3); font-size: 1rem; font-weight: 700; text-align: left; font-feature-settings: "palt" 1; -webkit-tap-highlight-color: transparent; transition: color var(--dur-1) linear; }
.demo-tab::after { content: ""; position: absolute; left: 0; right: 12px; bottom: -1px; height: 2px; background: var(--c-text); transform: scaleX(0); transform-origin: 0 50%; transition: transform var(--dur-3) var(--ease-out); }
.demo-tab[aria-selected="true"] { color: var(--c-text); }
.demo-tab[aria-selected="true"]::after { transform: none; }
.demo-tab-no { font: 400 .75rem/1 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); }
@media (hover: hover) and (pointer: fine) { .demo-tab:hover { color: var(--c-text); } }
@media (max-width:599px) { .demo-tab { flex-direction: column; align-items: flex-start; gap: 6px; padding-right: 4px; font-size: .9375rem; } }
.no-js .demo-tabs { display: none; }
.demo-panel { border-radius: 2px; }
.demo-panel:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 6px; }
.demo-cap { font-size: var(--fs-small); color: var(--c-text-2); margin-bottom: var(--sp-4); }
.demo-final-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-bottom: var(--sp-4); }
.demo-sound { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--c-text); font-weight: 700; font-feature-settings: "palt" 1; }
.demo-sound .icon-line { width: 20px; height: 20px; }
.demo-player { width: min(100%, 880px); aspect-ratio: 16 / 9; margin-bottom: var(--sp-5); background: #000; border-radius: var(--r); overflow: hidden; scroll-margin-top: calc(var(--header-h) + 16px); }
.demo-player video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.demo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5) 12px; }
@media (min-width:768px) { .demo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) 20px; } }
@media (min-width:1024px) { .demo-grid { column-gap: 24px; } }
.demo-cell { display: grid; gap: 10px; align-content: start; min-width: 0; }
.demo-tile { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r); background: var(--c-surface-2); transform-origin: 0 0; container-type: inline-size; }
.demo-tile::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(242,240,235,.12); border-radius: inherit; pointer-events: none; }
.demo-img, .demo-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-frame { opacity: 0; transition: opacity var(--dur-4) var(--ease-out); }
.demo-panel[data-stage="final"] .demo-frame { opacity: 1; }
.demo-chip { position: absolute; right: 8px; top: 8px; z-index: 1; padding: 2px 8px; border-radius: var(--r-pill); background: rgba(17,17,17,.8); color: var(--c-text); font: 400 var(--fs-eyebrow)/1.5 var(--ff-mono); letter-spacing: .08em; font-feature-settings: "palt" 1; } /* 2026-10-02 rev03 のレビュー修正: 11→12px（英字ラベルと同じ） */
/* 会社概要のメモ（文字の素材）: 写真と同じ 16:9 のマスに、紙の代わりのチャコールの面。狭いマス（スマホ）は項目名だけ */
.demo-doc { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 2.4cqi; padding: 5.5cqi 6cqi; color: var(--c-text-2); }
/* 2026-10-02 rev03 のレビュー修正: 方針 §3.3（--fs-caption 13px より小さくしない）に合わせ、メモの文字も 13px 以上（旧は 11〜12px） */
.demo-doc-title { font-size: max(13px, 4.4cqi); line-height: 1.3; font-weight: 700; color: var(--c-text); padding: 0 52px 0 2.6cqi; border-left: 2px solid var(--c-line-strong); } /* 右は段階の印（.demo-chip）の分を空ける */
.demo-doc-lines { display: grid; gap: 1.1cqi; }
.demo-doc-lines > div { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 2cqi; font-size: max(13px, 3.15cqi); line-height: 1.4; transition: opacity var(--dur-3) linear; }
.demo-doc-lines dt { color: var(--c-text-3); }
.demo-doc-note { margin-top: auto; font-size: max(13px, 2.9cqi); line-height: 1.4; color: var(--c-text-3); }
.demo-panel:not([data-stage="materials"]) .demo-doc[data-focus="process"] [data-line]:not([data-line="process"]) { opacity: .32; } /* 構成では、この場面で使う「製造工程」の行だけを残す */
/* 狭いマス（2026-10-02 rev03 のレビュー修正で 280px 未満 → 370px 未満に。PC 1024〜1180px の 3列のマス（約 300px）でも、13px では中身が 16:9 に入らず
   「製造工程」の行が下で切れていたため）: 見出しと項目名だけ。見出しも 13px（旧 10.5px）。
   160px 未満（スマホの「構成を見る」の左の小さなマス）は、この場面で使う「製造工程」の項目だけを残す（ほかの項目で下が切れないように） */
@container (max-width: 369px) {
  .demo-doc { gap: 4cqi; padding: 7cqi; }
  .demo-doc-lines { display: flex; flex-wrap: wrap; gap: 2px 10px; }
  .demo-doc-lines > div { display: block; }
  .demo-doc-lines dd, .demo-doc-note, .demo-doc-ex { display: none; }
  .demo-doc-title { font-size: 13px; white-space: nowrap; } /* 狭いマスの見出しは「会社概要」だけ（（抜粋）は隠す）なので1行のまま */
}
@container (max-width: 159px) {
  .demo-doc-title { padding-right: 40px; }
  .demo-panel:not([data-stage="materials"]) .demo-doc[data-focus="process"] [data-line]:not([data-line="process"]) { display: none; }
}
.demo-text { min-width: 0; }
.demo-name { font-size: var(--fs-small); font-weight: 700; color: var(--c-text-2); font-feature-settings: "palt" 1; }
.demo-t { display: grid; gap: 6px; font-size: var(--fs-caption); line-height: 1.65; color: var(--c-text-2); }
.demo-meta { font-size: var(--fs-caption); color: var(--c-steel); letter-spacing: .04em; } /* 2026-10-02 rev03 のレビュー修正: 12→13px */
.demo-dur { color: var(--c-text-3); }
.demo-scene, .demo-telop { font-size: var(--fs-small); font-weight: 700; color: var(--c-text); font-feature-settings: "palt" 1; }
.demo-k { display: inline-block; margin-right: 8px; font-size: var(--fs-caption); color: var(--c-text-3); letter-spacing: .04em; } /* 2026-10-02 rev03 のレビュー修正: 11→13px */
.demo-sub { display: block; color: var(--c-text-3); }
.demo-made { color: var(--c-steel); }
.demo-plus { margin: 0 .2em; color: var(--c-text-3); }
.demo-from { justify-self: start; padding-inline: 4px; gap: 6px; }
.demo-foot { margin-top: var(--sp-5); }
/* 「次へ：構成を見る」「次へ：完成を見る」（2026-10-02 rev03 のレビュー修正。金にしない）。押すとタブの並びをヘッダーの下へ戻す */
.demo-next { display: flex; justify-content: flex-end; margin-top: var(--sp-4); padding-top: var(--sp-2); border-top: 1px solid var(--c-line); }
.demo-next-btn { padding-inline: 4px; gap: 6px; color: var(--c-text); }
.demo-next-btn .icon-arrow { width: 14px; height: 14px; }
.no-js .demo-next { display: none; }
/* タブの並びは html の scroll-padding-top（ヘッダー＋16px）でヘッダーの下に止まる */
/* 段階ごとの出し分け（data-only の値に今の段階が無いものは隠す） */
.demo-panel[data-stage="materials"] [data-only]:not([data-only~="materials"]),
.demo-panel[data-stage="board"] [data-only]:not([data-only~="board"]),
.demo-panel[data-stage="final"] [data-only]:not([data-only~="final"]) { display: none !important; }
.no-js .demo-panel[data-stage] .demo-t[data-only~="board"] { display: grid !important; } /* JS が無いときは、素材の下に場面の情報も出す */
.no-js .demo-panel[data-stage] .demo-name[data-only] { display: none !important; }
/* スマホの「構成を見る」: マスを1列に。1行目は左に素材（小さく）・右に尺と場面の名前、その下に幅いっぱいでテロップ・ナレーション・使う素材・手を入れたこと
   （絵コンテの1行の形。.demo-text と .demo-t を display: contents にして、中身をマスの grid に直接並べる） */
.demo-lines { display: grid; gap: 6px; }
@media (max-width:599px) {
  .demo-panel[data-stage="board"] .demo-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); }
  .demo-panel[data-stage="board"] .demo-cell { grid-template-columns: minmax(0, 38fr) minmax(0, 62fr); grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 4px; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
  .demo-panel[data-stage="board"] .demo-cell:first-child { padding-top: 0; border-top: 0; }
  .demo-panel[data-stage="board"] .demo-text, .demo-panel[data-stage="board"] .demo-t[data-only~="board"] { display: contents; }
  .demo-panel[data-stage="board"] .demo-tile { grid-column: 1; grid-row: 1 / span 2; align-self: start; }
  .demo-panel[data-stage="board"] .demo-meta { grid-column: 2; grid-row: 1; align-self: end; }
  .demo-panel[data-stage="board"] .demo-scene { grid-column: 2; grid-row: 2; align-self: start; }
  .demo-panel[data-stage="board"] .demo-lines { grid-column: 1 / -1; grid-row: 3; margin-top: 8px; font-size: var(--fs-caption); line-height: 1.65; }
}

/* 概算の欄の「参考にしたいトーン」（比較カードの「このトーンで概算する」から来たときだけ。js/estimator.js） */
.est-ref { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin: calc(var(--sp-5) * -1) 0 var(--sp-5); padding: 10px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.est-ref-text { font-size: var(--fs-small); font-weight: 700; color: var(--c-text); font-feature-settings: "palt" 1; }
.est-ref-hint { flex: 1 1 16em; }
.est-ref-clear { min-height: 44px; padding-block: 0; }

/* ---------- ご依頼の流れ ---------- */
/* 2026-10-02（4回目）: 3ステップを灰色の細い枠に（旧版の線と点のタイムラインは _old/rev04_before/style.css）。番号は大きな欧文セリフ、所要時間は小さな枠の文字。
   金は STEP 02 の主 CTA（塗り）だけで、枠は灰色のまま（同じ画面に金を増やさない） */
.steps { display: grid; gap: var(--sp-3); counter-reset: step; }
.step { display: grid; gap: var(--sp-3); justify-items: start; align-content: start; }
.step-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px var(--sp-4); }
.step-no { font-size: 2.75rem; color: var(--c-text); }
.step-time { font-size: var(--fs-caption); line-height: 1.4; color: var(--c-text-2); letter-spacing: .04em; padding: 4px 10px; border: 1px solid var(--panel-line); border-radius: var(--r-pill); }
.step .panel-text { max-width: 30em; }
.step .btn { margin-top: var(--sp-2); }
@media (min-width:1024px) {
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
  .step { grid-template-rows: auto auto 1fr auto; }
  .step .btn { align-self: end; }
}
.after { margin-top: var(--sp-8); padding-top: var(--sp-6); border-top: 1px solid var(--c-line); }
.after .h3 { margin-bottom: var(--sp-4); }
.after-list { display: grid; gap: var(--sp-2); counter-reset: after; }
.after-list li { counter-increment: after; display: flex; gap: var(--sp-3); align-items: baseline; font-size: var(--fs-body); color: var(--c-text-2); padding: 10px 0; border-bottom: 1px solid var(--c-line); }
.after-list li::before { content: counter(after, decimal-leading-zero); font: 400 .75rem/1 var(--ff-mono); color: var(--c-steel); letter-spacing: .08em; flex: none; }
@media (min-width:1024px) { .after-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .after-list li { flex-direction: column; gap: var(--sp-2); border-bottom: 0; border-top: 1px solid var(--c-line); } }
.flow-note { margin-top: var(--sp-5); }
/* 2026-10-02: 「AIを使うところ、人が見るところ」の2つの箱はプロデューサー兼ディレクターの節（#director）へ移した。箱の形（.split-box）は共通 */
/* 2026-10-02（4回目）: 2つの箱は .panel（AI）と .panel--accent（人）になった。旧 .split-box・.split-label は _old/rev04_before/style.css */

/* ---------- 料金（§6.3） ---------- */
.plans { display: grid; gap: var(--sp-4); }
.plan { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); display: grid; gap: var(--sp-4); align-content: start; position: relative; }
.plan.is-recommended { border-color: var(--c-accent); }
.plan-head { display: grid; gap: 4px; }
.plan-badge { position: absolute; top: -1px; right: var(--sp-5); font-size: var(--fs-caption); font-weight: 700; color: var(--c-accent); background: var(--c-surface-2); border: 1px solid var(--c-accent); border-top: 0; padding: 2px 12px 3px; border-radius: 0 0 6px 6px; letter-spacing: .08em; font-feature-settings: "palt" 1; } /* 2026-10-02（4回目）: 金の塗り → 金の細い枠＋金の文字（金の塗りは主 CTA と再生ボタンだけ。§6.3「面を塗らない」とも合う） */
.plan-name { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.3; }
.plan-catch { color: var(--c-text-2); font-size: var(--fs-body); }
.plan-price { display: grid; gap: 6px; }
.price-list { font-size: var(--fs-small); color: var(--c-text-2); }
.plan-for { font-size: var(--fs-body); color: var(--c-text-2); padding-bottom: var(--sp-3); }
.plan-specs { display: grid; }
.spec { display: grid; grid-template-columns: 5.5em 1fr; align-content: start; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--c-line); font-size: var(--fs-small); }
.spec dt { color: var(--c-text-3); }
.plan-samples { padding-top: var(--sp-2); }
@media (min-width:1024px) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: auto; gap: 0 24px; }
  .plan { grid-row: span 11; grid-template-rows: subgrid; row-gap: 0; padding: var(--sp-6); }
  .plan > * { margin: 0; }
  .plan-head { padding-bottom: var(--sp-3); }
  .plan-catch { padding-bottom: var(--sp-4); }
  .plan-price-wrap { padding-bottom: var(--sp-4); }
  .plan-specs { grid-row: span 6; grid-template-rows: subgrid; }
  .spec { grid-template-columns: 1fr; gap: 2px; }
  .plan-samples { padding-top: var(--sp-4); }
}
.campaign-box { margin-top: var(--sp-6); background: var(--c-surface-2); border: 1px solid var(--c-line); border-left: 2px solid var(--c-accent); border-radius: var(--r); padding: var(--sp-5); display: grid; gap: var(--sp-3); }
.campaign-title { font-weight: 700; font-size: var(--fs-h3); line-height: 1.5; font-feature-settings: "palt" 1; }
.campaign-box .dot-list { font-size: var(--fs-body); color: var(--c-text-2); }
.pricing-more { margin-top: var(--sp-8); }
.pricing-more .h3 { margin-bottom: var(--sp-4); }
.pricing-more p { color: var(--c-text-2); }
.pricing-more .check-list { font-size: var(--fs-body); }
.options-title { margin-top: var(--sp-8); margin-bottom: var(--sp-4); }
.options-table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.options-table th, .options-table td { text-align: left; vertical-align: top; padding: 14px 16px 14px 0; border-top: 1px solid var(--c-line); font-weight: 400; }
.options-table thead th { font-size: var(--fs-caption); color: var(--c-text-3); border-top: 0; padding-top: 0; }
.options-table tbody th { font-weight: 700; font-feature-settings: "palt" 1; }
.options-table .opt-note { color: var(--c-text-3); }
@media (max-width:767px) {
  .options-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .options-table, .options-table tbody, .options-table tr, .options-table th, .options-table td { display: block; }
  .options-table tr { padding: 14px 0; border-top: 1px solid var(--c-line); }
  .options-table th, .options-table td { border: 0; padding: 0; }
  .options-table .opt-price { margin-top: 4px; color: var(--c-text); }
  .options-table .opt-note { margin-top: 2px; font-size: var(--fs-caption); }
}
@media (min-width:768px) { .options-table tbody th { width: 34%; } .options-table .opt-price { width: 26%; } }
.subsidy { display: flex; gap: var(--sp-3); align-items: flex-start; margin-top: var(--sp-6); padding: var(--sp-4) 20px; border: 1px solid var(--c-line); border-radius: var(--r); font-size: var(--fs-body); color: var(--c-text-2); }
.subsidy .icon-line { margin-top: 2px; }
.subsidy a { color: var(--c-text); white-space: nowrap; }
.section-cta { margin-top: var(--sp-7); display: flex; justify-content: center; }
.section-cta .btn { width: 100%; }
@media (min-width:600px) { .section-cta .btn { width: auto; } }

/* キャンペーンの表示切り替え（期限後は head のスクリプトが data-campaign="ended" を付ける） */
html[data-campaign="ended"] .campaign-on { display: none !important; }
html:not([data-campaign="ended"]) .campaign-off { display: none !important; }
.campaign-on { display: contents; }
.plan-price.campaign-on, .campaign-box.campaign-on, .badge.campaign-on { display: grid; }
.badge.campaign-on { display: inline-flex; }

/* ---------- 概算シミュレーター（§6.4） ---------- */
.est-layout { display: grid; gap: var(--sp-7); }
@media (min-width:1024px) { .est-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; } }
.q { border: 0; padding: 0; margin: 0 0 var(--sp-6); min-width: 0; }
.q legend { display: flex; align-items: baseline; gap: var(--sp-3); padding: 0; margin-bottom: var(--sp-3); font-size: var(--fs-h3); line-height: 1.5; }
.q-no { font: 400 .75rem/1 var(--ff-mono); color: var(--c-steel); letter-spacing: .1em; flex: none; white-space: nowrap; } /* 見出しが2行のときも「Q8」が縦に割れない */
.q-help { margin-top: var(--sp-2); font-size: var(--fs-caption); color: var(--c-text-3); }
.tiles { display: grid; gap: 8px; }
.tiles-short { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tiles-wide { grid-template-columns: 1fr; }
@media (min-width:600px) { .tiles-short { grid-template-columns: repeat(3, minmax(0, 1fr)); } .tiles-wide { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { position: relative; display: block; cursor: pointer; }
.tile input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tile-text { display: flex; align-items: center; gap: 12px; min-height: 52px; height: 100%; padding: 12px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r); background: var(--c-surface-2); font-size: var(--fs-small); line-height: 1.5; color: var(--c-text-2); transition: background-color var(--dur-1), border-color var(--dur-1), color var(--dur-1); }
.tile-text::before { content: ""; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--c-line-strong); box-shadow: inset 0 0 0 4px var(--c-surface-2); transition: background-color var(--dur-1), border-color var(--dur-1), box-shadow var(--dur-1); }
.tile-check .tile-text::before { border-radius: 4px; box-shadow: none; }
.tile input:checked + .tile-text { background: var(--c-surface-3); border-color: var(--c-text); color: var(--c-text); }
.tile input:checked + .tile-text::before { border-color: var(--c-text); background: var(--c-text); box-shadow: inset 0 0 0 4px var(--c-surface-3); }
.tile-check input:checked + .tile-text::before { box-shadow: none; background: var(--c-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23262626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.tile input:focus-visible + .tile-text { outline: 2px solid var(--c-accent); outline-offset: 2px; }
@media (max-width:389px) { .tile-text { gap: 8px; padding-inline: 10px; } } /* 360・375 幅で「まだ決まっていない」などの文節が割れないように（2026-10-02） */
@media (hover: hover) and (pointer: fine) { .tile:hover .tile-text { border-color: var(--c-text-2); color: var(--c-text); } }
.q-more { border: 1px solid var(--c-line); border-radius: var(--r); background: rgba(255,255,255,.025); margin-bottom: var(--sp-4); } /* 2026-10-02 rev05: rgba(31,31,31,.5) → 白 2.5%（概算は明るい帯になったので、暗い面だと沈む） */
.q-more > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px var(--sp-3); padding: var(--sp-4) 20px; min-height: 56px; }
.q-more-title { font-weight: 700; font-feature-settings: "palt" 1; }
.q-more-summary { grid-column: 1; font-size: var(--fs-caption); color: var(--c-text-3); }
.q-more > summary::after { grid-column: 2; grid-row: 1 / span 2; }
.q-more-body { padding: var(--sp-2) 20px var(--sp-2); border-top: 1px solid var(--c-line); }
.q-more-body .q { margin-top: var(--sp-5); margin-bottom: var(--sp-5); }
.est-reset-row { margin-top: 0; }
.est-result { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5); }
@media (min-width:1024px) {
  .est-result .est-result-title { margin-bottom: var(--sp-3); padding-bottom: 10px; }
  .est-result .res { gap: var(--sp-3); }
  .est-result .res-label { margin-top: 2px; }
  /* 画面の高さに収め、はみ出す分は箱の中でスクロール（CTA は内訳より上。1280x720 でも CTA が見える。レビュー #1） */
  .est-result { position: sticky; top: calc(var(--header-h) + 24px); padding: 28px var(--sp-6); max-height: calc(100vh - var(--header-h) - 48px); max-height: calc(100svh - var(--header-h) - 48px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--c-line-strong) transparent; }
}
.est-result-title { font: 400 var(--fs-eyebrow)/1.4 var(--ff-mono); letter-spacing: var(--ls-eyebrow); color: var(--c-text-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--c-line); }
.res { display: grid; gap: var(--sp-4); }
.res-head { display: grid; gap: 2px; }
.res-label { font-size: var(--fs-caption); color: var(--c-text-3); margin-top: 4px; }
.res-plan { font-size: 1.375rem; font-weight: 700; line-height: 1.4; font-feature-settings: "palt" 1; }
.res-price { display: grid; gap: 6px; }
.res-sub { font-size: var(--fs-caption); color: var(--c-text-3); }
.res-tax { font-size: var(--fs-small); color: var(--c-text-2); }
.res-launch { font-size: var(--fs-small); display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.res-launch-num { font-weight: 700; font-size: 1.125rem; }
.res-launch-tax { color: var(--c-text-3); font-size: var(--fs-caption); }
.res-price.is-flash .price-num, .res-price.is-flash .res-launch-num { animation: est-flash var(--dur-1) linear; }
@keyframes est-flash { from { opacity: .4; } to { opacity: 1; } }
.res-days { display: flex; align-items: baseline; gap: var(--sp-3); padding: 10px 0; border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); font-size: var(--fs-small); }
.res-days dt { color: var(--c-text-3); }
.res-days dd { font-weight: 700; font-size: 1.0625rem; }
.res-note { font-size: var(--fs-caption); color: var(--c-text-2); }
.res-block-title { font-size: var(--fs-caption); font-weight: 700; color: var(--c-text-2); margin-bottom: var(--sp-2); font-feature-settings: "palt" 1; }
.res-breakdown summary.res-block-title { margin-bottom: 0; }
.res-lines { display: grid; font-size: var(--fs-caption); padding-bottom: var(--sp-2); }
.res-lines > div { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-top: 1px solid var(--c-line); }
.res-lines dt { color: var(--c-text-2); }
.res-lines dd { white-space: nowrap; font-variant-numeric: tabular-nums; }
.res-line-launch dt, .res-line-launch dd { color: var(--c-text-3); }
.res-included { display: flex; flex-wrap: wrap; gap: 6px; }
.res-included li { font-size: .75rem; line-height: 1.5; color: var(--c-text-2); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 3px 10px; }
.res-samples { display: grid; gap: 8px; }
.res-samples a { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--c-text-2); text-decoration: none; min-height: 44px; }
.res-samples img { width: 72px; height: 40px; object-fit: cover; border-radius: 4px; flex: none; }
.res-body { color: var(--c-text-2); font-size: var(--fs-small); }
.res-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.res-reasons li { font-size: var(--fs-caption); border: 1px solid var(--c-line-strong); border-radius: var(--r-pill); padding: 3px 10px; }
.res-caption { margin-top: -6px; }
.res-after { display: grid; gap: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
@media (hover: hover) and (pointer: fine) { .res-samples a:hover { color: var(--c-text); } }

/* ---------- 比較表 ---------- */
.compare { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.compare th, .compare td { text-align: left; vertical-align: top; padding: 16px; border-top: 1px solid var(--c-line); font-weight: 400; }
.compare thead th { font-weight: 700; font-feature-settings: "palt" 1; border-top: 0; color: var(--c-text-2); }
.compare tbody th { font-weight: 700; color: var(--c-text-2); white-space: nowrap; padding-left: 0; font-feature-settings: "palt" 1; }
.compare td { color: var(--c-text-body); }
/* 2026-10-02（4回目）: パトゥートの列は金の細い枠（左右・上・下）＋ごく薄い金の面（頭だけ一段濃く。この画面の主役）。旧版は surface-3 の面＋上の金線（_old/rev04_before/style.css） */
.compare .is-hi { background: rgba(201,162,39,.035); color: var(--c-text); box-shadow: inset 1px 0 0 var(--gold-line), inset -1px 0 0 var(--gold-line); }
.compare thead .is-hi { color: var(--c-accent); letter-spacing: .1em; border-radius: var(--r-panel) var(--r-panel) 0 0; background: rgba(201,162,39,.08); box-shadow: inset 1px 0 0 var(--gold-line), inset -1px 0 0 var(--gold-line), inset 0 1px 0 var(--gold-line); }
.compare tbody tr:last-child td.is-hi { border-radius: 0 0 var(--r-panel) var(--r-panel); box-shadow: inset 1px 0 0 var(--gold-line), inset -1px 0 0 var(--gold-line), inset 0 -1px 0 var(--gold-line); }
.compare tbody td.is-hi { font-weight: 700; font-feature-settings: "palt" 1; }
.compare .cmp-label { display: none; }
@media (max-width:767px) {
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tr { background: var(--panel); border: 1px solid var(--panel-line); border-radius: var(--r-panel); padding: var(--sp-4) 18px; margin-bottom: var(--sp-3); }
  .compare tbody th { padding: 0 0 var(--sp-2); border: 0; color: var(--c-text); }
  .compare td { padding: 10px 0; border-top: 1px solid var(--c-line); display: grid; grid-template-columns: 8.5em 1fr; gap: var(--sp-3); }
  /* 列の名前（SP の左の小さな見出し）は、文節の <wbr> が入る本物の span（以前は ::before の attr(data-label) で「個人のクリエイタ／ー」と割れた。2026-10-02）。
     読み上げは thead の見出しで足りるので aria-hidden */
  .compare .cmp-label { display: block; font-size: var(--fs-caption); color: var(--c-text-3); font-weight: 400; }
  .compare td.is-hi { background: none; box-shadow: none; border-left: 2px solid var(--gold-line); padding-left: 12px; margin-left: -14px; }
  .compare tbody tr:last-child td.is-hi { box-shadow: none; border-radius: 0; }
  .compare td.is-hi .cmp-label { color: var(--c-accent); font-weight: 700; letter-spacing: .08em; }
}
.compare-note { margin-top: var(--sp-5); }
.compare-sources { margin-top: var(--sp-2); display: grid; gap: 2px; }

/* ---------- プロデューサー兼ディレクター（#director。2026-10-02 新設。旧「担当者紹介」と流れの「AIと人の分担」をまとめた） ----------
   面は surface-1（担当者の帯）。すぐ後の「3つの約束」は地（#111）。写真は載せない
   2026-10-02（4回目の指示「箱と文章が多く重心が分からない」）: 重心を「人が確かめること」に置いた。
   人の箱だけ金の細い枠＋右上の金のにじみ（.panel--accent＝この節の主役）、AI の箱と PROFILE は灰色の細い枠（.panel＝脇役）。
   数字（15年以上・500本以上）は大きな欧文セリフ＋金の単位、人が確かめる5つは「番号＋見出し（白の太字）＋本文（小さめ・控えめの色）」。旧版は _old/rev04_before/style.css */
/* 2026-10-02 rev05: 節の境目は帯の色（.band）と上の端の線で見せるので、すぐ後の節の上の罫線（旧 .pd + .section）はやめた */
.pd-top { display: grid; gap: var(--sp-6); margin-bottom: var(--sp-7); }
.pd-top .sec-head { margin-bottom: 0; }
.pd-head .h2 { max-width: 14em; }
/* 数字3つ: 欧文セリフの大きな数字＋金の単位（方針 §3.1 の改訂「数字の単位は差し色にしてよい」）。3つ目は数字ではないので和文 700 */
.pd-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-4); }
.pd-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 10px; padding-top: var(--sp-3); border-top: 1px solid var(--c-line-strong); }
.pd-stat-num { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; line-height: 1; }
.pd-num { font: 400 clamp(3rem, 2.2rem + 2.8vw, 4.5rem)/1 var(--ff-display); letter-spacing: -.01em; font-variant-numeric: lining-nums; color: var(--c-text); }
.pd-unit { font-size: var(--fs-h3); font-weight: 700; letter-spacing: .04em; font-feature-settings: "palt" 1; color: var(--c-text); } /* rev04 レビュー修正: 金 → 白（PC 1440 の1画面目で CTA・人の枠と3か所が光っていた） */
.pd-stat-label { font-size: var(--fs-caption); color: var(--c-text-2); line-height: 1.5; letter-spacing: .04em; }
.pd-stat--text { grid-column: 1 / -1; }
.pd-stat-text { font-size: var(--fs-h3); font-weight: 700; line-height: 1.5; letter-spacing: var(--ls-heading); font-feature-settings: "palt" 1; color: var(--c-text); }
/* 担当の1行（2026-10-02）: 数字の欄のすぐ下。誰の数字かが分かるように。名前だけ本文の色・太字。折り返しは名前の後・「／」の後だけ */
.pd-owner { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--c-line); font-size: var(--fs-small); line-height: 1.7; color: var(--c-text-2); }
.pd-owner-name { color: var(--c-text); font-weight: 700; letter-spacing: .06em; font-feature-settings: "palt" 1; }
/* AI（脇役・灰色の枠）と人（主役・金の枠）。SP は AI の箱を畳み、人が確かめる5つを開いて見せる */
.pd-split { display: grid; gap: var(--sp-4); align-items: start; }
.pd-ai-panel { display: grid; gap: var(--sp-4); align-content: start; }
.pd-ai-panel .panel-list { font-size: var(--fs-panel-body); color: var(--c-text-body); }
.pd-ai-panel .dash-list > li:first-child { border-top-color: var(--panel-line); }
.pd-ai-panel .dash-list > li:last-child { border-bottom: 0; padding-bottom: 0; }
.pd-ai-sum { display: inline-flex; align-items: center; gap: 10px; }
.pd-ai-sum .icon-line { width: 20px; height: 20px; }
.pd-checks { display: grid; gap: var(--sp-4); align-content: start; }
.pd-check-list { display: grid; }
/* 番号と見出しを1行に、説明は SP では幅いっぱい（600px 以上は見出しの下にそろえる。1024px 以上は「番号・見出し｜説明」の2列） */
.pd-check-list > li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: var(--sp-2); row-gap: 6px; align-items: baseline; padding: 18px 0; border-top: 1px solid var(--gold-line-soft); }
.pd-check-list > li:last-child { padding-bottom: 0; }
.pd-check-no { font: 400 1.5rem/1 var(--ff-display); letter-spacing: 0; color: var(--c-text-3); font-variant-numeric: lining-nums; }
.pd-check-title { font-size: 1.125rem; line-height: 1.55; font-weight: 700; letter-spacing: var(--ls-heading); color: var(--c-text); font-feature-settings: "palt" 1; }
.pd-check-list p { grid-column: 1 / -1; color: var(--c-text-body); font-size: var(--fs-panel-body); line-height: 1.85; }
/* 締めの一言: AI と人の2つの箱の下に、幅いっぱいの1行（上に細線）。この節でいちばん伝えたい言葉なので本文の見出しより大きく（2026-10-02 レビュー修正） */
.pd-closing { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--c-line-strong); font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); line-height: 1.5; }
/* 担当者（PROFILE）: 灰色の細い枠（脇役）。2026-10-02 rev04 のレビュー修正で並びを「名前 → 要点3つ → ひとこと → 紹介文」に（選ぶ理由を先に）。
   SP は肩書きを出さず（節の頭の担当の1行と重なる）、紹介文の2段落を「経歴をくわしく見る」に畳む。1024px 以上は 左＝名前・要点／右＝紹介文・ひとこと */
.pd-person { display: grid; gap: var(--sp-5); margin-top: var(--sp-8); }
.pd-name { display: grid; gap: 4px; align-content: start; }
.pd-profile-label { margin-bottom: 6px; }
.director-role { font-size: var(--fs-caption); color: var(--c-text-3); }
.director-person { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 700; letter-spacing: .12em; line-height: 1.3; font-feature-settings: "palt" 1; }
.director-bio { color: var(--c-text-body); font-size: var(--fs-panel-body); line-height: 1.85; max-width: var(--prose); }
.director-bio + .director-bio { margin-top: var(--sp-3); }
.director-message { margin: 0; padding-left: var(--sp-5); border-left: 1px solid var(--c-line-strong); font-size: var(--fs-lead); line-height: 1.8; max-width: var(--prose); color: var(--c-text); }
/* 引用の頭の「「」の前の約物の空き（半字）を詰めて、行頭をそろえる（対応するブラウザだけ。Chrome 123〜・Safari 18.4〜） */
@supports (text-spacing-trim: trim-start) { .director-message p { text-spacing-trim: trim-start; } }
.director-points { max-width: var(--prose); font-size: var(--fs-panel-body); color: var(--c-text-2); }
.pd-person .check-list > li:first-child { border-top-color: var(--panel-line); }
.pd-person .check-list > li:last-child { border-bottom: 0; }
/* 紹介文の畳み（SP だけ。600px 以上は見出しを隠して常に開く＝main.js の [data-sp-fold]） */
.pd-bio-fold > summary { border-top: 1px solid var(--panel-line); }
.pd-bio-fold[open] > summary { margin-bottom: var(--sp-2); }
@media (max-width:599px) {
  /* SP: AI の箱は畳み（灰色の枠の1行）。開くと同じ枠の中に4つ。中の見出し（ラベルと枠の見出し）は畳みの見出しが兼ねる */
  .pd-ai { border: 1px solid var(--panel-line); border-radius: var(--r-panel); background: var(--panel); }
  .pd-ai.split-fold > summary { border: 0; padding: 6px 18px; min-height: 56px; color: var(--c-text); }
  .pd-ai.split-fold[open] > summary { margin-bottom: 0; }
  .pd-ai > .panel { border: 0; background: none; padding: 0 18px 18px; }
  .pd-ai > .panel > .panel-head, .pd-ai > .panel > .panel-title { display: none; }
  .pd-check-list > li { padding: 16px 0; }
  .pd-person { gap: var(--sp-4); margin-top: var(--sp-7); }
  .pd-person .check-list > li:first-child { border-top: 0; padding-top: 0; }
  .pd-bio-fold > summary { min-height: 48px; }
}
@media (min-width:600px) {
  .pd-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
  .pd-stat--text { grid-column: auto; }
  .pd-check-list p { grid-column: 2; }
}
/* 1024px 以上: 左に AI の箱（4列。上にそろえ、スクロール中は人の箱の横についてくる）、右に人が確かめる5つ（8列。「番号・見出し｜説明」の2列）。
   締めの一言は2つの箱の下に幅いっぱい */
@media (min-width:1024px) {
  .pd-top { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; align-items: end; margin-bottom: var(--sp-8); }
  .pd-top .sec-head { grid-column: span 6; }
  .pd-facts { grid-column: 7 / -1; }
  .pd-split { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .pd-ai { grid-column: 1 / span 4; grid-row: 1; position: sticky; top: calc(var(--header-h) + 32px); }
  .pd-checks { grid-column: 5 / -1; grid-row: 1; padding: var(--sp-6) 40px 40px; }
  .pd-check-list > li { grid-template-columns: 2.75rem 10.5em minmax(0, 1fr); column-gap: var(--sp-4); padding: 20px 0; }
  .pd-check-list p { grid-column: 3; }
  .pd-closing { margin-top: var(--sp-7); padding-top: var(--sp-6); }
  /* 左の列: 名前 → 要点3つ（名前の下を空けない）。右の列: 経歴 → ひとこと。2行目は 1fr で、右の列の高さに合わせて伸びる */
  /* 右の列は DOM の順（ひとこと → 紹介文）と逆に、紹介文（1〜2行目）→ ひとこと（3行目）。2行目は 1fr で、紹介文の高さを受け持つ */
  .pd-person { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto 1fr auto; column-gap: 24px; row-gap: var(--sp-5); padding: 40px; }
  .pd-name { grid-column: 1 / span 5; grid-row: 1; }
  .pd-person .director-points { grid-column: 1 / span 5; grid-row: 2 / span 2; align-self: start; padding-right: var(--sp-5); }
  .pd-bio-fold { grid-column: 6 / -1; grid-row: 1 / span 2; }
  .pd-person .director-message { grid-column: 6 / -1; grid-row: 3; }
}

/* ---------- FAQ ---------- */
/* 2026-10-02 レビュー修正: 見出し h2「よくある質問」は章の見出しの和文の位置（.chapter--title）。PC の左4列の大きな見出し（旧 faq-side・sticky）はやめ、
   一覧は章の見出しの下に左ぞろえ（.col-8）。PC で今どの節かは、ヘッダーのナビの下線（よくある質問）が示す */
.faq-item { border-top: 1px solid var(--c-line); }
.faq-item:last-child { border-bottom: 1px solid var(--c-line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0; min-height: 56px; padding: 18px 0; }
.faq-item summary .faq-q { margin-right: var(--sp-4); }
.faq-q { flex: 1; min-width: 0; font-size: 1.0625rem; font-weight: 700; line-height: 1.6; font-feature-settings: "palt" 1; }
/* 2026-10-02（4回目）: 質問の前に番号（Q01。等幅・スチール）。答えは質問の頭にそろえ、15〜16px・行送り 1.85・控えめの色 */
.faq-no { flex: none; width: 2.75rem; align-self: flex-start; margin-top: 5px; font: 400 .75rem/1.6 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); }
.faq-icon { position: relative; width: 16px; height: 16px; flex: none; transition: transform var(--dur-2) var(--ease-standard); }
.faq-icon::before, .faq-icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--c-text-2); }
.faq-icon::after { transform: rotate(90deg); }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-a { padding: 0 0 var(--sp-5) 2.75rem; color: var(--c-text-body); font-size: var(--fs-panel-body); line-height: 1.85; max-width: calc(var(--prose) + 2.75rem); }
@media (max-width:599px) { .faq-no { width: 2.25rem; } .faq-a { padding-left: 2.25rem; } } /* SP は番号の幅を詰め、答えの幅を残す */
.faq-item[open] .faq-a { animation: fade-in var(--dur-2) var(--ease-out); }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover .faq-q { color: var(--c-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; } }

/* ---------- 無料見積りフォーム（§6.5） ---------- */
.contact-side .lead { font-size: var(--fs-body); }
.contact-next { margin-top: var(--sp-6); display: grid; gap: var(--sp-3); } /* 2026-10-02（4回目）: 灰色の細い枠（.panel） */
.contact-next .panel-head { display: flex; }
.contact-next .panel-label { margin: 0; font-size: var(--fs-panel-label); letter-spacing: .14em; color: var(--c-text-2); }
.next-list { counter-reset: nx; display: grid; gap: 0; }
.next-list li { counter-increment: nx; position: relative; padding: 14px 0 14px 2.6em; border-top: 1px solid var(--panel-line); font-size: var(--fs-panel-body); line-height: 1.8; color: var(--c-text-body); }
.next-list li::before { content: counter(nx, decimal-leading-zero); position: absolute; left: 0; top: 13px; font: 400 1.375rem/1.2 var(--ff-display); color: var(--c-text); font-variant-numeric: lining-nums; }
.quote-form { background: var(--c-surface-2); border: 1px solid var(--c-line); border-radius: var(--r); padding: var(--sp-5) 20px; display: grid; gap: var(--sp-5); }
@media (min-width:1024px) { .quote-form { padding: var(--sp-6); } }
.field { display: grid; gap: 8px; min-width: 0; }
.field-label { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--c-text-2); }
.req, .opt { display: inline-block; font-size: var(--fs-eyebrow); /* 11→12px（方針 §3.3 の下限） */ font-weight: 400; line-height: 1; padding: 4px 6px; border: 1px solid var(--c-line-strong); border-radius: 4px; color: var(--c-text-3); letter-spacing: .04em; }
.field input:not([type=checkbox]), .field select, .field textarea { width: 100%; min-height: 52px; font-size: 16px; line-height: 1.5; background: var(--c-surface-1); border: 1px solid var(--c-line-strong); border-radius: var(--r); padding: 12px 14px; color: var(--c-text); transition: border-color var(--dur-1); -webkit-appearance: none; appearance: none; }
.field textarea { min-height: calc(1.5em * 4 + 26px); resize: vertical; }
.field select { padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23CCCCCC' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.field select option { background: var(--c-surface-2); color: var(--c-text); }
.field ::placeholder { color: #8A8883; opacity: 1; }
.field input:not([type=checkbox]):focus, .field select:focus, .field textarea:focus { border-color: var(--c-accent); outline: 2px solid var(--c-accent); outline-offset: 2px; }
.field [aria-invalid="true"] { border-color: var(--c-danger); }
.field-help { font-size: var(--fs-caption); color: var(--c-text-3); }
.field-error { font-size: var(--fs-small); color: var(--c-danger); display: flex; gap: 6px; align-items: baseline; }
.field-error::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1px solid currentColor; font: 700 11px/14px var(--ff-jp); text-align: center; }
.est-summary { display: block; min-height: 52px; padding: 13px 14px; border: 1px dashed var(--c-line-strong); border-radius: var(--r); font-size: var(--fs-small); color: var(--c-text-3); line-height: 1.6; }
.est-summary.is-filled { border-style: solid; color: var(--c-text); background: var(--c-surface-1); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.check { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--fs-small); min-height: 44px; padding-top: 10px; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; border: 1px solid var(--c-line-strong); border-radius: 4px; background: var(--c-surface-1); -webkit-appearance: none; appearance: none; display: grid; place-items: center; cursor: pointer; }
.check input:checked { background: var(--c-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23111111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; border-color: var(--c-text); }
.check input:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }
.check .req { margin-left: 8px; vertical-align: 1px; }
.field-consent .caption { padding-left: 34px; }
.field-consent .field-error { padding-left: 34px; }
.turnstile { min-height: 65px; }
.below-submit { margin-top: calc(var(--sp-5) * -1 + 8px); text-align: center; }
.form-status { font-size: var(--fs-small); color: var(--c-text-2); }
.form-status.is-error { color: var(--c-danger); }
.form-errors { border: 1px solid var(--c-danger); border-radius: var(--r); padding: var(--sp-4); font-size: var(--fs-small); }
.form-errors p { color: var(--c-danger); font-weight: 700; margin-bottom: 6px; }
.form-errors a { color: var(--c-text); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }

/* ---------- 会社概要・フッター ---------- */
/* 2026-10-02 rev05: 会社概要は明るい帯（rev05 は warm、レビュー修正で char）になったので、上の余白を戻した（旧: 問い合わせと同じ地の続きとして padding-top: 0）。
   レビュー修正: 見出し h2「会社概要」は章の見出しの和文の位置（.chapter--title）。大きな h2 の行は出さない */
/* 2026-10-02（4回目）: 灰色の細い枠（.panel）の中の定義リスト。項目名は 13px・字間・控えめの色、値は本文の色 */
.company-list { display: grid; max-width: 880px; padding-block: 8px; }
.company-list > div { display: grid; gap: 4px; padding: 14px 0; border-bottom: 1px solid var(--panel-line); }
.company-list > div:last-child { border-bottom: 0; }
.company-list dt { font-size: var(--fs-caption); letter-spacing: .08em; color: var(--c-text-3); }
.company-list dd { font-size: var(--fs-panel-body); color: var(--c-text); }
@media (min-width:1024px) { .company-list { padding: 12px 40px; } }
@media (min-width:768px) { .company-list > div { grid-template-columns: 10em 1fr; gap: var(--sp-5); } }
.site-footer { background: var(--band-deep); border-top: 1px solid rgba(255,255,255,.08); padding: var(--sp-7) 0 calc(var(--sp-7) + var(--sticky-h) + env(safe-area-inset-bottom)); }
@media (min-width:1024px) { .site-footer { padding-bottom: var(--sp-7); } }
.footer-inner { display: grid; gap: var(--sp-4); }
.footer-logo { padding: 0; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 var(--sp-5); }
.footer-links a { display: inline-block; padding: 10px 0; font-size: var(--fs-small); color: var(--c-text-2); text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .footer-links a:hover { color: var(--c-text); text-decoration: underline; } }

/* ---------- スマホ下部固定 CTA（§4.3） ---------- */
.dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom)); background: rgba(17,17,17,.96); border-top: 1px solid var(--c-line); box-shadow: var(--shadow-float); transform: translateY(110%); transition: transform var(--dur-2) var(--ease-standard); }
.dock[data-mode="cta"], .dock[data-mode="est"] { transform: none; }
.dock-cta { display: grid; grid-template-columns: 2fr 1fr; gap: 8px; }
.dock-cta .btn { min-height: 48px; padding: 0 12px; font-size: .9375rem; }
.dock-est { display: none; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; text-decoration: none; }
.dock[data-mode="est"] .dock-cta { display: none; }
.dock[data-mode="est"] .dock-est { display: flex; }
.dock-est-text { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-weight: 700; font-feature-settings: "palt" 1; }
.bar-launch { font-size: var(--fs-caption); color: var(--c-accent); }
.dock-est-go { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--c-text-2); white-space: nowrap; }
@media (min-width:1024px) { .dock { display: none; } }

/* ---------- プレーヤー（PC のモーダル） ---------- */
.player { padding: 0; border: 0; background: transparent; color: var(--c-text); width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; overflow: hidden auto; } /* 低い画面で情報欄がはみ出しても、スクロールで届く（2026-10-02） */
.player::backdrop { background: rgba(0,0,0,.85); }
.player[open] { display: grid; place-items: center; place-items: safe center; }
.player[open] .player-inner { animation: fade-in var(--dur-3) var(--ease-out); }
.player-inner { display: grid; gap: var(--sp-3); justify-items: center; padding: var(--sp-4); max-width: 100%; }
/* 2026-10-02（3回目）: 情報欄を足したので、映像と情報を黒い面に載せる（背面のページの文字と重なって読みにくくならないように） */
.player-inner { background: var(--c-bg); border: 1px solid var(--c-line); border-radius: 12px; padding: var(--sp-4) 20px var(--sp-3); margin: var(--sp-3); }
.player-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); }
.player-title { font-weight: 700; font-feature-settings: "palt" 1; }
.player-close { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-surface-2); color: var(--c-text); flex: none; }
.player-frame { background: #000; border-radius: var(--r); overflow: hidden; }
.player-frame video { width: 100%; height: 100%; object-fit: contain; background: #000; }
/* 2026-10-02（3回目）: 横型は下に情報欄（約 120px）を置くので、映像の高さは画面の高さ − 300px まで。縦型は右に情報欄 */
.player { --pw: min(1200px, 90vw, calc((100vh - 350px) * 16 / 9)); }
.player-frame.is-h { width: var(--pw); aspect-ratio: 16 / 9; }
.player-body.is-h { grid-template-columns: var(--pw); } /* 情報欄の幅は映像の幅にそろえる（長い文で広がらないように） */
.player-frame.is-v { height: min(100vh - 190px, 1280px); aspect-ratio: 9 / 16; }
.player-badge { max-width: 60ch; text-align: center; }
.player .player-head, .player .player-badge { width: 100%; }
@media (hover: hover) and (pointer: fine) { .player-close:hover { border-color: var(--c-text); } }

/* ---------- サブページ（送信後・法定ページ） ---------- */
.sub-main { padding-top: var(--header-h); min-height: 70vh; }
.thanks .h2 { margin: var(--sp-3) 0 var(--sp-4); }
.thanks .lead { margin-bottom: var(--sp-5); }
.thanks .h3 { margin: var(--sp-6) 0 var(--sp-3); }
.thanks-id { font-size: var(--fs-small); color: var(--c-text-2); }
.thanks-id .mono { font-family: var(--ff-mono); letter-spacing: .08em; color: var(--c-text); margin-left: 8px; }
.thanks-offhours { margin-top: var(--sp-2); }
.thanks .next-list + .caption { margin-top: var(--sp-4); }
.thanks-actions { display: grid; gap: var(--sp-3); margin-top: var(--sp-7); }
@media (min-width:600px) { .thanks-actions { display: flex; flex-wrap: wrap; } }
.legal .h2 { margin: var(--sp-3) 0 var(--sp-5); }
.legal .lead { margin-bottom: var(--sp-6); font-size: var(--fs-body); }
.legal .h3 { margin: var(--sp-6) 0 var(--sp-3); font-size: 1.125rem; }
.legal p, .legal li { color: var(--c-text-2); }
.legal p + p { margin-top: var(--sp-3); }
.legal .dot-list { margin-top: var(--sp-2); }
.legal-table { border-top: 1px solid var(--c-line); }
.legal-table > div { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.legal-table dt { font-weight: 700; font-size: var(--fs-small); font-feature-settings: "palt" 1; }
.legal-table dd { color: var(--c-text-2); }
@media (min-width:768px) { .legal-table > div { grid-template-columns: 12em 1fr; gap: var(--sp-5); } }
.legal-date { margin-top: var(--sp-7); }
.draft-banner { border: 1px solid var(--c-line); border-left: 2px solid var(--c-accent); background: var(--c-surface-2); border-radius: var(--r); padding: var(--sp-4) 20px; font-size: var(--fs-small); color: var(--c-text-2); margin-bottom: var(--sp-6); }
mark.todo { background: rgba(201,162,39,.16); color: var(--c-text); padding: 1px 4px; border-radius: 3px; font-size: .9em; }

/* ---------- スマホの畳み（600px 未満だけ。レビュー #5） ----------
   [data-sp-fold]: HTML は open で出し（JS なし・PC でも中身が見える）、main.js が 600px 未満で閉じる。600px 以上では見出しを隠して常に開く
   [data-sp-open]: 600px 未満で開き、見出しを隠す（外側の畳みの中で二重に畳まない）。600px 以上は通常の開閉
   .only-sp / .hide-sp: 同じボタンを置き場所だけ変えるときの出し分け */
.sp-fold > summary, .plan-more > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-height: 48px; padding: 4px 0; font-size: 1rem; font-weight: 700; color: var(--c-text-2); font-feature-settings: "palt" 1; }
.sp-fold > summary::-webkit-details-marker, .plan-more > summary::-webkit-details-marker { display: none; }
.sp-fold > summary::after, .plan-more > summary::after { content: ""; width: 8px; height: 8px; border-right: 1.5px solid var(--c-text-3); border-bottom: 1.5px solid var(--c-text-3); transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-2) var(--ease-standard); flex: none; }
.sp-fold[open] > summary::after, .plan-more[open] > summary::after { transform: rotate(-135deg) translateY(-2px); }
@media (hover: hover) and (pointer: fine) { .sp-fold > summary:hover, .plan-more > summary:hover { color: var(--c-text); } }
/* 出し分け（上の見出しの基本形より後に書く。600px 以上では畳みの見出しを隠して常に開く） */
@media (max-width:599px) { .hide-sp { display: none !important; } .js [data-sp-open] > summary { display: none; } }
@media (min-width:600px) { .only-sp { display: none !important; } .sp-fold > summary { display: none; } }
/* サンプルのカード: 2026-10-02（3回目）から「詳しく見る」（.card-more）はどの幅でも初めは閉じる（SP だけ畳む仕組み data-sp-fold は使わない）。旧ルールは _old/rev03_before/style.css */
/* 料金: SP は各プランの「映像・文字と音・修正」を「内容を見る」に、オプション表を「オプション一覧」に畳む */
.plan-more { border-top: 1px solid var(--c-line); }
.plan-more .spec:first-child { border-top: 0; }
@media (max-width:599px) { .spec.spec-fold { display: none; } }
@media (min-width:600px) { .plan-more { display: none; } }
.options-fold > summary { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.options-fold[open] > summary { border-bottom: 0; }

/* 見出しそのものを開閉にする畳み（料金の「全プラン共通」「〜について」）。600px 以上はふつうの見出しに見せる */
.sp-fold-h > summary { display: flex; min-height: 48px; }
.sp-fold-h > summary .h3 { margin: 0; }
@media (max-width:599px) { .pricing-more .sp-fold-h > summary { border-top: 1px solid var(--c-line); padding: var(--sp-3) 0; } .pricing-more .sp-fold-h[open] > summary { padding-bottom: var(--sp-4); } .pricing-more.grid { gap: 0; } .pricing-more .sp-fold-h:last-child > summary { border-bottom: 1px solid var(--c-line); } .pricing-more .sp-fold-h:last-child[open] > summary { border-bottom: 0; } .pricing-more .sp-fold-h > p { padding-bottom: var(--sp-4); } }
@media (min-width:600px) { .sp-fold-h > summary { display: block; min-height: 0; pointer-events: none; cursor: default; margin-bottom: var(--sp-4); } .sp-fold-h > summary::after { display: none; } }
.pricing-more .sp-fold-h > summary .h3 { margin-bottom: 0; }
/* AI と人の分担の2つの箱（SP は畳む） */
.split-fold > summary { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.split-fold[open] > summary { border-bottom: 0; margin-bottom: var(--sp-2); }
/* 比較表（SP は3項目＋「ほかの比較を見る」） */
.cmp-toggle { margin-top: var(--sp-1); padding-inline: 0; }
@media (max-width:599px) { .js .compare:not(.is-open) tr.cmp-more { display: none; } }
.no-js .cmp-toggle { display: none; }
/* ---- 2巡目（SP の長さ。レビュー #5 の目標「24画面以下」） ---- */
/* SP の余白を一段だけ詰める: セクションの上下 72→64px、見出しブロックと中身の間 48→32px、サンプルの間 24→16px */
@media (max-width:599px) {
  :root { --section-y: 4rem; }
  .sec-head { margin-bottom: var(--sp-6); }
  .samples-grid { gap: var(--sp-4); }
  /* 2026-10-02 rev03 のレビュー修正: 上の余白 40→16px・見出しの塊の下 32→16px・チップの下 24→12px・リード 17px→16px（2行）。
     #samples に飛んだ直後、390×664 で最初のサムネイルの半分以上、375×553 で3割以上が見える（ヒーローは変えない） */
  .samples-sec { padding-top: var(--sp-4); }
  .samples-head.sec-head { margin-bottom: var(--sp-4); gap: var(--sp-2); }
  .samples-head .lead { font-size: 1rem; line-height: 1.7; }
  .filters { margin-bottom: var(--sp-3); }
}
@media (max-width:389px) { .samples-head .lead { letter-spacing: .01em; } } /* 375px でもリードの1文目（21字）が1行に入り、2行で収まる（.04em だと 349px＞343px で3行） */
/* 料金: SP は「全プラン共通」「〜について」「オプション一覧」を同じ並びの畳みにする（オプションの見出しは畳みの見出しが兼ねる） */
@media (max-width:599px) {
  .options-title { display: none; }
  .pricing-more .sp-fold-h:last-child > summary, .pricing-more .sp-fold-h:last-child[open] > summary { border-bottom: 0; }
}
/* ご依頼の流れ「お申込みのあとは」（SP は見出しで開閉） */
@media (max-width:599px) {
  .after.sp-fold-h { margin-top: var(--sp-6); padding-top: 0; border-top: 0; }
  .after.sp-fold-h > summary { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); padding: var(--sp-2) 0; }
  .after.sp-fold-h[open] > summary { border-bottom: 0; }
}
/* 料金: 「向いている動画」も SP は「内容を見る」の中 */
.plan-more > .plan-for { padding: var(--sp-3) 0; }
.plan-more .plan-for + dl .spec:first-child { border-top: 1px solid var(--c-line); }
/* 概算の結果: 「このプランに含まれるもの・近いサンプル」（SP は畳む。600px 以上は見出しを隠して常に開く） */
.res-more-body { display: grid; gap: var(--sp-4); }
@media (max-width:599px) { .res-more > summary { border-top: 1px solid var(--c-line); } .res-more[open] > .res-more-body { padding: var(--sp-2) 0 var(--sp-2); } }
/* FAQ（SP は6問＋「ほかの質問を見る」） */
.faq-item:last-of-type { border-bottom: 1px solid var(--c-line); }
.faq-toggle { margin-top: var(--sp-2); padding-inline: 0; }
@media (max-width:599px) { .js .faq-list:not(.is-open) .faq-more { display: none; } .js .faq-list:not(.is-open) .faq-sp-last { border-bottom: 1px solid var(--c-line); } }
.no-js .faq-toggle { display: none; }
/* フォームの「このあとの流れ」（SP は見出しで開閉） */
.next-fold > summary .mini-title { display: block; margin: 0; }
.next-fold > summary .panel-head { min-height: 40px; }
@media (min-width:600px) { .next-fold > summary { margin-bottom: var(--sp-3); } }
.next-fold > .caption { margin-top: var(--sp-3); }
@media (max-width:599px) {
  .next-fold > summary { border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
  .next-fold[open] > summary { border-bottom: 0; }
  .next-fold > summary .mini-title { font-size: inherit; color: inherit; }
}
/* サンプルのカード（SP）: 向きの切り替えと再生を1行に */
@media (max-width:599px) {
  .sample .seg button { padding: 0 10px; min-width: 46px; } /* 375px 幅でも向きの切り替えと「再生する」が1行に入る（タップ領域 46×44） */
}
/* 会社概要: 項目名と値を横に並べる（SP も） */
.company-list > div { grid-template-columns: 5.75rem 1fr; gap: var(--sp-3); align-items: baseline; } /* 2026-10-02（4回目）: 枠の中なので項目名の列を 6.5em → 5.75rem（項目名は 13px） */
@media (min-width:768px) { .company-list > div { grid-template-columns: 9rem 1fr; gap: var(--sp-5); } }
/* フォーム: SP・タブレットは「リード → フォーム → このあとの流れ」の順（方針 §4.2） */
@media (max-width:1023px) { .contact-side { display: contents; } .contact-next { order: 1; margin-top: 0; } }

/* ---------- スマホ・タブレットのメニュー（2026-10-02 ユーザーの指示・3回目。js/menu.js・build.mjs の header()/menu()） ----------
   PC のナビが出ない 1023px 以下で、ヘッダーの右端に 44px のメニューボタン。押すとヘッダーのすぐ下に黒いパネルが降りる（下は暗い背景。押すと閉じる）。
   パネル: header.nav と同じ項目（番号＋大きな文字・細い罫線）＋「無料見積り」の大きな金のボタン（開いている間はヘッダーの「無料見積り」を隠すので、金は1つ）。
   パネルは下部固定 CTA（z-index 45）より上。開いている間は背面のスクロールを止める（html.menu-open）。動きを減らす設定では降りる動きを付けない。
   JS が無いときは .menu-btn-nojs（#site-menu へのリンク）で :target のパネルが開く。背景のリンク（#menu-closed）で閉じる */
.menu-btn { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; margin-right: calc(-1 * var(--menu-pull)); padding: 0; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--c-text); text-decoration: none; -webkit-tap-highlight-color: transparent; }
.menu-btn-icon { position: relative; display: block; width: 22px; height: 14px; }
.menu-btn-icon > span { position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform var(--dur-2) var(--ease-standard), opacity var(--dur-1) linear; }
.menu-btn-icon > span:nth-child(1) { top: 0; }
.menu-btn-icon > span:nth-child(2) { top: 6.25px; }
.menu-btn-icon > span:nth-child(3) { top: 12.5px; }
.menu-btn[aria-expanded="true"] .menu-btn-icon > span:nth-child(1) { transform: translateY(6.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn-icon > span:nth-child(2) { opacity: 0; }
.menu-btn[aria-expanded="true"] .menu-btn-icon > span:nth-child(3) { transform: translateY(-6.25px) rotate(-45deg); }
.js .menu-btn-nojs, .no-js .menu-btn[data-menu-btn] { display: none; }
@media (max-width:1023px) { .header-inner { gap: var(--sp-2); } }
@media (min-width:1024px) { .menu-btn, .menu { display: none !important; } }
.menu { display: none; position: fixed; inset: var(--header-h) 0 0; z-index: 46; }
.menu.is-open, .no-js .menu:target { display: block; }
.menu-scrim { position: absolute; inset: 0; background: rgba(0,0,0,.72); touch-action: none; }
.menu-sheet { position: relative; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; background: var(--c-bg); border-bottom: 1px solid var(--c-line); padding: var(--sp-2) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom)); }
.menu.is-open .menu-sheet { animation: menu-in var(--dur-3) var(--ease-out); }
@keyframes menu-in { from { opacity: 0; transform: translate3d(0, -12px, 0); } to { opacity: 1; transform: none; } }
.menu-list, .menu-cta { max-width: 560px; }
.menu-item { display: flex; align-items: baseline; gap: var(--sp-4); min-height: 56px; padding: 14px 0; border-bottom: 1px solid var(--c-line); color: var(--c-text); text-decoration: none; font-size: 1.25rem; line-height: 1.4; font-weight: 700; font-feature-settings: "palt" 1; letter-spacing: var(--ls-heading); }
.menu-no { flex: none; width: 2.2em; font: 400 .75rem/1 var(--ff-mono); letter-spacing: .08em; color: var(--c-steel); }
.menu-cta { margin-top: var(--sp-5); }
@media (hover: hover) and (pointer: fine) { .menu-item:hover .menu-label { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; } }
/* 開いている間: ヘッダーは不透明（ヒーローの上の透明をやめる）・「無料見積り」は隠す・背面はスクロールさせない */
.site-header.menu-open { background: var(--c-bg); border-bottom-color: var(--c-line); }
.js .site-header.menu-open .btn-header { opacity: 0; visibility: hidden; }
html.menu-open { overflow: hidden; } /* 2026-10-02 rev03 のレビュー修正: body には付けない（body がスクロールの箱になると、ヒーローのスクロール連動アニメの基準が変わり、開いた瞬間に背面のヒーローが2画面目に飛んでいた） */
.no-js body:has(.menu:target) .btn-header { visibility: hidden; } /* JS なしでパネルを開いたときも、金はパネルの「無料見積り」1つ */

/* ---------- PC の再生モーダルの情報欄（2026-10-02 ユーザーの指示・3回目／CODEX 提案2） ----------
   横型: 映像の下に「サンプル用の想定素材｜料金・納期の目安｜この内容で概算する」の3列。縦型: 映像の右に縦に並べる。
   中身はカードの <template data-player-tpl> を main.js が写す。金は「この内容で概算する」の1つ（モーダルの中には再生ボタンが無い） */
.player-body { display: grid; gap: var(--sp-4); }
.player-body.is-v { grid-template-columns: auto minmax(240px, 320px); align-items: center; column-gap: var(--sp-6); }
.player-info { display: grid; gap: var(--sp-4) var(--sp-6); align-items: start; font-size: var(--fs-small); line-height: 1.7; color: var(--c-text-2); }
.player-body.is-h .player-info { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.player-body.is-v .player-info { grid-template-columns: minmax(0, 1fr); }
.player-body.is-v .pi-block + .pi-block { padding-top: var(--sp-4); border-top: 1px solid var(--c-line); }
.pi-k { font-size: var(--fs-caption); color: var(--c-text-3); letter-spacing: .04em; margin-bottom: 4px; }
.pi-mats { color: var(--c-text); }
.pi-mats li { display: inline; }
.pi-mats li:not(:last-child)::after { content: "\2060／\200B"; color: var(--c-line-strong); margin: 0 .3em 0 .15em; } /* 区切りは行末に（ワードジョイナー U+2060 で前の語につなぎ、行頭に「／」が来ないように。後ろのゼロ幅スペースで「／」の後では折り返せる） */
.pi-note { margin-top: 4px; }
.pi-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.pi-meta { margin-top: 2px; }
.pi-sep { color: var(--c-line-strong); }
.pi-act { align-self: center; }
.player-info .card-est { padding-inline: 20px; }
.player-body.is-v .pi-act { align-self: start; }

/* ---------- 動きを減らす設定（§5.6） ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  .hero .hero__hold { display: none !important; } /* とどまりの線は出さない（ピンも無い） */
  .menu.is-open .menu-sheet { animation: none !important; } /* メニューのパネルは降りる動きなしで出す */
  .menu-btn-icon > span { transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
  .btn:active { transform: none; }
  .sample:hover .card-poster { transform: none; }
  .btn-primary:hover .icon-arrow { transform: none; }
}