@charset "utf-8";

/* hamburger menu */
.hmenu-wrapper{
position:fixed;/*通常はabsolute*/
top:5px;
right:5px;
padding: 0;
z-index: 999;
}

.hmenu{
width: 40px;
height:30px;
position:relative;
cursor:pointer;
display: inline-block;
float:right;
}
.hmenu1{
width:30px;
height:3px;
background-color:#000;
position:absolute;
top:6px;
left:6px;
}
.hmenu2{
width:30px;
height:3px;
background-color:#000;
position:absolute;
top:13px;
left:6px;
}
.hmenu3{
width:30px;
height:3px;
background-color:#000;
position:absolute;
top:20px;
left:6px;
}
.hmenu4{
color: #FFF;
font-size: .9rem;
font-weight: bold;
position:absolute;
top:27px;
left:6px;
}
.hmenu1,.hmenu2,.hmenu3{
transition: all 0.3s ease-out;
display: inline-block;
background-color: #fff;
 }
.hmenuclick1{
top:13px;
transform: rotate(45deg);
}
.hmenuclick2{
opacity:0;
}
.hmenuclick3{
top:13px;
transform: rotate(-45deg);
}
.hmenu-back{
display: none;
position: absolute;
background-color: #000;
opacity: .9;
z-index: 997;
width: 100%;
height: 100%;
top:0;
left:0;
}
.hmenu-nav{
display: none;
position: fixed;/*通常はabsolute*/
background-color: #333;
z-index: 998;
width: 100%;
box-sizing: border-box;
top:60px;
}
.hmenu-nav ul{
}
.hmenu-nav li{
border-top: #000 1px solid;
display: block;
box-sizing: border-box;
font-size: 126%;
}
.hmenu-nav li:last-child{
border-bottom: #000 1px solid;
}
.hmenu-nav li:hover{
background-color: #222;
}
.hmenu-nav li a{
display: block;
color:#FFF;
height:100%;
padding: .8em 0;
text-align: center;
}



.hmenu-nav li a:hover{
opacity: 1;
}

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

/* hamburger menu */
.hmenu-wrapper{
display: none;
}

}

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


}