#page-loading {
  background: #FFF;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  z-index: 1111111111;
  display: table;
color:#FFF;
}

#loader
{
	position: absolute;
    left:0;
    right:0;
    top:40%;
    margin:0 auto;
	width: 30px; /*ローディングアイコンの横サイズ*/
	height: 30px; /*ローディングアイコンの縦サイズ*/
	border-radius: 30px;  /*CSS3で円を書く*/
	border: 8px solid #FF0000;  /*円に枠をつける*/
	border-right-color: transparent; /*円の右にC状の空きをつける*/
	
	-webkit-animation: spin 1s infinite linear; /*回転のアニメーションをつける*/
	-moz-animation: spin 1s infinite linear;
}
 /*キーフレームのアニメーションをつける*/
@-webkit-keyframes spin
{
	0% { -webkit-transform: rotate(0deg); opacity: 0.4; }
	50%  { -webkit-transform: rotate(180deg); opacity: 1; }
	100%   { -webkit-transform: rotate(360deg); opacity: 0.4; }
}

@-moz-keyframes spin
{
	0% { -moz-transform: rotate(0deg); opacity: 0.4; }
	50%  { -moz-transform: rotate(180deg); opacity: 1; }
	100%   { -moz-transform: rotate(360deg); opacity: 0.4; }
}


@media screen and (max-width: 667px) {
    
#loader{
    top:30%;
}