.archive { width: 100%; max-width: 800px; margin: 0px auto; padding-top: 5px; padding-bottom: 25px;}
.archive ul:before, .archive ul:after { content: ""; display: table;}
.archive ul:after { clear: both;}
.archive li { width: 7.8%; margin: 10px 1.1%; float: left;}
.archive .acv_sp { width: 100%; height: 0; padding-top: 100%; position: relative;}
.archive .acv_sp a { width: 100%; height: 100%; display: block; position: absolute; top: 0; left: 0; color: rgba(255, 255, 255, 1); background: rgba(166, 3, 9, 1); -ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
.archive .acv_sp a:hover { opacity: .75; -ms-border-radius: 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
#acv1 .a1t a, #acv2 .a2t a, #acv3 .a3t a, #acv4 .a4t a, #acv5 .a5t a, #acv6 .a6t a, #acv7 .a7t a, #acv8 .a8t a, #acv9 .a9t a, #acv10 .a10t a, #acv11 .a11t a { opacity: .35; cursor: default; pointer-events: none;}
.archive .acv_sp span { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit- transform: translate(-50%, -50%); font-weight: bold; font-size: 160%;}
/*for_W480-*/
@media screen and (min-width: 480px) {
.archive .acv_sp span { font-size: 210%;}
}
/*for_W640-*/
@media screen and (min-width: 640px) {
.archive { padding-top: 10px;}
.archive .acv_sp span { font-size: 270%;}
}
/*for_W1000-*/
@media screen and (min-width: 1000px) {
.archive { padding-top: 15px;}
.archive .acv_sp span { font-size: 300%;}
}

.archive li { width: 7.8%; margin: 10px .6%; float: left;}