@charset "UTF-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
}
body {
	text-align:center;
	background-color:#85BA47;
}
#stage {
	width: 100%;
	max-width: 1024px;
	margin: 0 auto;
	background-color: #85BA47;
}
.oracle {
	position: relative;
	width: 100%;
	max-width: 750px;
	padding-top: 618px;
	margin: 0 auto 1em;
	line-height: 0;
}
.oracle img {
	width: 100%;
	height: auto;
}
.title {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
}
.subTitle {
	position: absolute;
	bottom: 0;
	left: 0;
	display: block;
	width: 100%;
}
.snake {
	position: absolute;
	top: 34.789644%;
	left: 28.666667%;
	display: block;
	width: 37.678533%;
	background: #85BA47;
}
.arrw1 {
	position: absolute;
	left: 24.666667%;
	top: 29.935275%;
	display: block;
	width: 8.1412%;
}
.arrw2 {
	position: absolute;
	top: 54.692557%;
	left: 24%;
	display: block;
	width: 12.8%;
}
.arrw3 {
	position: absolute;
	top: 54.854369%;
	left: 62.666667%;
	display: block;
	width: 36.034133%
}
.e-oracle {
	position: absolute;
	top: 28.802589%;
	left: 12%;
	display: block;
	width: 11.2%;
}
.scratch {
	position: absolute;
	top: 69.579288%;
	left: 15.333333%;
	display: block;
	width: 18.382133%;
}
.shuffle {
	position: absolute;
	top: 75.566343%;
	left: 77.2%;
	display: block;
	width: 9.560133%
}
.tongue {
	position: absolute;
	top: 39.805825%;
	left: 23.6%;
	display: block;
	width: 6.918267%;
	animation: tongue 4.7s infinite
}

.backnumbers,
.cure {
	font-family: Verdana, Geneva, sans-serif;
	color:#fff;
	text-align: center;
}
.cure {
	font-size: 11px;
	line-height: 2;
	padding: 0 0 1.75em 0;
}
.backnumbers {
	font-size: 14px;
	line-height: 1.7;
	border-top: 1px solid #648C35;
	padding: 2em;
}
a.current {
	display: inline-block;
	padding: 1px;
	background-color: #648C35;
	text-decoration: none;
}
a:link {
	color: #fff;
}
a:visited {
	color: #CEE3B5;
	text-decoration: none;
}
@media (min-width: 768px) {
	a:hover {
		color: #648C35;
		text-decoration: none;
		background-color: transparent;
	}
	a:active {
		color: #648C35;
	}
	.shuffle a img {
		transform: scale(1);
		transition: transform .2s ease;
	}
	.shuffle a:hover img {
		transform: scale(1.1)
	}
}
.ttl {
	display: none;
}
#wScratchPad2 {
	position: absolute;
	display: block;
	top: 43.365696%;
	left: 41.066667%;
	width: 18.4%;
	height: 22.330097%;
	text-align: left;
}
@keyframes tongue {
	0% {
		opacity: 0
	}
	31.914894% {
		opacity: 0
	}
	34.042553% {
		opacity: 1
	}
	42.553191% {
		opacity: 1
	}
	44.680851% {
		opacity: 0
	}
	85.106383% {
		opacity: 0
	}
	87.234043% {
		opacity: 1
	}
	89.361702% {
		opacity: 1
	}
	91.489362% {
		opacity: 0
	}
	95.744681% {
		opacity: 0
	}
	97.87234% {
		opacity: 1
	}
	100% {
		opacity: 1
	}
	
}
@media (max-width:767px) {
	#stage {
		max-width: 750px;
	}
	.oracle {
		padding-top: 82.4%;
	}
	.cure {
		margin-top: 1em;
		font-size: 2.666667vw
	}
	.backnumbers {
		padding: 1.5em;
		font-size: 4vw;
		line-height: 2.25
	}
	a.current {
		padding: .2em .5em;
	}
	.scratch {
		top: 71.064725%;
		left: 10.333333%;
		width: 26.0152%;
		height: 4.197249%;
		background: url(/images/03/scratch_sp.svg) center top / contain no-repeat
	}
	.shuffle {
		top: 74.919094%;
		left: 74.933333%;
		width: 14.484133%;
		height: 4.21521%;
		background: url(/images/03/shuffle_sp.svg) center top / contain no-repeat;
	}
	.scratch img,
	.shuffle img {
		display: none;
	}
	.shuffle a {
		display: block;
		width: 100%;
		height: 100%;
	}
}
@media (max-width:767px) and (orientation:portrait) {
	.ttl {
		display: inherit;
		padding: 1em 0 1.5em;
		font-family: Verdana, Geneva, sans-serif;
		font-size: 2.933333vw;
		font-weight: normal;
		letter-spacing: 0.175em;
		color: #fff;
	}
}