@charset "UTF-8";
/* ------------------------------------------------------------------
   SHANON 埋込フォーム 上書きCSS
   ソレキア クラウドシフトLP 用
   使い方：SMP既定の embedded_form.css の「後」に読み込んでください。
     <link rel="stylesheet" href="https://pr.solekia.com/static/css/embedded_form.css">
     <link rel="stylesheet" href="smp-form-override.css">
   ------------------------------------------------------------------ */

/* ---- 全体：白カードに統一 ---- */
.smpForm {
  padding: 0;
  width: 100% !important;
  max-width: none;
  font-family: 'Noto Sans JP', sans-serif;
  color: #1e2a38;
}
.smpForm .ss_contents { width: 100%; }

/* ---- 枠線・縞背景の解除 ---- */
.smpForm .ss_contents fieldset,
.smpForm .ss_contents fieldset + fieldset {
  border: none !important;
  background: transparent !important;
  margin: 0;
  padding: 0;
}
.smpForm .ss_field,
.smpForm .ss_enquete_field {
  background: transparent !important;
  border: none !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
}
.smpForm .ss_field:first-child { margin-top: 0 !important; }
.smpForm .ss_field:hover,
.smpForm .ss_enquete_field:hover { background: transparent !important; }

/* ---- ラベル ---- */
.smpForm .ss_form_title {
  margin: 0 0 6px !important;
  width: auto !important;
}
.smpForm .ss_field label,
.smpForm .ss_enquete_field label,
.smpForm .ss_form_title,
.smpForm .ss_label,
.smpForm .ss_title {
  font-size: 13px;
  font-weight: 700;
  color: #1e2a38;
  line-height: 1.6;
}

/* ---- 入力欄の並び ----
   既定CSSは 768px以上で .ss_grid を flex にしている。
   姓・名など1項目内に複数の入力欄がある場合はそのまま横並びになる。
   単一入力の項目は入力欄が伸びるようにする。 */
.smpForm .ss_grid {
  display: flex !important;
  gap: 16px;
  align-items: flex-start;
}
.smpForm .ss_grid > * {
  flex: 1 1 0;
  min-width: 0;
}
.smpForm .ss_grid input:not([type="checkbox"]):not([type="radio"]) { width: 100%; }

@media screen and (max-width: 600px) {
  .smpForm .ss_grid { display: block !important; }
  .smpForm .ss_grid > * + * { margin-top: 12px; }
}

/* ---- 必須マーク ---- */
.smpForm .ss_user_notnull {
  color: #d7000f !important;
  font-size: 11px;
  font-weight: 500;
  margin-left: 8px;
}

/* ---- 入力欄 ---- */
.smpForm .ss_contents input[type="text"],
.smpForm .ss_contents input[type="email"],
.smpForm .ss_contents input[type="tel"],
.smpForm .ss_contents input[type="number"],
.smpForm .ss_contents input[type="date"],
.smpForm .ss_contents input[type="datetime-local"],
.smpForm .ss_contents select,
.smpForm .ss_contents textarea {
  width: 100%;
  border: 1px solid #c8d3dd !important;
  border-radius: 4px !important;
  padding: 11px 12px;
  font-size: 14px;
  font-family: inherit;
  color: #1e2a38;
  background: #ffffff;
}
.smpForm .ss_contents input:focus,
.smpForm .ss_contents select:focus,
.smpForm .ss_contents textarea:focus {
  border-color: #0f5aa0 !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(15, 90, 160, 0.12);
}
.smpForm .ss_required_field input { border: 1px solid #c8d3dd !important; }
.smpForm .ss_required_field input:focus {
  border: 1px solid #0f5aa0 !important;
  box-shadow: 0 0 0 3px rgba(15, 90, 160, 0.12);
}

/* ---- チェックボックス・ラジオ ---- */
.smpForm .ss_contents input[type="checkbox"],
.smpForm .ss_contents input[type="radio"] {
  width: 18px !important;
  height: 18px;
  accent-color: #0f5aa0;
  margin: 0 8px 0 0;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  vertical-align: -3px;
  cursor: pointer;
  flex: none;
}
.smpForm .ss_contents input[type="checkbox"] + label,
.smpForm .ss_contents input[type="radio"] + label {
  font-weight: 400 !important;
  font-size: 14px;
  cursor: pointer;
  line-height: 1.7;
  margin-right: 16px;
}

/* ---- 選択肢テーブル（チェックボックス・ラジオの並び） ---- */
.smpForm .ss_contents table { border-collapse: separate; border-spacing: 0; width: 100%; }
.smpForm .ss_contents td {
  font-size: 14px;
  line-height: 1.7;
  padding: 10px 16px 10px 0;
  vertical-align: top;
  cursor: pointer;
}
.smpForm .ss_contents td input[type="checkbox"],
.smpForm .ss_contents td input[type="radio"] { vertical-align: -4px; }

/* ---- 補足テキスト ---- */
.smpForm .ss_upComment,
.smpForm .ss_leftComment,
.smpForm .ss_rightComment,
.smpForm .ss_bottomComment {
  color: #8a97a5;
  font-size: 12px;
  margin-left: 0;
}

/* ---- 個人情報同意欄 ---- */
.smpForm .ss_privacy_field {
  background: #f5f8fb !important;
  border-radius: 6px;
  padding: 16px !important;
}
.smpForm .ss_privacy_field .ss_grid {
  background: #ffffff;
  border: 1px solid #e4e9ee;
  border-radius: 4px;
  padding: 12px;
  font-size: 12px;
  line-height: 1.8;
}

/* ---- 送信ボタン ---- */
.smpForm .ss_btnArea { margin-top: 8px; }
.smpForm .ss_btnArea input {
  width: 100%;
  background-color: #d7000f !important;
  border: none !important;
  border-radius: 4px !important;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  padding: 15px !important;
  cursor: pointer;
}
.smpForm .ss_btnArea input:hover { background-color: #b0000c !important; }

/* ---- エラー表示 ---- */
.smpForm .ss_warning_label {
  background-color: #d7000f;
  border-radius: 3px;
}
.smpForm .ss_error_msg,
.smpForm .errorMsg {
  color: #d7000f;
  font-size: 12px;
}

/* ---- レスポンシブ ---- */
@media screen and (max-width: 767px) {
  .smpForm { width: 100% !important; }
}