/* /lp v6 の本番の作り(版6、C-216・C-217・C-218・C-219。版5 は C-212、版4 は C-208)の見た目。本番の土台(demo.css・lp.css の色)に載せた一列の読み物(幅 860px まで)。
   上段・各節の見出し・ボタンは中央、本文と表は左。スマホを先に書き、広い画面で横に並べる。375px で横にはみ出さない */
body.lp6 {
  --hi: #ffd84d;
  --hi-ink: #3a2e00;
  --ink: #15213a;
  /* 問い合わせの3つの分け方(C-296)の色: 減らす=青・速く返す=緑・人が丁寧に返す=橙。--cl は札ごとに置き直す */
  --cl-reduce: #2a5bd7;
  --cl-fast: #1a8a6e;
  --cl-care: #c27a12;
  --cl: var(--cl-reduce);
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.7;
}
.lp6 .lp6-in { max-width: 860px; margin: 0 auto; padding: 0 16px; }
/* 節の上下の余白は前のおよそ1.5倍(C-261。スマホ 24→上40・下32、PC 32→上52・下44)。上を下より広くして、見出しが上の節より自分の節の中身に近く見えるように。節の境目は上の細い線 */
.lp6 .lp6-sec { padding: 40px 0 32px; border-top: 1px solid var(--line); }
@media (min-width: 720px) { .lp6 .lp6-sec { padding: 52px 0 44px; } }
.lp6 .lp6-hero { border-top: 0; padding: 32px 0 28px; text-align: center; }
/* 見出し: スマホ 375px で約30px(10/19 オーナー 16:08。説明・価格の札との大きさの差をはっきりさせる) */
body.lp6 h1 { font-size: clamp(28px, 8vw, 38px); font-weight: 900; line-height: 1.25; color: var(--ink); text-wrap: balance; }
body.lp6 h2 { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 20px; text-align: center; text-wrap: balance; }
body.lp6 h3 { font-size: 16px; font-weight: 700; color: var(--ink); margin: 24px 0 10px; text-align: center; }
/* 見出しは語の切れ目で折り返す(「個/人情報」のように語の途中で切らない。対応しないブラウザでは今までどおり) */
body.lp6 h1, body.lp6 h2, body.lp6 h3, .lp6 .lp6-lead, .lp6 .lp6-proof, .lp6 .lp6-point b, .lp6 .lp6-cl-h, .lp6 .lp6-badge b { word-break: auto-phrase; }
.lp6 .lp6-kicker { font-size: 13px; letter-spacing: 0.06em; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
/* 説明(10/19 オーナー 16:08): 太字をやめ、薄い字で見出しより一段下げる。/lp v6 では 16:15 の決定で上段から外した(v7 の下書きが使う) */
.lp6 .lp6-lead { margin: 20px auto 0; max-width: 34em; font-size: 16px; font-weight: 400; color: var(--muted); }
/* 上段の価格の1行(hero.note。10/19 オーナー 8:11 決定)を札(バッジ)に(16:08 決定): 薄い青の背景(アクセント色の 9%)・角丸・内余白 6px 14px・字 14px。見出しとの間は 20px(16:15 に説明を外したため、見出しのすぐ下)。
   375px(中身 343px)で、全角17字＋半角の数字・かっこ5字 ≒ 19.5字 × 14px ≒ 273px ＋ 内余白 28px ≒ 301px なので1行に収まる。もっと狭いときは句点でだけ折り返す(C-325 と同じ keep-all) */
.lp6 .lp6-hero-note { display: inline-block; margin: 20px auto 0; padding: 6px 14px; border-radius: 999px; background: rgba(29, 78, 216, 0.09); font-size: 14px; font-weight: 700; line-height: 1.5; color: var(--ink); word-break: keep-all; overflow-wrap: anywhere; }
/* 検証の札(C-241。C-293 で上段から回答のルールの節の見出しの下へ移した): 線のアイコン付きで目立たせる。下に小さな注 */
.lp6 .lp6-badge { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 10px 16px; border: 2px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 16px; line-height: 1.4; text-align: left; }
.lp6 .lp6-badge .lp6-icon { flex: none; margin: 0; }
.lp6 .lp6-badge-note { margin-top: 6px; font-size: 12px; color: var(--muted); }
.lp6 .lp6-small { font-size: 12px; color: var(--muted); margin-top: 10px; }
.lp6 .lp6-center { text-align: center; }
/* 上段の1行の改行は PC(720px 以上)だけ(C-293)。スマホは自然に折り返す */
.lp6 .lp6-br-pc { display: none; }
@media (min-width: 720px) { .lp6 .lp6-br-pc { display: inline; } }


/* ボタンは「まずは無料で相談する」の1種類だけ(C-219)。上段・価格の下・一番下の3か所で同じ幅・同じ高さ。すぐ下に小さな1行 */
.lp6 .lp6-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 24px; }
.lp6 .lp6-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 100%; max-width: 340px; height: 64px; padding: 0 18px; border-radius: 12px;
  font-size: 15px; font-weight: 700; line-height: 1.4; text-align: center; text-decoration: none; white-space: normal;
}
.lp6 .lp6-btn-primary { background: var(--accent); border: 1.5px solid var(--accent); color: #fff !important; }
.lp6 .lp6-btn-primary:hover { background: var(--accent-strong); }
.lp6 .lp6-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lp6 .lp6-cta-sub { margin-top: 8px; font-size: 12px; color: var(--muted); text-align: center; }

/* こう変わる: 6つの手順を1列に1枚の図で(スマホは2列3段、広い画面は6つを1行)。各手順に線だけの絵。1〜4は「担当者」の消し線→「AI」、5・6は「担当者」 */
.lp6 .lp6-flow { margin: 0; }
.lp6 .lp6-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.lp6 .lp6-steps li { counter-increment: step; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 4px; border-radius: 8px; text-align: center; line-height: 1.3; overflow-wrap: anywhere; }
.lp6 .lp6-steps li::before { content: counter(step); font-size: 11px; color: var(--muted); }
.lp6 .lp6-steps b { font-size: 14px; color: var(--ink); }
.lp6 .lp6-steps .lp6-icon { width: 32px; height: 32px; margin: 2px auto; }
.lp6 .lp6-who { font-size: 12px; font-weight: 700; }
.lp6 .lp6-who s { margin-right: 4px; font-weight: 400; color: var(--muted); }
.lp6 .lp6-person { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.lp6 .lp6-ai { background: color-mix(in srgb, var(--hi) 45%, var(--surface)); border: 1px solid var(--hi); color: var(--hi-ink); }
@media (min-width: 640px) {
  .lp6 .lp6-steps { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* 凡例(C-217): 黄色の札 = AI が引き受ける、白の札 = 担当者に残る */
.lp6 .lp6-legend { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 6px; margin-top: 10px; font-size: 12px; color: var(--muted); }
.lp6 .lp6-key { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.lp6 .lp6-key-person { margin-left: 10px; }
.lp6 .lp6-key-ai { background: color-mix(in srgb, var(--hi) 45%, var(--surface)); border: 1px solid var(--hi); }
.lp6 .lp6-key-person { background: var(--surface); border: 1px solid var(--line-2); }

/* 回答のルール(C-240): 札は見出しと説明だけ。幅 200px を下回らない数で横に並べる(375px は1列、見本の2枚・本番の3枚とも広い画面では1段) */
.lp6 .lp6-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.lp6 .lp6-point { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; align-content: start; padding: 12px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); }
.lp6 .lp6-point b { display: block; font-size: 15px; color: var(--ink); line-height: 1.5; }
.lp6 .lp6-point p { grid-column: 1 / -1; margin-top: 8px; font-size: 13px; color: var(--ink); line-height: 1.6; }
/* 札の頭のアイコン(C-255): 安全の札(線だけ・28px)より目立たせるため、色を塗った丸(44px)の中に白抜きの線(26px)。
   色は body.lp の --accent と --accent-ink(暗い設定の端末でもこのページは明るい色のまま)。絵の形は lp-v6.html の symbol、どれを使うかは文の _icon */
.lp6 .lp6-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.lp6 .lp6-qicon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); }
.lp6 .lp6-qicon svg { width: 26px; height: 26px; fill: none; stroke: var(--accent-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 利用条件: 語の札(スマホは縦、広い画面は横に)。利用条件と安全の札に線だけのアイコン(同じ形) */
.lp6 .lp6-terms { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 720px) { .lp6 .lp6-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* 札は2つ(C-314) */
.lp6 .lp6-terms li { display: flex; align-items: center; justify-content: center; padding: 10px 8px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--surface); font-weight: 700; color: var(--ink); text-align: center; line-height: 1.4; overflow-wrap: anywhere; }
.lp6 .lp6-safe { display: grid; grid-template-columns: 1fr; gap: 8px; }
/* 札は「お預かりの約束」(C-312・C-314。v6 は C-316 で4枚、v7 の下書きは5枚)。v6 の4枚(lp6-safe4)は広い画面で2列×2段。文が長いのでスマホは1列、広い画面は1段3枚の折り返しで上3枚・下2枚(下の段は中央に寄せる。置き場所を指定しないので見た目の順は DOM の順のまま) */
@media (min-width: 720px) { .lp6 .lp6-safe { display: flex; flex-wrap: wrap; justify-content: center; } .lp6 .lp6-safe div { flex: 0 0 calc((100% - 16px) / 3); box-sizing: border-box; } .lp6 .lp6-safe4 div { flex-basis: calc((100% - 8px) / 2); } }
.lp6 .lp6-terms-icon li { gap: 8px; }
.lp6 .lp6-terms-icon .lp6-icon { flex: none; margin: 0; }
@media (min-width: 720px) { .lp6 .lp6-terms-icon li { flex-direction: column; gap: 2px; } .lp6 .lp6-terms-icon .lp6-icon { margin: 0 auto 4px; } }
.lp6 .lp6-safe div { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.lp6 .lp6-icon { display: block; width: 28px; height: 28px; margin: 0 auto 4px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lp6 .lp6-safe b { display: block; margin-bottom: 2px; color: var(--ink); text-align: center; }
.lp6 .lp6-safe span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* 料金(C-217・C-218、C-324 で4枚): 月額を大きく、初期費用を小さく。おすすめの印はなし(どの枚も同じ見た目)。含まれるもの5つは4枚の下に1回だけ(枚の中には置かない)。
   4枚をスマホは2列×2段、720px 以上は4列。月額の字はいちばん長い月額(price.plans.2)がスマホの2列(375px で枚の中 約145px)でも1行に収まる 22px。広い画面は下の 1024px の分岐で大きく */
.lp6 .lp6-price-lead { margin: -4px 0 14px; text-align: center; color: var(--ink); text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.lp6 .lp6-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 720px; margin: 0 auto; }
@media (min-width: 720px) { .lp6 .lp6-plans { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.lp6 .lp6-plan { padding: 14px 10px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--surface); text-align: center; }
.lp6 .lp6-plan-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.lp6 .lp6-plan-monthly { margin-top: 6px; font-size: 22px; font-weight: 900; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.lp6 .lp6-plan-initial { font-size: 13px; color: var(--ink); }
.lp6 .lp6-plans + .lp6-small { margin-top: 10px; }
.lp6 .lp6-price-more { max-width: 720px; margin: 4px auto 0; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; }
.lp6 .lp6-inc { max-width: 720px; margin: 14px auto 0; }
.lp6 .lp6-inc-title { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; }
.lp6 .lp6-plan-inc { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 16px; margin: 4px 0 0; padding: 0; list-style: none; font-size: 13px; }
.lp6 .lp6-plan-inc li { position: relative; padding-left: 18px; color: var(--ink); }
.lp6 .lp6-plan-inc li::before { content: ""; position: absolute; left: 3px; top: 0.55em; width: 8px; height: 4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* 問い合わせの3つの分け方(C-296。前の「チャット型 AI との違い」と置き換え): 中央のリードと札3枚(スマホは縦、広い画面は3列)。
   札の上の太い線と分類の名の色は body.lp6 の --cl-*(減らす=青・速く返す=緑・人が丁寧に返す=橙)。地と文字は body.lp の --surface・--bg・--ink・--muted(暗い設定の端末でもこのページは明るい色のまま) */
.lp6 .lp6-cl-lead { max-width: 34em; margin: -8px auto 22px; text-align: center; color: var(--muted); }
.lp6 .lp6-cl-cols { display: grid; grid-template-columns: 1fr; gap: 14px; max-width: 980px; margin: 0 auto; }
@media (min-width: 720px) { .lp6 .lp6-cl-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp6 .lp6-cl { padding: 18px; border: 1px solid var(--line); border-top: 6px solid var(--cl); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.lp6 .lp6-cl-fast { --cl: var(--cl-fast); }
.lp6 .lp6-cl-care { --cl: var(--cl-care); }
.lp6 .lp6-cl-h { margin: 0 0 4px; font-size: 20px; font-weight: 800; color: var(--cl); }
.lp6 .lp6-cl-who { margin: 0 0 10px; font-size: 14px; color: var(--muted); }
.lp6 .lp6-cl-ex { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.lp6 .lp6-cl-act { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--band); font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--ink); }

/* 相談 */
.lp6 #consult { background: var(--accent-soft); }
.lp6 .lp6-consult-lead { max-width: 34em; margin: 0 auto; }
/* 相談の節の見出しの上の札(C-320): 線で囲んだ丸い札。上段の小さな行(lp6-kicker)より少し目立つ程度。見出し「先着5社、3か月無料」は 20px × 10字 = 200px で、375px(中身 343px)でも1行に収まる(テストで確かめる) */
.lp6 .lp6-consult-badge { display: block; width: fit-content; margin: 0 auto 10px; padding: 3px 12px; border: 1.5px solid var(--accent); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.5; }
.lp6 .lp-footer { padding-bottom: 32px; }

/* 追従のボタン(C-240): スマホは画面の下に1つ(社名は出さない)、PC(720px 以上)は画面の上のヘッダーの右に1つ(左に社名)。
   一番下の相談の節のボタンが見えている間は lp6.js が lp6-bar-off を付けて隠す。スマホは下のボタンが本文やフッターを隠さないよう、ページの下に余白 */
.lp6 .lp6-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--surface) 92%, transparent); border-top: 1px solid var(--line); transition: transform 0.2s, opacity 0.2s; }
.lp6 .lp6-bar-in { display: flex; justify-content: center; align-items: center; gap: 12px; }
.lp6 .lp6-brand { display: none; font-weight: 700; color: var(--ink); }
.lp6 .lp6-bar.lp6-bar-off { transform: translateY(100%); opacity: 0; pointer-events: none; }
body.lp6 { padding-bottom: 88px; }
/* 毎月の報告で、お渡しするもの(C-293。正は参謀の見本 data/lp-v6-c293-preview.html の .ex-)。番号つき3枚。スマホは図が左・文(見出しと説明を1つの箱に)が右、PC は横3列。
   図の色は CSS 変数だけ(暗い色でも見える) */
.lp6 .lp6-ex-steps { list-style: none; margin: 0 auto; padding: 0; max-width: 960px; display: grid; gap: 22px; counter-reset: lp6ex; }
.lp6 .lp6-ex-steps li { position: relative; display: grid; grid-template-columns: 112px 1fr; column-gap: 14px; align-items: center; padding: 16px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; counter-increment: lp6ex; }
.lp6 .lp6-ex-steps li::before { content: counter(lp6ex); position: absolute; top: -12px; left: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 14px; line-height: 26px; text-align: center; }
.lp6 .lp6-ex-steps svg { display: block; width: 100%; max-width: 112px; height: auto; margin: 0; }
.lp6 .lp6-ex-steps b { display: block; margin-bottom: 4px; font-size: 16px; color: var(--ink); word-break: auto-phrase; }
.lp6 .lp6-ex-steps span { display: block; font-size: 13px; line-height: 1.6; color: var(--muted); word-break: auto-phrase; }
.lp6 .lp6-ex-note { margin-top: 18px; }
.lp6 .lp6-ex-hi { fill: var(--accent); }
.lp6 .lp6-ex-lo { fill: var(--line); }
.lp6 .lp6-ex-q rect, .lp6 .lp6-ex-q path { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }
.lp6 .lp6-ex-q text { fill: var(--accent); font: 700 14px sans-serif; text-anchor: middle; }
.lp6 .lp6-ex-page { fill: var(--surface); stroke: var(--line); stroke-width: 2; }
.lp6 .lp6-ex-bar { fill: var(--line); }
.lp6 .lp6-ex-add { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2; stroke-dasharray: 5 3; }
.lp6 .lp6-ex-pen path { fill: var(--surface); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.lp6 .lp6-ex-axis { fill: none; stroke: var(--muted); stroke-width: 2; }
.lp6 .lp6-ex-ok circle { fill: var(--accent); }
.lp6 .lp6-ex-ok path { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 720px) {
  .lp6 .lp6-ex-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .lp6 .lp6-ex-steps li { display: block; padding: 18px 18px 20px; text-align: center; }
  .lp6 .lp6-ex-steps li::before { left: 50%; transform: translateX(-50%); }
  .lp6 .lp6-ex-steps svg { max-width: 220px; margin: 6px auto 12px; }
  .lp6 .lp6-ex-steps b { font-size: 17px; }
  .lp6 .lp6-ex-steps span { font-size: 14px; }
  body.lp6 { padding-bottom: 0; }
  .lp6 .lp6-bar { position: sticky; top: 0; bottom: auto; padding: 8px 0; border-top: 0; border-bottom: 1px solid var(--line); }
  .lp6 .lp6-bar-in { justify-content: space-between; }
  .lp6 .lp6-brand { display: block; }
  .lp6 .lp6-bar .lp6-btn { width: auto; height: 44px; font-size: 14px; }
  .lp6 .lp6-bar.lp6-bar-off { transform: none; opacity: 1; pointer-events: auto; }
  .lp6 .lp6-bar.lp6-bar-off .lp6-btn { visibility: hidden; }
}

/* 動作環境と準備物(C-223・C-314): 利用条件の札の下に、小見出し「動作環境」「準備物」と小さな箇条書き。導入テストの1行は最後 */
.lp6 .lp6-env { max-width: 720px; margin: 0 auto; padding-left: 1.2em; font-size: 13px; color: var(--ink); }
.lp6 .lp6-env-h { max-width: 720px; margin: 12px auto 4px; font-size: 13px; font-weight: 700; color: var(--ink); }
.lp6 .lp6-env-other { max-width: 720px; margin: 12px auto 0; font-size: 13px; color: var(--muted); }

/* よくある質問(C-223): 問いだけ並べ、押すと答えが開く。既定は閉じる */
.lp6 .lp6-faq { max-width: 720px; margin: 0 auto; border-top: 1px solid var(--line); }
.lp6 .lp6-faq details { border-bottom: 1px solid var(--line); }
.lp6 .lp6-faq summary { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 4px; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer; list-style: none; }
.lp6 .lp6-faq summary::-webkit-details-marker { display: none; }
.lp6 .lp6-faq summary svg { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.15s; }
.lp6 .lp6-faq details[open] summary svg { transform: rotate(180deg); }
.lp6 .lp6-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lp6 .lp6-faq details p { padding: 0 4px 12px; font-size: 13px; color: var(--ink); }

/* 問い合わせのあとの流れ(C-223): 3ステップを番号つきで */
.lp6 .lp6-next { max-width: 34em; margin: 0 auto; padding-left: 1.4em; font-size: 14px; color: var(--ink); }
.lp6 .lp6-next li + li { margin-top: 4px; }

/* PC 幅(1024px 以上)の見せ方を大きく(C-267、10/12 オーナー「大胆に余白を使い、見出しや重要な点は大きく」)。文・HTML の並び・スマホの見た目は変えない。
   中身の幅 1,200px・上段は画面の高さのおよそ8割・見出し h1 64px / h2 40px・節の上下 112px・本文 17〜18px・札の丸の絵 64px・月額 48px。
   節の背景は白とごく薄い色(#f8fafc。薄い字 #6b7280 との比 4.6:1)を交互に(相談の節は前からの薄い青のまま)。
   C-267b(10/12 オーナー「本文の項目(カード内の見出し)が小さい」): h2 40px との差を縮めるため、札の見出し 24px・手順の字 22px・札の文 18px(安全は 17px)・h3 26px・箇条書き 18px */
@media (min-width: 1024px) {
  .lp6 .lp6-ex-steps b { font-size: 20px; }
  .lp6 .lp6-ex-steps span { font-size: 16px; }
  .lp6 .lp6-in { max-width: 1200px; padding: 0 40px; }
  .lp6 main { font-size: 18px; }
  .lp6 .lp6-sec { padding: 112px 0 104px; border-top: 0; }
  .lp6 main > .lp6-sec:nth-of-type(even):not(#consult) { background: #f8fafc; }
  body.lp6 h2 { font-size: 40px; font-weight: 800; line-height: 1.35; margin-bottom: 48px; }
  body.lp6 h3 { font-size: 26px; margin: 40px 0 16px; }

  /* 上段: 画面の高さのおよそ8割(上の帯を除く)。中身は上下の中央 */
  .lp6 .lp6-hero { display: flex; flex-direction: column; justify-content: center; min-height: calc(80vh - 65px); padding: 120px 0 96px; }
  body.lp6 h1 { font-size: 64px; line-height: 1.25; letter-spacing: 0.01em; }
  .lp6 .lp6-kicker { font-size: 18px; margin-bottom: 20px; }
  /* 見出し・説明・札の大きさと間隔の比はスマホ(30px・16px・14px、間 20px)と同じ(10/19 オーナー 16:08) */
  .lp6 .lp6-lead { margin-top: 40px; font-size: 34px; }
  .lp6 .lp6-hero-note { margin-top: 40px; padding: 13px 30px; font-size: 30px; }
  .lp6 .lp6-badge { gap: 14px; margin-top: 36px; padding: 16px 32px; border-width: 3px; font-size: 24px; }
  .lp6 .lp6-badge .lp6-icon { width: 36px; height: 36px; }
  .lp6 .lp6-badge-note { margin-top: 12px; font-size: 15px; }

  /* ボタン: 高さはスマホと同じ 64px のまま(目安の 56px より前から高い)、幅と文字を大きく */
  .lp6 .lp6-btns { margin-top: 40px; }
  .lp6 .lp6-btn { max-width: 420px; font-size: 19px; }
  .lp6 .lp6-cta-sub { margin-top: 12px; font-size: 15px; }
  .lp6 .lp6-bar .lp6-btn { height: 48px; padding: 0 24px; font-size: 16px; }
  .lp6 .lp6-brand { font-size: 18px; }
  .lp6 .lp6-small { font-size: 15px; }

  /* こう変わる: 6つの手順の札を大きく */
  .lp6 .lp6-steps { gap: 14px; }
  .lp6 .lp6-steps li { gap: 6px; padding: 20px 8px; border-radius: 12px; }
  .lp6 .lp6-steps li::before { font-size: 14px; }
  .lp6 .lp6-steps b { font-size: 22px; }
  .lp6 .lp6-steps .lp6-icon { width: 48px; height: 48px; margin: 4px auto; }
  .lp6 .lp6-who { font-size: 17px; }
  .lp6 .lp6-legend { margin-top: 20px; gap: 6px 10px; font-size: 15px; }
  .lp6 .lp6-key { width: 16px; height: 16px; }

  /* 回答のルール */
  .lp6 .lp6-points { gap: 24px; }
  .lp6 .lp6-point { column-gap: 18px; padding: 28px; border-radius: 16px; }
  .lp6 .lp6-point b { font-size: 24px; line-height: 1.4; }
  .lp6 .lp6-point p { margin-top: 14px; font-size: 18px; line-height: 1.75; }
  .lp6 .lp6-qicon { width: 64px; height: 64px; }
  .lp6 .lp6-qicon svg { width: 36px; height: 36px; }

  /* 利用条件・安全 */
  .lp6 .lp6-terms { gap: 16px; }
  .lp6 .lp6-terms li { padding: 26px 16px; border-radius: 14px; font-size: 24px; }
  .lp6 .lp6-terms-icon .lp6-icon { width: 40px; height: 40px; margin-bottom: 8px; }
  .lp6 .lp6-icon { width: 40px; height: 40px; margin-bottom: 10px; }
  /* 安全の札(C-267b): 1段3枚の折り返し。C-314 で5枚になり、上3枚・下2枚(下の段は中央に寄せる)。v6 は C-316 で4枚になり、2列×2段(lp6-safe4)。
     置き場所を指定しない折り返しなので、見た目の順は DOM の順のまま。絵 48px・見出し 24px・文 17px で、文の色は薄い色から本文に近い濃さ(#334155)に */
  .lp6 .lp6-safe { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; }
  .lp6 .lp6-safe div { flex: 0 0 calc((100% - 48px) / 3); box-sizing: border-box; padding: 32px 28px; border-radius: 16px; }
  .lp6 .lp6-safe4 div { flex-basis: calc((100% - 24px) / 2); }
  .lp6 .lp6-safe .lp6-icon { width: 48px; height: 48px; margin-bottom: 14px; }
  .lp6 .lp6-safe b { margin-bottom: 10px; font-size: 24px; line-height: 1.4; }
  .lp6 .lp6-safe span { font-size: 17px; line-height: 1.75; color: #334155; }
  .lp6 .lp6-env { max-width: 860px; font-size: 18px; }
  .lp6 .lp6-env-h { max-width: 860px; margin-top: 24px; font-size: 18px; }
  .lp6 .lp6-env-other { max-width: 860px; margin-top: 20px; font-size: 18px; }

  /* 料金: 月額をいちばん目に入る大きさに。4列でもいちばん長い月額(price.plans.2)が1行に収まる 36px(枚の中 約222px) */
  .lp6 .lp6-price-lead { margin: -24px 0 32px; font-size: 20px; }
  .lp6 .lp6-plans { max-width: 1120px; gap: 24px; }
  .lp6 .lp6-plan { padding: 32px 20px; border-radius: 16px; }
  .lp6 .lp6-plan-name { font-size: 22px; }
  .lp6 .lp6-plan-monthly { margin-top: 12px; font-size: 36px; }
  .lp6 .lp6-plan-initial { font-size: 17px; }
  .lp6 .lp6-plans + .lp6-small { margin-top: 20px; }
  .lp6 .lp6-price-more { max-width: 960px; margin-top: 8px; }
  .lp6 .lp6-inc { max-width: 960px; margin-top: 28px; }
  .lp6 .lp6-inc-title { font-size: 15px; }
  .lp6 .lp6-plan-inc { gap: 6px 24px; margin-top: 8px; font-size: 17px; }

  /* 問い合わせの3つの分け方 */
  .lp6 .lp6-cl-cols { gap: 24px; }
  .lp6 .lp6-cl { padding: 24px; }
  .lp6 .lp6-cl-h { font-size: 24px; }
  .lp6 .lp6-cl-ex, .lp6 .lp6-cl-act { font-size: 17px; }

  /* よくある質問・問い合わせ */
  .lp6 .lp6-faq { max-width: 880px; }
  .lp6 .lp6-faq summary { gap: 16px; padding: 22px 8px; font-size: 19px; }
  .lp6 .lp6-faq summary svg { width: 22px; height: 22px; }
  .lp6 .lp6-faq details p { padding: 0 8px 22px; font-size: 17px; line-height: 1.75; }
  .lp6 .lp6-consult-lead { font-size: 19px; }
  .lp6 .lp6-consult-badge { font-size: 16px; padding: 4px 16px; margin-bottom: 14px; }
  .lp6 .lp6-next { font-size: 18px; }
  .lp6 .lp6-next li + li { margin-top: 8px; }
}
