/**
 * 本文の問い合わせボタン（CTA）
 *
 * 本文で <a class="cta"> と書いたリンクをボタンにする。
 * cta--secondary は、料金の目安など「問い合わせの前に見てほしいページ」向けの枠線だけのボタン。
 * Basic HTML で使える class は、テキストフォーマットの設定で cta と cta--secondary だけに絞っている。
 * ヘッダーのボタンの見た目は header.css で上書きしている。
 */

a.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px; /* スマホで押しやすい大きさ */
  margin-block: 4px;
  margin-inline-end: 8px;
  padding: 12px 20px;
  border: 1.5px solid var(--sh-accent);
  border-radius: var(--sh-radius);
  background: var(--sh-accent); /* 白い文字とのコントラスト比 5.1:1 */
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  text-decoration: none;
}

a.cta.cta--secondary {
  border-color: var(--sh-black);
  background: transparent;
  color: var(--sh-black);
}