/* ---------- パンくずを持たないページヒーロー ----------
   上余白はパンくず1行ぶん（space-6 ＋ 行）を補って、他ページと見出しの位置をそろえる */
.page-hero--plain{padding-top:var(--space-11)}
/* 節を持たないページ。ヒーローの地を下端まで伸ばし、sticky footer の余りを白で残さない */
.main--fill{display:flex;flex-direction:column}
.main--fill > .page-hero{flex:1 0 auto}

/* ---------- 項目 ----------
   1カラム。幅は入力欄が読みやすい範囲に留め、左端はページヒーローと揃える */
.form{
  display:flex;flex-direction:column;gap:var(--space-6);
  max-width:672px;margin-top:var(--space-8);
}
.field{display:flex;flex-direction:column;gap:var(--space-2)}
/* ラベルは text-subtle・text-sm・weight-medium（DS common.md §9.8） */
.field__label{
  padding:0;
  font-size:var(--text-sm);font-weight:var(--weight-medium);letter-spacing:.04em;
  color:var(--color-text-subtle);
}

/* ---------- 入力欄（DS input.md §8 の状態に従う） ---------- */
.field__control{
  width:100%;padding:var(--space-3) var(--space-4);
  background:var(--color-surface);
  border:1px solid var(--color-border-strong);
  border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:var(--text-md);line-height:var(--leading-md);
  letter-spacing:.02em;color:var(--color-text-heading);
  transition:border-color var(--motion-fast) var(--ease-standard);
}
/* 記入例としてだけ使う。ラベルの代用にしない（DS input.md §11） */
.field__control::placeholder{color:var(--color-placeholder)}
/* hover は枠を僅かに濃くする。生色を足さない */
.field__control:hover,.field__control:active{border-color:color-mix(in srgb,var(--color-border-strong) 60%,var(--color-text))}
/* 枠そのものが指標のため、リングは外付けにせず内側へ描く＝枠が focus の 2px になる。
   レイアウトは動かない（DS common.md §9.7・input.md §8） */
.field__control:focus-visible{outline:2px solid var(--color-focus);outline-offset:-2px}
textarea.field__control{min-height:10rem;resize:vertical}
/* select は native の矢印を消し、chevron を trailing に重ねる（DS input.md §6・§11）。
   右 padding は矢印の幅と左右の余白ぶん空ける */
.field__select{position:relative;display:flex}
select.field__control{appearance:none;padding-right:calc(1rem + var(--space-3) * 2)}
/* 未選択のあいだは「選択してください」を placeholder の色で見せる（DS input.md §8）。
   error の枠は :user-invalid が持つため、読み込み直後に赤くはならない */
select.field__control:invalid{color:var(--color-placeholder)}
.field__select .ic{
  position:absolute;right:var(--space-3);top:50%;transform:translateY(-50%);
  width:1rem;height:1rem;color:var(--color-text-subtle);pointer-events:none;
}

/* ---------- エラー（DS input.md §8・§11） ----------
   枠の色だけで示さず、アイコンと文言を対で出す。
   :user-invalid＝入力または送信を試みた後にだけ当たる（読み込み直後の空欄では出ない）。
   文言は常に DOM に置き、aria-describedby で結ぶ。隠れている間は読み上げられない */
.field__control:user-invalid{border-color:var(--color-error)}
/* 同意は native の checkbox に枠が効かないため、面の側で示す。
   枠は inset の box-shadow で足す＝レイアウトが動かない（→ README §注意点） */
.field:has(.consent input:user-invalid) .consent{box-shadow:inset 0 0 0 1px var(--color-error)}
/* error 時は focus でも error を維持する（DS input.md §8） */
.field__control:user-invalid:focus-visible{outline-color:var(--color-error)}
/* select は器で包むため兄弟にならない。項目ごと :has で拾う */
.field__error{display:none}
.field:has(:user-invalid) .field__error{
  display:flex;align-items:center;gap:var(--space-2);
  font-size:var(--text-xs);line-height:var(--leading-sm);color:var(--color-error);
}
.field__error .ic{width:1rem;height:1rem}

/* ---------- お問い合わせ対象 ----------
   遷移元があるときだけ出す。.field は display:flex を持つため、UA の [hidden] では隠れない
   （作者スタイルが UA スタイルに勝つ）。同じ詳細度で打ち消す */
.field[hidden]{display:none}
/* 遷移元が決めた値のため readonly で見せる。枠を border に弱め、hover でも濃くしない（DS input.md §8）。
   :read-only は select にも一致するため、属性で拾う */
.field__control[readonly],.field__control[readonly]:hover{border-color:var(--color-border)}

/* ---------- 送信エラー ----------
   枠と文言だけで示し、面には敷かない（→ README §色）。項目のエラーと違い :user-invalid で
   出せないため、form.js が hidden を外す */
.form__error[hidden]{display:none}
.form__error{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);
  box-shadow:inset 0 0 0 1px var(--color-error);
  font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-error);
}
.form__error .ic{flex:none;width:1rem;height:1rem}

/* ---------- 同意 ----------
   面を持たせて他の項目と役割を分ける。リンクは別の当たりのため下線で示す */
.consent{
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-4);border-radius:var(--radius-sm);
  background:var(--color-surface-brand);cursor:pointer;
  font-size:var(--text-sm);line-height:var(--leading-sm);color:var(--color-text);
}
/* チェックは操作のため accent（青）。リングは外付け（DS common.md §9.7 の既定） */
.consent input{
  flex:none;width:1.125rem;height:1.125rem;margin:.2em 0 0;
  accent-color:var(--color-accent);cursor:pointer;
}
.consent input:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.consent a{color:var(--color-accent);text-decoration:underline;text-underline-offset:.2em}
/* 文中のため flex で並べず、ベースラインに寄せる */
.consent a .ic{margin-inline:.125em;vertical-align:-.125em}

/* ---------- 注記と送信 ----------
   ボタンの幅は親レイアウトの責務のため min-width で下限だけ与える（→ README §ボタン） */
.form__note{font-size:var(--text-sm);color:var(--color-text-subtle)}
.form__submit{align-self:flex-start;min-width:280px;margin-top:var(--space-2)}

/* ---------- レスポンシブ（境界は他ページと同じ 720px） ---------- */
@media (max-width:720px){
  .form__submit{align-self:stretch;min-width:0;max-width:var(--max-action)}
}