@charset "utf-8";

body{
	display:none;
}
#jpreOverlay {
	background-color: #f2669f;
}
#jpreSlide{
	font-size:22px;
	font-weight:bold;
	color:#ccc;
	text-align:center;
	width:50%;
	height:30%;
}
#jpreLoader{
	width: 100%;
	height: 2px;
/*	box-shadow:0 0 7px 3px #aaa;
	-moz-box-shadow:0 0 7px 3px #aaa;
	-webkit-box-shadow:0 0 7px 3px #aaa;*/
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
}
#jpreBar {
	border-radius: 2px;
	-moz-border-radius: 2px;
	-webkit-border-radius: 2px;
	
	background-size:30px 30px;
	-moz-background-size:30px 30px;
	-webkit-background-size:30px 30px;
	-o-background-size:30px 30px;
	
/*	box-shadow:
	0 5px 5px rgba(255,255,255,0.6) inset,
	0 -5px 7px rgba(0, 0, 0, 0.4) inset;
	-moz-box-shadow:
	0 5px 5px rgba(255,255,255,0.6) inset,
	0 -5px 7px rgba(0, 0, 0, 0.6) inset;
	-webkit-box-shadow:
	0 5px 5px rgba(255,255,255,0.6) inset,
	0 -5px 7px rgba(0, 0, 0, 0.6) inset;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#33ffffff',endColorstr='#33000000',GradientType=0 );*/

	background-color:#fff;
	background-image: -moz-linear-gradient(-45deg, 
		rgba(255,255,255,0.15) 0%, 
		rgba(255,255,255,0.15) 25%, 
		rgba(255,255,255,0) 25%, 
		rgba(255,255,255,0) 50%, 
		rgba(255,255,255,0.15) 50%, 
		rgba(255,255,255,0.15) 75%, 
		rgba(255,255,255,0) 75%, 
		rgba(255,255,255,0) 100%);
	background-image: -webkit-gradient(linear, left top, right bottom, 
		color-stop(0%,rgba(255,255,255,0.2)), 
		color-stop(25%,rgba(255,255,255,0.2)), 
		color-stop(25%,rgba(255,255,255,0)), 
		color-stop(50%,rgba(255,255,255,0)), 
		color-stop(50%,rgba(255,255,255,0.2)), 
		color-stop(75%,rgba(255,255,255,0.2)),
		color-stop(75%,rgba(255,255,255,0)),
		color-stop(100%,rgba(255,255,255,0)));
	background-image: -webkit-linear-gradient(-45deg, 
		rgba(255,255,255,0.3) 0%,
		rgba(255,255,255,0.3) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.3) 50%,
		rgba(255,255,255,0.3) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
	background-image: -o-linear-gradient(-45deg, 
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.15) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
	background-image: -ms-linear-gradient(-45deg, 
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.15) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
	background-image: linear-gradient(135deg, 
		rgba(255,255,255,0.15) 0%,
		rgba(255,255,255,0.15) 25%,
		rgba(255,255,255,0) 25%,
		rgba(255,255,255,0) 50%,
		rgba(255,255,255,0.15) 50%,
		rgba(255,255,255,0.15) 75%,
		rgba(255,255,255,0) 75%,
		rgba(255,255,255,0) 100%);
		
	animation: progress 2s linear infinite;
	-moz-animation: progress 2s linear infinite;
	-webkit-animation: progress 2s linear infinite;
	-ms-animation: progress 2s linear infinite;
	-o-animation: progress 2s linear infinite;	
}
#jprePercentage {
	color:#fff;
	font-family: 'Pinyon Script', cursive;
/*	font-family: Helvetica,"Trebuchet MS",Arial,sans-serif;
	font-weight: normal;*/
	text-align: enter;
	text-shadow: 0px 1px 0px #333;
	letter-spacing: 0.15em;
	top: -100%;
	font-size: 1.5em;
	margin-top: 0.5em;
}

#jpreButton{
	padding:3px 10px;
	cursor:pointer;
	font-weight:bold;
	line-height:1.5;
	text-align:center;
	width:100px;
	margin:0 auto;
	color:#fff;
	text-shadow:-1px -1px 0 #01293F;
	border:1px solid #2EACEA;
	
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
	
	background-color: #23a6ed;
	background-image: -moz-linear-gradient(top, #23a6ed 0%, #1275aa 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#23a6ed), color-stop(100%,#1275aa));
	background-image: -webkit-linear-gradient(top, #23a6ed 0%,#1275aa 100%);
	background-image: -o-linear-gradient(top, #23a6ed 0%,#1275aa 100%);
	background-image: -ms-linear-gradient(top, #23a6ed 0%,#1275aa 100%);
	background-image: linear-gradient(to bottom, #23a6ed 0%,#1275aa 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#23a6ed', endColorstr='#1275aa',GradientType=0 );
}

@-webkit-keyframes progress {
from {background-position: 0 0;}
to {background-position: -60px -60px;}
}
@-moz-keyframes progress {
from {background-position: 0 0;}
to {background-position: -60px -60px;}
}
@-ms-keyframes progress {
from {background-position: 0 0;}
to {background-position: -60px -60px;}
}
@-o-keyframes progress {
from {background-position: 0 0;}
to {background-position: -60px -60px;}
}
@keyframes progress {
from {background-position: 0 0;}
to {background-position: -60px -60px;}
}


/* ####################################### */
/* 妖精 */
/* ####################################### */
#splashFairy {
position: fixed;
left: 45%;
width: 120px;
height: 120px;
overflow: hidden;
z-index: 500;
}

#splashFairy img {
max-width: initial;
height: 120px;
-webkit-animation: splashFairyFloat 1s linear infinite, splashFairyFry 0.2s steps(4) infinite;
-moz-animation: splashFairyFloat 1s linear infinite, splashFairyFry 0.2s steps(4) infinite;
-o-animation: splashFairyFloat 1s linear infinite, splashFairyFry 0.2s steps(4) infinite;
-ms-animation: splashFairyFloat 1s linear infinite, splashFairyFry 0.2s steps(4) infinite;
animation: splashFairyFloat 1s linear infinite, splashFairyFry 0.2s steps(4) infinite;
}
#splashKirakira {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 120px;
overflow: hidden;
z-index: 550;
display: block;
background-image: url(../img/fairy_kirakira.png);
background-position: 0 0;
background-size: 960px 120px;
-webkit-animation: splashFairyKirakira 6s steps(8) infinite;
-moz-animation: splashFairyKirakira 6s steps(8) infinite;
-o-animation: splashFairyKirakira 6s steps(8) infinite;
-ms-animation: splashFairyKirakira 6s steps(8) infinite;
animation: splashFairyKirakira 6s steps(8) infinite;
}

/* 画像切り替え */
@-webkit-keyframes splashFairyKirakira {
	0% {background-position: 0 0;}
	8% {background-position: -960px 0;}
	100% {background-position: -960px 0;}
}
@-moz-keyframes splashFairyKirakira {
	0% {background-position: 0 0;}
	8% {background-position: -960px 0;}
	100% {background-position: -960px 0;}
}
@-o-keyframes splashFairyKirakira {
	0% {background-position: 0 0;}
	8% {background-position: -960px 0;}
	100% {background-position: -960px 0;}
}
@-ms-keyframes splashFairyKirakira {
	0% {background-position: 0 0;}
	8% {background-position: -960px 0;}
	100% {background-position: -960px 0;}
}
@keyframes splashFairyKirakira {
	0% {background-position: 0 0;}
	8% {background-position: -960px 0;}
	100% {background-position: -960px 0;}
}

/* 画像切り替え */
@-webkit-keyframes splashFairyFry {
	0% {margin-left: 0;}
	100% {margin-left: -480px;}
}
@-moz-keyframes splashFairyFry {
	0% {margin-left: 0;}
	100% {margin-left: -480px;}
}
@-o-keyframes splashFairyFry {
	0% {margin-left: 0;}
	100% {margin-left: -480px;}
}
@-ms-keyframes splashFairyFry {
	0% {margin-left: 0;}
	100% {margin-left: -480px;}
}
@keyframes splashFairyFry {
	0% {margin-left: 0;}
	100% {margin-left: -480px;}
}
/* 浮遊 */
@-webkit-keyframes splashFairyFloat {
	0% {-webkit-transform: translate(0px,-3px);}
	50% {-webkit-transform: translate(0px,3px);}
	100% {-webkit-transform: translate(0px,-3px);}
}
@-moz-keyframes splashFairyFloat {
	0% {-moz-transform: translate(0px,-3px);}
	50% {-moz-transform: translate(0px,3px);}
	100% {-moz-transform: translate(0px,-3px);}
}
@-o-keyframes splashFairyFloat {
	0% {-o-transform: translate(0px,-3px);}
	50% {-o-transform: translate(0px,3px);}
	100% {-o-transform: translate(0px,-3px);}
}
@-ms-keyframes splashFairyFloat {
	0% {-ms-transform: translate(0px,-3px);}
	50% {-ms-transform: translate(0px,3px);}
	100% {-ms-transform: translate(0px,-3px);}
}
@keyframes splashFairyFloat {
	0% {transform: translate(0px,-3px);}
	50% {transform: translate(0px,3px);}
	100% {transform: translate(0px,-3px);}
}

@media only screen and (max-device-width: 480px) {
	#splashFairy, #splashFairy img, #splashKirakira {display: none;}
}