@charset "utf-8";

header {
	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	width: 100%;
	height: 80px;
	border-bottom: 1px solid #ccc;
	background: #172b4d;
	justify-content: flex-end;
	align-items: center;
	color: #fff;
	padding-right: clamp(10px, 3vw, 4.0rem);
	z-index: 20;
}

header a {
	display: block;
	padding: 5px 10px;
	color: #fff;
	border: 1px solid #fff;
	border-radius: 20px;
	transition: .3s;
	width: clamp(160px, 20vw, 200px);
	height: clamp(32px, 4vw, 40px);
	margin-left: clamp(20px, 2.5vw, 30px);
	display: grid;
	place-content: center;
	line-height: 1;
	background: none;
}

header a:hover {
	color: #163872;
	background-color: #fff;
}

header figure {
	height: 40px;
	width: 40px;
	clip-path: inset(0 0 0 0 round 20px);
	margin-right: clamp(10px, 2vw, 2.0rem);
}
.nav_btn{display:none;}
@media (max-width: 1765px) {
	@media (max-width:1023px) {
		@media (max-width:820px) {
			@media (max-width:512px) {
				header{ height:60px; }
				header figure{ width:30px; height:30px; }
				header p{ font-size:1.4rem; }
				header a{ width:140px; height:32px; font-size:1.4rem; margin-left:1.2rem; }
				.nav_btn{display:grid; width:6.0rem; height:6.0rem; background-color:#fff; position:absolute; left:0; top:0; z-index:200; place-content: center; place-items: center;}
				.nav_toggle_menu{color:#333; font-size:1.2rem; position:absolute; left:0; right:0; bottom:5px; margin:auto; }
				.nav_btn .nav_toggle{display: block; position: relative; width: 3.6rem; height: 3.6rem;}
				.nav_btn .nav_toggle i{transition: all 0.5s; display: block; width: 36px; height: 2px; border-radius: 2px; left:0; right:0; margin:auto; background-color: #333; position: absolute;}
				.nav_btn .nav_toggle i:nth-child(1){top:7px;}
				.nav_btn .nav_toggle i:nth-child(2){top:12px;}
			}
		}
	}
}