/* =========================
   独立支援コンサル＆加盟店プラン
   ========================= */

.lp-section--plans {
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 60%);
}

.lp-section--plans .lp-section__head--center {
  text-align: center;
}

.lp-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 16px;
}

/* カード本体 */

.lp-plan-card {
  position: relative;
  border-radius: 20px;
  padding: 18px 20px 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  box-shadow:
    0 16px 40px rgba(15,23,42,.08),
    0 1px 2px rgba(15,23,42,.04);
  overflow: hidden;
}

.lp-plan-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(96,165,250,.14), transparent 55%),
    radial-gradient(circle at bottom right, rgba(45,212,191,.18), transparent 60%);
  opacity: .7;
  pointer-events: none;
}

.lp-plan-card--partner::before {
  background:
    radial-gradient(circle at top left, rgba(59,130,246,.16), transparent 55%),
    radial-gradient(circle at bottom right, rgba(59,130,246,.12), transparent 60%);
}

.lp-plan-card--consult::before {
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 55%),
    radial-gradient(circle at bottom right, rgba(45,212,191,.14), transparent 60%);
}

.lp-plan-header,
.lp-plan-footer,
.lp-plan-list {
  position: relative;
  z-index: 1;
}

/* タイトル周り */

.lp-plan-title {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
  margin: 4px 0 4px;
}

.lp-plan-catch {
  font-size: 13px;
  color: #1f2937;
  margin-bottom: 10px;
}

/* リスト */

.lp-plan-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
}

.lp-plan-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 6px;
  font-size: 14px;
}

.lp-plan-list li::before {
  content: "✔";
  position: absolute;
  left: 4px;
  top: 0.1em;
  font-size: 13px;
  color: #2563eb;
}

/* フッター・リンク */

.lp-plan-footer .lp-text-muted {
  font-size: 12px;
  margin-bottom: 6px;
}

.lp-plan-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
}

/* タグは既存 .lp-tag をベースにしている想定 */

.lp-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 11px;
  font-weight: 700;
}

.lp-tag--blue {
  background: #eef2ff;
  color: #1d4ed8;
}

/* レスポンシブ */

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

/* =========================
   詳細セクション（加盟店=緑 / コンサル=青）
   ========================= */

.lp-section--detail {
  background: linear-gradient(180deg, #f9fbff 0%, #ffffff 70%);
}

.lp-section--detail-partner {
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 70%);
}

.lp-section--detail-beginner {
  background: linear-gradient(180deg, #eff6ff 0%, #ffffff 70%);
}

/* 見出しを少し大きめに */

.lp-section--detail .lp-detail-heading {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.5;
}

.lp-detail-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 共通カード */

.lp-detail-card {
  border-radius: 22px;
  padding: 20px 22px 18px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  box-shadow:
    0 18px 40px rgba(15,23,42,.08),
    0 1px 2px rgba(15,23,42,.04);
}

/* 小ラベル（上の楕円） */

.lp-detail-label {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}

/* 加盟店＝緑トーン */

.lp-section--detail-partner .lp-detail-label {
  background: #dcfce7;
  border: 1px solid #bbf7d0;
  color: #166534;
}

/* コンサル＝青トーン */

.lp-section--detail-beginner .lp-detail-label {
  background: #e0edff;
  border: 1px solid #bfdbfe;
  color: #1d4ed8;
}

/* サブラベルは少し淡く */

.lp-detail-label--sub {
  opacity: .9;
}

/* タイムライン用のニュートラルラベル */

.lp-detail-label--line {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

/* スプリットカード内のボックス */

.lp-detail-card--split {
  padding: 18px 20px;
}

.lp-detail-card--split .lp-detail-box + .lp-detail-box {
  margin-top: 14px;
}

.lp-detail-box {
  border-radius: 18px;
  padding: 14px 16px 12px;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
}

/* 加盟店ボックス（緑） */

.lp-section--detail-partner .lp-detail-box--target {
  border-left: 4px solid #16a34a;
  background: #ecfdf5;
}
.lp-section--detail-partner .lp-detail-box--merit {
  border-left: 4px solid #22c55e;
  background: #f0fdf4;
}

/* コンサルボックス（青） */

.lp-section--detail-beginner .lp-detail-box--target {
  border-left: 4px solid #2563eb;
  background: #eff6ff;
}
.lp-section--detail-beginner .lp-detail-box--merit {
  border-left: 4px solid #3b82f6;
  background: #e0edff;
}

.lp-detail-box .lp-list {
  margin-bottom: 6px;
}

.lp-detail-box .lp-list li {
  font-size: 14px;
}

/* アクセントカード（他社FCとの違い） */

.lp-detail-card--accent {
  background:
    radial-gradient(circle at top left, #eff6ff, transparent 60%),
    radial-gradient(circle at bottom right, #ecfdf5, transparent 60%),
    #ffffff;
}

/* コールアウト */

.lp-callout--inline {
  margin-top: 10px;
}

/* =========================
   STEPタイムライン（加盟店/コンサル共通）
   ========================= */

.lp-detail-card--timeline,
.lp-detail-card--flow {
  padding-top: 18px;
}

.lp-step-flow {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  position: relative;
}

/* 真ん中の縦線 */

.lp-step-flow::before {
  content: "";
  position: absolute;
  left: 68px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #e5e7eb;
}

.lp-step-flow__item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.lp-step-flow__meta {
  width: 90px;
  text-align: right;
  position: relative;
  padding-top: 4px;
}

.lp-step-flow__step {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: #64748b;
}

/* 丸いドット（色はパターン別） */

.lp-step-flow__dot {
  position: absolute;
  right: -12px;
  top: 18px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 3px solid #ffffff;
  box-shadow: 0 4px 10px rgba(15,23,42,.18);
}

/* 加盟店タイムラインは緑ドット */

.lp-step-flow--partner .lp-step-flow__dot {
  background: #22c55e;
}

/* コンサルタイムラインは青ドット */

.lp-step-flow--beginner .lp-step-flow__dot {
  background: #2563eb;
}

/* 右側のカード */

.lp-step-flow__card {
  flex: 1;
  background: #ffffff;
  border-radius: 16px;
  padding: 14px 16px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 6px 16px rgba(15,23,42,.06);
}

.lp-step-flow__title {
  font-size: 15px;
  font-weight: 800;
  margin: 0 0 4px;
}

.lp-step-flow__text {
  font-size: 13px;
  color: #475569;
  margin: 0;
}

/* コンサルの流れカード内の画像 */

.lp-detail-card--flow .lp-image-card {
  margin-top: 16px;
}

/* レスポンシブ */

@media (max-width: 768px) {
  .lp-detail-card {
    padding-inline: 16px;
  }

  .lp-detail-card--split {
    padding-inline: 14px;
  }

  .lp-detail-box {
    padding-inline: 12px;
  }

  .lp-step-flow::before {
    left: 54px;
  }

  .lp-step-flow__meta {
    width: 72px;
  }

  .lp-step-flow__item {
    gap: 12px;
  }

  .lp-step-flow__card {
    padding: 12px 14px;
  }
}