/* ==========================================================
   入力のエラー表示（すべての画面で共通）
   赤い枠・淡い赤の背景・赤い文字で、エラーだとすぐ分かるようにする
   ========================================================== */
.form-errors, .errors, .vp-error {
  border: 1px solid #d32f2f !important;
  background: #fdecea !important;
  color: #b71c1c !important;
  border-radius: 3px;
  padding: 12px 16px !important;
  margin: 0 0 18px !important;
  font-weight: 400;
}
.form-errors-title, .vp-error > strong { display: block; margin: 0 0 4px; font-weight: 800; color: #b71c1c; }
.form-errors ul, .errors ul, .vp-error ul { margin: 4px 0 0; padding-left: 1.3em; }
.form-errors li, .errors li, .vp-error li { 
  color: #b71c1c;
  font-weight: normal;
  font-size: 13px;  
}

/* エラーのあった入力欄（Rails が field_with_errors で囲む）：赤い枠と赤い文字 */
.field_with_errors { display: contents; }
.field_with_errors input:not([type="checkbox"]):not([type="radio"]),
.field_with_errors select, .field_with_errors textarea {
  border-color: #d32f2f !important; background: #fff8f7 !important; box-shadow: 0 0 0 3px #d32f2f1f !important;
}
.field_with_errors label, label:has(.field_with_errors) { color: #b71c1c; }
.field_with_errors input[type="checkbox"], .field_with_errors input[type="radio"] { outline: 2px solid #d32f2f; outline-offset: 2px; }