#pet-list ul{
    gap: 20px;
    margin-bottom: 60px;
}

#pet-list ul.btn-list li{
    width: 31.5%;
    background: none;
}
#pet-list ul.btn-list li a{
    background: var(--site-main-color);
    color: #fff;
    font-size:clamp(16px, 1.5vw, 20px);
    text-align: center;
    border-radius: 100px;
    padding: 15px 0 18px;
    position: relative;
    border: 4px solid var(--site-main-color);
    transition: 0.2s;
}
#pet-list ul.btn-list li a::after{
    content: '';
    background: url(../img/common/icon_arrow_right_color-white.svg)no-repeat;
    transform: rotate(90deg);
    background-size: contain;
    width: 10px;
    height: 16px;
    position: absolute;
    right: 30px;
    top: 40%;
}
#pet-list ul.btn-list li a:hover{
    background: #fff;
    border: 4px solid var(--site-main-color);
    color: var(--site-main-color);
    text-align: center;
    border-radius: 100px;
    position: relative;
}
#pet-list ul.btn-list li a:hover::after{
    content: '';
    background: url(../img/common/icon_arrow_right_color.svg)no-repeat;
    transform: rotate(90deg);
    background-size: contain;
    width: 10px;
    height: 16px;
    position: absolute;
    right: 30px;
    top: 40%;
}
#pet-list ul li{
    background: #ffcd8140;
    width: 22.5%;
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    position: relative;
    z-index: 10;
}
#pet-list ul li .pet-name{
    background: #f7e4c7;
    font-size:clamp(16px, 1.5vw, 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 2;
    padding: 8px 0 10px;
}
#reptiles-list ul li:first-child,
#reptiles-list ul li:nth-child(2),
#reptiles-list ul li:nth-child(3){
    width: 31%;
}
#reptiles-list ul li:last-child{
    max-width: 23.5%;
}
#dog-list ul li:first-child,
#dog-list ul li:nth-child(2),
#cat-list ul li:first-child,
#cat-list ul li:nth-child(2),
#bird-list ul li:first-child,
#bird-list ul li:nth-child(2),
#other-list ul li:first-child,
#other-list ul li:nth-child(2){
    width: 48%;
}
#other-list ul{
    margin-bottom: 20px;
}
#other-list ul li{
    width: 31.2%;
}

.annotation_txt{
    font-size: 15px;
    color: #939393;
}
@media only screen and (max-width: 568px) {
    #pet-list ul.btn-list{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-bottom: 40px;
    }
    #pet-list ul.btn-list li{
        width: 85%;
    }
    #pet-list ul.btn-list li a{
        font-size: 17px;
        padding: 10px 0 12px;
        width: 100%;
    }
    #pet-list ul.btn-list li a::after {
        right: 20px;
    }
    #pet-list ul{
        gap: 10px;
        margin-bottom: 30px;
    }
    #pet-list ul li{
        width: 48%;
        border-radius: 10px;
    }
    #pet-list ul li .pet-name{
        font-size: 15px;
        padding: 5px 0 8px;
    }
    #reptiles-list ul li:first-child,
    #reptiles-list ul li:nth-child(2),
    #reptiles-list ul li:nth-child(3){
        width: 48%;
    }
    #reptiles-list ul li:last-child,
    #other-list ul li:last-child{
        max-width: 48%;
    }
    #other-list ul{
        margin-bottom: 10px;
    }
    .annotation_txt{
        font-size: 11px;
    }
}