/* CSS Document */


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

#topics{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& h2{
		justify-self: center;
		display: grid;
		grid-row-gap: 4px;
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			justify-self: center;
			aspect-ratio: 1;
			width: 40px;
			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"><path d="M16.91,5.32s-1.56-.68-2.94-.68c-2.1,0-3.58.89-3.58.89-.06.02-.09.07-.09.13v9.56s.02.08.05.11c.03.03.08.03.12.02,0,0,1.53-.86,3.5-.86,1.38,0,2.8.63,2.8.63.2.07.43.03.6-.09.17-.13.28-.33.28-.54V6.34c0-.46-.3-.78-.74-1.02ZM6.03,4.64c-1.38,0-2.94.68-2.94.68-.43.24-.74.55-.74,1.02v8.15c0,.21.1.42.28.54.17.13.4.16.6.09,0,0,1.43-.63,2.8-.63,1.98,0,3.5.86,3.5.86.04.01.08,0,.12-.02.03-.02.05-.07.05-.11V5.66c0-.06-.04-.11-.09-.13,0,0-1.49-.89-3.58-.89Z"/></svg>') no-repeat center / contain;
		}
		&:after{
			content: "";
			height: 2px;
			background: linear-gradient(90deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
		}
	}
	& h2+div{
		display: grid;
		grid-row-gap: 1em;
		margin-top: 24px;
		font-weight: 500;
		letter-spacing: 0.05em;
	}
	#tab{
		margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
	}
	#topicsList{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
	}
}

#topicsList{
	&:has(section){
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 256px), 1fr));
		grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px) clamp(16px, calc(32 / 1200 * 100vw), 32px);
	}
	& section{
		position: relative;
		display: grid;
		align-content: start;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 3 / 2;
			background: var(--dummy);
			border-radius: 12px;
		}
	}
	& h3{
		order: 3;
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.05em;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: linear-gradient(180deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& h3+div{
		display: contents;
		& time{
			order: 2;
			font-weight: 500;
			font-size: clamp(12px, calc(14 / 768 * 100vw), 14px);
			letter-spacing: 0.05em;
		}
		& ul{
			order: 1;
			display: flex;
			flex-wrap: wrap;
			grid-gap: 4px;
			margin-top: 4px;
		}
		& li{
			min-width: 5em;
			padding: 0 0.5em;
			font-size: 12px;
			border: 1px solid var(--color-border);
			border-radius: 2px;
			text-align: center;
			&.tagNew{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&.tagRec{
				background: var(--color-theme-sub);
				border-color: transparent;
				color: #fff;
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: 12px;
		}
	}
	& p{
		padding: 10% 0;
		font-weight: 500;
		letter-spacing: 0.05em;
		text-align: center;
	}
}

#tab{
	& ul{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		column-gap: clamp(8px, calc(24 / 1200 * 100vw), 24px);
		border-bottom: 3px solid var(--color-theme);
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 8px;
		border-radius: clamp(12px, calc(16 / 768 * 100vw), 16px) clamp(12px, calc(16 / 768 * 100vw), 16px) 0 0;
		border: 0 solid var(--color-border);
		border-width: 1px 1px 0 1px;
		color: inherit;
		font-weight: 700;
		font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		.select &{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
	}
}