/* CSS Document */

.char_section{
	margin-left:1rem;
	margin-right:1rem;
	margin-top:0;
	margin-bottom:1rem;
	border-radius:1rem;
	padding:1rem;
}

.char_container{
	margin-left:0;
	margin-right:0;
	margin-top:0;
	margin-bottom:1rem;
	width:100%;
	display:inline-grid;
	grid-template-columns: 1fr 1fr 1fr;
}

.char_container_single{
	margin-left:0;
	margin-right:0;
	margin-top:0;
	margin-bottom:1rem;
	width:100%;
	display:inline-grid;
	grid-template-columns: 1fr 1fr;
}

.char_section h1{
	background-color:RGB(200,65,49);
	color:white;
	border-radius: 1rem;
	font-size: 2rem;
	margin-bottom:0;
	display:inline;
	padding-left:1rem;
	padding-right:1rem;
}

.char_name{
	margin-bottom:1rem;
	width:100%;
}

.char_name h2{
	display:inline;
	background-color:RGB(200,185,180);
	margin-top:0;
	padding:0.3rem;
	border-radius:1rem;
}

.char_right{
	width:50%;
	float:left;
	margin-left:1rem;
}

.char_pic_kiryu{
	float:left;
	width:40%;
	max-width:512px;
	margin-left:auto;
	margin-right:auto;
}

.char_pic_kiryu img{
	width:100%;
	height:100%;
}

.char_pic{
	float:left;
	width:40%;
	max-width:256px;
	margin-left:auto;
	margin-right:auto;
}

.char_pic img{
	width:100%;
	height:100%;
}


@media (max-width:1000px){
	
	.char_container_single{
		grid-template-columns: 1fr;
	}
	
	.char_container{
		grid-template-columns: 1fr 1fr;
	}

	.char_section{
		margin-bottom:1rem;
	}
	
}


@media (max-width:700px){
	.char_container{
		grid-template-columns: 1fr;
	}

	.char_pic{
		width:25%;
		margin-left:2rem;
		margin-right:2rem;
	}
	
	.char_right{
		width:50%;
	}
}