@charset "utf-8";

.header_nav{
	font-size:1.6rem;
	.header_nav__list{
		display:flex;
		justify-content:left;
		li{
			margin:0 10px 0 10px;
			a{
				display:block;
				width:100%;
				text-decoration:none;
				&:hover{
					text-decoration:underline;
				}
			}
		}
	}
}

.is-animation{
	height:100px;
	transition:all 0.3s ease;
	h1{
		width:350px;
		margin-top:12px;
		transition:all 0.3s ease;
	}
	.header_nav{
		margin-top:38px;
	}
}

@media screen and (max-width: 1000px) {
	.sp-menu {
		width: 50px;
		height: 50px;
		position: relative;
		top:25px;
		right:10px;
		border: none;
		background: transparent;
		appearance: none;
		padding: 0;
		cursor: pointer;
		transition:all 0.3s ease;
	}
	.is-animation .sp-menu{
		top:20px;
		transition:all 0.3s ease;
	}
	.sp-menu__bar {
		display: inline-block;
		/*width: 44%;*/
		width: 80%;
		height: 2px;
		background: #242424;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		transition: .5s;
	}
	.sp-menu__bar:first-child {
		top: 16px;
	}
	.sp-menu__bar:nth-child(2) {
		/*top: 24px;*/
		top: 28px;
	}
	.sp-menu__bar:last-child {
		top: 40px;
		/*top: 32px;*/
	}
	.sp-menu--open .sp-menu__bar {
		top: 50%;
	}
	.sp-menu--open .sp-menu__bar:first-child {
		transform: translateX(-50%) translateY(-50%) rotate(45deg);
	}
	.sp-menu--open .sp-menu__bar:last-child {
		transform: translateX(-50%) translateY(-50%) rotate(-45deg);
	}
	.sp-menu--open .sp-menu__bar:nth-child(2) {
		display: none;
	}
	.header_nav {
		display: none;
		background: linear-gradient(to bottom, #1f74a8 0%,#004ca0 100%);
		position: absolute;
		top: 120px;
		width: 100%;
		height:100%;
		z-index: 9999;
	}
	.header_nav__list {
		text-align: center;
		list-style: none;
		padding: 0;
		margin: 0;
	}
	.header_nav__list-item {
		border-bottom: solid 1px #474747;
	}
	.header_nav__list-item:first-child {
		border-top: solid 1px #474747;
	}
	.header_nav__link {
		color: #fff;
		font-weight: 700;
		text-decoration: none;
		display: block;
		padding: 24px 0;
		transition: .5s;
	}
	
	.sp_menu_open{
		height:100%;
		overflow:hidden;
		main{
			/*display:none;*/
		}
		header{
			height:100%;
			nav{
				margin-top:0;
				.header_nav__list{
					padding-top:20px;
					display:block;
					li{
						text-align:left;
						border-bottom:1px solid #FFF;
						a{
							width:100%;
							display:block;
							color:#FFF;
							padding:20px 20px 20px 40px;
							box-sizing:border-box;
							position:relative;
							&:before{
								color:#FFF;
								content:"\f0da";
								font-family: "Font Awesome 5 Free";
								font-weight:900;
								font-size:1.4rem;
								position:absolute;
								left:15px;
								top:50%;
								transform:translateY(-50%);
							}
						}
					}
				}
			}
		}
		.is-animation{
			nav{
				margin-top:0;
				.header_nav__list{
					li{
						a{
							
						}
					}
				}
			}
		}
	}
	
}

@media screen and (max-width: 600px) {
	.sp-menu {
		top:20px;
	}
	.is-animation .sp-menu{
		top:8px;
	}
	.sp-menu__bar {
		width:66%;
	}
	header{
		height:100px;
	}
	header h1{
		width:300px;
		margin:18px 0 0 20px;
		transition:all 0.3s ease;
	}
	.is-animation h1{
		width:250px;
	}
}

@media screen and (max-width: 450px) {
	.sp-menu {
		top:16px;
		right:5px;
	}
	.is-animation .sp-menu{
		top:10px;
		right:5px;
	}
	.sp-menu__bar {
		width:50%;
	}
	header h1{
		width:220px;
		margin:18px 0 0 20px;
		transition:all 0.3s ease;
	}
	.is-animation h1{
		width:220px;
	}
	.sp-menu__bar:first-child {
		top: 16px;
	}
	.sp-menu__bar:nth-child(2) {
		top: 24px;
	}
	.sp-menu__bar:last-child {
		top: 32px;
	}
}

@media (hover: hover) and (pointer: fine) {
	.header_nav__link:hover {
		background: #333;
	}
}