@charset "utf-8";

article figure {margin:0;height:300px; overflow: hidden; border-radius:10px; }
article figure img {height:300px; object-fit: cover; transition: all 0.5s; transform:scale(1.1)}
article > a:hover figure img {transform:scale(1.0)}

ul.pagination > li.page-item > a {margin:0 5px;border:1px solid #DDD; color:#000; border-radius: 5px;}
ul.pagination > li.page-item > a.current {background-color: #3860BE; color: #FFF}

a.tag {padding:5px 10px; margin:5px 5px 15px 5px; border-radius: 5px; border: 1px solid #DDD}

/* PC */
@media screen and (min-width:769px) {
    article {width:50%;}
    article:nth-child(even) {padding-left:10px}
    article:nth-child(odd) {padding-right:10px}
    article:last-child {flex:none}
    article .author-detail {height:20px}

    ul.pagination > li.page-item > a {width:35px;height:35px;}
    ul.pagination > li.next > a, ul.pagination > li.prev > a {width:150px;height:35px;}
    ul.pagination > li.prev > a {padding:2px 0px 2px 25px}
    ul.pagination > li.next > a {padding:2px 0px 2px 10px}
    ul.pagination > li.next > a::after {content:""; background-image: url(/res/figure/arrow.png); background-size:contain; position:absolute; top:50%; right:10px; width:10px;height:10px; transform: translate(0 ,-50%);}
    ul.pagination > li.prev > a::before {content:""; background-image: url(/res/figure/arrow.png); background-size:contain; position:absolute; top:50%; left:10px; width:10px;height:10px; transform: translate(0 ,-50%) scale(-1,1);}
}

/* SP */
@media screen and (max-width:768px) {
    section.author figure img {height:200px; width:300px; object-fit: cover; object-position: center;}

    ul.pagination > li.page-item {width:10%}
    ul.pagination > li.page-item > a {width:90%;height:28px;margin:0 2px}
    ul.pagination > li.next, ul.pagination > li.prev{width: 100%}
    ul.pagination > li.next > a, ul.pagination > li.prev > a {width:100%;height:35px;}
    ul.pagination > li.next > a > span::after {content:""; background-image: url(/res/figure/arrow.png); background-size:contain; position:absolute; top:50%; right:-15px; width:10px;height:10px; transform: translate(0 ,-50%);}
    ul.pagination > li.prev > a > span::before {content:""; background-image: url(/res/figure/arrow.png); background-size:contain; position:absolute; top:50%; left:-15px; width:10px;height:10px; transform: translate(0 ,-50%) scale(-1,1);}

}