/* HubSpotフォーム（hs-form-html）共通スタイル */

/* 入力欄・テキストエリア・チェックボックスの背景色 */
/* 入力欄・テキストエリアの余白（下だけ8px） */
/* チェックボックスは入力欄の余白を継がせず8pxのまま */
.hs-form-html {
  --hsf-field-input__background-color: #fff;
  --hsf-field-input__padding: 10px 10px 8px;
  --hsf-field-checkbox__padding: 8px;
}

.hs-form-html .hsfc-Row {
  width: 100%;
  margin: 0;
  margin-bottom: 26px !important;
}

.hs-form-html .hsfc-Step__Content {
  padding: 0 !important;
}

.hs-form-html .hsfc-FieldLabel {
  width: 100%;
  margin: 0;
}

.hs-form-html .hsfc-FieldLabel > span {
  display: flex !important;
  align-items: center;
  width: 100%;
  font-weight: normal !important;
  font-size: 16px;
  padding: 0;
}

.hs-form-html .hsfc-FieldLabel span {
  font-weight: normal !important;
  font-family: inherit !important;
}

/* 必須バッジ */
.hs-form-html .hsfc-FieldLabel__RequiredIndicator {
  order: -1;
  font-size: 0;
  margin-bottom: 4px;
  margin-right: 10px;
  padding: 0;
  flex-shrink: 0;
}

.hs-form-html .hsfc-FieldLabel__RequiredIndicator::before {
  content: '\5FC5\9808';
  display: block;
  background-color: #fff;
  color: #73a5ff;
  padding: 6px 14px 4px;
  border-radius: 4px;
  line-height: 0.8;
  font-size: 12.8px;
  border: 1px solid #73a5ff;
}

.hs-form-html .hsfc-DropdownInput {
  width: 100%;
}

.hs-form-html .hsfc-CheckboxFieldGroup__Options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-left: 14px !important;
}

.hs-form-html .hsfc-CheckboxFieldGroup__Options > div {
  margin-bottom: 0 !important;
}

.hs-form-html .hsfc-CheckboxFieldGroup .hsfc-FieldLabel {
  margin-bottom: 5px !important;
  gap: 10px;
}

.hs-form-html .hsfc-CheckboxFieldGroup .hsfc-FieldLabel > span {
  display: flex !important;
  width: auto;
}

.hs-form-html .hsfc-DataPrivacyField {
  font-size: 12px;
  color: #666;
}

.hs-form-html .hsfc-NavigationRow {
  width: 100%;
  margin-top: 12px;
}

.hs-form-html .hsfc-NavigationRow__Buttons {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hs-form-html .hsfc-Button {
  cursor: pointer;
  margin: 0 auto !important;
  display: block !important;
  background: #2864f0 !important;
  color: #fff !important;
  border: none !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  font-size: 14px !important;
  padding: 8px 0 9px !important;
  text-align: center !important;
  text-shadow: none !important;
  width: 300px !important;
  height: 50px !important;
}