@charset "UTF-8";

div.loading { width:100%; height:100%; margin:0; padding:0; position: fixed; top:0; left:0; z-index:99; }

.white { background-color: rgba(255,255,255,0.9); }
.black { background-color: rgba(0,0,0,0.8); }
.blue { background-color: rgba(93,217,244,0.8); }
.greem { background-color: rgba(122,219,199,0.8); }
.brown { background-color: rgba(169,146,105,0.8); }

.b_white { background-color: #ffffff; }
.b_black { background-color: #000000; }
.b_blue { background-color: #5687E5; }
.b_green { background-color: #59DBAA; }
.b_pink { background-color: #FF92F4; }
.b_brown { background-color: #8D6A45; }

.hide { display: none; }


/* -----丸３個が順番にバウンス-----
	<div class="loading white">
  		<div class="spinner">
  			<div class="bounce1 b_pink"></div>
  			<div class="bounce2 b_pink"></div>
  			<div class="bounce3 b_pink"></div>
  		</div>
  	</div>
--------------------------------*/
.spinner { margin: 300px auto 0; width: 80px; text-align: center; }
.spinner > div { width: 18px; height: 18px; border-radius: 100%; display: inline-block;}
.spinner > div { -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; animation: sk-bouncedelay 1.4s infinite ease-in-out both; }
.spinner .bounce1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; }
.spinner .bounce2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; }
@-webkit-keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0) } 40% { -webkit-transform: scale(1.0) }}
@keyframes sk-bouncedelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0);} 40% { -webkit-transform: scale(1.0); transform: scale(1.0); }}




/* -----四角の折り紙のような------
	<div class="loading white">
		<div class="sk-cube-grid">
			<div class="sk-cube sk-cube1 b_blue"></div>
			<div class="sk-cube sk-cube2 b_blue"></div>
			<div class="sk-cube sk-cube3 b_blue"></div>
			<div class="sk-cube sk-cube4 b_blue"></div>
			<div class="sk-cube sk-cube5 b_blue"></div>
			<div class="sk-cube sk-cube6 b_blue"></div>
			<div class="sk-cube sk-cube7 b_blue"></div>
			<div class="sk-cube sk-cube8 b_blue"></div>
			<div class="sk-cube sk-cube9 b_blue"></div>
		</div>
	</div>
-------------------------------- */
.sk-cube-grid { width: 40px; height: 40px; margin: 300px auto; }
.sk-cube-grid .sk-cube { width: 33%; height: 33%; float: left; -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out; }
.sk-cube-grid .sk-cube1 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube2 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube3 { -webkit-animation-delay: 0.4s; animation-delay: 0.4s; }
.sk-cube-grid .sk-cube4 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube5 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
.sk-cube-grid .sk-cube6 { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-cube-grid .sk-cube7 { -webkit-animation-delay: 0s; animation-delay: 0s; }
.sk-cube-grid .sk-cube8 { -webkit-animation-delay: 0.1s; animation-delay: 0.1s; }
.sk-cube-grid .sk-cube9 { -webkit-animation-delay: 0.2s; animation-delay: 0.2s; }
@-webkit-keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); }}
@keyframes sk-cubeGridScaleDelay { 0%, 70%, 100% { -webkit-transform: scale3D(1, 1, 1); transform: scale3D(1, 1, 1); } 35% { -webkit-transform: scale3D(0, 0, 1); transform: scale3D(0, 0, 1); } }






/* -----一般的な丸クルクル-------
	<div class="loading white">
		<div class="sk-circle">
			<div class="sk-circle1 sk-child"></div>
			<div class="sk-circle2 sk-child"></div>
			<div class="sk-circle3 sk-child"></div>
			<div class="sk-circle4 sk-child"></div>
			<div class="sk-circle5 sk-child"></div>
			<div class="sk-circle6 sk-child"></div>
			<div class="sk-circle7 sk-child"></div>
			<div class="sk-circle8 sk-child"></div>
			<div class="sk-circle9 sk-child"></div>
			<div class="sk-circle10 sk-child"></div>
			<div class="sk-circle11 sk-child"></div>
			<div class="sk-circle12 sk-child"></div>
		</div>
	</div>
--------------------------------- */
.sk-circle { margin: 300px auto; width: 50px; height: 50px; position: relative; }
.sk-circle .sk-child { width: 100%; height: 100%; position: absolute; left: 0; top: 0;}
.sk-circle .sk-child:before { content: ''; display: block; margin: 0 auto; width: 20%; height: 20%; background-color: #63C4B4; border-radius: 100%;}
.sk-circle .sk-child:before { -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both; animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;}
.sk-circle .sk-circle2 { -webkit-transform: rotate(30deg);-ms-transform: rotate(30deg); transform: rotate(30deg); }
.sk-circle .sk-circle3 { -webkit-transform: rotate(60deg);-ms-transform: rotate(60deg); transform: rotate(60deg); }
.sk-circle .sk-circle4 { -webkit-transform: rotate(90deg);-ms-transform: rotate(90deg); transform: rotate(90deg); }
.sk-circle .sk-circle5 { -webkit-transform: rotate(120deg);-ms-transform: rotate(120deg); transform: rotate(120deg); }
.sk-circle .sk-circle6 { -webkit-transform: rotate(150deg);-ms-transform: rotate(150deg); transform: rotate(150deg); }
.sk-circle .sk-circle7 { -webkit-transform: rotate(180deg);-ms-transform: rotate(180deg); transform: rotate(180deg); }
.sk-circle .sk-circle8 { -webkit-transform: rotate(210deg);-ms-transform: rotate(210deg); transform: rotate(210deg); }
.sk-circle .sk-circle9 { -webkit-transform: rotate(240deg);-ms-transform: rotate(240deg); transform: rotate(240deg); }
.sk-circle .sk-circle10 { -webkit-transform: rotate(270deg);-ms-transform: rotate(270deg); transform: rotate(270deg); }
.sk-circle .sk-circle11 { -webkit-transform: rotate(300deg);-ms-transform: rotate(300deg); transform: rotate(300deg); }
.sk-circle .sk-circle12 { -webkit-transform: rotate(330deg);-ms-transform: rotate(330deg); transform: rotate(330deg); }
.sk-circle .sk-circle2:before { -webkit-animation-delay: -1.1s; animation-delay: -1.1s; }
.sk-circle .sk-circle3:before { -webkit-animation-delay: -1s; animation-delay: -1s; }
.sk-circle .sk-circle4:before { -webkit-animation-delay: -0.9s; animation-delay: -0.9s; }
.sk-circle .sk-circle5:before { -webkit-animation-delay: -0.8s; animation-delay: -0.8s; }
.sk-circle .sk-circle6:before { -webkit-animation-delay: -0.7s; animation-delay: -0.7s; }
.sk-circle .sk-circle7:before { -webkit-animation-delay: -0.6s; animation-delay: -0.6s; }
.sk-circle .sk-circle8:before { -webkit-animation-delay: -0.5s; animation-delay: -0.5s; }
.sk-circle .sk-circle9:before { -webkit-animation-delay: -0.4s; animation-delay: -0.4s; }
.sk-circle .sk-circle10:before { -webkit-animation-delay: -0.3s; animation-delay: -0.3s; }
.sk-circle .sk-circle11:before { -webkit-animation-delay: -0.2s; animation-delay: -0.2s; }
.sk-circle .sk-circle12:before { -webkit-animation-delay: -0.1s; animation-delay: -0.1s; }
@-webkit-keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0);  transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1);}}
@keyframes sk-circleBounceDelay { 0%, 80%, 100% { -webkit-transform: scale(0); transform: scale(0); } 40% { -webkit-transform: scale(1); transform: scale(1); } }




/* --------四角パタパタ------------------
	<div class="loading white">
		<div class="sk-folding-cube">
			<div class="sk-cube1 sk-cube"></div>
			<div class="sk-cube2 sk-cube"></div>
			<div class="sk-cube4 sk-cube"></div>
			<div class="sk-cube3 sk-cube"></div>
		</div>
	</div>
--------------------------------------- */
.sk-folding-cube { margin: 300px auto; width: 40px; height: 40px; position: relative; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg);}
.sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #3B7AC4; }
.sk-folding-cube .sk-cube:before { -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; }
.sk-folding-cube .sk-cube:before { -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg);}
.sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg);}
.sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg);}
.sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s;}
.sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s;}
.sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s;}
@-webkit-keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg); transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; } }
@keyframes sk-foldCubeAngle { 0%, 10% { -webkit-transform: perspective(140px) rotateX(-180deg);  transform: perspective(140px) rotateX(-180deg); opacity: 0; } 25%, 75% { -webkit-transform: perspective(140px) rotateX(0deg); transform: perspective(140px) rotateX(0deg); opacity: 1; } 90%, 100% { -webkit-transform: perspective(140px) rotateY(180deg); transform: perspective(140px) rotateY(180deg); opacity: 0; }}




/* -----バーウェーブ------
	<div class="loading white">
		<div class="bar_wave">
			<div class="rects1 b_blue"></div>
			<div class="rects2 b_blue"></div>
			<div class="rects3 b_blue"></div>
			<div class="rects4 b_blue"></div>
			<div class="rects5 b_blue"></div>
		</div>
	</div>
-------------------------- */
.bar_wave { margin: 300px auto; width: 50px; height: 40px; text-align: center; font-size: 10px; }
.bar_wave > div { height: 100%; width: 6px; display: inline-block; -ms-animation: sk-stretchdelay 1.2s infinite ease-in-out; -webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out; animation: sk-stretchdelay 1.2s infinite ease-in-out; }
.bar_wave .rects2 { -ms-animation-delay: -1.1s; -webkit-animation-delay: -1.1s; animation-delay: -1.1s;}
.bar_wave .rects3 { -ms-animation-delay: -1.0s; -webkit-animation-delay: -1.0s; animation-delay: -1.0s;}
.bar_wave .rects4 { -ms-animation-delay: -0.9s; -webkit-animation-delay: -0.9s; animation-delay: -0.9s;}
.bar_wave .rects5 { -ms-animation-delay: -0.8s; -webkit-animation-delay: -0.8s; animation-delay: -0.8s;}
@-o-keyframes sk-stretchdelay { 0%, 40%, 100% { -o-transform: scaleY(0.4); } 20% { -o-transform: scaleY(1.0); }}
@-moz-keyframes sk-stretchdelay { 0%, 40%, 100% { -moz-transform: scaleY(0.4); } 20% { -moz-transform: scaleY(1.0); }}
@-webkit-keyframes sk-stretchdelay { 0%, 40%, 100% { -webkit-transform: scaleY(0.4); } 20% { -webkit-transform: scaleY(1.0); }}
@keyframes sk-stretchdelay { 0%, 40%, 100% { -ms-transform: scaleY(0.4); transform: scaleY(0.4); -webkit-transform: scaleY(0.4);} 20% { -ms-transform: scaleY(1.0); transform: scaleY(1.0); -webkit-transform: scaleY(1.0);}}





/* -----四角--裏返り（winっぽい）------
	<div class="loading white">
		<div class="spinner_sc b_pink"></div>
	</div>
------------------------------------ */
.spinner_sc { width: 40px; height: 40px; margin: 100px auto; -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);}
}




/* -----丸--水滴のようにドロップ------
	<div class="loading white">
		<div class="spinner_dr">
			<div class="double-bounce1 b_green"></div>
			<div class="double-bounce2 b_green"></div>
		</div>
	</div>
------------------------------------ */
.spinner_dr { width: 60px; height: 60px; position: relative; margin: 300px auto; }
.double-bounce1, .double-bounce2 { width: 100%; height: 100%; border-radius: 50%; opacity: 0.6; position: absolute; top: 0; left: 0; -webkit-animation: sk-bounce 2.0s infinite ease-in-out; animation: sk-bounce 2.0s infinite ease-in-out; }
.double-bounce2 { -webkit-animation-delay: -1.0s; animation-delay: -1.0s; }
@-webkit-keyframes sk-bounce { 0%, 100% { -webkit-transform: scale(0.0) } 50% { -webkit-transform: scale(1.0) }}
@keyframes sk-bounce { 0%, 100% { transform: scale(0.0); -webkit-transform: scale(0.0); } 50% { transform: scale(1.0); -webkit-transform: scale(1.0);}}





/* -----丸--あとから付いてくる------
	<div class="loading white">
		<div class="loader"></div>
	</div>
------------------------------------ */
.loader { color: #3B7AC4; font-size: 90px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius: 50%; margin: 300px auto; position: relative; -webkit-transform: translateZ(0); -ms-transform: translateZ(0); transform: translateZ(0); -webkit-animation: load6 1.7s infinite ease; animation: load6 1.7s infinite ease; }
@-webkit-keyframes load6 {
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); 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% { -webkit-transform: rotate(360deg); transform: rotate(360deg); 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% { -webkit-transform: rotate(0deg); transform: rotate(0deg); 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% { -webkit-transform: rotate(360deg); transform: rotate(360deg); 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;}}



/* ------------------------------------------------------
POPUP
-------------------------------------------------------- */
div.popups { width:100%; height:100%; margin:0; padding:0; position: fixed; top:0; left:0; text-align: center; overflow-x: hidden; overflow-y: auto; }
div.popups div.popsin { width:90%; max-width: 500px; margin:50px auto 0 auto; padding:30px 0 30px 0; background-color: #ffffff; overflow: hidden; }
div.popups div.popsin p.title { width:80%; margin:0 auto 0 auto; padding:0 0 10px 0; border:solid; border-color: #000000; border-width: 0 0 1px 0; font-size: 130%; }
div.popups div.popsin p.str1 { width:80%; margin:0 auto 0 auto; padding:5px 0 5px 0; border:solid; border-color: #000000; border-width: 0 0 1px 0; font-size: 90%; }
div.popups div.popsin p.str2 { width:80%; margin:0 auto 0 auto; padding:5px 0 5px 0; font-size: 90%; }
span.hon { width:100%; margin:5px 0 0 0; padding:0; font-size: 100%; color:#979794; font-weight: 100; display: inline-block; text-align: left; }
span.who { width:100%; margin:5px 0 0 0; padding:0; font-size: 90%; color:#2356FF; font-weight: 100; display: inline-block; text-align: right; }
span.sleft { display: inline-block; text-align: left; }
pre.messagepop { width:90%; height:auto; margin:5px auto 0 auto; padding:2px 0 0 0; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; font-size: 110%; color:#797571; letter-spacing: 1.5px; text-align: left; display: inline-block;}
pre.messageinfo{ width:90%; height:auto; margin:5px auto 0 auto; padding:20px 0 10px 0; overflow: hidden; white-space: pre-wrap; word-wrap: break-word; font-size: 120%; color:#797571; letter-spacing: 1.5px; line-height: 1.5; text-align: left; display: inline-block;}

input.b-type { width:100%; margin:0 0 0 0; padding:5px 0 5px 0; background-color:rgba(255,255,255,0); color:#000000; font-size: 100%; border:none;}
input.b-type-80 { width:80%; margin:10px auto 0 auto; padding:5px; background-color: #D8DBDB; color:#000000; font-size: 100%; border:none; text-align: left; }

select.a-type55 { width:55%; margin:0 auto 0 3%; padding:10px 0 10px 2%; font-size: 90%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
select.a-type55 { background-image:url(../images/index/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}

select.a-type27 { width:27%; margin:0 0 0 1%; padding:10px 0 10px 2%; font-size: 90%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
select.a-type27 { background-image:url(../images/index/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}

select.a-type20 { width:20%; margin:0 0 0 1%; padding:10px 0 10px 2%; font-size: 90%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
select.a-type20 { background-image:url(../images/index/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}

select.a-type15 { width:15%; margin:0 0 0 1%; padding:10px 0 10px 2%; font-size: 90%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; cursor: pointer;}
select.a-type15 { background-image:url(../images/index/sel-btn.png); background-size: 30px 30px; background-position: top right; background-repeat: no-repeat;}

textarea.b-type80-200 { width:80%; height:200px; margin:10px auto 0 auto; padding:0; font-size: 90%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; text-align: left; }
textarea.b-type80-250 { width:80%; height:250px; margin:10px auto 0 auto; padding:5px; font-size: 100%; border:none ; background-color: #D8DBDB; color:#000000; border-radius: 0; text-align: left; }











/* ------------------------------------------------------
300 - 350 （iphone 4）
-------------------------------------------------------- */
@media screen and (min-width: 300px ) and (max-width:350px) {
.spinner,.sk-cube-grid,.sk-circle,.sk-folding-cube,.bar_wave,spinner_sc,spinner_dr { margin: 200px auto 0; }
/* ------------------------------------------------------
300 - 350 （iphone 5）
-------------------------------------------------------- */
@media screen and (max-width : 350px) and (max-height : 568px) {
}
}

/* ------------------------------------------------------
350 - 400 ( android）（iphone6-375）
-------------------------------------------------------- */
@media screen and (min-width: 351px ) and (max-width:400px) {
.spinner,.sk-cube-grid,.sk-circle,.sk-folding-cube,.bar_wave,spinner_sc,spinner_dr { margin: 250px auto 0; }
}

/* ------------------------------------------------------
400 - 450（iphone6plus 414）
-------------------------------------------------------- */
@media screen and (min-width: 401px) and (max-width:450px) {
.spinner,.sk-cube-grid,.sk-circle,.sk-folding-cube,.bar_wave,spinner_sc,spinner_dr { margin: 250px auto 0; }
}

/* ------------------------------------------------------
450 - 500（iphone4 横）
-------------------------------------------------------- */
@media screen and (min-width: 451px) and (max-width:500px) {
/* ------------------------------------------------------
450 - 500（pc）
-------------------------------------------------------- */
@media screen and (max-width : 500px) and (min-height : 480px) {
}
}

/* ------------------------------------------------------
500 - 550 （ xperia z ultra）
-------------------------------------------------------- */
@media screen and (min-width: 501px) and (max-width:550px){
}

/* ------------------------------------------------------
550 - 600（iphone5 横）
-------------------------------------------------------- */
@media screen and (min-width: 551px) and (max-width:600px){
/* ------------------------------------------------------
550 - 600（pc）
-------------------------------------------------------- */
@media screen and (max-width : 600px) and (min-height : 350px) {
}
}

/* ------------------------------------------------------
600 - 650（android 横）
-------------------------------------------------------- */
@media screen and (min-width: 601px) and (max-width:650px){
/* ------------------------------------------------------
600 - 650（pc）
-------------------------------------------------------- */
@media screen and (max-width: 650px) and (min-height:420px){
}
}

/* ------------------------------------------------------
650 - 700（iphone6横=667）
-------------------------------------------------------- */
@media screen and (min-width: 651px) and (max-width:700px){
/* ------------------------------------------------------
650 - 700（pc）
-------------------------------------------------------- */
@media screen and (max-width: 700px) and (min-height:450px){
}
}

/* ------------------------------------------------------
700 - 750（iphone6plus横=736）
-------------------------------------------------------- */
@media screen and (min-width: 701px) and (max-width:750px){
/* ------------------------------------------------------
700 - 750（pc）
-------------------------------------------------------- */
@media screen and (max-width: 750px) and (min-height:450px){
}
}

/* ------------------------------------------------------
750 - 800（ ipad ）
-------------------------------------------------------- */
@media screen and (min-width: 751px) and (max-width:800px){
}

/* ------------------------------------------------------
800 - 850
-------------------------------------------------------- */
@media screen and (min-width: 801px) and (max-width:850px) {
}

/* ------------------------------------------------------
850 - 900
-------------------------------------------------------- */
@media screen and (min-width: 851px) and (max-width:900px) {
}

/* ------------------------------------------------------
900 - 1000 （xperia z ultra 横）
-------------------------------------------------------- */
@media screen and (min-width: 901px) and (max-width:1000px) {
/* ------------------------------------------------------
900 - 1000（pc）
-------------------------------------------------------- */
@media screen and (max-width : 1000px) and (min-height : 600px) {
}
}

/* ------------------------------------------------------
1000 - 1100（ipad 横）
-------------------------------------------------------- */
@media screen and (min-width: 1001px) and (max-width:1100px){
/* ------------------------------------------------------
1000 - 1100（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1100px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1100 - 1200
-------------------------------------------------------- */
@media screen and (min-width: 1101px) and (max-width:1200px){
/* ------------------------------------------------------
1100 - 1200（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1200px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1200 - 1300
-------------------------------------------------------- */
@media screen and (min-width: 1201px)and (max-width:1300px) {
/* ------------------------------------------------------
1200 - 1300（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1300px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1300 - 1400
-------------------------------------------------------- */
@media screen and (min-width: 1301px) and (max-width:1400px) {
/* ------------------------------------------------------
1300 - 1400（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1400px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1400 - 1500
-------------------------------------------------------- */
@media screen and (min-width: 1401px) and (max-width:1500px) {
/* ------------------------------------------------------
1400 - 1500（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1500px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1500 - 1600
-------------------------------------------------------- */
@media screen and (min-width: 1501px) and (max-width:1600px) {
/* ------------------------------------------------------
1500 - 1600（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1600px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1600 - 1700
-------------------------------------------------------- */
@media screen and (min-width: 1601px) and (max-width:1700px) {
/* ------------------------------------------------------
1600 - 1700（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1700px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1700 - 1800
-------------------------------------------------------- */
@media screen and (min-width: 1701px)and (max-width:1800px) {
/* ------------------------------------------------------
1700 - 1800（ height 700まで）
-------------------------------------------------------- */
@media screen and (max-width : 1800px) and (max-height : 700px) {
}
}

/* ------------------------------------------------------
1800 -
-------------------------------------------------------- */
@media screen and (min-width: 1801px) {
/* ------------------------------------------------------
1800 - 1900（ height 600まで）
-------------------------------------------------------- */
@media screen and (max-width : 1900px) and (max-height : 700px) {
}
}