main em {
	display: block;
	margin: 1em 0;
	text-align: center;
	font-style: normal;
	font-size: 125%;
}

main .red {
	color: #D00000;
}

main .blue {
	color: #14A9F1;
}

main .gray {
	color: #666;
}

main a {
	color: #2098a8;
}

main dt {
	font-weight: bold;
	border-bottom: 4px solid #BCBCBC;
	margin-bottom: 0.5rem;
}

main dd {
	margin-left: 1.5rem;
}

main dd,
main ul,
main p {
	margin-bottom: 1rem;
}
main dd:last-child,
main ul:last-child,
main p:last-child {
	margin-bottom: 0;
}

main.character .description {
	width: 18em;
	max-width: 100%;
	margin: auto;
}

main.character .description li {
	margin-left: 1rem;
}

main.flow .container {
	width: 90%;
	max-width: 720px;
	margin: 0 auto;
}

main.flow .description {
	width: 38em;
	max-width: 100%;
	margin: 0 auto 1em auto;
}

main.flow dl {
	margin-bottom: 1.5em;
}

main.flow dt {
	position: relative;
	height: 3.5em;
	padding: 1em;
	background: linear-gradient(to bottom, #4f9afb 0%, #3f7ac7 65%, #315d9a 100%);
	border-radius: 1em;
	color: #fff;
	border: 0;
	line-height: 1.5em;
	text-align: center;
}

main.flow dt:after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	width: 5em;
	margin: auto;
	background: url(../images/recruit/arrow.png) no-repeat top center;
	background-size: contain;
	aspect-ratio: 60 / 80;
	z-index: -1;
}

main.flow dt:last-of-type:after {
	display: none;
}

main section.job .container {
	max-width: 68em;
}

main section.job .box {
	margin-bottom: 1em;
}

main section.job .description {
	text-align: center;
}

main section.job table {
	width: 100%;
	max-width: 48em;
	margin: 0 auto 2em auto;
	border: 1px solid #BCBCBC;
	border-collapse: collapse;
}

main section.job th,
main section.job td {
	padding: 0.25em;
	border: 1px solid #BCBCBC;
	border-collapse: collapse;
	vertical-align: top;
}

main section.job th.line {
	padding-left: 0.5em;
	background: rgba(255, 189, 243, 0.25);
	text-align: left;
}

main section.job hr {
	margin: 0.25em 0;
	border-color: #bcbcbc;
	border-width: 1px 0 0 0;
}

main.qa dt:before {
	content: "Q.";
}

main.qa dd {
	position: relative;
	margin: 0 0 2em 1.5em;
}
main.qa dd:last-child {
	margin-bottom: 0;
}

main.qa dd:before {
	content: "A.";
	display: block;
	position: absolute;
	top: 0;
	left: -1.5em;
	width: 1.5em;
	height: 1.5em;
	line-height: 1.5em;
}

@media (min-width: 751px) {
	main.flow dl {
		display: grid;
		grid-template-columns: 13.5em 1fr;
		gap: 1em;
	}

	main.flow dt {
		margin-bottom: 1.5em;
	}

	main.flow dd {
		margin-left: 0;
	}

	main section.job .head {
		width: 6.5em;
	}

	main section.job .col {
		width: 21.5em;
	}
}

@media (max-width: 750px) {
	main.flow dt {
		width: 13.5em;
	}

	main.flow dt:after {
		top: 50%;
		right: auto;
	}

	main.flow dd {
		min-height: 3em;
		margin-left: 5.5em;
	}

	main section.job .description {
		text-align: left;
	}

	main section.job table {
		font-size: 90%;
	}

	main section.job td:last-child {
		border-bottom: solid 1px #ccc;
		width: 100%;
	}

	main section.job table th,
	main section.job table td {
		display: block;
		width: 100%;
	}
}