@charset "utf-8";
/* CSS Document */

/*-----------------------------------------------
#005ABE
-----------------------------------------------*/

/* works */
#works {
padding: 60px 4%;
}
#works .inner {
max-width: 1000px;
margin: auto;
}
#works .inner > div:not(:first-child) {
margin-top: 100px;
}
#works .photo {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
}
#works .photo li {
width: 22%;
aspect-ratio: 1 / 1;
margin: 4% 0 0 4%;
}
#works .photo li:nth-child(4n + 1) {
margin-left: 0;
}
#works .photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media screen and (max-width: 799px) {
	#works {
	padding: 8% 4%;
	}
	#works .inner > div:not(:first-child) {
	margin-top: 16%;
	}
	#works .photo {
	justify-content: space-between;
	margin-top: 4%;
	}
	#works .photo li {
	width: 48%;
	margin-left: 0;
	font-size: 1em;
	}
}

/* commendation */
#commendation {
padding: 60px 4%;
background: #005AC0;
}
#commendation .inner {
max-width: 1000px;
margin: auto;
}
#commendation .list {
max-width: 800px;
margin: auto;
margin-top: 4%;
}
#commendation dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 1em 0;
border-bottom: 1px solid #FFF;
}
#commendation dt {
width: calc(100% - 13em);
font-weight: 400;
text-align: justify;
color: #FFF;
}
#commendation dd.date {
width: 6em;
font-size: 1.1em;
font-weight: 400;
color: #FFF;
}
#commendation dd.photo {
width: 4em;
height: 4em;
}
@media screen and (max-width: 799px) {
	#commendation {
	padding: 8% 4%;
	}
#commendation dl {
justify-content: flex-start;
padding: 4% 0;
}
#commendation dt {
width: 76%;
margin-left: 4%;
}
#commendation dd.date {
width: 100%;
font-size: 1em;
}
#commendation dd.photo {
width: 20%;
}
}