@charset "UTF-8";

/*==================================================================

MB_MENU

==================================================================*/
@media screen and (min-width:961px){
header{
display:none;
}
}
@media only screen and (min-width:768px) and (max-width:960px){
header{
display:none;
}
}
@media only screen and (min-width:320px) and (max-width:767px){
header{
}


.menu-btn{
position:fixed;
top:18px;
right:3%;
width:50px;
height:50px;
border-radius:50%;
cursor:pointer;
z-index:101;
border:solid 1px #000;
-webkit-transition:all 3s ease-in-out;
transition:all .3s ease-in-out;
}
.menu-btn-line{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
height:1px;
width:30%;
background:#000;
-webkit-transition:all 3s ease-in-out;
transition:all .3s ease-in-out;
}
.menu-btn-line::before,
.menu-btn-line::after{
content:"";
height:1px;
width:100%;
background:#000;
position:absolute;
left:0;
-webkit-transition:inherit;
transition:inherit;
}
.menu-btn-line::before{
top:-5px;
}
.menu-btn-line::after{
top:5px;
}
/* 開閉用ボタンがクリックされた時のスタイル */
.open .menu{
-webkit-transition:all .5s;
transition:all .5s;
visibility:visible;
opacity:1;
}
.open .menu-btn{
border-color:#FFF
}
.open .menu-btn-line{
background-color:transparent;
}
.open .menu-btn-line::before,
.open .menu-btn-line::after{
top:0;
background:#FFF;
}
.open .menu-btn-line::before{
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}
.open .menu-btn-line::after{
-webkit-transform:rotate(-45deg);
-ms-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/*開いたメニュー*/
.menu{
position:fixed;
display:flex;
justify-content:center;
top:0;
left:0;
width:100%;
height:100%;
background:#B4AEB1;
-webkit-transition:all .5s;
transition:all .5s;
visibility:hidden;
opacity:0;
z-index:100;
}
.menu h1{
width:50%;
margin:60px auto 0;
}
.menu ul{
transform:translateY(15%);
padding:0;
list-style-type:none;
}
.menu ul li{
width:60%;
height:auto;
margin:5% auto;
}
.menu li a{
display:block;
text-decoration:none;
-webkit-transition:all .2s;
transition:all .2s;
}
.menu li a:hover{
transform:translateX(5px);
-webkit-transition:all .2s;
transition:all .2s;
}
}