@charset "utf-8";

/*

http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)

*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

body {
	line-height: 1;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

* {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}

/* COMMON */

body {
	color: #000000;
	font-size: 14px;
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	line-height: 2;
	text-align: center;
	letter-spacing: 0.1em;
	font-feature-settings : "palt" 1;
	background: #ffffff url(../images/bg.gif) repeat-y center top;
	background-size: 100%;
}

a { color: #ffffff; text-decoration: underline; }
a:hover { color: #00d2aa; text-decoration: none; }

img {
	width: 100%;
	height: auto;
	line-height: 0;
	vertical-align: top;
}

h1, h2, h3, h4, h5, h6 {

}

input,
select,
textarea {

}

.fl { float: left; }
.fr { float: right; }

.clearfix:after {
	content: "";
	display: block;
	clear: both;
}

.fadeinup {
  opacity: 0;
  transform: translate(0px, 30px);
}

.fadeinleft {
  opacity: 0;
  transform: translate(-30px, 0);
}

.fadeinright {
  opacity: 0;
  transform: translate(30px, 0);
}

.is-active .fadeinup,
.is-active .fadeinleft,
.is-active .fadeinright {
	opacity: 1;
	transform: translate(0px, 0px);
	transition: opacity 0.6s linear, transform 0.8s cubic-bezier(.1,1,.5,1);
}

.is-active .delay2000ms { transition-delay: 2s; }
.is-active .delay1800ms { transition-delay: 1.8s; }
.is-active .delay1600ms { transition-delay: 1.6s; }
.is-active .delay1400ms { transition-delay: 1.4s; }
.is-active .delay1200ms { transition-delay: 1.2s; }
.is-active .delay1000ms { transition-delay: 1s; }
.is-active .delay800ms { transition-delay: 0.8s; }
.is-active .delay600ms { transition-delay: 0.6s; }
.is-active .delay400ms { transition-delay: 0.4s; }
.is-active .delay200ms { transition-delay: 0.2s; }

.article-inner,
.footer-inner {
	min-width: 980px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 20px;
}

span.red { color: #d20000; }
span.green { color: #82dc00; }
span.gray { color: #b4b4b5; }

.show-pc { display: block; }
.show-sp { display: none; }

#loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background: #ffffff;
}

#loader .loader,
#loader .loader:after {
 border-radius: 50%;
 width: 100px;
 height: 100px;
}

#loader .loader {
 position: absolute;
	top: 50%;
	left: 50%;
	margin: -50px 0 0 -50px;
 font-size: 10px;
 position: relative;
 text-indent: -9999em;
 border-top: 0.1em solid rgba(0, 0, 0, 0.2);
 border-right: 0.1em solid rgba(0, 0, 0, 0.2);
 border-bottom: 0.1em solid rgba(0, 0, 0, 0.2);
 border-left: 0.1em solid #000000;
 -webkit-transform: translateZ(0);
 -ms-transform: translateZ(0);
 transform: translateZ(0);
 -webkit-animation: load 1.1s infinite linear;
 animation: load 1.1s infinite linear;
}

@-webkit-keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes load {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/* HEADER, FOOTER */

header {
	width: 100%;
	background: url(../images/battle.svg) no-repeat center top;
	background-size: 100.25%;
}

.header-inner {
		position: relative;
		overflow: hidden;
}

header .red,
header .green {
	width: 50%;
}

header .red { text-align: left; }
header .green { text-align: right; }

header .red img,
header .green img {
	width: 75%;
	height: auto;
}

header h1 {
	width: 100%;
	margin: auto;
	overflow-x: hidden;
}

header h1 img {
	position: absolute;
	bottom: 0;
	-webkit-transform: translate(-50%,0%);
	-moz-transform: translate(-50%,0%);
	-ms-transform: translate(-50%,0%);
	-o-transform: translate(-50%,0%);
	transform: translate(-50%,0%);
	width: 120%;
	margin: auto;
}

h1 .fadeinup {
	-webkit-transform: translate(-50%,0%) !important;
	-moz-transform: translate(-50%,0%) !important;
	-ms-transform: translate(-50%,0%) !important;
	-o-transform: translate(-50%,0%) !important;
	transform: translate(-50%,0%) !important;
}

h1.is-active .fadeinup {
	-webkit-transform: translate(-50%,0%) !important;
	-moz-transform: translate(-50%,0%) !important;
	-ms-transform: translate(-50%,0%) !important;
	-o-transform: translate(-50%,0%) !important;
	transform: translate(-50%,0%) !important;
}

footer {
	padding: 0 0 30px 0;
}

.share ul {
	padding: 0 0 45px 0;
	text-align: center;
}

.share ul li {
	display: inline-block;
	padding: 0 10px;
}

.share ul li a img {
	width: 60px;
	height: 60px;
	transition: transform 0.3s cubic-bezier(.1,1,.5,1);
}

.share ul li a img:hover {
	transform: scale(0.9);
}

/* MAIN */

.detail h2 img {
	width: 75%;
	float: right;
}

.early {
	margin: 90px 0 45px 0;
	padding: 60px 0 0 0;
	color: #ffffff;
	font-weight: bold;
	background: #000000;
}

.early h2 {
	padding: 0 0 0 0;
	font-size: 150%;
}

.early p {
	width: 50%;
	margin: 0 auto;
	padding: 30px 0 60px 0;
}

.youtube .article-inner {
	position: relative;
	padding: 120px 100px 0;
}

.youtube h3 img {
	z-index: 2;
	position: absolute;
	top: 45px;
	left: 10px;
	width: 33.3%;
}

.youtube .parts,
.anthem .parts,
.versus .parts {
	z-index: 1;
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	background: #666666;
}

.youtube .parts iframe,
.anthem .parts iframe,
.versus .parts iframe {
 position: absolute;
 top: 0;
 right: 0;
 width: 100% !important;
 height: 100% !important;
}

.youtube p {
	padding: 60px 0;
	font-size: 160%;
	line-height: 1.6;
	font-weight: bold;
}

.anthem .article-inner {
	max-width: 100%;
	padding: 0 0 160px 0;
}

.anthem h5 { padding: 90px 0; }
.anthem h5 img { height: 60px; }

.anthem .fl,
.anthem .fr {
	width: 50%;
}

.member h2 { padding: 0 0 90px 0; }

.member h2 img {
	width: auto;
	height: 90px;
}

.member h3 { padding: 0 0 60px 0; }

.member h3 img {
	display: inline-block;
	width: auto !important;
	height: 200px !important;
	margin: 0 0 15px 0;
}

.member .leader {
	background: url(../images/vs.svg) no-repeat center center;
}

.member .leader div {
	position: relative;
	width: 50%;
}

.member .leader div img { width: 66.6%; }

.member .leader .red {
	float: left;
	text-align: center;
}

.member .leader .green {
	float: right;
	text-align: center;
}

.member .leader div h4 {
	position: absolute;
	bottom: -60px;
	width: 75%;
	margin: auto;
	-webkit-transform: translate(15%,-50%);
	-moz-transform: translate(15%,-50%);
	-ms-transform: translate(15%,-50%);
	-o-transform: translate(15%,-50%);
	transform: translate(15%,-50%);
}

.member .leader div h4 img {

}

.member .team_red,
.member .team_green {
	float: left;
	width: 50%;
	margin: 30px 0 0 0;
}

.member .team_red { padding: 0 3% 0 0; }
.member .team_green { padding: 0 0 0 3%; }

.member .team_red ul li,
.member .team_green ul li {
	position: relative;
	float: left;
	width: 50%;
}

.member .team_red ul li .artist,
.member .team_green ul li .artist {
	padding: 10%;
	border-radius: 50%;
}

.member .team_red ul li h4 img,
.member .team_green ul li h4 img {
	position: absolute;
	width: 100%;
	margin: auto;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.member ul.sub {
	padding: 60px 15px 0;
}

.member ul.sub li {
	width: 33.3%;
}

.member .opdj {
	padding: 60px 0 0 0;
}

.member .opdj b,
.member .other b { font-weight: bold; }

.member .second {
	padding: 30px 0 60px 0;
	font-size: 140%;
}

.member .other { font-size: 140%; }

.member .second h6 {
	padding: 0 0 30px 0;
	font-weight: bold;
}

.member .second ul {
}

.member ul.sub li img { border-radius: 50%; padding: 7.5%;}

.member .plight h4 img { width: 55% !important; bottom: -30px; }
.member .mnk h4 img { width: 130% !important; bottom: -65px; }
.member .noriken h4 img { width: 80% !important; bottom: -40px; }
.member .kobaryo h4 img { width: 65% !important; bottom: -30px; }
.member .usao h4 img { width: 45% !important; bottom: -25px; }
.member .genki h4 img { width: 70% !important; bottom: -40px; }
.member .myosuke h4 img { width: 90% !important; bottom: -45px; }
.member .aran h4 img { width: 45% !important; bottom: -20px; }

.breakin { padding: 60px 0 0 0; }

.breakin li {
	float: left;
	width: 50%;
	height: 260px;
}

.breakin .red { padding: 0 20px 0 0; }
.breakin .green { padding: 0 0 0 20px; }

.breakin img {
	width: auto;
	height: 100%;
}

.breakin p { padding: 30px 0 0 0; font-weight: bold; }

.versus { padding: 120px 0 30px 0; }

.versus h5 { padding: 0 0 90px 0; }
.versus h5 img { height: 110px; }

.versus ul li {
	padding: 0 30px;
	border-radius: 30px;
}

.versus ul li a {
	display: block;
	width: 100%;
	height: 120px;
	color: #dc0000;
	font-size: 24px;
	text-decoration: none;
	font-weight: bold;
	line-height: 120px;
	background: #ffffff;
	transition: all 0.5s cubic-bezier(.1,1,.5,1);
}

.versus ul li a:hover {
	color: #ffffff;
	background-color: #000000;
}


.versus ul li a img {
	width: auto;
	height: 120px;
}

.versus ul li br { display: none; }

.buy {
	margin: 180px 0;
	letter-spacing: -100px;
	color: #000000;
	background: #ffffff;
}

.buy h5 img {
	height: 60px;
	margin: -30px 0 60px 0;
}

.buy ul {
	padding: 90px 0;
	border-bottom: 1px solid #eeeeee; }

.buy ul li {
	display: inline-block;
	width: 33.3%;
	padding: 0 45px 30px;
	letter-spacing: 0.1em;
}

.buy ul li img {
	margin: 0 0 30px 0;
	border-radius: 50%;
	transition: transform 0.3s cubic-bezier(.1,1,.5,1);
}

.buy ul li img:hover {
	transform: scale(0.9);
}

.buy ul.ticket li {
	padding-bottom: 0;
}

.buy ul.ticket li img {
	width: 50%;
	border-radius: 0;
}

.buy .ticket-sub {
	font-size: 140%;
}

.buy .ticket-sub li {
	width: 100%;
	padding: 0;
}

.buy .ticket-sub a {
	color: #333333;
	font-weight: bold;
}

.buy .ticket-sub a:hover {
	color: #666666;
}

.buy .ticket-sub span.show-pc {
	display: inline-block;
	width: 40px;
	text-align: center;
}

/* MEDIA QUERIES */

@media screen and (max-width:980px) {

	.show-pc { display: none; }
	.show-sp { display: block; }

	body { overflow-x: hidden; }

	.article-inner,
	.footer-inner {
		min-width: auto;
		max-width: auto;
		margin: 0 auto;
		padding: 0 20px;
	}

	header {
		width: 100%;
		background: url(../images/battle.svg) no-repeat center top;
		background-size: 100.25%;
	}

	.header-inner {
			position: relative;
			overflow: hidden;
	}

	header .red,
	header .green {
		width: 50%;
	}

	header .red { text-align: left; }
	header .green { text-align: right; }

	header .red img,
	header .green img {
		width: 85%;
		height: auto;
	}

	header h1 {
		width: 100%;
		margin: auto;
		overflow-x: hidden;
	}

	header h1 img {
		position: absolute;
		bottom: 0;
		-webkit-transform: translate(-50%,0%);
		-moz-transform: translate(-50%,0%);
		-ms-transform: translate(-50%,0%);
		-o-transform: translate(-50%,0%);
		transform: translate(-50%,0%);
		width: 140%;
		margin: auto;
	}

	h1 .fadeinup {
		-webkit-transform: translate(-50%,0%) !important;
		-moz-transform: translate(-50%,0%) !important;
		-ms-transform: translate(-50%,0%) !important;
		-o-transform: translate(-50%,0%) !important;
		transform: translate(-50%,0%) !important;
	}

	h1.is-active .fadeinup {
		-webkit-transform: translate(-50%,0%) !important;
		-moz-transform: translate(-50%,0%) !important;
		-ms-transform: translate(-50%,0%) !important;
		-o-transform: translate(-50%,0%) !important;
		transform: translate(-50%,0%) !important;
	}

	footer {
		padding: 0 0 30px 0;
	}

	.share ul {
		padding: 0 0 45px 0;
		text-align: center;
	}

	.share ul li {
		display: inline-block;
		padding: 0 10px;
	}

	.share ul li a img {
		width: 60px;
		height: 60px;
		transition: transform 0.3s cubic-bezier(.1,1,.5,1);
	}

	.share ul li a img:hover {
		transform: scale(0.9);
	}

	/* MAIN */

	.detail h2 img {
		width: 95%;
		float: right;
	}

 .early { margin: 30px 0; padding-left: 15px; padding-right: 15px; }

	.early p { width: 100%; }

	.youtube .article-inner {
		position: relative;
		padding: 60px 20px 0;
	}

	.youtube h3 img {
		z-index: 2;
		position: absolute;
		top: 25px;
		left: 10px;
		width: 45%;
	}

	.youtube .parts {
		z-index: 1;
		position: relative;
		width: 100%;
		padding-top: 56.25%;
		background: #666666;
	}

	.youtube .parts iframe {
	 position: absolute;
	 top: 0;
	 right: 0;
	 width: 100% !important;
	 height: 100% !important;
	}

	.youtube p {
		padding: 30px 0;
		font-size: 100%;
		line-height: 1.6;
		font-weight: bold;
	}

	.anthem .article-inner {
		max-width: auto;
		padding: 0 20px 60px;
	}

	.anthem h5 {
		padding: 30px 0;
	}

	.anthem .fl,
	.anthem .fr {
		width: 100%;
	}

	.member h2 { padding: 0 0 15px 0; }

	.member h2 img { width: 45%; }

	.member h3 img {
		width: auto !important;
		height: 60px !important;
	}

	.member .leader {
		background: url(../images/vs.svg) no-repeat center center;
	}

	.member .leader div {
		position: relative;
		width: 50%;
	}

	.member .leader div img { width: 66.6%; }

	.member .leader .red {
		float: left;
		text-align: center;
	}

	.member .leader .green {
		float: right;
		text-align: center;
	}

	.member .leader div h4 {
		position: absolute;
		bottom: -60px;
		width: 100%;
		margin: auto;
		-webkit-transform: translate(0,-50%);
		-moz-transform: translate(0,-50%);
		-ms-transform: translate(0,-50%);
		-o-transform: translate(0,-50%);
		transform: translate(0,-50%);
	}

	.member .leader div h4 img {

	}

	.member .team_red,
	.member .team_green {
		float: left;
		width: 50%;
		margin: 30px 0 0 0;
	}

	.member .team_red { padding: 30px 5% 0 0; }
	.member .team_green { padding: 30px 0 0 5%; }

	.member .team_red ul li,
	.member .team_green ul li {
		position: relative;
		float: left;
		width: 100%;
	}

	.member .team_red ul li .artist,
	.member .team_green ul li .artist {
		padding: 5% 5% 15% 5%;
		border-radius: 50%;
	}

	.member .team_red ul li h4 img,
	.member .team_green ul li h4 img {
		position: absolute;
		width: 100%;
		margin: auto;
		-webkit-transform: translate(-50%,-50%);
		-moz-transform: translate(-50%,-50%);
		-ms-transform: translate(-50%,-50%);
		-o-transform: translate(-50%,-50%);
		transform: translate(-50%,-50%);
	}

	.member ul.sub {
		padding: 30px 15px 0;
	}

	.member ul.sub li {
		width: 100%;
		padding: 0 0 10px 0;
		font-size: 10px;
		line-height: 1.5;
	}

	.member .opdj {
		font-size: 11px;
		padding: 30px 0 0 0;
	}

	.member ul.sub li img { border-radius: 50%; padding: 7.5%;}

	.member .plight h4 img { width: 55% !important; bottom: -8px; }
	.member .mnk h4 img { width: 120% !important; bottom: -25px; }
	.member .noriken h4 img { width: 80% !important; bottom: -15px; }
	.member .kobaryo h4 img { width: 65% !important; bottom: -7px; }
	.member .usao h4 img { width: 45% !important; bottom: -5px; }
	.member .genki h4 img { width: 70% !important; bottom: -10px; }
	.member .myosuke h4 img { width: 90% !important; bottom: -20px; }
	.member .aran h4 img { width: 45% !important; bottom: -5px; }

	.member .second {
		padding: 30px 0 0 0;
		font-size: 11px;
	}

	.member .other { padding: 30px 0 0 0; font-size: 11px; }

	.member .second h6 { padding: 0; }

	.member .second .team_red,
	.member .second .team_green {
		float: none;
		width: 100%;
		padding: 0;
	}

	.versus { padding: 60px 0 30px 0; }

	.versus h5 { padding: 0 0 30px 0; }
	.versus h5 img { height: 100px; }

	.versus ul li {
		padding: 0;
	}

	.versus ul li a {
		display: block;
		width: 100%;
		height: auto;
		padding: 0 0 13px 0;
		color: #ffffff;
		font-size: 16px;
		text-decoration: none;
		font-weight: bold;
		line-height: 30px;
		background: transparent;
	}

	.versus ul li a img {
		width: 50%;
		height: auto;
		padding: 0 0 10px 0;
	}

	.versus ul li br { display: block; }

	.buy {
		margin: 90px 0;
		letter-spacing: -100px;
		color: #000000;
		background: #ffffff;
	}

	.buy h5 img {
		height: 60px;
		margin: -30px 0 30px 0;
	}

	.buy ul {
		padding: 45px 0;
		border-bottom: 1px solid #eeeeee; }

	.buy ul li {
		display: inline-block;
		width: 100%;
		padding: 0 60px 15px;
		letter-spacing: 0.1em;
	}

	.buy ul li img {
		margin: 0 0 15px 0;
		border-radius: 50%;
	}

	.buy ul { padding-bottom: 0; }

	.buy ul.ticket li {
	padding: 0 60px 30px;
	}

	.buy ul.ticket li img {
		width: 50%;
		border-radius: 0;
	}

	.buy .ticket-sub {
		padding: 30px 0;
		font-size: 100%;
	}

	.buy .ticket-sub span.show-sp { height: 10px; }
	.buy .ticket-sub span.show-pc { display: none; }

}

@media screen and (min-width: 980px) {

}

#container { opacity: 0; }