@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: #2b88e6;/* 背景色 */
  color: #ffffff;/* 文字色 */
}

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

/* ======================================================
 テキストの色設定
====================================================== */
/* 強調テキストの色 */
.form-catch {
  color: #ff8800;/* 文字色 */
}

/* ======================================================
 FORMの色設定
====================================================== */
/* フォーカス時の枠色 */
.form-textfield.js-state-focused {
  border-color: #033a7a;/* 枠色 */
}
/* 必須項目の背景色 */
.form-required .form-textfield:not(.js-state-done),
.form-required .form-ticksfield:not(.js-state-done) {
  background-color: #fff;/* 背景色 */
}
/* チェックボックスとラジオボタンの色 */
.form-ticksfield input[type="checkbox"]:checked + label:after {
  border-color: #004ea2;/* チェックの色 */
}
.form-ticksfield input[type="radio"]:checked + label:after {
  background-color: #033a7a;/* ラジオマークの色 */
}
/* 入力画面の送信ボタンと完了画面の導線ボタン */
.form-submit-button,
.form-exit-button {
  color: #ffffff;/* 文字色 */
  background-color: #4478b5;/* 背景色 */
}
/* 入力画面の未入力ボタンの色 */
.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.js-state-error:not(.js-state-focused),
.form-ticksfield.js-state-error input[type="radio"] + label,
.form-required .form-textfield.js-state-error:not(.js-state-focused),
.form-required .form-ticksfield.js-state-error input[type="radio"] + label,
.form-policy .form-policy__agree .js-state-error:not(.js-state-focused) {
  border-color: #980404;/* 枠色 */
}
.form-textfield.js-state-error:not(.js-state-focused),
.form-ticksfield.js-state-error input[type="radio"] + label,
.form-required .form-textfield.js-state-error:not(.js-state-focused),
.form-required .form-ticksfield.js-state-error input[type="radio"] + label,
.form-policy .form-policy__agree .js-state-error:not(.js-state-focused) {
  background-color: #fff3f3;
}
/* エラーテキストの色 */
.form-error-comment,
.form-error-comment > .form-error-comment__label {
  color: #980404;/* 文字色 */
}

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