@charset "utf-8";
/* ======================================================
 フロー図の色設定
====================================================== */
/* 通常の色 */
.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: #003f98;/* 背景色 */
	color: #ffffff;/* 文字色 */
}

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

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

/* ======================================================
 FORMの色設定
====================================================== */
/* 入力例テキストの色 */
.form-textfield .eg-label,
.form-selectfield:not(.js-state-focused):not(.js-state-error):not(.error):not(.js-state-done) select {
	color: #c3c3c3;/* 文字色 */
}
/* フォーカス時の枠色 */
.form-textfield.js-state-focused,
.form-selectfield.js-state-focused {
	border-color: #003f98;/* 枠色 */
}

/* チェックボックスとラジオボタンの色 */
.form-ticksfield input[type="checkbox"]:checked + label:after {
	border-color: #121212;/* チェックの色 */
}
.form-ticksfield input[type="radio"]:checked + label:after {
	background-color: #004ea2;/* ラジオマークの色 */
}
/* 入力画面の送信ボタンと完了画面の導線ボタン */
.form-submit-button,
.form-exit-button {
	color: #ffffff;/* 文字色 */
	background-color: #003f98;/* 背景色 */
}
/* 入力画面の未入力ボタンの色 */
.form-submit-button[type="button"] {
	color: #444444;/* 文字色 */
	background-color: #ffe357;/* 背景色 */
}
/*確認画面の送信ボタン*/
.form-comfirmed-button {
	color: #ffffff;/* 文字色 */
	background-color: #003f98;/* 背景色 */
}
/*確認画面の戻るボタン*/
.form-correct-button {
	color: #000000;/* 文字色 */
	background-color: #ffffff;/* 背景色 */
}
/* エラーの背景色 */
.form-textfield.js-state-error,
.form-textfield.error,
.form-selectfield.js-state-error,
.form-selectfield.error,
.form-ticksfield.js-state-error input[type="radio"] + label,
.form-ticksfield.error input[type="radio"] + label,
.form-ticksfield.js-state-error input[type="checkbox"] + label,
.form-ticksfield.error input[type="checkbox"] + label,
.form-required .form-textfield.js-state-error,
.form-required .form-textfield.error,
.form-required .form-selectfield.js-state-error,
.form-required .form-selectfield.error,
.form-required .form-ticksfield.js-state-error input[type="radio"] + label,
.form-required .form-ticksfield.error input[type="radio"] + label {
	border-color: #cc0000;/* 枠色 */
	background-color: #fff0f0;/* 背景色 */
}
.form-ticksfield.js-state-error input[type="checkbox"] + label,
.form-ticksfield.error input[type="checkbox"] + label,
.form-ticksfield.js-state-error input[type="radio"] + label,
.form-ticksfield.error input[type="radio"] + label {
	color: #333 !important;
}
/* エラーテキストの色 */
.form-error-comment,
.form-comment.error {
	color: #cc0000;/* 文字色 */
}

.form-component__comment {
	color: #666666;
}

/* ======================================================
 背景画像の設定
====================================================== */
.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("/app-files/img/form_spritesheet.png");
}

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