@charset "utf-8";

header {
	position: fixed;
	width: 100%;
	height: 100px;
	border-top: 2px solid var(--color-black-04);
	border-bottom: 1px solid var(--color-gray-01);
	background: var(--color-white);
	z-index: 200;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	font-family: "リュウミン M-KL";
}
header.h-animation {height: 70px;}

.inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 1200px;
	height: 100%;
	margin: 0 auto;
}
.hLogo {
	width: 350px;
	height: 55px;
	margin: 10px 0 0;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
header.h-animation .hLogo {
	width: 255px;
	height: 40px;
}

nav {
	z-index: 100;
}
nav ul {
	display: flex;
	align-items: center;
}

/*2階層目以降は横並びにしない*/
nav ul ul{
	display: block;
}
/*下の階層のulや矢印の基点にするためliにrelativeを指定*/
nav ul li {
	position: relative;
}

nav ul li a {
	display: block;
	color: var(--color-black-01);
	text-decoration: none;
	font-weight: bold;
	padding: 10px 20px;
}

nav ul li:not(:last-of-type) a::after {
	content: '';
	/*絶対配置で線の位置を決める*/
	position: absolute;
	bottom: 0;
	left: 10%;
	/*線の形状*/
	width: 80%;
	height: 1px;
	background: var(--color-black-01);
	/*アニメーションの指定*/
	transition: all .4s;
	transform: scale(0, 1);/*X方向0、Y方向1*/
	transform-origin: center top;/*上部中央基点*/
}
nav ul li a:hover::after {
	transform: scale(1, 1);
}

nav ul li a:hover {
	color: var(--color-black-01);
}

nav ul li li a {
	padding: 10px 30px;
}

nav ul li.has_child a {
	cursor: pointer;
}

/*2階層目を持つliの矢印の設定*/
nav ul li.has_child::before{
	content:'';
	position: absolute;
	right: 0px;
	top: 18px;
	width: 6px;
	height: 6px;
	border-top: 2px solid var(--color-black-04);
	border-right: 2px solid var(--color-black-04);
	transform: rotate(135deg);
}
/*2階層のulの指定*/
nav li.has_child ul {
	position: absolute;
	left: 0;
	top: 50px;
	z-index: 4;
	background:var(--color-black-04);
	width: 180px;
	visibility: hidden;/*はじめは非表示*/
	opacity: 0;
	transition: all .3s;
}

/*hoverしたら表示*/
nav li.has_child:hover > ul,
nav li.has_child ul li:hover > ul,
nav li.has_child:active > ul,
nav li.has_child ul li:active > ul {
	visibility: visible;
	opacity: 1;
}

nav li.has_child ul li a {
	color: var(--color-white);
	border-bottom: solid 1px rgba(255,255,255,0.6);
}

nav li.has_child ul li:last-child a {
	border-bottom:none;
}

nav li.has_child ul li a:hover::after {
	transform: scale(0, 0);/*2階層目にはマウスオーバーの線を出さない*/
}

nav li.has_child ul li a:hover,
nav li.has_child ul li a:active {
	background: var(--color-black-01);
}
nav li.has_child ul li a::before {
	font-family: 'Font Awesome 5 Free';
	content: "\f105 ";
	position: absolute;
	font-size: 0.8em;
	font-weight: 900;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 10px;
}

#nav_toggle{
	display: none;
}


/* -----------------------------------------------------------
	SP
----------------------------------------------------------- */
@media screen and (max-width:960px){
	header {
		height: 70px;
	}
	.inner {
		width: 90%;
	}
	.hLogo {
		width: 255px;
		height: 40px;
	}
	
	/*メニュー部分*/
	nav {
		display: none;
		position: absolute;
		top: 68px;
		width: 100%;
		background: var(--color-white);
		left: 0;
	}
	nav ul {
		display: block;
		margin: 0 auto;
		width: 100%;
	}
	nav ul li {
		text-align: center;
		padding: 10px 0;
		border-bottom: 1px solid var(--color-black-04);
	}
	
	nav ul li:not(:last-of-type) a::after {
		transform: scale(0, 0);/*スマホにはマウスオーバーの線を出さない*/
	}
	
	nav ul li li {
		padding: 0px;
	}
	nav ul li li a{
		padding: 20px 10px;
	}
	nav ul li:last-child{
		border: none;
	}
	
	nav li.has_child ul,
	nav li.has_child ul ul {
		position: relative;
		left: 0;
		top: 10px;/*padding分のスペースを埋める*/
		width: 100%;
		visibility: visible;/*JSで制御するため一旦表示*/
		opacity: 1;/*JSで制御するため一旦表示*/
		display: none;/*JSのslidetoggleで表示させるため非表示に*/
		transition: none;/*JSで制御するためCSSのアニメーションを切る*/
	}
	nav ul li.has_child {
		border-bottom: 1px solid var(--color-black-04);
	}
	nav ul li.has_child::before {
		right: 50px;
		top: 28px;
	}
	nav ul li.has_child.active::before {
		transform: rotate(-45deg);
	}
	
	nav li.has_child ul li a::before {
		left: 25%;
	}
	
		
	/*開閉ボタン*/
	#nav_toggle {
		display: block;
		width: 40px;
		height: 40px;
		position: relative;
		top: 4px;
		z-index: 100;
	}
	#nav_toggle div {
		position: relative;
	}
	#nav_toggle span {
		display: block;
		height: 3px;
		background: var(--color-black-01);
		position:absolute;
		width: 100%;
		left: 0;
		-webkit-transition: 0.5s ease-in-out;
		-moz-transition: 0.5s ease-in-out;
		transition: 0.5s ease-in-out;	
	}
	#nav_toggle span:nth-child(1){
		top:0px;
	}
	#nav_toggle span:nth-child(2){
		top:12px;
	}
	#nav_toggle span:nth-child(3){
		top:24px;
	}
	
	/*開閉ボタンopen時*/
		.open #nav_toggle span:nth-child(1) {
			top: 12px;
			-webkit-transform: rotate(135deg);
			-moz-transform: rotate(135deg);
			transform: rotate(135deg);
		}
		.open #nav_toggle span:nth-child(2) {
			width: 0;
			left: 50%;
		}
		.open #nav_toggle span:nth-child(3) {
			top: 12px;
			-webkit-transform: rotate(-135deg);
			-moz-transform: rotate(-135deg);
			transform: rotate(-135deg);
		}
}