* {
	margin: 0;
	padding: 0;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/*
 * "bold" Licensed as: Public Domain
 * http://www.fontspace.com/diogene/bold
 */
@font-face {
	font-family: 'bold';
	src: url('bold-webfont.woff') format('woff'), url('Bold.ttf') format('truetype');
}
/* ad */
div[id*='nend'] {
	position: relative;
}
/* ad */
html {
	height: 100%;
}
body {
	font-family: Helvetica, Arial, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'モリサワ 新ゴ R', 'Droid Sans', メイリオ, sans-serif;
	/*HiraKakuProN-W6, ヒラギノ角ゴ ProN W6, モリサワ 新ゴ B*/
	width: 100%;
	height: 100%;
	position: relative;
	overflow: hidden;
}
#cover, #home, #topmenu, #setting, #container,
svg.mainSVG, svg.bgSVG, #commonBG, #mainBG,
#titleBG, #stageContainer {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#cover {
	z-index: 500;
	background: #F2EBCD;
	-webkit-transition: -webkit-transform 350ms ease-in-out 0s;
}
#cover p {
	position: absolute;
	width: 50%;
	top: 40%;
	left: 25%;
	text-align: center;
	font-family: 'bold', sans-serif!important;
	font-size: 35px!important;
	color: #fff;
	text-shadow: 1px 1px 2px rgba(0,0,0,.5), -1px -1px 2px rgba(0,0,0,.5);
}
#balloon {
	font-size: 1.5rem;
	width: 80%;
	position: absolute;
	left: 10%;
	margin: 0;
	padding: 5%;
	background-color: rgba(255,255,255,.85);
	border-radius: 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	box-shadow: -5px -15px 15px rgba(0,0,0,.3);
	z-index: 1000;
}
#balloon:after {
	content: '';
	width: 0;
	height: 0;
	position: absolute;
	top: -30px;
	left: 11%;
	border: 15px solid transparent;
	border-bottom-color: rgba(255,255,255,.85);
}
#balloonIcon {
	border-radius: 10px;
	display: block;
	margin: 10% auto;
	box-shadow: 1px 1px 5px rgba(0,0,0,.5);
}
#balloonDel {
	display: block;
	position: absolute;
	top: 5px;
	right: 5px;
}
@media screen and (max-width: 600px) {
	#cover p {
		font-size: 25px!important;
	}
	#balloon {
		font-size: 2.2rem;
		bottom: 0;
		margin-bottom: 30px;
		box-shadow: 5px 15px 15px rgba(0,0,0,.3);
	}
	#balloonIcon {
		width: 72px;
	}
	#balloon:after {
		top: 100%;
		left: 50%;
		margin-left: -15px;
		border-color: transparent;
		border-top-color: rgba(255,255,255,.85);
	}
}
#home {
	z-index: 200;
	background: rgba(255,255,255,1);
	-webkit-transition: -webkit-transform 350ms ease-in-out 0s;
}
#topmenu {
	overflow: hidden;
}
#setting {
	left: -100%;
}
#stageContainer {
	-webkit-transition: -webkit-transform 250ms ease-in-out 0s;
}
svg.mainSVG, svg.bgSVG {
	display: none;
}
svg.stageBG {
	height: 100%;
	float: left;
}
tspan.best, tspan.dataLoad, tspan.stageTotal {
	font-family: 'bold', sans-serif!important;
}
@media screen and (max-width: 400px) {
	tspan.best {
		font-size: 1.7rem!important;
	}
	tspan.dataLoad {
		font-size: 1.2rem!important;
	}
}
svg.stageBG g.passSign {
	display: none;
}
#modal {
	font-size: 1.8rem;
	color: rgba(255,255,255,1);
	background: rgba(0,0,0,1);
	text-align: center;
	width: 50%;
	position: absolute;
	top: 40%;
	left: 25%;
	padding: 5% 0;
	z-index: 210;
	opacity: 0;
	border-radius: 10px;
	display: none;
}
#infobox {
	font-size: 1.5rem;
	color: #fff;
	background: rgba(0,0,0,.7);
	position: absolute;
	width: 70%;
	padding: 7%;
	left: 15%;
	top: 10%;
	border-radius: 5px;
	border: solid 5px rgba(200,200,200,.5);
	z-index: 200;
	box-shadow: 1px 1px 3px rgba(0,0,0,.3);
	-webkit-box-sizing: border-box;
	-webkit-transform: scale(0);
	-webkit-transition: -webkit-transform 250ms ease-in-out 0s;
}
#infobox a {
	color: inherit;
	text-decoration: none;
	display: block;
	margin-top: 7%;
}
#infohidden {
	position: absolute;
	top: 0;
	right: 0;
	width: 10%;
}
#guide {
	display: none;
}
#guide img {
	position: absolute;
	z-index: 100;
}
#left {
	-webkit-transform: rotate(90deg);
}
#right {
	-webkit-transform: rotate(270deg);
}
#top {
	-webkit-transform: rotate(180deg);
}
#panel {
	text-align: center;
	width: 56%;
	position: absolute;
	left: 22%;
	top: 2%;
	padding: 2%;
	background: rgba(50,50,50,1);/*background: rgba(7,133,10,1);green ver*/
	z-index: 100;
	display: none;
	border-radius: 3px;
	border: solid 0.6rem rgba(236,215,165,1);
	-webkit-box-sizing: border-box;
	box-shadow: inset 1rem 1rem 10px rgba(0,0,0,.4), inset -1rem -1rem 10px rgba(0,0,0,.4);
}
#panelstage {
	font-family: 'bold', serif;
	font-size: 1.8rem;
	color: rgba(255,0,0,1);
	display: none;
	position: absolute;
	width: 70%;
	top: 15%;
	left: 15%;
	padding: 3%;
	border: solid 5px rgba(255,0,0,1);
	border-radius: 5px;
	box-shadow: 2px 2px 3px rgba(0,0,0,.5);
	text-shadow: 1px 1px 5px rgba(0,0,0,.5);
	-webkit-box-sizing: border-box;
	-webkit-transform: rotate(10deg);
}
#paneltext {
	font-family: 'bold', serif;
	font-size: 1.8rem;
	color: #fff;
}
#panelbtn {
	display: none;
	margin: 2% 0;
}
#panelbtn div {
	font-size: 1.3rem;
	font-weight: bold;
	color: #fff;
	padding: 2px;
	border: solid 2px #fff;
	border-radius: 3px;
	width: 40%;
	display: inline-block;
}
#panelbtn img {
	width: 25%;
	padding-right: 0.5rem;
	vertical-align: text-bottom;
}
#endlog {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	color: #fff;
	text-shadow: 0px 0px 3px rgba(255,255,255,.5);
	z-index: 100;
	opacity: 0;
	display: none;
	-webkit-transition: opacity 2s ease-in-out 0s;
}
#endtext {
	font-family: 'bold', serif;
	font-size: 3.5rem;
	text-align: center;
	width: 70%;
	margin: 9% auto 0 auto;
	padding: 5%;
	border-radius: 10px;
	box-shadow: inset 1px 1px 2px rgba(0,0,0,.5), 1px 1px 2px rgba(200,200,200,.5);
}
#finalPointPanel {
	font-family: 'bold', serif;
	font-size: 4rem;
	display: inline-block;
	margin-top: 5%;
	visibility: hidden;
}
div.field2 {
	font-size: 1.7rem;
	width: 70%;
	padding: 5%;
	margin: 4% auto;
}
#restart {
	font-family: 'bold', serif;
	margin-top: 10px;
}
#start, #final, #toTopmenu {
	font-weight: bold;
	width: 50px;
	height: 50px;
	margin: 5px;
	line-height: 150%;
	font-size: 1.1rem;
	position: absolute;
	z-index: 100;
}
#start img, #final img, #toTopmenu img {
	display: block;
	margin: 0 auto;
	width: 45%;
}
#start {
	left: 0;
}
#final, #toTopmenu {
	right: 0;
}
#toSetting, #info {
	position: absolute;
	width: 50px;
	height: 50px;
	margin: 5px;
}
#toSetting {
	right: 0;
}
#info {
	left: 0;
}
#toSetting img, #info img {
	width: 70%;
	margin-top: 0.7rem;
}
#clockbox {
	position: absolute;
	top: 42%;
	left: 0;
	width: 6%;
	height: 30%;
	margin-left: 5px;
	z-index: 100;
}
#clock {
	position: relative;
	width: 100%;
	height: 80%;
	border-radius: 3px;
	border: solid #eee 1px;
	-webkit-box-sizing: border-box;
	background: -webkit-gradient(linear, left center, right center, 
		color-stop(0%,#ffffff), color-stop(50%,#f3f3f3), color-stop(51%,#ededed), color-stop(100%,#ffffff)
	);
}
#inclock {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 0%;
	border-radius: 3px;
	background: -webkit-gradient(linear, left center, right center, 
		color-stop(0%,#b7deed), color-stop(50%,#71ceef), color-stop(51%,#21b4e2), color-stop(100%,#b7deed)
	);
}
#clockbox img {
	width: 100%;
}
div.field {
	font-size: 1.5rem;
	font-weight: bold;
	color: #444;
	width: 60%;
	margin: 15% auto;
	padding: 5%;
	box-sizing: border-box;
	border-radius: 5px;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	background: rgba(255,255,255,.7);
}
div.field div:nth-child(odd) {
	margin: 20px auto 0 auto;
}
#clear {
	margin-top: 35px;
}
/*** effect ***/
.shadow {
	box-shadow: inset 0 0 50px rgba(0,0,0,.1);
}
.shadow:before, .shadow:after {
	z-index: -1;
	position: absolute;
	content: '';
	bottom: 15px;
	left: 10px;
	width: 50%;
	top: 80%;
	max-width:300px;
	background: #777;
	box-shadow: 0 15px 10px #777;
	-webkit-transform: rotate(-3deg);
}
.shadow:after {
	-webkit-transform: rotate(3deg);
	right: 10px;
	left: auto;
}
.btn-circle {
	text-align: center;
	color: #fff;
	background: -webkit-gradient(linear, left top, left bottom, 
		from(#64C8C8),
		to(#76DDDD)
	);
	border-radius: 50%;
	border: 4px solid #52C6C6;
}
.btn-circle2 {
	font-size: 14px;
	color: #3f403f;
	padding: 10px 20px;
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		color-stop(0.50, #ffffff),
		to(#c7c1c7));
	border-radius: 10px;
	border: 3px solid #e4e6e3;
	box-shadow:
		0px 1px 1px rgba(000,000,000,0.5),
		inset 0px 0px 3px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
}
.btn-rect {
	text-align: center;
	color: #ffffff;
	padding: 10px;
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#5ff587),
		color-stop(0.50, #5bc930),
		to(#3cd10b));
	border-radius: 10px;
	border: 3px solid #3dbd74;
	box-shadow:
		0px 0px 0px rgba(000,000,000,0.5),
		inset 0px 0px 1px rgba(255,255,255,0.6);
	text-shadow:
		0px -1px 0px rgba(000,000,000,1),
		0px 1px 0px rgba(255,255,255,0.2);
}
.btn-rect2 {
	text-align: center;
	color: rgba(64,64,64,.8);
	padding: 10px;
	background: -webkit-gradient(
		linear, left top, left bottom, 
		from(#ffffff),
		color-stop(0.50, #ebebeb),
		color-stop(0.50, #dbdbdb),
		to(#b5b5b5));
	border-radius: 5px;
	border: 1px solid #949494;
	box-shadow:
		0px 0px 0px rgba(000,000,000,0.5),
		inset 0px 0px 2px rgba(255,255,255,1);
	text-shadow:
		0px -1px 0px rgba(000,000,000,0.2),
		0px 1px 0px rgba(255,255,255,1);
}
.btn-cool {
	color: #a7a7a7;
	width: 144px;
	height: 144px;
	position: relative;
	text-align: center;
	line-height: 144px;
	border-radius: 50%;
	box-shadow: 0px 3px 8px #aaa, inset 0px 2px 3px #fff;
	background-color: #f7f7f7;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e7e7e7));
	background-image: -webkit-linear-gradient(top, #f7f7f7, #e7e7e7); 
}
.btn-cool:before {
	content: "";
	display: block;
	background: #fff;
	border-top: 2px solid #ddd;
	position: absolute;
	top: -18px;
	left: -18px;
	bottom: -18px;
	right: -18px;
	z-index: -1;
	border-radius: 50%;
	box-shadow: inset 0px 8px 48px #ddd;
}
.on {
	color: #666;
	text-align: center;
	padding: 6px 10px;
	border: 2px solid #AAA;
	border-radius: 3px;
	text-shadow: 0 1px 1px white;
	border-bottom-color: #CCC;
	border-top-color: #999;
	box-shadow: inset 0 1px 2px #aaa;
	background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
}
.off {
	color: #666;
	text-align: center;
	padding: 6px 10px;
	background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#E6E6E6));
	border: 2px solid #DDD;
	text-shadow: 0 1px 1px white;
	border-radius: 4px;
	box-shadow: 1px 1px 1px rgba(000,000,000,0.3);
}
/*** animation ***/
#cover, #home, #setting, #panel,
#stageContainer, svg.stageBG, body, #topmenu {
	-webkit-transform: translateZ(0);
	-webkit-perspective: 1000;
	-webkit-backface-visibility: hidden;
}
@-webkit-keyframes slideup {
	from { -webkit-transform: translateY(100%); }
    to { -webkit-transform: translateY(0); }
}
@-webkit-keyframes slidedown {
	from { -webkit-transform: translateY(0); }
	to { -webkit-transform: translateY(100%); }
}
.slideup {
	-webkit-animation-name: slideup;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}
.slidedown {
	-webkit-animation-name: slidedown;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 350ms;
}
@-webkit-keyframes slideleft {
	0% { -webkit-transform: translateX(0); }
	20% { -webkit-transform: translateX(-5%); }
	80% { -webkit-transform: translateX(-95%); }
    100% { -webkit-transform: translateX(-100%); }
}
@-webkit-keyframes slideright {
	0% { -webkit-transform: translateX(0); }
	20% { -webkit-transform: translateX(5%); }
	80% { -webkit-transform: translateX(95%); }
    100% { -webkit-transform: translateX(100%); }
}
.slideleft {
	-webkit-animation-name: slideleft;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 200ms;
}
.slideright {
	-webkit-animation-name: slideright;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 200ms;
}
/*
@-webkit-keyframes left-turn {
	0% { -webkit-transform: translateX(0) rotate(90deg); }
	20% { -webkit-transform: translateX(100%) rotate(90deg); }
	80% { -webkit-transform: translateX(100%) rotate(90deg); }
	100% { -webkit-transform: translateX(0) rotate(90deg); }
}
@-webkit-keyframes right-turn {
	0% { -webkit-transform: translateX(0) rotate(270deg); }
	20% { -webkit-transform: translateX(-100%) rotate(270deg); }
	80% { -webkit-transform: translateX(-100%) rotate(270deg); }
	100% { -webkit-transform: translateX(0) rotate(270deg); }
}
@-webkit-keyframes top-turn {
	0% { -webkit-transform: translateY(0) rotate(180deg); }
	20% { -webkit-transform: translateY(100%) rotate(180deg); }
	80% { -webkit-transform: translateY(100%) rotate(180deg); }
	100% { -webkit-transform: translateY(0) rotate(180deg); }
}
@-webkit-keyframes bottom-turn {
	0% { -webkit-transform: translateY(0); }
	20% { -webkit-transform: translateY(-100%); }
	80% { -webkit-transform: translateY(-100%); }
	100% { -webkit-transform: translateY(0); }
}
*/
.left-turn {
	-webkit-animation-name: left-turn;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1000ms;
}
.right-turn {
	-webkit-animation-name: right-turn;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1000ms;
}
.top-turn {
	-webkit-animation-name: top-turn;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1000ms;
}
.bottom-turn {
	-webkit-animation-name: bottom-turn;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1000ms;
}
@-webkit-keyframes scaling {
	0% { -webkit-transform: scale(0, 0) rotate(180deg); }
	20% { -webkit-transform: scale(1, 1) rotate(0deg); }
	80% { -webkit-transform: scale(1, 1) rotate(0deg); }
	100% { -webkit-transform: scale(0, 0) rotate(180deg); }
}
.scaling {
	-webkit-animation-name: scaling;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 1000ms;
}
@-webkit-keyframes dropping {
	0% { -webkit-transform: translate(0, -120%); }
	20% { -webkit-transform: translate(0, 30%); }
	25% { -webkit-transform: translate(0, -30%); }
	30% { -webkit-transform: translate(0, 15%); }
	35% { -webkit-transform: translate(0, -15%); }
	40% { -webkit-transform: translate(0, 5%); }
	45% { -webkit-transform: translate(0, -5%); }
	50% { -webkit-transform: translate(0, 0); }
	100% { -webkit-transform: translate(0, 0); }
}
.dropping {
	-webkit-animation-name: dropping;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 1000ms;
}
@-webkit-keyframes fadeinto {
	0% { opacity: .1; }
	100% { opacity: 1; }
}
@-webkit-keyframes fadeoutto {
	0% { opacity: 1; }
	100% { opacity: .1; }
}
.fadeinto {
	-webkit-animation-name: fadeinto;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 200ms;
}
.fadeoutto {
	-webkit-animation-name: fadeoutto;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 200ms;
}
@-webkit-keyframes fadein {
	0% { opacity: .1; }
	100% { opacity: 1; }
}
@-webkit-keyframes fadeout {
	0% { opacity: 1; }
	100% { opacity: .1; }
}
@-webkit-keyframes fadeout-long {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
.fadein {
	-webkit-animation-name: fadein;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 500ms;
}
.fadeout {
	-webkit-animation-name: fadeout;
	-webkit-animation-timing-function: ease-in-out;
	-webkit-animation-duration: 500ms;
}
.fadeout-long {
	-webkit-animation-name: fadeout-long;
	-webkit-animation-timing-function: linear;
	-webkit-animation-duration: 2000ms;
}