/* CSS Document */

#main{
	background: var(--color-bg);
	#intro,
	#route,
	#link{
		width: min(100%, 1236px);
		margin-inline: auto;
		padding: clamp(32px, calc(48 / 768 * 100dvw), 48px) 0;
		background: white;
		#access+&{
			@media (min-width: 992px) {
				border-radius: 40px 40px 0 0;
			}
		}
		&:last-child{
			padding-bottom: clamp(96px, calc(120 / 768 * 100dvw), 120px);
		}
	}
}

#access{
	&{
		#tab{
			margin-top: clamp(48px, calc(64 / 768 * 100dvw), 64px);
		}
	}
	& hgroup{
		&{
			display: grid;
			grid-template-columns: 1fr var(--wrap) 1fr;
			grid-row-gap: 16px;
			&:before{
				content: "";
				grid-column: 1 / 4;
				grid-row: 1;
				background: white;
				margin-bottom: -8px;
			}
			& h2{
				grid-column: 2;
				grid-row: 1;
				margin-top: 24px;
			}
			& p{
				grid-column: 2;
				grid-row: 2;
			}
		}
		& h2{
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
			text-align: center;
			text-wrap: balance;
		}
		& p{
			font-weight: 900;
			font-size: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			letter-spacing: 0.15em;
			justify-self: center;
			font-weight: 600;
			font-size: clamp(20px, calc(28 / 1366 * 100dvw), 28px);
			font-family: 'Montserrat', var(--font);
			letter-spacing: 0.2em;
			white-space: nowrap;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
	#tab{
		display: grid;
		justify-content: center;
		& ul{
			display: flex;
			column-gap: clamp(8px, calc(16 / 768 * 100dvw), 16px);
			padding-top: 8px;
		}
		& li{
			display: grid;
			width: min(50%, 300px);
		}
		& a{
			display: grid;
			align-items: center;
			min-height: 48px;
			padding: 8px;
			background: #9c9c9c;
			border-radius: 16px 16px 0 0;
			color: #fff;
			font-weight: 700;
			font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
			text-align: center;
			text-decoration: none;
			text-wrap: balance;
			word-break: keep-all;
			overflow-wrap: anywhere;
			.select &{
				margin-top: -8px;
				background: #303030;
				pointer-events: none;
			}
		}
		@media (max-width: 991.98px) {
			grid-template-columns: var(--wrap);
			& ul{
				justify-content: center;
			}
		}
		@media (min-width: 992px) {
			grid-template-columns: min(calc(100% - 80px), var(--wrap-max));
		}
	}
}

#intro{
	&{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		grid-row-gap: clamp(24px, calc(40 / 768 * 100dvw), 40px);
	}
	& h2{
		display: none;
	}
	& h2+div{
		display: grid;
		grid-row-gap: 1em;
		font-weight: 600;
		letter-spacing: 0.025em;
	}
	& figure{
		&{
			display: grid;
			grid-row-gap: 8px;
			& figcaption{
				grid-row: 1;
			}
		}
		& figcaption{
			font-size: clamp(12px, calc(14 / 768 * 100dvw), 14px);
		}
	}
}

#route{
	&{
		#routeStart,
		#routeGoal,
		#routeSubmit{
			display: grid;
			grid-template-columns: var(--wrap);
			justify-content: center;
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
	& h2{
		display: grid;
		padding-bottom: 16px;
		border-bottom: 1px solid currentColor;
		font-weight: 800;
		font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
		letter-spacing: 0.1em;
		text-indent: 0.1em;
		text-align: center;
		text-wrap: balance;
		& span{
			font-size: 0.75em;
		}
	}
	#routeStart,
	#routeGoal{
		&{
			display: grid;
			grid-row-gap: clamp(24px, calc(32 / 768 * 100dvw), 32px);
			& dl{
				margin-top: 16px;
			}
		}
		& h3{
			display: grid;
			grid-template-columns: auto 1fr;
			column-gap: 16px;
			font-weight: 700;
			font-size: 18px;
			letter-spacing: 0.05em;
			&:before{
				content: "";
				margin-top: 0.1em;
				border-left: 2px solid var(--color-theme);
			}
		}
		& ul{
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
			grid-gap: 16px;
		}
		& li{
			display: contents;
			& label{
				display: grid;
				align-items: center;
				min-height: 48px;
				padding: 8px 16px;
				border: 1px solid currentColor;
				border-radius: 24px;
				font-weight: 800;
				font-size: clamp(14px, calc(16 / 768 * 100dvw), 16px);
				letter-spacing: 0.05em;
				text-align: center;
				text-decoration: none;
				&:has(input:checked){
					background: var(--color-theme);
					border-color: transparent;
					color: white;
				}
			}
			& input{
				display: none;
			}
		}
		& dl{
			display: grid;
			grid-row-gap: 8px;
			& dd{
				display: flex;
			}
			& input{
				min-width: min(100%, 400px);
				min-height: 48px;
				padding: 8px 24px;
				border: 1px solid currentColor;
				border-radius: 48px;
			}
		}
	}
	#routeSubmit{
		display: flex;
		justify-content: center;
		& button{
			display: grid;
			grid-template-columns: 1fr auto;
			align-items: center;
			column-gap: 0.5em;
			width: min(100%, 320px);
			min-height: 48px;
			padding: 8px 24px;
			background: var(--color);
			border-radius: 24px;
			color: white;
			font-weight: 700;
			font-size: 14px;
			letter-spacing: 0.2em;
			text-align: center;
			&:after{
				content: "";
				aspect-ratio: 1;
				width: 16px;
				background: currentColor;
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><circle cx="6.05" cy="6.05" r="5.05"/><line x1="9.97" y1="9.97" x2="14.62" y2="14.62"/></svg>') no-repeat center / contain;
			}
		}
	}

}

#link{
	&{
		#linkList{
			width: min(var(--wrap-fit), 864px);
			margin-inline: auto;
			margin-top: clamp(24px, calc(40 / 768 * 100dvw), 40px);
		}
	}
	& hgroup{
		text-align: center;
		text-wrap: balance;
		&{
			display: grid;
			grid-template-columns: 1fr auto 1fr;
			align-items: center;
			grid-column-gap: clamp(16px, calc(32 / 768 * 100dvw), 32px);
			overflow: hidden;
			&:before,
			&:after{
				content: "";
				grid-row: 1;
				min-width: 48px;
				border-top: 1px solid #d9d9d9;
			}
		}
		& h2{
			grid-column: 2;
			grid-row: 1;
			font-weight: 800;
			font-size: clamp(18px, calc(24 / 768 * 100dvw), 24px);
			letter-spacing: 0.1em;
			text-indent: 0.1em;
		}
		& p{
			grid-column: 1 / 4;
			justify-self: center;
			font-weight: 600;
			font-size: clamp(16px, calc(24 / 768 * 100dvw), 24px);
			font-family: 'Montserrat', var(--font);
			white-space: nowrap;
			letter-spacing: 0.1em;
			& span{
				display: contents;
				color: var(--color-theme);
			}
		}
	}
	#linkList{
		& details{
			border-top: 1px solid #d9d9d9;
			&:last-child{
				border-bottom: 1px solid #d9d9d9;
			}
			&::details-content{
			}
		}
		& summary{
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: baseline;
			column-gap: 8px;
			padding: 16px 0;
			font-weight: 700;
			letter-spacing: 0.1em;
			&:before{
				content: "";
				aspect-ratio: 1;
				width: 14px;
				background: var(--color-theme);
				transform: translateY(0.1em);
				-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="2" y1="10" x2="18" y2="10"/><line x1="10" y1="2" x2="10" y2="18"/></svg>') no-repeat center / contain;
			}
			[open] &:before{
				-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" style="fill: none; stroke: black; stroke-linecap: round; stroke-miterlimit: 10; stroke-width: 2px;"><line x1="2" y1="10" x2="18" y2="10"/></svg>');
			}
		}
		& summary+div{
			padding-bottom: 24px;
			& ul{
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr));
				justify-items: start;
				grid-gap: 16px 40px;
				padding-left: 24px;
			}
			& li{
				display: contents;
			}
			& a{
				display: grid;
				grid-template-columns: auto 1fr;
				column-gap: 16px;
				color: #666;
				font-weight: 700;
				font-size: 14px;
				letter-spacing: 0.05em;
				&:before{
					content: "";
					aspect-ratio: 1;
					width: 16px;
					background: var(--color);
					transform: translateY(0.25em);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2px;"><path d="M13,10v3H3V3h4"/><polyline points="11 1 15 1 15 5"/><path d="M15,1l-7,7"/></svg>') no-repeat center / contain;
				}
				&:hover{
					color: var(--color-theme);
					&:before{
						background: currentColor;
					}
				}
			}
		}
	}
}