@charset "UTF-8";


/*========/ header /========*/
header{
	width:100%;
	padding-bottom:30px;
	display:flex;
	justify-content: flex-end;
	background:rgba(0,0,0,.8);
	position: fixed;
	top:0;
	z-index:500;
	transition: all .3s ease;
}
header h1{ text-align:center; position:absolute; left:20px; transition: all .3s ease; }
header h1 a{ display:block; color:#fff; font-size:15px; }
header h1 a:hover{ color:#fdff50; }
header h1 .icon-logo{ margin-bottom:-12px; display:block; font-size:80px; }

header nav ul{ padding:40px 20px 0 0; display:flex; align-items: flex-end; font-size:15px; font-size:1.5rem; }
header nav ul li{ margin:0 1em; font-weight:500; }
header nav ul li a{ padding-bottom:10px; display:block; color:#fff; position: relative; }
header nav ul li a:hover{ color:#fdff50; }

header nav ul li#entry a{
	width:140px;
	padding:5px 0;
	border:3px #fdff50 solid;
	text-align:center;
	color:#fdff50;
	transition: 0.25s;
}
header nav ul li#entry a:hover{
	color:#000;
	box-shadow: inset 0 0 0 2em #fdff50;
}
header nav ul li#rikunabi a,
header nav ul li#corporate a{
	width:140px;
	padding:5px 0;
	border:3px #fff solid;
	text-align:center;
	transition: 0.25s;
}
header nav ul li#rikunabi a:hover,
header nav ul li#corporate a:hover{
	color:#000;
	box-shadow: inset 0 0 0 2em #fff;
}
header nav ul li#entry{ margin:0 .1em 0 1em; }
header nav ul li#rikunabi,
header nav ul li#corporate{ margin:0 .1em; }



header nav ul li.smt { display:none; }


@media screen and (max-width: 1040px) {
	header{ height:50px; display:block; }
	header h1{  }
	header h1 .icon-logo{ font-size:60px; text-shadow: 0px 0px 10px rgba(150, 150, 150, 1); position: relative; z-index:9999; }
	header h1 a{ position: relative; z-index:9999; }
	header nav{
		width: calc( 100wh - 40px );
		height:0;
		overflow:hidden;
		display:block;
		transition: all .3s ease;
		position: relative;
		z-index:9999;
	}
	header nav > ul{
		margin:0;
		padding:20px;
		display:block;
		text-align:center;
		position: relative;
		top:20px;
		right:0;
	}
	header nav > ul > li{  }
	header nav > ul > li a{ padding:10px 0; display:block; color:#fff; }
	header nav > ul > li a::after{ display:none; }
	header nav > ul ul{ margin-left:30px; padding:0; }

	header nav ul li#entry,
	header nav ul li#rikunabi,
	header nav ul li#corporate{ margin:1em 0 0 }
	header nav ul li#entry a,
	header nav ul li#rikunabi a,
	header nav ul li#corporate a{ margin:0 auto }

	/* このクラスを、jQueryで付与・削除する */
	header nav.active {
		width: calc( 100wh - 40px );
		height:calc( 100vh - 40px - 50px );
		margin:20px;
		padding-top:50px;
		box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
		background: rgba(0,0,0,0.8);
		z-index: 1000;
		-webkit-backdrop-filter: saturate(180%) blur(5px);
		backdrop-filter: saturate(180%) blur(5px);
	}
	header nav.active a,
	header nav.active a:hover{ color:#fff; }

	/* ハンバーガーボタン */
	.hamburger {
		width : 42px;
		height: 42px;
		display : block;
		cursor: pointer;
		text-align: center;
		box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.6);
		background:#fff;
		position: fixed;
		z-index : 3;
		right : 10px;
		top : 10px;
		z-index:10000;
	}
	.hamburger span {
		display : block;
		position: absolute;
		width : 30px;
		height : 2px ;
		left : 6px;
		background : #000;
		-webkit-transition: 0.3s ease-in-out;
		-moz-transition : 0.3s ease-in-out;
		transition  : 0.3s ease-in-out;
	}
	.hamburger span:nth-child(1) {
		top: 10px;
	}
	.hamburger span:nth-child(2) {
		top: 20px;
	}
	.hamburger span:nth-child(3) {
		top: 30px;
	}

	/* ナビ開いてる時のボタン */
	.hamburger.active span{
		background :#000;
	}
	.hamburger.active span:nth-child(1) {
		-webkit-transform: translateY(11px);
		-moz-transform : translateY(11px);
		transform : translateY(11px);
	}
	.hamburger.active span:nth-child(2){
		-webkit-transform: translateY(0px);
		-moz-transform : translateY(0px);
		transform : translateY(0px);
	}
	.hamburger.active span:nth-child(3) {
		-webkit-transform: translateY(-9px);
		-moz-transform : translateY(-9px);
		transform : translateY(-9px);
	}
}