.media_list {
    max-width: 1080px;
    width: 90%;
    margin: 0 auto;
    display: flex;
    gap: 30px 25px;
    flex-wrap: wrap;
}

.media_list .media_item {
    width: calc(calc(100% - 75px) / 4);
    background-color: #dcdcdc;
    padding: 1px;
    position: relative;
    overflow: hidden;
}

.media_list .media_item::before {
    bottom: -1px;
    height: 4px;
    right: -1px;
    width: 0px;
}

.media_list .media_item::after {
    height: 4px;
    left: -1px;
    top: -1px;
    width: 0px;
}

.media_list .media_item a::before {
    height: 0px;
    right: -1px;
    bottom: -1px;
    width: 4px;
}

.media_list .media_item a::after {
    top: -1px;
    height: 0px;
    left: -1px;
    width: 4px;
}

.media_list .media_item::before,
.media_list .media_item::after,
.media_list .media_item a::before,
.media_list .media_item a::after {
    background-color: #0077d1;
    content: "";
    display: block;
    position: absolute;
    z-index: 10;
    transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
}

.media_list .media_item:hover::before,
.media_list .media_item:hover::after {
    width: calc(100% + 2px);
}

.media_list .media_item:hover a::before,
.media_list .media_item:hover a::after {
    height: calc(100% + 2px);
}

.media_list a {
    display: block;
    width: 100%;
    transition: all 0.3s;
}

.media_list a .img_box {
    width: 100%;
    aspect-ratio: 250/280;
    background-color: #f0f0f0;
    padding: 25px 15px;
}

.media_list a .img_box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.media_list a .media_info {
    background-color: white;
    min-height: 120px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
}

.media_list a .media_info .catch {
    min-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.media_list a .media_info .catch p {
    font-size: 13px;
    line-height: 1.31;
    text-align: center;
    transition: all 0.3s;
    letter-spacing: 0.5px;
}

.media_list a:hover .media_info .catch p {
    color: #0077d1;
    font-weight: 700;
}

/* .media_item.town a .img_box,
.media_item.epuri a .img_box,
.media_item.lunpass a .img_box,
.media_item.machibon a .img_box,
.media_item.machibon_journal a .img_box,
.media_item.hyakuten a .img_box {
    padding: 25px 20px;
}

.media_item.imanani a .img_box,
.media_item.myplace a .img_box,
.media_item.digitalcity a .img_box {
    padding: 0 15px;
}

.media_item.esports a .img_box,
.media_item.wakuwaku a .img_box {
    padding: 0;
} */

/* .media_item a .img_box.type1 {
    padding: 25px 20px;
}

.media_item a .img_box.type2 {
    padding: 0 15px;
}

.media_item a .img_box.type3 {
    padding: 0;
} */

.media_list a .media_info .logo {
    max-width: 160px;
    width: 95%;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px auto 0;
}

.media_item a .media_info .logo img {
    width: 100%;
    height: 100%;
    max-height: 60px;
    object-fit: contain;
}

/* .media_item.town a .media_info .logo img {
    max-width: 164px;
}
.media_item.epuri a .media_info .logo img {
    max-width: 170px;
}
.media_item.lunpass a .media_info .logo img {
    max-width: 130px;
}
.media_item.machibon a .media_info .logo img {
    max-width: 160px;
}
.media_item.machibon_journal a .media_info .logo img {
    max-width: 160px;
}
.media_item.imanani a .media_info .logo img {
    max-width: 170px;
}
.media_item.esports a .media_info .logo img {
    max-width: 130px;
}
.media_item.myplace a .media_info .logo img {
    max-width: 137px;
}
.media_item.hyakuten a .media_info .logo img {
    max-width: 155px;
}
.media_item.wakuwaku a .media_info .logo img {
    max-width: 80px;
}
.media_item.digitalcity a .media_info .logo img {
    max-width: 197px;
}
.media_item.ehimebon a .media_info .logo img {
    max-width: 120px;
}
.media_item.gaja a .media_info .logo img {
    max-width: 100px;
}
.media_item.smile a .media_info .logo img {
    max-width: 106px;
}
.media_item.iehime a .media_info .logo img {
    max-width: 156px;
}
.media_item.kosodate a .media_info .logo img {
    max-width: 125px;
}
.media_item.reform a .media_info .logo img {
    max-width: 120px;
}
.media_item.iepro a .media_info .logo img {
    max-width: 110px;
}
.media_item.designershouse a .media_info .logo img {
    max-width: 83px;
}
.media_item.myhomefesta a .media_info .logo img {
    max-width: 166px;
}
.media_item.suumo a .media_info .logo img {
    max-width: 124px;
}
.media_item.iehime_web a .media_info .logo img {
    max-width: 142px;
}
.media_item.tayorerudoctor a .media_info .logo img {
    max-width: 191px;
}
.media_item.doctorsfile a .media_info .logo img {
    max-width: 158px;
}
.media_item.hospitalsfile a .media_info .logo img {
    max-width: 168px;
} */

@media screen and (min-width: 1600px) {
    .media_list {
        max-width: 1200px;
    }

    .media_list a .media_info .catch p {
        font-size: 14px;
    }
}

@media screen and (max-width: 1439px) {
    .list_wrap .media_list a .media_info .catch p {
        font-size: 12px;
    }
}

@media screen and (max-width: 1000px) {
    .media_list {
        gap: 20px 15px;
    }

    .media_list .media_item {
        width: calc(calc(100% - 30px) / 3);
    }

    .media_item a .img_box {
        padding: 15px 10px;
    }

    .media_list a .media_info .catch {
        min-height: 30px;
    }

    .media_list a .media_info .catch p {
        font-size: 11px;
    }

    .media_list a .media_info .logo {
        min-height: 55px;
    }

    /* .media_item.town a .img_box,
    .media_item.epuri a .img_box,
    .media_item.lunpass a .img_box,
    .media_item.machibon a .img_box,
    .media_item.machibon_journal a .img_box,
    .media_item.hyakuten a .img_box {
        padding: 15px 10px;
    }

    .media_item.imanani a .img_box,
    .media_item.myplace a .img_box,
    .media_item.digitalcity a .img_box {
        padding: 0 10px;
    }

    .media_item.esports a .img_box,
    .media_item.wakuwaku a .img_box {
        padding: 0;
    } */

    /* .media_item a .img_box.type1 {
        padding: 15px 10px;
    }

    .media_item a .img_box.type2 {
        padding: 0 10px;
    }

    .media_item a .img_box.type3 {
        padding: 0;
    } */

    .media_list a .media_info .logo {
        height: 50px;
    }

    .media_item a .media_info .logo img {
        max-height: 50px;
    }

    /* .media_item.town a .media_info .logo img {
        width: 131px;
    }
    .media_item.epuri a .media_info .logo img {
        max-width: 136px;
    }
    .media_item.lunpass a .media_info .logo img {
        max-width: 104px;
    }
    .media_item.machibon a .media_info .logo img {
        max-width: 128px;
    }
    .media_item.machibon_journal a .media_info .logo img {
        max-width: 128px;
    }
    .media_item.imanani a .media_info .logo img {
        max-width: 136px;
    }
    .media_item.esports a .media_info .logo img {
        max-width: 104px;
    }
    .media_item.myplace a .media_info .logo img {
        max-width: 110px;
    }
    .media_item.hyakuten a .media_info .logo img {
        max-width: 124px;
    }
    .media_item.wakuwaku a .media_info .logo img {
        max-width: 64px;
    }
    .media_item.digitalcity a .media_info .logo img {
        max-width: 157px;
    }
    .media_item.ehimebon a .media_info .logo img {
        max-width: 96px;
    }
    .media_item.gaja a .media_info .logo img {
        max-width: 80px;
    }
    .media_item.smile a .media_info .logo img {
        max-width: 84px;
    }
    .media_item.iehime a .media_info .logo img {
        max-width: 124px;
    }
    .media_item.kosodate a .media_info .logo img {
        max-width: 100px;
    }
    .media_item.reform a .media_info .logo img {
        max-width: 96px;
    }
    .media_item.iepro a .media_info .logo img {
        max-width: 88px;
    }
    .media_item.designershouse a .media_info .logo img {
        max-width: 66px;
    }
    .media_item.myhomefesta a .media_info .logo img {
        max-width: 132px;
    }
    .media_item.suumo a .media_info .logo img {
        max-width: 99px;
    }
    .media_item.iehime_web a .media_info .logo img {
        max-width: 113px;
    }
    .media_item.tayorerudoctor a .media_info .logo img {
        max-width: 150px;
    }
    .media_item.doctorsfile a .media_info .logo img {
        max-width: 126px;
    }
    .media_item.hospitalsfile a .media_info .logo img {
        max-width: 134px;
    } */
}

@media screen and (max-width: 600px) {
    .list_wrap .media_list .media_item {
        width: calc(calc(100% - 15px) / 2);
    }

    .media_list a .media_info .logo {
        width: 75%;
        height: 45px;
    }

    .media_item a .media_info .logo img {
        max-height: 45px;
    }
}

@media screen and (max-width: 400px) {
    .media_list {
        gap: 15px 10px;
    }

    .list_wrap .media_list .media_item {
        width: calc(calc(100% - 10px) / 2);
    }
}