.contents{display:block;padding:0}
@media screen and (max-width:1024px){
    .contents{padding:0}
}

.contents .ranking{margin:30px 0;padding:0 40px;letter-spacing:-.5em}
.contents .ranking h2{margin:0 0 10px;font-size:20px;line-height:1.3em;color:#AF0016;text-align:center;letter-spacing:0}
.contents .ranking p{margin:0 0 20px;font-size:14px;line-height:1.5em;text-align:center;letter-spacing:0}
.contents .ranking div{display:inline-block;padding:0 10px 0 0;width:50%;vertical-align:top;letter-spacing:0}
.contents .ranking div+div{padding:0 0 0 10px}
.contents .ranking h3{background:#AF0016;font-size:18px;line-height:50px;color:#fff;text-align:center}
.contents .ranking ol{padding:20px;background:#f6f5f4}
.contents .ranking ol li{position:relative;padding:0 0 0 35px}
.contents .ranking ol li:last-child{padding:0}
.contents .ranking ol li+li{margin:10px 0 0}
.contents .ranking ol li i{position:absolute;top:0;left:0;display:block;background:#AF0016;border-radius:1px;width:25px;height:25px;font-size:14px;line-height:25px;color:#fff;text-align:center}
.contents .ranking ol li a{position:relative;display:block;overflow:hidden;font-size:16px;line-height:25px;text-overflow:ellipsis;white-space:nowrap}
.contents .ranking ol li:last-child a{padding:0 15px 0 0;text-align:right;overflow:visible}
.contents .ranking ol li:last-child a:after{position:absolute;top:50%;right:0;display:block;margin:-3px 0 0;content:"";border-top:1px solid #28d;border-right:1px solid #28d;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:6px;height:6px}
.contents .ranking ol li small{margin:0 0 0 .5em;font-size:12px}
.contents .ranking ol li em{margin:0 0 0 1em;font-size:12px}
@media screen and (max-width:1024px){
    .contents .ranking{padding:0 30px}
}
@media screen and (max-width:767px){
    .contents .ranking{padding:0}
    .contents .ranking h2{padding:0 15px}
    .contents .ranking p{padding:0 15px}
    .contents .ranking div{display:block;padding:0;width:auto}
    .contents .ranking div+div{padding:0}
    .contents .ranking ol{padding:0;background:0 0}
    .contents .ranking ol li{padding:0 0 0 45px}
    .contents .ranking ol li:last-child{padding:10px 15px}
    .contents .ranking ol li+li{margin:0;border-top:1px dotted #dcd7d2}
    .contents .ranking ol li i{top:10px;left:15px;width:20px;height:20px;font-size:12px;line-height:20px}
    .contents .ranking ol li a{padding:10px 30px 10px 0;font-size:14px;line-height:20px}
    .contents .ranking ol li a:after{position:absolute;top:50%;right:15px;display:block;margin:-4px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:8px;height:8px}
    .contents .ranking ol li em{display:block;margin:0}
}

.contents .search{margin:0 0 30px;padding:0 40px;letter-spacing:-.5em}
.contents .search h2{margin:0 0 10px;font-size:20px;line-height:1.3em;color:#3c6478;text-align:center;letter-spacing:0}
.contents .search p{margin:0 0 20px;font-size:14px;line-height:1.5em;text-align:center;letter-spacing:0}
.contents .search div{display:inline-block;padding:0 10px 0 0;width:50%;vertical-align:top;letter-spacing:0}
.contents .search div+div{padding:0 0 0 10px}
.contents .search h3{background:#AF0016;font-size:18px;line-height:50px;color:#fff;text-align:center}
.contents .search ol{padding:20px;background:#f6f5f4}
.contents .search ol li{position:relative;padding:0 0 0 35px}
.contents .search ol li:last-child{padding:0}
.contents .search ol li+li{margin:10px 0 0}
.contents .search ol li i{position:absolute;top:0;left:0;display:block;background:#AF0016;border-radius:1px;width:25px;height:25px;font-size:14px;line-height:25px;color:#fff;text-align:center}
.contents .search ol li a{position:relative;display:block;overflow:hidden;font-size:16px;line-height:25px;text-overflow:ellipsis;white-space:nowrap}
.contents .search ol li:last-child a{padding:0 15px 0 0;text-align:right;overflow:visible}
.contents .search ol li:last-child a:after{position:absolute;top:50%;right:0;display:block;margin:-3px 0 0;content:"";border-top:1px solid #28d;border-right:1px solid #28d;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:6px;height:6px}
.contents .search ol li small{margin:0 0 0 .5em;font-size:12px}
.contents .search ol li em{margin:0 0 0 1em;font-size:12px}
@media screen and (max-width:1024px){
    .contents .search{padding:0 30px}
}
@media screen and (max-width:767px){
    .contents .search{padding:0}
    .contents .search h2{padding:0 15px}
    .contents .search p{padding:0 15px}
    .contents .search div{display:block;padding:0;width:auto}
    .contents .search div+div{padding:0}
    .contents .search ol{padding:0;background:0 0}
    .contents .search ol li{padding:0 0 0 45px}
    .contents .search ol li:last-child{padding:10px 15px}
    .contents .search ol li+li{margin:0;border-top:1px dotted #dcd7d2}
    .contents .search ol li i{top:10px;left:15px;width:20px;height:20px;font-size:12px;line-height:20px}
    .contents .search ol li a{padding:10px 30px 10px 0;font-size:14px;line-height:20px}
    .contents .search ol li a:after{position:absolute;top:50%;right:15px;display:block;margin:-4px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:8px;height:8px}
    .contents .search ol li em{display:block;margin:0}
}

.contents .genre{margin:0 0 36px;padding:0 40px;letter-spacing:-.5em}
.contents .genre h2{margin:0 0 10px;font-size:20px;line-height:1.3em;color:#3c6478;text-align:center;letter-spacing:0}
.contents .genre p{margin:0 0 20px;font-size:14px;line-height:1.5em;text-align:center;letter-spacing:0}
.contents .genre ol{margin:0 -10px 10px;width:calc(100% + 20px);letter-spacing:-.5em}
.contents .genre ol li{display:inline-block;width:25%;letter-spacing:0;vertical-align:top}
.contents .genre ol li a{position:relative;display:block;padding:0 10px;font-size:14px;line-height:1.5em}
.contents .genre ol li a img{display:block;margin:0 0 5px;border-radius:2px;width:100%;aspect-ratio:441 / 220;object-fit: cover;}
.contents .genre ol li a span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.contents .genre ul{letter-spacing:-.5em}.contents .genre ul li{display:inline-block;width:25%;letter-spacing:0}
.contents .genre ul li a{position:relative;display:block;padding:0 10px 0 15px;overflow:hidden;font-size:14px;line-height:1.5em;text-overflow:ellipsis}
.contents .genre ul li a:after{position:absolute;top:50%;left:0;display:block;margin:-3px 0 0;content:"";border-top:1px solid #dcd7d2;border-right:1px solid #dcd7d2;transform:rotate(45deg);-webkit-transform:rotate(45deg);width:6px;height:6px}
@media screen and (max-width:1024px){
    .contents .genre{padding:0 30px}
}
@media screen and (max-width:767px){
    .contents .genre{padding:0 15px}
    .contents .genre h2{padding:0 15px}
    .contents .genre p{padding:0 15px}
    .contents .genre ol{margin:0 -10px}
    .contents .genre ol li{margin:0 0 10px;width:50%}
    .contents .genre ul li{width:50%}
}