/*
 * BENTEN Web Works — 記事内CTA（SEO-P4 施策B / t-20260811-09）
 *
 * tailwind-built.css はビルド済みの固定ファイルで、ビルドに含まれていない
 * ユーティリティクラスは効かない。CTA は Tailwind に依存せず素の CSS で書く。
 * ブランド色: primary rgb(61 154 84) = #3d9a54 / dark #2b8745（tailwind-built.css より）
 *
 * .blog-article-content 側が p / a に margin と色を当てているので、CTA 内は都度打ち消す。
 * とくに `.blog-article-content a { color:#2d8f47; text-decoration:underline }` は
 * 特異度 (0,1,1)。単独クラス (0,1,0) では負けてボタンの文字が緑＋下線になる
 * （2026-08-19 のプレビュー撮影で実際に発生）。CTA 内のリンク指定は
 * 必ず `.benten-cta` を前置して (0,2,0) 以上にすること。
 */

.benten-cta {
  margin: 2.5rem 0;
  border-radius: 10px;
  font-size: 15px;
  line-height: 1.75;
}

.benten-cta p {
  margin: 0;
}

/* --- 文脈CTA（本文中・軽量） --- */

.benten-cta--inline {
  border-left: 4px solid #3d9a54;
  background: #f4f9f5;
  padding: 1.1rem 1.25rem;
}

.benten-cta--inline .benten-cta__text {
  color: #374151;
}

.benten-cta--inline .benten-cta__link {
  margin-top: 0.65rem;
}

.benten-cta--inline .benten-cta__link a {
  color: #2b8745;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.benten-cta--inline .benten-cta__link a:hover {
  color: #1f6c34;
}

/* --- サービス誘導ブロック（記事末） --- */

.benten-cta--block {
  border: 1px solid #d7e7db;
  background: #f8fbf9;
  padding: 1.75rem 1.5rem;
  text-align: center;
}

.benten-cta .benten-cta__heading {
  font-size: 1.2rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
  line-height: 1.5;
}

.benten-cta--block .benten-cta__text {
  color: #4b5563;
  text-align: left;
  margin-bottom: 1.25rem;
}

.benten-cta .benten-cta__button {
  display: inline-block;
  background: #3d9a54;
  color: #ffffff;
  font-weight: 700;
  padding: 0.85rem 1.9rem;
  border-radius: 10px;
  text-decoration: none;
  text-underline-offset: 0;
  transition: background-color 0.2s ease;
}

.benten-cta .benten-cta__button:hover,
.benten-cta .benten-cta__button:focus {
  background: #2b8745;
  color: #ffffff;
}

.benten-cta__sub {
  margin-top: 1rem;
  font-size: 14px;
  color: #6b7280;
}

.benten-cta .benten-cta__sub a {
  color: #4b5563;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.benten-cta .benten-cta__sub a:hover {
  color: #2b8745;
}

.benten-cta__sep {
  margin: 0 0.6rem;
  color: #d1d5db;
}

/* スマホでは横並びのサブリンクが窮屈になるので縦に落とす */
@media (max-width: 480px) {
  .benten-cta--block {
    padding: 1.5rem 1.1rem;
  }
  .benten-cta .benten-cta__button {
    display: block;
  }
  .benten-cta .benten-cta__sub a {
    display: block;
    margin: 0.35rem 0;
  }
  .benten-cta__sep {
    display: none;
  }
}