/* 2026-10-26 LP：区画ごとに背景を切り替え、英字バッジ・アイコン・画面イメージで読み進めやすくする。
   色はStyleToruの紺と水色。public-cv.css の後に読み込み、LP（body.public-lp）だけに効かせる。 */
.public-lp {
  --lp-dark: #0E2B39;
  --lp-dark-card: #16394A;
  --lp-on-dark: #FFFFFF;
  --lp-on-dark-2: #C9D6DD;
  --lp-accent: #12BFC7;
  --lp-accent-hover: #3FD0D7;
  --lp-accent-on-dark: #7FE3E8;
  --lp-accent-ink: #0B1A1E;
  --lp-tint: #EAF7F8;
  --lp-navy-tint: #EEF3F6;
  --lp-card-line: #D2E2E7;
}

/* 帯：画面の端まで背景色を伸ばす（中身の幅は1080pxのまま） */
.public-lp .lp-band.lp-band { background: var(--band, #FFFFFF); box-shadow: 0 0 0 100vmax var(--band, #FFFFFF); clip-path: inset(0 -100vmax); }
.public-lp .lp-white { --band: #FFFFFF; }
.public-lp .lp-tint { --band: var(--lp-tint); }
.public-lp .lp-navy-tint { --band: var(--lp-navy-tint); }
.public-lp .lp-dark { --band: var(--lp-dark); color: var(--lp-on-dark); }
.public-lp .lp-dark :is(h1,h2,h3,strong) { color: var(--lp-on-dark); }
.public-lp .lp-dark :is(p,li,span,small) { color: var(--lp-on-dark-2); }
.public-lp em { font-style: normal; color: var(--teal-700); }
.public-lp .lp-dark em { color: var(--lp-accent-on-dark); }
.public-lp .lp-center { text-align: center; }

/* ヘッダーは白い帯 */
.public-lp .public-header { background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax); }

/* 見出し：中央・英字バッジ・強調語 */
.public-lp .lp-heading { text-align: center; max-width: 760px; margin: 0 auto 40px; }
.public-lp .lp-heading h2 { margin: 16px 0 0; font-size: 32px; line-height: 1.5; }
.public-lp .lp-sub { margin: 16px auto 0; max-width: 640px; color: var(--text-2); font-size: 16px; }
.public-lp .lp-dark .lp-sub { color: var(--lp-on-dark-2); }
.public-lp .lp-badge { display: inline-block; padding: 4px 14px; border-radius: 999px; background: var(--lp-tint); color: var(--teal-700); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.public-lp .lp-tint .lp-badge, .public-lp .lp-navy-tint .lp-badge { background: #FFFFFF; }
.public-lp .lp-dark .lp-badge { background: rgba(127,227,232,.14); color: var(--lp-accent-on-dark); }
.public-lp .lp-pill { display: inline-block; margin: 0 0 20px; padding: 6px 16px; border: 1px solid rgba(255,255,255,.32); border-radius: 999px; color: var(--lp-on-dark-2); font-size: 13px; letter-spacing: .04em; }

/* アイコン */
.public-lp .lp-icon-wrap { display: inline-grid; place-items: center; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 16px; background: var(--lp-tint); color: var(--teal-700); }
.public-lp .lp-icon-wrap svg { width: 26px; height: 26px; }
.public-lp .lp-dark .lp-icon-wrap { background: rgba(255,255,255,.08); color: var(--lp-accent-on-dark); }
.public-lp .lp-check { display: inline-grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: var(--lp-tint); color: var(--teal-700); }
.public-lp .lp-check svg { width: 16px; height: 16px; }
.public-lp .lp-num { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--navy); color: #FFFFFF; font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.public-lp .lp-dark .lp-num { background: var(--lp-accent); color: var(--lp-accent-ink); }

/* 主ボタン：濃い帯では水色で目立たせる */
.public-lp .lp-dark .primary { background: var(--lp-accent); border-color: var(--lp-accent); color: var(--lp-accent-ink); }
.public-lp .lp-dark .primary:not(:disabled):is(:hover,:active) { background: var(--lp-accent-hover); border-color: var(--lp-accent-hover); color: var(--lp-accent-ink); }
.public-lp .lp-dark .primary span, .public-lp .lp-dark .primary * { color: var(--lp-accent-ink); }
.public-lp .lp-dark .secondary { background: transparent; border-color: rgba(255,255,255,.72); color: #FFFFFF; }
.public-lp .lp-dark .secondary span { color: #FFFFFF; }
.public-lp .lp-dark .public-text-link { color: var(--lp-accent-on-dark); }

/* ヒーロー */
.public-lp .public-intro.lp-band { padding-block: 56px 64px; }
.public-lp .public-intro h1 { color: #FFFFFF; }
.public-lp .public-intro .public-lead { color: var(--lp-on-dark-2); }
.public-lp .public-intro .public-trial-note { color: var(--lp-on-dark-2); }
.public-lp .public-intro .public-material-card, .public-lp .public-start .public-material-card { background: #FFFFFF; border-color: #FFFFFF; }
.public-lp .public-material-card :is(strong) { color: var(--navy); }
.public-lp .public-material-card small { color: var(--text-2); }
.public-lp .public-material-card .public-offer-tag, .public-lp .public-material-card .public-offer-tag span { color: var(--teal-700); }
.public-lp .public-material-card small:not(.public-offer-tag) { color: var(--text-2); }
.public-lp .public-material-card .public-material-arrow, .public-lp .public-material-card svg { color: var(--navy); }
.public-lp .public-hero-frame { box-shadow: 0 24px 48px rgba(0,0,0,.35); background: var(--lp-dark-card); }
.public-lp .hero-thumbnail { border-color: #FFFFFF; box-shadow: 0 12px 24px rgba(0,0,0,.35); }
.public-lp .hero-thumbnail span { color: var(--navy); }

/* 信頼の帯：チェック付きの4項目 */
.public-lp .public-trust.lp-band { padding-block: 24px; gap: 12px; }
.public-lp .public-trust p, .public-lp .public-trust a { gap: 10px; padding: 16px; background: #FFFFFF; border: 1px solid var(--lp-card-line); border-radius: 12px; color: var(--navy); }

/* 作例 */
.public-lp .public-example { box-shadow: var(--shadow-2); }

/* なぜ写真か：番号付きの3段 */
.public-lp .lp-funnel { gap: 40px; margin: 0; }
.public-lp .lp-funnel li { display: grid; justify-items: center; gap: 12px; padding: 36px 20px 28px; background: #FFFFFF; border: 1px solid var(--lp-card-line); border-radius: 18px; text-align: center; font-weight: 400; }
.public-lp .lp-funnel li .lp-num { position: absolute; top: -16px; left: calc(50% - 16px); }
.public-lp .lp-funnel li strong { font-size: 18px; color: var(--navy); }
.public-lp .lp-funnel li > span:last-child { color: var(--text-2); font-size: 15px; }
.public-lp .lp-funnel li:not(:last-child)::after { content: "→"; right: -30px; top: calc(50% - 14px); font-size: 18px; color: var(--teal-700); }
.public-lp .lp-funnel .lp-funnel-goal { background: var(--navy); border-color: var(--navy); }
.public-lp .lp-funnel .lp-funnel-goal strong { color: #FFFFFF; }
.public-lp .lp-funnel .lp-funnel-goal > span:last-child { color: var(--lp-on-dark-2); }
.public-lp .lp-funnel .lp-funnel-goal .lp-icon-wrap { background: rgba(255,255,255,.1); color: var(--lp-accent-on-dark); }
.public-lp .lp-funnel .lp-funnel-goal .lp-num { background: var(--lp-accent); color: var(--lp-accent-ink); }

/* お悩み：アイコンと左の色線 */
.public-lp .lp-problem-grid .public-card, .public-lp .lp-safety-grid .public-card { display: grid; align-content: start; gap: 12px; padding: 28px 24px; border: 1px solid var(--lp-card-line); border-left: 4px solid var(--teal-700); border-radius: 16px; box-shadow: none; }
.public-lp .lp-safety-grid .public-card { border-left-color: var(--navy); }
.public-lp .lp-problem-grid h3, .public-lp .lp-safety-grid h3 { margin: 4px 0 0; }
.public-lp .lp-problem-grid p, .public-lp .lp-safety-grid p { margin: 0; }

/* できること：アイコン・本文・タグの縦並びカード */
.public-lp .lp-feature-list { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.public-lp .lp-feature { display: flex; align-items: flex-start; gap: 20px; padding: 24px 28px; background: #FFFFFF; border: 1px solid var(--lp-card-line); border-radius: 18px; box-shadow: var(--shadow-1); }
.public-lp .lp-feature:first-child { border-color: var(--teal-700); }
.public-lp .lp-feature h3 { margin: 0 0 6px; font-size: 18px; }
.public-lp .lp-feature p { margin: 0; color: var(--text-2); font-size: 15px; }
.public-lp .lp-tag { display: inline-block; margin-top: 12px; padding: 3px 12px; border-radius: 999px; background: var(--lp-tint); color: var(--teal-700); font-size: 12px; font-weight: 700; }
.public-lp .lp-feature-list + .public-footnote { margin-top: 24px; }

/* 使い方：番号・説明・スマホ画面のイメージを並べる */
.public-lp .lp-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin: 0; padding: 0; list-style: none; }
.public-lp .lp-step { display: grid; justify-items: center; gap: 20px; padding: 28px 20px; background: var(--lp-dark-card); border: 1px solid rgba(255,255,255,.1); border-radius: 20px; }
.public-lp .lp-step-copy { display: grid; justify-items: center; gap: 10px; text-align: center; }
.public-lp .lp-step-copy h3 { margin: 0; font-size: 18px; }
.public-lp .lp-step-copy p { margin: 0; font-size: 15px; }
.public-lp .lp-phone { --w: 184px; --h: 340px; width: var(--w); padding: 8px; border-radius: 28px; background: #08202B; border: 1px solid rgba(255,255,255,.2); box-shadow: 0 16px 32px rgba(0,0,0,.35); }
.public-lp .lp-phone-screen { display: flex; flex-direction: column; gap: 8px; height: var(--h); padding: 12px 10px; border-radius: 20px; background: #F5F7F8; overflow: hidden; }
.public-lp .lp-dark .lp-phone-screen :is(p,span,strong) { color: var(--navy); }
.public-lp .lp-phone-title { margin: 0; font-size: 13px; font-weight: 700; }
.public-lp .lp-phone-photo { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 10px; overflow: hidden; background: linear-gradient(160deg,#D5E1E6,#AFC1CA); }
.public-lp .lp-phone-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-lp .lp-dark .lp-phone-screen .lp-phone-button { display: block; padding: 8px 6px; border-radius: 8px; background: var(--navy); color: #FFFFFF; font-size: 12px; font-weight: 700; text-align: center; }
.public-lp .lp-dark .lp-phone-screen .lp-phone-button-light { background: #FFFFFF; color: var(--navy); border: 1px solid var(--control-border); }
.public-lp .lp-phone-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 6px; }
.public-lp .lp-phone-notice { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 10px; background: #FFFFFF; box-shadow: var(--shadow-1); }
.public-lp .lp-phone-notice div:last-child { display: grid; min-width: 0; }
.public-lp .lp-dark .lp-phone-notice strong { font-size: 12px; line-height: 1.5; }
.public-lp .lp-dark .lp-phone-notice span { color: var(--text-3); font-size: 12px; line-height: 1.5; }
.public-lp .lp-phone-notice-muted { opacity: .55; }
.public-lp .lp-phone-thumb { position: relative; flex: 0 0 44px; height: 58px; border-radius: 6px; overflow: hidden; background: linear-gradient(160deg,#D5E1E6,#AFC1CA); }
.public-lp .lp-phone-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.public-lp .lp-mock-note { margin: 16px 0 0; text-align: center; font-size: 13px; }

/* StylePilotと一緒に */
.public-lp .lp-pilot-flow { display: flex; justify-content: center; align-items: stretch; gap: 12px; margin: 0 auto 32px; }
.public-lp .lp-flow-chip { display: grid; justify-items: center; align-content: center; gap: 6px; min-width: 0; padding: 14px 20px; background: #FFFFFF; border: 1px solid var(--lp-card-line); border-radius: 16px; }
.public-lp .lp-flow-chip img { width: auto; height: 30px; }
.public-lp .lp-flow-chip small { color: var(--text-2); font-size: 13px; }
.public-lp .lp-flow-chip-main { border: 2px solid var(--teal-700); }
.public-lp .lp-flow-arrow { align-self: center; color: var(--teal-700); font-size: 26px; font-weight: 700; }
.public-lp .lp-pilot-about { display: grid; align-content: start; gap: 12px; padding: 28px; border: 1px solid var(--lp-card-line); box-shadow: none; }
.public-lp .lp-pilot-about .public-pilot-logo { margin: 0; }
.public-lp .lp-pilot-about p { margin: 0; }
.public-lp .lp-card-label { color: var(--teal-700); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.public-lp .lp-checklist { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.public-lp .lp-checklist li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-2); font-size: 15px; }
.public-lp .lp-pilot-points { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.public-lp .lp-pilot-points li { display: flex; align-items: flex-start; gap: 14px; padding: 18px; background: #FFFFFF; border: 1px solid var(--lp-card-line); border-radius: 16px; }
.public-lp .lp-pilot-points .lp-icon-wrap { width: 44px; height: 44px; border-radius: 12px; }
.public-lp .lp-pilot-points .lp-icon-wrap svg { width: 22px; height: 22px; }
.public-lp .lp-pilot-points strong { display: block; color: var(--navy); font-size: 15px; line-height: 1.6; }
.public-lp .lp-pilot-points span:not(.lp-icon-wrap) { display: block; margin-top: 4px; color: var(--text-2); font-size: 13px; }
.public-lp .lp-pilot-report { display: flex; align-items: center; gap: 10px; margin: 20px 0 0; color: var(--text-2); font-size: 15px; }
.public-lp .lp-actions-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 20px; }
.public-lp .lp-actions-row .primary { margin: 0; }

/* 料金：おすすめを強調 */
.public-lp .public-plan-grid { gap: 20px; margin-top: 36px; }
.public-lp .plan-card { position: relative; border: 1px solid var(--lp-card-line); box-shadow: none; }
.public-lp .plan-card.lp-recommended { border: 2px solid var(--teal-700); box-shadow: var(--shadow-2); }
.public-lp .lp-plan-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; background: var(--teal-700); color: #FFFFFF; font-size: 13px; font-weight: 700; white-space: nowrap; }
.public-lp .public-one-time .public-card { border: 1px solid var(--lp-card-line); box-shadow: none; }
.public-lp .lp-links-row { display: flex; flex-wrap: wrap; gap: 4px 24px; margin: 8px 0 0; }

/* よくある質問：Q. と開閉の印 */
.public-lp .public-faq-list { max-width: 860px; margin: 0 auto; border: 1px solid var(--lp-card-line); box-shadow: none; }
.public-lp .public-faq summary { display: flex; align-items: center; gap: 12px; list-style: none; padding-right: 0; }
.public-lp .public-faq summary::-webkit-details-marker { display: none; }
.public-lp .public-faq summary::before { content: "Q."; flex: 0 0 auto; color: var(--teal-700); font-weight: 700; }
.public-lp .public-faq summary::after { content: "＋"; margin-left: auto; color: var(--teal-700); font-weight: 700; }
.public-lp .public-faq details[open] summary::after { content: "－"; }
.public-lp .public-faq details p { padding-left: 28px; }

/* 最後の誘導：濃い帯 */
.public-lp .public-start.lp-band { padding-block: 72px; text-align: center; }
.public-lp .public-start h2 { margin: 0 0 28px; font-size: 32px; }
.public-lp .public-start .public-trial-note { color: var(--lp-on-dark-2); }

@media (max-width:720px) {
  .public-lp .lp-heading { margin-bottom: 28px; }
  .public-lp .lp-heading h2, .public-lp .public-start h2 { font-size: 26px; }
  .public-lp .public-intro.lp-band { padding-block: 28px 40px; }
  .public-lp .lp-funnel { gap: 32px; }
  .public-lp .lp-funnel li:not(:last-child)::after { content: "↓"; right: calc(50% - 8px); top: auto; bottom: -30px; }
  .public-lp .lp-feature { gap: 14px; padding: 18px; }
  .public-lp .lp-feature .lp-icon-wrap { width: 44px; height: 44px; border-radius: 12px; }
  .public-lp .lp-feature .lp-icon-wrap svg { width: 22px; height: 22px; }
  /* スマホは説明と画面イメージを横に並べ、縦に長くしない */
  .public-lp .lp-steps { grid-template-columns: minmax(0,1fr); gap: 12px; }
  .public-lp .lp-step { grid-template-columns: minmax(0,1fr) auto; align-items: center; justify-items: start; gap: 14px; padding: 18px 16px; }
  .public-lp .lp-step-copy { justify-items: start; text-align: left; }
  .public-lp .lp-phone { --w: 124px; --h: 220px; padding: 6px; border-radius: 20px; }
  .public-lp .lp-phone-screen { gap: 6px; padding: 8px 6px; border-radius: 15px; }
  .public-lp .lp-phone-title { font-size: 12px; }
  .public-lp .lp-dark .lp-phone-screen .lp-phone-button { padding: 5px 4px; }
  .public-lp .lp-phone-actions { grid-template-columns: minmax(0,1fr); }
  .public-lp .lp-phone-thumb { flex-basis: 34px; height: 46px; }
  .public-lp .lp-phone-notice { gap: 6px; padding: 6px; }
  .public-lp .lp-phone-notice-muted { display: none; }
  .public-lp .lp-pilot-flow { gap: 6px; }
  .public-lp .lp-flow-chip { padding: 10px 8px; border-radius: 12px; }
  .public-lp .lp-flow-chip img { height: 20px; }
  .public-lp .lp-flow-chip small { font-size: 12px; text-align: center; line-height: 1.5; }
  .public-lp .lp-flow-arrow { font-size: 18px; }
  .public-lp .lp-pilot-points { grid-template-columns: minmax(0,1fr); }
  .public-lp .lp-pilot-about { padding: 20px; }
  .public-lp .lp-actions-row .primary { width: 100%; }
  .public-lp .public-start.lp-band { padding-block: 48px; }
  .public-lp .lp-problem-grid .public-card, .public-lp .lp-safety-grid .public-card { padding: 20px; }
}

/* 旧LPの指定の打ち消し：帯の隙間・StylePilot区画のずれ・ラベルの色 */
.public-lp .public-pilot.lp-band { margin-block: 0; border-block: 0; }
.public-lp .public-pilot-linkage ol.lp-pilot-points { padding-left: 0; }
.public-lp .public-pilot-linkage .lp-pilot-points li { padding: 18px; }
.public-lp .public-pilot-linkage .lp-pilot-points .lp-icon-wrap { display: inline-grid; margin: 0; color: var(--teal-700); }
.public-lp .public-hero-frame .public-hero-label { color: var(--navy); }
@media (max-width:720px) {
  .public-lp .lp-pill { padding: 6px 12px; font-size: 12px; }
  .public-lp .lp-phone-notice span { display: none; }
}

/* 料金は月額と都度を同じカードで比較する。値はすべて商品API由来。 */
.public-lp .lp-pricing-trial { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:24px; margin:28px 0; border-radius:16px; background:var(--lp-tint); }
.public-lp .lp-pricing-trial p { display:grid; gap:4px; margin:0; color:var(--navy); }
.public-lp .lp-pricing-trial strong { font-size:18px; }
.public-lp .lp-pricing-trial p > span { font-size:13px; color:var(--text-2); }
.public-lp .lp-pricing-chooser { margin:28px 0; }
.public-lp .lp-pricing-chooser h3 { font-size:18px; margin:0 0 12px; }
.public-lp #lp-pricing-hints { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.public-lp .lp-pricing-hint { display:grid; align-content:center; gap:6px; min-height:72px; padding:12px; border:1px solid var(--control-border); border-radius:12px; background:#FFFFFF; color:var(--navy); text-align:center; }
.public-lp .lp-pricing-hint > span { font-size:13px; color:var(--text-2); white-space:nowrap; line-height:1.5; }
.public-lp .lp-pricing-hint strong { display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; white-space:nowrap; line-height:1.5; }
.public-lp .lp-hint-arrow { flex:0 0 auto; fill:none; stroke:currentColor; stroke-width:2; }
.public-lp .lp-pricing-hint:hover { background:var(--lp-tint); border-color:var(--teal-700); }
.public-lp .lp-pricing-switch { margin:32px 0 16px; }
.public-lp #lp-pricing-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; max-width:640px; margin:auto; }
.public-lp #lp-pricing-tabs button { display:grid; justify-items:center; align-content:center; gap:2px; min-height:52px; padding:12px 16px; border:1px solid var(--navy); border-radius:12px; background:#FFFFFF; color:var(--navy); font-size:15px; font-weight:700; line-height:1.5; }
.public-lp #lp-pricing-tabs strong,.public-lp #lp-pricing-tabs small { display:block; white-space:nowrap; line-height:1.5; }
.public-lp #lp-pricing-tabs small { font-size:13px; font-weight:400; }
.public-lp #lp-pricing-tabs [aria-selected="true"] { background:var(--navy); color:#FFFFFF; }
.public-lp #lp-pricing-benefit { margin:12px 0 0; text-align:center; color:var(--teal-700); font-size:13px; font-weight:700; }
.public-lp .lp-plan-grid { margin-top:28px; }
.public-lp .lp-plan-grid .plan-card { gap:0; padding:24px 20px 20px; }
.public-lp .lp-plan-grid .public-plan-audience { margin:0; min-height:24px; line-height:1.6; }
.public-lp .lp-plan-grid .plan-price { margin:12px 0 8px; }
.public-lp .lp-plan-grid .plan-price strong { font-size:32px; }
.public-lp .lp-plan-grid .plan-price span { font-size:13px; }
.public-lp .lp-plan-stats { display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 12px; margin:0 0 12px; }
.public-lp .lp-plan-stats p { display:flex; align-items:baseline; gap:4px; margin:0; color:var(--teal-700); }
.public-lp .lp-plan-stats span { font-size:13px; color:var(--text-2); }
.public-lp .lp-plan-stats strong { font-size:18px; font-weight:700; }
.public-lp .lp-plan-features { display:grid; gap:4px; list-style:none; padding:0; margin:0 0 16px; }
.public-lp .lp-plan-features li { display:flex; align-items:baseline; gap:8px; color:var(--text-2); font-size:13px; line-height:1.7; }
.public-lp .lp-plan-check { flex:0 0 auto; color:var(--teal-700); font-weight:700; }
.public-lp .lp-plan-counterpart { font-size:13px; color:var(--text-2); margin:0 0 12px; line-height:1.65; }
.public-lp .lp-plan-grid .plan-card.lp-plan-highlight { outline:3px solid var(--teal-700); outline-offset:4px; }
.public-lp .lp-pricing-comparison { width:100%; table-layout:fixed; border-collapse:collapse; margin:36px 0 28px; }
.public-lp .lp-pricing-comparison caption { text-align:left; color:var(--navy); font-size:18px; font-weight:700; margin-bottom:16px; }
.public-lp .lp-pricing-comparison th { padding:16px; background:var(--lp-navy-tint); color:var(--navy); font-size:16px; text-align:left; }
.public-lp .lp-pricing-comparison td { padding:14px 16px; border-bottom:1px solid var(--lp-card-line); vertical-align:top; color:var(--ink); font-size:15px; line-height:1.7; overflow-wrap:anywhere; }
.public-lp .lp-pricing-comparison thead td { width:22%; background:var(--lp-navy-tint); }
.public-lp .lp-pricing-comparison th[scope="row"] { width:22%; font-size:14px; border-bottom:1px solid var(--lp-card-line); }
.public-lp .lp-pricing-comparison tr > :nth-child(2) { background:var(--lp-tint); }
.public-lp .lp-pricing-comparison strong { font-weight:500; }
.public-lp .lp-payment-promises { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; padding:0; margin:32px 0 20px; list-style:none; }
.public-lp .lp-payment-promises li { display:flex; align-items:flex-start; gap:12px; color:var(--navy); font-size:15px; font-weight:700; }
.public-lp .lp-payment-promises .lp-icon-wrap { width:32px; height:32px; border-radius:10px; }
.public-lp .lp-payment-promises svg { width:20px; height:20px; }
.public-lp .lp-payment-promises strong { display:block; white-space:nowrap; line-height:1.5; }
.public-lp .lp-payment-promises small { display:block; font-size:13px; font-weight:400; color:var(--text-2); }
@media(max-width:720px) {
 .public-lp .lp-pricing-trial { flex-direction:column; align-items:stretch; gap:16px; padding:20px; }
 .public-lp .lp-pricing-trial .button { width:100%; }
 .public-lp #lp-pricing-hints { grid-template-columns:minmax(0,1fr); gap:8px; }
 .public-lp .lp-pricing-hint { grid-template-columns:1fr auto; align-items:center; gap:8px; padding:12px; min-height:48px; text-align:left; }
 .public-lp .lp-pricing-hint strong { justify-content:flex-end; font-size:13px; }
 .public-lp #lp-pricing-tabs button { padding:10px 8px; min-height:64px; }
 .public-lp .lp-plan-grid { gap:28px; }
 .public-lp .lp-plan-grid .plan-card { padding:18px 16px 16px; }
 .public-lp .lp-plan-grid .public-plan-audience { min-height:0; }
 .public-lp .lp-plan-grid .plan-price { margin:8px 0 6px; }
 .public-lp .lp-plan-stats { margin-bottom:8px; }
 .public-lp .lp-plan-features { gap:2px; margin-bottom:12px; }
 .public-lp .lp-pricing-comparison { display:block; }
 .public-lp .lp-pricing-comparison caption,.public-lp .lp-pricing-comparison thead,.public-lp .lp-pricing-comparison tbody { display:block; }
 .public-lp .lp-pricing-comparison tr { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
 .public-lp .lp-pricing-comparison .lp-compare-corner { display:none; }
 .public-lp .lp-pricing-comparison th[scope="row"] { grid-column:1/-1; width:auto; font-size:13px; padding:8px 12px; }
 .public-lp .lp-pricing-comparison td,.public-lp .lp-pricing-comparison th { min-width:0; padding:12px; }
 .public-lp .lp-payment-promises { grid-template-columns:minmax(0,1fr); gap:16px; }
}

/* 商品APIのセット特典はカードの通常条件と分けて読む。 */
.public-lp .lp-plan-set-bonus { margin:0 0 12px; padding:8px; background:var(--lp-tint); color:var(--teal-700); font-size:13px; line-height:1.7; }
.public-lp .lp-set-conditions { margin:20px 0; color:var(--navy); font-size:14px; }
.public-lp .lp-set-conditions summary { padding:12px 0; min-height:48px; cursor:pointer; }
.public-lp .lp-set-conditions p { color:var(--text-2); font-size:14px; line-height:1.8; }