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

.aside__nav , .aside__btn__top { position:absolute ; right:0 } 
.aside__btn__top {
    display:block ; font-size:0 ; color:transparent ;
    background-color:#444444 ; border-radius:100%  ;
    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__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:5.5rem ; padding:1rem 0 ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:6rem ;
    background-color:#ffffff ;
} 
.aside__nav__link , .aside__nav__item::after { transition:0.3s all }
.aside__nav__item { position:relative }
.aside__nav__link {
    display:block ; padding:1rem 0.2rem ;
    font-size:1.2rem ; line-height:140% ; text-align:center ; word-break:keep-all ;
}
.aside__nav__link:hover  { color:#000000 }
.aside__nav__item::after {
    width:1.4rem ; 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 { opacity:0 }
.aside__nav__item:hover::after  { background-color:#ff6600 ; opacity:1 ; width:50% } 




@media screen and (min-width:1024px){ 
  
    /* Aside-5 */
    #aside , .aside__btn__top , .aside__nav { width:6rem }
    .aside__btn__top { height:6rem } 
    .aside__nav      { bottom:6.5rem } 
    .aside__nav__link { 
        font-size:1.4rem ; line-height:120% ;
        padding:1.5rem 0.5rem ; letter-spacing:-0.05rem ;
    }


} 
    




@media print {  }