@charset "utf-8";  
 
/* Aside-4 */
#aside , .aside__nav , .aside__nav__link , .aside__btn__top , .aside__btn__top > span { width:5rem }
.aside__nav__link , .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 ,
.aside__btn__top , .aside__btn__top > span , .aside__btn__top > span::before , .aside__btn__top > span::after ,
.aside__nav__link , .aside__nav__link::before , .aside__nav__link::after { transition:0.3s all }

.aside__nav , .aside__btn__top { position:absolute ; right:0 }
.aside__nav__link , .aside__btn__top { display:block ; font-size:0 ; color:transparent }
.aside__btn__top {
    background-color:#444444 ; border-radius:0 0 0.4rem 0.4rem  ;
    bottom:0 ;
}
.aside__btn__top:hover { background-color:#111111 }
.aside__btn__top > span , .aside__btn__top > span::before , .aside__btn__top > span::after ,
.aside__nav__link::before , .aside__nav__link::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 > span::before , .aside__btn__top > span::after ,
.aside__nav__link::before , .aside__nav__link::after , .aside__nav__item::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 { transform:translate(-50%,-50%) scale(1) }
.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
}
 
.aside__nav { bottom:5rem }
.aside__nav__item , .aside__nav__link { display:block ; position:relative }
.aside__nav__item { background-color:#ffffff }

.aside__nav__link::before { width:3rem ; height:3rem ; background:no-repeat center ; background-size:cover ; opacity:0.5 }
.aside__nav__link:hover::before { opacity:1 }
.aside__nav__link.copyLink::before  { background-image:url(../icons/icon_link.svg) }
.aside__nav__link.subscribe::before { background-image:url(../icons/icon_bell.svg) }

.aside__nav__link::after  { 
    width:100% ; height:100% ; 
    border:solid 1px rgba(0,0,0,0.1) ; border-top:none ; border-bottom:none ;
}
.aside__nav__item:first-child .aside__nav__link::after { border-top:solid 1px rgba(0,0,0,0.1) }
.aside__nav__item:first-child .aside__nav__link ,
.aside__nav__item:first-child .aside__nav__link::after { border-radius:0.4rem 0.4rem 0 0 }

.aside__nav__item::after {
    width:1.8rem ; height:0.1rem ; 
    background-color:rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; bottom:0 ; transform:translateX(-50%) ;
}
.aside__nav__item:last-child::after { display:none }





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

} 
    




@media print {  }