@charset "UTF-8";

/*--------------------------------------------------------------------
works.html
works.css
--------------------------------------------------------------------*/


/*------------works---------------------------------------------------------------*/
article section:not(:first-of-type) { margin-top: 80px; }
article section:nth-of-type(2) { margin-top: 40px; }
#works section .flexBox {
	flex-direction: row;
	margin-top:  var(--parag-bet);
}
#works h5 {
	font-size: 1.5em;
	color: var(--co-brown01);
}
#works .topTxt {
	margin-bottom: 0.5em;
	text-align: center;
	line-height: 1.2;
	font-size: 1.78em;
	font-weight: bold;
	color: var(--co-orange);
}
#works .flex660 p + p {
	margin-top: 0.25em;
	text-align: center;
}
#works .flex400 p { margin-bottom: var(--parag-bet); }
#works .flex400 span { display: block; }
#works .flex400 .Number dl { display: flex; }
#works .flex400 .Number dl dt::after { content: "："; }
#works .flex400 .Number dl dd { flex: 1; }
#works .flex400 .Number + dl { margin-top: var(--parag-bet); }
#works .flex400 .Number + dl dt {
	font-weight: bold;
	color: var(--co-brown01);
}
#works .flex400 .Number + dl dt::before { content: "●"; }
#works .flex400 .Number + dl dd ul li {
	padding-left: 1.5em;
	text-indent: -1em;
}
#works .flex400 .Number + dl dd ul li::before {
	padding-right: 0.5em;
	content: "・";
}
#works .flex400 .Number + dl dd ul li:not(:first-of-type) { margin-top: 0.5em; }

#works .photoList {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 50px;
	margin-top: 30px;
}
#works .photoList .photo { width: calc((100% - 50px) / 2); }
#works .photoList .photo p + p {
	margin-top: 0.25em;
	text-align: center;
}

#works .infoList {
	display: flex;
	flex-wrap: wrap;
	gap: 30px 25px;
	margin-top: 30px;
}
#works .infoList .info { width: calc((100% - 25px) / 2); }
#works .infoList .info dl {
	display: flex;
	flex-wrap: wrap;
}
#works .infoList .info dl:not(:first-of-type) { margin-top: 0.25em; }
#works .infoList .info dl dt {
	width: fit-content;
	min-width: 13em;
	padding-right: 1em;
}
#works .infoList .info span { display: inline-block; }
#works .infoList .info span:not(:last-of-type) { margin-right: 0.5em; }

#works .features { margin-top: 30px; }
#works .features dl:not(:first-of-type) { margin-top: 15px; }
#works .features dl dt {
	margin-bottom: 0.35em;
	padding: 0 0.5em 0.25em;
	border-bottom: 1px solid var(--co-gray30);
	color: var(--co-brown02);
}
#works .features dl dd {
	padding: 0 0.5em;
}

@media (max-width: 680px) {
	#works section .flexBox { flex-direction: column; }
	#works .infoList { flex-direction: column; }
	#works .infoList .info { width: 100%; }
	#works .infoList .info dl:not(:first-of-type) { margin-top: 0.5em; }
}
@media (max-width: 580px) {
	#works .photoList { flex-direction: column; }
	#works .photoList .photo { width: 100%; }
}