/* CSS Document */

#access{
	display: flex;
	flex-direction: column;
	padding: 0;
	}
	#access h2{
		position: relative;
		display: flex;
		flex-direction: column;
		margin-left: 1em;
		padding-top: 1.5em;
		}
		#access h2:before{
			content: "Access";
			}
	#access picture{
		order: -1;
		}
	#access nav{
		padding-top: 2em;
		}

#routeSearch{
	background: #fff;
	}
	#routeSearch form{
		margin-top: 2em;
		}
	#routeSearch h2{
		padding-bottom: 0.8em;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1.5em;
		border-bottom: 2px solid #00b0ca;
		}
	#routeSearch dl{
		display: flex;
		flex-wrap: wrap;
		}
	#routeSearch dt{
		position: relative;
		width: 100%;
		padding-left: calc(4px + 0.5em);
		font-weight: bold;
		font-size: 1.25em;
		line-height: 1.5em;
		}
		#routeSearch dt:before{
			content: "";
			position: absolute;
			top: 0.2em;
			left: 0;
			width: 4px;
			height: 1em;
			background: #00B0CA;
			border-radius: 2px;
			}
	#routeSearch dd{
		margin-top: 1em;
		}
		#routeSearch dd label{
			position: relative;
			display: block;
			padding: 1em;
			padding-right: 2.5em;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			}
			#routeSearch dd label:before{
				content: none !important;
				}
			#routeSearch dd label:hover{
				background: inherit;
				}
			#routeSearch dd i{
				position: absolute;
				top: calc(50% - 0.5em);
				right: 1em;
				}
		#routeSearch dd input{}
			#routeSearch dd input:checked{}
				#routeSearch dd input:checked+label{
					background: #e6f3f5;
					border-color: currentColor;
					color: #1696ac;
					}

#routeStart{
	margin-top: 2em;
	}

#routeSubmit{
	display: flex;
	justify-content: center;
	}
	#routeSubmit button{
		position: relative;
		display: block;
		width: 100%;
		max-width: 480px;
		padding: 1.2em;
		padding-left: 3em;
		background: #fff;
		border: 1px solid #b2b6bc;
		border-radius: 6px;
		color: inherit;
		fill: #00b0ca;
		text-align: center;
		line-height: 1.5em;
		transition: all 0.2s ease-out;
		cursor: pointer;
		order: 1;
		}
		#routeSubmit button:hover{
			background: #00b0ca;
			border-color: transparent;
			color: #fff;
			fill: currentColor;
			}
		#routeSubmit button i{
			position: absolute;
			top: calc(50% - 0.5em);
			left: 1.2em;
			}

#links{
	background: #fff;
	}
	#links h2{
		padding-bottom: 0.8em;
		font-weight: bold;
		font-size: 1.5em;
		line-height: 1.5em;
		border-bottom: 2px solid #00b0ca;
		}
	#links section{
		display: flex;
		justify-content: space-between;
		}
	#links h3{
		display: flex;
		flex-direction: column;
		align-content: center;
		width: 6em;
		color: #4D596A;
		font-weight: bold;
		font-size: 1.125em;
		text-align: center;
		}
		#links h3 i{
			margin-bottom: 1em;
			}
		#links h3 svg{
			width: 5em;
			height: 5em;
			}
	#links h3+div{
		width: calc(100% - 8em);
		}
	#links ul{
		display: flex;
		flex-direction: column;
		}
	#links li{}
		#links li a{
			position: relative;
			display: inline-block;
			padding-left: 1.5em;
			color: #00b0ca;
			fill: currentColor;
			font-weight: bold;
			line-height: 1.5em;
			}
		#links li i{
			position: absolute;
			top: 0.2em;
			left: 0;
			}
	#links li+li{
		margin-top: 1em;
		}




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


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#routeGoal,
#routeSubmit{
	margin-top: 2em;
	}

}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#routeSearch{}
	#routeSearch dl{
		justify-content: space-between;
		}
	#routeSearch dd{
		width: calc(50% - 0.5em);
		}
#links{}
	#links section{
		padding-top: 1.5em;
		}
		#links section:not(:last-child){
			padding-bottom: 1.5em;
			border-bottom: 1px solid #B2B6BC;
			}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#links{}
	#links h2+div{
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		justify-content: space-between;
		}
	#links section{
		width: calc(50% - 0.75em);
		padding-top: 2em;
		}
		#links section:nth-of-type(n+3){
			border-top: 1px solid #B2B6BC;
			}
		#links section:nth-last-of-type(n+2){
			padding-bottom: 2em;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#routeSearch{}
	#routeSearch dd{
		width: calc(33% - 0.67em);
		}
		#routeSearch dd:not(:nth-of-type(3n+1)){
			margin-left: 1em;
			}
		#routeSearch dd:nth-of-type(n+4){
			margin-top: 1em;
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#routeGoal,
#routeSubmit{
	margin-top: 3em;
	}
#links{}
	#links section{
		width: calc(50% - 1em);
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#routeGoal,
#routeSubmit{
	margin-top: 4em;
	}
#routeSearch{}
	#routeSearch dd{
		width: calc(25% - 0.75em);
		}
		#routeSearch dd:not(:nth-of-type(4n+1)){
			margin-left: 1em;
			}
		#routeSearch dd:nth-of-type(n+5){
			margin-top: 1em;
			}
#links{}
	#links section{
		width: calc(50% - 1.5em);
		}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#access{}
	#access h2{
		margin-left: 100px;
		}
}