/* CSS Document */

.scrollTop{}
	.scrollTop:not(.nav) #header{
		background: none;
		}

#pagePath{
	display: none;
	}

#hero{
	position: relative;
	top: -4em;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 1.5em;
	}
	#hero h1{
		position: relative;
		display: flex;
		flex-direction: column;
		align-items: center;
		border: 1px solid currentColor;
		background: rgba(0,0,0,0.4);
		color: #fff;
		font-weight: bold;
		z-index: 1;
		}
		#hero h1:before{
			content: attr(data-ruby);
			margin-top: 1.5em;
			font-size: 0.5em;
			line-height: 1em;
			order: 1;
			}
	#hero .thumb{
		position: absolute;
		top: 0;
		left: 0;
		width: 100;
		height: 100%;
		padding-top: 0;
		}

#pageTab{
	padding-top: 0;
	}
	#pageTab li{}
		#pageTab li:hover{
			background: currentColor;
			border-color: transparent;
			}
		#pageTab li a{
			fill: currentColor;
			}
			#pageTab li a:hover{
				color: #fff;
				}
	#pageTab li:nth-of-type(1){
		color: #F38D00;
		}
	#pageTab li:nth-of-type(2){
		color: #82A952;
		}

#information{
	position: relative;
	background: #fff;
	padding-top: 0;
	}
	#information header{
		padding-bottom: 0;
		}
	#information section{
		padding-top: 2em;
		}
	#information h3{
		display: none;
		}
	#information footer{
		display: flex;
		justify-content: center;
		padding: 0;
		}
		#information footer a{
			position: relative;
			width: 100%;
			width: 390px;
			padding: 1.5em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			text-decoration: none;
			}
			#information footer a:hover{
				border-color: currentColor;
				color: #F38D00;
				}
		#information footer i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}

#education{}
	#education h2+div{
		margin-top: 2em;
		}
	#education dl{
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 1px solid #cacaca;
		border-radius: 12px;
		}
	#education dt+dd{
		margin: 1em 0 2em 0;
		line-height: 1.7em;
		}
	#education dd{}
		#education dd:last-child{
			display: flex;
			justify-content: center;
			margin-top: auto;
			}
		#education dd a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 280px;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			#education dd a:hover{
				border-color: currentColor;
				color: #F38D00;
				}
		#education dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	#education .thumb{
		border-radius: 8px;
		}

#mice{
	background: #fff;
	}
	#mice h2+div{
		margin-top: 2em;
		}
	#mice dl{
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 1px solid #cacaca;
		border-radius: 12px;
		}
	#mice dt+dd{
		margin: 1em 0 2em 0;
		line-height: 1.7em;
		}
	#mice dd{}
		#mice dd:last-child{
			display: flex;
			justify-content: center;
			margin-top: auto;
			}
		#mice dd a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 280px;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			#mice dd a:hover{
				border-color: currentColor;
				color: #F38D00;
				}
		#mice dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	#mice .thumb{
		border-radius: 8px;
		}

#course{}
	#course h2+div{
		margin-top: 2em;
		}
	#course dl{
		display: flex;
		flex-direction: column;
		background: #fff;
		border: 1px solid #cacaca;
		border-radius: 12px;
		}
	#course dt+dd{
		margin: 1em 0 2em 0;
		line-height: 1.7em;
		}
	#course dd{}
		#course dd:last-child{
			display: flex;
			justify-content: center;
			}
		#course dd a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 280px;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			#course dd a:hover{
				border-color: currentColor;
				color: #F38D00;
				}
		#course dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	#course .thumb{
		border-radius: 8px;
		}

#pageLink{
	background: #27344D;
	}
	#pageLink dl{
		display: flex;
		flex-direction: column;
		background: #fff;
		border-radius: 12px;
		}
	#pageLink dt+dd{
		margin: 1em 0 2em 0;
		line-height: 1.7em;
		}
	#pageLink dd{}
		#pageLink dd:last-child{
			display: flex;
			justify-content: center;
			margin-top: auto;
			}
		#pageLink dd a{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			max-width: 280px;
			padding: 1em;
			padding-right: 3em;
			background: #fff;
			border: 1px solid #b2b6bc;
			border-radius: 6px;
			color: inherit;
			font-weight: bold;
			text-align: center;
			line-height: 1.5em;
			text-decoration: none;
			}
			#pageLink dd a:hover{
				border-color: currentColor;
				color: #F38D00;
				}
		#pageLink dd i{
			position: absolute;
			top: calc(50% - 0.5em);
			right: 1em;
			}
	#pageLink .thumb{
		border-radius: 8px;
		}

.subject{
	position: relative;
	padding-bottom: 1em;
	}
	.subject:before,
	.subject:after{
		position: absolute;
		left: 0;
		bottom: 0;
		line-height: 1em;
		}
	.subject:before{
		left: 4em;
		}
	.subject:after{
		content: "";
		width: 3em;
		height: 0.5em;
		border-top: 1px solid currentColor;
		font-size: 0.5em;
		}

.tabMenu{}
	.tabMenu li.select{
		color: #F38D00;
		}




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


/* for mobile */
@media (max-width: 767.98px) {
/*767以下px*/
#education{}
	#education dl{
		padding: 1em;
		}
#mice{}
	#mice dl{
		padding: 1em;
		}
#course{}
	#course dl{
		padding: 1em;
		}
#pageLink{}
	#pageLink dl{
		padding: 1em;
		}
}
@media (max-width: 767.98px) and (orientation:portrait) {
/*767px以下 縦向き*/
#hero{
	height: 75vw;
	padding-top: 4em;
	}
	#hero h1{
		padding: 1.5em;
		font-size: 1.125em;
		letter-spacing: 0.2em;
		}
#education{}
	#education dl+dl{
		margin-top: 2em;
		}
#mice{}
	#mice dl+dl{
		margin-top: 2em;
		}
#pageLink{}
	#pageLink dl+dl{
		margin-top: 2em;
		}
}
@media (max-width: 767.98px) and (orientation:landscape) {
/*767px以下 横向き*/
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) {
/*767px以下 横向き, 768px以上,*/
#hero{
	height: 50vw;
	}
	#hero h1{
		padding: 1.5em 2em 1.5em 2.4em;
		letter-spacing: 0.4em;
		font-size: 1.75em;
		}
#pageTab{}
	#pageTab li{
		width: 50%;
		}
		#pageTab li a{
			text-align: center;
			justify-content: center;
			padding: 0.8em;
			padding-right: 2em;
			font-size: 1.5em;
			}
		#pageTab li i{
			right: 1em;
			}
#information{}
	#information header{
		display: flex;
		align-items: flex-end;
		justify-content: space-between;
		}
	#information nav{
		padding-top: 0;
		}
#education{}
	#education h2+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#education dl{
		width: calc(50% - 0.75em);
		}
		#education dl:nth-of-type(n+3){
			margin-top: 2em;
			}
#mice{}
	#mice h2+div{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
	#mice dl{
		width: calc(50% - 0.75em);
		}
		#mice dl:nth-of-type(n+3){
			margin-top: 2em;
			}
#course{}
	#course dl{
		display: -ms-grid;
		-ms-grid-columns: 1fr 1fr;
		display: grid;
		grid-template-columns: 1fr 1fr;
		}
	#course dt{
		-ms-grid-column: 1;
		-ms-grid-row: 1;
		-ms-grid-row-span: 3;
		grid-row: 1 / 3;
		}
	#course dt+dd{
		-ms-grid-column: 2;
		-ms-grid-row: 1;
		margin-top: auto;
		}
	#course dt+dd+dd{
		-ms-grid-column: 2;
		-ms-grid-row: 2;
		margin-bottom: auto;
		}
	#course dd{
		padding-left: 1em;
		}
#pageLink{}
	#pageLink dl{
		width: calc(50% - 0.75em);
		}
		#pageLink dl:nth-of-type(n+3){
			margin-top: 2em;
			}
	#pageLink .wrap{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		}
}
@media (max-width: 767.98px) and (orientation:landscape), (min-width: 768px) and (max-width: 991.98px) {
/*767px以下 横向き, 768px～991px*/
}


/* for tablet */
@media (min-width: 768px) {
/*768px以上*/
#education{}
	#education dl{
		padding: 1.5em;
		}
#mice{}
	#mice dl{
		padding: 1.5em;
		}
#course{}
	#course dl{
		padding: 1.5em;
		}
#pageLink{}
	#pageLink dl{
		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*/
#education{}
	#education dl{
		width: calc(50% - 1em);
		}
		#education dl:nth-of-type(n+3){
			margin-top: 2em;
			}
#mice{}
	#mice dl{
		width: calc(50% - 1em);
		}
		#mice dl:nth-of-type(n+3){
			margin-top: 2em;
			}
#course{}
	#course dd{
		padding-left: 2em;
		}
#pageLink{}
	#pageLink dl{
		width: calc(50% - 1em);
		}
		#pageLink dl:nth-of-type(n+3){
			margin-top: 2em;
			}
}


/* for PC */
@media (min-width: 992px) {
/*992px以上*/
#siteName{
	transition: all 0.2s ease-out;
	}
	_:-ms-lang(x)::-ms-backdrop, #siteName{
		margin-top: 1em;
		}
	#siteName svg{
		transition: font-size 0.2s ease-out;
		}
		_:-ms-lang(x)::-ms-backdrop, #siteName svg{
			font-size: 4em;
			}
	.scrollTop #siteName{
		margin-top: 1em;
		}
		.scrollTop #siteName svg{
			font-size: 4em;
			}
#education{}
	#education dl{
		width: calc(50% - 1.5em);
		}
		#education dl:nth-of-type(n+3){
			margin-top: 3em;
			}
#mice{}
	#mice dl{
		width: calc(50% - 1.5em);
		}
		#mice dl:nth-of-type(n+3){
			margin-top: 3em;
			}
#course{}
	#course dd{
		padding-left: 3em;
		}
#pageLink{}
	#pageLink dl{
		width: calc(50% - 1.5em);
		}
		#pageLink dl:nth-of-type(n+3){
			margin-top: 3em;
			}
}
@media (min-width: 992px) and (max-width: 1199.98px) {
/*992px～1199px*/
}
@media (min-width: 1200px) {
/*1200px以上*/
#information{}
	#information header{
		margin-right: 3.5em;
		}
	#information section{
		margin: 0 3.5em;
		}
#education{}
	#education h2+div{
		padding: 0 3.5em;
		}
#mice{}
	#mice h2+div{
		padding: 0 3.5em;
		}
#course{}
	#course h2+div{
		padding: 0 3.5em;
		}
#pageLink{}
	#pageLink .wrap{
		padding: 0 3.5em;
		}
}