@charset "UTF-8";
/*=======================================================*/
/*COVER FOR LOADER*/
/*=======================================================*/
.fade-layer {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99998;
  transition: .8s; }

.fade-layer-off {
  opacity: 0; }

body.cover-off:before {
  content: ''; }

/*=======================================================*/
/*Loader*/
/*=======================================================*/
#loader {
  animation: animate 1s linear infinite;
  clip: rect(0, 80px, 80px, 40px);
  height: 80px;
  width: 80px;
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  z-index: 99999; }

@keyframes animate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(220deg); } }
#loader:after {
  animation: animate2 1s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  content: '';
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: absolute; }

@keyframes animate2 {
  0% {
    box-shadow: inset #b0b0b0 0 0 0 2px;
    transform: rotate(-140deg); }
  50% {
    box-shadow: inset #b0b0b0 0 0 0 2px; }
  100% {
    box-shadow: inset #b0b0b0 0 0 0 2px;
    transform: rotate(140deg); } }
#loader {
  animation: animate 1s linear infinite;
  clip: rect(0, 80px, 80px, 40px);
  height: 80px;
  width: 80px;
  position: absolute;
  left: calc(50% - 40px);
  top: calc(50% - 40px);
  z-index: 99999; }

@keyframes animate {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(220deg); } }
#loader:after {
  animation: animate2 1s ease-in-out infinite;
  clip: rect(0, 80px, 80px, 40px);
  content: '';
  border-radius: 50%;
  height: 80px;
  width: 80px;
  position: absolute; }

@keyframes animate2 {
  0% {
    box-shadow: inset #b0b0b0 0 0 0 2px;
    transform: rotate(-140deg); }
  50% {
    box-shadow: inset #b0b0b0 0 0 0 2px; }
  100% {
    box-shadow: inset #b0b0b0 0 0 0 2px;
    transform: rotate(140deg); } }
/*=======================================================*/
/*四角が回るローダー*/
/*=======================================================*/
.loader_square {
  width: 40px;
  height: 40px;
  background-color: #b0b0b0;
  margin: 0;
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
  animation: sk-rotateplane 1.2s infinite ease-in-out; }

@-webkit-keyframes sk-rotateplane {
  0% {
    -webkit-transform: perspective(120px); }
  50% {
    -webkit-transform: perspective(120px) rotateY(180deg); }
  100% {
    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } }
@keyframes sk-rotateplane {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
  50% {
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
  100% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } }
/*=======================================================*/
/*LOADER POINT FADE*/
/*=======================================================*/
.loader-point_fade {
  position: relative; }

.loader-point_fade {
  position: relative; }
.loader-point_fade:before, .loader-point_fade:after {
  content: '';
  width: inherit;
  height: inherit;
  border-radius: 50%;
  background-color: #ff0000;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  animation: loader-point_fade 2.0s infinite ease-in-out; }
.loader-point_fade:after {
  animation-delay: -1.0s; }

@keyframes loader-point_fade {
  0%,
	100% {
    transform: scale(0); }
  50% {
    transform: scale(1); } }