@charset "utf-8";
/*　基本レイアウト　*/

/* #loading {
  position: fixed;
  display: none;
  left: 0;
  top: 0;
  z-index: 1001;
}

#loading .loading_mask {
  position: fixed;
  background-color: rgba(0, 0, 0, 0.5);
  left: 0;
  top: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
}

#loading .loading_dialog {
  position: fixed;
  background-color: #ffffff;
  z-index: 1003;
  box-shadow: 0 0 6px #000000;
  border-radius: 3px;
  height: 100px;
  width: 100px;
  top: calc(50% - 50px);
  left: calc(50% - 50px);
  color: #ffffff;
  text-align: center;
}

#loading .loading_animation{
  color: #ffffff;
  font-size: 90px;
  text-indent: -9999em;
  overflow: hidden;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  margin: 72px auto;
  position: relative;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load6 1.7s infinite ease, round 1.7s infinite ease;
  animation: load6 1.7s infinite ease, round 1.7s infinite ease;
}
 */
* ローディングアニメ * /
#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 1;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #02a4f5;
  z-index: 2;
}

#loader { //
  border: solid; /*to test position*/
  width: 170px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -10px -85px;
}

#loader div {
  height: 20px;
  width: 20px;
  background: #02a4f5;
  border-radius: 50%;
  position: absolute;
  animation: animate 1.4s ease infinite;
}

#loader p {
  position: absolute;
  top: 30px;
  left: 35px;
}

#loader div:nth-child(2) {
  transform: translateX(30px);
  transform: translateX(30px);
  animation-delay: .08s;
}

#loader div:nth-child(3) {
  transform: translateX(60px);
  transform: translateX(60px);
  animation-delay: .16s;
}

#loader div:nth-child(4) {
  transform: translateX(90px);
  transform: translateX(90px);
  animation-delay: .24s;
}

#loader div:nth-child(5) {
  transform: translateX(120px);
  transform: translateX(120px);
  animation-delay: .32s;
}

#loader div:nth-child(6) {
  transform: translateX(150px);
  transform: translateX(150px);
  animation-delay: .40s;
}

@
-webkit-keyframes load6 { 0% {
  box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0
    -0.83em 0 -0.477em;
}

5%,
95%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
0
-0
.83em

0
-0
.42em
,
0
-0
.83em

0
-0
.44em
,
0
-0
.83em

0
-0
.46em
,
0
-0
.83em

0
-0
.477em
;


}
10%,
59%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
-0
.087em

-0
.825em

0
-0
.42em
,
-0
.173em

-0
.812em

0
-0
.44em
,
-0
.256em

-0
.789em

0
-0
.46em
,
-0
.297em

-0
.775em

0
-0
.477em
;


}
20%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
-0
.338em

-0
.758em

0
-0
.42em
,
-0
.555em

-0
.617em

0
-0
.44em
,
-0
.671em

-0
.488em

0
-0
.46em
,
-0
.749em

-0
.34em

0
-0
.477em
;


}
38%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
-0
.377em

-0
.74em

0
-0
.42em
,
-0
.645em

-0
.522em

0
-0
.44em
,
-0
.775em

-0
.297em

0
-0
.46em
,
-0
.82em

-0
.09em

0
-0
.477em
;


}
100%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
0
-0
.83em

0
-0
.42em
,
0
-0
.83em

0
-0
.44em
,
0
-0
.83em

0
-0
.46em
,
0
-0
.83em

0
-0
.477em
;


}
}
@
keyframes load6 { 0% {
  box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0
    -0.83em 0 -0.477em;
}

5%,
95%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
0
-0
.83em

0
-0
.42em
,
0
-0
.83em

0
-0
.44em
,
0
-0
.83em

0
-0
.46em
,
0
-0
.83em

0
-0
.477em
;


}
10%,
59%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
-0
.087em

-0
.825em

0
-0
.42em
,
-0
.173em

-0
.812em

0
-0
.44em
,
-0
.256em

-0
.789em

0
-0
.46em
,
-0
.297em

-0
.775em

0
-0
.477em
;


}
20%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
-0
.338em

-0
.758em

0
-0
.42em
,
-0
.555em

-0
.617em

0
-0
.44em
,
-0
.671em

-0
.488em

0
-0
.46em
,
-0
.749em

-0
.34em

0
-0
.477em
;


}
38%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
-0
.377em

-0
.74em

0
-0
.42em
,
-0
.645em

-0
.522em

0
-0
.44em
,
-0
.775em

-0
.297em

0
-0
.46em
,
-0
.82em

-0
.09em

0
-0
.477em
;


}
100%
{
box-shadow
:

0
-0
.83em

0
-0
.4em
,
0
-0
.83em

0
-0
.42em
,
0
-0
.83em

0
-0
.44em
,
0
-0
.83em

0
-0
.46em
,
0
-0
.83em

0
-0
.477em
;


}
}
@
-webkit-keyframes round { 0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}

100%
{
-webkit-transform
:

rotate
(360deg);


transform
:

rotate
(360deg);


}
}
@
keyframes round { 0% {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
100%
{
-webkit-transform
:

rotate
(360deg);


transform
:

rotate
(360deg);


}
}