/*

フォームの多重送信防止

*/

form.wpcf7-form {
  /* --- 共通の事前準備（ページ読み込み時から不可視で待機） --- */
  &::after,
  &::before {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    pointer-events: none; /* 通常時は一切邪魔しない */
    color: #fff;
    font-size: 40px;
    z-index: 10000;
    @media screen and (max-width: 767px) {
      font-size: 30px;
    }
  }

  /* 1. 黒い幕と「送信中」の文字（after） */
  &::after {
    content: "送信中";
    width: 100vw;
    top: 0;
    left: 0;
    padding-right: 1.5em;
    background: rgba(0, 0, 0, 0.5);
  }

  /* 2. 動くピリオド担当（before） */
  &::before {
    content: "";
    width: fit-content;
    top: 0;
    left: calc(50vw + 1.5em);
    z-index: 10001;
  }

  /* --- 送信中：クラス付与時にフェードイン --- */
  &.submitting {
    &::after,
    &::before {
      opacity: 1;
      visibility: visible;
      pointer-events: auto; /* 画面全体をロック */
    }

    &::before {
      animation: dots-running 1.5s infinite steps(4);
    }
  }
}

/* アニメーションはネストの外に出すのが一般的です */
@keyframes dots-running {
  0%   { content: ""; }
  25%  { content: "."; }
  50%  { content: ".."; }
  75%  { content: "..."; }
  100% { content: ""; }
}