@charset "UTF-8";
/* 261009 会員登録・スカウト改修：職務経験・プロフィール・アンケート・スカウト案内の入力欄
   common/module/syokureki_form.tpl ほか（会員登録／応募フォーム／Web履歴書で共通） */

.sx-wrap { display: grid; gap: 18px; margin: 0 0 24px; }
.sx-block { border: 1px solid #dde1ea; border-radius: 6px; background: #fff; overflow: hidden; }
.sx-block.sx-has-err { border-color: #A11813; }
.sx-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: #f4f6fa; padding: 10px 14px; }
.sx-title { font-weight: 700; color: #132F71; font-size: 15px; }
.sx-del { font: inherit; font-size: 12px; color: #666; background: #fff; border: 1px solid #cdd2db; border-radius: 4px; padding: 3px 10px; cursor: pointer; }
.sx-del:hover { color: #A11813; border-color: #A11813; }
.sx-error { margin: 0; padding: 8px 14px; background: #fbeceb; color: #A11813; font-size: 13px; font-weight: 700; }
.sx-row { display: grid; grid-template-columns: 210px minmax(0, 1fr); border-top: 1px solid #eceef2; }
.sx-head + .sx-row, .sx-error + .sx-row, input[type="hidden"] + .sx-row { border-top: 0; }
.sx-label { background: #fafbfc; padding: 12px 14px; font-size: 14px; font-weight: 700; color: #333; line-height: 1.5; }
.sx-field { padding: 10px 14px; display: grid; gap: 6px; min-width: 0; font-size: 14px; }
.sx-badge { display: inline-block; font-size: 11px; font-weight: 700; color: #fff; border-radius: 2px; padding: 0 6px; margin-left: 6px; line-height: 1.7; vertical-align: 1px; white-space: nowrap; }
.sx-badge-req { background: #A11813; }
.sx-badge-opt { background: #8a93a3; }
.sx-badge-private { background: #132F71; }
.sx-input, .sx-select, .sx-textarea { font: inherit; font-size: 14px; border: 1px solid #cdd2db; border-radius: 4px; padding: 7px 10px; background: #fff; color: #222; max-width: 100%; box-sizing: border-box; }
.sx-input, .sx-textarea { width: 100%; }
.sx-select { min-height: 38px; }
.sx-select:disabled { background: #f0f1f4; color: #999; }
.sx-textarea { min-height: 110px; line-height: 1.7; }
.sx-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.sx-lang .sx-select { flex: 1 1 150px; }
/* サイト既存CSS（.detail-table select 等）が select を幅100%にするため、横並びの欄では打ち消す */
.sx-inline > .sx-select, .sx-inline > .input-text { width: auto !important; max-width: 100%; margin: 0 !important; }
.sx-inline > .sx-select { flex: 0 0 auto; }
.sx-lang > .sx-select { flex: 1 1 150px !important; }
.sx-inline > span { white-space: nowrap; }
.sx-sep { margin: 0 4px; }
.sx-check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: normal; cursor: pointer; margin: 0 14px 0 0; }
.sx-check input { margin: 0; accent-color: #132F71; }
.sx-note { margin: 0; font-size: 12px; color: #666; line-height: 1.6; }
.sx-add { justify-self: start; font: inherit; font-size: 14px; font-weight: 700; color: #132F71; background: #fff; border: 1px dashed #132F71; border-radius: 4px; padding: 8px 18px; cursor: pointer; }
.sx-add:hover { background: #f3f6fc; }

/* 見出し・説明 */
.sx-section-title { font-size: 18px; font-weight: 700; color: #132F71; border-left: 4px solid #132F71; padding: 2px 0 2px 10px; margin: 36px 0 10px; line-height: 1.5; }
.sx-section-lead { font-size: 13px; color: #555; margin: 0 0 14px; line-height: 1.7; }

/* アンケート */
.sx-radios { display: grid; gap: 8px; }
.sx-radios .sx-check { margin: 0; }

/* スカウトの案内 */
.sx-scout-box { border: 2px solid #132F71; border-radius: 6px; padding: 14px 16px; background: #f3f6fc; display: grid; gap: 6px; margin: 30px 0 10px; font-size: 14px; line-height: 1.7; }
.sx-scout-box .sx-check { font-weight: 700; font-size: 15px; }

/* 表示用（確認画面・Web履歴書の表示） */
.sx-view { border: 1px solid #dde1ea; border-radius: 6px; overflow: hidden; margin: 0 0 14px; background: #fff; }
.sx-view-head { background: #f4f6fa; padding: 8px 14px; font-weight: 700; color: #132F71; font-size: 14px; }
.sx-view dl { display: grid; grid-template-columns: 210px minmax(0, 1fr); margin: 0; }
.sx-view dt, .sx-view dd { margin: 0; padding: 8px 14px; border-top: 1px solid #eceef2; font-size: 14px; line-height: 1.6; }
.sx-view dt { background: #fafbfc; font-weight: 700; color: #444; }
.sx-view dd { word-break: break-word; }

@media (max-width: 767px) {
  .sx-row, .sx-view dl { grid-template-columns: minmax(0, 1fr); }
  .sx-label { padding: 10px 12px 4px; background: #fff; }
  .sx-field { padding: 4px 12px 12px; }
  .sx-view dd { border-top: 0; padding-top: 2px; }
  .sx-y { flex: 1 1 90px; }
  .sx-m { flex: 0 1 70px; }
}