/* Suisui Form for WordPress: 入力欄の状態表示 */
:root {
	--fkwp-ng-border: #d93025;
	--fkwp-ng-bg: #fdecea;
	--fkwp-ok-border: #6db33f;
	--fkwp-ok-bg: #f1f8e9;
	--fkwp-req-bg: #d93025;
	--fkwp-req-color: #fff;
	--fkwp-req-size: 0.75em; /* 「必須」マークの文字サイズ(項目名に対する比率) */
	--fkwp-border-width: 1px;
	--fkwp-msg-size: 0.85em; /* 日本語チェックメッセージの文字サイズ(周囲の文字に対する比率) */
}

/* ブラウザ標準の立体的な枠(inset)にならないよう、枠線は明示的に指定する */
input.fkwp-ng,
textarea.fkwp-ng {
	border: var(--fkwp-border-width) solid var(--fkwp-ng-border) !important;
	background-color: var(--fkwp-ng-bg) !important;
}

input.fkwp-ok,
textarea.fkwp-ok {
	border: var(--fkwp-border-width) solid var(--fkwp-ok-border) !important;
	background-color: var(--fkwp-ok-bg) !important;
}

/* 必須マーク(項目名より小さく、赤背景・白文字) */
/* フォームプラグインのラベル用CSS(span の背景など)に上書きされないよう、見た目に関わる指定は !important にする */
.fkwp-req {
	display: inline-block !important;
	margin: 0 0.5em !important;
	padding: 0.1em 0.5em !important;
	font-size: var(--fkwp-req-size) !important;
	font-weight: 700 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.05em !important;
	color: var(--fkwp-req-color) !important;
	background: var(--fkwp-req-bg) !important;
	border-radius: 3px !important;
	vertical-align: middle !important;
	white-space: nowrap !important;
}

/* 必須マークを付けた項目に限り、フォームプラグインが付ける「*」を隠す */
.fkwp-has-badge .forminator-required,
.fkwp-has-badge .wpforms-required-label,
.fkwp-has-badge .required,
.ff-el-is-required.asterisk-right label.fkwp-has-badge::after,
.ff-el-is-required.asterisk-left label.fkwp-has-badge::before {
	display: none !important;
	content: none !important;
}

.fkwp-msg {
	display: block;
	margin-top: 0.25em;
	font-size: var(--fkwp-msg-size);
	line-height: 1.5;
	color: #b3261e;
}