/* CSS Document */

#navButton{
	color: #fff;
	background: #27344d;
	}
	.nav #navButton{
		background: none;
		color: #F38D00;
		}

#nav{}
	#nav menu{
		fill: #F38D00;
		}

#navGlobal{}
	#navGlobal dt{
		position: relative;
		width: 100%;
		padding-left: calc(4px + 0.5em);
		font-weight: bold;
		font-size: 1.25em;
		line-height: 1.5em;
		}
		#navGlobal dt:before{
			content: "";
			position: absolute;
			top: 0.2em;
			left: 0;
			width: 4px;
			height: 1em;
			background: #F38D00;
			border-radius: 2px;
			}
	#navGlobal dd{
		padding: 1em 0;
		border-bottom: 1px solid #B2B6BC;
		}
		#navGlobal dd a{
			font-weight: bold;
			}
			#navGlobal dd a:hover{
				color: #F38D00;
				}

#navExtra{}
	#navExtra a{
		display: block;
		padding: 1em;
		border: 1px solid #b2b6bc;
		border-radius: 6px;
		color: #27344d;
		text-align: center;
		}
		#navExtra a:hover{
			border-color: currentColor;
			color: #F38D00;
			}

#navTourist{
	align-self: center;
	height: 1em;
	order: -1;
	}
	#navTourist a{
		position: relative;
		font-size: 0.875em;
		padding-right: 1.5em;
		}
		#navTourist a:after{
			content: "";
			position: absolute;
			top: calc(50% - 0.5em);
			right: 0;
			margin-right: -0.5em;
			border: 0.5em solid transparent;
			border-left-color: currentColor;
			transform: scaleY(0.6);
			}
		#navTourist a:hover{
			color: #F38D00;
			}

.subject{}
	.subject:before,
	.subject:after{
		color: #F38D00;
		}



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


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#navGlobal{}
	#navGlobal dl+dl{
		margin-top: 2em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#navExtra{}
	#navExtra li+li{
		margin-top: 1em;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#navGlobal{}
	#navGlobal dl{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#navGlobal dt{
		width: 100%;
		}
	#navGlobal dd{
		width: calc(50% - 0.75em);
		margin-top: 0.5em;
		}
#navExtra{}
	#navExtra ul{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#navExtra li{
		width: calc(50% - 0.75em);
		}
		#navExtra li:nth-of-type(n+3){
			margin-top: 1em;
			}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
#fNavExtra{}
	#fNavExtra ul{
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#fNavExtra li{
		width: calc(50% - 0.75em);
		}
		#fNavExtra li:nth-of-type(n+3){
			margin-top: 1.5em;
			}
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#navGlobal{}
	#navGlobal dd{
		width: calc(50% - 1em);
		}
}
@media (min-width: 768px) and (max-width: 1199.98px) {
/*768px～1199px*/
}
@media (min-width: 768px) and (max-width: 991.98px) {
/*768px～991px*/
#navGlobal{}
	#navGlobal dl+dl{
		margin-top: 3em;
		}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#header{
	height: 4em;
	background: #fff;
	transition: background 0.2s ease-out;
	}
#navButton{
	right: 0 !important;
	}
#navGlobal{}
	#navGlobal dl+dl{
		margin-top: 4em;
		}
#hNav{
	top: 0;
	padding-right: 4em;
	}
	#hNav ul{
		display: flex;
		align-items: center;
		height: 4em;
		}
	#hNav li{
		margin-right: 2em;
		}
	#hNav li a{
		position: relative;
		font-size: 0.875em;
		padding-right: 1.5em;
		}
		#hNav li a:after{
			content: "";
			position: absolute;
			top: calc(50% - 0.5em);
			right: 0;
			margin-right: -0.5em;
			border: 0.5em solid transparent;
			border-left-color: currentColor;
			transform: scaleY(0.6);
			}
		#hNav li a:hover{
			color: #F38D00;
			}
	#hNav > div{
		display: none;
		}
#switching{
	position: fixed;
	top: 50%;
	right: 2em;
	}
	#switching ul{
		display: flex;
		flex-direction: column;
		padding: 0.5em;
		background: #fff;
		border: 1px solid #AFB3B9;
		border-radius: 6px;
		transform: translate(0, -50%);
		}
	#switching li{
		font-weight: bold;
		line-height: 1.2em;
		text-align: center;
		}
		#switching li:before,
		#switching li:after{
			font-size: 0.875em;
			}
	#switching .select{
		margin-bottom: 0.5em;
		order: -1;
		}
		#switching .select:before{
			content: "今見ているのは";
			display: block;
			}
		#switching .select:after{
			content: "向けページ";
			}
		#switching .select a{
			pointer-events: none;
			}
			#switching .select a:before,
			#switching .select a:after{
				content: "”";
				}
			#switching .select a[href="/kyouiku/index.html"]{
				color: #F38D00;
				}
			#switching .select a[href="/dmo/index.html"]{
				color: #82A952;
				}
		#switching li:not(.select){}
			#switching li:not(.select) a{
				position: relative;
				display: block;
				padding: 0.5em 1em;
				padding-right: 3em;
				background: #4D596A;
				border-radius: 6px;
				color: #fff;
				font-weight: bold;
				text-align: center;
				line-height: 1.2em;
				text-decoration: none;
				}
				#switching li:not(.select) a:before,
				#switching li:not(.select) a:after{
					font-size: 0.875em;
					}
				#switching li:not(.select) a:before{
					content: "クリックで";
					display: block;
					}
				#switching li:not(.select) a:after{
					content: "向けに切り替える";
					}
				#switching li:not(.select) a[href="/kyouiku/index.html"]{
					background: #F38D00;
					}
				#switching li:not(.select) a[href="/dmo/index.html"]{
					background: #82A952;
					}
			#switching li:not(.select) i{
				position: absolute;
				top: calc(50% - 0.5em);
				right: 1em;
				}
			#switching li:not(.select) span{}
				#switching li:not(.select) span:before,
				#switching li:not(.select) span:after{
					content: "”";
					}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
}