/* CSS Document */

#main{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	padding-bottom: 64px;
	&>*{
		grid-column: 2;
		}
	}

#access{
	grid-column: 1 / 4;
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	grid-row-gap: 32px;
	@media (min-width: 1200px) {
		grid-row-gap: 48px;
		}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1 / 3;
		background: url(/common/images/pattern.webp) center;
		}
	&>*{
		grid-column: 2;
		}
	h2{
		grid-row: 1;
		justify-self: center;
		display: grid;
		grid-template-columns: 16px 1fr;
		grid-gap: 16px;
		margin-top: 32px;
		font-weight: 700;
		font-size: 24px;
		letter-spacing: 0.1em;
		@media (min-width: 1200px) {
			grid-template-columns: 24px 1fr;
			grid-gap: 24px;
			margin-top: 48px;
			font-size: 32px;
			}
		&:before{
			content: "";
			height: 4px;
			margin-top: 0.75em;
			background: var(--color-theme);
			border-radius: 2px;
			transform: translateY(50%);
			}
		&:only-child{
			margin-bottom: 32px;
			@media (min-width: 1200px) {
				margin-bottom: 48px;
				}
			}
		}
	#tab{
		grid-column: 1 / 4;
		grid-row: 2;
		}
	}

#tab{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		border-bottom: 1px solid var(--color-border);
		}
	ul{
		grid-column: 2;
		grid-row: 1;
		display: flex;
		justify-content: start;
		padding-top: 16px;
		z-index: 1;
		@media (min-width: 1200px) {
			padding-top: 24px;
			}
		}
	li{
		display: contents;
		:nth-child(n+2) a{
			margin-left: -1px;
			}
		}
	a{
		display: grid;
		align-items: center;
		min-height: 48px;
		padding: 4px 16px;
		background: var(--color-theme);
		border: 0 solid transparent;
		border-width: 1px 1px 0 1px;
		color: #fff;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		@media (min-width: 576px) {
			min-width: 240px;
			padding: 8px 24px;
			}
		@media (min-width: 1200px) {
			min-width: 290px;
			}
		.select &{
			margin-top: -16px;
			background: #fff;
			border-color: var(--color-border);
			color: inherit;
			@media (min-width: 1200px) {
				margin-top: -24px;
				}
			}
		}
	}

#accessMap{
	margin-top: 16px;
	overflow: hidden;
	iframe{
		width: 100%;
		height: 100%;
		aspect-ratio: 16 / 9;
		border: 1px solid var(--color-theme);
		}
	}

#route{
	display: grid;
	grid-row-gap: 32px;
	margin-top: 48px;
	@media (min-width: 1200px) {
		grid-row-gap: 48px;
		margin-top: 64px;
		}
	h2{
		display: grid;
		grid-gap: 24px;
		font-weight: 700;
		font-size: 20px;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			align-self: center;
			}
		&:before{
			border-top: 3px solid var(--color-theme);
			}
		&:after{
			justify-self: center;
			aspect-ratio: 1;
			width: 80px;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path fill="white" d="M40,31c-2.49,0-4.5,2.01-4.5,4.5s2.01,4.5,4.5,4.5,4.5-2.01,4.5-4.5-2.01-4.5-4.5-4.5ZM0,0v80h80V0H0ZM40,58s-13.5-15.04-13.5-22.5,6.04-13.5,13.5-13.5,13.5,6.04,13.5,13.5-13.5,22.5-13.5,22.5Z"/></svg>') center no-repeat;
			background-size: contain;
			border: 3px solid var(--color-theme);
			border-radius: 100%;
			outline: 8px solid #fff;
			border-radius: 100%;
			}
		@media (min-width: 1200px) {
			font-size: 24px;
			}
		}
	h2+div{
		display: flex;
		justify-content: center;
		margin-top: 24px;
		a{
			display: grid;
			grid-template-columns: auto 16px;
			align-items: center;
			grid-gap: 8px;
			font-weight: 700;
			text-align: center;
			text-wrap: balance;
			&:after{
				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 16 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="9 .5 15.5 7 9 13.5"/><line x1=".5" y1="7.03" x2="15.5" y2="7.03"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				transition: all 0.2s ease-out;
				}
				&:hover:after{
					transform: translateX(4px);
					}
			}
		}
	form{
		display: grid;
		grid-gap: 48px;
		@media (min-width: 1200px) {
			grid-gap: 56px;
			}
		}
	figcaption{
		display: grid;
		grid-template-columns: 16px auto;
		align-items: center;
		grid-gap: 16px;
		font-weight: 700;
		font-size: 20px;
		@media (min-width: 1200px) {
			grid-template-columns: 24px 1fr;
			}
		&:before{
			content: "";
			height: 4px;
			background: var(--color-theme);
			border-radius: 2px;
			}
		}
	ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(278px, 1fr));
		grid-gap: 16px;
		margin-top: 16px;
		}
	li{
		input{
			display: none;
			&[type="radio"]:checked+label{
				background: var(--color-theme);
				border-color: transparent;
				color: #fff;
				&:before{
					background: currentColor;
					border-color: inherit;
					}
				}
			}
		}
	label{
		display: grid;
		grid-template-columns: auto 16px;
		align-items: center;
		grid-gap: 8px;
		min-height: 56px;
		padding: 8px 24px;
		background: #fff;
		border: 1px solid var(--color-border);
		border-radius: 32px;
		font-weight: 700;
		text-align: center;
		text-wrap: balance;
		text-decoration: none;
		&:after{
			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 16 14" style="fill: none; stroke: black; stroke-linecap: round; stroke-linejoin: round;"><polyline points="9 .5 15.5 7 9 13.5"/><line x1=".5" y1="7.03" x2="15.5" y2="7.03"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transition: all 0.2s ease-out;
			}
			&:hover:after{
				transform: translateX(4px);
				}
		}
	}

#links{
	display: grid;
	grid-gap: 24px;
	margin-top: 64px;
	@media (min-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
		}
	@media (min-width: 1200px) {
		margin-top: 80px;
		}
	h2{
		display: grid;
		grid-gap: 24px;
		margin-bottom: 24px;
		font-weight: 700;
		font-size: 20px;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			align-self: center;
			}
		&:before{
			border-top: 3px solid var(--color-theme);
			}
		&:after{
			justify-self: center;
			aspect-ratio: 1;
			width: 80px;
			background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80"><path fill="white" d="M0,0v80h80V0H0ZM32.8,40c0,.33-.04.66-.1.97l15.94,7.97c.99-1.07,2.39-1.75,3.95-1.75,2.98,0,5.4,2.42,5.4,5.4s-2.42,5.4-5.4,5.4-5.4-2.42-5.4-5.4c0-.33.04-.66.1-.97l-15.94-7.97c-.99,1.07-2.39,1.75-3.95,1.75-2.98,0-5.4-2.42-5.4-5.4s2.42-5.4,5.4-5.4c1.57,0,2.97.68,3.95,1.75l15.94-7.97c-.06-.32-.1-.64-.1-.97,0-2.98,2.42-5.4,5.4-5.4s5.4,2.42,5.4,5.4-2.42,5.4-5.4,5.4c-1.57,0-2.97-.68-3.95-1.75l-15.94,7.97c.06.32.1.64.1.97Z"/></svg>') center no-repeat;
			background-size: contain;
			border: 3px solid var(--color-theme);
			border-radius: 100%;
			outline: 8px solid #fff;
			border-radius: 100%;
			}
		@media (min-width: 768px) {
			grid-column: 1 / 3;
			}
		@media (min-width: 1200px) {
			font-size: 24px;
			}
		}
	section{
		display: grid;
		align-content: start;
		grid-gap: 24px 32px;
		padding: 24px;
		border: 1px solid var(--color-theme);
		@media (min-width: 576px) {
			grid-template-columns: 120px 1fr;
			}
		@media (min-width: 768px) {
			grid-template-columns: 1fr;
			}
		@media (min-width: 992px) {
			grid-template-columns: 120px 1fr;
			}
		}
	h3{
		display: grid;
		justify-items: center;
		grid-gap: 16px;
		color: var(--color-theme);
		font-weight: 700;
		text-align: center;
		text-wrap: balance;
		#train &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M27.95,52.77h24.1c.63,0,1.14-.51,1.14-1.14v-8.68c0-.63-.01-1.66-.02-2.29l-.29-13.79c-.01-.63-.51-1.31-1.11-1.51,0,0-2.88-.97-7.74-1.35v-2.36h2.41c.5,0,.91-.37.91-.82s-.41-.82-.91-.82h-12.91c-.5,0-.91.37-.91.82s.41.82.91.82h2.41v2.4c-4.72.41-7.73,1.34-7.73,1.34-.6.19-1.1.85-1.12,1.48l-.29,13.79c-.01.63-.02,1.66-.02,2.29v8.68c0,.63.52,1.14,1.14,1.14ZM48.79,49.62c-.87,0-1.57-.7-1.57-1.57s.7-1.57,1.57-1.57,1.57.71,1.57,1.57-.7,1.57-1.57,1.57ZM37.19,21.65h5.62v2.28c-.81-.04-1.66-.07-2.56-.07-1.08,0-2.1.04-3.07.09v-2.31ZM29.86,29.6c.01-.63.54-1.14,1.17-1.14h17.93c.63,0,1.16.52,1.17,1.14l.17,7.57c.01.63-.49,1.14-1.12,1.14h-18.38c-.63,0-1.13-.51-1.12-1.14l.17-7.57ZM31.21,46.47c.87,0,1.57.71,1.57,1.57s-.7,1.57-1.57,1.57-1.57-.7-1.57-1.57.7-1.57,1.57-1.57ZM53.84,58.8l-5.01-5.01h-1.92l1.07,1.07h-15.96l1.07-1.07h-1.92l-1.29,1.29c-.05.04-.1.09-.14.14l-3.58,3.58c-.3.3-.32.76-.06,1.02.26.26.72.24,1.02-.06l.75-.75h24.25l.75.75c.3.3.76.32,1.02.06.26-.26.24-.72-.06-1.02ZM29.23,57.65l1.43-1.44h18.67l1.43,1.44h-21.54Z"/></svg>');
			}
		#bus &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M27.76,58.67c0,.73.6,1.33,1.33,1.33h1.76c.73,0,1.33-.6,1.33-1.33v-3.43h-4.43v3.43ZM22.17,30.83h-.17c-1.1,0-2,.9-2,2v2.67c0,1.1.9,2,2,2h.17c1.1,0,2-.9,2-2v-2.67c0-1.1-.9-2-2-2ZM58,30.83h-.17c-1.1,0-2,.9-2,2v2.67c0,1.1.9,2,2,2h.17c1.1,0,2-.9,2-2v-2.67c0-1.1-.9-2-2-2ZM54.55,23c-.03-.73-.64-1.5-1.34-1.7,0,0-4.61-1.3-12.91-1.3s-13.49,1.33-13.49,1.33c-.71.18-1.32.93-1.35,1.66l-.77,16.56c-.03.73-.06,1.93-.06,2.67v10.57c0,.73.6,1.33,1.33,1.33h28.08c.73,0,1.33-.6,1.33-1.33v-10.57c0-.73-.03-1.93-.06-2.67l-.77-16.56ZM30.59,24.12c0-.35.29-.64.64-.64h17.55c.35,0,.64.29.64.64v1.43c0,.35-.29.64-.64.64h-17.55c-.35,0-.64-.29-.64-.64v-1.43ZM29.76,50.62c-1.25,0-2.26-1.01-2.26-2.26s1.01-2.26,2.26-2.26,2.26,1.01,2.26,2.26-1.01,2.26-2.26,2.26ZM29.29,39.68c-.73,0-1.32-.6-1.3-1.33l.2-8.82c.02-.73.63-1.33,1.36-1.33h20.9c.73,0,1.35.6,1.36,1.33l.2,8.82c.02.73-.57,1.33-1.3,1.33h-21.41ZM50.24,50.62c-1.25,0-2.26-1.01-2.26-2.26s1.01-2.26,2.26-2.26,2.26,1.01,2.26,2.26-1.01,2.26-2.26,2.26ZM47.81,58.67c0,.73.6,1.33,1.33,1.33h1.76c.73,0,1.33-.6,1.33-1.33v-3.43h-4.43v3.43Z"/></svg>');
			}
		#taxi &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M49.97,56.94c0,.96.79,2.12,1.75,2.12h2.31c.96,0,1.75-1.16,1.75-2.12v-3.18h-5.8v3.18ZM24.23,56.94c0,.96.79,2.12,1.75,2.12h2.31c.96,0,1.75-1.16,1.75-2.12v-3.18h-5.8v3.18ZM59.1,39.28c-.07-.96-.92-1.74-1.88-1.74h-.54l-3.46-9.71c-.61-1.71-2.44-3-4.25-3h-4.23v-3.05c0-.46-.37-.83-.83-.83h-7.82c-.46,0-.83.37-.83.83v3.05h-4.23c-1.81,0-3.64,1.29-4.25,3l-3.46,9.71h-.54c-.96,0-1.81.78-1.88,1.74l-.89,11.46c-.07.96.65,1.74,1.61,1.74h36.77c.96,0,1.69-.78,1.61-1.74l-.89-11.46ZM30.61,29.2c.05-.11.3-.29.42-.3h17.94c.12.01.37.19.42.29l2.97,8.34h-24.72l2.97-8.34ZM27.68,47.87c-1.64,0-2.96-1.33-2.96-2.96s1.33-2.96,2.96-2.96,2.96,1.33,2.96,2.96-1.33,2.96-2.96,2.96ZM52.32,47.87c-1.64,0-2.96-1.33-2.96-2.96s1.33-2.96,2.96-2.96,2.96,1.33,2.96,2.96-1.33,2.96-2.96,2.96Z"/></svg>');
			}
		#road &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M59.04,27.47c0-4.12-3.34-7.47-7.47-7.47s-7.47,3.34-7.47,7.47,7.47,12.05,7.47,12.05c0,0,7.47-7.93,7.47-12.05ZM48,27.47c0-1.97,1.6-3.57,3.57-3.57s3.57,1.6,3.57,3.57-1.6,3.57-3.57,3.57-3.57-1.6-3.57-3.57ZM22,28.38h4.07c1.1,0,2-.9,2-2v-2.39c0-1.1-.9-2-2-2h-4.07c-1.1,0-2,.9-2,2v2.39c0,1.1.9,2,2,2ZM48.13,54.94h-2.39c-1.1,0-2,.9-2,2v1.06c0,1.1.9,2,2,2h2.39c1.1,0,2-.9,2-2v-1.06c0-1.1-.9-2-2-2ZM60,46.5v-.93c0-1.1-.9-2-2-2h-16.71c-1.1,0-2-.9-2-2v-19.57c0-1.1-.9-2-2-2h-3.15c-1.1,0-2,.9-2,2v19.57c0,1.1-.9,2-2,2h-8.14c-1.1,0-2,.9-2,2v.93h2.73v1h-2.73v1.22c0,1.1.9,2,2,2h8.14c1.1,0,2,.9,2,2v5.28c0,1.1.9,2,2,2h1.09s1,0,1,0h0s1.06,0,1.06,0c1.1,0,2-.9,2-2v-5.28c0-1.1.9-2,2-2h16.71c1.1,0,2-.9,2-2v-1.22h-3.27v-1h3.27ZM30.73,47.5h-4v-1h4v1ZM36.23,56h-1v-4h1v4ZM36.23,42h-1v-4h1v4ZM36.23,34h-1v-4h1v4ZM36.23,26h-1v-4h1v4ZM44.73,47.5h-4v-1h4v1ZM52.73,47.5h-4v-1h4v1ZM58,54.94h-2.39c-1.1,0-2,.9-2,2v1.06c0,1.1.9,2,2,2h2.39c1.1,0,2-.9,2-2v-1.06c0-1.1-.9-2-2-2ZM22,38.25h4.07c1.1,0,2-.9,2-2v-2.39c0-1.1-.9-2-2-2h-4.07c-1.1,0-2,.9-2,2v2.39c0,1.1.9,2,2,2Z"/></svg>');
			}
		#car &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M24.23,55c0,.96.79,2.12,1.75,2.12h2.31c.96,0,1.75-1.16,1.75-2.12v-3.18h-5.8v3.18ZM59.1,37.34c-.07-.96-.92-1.74-1.88-1.74h-.54l-3.46-9.71c-.61-1.71-2.44-3-4.25-3h-17.95c-1.81,0-3.64,1.29-4.25,3l-3.46,9.71h-.54c-.96,0-1.81.78-1.88,1.74l-.89,11.46c-.07.96.65,1.74,1.61,1.74h36.77c.96,0,1.69-.78,1.61-1.74l-.89-11.46ZM30.61,27.26c.05-.11.3-.29.42-.3h17.94c.12.01.37.19.42.29l2.97,8.34h-24.72l2.97-8.34ZM27.68,45.93c-1.64,0-2.96-1.33-2.96-2.96s1.33-2.96,2.96-2.96,2.96,1.33,2.96,2.96-1.33,2.96-2.96,2.96ZM52.32,45.93c-1.64,0-2.96-1.33-2.96-2.96s1.33-2.96,2.96-2.96,2.96,1.33,2.96,2.96-1.33,2.96-2.96,2.96ZM49.97,55c0,.96.79,2.12,1.75,2.12h2.3c.96,0,1.75-1.16,1.75-2.12v-3.18h-5.8v3.18Z"/></svg>');
			}
		#airline &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M62.29,43.92l-19.23-12.19v-9.75c0-3.8-1.12-5.98-3.06-5.98s-3.06,2.18-3.06,5.98v9.75l-19.23,12.19c-.12.08-.19.21-.19.35v3.63c0,.13.06.26.17.33.11.08.25.1.38.06l16.88-5.17h1.99v13.37c0,.16,0,.33.02.51l-5.18,4.83c-.08.08-.13.19-.13.3v1.45c0,.13.06.25.17.33.11.08.24.1.37.07l6.12-1.75c.47.67,1.26,1.38,1.69,1.38s1.23-.71,1.7-1.38l6.12,1.75s.08.02.12.02c.09,0,.18-.03.25-.08.11-.08.17-.2.17-.33v-1.45c0-.11-.05-.22-.13-.3l-5.18-4.83c.01-.18.02-.35.02-.51v-13.37h1.99l16.88,5.17c.13.04.27.02.38-.06.11-.08.17-.2.17-.33v-3.63c0-.14-.07-.27-.19-.35Z"/></svg>');
			}
		#etc &:before{
			background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" fill="white"><path d="M44.34,56.92h-2.41v-11.29h-3.86v11.29h-2.41c-1.37,0-2.48,1.11-2.48,2.48v.6h13.63v-.6c0-1.37-1.11-2.48-2.48-2.48ZM41.93,20h-3.86v2.57h3.86v-2.57ZM24.03,40.64l3.23,3.98h21.84v-7.96h-21.84l-3.23,3.98ZM38.07,32.53v3.13h3.86v-3.13h-3.86ZM52.73,23.57h-21.84v7.96h21.84l3.23-3.98-3.23-3.98Z"/></svg>');
			}
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 80px;
			background: currentColor;
			background-size: cover;
			border-radius: 100%;
			}
		}
	ul{
		display: grid;
		grid-gap: 8px;
		}
	li{
		display: contents;
		a{
			display: grid;
			grid-template-columns: 16px auto;
			grid-gap: 8px;
			color: var(--color-theme);
			&: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 16 16" style="fill: none; stroke: black; stroke-miterlimit: 10;"><rect x="4.5" y=".5" width="11" height="11"/><polyline points=".5 5.5 .5 15.5 10.5 15.5"/></svg>') center no-repeat;
				-webkit-mask-size: contain;
				transform: translateY(0.4em);
				}
			}
		}
	}

.routeSubmit{
	display: flex;
	justify-content: center;
	button{
		justify-self: center;
		display: grid;
		grid-template-columns: 22px 1fr;
		align-items: center;
		grid-gap: 16px;
		width: min(100%, 480px);
		min-height: 56px;
		margin: 0;
		padding: 8px 24px;
		border: 1px solid var(--color-border);
		border-radius: 32px;
		background: #fff;
		color: inherit;
		font-weight: 700;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		transition: all 0.2s ease-out;
		&:hover{
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
			}
		&: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 16 21.33"><path d="M8,0C3.58,0,0,3.58,0,8s8,13.33,8,13.33c0,0,8-8.92,8-13.33S12.42,0,8,0ZM8,10.67c-1.47,0-2.67-1.19-2.67-2.67s1.19-2.67,2.67-2.67,2.67,1.19,2.67,2.67-1.19,2.67-2.67,2.67Z"/></svg>') center no-repeat;
			-webkit-mask-size: contain;
			transition: transform 0.2s ease-out;
			}
			&:hover:before{
				background: currentColor;
				transform: translateY(-2px);
				}
			}
		}
	}