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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	background-color:#FFFFFF;
	.wrap {
		width:100%;
		.contents{
			.contents_inner{
				padding: 20px 0;
				display:grid;
				grid-template-columns:auto 1fr;
				align-items:center;
				justify-items: self-end;
				.logo {
					img {
						width:260px;
					}
				}
				.contact_box{
					display: grid;
					grid-template-columns: auto auto auto;
					grid-column-gap: 10px;
					a{
						display: grid;
						grid-template-columns: 1.5em 1fr;
						grid-column-gap: 0.7em;
						font-size: 1.6rem;
						padding: 0.4em 1.2em;
						border: solid 3px #000;
						align-items: center;
						&.tel{
							font-size: 2.0rem;
							grid-column-gap: 0.2em;
						}
						&.access{
							padding: 0;
							border: none;
							grid-column-gap: 0.5em;
							margin-right: 1em;
							font-weight: 600;
						}
					}
				}
			}
			.menu-gmenu-container{
				text-align: center;
				padding: 20px 0;
				.menu{
					display: grid;
					grid-template-columns: repeat(7,1fr);
					justify-content:space-between;
					li{
						position: relative;
						font-size: 1.5rem;
						&::before{
							content:"";
							width: 1px;
							height: 2em;
							background-color: #C7C4C4;
							position: absolute;
							top:50%;
							transform: translate(-50%, -50%);
							left:0;
							display: block;
						}
						&:last-child{
							&::after{
								content:"";
								width: 1px;
								height: 3em;
								background-color: #C7C4C4;
								position: absolute;
								top:50%;
								right:0;
								transform: translate(-50%, -50%);
								display: block;
								transition-duration:.3s;
							}
						}					
					}
				}
			}
		}		
		.spbtn {
			cursor:pointer;
			height:50px;
			position:relative;
			display:grid;
			align-content:center;
			justify-items:center;
			grid-row-gap:4px;
			&::before,&::after {
				content:'';
				width:40%;
				height:2px;
				background-color:#000000;
				transition:.3s;
			}
			span {
				width:40%;
				height:2px;
				background-color:#000000;
				transition:.3s;
			}
		}
	}
}




@media (hover:hover) {
	#header {
		.wrap {
			.contents{
				.contents_inner{
					.contact_box{
						a{
							background-color: #fff;
							&:hover{
								background-color: #efefef;
							}
						}
					}
				}
				.menu-gmenu-container{
					.menu{
						li{
							a{
								&::after{
									content:"";
									width: 2em;
									height: 3px;
									background-color: #027A36;
									position: absolute;
									left: 50%;
									transform: translate(-50%,5px);
									bottom:-0.5em;
									display: block;
									transition-duration:.3s;
									opacity: 0;
								}
								&:hover{
									&::after{
										opacity: 1;
										transform: translate(-50%,0);
									}
								}
							}							
						}
					}
				}
			}		
		}	
	}
}

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

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

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