/* ============================================================
   HubSpot 埋め込みフォーム — デフォルトデザイン再現 CSS
   ============================================================ */

   :root {
     --hsf-global__font-family: "Noto Sans JP", sans-serif!important;
     --hsf-button__background-color: #ff7a59!important;
     --hsf-button__border-radius: 3px!important;
   }


/* --- 全体 --- */
form.hs-form {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 14px!important;
  line-height: 1.5;
  color: #33475b;
  max-width: 800px;
  margin: auto;
  width: 100%;
  box-sizing: border-box;
}

form.hs-form *,
form.hs-form *::before,
form.hs-form *::after {
  box-sizing: border-box;
}

form.hs-form h1,
form.hs-form h2 {
	font-size: 2em;
	margin-bottom: 10px!important;
}


/* --- フィールドセット（行）--- */
form.hs-form fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 18px 0;
  max-width: 100%;
}

form.hs-form fieldset.form-columns-1 .hs-form-field {
  width: 100%;
}

form.hs-form fieldset.form-columns-2 {
  display: flex;
  gap: 12px;
}

form.hs-form fieldset.form-columns-2 .hs-form-field {
  width: 50%;
}

form.hs-form fieldset.form-columns-3 {
  display: flex;
  gap: 12px;
}

form.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 33.333%;
}

/* --- フィールド --- */
form.hs-form .hs-form-field {
  margin-bottom: 10px;
}

/* --- ラベル --- */
form.hs-form label {
  display: block;
  font-size: 18px;
  font-weight: 500;
  color: #33475b;
  margin-bottom: 4px;
  line-height: 1.5;
}

form.hs-form label span.hs-form-required {
  color: #e74c3c;
  margin-left: 2px;
  font-size: 14px!important;
}

/* --- ヘルプテキスト / フィールド説明 --- */
form.hs-form legend.hs-field-desc {
  font-size: 12px;
  color: #7c98b6;
  margin-bottom: 4px;
  font-weight: normal;
  line-height: 1.4;
}

/* --- 入力欄ラッパー --- */
form.hs-form .input {
  margin: 0;
}

/* --- テキスト入力 / セレクト / テキストエリア 共通 --- */
form.hs-form .hs-input {
  display: block;
  width: 100%;
  padding: 9px 10px!important;
  font-family: inherit;
  font-size: 16px!important;
  font-weight: normal;
  line-height: 22px;
  color: #33475b;
  background-color: #f5f8fa;
  border: 1px solid #cbd6e2;
  border-radius: 15px!important;
  transition: border-color 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

form.hs-form .hs-input:focus {
  outline: none;
  border-color: #0091ae;
  background-color: #fff;
  box-shadow: 0 0 4px rgba(0, 145, 174, 0.3);
}

form.hs-form .hs-input::placeholder {
  color: #7c98b6;
}

/* --- テキストエリア --- */
form.hs-form textarea.hs-input {
  min-height: 100px;
  resize: vertical;
}

/* --- セレクト --- */
form.hs-form select.hs-input {
  height: 42px;
  background-image d='M0 0l5 6 5-6z' fill='%237c98b6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px 6px;
}

/* --- チェックボックス / ラジオボタン --- */
form.hs-form .inputs-list {
  list-style: none;
  padding: 0;
  margin: 0!important;
}

form.hs-form .inputs-list li {
  margin: 0!important;
  padding: 0!important;
}

form.hs-form li:before {
	display: none!important;
}

form.hs-form .inputs-list li label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-weight: normal;
  font-size: 16px;
  cursor: pointer;
}


form.hs-form input[type="checkbox"].hs-input,
form.hs-form input[type="radio"].hs-input {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  display: inline-block;
  width: auto;
  padding: 0;
  background-color: transparent;
  border: none;
  box-shadow: none;
  margin: auto 0;
}


/* --- エラー状態 --- */
form.hs-form .hs-input.invalid.error,
form.hs-form .hs-input.error {
  border-color: #f2545b;
}

form.hs-form ul.hs-error-msgs {
  list-style: none;
  padding: 0;
  margin: 4px 0 0 0;
}

form.hs-form ul.hs-error-msgs li label {
  font-size: 12px;
  color: #f2545b;
  font-weight: normal;
}

/* --- リッチテキストエリア --- */
form.hs-form .hs-richtext {
  margin-bottom: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: #33475b;
  word-wrap: break-word;
}

form.hs-form .hs-richtext p {
  margin: 0 0 8px 0;
}

/* --- GDPR / 法的同意 --- */
form.hs-form .legal-consent-container {
  margin-bottom: 18px;
  font-size: 12px;
  color: #516f90;
  line-height: 1.5;
}

form.hs-form .legal-consent-container p {
  margin: 0 0 8px 0;
}

form.hs-form .legal-consent-container .hs-form-booleancheckbox-display label {
  font-size: 12px;
  font-weight: normal;
  color: #516f90;
}
form.hs-form .legal-consent-container .hs-form-booleancheckbox-display span {
	margin: 0;
}

/* --- 送信ボタン --- */
form.hs-form .hs-submit {
  margin-top: 18px;
}

form.hs-form .hs-submit .actions {
  padding: 0;
  margin: 0;
}

form.hs-form .hs-button.primary.large {
  display: inline-block;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  color: #fff;
  background-color: #ff7a59;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

form.hs-form .hs-button.primary.large:hover {
  background-color: #ff5c35;
}

form.hs-form .hs-button.primary.large:active {
  background-color: #e8482e;
}

form.hs-form .hs-button.primary.large:focus {
  outline: none;
  box-shadow: 0 0 4px rgba(255, 122, 89, 0.5);
}

/* --- 送信後メッセージ --- */
form.hs-form .submitted-message {
  font-size: 16px;
  color: #33475b;
  line-height: 1.5;
}

/* --- 条件付き（依存）フィールド --- */
form.hs-form .hs-dependent-field .hs-form-field {
  margin-bottom: 18px;
}

/* --- 日付ピッカー --- */
div.fn-date-picker.pika-single {
  z-index: 9999;
  display: block;
  position: relative;
  color: #333;
  background: #fff;
  border: 1px solid #ccc;
  border-bottom-color: #bbb;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* ============================================================
   レスポンシブ対応
   ============================================================ */
@media (max-width: 400px) {
  form.hs-form fieldset.form-columns-2,
  form.hs-form fieldset.form-columns-3 {
    flex-direction: column;
  }

  form.hs-form fieldset.form-columns-2 .hs-form-field,
  form.hs-form fieldset.form-columns-3 .hs-form-field {
    width: 100%;
  }
}