@charset "utf-8";  


/* Aside-1 */
#aside , .aside__btn__top , .aside__btn__top > span { width:5rem } 
.aside__btn__top , .aside__btn__top > span { height:5rem }
#aside { position:fixed ; right:-8rem ; bottom:0.5rem ; z-index:80 ; opacity:0 } 
#aside.top { right:0.5rem ; opacity:1 }

.aside__btn__top { 
    display:block ; overflow:hidden ; border-radius:100% ;
    font-size:0 ; color:transparent ; text-indent:-99rem ;
    position:absolute ; right:0 ; bottom:0 ; background-color:#444444 ;
}
.aside__btn__top:hover { background-color:#000000 }
#aside , .aside__btn__top , .aside__btn__top > span , 
.aside__btn__top > span::before , .aside__btn__top > span::after { transition:0.3s all }
.aside__btn__top > span , .aside__btn__top > span::before , .aside__btn__top > span::after { 
    display:block ; 
    position:absolute ; left:50% ; top:50% ; transform:translate(-50%,-50%) ;
}
.aside__btn__top > span { transform:translate(-50%,-50%) scale(0.8) }
.aside__btn__top:hover > span { transform:translate(-50%,-50%) scale(1) }
.aside__btn__top > span::before , .aside__btn__top > span::after { content:"" ; box-sizing:border-box }
.aside__btn__top > span::before {
    width:1.2rem ; height:1.2rem ; 
    border:solid 0.2rem #ffffff ; border-right:none ; border-bottom:none  ;
    transform:translate(-50%,-50%) rotate(45deg)
}
.aside__btn__top > span::after {
    width:0.2rem ; height:1.6rem ; 
    background-color:#ffffff ; border-radius:1rem ;
    top:53%
}
.aside__btn__top:hover > span::before { top:65% }
.aside__btn__top:hover > span::after  { 
    top:40% ; transform:translate(-50%,-50%) rotate(90deg) ;
    height:1.8rem
}





@media screen and (min-width:1024px){ 
 
    /* Aside-1 */
    #aside , .aside__btn__top { width:6rem } 
    .aside__btn__top { height:6rem }  
    .aside__btn__top > span { transform:translate(-50%,-50%) scale(1) }

} 
    




@media print {  }