/*-------------------------------------------------
|-  list-wrap
-------------------------------------------------*/
.list-wrap {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.list {
    width: 31.3%;
    margin: 0 3% 30px 0;
    box-sizing: border-box;
}
.list__link:hover {
    opacity: 0.7;
}
.list.game {
    border-color: var(--color-01);
}
.list.card {
    border-color: var(--color-02);
}
.list.hobby {
    border-color: var(--color-03);
}
.list.goods {
    border-color: var(--color-04);
}
.list.empty {
    border: 0;
}
.end .list {
    border-color: #656464;
}
.list__body {
    position: relative;
    padding-top: 57%;
    overflow: hidden;
}
.list__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    margin:auto;
}
.list__txt {
    padding: 5px 20px;
    box-sizing: border-box;
    color: #fff;
    font-size: var(--font-size21);
    display: flex;
    align-items: center;
}
.game .list__txt {
    background: var(--color-01);
}
.card .list__txt {
    background: var(--color-02);
}
.hobby .list__txt {
    background: var(--color-03);
}
.goods .list__txt {
    background: var(--color-04);
}
.end .list__txt {
    background: #656464;
}
.list__img {
    transition: .5s;
}
@media screen and (min-width: 768px){
    .list:nth-child(3n) {
        margin-right: 0;
    }
}
@media screen and (max-width: 767px){
    .list-wrap {
        justify-content: space-between;
    }
    .list {
        width: 47%;
        margin: 0 0 25px 0;
    }
    .list__txt {
        padding: 3px 10px;
        font-size: .78rem;
    }
    .list__body {
        padding-top: 59%;
    }
}