/*!
 * VOD Subsc Theme — Stylesheet
 * @version 2.0.3
 * @updated 2026-06-04
 * @url     https://vod-subsc.com/
 */
/* ============================================================
   VOD Subsc — LP (PPC Comparison Landing Page)
   ============================================================ */

:root {
  /* ---- Color ---- */
  --lp-bg: #ffffff;
  --lp-bg-soft: #fff8f1;
  --lp-bg-section: #fbf5ec;
  --lp-bg-dark: #0e1b2c;
  --lp-ink: #1a2436;
  --lp-ink-soft: #5b6678;
  --lp-line: #e7dfd2;
  --lp-accent: #ff5c6b;       /* coral red */
  --lp-accent-deep: #e63a4a;
  --lp-warm: #ffc940;          /* warm yellow */
  --lp-gold: #c9a227;
  --lp-silver: #94a0ad;
  --lp-bronze: #c08864;
  --lp-success: #2aa97a;

  /* ---- Type ---- */
  --lp-f-display: 'Zen Maru Gothic', 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  --lp-f-body: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  --lp-f-numeric: 'DM Serif Display', 'Zen Maru Gothic', serif;

  /* ---- Radius / Shadow ---- */
  --lp-r-sm: 8px;
  --lp-r-md: 14px;
  --lp-r-lg: 22px;
  --lp-r-pill: 999px;
  --lp-shadow-sm: 0 2px 6px rgba(14, 27, 44, .06);
  --lp-shadow-md: 0 8px 24px rgba(14, 27, 44, .08);
  --lp-shadow-lg: 0 16px 48px rgba(14, 27, 44, .12);
  --lp-shadow-pop: 0 12px 32px rgba(255, 92, 107, .25);
}

/* ============================================================
   Global reset for LP body
   ============================================================ */
body.lp-page {
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: var(--lp-f-body);
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  line-height: 1.7;
  margin: 0;
}
body.lp-page * { box-sizing: border-box; }
body.lp-page img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   LP Header (sticky, minimal)
   ============================================================ */
.lp-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--lp-line);
}
.lp-header__inner {
  max-width: 1140px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.lp-header__brand {
  display: inline-flex; align-items: center; gap: 8px;
  text-decoration: none; color: var(--lp-ink);
  font-family: var(--lp-f-display); font-weight: 700; font-size: 18px;
}
.lp-header__mark {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--lp-accent); color: #fff; font-size: 13px;
}
.lp-header__badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--lp-ink-soft);
  padding: 6px 12px; border: 1px solid var(--lp-line); border-radius: var(--lp-r-pill);
  background: #fff;
}
@media (max-width: 640px) {
  .lp-header__badge { display: none; }
  .lp-header__inner { padding: 10px 14px; }
}

/* ============================================================
   Section helpers
   ============================================================ */
.lp-inner { max-width: 1140px; margin: 0 auto; padding: 64px 24px; }
@media (max-width: 768px) { .lp-inner { padding: 44px 16px; } }

.lp-section__eyebrow {
  display: inline-block;
  font-family: var(--lp-f-display); font-weight: 700;
  font-size: 12px; letter-spacing: .2em;
  color: var(--lp-accent);
  padding: 6px 14px;
  background: rgba(255, 92, 107, .08);
  border-radius: var(--lp-r-pill);
  margin: 0 0 16px;
  text-transform: uppercase;
}
.lp-h2 {
  font-family: var(--lp-f-display); font-weight: 700;
  font-size: clamp(24px, 3.4vw, 36px);
  line-height: 1.4; letter-spacing: .01em;
  margin: 0 0 16px;
}
.lp-h2 em {
  font-style: normal; color: var(--lp-accent);
  background-image: linear-gradient(transparent 65%, rgba(255, 201, 64, .55) 65%);
  background-repeat: no-repeat;
  padding: 0 .15em;
}
.lp-section__lead {
  color: var(--lp-ink-soft); font-size: 15px; margin: 0 0 36px;
}

/* ============================================================
   Buttons
   ============================================================ */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 28px; min-height: 50px;
  font-family: var(--lp-f-display); font-weight: 700; font-size: 15px;
  border: 0; border-radius: var(--lp-r-pill);
  text-decoration: none; cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lp-btn--primary {
  background: linear-gradient(135deg, var(--lp-accent), var(--lp-accent-deep));
  color: #fff;
  box-shadow: var(--lp-shadow-pop);
}
.lp-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255, 92, 107, .35);
}
.lp-btn--ghost {
  background: #fff; color: var(--lp-ink);
  border: 1.5px solid var(--lp-ink);
}
.lp-btn--ghost:hover { background: var(--lp-ink); color: #fff; }
.lp-btn--mini {
  padding: 7px 14px; min-height: 0; font-size: 13px;
  background: var(--lp-ink); color: #fff;
}
.lp-btn--large { padding: 18px 36px; font-size: 16px; }
.lp-btn--xl { padding: 22px 42px; font-size: 18px; min-height: 64px; }

/* ============================================================
   HERO
   ============================================================ */
.lp-hero {
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(255, 201, 64, .25), transparent 55%),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 92, 107, .15), transparent 60%),
    linear-gradient(180deg, var(--lp-bg-soft), #fff);
  position: relative; overflow: hidden;
}
.lp-hero__inner {
  max-width: 1140px; margin: 0 auto;
  padding: 72px 24px 80px;
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px;
  align-items: center;
}
.lp-hero__eyebrow {
  display: inline-block;
  font-family: var(--lp-f-display); font-weight: 700; font-size: 13px;
  color: var(--lp-accent-deep); margin: 0 0 18px;
  padding: 6px 14px; background: #fff; border-radius: var(--lp-r-pill);
  box-shadow: var(--lp-shadow-sm);
}
.lp-hero__title {
  font-family: var(--lp-f-display); font-weight: 700;
  font-size: clamp(28px, 4.4vw, 52px);
  line-height: 1.32; letter-spacing: .01em; margin: 0 0 22px;
}
.lp-hero__title-line { display: block; }
.lp-hero__title-line--accent {
  font-size: .68em; color: var(--lp-accent);
  margin-bottom: 6px;
}
.lp-hero__title em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--lp-warm) 60%, var(--lp-warm) 92%, transparent 92%);
  padding: 0 .1em;
}
.lp-hero__lead {
  font-size: 16px; color: var(--lp-ink-soft); margin: 0 0 22px;
}
.lp-hero__points {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  font-size: 14px; font-weight: 600;
}
.lp-hero__points li {
  display: inline-flex; align-items: center; gap: 6px;
}
.lp-hero__points span {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--lp-accent); color: #fff; font-size: 12px;
}
.lp-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

.lp-hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.02;
}
.lp-hero__screen {
  position: relative;
  background: linear-gradient(180deg, #15243a, #0a1424);
  border-radius: var(--lp-r-lg);
  padding: 18px 18px 22px;
  box-shadow: 0 24px 60px rgba(14, 27, 44, .28);
  height: 100%;
}
.lp-hero__screen-bar {
  display: flex; gap: 6px; margin-bottom: 18px;
}
.lp-hero__screen-bar span {
  width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .25);
}
.lp-hero__rank { display: flex; flex-direction: column; gap: 12px; }
.lp-hero__rank-row {
  display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--lp-r-md);
  color: #fff;
}
.lp-hero__rank-num {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  font-family: var(--lp-f-numeric); font-size: 18px; font-weight: 400;
  background: rgba(255, 255, 255, .12);
}
.lp-hero__rank-row--1 {
  background: linear-gradient(135deg, rgba(255, 201, 64, .18), rgba(255, 92, 107, .12));
  border-color: var(--lp-warm);
}
.lp-hero__rank-row--1 .lp-hero__rank-num {
  background: var(--lp-warm); color: var(--lp-ink);
  box-shadow: 0 6px 14px rgba(255, 201, 64, .35);
}
.lp-hero__rank-name { font-weight: 700; font-size: 15px; }
.lp-hero__rank-price {
  font-family: var(--lp-f-numeric); font-size: 18px;
  color: var(--lp-warm);
}
.lp-hero__sparkle {
  position: absolute; font-size: 24px;
  animation: lp-twinkle 3.4s ease-in-out infinite;
}
.lp-hero__sparkle--a { top: -14px; right: -10px; color: var(--lp-warm); }
.lp-hero__sparkle--b { bottom: 18px; left: -16px; color: var(--lp-accent); animation-delay: 1.2s; }
@keyframes lp-twinkle {
  0%, 100% { transform: scale(1) rotate(0); opacity: .9; }
  50% { transform: scale(1.25) rotate(8deg); opacity: 1; }
}

@media (max-width: 920px) {
  .lp-hero__inner { grid-template-columns: 1fr; gap: 36px; padding: 52px 20px 60px; }
  .lp-hero__visual { max-width: 380px; margin: 0 auto; }
}

/* ============================================================
   PAIN POINTS
   ============================================================ */
.lp-pain { background: var(--lp-bg-section); }
.lp-pain__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-top: 24px;
}
.lp-pain__card {
  background: #fff; padding: 24px 18px;
  border-radius: var(--lp-r-md);
  text-align: center;
  box-shadow: var(--lp-shadow-sm);
  position: relative;
  border: 1px solid var(--lp-line);
}
.lp-pain__num {
  display: inline-block;
  font-family: var(--lp-f-numeric); font-size: 26px;
  color: var(--lp-accent); margin-bottom: 8px;
  line-height: 1;
}
.lp-pain__card p { margin: 0; font-weight: 500; line-height: 1.6; font-size: 14px; }
.lp-pain__bridge {
  margin: 28px 0 0; text-align: center; font-size: 16px; font-weight: 600;
}
.lp-pain__bridge em {
  font-style: normal; color: var(--lp-accent-deep);
  background-image: linear-gradient(transparent 65%, rgba(255, 201, 64, .55) 65%);
  background-repeat: no-repeat;
}
@media (max-width: 768px) {
  .lp-pain__grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   RANKING (Top 3 cards)
   ============================================================ */
.lp-ranking { background: #fff; }
.lp-ranking__list {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  margin-top: 12px;
}
.lp-rank-card {
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-lg);
  padding: 28px 22px 24px;
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--lp-shadow-md);
  transition: transform .2s ease, box-shadow .2s ease;
}
.lp-rank-card:hover { transform: translateY(-4px); box-shadow: var(--lp-shadow-lg); }
.lp-rank-card--1 {
  border: 2px solid var(--lp-warm);
  background: linear-gradient(180deg, #fffdf2 0%, #ffffff 80%);
  box-shadow: 0 16px 48px rgba(201, 162, 39, .18);
}
.lp-rank-card--1::before {
  content: ""; position: absolute; inset: -2px;
  border-radius: var(--lp-r-lg);
  padding: 2px;
  background: linear-gradient(135deg, var(--lp-gold), var(--lp-warm), var(--lp-accent));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.lp-rank-card__head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.lp-rank-card__rank {
  display: flex; align-items: baseline; gap: 4px;
  font-family: var(--lp-f-numeric); line-height: 1;
}
.lp-rank-card__rank-label { font-size: 13px; color: var(--lp-ink-soft); }
.lp-rank-card__rank-num {
  font-size: 56px; color: var(--lp-ink);
}
.lp-rank-card--1 .lp-rank-card__rank-num { color: var(--lp-gold); }
.lp-rank-card--2 .lp-rank-card__rank-num { color: var(--lp-silver); }
.lp-rank-card--3 .lp-rank-card__rank-num { color: var(--lp-bronze); }
.lp-rank-card__badge {
  padding: 6px 12px;
  background: var(--lp-accent); color: #fff;
  font-size: 11px; font-weight: 700;
  border-radius: var(--lp-r-pill);
  letter-spacing: .04em;
}
.lp-rank-card--1 .lp-rank-card__badge {
  background: linear-gradient(135deg, var(--lp-gold), var(--lp-warm));
  color: var(--lp-ink);
}
.lp-rank-card__name {
  font-family: var(--lp-f-display); font-weight: 700;
  font-size: 22px; line-height: 1.35; margin: 0;
}
.lp-rank-card__sub {
  display: block; font-size: 12px; color: var(--lp-ink-soft); font-weight: 500; margin-top: 4px;
}
.lp-rank-card__rating { display: flex; align-items: center; gap: 8px; }
.lp-rank-card__stars {
  color: var(--lp-warm); font-size: 18px; letter-spacing: .04em;
}
.lp-rank-card__score {
  font-family: var(--lp-f-numeric); font-size: 22px; line-height: 1; color: var(--lp-ink);
}
.lp-rank-card__spec {
  display: grid; gap: 8px; margin: 6px 0;
  padding: 14px 16px;
  background: var(--lp-bg-soft);
  border-radius: var(--lp-r-md);
  font-size: 14px;
}
.lp-rank-card__spec div {
  display: grid; grid-template-columns: 90px 1fr; align-items: baseline; gap: 6px;
}
.lp-rank-card__spec dt { color: var(--lp-ink-soft); font-size: 12px; margin: 0; }
.lp-rank-card__spec dd { margin: 0; font-weight: 500; }
.lp-rank-card__spec strong { font-family: var(--lp-f-numeric); font-size: 22px; color: var(--lp-accent-deep); }
.lp-rank-card__spec small { font-size: 11px; color: var(--lp-ink-soft); }
.lp-rank-card__pros { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.lp-rank-card__pros li {
  padding-left: 22px; position: relative;
  font-size: 13.5px; line-height: 1.6;
}
.lp-rank-card__pros li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  width: 16px; height: 16px;
  background: var(--lp-success); color: #fff;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 10px;
  margin-top: 3px;
}
.lp-rank-card__cta { margin-top: auto; }

@media (max-width: 900px) {
  .lp-ranking__list { grid-template-columns: 1fr; }
}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.lp-table-sec { background: var(--lp-bg-section); }
.lp-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border-radius: var(--lp-r-md);
  box-shadow: var(--lp-shadow-md);
  background: #fff;
}
.lp-table {
  width: 100%; min-width: 800px;
  border-collapse: collapse; background: #fff;
  font-size: 14px;
}
.lp-table th, .lp-table td {
  padding: 14px 14px;
  border-bottom: 1px solid var(--lp-line);
  text-align: center; vertical-align: middle;
}
.lp-table thead th {
  background: var(--lp-ink); color: #fff;
  font-family: var(--lp-f-display); font-weight: 700;
  font-size: 13px;
  position: sticky; top: 0;
}
.lp-table tbody tr { transition: background .15s; }
.lp-table tbody tr:hover { background: var(--lp-bg-soft); }
.lp-table__row--top {
  background: linear-gradient(90deg, rgba(255, 201, 64, .12), rgba(255, 255, 255, 0) 80%);
}
.lp-table__rank { width: 56px; }
.lp-table__rank-num {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  font-family: var(--lp-f-numeric); font-size: 15px;
  background: var(--lp-line); color: var(--lp-ink);
}
.lp-table__row--top .lp-table__rank-num {
  background: var(--lp-warm); color: var(--lp-ink);
  box-shadow: 0 4px 10px rgba(255, 201, 64, .4);
}
.lp-table__name { text-align: left; }
.lp-table__name strong { font-size: 15px; }
.lp-table__name small { display: block; font-size: 11px; color: var(--lp-ink-soft); font-weight: 400; }
.lp-table td strong { font-family: var(--lp-f-numeric); font-size: 17px; color: var(--lp-accent-deep); }
.lp-table td small { font-size: 11px; color: var(--lp-ink-soft); }
.lp-table__score {
  display: inline-grid; place-items: center;
  width: 40px; height: 40px; border-radius: 50%;
  font-family: var(--lp-f-numeric); font-size: 15px;
  background: var(--lp-warm); color: var(--lp-ink);
  font-weight: 700;
}
.lp-table__note { font-size: 12px; color: var(--lp-ink-soft); margin: 14px 0 0; }

/* ============================================================
   USE CASE
   ============================================================ */
.lp-usecase { background: #fff; }
.lp-usecase__grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.lp-usecase__card {
  padding: 28px 24px;
  background: var(--lp-bg-soft);
  border-radius: var(--lp-r-lg);
  border: 1px solid var(--lp-line);
  display: flex; flex-direction: column; gap: 12px;
}
.lp-usecase__tag {
  display: inline-block; align-self: flex-start;
  padding: 6px 12px;
  background: var(--lp-ink); color: #fff;
  border-radius: var(--lp-r-pill);
  font-size: 12px; font-weight: 700; margin: 0;
}
.lp-usecase__answer {
  font-family: var(--lp-f-display); font-size: 13px;
  color: var(--lp-ink-soft); margin: 0;
}
.lp-usecase__answer strong {
  display: block; font-size: 24px; color: var(--lp-accent-deep); margin-top: 2px;
}
.lp-usecase__why {
  margin: 0; font-size: 14px; color: var(--lp-ink); line-height: 1.7;
}
.lp-usecase__card .lp-btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 900px) {
  .lp-usecase__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   DETAILED REVIEW (Featured #1)
   ============================================================ */
.lp-review {
  background: linear-gradient(180deg, var(--lp-bg-section), #fff);
}
.lp-review__top {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center;
  margin: 12px 0 28px;
}
.lp-review__visual { display: grid; place-items: center; }
.lp-review__screen {
  background: linear-gradient(180deg, #15243a, #0a1424);
  border-radius: var(--lp-r-lg);
  padding: 24px;
  width: 100%; max-width: 380px;
  box-shadow: 0 24px 60px rgba(14, 27, 44, .25);
}
.lp-review__screen-title {
  font-family: var(--lp-f-display); font-weight: 900;
  font-size: 22px; color: #fff; margin-bottom: 16px;
}
.lp-review__screen-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px;
  margin-bottom: 20px;
}
.lp-review__screen-grid span {
  aspect-ratio: 1.5 / 1;
  background: linear-gradient(135deg, rgba(255, 92, 107, .35), rgba(255, 201, 64, .25));
  border-radius: 8px;
}
.lp-review__screen-grid span:nth-child(2) { background: linear-gradient(135deg, rgba(42, 169, 122, .4), rgba(255, 201, 64, .3)); }
.lp-review__screen-grid span:nth-child(4) { background: linear-gradient(135deg, rgba(120, 90, 220, .4), rgba(255, 92, 107, .35)); }
.lp-review__screen-grid span:nth-child(5) { background: linear-gradient(135deg, rgba(255, 201, 64, .35), rgba(255, 92, 107, .25)); }
.lp-review__screen-grid span:nth-child(6) { background: linear-gradient(135deg, rgba(255, 92, 107, .35), rgba(120, 90, 220, .3)); }
.lp-review__screen-cta {
  background: var(--lp-warm); color: var(--lp-ink);
  border-radius: var(--lp-r-pill);
  padding: 12px 16px; text-align: center;
  font-weight: 700; font-size: 13px;
}
.lp-review__lead { font-size: 17px; line-height: 1.8; margin: 0 0 20px; }
.lp-review__lead strong { font-family: var(--lp-f-numeric); font-size: 28px; color: var(--lp-accent-deep); }
.lp-review__spec {
  display: grid; gap: 10px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
}
.lp-review__spec div {
  display: grid; grid-template-columns: 120px 1fr; gap: 8px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--lp-line);
}
.lp-review__spec div:last-child { border-bottom: 0; padding-bottom: 0; }
.lp-review__spec div:first-child { padding-top: 0; }
.lp-review__spec dt { color: var(--lp-ink-soft); font-size: 13px; margin: 0; font-weight: 600; }
.lp-review__spec dd { margin: 0; font-weight: 500; }

.lp-review__pro-con {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin: 12px 0 30px;
}
.lp-review__pros, .lp-review__cons {
  background: #fff; padding: 24px 22px;
  border-radius: var(--lp-r-md);
  box-shadow: var(--lp-shadow-sm);
}
.lp-review__pros { border-top: 4px solid var(--lp-success); }
.lp-review__cons { border-top: 4px solid var(--lp-ink-soft); }
.lp-review__pros h3, .lp-review__cons h3 {
  font-family: var(--lp-f-display); font-size: 16px; margin: 0 0 12px;
}
.lp-review__pros ul, .lp-review__cons ul {
  list-style: none; padding: 0; margin: 0; display: grid; gap: 10px;
  font-size: 14px;
}
.lp-review__pros li, .lp-review__cons li {
  padding-left: 24px; position: relative; line-height: 1.7;
}
.lp-review__pros li span {
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px;
  background: var(--lp-success); color: #fff;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 13px; font-weight: 700;
}
.lp-review__cons li span {
  position: absolute; left: 0; top: 2px;
  width: 18px; height: 18px;
  background: var(--lp-ink-soft); color: #fff;
  display: grid; place-items: center;
  border-radius: 50%; font-size: 14px; font-weight: 700;
}

@media (max-width: 900px) {
  .lp-review__top { grid-template-columns: 1fr; gap: 24px; }
  .lp-review__pro-con { grid-template-columns: 1fr; }
}

/* ============================================================
   FAQ
   ============================================================ */
.lp-faq { background: #fff; }
.lp-faq__list { display: grid; gap: 12px; }
.lp-faq__item {
  background: var(--lp-bg-soft);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  padding: 4px 22px;
  transition: background .15s;
}
.lp-faq__item[open] { background: #fff; box-shadow: var(--lp-shadow-sm); }
.lp-faq__item summary {
  cursor: pointer; list-style: none;
  padding: 18px 0;
  display: grid; grid-template-columns: 32px 1fr; align-items: flex-start; gap: 12px;
  font-family: var(--lp-f-display); font-weight: 700; font-size: 15px; line-height: 1.6;
}
.lp-faq__item summary::-webkit-details-marker { display: none; }
.lp-faq__q {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--lp-accent); color: #fff;
  font-family: var(--lp-f-numeric); font-size: 14px;
}
.lp-faq__a {
  padding: 0 0 18px 44px;
}
.lp-faq__a p { margin: 0; color: var(--lp-ink-soft); font-size: 14.5px; line-height: 1.8; }

/* ============================================================
   FINAL CTA
   ============================================================ */
.lp-final {
  background:
    radial-gradient(100% 80% at 100% 0%, rgba(255, 92, 107, .15), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(255, 201, 64, .2), transparent 60%),
    var(--lp-bg-dark);
  color: #fff; text-align: center;
}
.lp-final .lp-inner { padding: 80px 24px; }
.lp-final__title {
  font-family: var(--lp-f-display); font-weight: 700;
  font-size: clamp(26px, 4vw, 40px);
  line-height: 1.4; margin: 0 0 16px;
}
.lp-final__title em {
  font-style: normal; color: var(--lp-warm);
  background: none;
}
.lp-final__lead {
  color: rgba(255, 255, 255, .78); margin: 0 0 32px;
  font-size: 15px;
}
.lp-final__note {
  margin: 18px 0 0; font-size: 12px; color: rgba(255, 255, 255, .55);
}

/* ============================================================
   LP Footer
   ============================================================ */
.lp-footer { background: #06101e; color: rgba(255, 255, 255, .7); }
.lp-footer__inner {
  max-width: 1140px; margin: 0 auto;
  padding: 40px 24px 32px;
  display: grid; gap: 14px;
  text-align: center;
}
.lp-footer__brand {
  font-family: var(--lp-f-display); font-weight: 700; color: #fff; margin: 0;
  font-size: 16px;
}
.lp-footer__links {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 24px;
  font-size: 13px;
}
.lp-footer__links a { color: rgba(255, 255, 255, .7); text-decoration: none; }
.lp-footer__links a:hover { color: #fff; }
.lp-footer__copy { font-size: 12px; margin: 0; }

/* ============================================================
   In-content (post body) — appears below the LP when set
   ============================================================ */
.lp-content { background: #fff; }
.lp-content .entry-content {
  max-width: 760px; margin: 0 auto;
  font-size: 15px; line-height: 1.9;
}
.lp-content .entry-content h2 {
  font-family: var(--lp-f-display); font-size: 22px;
  margin: 36px 0 12px; padding-bottom: 8px;
  border-bottom: 2px solid var(--lp-line);
}
.lp-content .entry-content h3 { font-family: var(--lp-f-display); font-size: 18px; margin: 28px 0 10px; }
.lp-content .entry-content p { margin: 0 0 16px; }
.lp-content .entry-content a { color: var(--lp-accent-deep); }

/* ============================================================
 * v2.0.0 additions:
 *  - Brand logo / header
 *  - Mini comparison table (hero right side, mockup-style)
 *  - Trust bar (under hero)
 *  - Editorial section (criteria + DMM TV showcase)
 *  - Rank-card logo
 *  - Comparison table logos
 *  - Anketo (diagnosis) quiz
 *  - Rating mark colors (◎ in coral)
 * ============================================================ */

/* ---- Header logo ---- */
.lp-header__inner .custom-logo-link { display:inline-flex; align-items:center; text-decoration:none; }
.lp-header__inner .custom-logo { max-height:40px; width:auto; }
.lp-header__logo-fallback { width:36px; height:36px; border-radius:8px; }
.lp-header__name { font-family: var(--lp-f-display); font-weight:700; font-size:18px; color:var(--lp-ink); margin-left:8px; letter-spacing:.01em; }
@media (max-width:640px){ .lp-header__name { font-size:16px; } }

/* ---- HERO v2 overrides ---- */
.lp-hero { background: linear-gradient(180deg, #fff7ed 0%, #fff 65%); }
.lp-hero__inner { padding:64px 24px 40px; grid-template-columns: 1fr 1.05fr; gap:48px; }
.lp-hero__title { font-size: clamp(28px, 4.2vw, 50px); line-height:1.3; margin-bottom:16px; }
.lp-hero__title-line--2 { font-size:.78em; color:var(--lp-ink); margin-top:6px; display:block; }
.lp-hero__num {
  font-style:normal; color: var(--lp-accent-deep);
  font-family: var(--lp-f-display); font-weight:900;
  font-size:1.55em; vertical-align:baseline;
  padding:0 .05em;
}
.lp-hero__pills { display:grid; grid-template-columns: repeat(3, 1fr); gap:10px; list-style:none; padding:0; margin:0 0 26px; }
.lp-hero__pill { background:#fff; border:1px solid var(--lp-line); border-radius:var(--lp-r-md); padding:12px 14px; display:flex; align-items:center; gap:10px; font-size:13px; font-weight:600; line-height:1.4; box-shadow:var(--lp-shadow-sm); }
.lp-hero__pill-icon { width:34px; height:34px; display:grid; place-items:center; background:rgba(255,201,64,.22); border-radius:8px; font-size:16px; color:var(--lp-accent-deep); flex-shrink:0; }
.lp-hero__cta .lp-btn { flex:1 1 auto; max-width:360px; }
.lp-hero__note { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--lp-ink-soft); margin:16px 0 0; }
.lp-hero__note span { color:var(--lp-success); }
.lp-btn--outline { background:#fff; color:var(--lp-ink); border:2px solid var(--lp-ink); padding:14px 28px; }
.lp-btn--outline:hover { background:var(--lp-ink); color:#fff; }
@media (max-width: 920px){
  .lp-hero__inner { grid-template-columns: 1fr; gap:32px; padding:48px 20px 32px; }
  .lp-hero__pills { grid-template-columns: 1fr; }
  .lp-hero__cta { flex-direction:column; }
  .lp-hero__cta .lp-btn { max-width:100%; width:100%; }
}

/* ---- Mini comparison table (hero right side) ---- */
.lp-mini-table {
  background:#fff; border-radius:var(--lp-r-lg);
  box-shadow:var(--lp-shadow-md); padding:18px 18px 14px;
  border:1px solid var(--lp-line);
}
.lp-mini-table table { width:100%; border-collapse: collapse; font-size:13px; }
.lp-mini-table th, .lp-mini-table td { padding:8px 6px; text-align:center; border-bottom:1px solid #f1ece2; vertical-align:middle; }
.lp-mini-table thead th { background:transparent; border-bottom:2px solid var(--lp-line); padding-bottom:14px; }
.lp-mini-table tbody th { text-align:left; font-weight:600; color:var(--lp-ink-soft); font-size:11px; white-space:nowrap; padding-left:6px; }
.lp-mini-table tbody th small { display:block; font-size:9px; color:#9ba6b6; }
.lp-mini-table__lead { width:96px; }
.lp-mini-table__svc { padding:6px 4px 14px !important; position:relative; min-width:74px; }
.lp-mini-table__svc img { max-width:64px; max-height:34px; margin:0 auto; object-fit:contain; }
.lp-mini-table__text-logo { font-size:11px; font-weight:700; color:var(--lp-ink); display:inline-block; padding:6px 8px; background:#f3f3f3; border-radius:6px; }
.lp-mini-table__crown { position:absolute; top:-4px; left:50%; transform:translateX(-50%); background:var(--lp-warm); width:22px; height:22px; border-radius:50%; display:grid; place-items:center; font-size:13px; box-shadow:0 4px 8px rgba(255,201,64,.5); z-index:2; }
.lp-mini-table__svc.is-top img { padding:4px; border:2px solid var(--lp-warm); border-radius:10px; background:#0d1b2c; }
.lp-mini-table__svc.is-top .lp-mini-table__text-logo { background:#0d1b2c; color:#fff; border:2px solid var(--lp-warm); }
.lp-mini-table tbody td.is-top { background: linear-gradient(180deg, rgba(255,201,64,.10), rgba(255,201,64,.05)); border-left:1px dashed var(--lp-warm); border-right:1px dashed var(--lp-warm); }
.lp-mini-table tbody tr:first-child td.is-top { border-top:1px dashed var(--lp-warm); }
.lp-mini-table tbody tr:last-child td.is-top { border-bottom:1px dashed var(--lp-warm); }
.lp-mini-table tbody td strong { font-family: var(--lp-f-display); font-weight:700; font-size:15px; color:var(--lp-ink); }
.lp-mini-table tbody td.is-top strong { color: var(--lp-accent-deep); }
.lp-mini-table__free { font-size:12px !important; }
.lp-mini-table tbody td.is-top .lp-mini-table__free { color: var(--lp-accent-deep); }
.lp-mini-table__note { font-size:10px; color:#9ba6b6; margin:8px 0 0; text-align:right; }

/* Rating marks */
.lp-mark { display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; font-weight:700; font-size:14px; }
.lp-mark--r-double { color: var(--lp-accent-deep); }
.lp-mark--r-circle { color: var(--lp-ink-soft); }
.lp-mark--r-triangle { color: #d4a000; }
.lp-mark--r-cross { color: #c0394b; }
.lp-mark--r-dash { color: #c0c0c0; }
.lp-mini-table tbody td.is-top .lp-mark--r-double { color: var(--lp-accent-deep); text-shadow: 0 0 6px rgba(255,92,107,.3); }

/* ---- Trust bar (bottom of hero) ---- */
.lp-trust { background:#fff; border-top:1px solid var(--lp-line); }
.lp-trust__inner { max-width:1140px; margin:0 auto; padding:20px 24px; display:grid; grid-template-columns: repeat(5, 1fr); gap:16px; }
.lp-trust__item { display:flex; align-items:center; gap:10px; }
.lp-trust__icon { width:40px; height:40px; display:grid; place-items:center; background:rgba(255,201,64,.18); color:var(--lp-warm); border-radius:50%; font-size:18px; flex-shrink:0; }
.lp-trust__label { display:flex; flex-direction:column; gap:2px; line-height:1.3; }
.lp-trust__label strong { font-size:13px; font-weight:700; color:var(--lp-ink); }
.lp-trust__label small { font-size:11px; color:var(--lp-ink-soft); }
@media (max-width: 900px){
  .lp-trust__inner { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Editorial section ---- */
.lp-editorial { background: linear-gradient(180deg, #fff 0%, var(--lp-bg-section) 100%); }
.lp-editorial__grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:20px; margin-top:20px; }
.lp-editorial__card { background:#fff; padding:28px 24px; border-radius:var(--lp-r-md); border:1px solid var(--lp-line); box-shadow:var(--lp-shadow-sm); }
.lp-editorial__num { font-family: var(--lp-f-numeric); font-size:32px; line-height:1; color:var(--lp-accent); margin-bottom:10px; display:inline-block; }
.lp-editorial__card h3 { font-family: var(--lp-f-display); font-size:18px; margin:0 0 10px; }
.lp-editorial__card p { margin:0; font-size:14px; line-height:1.8; color:var(--lp-ink-soft); }
@media (max-width:900px){ .lp-editorial__grid { grid-template-columns: 1fr; } }

.lp-editorial__showcase {
  display:grid; grid-template-columns: 1.2fr 1fr; gap:32px;
  margin-top:40px; padding:28px;
  background:#fff; border-radius:var(--lp-r-lg);
  border:2px solid var(--lp-warm);
  box-shadow:0 12px 32px rgba(255,201,64,.18);
}
.lp-editorial__showcase-img { border-radius:var(--lp-r-md); overflow:hidden; }
.lp-editorial__showcase-img img { width:100%; height:auto; display:block; }
.lp-editorial__showcase-text { padding:8px 0; display:flex; flex-direction:column; gap:14px; }
.lp-editorial__pin { margin:0; font-size:13px; color:var(--lp-accent-deep); font-weight:700; }
.lp-editorial__showcase-text h3 { font-family: var(--lp-f-display); font-size:24px; line-height:1.4; margin:0; }
.lp-editorial__showcase-lead { margin:0; font-size:15px; line-height:1.8; color:var(--lp-ink); }
.lp-editorial__showcase-text .lp-btn { align-self:flex-start; }
@media (max-width:900px){
  .lp-editorial__showcase { grid-template-columns: 1fr; padding:18px; }
}

/* ---- Rank card logo ---- */
.lp-rank-card__logo { height:48px; display:flex; align-items:center; }
.lp-rank-card__logo img { max-height:42px; max-width:160px; object-fit:contain; }

/* ---- Full comparison table logos ---- */
.lp-table__name { text-align:left; }
.lp-table__logo { display:inline-block; max-width:54px; max-height:32px; object-fit:contain; vertical-align:middle; margin-right:10px; }
.lp-table__name-text { display:inline-block; vertical-align:middle; }
.lp-table__name strong { font-size:14px; display:block; }
.lp-table__name small { display:block; font-size:11px; color:var(--lp-ink-soft); font-weight:400; }

/* ---- Anketo (diagnosis) quiz ---- */
.lp-quiz { background:#fff; }
.lp-quiz__box {
  max-width:780px; margin:24px auto 0;
  background: linear-gradient(180deg, #fff8f1 0%, #fff 100%);
  border-radius:var(--lp-r-lg);
  border:1px solid var(--lp-line);
  box-shadow:var(--lp-shadow-md);
  padding:32px 32px 36px;
  position:relative;
}
.lp-quiz__progress { display:flex; gap:6px; justify-content:center; margin-bottom:24px; flex-wrap:wrap; }
.lp-quiz__step {
  padding:6px 14px; font-size:12px; font-weight:700;
  border-radius: var(--lp-r-pill);
  background:#f1ece2; color:var(--lp-ink-soft);
  transition: all .2s ease;
  font-family: var(--lp-f-display);
}
.lp-quiz__step.is-done { background:var(--lp-success); color:#fff; }
.lp-quiz__step.is-active { background:var(--lp-accent); color:#fff; box-shadow:0 4px 10px rgba(255,92,107,.3); }

.lp-quiz__panel { display:none; animation: lpQuizIn .25s ease; }
.lp-quiz__panel.is-active { display:block; }
@keyframes lpQuizIn { from { opacity:0; transform:translateY(8px);} to { opacity:1; transform:none;} }

.lp-quiz__q-num { font-size:12px; color:var(--lp-accent-deep); font-weight:700; margin:0 0 8px; letter-spacing:.08em; }
.lp-quiz__q { font-family: var(--lp-f-display); font-size:24px; line-height:1.4; margin:0 0 24px; text-align:center; }
.lp-quiz__opts { display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.lp-quiz__opt {
  display:flex; align-items:center; gap:12px;
  padding:18px 20px; min-height:60px;
  background:#fff; border:2px solid var(--lp-line);
  border-radius: var(--lp-r-md);
  font-family: var(--lp-f-display); font-weight:700; font-size:15px;
  color:var(--lp-ink); text-align:left;
  cursor:pointer; transition: all .15s ease;
}
.lp-quiz__opt:hover { border-color:var(--lp-accent); background:#fff8f1; transform:translateY(-2px); }
.lp-quiz__opt.is-selected { border-color:var(--lp-accent); background:rgba(255,92,107,.08); }
.lp-quiz__opt span[aria-hidden] { font-size:22px; }
@media (max-width:600px){ .lp-quiz__opts { grid-template-columns: 1fr; } }

.lp-quiz__panel--result { text-align:center; }
.lp-quiz__result-eyebrow { font-size:13px; color:var(--lp-ink-soft); margin:0 0 16px; font-weight:600; }
.lp-quiz__result-card {
  background:#fff; border-radius:var(--lp-r-lg);
  padding:32px 24px;
  border:2px solid var(--lp-warm);
  box-shadow:0 16px 40px rgba(255,201,64,.2);
  display:flex; flex-direction:column; align-items:center; gap:14px;
}
.lp-quiz__result-logo { height:56px; display:flex; align-items:center; justify-content:center; }
.lp-quiz__result-logo img { max-height:50px; max-width:200px; object-fit:contain; }
.lp-quiz__result-name { font-family: var(--lp-f-display); font-size:26px; margin:0; color:var(--lp-ink); }
.lp-quiz__result-sub { font-size:13px; color:var(--lp-ink-soft); margin:0; }
.lp-quiz__result-spec { display:flex; gap:24px; margin:8px 0 4px; flex-wrap:wrap; justify-content:center; }
.lp-quiz__result-spec div { display:flex; flex-direction:column; gap:2px; align-items:center; }
.lp-quiz__result-spec dt { font-size:11px; color:var(--lp-ink-soft); margin:0; }
.lp-quiz__result-spec dd { margin:0; font-family: var(--lp-f-numeric); font-size:22px; color:var(--lp-accent-deep); font-weight:400; }
.lp-quiz__retry {
  background:none; border:0; padding:6px 14px;
  font-size:13px; color:var(--lp-ink-soft); cursor:pointer;
  text-decoration:underline; margin-top:6px;
}
.lp-quiz__retry:hover { color:var(--lp-accent); }

@media (max-width:600px){
  .lp-quiz__box { padding:24px 20px 28px; }
  .lp-quiz__q { font-size:20px; }
}

/* ============================================================
 * v2.0.2 — Main Visual (画像ベースのファーストビュー)
 * 添付モックアップ画像をそのまま全面表示。CTA は画像直下に重ねる。
 * ============================================================ */
.lp-mv { background:#FBF5EC; position:relative; }
.lp-mv picture, .lp-mv img { display:block; }
.lp-mv__img { width:100%; height:auto; max-width:100%; margin:0 auto; }
@media (min-width: 1280px){
  .lp-mv__img { max-width:1280px; }
}
.lp-mv__cta {
  display:flex; gap:14px; justify-content:center; align-items:center;
  padding:20px 20px 36px; background:#FBF5EC; flex-wrap:wrap;
}
.lp-mv__cta-btn { min-width:280px; flex:0 1 auto; }
@media (max-width: 760px){
  .lp-mv__cta { padding:16px 16px 28px; gap:10px; }
  .lp-mv__cta-btn { width:100%; min-width:0; max-width:420px; }
}