/* =========================
全体余白（読みやすさ）
========================= */
.mp-contact-card,
.mp-cta-box,
.mp-note-box,
.mp-license-box {
  margin-bottom: 20px;
}

/* =========================
カード共通
========================= */
.mp-contact-card,
.mp-license-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.05);
  border: 1px solid #eef2f1;
  transition: 0.2s;
}

.mp-contact-card:hover,
.mp-license-box:hover {
  transform: translateY(-2px);
}

/* =========================
見出し
========================= */
.mp-contact-card h2,
.mp-license-box h2 {
  font-size: 18px;
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 2px solid #2bb673;
}

/* =========================
リード文
========================= */
.mp-lead {
  font-size: 14px;
  color: #333;
  margin-bottom: 12px;
}

/* =========================
悩みリスト
========================= */
.mp-highlight-box {
  background: #f5fbf8;
  border: 1px solid #dff2e8;
  border-radius: 10px;
  padding: 14px;
  margin: 16px 0;
}

.mp-highlight-box ul {
  margin: 0;
  padding-left: 18px;
}

.mp-highlight-box li {
  margin-bottom: 6px;
}

/* =========================
CTAテキスト
========================= */
.mp-cta-text {
  margin-top: 14px;
  font-size: 15px;
  color: #2bb673;
}

/* =========================
安心ブロック
========================= */
.mp-safe-box {
  background: #f9f9f9;
  border-radius: 10px;
  padding: 12px;
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.7;
}

/* =========================
CTAボックス（最重要）
========================= */
.mp-cta-box {
  background: linear-gradient(135deg, #f3fff7, #e9fff2);
  border: 2px solid #06c755;
  border-radius: 16px;
  padding: 18px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(6,199,85,0.15);
  position: relative;
}

/* CTAラベル */
.mp-cta-box::before {
  content: "おすすめ";
  position: absolute;
  top: -10px;
  left: 14px;
  background: #06c755;
  color: #fff;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
}

/* CTA見出し */
.mp-cta-heading {
  font-size: 13px;
  color: #2bb673;
  margin-bottom: 6px;
}

/* =========================
ボタン
========================= */
.mp-line-btn,
.mp-footer-btn {
  width: 100%;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-weight: bold;
  text-decoration: none;
}

/* LINEボタン */
.mp-line-btn {
  background: #06c755;
  color: #fff;
  font-size: 16px;
  padding: 15px;
  box-shadow: 0 6px 16px rgba(6,199,85,0.35);
  transition: 0.2s;
  animation: pulseBtn 2s infinite;
}

.mp-line-btn:hover {
  transform: translateY(-2px);
}

/* フッターボタン */
.mp-footer-btn-main {
  background: #2bb673;
  color: #fff;
  box-shadow: 0 4px 10px rgba(43,182,115,0.3);
  padding: 13px;
}

.mp-footer-btn-main:hover {
  transform: translateY(-2px);
}

/* アニメーション */
@keyframes pulseBtn {
  0% { transform: scale(1); }
  50% { transform: scale(1.03); }
  100% { transform: scale(1); }
}

/* =========================
補足
========================= */
.mp-micro-copy {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* =========================
注意書き
========================= */
.mp-note-box {
  background: #ffffff;
  border-radius: 12px;
  padding: 14px;
  font-size: 12px;
  color: #666;
  border: 1px solid #eee;
  line-height: 1.6;
}

/* =========================
運営情報補足
========================= */
.mp-license-sub {
  background: #f7f9f8;
  padding: 10px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* =========================
スマホ最適化
========================= */
@media (max-width: 768px) {

  .mp-contact-card,
  .mp-cta-box,
  .mp-note-box,
  .mp-license-box {
    padding: 18px;
  }

  .mp-contact-card h2,
  .mp-license-box h2 {
    font-size: 16px;
  }

  .mp-line-btn {
    font-size: 15px;
    padding: 14px;
  }

}