#archive_workcase {
	max-width: var(--content-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1em;
	padding-right: 1em;
	margin-top: 3em;
	.section_title {
		border-top: 5px solid var(--theme-color);
		background-color: #E7E7E7;
		margin-bottom: 10px;
		position: relative;
		display: flex;
		align-items: flex-start;
		gap: 2em;
		&:after {
			content: '';
			position: absolute;
			top: 100%;
			left: 0;
			display: block;
			width: 100%;
			border-bottom: 10px solid rgba(215, 218, 238, 0.2);
		}
		.en_title {
			background-color: var(--theme-color);
			padding: 0.5em 2em;
			color: #fff;
			font-size: calc(14 / var(--root-font-size) * 1rem);
			font-family: 'Montserrat', sans-serif;
			margin: 0;
			position: relative;
			line-height: 1em;
			&:after {
				content: '';
				position: absolute;
				border-right: 1em solid transparent;
				border-top: 2em solid var(--theme-color);
				left: 100%;
				top: 0;
			}
		}
		.jp_title {
			margin: 0;
			font-size: calc(35 / var(--root-font-size) * 1rem);
			padding: 0.2em 0;
		}
	}
	.categories {
		display: flex;
		gap: 2em;
		list-style-type: none;
		padding-left: 0;
		margin-top: 2em;
		li {
			flex: 1;
		}
		a {
			color: #fff;
			padding: 0.5em;
			background-color: var(--theme-color);
			text-decoration: none;
			border-radius: 9999px;
			text-align: center;
			position: relative;
			cursor: pointer;
			display: block;
			text-decoration: none;
			&:after {
				position: absolute;
				content: '▶';
				right: 1em;
				top: 50%;
				transform: translateY(-50%);
				font-size: calc(14 / var(--root-font-size) * 1rem);
			}
			&.current, &:hover {
				background-color: #5d5d5d;
			}
		}
	}
	.posts {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 2em;
		margin-top: 2em;
		.thumbnail {
			margin-top: 0;
			img {
				width: 100%;
				aspect-ratio: 352 / 249;
				object-fit: cover;
				object-position: center;
			}
		}
		.wrap {
			display: flex;
			gap: 1em;
			align-items: center;
			p {
				margin: 0;
			}
		}
		.title {
			line-height: 1.8em;
			font-size: calc(18 / var(--root-font-size) * 1rem);
			a {
				text-decoration: none;
			}
		}
		.excerpt {
			line-height: 1.8em;
		}
	}
	.category {
		font-size: calc(14 / var(--root-font-size) * 1rem);
		padding: 0.5em 1em;
		color: #fff;
	}
	.nav-links {
		margin-top: 3em;
		display: flex;
		gap: 0.5em;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		.page-numbers:not(.dots) {
			font-size: calc(20 / var(--root-font-size) * 1rem);
			padding: 0.5em;
			color: #fff;
			text-decoration: none;
			background-color: #d8d8d8;
			&.current, &:hover {
				background-color: var(--theme-color);
			}
		}
	}
	.single-wrap {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.content {
		line-height: 1.8em;
	}
	.return {
		margin-top: 2em;
		text-align: right;
	}
}