@charset "utf-8";

/* HISTORY */
.vol__list , .vol__list li  , .vol__list a { width:100% ; box-sizing:border-box } 
.vol__list    { text-align:center }
.vol__list li { display:inline-block ; margin: 0.5rem ; max-width:28.5rem }
.vol__list a  { 
    display:block ; overflow:hidden ; position:relative ;
    border:solid 1px rgba(0,0,0,0.1) ; border-radius:0.6rem ;
    font-size:1.8rem ; line-height:2.8rem ; padding:1.5rem 2rem 1.7rem ; text-align:center ;
} 
.vol__list a::before {
    display:block ; overflow:hidden ; content:"" ; width:104% ; height:0 ; border-radius:0.4rem ;
    position:absolute ; left:50% ; bottom:0 ; z-index:-1 ; transform:translateX(-50%) ;
    background-color:#111111 ;
} 
.vol__list a , .vol__list a::before { transition:0.3s all }
.vol__list a:hover , .vol__list a:focus { border-color:#111111 ; color:#ffffff }
.vol__list a:hover::before , .vol__list a:focus::before { height:102% }

.vol__list a.now {
    background-color:#f78f1e ; border-color:#f78f1e ;
    color:#ffffff ; text-shadow:0 0 0.3rem rgba(0,0,0,0.3) ; font-weight:600 ;
} 




/* PC **********/
@media all and (min-width:1100px){
  
    /* HISTORY */
    .vol__list li { display:block ; margin:0 2rem 2rem 0 ; float:left }
    .vol__list li:nth-child(4n) { margin-right:0 } 
    .vol__list::after { display:block ; content:"" ; clear:both }
 

}