/*==============================
        header
==============================*/
@charset "utf-8";

#header{
	position: sticky;
	top:0;
	left:0;
	z-index: 99;
	.header {
    	background: url(../img/common/bg.jpg);
		.header_inner {
			width: calc(100% - 60px);
			max-width:1240px;
			height: 90px;
			margin:0 auto;
			display:grid;
			grid-template-columns: 230px auto;
			grid-column-gap:30px;
			justify-content: space-between;
			align-items:center;
			.header_contact {
				height: 3.6em;
				padding: 0 1.5em;
				display: grid;
				grid-template-columns: repeat(2,auto);
				grid-gap: .75em;
				align-items: center;
				justify-content: center;
				background-color: var(--color_base);
				font-size: 1.2rem;
				line-height: 1.3;
				color:#FFFFFF;
				border-radius: .5em;
				&::before {
					font-size: 1.4em;
				}
			}
		}
	}
	.menu-gmenu-container {
		background:url(../img/common/mv_bg2.png) repeat-y calc(50vw - 540px - 317px) 0/317px auto #FFFFFF;
		ul {
			height: 60px;
			/*background: rgb(0,61,150);
			background: linear-gradient(90deg, rgba(0,61,150,1) 10%, rgba(255,255,255,1) 10%);*/
			width: calc(100% - 60px);
			max-width:1300px;
			margin:0 auto;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			li {
				a {
					display: grid;
					font-size: 1.5rem;
					line-height: 1;
					grid-gap: .33em;
					color:var(--color_base);
					span {
						color:#7a7b7b;
						font-size: .75em;
					}
					padding-left: 1em;
					padding-right: 2em;
					background-image: linear-gradient(0deg, rgba(5,97,141,0) 0%, rgba(5,97,141,1) 100%);
					background-size: .33em 100%;
					background-position: left top;
					background-repeat: no-repeat;
				}
			}
		}
	}
}

@media (hover: hover) {

	#header{
		.header {
			.header_inner {
				.header_contact {
					transition:.3s;
					&:hover {
						background-color: var(--color_base2);
					}
				}
			}
		}
		.menu-gmenu-container {
			ul {
				li {
					a {
						transition:.3s;
						&:hover {
							opacity: .75;
						}
					}
				}
			}
		}
	}

}

@media screen and (max-width:1360px){

	#header{
		.menu-gmenu-container {
			background:url(../img/common/mv_bg2.png) repeat-y -177px 0/317px auto;
		}
	}
	
}

@media screen and (max-width:1100px){

	#header{
		.menu-gmenu-container {
			ul {
				li {
					a {
						font-size: 1.4rem;
					}
				}
			}
		}
	}
}

@media screen and (max-width:1024px){

	#header{
		.menu-gmenu-container {
			background:url(../img/common/mv_bg2.png) repeat-y -250px 0/317px auto;
			ul {
				/* background: linear-gradient(90deg, rgba(0,61,150,1) 5%, rgba(255,255,255,1) 5%); */
				li {
					a {
						font-size: min(1.57vw,1.4rem);
						padding-right: 1em;
					}
				}
			}
		}
	}
}

@media screen and (max-width:768px){

	#header{
		.header {
	    	background: url(../img/common/bg.jpg);
			.header_inner {
				width: 100%;
				max-width:1240px;
				height: 50px;
				margin:0 auto;
				display:grid;
				grid-template-columns: auto 50px;
				grid-column-gap:30px;
				justify-content: space-between;
				align-items:center;
				.logo {
					width:180px;
					margin-left:20px;
				}
				.header_contact {
				display:none;
				}
			}
			.spbtn {
				height:50px;
				position:relative;
				background-color:#003d96;
				&::before,&::after {
					content:'';
					display:block;
					width:44%;
					height:2px;
					background-color:#ffffff;
					position:absolute;
					top:16px;
					left:50%;
					transition:.5s;
					transition-timing-function:ease-in-out;
					transform-origin:center center;
					transform:translateX(-50%);
				}
				&::after {
					top:auto;
					bottom:16px;
				}
				span {
					display:block;
					width:44%;
					height:2px;
					background-color:#ffffff;
					position:absolute;
					top:50%;
					left:50%;
					transform:translate(-50%,-50%);
					transition:.5s;
					transition-timing-function:ease-in-out;
				}
			}
		}
		.menu-gmenu-container {
			display:none;
		}
	}

	body {
		&.menuopen {
			overflow:hidden;
			#header {
				.header {
					.spbtn {
						&::before {
							transform:translateX(-50%) rotate(45deg);
							top:24.25px;
						}
						&::after {
							transform:translateX(-50%) rotate(-45deg);
							bottom:24.25px;
						}
						span {
							opacity:0;
							transform:translate(-50%,-50%) scaleX(0);
						}
					}
				}
			}
			.spmenu {
				opacity:1;
				top:50px;
			}
		}
	}
	
	
	.spmenu {
		position:fixed;
		top:-105vh;
		opacity:0;
		width:100%;
		background-color:#FFFFFF;
		height:auto;
		z-index:98;
		text-align:center;
		transition:.5s;
		height: calc(100vh - 50px);
		height: calc(100dvh - 50px);
		overflow:auto;
		.spmenu_inner {
			padding-bottom:30px;
			.menu-gmenu-container {
				ul {
					font-size:1.4rem;
					border-top:1px solid #e0e0e0;
					li {
						border-bottom:1px solid #e0e0e0;
						a {
							padding:0 20px;
							display:grid;
							grid-template-columns:auto 1fr auto;
							justify-content:space-between;
							grid-gap:1em;
							align-items:center;
							height:50px;
							span {
								justify-self:start;
								font-size:.8em;
							}
							&::after {
								content:'';
								width:.3em;
								height:.3em;
								border-top:2px solid #003d96;
								border-right:2px solid #003d96;
								transform:rotate(45deg);
							}
						}
					}
				}
			}
		}
	}

}