@charset "utf-8";
@import url("/css/battle/layout/announcement.css");
@import url("/css/battle/layout/bg.css");
@import url("/css/battle/layout/gauge.css");
@import url("/css/battle/layout/screen.css");
@import url("/css/battle/layout/titleback.css");
/*===============================================*
 * 
 * ■media query
 * 
 *===============================================*/
@media (max-width: 1023px){
	#js-game_area {
		display:none !important;
	}
	#js-none {
		display:block !important;
	}
	.sidebar-r,
	.sidebar-l {
		display:none;
	}
	.main_box {
		min-width:100%;
	}
	.setting {
		display:none;
	}
}
@media (min-width: 1024px){
	#js-none {
		display:none !important;
	}
}
/*===============================================*
 * 
 * ■game
 * 
 *===============================================*/
.mode_box {
	margin-top:10px;
	text-align:left;
	font-weight:bold;
	background: linear-gradient(to right, Magenta, yellow, Cyan, Magenta) 0% center/200%;
	background-size: 200% auto; /* アニメーション用に幅を広く */
	background-clip: text;
	color: transparent;
	animation: mode_box 2s linear infinite;
}
@keyframes mode_box {
  to {
    background-position: 200% center;
  }
}
/*-------------------------------*
 * None Area
 *-------------------------------*/
.none_box {
	width:100%;
	color:#fff;
	margin-top:50px;
	text-align:center;
	line-height:26px;
}
/*-------------------------------*
 * Ctrl Area
 *-------------------------------*/
.ctrl_box {
	position:absolute;
	bottom:0;
	right:0;
	left:0;
	z-index:1001;
	display:flex;
	gap:0 10px ;
	justify-content: center;
}
/*-------------------------------*
 * Ctrlswitch Area
 *-------------------------------*/
.ctrlswitch_box {
}
/*-------------------------------*
 * game_box
 *-------------------------------*/
.game_box {
	height: 720px;
/*
	max-width: 1240px;
*/
	position: absolute;
	left: 0;
	right: 0;
	margin: 0px auto 0;
}
/*-------------------------------*
 * Gauge Area
 *-------------------------------*/
.gauge_box {
	z-index:100;
	position:absolute;
	right:0;
	left:0;
	top:10px;
}
/*-------------------------------*
 * Announcement Area
 *-------------------------------*/
.announcement_box {
	z-index:1000;
	position:absolute;
	top: 120px;
	right: 0;
	left: 0;
	margin: 0 auto;
	width: 500px;
	height: 120px;
}
/*-------------------------------*
 * Announcement Area
 *-------------------------------*/
.stage_round_box {
	z-index: 101;
	width: 650px;
	height: 84px;
	margin: 0 auto;
	position: absolute;
	top: 10px;
	left: 0;
	right: 0;
}
/*-------------------------------*
 * Stage Area
 *-------------------------------*/
.stage_box {
	z-index:100;
	position:absolute;
	left:24px;
	top:0px;
}
/*-------------------------------*
 * Round Area
 *-------------------------------*/
.round_box {
	z-index:100;
	position:absolute;
	right:24px;
	top:0px;
}
/*-------------------------------*
 * Screen Area
 *-------------------------------*/
.screen_box {
	border-radius:2px;
	position: absolute;
	color: #fff;
	left: 0;
	right: 0;
	margin:0 auto;
	width:90%;
	width: 770px;
	min-width: 770px;
	top: 344px;
	padding:5px;
	background: linear-gradient(45deg, #757575 0%, #9E9E9E 45%, #E8E8E8 70%, #9E9E9E 85%, #757575 90% 100%);
	min-height:110px;
}
/*-------------------------------*
 * Buttle Area
 *-------------------------------*/
.players_box {
	z-index:100;
	width:600px;
	height:300px;
	margin:0 auto;
	position:absolute;
	top:60px;
	left:0;
	right:0;
}
.players_box .player1_box {
	position:absolute;
	top:0px;
	width:300px;
	height:300px;
}
.players_box .player2_box {
	position:absolute;
	right:0px;
	top:0px;
	width:300px;
	height:300px;
}
/*-------------------------------*
 * kb Area
 *-------------------------------*/
.kb_box {
	position: absolute;
	left: 0;
	right: 0;
	top: 480px;
	display:flex;
	justify-content: center;
	margin: 0 auto;
	max-width:1242px;
}
.hand_box {
	width:300px;
	height:352px;
	margin-top:-126px;
	position:relative;
}