@charset "UTF-8";

/*--------------------------------------------------------------------
about.html
about.css
--------------------------------------------------------------------*/

article section:not(:first-of-type) { margin-top: 85px; }

/*------------about---------------------------------------------------------------*/
#about #copy {
	margin-bottom: 35px;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	color: var(--co-pink);
}
#about #copy span { display: inline-block; }
#about .aboBox {
	display: flex;
	gap: 20px;
}
#about .aboBox:not(:first-of-type) { margin-top: 65px; }
#about .aboBox.aboPL { flex-flow: row-reverse; }
#about .aboBox.aboPR { flex-flow: row; }
#about .aboBox .aboTxt { max-width: 350px; }
#about .aboBox .aboPho { max-width: 730px; }
#about .aboBox h4 {
	margin-bottom: 40px;
	padding-bottom: 0;
	border: 0 none;
	font-size: 1.6em;
	color: var(--co-navy);
}
#about .aboBox h4 span {
	display: block;
	font-size: 0.625em;
	font-weight: bold;
	color: var(--co-pink);
}
#about .partner {
	margin-top: 25px;
	padding: 1em;
	background-color: var(--co-gray20);
}
#about .partner dt {
	margin-bottom: 0.5em;
	font-size: 1.125em;
	color: var(--co-pink);
}
#about .partner ul {
	display: flex;
	flex-wrap: wrap;
}
#about .partner ul li:not(:last-of-type)::after {
	margin: 0 0.5em;
	content: "、";
}

@media (max-width: 680px) {
	article section:not(:first-of-type) { margin-top: 65px; }
	#about .aboBox.aboPL,
	#about .aboBox.aboPR { flex-flow: column; }
	#about .aboBox .aboTxt,
	#about .aboBox .aboPho { max-width: inherit; }
	#about .aboBox h4 { margin-bottom: 20px; }
}