/* CSS Document */

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

#access{
	display: grid;
	grid-template-columns: 1fr var(--wrap) 1fr;
	justify-content: center;
	margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	&>*{
		grid-column: 2;
	}
	& h2{
		justify-self: center;
		display: grid;
		grid-template-columns: 1fr auto 0;
		justify-content: center;
		column-gap: 16px;
		padding-bottom: 4px;
		border-bottom: 4px dotted currentColor;
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		text-align: center;
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			height: 1em;
			background: currentColor;
		}
		&:before{
			aspect-ratio: 1;
			transform: translateY(calc(0.325em - 50%));
			-webkit-mask: var(--icon-point) no-repeat left top / contain;
		}
		&:after{
			grid-column: 1;
			aspect-ratio: 20 / 16;
			margin-left: 0.75em;
			transform: translateY(0.325em);
			-webkit-mask: var(--icon-access) no-repeat right bottom / contain;
		}
	}
	#accessTab{
		grid-column: 1 / 4;
		margin-top: clamp(32px, calc(64 / 1200 * 100vw), 64px);
	}
}

#accessTab{
	position: relative;
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	padding-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	background: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="white"><polyline points="0 0 48 0 24 24"/></svg>') no-repeat center top / clamp(24px, calc(32 / 1200 * 100vw), 32px), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 14 14" fill="white" opacity="0.3"><rect x="5px" width="4" height="100%" /></svg>') center top / 14px;
	background-color: #f8f1e7;
	&:before{
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		border-bottom: 1px solid #000;
	}
	& ul{
		display: flex;
		column-gap: clamp(8px, calc(16 / 1200 * 100vw), 16px);
	}
	& li{
		display: contents;
		}
	& a{
		display: grid;
		grid-template-columns: clamp(48px, calc(56 / 1200 * 100vw), 56px) 1fr;
		align-items: center;
		width: 100%;
		min-height: clamp(48px, calc(56 / 1200 * 100vw), 56px);
		padding: 8px 16px 8px 0;
		background: var(--color-theme);
		border: solid #000;
		border-width: 1px 1px 0 1px;
		border-radius: 10px 10px 0 0;
		color: #fff;
		font-weight: 700;
		letter-spacing: 0.06em;
		text-align: center;
		text-decoration: none;
		cursor: pointer;
		&:before{
			content: "";
			justify-self: center;
			aspect-ratio: 1;
			width: 8px;
			height: 8px;
			background: currentColor;
			border-radius: 100%;
		}
		.select &{
			pointer-events: none;
			background: #fff;
			color: inherit;
			z-index: 1;
			&:before{
				background: #80B41F;
			}
		}
	}
}

#transport{
	margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& h2{
		display: none;
	}
}

#transportSearch{
	display: grid;
	grid-template-columns: var(--wrap);
	justify-content: center;
	grid-row-gap: clamp(32px, calc(48 / 1200 * 100vw), 48px);
	& h3{
		display: grid;
		grid-template-columns: auto 1fr;
		justify-content: center;
		align-items: baseline;
		column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
		font-weight: 900;
		font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			width: clamp(4px, calc(6 / 768 * 100vw), 6px);
			height: 1em;
			background: var(--color-theme);
			border-radius: 3px;
			transform: translateY(0.15em);
		}
	}
	& h3+div{
		margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	}
	& ul{
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
		grid-gap: 16px;
	}
	& li{
		display: contents;
	}
	& a{
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: center;
		column-gap: 8px;
		padding: 4px 16px 4px 24px;
		min-height: 48px;
		border: 2px solid var(--color-theme);
		border-radius: 24px;
		color: currentColor;
		letter-spacing: 0.06em;
		text-align: center;
		text-decoration: none;
		&: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;"><polyline points="2 6 8 12 14 6"/></svg>') no-repeat center / contain;
		}
		.select &{
			background: #F7FCEB;
			color: var(--color-theme);
		}
	}
}

#transportRoute{
	display: grid;
	& section{
		display: grid;
		grid-template-columns: var(--wrap);
		justify-content: center;
		margin-top: clamp(48px, calc(64 / 1200 * 100vw), 64px);
		overflow: hidden;
		/*grid-template-columns: 1fr auto 1fr;
		align-items: center;
		column-gap: clamp(16px, calc(24 / 768 * 100vw), 24px);
		&:before,
		&:after{
			content: "";
			grid-column: 1;
			grid-row: 1;
			min-width: calc((100% - var(--wrap)) / 2);
			height: clamp(4px, calc(6 / 1200 * 100vw), 6px);
			background: var(--color-theme);
		}
		&:before{
			grid-column: 1;
			border-radius: 0 3px 3px 0;
		}
		&:after{
			grid-column: 3;
			border-radius: 3px 0 0 3px;
		}*/
		&:before{
			content: "";
			grid-column: 1;
			grid-row: 1;
			justify-self: center;
			align-self: center;
			width: max(var(--wrap-min), 100vw);
			height: clamp(4px, calc(6 / 1200 * 100vw), 6px);
			background: var(--color-theme);
		}
		& h3{
			grid-column: 1;
			grid-row: 1;
			padding: 0 clamp(16px, calc(24 / 768 * 100vw), 24px);
			background: radial-gradient(circle at 0%, var(--color-theme) 0%, var(--color-theme) clamp(2px, calc(3 / 1200 * 100vw), 3px), transparent clamp(2px, calc(3 / 1200 * 100vw), 3px)), radial-gradient(circle at 100%, var(--color-theme) 0%, var(--color-theme) clamp(2px, calc(3 / 1200 * 100vw), 3px), transparent clamp(2px, calc(3 / 1200 * 100vw), 3px)), #fff;
		}
	}
	& h3{
		justify-self: center;
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
		column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
		font-weight: 900;
		font-size: clamp(22px, calc(28 / 768 * 100vw), 28px);
		letter-spacing: 0.1em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: clamp(32px, calc(40 / 768 * 100vw), 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 16 16"><path d=""/><rect width="100%" height="100%"/></svg>') no-repeat center / contain;
		}
		#transportAir &:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 24.64"><rect x="5.49" y="22.3" width="14.14" height="2.34"/><path d="M33.29.09c-.94.13-3.92-.25-5.93.88L22.81,3.76l0,0-.91.53a1.47,1.47,0,0,1-.92.15l-14-3A1.54,1.54,0,0,0,6,1.57L3.74,2.87a.27.27,0,0,0,0,.51L13.2,9.1a.29.29,0,0,1,0,.54l-.16.11L9.43,12a1,1,0,0,1-.71,0L2.83,10.33a1.39,1.39,0,0,0-.92.12l-1.72,1a.31.31,0,0,0,0,.56l5.59,4.25c.08.06.14.45.18.51.82,1.43,6.16-1,7.59-1.8L32.87,4.65c1.44-.83,3.78-2.67,3-4.09C35.43-.13,34.25,0,33.29.09Z"/></svg>');
		}
		#transportTrain &:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21.38 32"><path d="M4.42,3.51a5.29,5.29,0,0,1,1,.87.87.87,0,0,0,1,.68.85.85,0,0,0,.68-1A3.1,3.1,0,0,0,5.76,2.38a18.54,18.54,0,0,1,9.86,0,3.19,3.19,0,0,0-1.33,1.68.86.86,0,0,0,.68,1,.47.47,0,0,0,.17,0A.82.82,0,0,0,16,4.41a4.84,4.84,0,0,1,1-.9c.67-.52,1.21-.93,1.1-1.6a1,1,0,0,0-.69-.78A20.3,20.3,0,0,0,4,1.13a1,1,0,0,0-.7.78C3.2,2.58,3.74,3,4.42,3.51Z"/><path d="M21,10.67A4.44,4.44,0,0,0,17.4,7,61.44,61.44,0,0,0,4,7,4.42,4.42,0,0,0,.37,10.67a76.92,76.92,0,0,0,0,15A4.41,4.41,0,0,0,4,29.37l.57.05L2.25,32H5.41l1.52-2.39a59,59,0,0,0,7.52,0L16,32h3.16l-2.3-2.58.57-.05A4.43,4.43,0,0,0,21,25.69,78.51,78.51,0,0,0,21,10.67ZM8.6,8.15h4.18a.8.8,0,0,1,0,1.6H8.6a.8.8,0,1,1,0-1.6ZM3.14,25.24A1.73,1.73,0,1,1,4.86,27,1.73,1.73,0,0,1,3.14,25.24ZM16.52,27a1.73,1.73,0,1,1,1.72-1.72A1.72,1.72,0,0,1,16.52,27Zm2.3-6.84c-1,.82-5.3.86-8.13.86s-7.13,0-8.13-.86-1-7.32,0-8.15,5.3-.86,8.13-.86,7.13,0,8.13.86S19.85,19.29,18.82,20.12Z"/></svg>');
		}
		#transportBus &:before{
			-webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 34 28"><path d="M.38,10.06H2.82a.38.38,0,0,0,.37-.37V7H4V23.13a2,2,0,0,0,1.42,1.94v1.82A1.1,1.1,0,0,0,6.49,28H8.76a1.11,1.11,0,0,0,1.11-1.11V25.18H20.76v1.71A1.1,1.1,0,0,0,21.86,28h2.27a1.1,1.1,0,0,0,1.1-1.11V25a2.05,2.05,0,0,0,1.26-1.89V7h.73V9.69a.38.38,0,0,0,.37.37H30a.38.38,0,0,0,.38-.37V5.11A.38.38,0,0,0,30,4.73H27.59a.38.38,0,0,0-.37.38v.14h-.73V3.6c0-1.13-.91-1.55-2-2A22.27,22.27,0,0,0,15.51,0C8.83,0,6,1.56,6,1.56c-1.13.49-2,.91-2,2V5.25H3.19V5.11a.38.38,0,0,0-.37-.38H.38A.38.38,0,0,0,0,5.11V9.69A.38.38,0,0,0,.38,10.06ZM22.83,22.12a1.68,1.68,0,1,1,1.68-1.68A1.68,1.68,0,0,1,22.83,22.12ZM24.51,6.76V16.82h-8.3V5.07h6.61A1.69,1.69,0,0,1,24.51,6.76ZM10.75,1.89h8.8a.67.67,0,1,1,0,1.34h-8.8a.67.67,0,1,1,0-1.34ZM6,6.76A1.69,1.69,0,0,1,7.64,5.07h6.65V16.82H6Zm1.68,12A1.68,1.68,0,1,1,6,20.44,1.68,1.68,0,0,1,7.64,18.76Z"/></svg>');
		}
		#transportCar &:before{
			-webkit-mask-image: var(--icon-access);
		}
	}
	.root{
		margin-top: clamp(24px, calc(32 / 1200 * 100vw), 32px);
		&:nth-of-type(n+2){
			margin-top: clamp(32px, calc(48 / 1200 * 100vw), 48px);
		}
	}
}

.root{}

.rootTitle{
	display: grid;
	grid-template-columns: auto 1fr;
	justify-content: center;
	align-items: baseline;
	column-gap: clamp(8px, calc(16 / 768 * 100vw), 16px);
	font-weight: 900;
	font-size: clamp(20px, calc(24 / 768 * 100vw), 24px);
	letter-spacing: 0.1em;
	&:before{
		content: "";
		width: clamp(4px, calc(6 / 768 * 100vw), 6px);
		height: 1em;
		background: var(--color-theme);
		border-radius: 3px;
		transform: translateY(0.15em);
	}
}

.rootCourse{
	margin-top: 16px;
	& ul{
		@media (min-width: 768px) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			grid-row-gap: 8px;
			& li:nth-child(odd){
				width: 200px;
			}
			& li:nth-child(even){
				width: calc(100% - (200px * 2));
			}
		}
		@media (min-width: 1200px) {
			& li:nth-child(even){
				width: calc(50% - ((clamp(160px, calc(200 / 1200 * 100vw), 200px)) * 1.5));
			}
			& li:nth-child(even):nth-child(2):nth-last-child(2){
				width: calc(100% - ((clamp(160px, calc(200 / 1200 * 100vw), 200px)) * 2));
			}
		}
	}
	& li{
		&:nth-child(odd){
			display: grid;
			min-height: 48px;
			padding: 8px 16px;
			background: #F7FCEB;
			border: 2px solid var(--color-theme);
			color: var(--color-theme);
			font-weight: 700;
			letter-spacing: 0.06em;
			text-align: center;
		}
		&:nth-child(even){
			position: relative;
			display: grid;
			text-align: center;
			&:before{
				content: "";
				position: absolute;
				background: var(--color-theme);
			}
			& span{
				color: var(--color-theme);
			}
			@media (max-width: 767.98px) {
				padding: 8px 48px;
				&:before{
					top: 0;
					left: 24px;
					width: 16px;
					height: 100%;
					transform: translateX(-50%);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat center top / 2px calc(100% - 12px), url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><polygon points="0 0 5 10 10 0"/></svg>') no-repeat center bottom / 16px 12px;
				}
			}
			@media (min-width: 768px) {
				grid-template-rows: 1fr 1fr;
				grid-row-gap: 16px;
				padding 0 16px;
				&:before{
					top: 50%;
					left: 0;
					width: 100%;
					height: 16px;
					transform: translateY(-50%);
					-webkit-mask: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><rect width="100%" height="100%"/></svg>') no-repeat left center / calc(100% - 12px) 2px, url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none" viewBox="0 0 10 10"><polygon points="0 0 10 5 0 10"/></svg>') no-repeat right center / 12px 16px;
				}
			}
		}
	}

}

.rootText{
	margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
}

.rootLink{
	margin-top: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	padding: clamp(16px, calc(24 / 1200 * 100vw), 24px);
	border: 1px solid var(--color-theme);
	& ul{
		display: grid;
		grid-gap: 16px 24px;
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
	}
	& a{
		display: inline-grid;
		grid-template-columns: auto 1fr;
		align-items: baseline;
		column-gap: 4px;
		letter-spacing: 0.06em;
		&:before{
			content: "";
			aspect-ratio: 1;
			width: 16px;
			background: currentColor;
			transform: translateY(0.2em);
			-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;"><polyline points="2 6 2 14 12 14"/><rect x="6" y="2" width="8" height="8"/></svg>') no-repeat center / contain;
		}
	}
}









.old{


#main{}
	#main header{
		padding-top: 0;
		text-align: center;
		}

#transportSearch{
	padding-bottom: 0;
	}
	#transportSearch h3+div{
		margin-top: 1em;
		}
	#transportSearch ul{
		display: flex;
		list-style: none;
		}
	#transportSearch li{
		display: flex;
		}
	#transportSearch .wrap{}
		#transportSearch .wrap > div+div{
			margin-top: 2em;
			}
	#transportSearch .linkBut{
		justify-content: flex-start;
		width: 100%;
		background: #fff;
		border: 2px solid #80B41F;
		color: inherit;
		font-weight: normal;
		text-align: left;
		}
		#transportSearch .linkBut i{
			position: relative;
			right: -0.5em;
			margin-left: auto;
			transform: rotate(90deg);
			}
	#transportSearch .select{}
		#transportSearch .select a{
			background: #F7FCEB;
			color: #80B41F;
			}

#transportRoute{
	contain: paint;
	position: relative;
	}
	#transportRoute section+section{
		padding-top: 0;
		}
	#transportRoute h3{
		position: relative;
		align-self: center;
		display: flex;
		align-items: center;
		width: 100vw;
		white-space: nowrap;
		fill: #80B41F;
		}
		#transportRoute h3:before,
		#transportRoute h3:after{
			content: "";
			width: 50%;
			height: 6px;
			background: #80B41F;
			}
		#transportRoute h3:before{
			margin-right: 1em;
			border-radius: 0 3px 3px 0;
			}
		#transportRoute h3:after{
			margin-left: 1em;
			border-radius: 3px 0 0 3px;
			}
		#transportRoute h3 i{
			margin-right: 0.5em;
			transform: scale(1.5);
			}
	#transportRoute h3+div{
		margin-top: 2em;
		}
	#transportRoute h4{
		}
	#transportRoute h4+div{
		margin-top: 1em;
		}
	#transportRoute .wrap{
		display: flex;
		flex-direction: column;
		align-items: stretch;
		}
	#transportRoute .fr-view,
	#transportRoute .link{
		margin-top: 2em;
		}
#searchRoute {}
	#searchRoute{
		position: sticky;
		bottom: 0;
		} 
	#searchRoute a {
		position: absolute;
		bottom: 1em;
		right: 1em;
		}
	#searchRoute img {
		width: 6em;
		}

.root{}
	.root ul{
		display: flex;
		list-style: none;
		}
	.root ul+ul{
		margin-top: 2em;
		}
	.root li{
		text-align: center;
		}
		.root li:nth-child(odd){
			padding: 1em 0.5em;
			background: #F7FCEB;
			border: 2px solid #80B41F;
			color: #80B41F;
			font-weight: bold;
			line-height: 1.4em;
			}
		.root li:nth-child(even){
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			line-height: 1.4em;
			}
			.root li:nth-child(even):before,
			.root li:nth-child(even):after{
				content: "";
				position: absolute;
				}
			.root li:nth-child(even):before{
				background: #80B41F;
				}
			.root li:nth-child(even):after{
				border: 0.5em solid transparent;
				}
	.root span+span{
		color: #80B41F;
		}

.link{
	border: 1px solid #89BD1F;
	}
	.link ul{
		display: flex;
		}
	.link li{}
		.link li a{
			display: inline-flex;
			align-items: center;
			line-height: 1.4em;
			}
		.link li i{
			margin-top: 0.2em;
			margin-right: 0.5em;
			align-self: flex-start;
			}




/* for all */
@media (max-width: 1199.98px) {
/*1199px以下*/
}
@media (max-width: 991.98px) {
/*991px以下*/
}


/* for mobile */
@media (max-width: 767.98px) {
/*767px以下*/
#transportRoute{}
	#transportRoute .wrap{}
		#transportRoute .wrap > div+div{
			margin-top: 2em;
			}
.link{
	padding: 1em;
	}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下縦向き*/
#transportSearch{}
	#transportSearch ul{
		flex-direction: column;
		}
	#transportSearch li+li{
		margin-top: 1em;
		}
.root{}
	.root ul{
		flex-direction: column;
		}
	.root li{}
		.root li:nth-child(even){
			padding: 1em 0;
			padding-left: 3em;
			}
			.root li:nth-child(even):before{
				top: 0;
				left: 2.5em;
				width: 2px;
				height: calc(100% - 0.4em);
				}
			.root li:nth-child(even):after{
				bottom: -0.5em;
				left: calc(2em + 1px);
				border-top-color: #80B41F;
				transform: scale(1,1.5);
				}
	.root span+span{
		margin-top: 0.5em;
		}
.link{}
	.link ul{
		flex-direction: column;
		}
	.link li+li{
		margin-top: 1em;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下横向き*/
#transportSearch{}
	#transportSearch ul{
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#transportSearch li{
		width: calc(50% - 0.5em);
		}
		#transportSearch li:nth-of-type(n+3){
			margin-top: 1em;
			}
}
@media (min-width: 576px) and (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*576px～767px横向き, 768px以上*/
.root{}
	.root ul{
		flex-wrap: wrap;
		align-items: center;
		}
	.root li{}
		.root li:nth-child(even){
			min-height: 3.5em;
			}
			.root li:nth-child(even) span{
				position: absolute;
				left: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				width: 100%;
				padding: 0 0.5em;
				}
				.root li:nth-child(even) span:nth-of-type(1){
					bottom: 50%;
					margin-bottom: 2px;
					justify-content: flex-end;
					}
				.root li:nth-child(even) span:nth-of-type(2){
					top: 50%;
					margin-top: 2px;
					justify-content: flex-start;
					}
			.root li:nth-child(even):before{
				top: calc(50% - 1px);
				left: 0;
				width: calc(100% - 0.4em);
				height: 2px;
				}
			.root li:nth-child(even):after{
				top: calc(50% - 0.5em);
				right: -0.5em;
				border-left-color: #80B41F;
				transform: scale(1,0.7);
				}
.link{}
	.link ul{
		flex-wrap: wrap;
		}
	.link li{
		width: calc(33.33% - 0.67em);
		}
		.link li:nth-child(n+4){
			margin-top: 1em;
			}
}
@media (min-width: 576px) and (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*576px～767px横向き, 768px～991px*/
.root{}
	.root li{}
		.root li:nth-child(even){
			width: calc(100% - 24em);
			}
		.root li:nth-child(odd){
			width: 12em;
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#transportSearch{}
	#transportSearch ul{
		flex-wrap: wrap;
		}
#searchRoute {
	bottom: 1em;
    padding-top: 1em;
    padding-bottom: 1em;
	}
	#searchRoute a {
		right: 2em;
		}
	#searchRoute img {
		width: 8em;
		}
.link{
	padding: 1.5em;
	}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#transportSearch{}
	#transportSearch li{
		width: calc(33.33% - 0.67em);
		}
		#transportSearch li:not(:nth-of-type(3n+1)){
			margin-left: 1em;
			}
		#transportSearch li:nth-of-type(n+4){
			margin-top: 1em;
			}
#transportRoute{}
	#transportRoute .wrap{}
		#transportRoute .wrap > div+div{
			margin-top: 3em;
			}
.root{}
	.root li{}
		.root li:nth-child(odd){
			width: 12em;
			}
		.root li:nth-child(even){
			width: calc(100% - 24em);
			}
		.root li:nth-child(n+4){
			margin-top: 1em;
			}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#transportSearch{}
	#transportSearch li{
		width: calc(25% - 0.75em);
		}
		#transportSearch li:not(:nth-of-type(4n+1)){
			margin-left: 1em;
			}
		#transportSearch li:nth-of-type(n+5){
			margin-top: 1em;
			}
#transportRoute{}
	#transportRoute .wrap{}
		#transportRoute .wrap > div+div{
			margin-top: 4em;
			}
	
#searchRoute {
	bottom: 3em;
	}
	#searchRoute a {
		right: 3em;
		}
.root{}
	.root li{}
		.root li:nth-child(odd){
			width: 12em;
			}
		.root li:nth-child(even){
			width: calc(50% - 18em);
			}
		.root li:nth-child(2):nth-last-child(2){
			width: calc(100% - 24em);
			}
		.root li:nth-child(n+6){
			margin-top: 1.5em;
			}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}


/* ie */
@media all and (-ms-high-contrast: none) {
}

}