/* ==========================================================================
   c-hubspot-form — HubSpot フォーム（「HTML として出力」・css: ''）に c-form と同じ見た目を当てる
   WP のブロック finanscope/hubspot-form が出力する。静的HTMLでは使わない（ダミーは c-form のまま）
   HubSpot が生成するマークアップ（hs-*）にはクラスを足せないため、.c-hubspot-form の子孫セレクタで当てる
   値は c-form.css と同じ（Figma 固有値の直値も c-form.css に合わせている）
   ========================================================================== */

.c-hubspot-form {
  padding: 36px; /* c-form と同じ Figma 固有値 */
  background-color: var(--color-bg-base);
}

.c-hubspot-form .hs-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
}

.c-hubspot-form fieldset {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.c-hubspot-form .hs-form-field {
  display: flex;
  flex-direction: column;
  gap: 12px; /* c-form__field と同じ Figma 固有値 */
}

.c-hubspot-form .hs-form-field > label {
  display: flex;
  gap: var(--space-4);
  color: var(--color-text-base);
  font-weight: 700; /* renewal/JP/16/Bold（tokens.css .t-jp-16-bold） */
  font-size: 1rem;
  line-height: 1.75;
}

.c-hubspot-form .hs-form-required {
  color: var(--color-text-danger);
}

.c-hubspot-form .hs-field-desc {
  color: var(--color-text-base);
  font-size: 0.75rem; /* renewal/JP/Caption/12/Regular */
}

.c-hubspot-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
  display: block;
  width: 100%;
  min-height: 50px; /* c-form__input と同じ Figma 固有寸法 */
  padding: 6px var(--space-24); /* 上下 6px は Figma 固有値 */
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-4);
  background-color: var(--color-bg-subtle);
  color: var(--color-text-base);
  font-size: 1rem; /* renewal/JP/16/Regular */
  line-height: 1.75;
}

.c-hubspot-form textarea.hs-input {
  height: 120px; /* c-form__textarea と同じ Figma 固有寸法 */
  resize: vertical;
}

.c-hubspot-form .hs-input::placeholder {
  color: var(--color-text-base);
  opacity: 0.4;
}

.c-hubspot-form .hs-input:focus-visible,
.c-hubspot-form .hs-button:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

.c-hubspot-form .inputs-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-hubspot-form .inputs-list label {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px; /* c-form__check と同じ Figma 固有値 */
  color: var(--color-text-base);
  cursor: pointer;
}

.c-hubspot-form .inputs-list input[type="checkbox"],
.c-hubspot-form .inputs-list input[type="radio"] {
  flex-shrink: 0;
  width: 20px; /* アイコンサイズ */
  height: 20px;
  margin: 2px;
  accent-color: var(--color-bg-brand);
}

.c-hubspot-form .legal-consent-container,
.c-hubspot-form .legal-consent-container p {
  color: var(--color-text-base);
  font-size: 0.75rem; /* renewal/JP/Caption/12/Regular */
  line-height: 1.75;
}

.c-hubspot-form .legal-consent-container a {
  color: var(--color-text-brand);
  text-decoration: underline;
}

.c-hubspot-form .hs-error-msgs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-hubspot-form .hs-error-msg,
.c-hubspot-form .hs-main-font-element {
  color: var(--color-text-danger);
  font-size: 0.75rem;
}

.c-hubspot-form .hs-button {
  width: 100%;
  cursor: pointer;
}

.c-hubspot-form .submitted-message {
  color: var(--color-text-base);
}

/* 資料請求の送信完了（メッセージ + ダウンロードボタン） */
.c-hubspot-form__done {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  color: var(--color-text-base);
}

@media (max-width: 1023px) {

  .c-hubspot-form {
    padding: var(--space-24);
  }

  .c-hubspot-form .hs-form {
    gap: 12px; /* c-form と同じ Figma SP 固有値 */
  }

  .c-hubspot-form .hs-form-field > label,
  .c-hubspot-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
    font-size: 0.875rem; /* SP: renewal/JP/14（tokens.css .t-jp-14-*） */
    line-height: calc(24 / 14);
  }

  .c-hubspot-form .legal-consent-container,
  .c-hubspot-form .legal-consent-container p {
    font-size: 0.625rem; /* SP: renewal/JP/10/Regular */
    line-height: 2;
  }
}