@charset "UTF-8";
.box{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  -webkit-transition: all 1.2s ease; /* 1.2秒でフェードアウト */
          transition: all 1.2s ease;
  color: #cece41; /* ローディングアニメーションカラー */
  background-color: #fff; /* 背景カラー */
}
.box.loaded{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.spinner {
  position: absolute;
  top: 50%;
  left: 50%;
	margin: -50px 0 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 100px;
  height: 100px;
}

.spinner2 {
  position: absolute;
  top: 50%;
  left: 50%;
	margin: -50px 0 0;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transform-origin: center;
          transform-origin: center;
  width: 100px;
  height: 100px;
}


.spinner2 span {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  font-size: 12px;
}

.spinner.type2 {
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-color: #0096FF transparent;
  -webkit-animation: spinner1_1 2.2s infinite linear forwards;
          animation: spinner1_1 2.2s infinite linear forwards;
}
.spinner.type2::before {
  content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  bottom: 4px;
  border-radius: 50%;
  border-width: 4px;
  border-style: solid;
  border-color: #FF0096 transparent;
  animation: spinner1_2 .8s infinite linear forwards reverse;
}
/*
.spinner2 span {
  animation: spinner_loading_text 2.2s infinite linear forwards reverse;
}
*/

@-webkit-keyframes spinner1_1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes spinner1_1 {
  0% {
    -webkit-transform: translate(-50%, -50%) rotate(0);
            transform: translate(-50%, -50%) rotate(0);
  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}
@-webkit-keyframes spinner1_2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spinner1_2 {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes spinner_loading_text {
  0% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(0deg);
            transform: translate(-50%, -50%) rotate(0deg);
  }
  50% {
    opacity: 0;
    -webkit-transform: translate(-50%, -50%) rotate(180deg);
            transform: translate(-50%, -50%) rotate(180deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) rotate(360deg);
            transform: translate(-50%, -50%) rotate(360deg);
  }
}