@charset "utf-8";
/* VISUAL */
.visual { height:30rem }



/* HISTORY LIST */
.YU__his_list , .YU__his_list li , .YU__his_list span , .YU__his_list b , 
.YU__his_list a::before  { width:100% ; box-sizing:border-box }
.YU__his_list { text-align:center ; font-size:0 } 
.YU__his_list li { 
    max-width:12rem ;
    display:inline-block ; margin:0 0.5rem 1.5rem }  

.YU__his_list a , .YU__his_list span , .YU__his_list b { transition:0.3s all ; position:relative }
    
.YU__his_list a , .YU__his_list a::before { border-radius:0.6rem }
.YU__his_list a { display:block ; overflow:hidden }
.YU__his_list a::before {
    display:block ; content:"" ; height:100% ;
    border:solid 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:0 ; top:0
}
.YU__his_list span , .YU__his_list b { 
    margin:auto ; line-height:2.8rem ; display:block ;
    padding:0 ;
}
.YU__his_list b::before {
    display:block ; content:"" ; width:90% ; 
    height:0 ; border-bottom:dashed 1px rgba(0,0,0,0.1) ;
    position:absolute ; left:50% ; top:0 ; transform:translateX(-50%) ;
}
.YU__his_list span { 
    font-size:1.6rem ;  
    padding:1rem 0.2rem 0.7rem ;
}
.YU__his_list b { 
    font-size:2rem ;
    padding:0.7rem 0.2rem 1rem ; font-weight:600 ;
    background-color:rgba(0,0,0,0.03) ;
}
.YU__his_list a:hover , .YU__his_list a:focus { 
    background-color:#ffde00 ;
    box-shadow:0 0.2rem 0.3rem rgba(0,0,0,0.2) ;
} 
.YU__his_list a:hover b , .YU__his_list a:focus b {
    color:#ffffff ; background-color:#111111 ;
}



/* PC **********/
@media screen and (min-width:1100px){
 
    /* VISUAL */
    .visual { height:50rem }


    
    /* HISTORY LIST */
    .YU__his_list li { max-width:18rem ; margin:0 1rem 3rem }  
 
} 




/* PRINT **********/
@media print { 
    .visual { height:auto }
}