@charset "UTF-8";

.edit-area.article {
	@media screen and (max-width: 767px) {
	}
}

#contents {
	padding-bottom: 12rem;
	@media screen and (max-width: 767px) {
		padding-bottom: 6rem;
	}
	.cat-title {
		font-style: normal;
		font-weight: 700;
		font-size: 3.2rem;
		line-height: 1;
		text-align: left;
		letter-spacing: 0.1em;
		color: #000;
		margin-bottom: 3rem;
		@media screen and (max-width: 767px) {
			font-size: 2.2rem;
			margin-bottom: 2rem;
		}
		& span {
			color: #1b8b4f;
		}
	}
	.works-category {
		width: 100%;
		margin-bottom: 14rem;
		display: flex;
		flex-wrap: wrap;
		gap: 1.8rem;
		@media screen and (max-width: 767px) {
			margin-bottom: 4rem;
			gap: 1rem;
		}
		& li {
			& a {
				font-style: normal;
				font-weight: 700;
				font-size: 1.8rem;
				line-height: 1;
				text-align: center;
				letter-spacing: 0.06em;
				color: #1b8b4f;
				padding: 1.35rem 3.8rem;
				border-radius: 2.95rem;
				border: #1b8b4f 2px solid;

			}
			
			& a:hover {
				color: #FFF;
				background-color: #1b8b4f;
			}
		}
		li.active {
			a {
				color: #FFF;
				background-color: #1b8b4f;
			}
		}
	}

	ul.works {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 4.8rem;
		& li {
			width: 36.7rem;
			.thumbnail {
				width: 100%;
				margin-bottom: 3rem;
				@media screen and (max-width: 767px) {
					margin-bottom: 1rem;
				}
				& img {
					width: 100%;
					vertical-align: top;
				}
			}
			.list-title {
				font-style: normal;
				font-weight: 500;
				font-size: 1.8rem;
				line-height: 1;
				letter-spacing: 0.1em;
				color: #1b8b4f;
				margin-bottom: 1rem;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
				}
			}
			.project {
				font-style: normal;
				font-weight: 700;
				font-size: 2rem;
				line-height: 1;
				letter-spacing: 0.1em;
				color: #000000;
				@media screen and (max-width: 767px) {
					font-size: 1.6rem;
				}
			}
		}
	}
}