/* CSS Document */

main {
	padding-bottom: 64px;
}

article {
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: 56px 0;
}

@media (min-width: 992px) {
	article {
		padding: 72px 0;
	}
}

article > * {
	grid-column: 2;
}

#topics h2 {
	grid-gap: 0 8px;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.08em;
	text-align: center;
}

#topics h2:before {
	content: attr(data-caption);
	grid-column: 1;
	grid-row: 1;
	display: grid;
	align-items: center;
	padding-bottom: 8px;
	height: 48px;
	background: #ffe15a;
	font-size: 12px;
	letter-spacing: 0.1em;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 225.43 69.42"><path d="M13.18,52.44C4.91,47.17-.46,37.74.03,27.1.7,12.48,12.6.64,27.22.03c6.84-.29,13.18,1.85,18.23,5.61,2.43,1.82,5.76,1.76,8.2-.05C58.37,2.08,64.23,0,70.58,0s12.21,2.08,16.94,5.59c2.46,1.83,5.8,1.83,8.26,0C100.51,2.08,106.37,0,112.71,0s12.21,2.08,16.94,5.59c2.46,1.83,5.8,1.83,8.26,0C142.64,2.08,148.51,0,154.85,0s12.21,2.08,16.94,5.59c2.44,1.81,5.76,1.86,8.2.05C185.03,1.87,191.37-.26,198.21.03c14.62.61,26.51,12.46,27.19,27.07.75,16.32-12.26,29.78-28.41,29.78-6.04,0-11.64-1.88-16.25-5.1-2.9-2.02-6.74-2.02-9.64,0-4.61,3.21-10.21,5.1-16.25,5.1s-11.64-1.88-16.25-5.1c-2.9-2.02-6.74-2.02-9.64,0-4.61,3.21-10.21,5.1-16.25,5.1s-11.64-1.88-16.25-5.1c-2.9-2.02-6.74-2.02-9.64,0-4.61,3.21-10.21,5.1-16.25,5.1s-11.64-1.88-16.25-5.1c-2.9-2.02-6.74-2.02-9.64,0-4.61,3.21-10.21,5.1-16.25,5.1-2.02,0-4-.21-5.9-.61C19.26,62.36,11.99,72.1,0,68.74c7.92-2.46,11.65-11.25,13.18-16.3Z"/></svg>') center top no-repeat;
	-webkit-mask-size: contain;
}
:has([rel="canonical"][href*="utsunomiya-cvb.org/fc/"]) #topics h2:before{
	background: #005BAC;
	color: #fff;
}

@media (min-width: 576px) {
	#topics h2 {
		font-size: 24px;
	}
	#topics h2:before {
		height: 64px;
		padding-bottom: 12px;
		font-size: 16px;
	}
}

@media (min-width: 992px) {
	#topics h2 {
		font-size: 32px;
	}
	#topics h2:before {
		height: 72px;
		padding-bottom: 14px;
		font-size: 18px;
	}
}

#topicsTab {
	margin-top: 32px;
}

@media (min-width: 992px) {
	#topicsTab {
		margin-top: 48px;
	}
}

#topicsTab ul {
	display: grid;
	grid-gap: 8px;
}

@media (min-width: 576px) {
	#topicsTab ul {
		grid-gap: 16px;
	}
}

@media (min-width: 992px) {
	#topicsTab ul {
		column-gap: 32px;
	}
}

#topicsTab li {
	display: contents;
}

#topicsTab a {
	grid-row: 1;
	display: grid;
	align-items: center;
	text-align: center;
	min-height: 48px;
	padding: 4px 16px;
	border: 1px solid currentColor;
	color: #5ab6b6;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-decoration: none;
}

@media (min-width: 992px) {
	#topicsTab a {
		font-size: 18px;
	}
}

#topicsTab .select a {
	background: #5ab6b6;
	border-color: transparent;
	color: #fff;
}

#topicsList {
	margin-top: 48px;
}

@media (min-width: 992px) {
	#topicsList {
		margin-top: 80px;
	}
}

#topicsList dl {
	position: relative;
	display: grid;
	grid-gap: 8px;
	padding: 16px 0;
	border-bottom: 1px solid var(--color-border);
}

@media (min-width: 992px) {
	#topicsList dl {
		padding: 24px 0;
	}
}

#topicsList dl:last-child {
	border-color: currentColor;
}

#topicsList dl:has(a) {
	padding-right: 40px;
}

#topicsList dt {
	letter-spacing: 0.05em;
}

#topicsList dt a {
	color: inherit;
	text-decoration: none;
}

#topicsList dd {
	order: -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	grid-gap: 8px;
}

#topicsList dd:has(a) {
	display: contents;
}

#topicsList dd time {
	margin-right: 4px;
	font-size: 13px;
	letter-spacing: 0.05em;
}

#topicsList dd ul {
	display: contents;
}

#topicsList dd li {
	display: grid;
	align-items: center;
	min-width: 60px;
	height: 16px;
	padding: 0 8px;
	border: 0.5px solid currentColor;
	border-radius: 2px;
	font-size: 11px;
	line-height: 1;
	letter-spacing: 0.05em;
	text-align: center;
}

#topicsList dd li.tagCheck {
	border: none;
	background: #4681b3;
	color: #fff;
	text-transform: uppercase;
}

#topicsList dd li.tagNew {
	border: none;
	background: #cd5257;
	color: #fff;
	text-transform: uppercase;
}

#topicsList dd a {
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	grid-template-columns: 1fr 16px;
	align-items: center;
	width: 100%;
	height: 100%;
	padding: 16px;
	color: inherit;
	font-size: 0;
	z-index: 1;
}

#topicsList dd a:after {
	content: "";
	aspect-ratio: 1;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M14.24,7.36l-4.7-4.7c-.35-.35-.93-.35-1.28,0-.35.35-.35.93,0,1.28l2.99,2.99H2.56c-.59,0-1.07.48-1.07,1.07s.48,1.07,1.07,1.07h8.69l-2.99,2.99c-.35.35-.35.93,0,1.28.18.18.41.26.64.26s.46-.09.64-.26l4.7-4.7c.35-.35.35-.93,0-1.28Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
}

#topicsList p {
	padding: 10% 0;
	text-align: center;
}