.contact img {
  max-width: 100%;
}

.contact .form__message {
  align-items: flex-start;
}

.contact .icon-success {
  margin-top: 0.2rem;
}

.contact .field,
.contact .contact__field-group {
  margin-bottom: 1.5rem;
}

@media screen and (min-width: 750px) {
  .contact .field,
  .contact .contact__field-group {
    margin-bottom: 2rem;
  }
}

.contact__button {
  margin-top: 3rem;
}

@media screen and (min-width: 750px) {
  .contact__button {
    margin-top: 4rem;
  }
}

@media screen and (min-width: 750px) {
  .contact__fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-column-gap: 2rem;
  }
}

/* --- 送信できなかったときのエラー一覧 --- */
/*
 * 色をトークン（--color-foreground 等）任せにしない。申し送りの不具合 A のとおり、
 * このテーマは背景を黒く塗る一方で Dawn のトークンは明色スキームのままなので、
 * トークンに頼ると黒地に黒で読めなくなる。
 */
.contact__errors {
  margin: 0.8rem 0 0;
  padding-left: 2rem;
  color: #ff7a7a;
  font-size: 1.4rem;
  line-height: 1.7;
}

/*
 * 補足テキスト付きの項目（ご注文番号など）。
 *
 * `.field` は `display:flex` なので、直下に補足文を置くと横に並んでしまう。
 * 補足文は `.field` の外に出し、この見出し用の div でひとまとめにして
 * 他の項目と同じ余白（`.contact .field` の margin-bottom）を持たせる。
 */
.contact__field-group .field {
  margin-bottom: 0.6rem;
}

.contact__field-hint {
  margin: 0;
  font-size: 1.4rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.65);
}

/* --- 個人情報の取り扱いへの同意 --- */
.contact__consent {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-top: 2rem;
  font-size: 1.4rem;
  line-height: 1.6;
  color: rgba(var(--color-foreground), 0.85);
}

.contact__consent input[type='checkbox'] {
  flex: 0 0 auto;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0.1rem 0 0;
  accent-color: rgb(var(--color-foreground));
  cursor: pointer;
}

.contact__consent label {
  cursor: pointer;
}

.contact__consent a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.3rem;
}

/*
 * 自動送信よけ。人には見せず、読み上げソフトにも読ませない（テンプレート側で
 * aria-hidden を付けている）。display:none にしないのは、表示されない欄を
 * 素通りするボットがあるため。
 */
.contact__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}