/* ==========================================================================
   web-attract-start-pack.css — Web集客スタート検証パック LP 専用スタイル
   影響範囲: .l-main--web-attract-start-pack 配下のみ
   依存: base.css > layout.css > components.css
   ========================================================================== */

.l-main--web-attract-start-pack {
  padding-block: 0;
}

/* ==========================================================================
   01. ヒーロー (.p-sp-hero) — オファー重視 2カラム（左60% / 右40%）
       価格・CTA を最優先。写真は補助。
   ========================================================================== */

/* 2カラムグリッド 3:2（テキスト優先） */
.p-sp-hero__grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  min-height: 100svh;
  /* clip-path で切り抜かれた領域にテキスト列と同色を見せる */
  background-color: var(--color-primary);
}

/* 左列（オファーコンテンツ）: justify-content: center で黒エリア内を中央寄せ */
.p-sp-hero__col--content {
  background-color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12) var(--space-6);
}

.p-sp-hero__content-inner {
  max-width: 520px;
  width: 100%;
}

/* 右列（画像・補助） */
.p-sp-hero__col--image {
  position: relative;
  overflow: hidden;
  background-color: #1a1a1a;
}

.p-sp-hero__col--image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

/* ラベル */
.p-sp-hero__labels {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  margin-bottom: var(--space-2);
}

.p-sp-hero__label {
  display: inline-block;
  padding: 0.2em 0.65em;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 2px;
  color: rgba(255, 255, 255, 0.65);
}

/* 小見出し（PC表示のみ） */
.p-sp-hero__eyebrow {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.45);
  letter-spacing: 0.04em;
  line-height: 1.6;
  margin-bottom: var(--space-2);
}

/* メイン見出し */
.p-sp-hero__headline {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-3);
}

/* 価値カード（2枚横並び・コンテンツ幅に収める） */
.p-sp-hero__value-cards {
  display: grid;
  grid-template-columns: repeat(2, auto);
  gap: 0.375rem;
  margin-bottom: var(--space-3);
}

.p-sp-hero__value-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.625rem;
  background-color: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--border-radius);
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.4;
}

.p-sp-hero__value-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.45);
}

.p-sp-hero__value-icon svg {
  width: 16px;
  height: 16px;
}

/* ─────────────────────────────────────────────
   価格ボックス（白カード・視線の主役）
   ───────────────────────────────────────────── */
.p-sp-hero__price-block {
  background-color: #ffffff;
  border-radius: 6px;
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  box-shadow: 0 6px 32px rgba(0, 0, 0, 0.4);
}

/* バッジ行: 先着10社限定 ＋ 創業記念価格 */
.p-sp-hero__price-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: var(--space-2);
}

.p-sp-hero__price-limited {
  display: inline-block;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.2em 0.65em;
  border-radius: 2px;
  white-space: nowrap;
}

.p-sp-hero__price-header-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
}

/* 「この3つが全部込み」見出し */
.p-sp-hero__package-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 0;
}

/* 内訳3点リスト */
.p-sp-hero__package-list {
  list-style: none;
  margin-bottom: var(--space-2);
}

.p-sp-hero__package-item {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--color-border);
}

.p-sp-hero__package-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.p-sp-hero__package-num {
  font-size: 0.625rem;
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: 0.06em;
  flex-shrink: 0;
  width: 1.5rem;
  line-height: 1;
}

.p-sp-hero__package-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.3;
}

/* 通常価格（比較・打ち消し線） */
.p-sp-hero__price-compare {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-top: var(--space-2);
  border-top: 1px solid var(--color-border);
  margin-bottom: 0.125rem;
}

.p-sp-hero__price-regular-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.p-sp-hero__price-regular-num {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: #ccc;
}

.p-sp-hero__price-regular-num small {
  font-size: var(--text-xs);
}

/* 創業記念価格（大数字・主役） */
.p-sp-hero__price-main {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  line-height: 1;
}

.p-sp-hero__price-main-num {
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: -0.03em;
  font-family: var(--font-en), var(--font-ja);
  line-height: 1;
}

.p-sp-hero__price-main-num em {
  font-size: var(--text-xl);
  font-style: normal;
  font-family: var(--font-ja);
  letter-spacing: 0;
  font-weight: 700;
}

.p-sp-hero__price-main-tax {
  font-size: var(--text-xs);
  color: var(--color-primary);
}

/* 実質価格補足（広告費除いた実費の一行メモ） */
.p-sp-hero__price-net {
  border-top: 1px solid var(--color-border);
  padding-top: 0.5rem;
  margin-top: 0.375rem;
  font-size: 0.6875rem;
  color: var(--color-text);
  line-height: 1.5;
}

.p-sp-hero__price-net-label {
  display: block;
  font-size: 0.625rem;
  color: var(--color-text-muted);
  margin-top: 0.1rem;
}

/* ─────────────────────────────────────────────
   CTAブロック（価格直下・縦積み・フル幅）
   ───────────────────────────────────────────── */
.p-sp-hero__cta-block {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}

.p-sp-hero__cta-primary {
  width: 100%;
  justify-content: center;
}

.p-sp-hero__cta-secondary {
  background-color: transparent;
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.28);
  width: 100%;
  justify-content: center;
}

.p-sp-hero__cta-secondary:hover {
  background-color: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.55);
}

/* 安心材料 */
.p-sp-hero__reassurance {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.p-sp-hero__reassurance-item {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.35);
  line-height: 1.5;
  padding-left: 1.1em;
  position: relative;
}

.p-sp-hero__reassurance-item::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.2);
  font-size: 0.7em;
  top: 0.2em;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */

/* タブレット (1024px未満) */
@media (max-width: 1023px) {
  .p-sp-hero__col--content {
    padding: var(--space-8) var(--space-4);
  }

  .p-sp-hero__headline {
    font-size: var(--text-lg);
  }

  .p-sp-hero__price-main-num {
    font-size: 2.5rem;
  }
}

/* スマホ (767px以下) — 縦積み: テキスト先→画像後 */
@media (max-width: 767px) {
  .p-sp-hero__grid {
    grid-template-columns: 1fr;
    min-height: unset;
  }

  /* テキスト列: min-height 100svh でCTAまでFV内に収める */
  .p-sp-hero__col--content {
    align-items: flex-start;
    justify-content: flex-start;
    padding: var(--space-4) var(--space-3) var(--space-4);
    min-height: 100svh;
  }

  .p-sp-hero__content-inner {
    max-width: 100%;
  }

  /* 画像はFV下（スクロール後） */
  .p-sp-hero__col--image {
    height: 200px;
    position: relative;
  }

  /* モバイル非表示 */
  .p-sp-hero__eyebrow {
    display: none;
  }

  .p-sp-hero__headline {
    font-size: 1.375rem;
    line-height: 1.3;
    margin-bottom: var(--space-2);
  }

  .p-sp-hero__value-cards {
    gap: 0.3rem;
    margin-bottom: var(--space-2);
  }

  .p-sp-hero__value-card {
    font-size: 0.6875rem;
    padding: 0.4rem 0.5rem;
    gap: 0.375rem;
  }

  .p-sp-hero__price-block {
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-2);
  }

  .p-sp-hero__price-header {
    margin-bottom: var(--space-1);
  }

  .p-sp-hero__package-label {
    font-size: 0.625rem;
    padding-bottom: 0.25rem;
  }

  .p-sp-hero__package-item {
    padding: 0.3rem 0;
    gap: 0.5rem;
  }

  .p-sp-hero__package-name {
    font-size: var(--text-xs);
  }

  .p-sp-hero__price-compare {
    padding-top: var(--space-1);
    margin-bottom: 0;
  }

  .p-sp-hero__price-main-num {
    font-size: 2.25rem;
  }

  .p-sp-hero__price-main-num em {
    font-size: var(--text-md);
  }

  .p-sp-hero__cta-block {
    gap: 0.375rem;
    margin-bottom: var(--space-2);
  }
}

/* スマホFV対策: 375×667でprice-net(実質15万行)までをFVに収める
   適用順: 1.value-cards非表示 2.padding縮小 3.package-list詰め 4.subline/reassurance非表示 */
@media (max-width: 767px) {
  /* 1. value-cards: trust-badgesと内容が重複。FVでは価格情報を優先して非表示 */
  .p-sp-hero__value-cards {
    display: none;
  }

  /* 2. hero上下padding: 32px→24px（計16px削減） */
  .p-sp-hero__col--content {
    padding: var(--space-3) var(--space-3);
  }

  /* 3. package-listの行間・下マージンを詰める */
  .p-sp-hero__package-item {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
  }

  .p-sp-hero__package-list {
    margin-bottom: var(--space-1);
  }

  /* 4. 長文サブライン・安心リスト（trust-badgesが内容を代替）を非表示 */
  .p-sp-hero__subline {
    display: none;
  }

  .p-sp-hero__reassurance {
    display: none;
  }
}

/* PC (768px以上): 動画カラム absolute 化で境界を画面中央寄りに移動
   【方式】absolute — テキスト列のグリッド幅(3fr)は変えず折り返しに影響なし
   ────────────────────────────────────────────────────────────────────
   斜め方向: 右上→左下（上端が右、下端が左）
   width: 54%  → 動画左端 = 下端境界 = 46% from left
   clip-path: polygon(X% 0, 100% 0, 100% 100%, 0 100%) X=15%
              → 上端境界 = 46% + 15%×54% ≈ 54% from left
   幅の差: 54% − 46% = 8%（画面幅に対する斜め幅）
   角度調整: X を変える（大→急斜め、小→緩い）、width との連動推奨
   ──────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .p-sp-hero__grid {
    position: relative; /* 動画カラムの absolute 基準点 */
  }

  /* テキスト列: グリッド背景(primary色)に委ねて transparent、z-index で前面固定
     price-block は白カード(background: #fff)なので透明化による可読性への影響なし */
  .p-sp-hero__col--content {
    position: relative;
    z-index: 1;
    background-color: transparent;
  }

  /* 動画列: 右端固定 absolute — テキスト列の 3fr グリッド幅には影響しない
     width 変更時は上記コメントの境界位置(46%, 54%)も連動して更新すること */
  .p-sp-hero__col--image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 54%; /* ← 下端境界 = 46% from left。変更時は clip-path も連動 */
    height: auto;
    z-index: 0;
    clip-path: polygon(15% 0, 100% 0, 100% 100%, 0 100%); /* ← X=15% 初期値 */
  }

  /* object-position: 通路・機械の構図を斜め境界の右側に確保 */
  .p-sp-hero__video,
  .p-sp-hero__video-fallback {
    object-position: 55% center; /* 映像構図に合わせて調整可 */
  }
}

/* スマホ (767px以下): 動画カラムをヒーロー全面の背景レイヤーに変換
   グリッドを position: relative にし、image col を absolute で背面に敷く */
@media (max-width: 767px) {
  .p-sp-hero__grid {
    position: relative;
  }

  /* テキスト列: 黒背景を除去して動画が透けるように、z-index で前面に固定 */
  .p-sp-hero__col--content {
    position: relative;
    z-index: 1;
    background-color: transparent;
  }

  /* 動画列: グリッド全面を覆う背景レイヤーに */
  .p-sp-hero__col--image {
    position: absolute;
    inset: 0;
    height: auto; /* height: 200px を打ち消す */
    z-index: 0;
  }

  /* 縦グラデーション: 動画の上に重ねて文字可読性を確保
     上部 0.88 → 中段 0.70 → 下部 0.45
     動画が「暗→明」で最終フレームが明るいため TOP より濃いめに設定 */
  .p-sp-hero__col--image::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.88) 0%,
      rgba(10, 10, 10, 0.70) 50%,
      rgba(10, 10, 10, 0.45) 100%
    );
    pointer-events: none;
  }
}

/* ==========================================================================
   use-cases セクション (.p-sp-use-cases)
   ========================================================================== */

.p-sp-use-cases {
  background-color: var(--color-surface);
}

.p-sp-use-cases__lead {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  text-align: center;
}

.p-sp-use-cases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  max-width: 800px;
  margin-inline: auto;
  margin-top: var(--space-8);
}

.p-sp-use-cases__card {
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
}

.p-sp-use-cases__card-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  border-radius: 2px;
  padding: 0.15rem 0.5rem;
  margin-bottom: var(--space-3);
}

.p-sp-use-cases__card-icon {
  margin-bottom: var(--space-3);
  color: var(--color-text-muted);
}

.p-sp-use-cases__card-heading {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: var(--space-3);
}

.p-sp-use-cases__card-body {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.p-sp-use-cases__card-tag {
  display: block;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-2);
  margin-bottom: 0;
}

.p-sp-use-cases__bridge {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  text-align: center;
}

@media (max-width: 767px) {
  .p-sp-use-cases__grid {
    grid-template-columns: 1fr;
  }

  .p-sp-use-cases__lead br {
    display: none;
  }

  .p-sp-use-cases__bridge {
    padding: var(--space-4);
  }
}

/* ==========================================================================
   02. 課題提起 (.p-sp-problems)
   ========================================================================== */

.p-sp-problems {
  background-color: var(--color-bg);
}

.p-sp-problems__lead {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: var(--space-8);
}

.p-sp-problems__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  max-width: 880px;
  margin-inline: auto;
  list-style: none;
}

.p-sp-problems__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-problems__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  position: relative;
  margin-top: 0.15em;
}

.p-sp-problems__icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-text-muted);
  transform: translate(-50%, -50%);
}

.p-sp-problems__text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.7;
}

.p-sp-problems__close {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-8);
  text-align: center;
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.7;
}

.p-sp-problems__close p + p {
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .p-sp-problems__grid {
    grid-template-columns: 1fr;
  }

  .p-sp-problems__lead br {
    display: none;
  }
}

/* ==========================================================================
   03. 問題の本質 (.p-sp-insight)
   ========================================================================== */

.p-sp-insight {
  background-color: var(--color-surface);
}

.p-sp-insight__inner {
  max-width: var(--container-md);
  margin-inline: auto;
}

.p-sp-insight__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.35;
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-4);
  border-bottom: 2px solid var(--color-primary);
}

.p-sp-insight__body {
  margin-bottom: var(--space-6);
}

.p-sp-insight__body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-insight__checklist {
  list-style: none;
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  margin-block: var(--space-4);
}

.p-sp-insight__checklist li {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  padding: var(--space-1) 0;
  padding-left: 1.25em;
  position: relative;
  line-height: 1.6;
}

.p-sp-insight__checklist li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

.p-sp-insight__conclusion {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
}

.p-sp-insight__conclusion p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.85;
}

.p-sp-insight__conclusion p + p {
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .p-sp-insight__heading {
    font-size: var(--text-lg);
  }
}

/* ==========================================================================
   04. 商品提示 (.p-sp-product)
   ========================================================================== */

.p-sp-product {
  background-color: var(--color-bg);
}

.p-sp-product__sub {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-product__body {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-sp-product__body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-product__benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  max-width: 760px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  list-style: none;
}

.p-sp-product__benefit {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
}

.p-sp-product__benefit-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: relative;
  margin-top: 0.1em;
}

.p-sp-product__benefit-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5px;
  height: 9px;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: translate(-60%, -60%) rotate(45deg);
}

.p-sp-product__cta-wrap {
  text-align: center;
}

@media (max-width: 767px) {
  .p-sp-product__benefits {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   05. オフライン (.p-sp-offline)
   ========================================================================== */

.p-sp-offline {
  background-color: var(--color-surface);
}

.p-sp-offline__content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-bottom: var(--space-12);
}

.p-sp-offline__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.35;
  margin-bottom: var(--space-5);
}

.p-sp-offline__body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-offline__img-wrap {
  border-radius: var(--border-radius);
  overflow: hidden;
  background-color: var(--color-bg);
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.p-sp-offline__img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フロー図 */
.p-sp-offline__diagram {
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-offline__diagram-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: var(--space-2);
}

.p-sp-offline__diagram-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.7;
  margin-bottom: var(--space-6);
}

.p-sp-offline__flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  list-style: none;
  position: relative;
  margin-bottom: var(--space-6);
}

.p-sp-offline__flow::before {
  content: '';
  position: absolute;
  top: 24px;
  left: calc(100% / 12);
  right: calc(100% / 12);
  height: 1px;
  background-color: var(--color-border);
  z-index: 0;
}

.p-sp-offline__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-inline: var(--space-1);
  position: relative;
  z-index: 1;
}

.p-sp-offline__step-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: var(--text-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
  flex-shrink: 0;
}

.p-sp-offline__step-title {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.4;
  margin-bottom: var(--space-1);
}

.p-sp-offline__step-sub {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.p-sp-offline__diagram-note {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  text-align: center;
}

.p-sp-offline__diagram-note p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

@media (max-width: 1023px) {
  .p-sp-offline__flow {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
  }

  .p-sp-offline__flow::before {
    display: none;
  }
}

@media (max-width: 767px) {
  .p-sp-offline__content {
    grid-template-columns: 1fr;
    gap: var(--space-5);
    margin-bottom: var(--space-8);
  }

  .p-sp-offline__img-col {
    order: -1;
  }

  .p-sp-offline__heading {
    font-size: var(--text-lg);
  }

  .p-sp-offline__diagram {
    padding: var(--space-4);
  }

  .p-sp-offline__diagram-title {
    font-size: var(--text-md);
  }

  .p-sp-offline__flow {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .p-sp-offline__step {
    flex-direction: row;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-3);
  }

  .p-sp-offline__step-num {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    margin-bottom: 0;
  }

  .p-sp-offline__step-sub {
    font-size: var(--text-xs);
  }
}

/* ==========================================================================
   06. 含まれること (.p-sp-included)
   ========================================================================== */

.p-sp-included {
  background-color: var(--color-bg);
}

.p-sp-included__sub {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-included__center-label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  margin-block: var(--space-8);
  padding: var(--space-4) var(--space-6);
  background-color: var(--color-primary);
  border-radius: var(--border-radius);
  text-align: center;
  max-width: 480px;
  margin-inline: auto;
}

.p-sp-included__center-label span {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.08em;
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 0.2em 0.75em;
  border-radius: 2px;
}

.p-sp-included__center-label strong {
  font-size: var(--text-lg);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.3;
}

.p-sp-included__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-3);
  list-style: none;
  counter-reset: included-counter;
}

.p-sp-included__card {
  padding: var(--space-4);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: box-shadow var(--transition);
}

.p-sp-included__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.07);
}

.p-sp-included__num {
  display: block;
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-border);
  line-height: 1;
  margin-bottom: var(--space-2);
}

.p-sp-included__title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
  line-height: 1.4;
}

.p-sp-included__desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.p-sp-included__close {
  margin-top: var(--space-8);
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
}

.p-sp-included__close p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 600;
}

@media (max-width: 1199px) {
  .p-sp-included__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1023px) {
  .p-sp-included__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .p-sp-included__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .p-sp-included__center-label {
    padding: var(--space-3) var(--space-4);
  }

  .p-sp-included__center-label strong {
    font-size: var(--text-md);
  }
}

@media (max-width: 479px) {
  .p-sp-included__grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   07. 3ヶ月フロー (.p-sp-flow)
   ========================================================================== */

.p-sp-flow {
  background-color: var(--color-surface);
}

.p-sp-flow__sub {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-flow__timeline {
  display: grid;
  grid-template-columns: 3fr 2fr 3fr;
  gap: 0;
  margin-top: 5rem;
  align-items: stretch;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.p-sp-flow__month {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--color-border);
}

.p-sp-flow__month:last-child {
  border-right: none;
}

.p-sp-flow__month-header {
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-primary);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.25em;
}

.p-sp-flow__month-label {
  font-family: var(--font-en), var(--font-ja);
  font-size: var(--text-base);
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.p-sp-flow__month-sub {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.65);
}

.p-sp-flow__steps {
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  flex: 1;
  background-color: var(--color-bg);
}

.p-sp-flow__step {
  padding: var(--space-3) var(--space-3);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-flow__step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-primary);
  color: #ffffff;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 50%;
  margin-bottom: var(--space-2);
}

.p-sp-flow__step-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-1);
  line-height: 1.4;
}

.p-sp-flow__step-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.75;
}

.p-sp-flow__close {
  margin-top: var(--space-8);
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  max-width: 640px;
  margin-inline: auto;
}

.p-sp-flow__close p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-flow__close p + p {
  margin-top: var(--space-1);
}

@media (max-width: 1023px) {
  .p-sp-flow__timeline {
    grid-template-columns: 1fr;
  }

  .p-sp-flow__month {
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }

  .p-sp-flow__month:last-child {
    border-bottom: none;
  }

  .p-sp-flow__steps {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .p-sp-flow__step {
    flex: 1 1 calc(50% - var(--space-2));
    min-width: 200px;
  }
}

@media (max-width: 767px) {
  .p-sp-flow__steps {
    flex-direction: column;
  }

  .p-sp-flow__step {
    flex: none;
    width: 100%;
  }
}

/* ==========================================================================
   08. 1媒体集中 (.p-sp-media)
   ========================================================================== */

.p-sp-media {
  background-color: var(--color-bg);
}

.p-sp-media__sub {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-media__body {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-sp-media__body p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-media__compare {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-3);
  align-items: stretch;
  max-width: 840px;
  margin-inline: auto;
  margin-bottom: var(--space-6);
}

.p-sp-media__col {
  padding: var(--space-5);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.p-sp-media__col--dispersed {
  background-color: var(--color-surface);
}

.p-sp-media__col--focused {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.p-sp-media__col-title {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--space-4);
  line-height: 1.3;
}

.p-sp-media__col--dispersed .p-sp-media__col-title {
  color: var(--color-text-muted);
}

.p-sp-media__col--focused .p-sp-media__col-title {
  color: #ffffff;
}

.p-sp-media__col-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.p-sp-media__col-item {
  font-size: var(--text-sm);
  padding-left: 1.5em;
  position: relative;
  line-height: 1.6;
}

.p-sp-media__col-item--minus {
  color: var(--color-text-muted);
}

.p-sp-media__col-item--minus::before {
  content: '✕';
  position: absolute;
  left: 0;
  color: var(--color-border);
  font-size: var(--text-xs);
  top: 0.15em;
}

.p-sp-media__col-item--plus {
  color: rgba(255, 255, 255, 0.9);
}

.p-sp-media__col-item--plus::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 700;
  top: 0.1em;
}

.p-sp-media__col-note {
  font-size: var(--text-xs);
  padding-top: var(--space-3);
  border-top: 1px solid;
  line-height: 1.5;
}

.p-sp-media__col--dispersed .p-sp-media__col-note {
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.p-sp-media__col--focused .p-sp-media__col-note {
  color: rgba(255, 255, 255, 0.55);
  border-color: rgba(255, 255, 255, 0.15);
}

.p-sp-media__col-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-1);
}

.p-sp-media__col-sep-arrow {
  font-size: var(--text-lg);
  color: var(--color-border);
}

.p-sp-media__message {
  text-align: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  max-width: 640px;
  margin-inline: auto;
}

.p-sp-media__message p {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
}

.p-sp-media__message-note {
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  color: var(--color-text-muted) !important;
  margin-top: var(--space-1);
}

@media (max-width: 767px) {
  .p-sp-media__compare {
    grid-template-columns: 1fr;
  }

  .p-sp-media__col-sep {
    padding-block: var(--space-1);
    transform: rotate(90deg);
  }
}

/* ==========================================================================
   09. おすすめ (.p-sp-recommend)
   ========================================================================== */

.p-sp-recommend {
  background-color: var(--color-surface);
}

.p-sp-recommend__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.p-sp-recommend__block {
  padding: var(--space-5);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.p-sp-recommend__block--fit {
  background-color: var(--color-bg);
}

.p-sp-recommend__block--not {
  background-color: var(--color-bg);
}

.p-sp-recommend__block-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.p-sp-recommend__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p-sp-recommend__item {
  font-size: var(--text-sm);
  color: var(--color-text);
  padding-left: 1.75em;
  position: relative;
  line-height: 1.6;
}

.p-sp-recommend__item--check::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--color-primary);
  font-weight: 700;
}

.p-sp-recommend__item--cross {
  color: var(--color-text-muted);
}

.p-sp-recommend__item--cross::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-border);
}

.p-sp-recommend__close {
  max-width: var(--container-md);
  margin-inline: auto;
  text-align: center;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-bg);
}

.p-sp-recommend__close p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-recommend__close p + p {
  margin-top: var(--space-2);
}

@media (max-width: 767px) {
  .p-sp-recommend__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ==========================================================================
   10. 料金 (.p-sp-price)
   ========================================================================== */

.p-sp-price {
  background-color: var(--color-bg);
}

.p-sp-price__sub {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-price__box {
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--space-8);
  padding: var(--space-8);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-price__badge {
  display: inline-block;
  padding: 0.25em 0.875em;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  border: 1.5px solid var(--color-primary);
  border-radius: 2px;
  color: var(--color-primary);
  margin-bottom: var(--space-4);
}

.p-sp-price__main {
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.p-sp-price__regular-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.p-sp-price__regular-label {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.p-sp-price__regular-num {
  font-size: var(--text-md);
  color: var(--color-text-muted);
  text-decoration: line-through;
  text-decoration-color: var(--color-border);
}

.p-sp-price__regular-num small {
  font-size: var(--text-xs);
}

.p-sp-price__current-row {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.p-sp-price__current-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.p-sp-price__current-num {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-en), var(--font-ja);
  letter-spacing: -0.02em;
  line-height: 1;
}

.p-sp-price__current-tax {
  font-size: var(--text-sm);
  color: var(--color-primary);
}

.p-sp-price__notes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 1.5em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.p-sp-price__included-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

.p-sp-price__included-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-1) var(--space-5);
  list-style: none;
  margin-bottom: var(--space-5);
}

.p-sp-price__included-item {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.5;
}

.p-sp-price__included-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  background-color: var(--color-primary);
  border-radius: 50%;
  position: relative;
}

.p-sp-price__included-check::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 7px;
  border-right: 1.5px solid #ffffff;
  border-bottom: 1.5px solid #ffffff;
  transform: translate(-55%, -60%) rotate(45deg);
}

.p-sp-price__limit-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
}

.p-sp-price__close {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
}

.p-sp-price__cta-wrap {
  text-align: center;
  margin-top: var(--space-6);
}

@media (max-width: 767px) {
  .p-sp-price__box {
    padding: var(--space-5) var(--space-4);
  }

  .p-sp-price__current-num {
    font-size: var(--text-2xl);
  }

  .p-sp-price__included-list {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   11. 先着10社 (.p-sp-limited)
   ========================================================================== */

.p-sp-limited {
  background-color: var(--color-primary);
  padding-block: var(--space-16);
}

.p-sp-limited__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.p-sp-limited__count {
  display: flex;
  align-items: baseline;
  gap: var(--space-1);
}

.p-sp-limited__count-num {
  font-size: 4.5rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1;
  letter-spacing: -0.02em;
}

.p-sp-limited__count-unit {
  font-size: var(--text-lg);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
}

.p-sp-limited__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
}

.p-sp-limited__body {
  text-align: left;
  max-width: 560px;
}

.p-sp-limited__body p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-limited__note {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .p-sp-limited {
    padding-block: var(--space-12);
  }

  .p-sp-limited__heading {
    font-size: var(--text-lg);
  }

  .p-sp-limited__count-num {
    font-size: 3.5rem;
  }

  .p-sp-limited__body {
    text-align: center;
  }
}

/* ==========================================================================
   12. 提供条件 (.p-sp-notes)
   ========================================================================== */

.p-sp-notes {
  background-color: var(--color-surface);
}

.p-sp-notes__list {
  max-width: 720px;
  margin-inline: auto;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  overflow: hidden;
}

.p-sp-notes__item {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  padding-left: calc(var(--space-5) + 1.25em);
  position: relative;
}

.p-sp-notes__item:last-child {
  border-bottom: none;
}

.p-sp-notes__item::before {
  content: '–';
  position: absolute;
  left: var(--space-5);
  color: var(--color-border);
}

.p-sp-notes__close {
  max-width: 720px;
  margin-inline: auto;
  margin-top: var(--space-6);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-bg);
  border-radius: var(--border-radius);
}

.p-sp-notes__close p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-notes__close p + p {
  margin-top: var(--space-1);
}

/* ==========================================================================
   13. FAQ (.p-sp-faq)
   ========================================================================== */

.p-sp-faq {
  background-color: var(--color-bg);
}

.p-sp-faq__list {
  max-width: 720px;
  margin-inline: auto;
}

.p-sp-faq__item {
  border-top: 1px solid var(--color-border);
}

.p-sp-faq__item:last-child {
  border-bottom: 1px solid var(--color-border);
}

.p-sp-faq__summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding-block: var(--space-4);
  list-style: none;
  cursor: pointer;
  transition: color var(--transition);
}

.p-sp-faq__summary::-webkit-details-marker {
  display: none;
}

.p-sp-faq__summary:hover .p-sp-faq__q-text {
  color: #333;
}

.p-sp-faq__summary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

.p-sp-faq__q-label,
.p-sp-faq__a-label {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
  border-radius: 50%;
  margin-top: 0.1em;
}

.p-sp-faq__q-label {
  background-color: var(--color-primary);
  color: #ffffff;
}

.p-sp-faq__a-label {
  border: 1.5px solid var(--color-border);
  color: var(--color-text-muted);
}

.p-sp-faq__q-text {
  flex: 1;
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.55;
  font-family: var(--font-ja);
}

.p-sp-faq__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  position: relative;
  margin-top: 0.3em;
}

.p-sp-faq__icon::before,
.p-sp-faq__icon::after {
  content: '';
  position: absolute;
  background-color: var(--color-text-muted);
  border-radius: 1px;
}

.p-sp-faq__icon::before {
  top: 50%;
  left: 0;
  right: 0;
  height: 1.5px;
  transform: translateY(-50%);
}

.p-sp-faq__icon::after {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1.5px;
  transform: translateX(-50%);
  transition: transform var(--transition), opacity var(--transition);
}

.p-sp-faq__item[open] .p-sp-faq__icon::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

.p-sp-faq__answer {
  display: flex;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
}

.p-sp-faq__answer-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
}

/* ==========================================================================
   14. 最終CTA (.p-sp-final-cta)
   ========================================================================== */

.p-sp-final-cta {
  background-color: var(--color-primary);
  padding-block: var(--space-16);
}

.p-sp-final-cta__inner {
  max-width: var(--container-md);
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.p-sp-final-cta__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.35;
}

.p-sp-final-cta__body {
  max-width: 560px;
  text-align: left;
}

.p-sp-final-cta__body p {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-final-cta__micro {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.45);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .p-sp-final-cta {
    padding-block: var(--space-12);
  }

  .p-sp-final-cta__heading {
    font-size: var(--text-lg);
  }

  .p-sp-final-cta__body {
    text-align: center;
  }

  .p-sp-final-cta .c-button {
    width: 100%;
  }
}

/* ==========================================================================
   15. フォーム (.p-sp-form)
   ========================================================================== */

.p-sp-form {
  background-color: var(--color-surface);
}

.p-sp-form__inner {
  max-width: 680px;
  margin-inline: auto;
}

.p-sp-form__header {
  margin-bottom: var(--space-8);
  text-align: center;
}

.p-sp-form__heading {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: var(--space-4);
}

.p-sp-form__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  text-align: left;
  margin-bottom: var(--space-4);
}

.p-sp-form__lead p + p {
  margin-top: var(--space-3);
}

.p-sp-form__limit-note {
  padding: var(--space-4);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  text-align: left;
}

.p-sp-form__limit-note p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.p-sp-form__body {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-8);
  margin-bottom: var(--space-3);
}

.p-sp-form__submit-note {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.8;
  text-align: center;
}

.p-sp-form__placeholder {
  text-align: center;
  padding: var(--space-6);
}

.p-sp-form__placeholder-text {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.p-sp-form__mail-link {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.p-sp-form__admin-notice {
  margin-top: var(--space-4);
  padding: var(--space-3);
  background-color: #fffbe6;
  border: 1px solid #f0d44a;
  border-radius: var(--border-radius);
  font-size: var(--text-sm);
  color: #7a6100;
}

.p-sp-form__privacy {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.7;
}

.p-sp-form__privacy a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* CF7フォームスタイル（.p-contact-form__body と同等） */
.p-sp-form__body .wpcf7 {
  margin: 0;
}

.p-sp-form__body .wpcf7-form p {
  margin-bottom: var(--space-4);
}

.p-sp-form__body .wpcf7-form p:last-child {
  margin-bottom: 0;
}

.p-sp-form__body .wpcf7-form-control-wrap {
  display: block;
  margin-top: var(--space-1);
}

.p-sp-form__body .wpcf7-form input[type="text"],
.p-sp-form__body .wpcf7-form input[type="email"],
.p-sp-form__body .wpcf7-form input[type="tel"],
.p-sp-form__body .wpcf7-form textarea,
.p-sp-form__body .wpcf7-form select {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  font-family: var(--font-ja);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  line-height: 1.5;
  transition: border-color var(--transition);
  -webkit-appearance: none;
  appearance: none;
}

.p-sp-form__body .wpcf7-form input:focus,
.p-sp-form__body .wpcf7-form textarea:focus,
.p-sp-form__body .wpcf7-form select:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-color: var(--color-primary);
}

.p-sp-form__body .wpcf7-form textarea {
  min-height: 10rem;
  resize: vertical;
}

.p-sp-form__body .wpcf7-form label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.p-sp-form__body .wpcf7-form .wpcf7-submit {
  display: block;
  width: 100%;
  padding: 1rem 2rem;
  margin-top: var(--space-2);
  font-family: var(--font-ja);
  font-size: var(--text-base);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-surface);
  background-color: var(--color-primary);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}

.p-sp-form__body .wpcf7-form .wpcf7-submit:hover {
  background-color: #333;
  border-color: #333;
}

.p-sp-form__body .wpcf7-form .wpcf7-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.p-sp-form__body .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.25rem;
  font-size: var(--text-xs);
  color: #c0392b;
}

.p-sp-form__body .wpcf7-form input.wpcf7-not-valid,
.p-sp-form__body .wpcf7-form textarea.wpcf7-not-valid {
  border-color: #c0392b;
}

.p-sp-form__body .wpcf7-response-output {
  margin-top: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--border-radius);
  font-size: var(--text-sm);
  line-height: 1.7;
  border: 1px solid transparent;
}

.p-sp-form__body .wpcf7-form.sent .wpcf7-response-output {
  background-color: #f0faf0;
  color: #1e7e34;
  border-color: #c3e6c3;
}

.p-sp-form__body .wpcf7-form.failed .wpcf7-response-output,
.p-sp-form__body .wpcf7-form.invalid .wpcf7-response-output {
  background-color: #fdf0f0;
  color: #c0392b;
  border-color: #f0c0c0;
}

@media (min-width: 600px) {
  .p-sp-form__body .wpcf7-form .wpcf7-submit {
    width: auto;
    min-width: 220px;
  }
}

@media (max-width: 767px) {
  .p-sp-form__body {
    padding: var(--space-5) var(--space-4);
  }
}

/* ==========================================================================
   16. 共通セクションラベル (.p-sp-section-label)
       各セクション見出し上に添えるアイコン＋テキストラベル
   ========================================================================== */

.p-sp-section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.p-sp-section-label svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* insight セクション専用ラベル（独立ブロック内のため別クラス） */
.p-sp-insight__section-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
}

.p-sp-insight__label-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   17. 課題提起 アイコン強化 (.p-sp-problems)
   ========================================================================== */

.p-sp-problems__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  background-color: var(--color-bg);
  /* 既存の ::before 疑似要素を上書きして SVG を使う */
  position: static;
}

.p-sp-problems__icon::before {
  content: none; /* 既存の疑似要素を無効化 */
}

.p-sp-problems__icon svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* ==========================================================================
   18. オフライン相談 理由カード (.p-sp-offline__reasons)
   ========================================================================== */

.p-sp-offline__reasons {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.p-sp-offline__reason {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-offline__reason-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  margin-top: 0.1em;
}

.p-sp-offline__reason-icon svg {
  display: block;
}

.p-sp-offline__reason-body {
  flex: 1;
}

.p-sp-offline__reason-title {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 0.3em;
  line-height: 1.4;
}

.p-sp-offline__reason-text {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.75;
}

/* 2枚目画像（sub-hearing.png） */
.p-sp-offline__img-caption-wrap {
  margin-top: var(--space-2);
  border-radius: var(--border-radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-bg);
}

.p-sp-offline__hearing-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 767px) {
  .p-sp-offline__img-caption-wrap {
    display: none; /* スマホでは2枚目は非表示（縦積みで過剰にならないよう） */
  }
}

/* ==========================================================================
   19. 含まれること フロー視覚化 (.p-sp-included)
   ========================================================================== */

.p-sp-included__flow-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  flex-wrap: wrap;
  margin-block: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-included__flow-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
}

.p-sp-included__flow-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-primary);
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-primary);
  border-radius: 2px;
  padding: 0.2em 0.75em;
  letter-spacing: 0.06em;
}

.p-sp-included__flow-name {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.4;
}

.p-sp-included__flow-arrow {
  font-size: var(--text-md);
  color: var(--color-border);
  font-weight: 400;
  padding-inline: 0.25rem;
}

/* wireframe 画像 */
.p-sp-included__wireframe-wrap {
  margin-bottom: var(--space-5);
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.p-sp-included__wireframe-img {
  width: 100%;
  height: auto;
  display: block;
}

/* カードのトップ行（番号＋フェーズバッジ） */
.p-sp-included__card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-1);
}

.p-sp-included__phase-badge {
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.15em 0.55em;
  letter-spacing: 0.05em;
  line-height: 1;
}

/* カードのアイコン */
.p-sp-included__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.p-sp-included__card-icon svg {
  display: block;
}

/* ==========================================================================
   20. 3ヶ月フロー プログレス表示 (.p-sp-flow__progress)
   ========================================================================== */

.p-sp-flow__progress {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
}

.p-sp-flow__progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.375rem;
  position: relative;
}

.p-sp-flow__progress-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-surface);
  border: 2px solid var(--color-border);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-en), var(--font-ja);
}

.p-sp-flow__progress-step--active .p-sp-flow__progress-num {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.p-sp-flow__progress-step--goal .p-sp-flow__progress-num {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #ffffff;
}

.p-sp-flow__progress-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-primary);
  font-family: var(--font-en), var(--font-ja);
}

.p-sp-flow__progress-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
  text-align: center;
}

.p-sp-flow__progress-connector {
  width: 80px;
  height: 1px;
  background-color: var(--color-border);
  margin-bottom: 2.5rem;
  position: relative;
}

.p-sp-flow__progress-connector::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  border-left: 6px solid var(--color-border);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

/* レポート画像ブロック */
.p-sp-flow__report-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-8);
  padding: var(--space-8);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
}

.p-sp-flow__report-img-col img {
  border-radius: var(--border-radius);
  width: 100%;
  height: auto;
}

.p-sp-flow__report-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.2em 0.75em;
  letter-spacing: 0.1em;
  font-family: var(--font-en), var(--font-ja);
  margin-bottom: var(--space-2);
}

.p-sp-flow__report-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
  margin-bottom: var(--space-3);
}

.p-sp-flow__report-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
}

@media (max-width: 1023px) {
  .p-sp-flow__progress-connector {
    width: 48px;
  }
}

@media (max-width: 767px) {
  .p-sp-flow__progress {
    gap: 0;
  }

  .p-sp-flow__progress-connector {
    width: 32px;
  }

  .p-sp-flow__progress-desc {
    font-size: 0.625rem;
    white-space: normal;
    max-width: 60px;
  }

  .p-sp-flow__report-visual {
    grid-template-columns: 1fr;
    gap: var(--space-4);
    padding: var(--space-4);
  }
}

/* ==========================================================================
   21. 1媒体集中 分析画像ブロック (.p-sp-media__analysis)
   ========================================================================== */

.p-sp-media__analysis-visual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-8);
  align-items: center;
  margin-top: var(--space-6);
  margin-bottom: var(--space-8);
}

.p-sp-media__analysis-text p {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-media__analysis-img {
  border-radius: var(--border-radius);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.p-sp-media__analysis-img img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 767px) {
  .p-sp-media__analysis-visual {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .p-sp-media__analysis-img {
    order: -1;
  }
}

/* ==========================================================================
   22. 注意事項 アイコン付きスタイル (.p-sp-notes__item-icon)
   ========================================================================== */

.p-sp-notes__item {
  /* 既存の ::before を上書き */
  padding-left: calc(var(--space-5) + 1.75em);
}

.p-sp-notes__item::before {
  content: none;
}

.p-sp-notes__item-icon {
  position: absolute;
  left: var(--space-5);
  top: var(--space-3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.p-sp-notes__item-icon svg {
  display: block;
}

/* ==========================================================================
   23. 料金 内訳フェーズバッジ (.p-sp-price__included-phase)
   ========================================================================== */

.p-sp-price__included-item {
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.p-sp-price__included-label {
  flex: 1;
}

.p-sp-price__included-phase {
  flex-shrink: 0;
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  padding: 0.15em 0.5em;
  letter-spacing: 0.04em;
  line-height: 1;
  align-self: center;
  white-space: nowrap;
}

/* ==========================================================================
   24. スマホ CTA ボタン幅の統一
   ========================================================================== */

@media (max-width: 767px) {
  /* 商品概要・価格セクションのCTAラッパー内ボタンをフル幅に */
  .p-sp-product__cta-wrap .c-button,
  .p-sp-price__cta-wrap .c-button {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* 先着10社セクション: flex-column align-items:center 配下でフル幅 */
  .p-sp-limited__inner .c-button {
    display: flex;
    width: 100%;
    justify-content: center;
  }

  /* フォームセクションに下余白: SP追従CTAバーに隠れないよう */
  .p-sp-form {
    padding-bottom: 5rem;
  }
}

/* ==========================================================================
   25. 追従CTA (.p-sp-sticky)
   ========================================================================== */

/* ── PC: 右下固定カード ─────────────────────────────────────── */
.p-sp-sticky__pc {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 900;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.125rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 210px;
}

.p-sp-sticky__pc-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  text-align: center;
  line-height: 1.5;
}

.p-sp-sticky__pc .c-button {
  width: 100%;
  justify-content: center;
  font-size: var(--text-xs);
  padding: 0.7em 1em;
}

.p-sp-sticky__pc-note {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-align: center;
  line-height: 1.5;
}

/* SP版はPC非表示 */
.p-sp-sticky__sp {
  display: none;
}

/* ── SP: 下部固定バー ───────────────────────────────────────── */
@media (max-width: 767px) {
  /* PC固定カードを非表示 */
  .p-sp-sticky__pc {
    display: none;
  }

  /* SP固定バー */
  .p-sp-sticky__sp {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 900;
    background-color: var(--color-primary);
    padding: 0.625rem var(--space-3) calc(0.625rem + env(safe-area-inset-bottom));
  }

  .p-sp-sticky__sp-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 480px;
    margin-inline: auto;
    background-color: #ffffff;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.3;
    padding: 0.875em 1.25em;
    border-radius: var(--border-radius);
    text-decoration: none;
    letter-spacing: 0.02em;
    min-height: 48px;
  }
}

/* ==========================================================================
   26. 課題セクション 追加要素 (.p-sp-problems)
   ========================================================================== */

.p-sp-problems__section-target {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-1);
}

/* ==========================================================================
   27. 解決策セクション アイコンカード (.p-sp-product__items-grid)
   ========================================================================== */

.p-sp-product__items-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  list-style: none;
  margin-bottom: var(--space-6);
}

.p-sp-product__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.625rem;
  padding: var(--space-3) var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  text-align: center;
}

.p-sp-product__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background-color: var(--color-bg);
  border-radius: 50%;
  color: var(--color-text);
  flex-shrink: 0;
}

.p-sp-product__item-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
}

@media (max-width: 767px) {
  .p-sp-product__items-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==========================================================================
   28. フローセクション「なぜ3ヶ月か」追加ブロック (.p-sp-flow__why-block)
   ========================================================================== */

.p-sp-flow__why-block {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-8);
}

.p-sp-flow__why-heading {
  font-size: var(--text-md);
  font-weight: 700;
  color: var(--color-text);
  letter-spacing: 0.02em;
  margin-bottom: var(--space-3);
}

.p-sp-flow__why-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.p-sp-flow__why-body p {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.75;
}

.p-sp-flow__why-result {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-3);
}

.p-sp-flow__why-result-label {
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
}

.p-sp-flow__why-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
}

.p-sp-flow__why-checklist li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
  padding: 0.3em 0.75em;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 20px;
}

.p-sp-flow__why-checklist li::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: var(--color-text);
  border-radius: 50%;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .p-sp-flow__why-block {
    padding: var(--space-4) var(--space-3);
  }

  .p-sp-flow__why-heading {
    font-size: var(--text-base);
  }
}

/* ==========================================================================
   29. 計測指標セクション (.p-sp-metrics)
   ========================================================================== */

.p-sp-metrics__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.p-sp-metrics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-2);
  list-style: none;
  margin-bottom: var(--space-5);
}

.p-sp-metrics__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: var(--space-4) var(--space-2);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  text-align: center;
  transition: box-shadow var(--transition);
}

.p-sp-metrics__card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.p-sp-metrics__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  flex-shrink: 0;
}

.p-sp-metrics__card-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.5;
}

.p-sp-metrics__note {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p-sp-metrics__note p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

@media (max-width: 1023px) {
  .p-sp-metrics__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .p-sp-metrics__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2);
  }

  .p-sp-metrics__card {
    padding: var(--space-3) var(--space-2);
  }

  .p-sp-metrics__card-icon {
    width: 40px;
    height: 40px;
  }

  .p-sp-metrics__note {
    text-align: left;
  }
}

/* ==========================================================================
   30. hero trust-badges (.p-sp-hero__trust-badges)
   ========================================================================== */

.p-sp-hero__trust-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: var(--space-3);
}

.p-sp-hero__trust-badges span {
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.48);
  padding: 0.15em 0.5em;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
}

/* ==========================================================================
   31. 計測設計説明 (.p-sp-metrics__measurement)
   ========================================================================== */

.p-sp-metrics__measurement {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.p-sp-metrics__measurement-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.p-sp-metrics__measurement-body {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

@media (max-width: 767px) {
  .p-sp-metrics__measurement {
    text-align: left;
  }
}

/* ==========================================================================
   32. 広告費注記 (.p-sp-price__ad-note)
   ========================================================================== */

.p-sp-price__ad-note {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-4);
  margin-top: var(--space-4);
}

.p-sp-price__ad-note-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-2);
}

.p-sp-price__ad-note-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.p-sp-price__ad-note-list li {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  padding-left: 1em;
  position: relative;
}

.p-sp-price__ad-note-list li::before {
  content: '・';
  position: absolute;
  left: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   33. お渡しするもの (.p-sp-deliverables)
   ========================================================================== */

.p-sp-deliverables {
  background-color: var(--color-bg);
}

.p-sp-deliverables__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.p-sp-deliverables__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  list-style: none;
  margin-bottom: var(--space-6);
}

.p-sp-deliverables__card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  padding: var(--space-5) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p-sp-deliverables__card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-text);
  flex-shrink: 0;
}

.p-sp-deliverables__card-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.5;
}

.p-sp-deliverables__card-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.p-sp-deliverables__note {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p-sp-deliverables__note p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

@media (max-width: 1023px) {
  .p-sp-deliverables__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .p-sp-deliverables__grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .p-sp-deliverables__note {
    text-align: left;
  }
}

/* ==========================================================================
   34. よくある改善ポイント例 (.p-sp-improvements)
   ========================================================================== */

.p-sp-improvements {
  background-color: var(--color-surface);
}

.p-sp-improvements__sub {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  margin-top: var(--space-2);
}

.p-sp-improvements__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  margin-bottom: var(--space-6);
}

.p-sp-improvements__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-sp-improvements__num {
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.p-sp-improvements__cards {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.p-sp-improvements__card {
  padding: var(--space-4);
  border-radius: var(--border-radius);
}

.p-sp-improvements__card--before {
  background: var(--color-bg);
  border-left: 3px solid var(--color-border);
}

.p-sp-improvements__card--after {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
}

.p-sp-improvements__card-label {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: var(--space-2);
  color: var(--color-text-muted);
}

.p-sp-improvements__card--after .p-sp-improvements__card-label {
  color: var(--color-primary);
}

.p-sp-improvements__card-text {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.75;
}

.p-sp-improvements__arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.p-sp-improvements__disclaimer {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.p-sp-improvements__disclaimer p {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.7;
}

@media (max-width: 767px) {
  .p-sp-improvements__cards {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .p-sp-improvements__arrow {
    transform: rotate(90deg);
    width: fit-content;
    margin-inline: auto;
  }
}

/* ==========================================================================
   35. 向いているケース／向いていないケース (.p-sp-recommend) — 2カラム版
   ========================================================================== */

.p-sp-recommend__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.p-sp-recommend__col {
  border-radius: var(--border-radius);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
}

.p-sp-recommend__col--fit {
  background: var(--color-surface);
}

.p-sp-recommend__col--not-fit {
  background: var(--color-bg);
}

.p-sp-recommend__col-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--color-border);
}

.p-sp-recommend__col-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}

.p-sp-recommend__col-icon--fit {
  background-color: var(--color-primary);
  color: #fff;
}

.p-sp-recommend__col-icon--not-fit {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.p-sp-recommend__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.p-sp-recommend__item {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.65;
  padding-left: 1.5rem;
  position: relative;
}

.p-sp-recommend__item--check::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 14px;
  height: 9px;
  border-left: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(-45deg);
}

.p-sp-recommend__item--cross::before {
  content: '×';
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.p-sp-recommend__close {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.p-sp-recommend__close p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
}

@media (max-width: 767px) {
  .p-sp-recommend__grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }

  .p-sp-recommend__col {
    padding: var(--space-5) var(--space-4);
  }

  .p-sp-recommend__close {
    text-align: left;
  }
}

/* ==========================================================================
   36. 無料相談でわかること (.p-sp-consult) — フォーム直前・黒背景
   ========================================================================== */

.p-sp-consult {
  background-color: var(--color-primary);
  color: #fff;
}

.p-sp-consult .l-section__header {
  text-align: center;
}

.p-sp-consult__heading {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  margin-bottom: var(--space-2);
}

.p-sp-consult__sub {
  font-size: var(--text-base);
  color: rgba(255, 255, 255, 0.65);
  margin-top: 0;
}

.p-sp-consult__list {
  list-style: none;
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.p-sp-consult__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.p-sp-consult__item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.8);
  flex-shrink: 0;
  margin-top: 0.1em;
}

.p-sp-consult__item-text {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.7;
}

.p-sp-consult__lead {
  max-width: 560px;
  margin-inline: auto;
  margin-bottom: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  text-align: center;
}

.p-sp-consult__lead p {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.8;
}

.p-sp-consult__cta {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   37. スマホ追従CTA × フォーム干渉対策
   ========================================================================== */

@media (max-width: 767px) {
  .p-sp-form {
    padding-bottom: 7rem;
  }

  .p-sp-form .wpcf7-submit,
  .p-sp-form input[type="submit"] {
    margin-bottom: var(--space-4);
  }
}

/* ==========================================================================
   38. 価格表示 補足テキスト / 「込み」アクセントカラー
   ========================================================================== */

/* 「広告費10万円込み」の「込み」だけ赤字 */
.p-sp-hero__package-komikoji {
  color: #b33225;
}

/* FV 通常価格の税抜サブテキスト */
.p-sp-hero__price-regular-sub {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.1em;
}

/* FV 創業記念価格の税抜サブテキスト */
.p-sp-hero__price-main-sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.15em;
  letter-spacing: 0;
}

/* 料金セクション 通常価格の税抜サブテキスト */
.p-sp-price__regular-sub {
  display: block;
  font-size: var(--text-xs);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 0.1em;
}

/* 料金セクション 創業記念価格の税抜サブテキスト */
.p-sp-price__current-sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  margin-bottom: var(--space-3);
}

/* 料金セクション 税込み注釈 */
.p-sp-price__tax-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

/* キーワードリード文（productセクション） */
.p-sp-product__lead {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  line-height: 1.75;
}

/* ==========================================================================
   39. FV サブライン（h1直下のリード文）
   ========================================================================== */

.p-sp-hero__subline {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.75;
  letter-spacing: 0.02em;
  margin-top: var(--space-2);
  margin-bottom: var(--space-3);
}

/* ==========================================================================
   40. 料金セクション「なぜこの価格なのか」ブロック
   ========================================================================== */

.p-sp-price__why-box {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-6);
  margin-top: var(--space-6);
  margin-bottom: var(--space-6);
}

.p-sp-price__why-heading {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: var(--space-4);
  letter-spacing: 0.01em;
}

.p-sp-price__why-body p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--space-3);
}

.p-sp-price__why-body p:last-child {
  margin-bottom: 0;
}

/* 代表メッセージ引用ブロック */
.p-sp-price__why-quote {
  border-left: 3px solid var(--color-border);
  padding-left: var(--space-4);
}

.p-sp-price__why-close-line {
  font-weight: 700;
  color: var(--color-primary);
}

.p-sp-price__why-signature {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  text-align: right;
  letter-spacing: 0.03em;
}

.p-sp-price__why-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

@media (max-width: 767px) {
  .p-sp-price__why-box {
    padding: var(--space-4);
  }
}

/* ==========================================================================
   41. 人感メッセージセクション (.p-sp-message)
   ========================================================================== */

.p-sp-message {
  background-color: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.p-sp-message__inner {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-8);
  align-items: flex-start;
  max-width: 720px;
  margin-inline: auto;
}

.p-sp-message__icon-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding-top: 4px;
}

.p-sp-message__icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1.5px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.p-sp-message__icon {
  display: block;
}

.p-sp-message__icon-line {
  width: 1px;
  flex: 1;
  min-height: 40px;
  background-color: var(--color-border);
  margin-top: var(--space-2);
}

.p-sp-message__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.45;
  letter-spacing: 0.01em;
  margin-bottom: var(--space-4);
}

.p-sp-message__body p {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.85;
  margin-bottom: var(--space-3);
}

.p-sp-message__body p:last-child {
  margin-bottom: 0;
}

.p-sp-message__sig {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.p-sp-message__sig-bar {
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background-color: var(--color-primary);
}

.p-sp-message__sig-name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 0.05em;
}

@media (max-width: 767px) {
  .p-sp-message__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }

  .p-sp-message__icon-col {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }

  .p-sp-message__icon-line {
    flex: 1;
    min-height: auto;
    height: 1px;
    min-width: 40px;
    margin-top: 0;
  }

  .p-sp-message__heading {
    font-size: var(--text-lg);
  }
}

/* ==========================================================================
   42. 3ヶ月後の選択肢セクション (.p-sp-after-flow)
   ========================================================================== */

.p-sp-after-flow__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
  max-width: 700px;
  margin-top: var(--space-3);
}

.p-sp-after-flow__row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: var(--space-8);
  margin-bottom: var(--space-8);
}

.p-sp-after-flow__card {
  flex: 1;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-5);
}

.p-sp-after-flow__card--choice {
  border-color: var(--color-primary);
  background-color: var(--color-bg);
}

.p-sp-after-flow__arrow {
  flex-shrink: 0;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--space-7);
  color: var(--color-text-muted);
}

.p-sp-after-flow__card-top {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.p-sp-after-flow__num {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.08em;
}

.p-sp-after-flow__label {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.4;
}

.p-sp-after-flow__items {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}

.p-sp-after-flow__item {
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.6;
  padding-left: var(--space-4);
  position: relative;
}

.p-sp-after-flow__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-border);
}

.p-sp-after-flow__card--choice .p-sp-after-flow__item::before {
  background-color: var(--color-primary);
}

.p-sp-after-flow__card-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  line-height: 1.6;
}

.p-sp-after-flow__message {
  padding: var(--space-5) var(--space-6);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
}

.p-sp-after-flow__message p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin-bottom: var(--space-2);
}

.p-sp-after-flow__message p:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .p-sp-after-flow__row {
    flex-direction: column;
    gap: var(--space-4);
  }

  .p-sp-after-flow__arrow {
    display: none;
  }

  .p-sp-after-flow__card {
    width: 100%;
  }
}

/* ==========================================================================
   Web広告のしくみ (.p-sp-ad-exposure)
   ========================================================================== */

.p-sp-ad-exposure {
  background-color: var(--color-bg);
}

.p-sp-ad-exposure__lead {
  max-width: var(--container-md);
  margin-inline: auto;
  margin-top: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.85;
  text-align: center;
}

.p-sp-ad-exposure__block-heading {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin-bottom: var(--space-4);
  text-align: center;
}

/* --- Block 1: 対比グリッド --- */
.p-sp-ad-exposure__contrast-block {
  margin-top: var(--space-8);
}

.p-sp-ad-exposure__contrast-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 800px;
  margin-inline: auto;
}

.p-sp-ad-exposure__contrast-col {
  padding: var(--space-4) var(--space-4);
  border-radius: var(--border-radius);
  border: 1px solid var(--color-border);
}

.p-sp-ad-exposure__contrast-col--old {
  background-color: var(--color-surface);
}

.p-sp-ad-exposure__contrast-col--new {
  background-color: var(--color-primary);
}

.p-sp-ad-exposure__contrast-title {
  font-size: var(--text-sm);
  font-weight: 700;
  margin-bottom: var(--space-3);
}

.p-sp-ad-exposure__contrast-col--old .p-sp-ad-exposure__contrast-title {
  color: var(--color-text-muted);
}

.p-sp-ad-exposure__contrast-col--new .p-sp-ad-exposure__contrast-title {
  color: #fff;
}

.p-sp-ad-exposure__contrast-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.p-sp-ad-exposure__contrast-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  line-height: 1.65;
}

.p-sp-ad-exposure__contrast-col--old .p-sp-ad-exposure__contrast-item {
  color: var(--color-text-muted);
}

.p-sp-ad-exposure__contrast-col--new .p-sp-ad-exposure__contrast-item {
  color: rgba(255,255,255,0.9);
}

.p-sp-ad-exposure__contrast-icon {
  flex-shrink: 0;
  font-style: normal;
  font-size: 0.75rem;
  margin-top: 0.15em;
}

.p-sp-ad-exposure__contrast-item--ng .p-sp-ad-exposure__contrast-icon {
  color: #b33225;
}

.p-sp-ad-exposure__contrast-item--ok .p-sp-ad-exposure__contrast-icon {
  color: rgba(255,255,255,0.6);
}

.p-sp-ad-exposure__contrast-close {
  max-width: 680px;
  margin-inline: auto;
  margin-top: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.85;
  text-align: center;
}

/* --- Block 2: 計測ループ --- */
.p-sp-ad-exposure__metrics-block {
  margin-top: var(--space-8);
}

.p-sp-ad-exposure__metrics-body {
  max-width: 660px;
  margin-inline: auto;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.85;
  text-align: center;
  margin-bottom: var(--space-6);
}

/* --- Block 3: エリアターゲティング --- */
.p-sp-ad-exposure__targeting-block {
  margin-top: var(--space-8);
}

.p-sp-ad-exposure__targeting-body {
  max-width: 660px;
  margin-inline: auto;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.85;
  text-align: center;
  margin-bottom: var(--space-6);
}

/* --- 図解共通 --- */
.p-sp-ad-exposure__figure {
  margin: 0 auto var(--space-2);
  max-width: 360px;
  text-align: center;
}

.p-sp-ad-exposure__loop-svg,
.p-sp-ad-exposure__circles-svg {
  width: 100%;
  height: auto;
  display: block;
}

.p-sp-ad-exposure__figure-caption {
  margin-top: var(--space-2);
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}

/* --- Bridge --- */
.p-sp-ad-exposure__bridge {
  max-width: 640px;
  margin-inline: auto;
  margin-top: var(--space-8);
  padding: var(--space-4) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  background-color: var(--color-surface);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--color-text);
  line-height: 1.85;
}

/* --- モバイル対応 --- */
@media (max-width: 767px) {
  .p-sp-ad-exposure__contrast-grid {
    grid-template-columns: 1fr;
  }

  .p-sp-ad-exposure__lead br {
    display: none;
  }

  .p-sp-ad-exposure__bridge {
    padding: var(--space-4);
  }
}

/* ==========================================================================
   27. ヒーロー 動画 (.p-sp-hero__video)
   ========================================================================== */

.p-sp-hero__video,
.p-sp-hero__video-fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.p-sp-hero__video-fallback {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .p-sp-hero__video {
    display: none;
  }
  .p-sp-hero__video-fallback {
    display: block;
  }
}

@media (max-width: 767px) {
  .p-sp-hero__video,
  .p-sp-hero__video-fallback {
    object-position: 60% center;
  }
}