@charset "utf-8";



/* ヘッダー---------------- */
header{
	position:fixed;
	top:0;
	z-index:999;
	background:#fff;
	width:100%;
}

header .wrapper{
	max-width:1920px;
	padding:0px;
}
#header-content{
	display:flex;
	justify-content:space-between;
    align-items: center;
}
#header-logo{
	width:auto;
	margin-left:4.15%;
}
#header-logo img{
	width:auto;
	height:45px;
	object-fit: contain;
}

@media only screen and (max-width:1400px){
	#header-logo{
		width:auto;
		margin-left:20px;
	}
}
/*メディアクエリここから*/
@media only screen and (max-width:1280px){

	header{
	}

	#header-logo{
		width:auto;
		margin-left:20px;
		padding-top:8.5px;
		padding-bottom:8.5px;
	}

	#header-logo img{
		width:auto;
		height:33px;
	}
	#navi-contact{
		text-align:center;
		margin: 30px auto 100px;
	}
}






/* ナビゲーション---------------- */
#main-navi{
}
#main-navi .wrapper{
	padding:0;
}
#main-navi{
	display:flex;
}
#main-navi ul{
	display:flex;
}
#main-navi ul  li  a{
	display:block;
	text-align:center;
	text-decoration: none;
	position:relative;
	padding:40px 30px 35px;
	white-space:nowrap;
	position:relative;;
}

#main-navi ul  li .jp{
	font-size:1.25em;
	font-weight:500;
	line-height:1.3;
	color:#000;
	transition:ease 0.3s color;
}
#main-navi ul  li:hover .jp{
	color:#0034C4;
}

#main-navi ul  li .en{
	font-size:0.7em;
	font-weight:400;
	line-height:1.4;
	color:#929292;
	transition:ease 0.3s color;
}


#main-navi ul  li.contact  a{
	padding:40px 90px 35px;
	margin-left:60px;
	background:linear-gradient(90deg, #67B8FF, #00195D);
}

#main-navi ul  li.contact .jp{
	color:#fff;
}
#main-navi ul  li.contact:hover .jp{
	color:#C8C8C8;
}

#main-navi ul  li.contact .en{
	color:#fff;
}
#main-navi ul  li.contact:hover .en{
	color:#C8C8C8;
}


@media only screen and (max-width:1700px){
	#main-navi ul  li  a{
		padding:40px 15px 35px;
	}
	#main-navi ul  li.contact  a{
		padding:40px 45px 35px;
		margin-left:30px;
		background:linear-gradient(90deg, #67B8FF, #00195D);
	}
}

@media only screen and (max-width:1400px){
	#main-navi ul  li.contact  a{
		margin-left:15px;
	}
}
@media only screen and (max-width:1280px){
	#main-navi {
		display:none;
		position:fixed;
		top:50px;
		right:0;
		width:100%;
		z-index:8888;
		background:#00268F;
		padding:0 20px;
	}
	#main-navi ul{
		flex-direction:column;
	}
	#main-navi ul li{
		border-bottom:1px solid #fff;
	}
	#main-navi ul li a{
		color:#fff;
		transition:0.3s ease colorr;
	    text-align: left;
	    line-height:normal;
	    padding:15px 0px;
		background:#00268F;
	}
	#main-navi ul li .en{
		display:none;
	}
	#main-navi ul li .jp{
		color:#fff;
	}
	#main-navi ul li:hover .jp{
		color:#C8C8C8;
	}
	#main-navi ul li.contact{
		border-bottom:none;
	}
	#main-navi ul li.contact a{
		color:#fff;
		margin-left:0;
	    padding:15px 0px;
		background:#00268F;
	}
}

/* スマホボタン---------------- */

#sp-menu{
	display:none;
}
@media only screen and (max-width:1280px){
	#sp-menu{
		display:block;
		position: fixed;
		top: 0px;
		right: 0;
		cursor:pointer;
		border-radius:0px;
		
		background:#00268F;
		z-index:9999;
	}
	#header-button{
		display:block;
		cursor:pointer;
		width:50px;
		height:50px;
		position:relative;
		background:#00268F;
		left:0;
		border-radius:0px;
	}
	.hnbgmenu {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100%;
		cursor: pointer;
	}
	.menu-line {
		top: 50%;
		top: calc(50% - 1px);
	}
	.menu-inner::after,
	.menu-inner::before {
		content: "";
	}
	.menu-line,
	.menu-inner::after,
	.menu-inner::before {
		position: absolute;
		display: block;
		width: 50%;
		left: 25%;
		height: 2px;
		transition: .15s ease-out;
		background-color: #fff;
	}
	.menu-inner::after,
	.menu-inner::before {
		height: 2px;
	}
	.menu-inner::before {
		top: 25%;
		top: calc(30% - 1px);
	}
	.menu-inner::after {
		top: 75%;
		top: calc(70% - 1px);
	}
	.hnbgmenu.active .menu-line {
		width: 0;
		opacity: 0;
		transform: translateX(20px) rotate(90deg);
	}
	.hnbgmenu.active .menu-inner::before {
		transform: translateY(10.5px) translateX(0px) rotate(-135deg);
	}
	.hnbgmenu.active .menu-inner::after {
		transform: translateY(-10.5px) translateX(0px) rotate(135deg);
	}
}