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

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

/* title */
#title {
height: 0;
margin: 30px 4% 0 0;
padding: 20% 0 25% 0;
background-image: url("../img/project/image.jpg");
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 0 30px 30px 0;
}
#title .text {
max-width: 25vw;
margin: auto;
}
#title h1 {
font-family: "Shippori Mincho B1", serif;
font-size: 4vw;
font-weight: 400;
line-height: 1.25;
text-align: center;
letter-spacing: 0.1em;
color: #FFF;
}
#title .en {
margin-top: 0.5em;
padding-top: 0.5em;
font-family: "Shippori Mincho B1", serif;
font-size: 2vw;
text-align: center;
color: #FFF;
border-top: 1px solid #FFF;
}
@media screen and (max-width: 1199px) {
	#title {
	margin: 0;
	border-radius: 0;
	}
}
@media screen and (max-width: 799px) {
	#title {
	padding: 20% 0 27.5% 0;
	}
	#title .text {
	max-width: 35vw;
	}
	#title h1 {
	font-size: 6vw;
	}
	#title .en {
	font-size: 1.5vw;
	}
}

/* logo */
main .logo {
background-image: url("../img/common/logomark_harf_right.png");
background-position: left top 40px;
background-repeat: no-repeat;
background-size: 55%;
}
@media screen and (max-width: 799px) {
}

/* lead */
#lead {
padding: 60px 0;
}
#lead .inner {
}
#lead .grid {
display: flex;
justify-content: flex-start;
align-items: flex-start;
margin-top: 4%;
}
#lead .grid .photo {
width: 48%;
border-radius: 0 20px 20px 0;
}
#lead .grid .text {
width: 44%;
margin: 2% 0 0 4%;
}
#lead .text h3 {
font-family: "Shippori Mincho B1", serif;
font-size: 2em;
color: #005ABE;
}
#lead .text p {
margin-top: 1em;
line-height: 2;
text-align: justify;
}
@media screen and (max-width: 799px) {
	#lead {
	padding: 8% 4%;
	}
	#lead .grid {
	display: block;
	}
	#lead .grid .photo {
	width: 100%;
	margin-top: 4%;
	border-radius: 10px;
	}
	#lead .grid .text {
	width: 100%;
	margin: 4% 0 0 0;
	text-align: justify;
	}
	#lead .text h3 {
	font-size: 1.5em;
	}
	#lead .text p {
	margin-top: 2%;
	line-height: 1.75;
	}
}

/* profile */
#works {
padding: 60px 4%;
}
#works .inner {
max-width: 1000px;
margin: auto;
}
#works .text {
margin-top: 2em;
line-height: 2.5;
text-align: center;
}
#works .photo {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: flex-start;
margin-top: 1.5em;
}
#works .photo li {
width: 22%;
aspect-ratio: 1 / 1;
margin: 4% 0 0 4%;
padding-bottom: 0.25em;
font-size: 1.375em;
text-align: center;
border-bottom: 2px solid #005ABE;
}
#works .photo li:nth-child(4n + 1) {
margin-left: 0;
}
#works .photo img {
width: 100%;
height: 100%;
margin-bottom: 0.25em;
object-fit: cover;
transition: 0.2s;
}
#works .photo a:hover img {
opacity: 0.8;
}
@media screen and (max-width: 799px) {
	#works {
	padding: 8% 4%;
	}
	#works .text {
	margin-top: 4%;
	line-height: 1.75;
	text-align: justify;
	}
	#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 .list dl {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
padding: 1em 0;
border-bottom: 1px solid #FFF;
}
#commendation .list dt {
width: calc(100% - 13em);
font-weight: 400;
text-align: justify;
color: #FFF;
}
#commendation .list dd.date {
width: 6em;
font-family: "Noto Sans JP", sans-serif;
font-weight: 400;
color: #FFF;
}
#commendation .list dd.photo {
width: 4em;
aspect-ratio: 1 / 1;
}
#commendation .list dd.photo img {
width: 100%;
height: 100%;
object-fit: cover;
}
#commendation .list a:hover dt {
text-decoration: underline;
}
@media screen and (max-width: 799px) {
	#commendation {
	padding: 8% 4%;
	}
	#commendation .list dl {
	justify-content: flex-start;
	padding: 4% 0;
	}
	#commendation .list dt {
	width: 76%;
	margin-left: 4%;
	}
	#commendation .list dd.date {
	width: 100%;
	font-size: 1em;
	}
	#commendation .list dd.photo {
	width: 20%;
	}
}