@charset "utf-8";
/*------------------------*/
/* header
   ========================================================================== */
body.gnavOpen #cnts {
	pointer-events: none;
}
header {
	position: fixed;
	z-index: 400;
	height: 130px;
	transition: 0.6s ease 0s;
	top: 0;
	right: 0;
	display: flex;
	align-items: center;
	width: 90%;
}
header::after {
	/* content: ""; */
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 64px;
	z-index: 21;
}

/* sp
   ========================================================================== */
@media screen and (max-width: 750px) {
	header {
		height: 75px;
		width: 100%;
	}
	header.top {
		height: 75px;
		background: none !important;
	}
	header.sticky .hd-inner {
		/* background: rgb(255 255 255 / 54%); */
		transition: 0.2s ease;
		margin: 0;
	}
	header.top.sticky {
		transform: translateY(0%);
		/* background: rgb(255 255 255 / 100%); */
		/* backdrop-filter: blur(5px); */
	}
	header .hd-inner, header.top.sticky .hd-inner {
		height: 75px;
		padding: 0;
		transition: 0.2s ease;
		margin: 0;
	}
	header #gnav .gnav-hamburger {
		width: 44px;
		height: 44px;
		position: absolute;
		z-index: 32;
		cursor: pointer;
		box-sizing: content-box;
		pointer-events: auto;
		margin-right: 0;
		display: flex;
		justify-content: center;
		margin: 0;
		right: 2%;
		top: 0;
		bottom: 0;
		margin: auto;
	}
	header.top #gnav .gnav-hamburger{
    opacity: 0;
    transition: 0.2s ease;
    pointer-events: none;
}
	header.top.sticky #gnav .gnav-hamburger{
    opacity: 1;
    transition: 0.2s ease;
    pointer-events: auto;
}
	.gnavOpen header #gnav.open .gnav-hamburger {
	}
	header #gnav .gnav-hamburger .btn{
    margin: 0;
    position: relative;
    width: 100%;
    height: 100%;
}
	header #gnav .gnav-hamburger .btn > span {
		display:block;
		position:absolute;
		width: 20px;
		background: #333;
		height: 1px;
		left: 0;
		right: 0;
		transition: 0.5s ease;
		margin: auto;
	}
	header #gnav .gnav-hamburger .btn > span:nth-of-type(1) {
		top: 32%;
	}
	header #gnav.open .gnav-hamburger .btn > span:nth-of-type(1) {
		top: 48%;
		rotate: 45deg;
	}
	header #gnav .gnav-hamburger .btn > span:nth-of-type(2) {
		top: 50%;
	}
	header #gnav.open .gnav-hamburger .btn > span:nth-of-type(2) {
		opacity:0;
	}
	header #gnav .gnav-hamburger .btn > span:nth-of-type(3) {
		top: 67%;
	}
	header #gnav.open .gnav-hamburger .btn > span:nth-of-type(3) {
		top: 48%;
		rotate: 135deg;
	}
	header.top #gnav .gnav-hamburger .btn > span:not(:nth-of-type(4)) {
		background: #000;
	}
	header #gnav .gnav-hamburger .btn > span:nth-of-type(4) {
		display: none;
	}
	header #gnav .gnav-hamburger .btn > span:not(:nth-of-type(4)) {
		width: 20px;
	}
	header.top #gnav .gnav-hamburger .icon::before {
		background-image: url(../img/serch-icon.png);
		width: 18px;
		height: 20px;
	}
	header #gnav .gnav-inner {
		width: 100%;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 30;
		height: 100%;
		min-height: 100vh;
		pointer-events: none;
		transition: ease 0.2s;
		margin: auto;
		background: #fff;
		overflow-y: scroll;
		opacity: 0;
	}
	header #gnav .gnav-inner .nav-logo{
    width: 43.2vw;
    margin: 0 0 0 25px;
    display: flex;
    align-items: center;
    height: 75px;
}
	header #gnav.close .gnav-inner {
	opacity: 0;
}

header #gnav.open .gnav-inner {
	opacity: 1;
	pointer-events: auto;
	/* transform: translateX(00%); */
	/* transition: transform ease 0.8s; */
}
	header.sticky #gnav .gnav-inner {
		top: 0;
		padding-top: 0;
	}
	body.gnavOpen #container header .hd-inner::before {
		display: none;
	}
	
	header #gnav .gnav-hamburger .icon::before {
		width: 18px;
		height: 20px;
	}
	header #gnav div.gnav-inner .nav-cnts {
		display: flex;
		max-width: 910px;
		width: 100%;
		flex-wrap: wrap;
		flex-direction: column;
		justify-content: space-between;
		position: relative;
		margin-top: 0;
		border-top: 0px solid;
		padding: 30px 0;
		border-top: 1px solid;
	}
	header.sticky #gnav div.gnav-inner .nav-cnts {
		/* border-top:0; */
	}
	header .hd-logo {
		width: 43.2vw;
		margin: 0 0 0 25px;
		display: flex;
		align-items: center;
		height: 75px;
		transition: 0.2s ease;
	}
	header.sticky .hd-inner .hd-logo {
		display: flex;
		z-index: 31;
		opacity: 1;
		pointer-events: auto;
	}
	header.top .hd-logo {
		opacity: 0;
		pointer-events: none;
	}
	.gnavOpen header .hd-inner .hd-logo {
		/* display:none; */
	}
	.gnavOpen header.sticky .hd-inner .hd-logo {
		/* z-index: 31; */
	}
	header .hd-logo a {
		display: flex;
		align-items: center;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 41/2;
	}
	.nav-wrap {padding: 40px 0;}
.nav-wrap .nav {width: 88%;display: flex;flex-direction: column;justify-content: flex-start;gap: 30px;}
.nav-wrap .nav li{
    margin: 0;
}
	.nav-wrap .nav li a{
		font-size:2.9rem;
		font-family: "Roboto", sans-serif;
		display: block;
		text-align: left;
		font-weight: 300;
	}
}
/* pc
   ========================================================================== */
@media screen and (min-width: 750px) {
	/*============================
#hd
============================*/

header#hd div.hd-inner {display: flex;align-items: center;margin: 0;width: 100%;justify-content: space-between;}
header#hd div.hd-inner div.hd-logo {width: 30vw;max-width: 276px;margin: 0;}
header#hd div.hd-inner div.hd-logo a {
}
header#hd div.hd-inner div.hd-logo a picture {
}
header#hd div.hd-inner div.hd-logo a picture source {
}
header#hd div.hd-inner div.hd-logo a picture img {
}
header#hd.top{/* transform: translateY(-100%); */}
	header#hd.top.sticky {transform: translateY(0%);}
/*============================
#gnav
============================*/
header#hd div.hd-inner div#gnav{margin: 0;}
header#hd div.hd-inner div#gnav div.gnav-hamburger.ham-btn {
}
header#hd div.hd-inner div#gnav div.gnav-hamburger.ham-btn div.btn {
}
header#hd div.hd-inner div#gnav div.gnav-hamburger.ham-btn div.btn span {
}
header#hd div.hd-inner div#gnav div.gnav-inner {}
header#hd div.hd-inner div#gnav div.gnav-inner nav.nav-wrap {}
header#hd div.hd-inner div#gnav div.gnav-inner nav.nav-wrap ul.nav {display: flex;align-items: center;gap: 35px;}
header#hd div.hd-inner div#gnav div.gnav-inner nav.nav-wrap ul.nav li {
}
header#hd div.hd-inner div#gnav div.gnav-inner nav.nav-wrap ul.nav li a {font-size: 2rem;font-family: "Roboto", sans-serif;transition: 0.2s ease;}
header#hd div.hd-inner div#gnav div.gnav-inner nav.nav-wrap ul.nav li a:hover{
	opacity:0.6;
}
}