/*
 * 問い合わせページ（contact/）だけで読む CSS。読み込み順は「このファイル → LP の CSS → form-page.css」で、
 * WordPress の頃の「Contact Form 7 の CSS → LP の CSS → form-page.css」の、CF7 の CSS の位置に置く。
 * 中身は、CF7 の CSS（6.1.6）が受け持っていた分のうち form-page.css が上書きしていないもの
 * （送信結果の帯の出し入れ・送信中の印の形と回転・入力エラーの文の置き方）を写したもの。強さ（詳細度）も CF7 のまま。
 * CF7 の原色（青・緑・赤・黄・橙・濃い灰）は写さない（form-page.css が紺と金で塗る）。
 * 足したもの: 罠の欄（contact-trap）を隠す・JavaScript が動かない時の案内（contact-noscript）。
 */

/* 送信結果の帯は、最初・送信中は出さない（文が入る状態の時だけ出す） */
.wpcf7 form.init .wpcf7-response-output,
.wpcf7 form.resetting .wpcf7-response-output,
.wpcf7 form.submitting .wpcf7-response-output {
  display: none;
}

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

/* 入力エラーの文は入力欄の下に1つの塊で（色と字の大きさは form-page.css） */
.wpcf7-not-valid-tip {
  font-size: 1em;
  font-weight: normal;
  display: block;
}

.wpcf7-list-item {
  display: inline-block;
  margin: 0 0 0 1em;
}

.wpcf7-list-item-label::before,
.wpcf7-list-item-label::after {
  content: " ";
}

/* 送信中の印（丸と、その中を回る点）。色と置き場所は form-page.css */
.wpcf7-spinner {
  visibility: hidden;
  display: inline-block;
  opacity: 0.75;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 100%;
  padding: 0;
  margin: 0 24px;
  position: relative;
}

form.submitting .wpcf7-spinner {
  visibility: visible;
}

.wpcf7-spinner::before {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 6px;
  height: 6px;
  border: none;
  border-radius: 100%;
  transform-origin: 8px 8px;
  animation-name: contact-spin;
  animation-duration: 1000ms;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 動きを減らす設定の時は、回さずに明滅だけ */
@media (prefers-reduced-motion: reduce) {
  .wpcf7-spinner::before {
    animation-name: contact-blink;
    animation-duration: 2000ms;
  }
}

@keyframes contact-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes contact-blink {
  from {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.wpcf7 .wpcf7-submit:disabled {
  cursor: not-allowed;
}

.wpcf7 input[type="url"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"] {
  direction: ltr;
}

/* 罠の欄（送る時の website）。人には見えず・押せず・読み上げられない。ロボットだけが埋める。
   display: none にしない（ロボットが見えない欄を飛ばすため）。画面の外へも出さない（横のはみ出しを作らない） */
.form-page .contact-trap {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* JavaScript が動かない時の案内。送信結果の帯（form-page.css）と同じ姿で、罫はエラーの色 */
.form-page .contact-noscript {
  margin-top: 32px;
  padding: 14px 16px;
  border: 1px solid var(--form-error);
  background: var(--form-output-bg);
  color: var(--white);
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}

/* 台帳から届く文（エラー等）は字を選べないので、字を絞った書体ではなく普段の書体で描く。
   文節で折れるブラウザ（word-break: auto-phrase）では文節で折る（用語の途中で改行しない） */
.wpcf7 form .wpcf7-response-output.contact-server-text {
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  word-break: auto-phrase;
}