@charset "UTF-8";
#contents {
	background-color: #f8f8f8;
}

.edit-area.article {
	padding-top: 12rem;
	padding-bottom: 12rem;
	@media screen and (max-width: 767px) {
		padding-top: 6rem;
		padding-bottom: 6rem;
	}
	.archive-category {
		display: flex;
		gap: 1.4rem;
		margin-bottom: 9rem;
		@media screen and (max-width: 767px) {
			gap: 1.2rem;
			margin-bottom: 6rem;
		}
		& li {
			& a {
				padding: 0.8rem 4rem;
				box-sizing: border-box;
				background-color: #e9e9e9;
				font-family: var(--noto);
				font-style: normal;
				font-weight: 400;
				font-size: 1.6rem;
				line-height: 190%;
				letter-spacing: 0.02em;
				color: #5e5e5e;
				@media screen and (max-width: 767px) {
					font-size: 1.4rem;
					padding: 0.8rem 3rem;
				}
			}
		}
		& li.active {
			& a {
				background-color: #e50012;
				color: #ffffff;
			}
		}
	}
}

.common-list.article {
	width: 100%;
	margin-bottom: 12.9rem;
	border-top: #bababa 1px solid;
	@media screen and (max-width: 767px) {
		margin-bottom: 6rem;
	}
	& li {
		& a {
			width: 100%;
			padding-top: 4rem;
			padding-bottom: 4rem;
			border-bottom: #bababa 1px solid;
			display: flex;
			transition: all 0.3s ease-in;
			@media screen and (max-width: 767px) {
				padding-top: 2rem;
				padding-bottom: 2rem;
				flex-direction: column;
				gap: 1rem;
			}
			.time-cats {
				display: flex;
				align-items: center;
				gap: 2rem;
				margin-right: 8rem;
				@media screen and (max-width: 767px) {
					gap: 1.2rem;
					margin-right: 0;
				}
				.list-date {
					font-family: var(--jost);
					font-style: normal;
					font-weight: 500;
					font-size: 1.6rem;
					line-height: 1;
					letter-spacing: 0.01em;
					color: #000000;
					order: 0;
					flex-grow: 0;
					@media screen and (max-width: 767px) {
						font-size: 1.4rem;
					}
				}
				.list-category {
					font-family: var(--noto);
					font-style: normal;
					font-weight: 500;
					font-size: 1.4rem;
					line-height: 1;
					letter-spacing: 0.05em;
					color: #ffffff;
					background-color: #929292;
					padding: 1rem 1.8rem;
					box-sizing: border-box;
					border-radius: 0.2rem;
					@media screen and (max-width: 767px) {
						padding: 0.6rem 1.2rem;
					}
				}
			}
			.list-title {
				width: 100%;
				flex: 1;
				overflow: hidden;
				/* white-space: nowrap; */
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				font-family: var(--noto);
				font-style: normal;
				font-weight: 500;
				font-size: 1.8rem;
				line-height: 200%;
				letter-spacing: 0.08em;
				color: #000000;
				@media screen and (max-width: 767px) {
					font-size: 1.6rem;
					-webkit-line-clamp: 2;
					white-space: wrap;
					line-height: 1.65;
				}
			}
		}
		& a:hover {
			border-bottom: #e50012 1px solid;
			transition: all 0.3s ease-in;
			.time-cats {
				.list-date {
					color: #e50012;
					transition: all 0.3s ease-in;
				}
				.list-category {
					background-color: #e50012;
					transition: all 0.3s ease-in;
				}
			}
			.list-title {
				color: #e50012;
				transition: all 0.3s ease-in;
			}
		}
	}
}