.procedure__input-field {
  position: relative;
  /* margin-bottom: 20px; */
}

.procedure__input-field input,
.procedure__input-field select {
  padding: 10px;
  font-size: 17px;
  box-sizing: border-box;
  border-radius: 7px;
  border: 1px solid #E1D6D2;
  background: #FFF;
  height: 67px;
  width: 100%;
  margin-bottom: 0;
}

::placeholder {
color: #c9c9c9;
font-family: "Zen Kaku Gothic New";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 170%; /* 28.9px */
}

.procedure__input-field input:focus,
.procedure__input-field select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.procedure__error-message {
  color: #e74c3c;
  font-size: 14px;
  margin-top: 5px;
  display: block;
  display: inline-block;
}

.procedure__error-message.hidden {
  /* display: none; */
}

.procedure__input-field input.error,
.procedure__input-field select.error {
  border-color: #e74c3c;
}

.procedure__date-field {
  display: flex;
  align-items: center;
  gap: 10px;
  /* margin-bottom: 20px; */
  position: relative;
  color: #373737;
  font-family: "Zen Kaku Gothic New";
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 170%; /* 28.9px */
}

.procedure__date-field select {
  padding: 10px 17px;
  font-size: 17px;
  border-radius: 7px;
  border: 1px solid #E1D6D2;
  background: #FFF;
  height: 64px;
}

.procedure__date-field select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}

.procedure__prefecture {
  margin-bottom: 10px;
}

.procedure__zip-note {
  color: #666;
  font-size: 14px;
  margin-top: 5px;
}

.procedure__select-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.procedure__select-item {
  margin-bottom: 10px;
}

.procedure__select-item label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.procedure__select-item input[type="radio"],
.procedure__select-item input[type="checkbox"] {
  margin-right: 10px;
}

.procedure__select-text {
  font-size: 16px;
  color: #373737;
  font-family: "Zen Kaku Gothic New";
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2; /* 28.9px */
}

/* 必須項目のスタイル */
.procedure__input-field.required label::after {
  content: "必須";
  color: #e74c3c;
  font-size: 12px;
  margin-left: 5px;
}

/* 無効な入力のスタイル */
.procedure__input-field input:invalid,
.procedure__input-field select:invalid {
  /* border-color: #e74c3c; */
}

/* プレースホルダーのスタイル */
.procedure__input-field input::placeholder {
}

/* 読み取り専用項目のスタイル */
.procedure__input-field input:read-only {
  background-color: #f5f5f5;
  /* cursor: not-allowed; */
  cursor: pointer;
}

/* フォーカス時のアウトラインスタイル */
.procedure__input-field input:focus,
.procedure__input-field select:focus {
  outline: none;
  border-color: #4a90e2;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.2);
}