/* ==========================================================================
   c-form — Figma: フォーム部品（element / radio / radio-check / select-check / selected-check / Button）
   使用: PC/22_Contact sec-form (24381:8557)・PC/04_TrialApply form-row (24381:6532)
   静的 HTML のダミー。WP 化時に HubSpot フォームの埋め込みへ差し替え、同じ見た目を CSS で当てる
   PC: 白地・内側 36px・項目間 24px・ラベル renewal/JP/16/Bold・入力 renewal/JP/16/Regular・注記 renewal/JP/Caption/12/Regular
   SP: 内側 24px・項目間 12px・ラベル renewal/JP/14/Bold・入力 renewal/JP/14/Regular・注記 renewal/JP/10/Regular
   ========================================================================== */

.c-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-24);
  padding: 36px; /* Figma 固有値（35〜36px）。space トークンに無い値のため直値・報告済み */
  background-color: var(--color-bg-base);
}

/* ---- 1 項目（ラベル + 入力）: 間 12px ---- */
.c-form__field {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Figma 固有値。space トークンに無い値のため直値・報告済み */
}

.c-form__label {
  display: flex;
  gap: var(--space-4);
  padding: 0;
  color: var(--color-text-base);
}

.c-form__required {
  color: var(--color-text-danger);
}

/* ---- テキスト入力・テキストエリア ---- */
.c-form__input,
.c-form__textarea {
  display: block;
  width: 100%;
  min-height: 50px; /* 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);
}

.c-form__textarea {
  height: 120px; /* Figma 固有寸法: テキストエリアの高さ */
  resize: vertical;
}

.c-form__input::placeholder,
.c-form__textarea::placeholder {
  color: var(--color-text-base);
  opacity: 0.4; /* Figma: text/base 40%（コントラスト不足のため報告済み） */
}

.c-form__input:focus-visible,
.c-form__textarea:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

/* ---- ラジオボタン（Figma: radio / radio-check） ---- */
.c-form__options {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.c-form__option {
  display: inline-flex;
  align-items: center;
  gap: 12px; /* Figma 固有値 */
  color: var(--color-text-base);
  cursor: pointer;
}

/* 20px の枠の中に 16.67px の円（Figma実測値: inset 8.33%）。選択時はブランド色の二重丸（静的HTML の c-form__radio-mark と同じ） */
.c-form__radio {
  flex-shrink: 0;
  width: 16.67px; /* Figma 固有寸法 */
  height: 16.67px;
  margin: 1.67px; /* 20px の枠に合わせる（(20 − 16.67) ÷ 2） */
  border: 2px solid var(--color-text-base);
  border-radius: var(--radius-full);
  background-color: var(--color-bg-base);
  appearance: none;
  cursor: pointer;
}

.c-form__radio:checked {
  border-color: var(--color-bg-brand);
  background: radial-gradient(circle, var(--color-bg-brand) 0 35%, transparent 36%);
}

.c-form__radio:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

/* ---- チェックボックス（Figma: select-check / selected-check） ---- */
.c-form__check {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px; /* Figma 固有値 */
  color: var(--color-text-base);
  cursor: pointer;
}

.c-form__checkbox {
  position: relative;
  flex-shrink: 0;
  width: 20px; /* アイコンサイズ（24px 枠の内側 8.33%） */
  height: 20px;
  margin: 2px; /* 24px 枠の内側 8.33%（Figma select-check） */
  border: 2px solid var(--color-gray-300); /* semantic に該当なし（Figma: gray/300） */
  border-radius: 2px; /* Figma 固有値 */
  background-color: var(--color-bg-base);
  appearance: none;
  cursor: pointer;
}

.c-form__checkbox:checked {
  border-color: var(--color-bg-brand);
  background-color: var(--color-bg-brand);
}

.c-form__checkbox:focus-visible {
  outline: 2px solid var(--color-border-brand);
  outline-offset: 2px;
}

/* チェックマークは input の直後に置いた svg で表示する */
.c-form__check-icon {
  position: absolute;
  width: 12px; /* アイコンサイズ */
  height: 9px;
  margin: 8px 0 0 6px; /* 24px 枠の中央に配置 */
  color: var(--color-icon-inverse);
  visibility: hidden;
  pointer-events: none;
}

.c-form__checkbox:checked + .c-form__check-icon {
  visibility: visible;
}

/* ---- 注記・プライバシー ---- */
.c-form__note {
  color: var(--color-text-base);
}

.c-form__link {
  color: var(--color-text-brand);
  text-decoration: underline;
}

.c-form__link:hover {
  text-decoration: none;
}

@media (max-width: 1023px) {

  .c-form {
    gap: 12px; /* Figma SP 固有値 */
    padding: var(--space-24);
  }

  .c-form__label {
    font-size: 0.875rem; /* SP: renewal/JP/14/Bold（tokens.css .t-jp-14-bold） */
    line-height: calc(24 / 14);
  }

  .c-form__input,
  .c-form__textarea,
  .c-form__option {
    font-size: 0.875rem; /* SP: renewal/JP/14/Regular（tokens.css .t-jp-14-regular） */
    line-height: calc(24 / 14);
  }

  .c-form__options {
    gap: 12px; /* Figma SP 固有値 */
  }

  .c-form__note {
    font-size: 0.625rem; /* SP: renewal/JP/10/Regular（tokens.css .t-jp-10-regular） */
    line-height: calc(20 / 10);
  }
}

/* ---- 送信ボタン（c-button c-button--block に付ける。静的HTML の c-form__submit と同じ）----
   PC: 左右 80px（Figma）。右カラムの狭いフォーム（資料請求 422px・イベント申込 336px）は
   文言＋アイコンが収まらず折り返すため 16px（--narrow。静的HTML の c-form--dense / --bordered）
   SP: 幅 295px 前後で「お問い合わせ内容を送信する」＋アイコンが折り返さないよう左右 16px */
.c-form__submit {
  padding-inline: var(--space-80);
}

.c-form__submit--narrow {
  padding-inline: var(--space-16);
}

@media (max-width: 1023px) {

  .c-form__submit,
  .c-form__submit--narrow {
    padding-inline: var(--space-16);
  }
}