/*==============================
        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: 3em;
						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 {
								position: absolute;
								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%);
							}
						}
					}

				}
			}	
		}
	}
}


@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: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;
						}
					}
				}	
			}			
		}
	}
}

@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;
                            }
						}
					}
				}	
			}			
		}
	}
}