@charset "UTF-8";

.battle-section-1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 95%;
	border: none;
	/*	background-color: #a29922;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;
}

.battle-section-1-1 {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 80%;
	border: none;
	/*	background-color: #aaa;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;
}

.battle-section-1-1-1 {
	display: flex;
	flex-direction: column;
	width: 40%;
	height: 15%;
	border: none;
	/*	background-color: #daa;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;

	border-radius: 5px 5px 0 0;
}

.battle-section-1-1-2 {
	display: flex;
	flex-direction: column;
	width: 40%;
	height: 60%;
	border: none;
	/*	background-color: #a1a;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;
}

.battle-section-1-1-2-1 {
	display: flex;
	flex-direction: column;
	width: 80%;
	height: 80%;
	border: none;
	background-color: #fff;
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;

	border: 2px solid #777;
	border-radius: 5px;
}

.battle-section-1-1-3 {
	display: flex;
	flex-direction: column;
	width: 40%;
	height: 15%;
	border: none;
	/*	background-color: #4bb;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;

	border-radius: 0 0 5px 5px;
}

.battle-section-1-2 {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 25%;
	border: none;
	/*	background-color: #55a;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;
}

.battle-section-1-2-1 {
	display: flex;
	/*	flex-direction: column;*/
	width: 100%;
	height: 50%;
	border: none;
	/*	background-color: #55a;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;
}

.battle-section-1-2-2 {
	display: flex;
	/*	flex-direction: column;*/
	width: 100%;
	height: 50%;
	border: none;
	/*	background-color: #55a;*/
	justify-content: center;
	/* 水平方向の中央揃え */
	align-items: center;
	/* 垂直方向の中央揃え */
	text-align: center;
	margin: 0 auto;
}


.error {
	color: red;
}


/* スマホ用のレイアウト（画面幅が1200px以下の場合） */
@media (max-width: 1200px) {


	.battle-section-1 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 95%;
		border: none;
/*			background-color: #a29922;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;
	}

	.battle-section-1-1 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 80%;
		border: none;
/*			background-color: #aaa;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;
	}

	.battle-section-1-1-1 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 15%;
		border: none;
/*			background-color: #daa;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;

		border-radius: 5px 5px 0 0;
	}

	.battle-section-1-1-2 {
		display: flex;
		flex-direction: column;
		width: 90%;
		height: 60%;
		border: none;
/*			background-color: #a1a;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;
	}

	.battle-section-1-1-2-1 {
		display: flex;
		flex-direction: column;
		width: 80%;
		height: 80%;
		border: none;
		background-color: #fff;
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;

		border: 2px solid #777;
		border-radius: 5px;
	}

	.battle-section-1-1-3 {
		display: flex;
		flex-direction: column;
		width: 85%;
		height: 15%;
		border: none;
/*			background-color: #4bb;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;

		border-radius: 0 0 5px 5px;
	}

	.battle-section-1-2 {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 25%;
		border: none;
/*			background-color: #55a;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;
	}

	.battle-section-1-2-1 {
		display: flex;
		/*	flex-direction: column;*/
		width: 65%;
		height: 50%;
		border: none;
/*			background-color: #55a;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;
	}

	.battle-section-1-2-2 {
		display: flex;
		/*	flex-direction: column;*/
		width: 65%;
		height: 50%;
		border: none;
/*			background-color: #55a;*/
		justify-content: center;
		/* 水平方向の中央揃え */
		align-items: center;
		/* 垂直方向の中央揃え */
		text-align: center;
		margin: 0 auto;
	}
}