@charset "UTF-8";

/*======design============*/

/*mobile*/
/*mbl*/
@media screen and (max-width:768px){

.menu-btn{
display: flex;
flex-direction:column;
justify-content:space-between;
margin:0 auto;
width:50%;
height:50%;
border-color:transparent;
background:transparent;
z-index:400;
}

.menu-btn span{
width:100%;
height:2px;
background-color:var(--base-color);
}



/*========================*/
.check:checked ~ .menu-btn{

background-size:100% auto;
}
/*====================================*/


.check{
display:none;
}

.drawer-menu{
box-sizing:border-box;
position:fixed;
top:0;
right:0;
width:70vw;
height:100vh;
padding-top:5rem;
background:var(--drawer-color);
transition:all .6s ease 0s;
transform:translate(calc(100%));
opacity:1;
z-index:300;
}


.drawer-menu li{
color:white;
border-bottom:1px solid var(--base-color);
line-height:2;
}



/*===============*/
.check:checked ~ .drawer-menu {
transform:translate(0);
}
/*==================================*/

.check:checked ~ .menu-btn span:nth-of-type(1){
/*transform:translateY(calc(2rem / 2 - 1px)) rotate(-45deg);*/

transform:rotate(45deg);
transform-origin:left top;
width:calc(141% - 1px);
}

.check:checked ~ .menu-btn span:nth-of-type(2){
opacity:0;
}

.check:checked ~ .menu-btn span:nth-of-type(3){
/*transform:translateY(calc(-2rem / 2 + 1px)) rotate(45deg);*/
transform:rotate(-45deg);
transform-origin:left bottom;
width:calc(141% - 1px);
}

/*==========*/
.check:checked ~ .bg-veil{
visibility:visible;
opacity:1;

}

/*==========*/
.bg-veil{
display:block;
position:fixed;
top:0;
left:0;
width:100%;
height:100vh;
background:RGBa(0,0,0,0.3);
z-index:200;
transition:all 0.6s;
visibility:hidden;
opacity:0;


}
/*=====================*/

.drawer-menu li a{
display:inline-block;
box-sizing:border-box;
padding:1rem 0 1rem 1rem;
width:100%;
color:white;

}




}

/*=====@media print,screen and (min-width:769px)===== end*/