.form-confirmation-mode {
  background: #f8f8f8;
  border: 1px solid var(--colorBlue);
  border-radius: var(--size-4);
  padding: var(--size-16);
  position: relative;
  margin-top: var(--size-16);
}

.form-confirmation-header {
  background: var(--colorBlue);
  color: white;
  padding: var(--size-12) var(--size-16);
  margin: calc(var(--size-16) * -1) calc(var(--size-16) * -1) var(--size-16) calc(var(--size-16) * -1);
  border-radius: calc(var(--size-4) - 1px) calc(var(--size-4) - 1px) 0 0;
  text-align: center;
}

.form-confirmation-title {
  margin-bottom: var(--size-4);
  font-size: var(--size-16);
  font-weight: var(--fwSemiBold);
  color: white;
}

.form-confirmation-notice {
  margin: 0;
  font-size: var(--size-12);
  color: white;
  opacity: 0.9;
  font-weight: var(--fwNormal);
}

.form-confirmation-readonly {
  background: #e8f0fa !important;
  border-color: #b8c5d1 !important;
  cursor: default !important;
  color: var(--colorBlack) !important;
}

.form-confirmation-readonly:focus {
  box-shadow: none !important;
  outline: none !important;
}

/* textarea専用 */
.form-confirmation-mode textarea.form-confirmation-readonly,
.form-confirmation-mode textarea[readonly],
textarea.form-confirmation-readonly {
  background: #e8f0fa !important;
  border-color: #b8c5d1 !important;
  color: var(--colorBlack) !important;
  resize: none !important;
  cursor: default !important;
}

/* select専用 */
select.form-confirmation-readonly:disabled,
.form-confirmation-mode select.form-confirmation-readonly {
  background: #e8f0fa !important;
  border-color: #b8c5d1 !important;
  color: var(--colorBlack) !important;
  opacity: 1 !important;
  cursor: default !important;
}

/* input専用 */
input.form-confirmation-readonly[readonly],
.form-confirmation-mode input.form-confirmation-readonly {
  background: #e8f0fa !important;
  border-color: #b8c5d1 !important;
  color: var(--colorBlack) !important;
  cursor: default !important;
}

/* オートフィルによる色変更を防ぐ */
.form-confirmation-mode input:-webkit-autofill,
.form-confirmation-mode input:-webkit-autofill:hover,
.form-confirmation-mode input:-webkit-autofill:focus,
.form-confirmation-mode textarea:-webkit-autofill,
.form-confirmation-mode textarea:-webkit-autofill:hover,
.form-confirmation-mode textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #e8f0fa inset !important;
  -webkit-text-fill-color: var(--colorBlack) !important;
}

.form-confirmation-buttons {
  display: block;
  width: 100%;
}

.form-confirmation-edit-btn {
  display: block;
  width: 100%;
  height: var(--size-48);
  color: var(--colorBlack);
  border: none;
  padding: 0 var(--size-16);
  border-radius: var(--size-4);
  font-size: var(--size-16);
  cursor: pointer;
  text-align: center;
  border: solid 1px var(--colorLightGray);
}

.form-confirmation-edit-btn.disabled {
  background: var(--colorLightGray);
  cursor: not-allowed;
  pointer-events: none;
}

.form-confirmation-edit-btn:hover {
 opacity: 0.9;
}

.form-confirmation-submit-btn {
  display: block;
  width: 100%;
  height: var(--size-48);
  background: var(--colorImportantPink);
  color: white;
  border: none;
  padding: 0 var(--size-16);
  border-radius: var(--size-4);
  font-size: var(--size-16);
  cursor: pointer;
  text-align: center;
  font-weight: var(--fwSemiBold);
  margin-bottom: var(--size-12);
}

.form-confirmation-submit-btn.disabled {
  background: var(--colorLightGray);
  cursor: not-allowed;
  pointer-events: none;
}

.form-confirmation-submit-btn:hover {
  opacity: 0.9;
}


/* 文字数カウンター確認時のスタイル調整 */
.form-confirmation-mode .char_count {
  color: var(--colorDateColor) !important;
  font-size: var(--size-12);
}

/* フォームラベル確認時 */
.form-confirmation-mode .form_label {
  color: var(--colorBlack);
  font-weight: var(--fwSemiBold);
}

/* フォームノート確認時 */
.form-confirmation-mode .form_note {
  color: var(--colorDateColor);
  font-size: var(--size-12);
}

/* チェックボックス・ラジオボタン確認時 */
input[type="checkbox"].form-confirmation-readonly:disabled,
input[type="radio"].form-confirmation-readonly:disabled {
  opacity: 0.7;
  cursor: default;
}