.sticky .header_main {
	background-color: rgba(200, 250, 250, 0.5);
	/* 背景のみ半透明 */
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	height: 80px;
	box-shadow: 0 5px 15px #0571B9;
}

.header_main {
	z-index: 100;
	transition: box-shadow .6s, background-color .6s;
	top: 0;
	width: 100%;
	height: 80px;
	display: flex;
	align-items: center;
	transition: all .3s ease;
	background-color: rgba(171, 213, 253, 0.8);
	background-color: transparent;
	position: fixed;
	justify-content: space-between;
}

.header_main.hide {
	transform: translateY(-200%) !important;
}

.header_main img {
	width: 100%;
}

.h_logo_a {
	width: 10%;
	position: absolute;
	top: 50%;
	left: 10%;
	transform: translate(-50%, -50%);
}


.nav_list {
	width: 50%;
	display: flex;
	position: absolute;
	top: 50%;
	right: 10%;
	transform: translate(-50%, -50%);
	width: fit-content;
	font-weight: bold;
	font-size: clamp(1px, 2vw, 18px);
	align-items: center;
}


.nav_list li {
	margin-left: 15%;
	white-space: nowrap;
	position: relative;
}

.nav_list li a {
	color: rgb(1, 1, 1);
}

.nav_list li a:hover {
	color: #0571B9;
}

.nav_list li a::after {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	width: 0;
	height: 2px;
	transform: translate(-50%, 3%);
	border-radius: 2px;
	background-color: #0571B9;
	transition: all .3s ease;
}

.nav_list li a:hover::after {
	width: 100%;
}

.nav_list a.nav_contact {
	display: block;
	padding: 1rem 1rem 1rem 1rem;
	line-height: 1.3;
	display: block;
	font-weight: bold;
	border-radius: 50rem;
	position: relative;
	color: black;
	background: linear-gradient(270deg, #feffff 0%, #3b7cec 50%, #f5abab 100%);
	background-position: 10% 50%;
	background-size: 200% auto;
	max-width: 300px;
	transition: background-position .3s ease-out
}

.nav_list a.nav_contact:hover {
	background-position: 99% 50%;
	color: black;
}

.nav_list a.nav_contact::after {
	content: none;
	position: absolute;
	top: 50%;
	width: 6px;
	height: px;
	border-right: solid 2px #fff;
	border-bottom: solid 2px #fff;
	right: 23px;
	-webkit-transform: translateY(-50%) rotate(-45deg);
	transform: translateY(-50%) rotate(-45deg)
}

.nav_list a.nav_active::after {
	width: 100%;
}



@media (max-width: 768px) {


	.nav_list {
		width: 50%;
		display: flex;
		position: absolute;
		top: 50%;
		right: 1%;
		transform: translate(-50%, -50%);
		width: fit-content;
		font-weight: bold;
		font-size: clamp(1px, 2vw, 18px);
		align-items: center;
	}

	.nav_list li {
		margin-left: 10%;
		white-space: nowrap;
		position: relative;
	}
		

		.header_main {
			z-index: 100;
			transition: box-shadow .6s, background-color .6s;
			top: 0;
			width: 100%;
			height: 80px;
			display: flex;
			align-items: center;
			transition: all .3s ease;
			background-color: rgba(171, 213, 253, 0.8);
			background-color: transparent;
			position: fixed;
			justify-content: space-between;
		}
	
	
		.h_logo_a {
			width: 25%;
			position: absolute;
			top: 50%;
			left: 20%;
			transform: translate(-50%, -50%);
	
		}
}