/* popup style */
/* ===== ボタン ===== */
.popup-btn {
  display: block;              /* 中央揃えのためblockに変更 */
  margin: 16px auto;           /* 上下に隙間・左右autoで中央揃え */
  padding: 12px 32px;          /* 上下・左右の内側の余白 */
  font-size: 15px;
  background: #fff;
  border: 2px solid #999;      /* 枠線（太さ・スタイル・色） */
  border-radius: 999px;        /* 角を丸める（大きい値で完全な丸角） */
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.popup-btn:hover {
  background: #f5f5f5;
  border-color: #555;          /* ホバー時に枠線を濃くする */
}
.popup-btn:active {
  transform: scale(0.98);
}

/* ===== オーバーレイ ===== */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.overlay.open { display: flex; }

/* ===== モーダル本体 ===== */
.modal {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1.5rem;
  width: min(400px, 90vw);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

/* ===== ヘッダー ===== */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid #eee;
}
.modal-title {
  font-size: 16px;
  font-weight: 500;
}

/* ===== クローズボタン ===== */
.close-btn {
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #666;
  padding: 4px 6px;
  border-radius: 6px;
  line-height: 1;
}
.close-btn:hover { background: #f0f0f0; color: #111; }

/* ===== 本文 ===== */
.modal-body {
  font-size: 15px;
  line-height: 1.8;
  color: #222;
}