/* ---------------------------------------------------------------------- */
/* 汎用 */
/* ---------------------------------------------------------------------- */

/* ベース */
.category-content {
	border: 2px solid var(--bl);
	border-radius: var(--r-lg);
	box-shadow: var(--sh-s);
	margin: 40px 20px;
	padding: 20px;
}

/* 見出し */
h1 {
	background-image: url(../img/page/title-sp.jpg);
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	box-shadow: inset var(--sh-s);	
	font-size: 18px;
	line-height: var(--lh);
	padding: 23px 18px;
}

/* リスト */
.category-list {
	gap: 10px;
}

.category-list li a {
	border-bottom: 1px solid var(--bk);
	color: var(--bk);
	line-height: 150%;
	padding: 0 5px;
	padding-bottom: 10px;
}

.category-list li time {
	font-size: 12px;
}

.category-list li a p {
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	display: -webkit-box;
	font-size: 14px;
	transition: var(--tr);
	overflow: hidden;
}

.category-list li a:hover p {
	color: var(--rd);
	transition: var(--tr);
}

/* ページャー */
.pager ul {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	padding-top: 10px;
}

.pager li {
	font-size: 18px;
	font-weight: 500;
	line-height: 1;
}

.pager a,
.pager span.page-numbers {
	align-items: center;
	background-color: var(--wh);
	border: 2px solid var(--bl);
	border-radius: 50%;
	color: var(--bl);
	display: flex;
	height: 45px;
	justify-content: center;
	width: 45px;
}

.pager span.current {
	background-color: var(--bl);
	color: var(--wh);
}

.pager span.dots {
	background-color: transparent;
	border: none;
}

.pager .prev::before {
	content: "<";
}

.pager .next::before {
	content: ">";
}

@container (min-width: 769px) {

	/* ベース */
	.category { 
		padding-bottom:70px;
	}
	.category-content {
		padding:40px;
		margin: 70px auto 0 auto;
		max-width: var(--content-w);
	}
	.category-content { 
		margin-bottom:70px;
	}

	/* 見出し */
	h1 {
		align-items: center;
		background-image: url(../img/page/title-pc.webp);
		display: flex;
		font-size: 40px;
		height: 450px;
		padding: 0 7.5vw;
		width: 100%;
	}

	/* リスト */
	.category-list {
		gap: 40px;
		padding-bottom: 40px;
	}

	.category-list li a {
		gap: 24px;
	}

	.category-list.topics-list li:first-child a {
		padding-top: 0;
	}

	.category-list.topics-list li a {
		padding:40px 10px;
	}

	.category-list li time {
		font-size: 18px;
	}

	.category-tag {
		font-size: 16px;
		padding: 5px 20px;
		width: 160px;
	}

	.category-list li a p {
		font-size: 18px;
		line-height: 1.61;
	}

	/* ページャー */
	.pager ul {
		gap: 20px;
		padding-top: 0;
	}

	.pager li {
		font-size: 18px;
	}

	.pager a,
	.pager span.page-numbers {
		height: 60px;
		width: 60px;
	}

}