#roles {
    background-color: #F7F7F7;
    padding-top: 53px;
    padding-bottom: 82px;
}
#roles .main-content {
    margin-bottom: 60px;
}
#roles .main-content h3 {
    margin-bottom: 24px;
    font-size: 46px;
    line-height: 1;
}
#roles .main-content p {
    margin-bottom: 24px;
    font-size: 18px;
    line-height: 1.444;
}
#roles .main-content ul {
    column-count: 2;
    text-align: left;
}
#roles .main-content ul li {
    position: relative;
    padding-left: 34px;
    line-height: 1.5;
    font-size: 1.125em;
    /*list-style:none;*/
}
#roles .main-content ul li:before {
    content: '';
    display: block;
    width: 25px;
    height: 25px;
    position: absolute;
    left: 0;
    top: 2.5px;
    background-image: url('../../../images/2026/careers/checkmark.png');
    background-image: image-set(url('../../../images/2026/careers/checkmark.png') 1x, url('../../../images/2026/careers/checkmark@2x.png') 2x);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
#roles .main-content ul li + li {
    margin-top: 15px;
}
#roles .swiper {
    padding: 10px 0;
}
#roles .swiper-slide {
    width: 595px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
    border-radius: 30px;
    padding: 30px 34px 38px 39px;
}
#roles .swiper-slide-active {
    border: 1.5px solid #0C6B46;
}
#roles .button-prev,
#roles .button-next {
    background-image: url('../../../images/2026/careers/arrow.png');
    background-image: image-set(url('../../../images/2026/careers/arrow.png') 1x, url('../../../images/2026/careers/arrow@2x.png') 2x);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 35px;
    height: 35px;
    top: 50%;
    margin-top: -17.5px;
}
#roles .button-prev {
    left: 13vw;
}
#roles .button-next {
    right: 13vw;
    transform: scaleX(-1);
}
#roles .role {
    color: #0C6B46;
    font-size: 36px;
    line-height: 1;
    margin-bottom: 16px;
}
#roles .role-desc p,
#roles .role-desc strong,
#roles .role-desc ul {
    font-size: 20px;
    line-height: 1.5;
    margin-bottom: 32px;
}
#roles .toggle-desc {
    font-size: 20px;
    line-height: 1.25;
}
@media screen and (max-width: 567px) {
    #roles {
        padding-top: 33px;
        padding-bottom: 36px;
        --swiper-pagination-bullet-inactive-color: #8D8D8D;
        --swiper-pagination-color: #0C6B46;
        --swiper-pagination-bullet-size: 14px;
        --swiper-pagination-bullet-inactive-opacity: 1;
    }
    #roles .main-content {
        margin-bottom: 40px;
    }
    #roles .main-content h3 {
        margin-bottom: 20px;
        font-size: 40px;
        line-height: 1.1;
    }
    #roles .main-content p {
        margin-bottom: 40px;
        font-size: 16px;
        line-height: 1.5;
    }
    #roles .main-content ul {
        column-count: 1;
    }
    #roles .main-content ul li {
        padding-left: 50px;
        line-height: 25px;
        font-size: 18px;
        /*list-style:none;*/
    }
    #roles .main-content ul li + li {
        margin-top: 1em;
    }
    #roles .swiper {
        padding: 10px 15px;
    }
    #roles .swiper-slide {
        width: 100%;
        padding: 36px 39px;
    }
    #roles .role {
        font-size: 30px;
        margin-bottom: 12px;
    }
    #roles .role-desc p,
    #roles .role-desc strong,
    #roles .role-desc ul {
        font-size: 16px;
        line-height: 23px;
        margin-bottom: 18px;
    }
    #roles .swiper-pagination {
        margin-top: 30px;
        position: relative;
        left: inherit;
        bottom: inherit;
        top: inherit;
    }
}