/*
 * お問い合わせの入力項目の欄（共通）。
 *
 * マイページの入力欄と、設定画面のプレビューで同じものを使う。
 * 画面ごとに書き分けると、設定した人が確かめたものと実際に出るものが
 * 食い違う。読み込みは使う画面側で行う。
 *
 * 組み立ては Pages/Shared/_InquiryItemFields.cshtml。
 */

.mypage-item { margin-bottom: .9rem; }
.mypage-item > label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: .3rem; }

.mypage-req,
.mypage-opt {
  font-size: .72rem;
  font-weight: 700;
  padding: .05rem .4rem;
  border-radius: 2px;
  margin-left: .4rem;
  vertical-align: middle;
}
.mypage-req { color: #fff; background: #c0392b; }
.mypage-opt { color: #5c6b73; border: 1px solid #c9d4d9; }

.mypage-item-note { font-size: .82rem; color: #5c6b73; margin-top: .25rem; }
.mypage-item-err { font-size: .84rem; color: #c0392b; font-weight: 700; margin-top: .25rem; }

/* select も赤枠の対象にする。form-select に変えたときに外れていた */
.mypage-item.bad > .form-control,
.mypage-item.bad > .form-select {
  border-color: #c0392b;
  border-width: 2px;
}

.mypage-choices { display: flex; flex-wrap: wrap; gap: .3rem .9rem; }
.mypage-choice { font-size: .92rem; display: flex; align-items: center; gap: .3rem; }

/* 入力欄の大きさは申込画面（entry.css の #entryForm）にそろえる。
   同じ案件で入力する欄なのに大きさが違うと、別のシステムに見える */
.mypage-item .form-control,
.mypage-item .form-select {
  min-height: 46px;
  font-size: 1rem;
  line-height: 1.5;
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.mypage-item .form-control::placeholder { color: #767676; opacity: 1; }

.mypage-choice input[type="radio"],
.mypage-choice input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  vertical-align: middle;
  accent-color: #00587c;
}