/*!
 * rf-cta-injector CSS v0.1.0
 *
 * CTAブロック用の最小スタイル。Cocoon の既存カラムやボタンと衝突しないように
 * .rf-cta-block / .rf-cta で名前空間を切り、外側マージンと最大幅のみ定義する。
 * ダークモード前提 (honne-rev.com はダーク基調) で、白系背景でも読めるよう
 * ボーダー＋背景色の両方を持たせる。
 */

.rf-cta-block {
  margin: 2em 0;
  padding: 1.2em;
  border: 1px solid #ff1e7a;
  border-radius: 10px;
  background: linear-gradient(135deg, #1b0d1a 0%, #120820 100%);
  box-shadow: 0 6px 20px rgba(255, 30, 122, 0.15);
  text-align: center;
}

.rf-cta-block--intro { border-color: #ff7aa2; }
.rf-cta-block--mid   { border-color: #ff1e7a; }
.rf-cta-block--end   {
  border-color: #ffd166;
  background: linear-gradient(135deg, #1a0f1c 0%, #24142c 100%);
}

.rf-cta {
  display: inline-block;
  padding: 0.9em 1.6em;
  min-width: 60%;
  max-width: 100%;
  font-weight: 700;
  font-size: 1.05em;
  line-height: 1.3;
  color: #ffffff !important;
  text-decoration: none !important;
  border-radius: 999px;
  background: #ff1e7a;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.rf-cta:hover,
.rf-cta:focus {
  background: #ff4c96;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 30, 122, 0.35);
}

.rf-cta-intro { background: #d81b60; }
.rf-cta-mid   { background: #ff1e7a; }
.rf-cta-end   {
  background: #ffb703;
  color: #1a0f1c !important;
}
.rf-cta-end:hover,
.rf-cta-end:focus {
  background: #ffc838;
  color: #000 !important;
}

/* スマホ */
@media (max-width: 640px) {
  .rf-cta-block { padding: 1em 0.8em; }
  .rf-cta       { width: 100%; min-width: 0; padding: 0.9em 1em; font-size: 1em; }
}

/* Cocoon の .blogcard などが .rf-cta の上書きを狙ってくることがあるため保険 */
.rf-cta-block a.rf-cta { text-decoration: none; }