/*キャラクター紹介*/
.subtitle {
	text-align: center;
	margin: 80px auto 30px;
}

.chart img {
	width: 900px;
	max-width: 100%;
	height: auto;
	margin: auto;
	display: block;
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.character {
	display: grid;

	grid-template-columns: 42% 1fr;

	grid-template-rows: auto 1fr;

	grid-template-areas:
		"standing faces"
		"standing profile";

	gap: 30px;

	padding: 30px;

	margin: 40px auto;

	border-radius: 20px;

	max-width: 900px;

	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.character:nth-of-type(1) {
	margin-top: 0;
}



.standing {
	grid-area: standing;
}

.standing img {
	width: 100%;
	display: block;
	border-radius: 12px;

}

.faces {
	grid-area: faces;
}

.faces img {
	width: 100%;
	display: block;
	border-radius: 12px;
}

.profile {
	grid-area: profile;
	line-height: 1.5;
	/*
文字縁取り
	-webkit-text-stroke: 1px whitesmoke;
paint-order: stroke;
*/
}

.age {
	font-size: 16px;
	font-weight: normal;
	margin-left: 5px;
}

.profile-list {
	display: grid;
	grid-template-columns: 5em 1fr;
	font-size: 16px;
	margin: 12px 0;
}

.profile-list dt {
	font-weight: bold;
	width: 3.5em;
	text-align: justify;
	text-align-last: justify;
}

.profile-list dd {
	margin-left: 0.1em;
}

.Kusanagi {
	background: rgb(61, 171, 108);
}

.Miyadera {
	background: rgb(52, 95, 186);
}

.Amamiya {
	background: rgb(50, 168, 211);
}

.Fujiwara {
	background: rgb(180, 163, 193);
}

.Kakizaki {
	background: rgb(229, 136, 16);
}

.Tarumi {
	background: rgb(86, 63, 123);
}

.Suzuri {
	background: rgb(100, 100, 120);
}

.Ouse {
	background: rgb(71, 65, 190);
}

.Hitomi {
	background: rgb(151, 56, 79);
}

.Isurugi {
	background: rgb(214, 200, 15);
}

.Minamori {
	background: rgb(59, 105, 61);
}

.Isaribi {
	background: rgb(122, 40, 47);
}

.Shiduru {
	background: rgb(90, 212, 164);
}

.Yuika {
	background: rgb(235, 127, 215);
}

.Soutarou {
	background: rgb(55, 65, 96);
}

.Kotokawa {
	background: rgb(210, 180, 144);
}

/*キャラクター紹介　終わり*/

@media screen and (max-width:768px) {
	.chara-margin {
		margin: 0 10px;
	}

	.character {
		grid-template-columns: 1fr;
		grid-template-areas:
			"standing"
			"faces"
			"profile";
	}

	.standing {
		text-align: center;
	}

	.standing img {
		width: 60%;
		margin: 0 auto;
	}


	.age,
	.profile-list .profile-list p {
		font-size: 14px;
	}

}