@charset "UTF-8";
/*ボタン外側*/
.openbtn{
	position: relative;
	background:#c46a9a;
	cursor:pointer;
	width:50px;
	height:50px;
	/*width:40px;
	height:40px;*/
	z-index:10000;
}
/*ボタン内側*/
.openbtn span{
	display: inline-block;
	transition:all .4s;
	position: absolute;
	left:14px;
	/*left:11px;*/
	height:3px;
	border-radius: 2px;
	background:#fff;
	width:45%;
}
.openbtn span:nth-of-type(1){
	top:15px;
	/*top:10px;*/
}
.openbtn span:nth-of-type(2){
	top:23px;
	/*top:18px;*/
}
.openbtn span:nth-of-type(3){
	top:31px;
	/*top:26px;*/
}

.openbtn.active span:nth-of-type(1){
	top:18px;
	left:18px;
	transform:translateY(6px) rotate(-45deg);
	width:30%;
	/*
	top:13px;
	left:7px;
	transform:translateY(6px) rotate(-45deg);
	width:65%;
	*/
}
.openbtn.active span:nth-of-type(2){
	opacity:0;
}
.openbtn.active span:nth-of-type(3){
	top:30px;
	left:18px;
	transform:translateY(-6px) rotate(45deg);
	width:30%;
	/*
	top:25px;
	left:7px;
	transform:translateY(-6px) rotate(45deg);
	width:65%;
	*/
}
.openmenu{
	position: fixed;
    display: table;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
    -webkit-transition: all .5s;
    transition: all .5s;
    visibility: hidden;
    opacity: 0;
	z-index:9000;
	
}
.openmenu ul {
    
	margin-top:100px;
}

.openmenu li {
    width: 300px;
    margin: 0 auto;
    text-align: center;
	list-style: none;
	
	
}

.openmenu li a {
    display: block;
    font-size: 18px;
    color: #fff;
	text-decoration: none;
	padding:30px 0;
	border-bottom: 1px solid #999;
	
}

.openmenu li a:hover {
    color: #999;
}
.openmenu.open{
	visibility: visible;
    opacity:1;
	position: fixed;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
}
html.fixed,
html.fixed body {
    height: 100vh;
    overflow: hidden;

}