/* CSS Document */

main {
	display: grid;
	padding-bottom: 64px;
}

#access {
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding: 56px 0;
	grid-row-gap: 56px;
}

@media (min-width: 992px) {
	#access {
		padding: 72px 0;
		grid-row-gap: 64px;
	}
}

#access > * {
	grid-column: 2;
}

#access h2 {
	justify-self: center;
	display: grid;
	grid-template-columns: 1.25em 1fr;
	grid-gap: 0.5em;
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 0.1em;
}

@media (min-width: 992px) {
	#access h2 {
		font-size: 32px;
	}
}

#access h2:before {
	content: "";
	aspect-ratio: 1;
	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 20 20"><path d="M6.69,3.75c-.13,0-.25.05-.34.14l-1.08,1.08c-.19.19-.19.49,0,.68l.95.95h-3.25c-.31,0-.55.25-.55.55v7.72c0,.31.25.55.55.55h1.14s0,.05,0,.08c0,.46.38.84.84.84s.84-.38.84-.84c0-.03,0-.05,0-.08h.52s0,.05,0,.08c0,.46.38.84.84.84s.84-.38.84-.84c0-.03,0-.05,0-.08h3.51s0,.05,0,.08c0,.46.38.84.84.84s.84-.38.84-.84c0-.03,0-.05,0-.08h.52s0,.05,0,.08c0,.46.38.84.84.84s.84-.38.84-.84c0-.03,0-.05,0-.08h1.14c.31,0,.55-.25.55-.55v-7.72c0-.31-.25-.55-.55-.55h-3.25l.95-.95c.19-.19.19-.49,0-.68l-1.08-1.08c-.19-.19-.49-.19-.68,0l-1.08,1.08c-.19.19-.19.49,0,.68l.95.95h-5.14l.95-.95c.19-.19.19-.49,0-.68l-1.08-1.08c-.09-.09-.21-.14-.34-.14ZM6.69,4.37l.94.94-.94.94-.94-.94.94-.94ZM12.77,4.37l.94.94-.94.94-.94-.94.94-.94ZM12.72,8.53h2.1c.08,0,.15.06.15.14h0v4.69c0,.08-.06.15-.14.15h-2.1c-.08,0-.15-.06-.15-.14h0v-4.69c0-.08.06-.15.14-.15h0ZM4.84,8.82h1.9v2.39h-1.9c-.19,0-.34-.13-.34-.29v-1.81c0-.16.15-.29.34-.29h0ZM7.34,8.82h1.9c.19,0,.34.13.34.29v1.81c0,.16-.15.29-.34.29h-1.9v-2.39ZM4.56,12.74h5.07s.06.03.06.06h0v.38s-.03.06-.06.06h-5.07s-.06-.03-.06-.06h0v-.38s.03-.06.06-.06h0Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
	transform: translateY(0.25em);
}

#access #tab {
	grid-column: 1 / 4;
}

#accessMap h3 {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.05em;
}

@media (min-width: 992px) {
	#accessMap h3 {
		font-size: 24px;
	}
}

#accessMap h3 + div {
	display: grid;
	align-items: center;
	margin-top: 16px;
	text-align: center;
	border: 1px solid var(--color-border);
	overflow: hidden;
}

#accessMap h3 + div + div {
	display: flex;
	justify-content: center;
	margin-top: 48px;
}

@media (min-width: 992px) {
	#accessMap h3 + div + div {
		margin-top: 64px;
	}
}

#accessMap h3 + div + div a {
	display: grid;
	align-items: center;
	width: min(100%, 280px);
	min-height: 48px;
	padding: 4px 16px;
	border-radius: 32px;
	border: 1px solid currentColor;
	color: inherit;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
}

#accessInsideMap {
	display: grid;
	grid-gap: 40px;
}

@media (min-width: 992px) {
	#accessInsideMap {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1200px) {
	#accessInsideMap {
		grid-column-gap: 96px;
	}
}

#accessInsideMap > div {
	@media (min-width: 992px) {
		&:nth-of-type(2) {
			display: grid;
			grid-template-rows: 1fr auto 1fr;
		}
	}
}

#accessInsideMap > div h4 {
	align-self: end;
}

#accessInsideMap > div h4 + div + div {
	align-self: end;
}

#accessInsideMap h3 {
	font-weight: 700;
	font-size: 20px;
	letter-spacing: 0.05em;
}

@media (min-width: 992px) {
	#accessInsideMap h3 {
		grid-column: 1 / 3;
		font-size: 24px;
	}
}

#accessInsideMap h4 {
	display: grid;
	grid-template-columns: 16px auto;
	align-items: center;
	grid-gap: 8px;
	font-weight: 700;
	font-size: 18px;
}

@media (min-width: 992px) {
	#accessInsideMap h4 {
		font-size: 20px;
	}
}

#accessInsideMap h4:before {
	content: "";
	aspect-ratio: 1;
	background: #5ab6b6;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3,0h7v7c0,1.66-1.34,3-3,3H0V3C0,1.34,1.34,0,3,0Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
}

#accessInsideMap h4 + div {
	display: grid;
	align-items: center;
	margin-top: 16px;
	text-align: center;
	border: 1px solid var(--color-border);
	overflow: hidden;
}

#accessInsideMap h4 + div + div {
	display: flex;
	justify-content: center;
	margin-top: 24px;
}

@media (min-width: 992px) {
	#accessInsideMap h4 + div + div {
		margin-top: 48px;
	}
}

#accessInsideMap h4 + div + div a {
	display: grid;
	align-items: center;
	width: min(100%, 280px);
	min-height: 48px;
	padding: 4px 16px;
	border-radius: 32px;
	border: 1px solid currentColor;
	color: inherit;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
}

#route {
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: 32px;
	padding: 56px 0;
	background: #f6f6f6;
}

@media (min-width: 992px) {
	#route {
		grid-row-gap: 48px;
		padding: 72px 0;
	}
}

#route > * {
	grid-column: 2;
}

#route h2 {
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.05em;
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media (min-width: 576px) {
	#route h2 {
		text-align: center;
	}
}

@media (min-width: 992px) {
	#route h2 {
		font-size: 20px;
	}
}

#route form {
	display: grid;
	grid-gap: 48px;
}

@media (min-width: 1200px) {
	#route form {
		grid-gap: 56px;
	}
}

#route h3 {
	display: grid;
	grid-template-columns: 16px auto;
	align-items: center;
	grid-gap: 8px;
	font-weight: 700;
	font-size: 18px;
}

@media (min-width: 992px) {
	#route h3 {
		font-size: 20px;
	}
}

#route h3:before {
	content: "";
	aspect-ratio: 1;
	background: #5ab6b6;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><path d="M3,0h7v7c0,1.66-1.34,3-3,3H0V3C0,1.34,1.34,0,3,0Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
}

#route ul {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	grid-gap: 16px;
	margin-top: 16px;
}

#route li {
	position: relative;
}

#route li input {
	display: none;
}

#route li input[type="radio"]:checked + label {
	background: #5ab6b6;
	border-color: transparent;
	color: #fff;
}

#route li label {
	display: grid;
	align-items: center;
	min-height: 48px;
	padding: 8px 24px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: 24px;
	text-align: center;
	text-wrap: balance;
	text-decoration: none;
}

#route dl {
	display: grid;
	grid-gap: 4px;
	margin-top: 24px;
}

#route dt {
	letter-spacing: 0.05em;
}

#route dd input {
	width: min(100%, 264px);
	border-radius: 4px;
}

#routeSubmit {
	display: flex;
	justify-content: center;
}

#routeSubmit button {
	all: unset;
	box-sizing: border-box;
	display: grid;
	align-items: center;
	width: min(100%, 280px);
	min-height: 64px;
	padding: 8px 24px;
	border-radius: 32px;
	background: #5ab6b6;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.2s ease-out;
}

#routeSubmit button:hover {
	background: var(--color-theme);
}

#links {
	justify-self: center;
	display: grid;
	grid-gap: 32px 24px;
	width: var(--wrap);
	padding: 56px 0;
}

@media (min-width: 768px) {
	#links {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 992px) {
	#links {
		grid-template-columns: repeat(3, 1fr);
		grid-gap: 40px 56px;
		padding: 72px 0;
	}
}

#links h2 {
	justify-self: center;
	display: grid;
	grid-gap: 24px;
	margin-bottom: 16px;
	padding-bottom: 4px;
	border-bottom: 2px solid #5ab6b6;
	font-weight: 700;
	font-size: 18px;
	text-align: center;
	letter-spacing: 0.05em;
}

@media (min-width: 768px) {
	#links h2 {
		grid-column: 1 / 3;
	}
}

@media (min-width: 992px) {
	#links h2 {
		grid-column: 1 / 4;
		font-size: 20px;
	}
}

#links h2 + div {
	justify-self: center;
	width: min(100%, 680px);
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	#links h2 + div {
		grid-column: 1 / 3;
	}
}

@media (min-width: 992px) {
	#links h2 + div {
		grid-column: 1 / 4;
	}
}

#links section {
	display: grid;
	align-content: start;
}

#links h3 {
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: center;
	grid-gap: 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--color-border);
	font-weight: 700;
}

#links h3:before {
	content: "";
	aspect-ratio: 1;
	background: currentColor;
	background-size: cover;
	border-radius: 100%;
}

#links ul {
	display: grid;
	grid-gap: 8px;
	margin-top: 16px;
}

#links li {
	display: contents;
}

#links li a {
	display: grid;
	grid-template-columns: 14px auto;
	grid-gap: 8px;
}

#links li a:before {
	content: "";
	aspect-ratio: 1;
	background: currentColor;
	-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14"><path d="M1.49,3.06H.27v9.94h11.15v-1.21H1.49V3.06ZM3.18,1v9.33h10.55V1H3.18ZM12.51,9.12H4.39V2.21h8.12v6.91Z"/></svg>') center no-repeat;
	-webkit-mask-size: contain;
	transform: translateY(0.45em);
}

#train h3:before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M29.48,25.44v-11.31c0-2.59-2.1-4.69-4.69-4.69h-2.18l.26-2.31h.48c.51,0,.94.31,1.13.75l.87-.37h0c-.33-.78-1.1-1.32-2-1.33h-6.69c-.9,0-1.67.55-2,1.33l.87.37c.19-.44.62-.75,1.13-.75h.48l.26,2.31h-2.18c-2.59,0-4.69,2.1-4.69,4.69v11.31c0,1.96,1.43,3.6,3.3,3.93l-2.94,4.45h2.62l1.21-1.83h10.59l1.21,1.83h2.62l-2.94-4.45c1.87-.33,3.3-1.96,3.3-3.93ZM21.92,7.12l-.26,2.31h-3.33l-.26-2.31h3.85ZM15.94,11.54h8.13v1.35h-8.13v-1.35ZM13.49,15.92h0c0-.59.48-1.07,1.07-1.07h10.88c.59,0,1.07.48,1.07,1.07v3.56c0,.59-.48,1.07-1.07,1.07h-10.88c-.59,0-1.07-.48-1.07-1.07v-3.56ZM14.51,26.61c-.69,0-1.24-.56-1.24-1.24s.56-1.24,1.24-1.24,1.24.56,1.24,1.24-.56,1.24-1.24,1.24ZM15.49,30.8l.91-1.37h7.2l.91,1.37h-9.02ZM25.49,26.61c-.69,0-1.24-.56-1.24-1.24s.56-1.24,1.24-1.24,1.24.56,1.24,1.24-.56,1.24-1.24,1.24Z"/></svg>');
}

#bus h3:before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M25.27,7.87h-10.55c-2.85,0-5.17,2.31-5.17,5.17v12.57c0,2.42,1.97,4.39,4.39,4.39h12.1c2.42,0,4.39-1.97,4.39-4.39v-12.57c0-2.85-2.31-5.17-5.17-5.17ZM15.52,10.19h8.95v1.49h-8.95v-1.49ZM12.83,15.01c0-.65.53-1.17,1.18-1.17h11.99c.65,0,1.17.53,1.17,1.17v4.96c0,.65-.53,1.17-1.17,1.17h-11.99c-.65,0-1.18-.53-1.18-1.17v-4.96ZM13.95,26.89c-.76,0-1.37-.61-1.37-1.37s.61-1.37,1.37-1.37,1.37.61,1.37,1.37-.61,1.37-1.37,1.37ZM22.7,28.59h-5.14v-2.24h5.14v2.24ZM26.05,26.89c-.76,0-1.37-.61-1.37-1.37s.61-1.37,1.37-1.37,1.37.61,1.37,1.37-.61,1.37-1.37,1.37ZM11.55,29.96v2.06c0,.26.21.47.47.47h2.79c.26,0,.47-.21.47-.47v-1.44h-1.33c-.87,0-1.69-.23-2.4-.62ZM24.72,30.58v1.44c0,.26.21.47.47.47h2.79c.26,0,.47-.21.47-.47v-2.06c-.71.4-1.53.62-2.4.62h-1.33Z"/></svg>');
}

#car h3:before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M9.55,28.47c0,.63.51,1.15,1.15,1.15h1.57c.63,0,1.15-.51,1.15-1.15v-1.64h-3.86v1.64ZM32.41,20.27c-.03-.97-.68-1.81-1.6-2.11l-1.06-.59-1.51-5.5c-.27-1-1.18-1.69-2.21-1.69h-12.05c-1.03,0-1.94.69-2.21,1.69l-1.51,5.5-1.06.59c-.93.29-1.57,1.14-1.6,2.11l-.09,4.27c0,.41.15.81.43,1.11.29.3.68.46,1.09.46h21.94c.41,0,.81-.17,1.09-.46.29-.3.44-.69.43-1.11l-.08-4.27ZM12.16,16.73l1.16-4.23c.08-.29.35-.5.65-.5h12.05c.3,0,.57.2.65.5l1.16,4.23c.03.12,0,.24-.06.33-.07.09-.19.15-.3.15h-14.94c-.12,0-.23-.06-.3-.15-.07-.1-.1-.22-.06-.33ZM11.15,24.22c-1.04,0-1.89-.84-1.89-1.89s.85-1.89,1.89-1.89,1.89.85,1.89,1.89-.85,1.89-1.89,1.89ZM22.88,24.04h-5.75v-1.89h5.75v1.89ZM28.85,24.22c-1.04,0-1.89-.84-1.89-1.89s.85-1.89,1.89-1.89,1.89.85,1.89,1.89-.84,1.89-1.89,1.89ZM26.58,28.47c0,.63.51,1.15,1.15,1.15h1.57c.63,0,1.15-.51,1.15-1.15v-1.64h-3.86v1.64Z"/></svg>');
}

#lightRail h3:before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M6.12,28.77h24.91v-.98H6.12v.98ZM29.72,17.54c-1.42-1.2-6.05-6.43-9.72-6.43l-1.9-.04h-.75c-.09-.01-.18-.01-.27,0H6.11v15.55h21.06c1.97.07,3.59-.19,4.69-.96,2.89-2.01,2.24-4.45-2.13-8.13ZM10.73,24.44h-2.71v-10.31h2.71v10.31ZM14.64,24.44h-2.7v-10.31h2.7v10.31ZM25.29,20c-2.29.65-8.02.71-8.02.71l.04-6.58s3.39-.14,4.58.22c1.19.36,3.44,2.7,4.27,3.53s0,1.87-.87,2.12Z"/></svg>');
}

#taxi h3:before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M17.13,9.63h5.73s.09-.02.12-.06c.03-.04.04-.08.02-.13l-.45-1.62c-.03-.11-.13-.19-.25-.19h-4.62c-.12,0-.22.08-.25.19l-.45,1.62s0,.09.02.13c.03.04.07.06.12.06ZM9.55,28.47c0,.63.51,1.15,1.15,1.15h1.57c.63,0,1.15-.51,1.15-1.15v-1.64h-3.86v1.64ZM26.58,28.47c0,.63.51,1.15,1.15,1.15h1.57c.63,0,1.15-.51,1.15-1.15v-1.64h-3.86v1.64ZM32.41,20.27c-.03-.97-.68-1.81-1.6-2.11l-1.06-.59-1.51-5.5c-.27-1-1.18-1.69-2.21-1.69h-12.05c-1.03,0-1.94.69-2.21,1.69l-1.51,5.5-1.06.59c-.93.29-1.57,1.14-1.6,2.11l-.09,4.27c0,.41.15.81.43,1.11.29.3.68.46,1.09.46h21.94c.41,0,.81-.17,1.09-.46.29-.3.44-.69.43-1.11l-.08-4.27ZM12.16,16.73l1.16-4.23c.08-.29.35-.5.65-.5h12.05c.3,0,.57.2.65.5l1.16,4.23c.03.12,0,.24-.06.33-.07.09-.19.15-.3.15h-14.94c-.12,0-.23-.06-.3-.15-.07-.1-.1-.22-.06-.33ZM11.15,24.22c-1.04,0-1.89-.84-1.89-1.89s.85-1.89,1.89-1.89,1.89.85,1.89,1.89-.85,1.89-1.89,1.89ZM22.88,24.04h-5.75v-1.89h5.75v1.89ZM28.85,24.22c-1.04,0-1.89-.84-1.89-1.89s.85-1.89,1.89-1.89,1.89.85,1.89,1.89c0,1.04-.84,1.89-1.89,1.89Z"/></svg>');
}

#bicycle h3:before {
	background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40" fill="white"><path d="M14.77,20.37c.38.6.6,1.3.6,2.06,0,1.06-.43,2.02-1.13,2.72-.7.7-1.65,1.12-2.72,1.13-1.06,0-2.02-.43-2.72-1.13-.7-.7-1.12-1.65-1.12-2.72,0-1.06.43-2.02,1.12-2.72.7-.7,1.65-1.12,2.72-1.13.44,0,.86.08,1.26.21.28-.47.53-.95.77-1.44-.63-.25-1.31-.39-2.03-.39-3.02,0-5.46,2.44-5.46,5.46,0,3.02,2.44,5.46,5.46,5.46,3.02,0,5.46-2.44,5.46-5.46,0-1.38-.52-2.64-1.36-3.6-.27.52-.55,1.04-.86,1.54ZM15.93,11.8c.1.13.15.29.15.45,0,.08-.01.16-.04.23l-.71,2.22c-.78,2.43-1.97,4.71-3.53,6.73l-.95,1.24.96.74.95-1.24c1.46-1.9,2.62-4.02,3.44-6.27h5.86l-1.31,3.65c.41.06.8.2,1.14.41l1.89-5.27h-7.17l.59-1.83c.06-.2.09-.4.09-.61,0-.41-.13-.82-.38-1.17-.37-.51-.97-.81-1.6-.81h-1.89v1.21h1.89c.25,0,.48.12.62.32ZM21.24,13.89l3.69.38c.22.02.41-.13.45-.34l.16-.9c.02-.12-.01-.24-.09-.34-.08-.09-.19-.15-.32-.15h-3.84c-.23,0-.41.19-.41.41v.52c0,.21.16.39.37.41ZM28.99,16.97c-2.58,0-4.74,1.8-5.31,4.21h1.68c.19-.56.5-1.05.91-1.46.7-.7,1.65-1.12,2.72-1.12,1.06,0,2.02.43,2.72,1.12.7.7,1.12,1.65,1.12,2.72,0,1.06-.43,2.02-1.12,2.72-.7.7-1.65,1.12-2.72,1.13-1.06,0-2.02-.43-2.72-1.13-.41-.41-.72-.91-.91-1.46h-1.68c.57,2.41,2.73,4.21,5.31,4.21,3.02,0,5.46-2.44,5.46-5.46,0-3.02-2.44-5.46-5.46-5.46ZM28.99,23.04v-1.21h-5.77c.04.2.06.4.06.61s-.02.41-.06.61h5.77ZM20.77,22.32h-.02c-.05-.17-.2-.31-.39-.31-.23,0-.41.19-.41.42,0,.1.04.19.1.26l1.22,3.04h-.94v1.08h2.72v-1.08h-.92l-1.36-3.41ZM19.91,23.48c-.41-.17-.69-.58-.69-1.05,0-.63.51-1.14,1.14-1.14.63,0,1.14.51,1.14,1.14,0,.16-.03.31-.09.45l.44,1.16c.43-.4.71-.97.71-1.61,0-1.21-.98-2.19-2.19-2.19s-2.19.98-2.19,2.19c0,1.2.97,2.18,2.17,2.19l-.43-1.14Z"/></svg>');
}