@charset "utf-8";
/*---------------------------------
	Reset
---------------------------------*/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:none; }
article, aside, details, figcaption, figure, footer, header, menu, nav, section { display:block; }
body { line-height:1.5; }
ul { list-style:none; }
blockquote, q { quotes:none; }
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none; }
img,a img{ border:none; vertical-align:top; }
input, select { vertical-align:middle; }
a { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; background:transparent; }
ins { background-color:#ff9; color:#000; text-decoration:none; }
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom:1px dotted #000; cursor:help; }
table { border-collapse:collapse; border-spacing:0; }
hr { display:block; height:1px; border:0; border-top:1px solid #ccc; margin:1em 0; padding:0; }
iframe { border: 0; }
/*---------------------------------
	common
---------------------------------*/
body {
	position: relative;
	width: 100%;
	background: url(../img/bg_header_left.png) no-repeat left top,url(../img/bg_header_right.png) no-repeat right top,url(../img/bg_footer_left.png) no-repeat left bottom,url(../img/bg_footer_right.png) no-repeat right bottom,url(../img/bg_wrapper.png) repeat center top #a0a0a0;
	background-size: auto,auto,auto,auto,auto 100%;
	color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	font-size:0.9rem;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
#wrapper {
	position: relative;
	overflow-x: hidden;
}
/*---------------------------------
	header
---------------------------------*/
header {
	width: calc(100% - 1054px);
	height: 75px;
	margin: 0 auto;
	box-sizing: border-box;
	background: url(../img/bg_header_mid.png) repeat-x center top;
	text-align: center;
}
h1 {
	position: absolute;
	top: 16px;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
h1 img {
	width: 106px;
}
.cloud li {
	position: absolute;
}
.cloud li.c_01 {
	top: 600px;
	right: -5px;
	animation: c_01 35s linear infinite;
	-webkit-animation: c_01 35s linear infinite;
	-ms-animation: c_01 35s linear infinite;
}
.cloud li.c_02 {
	top: 985px;
	right: 17px;
	animation: c_02 35s linear infinite;
	-webkit-animation: c_02 35s linear infinite;
	-ms-animation: c_02 35s linear infinite;
}
.cloud li.c_03 {
	top: 781px;
	left: -66px;
	animation: c_03 35s linear infinite;
	-webkit-animation: c_03 35s linear infinite;
	-ms-animation: c_03 35s linear infinite;
}
.cloud li.c_04 {
	top: 234px;
	right: -110px;
	animation: c_04 35s linear infinite;
	-webkit-animation: c_04 35s linear infinite;
	-ms-animation: c_04 35s linear infinite;
}
.cloud li.c_05 {
	top: 370px;
	left: -130px;
	animation: c_05 35s linear infinite;
	-webkit-animation: c_05 35s linear infinite;
	-ms-animation: c_05 35s linear infinite;
}
@keyframes c_01 {
	0% {
		right: -5px;
	}
	30% {
		right: -427px;
	}
	30.01% {
		right: 100%;
	}
	100% {
		right: -5px;
	}
}
@keyframes c_02 {
	0% {
		right: 17px;
	}
	20% {
		right: -433px;
	}
	20.01% {
		right: 100%;
	}
	100% {
		right: 17px;
	}
}
@keyframes c_03 {
	0% {
		left: -66px;
	}
	80% {
		left: 100%;
	}
	80.01% {
		left: -440px;
	}
	100% {
		left: -66px;
	}
}
@keyframes c_04 {
	0% {
		right: -110px;
	}
	20% {
		right: -365px;
	}
	20.01% {
		right: 100%;
	}
	100% {
		right: -110px;
	}
}
@keyframes c_05 {
	0% {
		left: -130px;
	}
	80% {
		left: 100%;
	}
	80.01% {
		left: -530px;
	}
	100% {
		left: -130px;
	}
}
/*---------------------------------
	section
---------------------------------*/
section {
	min-height: 1160px;
}
p.click {
	position: absolute;
	top: 120px;
	left: 50%;
	width: 210px;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	cursor: pointer;
}
p.click img {
	width: 100%;
	height: auto;
}
div.card {
	position: absolute;
	top: 190px;
	left: 50%;
	width: 620px;
	height: 917px;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
	/*perspective:2500px;
	-webkit-perspective:2500px;*/
	cursor: default;
	overflow: hidden;
	transition: all 0.5s;
}
div.card .front {
	display: block;
	position: relative;
	width: 620px;
	height: 917px;
	overflow: hidden;
}
div.card.turn .front {
	display:none;
}
div.card .back {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
/*---------------------------------
	card-layout
---------------------------------*/
div.card li {
	display: none;
	position: absolute;
}
div.card li.bg {
	display: block;
	width: 100%;
}
div.card li.monster {
	display: block;
	top: 20px;
	right: 20px;
}
.animate div.card li.monster {
	animation: monster 2.5s linear infinite;
	-webkit-animation: monster 2.5s linear infinite;
	-ms-animation: monster 2.5s linear infinite;
}
div.card li.green {
	display: block;
	top: -1671px;
	left: 50px;
	background: url(../img/green.png) repeat-y;
	background-size: 100%;
	transition:top 0.5s;
}
.animate div.card li.green {
	animation: confetti_green 20s linear infinite;
	-webkit-animation: confetti_green 20s linear infinite;
	-ms-animation: confetti_green 20s linear infinite;
}
div.card li.yellow {
	display: block;
	top: -1507px;
	left: 40px;
	background: url(../img/yellow.png) repeat-y;
	background-size: 100%;
	transition:top 0.5s;
}
.animate div.card li.yellow {
	animation: confetti_yellow 15s linear infinite;
	-webkit-animation: confetti_yellow 15s linear infinite;
	-ms-animation: confetti_yellow 15s linear infinite;
}
div.card li.white {
	display: block;
	top: -495px;
	left: 18px;
	background: url(../img/white.png) repeat-y;
	background-size: 100%;
	transition:top 0.5s;
}
.animate div.card li.white {
	animation: confetti_white 20s linear infinite;
	-webkit-animation: confetti_white 20s linear infinite;
	-ms-animation: confetti_white 20s linear infinite;
}
div.card li.green img,
div.card li.yellow img,
div.card li.white img {
	opacity: 0;
}
div.card li.haruto {
	display: block;
	top: 308px;
	right: 100px;
}
.animate div.card li.haruto {
	animation: haruto 3s linear infinite;
	-webkit-animation: haruto 3s linear infinite;
	-ms-animation: haruto 3s linear infinite;
}
div.card li.re7_dr4 {
	display: block;
	top: 420px;
	right: 30px;
}
.animate div.card li.re7_dr4 {
	animation: re7_dr4 4s linear infinite;
	-webkit-animation: re7_dr4 4s linear infinite;
	-ms-animation: re7_dr4 4s linear infinite;
}
div.card li.wave_back {
	display: block;
	bottom: 0;
	left: 0;
}
.animate div.card li.wave_back {
	animation: wave_back 12s linear infinite;
	-webkit-animation: wave_back 12s linear infinite;
	-ms-animation: wave_back 12s linear infinite;
}
div.card li.rev1 {
	display: block;
	top: 139px;
	right: 384px;
}
.animate div.card li.rev1 {
	animation: rev1 3.5s linear infinite;
	-webkit-animation: rev1 3.5s linear infinite;
	-ms-animation: rev1  3.5s linear infinite;
}
div.card li.rev2 {
	display: block;
	top: 196px;
	right: 236px;
}
.animate div.card li.rev2 {
	animation: rev2 3s linear infinite;
	-webkit-animation: rev2 3s linear infinite;
	-ms-animation: rev2  3s linear infinite;
}
div.card li.rock {
	display: block;
	top: 278px;
	right: 440px;
}
.animate div.card li.rock {
	animation: rock 4s linear infinite;
	-webkit-animation: rock 4s linear infinite;
	-ms-animation: rock 4s linear infinite;
}
div.card li.ryu {
	display: block;
	top: 323px;
	right: 283px;
}
.animate div.card li.ryu {
	animation: ryu 2.5s linear infinite;
	-webkit-animation: ryu 2.5s linear infinite;
	-ms-animation: ryu 2.5s linear infinite;
}
div.card li.hunter {
	display: block;
	top: 430px;
	right: 195px;
}
.animate div.card li.hunter {
	animation: hunter 5s linear infinite;
	-webkit-animation: hunter 5s linear infinite;
	-ms-animation: hunter 5s linear infinite;
}
div.card li.wave_front {
	display: block;
	bottom: 0;
	left: 0;
}
.animate div.card li.wave_front {
	animation: wave_front 10s linear infinite;
	-webkit-animation: wave_front 10s linear infinite;
	-ms-animation: wave_front 10s linear infinite;
}
div.card li.nabiru {
	display: block;
	top: 517px;
	right: 44px;
}
.animate div.card li.nabiru {
	animation: nabiru 3.5s linear infinite;
	-webkit-animation: nabiru 3.5s linear infinite;
	-ms-animation: nabiru 3.5s linear infinite;
}
div.card li.frame {
	display: block;
	width: 622px;
	margin: 0 0 0 -1px;
}
div.card li.frame img {
	width: 622px;
}
/*---------------------------------
	move
---------------------------------*/

@keyframes confetti_green {
	0% {
		top: -1671px;
	}
	100% {
		top: -1052px;
	}
}

@keyframes confetti_yellow {
	0% {
		top: -1507px;
	}
	100% {
		top: -929px;
	}
}
@keyframes confetti_white {
	0% {
		top: -495px;
	}
	100% {
		top: -60px;
	}
}
@keyframes wave_back {
	0% {
		left: 0;
	}
	25% {
		bottom: -5px;
	}
	50% {
		bottom: 0;
	}
	75% {
		bottom: -5px;
	}
	100% {
		left: -370px;
		bottom: 0;
	}
}
@keyframes wave_front {
	0% {
		left: 0;
		bottom: 0;
	}
	25% {
		bottom: -5px;
	}
	50% {
		bottom: 0;
	}
	75% {
		bottom: -5px;
	}
	100% {
		left: -490px;
		bottom: 0;
	}
}
@keyframes monster {
	0% {
		top: 20px;
		right: 20px;
	}
	90% {
		top: 0;
		right: 0;
	}
	100% {
		top: 20px;
		right: 20px;
	}
}
@keyframes haruto {
	0% {
		top: 308px;
		right: 100px;
	}
	80% {
		top: 328px;
		right: 90px;
	}
	100% {
		top: 308px;
		right: 100px;
	}
}
@keyframes rev1 {
	0% {
		top: 139px;
		transform: rotateZ(0deg);
	}
	2% {
		transform: rotateZ(-5deg);
	}
	4% {
		transform: rotateZ(0deg);
	}
	6% {
		transform: rotateZ(-5deg);
	}
	8% {
		transform: rotateZ(0deg);
	}
	50% {
		top: 149px;
	}
	100% {
		top: 139px;
	}
}
@keyframes rev2 {
	0% {
		top: 196px;
		transform: rotateZ(0deg);
	}
	10% {
		top: 186px;
		transform: rotateZ(-10deg);
	}
	100% {
		top: 196px;
		transform: rotateZ(0deg);
	}
}
@keyframes re7_dr4 {
	0% {
		transform: rotateZ(10deg);
	}
	50% {
		transform: rotateZ(-10deg);
	}
	100% {
		transform: rotateZ(10deg);
	}
}
@keyframes nabiru {
	0% {
		top: 517px;
	}
	50% {
		top: 537px;
	}
	100% {
		top: 517px;
	}
}
@keyframes rock {
	0% {
		top: 338px;
	}
	28% {
		top: 278px;
		transform: rotateZ(0deg);
	}
	30% {
		ttop: 278px;
		transform: rotateZ(-5deg);
	}
	32% {
		top: 278px;
		transform: rotateZ(0deg);
	}
	100% {
		top: 338px;
	}
}
@keyframes ryu {
	0% {
		top: 323px;
		right: 283px;
	}
	4% {
		top: 313px;
		right: 276px;
	}
	8% {
		top: 283px;
		right: 273px;
	}
	100% {
		top: 323px;
		right: 283px;
	}
}
@keyframes hunter {
	0% {
		top: 430px;
		transform: rotateZ(0deg);
	}
	90% {
		top: 420px;
		transform: rotateZ(10deg);
	}
	94% {
		top: 430px;
		transform: rotateZ(0deg);
	}
	96% {
		top: 425px;
		transform: rotateZ(2deg);
	}
	100% {
		top: 430px;
		transform: rotateZ(0deg);
	}
}

/*---------------------------------
	footer
---------------------------------*/
footer {
	position: relative;
	width: calc(100% - 1054px);
	height: 75px;
	margin: 0 auto;
	box-sizing: border-box;
	background: url(../img/bg_footer_mid.png) repeat-x center bottom;
	text-align: center;
}
footer p {
	display: none;
	position: absolute;
	bottom: 17px;
	left: 50%;
	width: 100%;
	color: #fff;
	font-size: 10px;
	-webkit-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}
/*---------------------------------
	mobile
---------------------------------*/
@media screen and (max-width:768px) {
	body {
		background: url(../img/bg_wrapper.png) repeat center top #a0a0a0;
		background-size: auto 100%;
	}
	#wrapper {
		
	}
	header {
		width: 100%;
	}
	footer {
		width: 100%;
	}
}