/* CSS Document */

#main{
	margin-bottom: clamp(64px, calc(112 / 1200 * 100vw), 112px);
}

#access{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-bottom: clamp(40px, calc(56 / 1200 * 100vw), 56px);
	& h2{
		justify-self: center;
		display: grid;
		grid-row-gap: 4px;
		font-weight: 700;
		font-size: clamp(24px, calc(32 / 768 * 100vw), 32px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			justify-self: center;
			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 20 20"><path d="M3.83,16.5c0,.34.27.61.61.61h1.69c.34,0,.61-.27.61-.61v-1.26h-2.91v1.26ZM16.41,8.57l-.86-3.11c-.46-1.68-1.99-2.84-3.73-2.84h-3.64c-1.74,0-3.27,1.16-3.73,2.84l-.86,3.11c-1.15.44-1.97,1.56-1.97,2.86,0,1.69,1.37,3.07,3.07,3.07h10.63c1.69,0,3.07-1.37,3.07-3.07,0-1.31-.82-2.42-1.97-2.86ZM4.69,12.75c-.73,0-1.32-.59-1.32-1.32s.59-1.32,1.32-1.32,1.32.59,1.32,1.32-.59,1.32-1.32,1.32ZM13.69,7.14c-.05.07-.13.1-.21.1h-6.95c-.08,0-.16-.04-.21-.1-.05-.07-.07-.15-.04-.23l.31-1.13c.25-.9,1.07-1.52,2-1.52h2.84c.93,0,1.75.63,2,1.52l.31,1.13c.02.08,0,.17-.04.23ZM15.31,12.75c-.73,0-1.32-.59-1.32-1.32s.59-1.32,1.32-1.32,1.32.59,1.32,1.32-.59,1.32-1.32,1.32ZM13.26,16.5c0,.34.27.61.61.61h1.69c.34,0,.61-.27.61-.61v-1.26h-2.91v1.26Z"/></svg>') no-repeat center / contain;
		}
		&:after{
			content: "";
			height: 2px;
			background: linear-gradient(90deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
		}
	}
	& h2+div{
		margin-top: 24px;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		text-align: center;
		word-break: keep-all;
		overflow-wrap: anywhere;
	}
	#accessMap{
		margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	}
}

#accessMap{
	display: grid;
	//grid-template-columns: repeat(auto-fill, minmax(min(100%, 352px), 1fr));
	grid-gap: clamp(24px, calc(48 / 1200 * 100vw), 48px);
	& img{
		aspect-ratio: 3 / 2;
		object-fit: cover;
	}
	& iframe{
		aspect-ratio: 3 / 2;
		width: 100%;
		height: auto;
	}
}

#route{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(88 / 1200 * 100vw), 88px);
	& h2{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.03em;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: linear-gradient(180deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& form{
		display: grid;
		grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
}
#routeStart,
#routeGoal{
	& legend{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.05em;
	}
	& ul{
		display: grid;
		grid-gap: 16px 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 8px), 208px), 1fr));
		margin-top: 16px;
	}
	& li{
		display: contents;
	}
	& label{
		display: grid;
		grid-template-columns: 1fr;
		align-items: center;
		column-gap: 16px;
		min-height: 48px;
		padding: 4px 16px;
		background: #fff;
		border: 1px solid currentColor;
		border-radius: 24px;
		color: var(--color-theme);
		font-weight: 500;
		font-size: 15px;
		text-align: center;
		& input{
			display: none;
		}
		&:has(input:checked){
			background:  var(--color-theme);
			border-color: transparent;
			color: #fff;
		}
	}
	& dl{
		display: grid;
		grid-row-gap: 8px;
		margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	& dt{
		/*display: grid;*/
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.05em;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: var(--color-theme-sub);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& span{
		display: contents;
	}
}

#routeSubmit{
	display: flex;
	justify-content: center;
	align-items: center;
	& button{
		all: unset;
		box-sizing: border-box;
		cursor: pointer;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		min-width: min(100%, 360px);
		min-height: clamp(56px, calc(64 / 768 * 100vw), 64px);
		padding: 8px 24px;
		border: 1px solid currentColor;
		border-radius: 12px;
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(16px, calc(18 / 768 * 100vw), 18px);
		letter-spacing: 0.05em;
		text-align: center;
		cursor: pointer;
		&:before{
			content: "";
			content: "";
			aspect-ratio: 1;
			width: 28px;
			background: currentColor;
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 28 28"><path d="M22.65,9.96c0-4.78-3.87-8.65-8.65-8.65S5.35,5.18,5.35,9.96s8.65,15.96,8.65,15.96c0,0,8.65-11.18,8.65-15.96ZM10.11,9.45c0-2.15,1.74-3.89,3.89-3.89s3.89,1.74,3.89,3.89-1.74,3.89-3.89,3.89-3.89-1.74-3.89-3.89Z"/></svg>') no-repeat center / contain;
		}
	}
}

#links{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	margin-top: clamp(64px, calc(88 / 1200 * 100vw), 88px);
	& h2{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 0.5em;
		font-weight: 700;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.03em;
		&:before{
			content: "";
			width: 4px;
			height: 1em;
			background: linear-gradient(180deg, var(--color-theme-sub) 50%, var(--color-theme) 50%);
			transform: translateY(calc(0.875em - 50%));
		}
	}
	& h2+div{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 346px), 1fr));
		grid-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	& h3{
		color: var(--color-theme);
		font-weight: 700;
		font-size: clamp(18px, calc(20 / 768 * 100vw), 20px);
		letter-spacing: 0.05em;
	}
	& h3+div{
		margin-top: 16px;
		border-top: 1px solid var(--color-border);
	}
	& ul{
		display: grid;
		grid-row-gap: 16px;
		margin-top: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: auto 1fr;
		column-gap: 8px;
		color: inherit;
		text-decoration: none;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: var(--color-theme);
			transform: translateY(calc(0.875em - 50%));
			-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M451.5 160C434.9 160 418.8 164.5 404.7 172.7C388.9 156.7 370.5 143.3 350.2 133.2C378.4 109.2 414.3 96 451.5 96C537.9 96 608 166 608 252.5C608 294 591.5 333.8 562.2 363.1L491.1 434.2C461.8 463.5 422 480 380.5 480C294.1 480 224 410 224 323.5C224 322 224 320.5 224.1 319C224.6 301.3 239.3 287.4 257 287.9C274.7 288.4 288.6 303.1 288.1 320.8C288.1 321.7 288.1 322.6 288.1 323.4C288.1 374.5 329.5 415.9 380.6 415.9C405.1 415.9 428.6 406.2 446 388.8L517.1 317.7C534.4 300.4 544.2 276.8 544.2 252.3C544.2 201.2 502.8 159.8 451.7 159.8zM307.2 237.3C305.3 236.5 303.4 235.4 301.7 234.2C289.1 227.7 274.7 224 259.6 224C235.1 224 211.6 233.7 194.2 251.1L123.1 322.2C105.8 339.5 96 363.1 96 387.6C96 438.7 137.4 480.1 188.5 480.1C205 480.1 221.1 475.7 235.2 467.5C251 483.5 269.4 496.9 289.8 507C261.6 530.9 225.8 544.2 188.5 544.2C102.1 544.2 32 474.2 32 387.7C32 346.2 48.5 306.4 77.8 277.1L148.9 206C178.2 176.7 218 160.2 259.5 160.2C346.1 160.2 416 230.8 416 317.1C416 318.4 416 319.7 416 321C415.6 338.7 400.9 352.6 383.2 352.2C365.5 351.8 351.6 337.1 352 319.4C352 318.6 352 317.9 352 317.1C352 283.4 334 253.8 307.2 237.5z"/></svg>') no-repeat center / contain;
		}
	}
}