/* ---- textarea ---- */
form {
  width: 60%;
}

.form-row {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: var(--space-3);
}

.form-label {
  font-size: 1.4rem;
  font-family: var(--font-jp), var(--font-ui);
}

.form-row input[type="text"],
.form-row input[type="email"] {
  width: 100%;
  height: 3.6rem;
  padding: 0 1.2rem;

  font-size: 1.4rem;

  font-family: var(--font-jp), var(--font-ui);

  color: var(--fg);
  background: var(--form-bg);

  border: 1px solid var(--form-border);
  border-radius: var(--radius);

  outline: none;
  transition: 0.15s ease;
}

/* focus */
.form-row input:focus {
  border-color: var(--form-border-focus);
  background: var(--form-bg-focus);
}

/* placeholder */
.form-row input::placeholder {
  color: var(--fg-muted);
  font-size: 1.3rem;
}

/* disabled */
.form-row input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 必須だけど未入力 */
.form-row input:required:invalid {
  border-color: var(--accent-danger);
}

/* 正常入力 */
.form-row input:required:valid {
  border-color: var(--accent-success);
}

/* ---- Questions ---- */
/* fieldset 全体 */
.form-question {
  border: none;
  padding: 0;
  margin: 0 0 var(--space-3);
}

/* 質問文 */
.form-lengend {
  margin-bottom: var(--space-2);
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--fg);

  font-family: var(--font-jp), var(--font-ui);
}

/* 選択肢グループ */
.form-choices {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* 選択肢1つ */
.form-choice {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  padding: 0.8rem 1rem;
  border-radius: var(--radius);

  font-size: 1.4rem;
  font-family: var(--font-jp), var(--font-ui);
  color: var(--fg);

  cursor: pointer;
  user-select: none;

  background: var(--form-bg);
  border: 1px solid var(--form-border);

  transition: 0.15s ease;
}

/* hover */
.form-choice:hover {
  background: var(--form-bg-focus);
}

/* radio button */
.form-choice input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 1.6rem;
  height: 1.6rem;
  margin: 0;

  border: 1px solid var(--form-border);
  border-radius: 50%;
  background: var(--panel);

  display: grid;
  place-items: center;

  transition: 0.15s ease;
}

/* 中のドット */
.form-choice input[type="radio"]::before {
  content: "";
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: 0.15s ease;
}

/* checked */
.form-choice input[type="radio"]:checked {
  border-color: var(--brand-1);
  background: var(--brand-2);
}

.form-choice input[type="radio"]:checked::before {
  transform: scale(1);
}

/* フォーカス */
.form-choice input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(181, 154, 255, 0.35);
}

.form-choice:has(input:checked) {
  border-color: var(--brand-1);
  box-shadow: 0 0 0 1px rgba(181, 154, 255, 0.25);
}