/* CSS Document */

#topics{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: 40px 0 clamp(80px, calc(120 / 1200 * 100vw), 120px) 0;
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		aspect-ratio: 300 / 49;
		width: clamp(140px, calc(175 / 576 * 100vw), 175px);
		background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 175.04 28.73"><path d="M3.22,25.99c0,.4.15.8.46,1.11.31.31.71.46,1.11.46h0c.4,0,.8-.15,1.11-.46.31-.31.46-.71.46-1.11v-6.18h-3.13v6.18Z" style="fill: %239ecee2;"/><path d="M5.86,20.43c-.34,0-.62.28-.62.62s.28.62.62.62h.49v-1.24h-.49Z" style="fill: %232085b0;"/><path d="M5.86,22.28c-.34,0-.62.28-.62.62s.28.62.62.62h.49v-1.24h-.49Z" style="fill: %232085b0;"/><path d="M5.86,24.14c-.34,0-.62.28-.62.62s.28.62.62.62h.49v-1.24h-.49Z" style="fill: %232085b0;"/><rect x="6.35" y="20.43" width=".52" height="1.24" style="fill: %233f4a5a;"/><path d="M18.53,13.83v3.71c1.02,0,1.86-.83,1.86-1.86s-.83-1.86-1.86-1.86Z" style="fill: %23fff;"/><path d="M1.65,18.57h-.92c-.19,0-.37-.07-.52-.21-.14-.14-.21-.33-.21-.51v-4.32c0-.19.07-.37.21-.51.14-.14.33-.21.52-.21h.92v5.77Z" style="fill: %233f4a5a;"/><path d="M7.92,19.81H2.38c-.19,0-.37-.07-.51-.21s-.21-.33-.21-.51v-6.79c0-.19.07-.37.21-.51.14-.14.33-.21.51-.21h5.54v8.25Z" style="fill: %23f67656;"/><path d="M7.92,19.81H2.38c-.19,0-.37-.07-.51-.21s-.21-.33-.21-.51v-3.4h6.27v4.12Z" style="fill: %23e66847;"/><polygon points="7.92 11.56 7.92 19.81 17.13 23.19 17.13 8.18 7.92 11.56" style="fill: %239ecee2;"/><polygon points="7.92 15.68 7.92 19.81 17.13 23.19 17.13 15.68 7.92 15.68" style="fill: %232085b0;"/><path d="M18.78,22.46c0,.19-.07.37-.21.52-.14.14-.33.21-.51.21h-.92v-15.01h.92c.19,0,.37.07.51.21.14.14.21.33.21.52v13.55Z" style="fill: %233f4a5a;"/><path d="M50.98,20.13c-.38,0-4.19,3.07-4.74,3.55-.13.1-.32.26-.48.26-.64,0-1.92-2.4-1.92-3.04,0-.35.35-.45.74-.67,1.79-1.02,3.49-2.18,5.25-3.26,1.22-.74,1.34-.77,1.34-1.76v-1.09c0-.48.03-.96.03-1.44v-.32c0-.42-.29-.74-.7-.74-.06,0-.13.03-.19.03-.61.13-2.78.51-3.26.51-.42,0-.93-.03-.93-2.37,0-.86.06-.99.67-1.02.99-.03,2.11-.1,3.1-.22.42-.03.9-.06,1.18-.38.26-.29.26-.61.26-.96.03-.9.06-1.79.06-2.69,0-.64-.06-1.38-.06-1.5,0-.26.1-.48.42-.48.48,0,2.62.45,3.26.58.19.03.64.13.64.42,0,.19-.19.38-.32.51-.48.38-.51.77-.61,1.76-.03.19-.06.45-.1.74,0,.13-.03.32-.03.45,0,.29.26.54.54.54.22,0,1.7-.45,2.02-.54.16-.06.38-.16.54-.16.74,0,.83,2.08.83,2.62,0,.83-.54.83-2.98,1.25-1.18.22-1.25.45-1.25,1.92v.45c0,.54.06,1.25.48,1.25.16,0,.61-.19.8-.29,1.7-.64,3.46-1.06,5.31-1.06,3.55,0,6.98,2.21,6.98,6.05,0,1.98-.93,3.65-2.56,4.77s-4.51,1.44-6.43,1.44h-.38c-.51,0-1.18-.03-1.34-.35-.29-.45-.51-1.76-.51-2.3,0-.42.1-.83.58-.83.38,0,1.44.29,2.62.29,1.86,0,4.58-.61,4.58-2.94,0-2.02-2.05-3.01-3.84-3.01s-4.13.64-5.63,1.54c-.35.22-.51.54-.51.99,0,.38.06,1.66.1,2.11.06.67.29,3.55.29,3.87,0,1.57-1.95,2.34-2.82,2.34-.7,0-.93-.67-1.18-1.22-.51-1.15-1.02-1.66-1.95-2.5-.16-.16-.38-.35-.38-.61,0-.35.38-.64.7-.64.22,0,1.34.77,1.63.99.1.1.26.19.38.19.19,0,.22-.13.22-.26,0-.03-.06-1.34-.06-1.41,0-.16-.03-.32-.03-.45-.03-.58-.03-.9-.35-.9ZM67.14,8.96c.86.67,2.46,2.02,2.46,2.37,0,.61-1.38,2.18-2.02,2.18-.26,0-.51-.22-.7-.38-1.34-1.28-2.75-2.46-4.26-3.58-.22-.16-.58-.42-.58-.77,0-.48,1.41-2.08,1.92-2.08.38,0,1.7,1.09,2.4,1.66.26.19.51.42.77.61Z" style="fill: %23333;"/><path d="M87.75,13.34h.9c1.06,0,2.21-.1,3.1-.1.7,0,.67.38.67,1.6s.03,1.57-.67,1.57c-.83,0-1.98-.1-3.1-.1h-1.06c-.32.03-.67.1-.67.48,0,.19.06.35.16.54,1.31,2.43,3.07,4.7,5.09,6.59.19.19.45.42.45.7,0,.58-1.47,2.02-2.05,2.02-.42,0-1.18-.86-1.47-1.18-1.12-1.25-2.05-2.66-2.85-4.13-.06-.13-.16-.22-.32-.22-.19,0-.29.13-.38.29-1.28,2.91-3.17,4.96-5.73,6.82-.29.19-.74.51-1.06.51-.58,0-1.89-1.66-1.89-2.21,0-.35.51-.64,1.02-.99,2.94-2.02,5.02-4.8,5.57-8.38.03-.58-.22-.77-.8-.83h-1.44c-1.09,0-2.24.1-3.1.1-.7,0-.67-.45-.67-1.57s-.03-1.6.67-1.6c.93,0,2.05.1,3.1.1h1.66c.58,0,.9-.26.9-.83v-3.23c0-.67-.22-.9-.9-.9-.61,0-.8.13-1.12.64-.32.67-1.82,3.49-2.53,3.49-.29,0-2.14-.93-2.14-1.5,0-.22.38-.74.51-.93,1.98-2.88,3.52-6.21,4.32-9.63.03-.19.1-.45.38-.45.22,0,1.34.29,1.63.35.26.06.48.13.7.19.77.19,1.09.26,1.09.58,0,.26-.32.42-.51.51-.48.16-.51.29-.8,1.09-.13.42-.32.99-.64,1.86,0,.1-.03.19-.03.26,0,.42.29.51.64.54h3.46c1.02,0,2.08-.06,3.01-.06.77,0,.74.35.74,1.6s.03,1.54-.74,1.54c-.9,0-1.98-.1-3.01-.06-.64,0-.86.26-.93.86,0,1.09,0,2.18-.03,3.26.06.58.29.83.86.83ZM97.51,25.12c-.58,0-.83.26-.86.86.03.35.03.7.03,1.09,0,.86-.38.83-1.66.83s-1.73.03-1.73-.8c0-1.28.1-2.53.1-3.81v-14.66c0-.96-.06-1.95-.06-2.94,0-1.31.67-1.63,1.89-1.63.74,0,1.47.03,2.21.03h3.46c.74,0,1.47-.03,2.21-.03,1.18,0,1.89.29,1.89,1.63,0,.99-.03,1.95-.03,2.94v14.33c0,1.25.06,2.5.06,3.78,0,.86-.42.83-1.66.83s-1.63.03-1.63-.83c0-.26.03-.51.03-.77-.03-.61-.29-.86-.86-.86h-3.36ZM100.9,22.05c.54-.06.86-.35.86-.9v-12.99c0-.54-.32-.83-.86-.9h-3.39c-.58.06-.9.35-.9.9v12.99c0,.54.32.83.9.9h3.39Z" style="fill: %23333;"/><path d="M123.39,7.94c.22.1.58.19.58.45,0,.19-.16.29-.29.35-.51.32-.54.61-.67,1.25-.26,1.47-.45,2.98-.77,4.45-.03.19-.1.48-.1.67s.1.38.32.38c.16,0,.29-.1.42-.19,2.37-1.66,4.29-2.94,7.33-2.94,3.94,0,6.98,2.62,6.98,6.66,0,4.54-3.39,6.46-7.26,7.62-.99.29-3.17.86-4.16.86-.7,0-.9-.29-1.18-.9-.22-.48-.54-1.54-.54-2.08,0-.51.38-.54.8-.58,1.38-.06,2.91-.29,4.26-.64,2.27-.58,4.64-1.57,4.64-4.29,0-2.21-1.79-3.39-3.84-3.39-3.36,0-6.75,2.82-8.77,5.34-.26.32-.51.67-.96.67-.29,0-2.43-.32-2.43-1.25,0-.32.22-.8.32-1.12.29-1.02.54-2.08.74-3.14.42-2.3.67-4.64.77-6.98,0-.26.03-.48.03-.7,0-.93.03-1.41.54-1.41.48,0,2.72.7,3.26.9ZM123.97,1.02c.48,0,3.07,1.66,3.65,2.02.48.29,2.34,1.31,2.34,1.86,0,.58-1.31,2.53-1.98,2.53-.35,0-.77-.45-1.02-.64-1.22-1.02-2.66-1.95-4.03-2.72-.32-.19-.74-.35-.74-.7,0-.42,1.02-2.34,1.79-2.34Z" style="fill: %23333;"/><path d="M158.79,4.96c.19.06.42.16.42.38,0,.19-.19.38-.32.51-.42.48-.45,1.66-.45,2.59v.86c0,.48,0,1.22.64,1.22.29,0,3.42-.54,4-.61,1.76-.26,2.3-.19,2.3-1.31,0-1.5-.19-3.74-.54-5.18-.03-.13-.06-.29-.06-.42,0-.29.19-.42.45-.42.42,0,2.78.42,3.3.54.22.06.64.1.64.38,0,.19-.19.38-.29.51-.26.35-.22,1.18-.22,1.6,0,.83.03,1.63.03,2.46,0,.42.1.9.64.9.26,0,2.14-.29,2.56-.35.51-.06,2.14-.32,2.56-.32.61,0,.61.48.61,2.18,0,1.5-.13,1.44-1.66,1.5-.58.03-1.34.1-2.4.19-1.79.16-2.4,0-2.5,1.28-.32,4-1.09,6.66-5.73,6.66-.32,0-.61-.03-.83-.26-.35-.45-.54-1.86-.54-2.43,0-.32.16-.64.51-.64.26,0,.54.03.8.03,1.09,0,1.82-.29,2.18-1.38.13-.42.35-1.57.35-1.95,0-.32-.26-.54-.54-.54-.38,0-4.51.74-5.15.86-.83.16-1.18.42-1.18,1.31,0,1.22.1,4.8.38,5.82.58,2.05,2.59,2.14,4.83,2.14,2.08,0,4.13-.26,6.17-.64.1-.03.19-.03.29-.03.45,0,.51.58.51.93,0,.51,0,2.24-.38,2.56-.48.35-5.25.51-6.08.51-3.23,0-7.36-.22-8.42-4-.51-1.86-.48-4.54-.54-6.53,0-.48-.1-1.06-.7-1.06-.35,0-3.97.83-4.54.99-.13.03-.32.06-.48.06-.48,0-.58-.51-.64-1.28-.03-.16-.03-.35-.06-.54-.03-.35-.13-1.06-.13-1.41,0-.7.45-.7.99-.7.86-.03,3.1-.42,4.06-.54.77-.13,1.34-.16,1.34-1.12,0-1.18-.06-3.78-.22-4.93-.03-.13-.06-.32-.06-.45,0-.35.19-.48.51-.48.54,0,3.07.38,3.62.51Z" style="fill: %23333;"/></svg>') no-repeat center / contain;
		font-size: 0;
	}
	#topicsTab{
		grid-column: 1 / 4;
		margin-top: 40px;
	}
	#topicsList{
		margin-top: clamp(48px, calc(80 / 1200 * 100vw), 80px);
	}
	#pagenation{
		margin-top: 64px;
	}
}

#topicsTab{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	border-bottom: clamp(8px, calc(16 / 1200 * 100vw), 16px) solid var(--color-theme);
	&>*{
		grid-column: 2;
	}
	& ul{
		display: grid;
		column-gap: clamp(8px, calc(24 / 1200 * 100vw), 24px);
	}
	& li{
		grid-row: 1;
		display: grid;
	}
	& a{
		display: grid;
		grid-template-columns: clamp(6px, calc(10 / 1200 * 100vw), 10px) auto;
		align-items: center;
		justify-content: center;
		column-gap: 0.5em;
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 8px;
		background: var(--color);
		border-radius: 10px 10px 0 0;
		color: #fff;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
		text-align: center;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			background: var(--color-theme-sub);
			border-radius: 100%;
		}
		.select &{
			background: var(--color-theme);
			pointer-events: none;
		}
	}
}

#topicsList{
	& p{
		display: grid;
		place-content: center;
		aspect-ratio: 16 / 9;
		text-align: center;
	}
	& section{
		position: relative;
		display: flex;
		flex-wrap: wrap;
		column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
		padding: clamp(16px, calc(24 / 768 * 100vw), 24px);
		&:has(figure){
			min-height: clamp(76px, calc(148 / 768 * 100vw), 116px);
			padding-right: clamp(80px, calc(160 / 1200 * 100vw), 160px);
		}
		&:has(a):hover{
			& h3{
				color: var(--color-theme-sub);
			}
		}
		&:nth-of-type(even){
			background: #f2f2f2;
		}
	}
	& h3{
		order: 1;
		width: 100%;
		margin-top: 8px;
		font-size: clamp(14px, calc(18 / 768 * 100vw), 18px);
		transition: color 0.2s ease-out;
	}
	& h3+div{
		display: contents;
		& time{
			align-self: center;
			font-size: clamp(12px, calc(16 / 768 * 100vw), 16px);
		}
		& ul{
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			column-gap: clamp(4px, calc(8 / 768 * 100vw), 8px);
		}
		& li{
			display: flex;
			align-items: center;
			font-size: clamp(10px, calc(16 / 768 * 100vw), 16px);
			&[class]{
				min-width: clamp(20px, calc(32 / 768 * 100vw), 32px);
				padding: 0.25em 1em;
				background: var(--color-tagNew);
				border-radius: clamp(10px, calc(16 / 768 * 100vw), 16px);
				color: #fff;
				font-size: clamp(10px, calc(16 / 768 * 100vw), 16px);
				&.tagCheck{
					background: var(--color-tagCheck);
				}
			}
			&:not([class]){
				&:before,
				&:after{
					content: "-";
				}
			}
		}
		& a{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 0;
		}
	}
	& figure{
		position: absolute;
		right: 8px;
		top: 50%;
		width: clamp(60px, calc(150 / 1200 * 100vw), 150px);
		transform: translateY(-50%);
		& img{
			aspect-ratio: 3 / 2;
			object-fit: cover;
			border-radius: clamp(4px, calc(10 / 768 * 100vw), 10px);
		}
	}
}

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