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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	background-color:#FFFFFF;
	border-top: #1FC4CB solid 5px;
	.wrap{
		.contents{
				.contents_inner {
					width:100%;
					display:grid;
					grid-template-columns:auto 1fr;
					align-items:center;
					justify-content: space-between;
					.logo {
						width: 200px;
					}
					.contact_box{
						display:grid;
						grid-template-columns:8em 1fr;
						justify-self: end;
						grid-column-gap: 10px;
						grid-row-gap: 0.4em;
						a{
							display: grid;
							grid-template-columns: auto 1fr;
							align-items: center;
							grid-column-gap: 5px;						
							&.mail,&.access{
								span{
									font-size: 1.3rem;
								}
								img{
									width: 1.1em;
								}								
							}
							&.tel{
								grid-area: 1/2/3/3;
								background-color: #1FC4CB;
								color: #FFFFFF;
								font-size: 2.4rem;							
								padding: 0.3em 0.7em;	
								img{
									width: 0.8em;
								}						
							}
						}
					}
				}
				#menu-gmenu{
					display: grid;
					grid-template-columns: repeat(6, auto);
					padding: 1em 0;
					justify-content: center;
					li{
						font-size: 1.4rem;
						position: relative;
						border-right: 1px solid #CCCCCC;
						padding: 0 3em;
						line-height: 1.3;
						&:first-child{
							border-left: 1px solid #CCCCCC;
						}
					}
				}
		}
	}

}


@media (hover:hover) {

}

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

	#header {
		.wrap{
			.contents{
					#menu-gmenu{
						li{
							padding: 0 2em;
						}
					}
			}
		}

	}

}

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

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

	#header {
		.wrap{
			.contents{
					#menu-gmenu{
						li{
							padding: 0 1.2em;
						}
					}
			}
		}

	}
}

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

	#header {
		.wrap{
			.contents{				
					.contents_inner {
						grid-template-columns: auto 1fr 30px;
						grid-column-gap: 20px;
						height: 60px;
						.logo {
							max-width: 150px;
						}
						.contact_box{
							grid-template-columns:repeat(3, auto);
							grid-column-gap: 15px;
							a{
								grid-template-columns: 1fr;					
								&.mail,&.access{
									span{
										display: none;
									}
									img{
										width: 1.2em;
									}								
								}
								&.mail{
									img{
										width: 1.5em;
									}
								}
								&.tel{
									grid-area: inherit;
									background-color: inherit;						
									padding: 0;	
									img{
										width: 0.8em;
									}	
									span{
										display: none;
									}					
								}
							}
						}
						.spbtn {
							cursor:pointer;
							height:50px;
							border-radius:50%;
							position:relative;
							&::before,&::after {
								content:'';
								display:block;
								width:100%;
								height:3px;
								background-color:var(--color_main);
								transition:.3s;
								position:absolute;
								left:0;
								top:30%;
								background-color:#1FC4CB;
							}
							&::after {
								top:auto;
								bottom:30%;
							}
							span {
								width:100%;
								height:3px;
								background-color:var(--color_main);
								transition:.3s;
								position:absolute;
								left:0;
								top:50%;
								transform:translateY(-50%);
								background-color:#1FC4CB;
							}
						}
					}
					#menu-gmenu{
						display: none;
					}
			}
		}

	}
	.hamberger{
		opacity: 0;
		pointer-events: none;
		transition: .3s;
		overflow-y: auto;
		position: fixed;
		top:63px;
		right:0;
		width: 100%;
		height: calc(100% - 63px);
		background-color: #fff;
		padding: 2em 0;
		border-top: solid 5px #EBEBEB;
		.menu-fmenu-container{
			.menu{
				width: calc(100% - 60px);
				display: grid;
				grid-template-columns: 1fr;
				grid-row-gap: 1em;
				justify-content: center;
				margin: 0 auto;
				li{
					font-size: 1.5rem;
					position: relative;
					text-indent: 1em;
					border-bottom: #1FC4CB dotted 2px;
					padding-bottom: 1em;
					&::after{
						content: "";
						background-image: url('../img/common/icon_arrow_01.svg');
						background-repeat: no-repeat;
						background-size: contain;
						display: block;
						position: absolute;
						left:0;
						top: 30%;
						transform: translateY(-50%);
						width: 10px;
						height: 10px;
					}
				}
			}
		}
	}
	body {
		&.menuopen {
			#header {
				.wrap {
					.contents{
						.contents_inner{
							.spbtn {
								span {
									opacity:0;
								}
								&::before {
									top:50%;
									width:100%;
									left:50%;
									transform:translate(-50%,-50%) rotate(45deg);
								}
								&::after {
									bottom:50%;
									width:100%;
									left:50%;
									transform:translate(-50%,50%) rotate(-45deg);
								}
							}
						}
					}
				}
			}
			.hamberger{
				opacity: 1;
				pointer-events: all;
			}
		}
	}
}