/* =========================================================
   ボタン（全ページ共通・正本）
   =========================================================
   ヘッダー（_header.css）と同じ理由で切り出したファイル。
   ボタンの定義も style.css と各自己完結CSS にコピペされており、
   ページごとに見た目がズレていた（2026-08-01）。

   実際にあったズレ：
     .btn-ghost                      自己完結CSS側に丸ごと欠落
     .btn-cta,.btn-ghost,.btn-white-o{font-size:15px}（960px以下）
                                     style.css にのみ存在。他ページは14pxのまま
     .btn-lg                         style.css にのみ存在

   ヘッダー内のCTAボタンもこの定義を使うため、ここがズレると
   ヘッダー全体の印象が変わる。変更はこのファイルだけで行うこと。

   前提：--lime / --lime-hover / --navy / --ink は
   読み込み側のCSSが :root で定義している。
   ========================================================= */

.btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--lime);
  color: var(--navy);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 6px;
  transition: background .15s;
  white-space: nowrap;
}
.btn-cta:hover { background: var(--lime-hover) }
.btn-cta .arw { font-weight: 900 }

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 22px;
  border-radius: 6px;
  border: 1.5px solid var(--ink);
  transition: background .15s;
  white-space: nowrap;
}
.btn-ghost:hover { background: #F2F5F8 }

/* 濃色背景の上に置く白フチボタン（最終CTAなど） */
.btn-white-o {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1.5px solid #fff;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 36px;
  border-radius: 6px;
  transition: background .15s;
  white-space: nowrap;
}
.btn-white-o:hover { background: rgba(255,255,255,.12) }

.btn-lg { font-size: 15px !important; padding: 14px 44px !important }

/* タブレット以下は指で押しやすいよう一段大きくする
   （従来 style.css の @media 内にのみ存在し、他ページに反映されていなかった） */
@media (max-width: 960px) {
  .btn-cta,
  .btn-ghost,
  .btn-white-o { font-size: 15px }
}

/* ボタンの高さは 小40 / 中48 / 大56 の3段に固定する（UXレビュー 2026-10-19）。
   以前は padding の足し算で 44〜57px の5種類に散らばっていた。
   大（56）はヒーローと最終CTA：style.css 側で指定。ヘッダーは小（40） */
.btn-cta,
.btn-ghost,
.btn-white-o {
  min-height: 48px;
  padding-top: 0;
  padding-bottom: 0;
}
.header .btn-cta {
  min-height: 40px;
  padding-top: 0;
  padding-bottom: 0;
}