/* CSS Document */

#main{
	margin-bottom: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
}

#access{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	overflow: hidden;
	&>*{
		grid-column: 2;
	}
	&:before{
		content: "";
		grid-column: 1 / 4;
		grid-row: 1;
		background: var(--color-theme) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 1366 400"><path fill="white" opacity="0.1" d="M1366,23.59c-49.72-11.77-99.48-14.67-129.8-13.61-72.45,2.53-178.28,33.01-293.37,99-115.09,66-225.53,101.23-331.84,117.95-106.31,16.72-223.2,3.97-276.26-12.54s-163.7-59.58-216.27-89.37C118.46,125.02,65.87,92.63,0,85.07v262.08c42.97,5.38,91.05,1.56,142.21-15.86,145.25-49.45,176.76-76.57,288.31-79.7,111.56-3.13,200.19,20.55,289.72,42.68,89.53,22.12,389.57,114.18,563.27,86.69,29.99-4.75,57.55-11.84,82.48-20.89V23.59Z"/></svg>') no-repeat center -24px / max(640px, 100%) clamp(240px, calc(400 / 1200 * 100dvw), 400px);
	}
	& h2{
		grid-row: 1;
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: center;
		column-gap: 0.5em;
		margin: clamp(48px, calc(64 / 1200 * 100dvw), 64px) 0;
		color: #fff;
		font-weight: 700;
		font-size: clamp(24px, calc(35 / 768 * 100dvw), 35px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 1em;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 449 449"><path d="M406.82,334.03c-12.63-12.63-29.76-19.73-47.62-19.73s-34.99,7.1-47.62,19.73c-12.63,12.63-19.73,29.76-19.73,47.62s7.1,34.99,19.73,47.62c12.63,12.63,29.76,19.73,47.62,19.73s34.99-7.1,47.62-19.73c12.63-12.63,19.73-29.76,19.73-47.62s-7.1-34.99-19.73-47.62ZM375.07,397.52c-4.21,4.21-9.92,6.58-15.87,6.58s-11.66-2.37-15.87-6.58c-4.21-4.21-6.57-9.92-6.57-15.87s2.37-11.66,6.57-15.87c4.21-4.21,9.92-6.57,15.87-6.57s11.66,2.37,15.87,6.57c4.21,4.21,6.57,9.92,6.57,15.87s-2.37,11.66-6.57,15.87ZM246.95,359.2h-101.02c-14.89,0-29.16-5.91-39.69-16.44s-16.44-24.8-16.44-39.69,5.91-29.16,16.44-39.69,24.8-16.44,39.69-16.44h157.15c26.79,0,52.49-10.64,71.44-29.59s29.59-44.64,29.59-71.43-10.64-52.49-29.59-71.44c-18.95-18.95-44.64-29.59-71.44-29.59h-101.02c-5.95,0-11.67,2.37-15.87,6.58-4.21,4.21-6.58,9.92-6.58,15.87s2.37,11.66,6.58,15.87c4.21,4.21,9.92,6.58,15.87,6.58h101.02c14.89,0,29.16,5.91,39.69,16.44,10.53,10.53,16.44,24.8,16.44,39.69s-5.91,29.16-16.44,39.69c-10.53,10.53-24.8,16.44-39.69,16.44h-157.15c-26.79,0-52.49,10.64-71.44,29.59-18.95,18.95-29.59,44.64-29.59,71.44s10.64,52.49,29.59,71.44c18.95,18.95,44.64,29.59,71.44,29.59h101.02c5.95,0,11.67-2.37,15.87-6.58s6.58-9.92,6.58-15.87-2.37-11.66-6.58-15.87-9.92-6.57-15.87-6.57ZM137.42,114.97c12.63-12.63,19.73-29.76,19.73-47.62s-7.1-34.99-19.73-47.62C124.79,7.1,107.66,0,89.8,0s-34.99,7.1-47.62,19.73c-12.63,12.63-19.73,29.76-19.73,47.62s7.1,34.99,19.73,47.62c12.63,12.63,29.76,19.73,47.62,19.73s34.99-7.1,47.62-19.73ZM67.35,67.35c0-5.95,2.37-11.66,6.58-15.87,4.21-4.21,9.92-6.58,15.87-6.58s11.66,2.37,15.87,6.58c4.21,4.21,6.57,9.92,6.57,15.87s-2.37,11.66-6.57,15.87-9.92,6.58-15.87,6.58-11.66-2.37-15.87-6.58c-4.21-4.21-6.58-9.92-6.58-15.87Z"/></svg>') no-repeat center / contain;
		}
	}
	#map{
		margin-top: clamp(24px, calc(48 / 1200 * 100dvw), 48px);
		& iframe{
			width: 100%;
			height: clamp(480px, calc(560 / 1200 * 100dvw), 560px);
		}
	}
	#tab{
		margin-top: clamp(48px, calc(72 / 1200 * 100dvw), 72px);
	}
}

#tab{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	& ul{
		display: grid;
		column-gap: clamp(8px, calc(16 / 1200 * 100dvw), 16px);
		& a{
			grid-row: 1;
		}
		@media (min-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	& li{
		display: contents;
	}
	& a{
		position: relative;
		display: grid;
		align-items: center;
		column-gap: 8px;
		min-height: 48px;
		padding: 8px 0.5em 4px 0.5em;
		background: #e8e8e8;
		border-radius: 2px 2px 0 0;
		color: inherit;
		font-weight: 700;
		font-size: clamp(14px, calc(18 / 768 * 100dvw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		text-decoration: none;
		word-break: keep-all;
		overflow-wrap: anywhere;
		&:before{
			content: "";
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 6px;
			background: #d3e3f2;
			border-radius: 2px;
		}
		.select &{
			background: #d3e3f2;
		}
	}
}

#route{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	padding: clamp(24px, calc(56 / 1200 * 100dvw), 56px) 0;
	background: #d3e3f2;
	& h2{
		display: none;
	}
	& form{
		display: contents;
	}
	& fieldset{
		
	}
	& legend{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
		&:before{
			content: "";
			width: 3px;
			height: 1em;
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& legend+div{
		margin-top: 16px;
	}
	& ul{
		display: grid;
		grid-gap: 16px 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 16px), 240px), 1fr));
	}
	& li{
		display: contents;
	}
	& label{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 240px);
		min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		padding: 0.25em 1.5em;
		background: #fff;
		border: 1px solid var(--color-theme);
		border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
		&:has(:checked){
			background: var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
		& input{
			display: none;
		}
	}
	& dl{
		display: grid;
		grid-row-gap: 16px;
		margin-top: clamp(16px, calc(24 / 1200 * 100dvw), 24px);
	}
	& dt{
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
	}
}

#routeSubmit{
	display: flex;
	justify-content: center;
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		align-items: center;
		column-gap: 0.5em;
		min-width: min(100%, 320px);
		min-height: clamp(48px, calc(56 / 768 * 100dvw), 56px);
		padding: 0.25em 1.5em;
		background: var(--color-theme);
		border-radius: clamp(24px, calc(28 / 768 * 100dvw), 28px);
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.05em;
		text-align: center;
	}
}

#links{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(24px, calc(56 / 1200 * 100dvw), 56px);
	& h2{
		display: grid;
		grid-row-gap: 0.5em;
		padding: 0 1em;
		color: inherit;
		font-weight: 700;
		font-size: clamp(18px, calc(22 / 768 * 100dvw), 22px);
		text-decoration: none;
		&:before,
		&:after{
			content: "";
			height: 8px;
			margin: 0 -1em;
			color: var(--color-theme);
		}
		&:before{
			border-top: 1px solid currentColor;
			border-bottom: 2px dotted currentColor;
		}
		&:after{
			border-top: 2px dotted currentColor;
			border-bottom: 1px solid currentColor;
		}
	}
	& h2+div{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 296px), 1fr));
		grid-gap: clamp(24px, calc(32 / 1200 * 100dvw), 32px) 16px;
		margin-top: clamp(24px, calc(32 / 1200 * 100dvw), 32px);
	}
	& section{
		display: grid;
		align-content: flex-start;
		grid-row-gap: 16xp;
	}
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100dvw), 18px);
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 40px;
			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 512 512"><path d="M246.68,303.59c.31,2.08,1.35,4.07,3.1,5.99,1.75,1.91,3.82,2.87,6.21,2.87,5.57,0,8.68-2.95,9.31-8.85l18.64-143.21c.31-2.53.47-6.13.47-10.75,0-7.17-2.47-13.69-7.4-19.59-4.94-5.89-11.95-8.84-21.03-8.84s-16.5,3.02-21.27,9.07c-4.78,5.9-7.17,12.36-7.17,19.36,0,4.31.16,7.89.47,10.75l18.64,143.21ZM256,333.21c-8.12,0-14.97,2.8-20.56,8.36-5.58,5.58-8.36,12.35-8.36,20.32s2.78,14.41,8.36,20.3c5.58,5.74,12.44,8.6,20.56,8.6s14.96-2.78,20.55-8.36c5.57-5.56,8.36-12.42,8.36-20.54s-2.78-14.98-8.36-20.56c-5.41-5.42-12.27-8.13-20.55-8.13ZM437.01,74.98C390.77,28.7,326.61-.01,256,0,185.39-.01,121.22,28.7,74.98,74.98,28.7,121.22-.02,185.39,0,256c-.02,70.61,28.7,134.78,74.98,181.02,46.24,46.28,110.42,74.99,181.02,74.98,70.61.02,134.77-28.7,181.01-74.98,46.29-46.24,75-110.41,74.99-181.02.01-70.61-28.7-134.78-74.99-181.02ZM399.47,399.47c-36.81,36.76-87.36,59.42-143.47,59.43-56.12-.01-106.67-22.67-143.47-59.43-36.76-36.8-59.41-87.36-59.43-143.47.01-56.12,22.67-106.67,59.43-143.47,36.8-36.76,87.36-59.41,143.47-59.43,56.11.02,106.67,22.67,143.47,59.43,36.76,36.8,59.41,87.35,59.43,143.47-.02,56.12-22.67,106.67-59.43,143.47Z"/></svg>') no-repeat center / contain;
		}
		&[data-icon="train"]:before{
			-webkit-mask-image:  url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M431.67,356.85v-209.64c0-48.02-38.92-86.94-86.94-86.94h-40.36l4.81-42.82h8.81c9.43,0,17.51,5.74,20.97,13.9l16.06-6.78h0C348.94,10.12,334.65.02,317.99,0h-123.98c-16.64.02-30.93,10.12-37.02,24.55l16.06,6.8c3.47-8.17,11.54-13.91,20.96-13.9h8.82l4.81,42.82h-40.35c-48.01,0-86.94,38.92-86.94,86.94v209.64c0,36.4,26.48,66.74,61.21,72.77l-54.53,82.38h48.49l22.38-33.82h196.26l22.38,33.82h48.47l-54.52-82.38c34.71-6.04,61.19-36.37,61.19-72.77ZM291.63,17.44l-4.8,42.82h-61.64l-4.82-42.82h71.26ZM180.72,99.3h150.57v25.09h-150.57v-25.09ZM135.42,180.41h0c0-10.92,8.84-19.77,19.76-19.77h201.66c10.92,0,19.77,8.86,19.77,19.77v65.96c0,10.92-8.86,19.76-19.77,19.76h-201.66c-10.92,0-19.76-8.85-19.76-19.76v-65.96ZM154.24,378.49c-12.74,0-23.06-10.32-23.06-23.04s10.32-23.05,23.06-23.05,23.04,10.31,23.04,23.05-10.32,23.04-23.04,23.04ZM172.43,456.19l16.84-25.46h133.47l16.84,25.46h-167.16ZM357.78,378.49c-12.72,0-23.04-10.32-23.04-23.04s10.32-23.05,23.04-23.05,23.06,10.31,23.06,23.05-10.32,23.04-23.06,23.04Z"/></svg>')
		}
		&[data-icon="bus"]:before{
			-webkit-mask-image:  url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M354.27,472.36v29.87c0,5.39,4.38,9.77,9.77,9.77h58.03c5.39,0,9.77-4.38,9.77-9.77v-42.8c-14.83,8.22-31.88,12.92-49.99,12.92h-27.58ZM80.16,459.43v42.8c0,5.39,4.38,9.77,9.78,9.77h58.03c5.39,0,9.77-4.38,9.77-9.77v-29.87h-27.58c-18.14,0-35.17-4.7-50-12.92ZM365.71,0h-219.42C86.92,0,38.79,48.13,38.79,107.51v261.41c0,50.38,40.99,91.37,91.37,91.37h251.69c50.38,0,91.36-40.99,91.36-91.37V107.51c0-59.38-48.13-107.51-107.5-107.51ZM162.92,48.26h186.19v31.04h-186.19v-31.04ZM106.88,148.55c0-13.49,10.95-24.43,24.45-24.43h249.37c13.49,0,24.43,10.94,24.43,24.43v103.14c0,13.49-10.93,24.44-24.43,24.44h-249.37c-13.49,0-24.45-10.94-24.45-24.44v-103.14ZM130.17,395.7c-15.74,0-28.51-12.76-28.51-28.51s12.76-28.51,28.51-28.51,28.5,12.76,28.5,28.51-12.76,28.51-28.5,28.51ZM312.14,430.98h-106.88v-46.54h106.88v46.54ZM381.86,395.7c-15.74,0-28.51-12.76-28.51-28.51s12.76-28.51,28.51-28.51,28.5,12.76,28.5,28.51c0,15.74-12.76,28.51-28.5,28.51Z"/></svg>');
		}
		&[data-icon="ship"]:before{
			-webkit-mask-image:  url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M152.92,217.98h47.32v-47.31h-47.32v47.31ZM311.77,217.98h47.3v-47.31h-47.3v47.31ZM466.59,300.21l-33.16-14.27v-127.08c.02-6.03-1.23-11.84-3.46-17.11-3.34-7.91-8.9-14.59-15.9-19.33-6.99-4.73-15.54-7.52-24.58-7.51h-67.57V27.66c0-3.78-.78-7.45-2.2-10.77-2.1-4.98-5.59-9.18-10-12.16-4.39-2.98-9.79-4.73-15.48-4.73h-76.47c-3.79,0-7.47.77-10.78,2.18-4.98,2.11-9.19,5.6-12.16,10-2.98,4.4-4.73,9.81-4.73,15.48v87.24h-67.57c-6.03,0-11.85,1.23-17.12,3.46-7.91,3.35-14.58,8.9-19.33,15.91-4.73,7-7.52,15.53-7.52,24.58v127.08l-33.15,14.27c-16.45,7.08-24.42,25.82-18.13,42.58l69.88,169.21h317.67l69.86-169.21c6.3-16.76-1.69-35.5-18.12-42.58ZM220.52,54.07h70.96v30.42h-70.96v-30.42ZM403.01,272.83h0l-128.07-55.14c-12.08-5.21-25.79-5.21-37.89,0l-128.05,55.14v-113.98c0-1.91.37-3.65,1.05-5.26,1.02-2.4,2.75-4.51,4.92-5.97,2.18-1.46,4.7-2.29,7.56-2.3h266.95c1.91,0,3.66.37,5.26,1.06,2.42,1.02,4.52,2.75,5.99,4.92,1.45,2.18,2.29,4.7,2.29,7.55v113.98Z"/></svg>');
		}
		&[data-icon="plane"]:before{
			-webkit-mask-image:  url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M507.07,194.06c-5.3-6.14-13.76-8.51-21.48-6.01l-59.86,17.26c-11.41,3.7-23.81,2.79-34.57-2.51l-68.89-33.74,61.09-80.86c4.68-4.85,5.58-12.26,2.14-18.1-3.42-5.81-10.34-8.64-16.85-6.9l-121.17,53.12,23.6,11.57-16.23,8.12-24.69-12.1-105.89-51.9C65.8,43.26,18.15,52.69,3.16,83.21c-14.99,30.52,26.59,49.4,57.1,64.39l105.7,52.04,54.75,242.78c1.88,8.98,10,15.28,19.22,14.83,9.17-.46,16.63-7.51,17.63-16.67l33.96-179.16,73.57,36.23c47.07,21.73,97.26,19.64,112.25-10.86l32.58-70.61c3.59-7.27,2.47-15.99-2.85-22.12Z"/></svg>');
		}
		&[data-icon="road"]:before{
			-webkit-mask-image:  url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="white"><path d="M99.94,152.99L0,359.01h64.01l74.96-206.03h-39.02ZM265.77,152.99l.37,12.23h-20.27l.37-12.23h-78l-56.2,206.03h127.94l.91-29.86h30.22l.91,29.86h128.02l-56.23-206.03h-78.04ZM245.15,188.74h21.7l.82,27.12h-23.35l.82-27.12ZM242.24,284.63l1.13-37.22h25.26l1.13,37.22h-27.52ZM412.06,152.99h-39.02l74.95,206.03h64.01l-99.94-206.03Z"/></svg>');
		}
	}
	& h3+div{
		margin-top: 16px;
	}
	& ul{
		display: grid;
		grid-row-gap: 4px;
	}
	& li{
		display: contents;
	}
	& a{
		display: block;
		font-weight: 500px;
	}
}