/* /lp v8(ネットショップ向けの版)の下書き(連絡板 10/20 12:55 参謀)の見た目。lp6.css の上に重ねる(lp-v8.html だけが読む。枝 lp-v8 だけ。配置しない)。
   v6 から形が変わった所(こんな方におすすめの札・全体の流れのリードと下の2枠・料金の1枠と中の含まれるもの・使うために必要なもの・ボタンの直前の1行)と、改善レポートのリード・絵の部品だけを書く。375px で横にはみ出さない */

/* こんな方におすすめ(10/20 14:20): 札 = 人のアイコン + 題 + 「いま」 + 「このサービスで」(薄い青の帯)。色の上線はなし。並べ方は v6 の lp6-cl-cols(スマホ縦、720px 以上で3列) */
.lp8 .lp8-rec { display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.lp8 .lp8-rec-icon { display: block; width: 56px; height: 56px; margin: 0 0 8px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lp8 .lp8-rec-h { margin: 0 0 10px; font-size: 19px; font-weight: 800; line-height: 1.4; color: var(--ink); word-break: auto-phrase; }
.lp8 .lp8-rec-now { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.lp8 .lp8-rec-svc { margin: auto 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(29, 78, 216, 0.08); font-size: 15px; font-weight: 700; line-height: 1.55; color: var(--ink); }
.lp8 .lp8-rec-tag { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted); }
.lp8 .lp8-rec-svc .lp8-rec-tag { color: var(--accent); }

/* ボタンの直前の小さな1行(一番下の相談の節だけ。10/20 22:15) */
.lp8 .lp8-cta-sub { max-width: 30em; margin: 18px auto 0; font-size: 13px; line-height: 1.6; color: var(--muted); text-align: center; text-wrap: balance; }

/* 使うために必要なもの(10/20 22:15): 札は回答のルールの lp6-points・lp6-point のまま。スマホは縦1列、720px 以上は横に3列 */
.lp8 .lp8-need { grid-template-columns: 1fr; }
@media (min-width: 720px) { .lp8 .lp8-need { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 改善レポートの絵の部品(10/20 14:20): ②の「＋」と小さな店の屋根 */
.lp8 .lp6-ex-plus circle { fill: var(--accent); }
.lp8 .lp6-ex-plus path { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; }
.lp8 .lp6-ex-shop path { fill: var(--surface); stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; }

/* 全体の流れのリード・改善レポートのリード: 見出しのすぐ下に中央寄せの1文(v6 の 3つの分け方のリードと同じ形) */
.lp8 .lp8-flow-lead, .lp8 .lp8-ex-lead { max-width: 34em; margin: -8px auto 22px; text-align: center; color: var(--muted); text-wrap: balance; }

/* 6つの箱の下の2枠: AI=凡例の黄、店主の方=白。スマホは縦、720px 以上は横に2列 */
.lp8 .lp8-boxes { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 22px; }
@media (min-width: 720px) { .lp8 .lp8-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp8 .lp8-box { padding: 16px 18px; border-radius: var(--radius); overflow-wrap: anywhere; }
.lp8 .lp8-box-ai { background: color-mix(in srgb, var(--hi) 30%, var(--surface)); border: 1px solid var(--hi); color: var(--hi-ink); }
.lp8 .lp8-box-person { background: var(--surface); border: 1px solid var(--line-2); color: var(--ink); }
.lp8 .lp8-box-h { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--ink); }
.lp8 .lp8-box ul { margin: 0; padding: 0; list-style: none; }
.lp8 .lp8-box li { position: relative; padding-left: 18px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.lp8 .lp8-box li + li { margin-top: 6px; }
.lp8 .lp8-box li::before { content: ""; position: absolute; left: 3px; top: 0.6em; width: 8px; height: 4px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

/* 料金の1枠: 月額を大きく、その下に条件と超えるときの1行。狭いときは句点でだけ折り返す(C-325 と同じ keep-all) */
.lp8 .lp8-plan { max-width: 520px; margin: 0 auto; padding: 22px 18px; border: 2px solid var(--accent); border-radius: 14px; background: var(--surface); text-align: center; word-break: keep-all; overflow-wrap: anywhere; }
.lp8 .lp8-plan-monthly { font-size: 30px; font-weight: 900; line-height: 1.2; color: var(--accent); font-variant-numeric: tabular-nums; }
.lp8 .lp8-plan-terms { margin-top: 10px; font-size: 15px; font-weight: 700; color: var(--ink); }
.lp8 .lp8-plan-more { margin-top: 8px; font-size: 13px; color: var(--muted); }
/* 月額に含まれるもの(10/20 22:15): 価格の下の線の下に、左そろえのチェックの箇条。720px 以上は2列 */
.lp8 .lp8-plan-inc { display: grid; grid-template-columns: 1fr; gap: 6px 20px; margin: 16px 0 14px; padding: 16px 0 0; border-top: 1px solid var(--line-2); list-style: none; text-align: left; word-break: normal; }
@media (min-width: 720px) { .lp8 .lp8-plan { max-width: 600px; } .lp8 .lp8-plan-inc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp8 .lp8-plan-inc li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.6; color: var(--ink); }
.lp8 .lp8-plan-inc li::before { content: ""; position: absolute; left: 4px; top: 0.5em; width: 9px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }

@media (min-width: 1024px) {
  .lp8 .lp8-rec { padding: 24px; }
  .lp8 .lp8-rec-icon { width: 72px; height: 72px; }
  .lp8 .lp8-rec-h { font-size: 23px; }
  .lp8 .lp8-rec-now, .lp8 .lp8-rec-svc { font-size: 17px; }
  .lp8 .lp8-rec-tag { font-size: 13px; }
  .lp8 .lp8-cta-sub { margin-top: 18px; font-size: 16px; }
  .lp8 .lp8-flow-lead, .lp8 .lp8-ex-lead { margin: -24px auto 40px; font-size: 20px; }
  .lp8 .lp8-boxes { gap: 24px; margin-top: 36px; }
  .lp8 .lp8-box { padding: 28px; border-radius: 16px; }
  .lp8 .lp8-box-h { margin-bottom: 14px; font-size: 22px; }
  .lp8 .lp8-box li { font-size: 17px; line-height: 1.75; }
  .lp8 .lp8-box li + li { margin-top: 10px; }
  .lp8 .lp8-plan { max-width: 760px; padding: 40px 32px; border-radius: 16px; }
  .lp8 .lp8-plan-monthly { font-size: 48px; }
  .lp8 .lp8-plan-terms { margin-top: 16px; font-size: 20px; }
  .lp8 .lp8-plan-more { margin-top: 12px; font-size: 16px; }
  .lp8 .lp8-plan-inc { gap: 10px 32px; margin: 28px 0 20px; padding-top: 28px; }
  .lp8 .lp8-plan-inc li { padding-left: 26px; font-size: 18px; }
}
/* /lp/tokushoho(特定商取引法に基づく表記、10/21)の表: 2列(項目 / 内容)。スマホ幅では項目の下に内容を縦に並べる */
.lp8-legal-table { width: 100%; margin-top: 24px; border-collapse: collapse; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.8; }
.lp8-legal-table th, .lp8-legal-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.lp8-legal-table th { width: 30%; font-weight: 700; }
@media (max-width: 560px) { .lp8-legal-table th, .lp8-legal-table td { display: block; width: auto; } .lp8-legal-table th { padding-bottom: 0; border-bottom: none; } }
/* 料金の節の申込みのボタン(10/21。BILLING_SIGNUP のときだけ描く) */
.lp8 .lp8-signup { margin-top: 20px; text-align: center; }
.lp8 .lp8-signup-note { margin-top: 8px; font-size: 13px; color: var(--muted); text-align: center; }
/* お届けするものの見本(連絡板 10/21 19:55 B): 札3枚。スマホは縦1列、720px 以上は横に3列。吹き出しは お客様=灰・下書き=薄い青。375px で横にはみ出さない */
.lp8 .lp8-samples { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .lp8 .lp8-samples { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.lp8 .lp8-sm { display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); overflow-wrap: anywhere; }
.lp8 .lp8-sm p { margin: 0; }
.lp8 .lp8-sm-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--accent); }
.lp8 .lp8-sm-shop { font-size: 15px; font-weight: 800; color: var(--ink); }
.lp8 .lp8-sm-msg { padding: 10px 12px; border-radius: 12px; font-size: 14px; line-height: 1.65; color: var(--ink); }
.lp8 .lp8-sm-in { margin-right: 18px; background: #f1f3f6; border-top-left-radius: 4px; }
.lp8 .lp8-sm-out { margin-left: 18px; background: rgba(29, 78, 216, 0.08); border-top-right-radius: 4px; }
.lp8 .lp8-sm-who { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lp8 .lp8-sm-basis { font-size: 12px; color: var(--muted); }
/* 4枚目「夜のあいだの自動の返事」(連絡板 10/22 6:05 Q5): スマホは3枚の下に縦に続け、720px 以上は3枚の下に横いっぱい */
@media (min-width: 720px) { .lp8 .lp8-sm-night { grid-column: 1 / -1; } }
.lp8 .lp8-sm-alert { padding: 12px; border: 1px solid var(--hi); border-radius: 12px; background: color-mix(in srgb, var(--hi) 22%, var(--surface)); font-size: 14px; line-height: 1.65; color: var(--ink); }
.lp8 .lp8-sm-alert .lp6-icon { width: 22px; height: 22px; margin-bottom: 4px; }
.lp8 .lp8-sm-alert p + p { margin-top: 4px; }
.lp8 .lp8-sm-total { font-size: 18px; font-weight: 800; color: var(--ink); }
.lp8 .lp8-sm-h { font-size: 13px; font-weight: 700; color: var(--muted); }
.lp8 .lp8-sm-top { margin: 0; padding: 0; list-style: none; counter-reset: top; }
.lp8 .lp8-sm-top li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink); counter-increment: top; }
.lp8 .lp8-sm-top li span::before { content: counter(top) ". "; color: var(--muted); }
.lp8 .lp8-sm-top li b { flex: none; font-variant-numeric: tabular-nums; }
.lp8 .lp8-sm-fix { font-size: 14px; line-height: 1.6; color: var(--ink); }
.lp8 .lp8-sm-quote { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; padding: 10px 12px; border-left: 3px solid var(--accent); border-radius: 4px; background: #f8fafc; font-size: 14px; font-weight: 700; line-height: 1.6; color: var(--ink); }
.lp8 .lp8-sm-copy { flex: none; padding: 2px 8px; border: 1px solid var(--accent); border-radius: 6px; font-size: 12px; font-weight: 700; color: var(--accent); background: var(--surface); }
.lp8 .lp8-sm-note { margin-top: 14px; font-size: 12px; color: var(--muted); text-align: center; }

/* 届く下書きと月1回の報告の見本(連絡板 10/26 6:50): 札2枚。スマホは縦1列、720px 以上は横に2列。札の中は見本の節(lp8-sm)の部品のまま。メールと下書きは改行をそのまま見せ、トップ5の原因は項目の下に小さく */
.lp8 .lp8-sc-lead { max-width: 34em; margin: -8px auto 22px; text-align: center; color: var(--muted); text-wrap: balance; }
.lp8 .lp8-sc { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 720px) { .lp8 .lp8-sc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lp8 .lp8-sc-text { white-space: pre-line; }
.lp8 .lp8-sc-top small { display: block; margin-top: 2px; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* 運営者の一言(連絡板 10/21 19:55 C): 名前と2文。中央に1枠 */
.lp8 .lp8-op { max-width: 600px; margin: 0 auto; padding: 20px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-wrap: anywhere; }
.lp8 .lp8-op blockquote { margin: 0; font-size: 15px; line-height: 1.8; color: var(--ink); }
.lp8 .lp8-op blockquote p + p { margin-top: 8px; }
.lp8 .lp8-op figcaption { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--muted); text-align: right; }

@media (min-width: 1024px) {
  .lp8 .lp8-samples, .lp8 .lp8-sc { gap: 24px; }
  .lp8 .lp8-sc-top small { font-size: 14px; }
  .lp8 .lp8-sm { gap: 12px; padding: 24px; border-radius: 16px; }
  .lp8 .lp8-sm-tag { font-size: 13px; }
  .lp8 .lp8-sm-shop, .lp8 .lp8-sm-total { font-size: 20px; }
  .lp8 .lp8-sm-msg, .lp8 .lp8-sm-alert, .lp8 .lp8-sm-top li, .lp8 .lp8-sm-fix, .lp8 .lp8-sm-quote { font-size: 16px; }
  .lp8 .lp8-sm-note { margin-top: 24px; font-size: 15px; }
  .lp8 .lp8-op { max-width: 760px; padding: 32px; border-radius: 16px; }
  .lp8 .lp8-op blockquote { font-size: 18px; }
  .lp8 .lp8-op figcaption { font-size: 16px; }
}
/* /lp/setup(初期設定の手順、連絡板 10/21 19:55 A): 規約のページと同じ枠(.wrap.legal-page)に、手順の番号・絵・注を足す。絵は Gmail の画面を単純に描いた SVG(矢印は橙)。375px で横にはみ出さない */
.lp8-setup { --f-ink: #15213a; --f-line: #d6dae2; --f-frame: #b8bfcc; --f-hi: #1d4ed8; --f-arrow: #c2410c; }
.lp8-setup .lp8-setup-lead { margin-top: 12px; font-size: 16px; line-height: 1.8; }
.lp8-setup h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.5; }
.lp8-setup h3 { margin-top: 24px; font-size: 16px; }
.lp8-setup p, .lp8-setup li, .lp8-setup dd { line-height: 1.8; overflow-wrap: anywhere; }
.lp8-setup .lp8-setup-need ul, .lp8-setup .lp8-setup-notes { margin: 10px 0 0; padding-left: 1.3em; }
.lp8-setup .lp8-setup-notes { font-size: 14px; color: var(--muted); }
.lp8-setup .lp8-setup-steps { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: step; }
.lp8-setup .lp8-setup-steps > li { position: relative; margin-top: 20px; padding-left: 40px; counter-increment: step; }
.lp8-setup .lp8-setup-steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--f-hi); color: #fff; font-weight: 800; line-height: 28px; text-align: center; }
.lp8-setup .lp8-fig { display: block; width: 100%; max-width: 360px; height: auto; margin-bottom: 8px; }
.lp8-setup .lp8-fig .f-win { fill: #fff; stroke: var(--f-frame); stroke-width: 1.5; }
.lp8-setup .lp8-fig .f-bar { fill: #eef1f5; }
.lp8-setup .lp8-fig .f-line { fill: var(--f-line); }
.lp8-setup .lp8-fig .f-sep { stroke: var(--f-line); stroke-width: 1.5; }
.lp8-setup .lp8-fig .f-dot { fill: var(--f-ink); }
.lp8-setup .lp8-fig .f-gear { fill: none; stroke: var(--f-ink); stroke-width: 3; stroke-dasharray: 3 2; }
.lp8-setup .lp8-fig .f-slider { stroke: var(--f-ink); stroke-width: 2; stroke-linecap: round; }
.lp8-setup .lp8-fig .f-hi { fill: rgba(29, 78, 216, 0.1); stroke: var(--f-hi); stroke-width: 2; }
.lp8-setup .lp8-fig .f-check { fill: var(--f-hi); }
.lp8-setup .lp8-fig .f-tick { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lp8-setup .lp8-fig .f-txt { font-size: 12px; font-weight: 700; fill: var(--f-ink); }
.lp8-setup .lp8-fig .f-muted { font-weight: 400; fill: #6b7280; }
.lp8-setup .lp8-fig .f-arrow { fill: none; stroke: var(--f-arrow); stroke-width: 4; stroke-linecap: round; }
.lp8-setup .lp8-fig .f-head { fill: var(--f-arrow); }
.lp8-setup .lp8-setup-table th[scope="col"] { background: #f1f3f6; }
.lp8-setup .lp8-setup-admin dt { margin-top: 12px; font-weight: 800; }
.lp8-setup .lp8-setup-admin dd { margin: 4px 0 0; }
/* 連絡板 10/22 6:05 Q4: スマホで指で押す所(戻るのリンク・下のリンク)は高さ 44px 以上。規約のページ(lp.css)は変えず、手順書の中だけ */
.lp8-setup .legal-back a, .lp8-setup .lp-legal a { display: inline-flex; align-items: center; min-height: 44px; }
/* /houjin(法人向けの紹介ページ、連絡板 10/28 13:50): 規約のページと同じ枠(.wrap.legal-page)に、分類の1行・できること3枚・箇条を足す。画像は使わない。375px で横にはみ出さない */
.lp8-houjin .lp8-houjin-eyebrow { margin: 0 0 8px; color: var(--accent); font-size: 14px; font-weight: 800; }
.lp8-houjin .lp8-houjin-lead { margin-top: 12px; font-size: 16px; line-height: 1.8; }
.lp8-houjin h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.5; }
.lp8-houjin p, .lp8-houjin li { line-height: 1.8; overflow-wrap: anywhere; }
.lp8-houjin .lp8-houjin-features { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.lp8-houjin .lp8-houjin-features > li { padding: 16px; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--accent-soft); }
.lp8-houjin .lp8-houjin-features h2 { margin-bottom: 6px; font-size: 17px; }
.lp8-houjin .lp8-houjin-features p { margin: 0; }
.lp8-houjin .lp8-houjin-list { margin: 0; padding-left: 1.3em; }
.lp8-houjin .lp8-houjin-list > li + li { margin-top: 6px; }
.lp8-houjin .lp8-houjin-operator p { margin: 0 0 4px; }
.lp8-houjin .lp8-houjin-operator a, .lp8-houjin .lp-legal a { display: inline-flex; align-items: center; min-height: 44px; }
@media (min-width: 768px) { .lp8-houjin .lp8-houjin-features { grid-template-columns: repeat(3, 1fr); } }