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

/**
HEADER
**/

#header {
	position:sticky;
	left:0;
	top:0;
	width:100%;
	z-index: 99;
	.header {
		border-top:5px solid #FF9F2F;
		background-color:#FFFFFF;
		position:relative;
		overflow:hidden;
		.header_inner {
			width:calc(100% - 80px);
			margin:0 auto;
			display:grid;
			grid-template-columns:260px auto;
			align-items:center;
			justify-content:space-between;
			padding:15px 0;
			.logo {
				img {
					display:block;
				}
			}
			.hmenu {
				display:grid;
				grid-template-columns:repeat(2,auto);
				align-items:center;
				position:relative;
				grid-column-gap:60px;
				a {
					position:relative;
					z-index:1;
				}
				.tel {
					font-size:3.6rem;
					color:#696969;
					letter-spacing:.05em;
					display:grid;
					grid-template-columns:1em 1fr;
					grid-column-gap:.1em;
					align-items:center;
				}
				.contact {
					font-size:2.6rem;
					color:#FFFFFF;
					font-weight:500;
					letter-spacing:.05em;
					display:grid;
					grid-template-columns:1em 1fr;
					grid-column-gap:.33em;
					align-items:center;
				}
				&::after {
					content:'';
					display:block;
					width:380px;
					aspect-ratio:1;
					background-color:#FF9F2F;
					border-radius:50%;
					z-index:0;
					position:absolute;
					left:56%;
					top:-120px;
				}
			}
		}
		#menu {
			background-color:#FFFFFF;
			position:relative;
			font-size:min(1.45vw,1.8rem);
			border-top:1px solid #FF9F2F;
			border-bottom:1px solid #FF9F2F;
			ul {
				display:flex;
				align-items:center;
				justify-content:center;
				li {
					position:relative;
					flex-grow:1;
					&:not(:last-child) {
						&::after {
							content:'';
							width:1px;
							height:70%;
							position:absolute;
							top:15%;
							right:0;
							background-color:#FF9F2F;
						}
					}
					a {
						display:grid;
						grid-template-columns:repeat(2,auto);
						height:2.6em;
						align-items:center;
						justify-content:center;
						grid-column-gap:.33em;
						padding:0 1.5em;
						img {
							width:1em;
						}
					}
					&:last-child {
						a {
							img {
								width:.8em;
							}
						}
					}
				}
			}
		}
	}
}

@media (hover:hover) {

	#header {
		.header {
			#menu {
				ul {
					li {
						a {
							&:hover {
								opacity:1;
								color:#FF9F2F;
							}
						}
					}
				}
			}
		}
	}
	
}

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

	#header {
		.header {
			box-shadow:0 3px 6px rgba(0,0,0,.15);
			.header_inner {
				width:calc(100% - 60px);
				grid-template-columns:200px 1fr 40px;
				grid-column-gap:10px;
				padding:10px 0;
				height:120px;
				.hmenu {
					grid-column-gap:10px;
					grid-template-columns:repeat(2,auto);
					justify-self:end;
					a {
						width:2em;
						height:2em;
						border-radius:50%;
						justify-content:center;
						span {
							display:none;
						}
					}
					.tel {
						font-size:2rem;
						grid-template-columns:1em;
						background-color:#cccccc;
						img {
							filter: brightness(0) saturate(100%) invert(100%) sepia(100%) saturate(0%) hue-rotate(297deg) brightness(102%) contrast(104%);
							transform:translate(.08em,-.06em);
						}
					}
					.contact {
						font-size:2rem;
						grid-template-columns:1em;
						background-color:#FF9F2F;
					}
					&::after {
						content:none;
					}
				}
				.spbtn {
					cursor:pointer;
					height:40px;
					position:relative;
					&::before,&::after {
						content:'';
						display:block;
						width:60%;
						height:2px;
						background-color:#FF9F2F;
						transition:.3s;
						position:absolute;
						left:50%;
						top:30%;
						transform:translate(-50%,-50%) rotate(0deg);
					}
					&::after {
						top:70%;
					}
					.bar {
						display:block;
						width:60%;
						height:2px;
						background-color:#FF9F2F;
						transition:.3s;
						position:absolute;
						left:20%;
						top:50%;
						transform:translateY(-50%);
					}
				}
			}
			#menu {
				font-size:1.8rem;
				border-top:1px solid #FF9F2F;
				border-bottom:none;
				position:fixed;
				z-index:99;
				left:0;
				top:125px;
				width:100%;
				height:calc(100vh - 125px);
				height:calc(100dvh - 125px);
				overflow-y:auto;
				opacity:0;
				pointer-events:none;
				transition: .3s;
				ul {
					display:grid;
					grid-template-columns:1fr;
					padding:50px 30px;
					width:100%;
					max-width:400px;
					margin:0 auto;
					li {
						border-bottom:3px dotted #FF9F2F;
						&:not(:last-child) {
							&::after {
								content:none;
							}
						}
						a {
							justify-content:start;
						}
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				.header {
					#menu {
						opacity: 1;
						pointer-events: all;
					}
					.spbtn {
						&:hover {
							.bar {
								opacity:0;
							}
							&::before {
								top:50%;
								transform:translate(-50%,-50%) rotate(35deg);
							}
							&::after {
								top:50%;
								transform:translate(-50%,-50%) rotate(-35deg);
							}
						}
					}
				}
			}
		}
	}
	
		
}

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

	#header {
		.header {
			.header_inner {
				width:calc(100% - 20px);
				grid-template-columns:120px 1fr 40px;
				padding:0;
				height:70px;
			}
			#menu {
				top:75px;
				height:calc(100vh - 75px);
				height:calc(100dvh - 75px);
				ul {
					padding:30px;
				}
			}
		}
	}
}