/**
 * 医療従事者確認モーダル（エイジゲート）
 * サイトのブランドカラー（ブルー）＋白文字。確認済みは表示しない。
 */
.bd-agegate-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* 確認済み（はいを押した／クッキーあり）なら最初から非表示＝ちらつき防止 */
html.bd-agegate-acked .bd-agegate-overlay {
  display: none !important;
}

/* 表示中は背面スクロールを固定 */
html.bd-agegate-lock,
html.bd-agegate-lock body {
  overflow: hidden;
}

.bd-agegate-panel {
  width: 100%;
  max-width: 760px;
  /* サイトのブルー（資料請求アクション色）に合わせたグラデーション */
  background: #fff;
  color: #333;
  border-radius: 12px;
  padding: 40px 36px 34px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
  line-height: 1.9;
}

.bd-agegate-lead {
  margin: 0 0 1.6em;
  font-size: 16px;
  line-height: 1.95;
  color: #333;
}

.bd-agegate-q {
  margin: 0 0 1.8em;
  font-size: 19px;
  font-weight: 700;
  color: #1f2937;
}

.bd-agegate-actions {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
}

.bd-agegate-btn {
  min-width: 150px;
  padding: 0.7em 1.6em;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* はい：塗りつぶし（主ボタン・サイトのブルー1色に統一） */
.bd-agegate-btn--yes {
  color: #fff;
  background: var(--bd-request-header, #2563EB);
  border: 2px solid var(--bd-request-header, #2563EB);
}
.bd-agegate-btn--yes:hover,
.bd-agegate-btn--yes:focus-visible {
  background: var(--bd-request-header-hover, #1d4ed8);
  border-color: var(--bd-request-header-hover, #1d4ed8);
  outline: none;
}

/* いいえ：白地＋ブルー枠線（従ボタン） */
.bd-agegate-btn--no {
  color: var(--bd-request-header, #2563EB);
  background: #fff;
  border: 2px solid var(--bd-request-header, #2563EB);
}
.bd-agegate-btn--no:hover,
.bd-agegate-btn--no:focus-visible {
  background: rgba(37, 99, 235, 0.08);
  outline: none;
}

@media (max-width: 600px) {
  .bd-agegate-panel {
    padding: 28px 20px 24px;
  }
  .bd-agegate-lead { font-size: 14px; }
  .bd-agegate-q { font-size: 16px; }
  .bd-agegate-actions { gap: 12px; }
  .bd-agegate-btn { min-width: 120px; font-size: 15px; padding: 0.65em 1.2em; }
}