@charset "UTF-8";

:root {
	--colorBk: #000;
	--colorWh: #fff;
	--colorNv: #343399;
}

#projects {
	background: url(../images/common/common_bg_02.jpg) no-repeat right top/100vw auto;
	padding: 110px 0 120px;
	#tab {
		display: flex;
		justify-content: center;
		li {
			width: 9em;
			text-align: center;
			margin: 0 .5em;
			a, span {
				border: solid 1px var(--colorNv);
				border-radius: 50vh;
				padding: .25em;
				display: block;
			}
			a {
				color: var(--colorNv);
				text-decoration: none;				
				background: #fff;
			}
			span {
				color: var(--colorWh);
				background: var(--colorNv);
			}
		}
	}
	#plist {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		&::after {
			display: block;
			content:"";
			width: calc(calc(100% - 70px) / 3);
		}
		.item {
			width: calc(calc(100% - 70px) / 3);
			background: #f5f5f5;
			border-radius: 20px;
			margin-bottom: 35px;
			padding: 30px;
			display: flex;
			flex-direction: column;
			.fig {
				margin-bottom: 20px;
				img {
					width: 100%;
					aspect-ratio: 420 / 235;
					object-fit: cover;
				}
			}
			.cat {
				margin-bottom: 15px;
				span {
					color: var(--colorNv);
					width: 9em;
					text-align: center;
					background: #fff;
					border-radius: 50vh;
					padding: .2em 0;
					display: inline-block;
				}
			}
			h3 {
				line-height: 1.6;
				margin-bottom: 10px;
			}
			.text {
				color: #636363;
				margin-bottom: 15px;
			}
			.loc {
				border-top: solid 1px #d7d7d7;
				margin-top: auto;
				padding-top: 15px;
			}
			.loc, .period {
				padding-left: 30px;
				position: relative;
				&::before {
					content: "";
					width: 24px;
					aspect-ratio: 1 / 1;
					background-repeat: no-repeat;
					background-size: cover;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
			.loc::before {
				top: 15px;
				background-image: url(../images/projects/s_loc.png);
			}
			.period::before {
				background-image: url(../images/projects/s_period.png);
			}
		}
	}
}
#highlight {
	min-width: 1280px;
	background: #ebebeb;
	padding: 110px 0 120px;
	.bl1 {
		display: flex;
		justify-content: space-between;
		flex-direction: row-reverse;
		.fig {
			width: 51%;
			img {
				width: 100%;
			}
		}
		.text {
			width: 45%;
			.column {
				background: #fff;
				border-radius: 15px;
				margin-top: 15px;
				padding: 30px 45px;
				h4 {
					color: var(--colorNv);
					padding-left: 40px;
					position: relative;
					&::before {
						content: "";
						width: 27px;
						aspect-ratio: 54 / 84;
						background-image: url(../images/projects/s_highlight.png);
						background-repeat: no-repeat;
						background-size: cover;
						position: absolute;
						top: 0;
						left: 0;
					}
				}
				p {
					color: #707070;
				}
			}
		}
	}
}


@media screen and (max-width:799px) {

	#projects {
		padding: 13vw 0;
		#tab {
			justify-content: flex-start;
			flex-wrap: wrap;
			li {
				margin: 0 .5em 1em;
			}
		}
		#plist {
			display: block;
			&::after {
				width: 100%;
			}
			.item {
				width: 100%;
				margin-bottom: 5vw;
				padding: 5vw;
				.fig {
					margin-bottom: 5vw;
				}
				.cat {
					margin-bottom: 4vw;
				}
				h3 {
					line-height: 1.5;
					margin-bottom: 3vw;
				}
				.text {
					color: #636363;
				}
				.loc, .period {
					padding-left: 6vw;
					margin-bottom: 2vw;
					position: relative;
					&::before {
						width: 4.5vw;
					}
				}
			}
		}
	}
	#highlight {
		min-width: initial;
		padding: 13vw 0;
		.bl1 {
			display: block;
			.fig {
				width: 100%;
				margin-bottom: 5vw;
			}
			.text {
				width: 100%;
				.column {
					margin-top: 5vw;
					padding: 5vw;
					h4 {
						padding-left: 6vw;
						position: relative;
						&::before {
							width: 4vw;
						}
					}
				}
			}
		}
	}
}