@charset "utf-8";
/*------------------------*/
/* header
   ========================================================================== */
body.gnavOpen #cnts {
	pointer-events: none;
}
header {
	position: absolute;
	width: 21vw;
	z-index: 400;
	height: 80px;
	left: 5vw;
	display: flex;
	align-items: center;
}
.gnavOpen header {
	/* min-height: 100%; */
	background: rgb(255 255 255 / 0%);
}
header.top {
	background: none;
	backdrop-filter: blur(0px);
	will-change: filter;
	transform: translateZ(0);
	box-shadow: 0px 0px 0px 0px rgb(0 0 0 / 0%);
}
.gnavOpen header.top {
	backdrop-filter: blur(0px);
	will-change: filter;
	transform: translateZ(0);
}
header.top.sticky {
	transform: translateY(0%);
	background: rgb(255 255 255 / 50%);
	backdrop-filter: blur(5px);
	transform: translateZ(0);
	will-change: filter;
	box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 16%);
}
.gnavOpen header.top.sticky {
	transform: translateY(0%);
	background: rgb(255 255 255 / 0%);
	box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 16%);
}
header.top.sticky.hide {}
header.sticky {}
body #container header .hd-inner::before{
	opacity:0;
	transition:0.5s ease;
	pointer-events:none;
	content: "";
	position: absolute;
	background: rgb(51 51 51 / 84%);
	width: 100%;
	height: 100lvh;
	top: 0;
	left: 0;
	z-index: 3;
	will-change: filter;
	transform: translateZ(0);
}
body.gnavOpen #container header .hd-inner::before {
	opacity:1;
}
header .hd-inner, header.top.sticky .hd-inner {
	height: 81px;
	display: flex;
	align-items: center;
	padding: 0 0 0 4vw;
}
header.top .hd-inner {
	border-bottom: none;
}
header.top.sticky .hd-inner {
}
header.sticky .hd-inner {}
header.sticky .hd-inner .hd-logo a {}
header .hd-logo {
	z-index: 0;
	top: 0;
	margin: 0;
	pointer-events: auto;
	height: auto;
	width: 100%;
	display: flex;
	align-items: center;
	transition: 0s ease 0s;
	opacity: 1;
}
header.top .hd-logo {
	opacity: 0;
	pointer-events: none;
}
.gnavOpen header .hd-inner .hd-logo {
	pointer-events: none;
}
header .hd-logo a {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	aspect-ratio: 41/2;
}
header.sticky .hd-inner .hd-logo a img {
}
.p-sub header .hd-logo {
	box-shadow: 0px 1px 9px rgb(51 51 51 / 20%);
}
header #gnav {
	margin: 0 0 0 auto;
}
header #gnav .gnav-hamburger {
	position: relative;
	z-index: 32;
	cursor: pointer;
	width: 111px;
	height: 80px;
	box-sizing: content-box;
	pointer-events: auto;
	margin-right: 0;
	display: flex;
	justify-content: center;
	margin: 0;
}
header.sticky #gnav .gnav-hamburger {}
header.sticky.top #gnav .gnav-hamburger, header.top #gnav.open .gnav-hamburger {
	display: flex;
}
header.top #gnav .gnav-hamburger {
}
header.sticky.top #gnav .gnav-hamburger, header.top #gnav.open .gnav-hamburger {
}
header #gnav .gnav-hamburger .btn {
	width: 45%;
	position: relative;
	margin: 0;
}
header #gnav .gnav-hamburger .btn > span {
}
header.sticky #gnav .gnav-hamburger .btn > span {}
header #gnav .gnav-hamburger .btn > span:nth-of-type(1) {
	top: 31%;
}
header #gnav.open .gnav-hamburger .btn > span:nth-of-type(1){rotate: 45deg;top: 44%;}
header #gnav .gnav-hamburger .btn > span:nth-of-type(2) {
	top: 44%;
}
header #gnav.open .gnav-hamburger .btn > span:nth-of-type(2){
    opacity: 0;
}
header #gnav .gnav-hamburger .btn > span:nth-of-type(3) {
	top: 57%;
}
header #gnav.open .gnav-hamburger .btn > span:nth-of-type(3){
    rotate: -45deg;
    top: 44%;
}
header #gnav .gnav-hamburger .btn > span:nth-of-type(4) {
	position: absolute;
	left: 0;
	right: 0;
	margin: auto;
	top: 63%;
	font-size: 1.2rem;
	font-weight: 600;
	color: #004485;
}
header #gnav .gnav-hamburger .btn > span:not(:nth-of-type(4)) {
	background: #004485;
	height: 2px;
	width: 38px;
	display: block;
	position: absolute;
	transition: transform 0.2s ease,rotate 0.2s ease;
	left: 0;
	right: 0;
	margin: auto;
}
header.top #gnav .gnav-hamburger .btn > span:not(:nth-of-type(4)) {
}
header.top.sticky #gnav .gnav-hamburger .btn > span:not(:nth-of-type(4)), header.top #gnav.open .gnav-hamburger .btn > span:not(:nth-of-type(4)) {
	background: #004485;
}
header.top #gnav .gnav-hamburger .btn > span:nth-of-type(4) .open {
	color: #004485;
}
header.top.sticky #gnav .gnav-hamburger .btn > span:nth-of-type(4) .open {
	color: #004485;
}
header.top #gnav .gnav-hamburger .btn > span:nth-of-type(4) .close {
    color: #004485;
}
header #gnav.open .gnav-hamburger .btn > span:nth-of-type(4) .open, header #gnav.close .gnav-hamburger .btn > span:nth-of-type(4) .close {
	display: none;
}
header #gnav .gnav-hamburger .icon {
	width: 45%;
	display: flex;
	align-items: center;
	margin: 0;
	position: relative;
}

header #gnav .gnav-hamburger .icon::before {
	content: "";
	position: absolute;
	background-image: url("../img/serch-icon.png");
	background-repeat: no-repeat;
	background-size: contain;
	width: 30px;
	height: 33px;
	left: 0;
	right: 0;
	margin: auto;
}
header.top #gnav .gnav-hamburger .icon::before {
}
header.top.sticky #gnav .gnav-hamburger .icon::before, header.top #gnav.open .gnav-hamburger .icon::before {
	background-image: url("../img/serch-icon.png")
}
header #gnav .gnav-hamburger .icon img {
	width: 57%;
}
header #gnav .gnav-inner {
	padding-top: 0;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 30;
	width: 375px;
	height: 100%;
	min-height: 100vh;
	pointer-events: none;
	opacity: 1;
	transform: translateX(100%);
	transition: ease 0.5s;
	margin: auto;
	background: #fff;
	overflow-y: scroll;
}
header #gnav.close .gnav-inner {
	transform: translateX(100%);
	transition: ease 0.5s;
}
header #gnav.open .gnav-inner {
	opacity: 1;
	pointer-events: auto;
	transform: translateX(0%);
	transition: transform ease 0.5s;
}
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: 80px;
	padding: 20px 0 30px 0;
}
header #gnav div.gnav-inner div.nav-serch {
	width: 90%;
	margin-bottom: 45px;
}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter {}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div {}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div ul {
	display: flex;
	justify-content: flex-end;
	border: 1px solid #E0E0E0;
	border-radius: calc(1px / 0);
	padding: 10px 6%;
	background: #F2F2F2;
	align-items: center;
}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div ul li {
	display: block;
	margin: 0;
	padding: 0;
	width: calc(100% - 20px);
}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div ul li:nth-child(1) {
	order: 1;
	padding-left: 17px;
}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div ul li:nth-child(2) {
	width: 20px;
}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div ul li input {
	border: none;
	font-size: 1.6rem;
	background: #F2F2F2;
	width: 100%;
	line-height: 1.8;
}
header #gnav div.gnav-inner div.nav-serch form.searchandfilter div ul li input[type="submit"] {
	font-size: 0;
	width: 23px;
	aspect-ratio: 45/47;
	background-color: rgb(0 0 0 / 0%);
	background-image: url("../img/serch-icon-bk.png");
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}
header #gnav div.gnav-inner .nav-cnts div.logo {
	margin: 0;
	width: 80px;
}
header #gnav div.gnav-inner .nav-cnts div.logo img {}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	width: 90%;
	margin-bottom: 50px;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 35px;
	width: 100%;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul li {
	margin: 0;
	text-align: left;
	font-size: 1.6rem;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul li a {
	transition: 0.2s ease;
	font-size: 1.8rem;
	font-weight: 500;
	display: flex;
	flex-direction: column;
	text-align: center;
	color: #2B6192;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul li a .en {
	display: block;
	font-family: "Inter", sans-serif;
	font-size: 1.2rem;
	position: relative;
	width: 100%;
	text-align: center;
	color: rgb(43 97 146 / 50%);
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-left {
	width: 35%;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-left li {}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-left li a {}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-center {
	width: 26%;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-center li {}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-center li a {}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-right {
	width: 26%;
}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-right li {}
header #gnav div.gnav-inner .nav-cnts nav.nav-wrap ul.nav-right li a {}
header #gnav div.gnav-inner div.nav-bottom {
	width: 90%;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
header #gnav div.gnav-inner div.nav-bottom h1.nav-logo {
	width: 100%;
	margin: 0;
}
header #gnav div.gnav-inner div.nav-bottom h1.nav-logo a {}
header #gnav div.gnav-inner div.nav-bottom h1.nav-logo a img {
	width: 209px;
}
header #gnav div.gnav-inner div.nav-bottom div.tw {
	width: 100%;
	margin: 0;
}
header #gnav div.gnav-inner div.nav-bottom div.tw a {}
header #gnav div.gnav-inner div.nav-bottom div.tw a img {
    width: 30px;
}
header #gnav div.gnav-inner div.nav-bottom div.yt {
	width: 100%;
	margin: 0;
}
header #gnav div.gnav-inner div.nav-bottom div.yt a {}
header #gnav div.gnav-inner div.nav-bottom div.yt a img {
	width: 43px;
}
/* sp
   ========================================================================== */
@media screen and (max-width: 750px) {
	header {
		height: 11.3vw;
		left: initial;
		right: 5vw;
		width: 42.66vw;
	}
	header.top {
		height: 44px;
		background: none !important;
	}
	header.sticky .hd-inner {
		background: rgb(255 255 255 / 54%);
		transition: 0.2s ease;
	}
	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: 44px;
		padding: 0;
		transition: 0.2s ease;
	}
	header #gnav .gnav-hamburger {
		width: 67px;
		height: 42px;
	}
	.gnavOpen header #gnav.open .gnav-hamburger {
		background: #fff;
	}
	header #gnav .gnav-hamburger .btn > span{
		width: 20px;
	}
	header #gnav .gnav-hamburger .btn > span:nth-of-type(1) {
		top: 33%;
	}
	header #gnav.open .gnav-hamburger .btn > span:nth-of-type(1){top: 48%;}
	header #gnav .gnav-hamburger .btn > span:nth-of-type(2) {
		top: 50%;
	}
	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%;}
	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;
		height: 1px;
	}
	header.top #gnav .gnav-hamburger .icon::before {
		background-image: url(../img/serch-icon.png);
		width: 18px;
		height: 20px;
	}
	header #gnav .gnav-inner {
		width: 100%;
		top: 0;
	}
	header.sticky #gnav .gnav-inner {
		top: 0;
		padding-top: 43px;
	}
	body.gnavOpen #container header .hd-inner::before {
		display: none;
	}
	body.gnavOpen header{
    box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 16%);
    min-height: initial;
}
	.gnavOpen header.top {
		backdrop-filter: blur(0px);
		box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 0%);
	}
	.gnavOpen header.top.sticky {
		backdrop-filter: blur(5px);
		box-shadow: 0px 0px 10px 0px rgb(0 0 0 / 16%);
	}
	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;
		padding: 30px 0;
	}
	header.sticky #gnav div.gnav-inner .nav-cnts {
	}
	header .hd-logo {
		display: flex;
		align-items: center;
		height: 44px;
		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 {
	}
	.gnavOpen header.sticky .hd-inner .hd-logo {
	}
	header .hd-logo a {
		display: flex;
		align-items: center;
		aspect-ratio: 88/13;
	}
	header #gnav .gnav-inner .inner-logo {
		width: 47vw;
		margin: 0 0 0 5.5%;
		display: flex;
		align-items: center;
		height: 43px;
		opacity: 1;
	}
	.gnavOpen header #gnav .gnav-inner .inner-logo {
	}
	header.sticky #gnav .gnav-inner .inner-logo {
		display: none;
	}
	header.sticky #gnav .gnav-inner .inner-logo a img {
		display: none;
	}
	header #gnav .gnav-inner .inner-logo a {
		display: flex;
		align-items: center;
	}
	header #gnav.open .gnav-inner .inner-logo a {
		display: flex;
		align-items: center;
		height: 100%;
	}
	header.sub {
		transform: translateY(0%);
		background: rgb(255 255 255 / 50%);
		backdrop-filter: blur(5px);
	}
	
	header.sub .hd-logo {
		z-index: 31;
	}
	header.sub #gnav .gnav-inner {
		top: 0;
		padding-top: 43px;
	}
	header.sub #gnav .gnav-inner .inner-logo {
		display: none;
	}
}
/* pc
   ========================================================================== */
@media screen and (min-width: 750px) {
	header.sticky .hd-inner .hd-logo {
		opacity: 1;
		pointer-events: auto;
	}
}