@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_wh.jpg) repeat center top #a0a0a0;
	background-size: auto,auto,auto 100%;
	color:#fff;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "MS Ｐゴシック", "MS PGothic", sans-serif;
	font-size:16px;
	font-size:0.9rem;
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
#wrapper {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/*---------------------------------
	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;
}

/*---------------------------------
	contents
---------------------------------*/
#contents {
	display: flex;
	justify-content: center;
	align-items: center;
	flex: 1;
	min-height: 1000px;
}

/*---------------------------------
	cloud-anime
---------------------------------*/
.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;
	}
}

/*---------------------------------
	card
---------------------------------*/
.card {
	max-width: 1280px;
	max-height: 864px;
	width: 80vw;
	height: 54vw;
	box-shadow: 0 0 10px rgba(0,0,0,0.8);
	cursor: default;
	overflow: hidden;
	position: relative;
}
.card li {
	line-height: 1;
}
.card li img {
	width: 100%;
	height: auto;
}
/* card-bg------------------------ */
.card li.bg {
	display: block;
	width: 100%;
	/* -webkit-animation: bgFadeIn 0.5s ease-out forwards; */
}
/* @keyframes bgFadeIn {
	0% {
		opacity: 0;
		transform: scale(1.1);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	}
} */
/* card-contents------------------------ */
.card li:not(.text-anime) {
	width: 100%;
	position: absolute;
}
.card li.flash {
	width: 12vw;
	max-width: 200px;
	height: auto;
	left: 9vw;
	top: 15vw;
	transform: rotate(20deg);
	-webkit-animation: flash 2s ease-in-out infinite;
	animation: flash 2s ease-in-out infinite;
}
.card li.flash_board {
	width: 1vw;
	max-width: 30px;
	height: auto;
}
.card li.flash_board1 {
	right: 15vw;
	top: 10.5vw;
	-webkit-animation: flash_board 2s ease infinite;
	animation: flash_board 2s ease infinite;
}
.card li.flash_board2 {
	right: 14vw;
	top: 13vw;
	-webkit-animation: flash_board 1.5s ease infinite;
	animation: flash_board 1.5s ease infinite;
}
.card li.flash_board3 {
	right: 11.5vw;
	top: 9.5vw;
	-webkit-animation: flash_board 2.5s ease infinite;
	animation: flash_board 2.5s ease infinite;
}
.card li.flash_board4 {
	right: 10vw;
	top: 11.5vw;
	-webkit-animation: flash_board 3s ease infinite;
	animation: flash_board 3s ease infinite;
}
.card li.flash_board5 {
	right: 10vw;
	top: 11.5vw;
	-webkit-animation: flash_board 1.5s ease infinite;
	animation: flash_board 1.5s ease infinite;
}
.card li.ryu {
	width: 14.8vw;
	max-width: 236px;
	height: auto;
	left: 24.5vw;
	top: 7vw;
	-webkit-animation: ryu 2s ease-in infinite;
	animation: ryu 2s ease-in infinite;
}
.card li.rockman {
	width: 20.5vw;
	max-width: 328px;
	height: auto;
	right: 0;
	top: 22.5vw;
	-webkit-animation: rockman 2s ease infinite;
	animation: rockman 2s ease infinite;
}
.card li.onpu {
	width: 2vw;
	max-width: 36px;
	height: auto;
	right: 6.5vw;
	top: 20.5vw;
	transform-origin: center center;
	-webkit-animation: onpu 1.5s ease infinite;
	animation: onpu 1.5s ease infinite;
}
.card li.ase {
	width: 2vw;
	max-width: 26px;
	height: auto;
	right: 19.5vw;
	top: 28.5vw;
	-webkit-animation: ase 1s ease-in-out infinite;
	animation: ase 1s ease-in-out infinite;
}
.card li.ase2 {
	width: 2vw;
	max-width: 33px;
	height: auto;
	right: 2.4vw;
	top: 24vw;
	-webkit-animation: ase2 1s ease-in-out infinite;
	animation: ase2 1s ease-in-out infinite;
}
@media(min-width: 1600px) {
	.card li.flash {
		left: 145px;
		top: 260px;
	}
	.card li.flash_board1 {
		right: 248px;
		top: 170px;
	}
	.card li.flash_board2 {
		right: 177px;
		top: 146px;
	}
	.card li.flash_board3 {
		right: 156px;
		top: 177px;
	}
	.card li.flash_board4 {
		right: 217px;
		top: 209px;
	}
	.card li.flash_board5 {
		right: 265px;
		top: 219px;
	}
	.card li.ryu {
		left: 396px;
		top: 116px;
	}
	.card li.rockman {
		top: 360px;
	}
	.card li.onpu {
		top: 328px;
		right: 106px;
	}
	.card li.ase {
		top: 460px;
		right: 316px;
	}
	.card li.ase2 {
		top: 383px;
		right: 40px;
	}
}
@keyframes flash {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	10% {
		opacity: 0;
		transform: scale(0);
	}
	13% {
		opacity: 1;
		transform: scale(1.5);
	}
	16% {
		opacity: 0;
		transform: scale(0);
	}
	100% {
		opacity: 0;
		transform: scale(0);
	}
}
@keyframes flash_board {
	0% {
		opacity: 0;
		transform: scale(0);
	}
	50% {
		opacity: 1;
		transform: scale(1.2);
	}
	100% {
		opacity: 0;
		transform: scale(0);
	}
}
@keyframes ryu {
	0% {
		transform: translateY(0);
	}
	5% {
		transform: translateY(1%);
	}
	10% {
		transform: translateY(-15%);
	}
	13% {
		transform: translateY(-15%);
	}
	33% {
		transform: translateY(1%);
	}
	35% {
		transform: translateY(0);
	}
}
@keyframes rockman {
	0% {
		transform: translateY(0);
	}
	5% {
		transform: translateY(-3%);
	}
	10% {
		transform: translateY(0);
	}
	15% {
		transform: translateY(-3%);
	}
	20% {
		transform: translateY(0);
	}
	100% {
		transform: translateY(0);
	}
}
@keyframes onpu {
	0% {
		opacity: 1;
		transform: translate(-50%, 50%) scale(0.7) rotate(-50deg);
	}
	50% {
		opacity: 1;
		transform: translate(10%, -10%) scale(1) rotate(10deg);
	}
	100% {
		opacity: 0;
		transform: translate(20%, -20%) scale(0.7) rotate(-50deg);
	}
}
@keyframes ase {
	0% {
		opacity: 1;
		transform: translate(40%, 0) scale(0.7);
	}
	50% {
		opacity: 1;
		transform: translate(-20%, -20%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(-60%, 0) scale(0.7);
	}
}
@keyframes ase2 {
	0% {
		opacity: 1;
		transform: translate(-20%, 20%) scale(0.7);
	}
	50% {
		opacity: 1;
		transform: translate(20%, -20%) scale(1);
	}
	100% {
		opacity: 0;
		transform: translate(30%, -30%) scale(0.7);
	}
}

/* text-anime------------------------ */
.card li.text {
	left: -1vw;
	bottom: 3.6vw;
	left: 0;
}
.card li.text .text-anime{
	position: absolute;
	top: -3vw;
	opacity: 0;
	width: auto;
	height: 3vw;
	max-height: 50px;
	z-index: 1;
}
.card li.text .text-anime:last-child{
	top: 1vw;
	height: 2vw;
	max-height: 32px;
}
.card .text-anime img{
	width: auto;
	height: 100%;
	transition:all 0.3s ease-out;
	-webkit-transition:all 0.3s ease-out;
	-moz-transition:all 0.3s ease-out;
	-o-transition:all 0.3s ease-out;
}
.text-jp-01{
	left: 1vw;
}
.text-jp-02 {
	left: 3.9vw;
}
.text-jp-03 {
	left: 6.9vw;
}
.text-jp-04 {
	left: 9.6vw;
}
.text-jp-05 {
	left: 12.2vw;
}
.text-jp-06 {
	left: 16vw;
	z-index: 2;
}
.text-jp-07 {
	left: 19vw;
}
.text-jp-08 {
	left: 21.3vw;
}
.text-jp-09 {
	left: 26.2vw;
}
.text-jp-10 {
	left: 28.9vw;
}
.text-jp-11 {
	left: 31.1vw;
}
.text-jp-12 {
	left: 34.2vw;
}
.text-jp-13 {
	left: 37.7vw;
}
@media(min-width: 1600px) {
	.card li.text {
		left: -4px;
		bottom: 58px;
	}
	.card li.text .text-anime {
		top: -50px;
	}
	.card li.text .text-anime:last-child {
		top: 15px;
	}
	.text-jp-01{
		left: 18px;
	}
	.text-jp-02 {
		left: 66px;
		z-index: 1;
	}
	.text-jp-03 {
		left: 114px;
	}
	.text-jp-04 {
		left: 158px;
	}
	.text-jp-05 {
		left: 202px;
	}
	.text-jp-06 {
		left: 259px;
	}
	.text-jp-07 {
		left: 308px;
	}
	.text-jp-08 {
		left: 346px;
	}
	.text-jp-09 {
		left: 422px;
	}
	.text-jp-10 {
		left: 467px;
	}
	.text-jp-11 {
		left: 504px;
	}
	.text-jp-12 {
		left: 552px;
	}
	.text-jp-13 {
		left: 608px;
	}
}

/*---------------------------------
	footer Area
---------------------------------*/
#footerArea {
	flex-shrink: 0;
}

/* bnr ------------------------- */
#footerArea #bnrArea {
	position: relative;
	background: rgba(0,0,0,0.8);
	z-index: 10;
}
#footerArea #bnrArea .message {
	display: block;
	position: relative;
	background: linear-gradient(90deg, #76190e 5%, #ee341f 50%, #76190e 95%);
	z-index: 100;
	color: #000;
	font-weight: bold;
	padding: 1.3vw 1vw 1vw;
	color: #fff;
	opacity: 0;
	font-size: 20px;
	text-align: center;
	animation-name: msfadeIn;
	animation-delay: 2s;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
}
@keyframes msfadeIn {
	0% {
		letter-spacing: 0.8em;
			opacity: 0;
	}
	100% {
		letter-spacing: 0.1em;
			opacity: 1;
	}
}
#footerArea #bnrArea ul {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100px;
}
#footerArea #bnrArea ul li {
	margin: 0 10px;
}
#footerArea #bnrArea ul li a {
	display: block;
	border: 1px solid rgba(255,255,255,0.2);
	transition: opacity 0.3s;
}
#footerArea #bnrArea ul li a:hover {
	opacity: 0.8;
}
#footerArea #bnrArea ul li img {
	width: 100%;
}

/* footer ------------------------- */
#footerArea footer {
	position: relative;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
	background: #000;
	text-align: center;
}
#footerArea footer p {
	width: 100%;
	color: #888;
	font-size: 12px;
	padding: 1vw 0;
}

/*---------------------------------
	mobile
---------------------------------*/
@media screen and (max-width:768px) {
	body {
		background: url(../img/bg_wh.jpg) repeat center top #a0a0a0;
		background-size: auto 100%;
	}
	header {
		width: 100%;
	}
	#contents {
		min-height: unset;
		padding: 100px 0;
	}
	.card {
		transform: scale(1.15);
	}
	#footerArea #bnrArea {
		background: rgba(0,0,0,0.8);
	}
	#footerArea #bnrArea .message {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1vw 0 0;
		box-sizing: border-box;
		font-size: 14px;
		height: 40px;
	}
	#footerArea #bnrArea ul {
		flex-wrap: wrap;
		width: 92%;
		height: auto;
		margin: 0 auto;
		padding: 20px 0;
	}
	#footerArea #bnrArea ul li {
		width: 48%;
		margin: 0 1% 20px;
	}
	#footerArea #bnrArea ul li a {
		display: block;
		border: 1px solid rgba(255,255,255,0.5);
		transition: opacity 0.3s;
	}
	#footerArea #bnrArea ul li a:hover {
		opacity: 0.8;
	}
	#footerArea footer {
		width: 100%;
	}
}