@charset "UTF-8";

/**
 * オリジナルcss
 */

#header {
	width: 100%;
	z-index: 100;
	transition: .3s;
	height: 69px;
	padding: 16px 40px;
	position: fixed;
	top: 0;
	left: 0;
}

#header.header_bg {
	background-color: rgb(255, 255, 255, 0.9);
}

.admin-bar #header {
	margin-top: 32px;
}

#header-in {
	height: 100%;
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.site_info {
	text-align: center;

	.logo {
		margin: 0;
		width: 220px;
		aspect-ratio: 214 / 32;
		align-items: center;

		a {
			line-height: 1;
			display: inline-block;
			width: 100%;
			height: 100%;
			text-align: center;
			align-content: center;
		}

		img {
			display: block;
			width: 100%;
			height: auto;
		}
	}
}

.header_navi_menu {
	display: flex;
	/* flex-wrap: wrap; */
	align-items: center;
	gap: 32px;
	list-style: none;
	margin: 0;

	li {
		height: 100%;
		position: relative;

		a {
			display: block;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			text-decoration: none;
			font-size: 1.5rem;
			font-weight: 400;
			color: #353535;
		}
	}
}

.header_navi_menu_sub_menu {
	background: rgba(255, 255, 255, .2);
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: calc(100% - 8px);
	left: 0;
}

.header_navi_menu_sub_menu_child a {
	padding: 8px;
	display: block;
	white-space: nowrap;
	text-align: left;
}

.header_navi_menu_sub_menu_child a:hover {
	background: rgba(255, 255, 255, .4);
}

.header_navi_menu li:hover .header_navi_menu_sub_menu {
	opacity: 1;
	visibility: visible;
}


@media screen and (max-width: 1280px) {
	.header_navi {
		display: none;
	}
}

@media screen and (max-width:782px) {
	.admin-bar #header {
		margin-top: 46px;
	}
}

@media screen and (max-width:740px) {
	#header.header_valid .logo_image_b {
		max-width: 88px;
	}

}

@media screen and (max-width:768px) {
	#header {
		padding: 12px 16px;
	}

	.site_info {
		display: flex;
		align-items: end;
		gap: 6px;

		.site_description {
			order: 2;
		}

		.logo {
			order: 1;
			width: 172px;

			img {
				display: block;
			}
		}
	}
}

@media screen and (max-width:480px) {
	#header {
		padding: 0 16px;
		height: 40px;
	}
}