#loading {
    display: none;
}

.loading01 {
    /* 画面最大 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* 背景色（黒、不透明度80%） */
    background-color: #fff;
    opacity: 0.8;
    /* フレックスコンテナ（縦並べ、横中央、縦中央） */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 表示を一番上 */
    z-index: 9999;
    /* 選択付加 */
    user-select: none;
}

span.loading02, span.loading02:before, span.loading02:after {
    display: inline-block;
    width: 50px;
    height: 50px;
    background-repeat: no-repeat;
    background-image:
    -webkit-gradient(radial,3 center,0,3 center,3,from(rgba(232,34,45,0.5)),color-stop(0.5,rgba(232,34,45,0.5)),color-stop(0.9,transparent),to(transparent)),
    -webkit-gradient(radial,center 3,0,center 3,3,from(rgba(232,34,45,0.5)),color-stop(0.5,rgba(232,34,45,0.5)),color-stop(0.9,transparent),to(transparent)),
    -webkit-gradient(radial,46 center,0,46 center,3,from(rgba(232,34,45,0.5)),color-stop(0.5,rgba(232,34,45,0.5)),color-stop(0.9,transparent),to(transparent)),
    -webkit-gradient(radial,center 46,0,center 46,3,from(rgba(232,34,45,0.5)),color-stop(0.5,rgba(232,34,45,0.5)),color-stop(0.9,transparent),to(transparent));
    background-image:
    -webkit-radial-gradient(10% 50%, 4px 4px, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent 95%, transparent),
    -webkit-radial-gradient(50% 10%, 4px 4px, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent 95%, transparent),
    -webkit-radial-gradient(90% 50%, 4px 4px, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent 95%, transparent),
    -webkit-radial-gradient(50% 90%, 4px 4px, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent 95%, transparent);
    background-image:
    radial-gradient(4px 4px at 10% 50%, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent),
    radial-gradient(4px 4px at 50% 10%, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent),
    radial-gradient(4px 4px at 90% 50%, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent),
    radial-gradient(4px 4px at 50% 90%, rgba(232,34,45,0.5), rgba(232,34,45,0.5) 95%, transparent);
  }
  span.loading02 {
    position: relative;
    margin: 0 10px;
    vertical-align: middle;
  }
  span.loading02:before, span.loading02:after {
    position: absolute;
    content: " ";
    z-index: -1;
    left: 0;
    top: 0;
    margin: 0;
  }
  span.loading02:before {
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
  }
  span.loading02:after {
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
  }
  span.loading02 span {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background-image:
    -webkit-gradient(radial,4 center,0,4 center,4,from(#e8222d),color-stop(0.5,#e8222d),color-stop(0.9,transparent),to(transparent));
    background-image:
    -webkit-radial-gradient(10% 50%, 4px 4px, #e8222d, #e8222d 95%, transparent 95%, transparent);
    background-image:
    radial-gradient(4px 4px at 10% 50%, #e8222d, #e8222d 95%, transparent);
    -webkit-animation: animation02 6s linear infinite;
    animation: animation02 6s linear infinite;
  }

  @-webkit-keyframes animation02 {
    0% {
      -webkit-transform: rotate(0deg);
    }
    8.2% {
      -webkit-transform: rotate(0deg);
    }
    8.3% {
      -webkit-transform: rotate(30deg);
    }
    16.6% {
      -webkit-transform: rotate(30deg);
    }
    16.7% {
      -webkit-transform: rotate(60deg);
    }
    24.9% {
      -webkit-transform: rotate(60deg);
    }
    25% {
      -webkit-transform: rotate(90deg);
    }
    33.2% {
      -webkit-transform: rotate(90deg);
    }
    33.3% {
      -webkit-transform: rotate(120deg);
    }
    41.6% {
      -webkit-transform: rotate(120deg);
    }
    41.7% {
      -webkit-transform: rotate(150deg);
    }
    49.9% {
      -webkit-transform: rotate(150deg);
    }
    50% {
      -webkit-transform: rotate(180deg);
    }
    58.2% {
      -webkit-transform: rotate(180deg);
    }
    58.3% {
      -webkit-transform: rotate(210deg);
    }
    66.6% {
      -webkit-transform: rotate(210deg);
    }
    66.7% {
      -webkit-transform: rotate(240deg);
    }
    74.9% {
      -webkit-transform: rotate(240deg);
    }
    75% {
      -webkit-transform: rotate(270deg);
    }
    83.2% {
      -webkit-transform: rotate(270deg);
    }
    83.3% {
      -webkit-transform: rotate(300deg);
    }
    91.6% {
      -webkit-transform: rotate(300deg);
    }
    91.7% {
      -webkit-transform: rotate(330deg);
    }
    99.9% {
      -webkit-transform: rotate(330deg);
    }
    100% {
      -webkit-transform: rotate(360deg);
    }
  }
  @keyframes animation02 {
    0% {
      transform: rotate(0deg);
    }
    8.2% {
      transform: rotate(0deg);
    }
    8.3% {
      transform: rotate(30deg);
    }
    16.6% {
      transform: rotate(30deg);
    }
    16.7% {
      transform: rotate(60deg);
    }
    24.9% {
      transform: rotate(60deg);
    }
    25% {
      transform: rotate(90deg);
    }
    33.2% {
      transform: rotate(90deg);
    }
    33.3% {
      transform: rotate(120deg);
    }
    41.6% {
      transform: rotate(120deg);
    }
    41.7% {
      transform: rotate(150deg);
    }
    49.9% {
      transform: rotate(150deg);
    }
    50% {
      transform: rotate(180deg);
    }
    58.2% {
      transform: rotate(180deg);
    }
    58.3% {
      transform: rotate(210deg);
    }
    66.6% {
      transform: rotate(210deg);
    }
    66.7% {
      transform: rotate(240deg);
    }
    74.9% {
      transform: rotate(240deg);
    }
    75% {
      transform: rotate(270deg);
    }
    83.2% {
      transform: rotate(270deg);
    }
    83.3% {
      transform: rotate(300deg);
    }
    91.6% {
      transform: rotate(300deg);
    }
    91.7% {
      transform: rotate(330deg);
    }
    99.9% {
      transform: rotate(330deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }