@charset "utf-8";

/* ==========================================================================
   【CSS概要】
   1. システムのTable構造を1カラムデザインに変換。
   2. JSバリデーションの吹き出しを、システム標準のエラーラベルに統合。
   3. 姓名ラベル「姓：」等の横並びを維持し、必須バッジを保護。
   ========================================================================== */

/* --- 全体レイアウト調整 --- */
body {
  background-color: #f8f9fa !important;
  color: #333 !important;
  font-family: "Noto Sans JP", sans-serif !important;
  font-size: 14px !important;
}

#msg-section, #regist-section { padding-top: 20px !important; }

#msg-section .col-md-10.offset-md-2 {
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
  max-width: 100% !important;
}
.custom-logo { max-width: 180px !important; height: auto !important; display: block !important; margin-left: 0 !important; }

#regist-section {
  background-color: #cfe6f8 !important;
  border-left: 1px solid #c7c7c7 !important;
  padding: 0px 15px 20px 15px !important;
}

/* --- テーブル構造のブロック化 --- */
#regist-form table, #regist-form tbody, #regist-form tr, #regist-form th, #regist-form td {
  display: block !important;
  width: 100% !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
}

#regist-form tr.form-group {
  margin-bottom: 12px !important; 
  padding-bottom: 12px !important;
  border-bottom: 1px dashed #ced4da !important;
}

#regist-form tr.form-group:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 5px !important;
  border-bottom: none !important;
}

/* --- ラベル・必須アイコン --- */
#regist-form th {
  display: flex !important;
  align-items: center !important;
  flex-direction: row !important;
  margin-bottom: 5px !important;
}
.input-label { font-weight: bold !important; font-size: 14px !important; color: #212529 !important; }

.ss_notnull {
  background-color: #ffc107 !important;
  color: #212529 !important;
  font-size: 10px !important;
  padding: 1px 5px !important;
  border-radius: 3px !important;
  margin-left: 8px !important;
  font-weight: bold !important;
  display: inline-block !important;
}

/* --- 入力フィールド共通装飾 --- */
.form-control, #regist-form input[type="text"], #regist-form select, #regist-form textarea {
  display: block !important;
  width: 100% !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  border: 1px solid #ced4da !important;
  border-radius: 4px !important;
  background-color: #fff !important;
  box-sizing: border-box !important;
}
#regist-form input[type="text"], #regist-form select { height: 38px !important; }

/* --- ★エラーメッセージのデザイン統合 --- */

/* JSエラー(formErrorContent)とシステムエラー(ss_error_msg)を同一デザインへ */
.formError .formErrorContent,
.ss_error_msg {
  background: #ee5f5b !important;
  color: #fff !important;
  font-size: 11px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  font-weight: bold !important;
  display: inline-block !important;
  width: auto !important;
  margin-bottom: 5px !important;
  box-shadow: none !important;
  border: none !important;
}

/* JSエラーの配置を「吹き出し」から「ラベル」に変え、順序を最上部へ */
.formError {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 100% !important;
  order: -1 !important; /* ss_inputの中で先頭に */
  opacity: 1 !important;
}

/* 不要なパーツの非表示 */
.formErrorArrow, #regist-form .label-warning:not(.ss_notnull) { display: none !important; }

/* --- ★レイアウト制御 --- */

#regist-form .ss_input {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  align-items: center !important;
}

/* エラーと改行を100%幅にして上に積み上げる */
.formError, .ss_error_msg, .ss_error_msg + br {
  width: 100% !important;
  flex-basis: 100% !important;
  order: -1 !important;
}

#regist-form .ss_leftComment {
  order: 2 !important;
  margin-right: 5px !important;
  font-size: 13px !important;
}

#regist-form .ss_input input[type="text"] {
  order: 3 !important;
  flex: 1 !important;
}

/* --- その他装飾 --- */
#regist-form button[type="submit"] {
  display: block !important;
  width: 100% !important;
  margin-top: 10px !important;
  background-color: #004ea1 !important;
  border: 1px solid #0044cc !important;
  border-radius: 4px !important;
  color: #ffffff !important;
  font-size: 17.5px !important;
  font-weight: bold !important;
  padding: 11px 19px !important;
  cursor: pointer !important;
}

.pre-scrollable {
  background-color: #fff !important;
  border: 3px solid #efefef !important;
  height: 100px !important;
  padding: 8px !important;
  margin: 5px 0 15px 0 !important;
}

.breadcrumb { background-color: #1185de !important; padding: 8px 15px !important; margin-bottom: 15px !important; }
#msg-section .pic { text-align: center !important; width: 100% !important; }
.ss_rightComment, .ss_bottomComment, .ss_upComment { display: none !important; }
::placeholder { color: #a9a9a9 !important; opacity: 1 !important; }