/* 企業向け漫画制作 LP（LP-B）— 2026-10-16
 * コンセプト: 静かな紙面に、漫画だけが語る。白い紙・墨・罫・余白でできた報告書の紙面に、漫画を 3 か所だけ額装して置く
 * （FV の冊子・作例の閲覧台・キャラクター案の実物）。強調の色は赤 1 色（資料のボタン）だけ。
 * 動き: 初期状態で全部見えている（opacity:0 にしない）。動くのは操作への応答だけ（見開きの送り・拡大・タブ・下部バー）。
 *       数字は動かさない。reduced-motion では動かさない。
 * 設計書 §6。色・版面の数値は設計書のとおり。書体はゴシックだけ（Noto Sans JP 400/700/900。2026-10-16 方針で §6 の明朝を上書き）。
 * 線のアイコン（Lucide・線 1.75・角は丸・墨）は .ic。
 * v4.1（2026-10-18）: 節ごとに型を変える（同じ型を 2 節続けない）。作例＝明るい閲覧台／DIY＝濃い地（墨・白い文字）／料金＝白い面に特大の数字・
 *   タイル・点線の枠・分かれ道／流れ＝紙に横の時間軸／活用＝タブ／品質＝白い面に横棒とカード／なぜ漫画か＝紙に挿絵と横棒。
 *   見出しの番号は大きな白抜きの数字。対話は 3 か所（作例・DIY・料金）。挿絵（assets/b2b/art/）は紙の地では multiply、濃い地・白い面では白いカードの中。
 * v5（2026-10-18・設計書）: 並びは 作例→DIY→料金→活用シーン→なぜ漫画か→流れ→品質。
 *   合成の写真（assets/b2b/v5/uc-*・price-confirm）は .shot の枠に入れる（「合成イメージ」は画像に焼き込み済み。注記とキャプションでも書く）。
 *   DIY に顔の並び（同じ人を、全ページで）と白いカード（会社の名前で出す前に）。流れに「ひなたの場合」の 6 コマ（漫画のコマのように細い墨の枠）。
 *   資料の中面 4 枚は扇形（PC）／2×2（スマホ）。新しい色は足さない（顔の組の面 rgba(255,255,255,.06) は設計書の値）。 */

:root {
  --paper: #f6f5f1;
  --surface: #fff;
  --ink: #15171b;
  --ink2: #454a53;
  --mute: #5f656f;          /* 12px 以上でだけ使う */
  --rule: #c9c6be;          /* 構造を担う罫 */
  --hair: #e3e1db;          /* 飾りの罫 */
  --stand: #ebe9e3;         /* 閲覧台 */
  --tint: #faf9f6;          /* 表の見出し・お客様の行 */
  --red: #d21123;
  --red-press: #a5101c;
  --focus: #1f5fd1;
  --sans: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);        /* expo-out */
  --press: cubic-bezier(.55, .02, .45, 1);
  /* 影は黒ではなく、紙と墨の暗部（わずかに暖かい） */
  --shade-1: rgba(38, 33, 25, .10);
  --shade-2: rgba(38, 33, 25, .30);
  --s-l: 128px; --s-m: 64px; --s-s: 32px;     /* 節の余白: 大・中・小 */
  --gut: 32px;
  --hdr: 64px;
}
@media (max-width: 900px) {
  :root { --s-l: 64px; --s-m: 32px; --s-s: 24px; --gut: 16px; --hdr: 56px; }   /* v5: スマホの節の余白を 80→64・40→32（足した絵の分を余白で相殺。中身は削らない） */
}

/* ---------------------------------------------------------------- 土台 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  /* 地に 2% の微細なノイズ（紙目）。面（白いカード・表）は不透明なので、地にだけ乗る */
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .10 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
}
@media (max-width: 900px) { body { font-size: 15px; } }
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
fieldset { padding: 0; border: 0; min-width: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
.wrap { width: min(1200px, 100% - var(--gut) * 2); margin-inline: auto; }
.wrap-narrow { width: min(880px, 100% - var(--gut) * 2); }
.skip-link { position: fixed; z-index: 100; left: 12px; top: 8px; padding: 8px 14px; background: var(--ink); color: #fff; font-size: 14px; font-weight: 700; transform: translateY(-160%); transition: transform .2s var(--ease); }
.skip-link:focus { transform: none; }
/* 線のアイコン（Lucide の形。線 1.75・角は丸・墨。強調色は使わない） */
.ic-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { display: inline-block; flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); vertical-align: middle; }
.lpb-preview-banner { position: relative; z-index: 50; padding: 10px 16px; border-bottom: 3px solid var(--ink); background: #ffd400; color: var(--ink); font: 700 13px/1.6 var(--sans); text-align: center; }

/* ---------------------------------------------------------------- ボタン（資料＝赤、相談＝墨。並びはどこでも資料→相談） */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 2px;
  font-weight: 700; font-size: 14px; letter-spacing: .06em; line-height: 1.3; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .18s var(--ease), box-shadow .18s var(--ease), transform .18s var(--press);
}
.btn:active { transform: translateY(1px); }
/* 10/26: CTA の主役は相談（赤）。資料は 2 番目（墨）。どの組も左＝相談・右＝資料（設計書 §25） */
.btn-consult { background: var(--red); color: #fff; box-shadow: 0 1px 0 rgba(110, 6, 16, .45), 0 12px 24px -16px rgba(210, 17, 35, .7); }
.btn-consult:hover { background: var(--red-press); }
.btn-dl { background: var(--ink); color: #fff; box-shadow: 0 1px 0 #000, 0 12px 24px -16px rgba(21, 23, 27, .65); }
.btn-dl:hover { background: #2b2f36; }
.btn-lg { min-height: 54px; padding: 0 28px; font-size: 15px; }

/* ---------------------------------------------------------------- 合成の写真（v5）: 写真の枠。「合成イメージ」は画像に焼き込み済み（HTML の札は置かない）。
   文字では、活用シーンの各パネルの注記と、透かしの写真のキャプションで「合成」と書く。写真はリンクにしない */
.shot { position: relative; overflow: hidden; border-radius: 2px; background: var(--stand); box-shadow: 0 1px 2px var(--shade-1), 0 22px 38px -26px var(--shade-2); }
.shot img { width: 100%; }

/* ---------------------------------------------------------------- ヘッダー */
.hdr {
  position: sticky; top: 0; z-index: 40;
  height: var(--hdr); display: flex; align-items: center; gap: 28px; padding: 0 var(--gut);
  background: rgba(246, 245, 241, .94); -webkit-backdrop-filter: saturate(1.1) blur(10px); backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.hdr-logo { display: flex; align-items: baseline; gap: 10px; min-width: 0; overflow: hidden; text-decoration: none; white-space: nowrap; }
.hdr-cta { flex: none; }
.hdr-logo b { font-weight: 700; font-size: 17px; letter-spacing: .1em; }
.hdr-logo small { font-size: 12px; color: var(--mute); letter-spacing: .04em; }
.hdr-nav { display: flex; gap: 22px; margin-left: auto; font-size: 13.5px; letter-spacing: .03em; white-space: nowrap; }
.hdr-nav a { color: var(--ink2); text-decoration: none; padding: 6px 0; background: linear-gradient(var(--ink), var(--ink)) 0 100% / 0 1px no-repeat; transition: background-size .3s var(--ease), color .2s; }
.hdr-nav a:hover { color: var(--ink); background-size: 100% 1px; }
.hdr-cta { display: flex; gap: 8px; }
@media (max-width: 1180px) { .hdr-nav { gap: 16px; font-size: 13px; } }
@media (max-width: 1060px) { .hdr-nav { display: none; } .hdr-cta { margin-left: auto; } }
@media (max-width: 900px) {
  .hdr { gap: 8px; }
  .hdr-logo small { display: none; }
  .hdr-logo b { font-size: 15px; letter-spacing: .08em; }
  .hdr-cta { gap: 6px; }
  .hdr-cta .btn { min-height: 36px; padding: 0 11px; font-size: 12.5px; letter-spacing: .02em; }
}

/* ---------------------------------------------------------------- 1. FV（PC は 2 列の格子: 文 5／写真 7。写真は右端だけ画面の外まで伸ばす） */
.fv { position: relative; overflow: hidden; }
.fv-grid {
  display: grid;
  grid-template-columns: [bleed-l] minmax(var(--gut), 1fr) [copy] minmax(0, 480px) 56px [visual] minmax(0, 664px) minmax(var(--gut), 1fr) [bleed-r];
  min-height: clamp(560px, calc(100svh - var(--hdr)), 780px);
}
.fv-copy { grid-column: copy; grid-row: 1; align-self: center; padding: 28px 0 32px; display: flex; flex-direction: column; container-type: inline-size; position: relative; z-index: 2; }
.fv-eyebrow { display: flex; align-items: center; gap: 12px; font-size: 13px; line-height: 1.6; letter-spacing: .06em; color: var(--ink2); }
.fv-eyebrow::before { content: ""; flex: none; width: 28px; height: 2px; background: var(--red); }
#fv-title {
  margin-top: 14px;
  font-weight: 900;
  font-size: clamp(27px, 2.45vw, 35px);
  font-size: min(35px, 7.25cqi);
  line-height: 1.42; letter-spacing: .01em; font-feature-settings: "palt" 1;
}
#fv-title span { display: block; }
.fv-sub { margin-top: 16px; font-size: 15px; line-height: 1.85; color: var(--ink2); }
.fv-assure { margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--ink); font-size: 17px; font-weight: 700; line-height: 1.7; color: var(--ink); }
.fv-facts { margin-top: 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.fv-facts li { padding: 10px 14px 11px 0; margin-right: 14px; border-right: 1px solid var(--hair); }
.fv-facts li:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.fv-facts b { display: block; font-weight: 900; font-size: 22px; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; font-feature-settings: "palt" 1, "tnum" 1; }
.fv-facts b small { font-size: 13px; margin: 0 1px; letter-spacing: .02em; }
.fv-facts span { display: block; margin-top: 4px; font-size: 12px; line-height: 1.55; color: var(--mute); }
.fv-extra { margin-top: 10px; font-size: 12px; line-height: 1.75; color: var(--mute); }
.fv-price { margin-left: .7em; color: var(--ink); font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.fv-price:hover { text-decoration-thickness: 2px; }
.fv-cta { margin-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.fv-micro { margin-top: 10px; font-size: 12.5px; line-height: 1.7; color: var(--mute); }

.fv-visual { grid-column: visual / bleed-r; grid-row: 1; position: relative; container-type: size; }
.fv-photo { position: absolute; inset: 0; overflow: hidden; background: #efede8; }
.fv-photo picture { display: contents; }
/* 冊子（3｜4 ページ目）が列の中央より右に、高さの 7〜8 割で収まるように、写真を高さ基準で拡大して右端に寄せる。
   元の写真で冊子が占める範囲は横 0.42〜0.97・縦 0.13〜0.78（テストの重なり判定もこの値を使う）。
   幅 --w は「列を必ず覆う」最小値（高さ 166cqh・幅 100cqw）と、冊子が大きくなりすぎない上限（205cqh）で挟む。 */
.fv-img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 45%; }
@supports (width: 1cqw) {
  .fv-photo { --w: clamp(max(166cqh, 100cqw), 140cqw, 205cqh); }
  .fv-img { position: absolute; right: 0; top: calc(50cqh - var(--w) * .3023); width: var(--w); max-width: none; height: auto; object-fit: initial; }
}
.fv-photo-hint {
  position: absolute; z-index: 1; left: 50%; top: 46%;
  padding: 10px 18px; background: rgba(21, 23, 27, .86); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .06em; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) translateY(6px); pointer-events: none;
  transition: opacity .35s var(--ease), transform .5s var(--ease);
}
@supports (width: 1cqw) { .fv-photo-hint { left: calc(100cqw - var(--w) * .304); top: 50cqh; } }
@media (hover: hover) and (min-width: 901px) {
  .fv-photo::after { content: ""; position: absolute; inset: 0; background: rgba(246, 245, 241, 0); transition: background-color .5s var(--ease); pointer-events: none; }
  .fv-visual:hover .fv-photo::after { background: rgba(246, 245, 241, .14); }
  .fv-visual:hover .fv-photo-hint { opacity: 1; transform: translate(-50%, -50%); }
}
.fv-caption {
  position: absolute; z-index: 2; left: 24px; bottom: 24px;
  display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100% - 48px));
  padding: 10px 10px 10px 14px; background: rgba(255, 255, 255, .95); border: 1px solid var(--rule);
  font-size: 12px; line-height: 1.6; color: var(--ink2);
  box-shadow: 0 10px 26px -18px var(--shade-2);
}
.fv-sample { flex: none; padding: 7px 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: 12.5px; letter-spacing: .06em; text-decoration: none; border-radius: 2px; white-space: nowrap; transition: background-color .18s var(--ease); }
.fv-sample:hover { background: #2b2f36; }

@media (max-width: 900px) {
  .fv-grid { display: flex; flex-direction: column; min-height: 0; }
  .fv-visual { order: -1; container-type: normal; aspect-ratio: 16 / 9; }
  .fv-photo { position: absolute; inset: 0; }
  .fv-photo .fv-img { position: static; width: 100%; height: 100%; max-width: 100%; object-fit: cover; object-position: 50% 50%; }
  .fv-photo-hint { display: none; }
  .fv-caption { left: 0; right: 0; bottom: 0; max-width: none; gap: 10px; padding: 6px 8px 6px 12px; border: 0; border-top: 1px solid var(--rule); font-size: 11.5px; line-height: 1.45; box-shadow: none; }
  .fv-sample { padding: 6px 10px; font-size: 12px; }
  .fv-copy { width: calc(100% - var(--gut) * 2); margin: 0 auto; padding: 8px 0 28px; }
  .fv-eyebrow { font-size: 12px; letter-spacing: 0; white-space: nowrap; }
  .fv-eyebrow::before { display: none; }
  #fv-title { margin-top: 4px; font-size: min(25px, 7.3cqi); line-height: 1.38; }
  .fv-sub { margin-top: 6px; font-size: 13.5px; line-height: 1.6; }
  .fv-assure { margin-top: 6px; padding-left: 10px; font-size: 14.5px; line-height: 1.55; }
  .fv-extra { margin-top: 6px; line-height: 1.55; }
  .fv-cta { order: 5; margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .fv-cta .btn { min-height: 48px; padding: 0 8px; font-size: 14px; letter-spacing: .03em; }
  .fv-micro { order: 6; margin-top: 8px; font-size: 12px; }
  .fv-facts { order: 7; margin-top: 16px; }
  .fv-facts li { padding: 8px 8px 9px 0; margin-right: 8px; }
  .fv-facts b { font-size: 18px; }
  .fv-facts b small { font-size: 11.5px; }
}
@media (max-width: 374px) {
  .fv-eyebrow { white-space: normal; }
  .hdr { padding: 0 10px; }
  .hdr-logo b { font-size: 13px; letter-spacing: .04em; }
  .hdr-cta .btn { padding: 0 8px; font-size: 12px; letter-spacing: 0; }
}

/* 背の低い PC（1366×650 など）でも、ボタン 2 つが最初の画面に入るように詰める（設計書 §4.1） */
@media (min-width: 901px) and (max-height: 760px) {
  .fv-copy { padding: 18px 0 22px; }
  #fv-title { margin-top: 10px; line-height: 1.36; }
  .fv-sub { margin-top: 12px; line-height: 1.72; }
  .fv-assure { margin-top: 12px; line-height: 1.62; }
  .fv-facts { margin-top: 14px; }
  .fv-facts li { padding-top: 8px; padding-bottom: 9px; }
  .fv-extra { margin-top: 8px; line-height: 1.65; }
  .fv-cta { margin-top: 16px; }
}

/* 日本語の改行を文節で（対応ブラウザだけ。未対応は従来どおり） */
h1, h2, h3, h4, .sec-lead, .trust-list span, .ex-notice, .lpb-endcard p, .styles-title, .price-fixed, .quality-body, .flow-total, .card-sub, .done h4,
.checklist li, .diy-qa-q, .diy-qa-a, .qa-card-what, .face-group figcaption, .uc-shot figcaption, .pay-photo figcaption, .uc-note { word-break: auto-phrase; }

/* ---------------------------------------------------------------- 2. 信頼の帯 */
.trust { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.trust-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.trust-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-content: start; padding: 18px 16px; border-left: 1px solid var(--hair); font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.trust-list .ic { grid-row: 1 / span 2; margin-top: 1px; }
.trust-list li > b, .trust-list li > a, .trust-list li > span { grid-column: 2; justify-self: start; }
.trust-list li:first-child { border-left: 0; padding-left: 0; }
.trust-list b { display: block; margin-bottom: 2px; font-size: 13.5px; color: var(--ink); }
.trust-list a { color: var(--ink2); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.trust-list a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 900px) {
  .trust-list { grid-template-columns: 1fr 1fr; }
  .trust-list li { padding: 12px 0; border-left: 0; border-top: 1px solid var(--hair); }
  .trust-list li:nth-child(-n+2) { border-top: 0; }
  .trust-list li:nth-child(even) { padding-left: 12px; border-left: 1px solid var(--hair); }
  .trust-list li:last-child { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .trust-list li { grid-template-columns: 18px minmax(0, 1fr); column-gap: 8px; }
  .trust-list .ic { width: 18px; height: 18px; margin-top: 2px; }
  .trust-list b { font-size: 13px; }
}

/* ---------------------------------------------------------------- 節の見出し（大きな白抜きの番号＋構造の罫＋見出し） */
.sec { padding-top: var(--s-l); }
.sec-company { padding-bottom: var(--s-l); }
.sec-head { margin-bottom: var(--s-m); }
.kicker { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; font-size: 13px; line-height: 1.5; letter-spacing: .08em; color: var(--ink2); }
.kicker::after { content: ""; flex: 1 1 auto; height: 1px; margin-bottom: .6em; background: var(--rule); }
.kicker-no {
  font-weight: 900; font-size: clamp(56px, 5.6vw, 80px); line-height: .78; letter-spacing: -.03em;
  color: transparent; -webkit-text-stroke: 1.5px var(--ink); font-variant-numeric: tabular-nums; font-feature-settings: "palt" 1, "tnum" 1;
}
@supports not (-webkit-text-stroke: 1px #000) { .kicker-no { color: var(--ink); } }
.kicker-label { font-weight: 700; padding-bottom: .1em; }
.sec-head h2 { max-width: 880px; font-weight: 700; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.45; letter-spacing: .03em; font-feature-settings: "palt" 1; }
.sec-lead { max-width: 46em; margin-top: 18px; color: var(--ink2); }
@media (max-width: 900px) {
  .kicker { gap: 12px; margin-bottom: 12px; }
  .kicker-no { font-size: 44px; -webkit-text-stroke-width: 1.25px; }
}

/* ---------------------------------------------------------------- 対話（3 か所だけ: 作例・DIY・料金。顔のアイコン＋吹き出し） */
.talk { display: grid; gap: 10px; max-width: 560px; }
.talk-row { display: flex; align-items: flex-start; gap: 12px; }
.talk-a { flex-direction: row-reverse; }
.talk-face { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; border: 1px solid var(--rule); }
.talk-bubble { position: relative; padding: 10px 16px 11px; background: #fff; border: 1px solid var(--rule); border-radius: 14px; font-size: 15px; font-weight: 700; line-height: 1.7; }
.talk-q .talk-bubble { border-top-left-radius: 3px; }
.talk-a .talk-bubble { border-top-right-radius: 3px; background: var(--ink); border-color: var(--ink); color: #fff; }
.talk-name { display: block; font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.talk-a .talk-name { color: rgba(255, 255, 255, .72); }
.talk-note { font-size: 12px; text-align: right; color: var(--mute); }
.talk-dark .talk-face { border-color: rgba(255, 255, 255, .4); }
.talk-dark .talk-q .talk-bubble { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .3); color: #fff; }
.talk-dark .talk-q .talk-name { color: rgba(255, 255, 255, .72); }
.talk-dark .talk-a .talk-bubble { background: #fff; border-color: #fff; color: var(--ink); }
.talk-dark .talk-a .talk-name { color: var(--mute); }
.talk-dark .talk-note { color: rgba(255, 255, 255, .72); }
@media (max-width: 900px) {
  .talk { gap: 8px; }
  .talk-row { gap: 8px; }
  .talk-face { width: 34px; height: 34px; }
  .talk-bubble { padding: 7px 12px 8px; font-size: 13.5px; line-height: 1.6; }
  .talk-name { display: inline; margin-right: 6px; font-size: 11.5px; letter-spacing: .04em; }
  .talk-note { font-size: 12px; }
}

/* ---------------------------------------------------------------- 3. 作例 */
.sec-examples { padding-bottom: var(--s-m); }
.sec-examples .sec-head { margin-bottom: 40px; }
.ex-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-rows: auto auto auto 1fr; column-gap: 56px; align-items: start; }
.ex-head .kicker { grid-column: 1 / -1; }
.ex-head h2, .ex-head .ex-notice, .ex-head .ex-price { grid-column: 1; }
.ex-head .talk { grid-column: 2; grid-row: 2 / span 3; align-self: end; }
.ex-notice { max-width: 880px; margin-top: 22px; font-size: 14px; line-height: 1.8; color: var(--ink2); text-wrap: pretty; }   /* v7.6（§20-T1）: 囲まない。見出しの下の小さな注記 */
.exn-1, .exn-2 { display: block; }   /* PC は文の切れ目で 2 行 */
.ex-price { display: none; }

.lpb-viewer {
  --pw: clamp(280px, calc((100svh - var(--hdr) - 236px) / 1.5), 430px);
  position: relative; padding: 32px var(--gut) 28px;
  background: var(--stand); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.lpb-thumbs { display: flex; flex-direction: row-reverse; justify-content: center; gap: 10px; margin-bottom: 40px; }
.lpb-thumb { position: relative; width: 44px; padding: 0; border: 1px solid var(--rule); background: #fff; cursor: pointer; border-radius: 1px; transition: border-color .2s var(--ease), box-shadow .2s var(--ease); }
.lpb-thumb img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; opacity: .62; transition: opacity .25s var(--ease); }
.lpb-thumb span { position: absolute; left: 0; right: 0; bottom: -21px; font-size: 12px; line-height: 1.4; text-align: center; color: var(--mute); font-variant-numeric: tabular-nums; }
.lpb-thumb:hover img { opacity: .9; }
.lpb-thumb[aria-current="true"] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.lpb-thumb[aria-current="true"] img { opacity: 1; }
.lpb-thumb[aria-current="true"] span { color: var(--ink); font-weight: 700; }

.lpb-stage { display: flex; justify-content: center; }
/* 見開きは右が若い番号（DOM は 1→2 の順、表示は右→左） */
.lpb-spread { display: flex; flex-direction: row-reverse; flex-wrap: wrap; justify-content: center; align-items: flex-start; }
.lpb-spread.is-in-next { animation: spreadNext .5s var(--ease); }
.lpb-spread.is-in-prev { animation: spreadPrev .5s var(--ease); }
@keyframes spreadNext { from { opacity: .35; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes spreadPrev { from { opacity: .35; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.lpb-page, .lpb-endcard { position: relative; width: var(--pw); background: #fff; box-shadow: 0 1px 2px var(--shade-1), 0 22px 40px -24px var(--shade-2); }
.lpb-page figcaption { position: absolute; left: 0; right: 0; bottom: -28px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--mute); letter-spacing: .04em; }
/* のど（中央の折り目）: 右のページは左端に、左のページは右端に、薄い陰 */
.lpb-spread > :nth-child(1 of .lpb-page, .lpb-endcard)::after,
.lpb-spread > :nth-child(2 of .lpb-page, .lpb-endcard)::after { content: ""; position: absolute; top: 0; bottom: 0; width: 7%; pointer-events: none; }
.lpb-spread > :nth-child(1 of .lpb-page, .lpb-endcard)::after { left: 0; background: linear-gradient(90deg, rgba(38, 33, 25, .16), rgba(38, 33, 25, 0)); }
.lpb-spread > :nth-child(2 of .lpb-page, .lpb-endcard)::after { right: 0; background: linear-gradient(270deg, rgba(38, 33, 25, .14), rgba(38, 33, 25, 0)); }
.lpb-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.lpb-zoom img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.lpb-zoom:focus-visible { outline-offset: -3px; }
.lpb-skip { flex: 0 0 100%; margin: -16px 0 18px; font-size: 12.5px; line-height: 1.6; text-align: center; color: var(--ink2); letter-spacing: .04em; }
.lpb-endcard { aspect-ratio: 2 / 3; display: flex; align-items: center; justify-content: center; }
.lpb-endcard-in { width: 80%; display: flex; flex-direction: column; gap: 18px; }
.lpb-endcard-mark { font-size: 11.5px; font-weight: 700; letter-spacing: .3em; color: var(--mute); padding-bottom: 14px; border-bottom: 1px solid var(--rule); }
.lpb-endcard-lead { font-weight: 700; font-size: 21px; line-height: 1.6; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.lpb-endcard-price { font-size: 14px; line-height: 1.85; color: var(--ink2); }
.lpb-endcard-note { margin-top: 4px; font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.lpb-endcard-cta { display: grid; gap: 10px; margin-top: 6px; }
.lpb-endcard-cta .btn { min-height: 50px; }

.lpb-controls { display: flex; align-items: center; justify-content: center; gap: 28px; margin-top: 52px; }
.lpb-next, .lpb-prev { min-height: 44px; min-width: 132px; padding: 0 18px; border: 1px solid var(--ink); border-radius: 2px; background: #fff; font-weight: 700; font-size: 14px; letter-spacing: .04em; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease), opacity .2s; }
.lpb-next:hover:not(:disabled), .lpb-prev:hover:not(:disabled) { background: var(--ink); color: #fff; }
.lpb-next:disabled, .lpb-prev:disabled { opacity: .32; cursor: default; }
.lpb-count { min-width: 7em; font-size: 13px; text-align: center; color: var(--ink2); font-variant-numeric: tabular-nums; }
.lpb-count b { color: var(--ink); }
.lpb-howto { margin-top: 12px; font-size: 12px; text-align: center; color: var(--mute); }

@media (max-width: 900px) {
  .sec-examples .sec-head { margin-bottom: 24px; }
  .ex-head { display: block; }
  .ex-head .talk { margin-top: 14px; }
  .ex-notice { margin-top: 12px; font-size: 13px; line-height: 1.75; text-wrap: balance; }
  .exn-1, .exn-2 { display: inline; }   /* スマホは自然に流す（行の長さをそろえ、「ご覧ください。」だけの短い行を作らない） */
  .ex-price { display: inline-block; margin-top: 14px; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
}

/* 作例の直下: 絵柄 9 種（小さな見本の 1 列。説明は拡大の dialog で出す） */
.ex-more { padding-top: var(--s-m); }
.styles-title { font-size: 18px; font-weight: 700; line-height: 1.6; }
.lpb-styles { margin-top: var(--s-m); scroll-margin-top: calc(var(--hdr) + 16px); }
.styles-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 24px; margin-bottom: 18px; }
.styles-note { grid-column: 1; font-size: 14px; color: var(--ink2); }
.style-mode { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; border: 1px solid var(--ink); border-radius: 2px; overflow: hidden; }
.style-mode button { min-height: 38px; min-width: 76px; padding: 0 14px; border: 0; background: #fff; font-size: 13.5px; font-weight: 700; letter-spacing: .04em; cursor: pointer; transition: background-color .18s var(--ease), color .18s var(--ease); }
.style-mode button + button { border-left: 1px solid var(--ink); }
.style-mode button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.style-grid { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
.style-card { display: flex; flex-direction: column; }
.style-open { display: block; padding: 0; border: 1px solid var(--hair); background: #fff; cursor: zoom-in; overflow: hidden; }
.style-open img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform .7s var(--ease); }
.style-open:hover img { transform: scale(1.025); }
.style-card figcaption { display: grid; grid-template-columns: auto 1fr; column-gap: 5px; margin-top: 7px; }
.style-card figcaption b { font-weight: 700; font-size: 12px; line-height: 1.55; color: var(--mute); font-variant-numeric: tabular-nums; }
.style-name { font-weight: 700; font-size: 12.5px; line-height: 1.5; word-break: keep-all; }   /* 「スタイル」の途中で折り返さない（<wbr> の所でだけ折る） */
.style-summary, .style-modes { display: none; }   /* 説明は拡大の dialog で出す（文字は dialog が読む） */
@media (max-width: 900px) {
  .styles-head { grid-template-columns: 1fr; row-gap: 12px; }
  .style-mode { grid-column: 1; grid-row: auto; justify-self: start; }
  .style-grid { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gut) * -1); padding: 0 var(--gut) 8px; }
  .style-card { flex: 0 0 64%; scroll-snap-align: start; }
  .ex-more { padding-top: 32px; }
  .lpb-styles { margin-top: 28px; }
  .styles-note { font-size: 13px; }
}

/* ---------------------------------------------------------------- 3b. AIで、自分でも作れるのでは？（濃い地・ページでいちばん強い転調。v4.1 §4・§8）
   文字は白と白の 72%。赤の文字は使わない（赤は画像の中の番号だけ）。相談は白の線のボタン。focus は白い 3px の輪郭。 */
.sec-diy { background: var(--ink); color: #fff; padding-bottom: var(--s-l); }
.sec-diy .kicker { color: rgba(255, 255, 255, .72); }
.sec-diy .kicker::after { background: rgba(255, 255, 255, .28); }
.sec-diy .kicker-no { -webkit-text-stroke-color: #fff; }
.sec-diy .sec-head h2 { color: #fff; font-size: clamp(32px, 3.6vw, 50px); font-weight: 900; line-height: 1.35; letter-spacing: .01em; }
.sec-diy :focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.diy-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); column-gap: 56px; align-items: center; margin-bottom: 28px; }
.diy-head .kicker { grid-column: 1 / -1; }
.diy-lead { max-width: 60em; padding-left: 16px; border-left: 2px solid rgba(255, 255, 255, .5); font-size: 15px; line-height: 1.85; color: rgba(255, 255, 255, .72); }
.diy-body { margin-top: 36px; }
/* 2 本の帯（v5.1 §11.1-3）: 左＝AI に頼んだ 4 ページ、右＝当社の作例 3・9 ページ目。縮小は同じ大きさ。札・注記・縮小を 2 本で同じ行にそろえる（subgrid）。
   押すと #diy-viewer（6 枚を前後に送る）。縮小の右上に虫めがね、左下にページの番号 */
.diy-strips { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2fr); grid-template-rows: auto auto auto; column-gap: 36px; }
.diy-strip { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; }
@supports not (grid-template-rows: subgrid) { .diy-strip { grid-template-rows: auto auto 1fr; } }
.diy-strip-tag { grid-row: 1; padding-bottom: 8px; border-bottom: 1px solid rgba(255, 255, 255, .28); font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: rgba(255, 255, 255, .72); }
.diy-strip-note { grid-row: 2; font-size: 14px; line-height: 1.7; color: #fff; }
.diy-pages { grid-row: 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 12px; align-self: start; }
.diy-zoom { position: relative; display: block; width: 100%; padding: 5px; border: 0; border-radius: 2px; background: #fff; cursor: zoom-in; box-shadow: 0 24px 40px -28px #000; transition: transform .4s var(--ease); }
.diy-zoom:hover { transform: translateY(-3px); }
.diy-zoom img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; }
.diy-page-no { position: absolute; left: 5px; bottom: 5px; min-width: 22px; padding: 1px 6px; background: var(--ink); color: #fff; font-size: 12px; font-weight: 900; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; }
.diy-zoom-ic { position: absolute; right: 9px; top: 9px; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 1px 3px var(--shade-2); }
/* 比べる表（v5.1 §11.1-4・2 行）。① 頼んでいない成果 ② コマの形。表のすぐ下に「事実ではありません」（本文と同じ大きさ） */
.diy-side { margin-top: 48px; }
.diy-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 15px; line-height: 1.8; }
.diy-table thead th:nth-child(1) { width: 17%; }
.diy-table thead th:nth-child(2) { width: 48%; }
.diy-table thead th:nth-child(3) { width: 35%; }
.diy-cell-img { width: 100%; padding: 4px; background: #fff; border-radius: 2px; }
.diy-table td p { margin-top: 12px; }
.diy-table td > p:first-child { margin-top: 0; }
.diy-fact { margin-top: 16px; font-size: 16px; line-height: 1.85; color: #fff; }
/* 決めること（v5.1 §11.1-6）: 見出しは前の引用の文。☐ のリストは白いカード・2 列・アイコンなし */
.diy-decide { margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .28); }
.diy-decide-title { font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.diy-decide-lead { margin-top: 12px; font-size: 16px; line-height: 1.8; color: rgba(255, 255, 255, .72); }
.checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
.checklist li { position: relative; padding: 9px 0 9px 26px; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.6; }
.checklist li::before { content: ""; position: absolute; left: 0; top: calc(9px + .8em - 7px); width: 14px; height: 14px; border: 1.5px solid #8a867c; border-radius: 2px; background: #fff; }
.diy-checklist { margin-top: 18px; padding: 12px 28px 14px; background: #fff; color: var(--ink); border-radius: 2px; box-shadow: 0 30px 50px -36px #000; }
.diy-decide-close { margin-top: 16px; font-size: 16px; font-weight: 700; line-height: 1.8; }
/* 時間（v5.1 §11.1-7）: 大きな数字にしない。枠の中の文。数字だけ太字（白） */
.diy-time { margin-top: 28px; padding: 18px 24px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 2px; }
.diy-time p { font-size: 15px; line-height: 1.95; color: rgba(255, 255, 255, .72); }
.diy-time b { font-weight: 700; color: #fff; }
.diy-table thead th { padding: 0 12px 10px; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-align: left; color: rgba(255, 255, 255, .72); }
.diy-table thead th:first-child { padding-left: 0; }
.diy-table tbody th { width: 20%; padding: 14px 12px 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .16); font-weight: 700; text-align: left; vertical-align: top; color: #fff; }
.diy-table td { padding: 14px 12px; border-bottom: 1px solid rgba(255, 255, 255, .16); vertical-align: top; color: rgba(255, 255, 255, .72); }
.diy-table td + td { color: #fff; }
.diy-no { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 8px; border: 1.5px solid #fff; border-radius: 50%; font-size: 12px; font-weight: 900; line-height: 1; vertical-align: 1px; }
.diy-close { margin-top: 28px; padding-left: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: center; }
.diy-try p { font-size: 15.5px; line-height: 1.85; }
.diy-try .diy-cond { margin-top: 4px; font-size: 13px; }
.diy-cond a { color: rgba(255, 255, 255, .72); text-underline-offset: 3px; }
.diy-cond a:hover { color: #fff; }
.diy-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-line { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
.btn-line:hover { background: rgba(255, 255, 255, .12); }
/* 顔の並び（v5 §4.2）: 同じ役（部長）どうし。左＝AI に一言だけで 2 回（顔の間に ≠）、右＝作例の轟部長 3 ページ（顔の間に ＝）。
   組ごとに薄い面で囲む。顔は 5 つ。スマホでも 1 行（顔の大きさ --face を幅で決める） */
.diy-faces { --face: 88px; --fgap: 20px; margin: 44px auto 0; max-width: 1140px; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 40px; align-items: center; }
.diy-faces-title { font-size: clamp(24px, 2.3vw, 32px); font-weight: 900; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt" 1; }
/* 2 つの組の 札・顔・説明 を同じ行にそろえる（subgrid。顔が 1 行に並ぶ） */
.diy-faces-row { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto auto; column-gap: 14px; justify-content: start; }
.face-group { display: grid; grid-row: 1 / span 3; grid-template-rows: subgrid; row-gap: 10px; min-width: 0; padding: 14px 20px 16px; background: rgba(255, 255, 255, .06); border-radius: 4px; }
@supports not (grid-template-rows: subgrid) { .face-group { grid-template-rows: auto 1fr auto; } }
.face-group-ai { max-width: calc(var(--face) * 2 + var(--fgap) + 40px + 64px); }
.face-tag { align-self: end; font-size: 12px; font-weight: 700; line-height: 1.5; letter-spacing: .06em; color: rgba(255, 255, 255, .72); }
.face-list { display: flex; gap: var(--fgap); }
.face-list li { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.face-list img { flex: none; width: var(--face); max-width: none; height: var(--face); border-radius: 6px; border: 1.5px solid #fff; background: #fff; object-fit: cover; }
.face-list span { font-size: 12px; line-height: 1.4; white-space: nowrap; color: rgba(255, 255, 255, .72); font-variant-numeric: tabular-nums; }
.face-list li + li::before { content: "＝"; content: "＝" / ""; position: absolute; right: 100%; top: calc(var(--face) / 2); width: var(--fgap); transform: translateY(-50%); text-align: center; font-size: 15px; font-weight: 900; line-height: 1; color: rgba(255, 255, 255, .5); }
.face-list-ne li + li::before { content: "≠"; content: "≠" / ""; font-size: 22px; color: #fff; }
.face-group figcaption { font-size: 14px; font-weight: 700; line-height: 1.55; color: #fff; }
/* カード「会社の名前で出すときに、よく聞かれること」（v5 §4.2・10/18 の修正）: 濃い地の中の白いカード。問い（太字）と答え。
   答えはページのほかの所の文をそのまま写したもの（小さい字にしない・省略しない）。挿絵は置かない */
.diy-card { margin-top: 36px; padding: 26px 32px 22px; background: #fff; color: var(--ink); border-radius: 2px; box-shadow: 0 30px 50px -36px #000; }
.diy-card-title { padding-bottom: 12px; border-bottom: 2px solid var(--ink); font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt" 1; }
/* 問いごとに <details>（v5 §10・10/18 の判断）: PC（901px 以上）は lp-b.js が開く。問い（左 340px）と答え（右）の 2 列は、
   <details> の display に頼らず summary の float で組む（古いブラウザでも崩れない）。スマホは閉じて問いだけ（＋で開く） */
.diy-qa { display: flow-root; padding: 14px 0; border-bottom: 1px solid var(--hair); }
.diy-qa:last-child { border-bottom: 0; padding-bottom: 4px; }
.diy-qa > summary { float: left; width: 340px; display: grid; grid-template-columns: 22px minmax(0, 1fr) 12px; column-gap: 12px; align-items: start; list-style: none; cursor: pointer; font-size: 15px; font-weight: 700; line-height: 1.75; }
.diy-qa > summary::-webkit-details-marker { display: none; }
.diy-qa > summary .ic { margin-top: 3px; }
.diy-qa > summary::after { --pm: #a9a59b; content: ""; align-self: center; width: 10px; height: 10px; background: linear-gradient(var(--pm), var(--pm)) 50% 50% / 9px 1.5px no-repeat, linear-gradient(var(--pm), var(--pm)) 50% 50% / 1.5px 9px no-repeat; }   /* PC は開いた中身が主役なので、開閉の印は控えめ（既存の点線の枠の色） */
.diy-qa[open] > summary::after { background: linear-gradient(var(--pm), var(--pm)) 50% 50% / 9px 1.5px no-repeat; }   /* 開いているときは −（閉じるボタンの × に見せない） */
.diy-qa-a { margin-left: 372px; font-size: 15px; line-height: 1.85; }
.diy-card :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }   /* 白いカードの中は白い輪郭が見えないので青に戻す */
@media (max-width: 1180px) {
  .diy-faces { grid-template-columns: 1fr; row-gap: 16px; }
  .diy-qa > summary { width: 250px; }
  .diy-qa-a { margin-left: 274px; }
}
@media (max-width: 900px) {
  .sec-diy { padding-top: 56px; padding-bottom: 56px; }
  .diy-head { display: block; margin-bottom: 16px; }
  .diy-head .talk { margin-top: 12px; }
  .sec-diy .sec-head h2 { font-size: 26px; }
  .diy-lead { padding-left: 10px; font-size: 13px; line-height: 1.7; }
  .diy-body { margin-top: 16px; }
  .diy-side { margin-top: 14px; }
  .diy-no { width: 19px; height: 19px; margin-right: 6px; font-size: 11px; }
  .diy-close { margin-top: 14px; padding-left: 0; grid-template-columns: 1fr; gap: 12px; }
  .diy-try p { font-size: 13.5px; line-height: 1.7; }
  .diy-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .diy-cta .btn { min-height: 48px; padding: 0 6px; font-size: 14px; letter-spacing: .03em; }
  .diy-faces { --face: clamp(46px, calc((100vw - var(--gut) * 2 - 8px - 40px - 30px) / 5), 64px); --fgap: 10px; margin-top: 14px; row-gap: 8px; }
  .diy-faces-title { font-size: 17px; line-height: 1.45; }
  .diy-faces-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; }
  .face-group { row-gap: 6px; padding: 8px 10px 9px; }
  .face-group-ai { max-width: none; }
  .face-list li { gap: 3px; }
  .face-list span { font-size: 11px; }
  .face-list li + li::before { font-size: 11px; }
  .face-list-ne li + li::before { font-size: 14px; }
  .face-tag { font-size: 11.5px; line-height: 1.4; letter-spacing: .02em; }
  .face-group figcaption { font-size: 12px; line-height: 1.45; }
  .diy-card { margin-top: 14px; padding: 12px 14px 8px; box-shadow: none; }
  .diy-card-title { padding-bottom: 7px; font-size: 15px; line-height: 1.45; }
  .diy-qa { padding: 2px 0; }
  .diy-qa > summary { float: none; width: auto; grid-template-columns: 18px minmax(0, 1fr) 12px; column-gap: 8px; padding: 9px 0; font-size: 13px; line-height: 1.5; }
  .diy-qa > summary .ic { width: 18px; height: 18px; margin-top: 1px; }
  .diy-qa > summary::after { --pm: var(--ink); }
  .diy-qa-a { margin: 0 0 8px; font-size: 13.5px; line-height: 1.75; }   /* 料金の表の同じ文（スマホ 13.5px）と同じ大きさ（§21: word-break: normal は消した＝1 字単位に戻さない） */
}

/* 顔の並び: 390px 未満は 2 組を 1 行に入れると顔が縮むので、左の組（AI）と右の組（当社）を上下に分ける。顔は 2 組とも 56px */
@media (max-width: 389px) {
  .diy-faces { --face: 56px; }
  .diy-faces-row { display: flex; flex-direction: column; gap: 8px; }
  .face-group { grid-row: auto; grid-template-rows: auto auto auto; }
}

/* ---------------------------------------------------------------- 4. 料金と取引条件（白い面。特大の 10万円・含むもののタイル・点線の枠・分かれ道。条件の文は常に見せる） */
.sec-price { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-l); }
.pr-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); grid-template-rows: auto auto 1fr; column-gap: 56px; align-items: start; }
.pr-head .kicker { grid-column: 1 / -1; }
.pr-head h2, .pr-head .sec-lead { grid-column: 1; }
.pr-head .talk { grid-column: 2; grid-row: 2 / span 2; align-self: end; }
.price-hero { padding-bottom: 28px; border-bottom: 1px solid var(--rule); }
.price-figure { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 20px; font-weight: 900; line-height: 1; font-feature-settings: "palt" 1; }
.price-pages { padding-bottom: .55em; font-size: clamp(22px, 2.2vw, 30px); }
.price-num { font-size: clamp(104px, 11.5vw, 168px); letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; }
.price-num small { font-size: .3em; letter-spacing: 0; margin-left: .04em; }
.price-tax { display: grid; gap: 6px; padding-bottom: .9em; font-size: 18px; font-weight: 700; color: var(--ink2); }
.price-fixed { margin-top: 22px; max-width: 64em; padding-left: 16px; border-left: 3px solid var(--ink); font-size: 16px; font-weight: 700; line-height: 1.9; }
.price-per { margin-top: 10px; max-width: 64em; padding-left: 19px; font-size: 14px; line-height: 1.8; color: var(--ink2); }   /* v5.1 §11.2（広告・OGP・見出しには出さない） */
.blk-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 16px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.blk-title small { font-size: 13px; font-weight: 400; color: var(--mute); }
.incl-block { margin-top: 48px; }
.incl-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; counter-reset: tile; }
.incl-tiles li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-content: start; padding: 18px 18px 18px 16px; border: 1px solid var(--ink); counter-increment: tile; }
.incl-tiles li::before { content: counter(tile, decimal-leading-zero); position: absolute; right: 12px; top: 10px; font-size: 12px; font-weight: 900; color: var(--mute); font-variant-numeric: tabular-nums; }
.incl-tiles .ic { grid-row: 1 / span 2; width: 28px; height: 28px; }
.incl-tiles b { font-size: 16px; line-height: 1.5; }
.incl-tiles span { grid-column: 2; margin-top: 4px; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.extra-box { margin-top: 28px; padding: 20px 24px 22px; border: 1.5px dashed #a9a59b; background: var(--tint); }
.extra-box .blk-title { margin-bottom: 12px; }
.extra-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 24px; }
.extra-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; color: var(--ink2); }
.extra-list b { display: block; font-size: 14.5px; color: var(--ink); }
.extra-list .ic { margin-top: 2px; }
.pay { margin-top: 48px; }
.fork { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 44px; align-items: center; padding: 24px 28px; border: 1px solid var(--rule); }
.fork-start { position: relative; display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 10px; padding: 14px 14px 14px 12px; border: 1px solid var(--ink); background: #fff; }
.fork-start::after { content: ""; position: absolute; left: 100%; top: 50%; width: 22px; height: 1.5px; background: var(--ink); }
.fork-start .ic { grid-row: 1 / span 2; }
.fork-start b { font-size: 15px; }
.fork-start span, .fork-steps span { grid-column: 2; font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.fork-paths { position: relative; display: grid; gap: 18px; padding-left: 22px; }
.fork-paths::before { content: ""; position: absolute; left: 0; top: 24px; bottom: 30px; border-left: 1.5px solid var(--ink); }
.fork-path { position: relative; }
.fork-path::before { content: ""; position: absolute; left: -22px; top: 12px; width: 22px; border-top: 1.5px solid var(--ink); }
.fork-no::before { border-top-style: dashed; border-top-color: var(--mute); }
.fork-label { display: inline-block; margin-bottom: 8px; padding: 1px 10px; border: 1px solid var(--ink); font-size: 12.5px; font-weight: 700; background: #fff; }
.fork-no .fork-label { border-style: dashed; border-color: var(--mute); color: var(--ink2); }
.fork-steps { display: flex; align-items: stretch; }
.fork-steps li { position: relative; flex: 1 1 0; display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; align-content: start; padding: 10px 12px; border: 1px solid var(--ink); background: #fff; }
.fork-steps li + li { margin-left: 22px; }
.fork-steps li + li::before { content: ""; position: absolute; right: 100%; top: 50%; width: 22px; border-top: 1.5px solid var(--ink); }
.fork-steps .ic { grid-row: 1 / span 2; width: 22px; height: 22px; }
.fork-steps b { font-size: 14px; line-height: 1.5; }
.fork-no .fork-steps li { border-style: dashed; border-color: var(--mute); background: var(--tint); }
.fork-no .fork-steps li + li::before { border-top-style: dashed; border-top-color: var(--mute); }
.pay .table-wrap { margin-top: 20px; }
.table-wrap { background: #fff; }
.terms { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.terms th { width: 184px; padding: 18px 24px; text-align: left; vertical-align: top; font-size: 14px; font-weight: 700; line-height: 1.8; background: var(--tint); border-bottom: 1px solid var(--hair); }
.terms td { padding: 18px 28px; font-size: 15px; line-height: 1.95; border-bottom: 1px solid var(--hair); }
.terms tr:last-child th, .terms tr:last-child td { border-bottom: 0; }
.terms strong { font-weight: 700; color: var(--ink); }

/* 社内でご検討の方へ: 赤い細い線の帯。挿絵 rg-pair を左に（四角い絵なので白い枠の中） */
.inhouse { margin-top: 64px; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 36px 40px 32px; background: var(--paper); border-top: 2px solid var(--red); border-bottom: 1px solid var(--rule); }
.inhouse-art { padding: 8px; background: #fff; border: 1px solid var(--hair); }
.inhouse-art img { width: 100%; }
.inhouse-title { font-weight: 700; font-size: 24px; line-height: 1.5; letter-spacing: .03em; font-feature-settings: "palt" 1; }
.inhouse-copy > p { margin-top: 8px; color: var(--ink2); }
.inhouse .inhouse-spec { margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--ink); letter-spacing: .04em; }
.inhouse-cta { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 10px; }
.inhouse .inhouse-note { margin-top: 10px; font-size: 13px; color: var(--mute); }
.inhouse-list { margin-top: 14px; border-top: 1px solid var(--hair); }
.inhouse-list li { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.7; }
.inhouse-list .ic { margin-top: 1px; }
/* 目録の横（PC）・下（スマホ）に、資料の中面 4 枚の縮小を「中身の見本」の図として（v5 §4.3・§10）。
   PC は扇形（-6°・-2°・2°・6°。手で広げたように下を軸に回し、少しずつ重ねる）。名前は付けない。リンクにしない・拡大しない */
.inhouse-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 32px; align-items: center; }
.deck-fig { padding-top: 10px; }
.deck-fan { display: flex; justify-content: center; padding: 6px 0 0; }
.deck-fan li { flex: 0 0 200px; min-width: 0; }
.deck-fan li + li { margin-left: -134px; }
.deck-fan img { width: 100%; aspect-ratio: 16 / 9; background: #fff; border: 1px solid var(--rule); cursor: default; box-shadow: 0 1px 2px var(--shade-1), 0 14px 24px -16px var(--shade-2); transform-origin: 50% 240%; transform: translateY(var(--y)) rotate(var(--r)); }
.deck-fan li:nth-child(1) { --r: -6deg; --y: 4px; }
.deck-fan li:nth-child(2) { --r: -2deg; --y: 0px; }
.deck-fan li:nth-child(3) { --r: 2deg; --y: 0px; }
.deck-fan li:nth-child(4) { --r: 6deg; --y: 4px; }
.deck-fig figcaption { margin-top: 22px; font-size: 12px; line-height: 1.5; text-align: center; color: var(--mute); }
/* 透かし入りの確認画面（v5 §4.3・§10）: 分かれ道の図の上に、写真（320px）とキャプションを横並びにした 1 段。スマホは 写真→キャプション→図 */
.pay-photo { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); column-gap: 0; align-items: center; margin-bottom: 18px; padding: 16px; background: var(--tint); border: 1px solid var(--hair); }
.pay-photo figcaption { margin-left: clamp(24px, 3.4vw, 48px); padding-left: 20px; border-left: 3px solid var(--ink); color: var(--ink); }
.pay-cap-1 { display: block; font-size: clamp(18px, 1.5vw, 21px); font-weight: 700; line-height: 1.65; letter-spacing: .02em; font-feature-settings: "palt" 1; word-break: auto-phrase; }
.pay-cap-2 { display: block; margin-top: 8px; font-size: 15px; font-weight: 400; line-height: 1.8; color: var(--ink2); }
@media (max-width: 1180px) {
  .inhouse { grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 36px; }
  .inhouse-body { grid-template-columns: minmax(0, 1fr); }
  .deck-fig { max-width: 440px; padding-top: 18px; }
}
@media (max-width: 1060px) {
  .incl-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .extra-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fork { grid-template-columns: 1fr; row-gap: 22px; }
  .fork-start::after { left: 22px; top: 100%; width: 0; height: 22px; border-left: 1.5px solid var(--ink); background: none; }
}
@media (max-width: 900px) {
  .sec-price { padding-bottom: 64px; }
  .pr-head { display: block; }
  .pr-head .talk { margin-top: 14px; }
  .pr-head .sec-lead { margin-top: 10px; font-size: 14px; line-height: 1.8; }
  .price-hero { padding-bottom: 18px; }
  .price-figure { gap: 2px 12px; }
  .price-pages { font-size: 19px; }
  .price-num { font-size: 92px; }
  .price-tax { font-size: 15px; gap: 2px; padding-bottom: .7em; }
  .price-fixed { margin-top: 14px; padding-left: 12px; font-size: 14.5px; line-height: 1.8; }
  .incl-block { margin-top: 32px; }
  .blk-title { margin-bottom: 10px; font-size: 16px; }
  .incl-tiles { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--ink); }
  .incl-tiles li { padding: 10px 34px 10px 4px; border: 0; border-bottom: 1px solid var(--hair); column-gap: 12px; }
  .incl-tiles li::before { top: 12px; right: 4px; }
  .incl-tiles .ic { width: 24px; height: 24px; }
  .incl-tiles b { font-size: 14.5px; }
  .incl-tiles span { margin-top: 0; font-size: 12.5px; line-height: 1.65; }
  .extra-box { margin-top: 20px; padding: 14px 14px 16px; }
  .extra-list { grid-template-columns: 1fr; gap: 8px; }
  .extra-list b { display: inline; margin-right: 4px; font-size: 14px; }
  .pay { margin-top: 32px; }
  .fork { padding: 16px 14px; row-gap: 18px; }
  .fork-start::after { height: 18px; }
  .fork-paths { gap: 14px; padding-left: 16px; }
  .fork-path::before { left: -16px; width: 16px; }
  .fork-steps { flex-direction: column; }
  .fork-steps li + li { margin-left: 0; margin-top: 10px; }
  .fork-steps li + li::before { right: auto; left: 20px; top: auto; bottom: 100%; width: 0; height: 10px; border-top: 0; border-left: 1.5px solid var(--ink); }
  .fork-no .fork-steps li + li::before { border-left-style: dashed; border-left-color: var(--mute); }
  .terms, .terms tbody, .terms tr, .terms th, .terms td { display: block; width: 100%; }
  .terms th { padding: 10px 14px; border-bottom: 0; }
  .terms td { padding: 8px 14px 14px; font-size: 14px; line-height: 1.85; }
  .inhouse { grid-template-columns: 1fr; gap: 18px; margin-top: 40px; padding: 24px 16px; }
  .inhouse-art { max-width: 420px; }
  .inhouse-title { font-size: 21px; }
  .inhouse-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .inhouse-cta .btn { padding: 0 8px; font-size: 14px; }
  .inhouse-list li { padding: 6px 0; font-size: 13.5px; line-height: 1.6; }
  .deck-fig { max-width: none; padding-top: 12px; }
  .deck-fan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 0; }
  .deck-fan li:nth-child(-n+2) { display: none; }   /* v5 §10: スマホは 13・14 の 2 枚だけ（02・12 は出さない＝lazy なので読み込まれない） */
  .deck-fan li + li { margin-left: 0; }
  .deck-fan img { transform: none; }
  .deck-fig figcaption { margin-top: 6px; }
  .pay-photo { display: block; margin-bottom: 14px; padding: 0; background: none; border: 0; }
  .pay-photo figcaption { margin: 8px 0 0; padding-left: 10px; border-left-width: 2px; font-size: 12.5px; font-weight: 400; line-height: 1.6; color: var(--ink2); }
  /* §21: ここにあった .pay-photo figcaption, .pay-cap-1, .pay-cap-2 { word-break: normal; } は消した（継承の auto-phrase を打ち消して 1 字単位に戻していた） */
  .pay-cap-1, .pay-cap-2 { display: inline; margin: 0; font: inherit; letter-spacing: inherit; color: inherit; font-feature-settings: normal; }   /* スマホは前のまま（1 つの段落） */
}

/* ---------------------------------------------------------------- 5. 制作の流れ（紙。横の時間軸＝お客様の段・当社の段・日数の目盛り。挿絵 fl-chibi-hero。詳しい表は <details>） */
/* ひなたの場合の 6 コマ（v5 §4.6・10/18 の修正）: 漫画のコマのように、細い墨の枠を PC は 3 列×2 行。上に絵（3:2・contain・紙の地。コマの吹き出しを切らない）、
   下に段の番号（墨の小箱）と短いラベル。挿絵は紙の地に multiply。スマホは 2 列×3 行 */
.koma { margin-bottom: 44px; }
.koma-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin-bottom: 12px; font-size: 13.5px; font-weight: 700; line-height: 1.5; letter-spacing: .04em; }
.koma-head::before { content: ""; align-self: center; width: 18px; height: 1.5px; background: var(--ink); }
.koma-head small { font-size: 12px; font-weight: 400; letter-spacing: .02em; color: var(--mute); }
.koma-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }   /* PC は 3 列×2 行（10/18: 6 列では 1 コマ約 130px で小さすぎた） */
.koma-cell { display: flex; flex-direction: column; min-width: 0; border: 1.5px solid var(--ink); }
.koma-pic { position: relative; aspect-ratio: 3 / 2; min-height: 0; overflow: hidden; padding: 12px 12px 0; border-bottom: 1.5px solid var(--ink); }
.koma-pic img { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.koma-art .koma-pic img { mix-blend-mode: multiply; }
.koma-panel .koma-pic { padding: 14px; }
.koma-panel .koma-pic img { object-position: 50% 50%; filter: drop-shadow(0 1px 0 rgba(38, 33, 25, .18)) drop-shadow(0 8px 10px rgba(38, 33, 25, .16)); }
/* 段の番号（墨の小箱）とラベルは普通の行の流れで並べる（flex にすると、括弧が入らない幅でラベルがはみ出す。320px の幅で確認） */
.koma-step { padding: 11px 14px 12px; font-size: 15px; font-weight: 700; line-height: 1.6; word-break: auto-phrase; }
.koma-step .nb { white-space: nowrap; }   /* 括弧の中では折らない（括弧の前でだけ折れる） */
.koma-step b { display: inline-block; margin-right: 8px; padding: 1px 7px 2px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; line-height: 1.35; vertical-align: 1px; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .koma { margin-bottom: 28px; }
  .koma-head { margin-bottom: 8px; font-size: 13px; }
  .koma-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .koma-pic { padding: 6px 6px 0; }
  .koma-panel .koma-pic { padding: 6px; }
  .koma-step { padding: 7px 8px 8px; font-size: 13px; line-height: 1.55; }
  .koma-step b { margin-right: 6px; font-size: 12px; }
}

.tl { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.tl-legend { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.tl-legend::before { content: ""; }
.tl-legend span { display: flex; align-items: flex-start; padding: 14px 0 0; }
.tl-lg-c { background: linear-gradient(90deg, var(--tint), var(--tint)); border-top: 1px solid var(--rule); }
.tl-lg-u { border-top: 1px solid var(--rule); }
.tl-lg-d { border-top: 1px solid var(--rule); }
.tl-steps { position: relative; grid-row: 1 / span 4; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: subgrid; }
.tl-steps::before { content: ""; position: absolute; left: 6.25%; right: 6.25%; top: 22px; height: 1.5px; background: var(--rule); }
.tl-step { grid-row: 1 / span 4; display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.tl-step > * { grid-column: 1; }
.tl-step > .tl-c { grid-row: 2; } .tl-step > .tl-u { grid-row: 3; } .tl-step > .tl-d { grid-row: 4; }
.tl-dot { position: relative; justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); }
.tl-name { grid-row: 1; align-self: end; margin-top: 52px; display: block; padding: 0 4px 12px; text-align: center; font-size: 13.5px; line-height: 1.4; }
.tl-step > .tl-dot { grid-row: 1; align-self: start; }
.tl-no { margin-right: 4px; font-weight: 900; font-variant-numeric: tabular-nums; }
.tl-c, .tl-u { padding: 6px 4px; border-top: 1px solid var(--rule); }
.tl-c { background: var(--tint); }
.tl-box { display: block; height: 100%; padding: 8px 10px; background: #fff; border: 1px solid var(--rule); font-size: 13px; line-height: 1.65; }
.tl-u .tl-box { border-color: var(--ink); }
.tl-c i, .tl-u i, .tl-d i { display: none; }
.tl-d { position: relative; padding: 18px 6px 4px; border-top: 1px solid var(--rule); text-align: center; font-size: 13px; font-weight: 700; line-height: 1.6; }
.tl-d:not(:empty)::before { content: ""; position: absolute; left: 50%; top: -1px; width: 1.5px; height: 9px; background: var(--ink2); }
.tl-foot { margin-top: 28px; display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; align-items: end; }
.tl-hero { width: 100%; mix-blend-mode: multiply; }
.flow-total { margin-bottom: 16px; padding: 16px 20px; border-left: 3px solid var(--ink); background: var(--tint); font-size: 16px; font-weight: 700; line-height: 1.85; }
.flow-details { margin-top: 28px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.flow-details > summary { display: flex; align-items: center; gap: 10px; padding: 14px 0; font-size: 15px; font-weight: 700; list-style: none; cursor: pointer; }
.flow-details > summary::-webkit-details-marker { display: none; }
.flow-details > summary small { font-size: 12.5px; font-weight: 400; color: var(--mute); }
.flow-details > summary::after { content: ""; margin-left: auto; width: 12px; height: 12px; background: linear-gradient(var(--ink), var(--ink)) 50% 50% / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 2px 12px no-repeat; transition: transform .35s var(--ease); }
.flow-details[open] > summary::after { transform: rotate(45deg); }
.flow-details .flow { margin-bottom: 18px; }
.flow { display: grid; grid-template-columns: 92px repeat(8, minmax(0, 1fr)); grid-template-rows: auto auto auto auto; background: #fff; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--rule); }
.flow > li { display: grid; grid-row: 1 / span 4; grid-template-rows: subgrid; border-left: 1px solid var(--hair); }
.flow > li:first-child { border-left: 0; }
.flow > li > span { padding: 12px 12px 14px; border-bottom: 1px solid var(--hair); font-size: 13px; line-height: 1.7; }
.flow > li > span:last-child { border-bottom: 0; }
.flow > li > .flow-no { font-weight: 900; font-size: 22px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.flow-c { background: var(--tint); }
.flow-d { font-weight: 700; }
.flow i { display: none; }
.flow .nil { font-style: normal; font-weight: 400; color: var(--mute); }   /* 「—」も読める濃さ（地との差 4.5:1 以上） */
.flow-legend span { font-size: 12.5px !important; font-weight: 700; color: var(--ink2); }
.flow > .flow-legend > .flow-no { font-family: var(--sans); font-size: 12.5px; padding-top: 18px; }
.flow-ref { margin-top: 16px; font-size: 14px; color: var(--ink2); }
.flow-ref a { margin-left: .5em; font-weight: 700; color: var(--ink); text-underline-offset: 3px; }
@media (max-width: 1060px) {
  .flow > li > span { padding: 10px 8px 12px; font-size: 12.5px; } .flow { grid-template-columns: 64px repeat(8, minmax(0, 1fr)); }
  .tl-c, .tl-u, .tl-d { font-size: 12px; }
}
@media (max-width: 900px) {
  .tl { display: block; }
  .tl-legend { display: none; }
  .tl-steps { display: block; padding-left: 0; }
  .tl-steps::before { left: 17px; right: auto; top: 18px; bottom: 18px; width: 1.5px; height: auto; }
  .tl-step { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: none; column-gap: 12px; padding-bottom: 14px; }
  .tl-step > * { grid-column: 2; }
  .tl-step > .tl-c, .tl-step > .tl-u, .tl-step > .tl-d { grid-row: auto; }
  .tl-step > .tl-dot { grid-column: 1; grid-row: 1 / span 4; width: 36px; height: 36px; }
  .tl-dot .ic { width: 18px; height: 18px; }
  .tl-name { grid-column: 2; grid-row: 1; margin: 0; padding: 7px 0 2px; text-align: left; font-size: 14.5px; }
  .tl-c, .tl-u, .tl-d { grid-column: 2; padding: 0; border: 0; background: none; text-align: left; font-size: 13.5px; font-weight: 400; line-height: 1.65; }
  .tl-box { height: auto; padding: 0; border: 0; background: none; font-size: 13.5px; }
  .tl-d::before, .tl-d:not(:empty)::before { display: none; }
  .tl-d { font-weight: 700; }
  .tl-c:empty, .tl-u:empty, .tl-d:empty { display: none; }
  .tl-c i, .tl-u i, .tl-d i { display: inline-block; min-width: 3.6em; margin-right: 6px; font-style: normal; font-weight: 700; font-size: 12px; color: var(--mute); }
  .tl-foot { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; margin-top: 12px; }
  .flow-total { margin-bottom: 8px; padding: 12px 14px; font-size: 14px; }
  .flow { display: block; background: none; border: 0; }
  .flow-legend { display: none !important; }
  .flow > li { display: grid; grid-template-columns: 36px minmax(0, 1fr); grid-template-rows: none; column-gap: 12px; padding: 12px 14px 12px 16px; margin-bottom: 8px; background: #fff; border: 1px solid var(--hair); border-left: 3px solid var(--ink); }
  .flow > li > span { grid-column: 2; padding: 0; border: 0; font-size: 13.5px; }
  .flow > li > .flow-no { grid-column: 1; grid-row: 1 / span 4; font-size: 22px; }
  .flow-c { background: none; }
  .flow > li > span + span { margin-top: 4px; }
  .flow i { display: inline-block; min-width: 4em; margin-right: 6px; font-style: normal; font-weight: 700; font-size: 12px; color: var(--mute); }
  .flow > li > span:has(> .nil) { display: none; }
}

/* ---------------------------------------------------------------- 6. 活用シーン */
.uc-tabs { display: flex; border-bottom: 1px solid var(--rule); }
.uc-tab { appearance: none; padding: 14px 24px; margin-bottom: -1px; border: 0; border-bottom: 3px solid transparent; background: none; font-weight: 700; font-size: 15px; line-height: 1.5; color: var(--ink2); cursor: pointer; transition: color .18s var(--ease), border-color .3s var(--ease); }
.uc-tab:hover { color: var(--ink); }
.uc-tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.uc-panel { padding: 36px 40px 30px; background: #fff; border: 1px solid var(--rule); border-top: 0; }
.uc-panel.is-entering { animation: panelIn .45s var(--ease); }
@keyframes panelIn { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.uc-print-title { display: none; }
.uc-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "col lg" "col sm" "col note"; column-gap: 48px; row-gap: 20px; align-items: start; }
.uc-body:not(:has(.uc-shot-sm)) { grid-template-areas: "col lg" "col note"; }
.uc-shot-lg { grid-area: lg; }
.uc-col { grid-area: col; }
.uc-shot-sm { grid-area: sm; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: center; }
.uc-shot figcaption { margin-top: 10px; font-size: 14.5px; font-weight: 700; line-height: 1.75; }
.uc-shot-sm figcaption { margin-top: 0; }
.uc-note { grid-area: note; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12px; line-height: 1.7; color: var(--mute); }
.uc-col h4 { margin-top: 22px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--mute); }
.uc-col h4:first-child { margin-top: 0; }
.uc-col ul, .uc-col > p { margin-top: 6px; }
.uc-issues li { position: relative; padding-left: 1.3em; font-weight: 700; line-height: 1.8; }
.uc-issues li::before { content: "—"; position: absolute; left: 0; color: var(--mute); }
.uc-uses { display: flex; flex-wrap: wrap; gap: 8px; }
.uc-uses li { padding: 5px 12px; border: 1px solid var(--rule); font-size: 14px; line-height: 1.6; background: var(--paper); }
.uc-point { margin-top: 22px !important; padding: 14px 16px; border-left: 3px solid var(--ink); background: var(--tint); font-size: 14.5px; line-height: 1.85; }
.uc-point a { margin-left: .4em; font-weight: 700; color: var(--ink); text-underline-offset: 3px; white-space: nowrap; }
@media (max-width: 900px) {
  .uc-tabs { gap: 0; }
  .uc-tab { flex: 1 1 0; padding: 12px 6px; font-size: 13px; line-height: 1.4; }
  .uc-panel { padding: 18px 16px 16px; }
  .uc-body { grid-template-columns: minmax(0, 1fr); grid-template-areas: "lg" "col" "sm" "note"; row-gap: 16px; }
  .uc-body:not(:has(.uc-shot-sm)) { grid-template-areas: "lg" "col" "note"; }
  .uc-shot figcaption { margin-top: 8px; font-size: 13.5px; line-height: 1.65; }
  .uc-shot-sm { grid-template-columns: minmax(0, 46%) minmax(0, 1fr); gap: 12px; }
  .uc-shot-sm figcaption { margin-top: 0; }
  .uc-col h4 { margin-top: 16px; }
  .uc-note { padding-top: 10px; }
  .uc-uses li { font-size: 13.5px; }
}

/* ---------------------------------------------------------------- 7. 品質と情報の取り扱い（白い面。10 分野・150 項目の横棒・揃える手間のカード・担当者がすること・挿絵 qa-kurose） */
.sec-quality { background: var(--surface); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding-bottom: var(--s-l); }
.qa { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 64px; align-items: start; }
.quality-num { display: flex; align-items: baseline; gap: 10px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums lining-nums; }
.quality-num span { font-size: clamp(76px, 8vw, 116px); letter-spacing: -.03em; }
.quality-num small { font-size: 20px; letter-spacing: .06em; }
.quality-body { margin-top: 18px; font-size: 17px; line-height: 1.95; font-weight: 700; }
.qa-bars { margin-top: 24px; border-top: 1px solid var(--rule); }
.qa-row { display: grid; grid-template-columns: 22px minmax(0, 13.5em) minmax(0, 1fr) 2.4em; align-items: center; column-gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--hair); font-size: 14.5px; line-height: 1.5; }
.qa-row .ic { width: 20px; height: 20px; }
.qa-name small { margin-left: 2px; font-size: 12px; color: var(--mute); }
.qa-bar { position: relative; height: 8px; background: var(--hair); }
.qa-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--n) / 20 * 100%); background: var(--ink); }
.qa-opt { color: var(--ink2); }
.qa-opt .qa-bar i { background: repeating-linear-gradient(90deg, #8d897f 0 6px, transparent 6px 9px); }
.qa-n { text-align: right; font-weight: 900; font-variant-numeric: tabular-nums; }
.qa-sum { margin-top: 8px; display: flex; justify-content: flex-end; align-items: baseline; gap: 6px; font-size: 14px; }
.qa-sum b { font-size: 24px; font-weight: 900; font-variant-numeric: tabular-nums; }
.qa-opt-note { margin-top: 4px; text-align: right; font-size: 14px; line-height: 1.7; color: var(--ink2); }   /* 10/27 R-6: オプションは別途お見積り（資料 07 ページと同じ） */
.quality-similar { margin-top: 14px; font-size: 15px; color: var(--ink2); }
.qa-side { display: grid; gap: 24px; }
.qa-art { padding: 8px; background: #fff; border: 1px solid var(--hair); max-width: 420px; }
.qa-art img { width: 100%; }
.quality-info { padding: 24px 26px; background: var(--paper); border-top: 3px solid var(--ink); }
.quality-info h3 { font-weight: 700; font-size: 18px; line-height: 1.5; letter-spacing: .02em; }
.quality-info ul { margin-top: 10px; }
.quality-info li { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); font-size: 14px; line-height: 1.8; }
.quality-info .ic { margin-top: 2px; }
.qa-multi { margin-top: 80px; }
.qa-title { font-weight: 700; font-size: 24px; line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.qa-multi-lead { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.85; }
.qa-multi-note { margin-top: 4px; font-size: 13px; color: var(--mute); }
.qa-cards { margin-top: 20px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: qc; }
.qa-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 16px; background: var(--paper); border-top: 3px solid var(--ink); counter-increment: qc; }
.qa-card::before { content: counter(qc, decimal-leading-zero); font-size: 13px; font-weight: 900; color: var(--mute); font-variant-numeric: tabular-nums; }
.qa-card-what { font-size: 15.5px; line-height: 1.65; }
.qa-card-seen { font-size: 13px; line-height: 1.7; color: var(--ink2); }
.qa-card-seen i { display: inline-block; min-width: 5em; margin-right: 6px; font-style: normal; font-weight: 700; font-size: 12px; color: var(--mute); }
.qa-card-seen { margin-top: auto; padding-top: 8px; border-top: 1px solid var(--rule); color: var(--ink); font-weight: 700; }
@media (max-width: 900px) {
  .sec-quality { padding-bottom: 64px; }
  .qa { grid-template-columns: 1fr; gap: 32px; }
  .quality-body { font-size: 15px; }
  .qa-row { grid-template-columns: 20px minmax(0, 10.5em) minmax(0, 1fr) 2em; column-gap: 8px; font-size: 13px; }
  .qa-name small { display: block; margin: 0; font-size: 11.5px; }
  .qa-art { width: 60%; max-width: 300px; margin: 0 auto; padding: 6px; }

  .quality-info { padding: 18px 16px; }
  .qa-multi { margin-top: 48px; }
  .qa-title { font-size: 20px; }
  .qa-multi-lead { font-size: 14.5px; }
  .qa-cards { grid-template-columns: 1fr; gap: 10px; }
  .qa-card { padding: 14px 16px 16px; }
}

/* ---------------------------------------------------------------- 8. なぜ漫画か（紙。挿絵 ev-hinata-reading＋横棒の比較） */
.ev-wrap { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 40px; align-items: end; }
.ev-art img { width: 100%; mix-blend-mode: multiply; }
.evidence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ev { padding: 32px 34px 30px; background: #fff; border: 1px solid var(--rule); border-top: 2px solid var(--ink); }
.ev-no { font-weight: 700; font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.ev h3 { margin-top: 4px; font-weight: 700; font-size: 22px; line-height: 1.5; letter-spacing: .02em; }
.ev-value { margin-top: 14px; display: flex; align-items: baseline; gap: 6px; font-weight: 900; font-variant-numeric: tabular-nums lining-nums; }
.ev-value strong { font-size: 52px; line-height: 1; letter-spacing: -.01em; }
.ev-value span { font-size: 18px; }
.ev-value i { margin: 0 8px; font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 13px; color: var(--mute); }
.ev-value b { font-size: 22px; color: var(--ink2); }
.ev-bars { margin-top: 18px; display: grid; gap: 8px; }
.ev-bars span { display: grid; grid-template-columns: minmax(0, 1fr) 40px; align-items: center; gap: 10px; }
.ev-bars i { display: block; height: 10px; background: linear-gradient(var(--ink), var(--ink)) 0 0 / var(--bar) 100% no-repeat, var(--hair); }
.ev-bars span + span i { background: linear-gradient(#9b978e, #9b978e) 0 0 / var(--bar) 100% no-repeat, var(--hair); }
.ev-bars b { font-size: 12px; font-weight: 700; color: var(--ink2); }
.ev-copy { margin-top: 18px; font-size: 15px; line-height: 1.9; }
.ev-source { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.75; color: var(--mute); }
.ev-source a { color: var(--ink2); text-underline-offset: 3px; }
.ev-note { margin-top: 22px; font-size: 13px; line-height: 1.85; color: var(--ink2); }
@media (max-width: 900px) {
  .ev-wrap { grid-template-columns: 1fr; gap: 0; }
  .ev-art { display: none; }   /* v5 §4.5: スマホでは挿絵を出さない（lazy なので読み込まれない） */
  .evidence { grid-template-columns: 1fr; gap: 12px; }
  .ev { padding: 16px 16px 14px; }
  .ev h3 { font-size: 19px; }
  .ev-value { margin-top: 8px; }
  .ev-value strong { font-size: 40px; }
  .ev-bars { margin-top: 12px; gap: 6px; }
  .ev-copy { margin-top: 12px; font-size: 14px; line-height: 1.75; }
  .ev-source { margin-top: 10px; padding-top: 10px; font-size: 12px; line-height: 1.65; }
  .ev-note { margin-top: 16px; font-size: 12.5px; line-height: 1.75; }
}

/* ---------------------------------------------------------------- 9. よくある質問 */
.faq { border-top: 2px solid var(--ink); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: grid; grid-template-columns: 52px minmax(0, 1fr) 20px; gap: 8px; align-items: baseline; padding: 20px 0; font-weight: 700; font-size: 16px; line-height: 1.65; list-style: none; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; justify-self: end; align-self: center; width: 12px; height: 12px; background: linear-gradient(var(--ink), var(--ink)) 50% 50% / 12px 2px no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / 2px 12px no-repeat; transition: transform .35s var(--ease); }
.faq details[open] > summary::after { transform: rotate(45deg); }
.faq summary:hover { color: #000; }
.faq-no { font-size: 14px; color: var(--mute); font-variant-numeric: tabular-nums; }
.faq-a { padding: 0 28px 24px 60px; color: var(--ink2); font-size: 15.5px; line-height: 1.95; }
@media (max-width: 900px) {
  .faq summary { grid-template-columns: 40px minmax(0, 1fr) 16px; font-size: 15px; padding: 16px 0; }
  .faq-a { padding: 0 4px 20px 48px; font-size: 14.5px; }
}

/* ご利用いただいた方の声（2026-10-18）: FAQ の後・確かめたい 7 項目の前。白いカード 2 枚（PC は 2 列・スマホは縦に積む）。
   人物の絵・写真・星・数字の強調・赤は使わない。名前の行の頭に、頭文字の小さな丸（墨の線・中は紙の色）だけ */
.voices { margin-top: 48px; }
.voices-title { font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.voices-list { margin-top: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.voice { display: flex; flex-direction: column; padding: 22px 24px 18px; background: var(--surface); border: 1px solid var(--rule); }
.voice-text { flex: 1 1 auto; margin: 0; }
.voice-text p { font-size: 15.5px; line-height: 1.95; word-break: auto-phrase; }
.voice-who { display: flex; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--ink2); }
.voice-mark { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--paper); color: var(--ink); font-size: 12.5px; font-weight: 700; line-height: 1; }
.voices-note { margin-top: 10px; font-size: 13.5px; line-height: 1.8; color: var(--ink2); }
@media (max-width: 900px) {
  .voices { margin-top: 28px; }
  .voices-title { font-size: 16.5px; }
  .voices-list { margin-top: 8px; grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .voice { padding: 14px 14px 12px; }
  .voice-text p { font-size: 14px; line-height: 1.8; }
  .voice-who { margin-top: 10px; padding-top: 8px; font-size: 13px; }
  .voice-mark { width: 24px; height: 24px; font-size: 12px; }
  .voices-note { margin-top: 8px; font-size: 12.5px; line-height: 1.7; }
}

/* FAQ の後（v5.1 §11.3）: どこに頼むにしても、確かめたい 7 項目。div の塊（節にしない）。☐・2 列。資料の 12 面はリンクにしない */
.checks { margin-top: 48px; padding: 24px 28px 22px; background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--ink); }
.checks-title { font-size: 20px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.checks-list { margin-top: 10px; }
.checks-note { margin-top: 12px; font-size: 14px; line-height: 1.8; color: var(--ink2); }
@media (max-width: 900px) {
  .checks { margin-top: 28px; padding: 14px 14px 14px; }
  .checks-title { font-size: 16.5px; }
  .checks-list { margin-top: 4px; }
  .checks-note { margin-top: 8px; font-size: 13px; line-height: 1.65; }
  .price-per { margin-top: 8px; padding-left: 15px; font-size: 13px; line-height: 1.7; }
  .card-note { font-size: 13px; }
}

/* ---------------------------------------------------------------- 10. お問い合わせ（白いカード 2 枚。PC は左＝資料・右＝相談） */
.contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.card { padding: 40px 40px 36px; background: #fff; border: 1px solid var(--rule); scroll-margin-top: calc(var(--hdr) + 16px); }
.card-consult { border-top: 3px solid var(--red); }
.card-dl { border-top: 3px solid var(--ink); }
@media (min-width: 901px) and (min-height: 820px) { .card-dl { position: sticky; top: calc(var(--hdr) + 16px); } }
.card-step { font-size: 12px; font-weight: 700; letter-spacing: .2em; color: var(--mute); }
.card-head h3 { margin-top: 4px; font-weight: 700; font-size: 26px; line-height: 1.45; letter-spacing: .03em; font-feature-settings: "palt" 1; }
.card-sub { margin-top: 4px; font-size: 14px; color: var(--ink2); }
.card-note { margin-top: 6px; font-size: 13.5px; line-height: 1.7; color: var(--ink2); }   /* v5.1 §11.3: 相談だけでは注文にならない・電話番号は伺わない */
.lpb-form { margin-top: 8px; }
.fld { margin-top: 20px; }
.fld > label, .fld > legend { display: block; margin-bottom: 6px; font-weight: 700; font-size: 14px; line-height: 1.6; }
.fld em { margin-left: 8px; font-style: normal; font-size: 12px; font-weight: 700; color: var(--red); letter-spacing: .04em; }
.fld .opt { margin-left: 8px; font-size: 12px; font-weight: 400; color: var(--mute); }
.lpb-form input[type="text"], .lpb-form input[type="email"], .lpb-form select, .lpb-form textarea {
  width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8a867c; border-radius: 2px; background: #fff;   /* 白地で 3.63:1（WCAG 1.4.11 の 3:1 以上。旧 #a9a59b は 2.46:1） */
  font: inherit; font-size: 16px; line-height: 1.6; color: var(--ink);
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.lpb-form textarea { min-height: 132px; resize: vertical; }
.lpb-form select { appearance: none; padding-right: 36px; background: #fff linear-gradient(45deg, transparent 50%, var(--ink) 50%) calc(100% - 18px) 52% / 6px 6px no-repeat, linear-gradient(-45deg, transparent 50%, var(--ink) 50%) calc(100% - 13px) 52% / 6px 6px no-repeat; }
.lpb-form input:hover, .lpb-form select:hover, .lpb-form textarea:hover { border-color: var(--ink2); }
.lpb-form input:focus-visible, .lpb-form select:focus-visible, .lpb-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; border-color: var(--ink); }
.lpb-form [aria-invalid="true"] { border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red); }
.hint { margin-top: 6px; font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.check, .fld > .check { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-size: 14.5px; font-weight: 400; line-height: 1.7; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); }
.check a { font-weight: 700; text-underline-offset: 3px; }
.consent { margin-bottom: 10px; padding: 12px 14px; background: var(--tint); border: 1px solid var(--hair); font-size: 13px; line-height: 1.8; color: var(--ink2); }
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.captcha { margin-top: 20px; min-height: 65px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 6px 12px; border: 1px solid #8a867c; border-radius: 999px; font-size: 13.5px; line-height: 1.5; cursor: pointer; transition: background-color .15s var(--ease), color .15s var(--ease), border-color .15s; }
.chip input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.math-q { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fld-math input { max-width: 120px; }
.form-error { margin-top: 18px; padding: 12px 14px; background: #fff5f5; border: 1px solid #e8a3aa; border-left: 3px solid var(--red); color: #8c0d18; font-size: 14px; font-weight: 700; line-height: 1.75; }
.form-off { margin-top: 18px; padding: 12px 14px; background: var(--tint); border: 1px solid var(--rule); font-size: 14px; line-height: 1.75; }
.submit { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 58px; margin-top: 24px; border: 0; border-radius: 2px; color: #fff; font-weight: 700; font-size: 16px; letter-spacing: .08em; cursor: pointer; transition: background-color .18s var(--ease), opacity .2s; }
.submit-consult { background: var(--red); box-shadow: 0 1px 0 rgba(110, 6, 16, .45), 0 14px 26px -18px rgba(210, 17, 35, .75); }
.submit-consult:hover:not(:disabled) { background: var(--red-press); }
.submit-dl { background: var(--ink); }
.submit-dl:hover:not(:disabled) { background: #2b2f36; }
.submit:disabled { opacity: .55; cursor: progress; }
.submit-busy { display: none; }
.submit.is-sending .submit-label { display: none; }
.submit.is-sending .submit-busy { display: inline; }
.form-note { margin-top: 12px; font-size: 12.5px; line-height: 1.7; color: var(--mute); }
.done { margin-top: 18px; outline: none; }
.done:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.done-mark { display: inline-block; padding: 2px 10px; border: 1px solid var(--ink); font-size: 12px; font-weight: 700; letter-spacing: .14em; }
.done h4 { margin-top: 12px; font-weight: 700; font-size: 22px; line-height: 1.5; }
.done > p { margin-top: 10px; font-size: 14.5px; line-height: 1.85; }
.done b[data-dl-email] { word-break: break-all; }
.done-lead { font-weight: 700; }
.done-receipt b { margin-left: 10px; font-size: 18px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.done-steps { margin-top: 14px; border-top: 1px solid var(--hair); }
.done-steps li { padding: 9px 0; border-bottom: 1px solid var(--hair); font-size: 14px; line-height: 1.75; }
.done-steps b { display: inline-block; min-width: 7em; margin-right: 8px; }
.overview { margin-top: 20px; padding: 18px 20px; background: var(--tint); border: 1px solid var(--hair); }
.overview h5 { font-size: 13px; font-weight: 700; letter-spacing: .1em; color: var(--mute); }
.overview dl { margin-top: 8px; }
.overview dl > div { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 10px; padding: 8px 0; border-top: 1px solid var(--hair); font-size: 13.5px; line-height: 1.75; }
.overview dt { font-weight: 700; }
.done-next { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.done-again { padding: 0; border: 0; background: none; font-size: 13px; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.done-dl a { font-weight: 700; text-underline-offset: 3px; }
@media (max-width: 900px) {
  .contact-cards { grid-template-columns: 1fr; gap: 16px; }
  .card { padding: 26px 18px 24px; }
  .card-head h3 { font-size: 22px; }
}

/* ---------------------------------------------------------------- 11. 会社概要・フッター */
.company { border-top: 2px solid var(--ink); }
.company > div { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--hair); font-size: 15px; line-height: 1.85; }
.company dt { font-weight: 700; color: var(--ink2); }
.company a { text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.company-note { font-size: 13px; color: var(--mute); }
.ftr { padding: 28px 0 36px; border-top: 1px solid var(--rule); background: var(--surface); }
.ftr-in { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 28px; font-size: 13px; color: var(--ink2); }
.ftr-name { font-weight: 700; color: var(--ink); }
.ftr a { text-underline-offset: 3px; }
.ftr-build { margin-left: auto; font-size: 12px; color: var(--mute); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
@media (max-width: 900px) {
  .company > div { grid-template-columns: 1fr; gap: 2px; padding: 12px 0; font-size: 14.5px; }
  .ftr-build { margin-left: 0; width: 100%; }
}

/* ---------------------------------------------------------------- スマホ下部の固定バー（FV のボタンが画面外・閲覧台の拡大中でない・お問い合わせの節でない） */
.lpb-sticky { display: none; }
@media (max-width: 900px) {
  .ftr { padding-bottom: calc(36px + 68px + env(safe-area-inset-bottom)); }
  .lpb-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: rgba(246, 245, 241, .97); border-top: 1px solid var(--rule); box-shadow: 0 -10px 24px -18px var(--shade-2);
    transform: translateY(110%); visibility: hidden;
    transition: transform .32s var(--ease), visibility 0s linear .32s;
  }
  .lpb-sticky.is-on { transform: none; visibility: visible; transition: transform .42s var(--ease), visibility 0s; }
  .lpb-sticky .btn { min-height: 48px; padding: 0 6px; font-size: 14px; letter-spacing: .03em; }
}

/* ---------------------------------------------------------------- 拡大の dialog */
.dlg { padding: 0; border: 0; color: var(--ink); }
.dlg::backdrop { background: rgba(21, 23, 27, .8); }
.dlg[open] { animation: dlgIn .42s var(--ease); }
@keyframes dlgIn { from { opacity: .3; transform: scale(.985); } to { opacity: 1; transform: none; } }
.dlg-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dlg-bar h2 { font-size: 15px; font-weight: 700; letter-spacing: .06em; }
.dlg-close { min-height: 40px; padding: 0 14px; border: 1px solid currentColor; border-radius: 2px; background: none; font-size: 13.5px; font-weight: 700; cursor: pointer; }
.ex-dlg { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: transparent; color: #fff; }
.ex-dlg[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.diy-dlg[open] { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
.diy-dlg-request, .diy-dlg-note { width: min(56em, 100% - 32px); margin: 0 auto; font-size: 13.5px; line-height: 1.75; color: rgba(255, 255, 255, .86); }
.diy-dlg-request { padding: 8px 14px; margin-bottom: 10px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 2px; }
.diy-dlg-note { padding-top: 10px; text-align: center; color: #fff; }
.ex-dlg .dlg-bar { padding: 12px 20px; }
.dlg-stage { display: flex; align-items: center; justify-content: center; min-height: 0; padding: 0 16px; }
.dlg-stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; aspect-ratio: 2 / 3; background: #fff; box-shadow: 0 30px 60px -30px #000; }
.dlg-nav { display: flex; justify-content: center; gap: 16px; padding: 12px 16px 18px; }
.dlg-next, .dlg-prev { min-height: 44px; min-width: 140px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, .7); border-radius: 2px; background: rgba(255, 255, 255, .06); color: #fff; font-weight: 700; font-size: 14px; cursor: pointer; transition: background-color .18s var(--ease), opacity .2s; }
.dlg-next:hover:not(:disabled), .dlg-prev:hover:not(:disabled) { background: rgba(255, 255, 255, .18); }
.dlg-next:disabled, .dlg-prev:disabled { opacity: .3; cursor: default; }
.style-dlg { width: min(1080px, 100% - 32px); max-height: calc(100dvh - 32px); margin: auto; padding: 0; background: #fff; border: 1px solid var(--rule); overflow: auto; }
.style-dlg .dlg-bar { position: sticky; top: 0; z-index: 1; padding: 12px 20px; background: #fff; border-bottom: 1px solid var(--hair); }
.style-dlg-body { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 28px; padding: 24px; }
.style-dlg-figure img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--hair); }
.style-dlg-no { font-weight: 700; font-size: 14px; color: var(--mute); }
.style-mode-dlg { margin-top: 10px; }
.style-dlg-summary { margin-top: 14px; font-weight: 700; line-height: 1.85; }
.style-dlg-modes { margin-top: 4px; font-size: 13px; color: var(--mute); }
.style-dlg-text h3 { margin-top: 18px; font-size: 13px; font-weight: 700; letter-spacing: .08em; color: var(--mute); }
.style-dlg-text h3 + p, .style-dlg-text ul { margin-top: 6px; font-size: 14.5px; line-height: 1.85; }
.style-dlg-text li { position: relative; padding-left: 1.2em; }
.style-dlg-text li::before { content: "・"; position: absolute; left: 0; }
@media (max-width: 900px) {
  .ex-dlg .dlg-bar { padding: 10px 12px; }
  .dlg-stage { padding: 0 8px; }
  .dlg-next, .dlg-prev { min-width: 0; flex: 1; }
  .style-dlg-body { grid-template-columns: 1fr; padding: 16px; gap: 16px; }
}
html.is-modal { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- 印刷: ヘッダー・下部バー・フォームを隠す。タブと FAQ を全部開く。閲覧台はサムネイル 2 列。リンクの URL を出す */
@media print {
  @page { margin: 14mm; }
  body { background: #fff !important; font-size: 10.5pt; padding: 0 !important; }
  .hdr, .lpb-sticky, .skip-link, .lpb-preview-banner, .lpb-form, .done, .lpb-thumbs, .lpb-controls, .lpb-howto, .style-mode, .fv-photo-hint, .dlg, .ex-price, .uc-tabs, .lpb-endcard, .fv-cta, .inhouse-cta, .done-again, .diy-cta { display: none !important; }
  .sec { padding-block: 18pt; break-inside: auto; }
  .fv-grid { min-height: 0; display: block; }
  .fv-visual { height: 70mm; container-type: normal; margin-top: 8pt; }
  .fv-img { position: static !important; width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: 78% 45% !important; }
  .lpb-viewer { background: none; border: 0; padding: 0; }
  .lpb-stage { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10pt; max-width: none; }
  .lpb-spread, .lpb-spread[hidden] { display: contents !important; }
  .lpb-page { width: auto; box-shadow: none; border: 1px solid #ccc; margin: 0 0 18pt; break-inside: avoid; }
  .lpb-page::after { display: none; }
  .lpb-skip { grid-column: 1 / -1; margin: 0; }
  .uc-panel, .uc-panel[hidden] { display: block !important; border: 1px solid #ccc; margin-bottom: 10pt; break-inside: avoid; }
  .uc-print-title { display: block; margin-bottom: 8pt; font-size: 12pt; }
  .faq details > .faq-a { display: block; }
  details::details-content { content-visibility: visible; display: block; }
  .faq summary::after, .flow-details > summary::after { display: none; }
  .sec-diy, .sec-price, .sec-quality { background: #fff !important; color: var(--ink) !important; }
  .sec-diy .sec-head h2, .sec-diy .diy-try p, .sec-diy .diy-table th, .sec-diy .diy-table td, .sec-diy .diy-lead, .sec-diy .diy-strip-tag, .sec-diy .diy-strip-note, .sec-diy .diy-fact,
  .sec-diy .diy-decide-title, .sec-diy .diy-decide-lead, .sec-diy .diy-decide-close, .sec-diy .diy-time p, .sec-diy .diy-time b,
  .sec-diy .kicker, .sec-diy .talk-bubble, .sec-diy .talk-name, .sec-diy .talk-note, .sec-diy .diy-cond a { color: var(--ink) !important; }
  .sec-diy .kicker-no { -webkit-text-stroke-color: var(--ink); }
  .sec-diy .talk-bubble { background: #fff !important; border-color: var(--rule) !important; }
  .sec-diy .diy-no { border-color: var(--ink); }
  .sec-diy .diy-table th, .sec-diy .diy-table td, .sec-diy .diy-decide, .sec-diy .diy-time, .sec-diy .diy-strip-tag { border-color: var(--rule) !important; }
  .diy-checklist { box-shadow: none; border: 1px solid #ccc; }
  .diy-zoom { box-shadow: none; border: 1px solid #ccc; }
  .sec-diy .diy-faces-title, .sec-diy .face-tag, .sec-diy .face-group figcaption, .sec-diy .face-list span { color: var(--ink) !important; }
  .sec-diy .face-group { background: none; border: 1px solid #ccc; }
  .sec-diy .face-list li + li::before { color: var(--ink2); }
  .sec-diy .face-list img { border-color: var(--rule); }
  .diy-card { box-shadow: none; border: 1px solid #ccc; }
  .koma-strip { grid-template-columns: repeat(3, 1fr); }
  .koma-cell { break-inside: avoid; }
  .shot { box-shadow: none; border: 1px solid #ccc; }
  .deck-fan img { box-shadow: none; }
  .tl-samples-row, .style-grid { display: grid !important; grid-template-columns: repeat(5, 1fr); overflow: visible; }
  .style-grid { grid-template-columns: repeat(9, 1fr); }
  .style-card, .tl-samples-row li { flex: none; break-inside: avoid; }
  .lpb-page[hidden], .lpb-skip[hidden], .lpb-endcard[hidden] { display: block !important; }
  .tl { margin-bottom: 0 !important; }
  .tl-samples { position: static !important; margin-top: 10pt; }
  main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; font-weight: 400; color: #555; word-break: break-all; }
  .flow { break-inside: avoid; }
}

/* ---------------------------------------------------------------- スマホ: 料金までの距離を延ばさないための詰め（v4.1 §11。DIY の節を足した分を、ほかで相殺する） */
@media (max-width: 900px) {
  .trust-list li { padding-top: 9px; padding-bottom: 9px; }
  .ex-head .talk, .pr-head .talk, .diy-head .talk { margin-top: 10px; }
  .talk { gap: 6px; }
  .talk-face { width: 30px; height: 30px; }
  .talk-bubble { padding: 6px 10px 7px; font-size: 13px; line-height: 1.55; border-radius: 10px; }
  .talk-note { font-size: 12px; line-height: 1.4; }
  .ex-notice { margin-top: 10px; font-size: 13px; line-height: 1.7; }
  .ex-price { margin-top: 8px; }
  .style-card { flex-basis: 50%; }
  .style-card figcaption { margin-top: 8px; }
  .style-name { font-size: 13.5px; }
  .sec-diy { padding-top: 44px; padding-bottom: 44px; }
  .sec-diy .sec-head h2 { font-size: 24px; }
  .diy-lead { font-size: 12.5px; line-height: 1.6; }
  .diy-body { margin-top: 12px; }
  .diy-side { margin-top: 10px; }
  .diy-close { margin-top: 10px; gap: 10px; }
  .diy-try p { font-size: 13px; line-height: 1.6; }
  .diy-try .diy-cond { font-size: 12px; }
  .sec-price { padding-top: 56px; }
  .pr-head .sec-lead { font-size: 13.5px; line-height: 1.7; }
  .price-num { font-size: 80px; }
  .price-fixed { font-size: 14px; line-height: 1.7; }
  .incl-tiles li { padding-top: 7px; padding-bottom: 7px; }
  .incl-tiles span { font-size: 12px; line-height: 1.55; }
  .extra-list { gap: 4px; }
  .extra-list li { font-size: 12.5px; line-height: 1.6; }
  .extra-list b { font-size: 13.5px; }
  .fork { padding: 12px; row-gap: 14px; }
  .fork-start { padding: 10px; }
  .fork-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding-left: 0; }
  .fork-paths::before, .fork-path::before { display: none; }
  .fork-start::after { left: 50%; }
  .fork-label { display: block; margin-bottom: 6px; padding: 2px 6px; font-size: 12px; line-height: 1.45; }
  .fork-steps li { grid-template-columns: 18px minmax(0, 1fr); column-gap: 6px; padding: 7px 8px; }
  .fork-steps li + li { margin-top: 8px; }
  .fork-steps li + li::before { left: 16px; height: 8px; }
  .fork-steps .ic { width: 18px; height: 18px; }
  .fork-steps b { font-size: 12.5px; line-height: 1.45; }
  .fork-start span, .fork-steps span { font-size: 12px; line-height: 1.5; }
  .terms th { padding: 8px 12px; font-size: 13px; }
  .terms td { padding: 6px 12px 12px; font-size: 13.5px; line-height: 1.75; }
}
@media (max-width: 900px) {
}
@media (max-width: 900px) {
  .styles-title { font-size: 14.5px; line-height: 1.55; }
  .styles-note { margin-top: 2px; font-size: 12.5px; line-height: 1.55; }
  .styles-head { margin-bottom: 10px; row-gap: 8px; }
  .style-mode button { min-height: 34px; }
  .lpb-styles { margin-top: 22px; }
  .sec-diy .kicker, .sec-price .kicker { margin-bottom: 8px; }
  .sec-diy .sec-head h2 { font-size: 23px; line-height: 1.35; }
  .price-num { font-size: 72px; }
  .price-pages { font-size: 17px; }
  .price-hero { padding-bottom: 14px; }
  .incl-block { margin-top: 24px; }
  .extra-box { margin-top: 16px; }
  .pay { margin-top: 24px; }
  .terms th { display: block; padding: 8px 12px 0; background: none; font-size: 12.5px; color: var(--mute); }
  .terms td { padding: 2px 12px 10px; }
  .terms tr { border-bottom: 1px solid var(--hair); }
  .terms tr:last-child { border-bottom: 0; }
}
@media (max-width: 900px) {
  .extra-list { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .extra-list li { gap: 6px; }
  .extra-list .ic { width: 18px; height: 18px; }
  .extra-list b { display: block; margin: 0; }
  .sec-diy { padding-top: 36px; padding-bottom: 40px; }
  .diy-lead { font-size: 12px; line-height: 1.55; }
  .fork-start { grid-template-columns: 20px minmax(0, 1fr); padding: 8px 10px; }
  .fork-start .ic { width: 20px; height: 20px; }
  .fork-start b { font-size: 13.5px; }
  .fork-start span { font-size: 12px; }
  .fork { row-gap: 12px; }
  .fork-start::after { height: 12px; }
}
@media (max-width: 900px) {
  .extra-list { grid-template-columns: 1fr; gap: 4px; }
  .extra-list b { display: inline; margin-right: 4px; }
  .incl-tiles li { display: block; position: relative; padding: 8px 30px 8px 34px; }
  .incl-tiles .ic { position: absolute; left: 4px; top: 9px; }
  .incl-tiles b, .incl-tiles span { display: inline; }
  .incl-tiles span { margin-left: 4px; }
}
@media (max-width: 900px) {
  .trust-list li { padding-top: 7px; padding-bottom: 7px; font-size: 12px; line-height: 1.5; }
  .trust-list b { font-size: 12.5px; margin-bottom: 0; }
}
@media (max-width: 900px) {
  .sec-examples { padding-top: 56px; padding-bottom: 28px; }
  .sec-examples .sec-head { margin-bottom: 18px; }
  .ex-more { padding-top: 24px; }
  .sec-price { padding-top: 44px; }
  .fv-copy { padding-bottom: 20px; }
}

/* ---------------------------------------------------------------- 作例の閲覧台: スマホ（760px 以下）は 1 ページ＝1 枚で送る（2026-10-18）
   PC の見開きと同じ仕組み。見えていないページは hidden（計測は見えている 1 枚だけ）。左へスワイプ・［次のページ］で次。
   ページは幅いっぱい・縦は画面の 78% まで。最後の 1 枚は CTA のカード。761〜900px は PC と同じ見開き */
.lpb-howto-sp { display: none; }
@media (max-width: 760px) {
  .lpb-viewer { --pw1: min(100%, calc(78svh * 2 / 3)); padding: 14px var(--gut) 16px; }
  /* 10/26: 作例を全 12 ページに。12 枚は 1 行に入らないので 6 枚ずつ 2 段（右上が 1・右から左へ） */
  .lpb-thumbs { flex-wrap: wrap; gap: 26px 8px; max-width: calc(6 * 38px + 5 * 8px); margin-left: auto; margin-right: auto; margin-bottom: 26px; }
  .lpb-thumb { width: 38px; }
  .lpb-stage { position: relative; display: block; touch-action: pan-y; }
  .lpb-spread, .lpb-spread[hidden] { display: block !important; }
  .lpb-spread > *::after { display: none; }
  .lpb-page, .lpb-endcard { width: var(--pw1); margin: 0 auto; }
  .lpb-page figcaption { top: 0; bottom: auto; left: 0; right: auto; padding: 2px 8px; background: rgba(255, 255, 255, .94); border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); color: var(--ink2); font-size: 12px; }
  .lpb-skip { position: absolute; z-index: 1; left: 50%; bottom: 10px; width: calc(var(--pw1) - 24px); margin: 0; padding: 5px 10px; transform: translateX(-50%); background: rgba(21, 23, 27, .86); color: #fff; font-size: 12px; line-height: 1.5; text-align: center; letter-spacing: 0; }
  .lpb-endcard { aspect-ratio: 2 / 3; }
  .lpb-endcard-in { width: calc(100% - 40px); gap: 12px; }
  .lpb-endcard-lead { font-size: 18px; line-height: 1.55; }
  .lpb-endcard-price { font-size: 13.5px; line-height: 1.7; }
  .lpb-endcard-cta { gap: 8px; }
  .lpb-endcard-cta .btn { min-height: 46px; font-size: 14px; }
  .lpb-controls { gap: 10px; margin-top: 12px; }
  .lpb-next, .lpb-prev { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 8px; font-size: 13.5px; }
  .lpb-count { min-width: 4.8em; font-size: 12.5px; }
  .lpb-howto { margin-top: 6px; }
  .lpb-howto-pc { display: none; }
  .lpb-howto-sp { display: inline; }
  .lpb-page.is-in-next, .lpb-endcard.is-in-next { animation: spreadNext .45s var(--ease); }
  .lpb-page.is-in-prev, .lpb-endcard.is-in-prev { animation: spreadPrev .45s var(--ease); }
}

/* ---------------------------------------------------------------- 制作の流れ: 「2 提案」でお届けするキャラクター案の実例（5 枚）
   スマホ・タブレットは 2 の段の中に横 1 列（横にスクロール）。PC は時間軸の下に帯で出し、2 の段から線を引く */
.tl-samples { margin-top: 10px; }
.tl-samples-title { font-size: 12.5px; line-height: 1.6; color: var(--ink2); }
.tl-samples-title b { color: var(--ink); }
.tl-samples-title span { display: block; color: var(--mute); }
.tl-samples-row { display: flex; gap: 8px; margin-top: 6px; overflow-x: auto; padding-bottom: 4px; }
.tl-samples-row li { position: relative; flex: 0 0 116px; padding: 4px 4px 20px; background: #fff; border: 1px solid var(--hair); }
.tl-samples-row img { width: 100%; aspect-ratio: 1100 / 785; object-fit: cover; }
.tl-samples-row span { position: absolute; left: 6px; bottom: 2px; font-size: 11.5px; color: var(--mute); }
.tl-link, .tl-samples-tag { display: none; }   /* 900px 以下（縦の時間軸）は今のまま。PC だけ下の min-width: 901px で出す */
@media (min-width: 901px) {
  /* 「2 提案」の当社の箱 → キャラクター案の実例の箱を、1 本の線（.tl-link・測れる要素）でつなぐ（10/18 指摘「線が切れている」）。
     線は 2 の段の日数の欄の中に置き、上端＝当社の箱の下端（欄の上の罫 1px＋当社の欄の下の余白 6px）、下端＝実例の箱の上端（時間軸の下 14px）。
     線は列の左寄り（20px）に引き、日数の字はその右横に置く（線に重ねない）。実例の箱の左上に札「2 提案で届くもの」（墨の地・白い字） */
  .tl { margin-bottom: 244px; }
  .tl-samples { position: absolute; left: 25%; right: 0; top: calc(100% + 14px); margin: 0; padding: 0 14px 14px; background: #fff; border: 1px solid var(--ink); }
  .tl-link { display: block; }
  .tl-samples-tag { display: flex; width: max-content; align-items: baseline; gap: 5px; margin: 0 0 8px -14px; padding: 3px 10px 4px 12px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
  .tl-samples-tag span { font-weight: 900; font-variant-numeric: tabular-nums; }
  .tl-d.tl-d-link { padding-left: 34px; text-align: left; word-break: auto-phrase; }
  .tl-d.tl-d-link::before { display: none; }
  .tl-link { position: absolute; left: 20px; top: -7px; bottom: -14px; width: 0; border-left: 1.5px solid var(--ink); }
  .tl-samples-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 13px; }
  .tl-samples-title span { display: inline; }
  .tl-samples-row { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 10px; margin-top: 8px; overflow: visible; padding: 0; }
  .tl-samples-row li { flex: none; }
}

/* ---------------------------------------------------------------- v5.1 の DIY（スマホ・900px 以下）
   帯: AI の 4 ページは 1 行に 4 つ。当社の 2 ページは同じ大きさで左に、札と注記を右に（縦を詰める）。
   表: 行ごとに縦に積む（① の見出し → AI の欄 → 当社の欄）。欄の頭に小さく「AIに頼んだ4ページ」「当社の作例」。画像は幅いっぱい */
@media (max-width: 900px) {
  .diy-strips { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 14px; }
  .diy-strip { display: block; grid-row: auto; }
  .diy-strip-tag { margin-bottom: 6px; padding-bottom: 4px; font-size: 12px; letter-spacing: .04em; }
  .diy-pages { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .diy-strip-ours { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto 1fr; column-gap: 6px; align-items: start; }   /* PC の subgrid を外す（札と注記が重なるため） */
  .diy-strip-ours .diy-pages { grid-column: 1 / span 2; grid-row: 1 / span 2; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .diy-strip-ours .diy-strip-tag { grid-column: 3 / span 2; grid-row: 1; margin: 0 0 4px; padding: 0 0 4px 6px; }
  .diy-strip-ours .diy-strip-note { grid-column: 3 / span 2; grid-row: 2; padding-left: 6px; font-size: 12px; line-height: 1.6; }
  .diy-zoom { padding: 3px; }
  .diy-page-no { left: 3px; bottom: 3px; min-width: 18px; padding: 0 4px; font-size: 11px; }
  .diy-zoom-ic { right: 5px; top: 5px; width: 20px; height: 20px; padding: 4px; }
  .diy-table thead { display: none; }
  .diy-table, .diy-table tbody, .diy-table tr, .diy-table th, .diy-table td { display: block; width: auto; }
  .diy-table tr { padding: 10px 0 12px; border-bottom: 1px solid rgba(255, 255, 255, .16); }
  .diy-table tbody th { width: auto; padding: 0 0 6px; border: 0; font-size: 13.5px; }   /* PC の幅 20% を外す（見出しが折れるため） */
  .diy-table td { padding: 0; border: 0; font-size: 13px; line-height: 1.65; }
  .diy-table td + td { margin-top: 10px; }
  .diy-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; line-height: 1.4; color: rgba(255, 255, 255, .72); }
  .diy-cell-img { padding: 3px; }
  .diy-table td p { margin-top: 6px; }
  /* 表の ② コマの形（10/18 判断）: AI（約 60%）と当社（約 40%）を横に並べ、文は 13px。① は文字を読ませる画像なので幅いっぱいのまま */
  .diy-table tbody tr:nth-child(2) { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 4fr); column-gap: 8px; align-items: start; }
  .diy-table tbody tr:nth-child(2) th { grid-column: 1 / -1; }
  .diy-table tbody tr:nth-child(2) td + td { margin-top: 0; }
  .diy-table tbody tr:nth-child(2) td p { font-size: 13px; line-height: 1.55; }
  .diy-fact { margin-top: 10px; font-size: 15px; line-height: 1.7; }
  /* 顔の並びはスマホでは出さない（10/18 判断。lazy なので画像も読み込まれない）。PC は出す */
  .diy-faces { display: none; }
  .diy-decide { margin-top: 24px; padding-top: 18px; }
  .diy-decide-title { font-size: 16.5px; line-height: 1.45; }   /* 1 段小さく */
  .diy-decide-lead { margin-top: 6px; font-size: 13.5px; line-height: 1.65; }
  .checklist { column-gap: 12px; }
  .checklist li { padding: 3px 0 3px 19px; font-size: 13px; line-height: 1.45; }
  .checklist li::before { top: calc(3px + .725em - 6px); width: 12px; height: 12px; }
  .diy-checklist { margin-top: 10px; padding: 6px 12px 8px; box-shadow: none; }
  .diy-decide-close { margin-top: 8px; font-size: 13.5px; line-height: 1.6; }
  .diy-time { margin-top: 14px; padding: 10px 12px; }
  .diy-time p { font-size: 13px; line-height: 1.75; }
}

/* ===== お支払いの分かれ道の線（2026-10-18 指摘「ちゃんと繋がってない」）=====
   根因: 起点の横棒が 22px で、幹（fork-paths の左端）まで 44px ある／幹が上の枝より 12px 下から始まり、下の枝を突き抜けていた／
   1060px 以下では起点の縦棒（x=22）と幹（x=0）がずれ、スマホでは縦棒が 2 列の隙間を指していた。
   直し方: 幹を 1 本の ::before で引かず、枝ごとに自分の分だけ引く（上の枝＝自分の横棒から下の枝の手前まで、下の枝＝上端から自分の横棒まで）。
   どの幅でも、起点の棒の先＝幹の位置になるように数値をそろえる。 */
.fork-paths::before { display: none; }
.fork-start::after { width: 44px; }                       /* 起点の右端 → 幹（列の間 44px） */
.fork-yes::after { content: ""; position: absolute; left: -22px; top: 12px; bottom: -18px; border-left: 1.5px solid var(--ink); }
.fork-no::after { content: ""; position: absolute; left: -22px; top: 0; height: 13px; border-left: 1.5px dashed var(--mute); }
@media (max-width: 1060px) {                              /* 起点が上。縦棒は x=22、幹も x=22 */
  .fork-start::after { left: 22px; width: 0; }
  .fork-paths { padding-left: 44px; }
  .fork-yes::after { top: -22px; }                          /* 起点の縦棒（行の間 22px）から続ける */
}
@media (max-width: 900px) {                               /* スマホ: 2 列。起点の真下から T 字に分ける */
  .fork-paths { position: relative; padding-left: 0; padding-top: 10px; }
  .fork-paths::before { display: block; content: ""; position: absolute; top: 0; left: calc(25% - 2.5px); right: calc(25% - 2.5px); border-top: 1.5px solid var(--ink); bottom: auto; }
  .fork-path::before { display: block; left: 50%; top: -10px; width: 0; height: 10px; border-top: 0; border-left: 1.5px solid var(--ink); }
  .fork-no::before { border-left-style: dashed; border-left-color: var(--mute); }
  .fork-yes::after, .fork-no::after { display: none; }
  .fork-start::after { left: 50%; width: 0; }
}


/* ======================================================================================================
   v5.2（2026-10-19・目視を経て反映）
   1. FV＝案 3「ひなたと轟部長の掛け合い」（決定）。事実の 3 つは箱をやめ、字組みだけで見せる（誌面の数字）。
   2. 節の見出しを漫画のコマに: 太い墨の枠・右下から網点・案内役が枠を破る（PC）／枠の上からのぞく（スマホ）・吹き出しでその節の問い。
   3. 料金の「10万円」の後ろに、薄い集中線。
   色は足さない（墨・紙・白・網点。黄色のマーカーは FV の「10万円」だけ。赤は CTA だけ）。
   動き: FV は読み込み時に 1 回。見出しのコマは画面に入ったら 1 回（lp-b.js）。prefers-reduced-motion では最初から完成形。
   ====================================================================================================== */

/* ---------------------------------------------------------------- FV: 案 3 */
.fv { --mk: #ffd400; --sw: min(660px, (100vw - 100px) / 2); --ex: cubic-bezier(.16, 1, .3, 1); --pop: cubic-bezier(.34, 1.56, .64, 1);
  --pw: min(580px, (100vw - 100px) * .445); --pl: calc(var(--sw) * .5 - .5 * var(--pw)); --pt: calc(50% - .56 * var(--pw)); }
.fv-grid { grid-template-columns: [bleed-l] minmax(var(--gut), 1fr) [copy] minmax(0, 540px) 36px [visual] minmax(0, 660px) minmax(var(--gut), 1fr) [bleed-r]; min-height: clamp(600px, calc(100svh - var(--hdr)), 820px); }
.fv-visual { container-type: normal; }
.fv-copy { padding: 24px 0 28px; }
/* 見出し: 文字は今のまま。「10万円」を特大の太い字に、下に筆のマーカー（黄色）。価格の行だけ少し傾ける */
.fv #fv-title { margin-top: 12px; font-size: inherit; line-height: 1.2; letter-spacing: 0; font-feature-settings: "palt" 1; }
.fv .h1-a { font-size: clamp(21px, 1.72vw, 26px); font-weight: 900; letter-spacing: .01em; }
.fv .h1-b { margin-top: 10px; }
.fv .h1-pages { font-size: clamp(26px, 2.2vw, 33px); font-weight: 900; letter-spacing: .01em; }
.fv .h1-price { margin-top: 2px; white-space: nowrap; font-size: clamp(30px, 2.6vw, 40px); font-weight: 900; transform: rotate(-3deg); transform-origin: 0 90%; }
.fv .h1-big { font-style: normal; font-size: clamp(78px, 7.4vw, 112px); line-height: 1.02; letter-spacing: -.045em; margin-right: .04em; padding: 0 .07em 0 .02em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M7 15 C70 6 150 12 230 7 C300 3 360 9 394 11 C398 22 395 38 391 49 C330 56 262 49 190 54 C120 58 58 52 3 47 C1 36 4 24 7 15 Z' fill='%23ffd400'/%3E%3C/svg%3E") 0 92% / 100% 34% no-repeat;
  animation: fvMark .7s var(--ex) .62s both; }
.fv .fv-sub { margin-top: 18px; font-size: 14.5px; line-height: 1.8; }
.fv .fv-assure { margin-top: 12px; font-size: 16.5px; }
.fv .fv-extra { margin-top: 14px; }
.fv .fv-cta { margin-top: 18px; }

/* 事実の 3 つ（箱・影・角丸・カードを使わない。字組みだけ） */
.fv .fv-facts { margin-top: 22px; border: 0; }
.fv .fv-facts li, .fv .fv-facts li:last-child { margin: 0; border: 0; }
.fv .fv-facts span { margin-top: 0; }
/* 事実の 3 つ「誌面の数字」: 大きな数字を太く、その下に小さな説明。間は細い縦の罫だけ。数字の下端をそろえる（subgrid） */
.fv-facts-type { grid-template-rows: auto auto; }
.fv .fv-facts-type li, .fv .fv-facts-type li:last-child { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 7px; padding: 2px 18px 0; border-left: 1px solid var(--rule); }
.fv .fv-facts-type li:first-child { padding-left: 0; border-left: 0; }
.fv-facts-type b { align-self: end; font-size: 30px; line-height: 1; letter-spacing: -.01em; }
.fv-facts-type b small { font-size: 15px; margin: 0 1px; letter-spacing: 0; }
.fv-facts-type span { font-size: 12px; line-height: 1.6; color: var(--ink2); }

/* 絵: 少し傾けた白いページに 2 段のコマ。吹き出しはコマの間の溝をまたぐ */
.fvk-stage { position: absolute; top: 0; bottom: 0; left: 0; width: var(--sw); }
.fvk-tone { position: absolute; left: -8%; top: 6%; width: 70%; height: 84%; rotate: -6deg; pointer-events: none; background: radial-gradient(circle, rgba(21, 23, 27, .2) 1.05px, transparent 1.45px) 0 0 / 7px 7px;
  -webkit-mask-image: linear-gradient(115deg, transparent 6%, #000 36%, #000 62%, transparent 94%); mask-image: linear-gradient(115deg, transparent 6%, #000 36%, #000 62%, transparent 94%); animation: fvFade .5s ease-out both; }
.fvk-box { position: absolute; left: var(--pl); top: var(--pt); width: var(--pw); font-size: calc(var(--pw) / 29); }
.fvk-page { display: grid; gap: 14px; padding: 14px; background: #fff; border: 1px solid var(--rule); box-shadow: 0 1px 2px var(--shade-1), 0 30px 50px -30px var(--shade-2); rotate: -1.2deg; animation: fvFade .35s ease-out both; }
.fvk-koma { position: relative; margin: 0; }
.fvk-pic { overflow: hidden; background: #fff; }
.fvk-photo .fvk-pic { aspect-ratio: 16 / 7; }
.fvk-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 46%; transform: scale(1.32); transform-origin: 80% 46%; animation: fvFade .55s var(--ex) .3s both; }
.fvk-trio .fvk-pic { aspect-ratio: 3 / 2; }
.fvk-trio img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 60%; animation: fvIn .7s var(--ex) .5s both; }
.fvk-cap { position: absolute; z-index: 2; left: 8px; top: 8px; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 16px); margin: 0; padding: 5px 6px 5px 10px; background: rgba(255, 255, 255, .95); border: 1px solid var(--rule); font-size: 11.5px; line-height: 1.5; color: var(--ink2); }
.fvk-cap .fv-sample { flex: none; padding: 5px 10px; font-size: 11.5px; }
/* 吹き出し（白・墨の線・丸い楕円・しっぽは 1 本の線）。要素の位置＝楕円の中心 */
.fvb { position: absolute; z-index: 3; width: 0; height: 0; }
.fvb-in { position: absolute; }
.fvb svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fvb path { fill: #fff; stroke: var(--ink); stroke-linejoin: round; }
.fvb-text { position: absolute; display: flex; align-items: center; justify-content: center; margin: 0; text-align: center; line-height: 1.32; letter-spacing: .02em; color: var(--ink); font-feature-settings: "palt" 1; white-space: nowrap; }
.fvb-boss { left: 80%; top: 37%; }
.fvb-hina { left: 20%; top: 37.5%; }
.fvb-boss .fvb-in { animation: fvPop .5s var(--pop) .8s both, fvJolt 4s ease-out 2s 3; }   /* 部長の「!?」が 4 秒ごとに小さく跳ねる。3 回で止める（ずっと動かし続けない・判定表 A15） */
.fvb-hina .fvb-in { animation: fvPop .5s var(--pop) 1s both; }
@keyframes fvMark { from { background-size: 0% 34%; } to { background-size: 100% 34%; } }
@keyframes fvFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fvIn { from { opacity: 0; scale: .9; } to { opacity: 1; scale: 1; } }
@keyframes fvPop { 0% { opacity: 0; scale: .3; } 45% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@keyframes fvJolt { 0%, 86%, 100% { translate: 0 0; } 89% { translate: 0 -.3em; } 93% { translate: 0 0; } 96% { translate: 0 -.12em; } }

@media (min-width: 901px) and (max-height: 760px) {
  .fv-copy { padding: 12px 0 18px; }
  .fv #fv-title { margin-top: 8px; }
  .fv .h1-b { margin-top: 6px; }
  .fv .h1-big { font-size: clamp(64px, 6vw, 86px); }
  .fv .fv-sub { margin-top: 10px; line-height: 1.7; }
  .fv .fv-assure { margin-top: 8px; line-height: 1.6; }
  .fv .fv-facts { margin-top: 14px; }
  .fv-facts-type b { font-size: 26px; }
  .fv .fv-extra { margin-top: 8px; }
  .fv .fv-cta { margin-top: 12px; }
}
@media (max-width: 900px) {
  .fv { --sw: 100vw; --pw: calc(100vw - 20px); --pl: 10px; --pt: 4px; }
  .fv-grid { min-height: 0; }
  .fv-visual { order: -1; aspect-ratio: auto; height: 300px; overflow: hidden; }
  .fvk-stage { width: 100%; }
  .fv-copy { padding: 4px 0 22px; }
  /* スマホの順: 見出し → 事実 → ボタン → 安心の一文 → 補足 → 別途お見積り → 入力の案内 */
  .fv-eyebrow { order: 1; } .fv #fv-title { order: 2; } .fv .fv-facts { order: 3; } .fv .fv-cta { order: 4; }
  .fv .fv-assure { order: 5; } .fv .fv-sub { order: 6; } .fv .fv-extra { order: 7; } .fv .fv-micro { order: 8; }
  .fv #fv-title { margin-top: 2px; line-height: 1.14; }
  .fv .h1-a { font-size: min(17px, 4.5vw); }
  .fv .h1-b { margin-top: 3px; }
  .fv .h1-pages { font-size: min(20px, 5.2vw); }
  .fv .h1-price { font-size: min(23px, 6vw); margin-top: 0; }
  .fv .h1-big { font-size: min(56px, 14.4vw); }
  .fv .fv-facts { margin-top: 12px; }
  .fv .fv-facts-type li, .fv .fv-facts-type li:last-child { padding: 0 8px; row-gap: 4px; }
  .fv .fv-facts-type li:first-child { padding-left: 0; }
  .fv-facts-type b { font-size: 19px; }
  .fv-facts-type b small { font-size: 11px; }
  .fv-facts-type span { font-size: 11.5px; line-height: 1.42; }   /* 10/19: 10.5→11.5（足りない分は写真の帯を細く） */
  .fv .fv-cta { margin-top: 12px; }
  .fv .fv-assure { margin-top: 12px; }
  .fv .fv-sub { margin-top: 8px; }
  /* 写真のコマは低く（ボタンまで最初の画面に入れる）。注記は写真に重ねず、ページの上の白い余白に */
  .fvk-page { gap: 8px; padding: 34px 8px 8px; rotate: -.8deg; }
  .fvk-photo .fvk-pic { aspect-ratio: 16 / 2.2; }
  .fvk-photo img { object-position: 74% 50%; transform: scale(1.1); transform-origin: 74% 50%; }
  .fvk-trio .fvk-pic { aspect-ratio: 16 / 8.6; }
  .fvk-trio img { object-position: 50% 18%; }
  .fvk-cap { left: 0; right: 0; top: -31px; max-width: none; padding: 0; background: none; border: 0; font-size: 10.5px; line-height: 1.4; }
  .fvk-cap .fv-sample { display: none; }
  .fvb-boss { left: 79%; top: 32%; }
  .fvb-hina { left: 21.5%; top: 32.5%; }
}

/* ---------------------------------------------------------------- 節の見出し（v2・10/19 目視の後）: 漫画のコマに見えるまで
   人物のいるコマ（01・02・03・04・08）
   ・枠は手描きの線: 辺ごとの SVG（3 本の線を重ねて入り抜き・細い線は角の外へはみ出す・辺ごとに太さを変える）。CSS の border は使わない
   ・人物の側の辺は斜め（--sl。PC 20px・スマホ 13px ≒ 5°前後）。左右は節ごとに交互（hk-r＝人物は右・hk-l＝人物は左）
   ・人物は大きく（前の 1.35 倍）、頭と手が上の枠を破る。人物の後ろに集中線（顔が中心・墨の細い放射線・薄め）。網点は反対側の下の角に少し
   ・吹き出しは手描きの太さ（2px）で、しっぽの先は口の横（--tx/--ty）
   人物のいない節（05・06・07・09・10）: 枠で囲まず、見出しの下に筆の墨の線を 1 本（見出しの長さの 40% 前後） */
.sec-head.hk-head { display: block; }
.hk { --fc: var(--ink); --lw: 4.2px; --sl: 20px; --gr: 34px; --fl: 2px;
  position: relative; isolation: isolate; }
.hk .kicker { margin-bottom: 14px; }
.hk h2, .sec-diy .hk h2 { max-width: none; font-size: clamp(30px, 2.9vw, 40px); font-weight: 900; line-height: 1.36; letter-spacing: .02em; font-feature-settings: "palt" 1; word-break: auto-phrase; }

/* ---- 人物のいるコマ */
.hk-guide { --gw: calc(var(--gh) * var(--ga) / var(--gc));
  container-type: inline-size; display: flex; flex-direction: column; justify-content: center;
  min-height: calc(var(--gh) - 132px); margin-top: 40px; padding: 28px calc(var(--gw) + var(--gr) + 30px) 30px 34px; }
.hk-guide.hk-l { padding: 28px 34px 30px calc(var(--gw) + var(--gr) + 30px); }
.hk-look { --gh: 314px; } .hk-doubt { --gh: 352px; } .hk-shock { --gh: 283px; } .hk-present { --gh: 296px; } .hk-ask { --gh: 323px; }   /* v6（D1）: 約 3 割低く。--gc も同じ比で詰めた（PHP の style） */
/* 枠: 辺ごとの手描きの線（入り抜き）。p1＝細くはみ出す線・p2＝中くらい・p3＝太い芯 */
.hkf { position: absolute; z-index: 1; pointer-events: none; }
.hkf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.hkf path { fill: none; stroke: var(--fc); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.hkf .p1 { stroke-width: calc(var(--lw) * var(--e) * .42); }
.hkf .p2 { stroke-width: calc(var(--lw) * var(--e) * .72); }
.hkf .p3 { stroke-width: calc(var(--lw) * var(--e)); }
.hkf-t { --e: 1.08; top: -7px; height: 14px; left: 0; right: var(--sl); }
.hkf-b { --e: 1; bottom: -7px; height: 14px; left: 0; right: 0; }
.hkf-s { --e: .88; top: 0; bottom: 0; width: 14px; left: -7px; }
.hkf-d { --e: .95; top: 0; bottom: 0; width: var(--sl); right: 0; }
.hk-l .hkf-t { left: var(--sl); right: 0; }
.hk-l .hkf-s { left: auto; right: -7px; }
.hk-l .hkf-d { right: auto; left: 0; }
.hk-l .hkf-d svg { scale: -1 1; }
/* コマの中（斜めの辺の形に切る）: 集中線と網点 */
.hk-deco { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; clip-path: polygon(0 0, calc(100% - var(--sl)) 0, 100% 100%, 0 100%); }
.hk-l .hk-deco { clip-path: polygon(var(--sl) 0, 100% 0, 100% 100%, 0 100%); }
.hk-speed { --R: 760px; position: absolute; width: calc(var(--R) * 2); height: calc(var(--R) * 2);
  left: calc(100% - var(--gr) - var(--gw) + var(--gw) * var(--fx) - var(--R));
  top: calc(100% - var(--fl) - var(--gh) + var(--gh) / var(--gc) * var(--fy) - var(--R)); color: rgba(21, 23, 27, .22);
  -webkit-mask-image: radial-gradient(closest-side, #000 26%, transparent 60%); mask-image: radial-gradient(closest-side, #000 26%, transparent 60%); }
.hk-l .hk-speed { left: calc(var(--gr) + var(--gw) * var(--fx) - var(--R)); }
.hk-speed path { fill: currentColor; }
.hk-tone { position: absolute; left: 0; bottom: 0; width: 34%; height: 78%; background: radial-gradient(circle, rgba(21, 23, 27, .22) 1.1px, transparent 1.55px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(100% 100% at 0 100%, #000, transparent 72%); mask-image: radial-gradient(100% 100% at 0 100%, #000, transparent 72%); }
.hk-l .hk-tone { left: auto; right: 0; -webkit-mask-image: radial-gradient(100% 100% at 100% 100%, #000, transparent 72%); mask-image: radial-gradient(100% 100% at 100% 100%, #000, transparent 72%); }
/* 人物（下の枠で切れ、上の枠を破る） */
.hk-fig { position: absolute; z-index: 2; right: var(--gr); bottom: var(--fl); width: var(--gw); height: var(--gh); overflow: clip; pointer-events: none; }
.hk-l .hk-fig { right: auto; left: var(--gr); }
.hk-fig img { display: block; width: 100%; height: auto; max-width: none; }
/* 吹き出し（白・墨の線 2px・楕円）。しっぽの先＝口の横（--tx/--ty）: しっぽは吹き出しの右下から 11px 右・19px 下に先がある */
.hk-balloon { position: absolute; z-index: 3; max-width: var(--bmw, 320px); margin: 0; padding: .9em 1.75em 1em;
  right: calc(var(--gr) + var(--gw) * (1 - var(--tx)));
  bottom: calc(var(--fl) + var(--gh) - var(--gh) / var(--gc) * var(--ty));
  translate: calc(11.7% - 24px) calc(17.9% - 24px);
  background: #fff; color: var(--ink); border: 2px solid var(--ink); border-radius: 50%; font-size: 15px; font-weight: 700; line-height: 1.6; text-align: center; letter-spacing: .02em; word-break: auto-phrase; transform-origin: calc(88.3% + 24px) calc(82.1% + 24px); }
.hk-l .hk-balloon { right: auto; left: calc(var(--gr) + var(--gw) * var(--tx)); translate: calc(-11.7% + 24px) calc(17.9% - 24px); transform-origin: calc(11.7% - 24px) calc(82.1% + 24px); }
.hk-tail { position: absolute; left: calc(88.3% - 14px); top: calc(82.1% - 10px); width: 40px; height: 36px; overflow: visible; }   /* 先は楕円の点から 24px 右・24px 下 */
.hk-l .hk-tail { left: calc(11.7% - 26px); scale: -1 1; }
.hk-tail path { fill: #fff; stroke: var(--ink); stroke-width: 2px; stroke-linejoin: round; stroke-linecap: round; }
.hk-doubt { --bmw: 360px; } .hk-shock { --bmw: 250px; } .hk-ask { --bmw: 300px; }
/* 濃い地（02 DIY）: 枠と集中線は白。吹き出しは白地・墨の字 */
.hk-dark { --fc: #fff; }
.hk-dark .hk-speed { color: rgba(255, 255, 255, .16); }
.hk-dark .hk-tone { background-image: radial-gradient(circle, rgba(255, 255, 255, .2) 1.1px, transparent 1.55px); }
/* 黒瀬の答え（01・03）: 小さな吹き出し（白・細い墨の線・しっぽは左下）。人物と反対の側（左） */
.hk-answer { position: relative; display: inline-flex; align-items: baseline; gap: 12px; margin: 22px 0 0 4px; padding: 12px 34px 13px; text-wrap: balance; word-break: auto-phrase; background: #fff; border: 1.5px solid var(--ink); border-radius: 50%;
  font-size: 16px; font-weight: 700; line-height: 1.6; }
.hk-answer .talk-name { display: inline; flex: none; font-size: 12px; letter-spacing: .1em; color: var(--mute); }
.hk-tail-s { position: absolute; left: calc(25% - 24px); top: calc(93.3% - 7px); width: 26px; height: 22px; overflow: visible; }
.hk-tail-s path { fill: #fff; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; stroke-linecap: round; }
.hk-narr { max-width: 36em; margin-top: 16px; padding: 10px 14px 11px; background: #fff; color: var(--ink); border: 1.5px solid var(--ink); font-size: 15px; font-weight: 700; line-height: 1.7; }
.hk-narr .talk-name { display: block; font-size: 11.5px; letter-spacing: .1em; color: var(--mute); }
.hk-head .talk-note { margin-top: 6px; text-align: left; }
.hk-head .hk-guide + .talk-note { margin-top: 10px; }
.hk-head .hk-answer + .talk-note { margin-top: 20px; }
.hk-head .sec-lead { margin-top: 16px; }
.ex-head.hk-head .ex-notice { margin-top: 18px; }

/* ---- 人物のいない節: 筆の墨の線 */
.hk-plain { padding: 0; }
.hk-brush { display: block; width: min(40%, calc(var(--hl) * .4em)); min-width: 96px; height: 15px; margin: 12px 0 0 -4px; font-size: clamp(30px, 2.9vw, 40px); color: var(--ink); overflow: visible; rotate: -1.2deg; transform-origin: 0 50%; }
.hk-brush path { fill: currentColor; }

/* ---- 画面に入ったら 1 回（lp-b.js が is-armed を付け、入ったら is-in）: 枠の線が 上→右→下→左 の順に描かれる → 人物がせり上がる → 吹き出しが弾む */
.hk.is-armed .hkf-t { clip-path: inset(-20px calc(100% + 20px) -20px -20px); }
.hk.is-armed .hkf-b { clip-path: inset(-20px -20px -20px calc(100% + 20px)); }
.hk-r.is-armed .hkf-d, .hk-l.is-armed .hkf-s { clip-path: inset(-20px -20px calc(100% + 20px) -20px); }
.hk-r.is-armed .hkf-s, .hk-l.is-armed .hkf-d { clip-path: inset(calc(100% + 20px) -20px -20px -20px); }
.hk.is-armed .hk-fig img { translate: 0 100%; }
.hk.is-armed .hk-balloon { opacity: 0; scale: .3; }
.hk.is-armed .hk-deco { opacity: 0; }
.hk.is-armed .hk-brush { clip-path: inset(-4px 100% -4px -4px); }
.hk.is-armed.is-in .hkf-t { animation: hkReveal .16s linear .02s both; }
.hk-r.is-armed.is-in .hkf-d, .hk-l.is-armed.is-in .hkf-s { animation: hkReveal .12s linear .18s both; }
.hk.is-armed.is-in .hkf-b { animation: hkReveal .16s linear .3s both; }
.hk-r.is-armed.is-in .hkf-s, .hk-l.is-armed.is-in .hkf-d { animation: hkReveal .12s linear .46s both; }
.hk.is-armed.is-in .hk-deco { animation: hkFade .5s ease-out .45s both; }
.hk.is-armed.is-in .hk-fig img { animation: hkRise .72s cubic-bezier(.16, 1, .3, 1) .5s both; }
.hk.is-armed.is-in .hk-balloon { animation: hkPop .5s cubic-bezier(.34, 1.56, .64, 1) .9s both; }
.hk.is-armed.is-in .hk-brush { animation: hkReveal .5s cubic-bezier(.16, 1, .3, 1) .1s both; }
@keyframes hkReveal { to { clip-path: inset(-20px); } }
@keyframes hkFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hkRise { from { translate: 0 100%; } to { translate: 0 0; } }
@keyframes hkPop { 0% { opacity: 0; scale: .3; } 45% { opacity: 1; } 100% { opacity: 1; scale: 1; } }
@media (max-width: 1180px) { .hk-guide { --gr: 22px; } }

/* ---- スマホ: 人物は上の枠の後ろからのぞく（上の枠で切れる）。見出しは全幅。吹き出しは人物の横・口の高さ */
@media (max-width: 900px) {
  .hk { --lw: 3px; --sl: 13px; --gr: 6px; }
  .hk .kicker { margin-bottom: 10px; }
  .hk h2, .sec-diy .hk h2 { font-size: min(26px, 6.7vw); line-height: 1.34; }
  .hk-guide, .hk-guide.hk-l { --ghm: calc(var(--gwm) / var(--gam, var(--ga)) * var(--gcm)); min-height: 0; padding: 14px 16px 16px; margin-top: calc(var(--ghm) + 8px); }
  .hk-guide.hk-r { padding-right: calc(16px + var(--sl)); }
  .hk-guide.hk-l { padding-left: calc(16px + var(--sl)); }
  .hk-fig { bottom: calc(100% - 1px); width: var(--gwm); height: var(--ghm); }
  .hk-speed { --R: 440px; color: rgba(21, 23, 27, .13); top: calc(0px - var(--ghm) + var(--gwm) / var(--gam, var(--ga)) * var(--fy) - var(--R));
    -webkit-mask-image: radial-gradient(closest-side, #000 22%, transparent 46%); mask-image: radial-gradient(closest-side, #000 22%, transparent 46%);
    left: calc(100% - var(--gr) - var(--gwm) + var(--gwm) * var(--fxm, var(--fx)) - var(--R)); }
  .hk-l .hk-speed { left: calc(var(--gr) + var(--gwm) * var(--fxm, var(--fx)) - var(--R)); }
  .hk-balloon { max-width: min(var(--bmwm, 999px), calc((100% - var(--gr) - var(--gwm) * (1 - var(--tx)) - 28px) / .883)); padding: 1.1em 1.9em 1.15em; font-size: 13.5px; line-height: 1.5;
    right: calc(var(--gr) + var(--gwm) * (1 - var(--txm, var(--tx))));
    bottom: calc(100% + var(--ghm) - var(--gwm) / var(--gam, var(--ga)) * var(--ty)); }
  .hk-l .hk-balloon { right: auto; left: calc(var(--gr) + var(--gwm) * var(--txm, var(--tx))); max-width: min(var(--bmwm, 999px), calc((100% - var(--gr) - var(--gwm) * var(--txm, var(--tx)) - 28px) / .883)); }
  .hk-look { --bmwm: 196px; }
  .hk-dark .hk-speed { color: rgba(255, 255, 255, .12); }
  .hk-answer { gap: 8px; margin-top: 14px; padding: 11px 26px 12px; font-size: 13.5px; line-height: 1.5; }
  .hk-tail-s { left: 18px; width: 22px; height: 17px; }
  .hk-head .hk-answer + .talk-note { margin-top: 16px; }
  .hk-narr { margin-top: 10px; padding: 8px 10px 9px; font-size: 13px; line-height: 1.6; }
  .hk-brush { height: 11px; margin-top: 9px; font-size: min(26px, 6.7vw); min-width: 76px; }
}

/* ---------------------------------------------------------------- 料金の「10万円」の後ろに、薄い集中線（中心は数字。効果音は付けない） */
.price-hero { overflow-x: clip; }
.price-num { position: relative; isolation: isolate; }
.price-speed { position: absolute; z-index: -1; left: -32%; top: -62%; width: 164%; height: 224%; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); mask-image: radial-gradient(closest-side, #000 74%, transparent 100%); }
.price-speed path { fill: rgba(21, 23, 27, .26); }


/* ======================================================================================================
   v3（10/19・「演出良くなってる。もっと直して良いよ」）
   A DIY の実験＝チャット画面のモック／B お支払い＝斜めの溝で割った 2 つのコマ／C 流れ＝6 コマの帯が主役／D 声の吹き出し・150 の集中線・黒瀬の答え・スマホの黒瀬・箱をやめる 2 か所
   ====================================================================================================== */

/* ---------------------------------------------------------------- A. チャット画面のモック（汎用。実在のサービスのロゴ・色・作りに似せない）
   白い画面を濃い地に置く。利用者＝右・墨の地・白い字／AI＝左・墨の丸に「AI」・薄い地に縮小。2〜4 ページ目は「続きを書いて」と縮小を 1 行に */
.diy-strips.diy-chatrow { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); grid-template-rows: none; column-gap: 44px; align-items: start; }
.diy-chatrow .diy-strip-ours { grid-row: auto; grid-template-rows: auto auto 1fr; padding-top: 6px; }
.chat { margin: 0; }
.chat-win { overflow: hidden; background: #fff; color: var(--ink); border-radius: 12px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3), 0 36px 60px -34px #000; }
.chat-bar { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--stand); border-bottom: 1px solid var(--rule); }
.chat-dots { display: flex; gap: 6px; }
.chat-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); }
.chat-title { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink2); }
.chat-log { display: grid; gap: 14px; padding: 20px 20px 18px; background: #fff; }
.msg { margin: 0; }
.msg-user { justify-self: end; max-width: 80%; padding: 11px 16px 12px; background: var(--ink); color: #fff; border-radius: 18px 18px 4px 18px; font-size: 14px; line-height: 1.75; }
.msg-ai { display: flex; align-items: flex-start; gap: 10px; }
.ai-icon { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 900; letter-spacing: .02em; }
.msg-img { padding: 7px; background: var(--tint); border: 1px solid var(--hair); border-radius: 4px 16px 16px 16px; }
.chat-log > .msg-ai > .msg-img { width: 200px; }   /* 1 ページ目だけ（2〜4 ページ目は列の幅） */
.chat .diy-zoom { padding: 0; background: none; box-shadow: 0 1px 2px var(--shade-1); border-radius: 2px; }
.chat .diy-zoom:hover { transform: translateY(-2px); }
.chat-turns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 2px 0 0; padding: 0; }
.turn { display: grid; gap: 8px; align-content: start; }
.msg-user.msg-sm { max-width: none; padding: 7px 12px 8px; font-size: 12.5px; line-height: 1.5; border-radius: 14px 14px 3px 14px; }
.msg-ai-sm { gap: 7px; }
.msg-ai-sm .ai-icon { width: 24px; height: 24px; font-size: 9.5px; }
.msg-ai-sm .msg-img { flex: 1 1 auto; min-width: 0; padding: 5px; }
.chat-input { display: flex; align-items: center; gap: 10px; padding: 10px 14px 12px; border-top: 1px solid var(--hair); }
.chat-field { flex: 1 1 auto; height: 34px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); }
.chat-send { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); }
.chat-send svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.chat-note { margin-top: 12px; font-size: 15px; line-height: 1.8; color: rgba(255, 255, 255, .78); }
@media (max-width: 900px) {
  .diy-strips.diy-chatrow { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .chat-win { border-radius: 10px; }
  .chat-bar { padding: 7px 10px; gap: 8px; }
  .chat-dots i { width: 7px; height: 7px; }
  .chat-title { font-size: 11px; }
  /* スマホ: 1 ページ目も 2〜4 ページ目と同じ行に（左から右へ、会話の順のまま）。依頼の吹き出しは全幅 */
  .chat-log { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: 7px; row-gap: 10px; padding: 12px 10px 10px; }
  .chat-log > .msg-user { grid-column: 1 / -1; }
  .chat-log > .msg-ai { grid-column: 1; align-self: end; gap: 4px; }
  .chat-log > .msg-ai .ai-icon { width: 18px; height: 18px; font-size: 7.5px; }
  .chat-log > .msg-ai > .msg-img { width: auto; flex: 1 1 auto; min-width: 0; padding: 3px; }
  .chat-turns { grid-column: 2; margin: 0; }
  .msg-user { max-width: 86%; padding: 8px 12px 9px; font-size: 12.5px; line-height: 1.6; }
  .ai-icon { width: 26px; height: 26px; font-size: 10px; }
  .chat-turns { gap: 7px; }
  .turn { gap: 6px; }
  .msg-user.msg-sm { padding: 5px 3px 6px; font-size: 10.5px; letter-spacing: -.02em; white-space: nowrap; justify-self: stretch; text-align: center; }
  .msg-ai-sm { gap: 4px; }
  .msg-ai-sm .ai-icon { width: 18px; height: 18px; font-size: 7.5px; }
  .msg-ai-sm .msg-img { padding: 3px; }
  .chat-input { padding: 7px 10px 9px; }
  .chat-field, .chat-send { height: 28px; }
  .chat-send { width: 28px; }
  .chat-note { margin-top: 8px; font-size: 13px; line-height: 1.65; }
}

/* 3（10/19 目視）: スマホのチャットは会話の順に。各行＝左に頼んだ文・右に返ってきたページ（依頼 → 1 ページ目、「続きを書いて」→ 2・3・4 ページ目）。
   2 列の格子: 左＝利用者の「続きを書いて」（右寄せ）、右＝AI の答え（縮小 44px・左上の角に丸の AI）。2〜4 ページ目の行は subgrid で同じ列にそろえる（ol・li の意味は残す）。縮小は押せば拡大 */
@media (max-width: 900px) {
  .chat-log { --tw: 44px; grid-template-columns: minmax(0, 1fr) auto; column-gap: 14px; row-gap: 6px; padding: 10px 10px 8px; }
  .chat-log > .msg-user { grid-column: 1; max-width: none; align-self: start; }   /* 依頼の文も同じ形: 左に依頼・右に返ってきた 1 ページ目（4 行とも「頼む → 返る」） */
  .chat-log > .msg-ai { grid-column: 2; align-self: end; }
  .chat-log .msg-ai .msg-img, .chat-log > .msg-ai > .msg-img { flex: none; width: calc(var(--tw) + 6px); min-width: 0; padding: 3px; }
  .chat-turns { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; row-gap: 6px; column-gap: normal; margin: 0; }
  .turn { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: center; row-gap: 0; column-gap: normal; }   /* subgrid の列の溝は親と同じ（normal）。前の規則の gap が残ると、列が溝の差の半分だけずれる（10/19 に 7px→4px のずれを見つけた） */
  .turn > .msg-sm { grid-column: 1; justify-self: end; padding: 6px 12px 7px; font-size: 12px; letter-spacing: 0; text-align: left; }
  .turn > .msg-ai-sm { grid-column: 2; }
  .chat-log .msg-ai { position: relative; gap: 0; }
  .chat-log .ai-icon { position: absolute; z-index: 2; left: -8px; top: -6px; width: 18px; height: 18px; font-size: 7.5px; box-shadow: 0 0 0 2px #fff; }   /* AI の丸は縮小の左上の角に重ねる（頼んだ文の幅を広く取るため） */
  .chat-log > .msg-user { padding: 8px 12px 9px; font-size: 12px; line-height: 1.55; word-break: auto-phrase; }
  .chat-input { padding: 5px 10px 6px; }
  .chat-field, .chat-send { height: 22px; }
  .chat-send { width: 22px; }
  .chat-send svg { width: 15px; height: 15px; }
  .chat-log .diy-page-no { left: 2px; bottom: 2px; min-width: 15px; padding: 0 3px; font-size: 10px; line-height: 1.4; }
  .chat-log .diy-zoom-ic { right: 2px; top: 2px; width: 16px; height: 16px; padding: 3px; }
}
@media (min-width: 601px) and (max-width: 900px) { .chat-log { --tw: 84px; } }
@media (max-width: 600px) { .chat-note { margin-top: 6px; font-size: 12.5px; line-height: 1.6; } }

/* ---------------------------------------------------------------- B. お支払いの分かれ道（2 つのコマ）
   始点の帯（透かしの写真の小さな縮小＋透かし入りで確認）→ 分かれる矢印 → 斜めの白い溝で割ったコマ（PC は左右・スマホは上下）。
   左＝ご納得いただけたら（3 段を太い矢印で）・右＝ご納得いただけない（特大の 0円＋集中線）。枠は手描きの線（見出しのコマと同じ作り） */
.fork.fork-koma { display: block; padding: 0; border: 0; }
.fork-koma .fork-start { display: grid; grid-template-columns: 168px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 22px; row-gap: 6px; align-items: center;
  max-width: 780px; margin: 0 auto; padding: 0; border: 0; background: none; }
.fork-koma .fork-start::after { display: none; }
.fork-koma .pay-photo { display: contents; }
.fork-koma .pay-photo .shot { grid-column: 1; grid-row: 1 / span 2; border: 2.5px solid var(--ink); border-radius: 0; box-shadow: 4px 4px 0 var(--ink); }
.fork-koma .pay-photo .shot img { aspect-ratio: 4 / 3; object-fit: cover; }
.fork-koma .pay-photo figcaption { grid-column: 2; grid-row: 2; align-self: start; margin: 0; padding: 0; border: 0; max-width: none; font-size: 12.5px; line-height: 1.7; color: var(--ink2); }
.fork-koma .pay-photo figcaption span { display: inline; margin: 0; font: inherit; color: inherit; letter-spacing: 0; }
.fork-start-txt { grid-column: 2; grid-row: 1; align-self: end; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0; }
.fork-start-txt .ic { align-self: center; width: 28px; height: 28px; }
.fork-start-txt b { font-size: 24px; font-weight: 900; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.fork-start-txt span { font-size: 15px; font-weight: 700; color: var(--ink2); }
.fork-split { display: block; width: min(420px, 60%); height: 46px; margin: 8px auto 2px; overflow: visible; }
.fork-split path { fill: none; stroke: var(--ink); stroke-width: 3px; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fork-split .hd { fill: var(--ink); stroke-width: 1.5px; }
.fork-koma .fork-paths { --sl: 46px; --lw: 4px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; padding: 0; margin-top: 4px; }
.fork-koma .fork-paths::before, .fork-koma .fork-path::before, .fork-koma .fork-path::after { display: none !important; }
.fork-koma .fork-path { position: relative; isolation: isolate; min-height: 316px; padding: 26px 30px 30px; }
.fork-koma .fork-yes { padding-right: calc(var(--sl) + 168px); }
.fork-koma .fork-no { margin-left: calc(16px - var(--sl)); padding-left: calc(var(--sl) + 26px); padding-right: 168px; }
.fp-fill { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--paper); }
.fork-yes .fp-fill { clip-path: polygon(0 0, calc(100% - var(--sl)) 0, 100% 100%, 0 100%); }
.fork-no .fp-fill { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--sl) 100%); }
.fp-tone { position: absolute; right: 0; top: 0; width: 46%; height: 60%; background: radial-gradient(circle, rgba(21, 23, 27, .2) 1.1px, transparent 1.55px) 0 0 / 7px 7px;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0, #000, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 0, #000, transparent 70%); }
.fpf { position: absolute; z-index: 2; pointer-events: none; }
.fpf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fpf path { fill: none; stroke: var(--ink); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.fpf .p1 { stroke-width: calc(var(--lw) * var(--e) * .42); }
.fpf .p2 { stroke-width: calc(var(--lw) * var(--e) * .72); }
.fpf .p3 { stroke-width: calc(var(--lw) * var(--e)); }
.fpf-t { --e: 1.06; top: -7px; height: 14px; left: 0; right: 0; }
.fpf-b { --e: 1; bottom: -7px; height: 14px; left: 0; right: 0; }
.fpf-s, .fpf-s2 { --e: .9; top: 0; bottom: 0; width: 14px; }
.fpf-d { --e: .95; top: 0; bottom: 0; width: var(--sl); }
.fpf-s2 { display: none; }
.fork-yes .fpf-t { right: var(--sl); } .fork-yes .fpf-s { left: -7px; } .fork-yes .fpf-d { right: 0; }
.fork-no .fpf-b { left: var(--sl); } .fork-no .fpf-s { right: -7px; } .fork-no .fpf-d { left: 0; }
.fork-koma .fork-label { position: relative; z-index: 3; display: block; margin: 0 0 16px; padding: 0; border: 0; background: none; font-size: 19px; font-weight: 900; line-height: 1.45; letter-spacing: .02em; color: var(--ink); font-feature-settings: "palt" 1; }
/* 「おやめ」の途中で折らない（文節で折る・行の長さをそろえる） */
.fork-koma .fork-label { word-break: keep-all; word-break: auto-phrase; overflow-wrap: anywhere; text-wrap: balance; }  /* auto-phrase の無い Safari は keep-all で「・」の後だけで折る */
.fork-koma .fork-steps { position: relative; z-index: 3; display: block; margin: 0; padding: 0; }
.fork-koma .fork-steps li, .fork-koma .fork-no .fork-steps li { position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 10px; align-items: baseline; margin: 0; padding: 0; border: 0; background: none; }
.fork-koma .fork-steps .ic { grid-row: 1 / span 2; align-self: start; width: 26px; height: 26px; margin-top: 1px; }
.fork-koma .fork-steps b { font-size: 17px; font-weight: 900; line-height: 1.45; }
.fork-koma .fork-steps span { grid-column: 2; margin-top: 2px; font-size: 13px; line-height: 1.65; color: var(--ink2); word-break: auto-phrase; }
.fork-koma .fork-no .fork-steps li + li::before { display: none; }   /* 前の図の点線のつなぎを消す */
/* 左: 3 段を太い墨の矢印でつなぐ */
.fork-yes .fork-steps li + li { margin-top: 34px; }
.fork-koma .fork-yes .fork-steps li + li::before { content: ""; display: block; position: absolute; left: 4px; right: auto; top: -29px; bottom: auto; width: 18px; height: 24px; border: 0; background: var(--ink);
  clip-path: polygon(28% 0, 72% 0, 72% 52%, 100% 52%, 50% 100%, 0 52%, 28% 52%); }
/* 右: 特大の 0円（墨・太字）と薄い集中線。費用はかからない → おやめいただける */
.fork-zero { position: relative; z-index: 3; margin: -6px 0 8px; font-size: clamp(96px, 9vw, 128px); font-weight: 900; line-height: .9; letter-spacing: -.04em; font-variant-numeric: tabular-nums lining-nums; }
.fork-zero small { margin-left: .04em; font-size: .3em; letter-spacing: 0; }
.fork-speed { left: calc(var(--sl) - 8%); top: 2%; width: 70%; height: 86%; }
.fork-no .fork-steps li:first-child b { font-size: 21px; }
.fork-no .fork-steps li + li { margin-top: 14px; }
.fork-fig { position: absolute; z-index: 1; bottom: 1px; width: 168px; height: auto; pointer-events: none; }
.fork-yes .fork-fig { right: calc(var(--sl) + 2px); }
.fork-no .fork-fig { right: 14px; }
@media (max-width: 1180px) {
  .fork-koma .fork-yes { padding-right: calc(var(--sl) + 130px); }
  .fork-koma .fork-no { padding-right: 130px; }
  .fork-fig { width: 132px; }
}
@media (max-width: 900px) {
  .fork-koma .fork-start { grid-template-columns: 110px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; }
  .fork-koma .pay-photo .shot { border-width: 2px; box-shadow: 3px 3px 0 var(--ink); }
  .fork-start-txt { gap: 2px 8px; }
  .fork-start-txt .ic { width: 22px; height: 22px; }
  .fork-start-txt b { font-size: 18px; }
  .fork-start-txt span { font-size: 13px; }
  .fork-koma .pay-photo figcaption { font-size: 11.5px; line-height: 1.55; }
  .fork-split { width: 54%; height: 30px; margin: 6px auto 0; }
  /* スマホは上下に割る。溝は右上がりの斜め */
  .fork-koma .fork-paths { --sl: 30px; --lw: 3px; grid-template-columns: minmax(0, 1fr); }
  .fork-koma .fork-path { min-height: 0; }
  .fork-koma .fork-yes { padding: 18px 120px calc(var(--sl) + 16px) 16px; }
  .fork-koma .fork-no { margin: calc(14px - var(--sl)) 0 0; padding: calc(var(--sl) + 14px) 118px 18px 16px; }
  .fork-yes .fp-fill { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--sl)), 0 100%); }
  .fork-no .fp-fill { clip-path: polygon(0 var(--sl), 100% 0, 100% 100%, 0 100%); }
  .fork-yes .fpf-t { right: 0; }
  .fork-yes .fpf-s2 { display: block; right: -7px; bottom: var(--sl); }
  .fork-yes .fpf-b { display: none; }
  .fork-yes .fpf-d, .fork-no .fpf-d { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: var(--sl); }
  .fork-yes .fpf-d { bottom: 0; }
  .fork-no .fpf-d { top: 0; }
  .fork-yes .fpf-d svg, .fork-no .fpf-d svg { scale: 1 -1; }
  .fork-no .fpf-t { display: none; }
  .fork-no .fpf-b { left: 0; }
  .fork-no .fpf-s2 { display: block; left: -7px; top: var(--sl); }
  .fork-koma .fork-label { margin-bottom: 10px; font-size: 16px; }
  .fork-koma .fork-steps b { font-size: 15px; }
  .fork-koma .fork-steps span { font-size: 12px; line-height: 1.55; }
  .fork-koma .fork-steps li, .fork-koma .fork-no .fork-steps li { grid-template-columns: 24px minmax(0, 1fr); column-gap: 8px; }
  .fork-koma .fork-steps .ic { width: 22px; height: 22px; }
  .fork-yes .fork-steps li + li { margin-top: 26px; }
  .fork-koma .fork-yes .fork-steps li + li::before { left: 3px; top: -22px; width: 15px; height: 18px; }
  .fork-zero { margin: -2px 0 4px; font-size: 76px; }
  .fork-no .fork-steps li:first-child b { font-size: 17px; }
  .fork-no .fork-steps li + li { margin-top: 8px; }
  .fork-fig { width: 104px; }
  .fork-yes .fork-fig { right: 8px; bottom: calc(var(--sl) * .55); }
  .fork-no .fork-fig { right: 8px; }
  .fork-speed { left: -14%; top: 6%; width: 74%; height: 84%; }
}

/* ---------------------------------------------------------------- C. 制作の流れ: 6 コマの帯が主役（横の表は消した）。各コマに「誰が」の札と日数。3 つ目のコマからキャラクター案を吊るす */
.koma-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 5px 6px; margin: -3px 0 0; padding: 0 14px 13px; }
.who { display: inline-block; padding: 1px 8px 2px; border: 1.5px solid var(--ink); font-size: 11.5px; font-weight: 700; line-height: 1.4; letter-spacing: .04em; }
.who-c { background: #fff; color: var(--ink); }
.who-u { background: var(--ink); color: #fff; }
.koma-days { flex-basis: 100%; margin-top: 2px; font-size: 13px; font-weight: 700; line-height: 1.6; word-break: auto-phrase; }
/* 「第 / 2稿」「全キ / ャラクター」と語の途中で折れたので、折る所は <wbr> だけにする（入らない時だけ任意の所で折る） */
.koma-days { word-break: keep-all; overflow-wrap: anywhere; }
.koma-days .kd { display: block; text-wrap: balance; }
.koma-days .kd-nw { white-space: nowrap; }
/* 分かれ道の段の見出しは語の途中で折らない。320 幅で「費用はかからな / い」になったので、359px 以下は 15px */
.fork-koma .fork-steps b { word-break: keep-all; }
@media (max-width: 359px) { .fork-no .fork-steps li:first-child b { font-size: 15px; } .fork-start-txt b { font-size: 16px; } }  /* 320 幅で目のアイコンだけ 1 行に残ったので */
.koma-samples { position: relative; grid-column: 1 / -1; list-style: none; }
.koma .koma-samples .tl-samples { position: relative; inset: auto; margin: 0; padding: 12px 16px 16px; background: #fff; border: 1.5px solid var(--ink); }
.koma .koma-samples .tl-samples::before { display: none; }
.koma .koma-samples .tl-samples-tag { display: flex; width: max-content; align-items: baseline; gap: 5px; margin: -12px 0 10px; padding: 3px 10px 4px 12px; background: var(--ink); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.4; letter-spacing: .04em;
  margin-left: calc((100% + 32px - 24px) / 3 * 2 + 24px - 16px); }
.koma .koma-samples .tl-samples-tag span { font-weight: 900; }
.koma-samples::before { content: ""; position: absolute; left: calc((100% - 24px) / 3 * 2 + 24px + 22px); top: -12px; height: 13px; border-left: 2px solid var(--ink); }
.koma .tl-samples-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; font-size: 13px; }
.koma .tl-samples-title span { display: inline; }
.koma .tl-samples-row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin-top: 8px; overflow: visible; padding: 0; }
.koma .tl-samples-row li { flex: none; }
@media (max-width: 900px) {
  .koma-strip { grid-auto-flow: row dense; }
  .koma-who { gap: 4px 5px; padding: 0 8px 9px; }
  .who { padding: 0 6px 1px; font-size: 11px; }
  .koma-days { font-size: 11.5px; line-height: 1.5; }
  .koma .koma-samples .tl-samples { padding: 10px 10px 10px; }
  .koma .koma-samples .tl-samples-tag { margin: -10px 0 8px 6px; font-size: 11.5px; }
  .koma-samples::before { left: 22px; top: -8px; height: 9px; }
  .koma .tl-samples-title { display: block; font-size: 12px; }
  .koma .tl-samples-title span { display: block; }
  .koma .tl-samples-row { display: flex; gap: 6px; overflow-x: auto; }
  .koma .tl-samples-row li { flex: 0 0 104px; }
}

/* ---------------------------------------------------------------- C2（10/19 目視）: 流れの 6 コマを「カードの格子」から漫画のコマへ
   絵だけを見出しと同じ手描きの墨の枠で囲む。コマの面は絵だけ（挿絵は白い地の絵なので、面は白＝絵の地。紙の色は出さない）。コマの間は溝（枠も線も引かない）。
   コマの幅は絵の縦横比で決める: flex の伸び率と基準の幅を、どちらも縦横比 --r に比例させると、同じ段のコマは同じ高さになる（絵は切り抜かない）。
   段の切れ目は、全幅のキャラクター案の実例（100%）と、基準の幅の係数 --k で作る（PC・タブレット 20%＝3 コマで 1 段／599px 以下 40%＝2・1・1・2）。
   番号・ラベル・誰の札・日数は、コマの外の下に枠なしで置く（キャプションの形）。白い面のカードはやめた */
.koma-strip { --g: 20px; --k: 20%; --x3: calc((100% - 2 * var(--g)) * var(--p3) + 2 * var(--g)); display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 var(--g); }
.koma-strip > .koma-cell { flex: var(--r) 0 calc(var(--r) * var(--k)); display: block; min-width: 0; margin: 0 0 30px; border: 0; background: none; }
.koma-cell .koma-pic { --lw: 3.6px; position: relative; aspect-ratio: var(--r); overflow: visible; padding: 0; border: 0; background: #fff; }
.koma-cell .koma-pic img { position: absolute; left: var(--ix); top: var(--iy); width: var(--iw); height: var(--ih); max-width: none; object-fit: fill; filter: none;
  clip-path: inset(var(--ct) var(--cr) var(--cb) var(--cl)); }   /* 漫画の絵に元から付いている細い枠線と外の余白を落とす（枠は下の手描きの線に任せる） */
.kmf { position: absolute; z-index: 2; pointer-events: none; }
.kmf svg { display: block; width: 100%; height: 100%; overflow: visible; }
.kmf path { fill: none; stroke: var(--ink); stroke-linecap: round; vector-effect: non-scaling-stroke; }
.kmf .p1 { stroke-width: calc(var(--lw) * var(--e) * .42); }
.kmf .p2 { stroke-width: calc(var(--lw) * var(--e) * .72); }
.kmf .p3 { stroke-width: calc(var(--lw) * var(--e)); }
.kmf-t { --e: 1.06; top: -7px; height: 14px; left: 0; right: 0; }
.kmf-b { --e: 1; bottom: -7px; height: 14px; left: 0; right: 0; }
.kmf-l { --e: .9; left: -7px; width: 14px; top: 0; bottom: 0; }
.kmf-r { --e: .96; right: -7px; width: 14px; top: 0; bottom: 0; }
.kmf-r svg { scale: -1 1; }
.koma-cell .koma-step { padding: 13px 0 0; }
.koma-cell .koma-who { margin: 0; padding: 7px 0 0; }
/* キャラクター案の実例: 白い面と枠をやめ、提案のコマの下から線で吊るす（札の位置＝提案のコマの左端） */
.koma-strip > .koma-samples { flex: 0 0 100%; min-width: 0; margin: -4px 0 34px; }   /* min-width: 0 が無いと、スマホで 5 枚の横送りの幅（約 544px）に広がって横にはみ出す */
.koma .koma-samples .tl-samples { padding: 0; background: none; border: 0; }
.koma .koma-samples .tl-samples-tag { margin: 0 0 12px var(--x3); }
.koma-samples::before { left: calc(var(--x3) + 14px); top: -22px; height: 22px; }
@media (max-width: 900px) {
  .koma-strip { --g: 12px; }
  .koma-strip > .koma-cell { margin-bottom: 22px; }
  .koma-cell .koma-pic { --lw: 2.8px; }
  .koma-cell .koma-step { padding: 9px 0 0; }
  .koma-cell .koma-who { padding: 5px 0 0; }
  .koma .koma-samples .tl-samples { padding: 0; }
  .koma .koma-samples .tl-samples-tag { margin: 0 0 10px var(--x3); }
  .koma-samples::before { left: calc(var(--x3) + 12px); top: -18px; height: 18px; }
  .koma-strip > .koma-samples { margin: -4px 0 26px; }
}
@media (max-width: 599px) {
  .koma-strip { --g: 10px; --k: 40%; --x3: 0px; }   /* 2 コマ・提案 1 コマ（実例を吊るす）・選ぶ 1 コマ・2 コマ */
  .koma-cell .koma-pic { --lw: 2.5px; }
}

/* ---------------------------------------------------------------- D. ご利用いただいた方の声: カードをやめ、漫画の吹き出しに（白・墨の手描きの線・しっぽは名前の行へ） */
.voices-list { gap: 30px; }
.voice { padding: 0; background: none; border: 0; }
.voice-text { position: relative; padding: 24px 30px 26px; background: #fff; border: 2px solid var(--ink); border-radius: 44px 52px 40px 48px / 38px 34px 46px 40px; }
.voice-text::before, .voice-text::after { content: ""; position: absolute; clip-path: polygon(0 0, 100% 0, 18% 100%); }
.voice-text::before { left: 38px; bottom: -20px; width: 26px; height: 22px; background: var(--ink); }
.voice-text::after { left: 40.5px; bottom: -14px; width: 19px; height: 16px; background: #fff; }
.voice-who { margin-top: 18px; padding: 0 0 0 26px; border-top: 0; }
@media (max-width: 900px) {
  .voices-list { gap: 22px; }
  .voice-text { padding: 16px 20px 18px; border-radius: 30px 36px 28px 34px / 26px 24px 32px 28px; }
  .voice-text::before { left: 26px; bottom: -16px; width: 20px; height: 18px; }
  .voice-text::after { left: 28px; bottom: -11px; width: 15px; height: 13px; }
  .voice-who { margin-top: 14px; padding-left: 18px; }
}
/* 品質の「150」の後ろにも薄い集中線（料金の 10万円と同じ型） */
.q150 { position: relative; isolation: isolate; }
.q-speed { left: -48%; top: -58%; width: 196%; height: 216%; }
/* 01・03 の黒瀬の答え: 横に平たい楕円をやめ、2 行に折った丸みのある形に */
.hk-answer { max-width: 20em; padding: 18px 46px 20px; text-wrap: balance; border-radius: 50% / 46%; }
@media (max-width: 900px) { .hk-answer { max-width: 19.5em; padding: 13px 26px 14px; } }

/* ---------------------------------------------------------------- D. 箱をやめる 2 か所（理由:「四角で囲むのは短絡的」。囲んでいた所を、字組みと罫で見せる）
   1) 料金に含むもの（PC の 6 つの枠）→ 白抜きの大きな番号＋細い罫の誌面に
   2) なぜ漫画か（2 枚の白いカード）→ 上の墨の罫だけ。数字と棒が主役 */
@media (min-width: 901px) {
  .incl-tiles { gap: 0 40px; border-top: 2px solid var(--ink); }
  .incl-tiles li { padding: 20px 0 20px 62px; border: 0; border-bottom: 1px solid var(--hair); }
  .incl-tiles li::before { left: 0; right: auto; top: 16px; font-size: 38px; line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.2px var(--ink); }
  .ev { padding: 26px 6px 0 0; background: none; border: 0; border-top: 3px solid var(--ink); }
  .evidence { column-gap: 56px; }
}
@media (max-width: 900px) {
  .ev { padding: 14px 0 4px; background: none; border: 0; border-top: 2px solid var(--ink); }
  .evidence { gap: 22px; }
}

/* ---------------------------------------------------------------- D. スマホの 04 の黒瀬: 全身で小さいので、胸から上で切って大きく見せる */
@media (max-width: 900px) {
  .hk-present { --gam: .576; --fxm: .5; --txm: .74; --gcm: .4; }
  .hk-present .hk-fig img { width: 170%; margin-left: -12.9%; }
}

@media (prefers-reduced-motion: reduce) {
  .fv *, .fv *::before, .fv *::after, .hk, .hk * { animation: none !important; }   /* 最初から完成形 */
}
@media print {
  /* チャットのモック: 背景を印刷しない設定でも読めるように、白地・墨の字・墨の線に戻す */
  .sec-diy .msg-user, .sec-diy .chat-note, .sec-diy .chat-title { background: #fff !important; color: var(--ink) !important; }
  .sec-diy .msg-user { border: 1px solid var(--ink); }
  .chat-win { box-shadow: none; border: 1px solid #ccc; }
  .hk.is-armed .hkf { clip-path: none; }
  .hk.is-armed .hk-fig img { translate: 0 0; }
  .hk.is-armed .hk-balloon, .hk.is-armed .hk-deco { opacity: 1; scale: 1; }
  .hk.is-armed .hk-brush { clip-path: none; }
}

/* ======================================================================================================
   v6 の検証の判定（2026-10-19・検証の記録の「本物→修正」）。この塊は上の規則を上書きする
   ====================================================================================================== */

/* iOS: Safari には word-break: auto-phrase が無い。見出し・吹き出し・ラベルは、文節の <wbr> と keep-all だけで折る（Chrome も同じ規則にそろえる）。
   入らない長さのときだけ任意の所で折る（overflow-wrap: break-word） */
h1, h2, h3, h4, summary, .hk-balloon, .hk-answer, .hk-narr, .fork-label, .koma-step, .fork-start-txt, .diy-strip-tag, .face-tag, .tl-samples-tag, .diy-qa-q {
  word-break: keep-all !important; overflow-wrap: break-word; }   /* anywhere は最小幅を 1 字にしてしまい、flex の中で縮んで語の途中で折れる（詳しい表を見 / る）ので break-word */

/* D3 DIY: 白い箱＋大きな黒い影をやめる。決めることのリストとカードは箱なしの上下の罫だけ。チャットの窓は細い枠だけ */
.diy-checklist { padding: 2px 0 4px; background: none; color: #fff; border-radius: 0; box-shadow: none; border-top: 1px solid rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .6); }
.diy-checklist li { border-bottom-color: rgba(255, 255, 255, .2); }
.diy-checklist li::before { border-color: rgba(255, 255, 255, .85); background: transparent; }
.diy-card { padding: 20px 0 8px; background: none; color: #fff; border-radius: 0; box-shadow: none; border-top: 1px solid rgba(255, 255, 255, .6); border-bottom: 1px solid rgba(255, 255, 255, .6); }
.diy-card-title { border-bottom: 0; }
.diy-qa { border-bottom-color: rgba(255, 255, 255, .2); }
.diy-card .ic { color: #fff; }
.diy-qa > summary::after { --pm: rgba(255, 255, 255, .75); }
.diy-card :focus-visible { outline-color: #fff; }   /* 濃い地に戻ったので白い輪郭 */
.chat-win { box-shadow: none; border: 1px solid rgba(255, 255, 255, .5); }
/* ボタン: 色の影（光る影）をやめ、押せる感じは下の 1px の線だけ */
.btn-consult, .submit-consult { box-shadow: 0 1px 0 var(--red-press); }
.btn-dl { box-shadow: 0 1px 0 #000; }
/* A7 白いチャットの画面の中は、白い輪郭が見えないので青に */
.sec-diy .chat :focus-visible { outline-color: var(--focus); }

/* A10 の注記で同じ段のコマの高さがそろわなくなったので、提案のコマから実例への線は、提案のコマの「当社」の札の下から引く（段の下まで伸ばして、実例の札の上端へ） */
.koma-samples::before { content: none; }
.koma-strip { align-items: stretch; }
.koma-strip > .koma-cell { display: flex; flex-direction: column; }
.koma-strip > .koma-proposal .koma-who { position: relative; flex: 1 1 auto; }
.koma-strip > .koma-proposal .koma-who::after { content: ""; position: absolute; left: 14px; top: calc(7px + 1.4em + 7px); bottom: -26px; border-left: 2px solid var(--ink); }   /* 段の下の余白 30px − 実例の上の詰め 4px */

/* A4 「0円」の直下の条件は、本文と同じ大きさ・墨の色（0円との釣り合い） */
.fork-koma .fork-no .fork-steps li:first-child span { font-size: 15px; line-height: 1.6; color: var(--ink); }

/* D6 黒瀬の顔: 小さい吹き出しとナレーションに、胸から上の丸い顔（gd-kurose-present の切り抜き。飾り） */
.kf { position: absolute; z-index: 2; width: 52px; height: 52px; overflow: hidden; border-radius: 50%; background: #fff; border: 1.5px solid var(--ink); }
.kf img { position: absolute; left: -50%; top: -9%; width: 303%; max-width: none; height: auto; }
.hk-answer { margin-left: 74px; }
.hk-answer .kf { left: -74px; top: 50%; translate: 0 -50%; }
/* D2 小さい吹き出しのしっぽ: 大きい吹き出しと同じ形を縮めて、顔の方（左）へ向ける。付け根は楕円の線より内側 */
.hk-tail-s { left: -19px; top: calc(50% - 7px); width: 24px; height: 24px; rotate: 90deg; }   /* 大きい吹き出しのしっぽを 90° 回し、付け根（縦）を楕円の左の線より約 4px 内側に・先は左下の顔へ */
.hk-narr { position: relative; min-height: 76px; padding-left: 72px; }
.hk-narr .kf { left: 10px; top: 10px; }
.hk-narr .talk-name { font-size: 12px; }

/* A19 声: 吹き出しをやめ、引用の字組み（大きな引用符・文・細い罫・名前の行）。箱・影は使わない */
.voices-list { gap: 44px; }
.voice-text { position: relative; padding: 34px 0 0; background: none; border: 0; border-radius: 0; }
.voice-text::before { content: "\201C"; position: absolute; left: -4px; top: -14px; width: auto; height: auto; clip-path: none; background: none; font-size: 68px; font-weight: 400; line-height: 1; color: var(--ink); }
.voice-text::after { content: none; }
.voice-who { margin-top: 16px; padding: 10px 0 0; border-top: 1px solid var(--ink); }

/* A2・A8・A5・D9 FV: 注記は写真に重ねず、ページの上の白い余白に（字は PC 13.5px・スマホ 12px）。「作例を読む」はどの幅でも見える。枠は手描きの線 */
@media (min-width: 901px) { .fv { --pt: max(8px, calc(50% - .56 * var(--pw) - 19px)); } }   /* 注記の分だけページが高くなったので少し上へ。ただし絵の枠の上（ヘッダーの下）より上には出さない */
.fvk-koma { --lw: 3.4px; }
.fvk-page { padding-top: 52px; }
.fvk-cap { left: 0; right: 0; top: auto; bottom: calc(100% + 7px); align-items: flex-end; justify-content: space-between; max-width: none; padding: 0; background: none; border: 0; font-size: 13.5px; line-height: 1.45; }
.fvk-cap .fv-sample { padding: 4px 10px; font-size: 13px; }
.fvk-cap > span { word-break: keep-all; overflow-wrap: anywhere; }   /* 「写 / 真」と語の途中で折らない（。の後で折る） */
.fvb-boss { top: 40.5%; }
.fvb-hina { top: 41%; }

/* A5 字の下限（PC 13.5px）: 本文・注記・キャプション・条件・フォームの説明。番号・札・バッジ（必須・任意・vs・段の番号など）は除く */
@media (min-width: 901px) {
  .fv-eyebrow, .fv .fv-facts-type span, .fv .fv-extra, .fv .fv-price, .fv .fv-micro, .trust-list li a, .trust-list li span, .talk-note, .lpb-page figcaption, .lpb-howto, .lpb-howto span,
  .diy-strip-tag, .diy-table th, .face-tag, .diy-cond a, .blk-title small, .incl-tiles li span, .fork-koma .pay-photo figcaption, .fork-koma .fork-steps span, .deck-fig figcaption,
  .inhouse .inhouse-spec, .inhouse .inhouse-note, .diy-table thead th, .extra-list li span, .fvk-cap .fv-sample, .uc-col h4, .uc-note, .ev-source, .ev-source a, .ev-note, .koma .tl-samples-title, .koma .tl-samples-title b, .koma .tl-samples-title span,
  .koma-days, .flow-details summary small, .qa-multi-note, .qa-card-seen, .hint, .consent, .form-note, .company-note, .msg-user.msg-sm, .koma .koma-samples .tl-samples-tag { font-size: 13.5px; }
}

/* A14 読み込みの後で「視差効果を減らす」にした時も、見出しのコマは完成形（印刷と同じ戻し。lp-b.js も is-armed を外す） */
@media (prefers-reduced-motion: reduce) {
  .hk.is-armed .hkf { clip-path: none; }
  .hk.is-armed .hk-fig img { translate: 0 0; }
  .hk.is-armed .hk-balloon, .hk.is-armed .hk-deco { opacity: 1; scale: 1; }
  .hk.is-armed .hk-brush { clip-path: none; }
}

@media (max-width: 900px) {
  /* A2 スマホの FV: 見出し → 税別 → 事実 → 別途お見積り → ボタン → 安心 → 補足の残り → 入力の案内（補足の文は変えず、1 文目だけ前へ） */
  .fv .fv-sub { display: contents; }
  .fv .fv-sub-tax { order: 3; display: block; margin-top: 4px; font-size: 13.5px; font-weight: 700; line-height: 1.5; color: var(--ink); }
  .fv .fv-facts { order: 4; }
  .fv .fv-extra { order: 5; margin-top: 8px; }
  .fv .fv-cta { order: 6; margin-top: 8px; }
  .fv .fv-assure { order: 7; }
  .fv .fv-sub-rest { order: 8; display: block; margin-top: 8px; }
  .fv .fv-micro { order: 9; }
  .fvk-koma { --lw: 2.6px; }
  /* ボタンまで最初の画面（390×660）に入れるため、写真の帯をさらに細く（16:2.2 → 16:1.15）・下のコマも少し低く（16:8.6 → 16:7）・絵の高さ 300 → 248px */
  .fv-visual { height: calc(64px + .51 * (100vw - 36px)); }   /* ページの高さ（幅で決まる）＋上下の少しの余白。390 幅で約 245px */
  .fv .fv-facts { margin-top: 10px; }
  .fvk-page { padding-top: 40px; }
  .fvk-photo .fvk-pic { aspect-ratio: 16 / 1.15; }
  .fvk-trio .fvk-pic { aspect-ratio: 16 / 7; }
  .fvk-trio img { object-position: 50% 14%; }
  .fvk-cap { top: auto; bottom: calc(100% + 5px); font-size: 12px; line-height: 1.4; gap: 8px; }
  .fvk-cap .fv-sample { display: inline-flex; padding: 3px 8px; font-size: 12px; }
  .fvk-box { font-size: max(12.3px, calc(var(--pw) / 29)); }   /* 吹き出しの字の下限 12px（ひなたの吹き出しは 0.98em） */
  .fvb-boss { top: 33.8%; }
  .fvb-hina { top: 34.3%; }
  /* A5 字の下限（スマホ 12px） */
  .fv .fv-facts-type span, .fv .fv-facts-type b small, .chat-title, .fork-koma .pay-photo figcaption, .who, .koma-days, .koma .koma-samples .tl-samples-tag, .qa-name small, .tl-samples-row span { font-size: 12px; }
  .fork-koma .fork-no .fork-steps li:first-child span { font-size: 13.5px; }
  .diy-card { padding: 14px 0 6px; }
  .koma-strip > .koma-proposal .koma-who::after { left: 12px; top: calc(5px + 1.4em + 6px); bottom: -18px; }
  .hk-answer { margin-left: 56px; }
  .hk-answer .kf { left: -56px; width: 44px; height: 44px; }
  .hk-narr { min-height: 64px; padding-left: 60px; }
  .hk-narr .kf { left: 8px; top: 8px; width: 44px; height: 44px; }
  .hk-tail-s { left: -16px; top: calc(50% - 6px); width: 20px; height: 20px; }
  .voices-list { gap: 30px; }
  .voice-text { padding-top: 26px; }
  .voice-text::before { top: -10px; font-size: 52px; }
}

@media (max-width: 369px) {
  /* 360 幅以下は FV の注記が 3 行になる（「作例を読む」の分）。ページの上の余白と絵の高さを 1 行分ふやす */
  .fvk-page { padding-top: 56px; }
  .fv-visual { height: calc(80px + .51 * (100vw - 36px)); }
}
@media print {
  .sec-diy .diy-checklist, .sec-diy .diy-card, .sec-diy .diy-card * { color: var(--ink) !important; }
  .sec-diy .diy-checklist, .sec-diy .diy-card { border-color: #999; }
  .sec-diy .diy-checklist li::before { border-color: var(--ink); }
  .chat-win { border-color: #ccc; }
}

/* ======================================================================================================
   v7（2026-10-19・設計書 §13 指示「見づらい・細かい説明は不要・左右比較で・イラストがないと読まない」）。この塊は上の規則を上書きする
   ====================================================================================================== */

/* DIY の節は紙の地に（左右比較の太い墨の罫・墨の特大の数字・背景の抜けた挿絵が見えるように）。見出しのコマだけ墨の地のまま（斜めの辺に合わせて塗る） */
.sec-diy { background: var(--paper); color: var(--ink); }
.sec-diy :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hk-dark { isolation: isolate; }
.hk-dark::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink); clip-path: polygon(var(--sl) 0, 100% 0, 100% 100%, 0 100%); }
.hk-dark.hk-r::before { clip-path: polygon(0 0, calc(100% - var(--sl)) 0, 100% 100%, 0 100%); }
.hk-dark :focus-visible { outline-color: #fff; }
.diy-decide { border-top: 0; }
.diy-decide-lead { color: var(--ink2); }
.diy-checklist { color: var(--ink); border-top-color: var(--ink); border-bottom-color: var(--ink); }
.diy-checklist li { border-bottom-color: var(--hair); }
.diy-checklist li::before { border-color: var(--ink2); }
.diy-cond a { color: var(--ink); }
.sec-diy .btn-line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
.sec-diy .btn-line:hover { background: rgba(21, 23, 27, .06); }

/* 13.1 左右比較 5 行: 行ごとに太い墨の罫。大きな番号＋太い短い見出し。同じ行の 2 枚は同じ高さ（flex の伸びと基準を縦横比 --r に比例させる） */
.cmp { margin-top: 56px; }
.cmp-row { padding-top: 26px; border-top: 4px solid var(--ink); }
.cmp-row + .cmp-row { margin-top: 48px; }
.cmp-title { display: flex; align-items: center; gap: 16px; margin: 0 0 18px; font-size: 28px; font-weight: 900; line-height: 1.35; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.cmp-no { flex: none; font-size: 50px; font-weight: 900; line-height: 1; color: transparent; -webkit-text-stroke: 1.6px var(--ink); font-variant-numeric: tabular-nums; }
.cmp-pair { display: flex; align-items: flex-start; gap: 40px; }
.cmp-side { position: relative; flex: var(--r) 1 2px; min-width: 0; margin: 0; }   /* 基準 2px＝ボタンの左右の枠。残りを縦横比で分けると、2 枚の画像の高さがそろう */
.cmp .cmp-zoom { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--rule); border-radius: 0; background: #fff; box-shadow: none; cursor: zoom-in; }
.cmp .cmp-zoom { overflow: hidden; }
.cmp .cmp-zoom:hover { transform: none; border-color: var(--ink); }
/* 最後の 10%: 押せることを、枠の中の小さな寄りで伝える（画像は枠の中で 2.5% 寄る・拡大のアイコンは墨に反転。expo-out 0.5 秒。触れる画面と reduced-motion では寄らない） */
.cmp-zoom img { transition: scale .5s var(--ease); }
.cmp-zoom-ic { transition: background-color .2s var(--ease), color .2s var(--ease); }
@media (hover: hover) { .cmp .cmp-zoom:hover img { scale: 1.025; } }
.cmp .cmp-zoom:hover .cmp-zoom-ic, .cmp .cmp-zoom:focus-visible .cmp-zoom-ic { background: var(--ink); color: #fff; }
.cmp-zoom img { display: block; width: 100%; height: auto; aspect-ratio: var(--r); object-fit: contain; }   /* 前の DIY の縮小の 2:3 を上書き。比は画像の縦横比（読み込む前も高さを取る） */
.cmp-zoom-ic { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; padding: 5px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); }
.cmp-tag { position: absolute; z-index: 2; left: 10px; top: 10px; margin: 0; padding: 3px 12px 4px; font-size: 14px; font-weight: 900; line-height: 1.4; letter-spacing: .08em; pointer-events: none; }
.cmp-tag-ai { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.cmp-tag-ours { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); }
.cmp-side figcaption { margin-top: 10px; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--ink2); }
.cmp-ours figcaption { color: var(--ink); }
.cmp-note { margin-top: 40px; padding-top: 18px; border-top: 4px solid var(--ink); font-size: 15px; line-height: 1.9; color: var(--ink); }
.diy-dlg .dlg-stage img { aspect-ratio: auto; }   /* 横長・縦長の画像もゆがめない */
.diy-dlg[open] { grid-template-rows: auto minmax(0, 1fr) auto auto; }   /* 依頼の全文の欄を消したので 4 段（題・画像・事実ではありません・前後）。画像の段が残りの高さを取る */

/* 13.2 決めること: 見出しの横に挿絵（PC）。時間と費用の左右比較（数字は墨・特大。赤は使わない） */
/* v7.6（§20-T7）: PC は挿絵（左）と 3 行の見出し（右・左揃え）を 1 つの塊にして中央へ。挿絵の下の机は左右の端を消す（mask。人物は消さない） */
.decide-head { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 40px; }
.decide-head .diy-decide-title { grid-column: 2; grid-row: 1; text-align: left; }
.decide-il { grid-column: 1; grid-row: 1; display: block; width: 330px; height: auto;
  /* §22: 挿絵を il-meh（がっかりするひなた）に。机とノート PC が絵の左・右・下の端で切れている（切れた棒に見える）→ 左右の 14% と下の 14% を紙へ溶かす（2 つのグラデーションの重なり＝intersect）。
     人物・持った紙・机の上の紙は消さない（左の 14% はノート PC の画面の左端・右の 14% は机の端・下の 14% は机の脚と机の手前） */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(to bottom, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.cost { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 64px; border-top: 4px solid var(--ink); }
.cost-side { display: flex; flex-direction: column; align-items: center; padding: 26px 28px 30px; text-align: center; }
.cost-side + .cost-side { border-left: 1px solid var(--ink); }
.cost-tag { margin: 0; padding: 4px 16px 5px; font-size: 18px; font-weight: 900; line-height: 1.4; letter-spacing: .06em; }
.cost-diy .cost-tag { background: #fff; color: var(--ink); border: 1.5px solid var(--ink); }
.cost-ours .cost-tag { background: var(--ink); color: #fff; border: 1.5px solid var(--ink); }
.cost-il { display: block; width: auto; max-width: 100%; height: 230px; margin: 16px auto 4px; object-fit: contain; }
.cost-num { margin-top: 6px; font-size: clamp(44px, 4.8vw, 64px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; color: var(--ink); font-feature-settings: "palt" 1; white-space: nowrap; }
.cost-num small { font-size: .38em; font-weight: 700; letter-spacing: 0; }
/* 最後の 10%: 「当社なら」の金額の下に、節の見出しと同じ筆の墨の線（比べた結論の印。赤は使わない・飾り＝読み上げない） */
.cost-ours .cost-num { position: relative; isolation: isolate; }
.cost-ours .cost-num::after { content: ""; position: absolute; z-index: -1; left: -4%; right: -4%; bottom: .02em; height: .2em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cpath fill='%2315171b' fill-rule='evenodd' d='M4,12 C3,5 14,3 32,4 C120,6 222,5 300,7.5 C342,8.6 374,10 397,12 C374,13.4 344,15.6 300,16.6 C222,19 120,21 32,20.6 C13,20.4 4,18 4,12 Z M196,11.6 C246,11 300,10.9 352,11.4 L352,12.2 C300,12 246,12.4 196,12.8 Z M150,15.8 C200,15.7 250,15.3 300,14.6 L300,15.3 C250,16.2 200,16.6 150,16.8 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; opacity: .9; }
.cost-sub { margin-top: 10px; font-size: 16px; font-weight: 700; line-height: 1.65; }
.cost-sub .nb { white-space: nowrap; }
.cost-note { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 15px; line-height: 1.9; color: var(--ink); }

/* 13.3 でも、こんなことが心配では？: 3 つを横に（挿絵 → 問い → 答え）。箱・影なし、上に細い罫だけ。畳まない */
.worry { margin-top: 72px; }
.worry-title { font-size: clamp(24px, 2.6vw, 34px); font-weight: 900; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.worry-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin: 22px 0 0; padding: 0; list-style: none; }
.worry-item { padding-top: 20px; border-top: 1px solid var(--ink); }
.worry-il { display: block; width: auto; max-width: 100%; height: 210px; margin: 0 auto 16px; object-fit: contain; }
.worry-q { font-size: 18px; font-weight: 900; line-height: 1.5; }
.worry-a { margin-top: 8px; font-size: 15px; line-height: 1.85; }
.diy-close { margin-top: 64px; }

/* お支払いの分かれ道: 始まりの帯の下から左右のコマへ、まっすぐの太い墨の矢印 2 本（▼の先） */
.fork-koma .fork-arrows { position: relative; height: 46px; margin: 8px 0 4px; }
.fork-arrow { position: absolute; top: 0; bottom: 0; width: 24px; translate: -50% 0; }
.fork-arrow::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 13px; width: 6px; translate: -50% 0; background: var(--ink); }
.fork-arrow::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 16px; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
.fork-arrow-yes { left: 25%; }
.fork-arrow-no { left: 75%; }

/* 大きい吹き出しのしっぽ: 深すぎた（04 の黒瀬など）ので、長さを約半分に（先は今までどおり口のすぐ外。吹き出しの位置も同じだけ寄せる） */
.hk-balloon { translate: calc(11.7% - 12px) calc(17.9% - 12px); transform-origin: calc(88.3% + 12px) calc(82.1% + 12px); }
.hk-l .hk-balloon { translate: calc(-11.7% + 12px) calc(17.9% - 12px); transform-origin: calc(11.7% - 12px) calc(82.1% + 12px); }
.hk-tail { left: calc(88.3% - 8px); top: calc(82.1% - 6px); width: 20px; height: 18px; }
.hk-l .hk-tail { left: calc(11.7% - 12px); }

/* DIY の見出しのコマ（PC）: ひなたの顔が大きく口が高い所にあるので、吹き出しが節の番号と見出しの頭に重なっていた（v6 から。v7 でしっぽを縮めて悪化・1024 幅で見出しの半分が隠れた）。
   吹き出しを細くし（4 行）、文の列（番号・見出し・黒瀬の答え）を吹き出しの右から始める＝顔 → 吹き出し → 見出しの順に並べて重ねない */
@media (min-width: 901px) {
  .hk-doubt { --bmw: 270px; }
  .hk-guide.hk-l.hk-doubt { padding-left: calc(var(--gr) + var(--gw) * var(--tx) + 276px); }
}
@media (min-width: 901px) and (max-width: 1100px) {   /* 狭い PC: 人物を約 1 割小さく・吹き出しを 240px に（文の列の幅を残す） */
  .hk-doubt { --gh: 320px; --bmw: 250px; }
  .hk-guide.hk-l.hk-doubt { padding-left: calc(var(--gr) + var(--gw) * var(--tx) + 260px); }
}

/* 黒瀬の小さい吹き出し（03 料金・01）: しっぽの先を黒瀬の口へ（10/19 §13.4）。付け根は楕円の左の線の約 4px 内側（縦・高さの中央）、
   先は丸い顔の枠の約 4px 手前・口の高さ（顔の中心より約 1px 下）。v6 の 90° 回しは先が肩を向いていたのでやめる */
.hk-tail-s { rotate: none; left: -18px; top: calc(50% - 6px); width: 24px; height: 16px; }

/* 06 流れ: 帯の頭の右に小さく「絵は作例の登場人物です」（細い字・薄い墨。字の下限は PC 13.5px・スマホ 12px＝判定表 A5） */
.koma-head small { margin-left: auto; font-size: 13.5px; }

/* 声: カード（白い面・細い枠・影なし）。左上にグレーの初期プロフィールのアイコン＋名前の行。引用の字組み（v6）はやめる */
.voices-list { gap: 24px; }
.voice { display: flex; flex-direction: column; padding: 20px 24px 22px; background: #fff; border: 1px solid var(--rule); box-shadow: none; }
.voice-who { order: -1; display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 0; border: 0; font-size: 14px; font-weight: 700; color: var(--ink2); }
.voice-avatar { flex: none; width: 40px; height: 40px; }
.voice-avatar circle:first-child { fill: var(--rule); }
.voice-avatar .va-fg { fill: #fff; }
.voice-text { padding: 0; background: none; border: 0; border-radius: 0; }
.voice-text::before, .voice-text::after { content: none; }

/* お問い合わせのリード: 相談へ誘う 3 行（文節で改行） */
.contact-lead { line-height: 1.9; }

/* ページの一番下（会社概要の前）: もう少し調べてから決めたい方へ（ブログの記事 3 本）。箱・影なし（サムネイル＋題名＋「記事を読む ›」） */
.reads { padding: 64px 0 72px; border-top: 1px solid var(--rule); }
.reads-title { font-size: clamp(22px, 2.3vw, 30px); font-weight: 900; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt" 1; }
.reads-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 22px 0 0; padding: 0; list-style: none; }
.read-link { display: block; color: var(--ink); text-decoration: none; }
.read-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stand); }
.read-thumb::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(21, 23, 27, .12); pointer-events: none; }   /* 最後の 10%: 白い地のサムネイルが紙の地に溶けない縁（影ではなく線） */
.read-link:hover .read-more { border-bottom-width: 2.5px; padding-bottom: 0; }   /* 高さは同じ（1px＋1.5px＝2.5px） */
.read-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale .3s var(--ease); }
.read-link:hover .read-thumb img { scale: 1.03; }
.read-title { display: block; margin-top: 12px; font-size: 15.5px; font-weight: 700; line-height: 1.65; }
.read-more { display: inline-block; margin-top: 8px; padding-bottom: 1px; border-bottom: 1.5px solid var(--ink); font-size: 13.5px; font-weight: 700; letter-spacing: .04em; }
.read-link:focus-visible { outline: 3px solid var(--focus); outline-offset: 4px; }

/* iOS（Safari に auto-phrase が無い）: v7 の見出し・ラベルも文節の <wbr> と keep-all で折る */
.worry-q, .cost-tag, .cost-sub, .read-title, .koma-head, .cmp-side figcaption { word-break: keep-all !important; overflow-wrap: break-word; }

@media (max-width: 1180px) {
  .decide-il { width: 300px; }
  .worry-list { gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .read-thumb img, .cmp-zoom img { transition: none; }
  .cmp .cmp-zoom:hover img, .read-link:hover .read-thumb img { scale: none; }
}
@media (max-width: 900px) {
  .cmp { margin-top: 32px; }
  .cmp-row { padding-top: 16px; border-top-width: 3px; }
  .cmp-row + .cmp-row { margin-top: 30px; }
  .cmp-title { gap: 10px; margin-bottom: 12px; font-size: 20px; }
  .cmp-no { font-size: 36px; -webkit-text-stroke-width: 1.3px; }
  /* スマホ（10/19 判断）: 行 1・2・5（横長の帯）と行 3（顔）は上下（AI → 当社）。画像の高さは 180px まで（枠の中で contain・読み込む前も同じ大きさを取る・押せば拡大）。
     行 4（AI の縦長の 1 ページ／当社の横長の見本）だけ左右に並べる（AI 40%・当社 60%） */
  .hk-tail-s { left: -9px; top: calc(50% - 4px); width: 16px; height: 10.667px; }   /* 顔 44px・すき間 11px に合わせて縮める（先は顔の枠の約 3px 手前） */
  .koma-head small { font-size: 12px; }
  .cmp-pair { flex-direction: column; align-items: stretch; gap: 16px; }
  .cmp-side { flex: none; }
  .cmp .cmp-zoom { width: min(100%, calc(180px * var(--r) + 2px)); }   /* 画像の枠の幅を先に決める（読み込む前も同じ大きさ。高さは 180px まで）。キャプションは列の幅いっぱい */
  .cmp-zoom img { max-height: 180px; }
  .cmp-r4 .cmp-pair { flex-direction: row; align-items: flex-start; gap: 10px; }
  .cmp-r4 .cmp-zoom { width: 100%; }
  .cmp-r4 .cmp-ai { flex: 0 0 calc(40% - 4px); }
  .cmp-r4 .cmp-ours { flex: 1 1 0; }
  .cmp-r4 .cmp-zoom img { max-height: none; }
  .cmp-zoom-ic { right: 6px; top: 6px; width: 24px; height: 24px; padding: 4px; }
  .cmp-tag { left: 6px; top: 6px; padding: 2px 9px 3px; font-size: 12.5px; }
  .cmp-side figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.55; }
  .cmp-note { margin-top: 26px; padding-top: 12px; border-top-width: 3px; font-size: 13.5px; line-height: 1.8; }
  .decide-head { display: block; text-align: center; }
  .decide-head .diy-decide-title { text-align: center; }
  .decide-il { width: 168px; margin: 0 auto 10px; }   /* スマホの挿絵は約 7 割（10/19）・v7.6 は中央 */
  .cost { margin-top: 40px; border-top-width: 3px; }
  .cost-side { padding: 16px 8px 18px; }
  .cost-tag { padding: 3px 10px 4px; font-size: 14px; }
  .cost-il { height: 84px; margin: 10px auto 2px; }
  .cost-num { font-size: min(26px, 6.6vw); }
  .cost-num small { font-size: 12px; }   /* （税別）は字の下限 12px（判定表 A5） */
  .cost-sub { margin-top: 6px; font-size: 13px; line-height: 1.55; }
  .cost-note { padding-top: 12px; font-size: 13.5px; line-height: 1.8; }
  .worry { margin-top: 44px; }
  .worry-title { font-size: 22px; }
  .worry-list { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 12px; }
  .worry-item { display: grid; grid-template-columns: 70px minmax(0, 1fr); column-gap: 12px; align-items: start; padding: 14px 0 16px; }
  .worry-il { grid-row: 1 / span 2; width: 70px; height: 70px; margin: 0; }
  .worry-q { font-size: 15.5px; }
  .worry-a { margin-top: 4px; font-size: 13.5px; line-height: 1.75; }
  .diy-close { margin-top: 40px; }
  .fork-koma .fork-arrows { height: 34px; margin: 6px 0 2px; }
  .fork-arrow { width: 20px; }
  .fork-arrow::before { width: 5px; bottom: 11px; }
  .fork-arrow::after { height: 13px; }
  .fork-arrow-yes { left: 30%; }
  .fork-arrow-no { left: 70%; }
  .voice { padding: 16px 16px 18px; }
  .voice-avatar { width: 34px; height: 34px; }
  .voice-who { font-size: 13px; margin-bottom: 10px; }
  .reads { padding: 44px 0 52px; }
  .reads-title { font-size: 21px; }
  /* スマホは横に送る（1.2 枚見せ） */
  .reads-list { display: flex; gap: 14px; margin-right: -16px; padding: 0 16px 6px 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .read-card { flex: 0 0 84%; scroll-snap-align: start; }   /* 1 枚＋間＋次の約 0.2 枚が見える */
  .read-title { font-size: 14.5px; }
}
@media print {
  .reads-list { display: grid !important; grid-template-columns: repeat(3, 1fr); overflow: visible; }
  .read-card { break-inside: avoid; }
  .cmp-row, .cost, .worry-item { break-inside: avoid; }
  .hk-dark::before { background: #fff; }
  /* 印刷は地の色を落とすことが多いので、墨の地に白い字の札（当社だと・当社なら）は白い地・墨の字・墨の枠に戻す */
  .sec-diy .cmp-tag-ours, .sec-diy .cost-ours .cost-tag { background: #fff !important; color: var(--ink) !important; border-color: var(--ink) !important; }
}

/* FV の吹き出しの字の位置（10/19 指摘「文字ずれ。左と上の余白のバランスが悪い」）。
   根因: .fvb-text は flex で、文と <br> が別々の flex の子になり、行の組みが中央からずれていた（PC で右へ約 19px・下へ約 5px）。
   直し: 文を 1 つの塊（.fvb-lines）にして、楕円の本体の中心に置く。行末の「、」は約物の半角詰めで右の空きを消す。 */
.fvb-text { display: grid; place-items: center; }
/* 本当の根因: .fvb-text の left/top/width/height（style 属性）は em で書かれ、同じ要素の font-size（1.12em・0.98em）で伸び縮みしていた
   → 部長の字の箱は 12% 右下へずれる。箱は楕円の本体に % で合わせ直す（viewBox の本体: 部長 y -45〜45／-49〜68・x -86〜86／-90〜90） */
.fvb-boss .fvb-text { left: 2.2% !important; top: 3.4% !important; width: 95.6% !important; height: 76.9% !important; }
.fvb-hina .fvb-text { left: 2% !important; top: 3.6% !important; width: 96% !important; height: 77.5% !important; }
.fvb-lines { display: block; text-align: center; font-feature-settings: "palt" 1, "halt" 1; }

/* ======================================================================================================
   v7.1（2026-10-19・設計書 §14 指示）。この塊は上の規則を上書きする
   ====================================================================================================== */

/* §14.1 DIY の見出しのコマ: ひなたの吹き出しは 4 行（各行の末で改行）を 1 つの塊（.hk-lines）にし、楕円の本体の中に余白を持って収める。
   字の箱（いちばん長い行 12 字 × 4 行）に対して左右 2em・上下 1.2em の余白＝字の箱の角が楕円の本体の約 7 割の所に来る（FV の吹き出しと同じ考え方） */
.hk-doubt .hk-balloon { width: max-content; max-width: none; padding: 1.2em 2em 1.25em; text-wrap: initial; }
.hk-lines { display: block; text-align: center; font-feature-settings: "palt" 1, "halt" 1; }
@media (min-width: 901px) {
  .hk-guide.hk-l.hk-doubt { padding-left: calc(var(--gr) + var(--gw) * var(--tx) + 252px); }   /* 文の列は吹き出し（幅 約 244px）の右から */
}

/* §14.2・§14.5 行 1・5 は縦長の 1 ページと 1 ページ: PC は 800px の中で左右（高さ 約 570px） */
.cmp-r1 .cmp-pair, .cmp-r5 .cmp-pair { max-width: 800px; }
/* §14.4 行 4 の当社: 作例 3 ページ目を 3 つの絵柄で描き直した 3 枚を横並び（AI の 1 ページと同じ高さ）。各ページの下に絵柄の札 */
.cmp-r4 .cmp-ours { flex: var(--r) 1 30px; }   /* 3 枚の枠 6px＋間 24px を除いて縦横比で分ける */
.cmp-trio { display: flex; gap: 12px; }
.cmp-trio-item { flex: 1 1 0; min-width: 0; }
.cmp-trio-tag { margin: 8px 0 0; font-size: 13.5px; font-weight: 700; line-height: 1.4; text-align: center; color: var(--ink); letter-spacing: .04em; }
/* §14.5 行 5 の当社の下の凡例（番号の丸＝画像の印と同じ墨の丸に白い数字＋短い文） */

/* §14.6 → v7.6（§20-T7）→ §21（10/21: 見出しを替えた）決めることの見出しの改行: PC もスマホも 2 行（「作るのは簡単、」「でも、クオリティがイマイチに・・・」） */
.diy-decide-title .dt-1, .diy-decide-title .dt-2 { display: block; }

@media (max-width: 900px) {
  .diy-decide-title .dt-1, .diy-decide-title .dt-2 { display: block; }
  /* 行 1・5（縦長 2 枚）: スマホも左右に半分ずつ（タブレットは 520px まで） */
  .cmp-r1 .cmp-pair, .cmp-r5 .cmp-pair { flex-direction: row; align-items: flex-start; gap: 10px; max-width: 520px; }
  .cmp-r1 .cmp-side, .cmp-r5 .cmp-side { flex: 1 1 0; }
  .cmp-r1 .cmp-zoom, .cmp-r5 .cmp-zoom { width: 100%; }
  .cmp-r1 .cmp-zoom img, .cmp-r5 .cmp-zoom img { max-height: none; }
  /* 行 2（AI の縦長 1 ページ／当社の横長）: 前の行 4 と同じく左右（AI 40%・当社 60%） */
  .cmp-r2 .cmp-pair { flex-direction: row; align-items: flex-start; gap: 10px; }
  .cmp-r2 .cmp-ai { flex: 0 0 calc(40% - 4px); }
  .cmp-r2 .cmp-ours { flex: 1 1 0; }
  .cmp-r2 .cmp-zoom { width: 100%; }
  .cmp-r2 .cmp-zoom img { max-height: none; }
  /* 行 4: AI の 1 ページ（高さ 180px まで）の下に、当社の 3 枚を横 3 列（小さくてよい・押せば拡大） */
  .cmp-r4 .cmp-pair { flex-direction: column; align-items: stretch; gap: 16px; }
  .cmp-r4 .cmp-ai, .cmp-r4 .cmp-ours { flex: none; }
  .cmp-r4 .cmp-ai .cmp-zoom { width: min(100%, calc(180px * var(--r) + 2px)); }
  .cmp-r4 .cmp-ai .cmp-zoom img { max-height: 180px; }
  .cmp-r4 .cmp-trio .cmp-zoom { width: 100%; }
  .cmp-r4 .cmp-trio .cmp-zoom img { max-height: none; }
  .cmp-trio { gap: 8px; }
  .cmp-trio-tag { margin-top: 4px; font-size: 12px; letter-spacing: 0; }
}
.cmp-trio-tag .nb { display: inline-block; white-space: nowrap; }   /* （カラー）（白黒）は途中で折らない */

/* ======================================================================================================
   v7.2（2026-10-19・設計書 §15 指示「AI の画像が小さくて弱い」）。比較 1〜5 のどの行も、AI と当社の画像は同じ高さ・同じ大きさ
   ====================================================================================================== */
/* 行 2: AI の 1 ページと、作例 3 ページ目（切らずに 1 枚）。行 1・5 と同じ組み方（PC は 800px の中で左右・スマホは半分ずつ） */
.cmp-r2 .cmp-pair { max-width: 800px; }
/* 行 4: 絵柄ごとの 3 列（少年誌｜青年誌｜少女漫画）× 2 段（上: AIだと／下: 当社だと）。列の頭に絵柄の名前・各段の頭（1 枚目の左上）に札 */
.cmp-r4 .cmp-colhead, .cmp-r4 .cmp-pair { max-width: 920px; }
.cmp-colhead { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 10px; padding: 0; list-style: none; }
.cmp-colhead li { padding-bottom: 6px; border-bottom: 2px solid var(--ink); font-size: 15px; font-weight: 900; line-height: 1.4; text-align: center; letter-spacing: .04em; word-break: keep-all; overflow-wrap: break-word; }
.cmp-colhead .nb { display: inline-block; white-space: nowrap; font-weight: 700; }
.cmp-r4 .cmp-pair { flex-direction: column; align-items: stretch; gap: 22px; }
.cmp-r4 .cmp-side, .cmp-r4 .cmp-ai, .cmp-r4 .cmp-ours { flex: none; }

@media (max-width: 900px) {
  /* 行 2 も左右に半分ずつ（AI と当社が同じ大きさ。v7.1 の 40%／60% はやめる） */
  .cmp-r2 .cmp-pair { max-width: 520px; }
  .cmp-r2 .cmp-ai, .cmp-r2 .cmp-ours { flex: 1 1 0; }
  /* 行 4: スマホも 3 列 × 2 段のまま（1 枚は小さくてよい・押せば拡大） */
  .cmp-colhead { gap: 8px; margin-bottom: 8px; }
  .cmp-colhead li { padding-bottom: 4px; font-size: 12px; letter-spacing: 0; }
  .cmp-r4 .cmp-pair { gap: 14px; }
}

/* ======================================================================================================
   v7.3（2026-10-19・設計書 §16 指示）。この塊は上の規則を上書きする
   ====================================================================================================== */

/* §16-1 黒瀬の小さい吹き出し（01・03）: 楕円としっぽを 1 本の輪郭線（.hk-ans-bg の 1 つの path・線の太さは一定）。顔の丸は大きく（PC 72px・スマホ 56px）、吹き出しは顔に重ねない（しっぽの先は顔の縁の約 6px 手前・口の高さ） */
.hk-answer { isolation: isolate; margin-left: 80px; padding: 20px 38px 20px 56px; max-width: 22em; background: none; border: 0; border-radius: 0; }
.hk-answer .kf { left: -76px; width: 72px; height: 72px; border: 1.5px solid var(--ink); }
.hk-ans-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hk-ans-bg path { fill: #fff; stroke: var(--ink); stroke-width: 1.5px; stroke-linejoin: round; }

/* §16-4 絵柄の見本: PC は 3 列 × 3 段（1 枚を大きく・名前は下）。下の小さい文は PC「クリック」・スマホ「タップ」 */
.sn-sp { display: none; }
@media (min-width: 901px) {
  .styles-title { font-size: 22px; font-weight: 900; letter-spacing: .02em; }
  .style-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 24px; }
  .style-card figcaption { margin-top: 10px; column-gap: 8px; }
  .style-card figcaption b { font-size: 13.5px; line-height: 1.6; }
  .style-name { font-size: 16px; line-height: 1.5; }
}

/* §16-5 DIY の節（PC）: 中身の幅を 1040px に絞って中央に（比較の 5 行・見出し・以降の塊）。行 1・2・5 の 2 枚もその中で中央に */
@media (min-width: 901px) {
  .sec-diy .cmp, .sec-diy .diy-decide, .sec-diy .cost, .sec-diy .worry, .sec-diy .diy-close { max-width: 1040px; margin-inline: auto; }
  .cmp-title { justify-content: center; }
  .cmp-r1 .cmp-pair, .cmp-r2 .cmp-pair, .cmp-r5 .cmp-pair, .cmp-r4 .cmp-pair, .cmp-r4 .cmp-colhead { margin-inline: auto; }
}

/* §16-6 「AIだと」「当社だと」の札は画像に重ねない。画像の上に絵の見出し（lbl-ai＝くたびれた灰色・lbl-ours＝黄色の爆発）。左右で同じ高さの箱に下そろえで置き、画像の上端をそろえる */
.cmp-lbl { display: block; width: 100%; height: 72px; margin: 0 0 10px; object-fit: contain; object-position: center bottom; }
.cmp-r4 .cmp-lbl { height: 62px; object-position: left bottom; }
.cmp-r4 .cmp-trio-tag { font-size: 13.5px; word-break: keep-all; overflow-wrap: break-word; }   /* 『…』と頼んだ は文節の <wbr> でだけ折る */

/* §16-10 「作るのは簡単…」の塊: 見出しを大きく → 強い 1 段（小さく「当社では・・・」・特大の 1 文・10万円に FV と同じ黄色のマーカー）→ リード → 11 項目（✓・2 列）→ 結び */
.diy-decide-title { font-size: clamp(28px, 2.9vw, 34px); line-height: 1.45; }   /* v7.6: 一段大きく（1 行ずつ。塊の中に収まる大きさ） */
/* 強い 1 段（決めの一言）は §22 の塊（このファイルの後ろの方）。前の「太い罫 2 本の間の黒の字」は 10/21 に作り替えた */
.punch-ast { font-size: max(12px, .42em); font-weight: 700; letter-spacing: 0; margin: 0 .1em 0 .04em; vertical-align: baseline; }   /* v7.6（§20-T8）: 「業界最高品質」の右下の ※（注記「※当社調べ」の印） */
.decide-lead { margin: 26px 0 0; font-size: 18px; font-weight: 700; line-height: 1.7; text-align: center; }
.decide-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 44px; margin: 28px 0 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.decide-list { --ic: 40px; --dl-pt: 15px; --dl-lh: 24.75px; }   /* v7.6（§20-T9）: アイコンの大きさ・li の上の余白・名前の行の高さ（16.5px × 1.5） */
.decide-list li { position: relative; padding: var(--dl-pt) 0 var(--dl-pt) calc(var(--ic) + 16px); border-bottom: 1px solid var(--hair); }
.decide-list li::before { content: ""; position: absolute; left: 0; top: calc(var(--dl-pt) + (var(--dl-lh) - var(--ic)) / 2); width: var(--ic); height: var(--ic);
  background: url("/manga/assets/b2b/v7/ic-decide-sprite.webp") 0 0 / calc(var(--ic) * 11) var(--ic) no-repeat; }   /* 名前の行の真ん中にそろえる（説明の行の方へずらさない）。箱・下地・色は付けない */
.decide-list li:nth-child(2)::before { background-position: calc(var(--ic) * -1) 0; }
.decide-list li:nth-child(3)::before { background-position: calc(var(--ic) * -2) 0; }
.decide-list li:nth-child(4)::before { background-position: calc(var(--ic) * -3) 0; }
.decide-list li:nth-child(5)::before { background-position: calc(var(--ic) * -4) 0; }
.decide-list li:nth-child(6)::before { background-position: calc(var(--ic) * -5) 0; }
.decide-list li:nth-child(7)::before { background-position: calc(var(--ic) * -6) 0; }
.decide-list li:nth-child(8)::before { background-position: calc(var(--ic) * -7) 0; }
.decide-list li:nth-child(9)::before { background-position: calc(var(--ic) * -8) 0; }
.decide-list li:nth-child(10)::before { background-position: calc(var(--ic) * -9) 0; }
.decide-list li:nth-child(11)::before { background-position: calc(var(--ic) * -10) 0; }
.dl-name { display: block; font-size: 16.5px; font-weight: 900; line-height: 1.5; }
.dl-desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.7; color: var(--ink2); }
.decide-close { margin: 28px 0 0; font-size: 15.5px; font-weight: 700; line-height: 1.9; color: var(--ink); }

/* §16-11 時間と費用: 左「自分で作ると」は墨の地（白い網点）・挿絵は白い枠のコマで少し傾ける・字は白（重く、くたびれた空気）。
   右「当社なら」は紙の地に、数字の後ろから黄色の集中線（SVG・動かさない）・挿絵は枠なし・数字は墨の特大に黄色のマーカー（軽く、明るい空気）。間は斜めの白い溝（漫画のコマの区切り） */
.cost { position: relative; border-top: 0; column-gap: 0; }
.cost-side { position: relative; isolation: isolate; padding: 34px 40px 40px; }
.cost-side + .cost-side { border-left: 0; }
.cost-diy { --cut: 44px; padding-right: calc(40px + var(--cut)); background: #fff; color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - var(--cut)) 100%, 0 100%); }
.cost-diy::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(0 0, calc(100% - 12px) 0, calc(100% - var(--cut) - 12px) 100%, 0 100%);
  background: radial-gradient(circle, rgba(255, 255, 255, .1) 1.1px, transparent 1.6px) 0 0 / 7px 7px, linear-gradient(160deg, #23262c, #15171b 60%); }   /* 墨の地の網点（灰色）。外側の 12px は白い溝 */
.cost-diy .cost-tag { background: transparent; color: #fff; border-color: #fff; }
.cost-diy .cost-num, .cost-diy .cost-sub { color: #fff; }
.cost-diy .cost-sub { color: rgba(255, 255, 255, .86); }
.cost-frame { display: inline-block; margin: 18px auto 8px; padding: 8px 8px 10px; background: #fff; rotate: -3deg; }
.cost-frame .cost-il { margin: 0; }
.cost-ours { margin-left: -44px; padding-left: 84px; overflow: hidden; clip-path: polygon(44px 0, 100% 0, 100% 100%, 0 100%); }
.cost-ours .cost-num { position: relative; isolation: auto; }   /* 集中線（z-index -1）は「当社なら」の塊の後ろ全体へ（挿絵・札・字の下） */
.cost-ours .cost-sub { text-shadow: 0 0 3px var(--paper), 0 0 6px var(--paper), 0 0 10px var(--paper); }   /* 集中線の上でも読める（箱は使わない） */
.cost-ours .cost-num::after { content: none; }   /* v7 の筆の線はやめ、黄色のマーカーに */
.cost-burst { position: absolute; z-index: -1; left: 40%; top: 50%; width: 600px; height: 600px; translate: -50% -50%; pointer-events: none; }
.cost-burst path { fill: #ffd400; }
.cost-mk { padding: 0 .04em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M7 15 C70 6 150 12 230 7 C300 3 360 9 394 11 C398 22 395 38 391 49 C330 56 262 49 190 54 C120 58 58 52 3 47 C1 36 4 24 7 15 Z' fill='%23ffd400'/%3E%3C/svg%3E") 0 92% / 100% 30% no-repeat; }
.cost-ours .cost-num small { position: relative; }
.cost-note { margin-top: 18px; border-top: 1px solid var(--ink); }

@media (max-width: 900px) {
  .hk-answer { margin-left: 62px; padding: 17px 30px 17px 46px; max-width: calc(100% - 62px); box-sizing: border-box; }   /* 320px でも列からはみ出さない */
  .hk-answer .kf { left: -60px; width: 56px; height: 56px; }
  .sn-pc { display: none; }
  .sn-sp { display: inline; }
  /* §16-3 スマホだけ: FV のボタンの下の 3 つ（安心の一文・補足の残り・入力の案内）を出さない（次の節を早く見せる） */
  .fv-assure, .fv-sub-rest, .fv-micro { display: none !important; }
  .cmp-lbl { height: 36px; margin-bottom: 6px; }   /* 10/19: スマホは 36px（長さの予算） */
  .cmp-r4 .cmp-lbl { height: 34px; }
  .cmp-r4 .cmp-trio-tag { font-size: 12px; }
  .diy-decide-title { font-size: min(21px, 5.8vw); }   /* §21: 「でも、クオリティがイマイチに・・・」を 1 行に（320px でも。10/21 実測） */
  .decide-lead { margin-top: 18px; font-size: 15px; text-align: left; }
  .decide-list { grid-template-columns: minmax(0, 1fr); margin-top: 18px; }
  /* 10/19（案 A）: スマホは説明を名前の後ろに続けて小さく（畳まない・消さない）・余白を詰める */
  .decide-list { --ic: 30px; --dl-pt: 8px; --dl-lh: 24px; }   /* スマホ: アイコン 30px・名前の行は 15px × 1.6 */
  .decide-list li { padding: var(--dl-pt) 0 var(--dl-pt) calc(var(--ic) + 10px); }
  .dl-name, .dl-desc { display: inline; }
  .dl-name { font-size: 15px; line-height: 1.6; }
  .dl-desc { margin: 0 0 0 .5em; font-size: 12.5px; line-height: 1.6; }
  .decide-close { margin-top: 18px; font-size: 13.5px; line-height: 1.85; }
  /* 時間と費用はスマホで上下（左 → 右の順）。間の溝は斜めの横線 */
  .cost { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .cost-side { padding: 18px 16px 20px; }
  .cost-il { height: 72px; }
  .cost-diy { --cut: 26px; padding-right: 16px; padding-bottom: calc(20px + var(--cut)); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%); }
  .cost-diy::before { clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut) - 10px), 0 calc(100% - 10px)); }
  .cost-ours { margin: -26px 0 0; padding: calc(26px + 16px) 16px 20px; clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%); }
  .cost-frame { margin: 12px auto 6px; padding: 5px 5px 6px; }
  .cost-burst { left: 50%; width: 380px; height: 380px; }
}
@media (max-width: 360px) {
  .hk-answer { display: block; padding: 24px 30px 24px 46px; font-size: 13px; }   /* 狭い幅は名前を文の上の行に（文の幅を広く取り、字の箱を楕円の本体の内側に） */
  .hk-answer .talk-name { display: block; margin-bottom: 2px; font-size: 11px; }
}
@media print {
  .cost-diy, .cost-ours { clip-path: none !important; margin: 0 !important; background: #fff !important; color: var(--ink) !important; }
  .cost-diy::before, .cost-burst { display: none !important; }
  .cost-diy .cost-num, .cost-diy .cost-sub, .cost-diy .cost-tag { color: var(--ink) !important; border-color: var(--ink) !important; }
}

/* §16-5 見出しのコマも 1040px の中で中央に（PC） */
@media (min-width: 901px) {
  .sec-diy .diy-head { max-width: 1040px; margin-inline: auto; }
}

/* 最後の 10%（v7.3）: 画面に入る時の 1 回だけの所作（スクロールに連動・止まらない動きは無い・reduced-motion と非対応のブラウザでは完成形のまま）
   ① 「当社のAI漫画」の見出しは、入ってくる時に小さく弾んで止まる（爆発の「バンッ」）
   ② 「当社なら」の集中線は、数字の後ろから外へ広がって止まる
   （③ 強い 1 段の「10万円」のマーカーは §22 で作り替えた＝画面に入った時の 1 回の振付の中で引く） */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cmp-lbl-ours { animation: lblPop linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; transform-origin: 50% 80%; }
    .cost-burst { animation: burstOut linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes lblPop { 0% { scale: .72; opacity: .2; } 70% { scale: 1.06; opacity: 1; } 100% { scale: 1; opacity: 1; } }
@keyframes burstOut { 0% { scale: .55; opacity: 0; } 100% { scale: 1; opacity: 1; } }


/* ======================================================================================================
   v7.4（2026-10-20・設計書 §18）06 制作の流れ: 1 本の「道」に 6 つの段。この塊は上の規則を上書きする
   ====================================================================================================== */
.road { --g: 20px; --dot: 40px; --m: 16px; --samp-h: 222px; margin-bottom: 40px; }
.road-steps { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: var(--g); margin: 0 0 calc(var(--samp-h) + 28px + 36px); padding: 0; list-style: none; }   /* 帯（absolute）の高さ＋線＋下の余白を取っておく */
.road-step { position: relative; container-type: inline-size; min-width: 0; }
/* ① 絵: 全段同じ 4:3 の枠・手描きの墨の枠・cover（段ごとに顔と吹き出しが残る所 --op。作例のコマの元の細い枠線は --zm で枠の外へ） */
.road-pic { --lw: 3px; position: relative; aspect-ratio: 4 / 3; background: #fff; }
.road-img { position: absolute; inset: 0; overflow: hidden; }
.road-img img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--op); scale: var(--zm); transform-origin: var(--op); }
.road-pic .kmf { z-index: 2; }
/* ② 番号の丸（墨の丸に白い数字・直径 40px）を貫く太い 1 本の道の線（左から右）。段の間に ▶ */
.road-no { position: relative; height: var(--dot); margin: var(--m) 0 12px; }
.road-dot { position: relative; z-index: 2; display: grid; place-items: center; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--ink); color: #fff; font-size: 19px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 4px var(--paper); }
.road-step:not(:last-child) .road-no::before { content: ""; position: absolute; z-index: 0; left: calc(var(--dot) / 2); top: calc(50% - 2.5px); width: calc(100% + var(--g)); height: 5px; background: var(--ink); }
.road-step:not(:last-child) .road-no::after { content: ""; position: absolute; z-index: 1; left: calc(var(--dot) / 2 + (100% + var(--g)) / 2 - 8px); top: calc(50% - 9px); width: 16px; height: 18px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
/* ③〜⑥ 誰の札・名前・1 行・日数の札（中身は丸の右の線にそろえて少し下げる＝段 3 の細い線が字に掛からない） */
.road-body { padding-left: calc(var(--dot) / 2 + 12px); }
.road-who { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 6px; }
.road-name { margin: 0; font-size: 18px; font-weight: 900; line-height: 1.4; letter-spacing: .02em; font-feature-settings: "palt" 1; word-break: keep-all; overflow-wrap: break-word; }
.road-line { margin: 4px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink2); word-break: keep-all; overflow-wrap: break-word; }
.road-days { margin: 8px 0 0; font-size: 13.5px; line-height: 1.5; word-break: keep-all; overflow-wrap: break-word; }
.road-days + .road-days { margin-top: 4px; }
.road-tag { display: inline; padding: 1px 6px 2px; background: #ffd400; color: var(--ink); font-weight: 900; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.road-cond { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.55; color: var(--ink2); }
/* キャラクター案の実例: 段 3 の丸から細い線で下ろし、道の下に 1 つの帯（段 3 の中に置き、PC では道の幅いっぱいに広げる） */
.road-drop { position: absolute; z-index: 1; left: calc(var(--dot) / 2 - 1px); width: 2px; top: calc(75cqw + var(--m) + var(--dot)); bottom: -28px; background: var(--ink); }
.road-samples { position: absolute; top: calc(100% + 28px); left: calc(-200% - 2 * var(--g)); width: max-content; max-width: calc(600% + 5 * var(--g)); height: var(--samp-h); box-sizing: border-box; padding: 14px 0 0; background: none; border: 0; border-top: 1.5px solid var(--ink); }   /* 10/20: 箱にしない（上に墨の細い罫 1 本だけ） */
.rs-head { margin: 0; font-size: 14.5px; font-weight: 900; line-height: 1.5; }
.rs-no { display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 2px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 13px; font-weight: 900; vertical-align: 1px; }
.rs-sub { margin: 2px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink2); }
.rs-row { display: grid; grid-template-columns: repeat(5, minmax(0, 150px)); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.rs-row li { position: relative; padding: 4px 4px 20px; background: #fff; border: 1px solid var(--hair); }
.rs-row img { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 785; object-fit: cover; }
.rs-row span { position: absolute; left: 6px; bottom: 2px; font-size: 12px; color: var(--mute); }
.road-name, .road-line, .road-days, .rs-head, .rs-sub { word-break: keep-all !important; }

@media (max-width: 1100px) and (min-width: 1061px) {
  .road { --g: 12px; }   /* §21: 14→12px・字の左の余白 8→6px（1024px で「ヒアリングシートを」が 1 行に入る＝「ヒアリング／シート」と語の途中で折らない） */
  .road-name { font-size: 16.5px; }
  .road-body { padding-left: calc(var(--dot) / 2 + 6px); }
}

/* スマホ: 縦の道。左に番号の丸を縦の太い線でつなぎ、右に「絵（幅 96px・4:3）＋誰の札・名前・1 行・日数の札」。キャラクター案の実例は段 3 の中身の下に横に送る帯
   §22（10/21）: 901〜1060px も縦の道にする（横に 6 段だと箱が 104px ほどに狭まり「ヒアリング／シートを送る」「各3営業日が目／安」と折れていた＝点検の 960・1000px の NG）。
   字の大きさと絵の幅は、この下の 901〜1060px の塊で PC の大きさに戻す */
@media (max-width: 1060px) {
  .road { --dot: 34px; margin-bottom: 28px; }
  .road-steps { display: block; margin: 0; }
  .road-step { display: grid; grid-template-columns: var(--dot) 96px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: start; padding: 0 0 18px; container-type: normal; }
  .road-step::before { content: ""; position: absolute; left: calc(var(--dot) / 2 - 2.5px); top: 0; bottom: 0; width: 5px; background: var(--ink); }
  .road-step:first-child::before { top: calc(var(--dot) / 2); }
  .road-step:last-child::before { bottom: calc(100% - var(--dot) / 2); }
  .road-no { grid-column: 1; grid-row: 1 / span 2; height: var(--dot); margin: 0; }
  .road-dot { font-size: 16px; }
  .road-step:not(:last-child) .road-no::before, .road-step:not(:last-child) .road-no::after { content: none; }
  .road-pic { --lw: 2.4px; grid-column: 2; grid-row: 1; width: 96px; }
  .road-body { grid-column: 3; grid-row: 1; padding: 0; }
  .road-who { margin-bottom: 3px; }
  .road-who .who { padding: 0 6px 1px; font-size: 11px; }
  .road-name { font-size: 15.5px; line-height: 1.4; }
  .road-line { margin-top: 2px; font-size: 12.5px; line-height: 1.55; }
  .road-days { margin-top: 5px; font-size: 12.5px; }
  .road-cond { font-size: 12px; }
  .road-drop { display: none; }
  .road-samples { position: static; grid-column: 3 / -1; grid-row: 2; width: auto; height: auto; margin: 10px calc(-1 * var(--gut)) 0 0; padding: 10px 0 0; border-top-width: 1px; overflow: hidden; }   /* 左は段の文にそろえ、横に送る帯は画面の右端まで流す */
  .rs-head { padding-right: var(--gut); font-size: 13px; }
  .rs-no { width: 20px; height: 20px; font-size: 11.5px; }
  .rs-sub { padding-right: var(--gut); font-size: 12px; }
  .rs-row { display: flex; gap: 8px; margin-top: 8px; padding: 0 var(--gut) 4px 0; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
  .rs-row li { flex: 0 0 104px; scroll-snap-align: start; }
}
/* §22: 901〜1060px の縦の道（PC の字の大きさ・絵は幅 160px の 4:3・丸は 40px） */
@media (max-width: 1060px) and (min-width: 901px) {
  .road { --dot: 40px; margin-bottom: 40px; }
  .road-step { grid-template-columns: var(--dot) 160px minmax(0, 1fr); column-gap: 16px; padding-bottom: 24px; }
  .road-pic { --lw: 3px; width: 160px; }
  .road-dot { font-size: 19px; }
  .road-who { margin-bottom: 6px; }
  .road-who .who { padding: 1px 8px 2px; font-size: 11.5px; }
  .road-name { font-size: 18px; }
  .road-line { margin-top: 4px; font-size: 13.5px; line-height: 1.65; }
  .road-days { margin-top: 8px; font-size: 13.5px; }
  .road-cond { font-size: 13.5px; }
  .road-samples { margin: 14px 0 0; }   /* スマホのように画面の右端まで流さない（PC の幅では帯は中身の幅の中） */
  .rs-head, .rs-sub { padding-right: 0; }
  .rs-row { padding-right: 0; }
  .rs-head { font-size: 14.5px; }
  .rs-no { width: 24px; height: 24px; font-size: 13px; }
  .rs-sub { font-size: 13.5px; }
  .rs-row li { flex-basis: 120px; }
}
@media print {
  .road-steps { margin-bottom: 0; }
  .road-samples { position: static; width: auto; height: auto; margin-top: 10pt; }
  .road-drop { display: none; }
  .road-step { break-inside: avoid; }
}

/* 最後の 10%（v7.4）:
   ① 道の終わり（6 納品・お支払い）の丸だけ黄色の地に墨の数字＝ゴールの印（日数の札と同じ黄色）
   ② 段 3 から下ろす細い線の先に小さな ▼（実例の帯へ「届く」向き）
   ③ 道の線は、画面に入る時に左から順に引かれて止まる（スクロールに連動する 1 回だけの所作・止まらない動きは無い・reduced-motion と非対応のブラウザでは完成形） */
.road-s6 .road-dot { background: #ffd400; color: var(--ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5.5px var(--ink); }
.road-drop::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 12px; height: 9px; translate: -50% 0; background: var(--ink); clip-path: polygon(0 0, 100% 0, 50% 100%); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1061px) {   /* §22: 1060px 以下は縦の道 */
    .road-step:not(:last-child) .road-no::before { transform-origin: 0 50%; animation: roadDraw linear both; animation-timeline: view(); animation-range: entry 30% cover 38%; }
    .road-step:not(:last-child) .road-no::after { animation: roadArrow linear both; animation-timeline: view(); animation-range: entry 60% cover 42%; }
  }
}
@keyframes roadDraw { 0% { scale: 0 1; } 100% { scale: 1 1; } }
@keyframes roadArrow { 0% { opacity: 0; translate: -8px 0; } 100% { opacity: 1; translate: 0 0; } }

/* ======================================================================================================
   v7.5（2026-10-21・設計書 §19）比較の見せ方 = C5「編集者の赤入れ（墨と黄で）」。この塊は上の規則を上書きする
   コンセプト: 2 枚の原稿を編集者の机に置く。左（AI）は墨のペンの書き込みで差し戻し、右（当社）は黄色の花丸で一発 OK。赤は CTA だけの色なので使わない。
   指摘の字（Yusei Magic）は、線・画像・札の絵に重ねない（PC は原稿の余白・スマホは画像の下の短い列）
   ====================================================================================================== */
.cmp-row { padding-top: 0; border-top: 0; }
.cmp-row + .cmp-row { margin-top: 76px; }
.cmp-title { margin-bottom: 26px; }
.cmp-no { position: relative; display: inline-grid; place-items: center; min-width: 1.1em; }
.no-pen { position: absolute; left: 50%; top: 50%; width: 1.55em; height: 1.5em; translate: -50% -50%; overflow: visible; fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; pointer-events: none; }
/* 机（カッティングマットの方眼）。原稿の後ろだけ、ふちはぼかす */
.cmp-pair { position: relative; isolation: isolate; }
.cmp-pair::before { content: ""; position: absolute; inset: -18px -44px -30px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(21, 23, 27, .085) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 23, 27, .085) 1px, transparent 1px),
    linear-gradient(rgba(21, 23, 27, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 23, 27, .045) 1px, transparent 1px);
  background-size: 130px 130px, 130px 130px, 26px 26px, 26px 26px; background-position: -1px -1px;
  -webkit-mask: radial-gradient(closest-side, #000 58%, transparent); mask: radial-gradient(closest-side, #000 58%, transparent); }
.cmp-r1 .cmp-pair, .cmp-r2 .cmp-pair, .cmp-r5 .cmp-pair, .cmp-r3 .cmp-pair { max-width: 1040px; gap: 34px; }
.cmp-side { container-type: inline-size; }
/* 札の絵（AIだと… ／ 当社のAI漫画）: 原稿の上。紙の縁に少しだけ掛ける（画像には重ねない） */
.cmp-lbl { width: auto; max-width: 100%; height: 72px; margin: 0 auto -14px; position: relative; z-index: 2; rotate: -2deg; }
.cmp-lbl-ours { rotate: -3deg; }
.cmp-r3 .cmp-lbl { margin-bottom: 0; }
.cmp-r4 .cmp-lbl { height: 62px; margin: 0 0 0 2cqw; }
/* 10/27 オーナー「もう少し大きめに」: 当社の札だけ大きく（PC 72→100px・行 4 は 62→86px）。左の「AIだと…」は今のまま。
   左右の原稿の上端をそろえるため、増えた分は上へ伸ばす（下端の位置＝原稿に掛かる量は今と同じ） */
.cmp-lbl-ours { height: 100px; margin-top: -28px; }
.cmp-r4 .cmp-lbl-ours { height: 86px; margin-top: 0; }
/* 原稿用紙: 紙の地と接地の影は ::before（紙だけ少し傾ける。原稿の絵はまっすぐ＝左右で同じ大きさのまま） */
.pen-sheet { position: relative; isolation: isolate; padding: 6cqw 11cqw 15cqw; }
.pen-sheet::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fdfcf8;
  box-shadow: 0 0 0 1px rgba(38, 33, 25, .10), 0 1px 1px rgba(38, 33, 25, .06), 0 16px 22px -16px rgba(38, 33, 25, .42); }
.cmp-ai .pen-sheet::before { rotate: -1.1deg; }
.cmp-ours .pen-sheet::before { rotate: .8deg; }
.cmp-r3 .pen-sheet { padding: 8.5cqw 3cqw 13cqw; }
.cmp-r4 .pen-sheet { padding: 6.5cqw 3cqw 3cqw; }
.cmp-r4 .cmp-ours .pen-sheet { padding: 3cqw 3cqw 7cqw; }
.pen-pg { position: relative; }
.pen-img { position: relative; }
.cmp .cmp-zoom { border: 0; box-shadow: 0 0 0 1px rgba(21, 23, 27, .14); }   /* 前の灰色の枠をやめる（紙の上の原稿の細い縁だけ） */
.cmp-trio-item { position: relative; }
.cmp-trio-tags { display: flex; gap: 12px; }
.cmp-trio-tags .cmp-trio-tag { flex: 1 1 0; min-width: 0; }
/* トンボと書き込み（画像と同じ座標・線の太さは一定） */
.pen-marks, .pen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pen-marks { fill: none; stroke: rgba(21, 23, 27, .5); stroke-width: .8px; }
.pen { z-index: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.pen .ink { stroke: var(--ink); stroke-width: 2.8px; }
.pen .halo { stroke: #fffdf8; stroke-width: 7px; opacity: .9; }
.pen .hana .ink { stroke-width: 8px; }
.pen .hana .mk { stroke: #ffd400; stroke-width: 4.5px; }
.pen .hana .halo { stroke-width: 13px; }
.pen-g.sp { display: none; }
/* 手書きの指摘（墨のペン）: Yusei Magic（使う字だけ読み込む）。読み込めないときは Noto Sans JP 700（太字を作らせない） */
.pen-notes { margin: 0; padding: 0; list-style: none; }
.pen-note { position: absolute; z-index: 4; margin: 0; font-family: "Yusei Magic", var(--sans); font-weight: 700; font-synthesis: none; font-size: 4.2cqw; line-height: 1.1; color: var(--ink); white-space: nowrap; letter-spacing: .02em; }
.pen-note.v { writing-mode: vertical-rl; letter-spacing: .06em; }
.pn-l { right: 104%; top: 27%; }
.pn-l2 { right: 104%; top: 55%; }
.pn-r { left: 108%; top: 11%; }
.pn-r5 { left: 108%; top: 7%; }
.pn-b { left: 70%; top: 101.6%; font-size: 5.4cqw; rotate: -4deg; }
.pn-b5 { left: 18%; top: 101.4%; font-size: 4.6cqw; rotate: -2deg; }
.pn-ok { left: 56%; top: 103.5%; font-size: 8cqw; rotate: -9deg; letter-spacing: .02em; }
.pn-t3 { left: 38%; bottom: calc(100% + 10px); font-size: 3.4cqw; rotate: -2deg; }
.pn-b3 { left: 34%; top: calc(110% + 8px); font-size: 3.4cqw; rotate: -1deg; }
.cmp-r3 .pn-ok { left: 64%; top: calc(100% + 12px); font-size: 5.2cqw; }
.pn-t4 { left: 0; bottom: calc(100% + 14px); font-size: 2.3cqw; rotate: -2deg; }
.pn-ok4 { right: calc((100% - 24px) / 3 + 20px); top: calc(100% + 10px); font-size: 2.8cqw; rotate: -6deg; }
.cmp-ours figcaption { color: var(--ink); }

/* 動き（画面に入った時に 1 回だけ）: 原稿が置かれる → 指摘が順に書かれる → 間 → 花丸が一筆で描かれる → OK! */
@media (max-width: 1100px) {
  .cmp-pair::before { inset: -14px -16px -24px; }   /* 方眼を画面の外へ出さない（横のはみ出しを作らない） */
}
@media (prefers-reduced-motion: no-preference) {
  .cmp-row.is-armed .pen path, .cmp-row.is-armed .no-pen path { stroke-dasharray: 1 1.02; }
  .cmp-row.is-armed:not(.is-in) :is(.pen-sheet, .cmp-lbl, .pen-note, .cmp-side figcaption, .cmp-trio-tags) { opacity: 0; }
  .cmp-row.is-armed:not(.is-in) :is(.pen path, .no-pen path) { stroke-dashoffset: 1; }
  .cmp-row.is-in .no-pen path { animation: c5-draw .55s var(--ease) .1s both; }
  .cmp-row.is-in .cmp-ai .pen-sheet { animation: c5-place-l .85s var(--ease) .05s both; }
  .cmp-row.is-in .cmp-ours .pen-sheet { animation: c5-place-r .85s var(--ease) .18s both; }
  .cmp-row.is-in .cmp-lbl { animation: c5-in .5s var(--ease) .6s both; }
  .cmp-row.is-in .cmp-trio-tags { animation: c5-in .5s var(--ease) .7s both; }
  .cmp-row.is-in .pen-g.p1 path { animation: c5-draw .5s cubic-bezier(.55, .02, .45, 1) .8s both; }
  .cmp-row.is-in .pen-note.n1 { animation: c5-write .4s steps(4, end) 1.2s both; }
  .cmp-row.is-in .pen-g.p2 path { animation: c5-draw .55s cubic-bezier(.55, .02, .45, 1) 1.35s both; }
  .cmp-row.is-in .pen-note.n2 { animation: c5-write .45s steps(5, end) 1.75s both; }
  .cmp-row.is-in .pen-g.p3 path { animation: c5-draw .4s cubic-bezier(.55, .02, .45, 1) 1.95s both; }
  .cmp-row.is-in .pen-note.n3 { animation: c5-write .35s steps(3, end) 2.2s both; }
  .cmp-row.is-in .hana path { animation: c5-draw 1.05s cubic-bezier(.45, .05, .35, 1) 2.75s both; }
  .cmp-row.is-in .pen-note.ok { animation: c5-ok .42s cubic-bezier(.34, 1.56, .64, 1) 3.65s both; }
  .cmp-row.is-in .cmp-side figcaption { animation: c5-in .6s var(--ease) 3.7s both; }
}
@media (prefers-reduced-motion: reduce) {
  .cmp-row.is-armed *, .cmp-row.is-armed *::before { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}
@keyframes c5-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes c5-place-l { from { opacity: 0; translate: -26px 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes c5-place-r { from { opacity: 0; translate: 26px 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes c5-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes c5-write { from { opacity: 1; clip-path: inset(0 0 100% 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes c5-ok { 0% { opacity: 0; scale: 1.8; } 60% { opacity: 1; } 100% { opacity: 1; scale: 1; } }

/* スマホ（900px 以下）: 2 枚は左右のまま（行 3・4 は今の上下）。書き込みの線は画像の上と横、指摘の字は画像の下に短い列（13px 以上）。花丸は画像の右下の内側 */
@media (max-width: 900px) {
  .cmp-row + .cmp-row { margin-top: 30px; }
  .cmp-title { margin-bottom: 14px; }
  .no-pen { stroke-width: 2.2; }
  .cmp-pair::before { inset: -8px -16px -14px; }
  .cmp-r1 .cmp-pair, .cmp-r2 .cmp-pair, .cmp-r5 .cmp-pair { gap: 10px; }
  .cmp-lbl { height: 36px; max-width: 90%; margin-bottom: 0; }
  .cmp-r4 .cmp-lbl { height: 34px; margin: 0 0 0 4px; }
  .cmp-r3 .cmp-lbl { margin-bottom: 0; }
  .cmp-lbl-ours { height: 52px; max-width: 100%; margin-top: -16px; }   /* 10/27: スマホは 36→52px。増えた分は上へ（左右の原稿の上端はそろう） */
  .cmp-r3 .cmp-lbl-ours { margin-top: 0; }   /* 行 3 は上下に積むので上へは伸ばさない */
  .cmp-r4 .cmp-lbl-ours { height: 48px; margin-top: 0; }
  .pen-sheet, .cmp-r3 .pen-sheet, .cmp-r4 .pen-sheet { padding: 6px 12px 8px 6px; }
  .cmp-r3 .pen-sheet { padding: 6px 8px 8px 8px; }
  .cmp-r4 .pen-sheet, .cmp-r4 .cmp-ours .pen-sheet { padding: 6px 6px 8px; }
  .pen .ink { stroke-width: 2.2px; }
  .pen .halo { stroke-width: 5px; }
  .pen .hana .ink { stroke-width: 5px; }
  .pen .hana .mk { stroke-width: 2.8px; }
  .pen .hana .halo { stroke-width: 8px; }
  .pen-g.pc { display: none; }
  .pen-g.sp { display: inline; }
  .pen-notes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: max(14px, 9cqw); }   /* 波線・括弧（画像の下にはみ出す線）より下から */
  .cmp-r3 .pen-notes { margin-top: max(14px, 4.5cqw); }
  .cmp-ours .pen-notes { justify-content: flex-end; margin-top: 6px; }
  .cmp-r4 .pen-notes { margin-top: 8px; }
  .pen-note { position: static; writing-mode: horizontal-tb !important; rotate: none !important; font-size: 14px !important; line-height: 1.3; letter-spacing: .02em; }
  .pen-note.ok { font-size: 17px !important; }
  .cmp-trio-tags { gap: 8px; }
}
@media print {
  .cmp-row * { animation: none !important; opacity: 1 !important; }
  .pen-note { color: var(--ink) !important; }   /* 印刷は墨の字（濃淡なし） */
}

/* 最後の 10%（v7.5）: ① AI の原稿に触れると、墨の書き込みが少し濃く・太くなる（編集者がペンを入れ直す）。当社の原稿に触れると、花丸の黄色が少し明るくなる（二次応答）
   ② 花丸の黄色の下に、紙の暗部の色の細い影（黄色が紙から浮きすぎない）③ 指摘の字は墨の 9 割（ペンの濃淡）。どれも動きを減らす設定では変化だけで動かない */
.pen .ink, .pen .hana .mk { transition: stroke-width .25s var(--ease), stroke .25s var(--ease); }
@media (hover: hover) {
  .cmp-ai:hover .pen .ink { stroke-width: 3.4px; }
  .cmp-ours:hover .pen .hana .mk { stroke: #ffe14d; }
}
.pen .hana { filter: drop-shadow(0 1.5px 0 rgba(38, 33, 25, .22)); }
.pen-note { color: rgba(21, 23, 27, .92); }

/* ======================================================================================================
   v7.6（2026-10-21・設計書 §20）当社の側の書き込み（良い所）: AI の側と同じ墨のペン（丸囲み・括弧・引き出し線）で指し（引き出し線は PC だけ。スマホは字が画像の下の列なので出さない）、
   字の下に短い黄色（#ffd400＝花丸と同じ黄）のマーカー。赤は使わない。字は線・画像・札・ほかの字に重ねない（PC は原稿の余白・スマホは画像の下の短い列）
   ====================================================================================================== */
@media (min-width: 901px) {
  .diy-decide-title > span { white-space: nowrap; }   /* T7: PC は 1 行ずつ（塊の中に収まる大きさ。はみ出しは検査 V5・C24 で見る） */
}
/* キャプション: 行の長さをそろえる（v7.6 で長くなった行 3 の AI・行 5 の当社が、スマホで最後の行だけ短く残らないように） */
.cmp-side figcaption { text-wrap: balance; }
/* PC の置き場所（% は原稿の画像の幅・高さ。縦書きは左右の余白、③ は下の余白に横書き） */
.pn-o1a { right: 104%; top: 4.8%; }    /* 行 1 挿入コマ（左上の丸いコマの横） */
.pn-o1b { right: 104%; top: 46.4%; }   /* 行 1 はみ出し（髪がコマの境を越える高さ） */
.pn-o1c { right: 104%; top: 70.4%; }   /* 行 1 断ち切り（3 コマ目の括弧の横） */
.pn-o2a { right: 104%; top: 2.6%; }    /* 行 2 引きの構図（1 コマ目） */
.pn-o2b { left: 108%; top: 32.3%; }    /* 行 2 アングル（真ん中の 3 コマ） */
.pn-o2c { left: 108%; top: 77.9%; }    /* 行 2 手元のみ（右下の小さなコマ） */
.pn-o2d { right: 104%; top: 68.2%; }   /* 行 2 デフォルメ（座り込む部長） */
.pn-o5a { left: 108%; top: .8%; }      /* 行 5 ①（右上のコマの横） */
.pn-o5b { left: 108%; top: 26.7%; }    /* 行 5 ②（② の印から引き出し線） */
.pn-o5c { left: 4%; top: 102.4%; rotate: -2deg; }   /* 行 5 ③（③ の印の真下。左下のトンボの線にかけない） */
/* トンボ（原稿の角の外の細い線）にも字を重ねない: 行 2 の AI「山場がない」は右下のトンボ（x=600 の縦の線）に掛かっていた → 波線の右端（x=400）とトンボの間に収める */
.cmp-r2 .cmp-ai .pn-b { left: 68.5%; font-size: 4.6cqw; }
/* 黄色のマーカー: 横書きは字の下、縦書きは字の右（傍線の側）。字の後ろに敷く */
.pen-note.good { isolation: isolate; }
.pen-note.good::before { content: ""; position: absolute; z-index: -1; background: #ffd400; border-radius: 2px; pointer-events: none; }
.pen-note.good:not(.v)::before { left: -.08em; right: -.1em; bottom: -.04em; height: .42em; rotate: -1.2deg; }
.pen-note.good.v::before { top: -.08em; bottom: -.1em; right: -.1em; width: .42em; rotate: 1deg; }

/* 動き（画面に入った時に 1 回だけ）: AI の指摘と同じ間合いで、当社の良い所も順に書く → 字の下にマーカーを引く → 花丸 → OK! */
@media (prefers-reduced-motion: no-preference) {
  .cmp-row.is-in .pen-g.q1 path { animation: c5-draw .35s cubic-bezier(.55, .02, .45, 1) .95s both; }
  .cmp-row.is-in .pen-note.good.m1 { animation: c5-write-g .3s steps(4, end) 1.2s both; }
  .cmp-row.is-in .pen-note.good.m1::before { animation: c5-mark-v .28s var(--ease) 1.45s both; }
  .cmp-row.is-in .pen-g.q2 path { animation: c5-draw .35s cubic-bezier(.55, .02, .45, 1) 1.4s both; }
  .cmp-row.is-in .pen-note.good.m2 { animation: c5-write-g .3s steps(4, end) 1.65s both; }
  .cmp-row.is-in .pen-note.good.m2::before { animation: c5-mark-v .28s var(--ease) 1.9s both; }
  .cmp-row.is-in .pen-g.q3 path { animation: c5-draw .35s cubic-bezier(.55, .02, .45, 1) 1.85s both; }
  .cmp-row.is-in .pen-note.good.m3 { animation: c5-write-g .3s steps(4, end) 2.1s both; }
  .cmp-row.is-in .pen-note.good.m3::before { animation: c5-mark-v .28s var(--ease) 2.35s both; }
  .cmp-row.is-in .pen-g.q4 path { animation: c5-draw .35s cubic-bezier(.55, .02, .45, 1) 2.3s both; }
  .cmp-row.is-in .pen-note.good.m4 { animation: c5-write-g .3s steps(4, end) 2.55s both; }
  .cmp-row.is-in .pen-note.good.m4::before { animation: c5-mark-v .28s var(--ease) 2.8s both; }
  .cmp-row.is-in .pen-note.good:not(.v)::before { animation-name: c5-mark-h; }
}
@keyframes c5-write-g { from { opacity: 1; clip-path: inset(-.2em -.3em 100% -.3em); } 96%, to { opacity: 1; clip-path: inset(-.2em -.3em -.2em -.3em); } }   /* マーカーのはみ出しを切らない。96% で書き終える（steps の終わりが小数の誤差で 1 段手前に止まらないように） */
@keyframes c5-mark-h { from { scale: 0 1; transform-origin: 0 50%; } to { scale: 1 1; transform-origin: 0 50%; } }
@keyframes c5-mark-v { from { scale: 1 0; transform-origin: 50% 0; } to { scale: 1 1; transform-origin: 50% 0; } }

/* スマホ（900px 以下）: AI の側と同じ。字は画像の下の短い列（横書き・14px）、線は画像の上。マーカーは字の下 */
@media (max-width: 900px) {
  .pen-note.good { position: relative; inset: auto; }
  .pen-note.good.v::before { top: auto; left: -.08em; right: -.1em; bottom: -.04em; width: auto; height: .42em; rotate: -1.2deg; }
  .cmp-ours .pen-notes { row-gap: 4px; justify-content: safe flex-end; }   /* 長い 1 つが列に収まらない幅（320px）では左（AI の列の方）へはみ出さない */
  .pen-notes { padding-inline: 4px; }   /* 画像の下の字の列は、左右の角のトンボ（画像の端から下へ伸びる縦の線）から離す */
}
@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .cmp-row.is-in .pen-note.good.v::before { animation-name: c5-mark-h; }
}

/* ======================================================================================================
   §22（2026-10-21・ 5 案から案 5 を選んだ）決めの一言 = 漫画の 1 コマ（驚くひなた＋写植）
   色は墨・紙・黄・白だけ（赤は使わない）。影の付いた箱にしない（コマの枠＝墨の線だけ）。字は 1 組（HTML の順＝読み上げの順）を CSS のグリッドで置き直す。
   PC（901px 以上）: コマの絵（右は空いた集中線）の右の空きに写植。「当社では・・・」はコマの右上の角のナレーションの箱・「※当社調べ」は右下・ひなたの「えっ!?」は頭の左上の小さな吹き出し。
   スマホ: 上に字のコマ（白地・墨の枠・細い墨の集中線＝消失点は「10万円」）、下にひなたのコマ（右の空きに大きな「えっ!?」）。ひなたの視線は右上＝上のコマの値段へ。
   動き（画面に入った時に 1 回だけ。lp-b.js が is-armed → is-in）: 地 0〜120ms → 前振りの字 150ms まで → 間 300ms → 450ms「10万円」を 1.25 倍から叩きつけ（back-out 420ms・605ms に着地）
     → 着地の瞬間に塊が 2 フレーム揺れる → 黄色のマーカーが左から → 700ms ひなたの「えっ!?」（3 回だけ震えて止まる）。reduced-motion・最初から画面の中・JS なしは完成形
   ====================================================================================================== */
.decide-punch { --bw: 3px; position: relative; display: grid; grid-template-columns: 48% minmax(0, 1fr) 4.5%; grid-template-rows: auto minmax(0, 1fr) auto;
  margin-top: 48px; padding: 0; border: var(--bw) solid var(--ink); background: #fff; text-align: center; container-type: inline-size; }
.punch-koma { grid-area: 1 / 1 / -1 / -1; z-index: 0; margin: 0; overflow: hidden; }
.punch-koma img { display: block; width: 100%; height: auto; transform-origin: 72% 49%; }   /* 集中線の消失点を中心に寄る */
.punch-lines { display: none; }
/* ナレーションの箱（漫画の地の文）: 白・墨の枠＋内側に細い線（二重の枠）・コマの右上の角に重ねる */
.punch-pre { grid-area: 1 / 2 / 2 / 4; z-index: 1; justify-self: end; align-self: start; margin: calc(-1 * var(--bw)) calc(-1 * var(--bw)) 0 0; padding: 9px 20px 10px 22px;
  background: #fff; border: var(--bw) solid var(--ink); outline: 1px solid var(--ink); outline-offset: -8px; color: var(--ink);
  font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: .22em; white-space: nowrap; }
/* 写植: 字の大きさはコマの幅に合わせる（cqw＝コマの中身の幅の 1%。1040px で 40px・特大の「10万円！」は 3.45 倍） */
.punch-main { grid-area: 2 / 2 / 3 / 3; z-index: 1; align-self: center; justify-self: center; margin: 0; padding-top: 1.6cqw;
  font-size: clamp(26px, 3.86cqw, 40px); font-weight: 900; line-height: 1.3; letter-spacing: .02em; color: var(--ink); font-feature-settings: "palt" 1; white-space: nowrap; }
.punch-a { display: block; }
.punch-b { position: relative; display: inline-block; isolation: isolate; margin-top: 2px; padding: 0 .08em; font-size: 3.45em; line-height: 1.05; letter-spacing: -.015em; }
/* 太い黄色のマーカー（筆で引いた端の荒れ）: 「10万円！」の下 6 割・少し右上がり。字の後ろ（isolation の中の z-index: -1） */
.punch-b::before { content: ""; position: absolute; z-index: -1; left: -.02em; right: -.02em; bottom: .03em; height: .58em; rotate: -2.5deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 60' preserveAspectRatio='none'%3E%3Cpath d='M9 9 C70 3 150 8 230 4 C300 1 362 5 395 8 C399 22 397 40 393 52 C330 58 262 53 190 57 C120 60 58 55 4 52 C1 38 3 22 9 9 Z' fill='%23ffd400'/%3E%3Cpath d='M380 6 L398 3 L392 11 Z M6 50 L0 58 L14 54 Z' fill='%23ffd400'/%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat; }
.punch-mk { font-style: normal; font-size: 1em; padding: 0; letter-spacing: inherit; background: none; }
.punch-note { grid-area: 3 / 2 / 4 / 4; z-index: 1; justify-self: end; align-self: end; margin: 0 14px 12px 0; padding: 0 6px; background: #fff;
  font-size: 13.5px; line-height: 1.6; letter-spacing: .06em; color: var(--ink2); }
/* ひなたの「えっ!?」: 縦書きの小さな吹き出し（しっぽは顔へ）。PC は頭の左上・スマホはコマの右の空き */
.punch-wow { grid-area: 1 / 1 / -1 / -1; z-index: 2; position: relative; justify-self: start; align-self: start; width: 17%; margin: 2.6% 0 0 1.6%; transform-origin: 62% 92%; }
.punch-wow-bg { display: block; width: 100%; height: auto; overflow: visible; }
.punch-wow-bg path { fill: #fff; stroke: var(--ink); stroke-width: 2.6; stroke-linejoin: round; }
.punch-wow-bg .pw-sp { display: none; }
.punch-wow-t { position: absolute; left: 10.07%; top: 5.61%; width: 65.57%; height: 79.89%; display: grid; place-items: center; }   /* 字の枠 = 楕円の本体の外接矩形（pw-pc の path の座標から計算・尻尾は除く）。10/21「ずれてる」: 0/0/68/82 で字が左上へ寄っていた */
.pw-t { writing-mode: vertical-rl; font-size: clamp(24px, 3.3cqw, 34px); font-weight: 900; line-height: 1; letter-spacing: .04em; }
.pw-t .tcy { text-combine-upright: all; -webkit-text-combine: horizontal; }

@media (max-width: 900px) {
  .decide-punch { --bw: 2px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; margin-top: 28px; border: 0; background: none; container-type: normal; }
  /* 字のコマ: 集中線の SVG がコマの地と枠を兼ねる（字の 3 行の後ろ一面） */
  .punch-lines { display: block; grid-area: 1 / 1 / 4 / 2; z-index: 0; width: 100%; height: 100%; border: var(--bw) solid var(--ink); background: #fff; }
  .punch-lines path { fill: var(--ink); transform-origin: 180px 118px; }   /* 消失点（viewBox の座標）。寄る動きは SVG の中だけ＝画面の外へはみ出さない */
  .punch-pre { grid-area: 1 / 1 / 2 / 2; justify-self: start; margin: 0; padding: 5px 12px 6px 14px; font-size: 14px; letter-spacing: .16em; outline-offset: -6px; }
  .punch-main { grid-area: 2 / 1 / 3 / 2; padding: 10px 8px 0; font-size: min(23px, 6.1vw); }
  .punch-b { font-size: 3.48em; }
  .punch-note { grid-area: 3 / 1 / 4 / 2; justify-self: end; margin: 2px 8px 8px 0; padding: 0 4px; font-size: 13px; }
  .punch-koma { grid-area: 4 / 1 / 5 / 2; margin-top: 8px; border: var(--bw) solid var(--ink); }
  .punch-wow { grid-area: 4 / 1 / 5 / 2; justify-self: end; width: 31%; margin: calc(8px + 5%) 9% 0 0; transform-origin: 0% 70%; }
  .punch-wow-bg path { stroke-width: 2.2; }
  .punch-wow-bg .pw-pc { display: none; }
  .punch-wow-bg .pw-sp { display: inline; }
  .punch-wow-t { left: 24.29%; top: 4.44%; width: 71.43%; height: 82.17%; }   /* pw-sp の楕円の本体の外接矩形 */
  .pw-t { font-size: min(44px, 7.2vw); }   /* 吹き出し（幅 31%）と一緒に大きくする。27px 止めだと 768px で大きな楕円に小さな字になった */
}
/* 動き（is-armed＝最初の画面より下にあった塊だけ。lp-b.js）。fill-mode は both＝始まる前は 0% の形（隠れている）・終わった後は完成形 */
@media (prefers-reduced-motion: no-preference) {
  .decide-punch.is-armed:not(.is-in) :is(.punch-lines path, .punch-pre, .punch-a, .punch-note, .punch-b, .punch-wow) { opacity: 0; }
  .decide-punch.is-armed:not(.is-in) .punch-b::before { background-size: 0% 100%; }
  .decide-punch.is-in { animation: dpShake 40ms steps(1, end) 605ms; }
  .decide-punch.is-in .punch-koma img { animation: dpKoma 120ms var(--ease) both; }
  .decide-punch.is-in .punch-lines path { animation: dpLines 120ms var(--ease) both; }
  .decide-punch.is-in .punch-pre { animation: dpLeft 120ms var(--ease) both; }
  .decide-punch.is-in .punch-a { animation: dpUp 120ms var(--ease) 30ms both; }
  .decide-punch.is-in .punch-note { animation: dpFade 120ms linear 30ms both; }
  .decide-punch.is-in .punch-b { animation: dpBang 420ms cubic-bezier(.34, 1.56, .64, 1) 450ms both, dpBangFade 120ms linear 450ms both; }
  .decide-punch.is-in .punch-b::before { animation: dpMark 220ms var(--ease) 605ms both; }
  .decide-punch.is-in .punch-wow { animation: dpWow 180ms var(--ease) 700ms both, dpTremble 900ms ease-in-out 1300ms 3; }
}
@media (prefers-reduced-motion: reduce) {
  .decide-punch.is-armed, .decide-punch.is-armed *, .decide-punch.is-armed *::before { animation: none !important; opacity: 1 !important; }
  .decide-punch.is-armed .punch-b::before { background-size: 100% 100% !important; }
}
@keyframes dpShake { 0% { translate: 3px -2px; } 50% { translate: -2px 2px; } 100% { translate: 0 0; } }
@keyframes dpKoma { from { scale: 1.02; } to { scale: 1; } }
@keyframes dpLines { from { opacity: 0; scale: 1.15; } to { opacity: 1; scale: 1; } }
@keyframes dpLeft { from { opacity: 0; translate: -14px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes dpUp { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
@keyframes dpFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes dpBang { from { scale: 1.25; } to { scale: 1; } }
@keyframes dpBangFade { 0% { opacity: 0; filter: blur(3px); } 50% { opacity: 1; } 100% { opacity: 1; filter: blur(0); } }
@keyframes dpMark { from { background-size: 0% 100%; } to { background-size: 100% 100%; } }
@keyframes dpWow { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }
@keyframes dpTremble { 0%, 100% { rotate: 0deg; } 30% { rotate: -2deg; } 70% { rotate: 1.2deg; } }
@media print {
  .decide-punch, .decide-punch * { animation: none !important; opacity: 1 !important; }
  .decide-punch .punch-b::before { background-size: 100% 100% !important; }   /* 画面に入る前に印刷しても、マーカーは全長 */
}

/* ======================================================================================================
   改行の規則（v7.6・§21）— 10/21「全ての改行をチェックして（PC とスマホ）」。この塊は上の規則より後に置く
   根因: 文の大半が word-break: normal（日本語は 1 字単位でどこでも折れる）のままで、文節で折る指定は見出しの一部だけだった
   （「キャラクタ／ー」「時給2,000／円」「ご覧ください。」だけの行）。→ ページ全体を文節で折る:
   ・Chrome・Edge: body の word-break: auto-phrase（継承される。Safari はこの宣言を捨てる）
   ・Safari（auto-phrase が無い）: jpwrap.js（BudouX）が文節の境目に <wbr> を入れ、その塊を keep-all にする（<head> の読み込み役が Safari にだけ読ませる）
   ・line-break: strict（行頭の小さい「ャ」「ー」「々」などを禁止。Chrome・Safari とも効く）
   ・overflow-wrap: break-word（入らない長さの文節だけ任意の所で折る。anywhere は flex の中で最小幅を 1 字にして語の途中で折れるので使わない）
   ・行の長さ: 本文は pretty（最後の行を短く残さない）、見出し・キャプション・ラベル・ボタンは balance（行をそろえる）。
     text-wrap の一括の指定（shorthand）は white-space: nowrap を打ち消すので、text-wrap-style だけを :where()（詳細度 0）で置く＝個別の指定が勝つ
   既存の keep-all＋<wbr> の設計（見出し・吹き出し・ラベル）はそのまま。
   ====================================================================================================== */
body { line-break: strict; word-break: auto-phrase; overflow-wrap: break-word; }
:where(p, li, dd, dt, blockquote, td, th) { text-wrap-style: pretty; }
:where(h1, h2, h3, h4, h5, summary, figcaption, label, legend, .btn, button, caption,
  .kicker, .kicker-label, .fv-eyebrow, [class*="-tag"], [class*="-lbl"], [class*="-label"], [class*="-cap"], [class*="-days"], [class*="-name"], [class*="-title"], [class*="-head"]) { text-wrap-style: balance; }
/* Chrome の auto-phrase の区切りが BudouX（Safari の jpwrap・改行点検）と違って「最短／10営業日」「まだ／かかりません」「ご案内／メール」と折れる所は、
   見出しと同じ keep-all＋文節の <wbr>（HTML に書いた）にする＝Chrome も Safari も同じ所でだけ折る */
.price-fixed, .flow-total, .flow > li > span, .check > span { word-break: keep-all; }
/* 2〜3 行で終わる短い文・注記・表のセル: 最後の行だけ短く残らないよう、行の長さをそろえる（pretty では 1 字〜1 文節の行しか直さない） */
.fv-facts span, .decide-list li, .diy-try p, .price-fixed, .incl-tiles li, .incl-tiles span, .extra-list li > span, .uc-col > p, .uc-note, .uc-point,
.ev-copy, .ev-note, .rs-sub, .flow-total, .flow > li > span, .quality-info li > span, .faq-a p, .voices-note, .form-note,
.trust-list b, .lpb-skip, .inhouse-list li, .voice-text p { text-wrap-style: balance; }
.nb { white-space: nowrap; }   /* 数の範囲（2〜3週間）などを途中で折らない */
@media (max-width: 600px) {
  /* FV の 3 つ（スマホ）: 文節で折ると 1・2 列目が 4 行になり、390×660 でボタンが最初の画面から落ちる → 列の幅を字の長さに合わせる
     （1・2 列目「キャラクター案（原則、」「第1稿（ストーリーと」が 1 行に入る幅・3 列目「絵柄の見本から選べる」は 3 行で狭く） */
  .fv .fv-facts-type { grid-template-columns: minmax(0, 1.92fr) minmax(0, 1.79fr) minmax(0, 1fr); }   /* 390px で 146・136・76px（代わりの字＝Hiragino でも 1 列目に 11 字入る） */
}