@charset "UTF-8";

#header {
	position:sticky;
	width:100%;
	top:0;
	left:0;
	z-index:99;
	.header{
		background-color: #FFFBF2;
		transition: .5s;
		.header_inner {
			width:calc(100% - 40px);
			max-width:1760px;
			height: 120px;
			margin:0 auto;
			padding:34px 0 0;
			display: grid;
			grid-template-columns: 1fr auto 190px;
			align-items: center;
			grid-column-gap: 60px;
			.header_logo {
				font-size: 1.6rem;
				display: grid;
				grid-template-columns: 126px auto;
				grid-column-gap: 40px;
				align-items: center;
				p {
					color:#999999;
				}
			}
			.header_menu {
				display: grid;
				grid-template-columns: repeat(2,auto);
				align-items: center;
				grid-column-gap: 50px;
				font-size: 2.0rem;
				li {
					a {
						display: grid;
						grid-template-columns: repeat(2,auto);
						align-items: center;
						grid-column-gap: .66em;
						img {
							width: .8em;
						}
					}
				}
			}
			.header_btn {
				background-color: var(--color_btn);
				height: 68px;
				border-radius: 10px;
				border:none;
				font-size: 1.6rem;
				color:var(--color_white);
				display: grid;
				grid-template-columns: 25px auto;
				grid-column-gap: .66em;
				align-items: center;
				justify-content: center;
				letter-spacing: .02em;
				cursor: pointer;
				span {
					position: relative;
					img {
						display: block;
						transition: .3s;
					}
					&::before,&::after {
						content:'';
						display: block;
						transition: .3s;
						width: 100%;
						height: 1px;
						background-color: var(--color_white);
						position: absolute;
						left: 50%;
						top:50%;
						transition: .3s;
						transform: translate(-50%,-50%) rotate(0deg);
						opacity: 0;
					}
				}
			}
		}
	}
}

#menu {
	position: fixed;
	width: 100%;
	height: 100%;
	top:0;
	left:0;
	z-index: 98;
	background-color: #FFFFFF;
	padding: 250px 20px 50px;
	overflow-y: auto;
	.menu_inner {
		width: 100%;
		max-width: 1170px;
		margin:0 auto;
		.menu {
			display: flex;
			flex-wrap: wrap;
			font-size: 1.4rem;
			gap:60px 40px;
			padding-bottom: 60px;
			margin-bottom: 60px;
			border-bottom: 1px solid var(--color_blue);
			.parent {
				width: calc(25% - 40px);
				flex-grow: 1;
				&:first-child {
					width: calc(35% - 40px);
				}
				&:nth-child(2) {
					width: calc(40% - 40px);
				}
				.haschild {
					font-size: 2.8rem;
					color:var(--color_blue);
					display: block;
					icon {
						display: none;
					}
				}
				ul {
					display: grid;
					grid-row-gap: .66em;
					padding-top: 2em;
					li {
						a {
							color:#555555;
							line-height: 1.6;
						}
					}
				}
			}
		}
		.menu2 {
			display: grid;
			grid-template-columns: repeat(2,auto);
			align-items: end;
			justify-content: space-between;
			ul {
				order:1;
				font-size: 1.4rem;
				display: grid;
				grid-row-gap: 1.2em;
				li {
					a {
						display: grid;
						width: 10.5em;
						grid-template-columns: 1fr .8em;
						align-items: center;
					}
				}
			}
			.copyright {
				font-size: 1.5rem;
			}
		}
	}
}

#menu {
	opacity: 0;
	pointer-events: none;
	transition:.5s;
}

body {
	&.menuopen {
		#header {
			.header {
				background-color: #FFFFFF;
				.header_inner {
					.header_btn {
						span {
							img {
								opacity: 0;
							}
							&::before {
								opacity: 1;
								transform: translate(-50%,-50%) rotate(20deg);
							}
							&::after {
								opacity: 1;
								transform: translate(-50%,-50%) rotate(-20deg);
							}
						}
					}
				}
			}
		}
		#menu {
			left: 0;
			opacity: 1;
			pointer-events: all;
		}
	}
}

@media (hover:hover) {

	#header {
		.header{
			.header_inner {
				.header_menu {
					li {
						a {
							img {
								transition: .3s;
							}
							&:hover {
								img {
									transform: translateX(5px);
								}
							}
						}
					}
				}
				.header_btn {
					span {
						img {
							transition: .3s;
						}
					}
					&:hover {
						span {
							img {
								transform: scale(1.2);
							}
							&::before {
								transform: translate(-50%,-50%) rotate(30deg)!important;
							}
							&::after {
								transform: translate(-50%,-50%) rotate(-30deg)!important;
							}
						}
					}
				}
			}
		}
	}

	#menu {
		.menu_inner {
			.parent {
				li {
					a {
						transition: .3s;
						&:hover {
							opacity: .66;
						}
					}
				}
			}
			.menu2 {
				li {
					a {
						transition: .3s;
						&:hover {
							opacity: .66;
						}
					}
				}
			}
		}
	}

	body {
		&.menuopen {
			#header {
				.header {
					.header_inner {
						.header_btn {
							&:hover {
								&::before {
									transform: translate(-50%,-50%) rotate(15deg);
								}
								&::after {
									transform: translate(-50%,-50%) rotate(-15deg);
								}
							}
						}
					}
				}
			}
		}
}

}

@media screen and (min-width:769px) {

	#menu {
		.menu_inner {
			.parent {
				ul {
					display: grid!important;
				}
			}
		}
	}

}

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

	#menu {
		padding: 200px 20px 50px;
	}

}

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

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

	#header {
		.header{
			.header_inner {
				height: 100px;
				grid-template-columns: 1fr auto 150px;
				grid-column-gap: 40px;
				.header_logo {
					font-size: 1.4rem;
					grid-template-columns: 100px auto;
					grid-column-gap: 20px;
				}
				.header_menu {
					font-size: 1.7rem;
					grid-column-gap: 30px;
				}
				.header_btn {
					height: 60px;
				}
			}
		}
	}

	#menu {
		padding: 160px 20px 50px;
		.menu_inner {
			.menu {
				.parent {
					width: auto;
				}
			}
		}
	}	

}

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

	#header {
		.header{
			.header_inner {
				height: 74px;
				grid-template-columns: 1fr 110px;
				padding-top: 22px;
				.header_logo {
					grid-template-columns: 1fr;
					img {
						width:90px
					}
					p {
						display: none;
					}
				}
				.header_menu {
					display: none;
				}
				.header_btn {
					height: 40px;
					border-radius: 7px;
					font-size: 1.4rem;
					grid-template-columns: 20px auto;
				}
			}
		}
	}

	#menu {
		padding: 120px 20px 30px;
		.menu_inner {
			.menu_entry {
				display: grid;
				font-size: 2.2rem;
				grid-row-gap: .8em;
				align-content: start;
				max-width: 7em;
				margin-bottom: 60px;
				li {
					a {
						display: grid;
						grid-template-columns: 1fr .8em;
						align-items: center;
						grid-column-gap: .5em;
					}
				}
			}
			.menu {
				display: grid;
				gap:0;
				border:none;
				grid-row-gap: 30px;
				margin-bottom: 0;
				padding-bottom: 60px;
				.parent {
					width: 100%;
					&:first-child,&:nth-child(2) {
						width: 100%;
					}
					.haschild {
						display: grid;
						grid-template-columns: 1fr .66em;
						cursor: pointer;
						font-size: 2.0rem;
						.icon {
							height: 1em;
							position: relative;
							&::before,&::after {
								content:'';
								display: block;
								width: 100%;
								height: 1px;
								position: absolute;
								left: 50%;
								top:50%;
								transform: translate(-50%,-50%) rotate(0deg);
								background-color: var(--color_blue);
								transition:.3s;
							}
							&::after {
								transform: translate(-50%,-50%) rotate(90deg);
								width: 100%;
							}
						}
					}
					&.open {
						.haschild {
							.icon {
								&::before {
									transform: translate(-50%,-50%) rotate(90deg);
									width: 66%;
									opacity: 0;
								}
								&::after {
									transform: translate(-50%,-50%) rotate(180deg);
									width: 100%;
								}
							}
						}
					}
					ul {
						display: none;
						padding-top: 1.5em;
						padding-left: 1em;
						li {
							&:not(:last-child) {
								margin-bottom: .66em;
							}
						}
					}
				}
			}
			.menu2 {
				grid-template-columns: 1fr;
				grid-row-gap: 50px;
				ul {
					order:unset;
				}
			}
		}
	}

	body {
		&:not(.menuopen){
			#menu {
				.menu_wrap {
					.menu_inner {
						.menu_item {
							& > li {
								& > a {
									pointer-events: none;
								}
							}
						}
					}
				}
			}
		}
	}

}

@media screen and (min-width:1025px){

}