.course_detail_overlay {
    background-color: rgba(0, 0, 0, 0.8);
    padding: 5.3333333333333333vw;
}

.course_detail_wrapper {
    background-color: #ffffff;
    border-radius: 5.33vw;
    padding-bottom: 5.3333333333333333vw;
}

.popup_course__menu_links {
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup_course__menu_link {
    display: block;
    margin: 0 2px;
    width: 100px;
}
@media only screen and (max-width: 500px) {
    .popup_course__menu_link {
        margin: 0 0.5333333333333333vw;
        width: 26.9333333333333333vw;
    }
}


.popup_course__section_number {
    width: 8vw;
    font-size: 70px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.59;
    letter-spacing: normal;
    text-align: center;
    display: block;
    margin: -66px auto 0 auto;
}
@media only screen and (max-width: 500px) {
    .popup_course__section_number {
        width: 8vw;
        font-size: 18.6666666666666667vw;
        font-weight: normal;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.59;
        letter-spacing: normal;
        text-align: center;
        display: block;
        margin: -17.6vw auto 0 auto;
    }
}

.popup_course__growth_curve {
    display: block;
    margin: 0 auto;
}

.popup_course__section_title {
    display: block;
    margin-left: 14px;
    margin-right: 15.4px;
    width: 305px;
    height: 57px;
}

.popup_course__section_graph {
    display: block;
    margin: 0 auto;
    width: 266px;
    height: 221px;
}

.popup_course__section_sub_title {
    display: block;
    margin-left: 38px;
    margin-right: 37px;
    width: 260px;
    height: 30px;
    border: solid 1px #dddddd;
    color: #222222;
    padding: 4px;
}

.popup_course__section_sub_content {
    display: block;
    margin-left: 38px;
    margin-right: 38px;
    width: 260px;
    color: #222222;
}

.popup_course__section_sub_content2 {
    display: block;
    margin-left: 38px;
    margin-right: 31px;
    width: 266px;
    color: #222222;
}

.popup_course__arrow {
    display: block;
    margin: 0 auto;
    width: 54px;
    height: 21.6px;
}
@media only screen and (max-width: 500px) {
    .popup_course__section_title {
        display: block;
        margin-left: 3.7333333333333333vw;
        margin-right: 4.1066666666666667vw;
        width: 81.3333333333333333vw;
        height: 15.2vw;
    }
    
    .popup_course__section_graph {
        display: block;
        margin: 0 auto;
        width: 70.9333333333333333vw;
        height: 58.9333333333333333vw;
    }
    
    .popup_course__section_sub_title {
        display: block;
        margin-left: 10.1333333333333333vw;
        margin-right: 9.8666666666666667vw;
        width: 69.3333333333333333vw;
        height: 8vw;
        border: solid 1px #dddddd;
        color: #222222;
        padding: 1.0666666666666667vw;
    }
    
    .popup_course__section_sub_content {
        display: block;
        margin-left: 10.1333333333333333vw;
        margin-right: 9.8666666666666667vw;
        width: 69.3333333333333333vw;
        color: #222222;
    }
    
    .popup_course__section_sub_content2 {
        display: block;
        margin-left: 10.1333333333333333vw;
        margin-right: 8.2666666666666667vw;
        width: 70.9333333333333333vw;
        color: #222222;
    }
    
    .popup_course__arrow {
        display: block;
        margin: 0 auto;
        width: 14.5066666666666667vw;
        height: 5.76vw;
    }
}

.popup_course__mastered_skill {
    display: block;
    margin: 2.4vw auto 0 auto;
}

.popup_course__congratulation {
    width: 300px;
    display: block;
    margin: 0 auto;
    border-style: solid;
    border-width: 8px;
    position: relative;
}

.popup_course__congratulation__image {
    margin-top: -50px;
    margin-left: -17px;
    display: block;
    width: 270px;
}
@media only screen and (max-width: 500px) {
    .popup_course__congratulation {
        width: 80vw;
        display: block;
        margin: 0 auto;
        border-style: solid;
        border-width: 2.1333333333333333vw;
        position: relative;
    }
    
    .popup_course__congratulation__image {
        margin-top: -13.3333333333333333vw;
        margin-left: -4.5333333333333333vw;
        display: block;
        width: 71.7333333333333333vw;
    }
}

.popup_course__section1_bg {
    background-color: rgba(238,170,170,0.17);
}

.popup_course__section2_bg {
    background-color: rgba(136,221,187,0.17);
}

.popup_course__section3_bg {
    background-color: rgba(136,204,221,0.17);
}

.popup_course__congratulation--section1 {
    border-color: #eeaaaa;
    background-color: #fcc6c6;
}

.popup_course__congratulation--section2 {
    border-color: #88ddbb;
    background-color: #afead2;
}

.popup_course__congratulation--section3 {
    border-color: #88ccdd;
    background-color: #a7d7e3;
}