header{
	display: flex;
	width: 100%;
	height: 5rem;
	font-size: 1.12rem;
	font-weight: 500;
	letter-spacing: -2%;
	table-layout: fixed;
	position: fixed;
	top:0;
	z-index: 10;
	background-color: #fff;
	align-items: center;
}

header .mobile{
	display: none;
}

header .d1{
	display: table-cell;
	width: 15%;
	vertical-align: middle;
}

header .d2{
	display: table-cell;
	width: 65%;
	padding-left: 1rem;
	padding-right: 1rem;
	vertical-align: middle;
}

header .d2 > ul{
	display: table;
	width: 100%;
}

header .d2 > ul >li{
	display: table-cell;
	width: 20%;
	position: relative;
	text-align: center;
}

header .d2 > ul >li > ul{
	display: block;
	width: 100%;
	font-size: 1rem;
}

header .d2 > ul >li > ul > li{
	display: block;
	width: 100%;
	letter-spacing: -2%;
	font-weight: 500;
	margin-bottom:1rem;
}

header .d2 > ul >li > ul > li:hover{
	color:rgba(13, 171, 139, 1);
}


header .d3{
	display: table-cell;
	width: 25%;
	vertical-align: middle;
}

header .d3 > ul{
	display: table;
	float: right;
}

header .d3 > ul > li{
	display: table-cell;
	width: auto;
}

header .d3 > ul > li:first-child{
	padding-right: 0.5rem;
	vertical-align: bottom;
}

header .d3 > ul > li:last-child a{
	width: 12.22rem;
	height: 2.77rem;
	border: 1px solid #9CDCCF;
	border-radius: 2.22rem;
	font-family: 'SCoreDream';
	font-style: normal;
	font-weight: 600;
	font-size: 0.9rem;
	color: #086552;
	display: flex;
	align-items: center;
	justify-content: center;

}

header .d3 > ul > li:last-child a img{
	margin-right: 5px;
}

.menu-mobile{
	display: none;
}


header > div.pc > nav > ul > li > ul{
	display: block;
	position: absolute;
	top:4rem ;
	z-index: 101;
	font-size: 1.0rem;
	width: 100%;
	left: 0;
	height:0;
	overflow: hidden;
}



header.off{
	background-color: none;
	transition: all 0.2s;
}

header:after {
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	top:0;
	height: 4rem;
	background-color: rgba(255,255,255,1);
	border-bottom: 0px solid rgba(255,255,255,0.9);
	transition: height 0.1s linear 0.1s ;
	z-index: -1;
}

header:before {
	content: "";
	position: absolute;
	width: 100%;
	left: 0;
	top:5rem;
	height: 0;
	background-color: rgba(255,255,255,1);
	border-bottom: 0px solid rgba(255,255,255,0.9);
	transition: height 0.1s linear 0.1s ;
	z-index: -1;
}


header.on:before {
	content: "";
	height: 1px;
	border-bottom: 1px solid #EEEEEE;
	display: block;
	width: 100%;
	z-index: 1;
}

header.on:after {
	content: "";
	height: 19rem;
	transition: all 0.4s linear;
	padding-top: 1rem;
	overflow: hidden;
}

header.on > div.pc > nav > ul > li:after{
	display:block;
  	content: '';
  	height: 3px;
  	border-bottom: solid 3px #0BA889;  
  	transform: scaleX(0);  
  	transition: transform 250ms ease-in-out;
  	position: absolute;
  	top:3.1rem;
  	width: 100%;
  	left:0;

}

header.on > div.pc > nav > ul > li.on:after{
	transform: scaleX(1);
}

header.on > div.pc > nav > ul > li > ul{
	height:14rem;
	transition: height 0.5s linear;
}



@media screen and (max-width: 1100px) {

}

@media screen and (max-width: 740px) {

	header{
		height: 5%;
		padding-top: 0.7rem;
		padding-bottom: 0;
		display: table;
	}

	header > div.mo{
		display:table;
		padding:0.5rem  0.5rem;
	}

	header > div.mo .order-1{
		display: table-cell;
		width:70%;
		vertical-align: middle;
		padding-left: 1rem;
	}

	header > div.mo .order-1 img{
		height:2.5rem;
	}

	header > div.mo .order-2{
		display: table-cell;
		width:30%;
		text-align: right;
		vertical-align: middle;
		padding-right: 2.5vw;
	}

	header > div.mo .order-2 span{
		font-size: 2.5rem;
		line-height: 100%;
		vertical-align: middle;
	}
		
	html.open .menu-mobile { 
		right:0 !important;
		overflow-y: auto;
		transition: all 0.8s;
	}
		
	.menu-mobile { 
		z-index: 10000; 
		overflow:hidden;
		height:100%;
		position:fixed;
		background-color:rgba(11, 168, 137, 0.85);
		width:100%;
		top:0;
		right:-120vw;
		display:block;
		transition: all 0.8s;
		backdrop-filter: blur(0.5rem);
	}

	.menu-mobile-area {
		display: table;
		width: 100%;
		height: auto;
		position: absolute;
		top:50%;
		transform: translateY(-50%);
		padding:0 1rem;
	} 
		
	.menu-mobile .header{
		display:table;
		width:100%;
		color:#333;
		padding: 1.5rem 0;
		border-bottom: none;
		color:#fff;
		padding-bottom: 4rem;

	}

	.menu-mobile .header .menu-mobile-close-cl{
		display: block;
		width: 100%;
		position: relative;
	}
	.menu-mobile .header .menu-mobile-close-cl:after{
		font-family: 'Material Icons';
		content: '\e5cd';
		font-size: 3rem;
		position: absolute;
		top:0;
		right:0;
		line-height:1em;
		opacity: 1;
	}

	.menu-mobile nav{
		display: table;
		width: 100%;
	}

	.menu-mobile nav > ul{
		display:table;
		width: 100%;
	}

	.menu-mobile nav > ul > li{
		display:block;
		width: 100%;
		font-size: 1.54rem;
		background-color: #fff;
		padding: 1.5rem 1rem;
		font-weight: 500;
		border-radius: 1rem;
		margin-bottom: 1rem;
		position: relative;
		background-image: url(/web/images/public/m_navi_icon_heritage.png);
		background-size: auto;
		background-repeat: no-repeat;
		background-position: top 20% left 90%;
		padding-bottom: 0.5rem;
		padding-left: 2rem;
		padding-right: 2rem;
	}

	.menu-mobile nav > ul > li.program{
		background-image: url(/web/images/public/m_navi_icon_program.png);
	}

	.menu-mobile nav > ul > li.board{
		background-image: url(/web/images/public/m_navi_icon_board.png);
	}

	.menu-mobile nav > ul > li.archive{
		background-image: url(/web/images/public/m_navi_icon_archive.png);
		background-position: top 50% left 90%;
		padding-bottom: 1rem;
	}

	.menu-mobile nav > ul > li > ul{
		display: block;
		margin-top: 1.5rem;
		font-weight: 400;
		font-size: 1.23rem;
	}

	.menu-mobile nav > ul > li > ul > li{
		display: inline-block;
		margin-right: 2rem;
		margin-bottom: 1rem;
	}

	.menu-mobile nav > ul > li > ul > li{
		font-size: 1.23rem;
	}

}