#payjp-checkout-form {
  max-width: 31.25rem;
  padding: 1.5rem;
  border: 0.0625rem solid #ccc;
  border-radius: 0.5rem;
  background-color: #fafafa;
  font-family: Arial, sans-serif;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* 全体のフィールド共通 */
#payjp-checkout-form .input-field,
#payjp-checkout-form .textarea-field,
#payjp-checkout-form .radio-field,
#payjp-checkout-form .checkbox-group {
  display: flex;
  gap: 0.5rem;
}


/* チェックボックス横並び */
#payjp-checkout-form .checkbox-field {
  flex-direction: row;
  align-items: center;
}

/* テキスト系とtextareaは縦並び */
#payjp-checkout-form .input-field,
#payjp-checkout-form .textarea-field {
  flex-direction: column;
}

/* ラベル太字：テキスト系とtextareaだけ */
#payjp-checkout-form .input-field label,
#payjp-checkout-form .textarea-field label {
  font-weight: bold;
  display: block;
}

/* ラベル通常：チェックボックス・ラジオ */
#payjp-checkout-form .checkbox-field label,
#payjp-checkout-form .radio-field label {
  font-weight: normal;
}

/* 入力欄のスタイル */
#payjp-checkout-form input[type="text"],
#payjp-checkout-form input[type="email"],
#payjp-checkout-form input[type="tel"],
#payjp-checkout-form textarea {
  width: 100%;
  padding: 0.5rem;
  border: 0.0625rem solid #ccc;
  border-radius: 0.25rem;
  box-sizing: border-box;
  font-size: 1rem;
}

/* エラーメッセージを太字に */
#payjp-checkout-form .error-message {
  color: red;
  font-size: 0.9rem;
  padding-top: 0.2rem;
  display: block;
}

#payjp-checkout-form button[type="submit"] {
  padding: 0.7rem 1.5rem;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 0.25rem;
  cursor: pointer;
  font-size: 1rem;
  transition: background-color 0.3s;
}

#payjp-checkout-form button[type="submit"]:hover {
  background-color: #005177;
}

#payjp-checkout-form button[type="submit"]:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}