/* CSS Document */

#main{
	margin-bottom: clamp(80px, calc(160 / 992 * 100dvw), 160px);
}

#title{
	& h2{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		padding: 0.5em 0;
		background: var(--color-theme);
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(36 / 768 * 100dvw), 36px);
		letter-spacing: 0.05em;
		text-align: center;
	}
	& h2+div{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
		font-weight: 500;
		text-align: center;
	}
}

#outline{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(40 / 992 * 100dvw), 40px);
	& ul{
		display: grid;
		grid-gap: 16px;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		align-items: center;
		min-height: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		padding: 0.25em 1em;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: clamp(24px, calc(32 / 768 * 100dvw), 32px);
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		text-align: center;
		text-decoration: none;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
	}
}

#list{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(80px, calc(120 / 992 * 100dvw), 80px);
	margin-top: clamp(48px, calc(64 / 992 * 100dvw), 64px);
	& section{
		scroll-margin-top: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	}
	& h3{
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: 1em;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100dvw), 20px);
		letter-spacing: 0.1em;
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before,
		&:after{
			content: "";
			min-width: 1em;
			height: 1em;
			background: currentColor;
		}
		&:before{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat center left / 1px 100%, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat center / 100% 1px;
		}
		&:after{
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat center right / 1px 100%, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat center / 100% 1px;
		}
	}
	& h3+div{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
		grid-gap: clamp(40px, calc(64 / 992 * 100dvw), 64px) clamp(16px, calc(24 / 992 * 100dvw), 24px);
		margin-top: clamp(16px, calc(24 / 992 * 100dvw), 24px);
	}
	& dl{
		display: grid;
		grid-row-gap: 8px;
		&:not(:has(img)):before{
			content: "";
			aspect-ratio: 210 / 297;
			background: var(--dummy);
			border-radius: 4px;
		}
	}
	& dt{
		margin-inline: 8px;
		font-weight: 700;
	}
	& dd{
		&:has(img){
			order: -1;
		}
		&:has(a){
			margin-top: 8px;
		}
		& img{
			aspect-ratio: 210 / 297;
			object-fit: contain;
			background: #f2f2f2;
			border-radius: 4px;
		}
		& a{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
			margin-top: 8px;
			padding: 0.25em 1.5em;
			border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
			border: 1px solid currentColor;
			color: var(--color-theme);
			font-weight: 500;
			font-size: 14px;
			letter-spacing: 0.05em;
			text-align: center;
			text-decoration: none;
			z-index: 1;
			&:hover{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
			}
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 20px;
				background: currentColor;
				-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="M9.29,14.67c.2.2.45.29.71.29s.51-.1.71-.29l6-6c.39-.39.39-1.02,0-1.41s-1.02-.39-1.41,0l-4.29,4.29V2c0-.55-.45-1-1-1s-1,.45-1,1v9.54l-4.29-4.29c-.39-.39-1.02-.39-1.41,0s-.39,1.02,0,1.41l6,6ZM19,12c-.55,0-1,.45-1,1v5H2v-5c0-.55-.45-1-1-1s-1,.45-1,1v6c0,.55.45,1,1,1h18c.55,0,1-.45,1-1v-6c0-.55-.45-1-1-1Z"/></svg>') no-repeat center / contain;
			}
		}
	}
}

#pagenation{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(32px, calc(56 / 992 * 100dvw), 56px);
}