/* CSS Document */

#pagePath{
	background: #41583F;
	color: #fff;
}

#main{
	margin-bottom: clamp(64px, calc(128 / 1200 * 100vw), 128px);
}

#topics{
	margin-bottom: clamp(40px, calc(64 / 1200 * 100vw), 64px);
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: clamp(24px, calc(32 / 1200 * 100vw), 32px) 0 clamp(56px, calc(64 / 1200 * 100vw), 64px) 0;
		background: #41583F;
		color: #fff;
		font: 600 clamp(45px, calc(65 / 768 * 100vw), 65px) 'eb-garamond', var(--font-min);
		letter-spacing: 0.045em;
		text-align: center;
	}
	& figure{
		aspect-ratio: 16 / 9;
		width: min(var(--wrap-fit), 1000px);
		margin-inline: auto;
		margin-top: clamp(40px, calc(72 / 1200 * 100vw), 72px);
		background: #ccc;
		color: transparent;
	}
	#topicsTab{
		margin-top: clamp(40px, calc(72 / 1200 * 100vw), 72px);
	}
	#topicsList{
		margin-top: clamp(64px, calc(96 / 1200 * 100vw), 96px);
	}
}

#topicsTab{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		grid-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px) 24px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		text-align: center;
		min-width: min(100%, 240px);
		min-height: clamp(56px, calc(80 / 768 * 100vw), 80px);
		padding: 4px 24px;
		border: 1px solid #41583F;
		border-radius: clamp(28px, calc(40 / 768 * 100vw), 40px);
		color: inherit;
		font-weight: 600;
		font-size: clamp(21px, calc(23 / 768 * 100vw), 23px);
		text-decoration: none;
		.select &{
			background: #41583F;
			color: #fff;
		}
	}
}

#topicsList{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& dl{
		position: relative;
		display: grid;
		grid-gap: 8px 16px;
		padding: clamp(16px, calc(24 / 1200 * 100vw), 24px) 0;
		font-weight: 600;
		font-size: 18px;
		letter-spacing: 0.06em;
		border-bottom: 1px solid #707070;
		&:has(a){
			grid-template-columns: 1fr auto;
			&:after{
				content: "";
				grid-column: 2;
				grid-row: 1 / 3;
				align-self: center;
				aspect-ratio: 1;
				width: 20px;
				background: var(--color-theme);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; "><polyline points="0 10 19.5 10 12 5" /></svg>') no-repeat center / contain;
			}
		}
	}
	& dt{
		order: 1;
	}
	& dd{
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		grid-gap: 8px 24px;
		&:has(a){
			display: contents;
		}
		& time{
			color: #707070;
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: 8px;
		}
		& li{
			display: flex;
			align-items: center;
			min-width: 80px;
			min-height: 24px;
			padding: 0px 16px;
			border: 1px solid #41583F;
			border-radius: 12px;
			color: inherit;
			font-size: 12px;
			text-decoration: none;
			text-align: center;
			& span{
				display: flex;
				align-items: center;
				padding: 0px 16px;
				background: #E4EDE4;
				border-radius: 12px;
				transform: translateX(16px);
			}
			&.tagCheck{
				background: #41583F;
				color: #fff;
			}
			&.tagNew{
				background: #8D968D;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
}

#pagenation{
	margin-top: clamp(56px, calc(96 / 1200 * 100vw), 96px);
}