/* Contact Form 7 の出力を、カンプ（top-v2.html #qc-form・contact.html #contact-form）の見た目に合わせる */

.qc-form {
  --form-error: #ffc2c2; /* 青いパネル上のエラー文。--red（#d01126）では背景とのコントラストが 1.4:1 しか取れないため明るい赤にする */
}

.form-block {
  --form-error: var(--red);
}

/* 入力欄は CF7 の包み（span）の中でブロックにして、下に行の余白が出ないようにする */
.qc-form .wpcf7-form-control-wrap > :is(input, textarea),
.form-block .wpcf7-form-control-wrap > :is(input, select, textarea) {
  display: block;
}

/* ラジオ・同意チェックは包みを消して、カンプと同じ label の並びにする */
.qc-radios .wpcf7-form-control-wrap,
.qc-radios .wpcf7-radio,
.qc-radios .wpcf7-list-item,
.qc-consent .wpcf7-form-control-wrap,
.qc-consent .wpcf7-acceptance,
.qc-consent .wpcf7-list-item,
.form-checkbox .wpcf7-form-control-wrap,
.form-checkbox .wpcf7-acceptance,
.form-checkbox .wpcf7-list-item {
  display: contents;
}

/* ラジオの選択肢・入力例は CF7 が出力するのでマークアップで包めない。「・」の後ろでだけ折る（入りきらないときだけ任意の位置で折れる） */
.qc-radios .wpcf7-list-item-label,
.qc-form textarea::placeholder {
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 項目ごとのエラー文（入力欄の下） */
.qc-form .wpcf7-not-valid-tip,
.form-block .wpcf7-not-valid-tip {
  margin-top: 0.4rem;
  color: var(--form-error);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.5;
}

/* 同意チェックのエラー文は、チェックと文言の行の下に回す（エラーが出たときだけ grid にする。通常時はカンプの flex のまま） */
.qc-consent:has(.wpcf7-not-valid-tip),
.form-checkbox:has(.wpcf7-not-valid-tip) {
  display: grid;
  grid-auto-flow: dense;
}

.qc-consent:has(.wpcf7-not-valid-tip) {
  grid-template-columns: auto auto;
  justify-content: center;
}

.form-checkbox:has(.wpcf7-not-valid-tip) {
  grid-template-columns: auto 1fr;
}

.qc-consent .wpcf7-not-valid-tip,
.form-checkbox .wpcf7-not-valid-tip {
  grid-column: 1 / -1;
  margin-top: 0;
}

.qc-consent .wpcf7-not-valid-tip {
  text-align: center;
}

/* エラー文が出た行は、ラベルを入力欄の1行目にそろえる（カンプの textarea の行と同じ扱い） */
.qc-field:has(.wpcf7-not-valid-tip),
.form-row:has(.wpcf7-not-valid-tip) {
  align-items: start;
}

.qc-field:has(.wpcf7-not-valid-tip) .qc-label,
.form-row:not(.form-consent-row):has(.wpcf7-not-valid-tip) .form-label {
  padding-top: 0.8rem;
}

/* フォーム全体のメッセージ（送信ボタンの下） */
.wpcf7 form.qc-form .wpcf7-response-output,
.wpcf7 form.form-block .wpcf7-response-output {
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--form-error);
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

.wpcf7 form.form-block .wpcf7-response-output {
  margin-top: 1rem;
}

.wpcf7 form.sent .wpcf7-response-output {
  color: inherit;
}

/* 送信ボタン: 文字をボタンの中央に置き、矢印は右端に固定する */
.wpcf7 .qc-submit,
.wpcf7 .form-submit {
  position: relative;
  justify-content: center;
  padding-inline: 3rem;
  text-align: center;
}

.wpcf7 .qc-submit > svg,
.wpcf7 .form-submit > svg {
  position: absolute;
  top: 50%;
  right: 0.7em;
  margin: 0;
  transform: translateY(-50%);
}

/* 送信中は二重送信しないようにボタンを止める */
.wpcf7-form.submitting [type="submit"] {
  opacity: 0.6;
  pointer-events: none;
}

/* CF7 が無効・フォーム未作成のとき、管理者にだけ出す注意文（inc/cf7.php） */
.cf7-missing {
  width: min(50rem, 100%);
  margin: 0 auto;
  padding: 1rem;
  border: 1px dashed currentColor;
  font-size: 0.875rem;
  font-weight: 700;
  text-align: center;
}

@media (max-width: 64rem) {
  .qc-field:has(.wpcf7-not-valid-tip) .qc-label {
    padding-top: 0;
  }
}

@media (max-width: 47.9375rem) {
  .form-row:not(.form-consent-row):has(.wpcf7-not-valid-tip) .form-label {
    padding-top: 0;
  }
}