@charset "utf-8";
/*--------------------------------------------------------
	loader 
---------------------------------------------------------*/


@media screen and (max-width: 780px) and (orientation: portrait) { 

}/*END*/


.loader {
  position: fixed; left: 50%; top: 50%; z-index: 9999;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  /*border: solid 1px rgba(255,255,255,.3); 
  /*background: rgba(0,0,0,.4);*/
  text-align: center;
  opacity: 1;
  border-radius: 50%;
   transition:1s;

}

.loader::before,
.loader::after { 
  position: absolute; left: 50%; top: 50%;
  content: '';
  display: block;
  background: linear-gradient(to bottom, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 51%);/*グラデ*/
}

.loader::before {
  margin: -30% 0 0 -.65px;
  width: 1.3px;
  height: 60%;
  animation:load 60s infinite linear;
}

.loader::after {
  margin: -45% 0 0 -.65px;
  width: 1.3px;
  height: 90%;
  animation:load 5s infinite linear;
}
@keyframes load {
   0% { transform:rotate(0deg);}
   100% { transform:rotate(360deg);}
}

.loader span{ display: block; width: 1.3px; height: 100%;  margin-left: -.65px;  position: absolute; left: 50%; }
.loader span::before,
.loader span::after{ content: ''; position: absolute; left: 50%; display: block; width: 100%;  background: #fff; }
.loader span::before{ top: 0%;}
.loader span::after{ bottom: 0%; }
.loader span:nth-child(1)::before,
.loader span:nth-child(1)::after,
.loader span:nth-child(2)::before,
.loader span:nth-child(2)::after{ height: 13%;opacity: .7; }
.loader span:nth-child(3)::before,
.loader span:nth-child(3)::after,
.loader span:nth-child(4)::before,
.loader span:nth-child(4)::after,
.loader span:nth-child(5)::before,
.loader span:nth-child(5)::after,
.loader span:nth-child(6)::before,
.loader span:nth-child(6)::after{ height: 5%; opacity: .7; }

.loader span:nth-child(1){ transform:rotate(0deg);}
.loader span:nth-child(2){ transform:rotate(90deg);}
.loader span:nth-child(3){ transform:rotate(60deg);}
.loader span:nth-child(4){ transform:rotate(30deg);}
.loader span:nth-child(5){ transform:rotate(120deg);}
.loader span:nth-child(6){ transform:rotate(150deg);}


.loader.fade { opacity: 0;}