@charset "UTF-8";
/* ============================================================
   Top FV CTA 強調（v3.3.5）
   - 料金ページFV CTA（page-pricing.css）の型を踏襲
   - 「無料で試してみる」1本に集約・大型化・白枠・吹き出し訴求
   - is_front_page() 条件読込（header.php）。他ページ影響なし
   ============================================================ */

/* CTAユニット：吹き出し＋ボタンを縦に重ねて中央寄せ */
.mv-contents-btn.mvFvCta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  width: auto;
}

/* 吹き出し：ボタン上端に重なる訴求（14日間無料 等） */
.mvFvCta-bubble {
  position: relative;
  z-index: 2;
  pointer-events: none;
  display: inline-block;
  background: #fff;
  color: #08061A;
  font-size: 1.5rem;
  font-weight: 700;
  padding: 9px 24px;
  border-radius: 999px;
  margin-bottom: -12px;       /* ボタンに重ねる */
  letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(8, 6, 26, 0.18);
  transition: all 0.2s;
}
.mvFvCta-bubble::after {       /* 吹き出しのしっぽ（下向き三角） */
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 9px solid transparent;
  border-top-color: #fff;
  border-bottom: 0;
  transition: all 0.2s;
}

/* ボタン本体：大型・白枠・ドロップシャドウで主役化 */
.mv-contents-btn.mvFvCta .btn-flat.is-orange {
  width: auto;
  min-width: 400px;
  height: 82px;
  font-size: 2.4rem;
  padding: 12px 44px;
  border: 2px solid #fff;
  box-shadow: 0 6px 18px rgba(245, 123, 61, 0.35);
}

@media (hover: hover) {
  .mv-contents-btn.mvFvCta .btn-flat.is-orange:hover {
    transform: translateY(-2px);
    border-color: #F57B3D;
    box-shadow: 0 10px 24px rgba(245, 123, 61, 0.45);
  }
  /* ホバー時は吹き出しもオレンジに連動 */
  .mvFvCta:has(.btn-flat:hover) .mvFvCta-bubble {
    background: #F57B3D;
    color: #fff;
    transform: translateY(-2px);
  }
  .mvFvCta:has(.btn-flat:hover) .mvFvCta-bubble::after {
    border-top-color: #F57B3D;
  }
}

/* スマホ：横幅いっぱい・サイズ調整 */
@media (max-width: 767px) {
  .mv-contents-btn.mvFvCta {
    width: 100%;
  }
  .mvFvCta-bubble {
    font-size: 1.3rem;
    padding: 8px 20px;
    margin-bottom: -11px;
  }
  .mv-contents-btn.mvFvCta .btn-flat.is-orange {
    min-width: 0;
    width: 100%;
    max-width: 340px;
    height: 62px;
    font-size: 1.8rem;
  }
}

/* ============================================================
   視線誘導の強化（v3.3.5）
   ① ボタンに矢印 → 「押せる・進める」の合図
   ② 受賞バッジとの間に余白 → ボタンを孤立させ際立たせる
   ============================================================ */
/* ② バッジと分離（テーマCSSの .mv-contents-btn margin-bottom:30px を上書き） */
.mv-contents-btn.mvFvCta {
  margin-bottom: 44px;
}
/* ① 矢印（外部リンクアイコンとは別。is-outlink 未付与なので競合しない） */
.mv-contents-btn.mvFvCta .btn-flat.is-orange::after {
  content: "→";
  margin-left: 14px;
  font-weight: bold;
  line-height: 1;
}
@media (max-width: 767px) {
  .mv-contents-btn.mvFvCta {
    margin-bottom: 32px;
  }
}