@charset "utf-8";
/* ======================================================
 * theme.css
 * - v1.0.0
 * ------------------------------------------------------
====================================================== */
/* ======================================================
 フロー図の色設定
====================================================== */
/* 通常の色 */
.form-flow-chart > li:before,
.form-flow-chart > li:after {
	background-color: #dbdbdb;/* 背景色 */
	color: #333333;/* 文字色 */
}
/* 現在地表示の色 */
.form-flow-chart.form-flow-input > li:nth-child(1):before,
.form-flow-chart.form-flow-input > li:nth-child(1):before,
.form-flow-chart.form-flow-input > li:nth-child(1):after,
.form-flow-chart.form-flow-confirm > li:nth-child(1):before,
.form-flow-chart.form-flow-confirm > li:nth-child(1):before,
.form-flow-chart.form-flow-confirm > li:nth-child(1):after,
.form-flow-chart.form-flow-confirm > li:nth-child(2):before,
.form-flow-chart.form-flow-confirm > li:nth-child(2):before,
.form-flow-chart.form-flow-confirm > li:nth-child(2):after,
.form-flow-chart.form-flow-finish > li:nth-child(1):before,
.form-flow-chart.form-flow-finish > li:nth-child(1):before,
.form-flow-chart.form-flow-finish > li:nth-child(1):after,
.form-flow-chart.form-flow-finish > li:nth-child(2):before,
.form-flow-chart.form-flow-finish > li:nth-child(2):before,
.form-flow-chart.form-flow-finish > li:nth-child(2):after,
.form-flow-chart.form-flow-finish > li:nth-child(3):before,
.form-flow-chart.form-flow-finish > li:nth-child(3):before,
.form-flow-chart.form-flow-finish > li:nth-child(3):after {
	background-color: #2b88e6;/* 背景色 */
	color: #ffffff;/* 文字色 */
}

/* ======================================================
 アイコンの色設定
====================================================== */
/* 必須アイコンの色 */
.form-tag-required,
.form-required .form-component_label:after {
	background-color: #ff8800;/* 背景色 */
	color: #ffffff;/* 文字色 */
}
/* 任意アイコンの色 */
.form-tag-optional,
.form-optional .form-component_label:after {
	background-color: #8c8c8c;/* 背景色 */
	color: #ffffff;/* 文字色 */
}

/* ======================================================
 テキストの色設定
====================================================== */
/* 強調テキストの色 */
.form-catch {
	color: #ff8800;/* 文字色 */
}
/* リンクテキストの色 */
.form-link {
	color: #2b88e6 !important;/* 文字色 */
}

/* ======================================================
 FORMの色設定
====================================================== */
/* 入力例テキストの色 */
.form-textfield .eg-label,
.form-selectfield:not(.state-focused):not(.state-error):not(.state-done) select {
	color: #c3c3c3;/* 文字色 */
}
/* フォーカス時の枠色 */
.form-textfield.state-focused,
.form-selectfield.state-focused {
	border-color: #2b88e6;/* 枠色 */
}
/* 必須項目の背景色 */
.form-required .form-textfield:not(.state-done),
.form-required .form-selectfield:not(.state-done),
.form-required .form-ticksfield:not(.state-done) {
	background-color: #fffbe7;/* 背景色 */
}
/* チェックボックスとラジオボタンの色 */
.form-ticksfield input[type="checkbox"]:checked + label:after {
	border-color: #004ea2;/* チェックの色 */
}
.form-ticksfield input[type="radio"]:checked + label:after {
	background-color: #004ea2;/* ラジオマークの色 */
}
/* 入力画面の送信ボタンと完了画面の導線ボタン */
.form-submit-button,
.form-exit-button {
	color: #ffffff;/* 文字色 */
	background-color: #2b88e6;/* 背景色 */
}
/* 入力画面の未入力ボタンの色 */
.form-submit-button[type="button"] {
	color: #444444;/* 文字色 */
	background-color: #ffe357;/* 背景色 */
}
/*確認画面の送信ボタン*/
.form-comfirmed-button {
	color: #ffffff;/* 文字色 */
	background-color: #2b88e6;/* 背景色 */
}
/*確認画面の戻るボタン*/
.form-correct-button {
	color: #000000;/* 文字色 */
	background-color: #ffffff;/* 背景色 */
}
/* エラーの背景色 */
.form-textfield.state-error,
.form-selectfield.state-error,
.form-ticksfield.state-error,
.form-ticksfield.state-error input[type="radio"] + label,
.form-required .form-textfield.state-error,
.form-required .form-selectfield.state-error,
.form-required .form-ticksfield.state-error,
.form-required .form-ticksfield.state-error input[type="radio"] + label {
	border-color: #e62b3d;/* 枠色 */
	background-color: #fce9eb;/* 背景色 */
}
/* エラーテキストの色 */
.form-error-comment {
	color: #e62b3d;/* 文字色 */
}

/* ======================================================
 背景画像の設定
====================================================== */
.form-submit-button[type="button"]:before,
.form-pagetop .form-pagetop_link,
.form-link[target="_blank"]:after,
.form-zip-button[target="_blank"] .form-zip-button_label:after,
.form-calender .form-calender_close,
.form-calender .form-calender_close:before {
	background-image: url(/form_common/en/esg-hsse/governance/compliance/inquiries/spritesheet.png);
}

/* ======================================================
 「必須」「任意」の文言設定
====================================================== */
.form-tag-required:after,
.form-required .form-component_label:after {
	content: "Required";
}
.form-tag-optional:after,
.form-optional .form-component_label:after {
	content: "Option";
}