/* forms.css
   Contact Form 7（CF7）が出すフォームの DOM を、見本のフォーム（parts.css の c-form）と同じ見た目にする。
   お問い合わせ・無料AI検索診断のページだけで、parts.css とページ別 CSS のあとに読む（inc/forms.php）。parts.css は書き換えない。

   CF7 の DOM
     div.wpcf7 > form.wpcf7-form.c-form.c-form--card …
       span.wpcf7-form-control-wrap > input / select / textarea（c-form__control を class: で付けてある）
       span.wpcf7-form-control-wrap > span.wpcf7-checkbox / .wpcf7-radio / .wpcf7-acceptance > span.wpcf7-list-item > label > input + span.wpcf7-list-item-label
       span.wpcf7-not-valid-tip（入力欄のあとに CF7 の JS が足す）／ div.wpcf7-response-output ／ span.wpcf7-spinner（送信ボタンのあとに足される）
   CF7 の標準の CSS（plugins/contact-form-7/includes/css/styles.css）より強く効くよう、.wpcf7 を頭に付けて書く。
   決まりは parts.css と同じ（従来のメディアクエリ、影なし、色は base.css のトークン、角丸 2px まで、押せるものは44px以上、入力欄の文字は16px）。
   見本が丸で描いているもの（ラジオの丸、エラーの「!」の丸）だけは、見本と同じに丸にしている。 */

/* CF7 が無いとき・フォームが無いときの案内（inc/forms.php）。管理者向けの注意と訪問者向けの案内の間をあける */
.js-of-form-notice + .js-of-form-fallback {
  margin-top: 16px;
}

.wpcf7 .screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.wpcf7 .c-form .hidden-fields-container {
  display: none;
}

.wpcf7 .c-form .wpcf7-form-control-wrap {
  position: relative;
  display: block;
}

/* 入力欄の誤り：CF7 は aria-invalid="true" と wpcf7-not-valid を付ける（parts.css は aria-invalid だけを見る） */
.wpcf7 .c-form .c-form__control.wpcf7-not-valid {
  background-color: var(--c-accent-soft);
  border-color: var(--c-accent-text);
}

.wpcf7 .c-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--c-accent-text);
}

.wpcf7 .c-form .wpcf7-not-valid-tip::before {
  content: "!";
  content: "!" / "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 6px;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
  vertical-align: .06em;
  color: var(--c-white);
  background: var(--c-accent-text);
  border-radius: 50%;
}

/* セレクト：矢印は、見本では c-form__select の疑似要素。CF7 は入力欄を span で包み、誤りの文もその中に入るので、矢印は span に描く */
.wpcf7 .c-form .c-form__select::after {
  content: none;
}

.wpcf7 .c-form .c-form__select > .wpcf7-form-control-wrap::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 20px;
  width: 8px;
  height: 8px;
  margin-top: -6px;
  pointer-events: none;
  border-right: 1.5px solid var(--c-ink);
  border-bottom: 1.5px solid var(--c-ink);
  transform: rotate(45deg);
}

/* チェックボックス・ラジオ・同意（縦に並ぶ選択肢）：見本の c-form__choice。四角と丸は、見本では隣の span で、ここでは文字の span の ::before */
.wpcf7 .c-form .c-form__choices .wpcf7-checkbox,
.wpcf7 .c-form .c-form__choices .wpcf7-radio {
  display: grid;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item {
  display: block;
  margin: 0;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item > label,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item > label {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 0;
  font-size: 15px;
  line-height: 1.6;
  cursor: pointer;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item input,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item input {
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin: -11px 0 0;
  opacity: 0;
  cursor: pointer;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item-label,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item-label {
  position: relative;
  display: block;
  min-width: 0;
  padding-left: 34px;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item-label::before,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item-label::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  background: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
  transition: border-color .2s, background-color .2s;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item-label::after,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item-label::after {
  content: none;
}

.wpcf7 .c-form .c-form__choices .wpcf7-radio input[type="radio"] + .wpcf7-list-item-label::before {
  border-radius: 50%;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item > label:hover .wpcf7-list-item-label::before,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item > label:hover .wpcf7-list-item-label::before,
.wpcf7 .c-form .c-form__choices .wpcf7-list-item input:checked + .wpcf7-list-item-label::before,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
  border-color: var(--c-ink);
}

.wpcf7 .c-form .c-form__choices .wpcf7-checkbox input:checked + .wpcf7-list-item-label::before,
.wpcf7 .c-form .wpcf7-acceptance input:checked + .wpcf7-list-item-label::before {
  background: var(--c-ink);
}

.wpcf7 .c-form .c-form__choices .wpcf7-checkbox input:checked + .wpcf7-list-item-label::after,
.wpcf7 .c-form .wpcf7-acceptance input:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 8px;
  width: 6px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--c-white);
  border-bottom: 2px solid var(--c-white);
  transform: rotate(45deg);
}

.wpcf7 .c-form .c-form__choices .wpcf7-radio input:checked + .wpcf7-list-item-label::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 6px;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  background: var(--c-ink);
  border-radius: 50%;
}

.wpcf7 .c-form .c-form__choices .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label::before,
.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label::before {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item-label a {
  color: var(--c-accent-text);
  text-underline-offset: 3px;
}

.wpcf7 .c-form .wpcf7-acceptance .wpcf7-list-item-label a:hover {
  color: var(--c-accent-hover);
}

/* チップ型の選択：見本の c-form__chip。label が枠、input が透明な重ね、文字の span がチップの見た目 */
.wpcf7 .c-form .c-form__chips .wpcf7-checkbox,
.wpcf7 .c-form .c-form__chips .wpcf7-radio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item {
  display: inline-flex;
  max-width: 100%;
  margin: 0;
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item > label {
  position: relative;
  display: inline-flex;
  max-width: 100%;
  cursor: pointer;
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item input {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--c-ink);
  background: var(--c-white);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-s);
  transition: border-color .2s;
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item-label::before,
.wpcf7 .c-form .c-form__chips .wpcf7-list-item-label::after {
  content: none;
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item > label:hover .wpcf7-list-item-label {
  border-color: var(--c-ink);
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item input:checked + .wpcf7-list-item-label {
  color: var(--c-white);
  background: var(--c-ink);
  border-color: var(--c-ink);
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item input:checked + .wpcf7-list-item-label::before {
  content: "";
  flex: none;
  width: 5px;
  height: 9px;
  margin-top: -3px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}

.wpcf7 .c-form .c-form__chips .wpcf7-list-item input:focus-visible + .wpcf7-list-item-label {
  outline: 2px solid var(--c-accent);
  outline-offset: 2px;
}

/* ファイル添付：入力欄は span の中に入るので、span を消して（display: contents）、入力欄と誤りの文を枠（zone）の直下に置く。
   誤りの文は、見本の c-form__error と同じく、枠のあとに出す（order） */
.wpcf7 .c-form .c-form__file-zone {
  display: flex;
  flex-direction: column;
}

.wpcf7 .c-form .c-form__file-zone > .wpcf7-form-control-wrap {
  position: static;
  display: contents;
}

.wpcf7 .c-form .c-form__file-zone .c-form__file-drop {
  order: 1;
}

.wpcf7 .c-form .c-form__file-zone .wpcf7-not-valid-tip {
  order: 2;
}

.wpcf7 .c-form .c-form__file--ready .c-form__file-zone > .wpcf7-form-control-wrap:focus-within ~ .c-form__file-drop {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* Turnstile（迷惑メール対策）の置き場所：同意の項目のあと、送信ボタンのすぐ上（cf7/*-form.txt の [turnstile]。詳しくは cf7/README.md）。
   インテグレーションが無効なときは入れ物が空（:empty）になるので、消して余白も作らない。
   有効なときは、ウィジェット（iframe）が読み込みのあと高さ 65px で描かれるので、min-height で先に取り、送信ボタンを動かさない。line-height: 0 は、iframe の下の隙間（9px ほど）を消して 65px ちょうどにする。
   iframe の min-width は 300px で、SP の 375px では入れ物が 293px しかない。足りない分だけ左右に同じ量の負の余白を取り、右へはみ出さないようにする（300px 以上あるときは 0）。 */
.wpcf7 .c-form .of-form-turnstile {
  min-width: 0;
  min-height: 65px;
  margin-right: min(0px, calc((100% - 300px) / 2));
  margin-left: min(0px, calc((100% - 300px) / 2));
  line-height: 0;
}

.wpcf7 .c-form .of-form-turnstile:empty {
  display: none;
}

/* 送信ボタン：CF7 の [submit] は input。c-button の見た目は input にも効くので、標準の見た目だけ外す */
.wpcf7 .c-form .c-form__submit {
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7 .c-form .c-form__submit:disabled {
  cursor: not-allowed;
  background: var(--c-ink-3);
  border-color: var(--c-ink-3);
}

.wpcf7 .c-form.submitting .c-form__submit,
.wpcf7 .c-form[data-status="submitting"] .c-form__submit {
  cursor: progress;
  pointer-events: none;
}

/* 送信中の印：CF7 の丸いスピナーをやめ、ボタンの上端に細い帯を流す。ボタンの幅いっぱい・高さ3pxで、画面の高さは変わらない */
.wpcf7 .c-form .c-form__actions {
  position: relative;
}

.wpcf7 .c-form .wpcf7-spinner {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: block;
  width: auto;
  height: 3px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  background-color: var(--c-accent-hover);
  border: 0;
  border-radius: 0;
  opacity: 1;
}

.wpcf7 .c-form .wpcf7-spinner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  margin: 0;
  background-color: var(--c-white);
  border: 0;
  border-radius: 0;
  transform: translateX(-100%);
  transform-origin: 0 0;
  animation: of-form-progress 1.2s linear infinite;
}

.wpcf7 .c-form.submitting .wpcf7-spinner,
.wpcf7 .c-form[data-status="submitting"] .wpcf7-spinner {
  visibility: visible;
}

@keyframes of-form-progress {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(340%);
  }
}

/* 送信の結果：初期・送信中は出さず、空のときも出さない。誤り・失敗は、入力欄の誤りと同じ淡い朱の地と朱の枠にする。
   scroll-margin-bottom：迷惑メールの判定・送信の失敗のとき、assets/js/forms.js が文を画面に入れる（scrollIntoView）。足りない分だけ動かし、画面の下端から約 16px の余白が取れるようにする。この 16px が、文と画面の下端の間の余白。
   SP の固定バー（l-sticky-cta）の分は、layout.css の html の scroll-padding-bottom が取るので、ここでは足さない。固定バーの無い診断の SP でも、layout.css の html の scroll-padding-bottom（69px）が効くので、余白は約 85px になる */
div.wpcf7 form.c-form .wpcf7-response-output {
  margin: 0;
  padding: 14px 18px;
  scroll-margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-ink);
  background: var(--c-paper);
  border: 1px solid var(--c-ink-3);
  border-radius: var(--radius-m);
}

div.wpcf7 form.c-form .wpcf7-response-output:empty,
div.wpcf7 form.c-form.init .wpcf7-response-output,
div.wpcf7 form.c-form.resetting .wpcf7-response-output,
div.wpcf7 form.c-form.submitting .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="init"] .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="resetting"] .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="submitting"] .wpcf7-response-output {
  display: none;
}

div.wpcf7 form.c-form.invalid .wpcf7-response-output,
div.wpcf7 form.c-form.unaccepted .wpcf7-response-output,
div.wpcf7 form.c-form.failed .wpcf7-response-output,
div.wpcf7 form.c-form.aborted .wpcf7-response-output,
div.wpcf7 form.c-form.spam .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="invalid"] .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="unaccepted"] .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="failed"] .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="aborted"] .wpcf7-response-output,
div.wpcf7 form.c-form[data-status="spam"] .wpcf7-response-output {
  font-weight: 700;
  background: var(--c-accent-soft);
  border-color: var(--c-accent-text);
}

/* 強制カラー（Windowsのハイコントラスト）では背景色が消えるので、背景で描いている印に文字色を指定し、選んだ状態を枠で示す（parts.css と同じ考え方） */
@media (forced-colors: active) {
  .wpcf7 .c-form .c-form__choices .wpcf7-radio input:checked + .wpcf7-list-item-label::after,
  .wpcf7 .c-form .wpcf7-spinner::before {
    background-color: CanvasText;
  }

  .wpcf7 .c-form .c-form__chips .wpcf7-list-item input:checked + .wpcf7-list-item-label {
    border: 2px solid Highlight;
  }
}