/* =============================================================
 * cv_improvements_v6.css (2026-05-07)
 * KPI ギャップ解消（CTR/CVR）対応の追加スタイル。
 *
 * 背景:
 *   - 直近37日 (2026-04-01〜05-07) でcta_click/PV ≒ 17% (KPI 40% 比 -23pt)
 *   - LP→決済完了 CVR ≒ 0.07% (KPI 10% 比 -9.93pt)
 *   - m.facebook 経由のEngagement Rate 4.9% (要モバイル改善)
 *
 * 主な追加:
 *   1. 主CTA直前の reassurance 行 ".mv-trial-reassure"
 *   2. モバイルでの可読性向上、ライト・グリーン背景の小バッジ表現
 * ============================================================= */

.mv-trial-reassure {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  margin: 8px auto 12px;
  padding: 8px 16px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #115e2a;
  background: linear-gradient(180deg, #eafaf0 0%, #d6f4e2 100%);
  border: 1px solid #9fdfb3;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(17, 94, 42, 0.08);
  max-width: 100%;
  text-align: center;
}

@media (max-width: 768px) {
  .mv-trial-reassure {
    width: calc(100% - 24px);
    margin-left: auto;
    margin-right: auto;
    font-size: 12px;
    padding: 6px 12px;
    gap: 4px 10px;
  }
}

/* m.facebook など低エンゲージ流入向け: ヒーローCTA間の隙間を詰めて
   ファーストビューに 主要CV要素を収める */
@media (max-width: 480px) {
  .mv .mv-trial-reassure {
    margin-top: 4px;
    margin-bottom: 8px;
    font-size: 11.5px;
  }
  .mv .mv-btn__area--three {
    gap: 8px;
  }
  .mv .mv-btn__area--three .btn-trial--lg a p {
    font-size: 16px;
    line-height: 1.3;
  }
  .mv .mv-btn__area--three .btn-trial--lg a p small {
    font-size: 11px !important;
    margin-top: 2px !important;
  }
}

/* ヒーロー直下のreassureはトライアルボタンとセットで読まれる前提。
   印刷/AT (Assistive Technology) 環境でも順序が崩れないよう、
   margin-block-end をボタンエリアに合わせる。 */
.mv-trial-reassure + .mv-btn__area {
  margin-top: 0;
}