/* CSS Document */

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

#link{
	& 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);
		text-align: center;
	}
}

#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);
	& 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-row-gap: clamp(24px, calc(32 / 992 * 100dvw), 32px);
		margin-top: 16px;
	}
	& h4{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 500;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		&:before{
			content: "";
			height: 1em;
			border-left: 3px solid var(--color-theme);
			transform: translateY(calc(0.825em - 50%));
		}
	}
	& h4+div{
		margin-top: 16px;
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
		grid-gap: 16px 24px;
	}
	& li{
		display: flex;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		column-gap: 0.5em;
		font-weight: 500;
		text-decoration: none;
		&:after{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(calc(0.875em - 50%));
			-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="M2,4H0v12h12v-2H2V4ZM14,0H4v12h12V0h-2ZM14,10H6V2h8v8Z"/></svg>') no-repeat center / contain;
		}
	}
}