/* CSS Document */

#main{
	font-size: clamp(14px, calc(16 / 768 * 100vw), 16px);
}

#sideMenu{
	display: none;
}

#link{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	margin: clamp(32px, calc(56 / 1200 * 100vw), 56px) 0 clamp(96px, calc(120 / 1200 * 100vw), 120px) 0;
}
#link>*{
	grid-column: 2;
}
#link h2{
	font: 600 clamp(20px, calc(28 / 768 * 100vw), 28px) var(--font-min);
	text-align: center;
	letter-spacing: 0.1em;
}
#link section{
	grid-column: 2;
	margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
}
#link h3{
	align-self: center;
	display: grid;
	grid-template-columns: 4px 1fr;
	column-gap: 16px;
	font-weight: 700;
	font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
}
#link h3:before {
	content: "";
	height: 1em;
	align-self: start;
	background: var(--color-theme);
	transform: translateY(0.325em);
}
#link h3+div{
	margin-top: 16px;
	padding: 16px 0;
	border: solid var(--color-border);
	border-width: 1px 0;
}
#link h4{
	margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	color: var(--color-theme);
	font-weight: 600;
	letter-spacing: 0.1em;
}
#link h4+div{
	margin-top: 16px;
}
#link ul{
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
	grid-gap: 8px 24px;
}
#link li{
	display: contents;
}
#link a{
	display: grid;
	grid-template-columns: auto 1fr;
	justify-self: start;
	align-items: center;
	column-gap: 8px;
	color: inherit;
	letter-spacing: 0.1em;
	text-decoration: none;
}
#link a:before{
	content: "";
	aspect-ratio: 1;
	width: 14px;
	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 24 24" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><rect x="7.5" y="3.5" width="13" height="13"/><polyline points="3.5 8.5 3.5 20.5 15.5 20.5"/></svg>') no-repeat center / contain;
}
#link a:hover{
	color: var(--color-theme);
}