@charset "UTF-8";
/*

  Mobile Navigation Menu

*/


@media only screen and (max-width: 999px) {
	#header{
		background: transparent !important;
	}
	#header.active{
		height: auto;
		overflow: hidden !important;
	}
		#header .header-inner{
			background: white;
		}

	.navbar-globalnav{
		height: 100%;
		overflow: scroll;
	}
}
	

	#navfloat{
		position: fixed !important;
		z-index: -1 !important;
		min-height: unset !important;
		padding-bottom: 0 !important;
		height: calc(100dvh - 60px);
	}
		#navfloat::before{
			content: '';
			display: block;
			position: absolute;
			z-index: 10;
			width: 100%;
			height: 6px;
			top: 0;
			left: 0;
			background: linear-gradient(rgba(0,0,0,0.066), rgba(0,0,0,0));
		}




	#bgMobileMenu{
  	padding: 0;
  	border: none;
  	outline: none;
  	appearance: none;
  	background: none;
  	/*cursor: pointer;*/
		position: fixed;
		height: calc(100dvh - 60px);
		width: 100%;
		background-color: rgba(0,0,0,0.4);
	}

	#mobileMenu,
	#mobileMenu *{
		box-sizing: border-box;
	}


	#mobileMenu{
		position: absolute;
		height: 100%;
		right: -100%;
		max-width: 85%;
		min-width: 320px;
		background: #E5EBEB;
	}
	
	#mobileMenu .about{
		width: 100%;
		margin: 0 auto;
		padding: 24px 30px 16px;
		background: white;
	}
		#mobileMenu .about > *{
				
		}
		#mobileMenu .about > * + *{
			margin: 8px 0 0 0;
		}
			#mobileMenu .about > * > a{
				display: grid;
				width: 100%;
				height: 56px;
				padding: 0 20px 0 10px;
				border-radius: calc(56px / 2);
				border: 1px solid #5D5D5D;
				place-items: center;
				grid-template-columns: 36px 1fr 12px;
				grid-template-rows: 1fr;
				column-gap: 10px;
				font-size: 15px;
				font-weight: bold;
				line-height: 1;
			}
				#mobileMenu .about > * > a::after{
					content: '';
					display: block;
					height: 13px;
					width: 8px;
					background: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/arrow_about.svg) no-repeat center center;
					background-size: contain;
				}
				#mobileMenu .about > * > a::before{
					content: '';
					display: block;
					height: 32px;
					width: 32px;
					border-radius: 100%;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: contain;
				}
	
			#mobileMenu .about > * > a[href="/care_beauty/"]{
				letter-spacing: -0.08em;
			}
				#mobileMenu .about > * > a[href="/about/"]::before{
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_about.svg);
				}
				#mobileMenu .about > * > a[href="/care_beauty/"]::before{
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_care_beauty.svg);
				}
				#mobileMenu .about > * > a[href="/mobile_hairdresser/"]::before{
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_mobile_hairdresser.svg);
				}

	
	
	#mobileMenu .nav{
		width: 100%;
		margin: 0 auto;
		padding: 0 42px;
		background: white;
	}
		#mobileMenu .nav > *{
			margin: 0;
			padding: 16px 0 0 0;
/*			border-top: 1px solid #E5EBEB;*/
		}
		#mobileMenu .nav > * + *{
			margin: 16px 0 0 0;
			padding: 16px 0 0 0;
			border-top: 1px solid #E5EBEB;
		}
			#mobileMenu .nav > * > a{
				display: grid;
				width: 100%;
				place-items: center start;
				grid-template-columns: 1fr 12px;
				grid-template-rows: 1fr;
				font-size: 14px;
				font-weight: bold;
				line-height: 1;
			}
				#mobileMenu .nav > * > a::after{
					content: '';
					display: block;
					height: 13px;
					width: 8px;
					background: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/arrow_nav.svg) no-repeat center center;
					background-size: contain;
				}

	
	#mobileMenu .function{
		display: grid;
		width: 100%;
		margin: 0 auto;
		padding: 36px 30px 16px 30px;
		place-items: center;
		grid-template-columns:repeat(2, 1fr);
		grid-template-rows: 1fr;
		column-gap: 12px;
		background: white;
	}
		#mobileMenu .function > *{
		}
			#mobileMenu .function > * > a{
				display: grid;
				width: 100%;
				height: 44px;
				padding: 0 12px;
				border-radius: 12px;
				background: #E5EBEB;
				place-items: center;
				grid-template-columns: 12px 1fr;
				grid-template-rows: 1fr;
				column-gap: 6px;
				font-size: 13px;
				font-weight: bold;
				line-height: 1;
			}
				#mobileMenu .function > * > a::before{
					content: '';
					display: block;
					height: 18px;
					width: 12px;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: contain;
				}
				#mobileMenu .function > * > a[href="/faq/"]::before{
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_faq.svg);
				}
				#mobileMenu .function > * > a[href="/about/#access"]::before{
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_access.svg);
				}



	
	#mobileMenu .request{
		width: 100%;
		margin: 0 auto;
		background: #E5EBEB;
		padding: 24px 30px 36px;
	}
		#mobileMenu .request > *{
				
		}
		#mobileMenu .request > * + *{
			margin: 10px 0 0 0;
		}
			#mobileMenu .request > * > a{
				display: grid;
				width: 100%;
				height: 56px;
				padding: 0 20px;
				border-radius: calc(56px / 2);
				background: #FF5691;
				box-shadow: 0 8px 16px rgba(156,179,179,0.5);
				place-items: center;
				grid-template-columns: 24px 1fr 12px;
				grid-template-rows: 1fr;
				column-gap: 10px;
				color: white;
				font-size: 16px;
				font-weight: bold;
				line-height: 1;
			}
			#mobileMenu .request > * > a[href="/open-school/"]{
				background: #FF5691;
			}
			#mobileMenu .request > * > a[href="/request/"]{
				background: #F88E2D;
			}
				#mobileMenu .request > * > a::after{
					content: '';
					display: block;
					height: 13px;
					width: 8px;
					background: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/arrow_request.svg) no-repeat center center;
					background-size: contain;
				}
				#mobileMenu .request > * > a::before{
					content: '';
					display: block;
					height: 24px;
					width: 24px;
					background-repeat: no-repeat;
					background-position: center center;
					background-size: contain;
				}
				#mobileMenu .request > * > a[href^="/open-school/"]::before{
					height: 20px;
					width: 20px;
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_open-school.svg);
				}
				#mobileMenu .request > * > a[href="/request/"]::before{
					background-image: url(/wp/wp-content/themes/mirai_themes/assets/images/nav-mobile/icon_request.svg);
				}