#navi {
    margin-top: 40px;
}
#navi .navi_prev {
    background: url(img/arrow_left.svg) no-repeat center;
    width: 56px;
    height: 39px;
    border: 1px solid var(--color-dark-gray);
    border-radius: 31px;
    display: inline-block;
    font-size: 0;
}
#navi .navi_prev:hover {
    background: var(--color-dark-gray) url(img/arrow_left_w.svg) no-repeat center;
    color: var(--color-badge);
}
#navi div.navi_prev {
    opacity: 0;
}
#navi .navi_page {
    width: 48px;
    height: 39px;
    border: 1px solid var(--color-dark-gray);
    border-radius: 31px;
    font-size: 16px;
    line-height: 37px;
    text-align: center;
    text-decoration: none;
    color: var(--color-dark-gray);
    margin: 0 3px;
    display: inline-block;
}
#navi div.navi_page, #navi .navi_page:hover {
    border: 1px solid var(--color-dark-gray);
    background: var(--color-dark-gray);
    color: var(--color-badge);
}
#navi .navi_next {
    background: url(img/arrow_right.svg) no-repeat center;
    width: 56px;
    height: 39px;
    border: 1px solid var(--color-dark-gray);
    border-radius: 31px;
    display: inline-block;
    font-size: 0;
}
#navi .navi_next:hover {
    background: var(--color-dark-gray) url(img/arrow_right_w.svg) no-repeat center;
    color: var(--color-badge);
}
#navi div.navi_next {
    opacity: 0;
}