@charset "UTF-8";
#header_content {
	width:100%;
	margin:0px auto 0px;
	box-sizing: border-box;
}
	.header_navbar {
		background-color: #FFF;
		height: 84px;
		border-radius: 42px;
		padding: 14px;
		box-sizing: border-box;
		position: fixed;
		top: 20px;
		left: 20px;
		right: 20px;
		z-index: 9998;
		box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
		-webkit-transition: all 0.5s;
		display: flex;
		align-items: center;
		width: 90%;
		margin: 0px auto;
	}
	.header_logo {
		width: 260px;
		margin-left: 21px;
		position: fixed;
		top: 38px;
		left: 6%;
		right: 20px;
		z-index: 9999;
		box-sizing: border-box;

	}
	.header_logo a{
		display: block;
		
	}
			.header_logo img{	
			width: 100%;
			height: auto;
			}
		#main_nav {
			float: left;
			margin-left: 100px;
		}
		#main_nav ul {
			padding-top: 0px;
		}
			#main_nav ul li {
				margin-right:49px;
				display: inline-block;
				font-weight: bold;
			}
				#main_nav ul li a{
					vertical-align: middle;
					display: inline-block;
				}
				.main_nav_main {
					font-weight: bold;
				}
  .globalnav-wrap {
	font-size:16px;
	color:#111;
	display:flex;
	justify-content:flex-start; 
  }
  .globalnav {
	z-index: 9998;
	position: fixed;
	left: 0px;
	top: 34px;
	display: flex;
	width: 90%;
	margin: 0px auto;
	padding-left: 300px;
	left: 20px;
	right: 20px;
	box-sizing: border-box;
  }
  .globalnav li.dropdown-btn {
	  position:relative;
	  padding:20px 0px 20px 16px;
	  cursor:pointer;
	  font-weight: 700;
	  display: flex;
	  align-items: center;
	  justify-content: flex-start;
	  margin-right: 10px
  }
	.globalnav-sub {
		z-index:1000;
		position:fixed;
		top:90px;
		left: 6%;
		padding:20px 24px 8px;
		visibility: hidden;
		opacity: 0;
		transition: all 0.4s;
		width: 960px;
		margin: 0px auto;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		background-color: #fff;
		border-radius: 12px;
		box-shadow: 1px 1px 5px rgb(0 0 0 / 20%);
	}
		.globalnav-sub-merit {
			width: 1120px;
		}
	.globalnav-sub.open {
	  visibility: visible;
	  opacity: 1;
	  top: 112px;
	}
		.globalnav-sub p{
			width: 20%;
			margin-bottom: 12px;
			font-size: 16px;
		}
		.globalnav-sub-section p{
			width: auto;
			padding-right: 18px;
		}
			.globalnav-sub-section p:last-child{
				padding-right: 0px;
			}
	.nav-button-wrap {
	  display:block;
	}
  .nav-button-wrap{
	  display: none;
  }
  	@media screen and (max-width:1120px ){
		.globalnav-sub{
			width: 88%;
			box-sizing: border-box;
		}
	}
	.globalnav-sub p{
	}
	.globalnav-sub p a{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.globalnav-sub p a:before{
		content: "";
		width: 30px;
		height: 30px;
		background-repeat: no-repeat;
		background-size: 30px 30px;
		background-position: center center;
		padding-left: 12px;
		display: block;
	}
		.globalnav-sub p:nth-child(1) a:before{
			background-image: url(../images/nav_meriticon_manage.svg);
		}
		.globalnav-sub p:nth-child(2) a:before{
			background-image: url(../images/nav_meriticon_app.svg);
		}
		.globalnav-sub p:nth-child(3) a:before{
			background-image: url(../images/nav_meriticon_push.svg);
		}
		.globalnav-sub p:nth-child(4) a:before{
			background-image: url(../images/nav_meriticon_point.svg);
		}
		.globalnav-sub p:nth-child(5) a:before{
			background-image: url(../images/nav_meriticon_ec.svg);
		}
		.globalnav-sub p:nth-child(6) a:before{
			background-image: url(../images/nav_meriticon_data.svg);
		}
		.globalnav-sub p:nth-child(7) a:before{
			background-image: url(../images/nav_meriticon_web.svg);
		}
		.globalnav-sub-section p:nth-child(1) a:before{
			background-image: url(../images/nav_sectionicon_hair.svg);
		}
		.globalnav-sub-section p:nth-child(2) a:before{
			background-image: url(../images/nav_sectionicon_nail.svg);
		}
		.globalnav-sub-section p:nth-child(3) a:before{
			background-image: url(../images/nav_sectionicon_eye.svg);
		}
		.globalnav-sub-section p:nth-child(4) a:before{
			background-image: url(../images/nav_sectionicon_esthe.svg);
		}
		.globalnav-sub-section p:nth-child(5) a:before{
			background-image: url(../images/nav_sectionicon_total.svg);
		}
		/* adminリンク20250828 */
		.globalnav .to-admin{
		position: relative;
		padding: 20px 0px 20px 12px;
		cursor: pointer;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		margin-left: auto;
		margin-right: 40px;
		}
			.globalnav .to-admin a{
				font-size: 1.2rem;
				color:#FF4B36;
				text-decoration: underline;
			}
			.globalnav .to-admin a .material-icons{
				font-size: 18px!important;
			}
	
@media screen and (max-width:1210px){
	.globalnav{
	padding-left: 280px;
	}
	.globalnav li.dropdown-btn{
		margin-right: 0px;
	}
	.header_logo{
		width: 240px;
		top: 42px;
	}
	.globalnav-wrap{
		font-size: 16px;
	}
}
@media screen and (max-width:1190px){
	.globalnav li.dropdown-btn{
	margin-right: 0rem;
	padding-left: 12px;
	}
}
@media screen and (max-width:1120px){
	.globalnav-wrap{
		font-size: 14.8px;
	}
	.globalnav li.dropdown-btn{
		padding-left: 12px;
		margin-right: 0px;
	}
	.globalnav{
		padding-left: 260px;
	}
	.header_logo{
		width: 228px;
		top: 42px;
	}
}
@media screen and (max-width:1060px){
	.globalnav-wrap{
		font-size: 13.8px;
	}
	.globalnav li.dropdown-btn{
		padding-left: 6px;
	}
	.header_logo{
		width: 216px;
		top: 42px;
	}
	.globalnav{
		padding-left: 240px;
	}
}

@media screen and (max-width:980px ){
	#header_content {
		width:100%;
	}
	.header_navbar {
		background-color: #FFF;
		height: 60px;
		border-radius: 30px;
		padding: 14px;
		box-sizing: border-box;
		position: fixed;
		top: 20px;
		z-index: 9000;
		box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
		-webkit-transition: all 0.5s;
		display: flex;
		align-items: center;
		width: 90%;
		left: 5%;
		right: 5%;
	}
	.header_logo {
		width:180px;
		position: fixed;
		top: 38px;
		left: 5%;
		right: 20px;
		z-index: 9999;
		box-sizing: border-box;
	}
		.header_logo a{
			display: block;
		}
			.header_logo h1 img{
				width:100%;
			}
		#main_nav {
			display: none;
		}
		#main_nav {
		}
		#main_nav ul li {
			font-size:2.2rem;
			text-align: center;
			border-bottom: 1px solid #000;
			margin-top: 20px;
		}
		#main_nav ul li i{
			vertical-align: top;
			}
		#main_nav p{
			text-align: center;
			font-size: 2.0rem;
			margin-left: 3%;
			margin-top: 30px;
			}
	.main_nav_container01{
	margin-top: 40px;
	}
	header {
		position:relative;
		width:100%;
	}
	.nav-button-wrap {
		display:block;
		position:fixed;
		right:5%;
		top:28px;
		z-index:9999;
		cursor: pointer;
		height:42px;
	}
	.globalnav{
		height: 0px;
		opacity: 0;
		transition: all 0.4s;
		top: -180px;
		left: 0px;
		padding-top: 90px;
		overflow-x: hidden;
		width: 100%;
		overflow-y: auto;
		position: fixed;
		flex-wrap: wrap;
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		background-color: rgba(255,255,255,0.6);
		padding-left: 6%;
		padding-top: 96px;
		top: 0px;
		bottom:0px;
		z-index: 2000;
	}
	.open .globalnav{
		visibility: visible;
		opacity: 1;
		transition: all 0.4s;
		margin: 0px auto;
		display: block;
		height: auto;
	}
	.globalnav.close {
		height: 0px;
		opacity: 0;
		transition: all 0.4s;
		top: -180px;
		}
	.open .globalnav li {
		display:block;
		}
		body.open {
		position: fixed;
		left: 0;
		right: 0;
		overflow: hidden;
		}
	.nav-button-wrap{
		flex-wrap: wrap;
	}
		.globalnav li.dropdown-btn {
			width: 100%;
			flex-wrap: wrap;
			font-weight: 700;
			font-size: 16px;
			display: flex;
			align-items: center;
			justify-content: flex-start;
	  		padding:20px 0px 0px 16px;
		}
		.globalnav li.dropdown-btn > div{
			margin-top: 0rem;
		}
		.globalnav-sub {
			visibility: visible;
			opacity: 1;
			position: static;
			display: block;
			width: 100%;
			padding-left: 2.0rem;
			background: none;
			box-shadow: none;
		}

		.globalnav-sub p{
			margin-bottom: 2.0rem;
			width: 100%;
		}
		.globalnav-sub p:last-child{
			margin-bottom: 0px;
		}
		.globalnav-sub p a{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			
		}
		.globalnav-sub p a:before{
			content: "";
			width: 30px;
			height: 30px;
			background-repeat: no-repeat;
			background-size: 30px 30px;
			background-position: center center;
			padding-left: 12px;
			display: block;
		}
			.globalnav-sub p:nth-child(1) a:before{
				background-image: url(../images/nav_meriticon_manage.svg);
			}
			.globalnav-sub p:nth-child(2) a:before{
				background-image: url(../images/nav_meriticon_app.svg);
			}
			.globalnav-sub p:nth-child(3) a:before{
				background-image: url(../images/nav_meriticon_push.svg);
			}
			.globalnav-sub p:nth-child(4) a:before{
				background-image: url(../images/nav_meriticon_point.svg);
			}
			.globalnav-sub p:nth-child(5) a:before{
				background-image: url(../images/nav_meriticon_ec.svg);
			}
			.globalnav-sub p:nth-child(6) a:before{
				background-image: url(../images/nav_meriticon_data.svg);
			}
			.globalnav-sub p:nth-child(7) a:before{
				background-image: url(../images/nav_meriticon_web.svg);
			}
			.globalnav-sub-section p:nth-child(1) a:before{
				background-image: url(../images/nav_sectionicon_hair.svg);
			}
			.globalnav-sub-section p:nth-child(2) a:before{
				background-image: url(../images/nav_sectionicon_nail.svg);
			}
			.globalnav-sub-section p:nth-child(3) a:before{
				background-image: url(../images/nav_sectionicon_eye.svg);
			}
			.globalnav-sub-section p:nth-child(4) a:before{
				background-image: url(../images/nav_sectionicon_esthe.svg);
			}
			.globalnav-sub-section p:nth-child(5) a:before{
				background-image: url(../images/nav_sectionicon_total.svg);
			}
	/* toggele btn */
	.g_menu_trigger {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		cursor: pointer;
		position: relative;
		right: 0px;
		top: 0px;
		width: 42px;
		height: 42px;
		z-index: 9999;
		margin-right: 16px;
	} 
	.g_menu_trigger .g_menu_btn span {
		width: 32px;
		margin-top: 12px;
		height: 1px;
		margin-left: auto;
		margin-right: auto;
	}
	.g_menu_trigger .g_menu_btn.open > span:nth-child(1) {
		-webkit-transform: translateY(14px) rotate(45deg);
		transform: translateY(14px) rotate(45deg);
		transition-delay: 200ms;
		background-color: #111;
	}
	.g_menu_trigger .g_menu_btn.open > span:nth-child(3) {
		transform: translateY(-14px) rotate(-45deg);
		transition-delay: 200ms;
		background-color: #111;
	}
	button.g_menu_btn {
		position: relative;
		cursor: pointer;
	}
	.g_menu_trigger .g_menu_btn span {
		position: relative;
		display: block;
		width: 28px;
		height: 2px;
		border-radius: 1px;
		background: #111;
		margin-top: 6px;
		transition: all 200ms ease;
		z-index: 2;
	}
	.g_menu_trigger .g_menu_btn.open > span:nth-child(1) {
		-webkit-transform: translateY(8px) rotate(45deg);
		transform: translateY(8px) rotate(45deg);
		transition-delay: 200ms;
	}
	.g_menu_trigger .g_menu_btn.open > span:nth-child(2) {
		transform: translateX(100px);
		opacity: 0;
	}
	.g_menu_trigger .g_menu_btn.open > span:nth-child(3) {
		-webkit-transform: translateY(-8px) rotate(-45deg);
		transform: translateY(-8px) rotate(-45deg);
		transition-delay: 200ms;
	}
	/* adminリンク20250828 */
	.globalnav .to-admin a{
		font-size: 1.6rem;
		color:#FF4B36;
		text-decoration: underline;
		padding-left: 8px;
	}
	.globalnav .to-admin a .material-icons{
		font-size: 18px!important;
	}
	.open .globalnav{
		padding-bottom: 48px;
	}
}
