:root{
	--main_rgb: 58,128,186;
	--error: #c0392b;  /* エラー（赤） */

	--fm_err_bg: #fcfcde;

	--ui_ok_rgb: 39,174,96;
	--ui_ok: rgba(var(--ui_ok_rgb), 1);   /* UI共通 OK（緑） */
	--ui_ok_light: rgba(var(--ui_ok_rgb), 0.05);

	--ui_ng_rgb: 231,76,60;
	--ui_ng: rgba(var(--ui_ng_rgb), 1);   /* UI共通 NG（赤） */
	--ui_ng_light: rgba(var(--ui_ng_rgb), 0.05);
}

/* error text */
.err_text{ display: none; width: fit-content; margin: -0.25rem 0 0 0.5rem; padding: 0.25rem 1rem; background: var(--error); border-radius: 0.375rem; font-size: 0.75rem; color: #ff6; box-shadow: 2px 4px 6px rgba(0, 0, 0, 0.35); cursor: pointer; position: relative;  }
.err_text::before { content: ''; position: absolute; bottom: 100%; left: 1rem; border-width: 0.375rem; border-style: solid; border-color: transparent transparent var(--error) transparent; }
.err_text i{ margin-right: 0.25rem; }

/* バリデーションエラー時 */
.fm_field.is_error .inp_style, .fm_field.is_error .inp_group{ background: var(--fm_err_bg); }
.fm_field.is_error .err_text{ display: block; }


/* サーバー側バリデーションエラー用 */
.sv_vali_err{ margin: 1.5rem 0; padding: 1rem 1.25rem; background: var(--ui_ng_light); border-left: 0.75rem solid var(--error); color: var(--error); }
.sv_vali_err ul{ margin: 0; padding-left: 1rem; }
.sv_vali_err li{ margin: 0.25rem 0; }
.sv_vali_err li::before{ content: '■'; }
.sv_vali_err::before { content: "【エラー】入力内容のご確認をお願いいたします。"; display: block; margin-bottom: 0.5rem; font-size: 1rem; font-weight: bold; }