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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	background-color:#FFFFFF;
	box-shadow: 0px 6px 6px -6px rgba(0, 0, 0, 0.3);
	.wrap{
		.contents{
			width:100%;
			max-width: 100%;
			height:100px;
			.contents_inner{
				display:grid;
				grid-template-columns:auto 1fr 200px;
				grid-column-gap: 3em;
				align-items:center;
				font-size: 1.5rem;
				.logo {
					width:280px;
				}
				.menu-gmenu-container{
					.menu{
						display: grid;
						grid-template-columns: repeat(7, auto);
						justify-content: end;
                        grid-column-gap: 2em;
						li{
							text-align: center;
							a{
								line-height: 1.6;
								text-align: center;
								font-size: 1.5rem;
								span{
									display: block;
									font-size: 0.7em;
								}
							}
						}
						
					}
				}
				.menubtn{
					display: grid;
					grid-template-columns: auto auto;
					.btn{
						background-color: #E51836;
						width: 100px;
						height: 100px;
						&.blue{
							background-color: #002D82;
							position: relative;
							.spbtn {
								top:50%;
								left:50%;
								transform: translate(-50%, -50%);
								cursor:pointer;
								height:50px;
								position:relative;
								display:grid;
								align-content:center;
								justify-items:center;
								grid-row-gap:8px;
								&::before,&::after {
									content:'';
									width:40%;
									height:2px;
									background-color:#fff;
									transition:.3s;
								}
								span {
									width:40%;
									height:2px;
									background-color:#fff;
									transition:.3s;
								}
							}
						}
						&.red{
							position: relative;
							img{
								position: absolute;
								top:50%;
								left:50%;
								transform: translate(-50%, -50%);
							}
						}
					}

				}
			}	
		}
	}
}

#spmenu {
	position:fixed;
	box-sizing:border-box;
	left:0;
	top:100px;
	z-index:98;
	background-color:#FFFFFF;
	width:100%;
	height:calc(100vh - 100px);
	height:calc(100dvh - 100px);
	padding:100px 30px;
	display:grid;
	justify-content:center;
	opacity: 0;
	pointer-events: none;
	transition: .3s;
	.menu-spmenu-container {
		ul {
			display:grid;
			grid-template-columns:repeat(2,1fr);
			max-width:700px;
			grid-gap:2em 1em;
			font-size:1.8rem;
			li {
				a {
					display:grid;
					justify-items:center;
					grid-row-gap:.33em;
					color:#002D82;
					span {
						font-size:.7em;
						color:#000000;
					}
				}
			}
		}
	}
}

.menuopen {
	#header {
		.wrap{
			.contents{
				.contents_inner{
					.menubtn{
						.btn{
							&.blue{
								.spbtn {
									span {
										opacity: 0;
									}
									&::before {
										transform:translateY(10px) rotate(30deg);
									}
									&::after {
										transform:translateY(-10px) rotate(-30deg);
									}
								}
							}
						}

					}
				}	
			}
		}
	}
	#spmenu {
		pointer-events: all;
		opacity: 1;
	}
}

.fixbtn_recruit {
	position:fixed;
	z-index:99;
	font-size:1.8rem;
	left:1em;
	top:100px;
	background-color:#ff6600;
	color:#FFFFFF;
	font-weight:600;
	height:2em;
	padding:0 1em;
	display:grid;
	align-items:center;
	justify-content:center;
	border-radius:0 0 .33em .33em;
	animation: blink 1s infinite;
	box-sizing:border-box;
}
@keyframes blink{
	0%{
		background-color:#ff6600;
	}
	50%{
		background-color:#ff9900;
	}
	100%{
		background-color:#ff6600;
	}
}

@media (hover:hover) {

	#header {
		.header {
			.spbtn {
				&:hover {
					&::before {
						transform:translateY(-5px);
					}
					&::after {
						transform:translateY(5px);
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				.header {
					.spbtn {
						&:hover {
							&::before {
								transform:translateY(6px) rotate(30deg);
							}
							&::after {
								transform:translateY(-6px) rotate(-30deg);
							}
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.wrap{
			.contents{
				.contents_inner{
					grid-column-gap: 2em;
					.logo {
						width:240px;
					}
					.menu-gmenu-container{
						.menu{
							grid-column-gap: min(1.42vw,20px);
							li{
								a{
									font-size:min(1.1vw,1.4rem);
								}		
							}
						}
						
					}
				}
			}	
		}
	}
}


@media screen and (max-width:1200px) {
	
	#header {
		.wrap{
			.contents{
				.contents_inner{
					grid-template-columns:1fr 200px;
					grid-column-gap: 0.5em;
					font-size: 1.4rem;
					justify-items: center;
					.logo {
						width: 200px;
						padding-top: 7px;
					}
					.menu-gmenu-container{
						padding-bottom: 7px;
						.menu{
							grid-column-gap: 1.5em;
							a{
								font-size: 1.4rem!important;
							}
						}		
					}
					.menubtn{
						grid-area: 1/2/3/3;
					}
				}	
			}			
		}
	}
}

@media screen and (max-width:1024px) {
	
	#header {
		.wrap{
			.contents{
				height: 70px;
				.contents_inner{
					grid-template-columns:1fr 140px;
					justify-items: start;
					.logo {
						width: 240px;
						padding-top: 0;
					}
					.menu-gmenu-container{
						display: none;		
					}
					.menubtn{
						grid-area: inherit;
						.btn {
							width: 70px;
							height: 70px;
						}
					}
				}	
			}			
		}
	}

	#spmenu {
		top:70px;
		height:calc(100vh - 70px);
		height:calc(100dvh - 70px);
	}

	.fixbtn_recruit {
		top:70px;
	}
	
}

@media screen and (max-width:768px) {
	#header {
		.wrap{
			.contents{
				height: 50px;
				.contents_inner{
					grid-template-columns:1fr 100px;
					.logo {
						width: 200px;
					}
					.menubtn{
						.btn {
							width: 50px;
							height: 50px;
							img{
								width: 50%;
							}
							.spbtn {
                                grid-row-gap: 5px!important;
                            }
						}
					}
				}	
			}			
		}
	}

	#spmenu {
		top:50px;
		height:calc(100vh - 50px);
		height:calc(100dvh - 50px);
		padding:50px 30px;
		.menu-spmenu-container {
			ul {
				grid-template-columns:1fr;
				grid-row-gap:1.2em;
				li {
					a {
						justify-items:start;
						grid-row-gap:.2em;
					}
				}
			}
		}
	}

	.menuopen {
		#header {
			.wrap{
				.contents{
					.contents_inner{
						.menubtn{
							.btn{
								&.blue{
									.spbtn {
										&::before {
											transform:translateY(7px) rotate(30deg);
										}
										&::after {
											transform:translateY(-7px) rotate(-30deg);
										}
									}
								}
							}
	
						}
					}	
				}
			}
		}
	}
	
	.fixbtn_recruit {
		top:auto;
		left:.5em;
		bottom:.2em;
		height:2.4em;
		border-radius:.33em;
		width:calc(100vw - 1em);
	}
}