@charset "utf-8";
/* CSS Document */
.hammenu-2{
	display:none;
}


.active{
	display:block !important;
}

.activeopacity{
	display:block !important;
	animation: fadein 0.5s linear forwards !important;
	z-index:1000;
}

@keyframes fadein{
	0%{
		opacity:0;
	}
	
	100%{
		opacity:1;
	}
}

.removeopacity{
	animation: fadeout 0.5s linear forwards !important;
	z-index:1000;
}

@keyframes fadeout{
	0%{
		display:block;
		opacity:1;
	}
	
	100%{
		display:none;
		opacity:0;
	}
}

/*携帯用*/
.mb_block{
	display:none;
}

.mb_main{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100vh;
	background-color:#8ec31e;
	z-index:2000;
}

.mb_main_ul_li{
	padding:1em;
	border-bottom:1px solid #fff;
}

.mb_main_ul_li_a{
	display:block;
	font-weight:bold;
	font-family:"kozgo";
	text-decoration:none;
	color:#fff;
	font-weight:400;
}

.mb_main{
	display:none;
}

.ham_ul{
	display:none;
}

.ham_li{
	width:90%;
	margin-left:auto;
	margin-right:auto;
	border-bottom:1px dashed #000;
}

	/*ハンバーガ*/
	.hammenu{
		display:none;
		background-color:#000;
		border-radius:50% 50%;
		width:32px;
		height:auto;
		right:5%;
		top:1.5vh;
		text-align:center;
		color:#fff;
		z-index:10000;
		opacity:1;
	}
	
	.hammenu-2{
		position:relative;
		top:0;
		left: -8%;
		width: 70%;
		background-image:url(../img/menu/topmenuopen.svg);
		background-position:center left;
		background-repeat:no-repeat;
		background-size:contain;
	}
	
	.ham_p{

	}
	
	.ham_p-close{
		position:relative;
		top:0;
		left: -8%;
		width: 75%;
		background-image:url(../img/menu/topmenuclose.svg);
		background-repeat:no-repeat;
		background-position:center left;
		background-size:contain;		
	}
	
	.ham_p_img{
		position:absolute;
		top:50%;
		left:0;
		transform:translateY(-50%);
	}
	
	.mbmenu,
	.mbmenu span {
	  display: inline-block;
	  transition: all .4s;
	  box-sizing: border-box;
	}
	.mbmenu {
	  position: relative;
	  width:100%;
	  height: 32px;
	}
	.mbmenu span {
	  position: absolute;
	  left: 18%;
	  width: 65%;
	  height: 3px;
	  background-color: #ffffff;
	  border-radius: 4px;
	}
	.mbmenu span:nth-of-type(1) {
	  top: 6px;
	}
	.mbmenu span:nth-of-type(2) {
	  top: 14px;
	}
	.mbmenu span:nth-of-type(3) {
	  top:22px;
	}
	
	.mbmenu.active span:nth-of-type(1) {
	  -webkit-transform: translateY(7px) rotate(-45deg);
	  transform: translateY(7px) rotate(-45deg);
	}
	.mbmenu.active span:nth-of-type(2) {
	  opacity: 0;
	}
	.mbmenu.active span:nth-of-type(3) {
	  -webkit-transform: translateY(-7px) rotate(45deg);
	  transform: translateY(-7px) rotate(45deg);
	}

@media(min-width:900px){
	.header_menu_div{
		width:40%;
		height:2em;
	}
	
	.mb_main_ul_li{
		position:relative;
		padding:0.5em 5% 0.5em 5%;
	}
	.hammenu{
		width:22px;	
	}
	
	.mbmenu{
		margin-top:0;
	}
	
}

@media(max-width:550px){
	.mb_block{
		display:block !important;	
	}

}