/* custom */
@media (min-width: 768px) {
    /* .skin-blue .main-header .navbar {
  position: fixed;
  width: calc(100% - 230px);
}
.skin-blue .main-header .logo,
.skin-blue .main-sidebar{
position: fixed;
}
.setting-wrapper{
position: absolute;
bottom:151px;
}
.main-footer{
position: fixed;
bottom: 0;
width: 100%;
margin-left: 0;
z-index: 820;
} */
}

body {
    color: #2b546a;
    word-break: break-all;
}

ul li {
    list-style: none;
}

textarea {
    vertical-align: bottom;
}

label:hover {
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .breadcrumb {
        display: none;
    }
}

/* SP only END */
.main-footer {
    padding: 30px 15px;
    color: #fff;
    background-color: #333;
}

@media screen and (min-width: 1122px) {
    .main-footer .footer_allWrapper {
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    .main-footer .footer_allWrapper {
        padding: 0 12px
    }
}

/* SP only END */
.main-footer .list_group_wrapper {
    position: relative;
}

.main-footer .list-group:after {
    display: block;
    content: "";
    clear: both;
}

.main-footer .list-group li:last-child {
    margin-right: 0;
}

.main-footer .list-group li a {
    text-decoration: underline;
    color: #fff;
}

.main-footer .footer_message_wrapper {
    text-align: center;
    justify-content: center;
}

.main-footer .footer_message_wrapper div h2 {
    margin-top: 0;
    font-size: 2.0rem;
}

.main-footer .footer_message_wrapper div p {
    font-size: 1.5rem;
}

.main-footer .footer_message_wrapper .input-group {
    width: 350px;
    margin: 0 20px 0 0;
}

.footer_message_wrapper .input-group-inner {
    display: -ms-flexbox;
    display: flex;
}

.footer_message_wrapper .input-group-inner input {
    width: 300px;
}

.main-footer .footer_message_wrapper .input-group {
    margin: 0 auto;
}

/* PC only END */
.main-footer .foot_top_area {
    display: -ms-flexbox;
    display: flex;
    margin: 0 24px 0 0;
}

@media screen and (max-width: 1122px) {
    .main-footer .foot_top_area {
        justify-content: center;
    }
}

/* PC only END */
.main-footer .foot_top_area .foot_top_parts {
    margin: 0 12px 0 0;
}

.main-footer .foot_top_area .foot_top_parts:last-of-type {
    margin-right: 0;
}

.widget-task .widget-title-image > img.icons {
    width: inherit;
}

/* .widget-task .widget-title{
margin-top: 18px;
} */
ul.nav-stacked li div h2.mainTitle {
    font-size: 16px;
    font-weight: bold;
}

@media screen and (min-width: 769px) {
    ul.nav-stacked li div h2.mainTitle {
        float: left;
        max-width: 400px;
    }
}

/* PC only END */
ul.nav-stacked li div span.textNum {
    color: #777f80;
    display: none;
}

@media screen and (min-width: 769px) {
    ul.nav-stacked li div span.textNum {
        float: right;
        margin-top: 20px;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .h1, .h2, .h3, h1, h2, h3 {
        margin-top: 12px;
        word-break: break-all;
    }
}

/* SP only END */
@media screen and (min-width: 769px) {
    section.content {
        max-width: 1200px;
    }
}

/* PC only END */
.status_ul {
    padding: 0;
}

.status_ul .status_li {
    position: relative;
    margin: 34px 12px;
    padding: 12px 12px 0 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.status_ul .status_li a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

@media screen and (min-width: 769px) {
    .status_ul .status_li .clearStatus_wrapper .clearStatus_inner {
        margin: 0 10px 0 0;
        padding: 0 10px 0 0;
    }
}

@media screen and (min-width: 855px) {
    .status_ul .title_wrapper {
        float: left;
        margin: 0 24px 0 0;
        max-width: 45%;
    }

    .groupList_page .status_ul .title_wrapper {
        max-width: 32%;
    }
}

/* PC only END */
.status_ul .title_wrapper h3 {
    word-break: break-all;
}

.status_ul .title_wrapper p {
    color: #777f80;
    word-break: break-all;
}

.h3, h3 {
    font-size: 20px;
    font-weight: bold;
}

@media screen and (min-width: 769px) {
    .status_wrapper {
        float: right;
    }

    .tasklist_page .status_wrapper {
        float: inherit;
    }

    .status_wrapper .status_parts {
        width: 600px;
    }
}

/* PC only END */
@media screen and (min-width: 856px) and (max-width: 1286px) {
    .groupList_page .status_wrapper {
        float: left;
    }
}

@media screen and (max-width: 855px) {
    .tasklist_page .status_wrapper .status_parts {
        width: 100%;
    }
}

.status_wrapper .status_parts::after {
    display: block;
    content: "";
    clear: both;
}

.status_wrapper .status_parts dl {
    float: left;
    width: calc(100% / 3);
    margin-bottom: 0;
    padding: 8px;
    text-align: center;
    border-right: solid 1px #fff;
}

.status_wrapper .status_parts dl dt {
    font-weight: normal;
    color: #2b546a;
}

@media screen and (min-width: 855px) {
    .status_wrapper .status_parts dl dt {
        float: left;
    }
}

/* PC only END */
@media screen and (min-width: 990px) {
    .status_wrapper .status_parts dl dt {
        float: inherit;
    }
}

/* PC only END */
@media screen and (max-width: 855px) {
    .status_wrapper .status_parts dl dt {
        font-size: 12px;
    }
}

/* SP only END */
.status_wrapper .status_parts dl::after {
    content: "";
    display: block;
    clear: both;
}

@media screen and (min-width: 855px) {
    .status_wrapper .status_parts dl dd {
        text-align: right;
    }
}

/* PC only END */
@media screen and (min-width: 990px) {
    .groupList_page .status_wrapper .status_parts dl dd {
        text-align: right;
    }
}

/* PC only END */
.status_ul .status_info .user-image {
    float: left;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -2px;
}

.status_ul .status_info {
    border-top: solid 1px #dde7e8;
    margin-top: 12px;
    padding: 4px 0;
}

.status_ul .status_info p {
    float: left;
}

@media screen and (min-width: 428px) {
    .status_ul .status_info p:first-of-type {
        margin: 4px 0;
    }
}

/* PC only END */
.status_ul .status_info p:last-of-type {
    margin: 7px 0;
    font-size: 12px;
    color: #777f80;
}

@media screen and (max-width: 428px) {
    .status_ul .status_info p:last-of-type, .status_ul .status_info p:last-of-type span, .status_ul .status_info p:first-of-type {
        margin: 0 !important;
    }
}

/* SP only END */
.status_ul .status_info p span {
    display: inline-block;
    margin: 0 0 0 8px;
}

@media screen and (max-width: 768px) {
    .status_ul .status_info p span {
        display: block;
        text-align: right;
    }
}

/* SP only END */
.status_ul .status_info .userImage_wrapper {
    margin-top: 0;
    width: 30px;
    height: 30px;
}

.status_ul nav {
    text-align: center;
}

section .search_wrapper {
    float: right;
}

@media screen and (max-width: 991px) {
    section .search_wrapper {
        margin-bottom: 20px;
    }
}

/* SP only END */
.login-page {
    background: #fff;
}

.login_left {
    height: 100vh;
    /*background-image: url(../../images/login_img.jpg);*/
    background-image: url(../../images/login_img2.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

@media screen and (max-width: 992px) {
    .login_left {
        display: none;
    }

    .login-page {
        position: relative;
        /*background-image: url(../../images/login_img.jpg);*/
        background-image: url(../../images/login_img2.jpg);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
    }

    .login-page:after {
        display: block;
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.31);
        z-index: -10;
    }
}

/* SP only END */

/* SP only END */
@media screen and (min-width: 769px) {
    .login-box {
        position: relative;
        width: 50%;
        margin: auto;
        height: 100vh;
    }

    .login-box .login_wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
        width: 80%;
        height: 50%;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .login-box-body {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    }
}

/* SP only END */
.has-feedback .form-control {
    height: 50px;
}

.form-control-feedback {
    top: 8px;
}

.has-feedback .form-control {
    margin-bottom: 20px;
    border: none;
    border-bottom: solid 3px #3c8dbc;
}

.button_wrapper {
    width: 30%;
    margin: 20px auto 0 auto;
}

.mainTitle_wrapper {
    margin-bottom: 20px;
}

.mainTitle_wrapper:after {
    content: "";
    display: block;
    height: 0;
    width: 0;
    clear: both;
}

.mainTitle_wrapper > .page-header {
    margin-bottom: 0;
}

.mainTitle_wrapper .fl {
    float: left;
}

.mainTitle_wrapper .fl .must {
    font-size: 13px;
    font-size: 1.3rem;
    background-color: #5b8698;
    padding: 0 6px;
    margin: 0 4px 0 0;
    border-radius: 4px;
    color: #ecf0f5;
    line-height: 25px;
    line-height: 2.5rem;
    display: inline-block;
    vertical-align: top;
}

.mainTitle_wrapper .add_button {
    display: inline-block;
    margin: 6px 0 0 12px;
}

.button_area {
    text-align: right;
}


.mainTitle_wrapper .add_button .btn-default {
    background-color: white;
!important;
}

.mainTitle_wrapper .add_button .btn {
    border: #C4C4C4 1px solid;
!important;
}


@media screen and (max-width: 768px) {
    .mainTitle_wrapper .add_button {
        margin: 0 4px 12px 4px;
    }
}

/* SP only END */
@media screen and (min-width: 769px) {
    .page-header {
        word-break: break-all;
    }

    .test_page .page-header {
        max-width: inherit;
    }
}

/* PC only END */
.grade_wrapper {
    color: ;
    font-weight: bold;
    font-size: 2.5rem;
}

.grade_wrapper div {
    float: left;
    margin: 0 60px 0 0;
}

.grade_wrapper div:last-child {
    margin: 0;
}

.grade_wrapper div img {
    margin: 0 12px 0 0;
    width: 40px;
}

.grade_wrapper02 .grade_inner {
    display: -ms-flexbox;
    display: flex;
    float: left;
    margin: 0 32px 20px 0;
    padding: 20px;
    width: 550px;
    background-color: #fff;
    box-sizing: border-box;
}

@media screen and (max-width: 1436px) {
    .grade_wrapper02 .grade_inner {
        margin: 0 32px 20px 0;
    }
}

@media screen and (max-width: 768px) {
    .grade_wrapper02 .grade_inner {
        width: 100%;
        padding: 12px;
    }
}

/* SP only END */
.grade_wrapper02 .grade_inner div {
    padding: 0 8px;
    width: calc(100% / 3);
    border-right: solid 1px #e6e6e6;
    box-sizing: border-box;
    text-align: center;
    box-sizing: border-box;
}

.grade_wrapper02 .grade_inner div span {
    font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
    .grade_wrapper02 .grade_inner div {
    }
}

/* SP only END */
.grade_wrapper02 .grade_inner div:first-child {
    padding-left: 0;
}

.grade_wrapper02 .grade_inner div:last-of-type {
    border-right: none;
    padding-right: 0;
}

.grade_wrapper02 .grade_inner div img {
    width: 25px;
    margin: -10px 8px 0 0;
}

.grade_wrapper02 .grade_inner div p {
    margin: 8px 0 0;
    font-size: 1.4rem;
}

.grade_wrapper02 .grade_inner div:nth-of-type(2) p {
    color: #ea7182;
}

.grade_wrapper02 .grade_inner div:last-child p {
    color: #F2944F;
}

.taskInfo_area, .status_area, .userChoice_wrapper {
    margin-bottom: 40px;
}

.userChoice_wrapper .userInfo {
    margin-top: 32px;
    border-bottom: solid 1px #d2d2d2;
    padding-bottom: 20px;
}

.userChoice_wrapper .userInfo p {
    margin: 0;
}

.userChoice_wrapper .userInfo .name {
    font-size: 1.8rem;
}

.userChoice_wrapper .userInfo img {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    margin-top: -10px;
}

.userChoice_wrapper .userInfo .name:after {
    display: block;
    content: "";
    clear: both;
}

.userChoice_wrapper .userChoice p:first-of-type {
    float: left;
    margin: 0 12px 0 0;
}

.infoBox_area, .joinList_area, .com_list_area {
    padding: 12px 12px 0 12px;
    background-color: #fff;
}

.infoBox_area ul, .joinList_area ul, .com_list_area ul {
    padding: 0;
}

.infoBox_area ul .li_title, .com_list_area ul .li_title {
    padding: 12px 0 12px 0;
    border-bottom: solid 1px #e6e6e6;
    font-size: 1.8rem;
}

.userImage_wrapper {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
    overflow: hidden;
    align-self: flex-start;
}

.userImage_wrapper img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .mainTitle_wrapper {
        margin: 10px 0 0 0;
    }

    h2.page-header {
        margin: 0;
    }

    .mainTitle_wrapper .add_button {
        /*margin: -5px 0 0 12px;*/
    }
}

/* SP only END */
.infoBox_area ul li p:first-of-type, .com_list_area ul li p:first-of-type {
    margin-bottom: 4px;
}

.infoBox_area ul li p:first-of-type {
    word-break: break-all;
}

@media screen and (max-width: 768px) {
    .infoBox_area ul li p:first-of-type, .com_list_area ul li p:first-of-type {
        max-width: 80vw;
    }
}

/* SP only END */
.infoBox_area ul li p:nth-of-type(2), .com_list_area ul li p:nth-of-type(2) {
    margin: 0;
    font-size: 12px;
    color: #777f80;
}

.com_list_area ul li p span {
    margin: 0 0 0 8px;
}

.infoBox_area ul li p span:first-of-type {
    margin: 0 8px 0 0;
}

.infoBox_area ul .infoBox_inner .info_parts li, .com_list_area ul .infoBox_inner .info_parts li {
    display: -ms-flexbox;
    display: flex;
    position: relative;
    padding: 12px 0;
    border-bottom: solid 1px #e6e6e6;
}

.infoBox_area ul .infoBox_inner .info_parts li div:nth-of-type(2), .com_list_area ul .infoBox_inner .info_parts li div:nth-of-type(2) {
    /* width: 100%; */
}

.infoBox_area ul .infoBox_inner .info_parts li div:nth-of-type(2) {
    width: 90%;
}

/* SP only END */
.com_list_area ul .infoBox_inner .info_parts .alert-danger ul li {
    padding-left: 0;
    border-bottom: none;
}

.infoBox_area ul .moreRead_btn, .com_list_area ul .moreRead_btn {
    text-align: center;
}

.infoBox_area ul .moreRead_btn a, .com_list_area ul .moreRead_btn a {
    display: block;
    padding: 24px 0;
}

.joinList_area .memberList_wrapper {
    margin: 12px 0 0 0;
}

.joinList_area .memberList_wrapper li {
    float: left;
    margin: 0 0 24px 0;
    width: calc(100% / 3);
}

@media screen and (max-width: 768px) {
    .joinList_area .memberList_wrapper li {
        text-align: center;
    }
}

/* SP only END */
.joinList_area .memberList_wrapper li p {
    margin: 0;
    font-size: 12px;
    color: #777f80;
    word-break: break-all;
}

.joinList_area .moreRead_btn {
    border-top: solid 1px #e6e6e6;
    text-align: center;
}

.joinList_area .moreRead_btn a {
    display: block;
    padding: 24px 0 27px 0;
}

.infoBox_area ul .infoBox_inner .info_parts li .exist_a {
    position: relative;
    display: block;
    padding: 12px 0;
    margin: -12px 0;
    width: 100%;
}

.infoBox_area ul .infoBox_inner .info_parts li .exist_a:after {
    position: absolute;
    top: 25px;
    right: 10px;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f105";
}

.tabsBox {
    background-color: #fff;
    border-top: none;
}

.tabsBox > .nav-tabs-custom {
}

.tabsBox .nav-tabs-custom > .tab-content {
    padding-bottom: 0;
}

.tabsBox .nav-tabs-custom > .tab-content .tab-pane > div {
    padding: 0;
}

.timer_wrapper {
    text-align: center;
}

@media screen and (min-width: 769px) {
    .timer_wrapper {
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }
}

/* PC only END */

@media screen and (min-width: 769px) {
    .timer_wrapper {
        position: inherit;
        float: right;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .timer_wrapper {
        position: relative;
    }
}

/* SP only END */
@media screen and (max-width: 320px) {
    .timer_wrapper {
        width: 120px;
        margin: 0 0 20px auto;
        position: inherit;
    }
}

/* SP only END */
.timer_wrapper i {
    font-size: 2.0rem;
    margin: 0 4px 0 0;
}

.timer_wrapper .timer_inner {
    margin: 0;
    padding: 8px;
    background-color: #48839a;
    border-radius: 4px;
    color: #fff;
}

@media screen and (min-width: 769px) {
    .timer_wrapper .timer_inner {
        width: 170px;
    }
}

/* PC only END */
.timer_wrapper .timer_inner span {
    color: #faff26;
    margin: 0 0 0 8px;
    font-size: 2.0rem;
}

@media screen and (max-width: 768px) {
    .timer_wrapper .timer_inner span {
        margin: 0;
    }
}

/* SP only END */
.test_page ul.q_progress {
    float: left;
}

.test_page ul.q_progress button {
    border: none;
    background-color: transparent;
}

ul.q_progress {
    padding: 0;
}

@media screen and (max-width: 768px) {
    ul.q_progress {
        padding: 0;
        margin: 20px 0 0 0;
    }
}

/* SP only END */
ul.q_progress li {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #fff;
    text-align: center;
    line-height: 50px;
}

@media screen and (max-width: 768px) {
    .end_wrapper ul.q_progress li {
        margin-right: 0;
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    ul.q_progress li {
        margin-bottom: 12px;
    }
}

/* SP only END */
.end_wrapper ul {
    margin-top: 20px;
}

ul.q_progress li.done::after {
    display: block;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00c";
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 12px 0 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #48839a;
    font-size: 2.0rem;
    color: #fff;
    line-height: 50px;
}

ul.q_progress li a {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    line-height: 50px;
    text-align: center;
}

ul.q_progress li a:hover {
    background-color: #c5e2e4;
    border-radius: 50%;
    transition: 0.5s;
}

.answer_wrapper {
    padding: 20px;
    background-color: #fff;
}

@media screen and (min-width: 769px) {
    .answer_wrapper {
        border: solid 1px #e6e6e6;
    }
}

/* PC only END */
.answer_form img {
    max-width: 500px;
}

@media screen and (max-width: 768px) {
    .answer_form img {
        width: 100%;
    }
}

/* SP only END */
.answer_wrapper form .answer_form label:hover {
    cursor: pointer;
}

.answer_wrapper form .answer_form input[type=radio],
.answer_wrapper form .answer_form input[type=checkbox], input[type=checkbox].q_checkbox,
.answerInput_form div input[type=checkbox] {
    display: none;
}

.ans_lbl, .q_checkbox {
    box-sizing: border-box;
    -webkit-transition: background-color 0.2s linear;
    transition: background-color 0.2s linear;
    position: relative;
    display: inline-block;
    margin: 0 0px 8px 0;
    padding: 24px 12px 16px 60px;
    font-size: 13px;
    vertical-align: middle;
    cursor: pointer;
}

.ans_lbl:hover:after, .q_checkbox:hover:after {
    border-color: #f39c12;
    color: #f39c12;
}

.ans_lbl:after, .q_checkbox:after {
    -webkit-transition: border-color 0.2s linear;
    transition: border-color 0.2s linear;
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    padding: 3px;
    width: 30px;
    height: 30px;
    border: 2px solid #d8d8d8;
    border-radius: 6px;
    content: '';
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00c";
    color: #d8d8d8;
    font-size: 2.0rem;
}

.ans_lbl:before {
    -webkit-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
    position: absolute;
    top: 50%;
    left: 15px;
    display: block;
    margin-top: -10px;
    padding: 3px;
    width: 30px;
    height: 30px;
    border: 2px solid #f39c12;
    border-radius: 6px;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00c";
    color: #f39c12;
    opacity: 0;
    font-size: 2.0rem;
}

input[type=radio]:checked + .ans_lbl:before,
.answer_wrapper form .answer_form input[type=checkbox]:checked + .ans_lbl:before,
.answerInput_form input[type=checkbox]:checked + .ans_lbl:before {
    opacity: 1;
}

input[type=radio]:checked + .ans_lbl:after,
.answer_wrapper form .answer_form input[type=checkbox]:checked + .ans_lbl:after,
.answerInput_form input[type=checkbox]:checked + .ans_lbl:after {
    opacity: 0;
}

input[type=radio]:checked2 + .ans_lbl:before,
.answer_wrapper form .answer_form input[type=checkbox]:checked2 + .ans_lbl:before,
.answerInput_form input[type=checkbox]:checked2 + .ans_lbl:before {
    opacity: 1;
}

.a_button_wrapper, .a_button_wrapper_sng {
    position: relative;
    overflow: hidden;
    float: inherit;
    margin: 0 auto;
    text-align: center;
}

.a_button_wrapper div, .a_button_wrapper_sng div {
    position: relative;
    left: 50%;
    float: left;
}

.break_line .a_button_wrapper_sng div {
    left: inherit;
    float: inherit;
}

.a_button_wrapper div button {
    position: relative;
    left: -50%;
    float: left;
    margin: 0 24px 0 0;
    width: inherit;
}

.a_button_wrapper_sng div button {
    position: relative;
    left: -50%;
    float: left;
    width: inherit;
}

.answer_wrapper .a_button_wrapper button:last-of-type {
    margin: 0;
}

.a_button_wrapper div a {
    position: relative;
    left: -50%;
    float: left;
    margin: 0 24px 0 0 !important;
    width: inherit;
}

.a_button_wrapper div a:last-child {
    margin: 0 !important;
}

.ready_wrapper .a_button_wrapper, .end_wrapper .a_button_wrapper {
    margin-top: 20px;
}

.qa_wrapper {
    padding-bottom: 20px;
    background-color: #f3f3f3;
}

@media screen and (min-width: 769px) {
    .qa_wrapper {
        padding-bottom: 32px;
    }
}

/* PC only END */
/* .question_wrapper{
padding: 0 32px 0 32px;
} */
.choiseUser02 div {
    display: none;
}

.chooseItem .userInfo {
    /* position: absolute; */
    display: none;
}

.chooseItem .partsForQ {
    /* position: absolute; */
    display: none;
}

.proModeList_wrapper {
    padding: 12px;
    margin: 12px 0 34px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .proModeList_wrapper {
        margin: 12px 0;
    }
}

/* SP only END */
.proModeList_wrapper ul {
    padding: 0;
    margin: 0;
}

.proModeList_wrapper ul li {
    position: relative;
    /* padding: 12px; */
    /*margin: 12px 0;*/
    border-bottom: solid 1px #e6e6e6;
}

.proModeList_wrapper ul .clear_cover {
    margin-top: 0;
    /*margin-bottom: 0;*/
    /* padding: 0 12px 12px; */
    background-color: rgba(0, 0, 0, 0.1);
    border-bottom-color: #d0d0d0;
}

.proModeList_wrapper ul .no_test {
    margin: 20px 0 0 0;
    text-align: center;
    background-color: #fff;
}

@media screen and (max-width: 768px) {
    .proModeList_wrapper ul .clear_cover {
        /* padding: 12px; */
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    .proModeList_wrapper ul .clear_cover {
        /* top: -13px; */
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    /* .proModeList_wrapper ul li{
  margin: 12px;
  } */
}

/* SP only END */
.proModeList_wrapper ul li .pml_li {
    padding: 12px;
}

@media screen and (min-width: 1130px) {
    .proModeList_wrapper ul li .pml_li {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        /* -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end; */
    }
}

/* PC only END */
.s_point div:first-child p {
    font-weight: bold;
}

.proModeList_wrapper ul li .pml_li .icon_wrapper {
    color: #ca4c85;
}

.proModeList_wrapper ul li .pml_li .icon_wrapper img {
    width: 40px;
}

@media screen and (min-width: 1130px) {
    .proModeList_wrapper ul li .pml_li .icon_wrapper {
        margin: 0 24px 0 12px;
        text-align: center;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .proModeList_wrapper ul li .pml_li .icon_wrapper {
        position: absolute;
        margin-bottom: -40px;
    }
}

/* SP only END */
.s_point .icon_wrapper {
    margin: 0 24px 0 0;
    text-align: center;
    color: #ca4c85;
}

.s_point .icon_wrapper img {
    width: 40px;
}

.proModeList_wrapper ul li .pml_li .icon_wrapper i {
    font-size: 3.0rem;
}

@media screen and (max-width: 768px) {
    .proModeList_wrapper ul li .pml_li .icon_wrapper i, .proModeList_wrapper ul li .pml_li .icon_wrapper p {
        display: inline-block;
    }
}

/* SP only END */
.proModeList_wrapper ul li .pml_li .icon_wrapper p, .s_point .icon_wrapper p {
    font-size: 1.2rem;
}

.proModeList_wrapper ul li .pml_li .titleBox {
    word-break: break-all;
}

@media screen and (min-width: 769px) {
    .proModeList_wrapper ul li .pml_li .titleBox {
        margin: 0 24px 0 0;
        /*max-width: 500px;*/
    }
}

/* PC only END */
.proModeList_wrapper ul li .pml_li .titleBox h3 {
    margin: 0 0 8px 0;
}

@media screen and (max-width: 768px) {
    .proModeList_wrapper ul li .pml_li .titleBox h3 {
        margin-top: 55px;
    }
}

/* SP only END */
.proModeList_wrapper ul li .pml_li .titleBox p {
    color: #777f80;
    margin-bottom: 0;
}

/* @media screen and (max-width: 1130px){
.proModeList_wrapper ul li .pml_li .limit_wrapper{
position: absolute;
bottom: 12px;
width: 100%;
}
} */
.proModeList_wrapper ul li .pml_li .scoreIcon_wrapper {
    color: #efe554;
    font-size: 1.6rem;
}

.proModeList_wrapper ul li .pml_li .scoreIcon_wrapper i, .mainTitle_wrapper .scoreIcon_wrapper i {
    color: #efe554;
    margin: 0 2px 0 0;
}

.mainTitle_wrapper .scoreIcon_wrapper {
    float: left;
    margin: 12px 0 0 12px;
}

@media screen and (max-width: 768px) {
    .mainTitle_wrapper .scoreIcon_wrapper {
        margin: 0 0 0 12px;
    }
}

/* SP only END */
.mainTitle_wrapper .scoreIcon_wrapper i {
    font-size: 2.0rem;
}

.scoreIcon_wrapper i.flame {
    color: #ea3e5e;
}

.proModeList_wrapper ul li .pml_li .scoreIcon_wrapper i:last-of-type {
    margin-right: 8px;
}

.proModeList_wrapper ul li .pml_li .scoreIcon_wrapper span {
    color: #777f80;
}

@media screen and (max-width: 991px) {
    .score_section .score_wrapper {
        padding: 12px 12px 0 12px;
        background-color: #fff;
    }
}

/* SP only END */
.proModeList_wrapper ul li .pml_li .limit_wrapper p {
    text-align: center;
    color: #3c8dbc;
}

@media screen and (max-width: 1230px) {
    /* .proModeList_wrapper ul li .pml_li .limit_wrapper{
  float: left;
  margin-top: 12px;
  } */
}

/* SP only END */
@media screen and (min-width: 781px) {
    .proModeList_wrapper .detail_wrapper {
        display: -ms-flexbox;
        display: flex;
    }
}

@media screen and (max-width: 780px) {
    .proModeList_wrapper .detail_wrapper {
        width: 100%;
    }

    .proModeList_wrapper .detail_wrapper div {
    }

    .proModeList_wrapper .detail_wrapper div div {
        margin: 0;
    }

    .proModeList_wrapper ul li .limit_wrapper {
        margin: -8px 0 8px 0;
    }
}

/* SP only END */
@media screen and (min-width: 781px) and (max-width: 1229px) {
    .proModeList_wrapper .detail_wrapper {
        clear: both;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

@media screen and (min-width: 781px) {
    .proModeList_wrapper .detail_wrapper div {
        margin-right: 12px;
    }

    .proModeList_wrapper .detail_wrapper > div:last-child {
        margin-right: 0;
    }

    .proModeList_wrapper .detail_wrapper div div {
        margin-right: 0;
    }
}

/* PC only END */
@media screen and (max-width: 1129px) {
    .proModeList_wrapper .detail_wrapper {
        margin: 12px 0 0 0;
    }
}

/* SP only END */
@media screen and (min-width: 781px) {
    .proModeList_wrapper .detail_wrapper p {
        padding: 4px 24px;
        /* margin: 0 12px 0 0; */
        margin-bottom: 0;
        border-radius: 20px;
    }
}

/* PC only END */
@media screen and (min-width: 781px) {
    .proModeList_wrapper .detail_wrapper .limit_wrapper {
        padding: 0;
        /* margin: 8px 12px 0 0; */
        margin: 8px 0 0 0;
    }
}

/* PC only END */
.periodModeList_wrapper ul li {
    /*margin-bottom: 12px;*/
    margin-bottom: 0;
    background-color: #d7ebef;
    border-color: #fff;
    border: none;
}

.proModeList_wrapper .courseMenu_wrapper .period_wrapper .txt {
    display: block;
}

.proModeList_wrapper .ulTitle_wrapper {
    margin: 12px 0 0 0;
    padding: 0 0 20px 0;
    border-bottom: solid 1px #e6e6e6;
}

.proModeList_wrapper .ulTitle_wrapper h4 {
    float: left;
    margin-right: 12px;
}

.proModeList_wrapper .ulTitle_wrapper .atention {
    margin: 0;
    color: #777f80;
}

@media screen and (min-width: 769px) {
    .limit_wrapper p span {
        display: block;
    }
}

/* PC only END */
@media screen and (max-width: 1229px) {
    .limit_wrapper p span {
        margin: 0 0 0 8px;
    }
}

/* SP only END */
.range_group {
    margin: 20px auto;
}

.range_group:after{
    content:"";
    display: block;
    clear: both;
}

.range {
    float: left;
    display: -ms-flex;
    display: -webkit-flex;
    display: -moz-flex;
    display: -o-flex;
    display: flex;
    flex-direction: -ms-row-reverse;
    flex-direction: -webkit-row-reverse;
    flex-direction: -moz-row-reverse;
    flex-direction: -o-row-reverse;
    flex-direction: row-reverse;
    justify-content: -ms-right;
    justify-content: -webkit-right;
    justify-content: -moz-right;
    justify-content: -o-right;
    justify-content: left;
}

.range input[type='radio'] {
    display: none;
}

.range input[type='radio'] {
    display: none;
}

.range label {
    position: relative;
    color: #bbb;
    cursor: pointer;
    font-size: 30px;
}

.range label:hover,
.range label:hover ~ label,
.range input[type='radio']:checked ~ label {
    color: #efe554;
}

@media screen and (min-width: 769px) {
    .range_user {
        float: left;
    }
}

.range_group .range_user .user-image .a_button_wrapper_sng {
    float: left;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    margin-right: 10px;
}

@media screen and (max-width: 768px) {
    .range_group .range_user .user-image {
        margin-top: -6px;
    }
}

.range_group .range_user h4 {
    line-height: 2.0rem;
    font-size: 16px;
}

@media screen and (min-width: 769px) {
    .range_group .range_user h4 {
        min-width: 350px;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .range_group .range_user h4 {
        text-align: center;
    }
}

/* SP only END */
.ready_wrapper, .end_wrapper {
    padding: 20px;
    background-color: #d6d6d6;
    text-align: center;
}

.ready_wrapper h3, .end_wrapper h3 {
    font-size: 3.0rem;
}

.ready_wrapper p:first-of-type, .end_wrapper p:first-of-type {
    margin-bottom: 0;
}

.ready_wrapper p span, .end_wrapper p span {
    margin: 0 4px;
    font-size: 2.0rem;
    color: #dd4b39;
}

.right_two_button {
    margin: 0 0 0 15px;
    width: 160px;
}

@media screen and (min-width: 769px) {
    .right_two_button {
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        justify-content: flex-end;
        float: right;
        margin: 6px 15px 0 0;
        width: 160px;
    }
}

/* PC only END */
.right_two_button div button {
    float: left;
    margin: 0 24px 0 0;
}

.right_two_button div a {
    float: left;
    margin: 0 24px 0 0;
}

.right_two_button div:last-of-type a {
    margin: 0;
}

.s_point {
    margin: 0 15px 0 15px;
    padding: 12px 0;
}

@media screen and (min-width: 769px) {
    .s_point {
        border-top: solid 1px #d2d6de;
    }
}

/* PC only END */
.learning_page .score_wrapper {
    display: -ms-flexbox;
    display: flex;
}

.learning_page .score_wrapper .score_parts p {
    margin: 0;
    font-size: 2.5rem;
}

.learning_page .score_wrapper .score_parts p span {
    display: inline-block;
    position: relative;
    top: -3px;
    padding: 4px 8px;
    margin: 0 8px 0 0;
    font-size: 1.2rem;
    border: solid 1px;
    border-radius: 20px;
    color: #3c8dbc;
}

.s_point .icon_wrapper {
    margin-top: 7px;
}

.end_wrapper ul {
    padding: 0;
}

.form-group .a_button_wrapper {
    margin-top: 20px;
}

.score_list div:first-child .img_wrapper {
    position: relative;
    float: none;
}

.score_list .img_wrapper span {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 80px;
}

.score_list dl:last-child {
    margin-bottom: 0;
}

.score_list dt {
    margin: 11px 8px 0 0;
}

.score_list dl div, .score_list dt, .score_list dd {
    float: left;
}

.score_list .score_area {
    width: 100%;
}

.score_list dl div {
    margin: 0 12px 0 0;
}

.score_list dl dd span {
    font-size: 2.5rem;
}

@media screen and (max-width: 768px) {
    .score_list .score_section {
        width: 100%;
    }
}

/* SP only END */
.score_list .score_wrapper {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 100%;
    text-align: center;
}

.score_list .score_wrapper img {
    width: 60px;
    margin: 0 12px 0 0;
}

.score_list .score_wrapper p:first-of-type {
    margin: 0;
    font-weight: 700;
}

.score_list .score_wrapper .score_inner {
    font-size: 2.0rem;
}

.score_list .score_wrapper p span {
    font-size: 4.0rem;
    padding: 0 2px;
}

.ans_list ul {
    padding: 0;
}

.ans_list ul li {
    display: -ms-flexbox;
    display: flex;
    margin: 0 0 20px 0;
    padding: 12px;
    border: solid 1px #d2d6de;
    border-radius: 4px;
}

@media screen and (max-width: 768px) {
    .ans_list ul li {
        display: inherit;
    }
}

/* SP only END */
.ans_list .user_wrapper {
    min-width: 200px;
}

@media screen and (min-width: 769px) {
    .ans_list .user_wrapper {
        border-right: dashed 1px #d2d6de;
    }
}

/* PC only END */
.ans_list .user_wrapper p span {
    display: block;
    font-size: 12px;
    color: #777f80;
}

.ans_list .ans_box {
    margin: 10px 20px 0 20px;
}

@media screen and (max-width: 768px) {
    .ans_list .ans_box {
        margin: 12px 0 0 0;
    }
}

/* SP only END */
@media screen and (min-width: 1000px) {
    .setting_wrapper dl dt {
        min-width: 170px;
        margin: 0 0 60px 0;
    }
}

/* PC only END */
@media screen and (max-width: 969px) {
    .setting_wrapper dl dt {
        width: 100%;
    }
}

/* SP only END */
.setting_wrapper .makeAnswer_wrapper dl dt {
    min-width: 120px;
    margin-top: 20px;
}

@media screen and (max-width: 1191px) {
    .setting_wrapper .makeAnswer_wrapper dl dt {
        margin: 20px 0 0 0;
    }
}

.setting_wrapper .makeAnswer_wrapper dl dt:last-of-type {
    margin-top: 20px;
}

@media screen and (min-width: 1000px) {
    .setting_wrapper dl dt.noHeight {
        margin: 0 0 32px 0;
    }
}

/* PC only END */
.setting_wrapper dl dt:last-of-type {
    margin: 0;
}

.makeQuestion_page .setting_wrapper dl dt {
    margin: 0 0 20px 0;
}

.setting_wrapper h4 {
    font-size: 2.5rem;
}

.setting_wrapper dl .release_dt {
    /* margin-bottom: 30px; */
}

/*section.admin_page {*/
/*    max-width: 900px;*/
/*}*/

.setting_wrapper dl dt, .setting_wrapper dl dd {
    float: left;
}

@media screen and (max-width: 767px) {
    .setting_wrapper dl dt {
        width: 100%;
        margin: 0 0 4px 0;
    }
}

/* SP only END */
@media screen and (max-width: 999px) {
    .setting_wrapper dl dd {
        width: 100%;
    }
}

/* SP only END */
.setting_wrapper .makeAnswer_wrapper dl dd {
    width: 84%;
    margin: 20px 0;
}

@media screen and (max-width: 1191px) {
    .setting_wrapper .makeAnswer_wrapper dl dd {
        width: 100%;
    }
}

/* SP only END */
.setting_wrapper .makeAnswer_wrapper dl dd .imgInput {
    margin: 0;
}

.setting_wrapper .makeAnswer_wrapper dl dd textarea {
    width: 100%;
}

.setting_wrapper dl dd p {
    margin-top: 4px;
    color: #777f80;
    font-size: 1.2rem;
    clear: both;
}

.setting_wrapper .r_radio {
    float: left;
    margin: 0 24px 0 0;
}

.setting_wrapper ul {
    padding: 0;
}

.setting_wrapper ul li .episode_wrapper select {
    margin: 0 0 20px 0;
    height: 30px;
}

.r_radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.r_radio input[type="radio"] + .r_label:before {
    content: "";
    background: #f4f4f4;
    border-radius: 100%;
    border: 1px solid #b4b4b4;
    display: inline-block;
    width: 1.4em;
    height: 1.4em;
    position: relative;
    top: -0.2em;
    margin: 4px 8px 0 0;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
}

.r_radio input[type="radio"]:checked + .r_label:before {
    background-color: #3197ee;
    box-shadow: inset 0 0 0 4px #f4f4f4;
}

.r_radio input[type="radio"]:focus + .r_label:before {
    outline: none;
    border-color: #3197ee;
}

.r_radio input[type="radio"] + .r_label:empty:before {
    margin-right: 0;
}

.setting_wrapper input[type="text"] {
    height: 30px;
}

@media screen and (min-width: 807px) {
    .setting_wrapper input[type="text"] {
        max-width: 500px;
        min-width: 500px;
    }

    .setting_wrapper textarea {
        min-width: 500px;
    }
}

/* PC only END */
@media screen and (max-width: 808px) {
    .setting_wrapper input[type="text"] {
        width: 100%;
    }

    .setting_wrapper textarea {
        width: 100%;
    }
}

/* SP only END */
.setting_wrapper input[type="text"], .setting_wrapper textarea {
    padding: 0 8px;
}

.setting_wrapper form p {
    margin-top: 4px;
    color: #777f80;
    font-size: 1.2rem;
}

.makeQuestion_page .setting_wrapper form p {
    color: #2b546a;
    font-size: 14px;
}

.makeQuestion_page .setting_wrapper form p span,
.makeTest_page .examQ_wrapper ul li span {
    margin: 0 0 0 8px;
    color: #777f80;
    font-size: 1.2rem;
}

.imgInput p {
    font-size: 1.2rem;
    color: #777f80;
}

.answerInput_parts {
    position: relative;
}

.imgInput .fileInputBox .inputArea {
    margin-bottom: 0;
    vertical-align: bottom;
    background-color: #fff;
}

.imgInput .fileInputBox .fileListArea ul li {
    margin: 12px 0;
}

/* .makeAnswer_inner .imgInput, .answerInput_parts .imgInput{
max-width: 400px;
} */
.makeAnswer_inner ul li textarea {
    width: 100%;
}

.makeAnswer_inner .imgInput img, .answerInput_parts .imgInput img {
    width: 100%;
}

.answerInput_form .answerInput_parts img {
    max-width: 500px;
    margin: 0 0 20px 0;
}

.makeAnswer_inner .add_button {
    display: inline-block;
    margin: 6px 0 0 12px;
}

.makeQuestion_page .setting_wrapper form .inputFile_wrapper {
    margin: 24px 0;
}

.hidden-xs img {
    width: 200px;
}

.setting_wrapper select {
    height: 30px;
}

@media screen and (min-width: 782px) {
    .setting_wrapper select {
        min-width: 500px;
    }
}

/* PC only END */
.setting_wrapper select.short_select {
    min-width: 200px;
    margin: 0 8px 0 0;
}

@media screen and (max-width: 781px) {
    .setting_wrapper select {
        width: 100%;
    }

    .setting_wrapper select.short_select {
        width: 100%;
    }
}

/* SP only END */
.memberEdit_wrapper .memberEdit_inner {
    padding: 0;
}

.memberEdit_wrapper .memberEdit_inner li {
    border: solid 1px #d2d6de;
    border-radius: 4px;
    padding: 12px;
    margin: 0 0 20px 0;
}

.memberEdit_inner img.user-image {
    /* float: left;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: -2px; */
}

@media screen and (min-width: 1025px) {
    .memberEdit_inner .user_wrapper {
        float: left;
        min-width: 72%;
        padding: 0 20px 0 0;
        border-right: dashed 1px #d2d6de;
    }
}

/* PC only END */
.memberEdit_inner .user_wrapper .name_wrapper {
    float: left;
    font-size: 1.7rem;
}

.memberEdit_inner .user_wrapper p span {
    display: block;
    font-size: 12px;
    color: #777f80;
}

.a_button_wrapper_vertical {
    text-align: center;
}

@media screen and (min-width: 769px) {
    .a_button_wrapper_vertical {
        /* width: 200px; */
        width: 26%;
        float: right;
    }
}

/* PC only END */
.a_button_wrapper_vertical button {
    margin-bottom: 12px;
}

.a_button_wrapper_vertical button:last-of-type {
    margin: 0;
}

.a_button_wrapper_vertical span {
    font-size: 1.2rem;
}

.progress_wrapper {
    margin: 20px 0 0 0;
}

.progress_wrapper p {
    float: left;
    margin: 0 12px 0 0;
}

.choiceParts .progress_wrapper dl dt {
    float: left;
    min-width: 150px;
}

.choiceParts .progress_wrapper dl dt p span {
    /* display: inline-block; */
    margin: 0 12px 0 0;
    background-color: transparent;
}

.bd-teal {
    background-color: #fff;
    color: #57a5a5;
    border: solid 1px #57a5a5;
}

.bd-teal:hover {
    background-color: #d4dedb;
    color: #57a5a5;
    border: solid 1px #57a5a5;
}

.bd-red {
    background-color: #fff;
    color: #e06b5d;
    border: solid 1px #e06b5d;
}

.bd-red:hover {
    background-color: #dababa;
    color: #e06b5d;
    border: solid 1px #e06b5d;
}

@media screen and (max-width: 768px) and (min-width: 321px) {
    .test_page h2.page-header {
        width: 240px;
    }
}

/* SP only END */
@media screen and (max-width: 414px) {
    .test_page h2.page-header {
        width: 260px;
    }

    .qaStatus_wrapper {
        /* margin-bottom: -40px; */
    }
}

/* SP only END */
@media screen and (max-width: 320px) {
    .test_page h2.page-header {
        width: 100%;
    }

    .qaStatus_wrapper {
        margin-bottom: 0;
    }
}

/* SP only END */
.endConf_page .timer_wrapper, .qaStatus_wrapper .timer_wrapper {
    margin-bottom: 12px;
}

@media screen and (max-width: 768px) {
    .timer_wrapper {
        margin: 12px 0;
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    .endConf_page ul.q_progress {
        text-align: left;
    }
}

/* SP only END */
.admin_page .page-header01 {
    max-width: 100%;
}

@media screen and (min-width: 769px) {
    .product_wrapper .product_inner {
        float: left;
        margin: 0 20px 0 0;
        width: 120px;
    }
}

@media screen and (max-width: 768px) {
    .product_wrapper .product_inner {
        float: left;
        width: 130px;
        margin: 0 12px 20px 0;
    }

    .product_wrapper .product_inner:nth-of-type(2n) {
        margin-right: 0;
    }
}

/* SP only END */
.product_wrapper .product_inner img {
    width: auto;
    max-height: 90px;
}

@media screen and (max-width: 768px) {
    .product_wrapper .product_inner img {
        width: 100%;
        max-height: inherit;
    }
}

/* SP only END */
.product_wrapper .product_inner a:hover {
    opacity: 0.7;
}

.imgInput {
    margin: 20px 0;
}

.imgInput input {
    margin: 8px 0;
}

.break_line {
    margin-top: 20px;
    padding-top: 20px;
    border-top: solid 1px #e6e6e6;
}

.makeAnswer_inner {
    position: relative;
}

.makeAnswer_inner dl {
    position: relative;
    margin-top: 20px;
    padding: 20px;
    background-color: #e6e6e6;
}

.makeAnswer_inner dl.accordion_item {
    padding: 0;
    border: solid 1px #e6e5e5;
    border-radius: 3px;
}

.makeAnswer_inner dl.accordion_item .accordion_head {
    padding: 20px;
    font-size: 2rem;
    background: #f3f3f3;
    position: relative;
}

.makeAnswer_inner dl.accordion_item .accordion_head:after {
    content: "\f106";
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    right: 20px;
    top: 50%;
    margin-top: -0.5em;
}

.makeAnswer_inner dl.accordion_item .accordion_head.collapsed:after {
    content: "\f107";
}

.makeAnswer_inner dl.accordion_item .accordion_content {
    padding: 20px;
}

.makeAnswer_inner dl.accordion_item .accordion_content.in {
    height: auto !important;
}

.makeAnswer_inner dl dt p:first-child {
    margin-bottom: 0;
}

.makeAnswer_inner dl dt .qTitle {
    font-size: 2.0rem;
}

.makeAnswer_inner dl dd input[type="text"] {
    margin: 0 0 12px 0;
    width: 80%;
    height: 40px;
}

.makeAnswer_inner dl dd .a_button_wrapper_sng {
    width: 100%;
}

.makeAnswer_inner dl dd .a_button_wrapper_sng .entryBtn {
    display: inline-block;
    margin: 0;
}

.makeAnswer_inner .del {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 20px;
    border: none;
    background-color: #dd4b39;
    color: #fff;
}

.makeAnswer_inner .del:hover {
    background-color: #c77e7e;
}

.makeAnswer_inner .add, .addTsk_btn button, .add_ansBtn, .pluralBtn {
    display: block;
    margin: 0 auto;
    text-align: center;
    border: solid 1px #57a5a5;
    background-color: #fff;
    color: #57a5a5;
}

.makeAnswer_inner .add:hover {
    background-color: #d4dedb;
}

.addButton_wrapper {
    text-align: center;
}

.commentBtn-a {
    position: relative;
}

.commentBtn {
    position: fixed;
    right: 20px;
    bottom: 20px;
    border: none;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #3c8dbc;
    z-index: 830;
}

.commentBtn:hover {
    background-color: #3679a0;
}

.comment_wrapper i {
    font-size: 2.5rem;
    color: #fff;
}

.comment_wrapper i:after {
    display: block;
    content: "お知らせ作成";
    margin-top: 4px;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.modal-open .modal {
    padding-right: 0 !important;
}

.commentBtn_clicked {
    margin-right: 17px;
}

/* 2019.07.09 追加 */
.error404_wrapper {
    margin-bottom: 20px;
    text-align: center;
}

.error404_page .a_button_wrapper {
    margin: 20px auto;
}

.error404_page i {
    margin-bottom: 12px;
    font-size: 2.0rem;
}

.error404_page h1 {
    font-size: 4.0rem;
}

.error404_page .a_button_wrapper button {
    margin-top: 0;
}

/* メンバー追加 */
.addMember_wrapper {
    margin-bottom: 20px;
}

.addMember_list {
    overflow: scroll;
    margin: 20px auto;
    padding: 12px;
    height: 200px;
    border: 1px solid #d1d6de;
}

.addMember_list h3 {
    margin-top: 0;
}

.addMember_list form ul {
    padding: 0;
}

.addMember_list form ul li {
    padding: 8px 0;
    margin: 8px 0;
    border-bottom: dashed 1px #d1d6de;
}

.addMember_list form ul li label {
    width: 80%;
    margin: 0 0 0 12px;
}

.addMember_list form ul li label:hover {
    color: #d1d6de;
    cursor: pointer;
}

.sortable_wrapper {
    padding: 12px;
    background-color: #d1d6de;
}

.sortable_wrapper li {
    /* display:-ms-flexbox;
  display: flex;
  justify-content: space-between;
  align-items: center; */
    position: relative;
    padding: 8px;
    margin: 16px 0;
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.sortable_wrapper li:hover {
    cursor: pointer;
}

.sortable_wrapper li:after {
    position: absolute;
    top: 11px;
    right: 12px;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f07d";
}

.sortable_wrapper li .editBtn_wrapper {
    margin: 0 20px 0 0;
    float: right;
}

.sortable_wrapper li .editBtn_wrapper a {
    margin: 0 8px 0 0;
    text-decoration: underline;
}

.setting_wrapper .sortable_wrapper li .editBtn_wrapper .editBtn {
    border: none;
    background-color: transparent;
    text-decoration: underline;
    color: #3c8dbc;
}

.setting_wrapper .sortable_wrapper li .editBtn_wrapper .editBtn:hover {
    color: #72afd2;
}

.addClassify_wrapper {
    margin: 20px 0;
    padding: 12px 0;
    border-top: dashed 1px #d1d6de;
}

.setting_wrapper .addClassify_wrapper input {
    height: 34px;
    min-width: inherit;
    vertical-align: middle;
}

@media screen and (max-width: 768px) {
    .setting_wrapper .addClassify_wrapper input[type="submit"] {
        margin-top: 8px;
    }
}

/* SP only END */
/* .setting_wrapper .addClassify_wrapper button{
margin-top: -4px;
} */
.staffAdd_modal:after, .staffAdd_modal form:after {
    content: "";
    display: block;
    height: 0;
    width: 0;
    clear: both;
}

.staffAdd_modal .num_wrapper {
    margin: 0 0px 8px 0;
}

@media screen and (min-width: 769px) {
    .staffAdd_modal .num_wrapper {
        float: left;
        margin: 0 8px 8px 0;
    }

    .staffAdd_modal .nameSearch_wrapper {
        float: left;
    }
}

/* PC only END */
.staffAdd_modal .num_wrapper select {
    height: 34px;
    border-radius: 0;
}

@media screen and (max-width: 768px) {
    .staffAdd_modal .num_wrapper select {
        width: 100%;
    }
}

/* SP only END */
.staffAdd_modal .num_wrapper p, .staffAdd_modal .nameSearch_wrapper p {
    float: left;
    margin-top: 8px;
}

@media screen and (max-width: 768px) {
    .staffAdd_modal .num_wrapper p, .staffAdd_modal .nameSearch_wrapper p {
        width: 100%;
        margin-bottom: 0;
    }
}

/* SP only END */
.staffAdd_modal .nameSearch_wrapper .nameSearch_input {
    float: left;
    width: 200px;
    /* padding: 15px 12px; */
    border-radius: 4px;
    border-color: #a6a6a6;
}

@media screen and (max-width: 768px) {
    .staffAdd_modal .nameSearch_wrapper .nameSearch_input {
        float: inherit;
        width: 100%;
    }
}

/* SP only END */
.nameSearch_wrapper .input-group-btn:last-child > .btn {
    border-radius: 3px;
    background-color: #d9e0e7;
}

@media screen and (max-width: 768px) {
    .nameSearch_wrapper .input-group-btn:last-child > .btn {
        width: 100%;
        margin-top: 12px;
    }
}

/* SP only END */
@media screen and (min-width: 769px) {
    .nameSearch_wrapper .input-group-btn:last-child > .btn {
        margin: 0 0 0 20px;
    }
}

/* PC only END */
.nameSearch_wrapper .input-group-btn:last-child > .btn i {
    margin: 0 0 0 4px;
}

.qImg_wrapper img {
    max-width: 600px;
}

@media screen and (max-width: 768px) {
    .qImg_wrapper img, .q_ol li img {
        width: 100%;
    }
}

.q_ol li img {
    display: block;
    margin: 16px 0;
    max-width: 600px;
}

.endNotice_wrapper, .lFinish_inner {
    margin: 0 0 20px 0;
    padding: 32px 0;
    text-align: center;
    background-color: #C8DBC5;
}

.endNotice_wrapper .endNotice_inner {
    display: -ms-flexbox;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 769px) {
    .lFinish_inner .lFinish_parts {
        display: -ms-flexbox;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}

/* PC only END */
.lFinish_inner .lFinish_parts {
    margin-bottom: 12px;
}

.endNotice_wrapper img {
    max-width: 200px;
    margin: 0 12px 0 0;
}

@media screen and (max-width: 768px) {
    .endNotice_wrapper .endNotice_inner, .lFinish_inner .lFinish_parts {
        padding: 12px 12px 12px 0;;
    }

    .endNotice_wrapper img {
        max-width: 180px;
    }
}

/* SP only END */
.lFinish_inner img {
    max-width: 300px;
}

.endNotice_wrapper h4, .lFinish_inner h4 {
    font-size: 4.0rem;
    color: #4d7749;
}

@media screen and (max-width: 768px) {
    .endNotice_wrapper h4, .lFinish_inner h4 {
        font-size: 3.0rem;
    }
}

/* SP only END */
.addComment_wrapper select {
    height: 30px;
    margin-bottom: 12px;
}

.addComment_wrapper select, .addComment_wrapper textarea {
    width: 100%;
}

@media screen and (min-width: 769px) {
    .iconSetting_wrapper {
        display: -ms-flexbox;
        display: flex;
    }

    .iconSetting_wrapper dl {
        margin: 0 0 0 20px;
    }
}

.iconSetting_inner {
    width: 300px;
    padding: 20px;
    background-color: #ececec;
    text-align: center;
}

.iconSetting_inner .settingIcon {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 0 auto 20px auto;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
}

.iconSetting_inner .settingIcon img {
    width: 100%;
}

.selectGroup label {
    margin: 0 0 8px 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
}

.selectGroup label img {
    width: 100%;
    pointer-events: none;
}

.selectGroup input[type="radio"] {
    display: none;
}

.selectGroup input[type="radio"]:checked + label img {
    padding: 2px;
    border-radius: 50%;
    background: #3c8dbc;
}

.iconSetting_inner button.iconSettingBtn {
    display: block;
    border: none;
    background-color: transparent;
    text-decoration: underline;
}

.iconSetting_wrapper h3 {
    margin-top: 0;
}

.iconSetting_wrapper dd {
    max-width: 300px;
}

.iconSetting_wrapper input[type="submit"] {
    margin: 20px auto 0 auto;
    width: 100px;
}

@media screen and (max-width: 768px) {
    .iconSetting_wrapper dl {
        margin: 20px 0;
    }

    .iconSetting_wrapper dl dt {
        float: none;
        margin: 0;
        padding: 8px;
        background-color: #ececec;
    }

    .iconSetting_wrapper dl dd {
        padding: 8px;
    }
}

.lFinish_inner {
}

.lFinish_inner .addBtn_wrapper {
    display: -ms-flexbox;
    display: flex;
    width: 230px;
    margin: 20px auto 0 auto;
}

.lFinish_inner .addBtn_wrapper .add_button:first-child button {
    margin: 0 24px 0 0;
}

@media screen and (min-width: 781px) {
    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .lStart_btn, .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .tStart_btn {
        position: relative;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        text-align: center;
    }
}

/* PC only END */
@media screen and (max-width: 780px) {
    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .lStart_btn, .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .tStart_btn {
        margin: 0 0 8px 0;
    }
}

/* SP only END */
.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a {
    color: #fff;
}

@media screen and (max-width: 780px) {
    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a {
        width: 100%;
        display: block;
        padding: 8px;
        margin-bottom: 8px;
        border-radius: 4px;
    }

    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a:last-of-type {
        margin-bottom: 0;
    }
}

/* SP only END */
@media screen and (min-width: 781px) {
    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a {
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
    }
}

/* PC only END */
.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.lStart_btn a {
    background-color: #e2ad18;
    border: solid 1px #d4a862;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.lStart_btn a:hover {
    background-color: #d4a862;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.tStart_btn a {
    background-color: #73b18f;
    border: solid 1px #7ba08b;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.tStart_btn a:hover {
    background-color: #7ba08b;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.lStart_btn .a_private, .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.tStart_btn .a_private {
    background-color: #7d7d7d;
    border: solid 1px #b5b5b5;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.lStart_btn .a_private:hover, .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p.tStart_btn .a_private:hover {
    background-color: #a79e9e !important;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .impossible_btn p a,
.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .clear_btn p a,
.tasklistPage_wrapper .proModeList_wrapper .clear_cover .detail_wrapper p a {
    background-color: #9e9e9e;
    border: solid 1px #9e9e9e;
    color: #b7b7b7;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a.a_private {
    color: #fff;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .impossible_btn p a {
    /*background: none!important;
  background: #d4d4d4!important;
  border: solid 1px #d4d4d4;
  color: #efefef;*/
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .impossible_btn p a:hover {
    /*background-color: #b1b1b1;*/
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper .noData_btn p a {
    background: none !important;
    border: solid 1px #cacaca;
    color: #d4d4d4;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a[href=""]:hover,
.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p a[href^="javascript:"]:hover {
    background-color: #9e9e9e;
    cursor: default;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p span.p_inner {
    flex: 1;
    /* position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%); */
}

@media screen and (max-width: 780px) {
    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p span.p_inner br {
        display: none;
    }
}

/* SP only END */
.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p span.p_title, .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p span.p_start {
    font-size: 1.6rem;
}

.tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p span.p_private {
    font-size: 1.5rem;
}

@media screen and (max-width: 780px) {
    .tasklistPage_wrapper .proModeList_wrapper .detail_wrapper p .p_inner span:last-of-type {
        float: right;
    }
}

/* SP only END */
.tasklistPage_wrapper .tab-content .infoBox_area .infoBox_inner .info_parts .info_list .userImage_wrapper {
    align-self: flex-start;
}

.proModeList_wrapper ul li .limit_wrapper {
    display: block;
    color: #e47061;
    /* margin-bottom: 8px; */
    text-align: center;
}

@media screen and (max-width: 780px) {
    .proModeList_wrapper ul li .limit_wrapper {
        text-align: right;
    }
}

/* SP only END */
.proModeList_wrapper ul .clear_cover .limit_wrapper {
    color: #a77973;
}

@media screen and (min-width: 1130px) {
    .proModeList_wrapper ul li,
    .proModeList_wrapper ul li .limit_wrapper span.year {
        display: block;
    }
}

/* PC only END */
.textDeadline span {
    margin: 0 0 0 4px;
}

.main-header .logo .logo-lg img {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .main-header .logo .logo-lg img {
        max-width: 200px;
    }
}

/* SP only END */
.pGrade_wrapper {
    margin: 0 24px 0 0;
    text-align: center;
}

.pGrade_wrapper img {
    width: 30px;
    margin: 0 auto;
}

.pGrade_wrapper .num_wrapper {
    display: block;
}

@media screen and (max-width: 1129px) {
    .pGrade_wrapper {
        position: absolute;
        top: 20px;
        right: 0;
        margin: 0 12px 0 0;
    }

    .pGrade_wrapper img {
        margin: -10px 8px 0 0;
    }

    .pGrade_wrapper .num_wrapper {
        display: inline-block;
    }

    .periodModeList_wrapper ul li .pGrade_wrapper {
        top: 54px;
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    .pGrade_wrapper {
        right: 12px;
        margin-right: 0;
    }
}

/* SP only END */
.pGrade_wrapper .num_wrapper span {
    font-size: 2.0rem;
}

.testBtn {
    color: #fff;
    background-color: #73b18f;
    border: solid 1px #7ba08b;
}

.testBtn:hover {
    background-color: #7ba08b !important;
}

.answerInput_form .cBox {
    float: left;
}

.answerInput_form .cBox .ans_lbl {
    padding-top: 16px;
}

.answer_wrapper h5:first-child {
    float: left;
    margin: 0 12px 0 0;
}

.answer_wrapper .r_radio {
    float: left;
    margin: 0 24px 0 0;
}

.partsForQ {
    min-height: 155px;
    margin-top: 16px;
    padding: 20px;
    text-align: center;
    background-color: #e6e6e6;
}

.partsForQ input {
    margin: 0 auto;
    width: 100%;
}

.partsForQ p {
    font-size: 1.2rem;
    margin-top: 12px;
}

.partsForQ a {
    display: block;
    margin: 0 0 4px 0;
}

.partsForQ a:first-child {
    margin-top: 4px;
}

.partsForQ textarea {
    width: 100%;
}

.addTsk_btn button {
    margin-top: 12px;
    text-align: center;
}

.makeTask_page .a_button_wrapper_sng {
    margin-top: 0;
}

.qList_wrapper {
    background-color: transparent;
}

.qList_wrapper ul {
    padding: 0;
}

.qList_wrapper ul li {
    position: relative;
    margin-top: 20px;
    padding: 20px 32px 40px 20px;
    background-color: #e6e6e6;
    border-radius: 0;
    box-shadow: none;
}

.qList_wrapper ul li p {
    width: 100%;
    padding: 12px;
    background-color: #fff;
}

.qList_wrapper ul li p.video_wrapper {
    margin: 0 0 10px;
    max-width: inherit;
}

.qList_wrapper ul li .regiTitle {
    font-size: 1.8rem;
}

.qList_wrapper ul li img {
    width: 300px;
}

.qList_wrapper li:after {
    top: auto;
    bottom: 11px;
}

/* .qList_wrapper li a{
position: absolute;
right: 32px;
bottom: 1px;
background-color: #2b536a;
padding: 8px;
color: #fff;
}
.qList_wrapper li a:hover{
background-color: #478A8A;
}
.qList_wrapper li .editBtn{
right: 84px;
background-color: #57a5a5;
} */
.qList_wrapper li .editBtn {
    position: absolute;
    bottom: -9px;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
}

.qList_wrapper li .deleteBtn {
    position: absolute;
    right: 32px;
    bottom: 1px;
    background-color: #2b536a;
    padding: 8px;
    color: #fff;
    background-color: #dd4b39;
}

.qList_wrapper li .deleteBtn:hover {
    background-color: #c77e7e;
}

.qList_wrapper ul li .delete, .answerInput_parts .delete {
    position: absolute;
    right: 32px;
    bottom: 0;
    padding: 4px 20px;
    border: none;
    background-color: #dd4b39;
    color: #fff;
}

.answerInput_parts .delete {
    right: 0;
}

.coachingTitle_wrapper input {
    width: 100%;
    height: 40px;
}

.coachingTitle_wrapper .p_wrapper {
    margin: 12px 0;
}

.coachingTitle_wrapper .p_wrapper p {
    margin: 0;
}

.coachingTitle_wrapper .p_wrapper.exa {
    font-size: 1.3rem;
    color: #797979;
}

.makeAnswer_wrapper .answer_wrapper h4 {
    float: left;
    margin-top: 0;
}

.answerInput_parts {
    padding: 12px;
    padding-left: 60px;
    padding-bottom: 25px;
    margin-bottom: 20px;
    border: solid 1px #e6e6e6;
    box-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.05);
}

.answerInput_parts .editBtn_wrapper {
    text-align: center;
}

.answerInput_parts textarea {
    margin: 0 0 12px;
    border-color: #d6d6d6;
    max-width: 100%;
    min-width: 100%;
    width: 100%;
    min-height: 1em;
}

.answerInput_parts .cBox {
    position: absolute;
    left: 0;
    top: 8px;
}

.answerInput_parts .imgInput {
    margin: 0 0 0 70px;
}

.answerType {
    margin-bottom: 20px;
    padding-bottom: 8px;
    border-bottom: solid 1px #e6e6e6;
}

.entryBtn {
    display: block;
    margin: 12px auto 0 auto;
}

.setting_wrapper dl dd .attention {
    display: block;
    color: #768080;
    font-size: 1.2rem;
}

.datepicker_wrapper span {
    padding: 0 8px;
}

.datepicker_wrapper input[type="text"] {
    min-width: 200px;
}

@media all and (-ms-high-contrast: none) {
    .datepicker_wrapper input[type="text"] {
        width: 200px;
    }
}

#firework {
    display: none;
}

#fireworks-template {
    display: none;
}

#fireContainer {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 706;
}

.firework {
    /* containing box which flies out first */
    position: absolute;
    left: 0px;
    top: 0px;
    font-size: 1px;
    width: 4px;
    height: 4px;
    border: 1px solid #333;
    background: #666;
}

.fireworkParticle {
    /* elements that explode from the container */
    position: absolute;
    font-size: 1px;
    width: 10px;
    height: 10px;
    overflow: hidden;
}

.fireworkParticle img {
    display: block;
    width: 100px;
}

.sidebar-menu li a {
    color: #295c72;
}

@media screen and (min-width: 1124px) {
    .status_wrapper02 {
        float: right;
        margin: 0 0 0 20px;
    }
}

/* PC only END */
.taskInfo_area .status_wrapper02 {
    float: inherit;
}

@media screen and (min-width: 769px) {
    .status_wrapper02 .status_inner {
        margin: 0 0 12px 0;
    }
}

/* PC only END */
.status_wrapper02 .status_inner .status_parts {
    display: -ms-flexbox;
    display: flex;
    float: left;
}

@media screen and (min-width: 768px) {
    .status_wrapper02 .status_inner .status_parts {
        margin: 0 20px 0 0;
    }

    .status_wrapper02 .status_inner .status_parts:first-child {
        border-right: solid 1px #ddd;
        padding: 0 20px 0 0;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .status_wrapper02 .status_inner .status_parts {
        float: inherit;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
    }
}

/* SP only END */
@media screen and (max-width: 767px) {
    .taskInfo_area .status_wrapper02 .status_inner {
        padding: 12px;
        background-color: #fff;
    }

    .status_wrapper02 .status_inner .status_parts:first-child {
        margin: 0 0 8px 0;
        border-bottom: solid 1px #dde7e8;
    }
}

/* SP only END */
.status_wrapper02 .status_inner .status_parts .left div .mark {
    display: inline-block;
    padding: 2px 8px;
    width: 40px;
    font-size: 1.2rem;
    background-color: #b5cfe6;
    border-radius: 4px;
}

.status_wrapper02 .status_inner .status_parts .left div .all {
    background-color: #bec7ad;
}

.status_wrapper02 .status_inner .status_parts .left .person {
    border-bottom: dashed 1px #dde7e8;
}

.status_wrapper02 .status_inner .status_parts .left .everyone {
}

.status_wrapper02 .status_inner .status_parts div div .score {
    display: inline-block;
    font-size: 2.0rem;
}

.status_wrapper02 .status_inner .status_parts div div .score span {
    display: inline-block;
    margin: 0 0 0 4px;
    font-size: 1.2rem;
}

.status_wrapper02 .status_inner .status_parts p {
    text-align: center;
}

.status_wrapper02 .status_inner .status_parts p .b {
    font-weight: bold;
    font-size: 1.6rem;
}

.status_wrapper02 .status_inner .status_parts .break {
    font-size: 3.0rem;
    margin: 60px 18px 0 18px;
}

.status_wrapper02 .status_inner .status_parts .right {
    margin: 20px 0 0 0;
}

.status_wrapper02 .status_inner .status_parts .right div p {
    font-size: 3.0rem;
    margin: 20px 0 16px 0;
}

.status_wrapper02 .info {
    padding: 8px;
    margin: 0;
    background-color: #f3f3f3;
    border-top: solid 1px #dde7e8;
}

.status_wrapper02 .info dt, .status_wrapper02 .info dd, .status_wrapper02 .info div {
    float: left;
    font-weight: normal;
}

@media screen and (max-width: 768px) {
    .status_wrapper02 .info dd {
        float: inherit;
    }

    .status_wrapper02 .info div {
        display: none;
    }
}

/* SP only END */
.status_wrapper02 .info dt {
    margin: 0 14px 0 0;
}

.status_wrapper02 .info dd {
    font-size: 1.5rem;
}

.status_wrapper02 .info div {
    margin: 0 30px;
}

/* .question-content .question_wrapper img{
margin: 32px 0;
max-width: 500px;
} */
/* @media screen and (max-width: 768px){
.question-content .question_wrapper img{
width: 100%;
}
}/* SP only END */
button.progress-button {
    background-color: transparent;
    border: none;
}

.gacha_movie_wrapper .img_wrapper {
    max-width: 400px;
    margin: 0 auto;
}

.gacha_movie_wrapper img {
    margin-bottom: 20px;
}

.gacha_movie_wrapper img, .gacha_movie_wrapper video {
    width: 100%;
}

.gacha_com_balloon {
    position: relative;
    display: inline-block;
    margin: 0 0 1.5em 20px;
    padding: 20px 16px;
    max-width: 80%;
    width: 100%;
    color: #555;
    font-size: 14px;
    background: #FAEFC7;
    border-radius: 4px;
}

.gacha_com_balloon:before {
    content: "";
    position: absolute;
    top: 30px;
    left: -25px;
    margin-top: -15px;
    border: 15px solid transparent;
    border-right: 15px solid #FAEFC7;
}

.gacha_com_balloon p {
    margin: 0;
    padding: 0;
    color: #EA941F;
    word-break: break-all;
}

@media screen and (max-width: 768px) {
    .gacha_com_balloon {
        max-width: 70%;
    }
}

/* SP only END */
.gacha_com .userImg_wrapper, .ex_com .userImg_wrapper {
    position: relative;
    float: left;
}

.gacha_com .userImg_wrapper img, .ex_com .userImg_wrapper img {
    /* width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
  margin-top: -2px; */
}

.gacha_com .userImg_wrapper .com_app {
    position: absolute;
    display: block;
    bottom: 0;
    right: 0px;
    width: 20px;
    height: 20px;
    background-color: #EA941F;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    font-size: 1.2rem;
}

.learning_page .only {
    text-align: center;
}

.new_com_wrapper textarea {
    width: 100%;
}

.ex_com {
    position: relative;
    padding: 30px 0 0 20px;
    margin: 0 0 20px 0;
    background-color: #ecf0f5;
}

.ex_com dt {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #657e88;
    color: #fff;
    padding: 0 8px;
}

/* .infoBox_inner .info_parts li .gacha_com_balloon{
margin: 0 0 0 20px;
} */
.add_com_wrapper textarea {
    width: 330px;
    margin: 0 12px 0 0;
}

.add_com_wrapper .alert-danger:before, .add_com_wrapper .alert-danger:after {
    display: block;
    content: "";
    clear: both;
}

@media screen and (min-width: 769px) {
    .add_com_wrapper textarea {
        float: left;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .add_com_wrapper textarea {
        width: 100%;
        height: 100px;
        margin: 0 0 12px 0;
    }
}

/* SP only END */
.com_list_area ul .infoBox_inner .info_parts .add_com_wrapper {
    padding: 12px 0 30px 0;
}

.com_list_area ul .infoBox_inner .info_parts .add_com_wrapper:first-of-type {
    padding: 12px 0;
}

.add_com_wrapper .del {
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 4px 20px;
    border: none;
    background-color: #dd4b39;
    color: #fff;
    border-radius: 0;
}

@media screen and (max-width: 768px) {
    /* .add_com_wrapper button[type="submit"]{
  float: right;
  } */
}

/* SP only END */
.add_item_wrapper {
    float: right;
    margin: 0;
    padding: 0;
}

.add_item_wrapper li {
    float: left;
    margin: 0 12px 0 0;
}

@media screen and (min-width: 769px) {
    .add_item_wrapper li {
        margin: 20px 12px 0 0;
    }
}

/* PC only END */
.ulTitle_wrapper .add_button {
    float: left;
    margin: 0 12px 0 0;
}

@media screen and (max-width: 768px) {
    .ulTitle_wrapper .add_button {
        margin: 0 0 12px 0;
    }
}

/* SP only END */
.movieContainer {
    display: none;
}

@media screen and (max-width: 768px) {
    .navbar-custom-menu > .navbar-nav > li > .dropdown-menu {
        right: 0;
        width: 100%;
    }
}

/* SP only END */
.com_list_wrapper .widget-header {
    padding: 20px;
    margin-bottom: 0;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
    background-color: #009ABF;
    color: #fff;
}

.com_list_wrapper .widget-header .widget-title {
    margin: 0;
}

.com_list_wrapper .gacha_com_balloon {
    background: #ecf0f5;
}

.com_list_wrapper .gacha_com_balloon:before {
    border-right: 15px solid #ecf0f5;
}

.com_list_wrapper .gacha_com_balloon p {
    color: #2b536a;
}

.cleate_test_wrapper .coachingTitle_wrapper .p_wrapper:first-child {
    margin-top: 0;
}

.cleate_test_wrapper .coachingTitle_wrapper .p_wrapper:first-child p {
    color: #2b536a;
    font-size: 1.4rem;
}

.editButton_wrapper {
    margin: 8px 0 0 0;
}

.editButton_wrapper div {
    margin-bottom: 12px;
}

.editButton_wrapper a {
    margin: 0 12px 0 0;
    text-decoration: underline;
}

.statuslist_page .addMember_list {
    background-color: #fff;
}

.courseMenu_wrapper {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
    justify-content: flex-end;
}

@media screen and (max-width: 1129px) {
    .courseMenu_wrapper {
        justify-content: center;
    }
}

/* SP only END */
@media screen and (min-width: 781px) {
    .courseMenu_wrapper {
        min-width: 350px;
    }
}

/* PC only END */
.already-clicked {
    pointer-events: none;
    filter: brightness(0.7);
}

.two_button_wrapper {
    text-align: center;
}

@media screen and (min-width: 769px) {
    .two_button_wrapper button {
        margin: 0 24px 0 0;
    }

    .two_button_wrapper a {
        margin: 0 24px 0 0;
    }
}

/* PC only END */
.treeview > ul.treeview-menu {
    padding-left: 0 !important;
}

/*.treeview > ul.treeview-menu li:first-child{
background-color: #c2d5dc;
}
.treeview > ul.treeview-menu li:first-child a{
color: #2a5b72;
}*/
.copy_wrapper {
    margin: 12px 0 0 0;
    text-align: center;
}

.groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner {
    margin-right: 10px;
    border-bottom: 0;
    border-right: solid 1px #e6e6e6;
}

.groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner:last-child {
    margin-right: 0;
    border-right: none;
}

@media screen and (max-width: 928px) {
    .groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner {
        padding-right: 0;
        border-right: none;
        border-bottom: solid 1px #e6e6e6;
    }

    .groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner:last-child {
        margin-bottom: 0;
        border-bottom: none;
    }
}

@media screen and (min-width: 929px) {
    .status_ul .status_li .clearStatus_wrapper {
        display: -ms-flexbox;
        display: flex;
        max-width: 600px;
        min-width: 600px;
        float: right;
    }

    .groupList_page .status_ul .status_li .clearStatus_wrapper {
        max-width: 65%;
        min-width: 65%;
        float: right;
    }

    .status_ul .status_li .clearStatus_wrapper .clearStatus_inner {
        width: 50%;
    }
}

/* PC only END */
@media screen and (max-width: 1414px) {
    .groupList_page .status_ul .status_li .clearStatus_wrapper {
        max-width: inherit;
        min-width: inherit;
        width: 100%;
    }

    .groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner {
        width: 100%;
    }
}

.status_ul .status_li .clearStatus_wrapper .clearStatus_inner {
    margin: 0 0 20px 0;
    border-bottom: solid 1px #e6e6e6;
}

@media screen and (min-width: 769px) {
    /*.clearStatus_wrapper{
  display:-ms-flexbox;
  display: flex;
}
.clearStatus_wrapper .clearStatus_inner{
width: 50%;
margin: 0 20px 0 0;
padding: 0 20px 0 0;
border-right: solid 1px #e6e6e6;
border-bottom: none;
}*/
}

/* PC only END */

.clearStatus_wrapper .clearStatus_inner h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

.clearStatus_wrapper .clearStatus_inner:nth-of-type(2) {
    margin: 0;
    padding: 0;
    border-right: none;
}

@media screen and (max-width: 768px) {
    .clearStatus_wrapper .clearStatus_inner:nth-of-type(2) {
        border-bottom: none;
    }
}

/* SP only END */
.clearStatus_wrapper .clearStatus_inner .clearStatus_parts {
    position: relative;
    padding-left: 52px;
    /* padding-right: 72px; */
    min-height: 67px;
}

.groupList_page .clearStatus_wrapper .clearStatus_inner .clearStatus_parts {
    padding-right: 0;
}

.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .progress {
    float: left;
    margin: 18px 0 0 0;
    width: 100%;
}

.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .user_wrapper {
    position: absolute;
    left: 0;
    margin: 0 12px 0 0;
    width: 40px;
    text-align: center;
}

@media screen and (min-width: 769px) {
    /*.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .user_wrapper{
  float: left;
  }*/
}

/* PC only END */
.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .user_wrapper p {
    text-align: center;
    font-size: 1.2rem;
}

.clearStatus_parts img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusNum {
    position: absolute;
    right: 0;
    margin: 12px 0 0 5px;
    width: 60px;
    text-align: center;
}

.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusNum {
    font-size: 1.2rem;
    margin-top: 0;
    text-align: right;
}

/* グループ一覧 */
.status_ul .status_li .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .progress {
    margin: 12px 0 0 0;
    border: solid 1px #e0e0e0;
}

.groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .progress {
    margin: 18px 0 0 0;
}

.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusNum {
    display: inline-block;
}

.clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusDesc {
    float: right;
    font-size: 1.2rem;
    color: #777f80;
}

.groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusDesc {
    margin: 0;
}

@media screen and (max-width: 1199px) {
    .status_ul .status_li .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .progress {
        width: 100%;
        margin: 0 0 12px 0;
    }
}

/* PC only END */

.fl-r {
    float: right;
}

p.alert-danger:before, .alert-danger p:before, .alert-danger li:before, .alert-info:before {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    margin: 0 8px 0 0;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f071";
}

.alert-danger ul {
    padding: 0;
}

.alert-danger li {
    display: block;
    padding: 0;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.alert-danger li:after {
    display: none;
}

.alert-danger {
    padding-left: 0;
    margin-bottom: 0;
    background-color: transparent !important;
    color: #e06b5d !important;
    border: none;
}

.cancel_file {
    border: none;
    background-color: transparent;
}

.cancel_file:after {
    position: relative;
    top: 0;
    right: 0;
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    content: "\f00d";
}

.user-menu .userImage_wrapper {
    width: 25px;
    height: 25px;
}

.user-menu .user-header .userImage_wrapper {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    width: 90px;
    height: 90px;
    float: inherit;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .user_group_list_user .userImage_wrapper {
        float: inherit;
        margin: 0 auto;
    }
}

/* SP only END */
.alert-info {
    padding-bottom: 0;
    padding-left: 0;
    color: #295c72 !important;
    border: none;
    background-color: transparent !important;
}

.startPage_wrapper {
    position: relative;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1050;
    background: #ECF0F6;
    padding: 60px 0 0 0;
}

.startPage_wrapper .startPage_inner {
    /* position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%); */
    padding: 8px;
    text-align: center;
}

@media screen and (max-width: 768px) {
    .startPage2_wrapper .startPage_inner {
        top: inherit;
        left: inherit;
        position: inherit;
        transform: none;
        padding: 40px 8px;
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    /* .startPage_wrapper .startPage_inner p{
  display: none;
  } */
}

/* SP only END */
.startPage_wrapper .startPage_inner .img_wrapper {
    width: 300px;
    margin: 0 auto;
}

.startPage2_wrapper .startPage_inner .img_wrapper {
    max-width: 400px;
}

.startPage_wrapper .startPage_inner .img_wrapper img {
    width: 100%;
}

.startPage2_wrapper .startPage_inner textarea {
    width: 100%;
}

.startPage_wrapper .startPage_inner h1 {
    font-size: 3.0rem;
}

@media screen and (max-width: 768px) {
    .startPage_wrapper .startPage_inner h1 {
        display: none;
    }
}

/* SP only END */
.startPage_wrapper .startPage_inner h2 {
    margin: 0 0 12px 0;;
}

.startPage2_wrapper .startPage_inner h1 {
    margin: 8px 0;
}

.startPage2_wrapper form textarea {
    width: 100%;
}

@media screen and (min-width: 769px) {
    .startPage2_wrapper form textarea {
        max-width: 400px;
    }
}

/* PC only END */
.notes {
    margin-top: 4px;
    color: #777f80;
    font-size: 1.2rem;
}

@media screen and (min-width: 769px) {
    .addGroup_info {
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

/* PC only END */
@media screen and (max-width: 768px) {
    .addGroup_info a {
        margin: 8px 0 0 0;
    }
}

/* SP only END */
.addGroup_info {
    margin: 0 0 20px 0;
    padding: 20px;
    color: #fff;
    background-color: #285d72;
}

.addGroup_info .text_area h2 {
    margin-top: 0;
    font-size: 2.0rem;
}

.addGroup_info .text_area p {
    margin-bottom: 0;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p {
    margin: 18px 0 0 45px
}

.clear {
    position: relative;
    top: -3px
    display: inline-block;
    border: solid 1px;
    padding: 2px 8px;
    margin: 0 4px 0 0;
    border-radius: 12px;
    font-size: 1.2rem;
}

.periodModeList_wrapper ul li .period_wrapper {
    display: block;
    background-color: #3d8dbc;
    /*margin-bottom: 8px;*/
    margin-bottom: 0;
    text-align: center;
    padding: 8px 0;
    color: #fff;
    /*margin-top: -12px;*/
}

.periodModeList_wrapper ul .clear_cover .period_wrapper {
    background-color: #7c7e7f;
    color: #969696;
}

@media screen and (max-width: 780px) {
    .periodModeList_wrapper ul li .pml_li {
        padding: 12px;
    }
}

/* SP only END */
.box-header > .fa, .box-header > .glyphicon, .box-header > .ion, .box-header .box-title {
    line-height: 1.3;
    font-size: 20px;
!important;
}

.hint {
    float: right;
    font-size: 1.4rem;
    text-decoration: underline;
}

.hint:hover {
    text-decoration: none;
}

.treeview-menu > li.selected {
    background-color: #9bb3bf;
}

.treeview-menu > li.selected a {
    color: #295c72 !important;
}

.group-status {
    max-width: 300px;
    float: right;
}

.setting_wrapper dl dd .aHow_link {
    float: right;
    margin-right: 12px;
    text-decoration: underline;
}

.setting_wrapper dl dd .aHow_link:hover {
    text-decoration: none;
}

.alert-other {
    margin: 0 0 0 15px;
    padding-bottom: 0;
}

.skin-blue .sidebar-menu .treeview-menu > li > a .must {
    font-size: 1.3rem;
    background-color: #5b8698;
    padding: 0 4px;
    margin: 0 4px 0 0;
    border-radius: 4px;
    color: #b1c6d0 !important;
}

.learning_page .lPoint_wrapper .box {
    background-color: #c2d4dc;
}

.learning_page .lPoint_wrapper h2 {
    margin-top: 0;
    font-size: 1.8rem;
}

a.backBtn {
    background-color: #fff;
    color: #2b546a;
    width: 130px;
}

a.backBtn:hover {
    background-color: #e0e0e0;
    color: #2b546a;
}

/* 20190910追加 */
.nav-tabs li a {
    position: relative;
}

.nav-tabs li a span {
    display: none;
    position: absolute;
    opacity: 0;
    top: -60px;
    left: 94px;
    right: -100px;
    padding: 10px;
    border-radius: 2px;
    background: #295d72;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    transition: .3s;
    opacity: 1;
}

.nav-tabs li a span:after {
    position: absolute;
    top: 100%;
    left: 34px;
    height: 0;
    width: 0;
    border: 6px solid transparent;
    border-top: 6px solid #295d72;
    content: "";
}

.nav-tabs li a i:hover {
    cursor: pointer;
    opacity: 0.7;
}

@media (min-width: 768px) {
    .memberList_wrapper li .modal-dialog {
        width: 800px;
        margin: 30px auto;
    }
}

.memberList_wrapper li .user_a:hover {
    opacity: 0.7;
}

.memberList_wrapper li .clearStatus_wrapper .clearStatus_inner {
    padding: 0;
}

.memberList_wrapper li .modal-content {
    overflow: scroll;
}

/* .memberList_wrapper li .modal-content h2{
font-size: 1.4rem;
padding: 12px 0;
border-bottom: solid 1px #8098a7;
} */
/* .memberList_wrapper li .modal-content .modal-body{
height: 480px;
overflow: scroll;
} */
/* .memberList_wrapper .modalProg_wrapper li h3{
margin: 0;
font-size: 1.6rem;
} */
/* .memberList_wrapper .modalProg_wrapper li{
display:-ms-flexbox;
display: flex;
align-items: center;
justify-content: space-between;
float: inherit;
width: inherit;
padding: 0 20px 8px 20px;
margin: 8px 0;
border-bottom: solid 1px #dedede;
} */
.alreadyColor {
    color: #409ebd;
}

.notYetColor {
    color: #d85555;
}

@media screen and (min-width: 769px) {
    .all_staffStatus_wrapper .searchForm_warapper {
        /* display:-ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between; */
    }
}

/* PC only END */
.allOperation_wrapper {
    margin-top: 8px;
}

.allOperation_wrapper button {
    margin: 0 4px 0 0;
}

@media screen and (min-width: 769px) {
    .all_staffStatus_wrapper .searchForm_warapper .input-group-btn {
        float: left;
    }
}

/* PC only END */
.sortBtn_wrapper .sortBtn_inner {
    float: right;
}

.sortBtn_wrapper .sortBtn_inner p {
    float: left;
    margin: 8px 12px 0 0;
}

.admin_page .pagenation_wrapper {
    text-align: center;
}

.alert-success {
    position: fixed;
    z-index: 100;
    top: 50px;
    right: 0px;
    left: 230px;
    border: none;
    border-radius: 0;
    background-color: rgba(34, 77, 95, 0.87) !important;
    /* text-align: center; */
}

@media screen and (max-width: 767px) {
    .alert-success {
        width: 100%;
        left: 0;
        top: 100px;
    }
}

/* SP only END */
/* 20190910追加 */

/* グループ一覧の模索 */
.status_ul .status_li .clearStatus_wrapper02 {
    float: right;
    width: 52%;
}

.status_ul .status_li .clearStatus_wrapper02 .progress {
    width: 87%;
    margin: 0 12px 0 0;
    float: left;
}

.status_ul .status_li .clearStatus_wrapper02 .statusDesc {
    float: right;
    font-size: 1.2rem;
    color: #777f80;
}

.clearStatus_wrapper02 .clearStatus_inner02 {
    width: 47%;
    float: left;
    margin: 0 20px 0 0;
}

.clearStatus_wrapper02 .clearStatus_inner02 .statusNum {
    display: inline-block;
    float: left;
}

.clearStatus_wrapper02 .clearStatus_inner02:last-child {
    margin-right: 0;
}

.clearStatus_wrapper02 .clearStatus_inner02 .clearStatus_parts {

}

.clearStatus_wrapper02 .clearStatus_inner02 .clearStatus_parts .user_wrapper {
    float: left;
    margin: 0 12px 0 0;
}

.clearStatus_wrapper02 .clearStatus_inner02 .clearStatus_parts .user_wrapper .statusNum {
    float: left;
    display: inline-block;
}

.clearStatus_wrapper02 .clearStatus_inner02 .clearStatus_parts .user_wrapper .name {
    display: inline-block;
    font-size: 1.2rem;
    color: #777f80;
}

.clearStatus_wrapper02 .clearStatus_inner02 h2 {
    margin-top: 0;
    font-size: 1.4rem;
}

/* グループ一覧の模索 */

.required {
    color: #e06b5d;
}

.personInfo_wrapper .modalProg_wrapper {
    padding: 0;
}

.personInfo_wrapper h2 {
    font-size: 1.5rem;
    /* border-top: solid 1px; */
    padding: 12px 0;
    margin-top: 0;
    border-bottom: solid 1px #8098a7;
}

.personInfo_wrapper .modalProg_wrapper li {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: inherit;
    width: inherit;
    padding: 0 20px 8px 0;
    margin: 8px 0;
    border-bottom: solid 1px #dedede;
}

.personInfo_wrapper .modalProg_wrapper li .task-title {
    margin: 0;
    font-size: 1.4rem;
}

.personInfo_wrapper .modalProg_wrapper li p {
    margin: 0;
    font-size: 12px;
    color: #777f80;
}

.video_wrapper {
    max-width: 700px;
    margin: 20px auto 0 auto;
    padding-bottom: 12px;
}

.video_wrapper .video_inner {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    margin-bottom: 10px;
}

@media screen and (max-width: 768px) {
    .video_wrapper .video_inner {
        margin: 0 20px 10px;
    }
}

/* SP only END */

.video_wrapper .video_inner iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@media screen and (max-width: 1413px) {
    .groupList_page .status_ul .title_wrapper {
        float: inherit;
        max-width: 100%;
    }
}

@media screen and (max-width: 928px) {
    .groupList_page .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .user_wrapper p {
        text-align: left;
    }

    .groupList_page .clearStatus_parts img {
        display: none;
    }

    .groupList_page .clearStatus_wrapper .clearStatus_inner .clearStatus_parts {
        padding: 0;
    }

    /* .groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .progress{
  position: relative;
  top: 20px;
  } */
    .groupList_page .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusNum {
        margin: 0;
    }

    /* .groupList_page .status_ul .status_li .clearStatus_wrapper .clearStatus_inner .clearStatus_parts .statusDesc{
  margin-top: 12px;
  } */
}

/* SP only END */
section.admin_page .video_wrapper iframe {
    width: 560px;
    height: 315px;
    position: inherit !important;
}

@media screen and (max-width: 966px) {
    section.admin_page .video_wrapper iframe {
        width: 100%;
        height: 100%;
    }
}

/* SP only END */
ul.nav-stacked .taskNone {
    text-align: center;
    padding: 20px 0;
}

.btn-break {
    background-color: #636363;
    color: #fff;
}

.btn-break:hover {
    background-color: #888888;
    color: #c7c7c7;
}

.testBody section.content {
    margin: 0 auto;
}

.testBody .main-header, .testBody .content-header, .testBody .main-sidebar, .testBody .main-footer {
    display: none;
}

.testBody .content-wrapper {
    margin-left: 0;
}

.img-circle {
    border-radius: 0 !important;
}

.skin-blue .main-header .navbar .sidebar-toggle {
    font-size: 2.0rem;
}

.alert > p, .alert > ul {
    padding-left: 0;
}

footer .container {
    width: inherit;
    padding: 0;
}

.staffAdd_modal .nameSearch_wrapper p span {
    margin: 0 0 0 14px;
}

@media screen and (max-width: 768px) {
    .staffAdd_modal .num_wrapper p span,
    .staffAdd_modal .nameSearch_wrapper p span {
        display: none;
    }
}

/* SP only END */
@media screen and (max-width: 991px) {
    .groupList_page .mainTitle_wrapper .add_button {
        float: right;
    }
}

/* SP only END */
.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > .time_p {
    font-size: 1.0rem;
    float: right;
    margin: 0;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > p::after {
    display: block;
    content: "";
    clear: both;
}

.navbar-nav > .messages-menu > .dropdown-menu > li .menu > li > a > h4 {
    max-width: 190px;
    float: left;
    margin: 0;
}

.startingPage_wrapper footer, .startingPage_wrapper header, .startingPage_wrapper .main-sidebar {
    display: none;
}

.startingPage_wrapper .content-wrapper {
    margin-left: 0;
    height: 100vh;
}

@media screen and (max-width: 768px) {
    .nameSearch_wrapper .input-group {
        display: block;
    }
}

/* SP only END */
.nameSearch_wrapper .input-group input {
    float:
}

@media screen and (max-width: 768px) {
    .allOperation_wrapper {
        margin-top: 12px;
    }
}

/* SP only END */

.periodModeList_wrapper .courseMenu_wrapper {
    justify-content: flex-end;
}

@media screen and (max-width: 1129px) {
    .periodModeList_wrapper .courseMenu_wrapper {
        justify-content: center;
    }
}

/* SP only END */
@media screen and (max-width: 768px) {
    .userChoice_sortArea .btn {
        margin: 0 4px 12px 0 !important;
    }
}

.learning_page ul li .user_wrapper {
    display: -ms-flexbox;
    display: flex;
    align-items: center;
}

.learning_page ul li .user_wrapper p {
    margin-bottom: 0;
}

section.makeInfo_wrapper {
    min-height: 80px;
}

@media screen and (max-width: 1129px) {
    .add_com_wrapper form, .add_com_wrapper textarea {
        width: 100%;
    }

    .add_com_wrapper textarea {
        margin: 0 0 8px 0;
    }

    .add_com_wrapper button {
        display: block;
        width: 100px;
        margin: 0 auto;
        text-align: center;
    }
}

/* SP only END */

.gotcha_message_list .userImage_wrapper {
    position: relative;
    top: 10px;
}

.btn_delete {
    background-color: #e06b5d !important;
    color: #fff;
    border: none;
}

.btn_delete:hover {
    transition: 0.5s;
    opacity: 0.7;
}

.deleteBtn_wrapper p {
    margin-top: 4px;
    color: #777f80;
    font-size: 1.2rem;
}

/* IE only */
@media all and (-ms-high-contrast: none) {
    .setting_wrapper textarea {
        width: 500px;
    }

    .item_file {
        width: 200px;
    }

    .main-footer .footer_message_wrapper .input-group {
        width: inherit;
    }

    .footer_message_wrapper .input-group-inner {
        display: block;
    }

    .footer_message_wrapper .input-group-inner input[type="text"] {
        float: left;
    }

    .footer_message_wrapper .input-group-inner button {
        float: right;
    }

    .footer_message_wrapper .input-group-inner:before, .footer_message_wrapper .input-group-inner:after {
        clear: both;
    }

    .sortable_wrapper li {
        display: block;
    }

    .sortable_wrapper li .editBtn_wrapper {
        float: right;
    }

    .selectGroup input[type="radio"]:checked + label {
        border: solid 2px #3c8dbc;
    }

    .selectGroup input[type="radio"]:checked + label img {
        padding: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .setting_wrapper input[type="text"], .setting_wrapper textarea {
        padding: 0 2px;
    }

    @media screen and (min-width: 769px) {
        .setting_wrapper input[type="text"], .setting_wrapper textarea {
            max-width: 500px;
        }
    }/* PC only END */
}

/* IE only END */

/* Firefox only */
@-moz-document url-prefix() {
    .setting_wrapper textarea {
        width: 500px;
    }
    .setting_wrapper dl .datepicker_wrapper input[type="text"] {
        width: 200px;
        min-width: inherit;
    }
}

/* Firefox only END */

/* Edge only */
@supports (-ms-ime-align: auto) {
    @media screen and (min-width: 1130px) {
        .add_com_wrapper form button {
            float: left;
        }

        @media screen and (min-width: 769px) {
            .setting_wrapper textarea {
                width: 500px;
            }

            .setting_wrapper input[type="text"] {
                max-width: 500px;
            }
        }/* PC only END */
        @media screen and (max-width: 768px) {
            .setting_wrapper textarea {
                width: 100%;
            }
        }/* SP only END */
        .setting_wrapper dl .datepicker_wrapper input[type="text"] {
            width: 200px;
            min-width: inherit;
        }

        .setting_wrapper input[type="text"], .setting_wrapper textarea {
            padding: 0 2px;
        }
    }
}

/* Edge only END  */

/*dashboard*/
.dash_head, .taskCondition {
    display: flex;
    margin-bottom: 32px;
}

.human_skill {
    display: inline-block;
    position: relative;
    width: 50%;
    max-height: 386px;
    min-height: 300px;
    margin-right: 1.1%;
    background-color: #F5ECBB;
}

.human_skill p {
    margin-top: 28px;
    padding: 0 20px;
    text-align: center;
    font-size: 25px;
}

.maskGroup5 {
    display: inline-block;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 80%;
}

.infoBox_area {
    display: inline-block;
    width: 50%;
    padding: 24px;
}

.infoBox_area_header {
    padding-bottom: 16px;
    border-bottom: #e6e6e6 1px solid;
}

.infoBox_area .button_area {
    text-align: right;
}

.infoBox_area .button_area .add_button {
    display: inline-block;
}

.infoBox_area .button_area .add_button button {
    width: 114px;
    height: 32px;
    color: #707070;
    background-color: white;
    border: #707070 1px solid;
}


.infoBox_area h3 {
    display: inline-block;
    float: left;
    margin: 0;
!important;
    padding-top: 9px;
    color: #707070;
    font-size: 18px;
}

.pc_dash_title {
    margin-bottom: 12px;
    font-size: 20px;
}

.dash_box {
    padding: 24px;
    margin-bottom: 32px;
    background-color: white;
}

.dash_box_wrap {
    position: relative;
    padding: 20px 0;
    border-bottom: #e6e6e6 1px solid;
}

.dash_box_wrap:after {
    content: "";
    clear: both;
    display: block;
}

.dash_box .dash_box_wrap:nth-child(1), .dash_box_wrap.first {
    padding: 0 0 20px 0;
}

.dash_box_wrap.last {
    margin-bottom: 0;
}

.dash_box h3 {
    margin: 0 0 12px 0;
}

.taskOverview {
    float: left;
    width: 49%;
    margin-right: 9.5%
}

.taskOverview h3 {
    color: #4593BF;
    font-size: 20px;
    font-weight: bold;
}

.taskOverview p {
    margin: 0;
    color: #333333;
    font-size: 16px;
}

.clearProgress {
    float: right;
    width: 33.7%;
    height: 76px;
    margin-left: 65.6%;
    padding: 1%;
    bottom: 30px;
}

.clearProgressWrapper {
    position: relative;
    height: 25px;
    margin-top: 50px;
    border: 1px solid #707070;
}

.clearProgressWrapper p.pc_dash_display {
    position: absolute;
    margin-left: -100px;
    font-size: 12px;
}

.clearProgressWrapper span.sp_dash_display {
    display: none;
}

.progressBar {
    display: inline-block;
    position: relative;
    background-color: #2A5E72;
    border: 0;
}

.progressLabel {
    position: absolute;
    bottom: 100%;
    margin-bottom: 10px;
}

.progressLabel:nth-child(even) {
    left: 0;
}

.progressLabel:nth-child(odd) {
    right: 0;
}

.dash_box .progressBar {
    width: 60%;
    height: 23px;
}

.dash_box .clearProgress .iconWrap {
    position: absolute;
    bottom: 150%;
    right: 0;
    width: 23px;
    margin-right: -20%;
}

.dash_box .clearProgress .iconWrap:after {
    content: "|";
    position: absolute;
    bottom: -20px;
    right: 0;
    color: #2A5E72;
}

.dash_box .sp_dash_display {
    display: none;
}

.groupOverview {
    float: left;
    width: 50%;
    color: #707070;
}

.groupOverview .groupOverview_title {
    margin-right: 8%;
}

.groupOverview h3 span {
    color: #FFA143;
    font-size: 14px;
}

.groupOverview h3 {
    color: #4593BF;
    font-size: 20px;
    font-weight: bold;
}

.groupOverview p {
    margin: 0;
    font-size: 16px;
    color: #333333;
}

.JoinGroup {
    float: right;
    right: 0;
    bottom: 13px;
    margin: 0 0 0 auto;
    font-size: 16px;
}

.JoinGroup p {
    margin: 2% 5% 0 0;
}

.JoinGroup .add_button a {
    width: 102px;
    height: 32px;
    color: white;
    background-color: #F39D12;
    border: 0;
}

.JoinGroup .add_button a:hover{
    opacity: 0.7;
}

.JoinGroup .participants {
    display: inline-block;
    margin: 0 5px 0 0;
    color: #333333;
}

.JoinGroup .sp_dash_display {
    display: none;
}

.taskDeadline {
    width: 50%;
    margin-right: 1.1%;
}

.taskAct {
    width: 50%;
}

.how_to_use {
    margin: 0 0 10px 0;
    font-size: 20px;
}

@media screen and (min-width: 769px) {
    .dash_box_wrap, .groupOverview {
        position: relative;
    }

    .clearProgress, .JoinGroup {
        position: absolute;
    }
}

@media screen and (max-width: 768px) {
    .infoBox_area h3 {
        font-size: 16px;
        font-weight: normal;
    }

    .sp_dash_display {
        display: none;
    }

    .infoBox_area {
        width: 100%;
    }

    .dash_box {
        padding: 20px;
    }

    .dash_box_wrap {
        display: block;
        padding: 0;
        margin-bottom: 20px;
        border: 1px solid #CCCCCC;
    }

    .dash_box .dash_box_wrap:nth-child(1), .dash_box_wrap.first {
        padding-bottom: 0;
    }

    .taskOverview {
        width: 100%;
        float: none;
        padding: 12px;
    }

    .taskOverview h3, .groupOverview h3 {
        font-size: 16px;
    }

    .taskOverview p, .groupOverview p:nth-child(2n) {
        color: #333333;
        font-size: 14px;
    }

    .clearProgress {
        width: 100%;
        height: auto;
        margin-left: 0;
        padding: 12px;
        bottom: 30px;
        background-color: #EFEFEF;
    }

    .clearProgressWrapper {
        margin-bottom: 20px;
    }


    .clearProgressWrapper p.pc_dash_display {
        display: none;
    }

    .clearProgressWrapper span.sp_dash_display {
        display: block;
        margin-bottom: 0;
        text-align: right;
    }

    h2.pc_dash_display {
        display: none;
    }

    .dash_box .sp_dash_display {
        display: block;
    }

    .groupOverview .pc_dash_display {
        display: none;
    }

    .sp_dash_title {
        margin: 0 0 12px 0;
        color: #707070;
        font-size: 16px;
    !important;
    }

    .groupOverview {
        width: 100%;
        float: none;
        padding: 12px;
    }

    .groupOverview p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
    }

    .JoinGroup {
        float: none;
        padding: 12px;
        font-size: 12px;
        background-color: #EFEFEF;
    }

    .JoinGroup:after {
        content: "";
        clear: both;
        display: block;
    }

    .JoinGroup span {
        float: left;
        line-height: 29px;
        margin-left: 0;
        padding-right: 10px;
        color: #FFA143;
    }

    .JoinGroup .add_button {
        display: flex;
        position: relative;
        float: right;
    }

    .JoinGroup .participants {
        line-height: 29px;
        margin: 0 10px 0 0;
        color: #333333;
        font-size: 12px;
    }

    .taskCondition {
        display: block;
    }

    .taskDeadline {
        width: 100%;
        margin-right: 0;
    }

    .taskAct {
        width: 100%;
    }

    .how_to_use {
        font-size: 16px;
    }

}


/*task index*/
.mainTitle_wrapper .add_button {
    display: inline-block;
    margin: 6px 0 0 12px;
}

.box-header {
    padding-bottom: 0;
}

.task_box {
    margin-bottom: 32px;
}

.plans {
    background-color: #FFFAEA;
}

.taskChild {
    background-color: white;
}

.task_box_header {
    border-bottom: 1px solid #f4f4f4;
    position: relative;
    padding-bottom: 18.5px;
    height: 45px;
}

.task_box_header_title {
    font-weight: bold;
    font-size: 20px;
!important;
    color: #333333;
!important;
}

.task_box_header_second {
    border-bottom: 1px solid #f4f4f4;
    margin-top: 22px;
    height: 45px;
}

.button_area {
    text-align: right;
}


.task_box .add_button {
    display: inline-block;

}

.task_box .add_button a {
    width: 122px;
    height: 32px;
    color: white;
    background-color: #2A5E72;
}

.task_box .fl {
    float: left;
}

.task_box .button_area {
    text-align: right;
}

.challenge {
    display: inline-block;
    color: white;
    background-color: #E3953A;
    border: 1px solid #FFFDFD;
    box-shadow: 0 0 0 5px #E3953A;
    text-align: center;
    width: 106px;
    height: 30px;
    line-height: 30px;
}

.coming_soon {
    display: inline-block;
    color: white;
    background-color: #959595;
    border: 1px solid #FFFDFD;
    box-shadow: 0 0 0 5px #959595;
    text-align: center;
    width: 106px;
    height: 30px;
    line-height: 30px;
}

.inner .add_button .btn {
    width: 122px;
}

.taskChild .taskLine.taskHeader {
    color: #333333;
    font-weight: bold;
}

.taskLine.taskHeader .attempt, .taskLine.taskHeader .quizTitle, .taskLine.taskHeader .condition {
    font-size: 14px;
}


.taskLine .attempt {
    /* position: absolute;
    left: 0; */
    float: left;
    margin: 0 12px 0 0;
}


.achievement {
    display: inline-block;
    border-radius: 4px;
    width: 84px;
    height: 32px;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
}


.completion {
    color: white;
    background-color: #F8C054;
}

.working {
    color: white;
    background-color: #8DC1D8;

}

.noncompletion {
    color: black;
    background-color: #C6C6C6;
}

.taskLine .quizTitle {
    margin-top: 4px;
    font-size: 16px;
}

.completion, .working, .noncompletion {
  float: left;
    border-radius: 4px;
    width: 84px;
    text-align: center;
    line-height: 32px;
    font-size: 12px;
}

.badge {
    background-color: #2A5E72;
    width: 55px;
    height: 25px;
    border-radius: 100px;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-weight: normal;
}


@media screen and (max-width: 768px) {
    .box-header.coming {
        padding-top: 20px;
    }

    .task_box_header {
        border-bottom: 1px solid #f4f4f4;
        position: relative;
        padding-bottom: 0;
        height: 45px;
    }

    .task_box .task_box_header .add_button a {
        width: 122px;
        height: 32px;
        line-height: 18px;
        font-size: 14px;
    }

    .box-header {
        padding: 12px;
        padding-bottom: 0;
    }

    .plans .box-body {
        padding: 0 12px;
    }

    .coming.box-body:last-child {
        padding: 0 12px;
        padding-bottom: 16px;
    }

    .task_box_header_title {
        font-size: 16px;
    }

    .plans .taskLine .sp_flex_text {
        margin-right: 10px;
        margin-left: 2px;
    }

    .plans .taskLine {
        display: block;
        height: auto;
        padding: 8px 0;
    }

    .task_box_header_title {
        margin-right: 1%;
    }

    .taskChild .box-body {
        padding: 0 12px 16px 12px;
    }

    .whatQuiz {
        padding-top: 10px;
    }

    .challenge {
        display: inline-block;
        color: white;
        width: 93px;
        height: 22px;
        background-color: #E3953A;
        border: 1px solid #FFFDFD;
        box-shadow: 0 0 0 2px #E3953A;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
    }

    .coming_soon {
        display: inline-block;
        color: white;
        background-color: #959595;
        border: 1px solid #FFFDFD;
        box-shadow: 0 0 0 2px #959595;
        text-align: center;
        width: 93px;
        height: 22px;
        font-size: 12px;
        line-height: 20px;
    }

    .taskChild .taskLine {
        display: block;
        border: 1px solid #f4f4f4;
        height: auto;
        justify-content: center;
        align-items: center;
        padding: 12px;
        margin-bottom: 20px;
    }

    .taskChild .taskLine.last {
        margin-bottom: 0;
    }

    .taskChild .box-header {
        border: 0;
    }

    .taskChild .taskLine.taskHeader {
        display: none;
    }

    .taskChild .taskLine .sp_flex {
        position: relative;
        width: 100%;
        padding-left: 0;
    }

    .taskLine .attempt {
        position: relative;
        margin-right: 8px;
    }

    .taskLine .quizTitle {
        width: auto;
        font-size: 16px;
    }

    .completion {
        width: 55px;
        height: auto;
        line-height: 30px;
    }

    .noncompletion {
        width: 60px;
        height: auto;
        line-height: 30px;
    }

    .taskLine .condition {
        display: block;
        width: 100%;
        font-size: 14px;
    }

    .sp_condition {
        display: block !important;
        width: 100%;
        color: #ffffff;
        background-color: #5B8698;
        border-top: 1px solid #C2D4DC;
    }

    .taskLine .condition .my_status, .taskLine .condition .everyone_status {
        position: relative;
        width: 100%;
    }

    .sp_condition, .my_status, .everyone_status {
        padding: 8px;
        border-bottom: 1px solid #C2D4DC;
        border-left: 1px solid #C2D4DC;
        border-right: 1px solid #C2D4DC;
    }

    .taskLine .condition .my_status, .taskLine .condition .everyone_status, .taskLine .condition .my_status parts {
        justify-content: flex-start;
    }
}

/*task index*/
.mainTitle_wrapper .add_button {
    display: inline-block;
    margin: 6px 0 0 12px;
}

.task_box {
    margin-bottom: 32px;
}

.plans {
    background-color: #FFFAEA;
}

.box-header {
    position: relative;
    border-bottom: 1px solid #f4f4f4;
}

.task_box_header_title {
    color: #333333;
!important;
    font-weight: bold;
    font-size: 20px;
!important;
}

.task_box_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 0;
}

.plans .box-body {
    padding-top: 0;
}

.plans .box-header.coming {
    padding-top: 20px;
}

.task_box .add_button a {
    width: 122px;
    height: 32px;
    color: white;
    background-color: #2A5E72;
    border: 0;
}

.challenge {
    display: inline-block;
    color: white;
    background-color: #E3953A;
    border: 1px solid #FFFDFD;
    box-shadow: 0 0 0 2px #E3953A;
    text-align: center;
    width: 106px;
    height: 30px;
    line-height: 30px;
}

.coming_soon {
    display: inline-block;
    color: white;
    background-color: #959595;
    border: 1px solid #FFFDFD;
    box-shadow: 0 0 0 2px #959595;
    text-align: center;
    width: 106px;
    height: 30px;
    line-height: 30px;
}

.inner .add_button .btn {
    width: 122px;
}


.plans .taskLine {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f4f4f4;
    width: 100%;
    height: auto;
}

.plans .taskLine .sp_flex {
    display: flex;
    align-items: center;
    padding: 0;
}

.plans .taskLine .sp_flex_text {
    margin-right: 10px;
    margin-left: 10px;
}

.plans .taskLine .sp_flex_text.testDate {
    margin-right: 10px;
    margin-left: 10px;
    color:#333333;
}

.taskChild .box-body {
    padding-top: 0;
    padding-bottom: 16px;
}

.taskChild .taskLine {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f4f4f4;
    /* height: 51px; */
    /* align-items: center; */
}

.taskChild .taskLine.taskHeader {
    color: #333333;
    font-weight: bold;
}

.taskLine.taskHeader .attempt, .taskLine.taskHeader .quizTitle, .taskLine.taskHeader .condition {
    font-size: 14px;
}

.completion {
    color: white;
    background-color: #F8C054;
}

.working {
    color: white;
    background-color: #8DC1D8;
}

.noncompletion {
    color: black;
    background-color: #C6C6C6;
}

.taskLine .quizTitle {
    margin-top: 4px;
    font-size: 16px;
}

.my_status .parts span:nth-child(odd), .everyone_status .parts span:nth-child(odd) {
    font-weight: bold;
    margin-right: 5px;
}

.everyone_status .parts:nth-child(2) {
    width: 100%;
}

.badge {
    background-color: #5B8698;
    width: 55px;
    height: 25px;
    border-radius: 100px;
    text-align: center;
    line-height: 18px;
    font-size: 12px;
    font-weight: normal;
}

.sp_condition {
    display: none !important;
}


@media screen and (max-width: 768px) {
    .mainTitle_wrapper .page-header {
        margin-bottom: 16px;
        font-size: 20px;
    }

    .mainTitle_wrapper .button_area {
        display: none;
    }

    .box-header.coming {
        padding-top: 20px;
    }


    .task_box .task_box_header .add_button a {
        width: 122px;
        height: 32px;
        line-height: 18px;
        font-size: 14px;
    }

    .tasklist_page .box-header {
        padding: 12px;
    }


    .plans .box-body {
        padding: 0 12px;
    }

    .coming.box-body:last-child {
        padding: 0 12px;
        padding-bottom: 16px;
    }

    .task_box_header_title {
        font-size: 16px;
    }

    .plans .taskLine .sp_flex_text {
        margin-right: 10px;
        margin-left: 2px;
    }

    .plans .taskLine {
        display: block;
        height: auto;
        padding: 8px 0;
    }

    .taskChild .box-body {
        padding: 0 12px 16px 12px;
    }

    .whatQuiz {
        padding-top: 10px;
    }

    .challenge {
        display: inline-block;
        color: white;
        width: 93px;
        height: 22px;
        background-color: #E3953A;
        border: 1px solid #FFFDFD;
        box-shadow: 0 0 0 2px #E3953A;
        font-size: 12px;
        text-align: center;
        line-height: 20px;
    }

    .coming_soon {
        display: inline-block;
        color: white;
        background-color: #959595;
        border: 1px solid #FFFDFD;
        box-shadow: 0 0 0 2px #959595;
        text-align: center;
        width: 93px;
        height: 22px;
        font-size: 12px;
        line-height: 20px;
    }

    .taskChild .taskLine {
        display: block;
        border: 1px solid #f4f4f4;
        height: auto;
        justify-content: center;
        align-items: center;
        padding: 12px;
        margin-bottom: 20px;
    }

    .taskChild .taskLine.last {
        margin-bottom: 0;
    }

    .taskChild .box-header {
        border: 0;
    }

    .taskChild .taskLine.taskHeader {
        display: none;
    }

    .taskChild .taskLine .sp_flex {
        /* position: relative; */
        width: 100%;
        padding-left: 0;
        margin-bottom: 8px;
        /* display: flex; */
        align-items: center;

    }

    .taskLine .quizTitle {
        width: auto;
        font-size: 16px;
    }

    .completion {
        width: 55px;
        height: auto;
        line-height: 30px;
    }

    .noncompletion {
        width: 60px;
        height: auto;
        line-height: 30px;
    }

    .taskLine .condition {
        display: block;
        width: 100%;
        font-size: 14px;
    }

    .sp_condition {
        display: block !important;
        width: 100%;
        color: #ffffff;
        background-color: #5B8698;
        border-top: 1px solid #C2D4DC;
    }
}


/* Edge only END  */

/*group index*/
.groupList_page .search_wrapper {
    margin-top: 6px;
}

.groupTable thead {
    background-color: #5B8698;
}

.groupTable thead tr th {
    height: 45px;
    padding: 8px 16px;
    color: #FFFFFF;
    font-weight: normal;
    vertical-align: middle;
}

.groupTable tbody tr td {
    height: 45px;
    padding: 8px 16px;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #C2D4DC;
    font-size: 14px;
    vertical-align: middle;
}

.groupTable tbody tr td:first-child {
    max-width: 30rem;
}

.groupTable tbody tr td:nth-child(2) {
    width: 90px;
    padding: 8px 16px;
}

.participate_badge, .unParticipate_badge, .nonDisplay_badge {
    width: 60px;
    margin: 0;
    padding: 8px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
}

.participate_badge {
    color: #F39D12;
}

.unParticipate_badge {
    color: #5ba1ad;
}

.nonDisplay_badge {
    color: #A3A3A3;
}

.flex-wrapper > p {
    width: 66%;
    height: 100%;
    margin: 0 0 0 12px;
    font-size: 14px;
    color: #333;
    font-weight: normal;
}

.pc_display {
    display: block;
!important;
}

.sp_display {
    display: none;
!important;
}

/* @media screen and (max-width: 768px) { */
@media screen and (max-width: 1100px) {
    .pc_display {
        display: none;
    !important;
    }

    .sp_display {
        display: block;
    !important;
    }

    .groupList_page .mainTitle_wrapper {
        margin: 0;
    }

    .groupList_page .mainTitle_wrapper .page-header {
        line-height: 42px;
        margin: 0;
    }

    .groupList_page .sp_display .groupTable {
        padding: 16px;
        margin-bottom: 20px;
        background-color: #ffffff;
        overflow: auto;
    }

    .groupList_page .sp_display .groupTable_title {
        margin-bottom: 18px;
    }

    .groupList_page .sp_display .groupTable_title h2:after{
        content:"";
        display: block;
        clear: both;
    }

    .groupList_page .sp_display .groupTable .participate_badge, .groupList_page .sp_display .groupTable .unParticipate_badge, .groupList_page .sp_display .groupTable .nonDisplay_badge {
        float: left;
        min-width: 60px;
    }

    .participate_badge, .unParticipate_badge, .nonDisplay_badge{
        min-width: 60px;
        margin:0 16px 0 0;
        padding: 8px;
        border-radious: 4px;
    }

    .participate_badge {
        color: #ffffff;
        background-color: #F39D12;
    }

    .unParticipate_badge {
        color: #ffffff;
        background-color: #5ba1ad;
    }

    .nonDisplay_badge {
        color: #ffffff;
        background-color: #A3A3A3;
    }


    .groupList_page .sp_display .groupTable h2 {
        margin: 10px 0 0 10px;
        line-height: 36px;
        color: #3C8EBC;
        font-size: 16px;
    }

    .groupList_page .sp_display .groupTable :last-child {
        margin-bottom: 0;
    }

    .groupList_page .sp_display .groupTable_detail {
        padding: 16px 12px;
        margin-bottom: 20px;
        border: 1px solid #CCCCCC;
        overflow: auto;
    }

    .border-top {
        border-top: 1px solid #C2D4DC;
    }

    .border-left {
        border-left: 1px solid #C2D4DC;
    }

    .groupTable_head, .groupTable_body {
        height: auto;
        line-height: 30.667px;
        border-bottom: 1px solid #C2D4DC;
        border-right: 1px solid #C2D4DC;
    }

    .groupTable_head {
        color: #ffffff;
        background-color: #5B8698;
    }

    .groupTable_body {
        color: #333333;
    }
}

/* Edge only END  */

/*task_edit*/
.admin_page .mainTitle_wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.admin_page h2{
    font-size: 20px;
}

.admin_page h3 {
    color: #2A5E72;
    font-weight: normal;
    font-size: 20px;
}

.admin_page h4 {
    font-size: 20px;
}

.admin_page .mainTitle_wrapper .add_button {
    position: absolute;
    right: 0;
    width: 72px;
    height: 32px;
    margin: 0;
}

.admin_page .mainTitle_wrapper .add_button a {
    border: 1px solid #C4C4C4;
}


.make_task_box {
    background-color: white;
    width: 100%;
    margin-bottom: 32px;
    height: auto;
}

.make_task_box .box-body, .addTask_btn .box-body {
    padding: 24px;
}

.make_task_box .box-body {
    position: relative;
}


.box_imageAdd {
    width: 45%;
    min-height: 273px;
    float: left;
    margin-right: 1.8%;
    padding: 20px;
    border: 1px solid #707070;
}

.box_imageAdd h4 {
    margin: 0;
}

.trash_box {
    float: right;
    margin-top: 16px;
    font-size: 20px;
    text-decoration: none;
}

.trash_box a {
    color: #2B546A;
!important;
}

.box_etcetra {
    width: 45%;
    float: left;
    min-height: 273px;
    margin-right: 1%;
    border: 1px solid #707070;
}

.box_etcetra_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 276px;
    padding: 10px;
}

.box_etcetra_inner div h4 {
    margin: 0;
    text-align: center;
}

.box_etcetra_inner.detail, .box_1colum_inner.detail {
    display: block;
    padding: 20px;
}

.box_etcetra_inner.detail div h4 {
    margin-bottom: 16px;
    text-align: left;
}

.box_etcetra_inner.detail div textarea {
    width: 100%;
    min-height: 155px;
    border: 1px solid #707070;
}

.btn-block + .btn-block {
    margin: 0;
}

.box_etcetra_inner .partsButtonarea {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.partsButtonarea button {
    padding: 8px 12px;
    color: #2A5E72;
    background-color: #ffffff;
    border: 1px solid #2A5E72;
    font-size: 14px;
}

.partsButtonarea button .btn-block {
    width: auto;
}

.box_etcetra_inner .partsButtonarea button {
    width: auto;
    margin: 12px 16px 0 0;
}

.box_etcetra_inner .partsButtonarea button:nth-child(3) {
    margin-right: 0;
}

.box_1colum {
    width: 91.8%;
    min-height: 273px;
    margin-right: 1%;
    border: 1px solid #707070;
}

.box_1colum.detail, .box_1colum_inner.detail {
    min-height: 152px;
}

.box_1colum_inner h4 {
    margin: 0;
    text-align: center;
}

.box_1colum_inner.detail h4 {
    margin-bottom: 20px;
    text-align: left;
}

.box_1colum_inner p {
    margin-top: 16px;
    color: #939393;
    text-align: center;
}

.box_1colum_inner .partsButtonarea {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}

.box_1colum_inner .partsButtonarea button {
    width: auto;
    margin: 12px 16px 0 0;
}

.box_1colum_inner .partsButtonarea button:nth-child(4) {
    margin-right: 0;
}

.box_1colum_inner.detail div input {
    width: 100%;
    border: 1px solid #707070;
}

.box_task_editButton {
    /* height: 273px; */
    /* float: left; */
    right: 24px;
    bottom: 24px;
}

.box_task_editButton button {
    width: 72px;
    height: 32px;
    font-size: 14px;
}

.box_task_editButton button:nth-child(1) {
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #C4C4C4;
}

.box_task_editButton button:nth-child(2) {
    margin: 20px 0;
    color: #333333;
    background-color: #ffffff;
    border: 1px solid #C4C4C4;
}

.box_task_editButton button:nth-child(3) {
    color: #ffffff;
    background-color: #DD4A39;
    border: 1px solid #DD4A39;
}

.addTask_btn {
    position: relative;
    background-color: white;
}

.addTask_btn_inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px;
}

.buttonArea {
    display: flex;
    flex-wrap: wrap;
}

.addTask_btn_inner button {
    padding: 8px 20px;
    color: #2A5E72;
    background-color: white;
    border: 1px solid #2A5E72;
}

.addTask_btn_inner button:nth-child(odd) {
    margin-right: 8px;
}

.addTask_btn_inner button:nth-child(even) {
    margin-left: 8px;
}

.addTask_btn_inner button　span {
    font-weight: bolder;
}

.addTask_btn_inner a {
    position: absolute;
    top: 30%;
    right: 0;
    color: #2A5E72
}

.fixedBtmArea_btns a {
    width: 115px;
    height: 38px;
    line-height: 24px;
    margin-right: 8px;
    background-color: #FFFFFF;
    border: 1px solid #C4C4C4;
    font-size: 14px;
}

.fixedBtmArea_btns button {
    width: 93px;
    height: 38px;
    margin-left: 8px;
    background-color: #58A5A5;
    border: 0;
    font-size: 18px;
}

@media screen and (min-width: 1101px) {
    .box_task_editButton {
        position: absolute;
        width: 7.2%;
    }

    .box_1colum_inner_fl {
        display: flex;
        min-height: 250px;
        justify-content: center;
        align-items: center;
        padding: 20px;
    }

    .sp_taskedit_display {
        display: none;
    }
}

@media screen and (max-width: 1100px) {
    .admin_page h4 {
        font-size: 16px;
    }

    .box_imageAdd, .box_etcetra, .box_etcetra_inner {
        min-height: 0px;
    }

    .box_imageAdd {
        width: 100%;
        float: none;
        margin-bottom: 12px;
        padding: 12px;
    }

    .box_imageAdd .partsForQ {
        min-height: 0;
    }

    .box_etcetra {
        float: none;
        margin-bottom: 12px;
        width: 100%;
    }

    .trash_box {
        float: none;
    }

    .trash_box:after {
        content: "";
        clear: both;
        display: block;
    }

    .trash_box a {
        float: right;
    }

    .box_etcetra_inner .partsButtonarea, .box_1colum_inner .partsButtonarea {
        display: block;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .box_etcetra_inner .partsButtonarea button, .box_1colum_inner .partsButtonarea button {
        width: 144px;
        margin: 12px 0 0 0;
    }

    .box_etcetra_inner.detail, .box_1colum_inner.detail {
        display: inline-block;
        width: 100%;
        padding: 12px;
    }

    .box_1colum {
        width: 100%;
        min-height: 0;
        margin-bottom: 12px;
    }

    .box_1colum_inner {
        padding: 12px;
    }

    .box_1colum_inner_fl {
        display: flex;
        min-height: 0;
        justify-content: center;
        align-items: center;
    }

    .box_1colum.detail, .box_1colum_inner.detail {
        min-height: 0;
    }

    .pc_taskedit_display {
        display: none;
    }

    .box_task_editButton {
        display: flex;
        justify-content: center;
    }

    .box_task_editButton button:nth-child(2) {
        margin: 0 12px;
    }
}

@media screen and (max-width: 768px) {
    .addTask_btn {
        width: 100%;
        margin-bottom: 0;
    }

    .buttonArea {
        display: block;
        flex-wrap: wrap;
        width: 100%;
    }

    .buttonArea:after {
        content: "";
        clear: both;
        display: block;
    }

    .addTask_btn_inner button {
        width: 100%;
    }

    .buttonArea div:nth-child(odd) {
        margin: 0 0 12px 0;
    }

    .buttonArea div:nth-child(even) {
        margin: 0;
    }

    .addTask_btn_inner a {
        position: inherit;
        float: right;
        margin-top: 10px;
    }
}


@media all and (-ms-high-contrast: none) {
    .partsButtonarea button {
        width: 100px;
        padding: 8px 0;
        color: #2A5E72;
        background-color: #ffffff;
        border: 1px solid #2A5E72;
        font-size: 11px;
    }

    .group_tabpanel thead {
        background-color: #2A5E72;
    }

    .group_tabpanel thead tr th {
        height: 45px;
        color: #FFFFFF;
        font-weight: normal;
        vertical-align: middle;
    }

    .group_tabpanel tbody tr td {
        height: 45px;
        color: #333333;
        font-size: 14px;
        vertical-align: middle;
    }

    .round_Unparticipated {
        background-color: #989898;
    !important;
        color: #000000;
    }

    .round_Participated {
        background-color: #FFA54B;
    !important;
        color: white;
    }

    .round_non-display {
        background-color: white;
    !important;
        color: #000000;
        border: 1px solid #d5d5d5;

    }

    .round_Unparticipated, .round_Participated, .round_non-display {
        display: block;
        /* position:absolute; */
        position: relative;
        width: 60px;
        height: 60px;
        text-align: center;
        border-radius: 50%;
        font-weight: normal;
        /* top:50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%); */
    }

    .round_up {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        font-size: 12px;
    }

    .round_Unparticipated .round_down, .round_Participated .round_down, .round_non-display .round_down {
        position: absolute;
        font-size: 12px;
        top: 55%;
        left: 10%;
    }

    .flex-wrapper > p {
        width: 66%;
        height: 100%;
        margin: 0 0 0 12px;
        font-size: 14px;
        color: #333;
        font-weight: normal;

    }
}

.taskList_page .mainTitle_wrapper:after{
    content:"";
    clear:both;
    display: block;
}

.taskList_page .mainTitle_wrapper h2{
    float: left;
}

.link_area{
    float: right;
    line-height: 45px;
    font-size: 16px;
}

.link_area span{
   margin-left: 20px;
    border-bottom: 1px solid #2B546A;
}

.link_area span a{
    color:#2B546A;
}

.taskList_box .taskList_parts{
    /* display: flex;
    align-items: center;
    justify-content: initial;
    height: auto; */
    padding:16px;
}

.taskList_box .taskList_parts .taskList_parts_left{
    width: 65%;
    margin-right: 12px;
    clear: both;
    overflow: hidden;
}

.taskLine .condition{
    margin-top: 4px;
    margin-left: auto;
}

.taskLine .my_status:after{
    content:"";
    clear:both;
    display: block;
}

.taskLine .my_status .parts_badge{
     float: left;
 }

.taskLine .my_status .parts_text{
    float: left;
    line-height: 25px;
    color:#333333;
}

.taskLine .my_status .parts_text .parts{
    float: left;
}

.taskLine .my_status .parts_text .parts span:first-child{
    margin-left:10px;
}

.taskLine .my_status .parts_text .parts span.exam{
    margin-left:18px;
}

@media screen and (max-width:900px){
    .link_area{
        display: none;
    }
}


@media screen and (max-width: 768px){
    .taskList_box .taskList_parts{
        display: block;
        height: auto;
        padding:16px;
    }

    .taskList_box .taskList_parts .taskList_parts_left{
        width: 100%;
    }

    .taskLine .my_status .my_status {
        display: block;
    }

    .taskLine  .my_status:after{
        content:"";
        clear: both;
        display: block;
    }

    .taskLine .my_status .parts_badge, .my_status .parts_text {
        float: left;
    }

    .taskLine .my_status .parts_text{
        line-height: 25px;
    }
}



/*header*/
.main-header .sp-header {
    display: none;
}

@media screen and (max-width: 767px) {
    .main-header .pc-header {
        display: none;
    }

    .main-header .sp-header {
        display: block;
    }

    .main-header .navbar {
        padding: 0 12px;
    }

    .main-header .sp-header .navbar {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    .main-header .sp-header .sidebar-toggle {
        position: absolute;
        left: 0;
    }

    .main-header .sp-header .navbar-custom-menu {
        position: absolute;
        right: 0;
    }

    .main-header .sp-logo img {
        width: 161px;
        height: 34px;
    }

    .skin-blue .main-header .navbar .sidebar-toggle {
        font-size: 32px;
        padding: 0 12px;
    }

    .navbar-custom-menu .navbar-nav > li > a {
        font-size: 30px;
    }

    .main-header .navbar .nav > li > a > .label {
        font-size: 15px;
    }

    .nav > li > a {
        padding: 10px 18px;
    }
}

@media (min-width: 769px) {
    .navbar-custom-menu .navbar-nav > li > a {
        padding-top: 15px;
        padding-bottom: 15px;
        line-height: 20px;
        font-size: 1.5rem;
    }

    .user-menu .userImage_wrapper {
        position: relative;
        top: -3px;
    }
}


/*task_show*/
.learning_page .page-header {
    font-size: 20px;
}

.learning_page .mainTitle_wrapper {
    display: flex;
    align-items: center;
    position: relative;
}

.learning_page .page-header-button {
    position: absolute;
    right: 0;
}

.btn-default {
    border: 1px solid #d9e0e7;
!important;
    background-color: white;
!important;
    color: #333333;
}

.inner_learning {
    padding: 0 3% 3% 3%;
}

.before_learning {
    display: flex;
    flex-direction: row-reverse;
    margin: 12px 0 32px 0;
    height: 100%;
}

.learning_point {
    width: 76%;
    min-height: 222px;
    margin-right: 3%;
    padding: 0 20px 20px 20px;
    background-color: #C2D4DC;
}

.learning_point h2 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #2A5E72;
}

.learning_point p {
    margin: 0;
    color: #333333;
    font-size: 15px;
}

.task_status {
    width: 21%;
}


.task_status table {
    width: 100%;
    height: 103px;
}

.task_status table:nth-child(odd) {
    margin-bottom: 12px;
}

.task_status table:nth-child(even) {
    margin-bottom: 0;
}

.task_status table tr th {
    width: 26%;
    padding: 4px;
    color: #333333;
    background-color: #C2D4DC;
    font-size: 15px;
    font-weight: normal;
    text-align: center;
    vertical-align: middle;
}

.task_status table tr td {
    width: 74%;
    padding: 20px 4px;
    background-color: white;
    color: #2A5E72;
    font-size: 20px;
    text-align: center;
    vertical-align: middle;
}

.exam_start_button {
    display: block;
    width: 70%;
    height: 32px;
    margin: 12px auto 0 auto;
    background-color: #9E9E9E;
    font-size: 14px;
    border-radius: 4px;
}

.exam_start_button .btn {
    color: #CCCCCC;
    text-align: center;
    border: 0;
}

.exam_start_button.bun {
    background-color: #F39D12;
}

.exam_start_button.bun .btn {
    color: #FFFFFF;
}

.task_detail_box {
    display: flex;
    width: 100%;
    margin-bottom: 32px;
    color:#333333;
}

.task_detail_box_left{
    width: 100%;
    padding: 20px;
    margin-right:12px;
    background-color: #ffffff;
}

.task_detail_box_right {
    width: 100%;
    padding: 20px;
    margin-left:12px;
    background-color: #ffffff;
}

.task_detail_box.sentence_1,.task_detail_box.file{
    padding: 20px;
    background-color: #ffffff;
}

/*.task_detail_box div {*/
/*    display: inline-block;*/
/*    width: 50%;*/
/*}*/

.task_detail_box div img {
    height: auto;
    width: 100%;
}

.task_detail_box .taskImg{
    position:relative;
}

.task_detail_box .plus{
    position:absolute;
    right:-10px;
    width:34px;
    height: 34px;
    border-radius: 50%;
    color: #888888;
    background-color: #ffffff;
    box-shadow: 0px 3px 6px #888888;
    font-size:22px;
    text-align: center;
    cursor: pointer;
}

.task_detail_box .plus:hover{
    opacity: 0.7;
}

.task_detail_box.sentence_1{
    padding:24px;
    width:100%;
}

.taskImg_modal img{
    width:100%;
}

.detailTitle,.coachingTitle{
    padding:12px;
    background-color: #5B8698;
}

.detailTitle{
    margin-bottom: 32px;
}


.detailTitle h2,.coachingTitle h2{
    margin:0;
    color:#ffffff;
    font-size: 15px;
}

.coachingDetail{
    padding:24px;
    margin-bottom:32px;
    background-color: #ffffff;
}

.coachingDetail p{
    margin-bottom: 24px;
    color:#333333;
    font-size:22px;
    font-weight: bold;
}



.task_detail_box.file{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
}

.task_detail_box.file div{
     width: auto;
     text-align: center;
 }

.task_detail_box.file .file{
    color:#C9C9C9;
    font-size: 89px;
}

.download_button {
    display: block;
    font-size: 14px;
    border-radius: 4px;
}

.download_button:hover{
    opacity: 0.7;
}

.download_button .btn {
    padding:12px 28px;
    color: #ffffff;
    background-color:#4593BF;
    text-align: center;
    border: 0;
}

.rangeGroup{
    display: flex;
    justify-content: center;
}

.rangeGroup_inner:after{
    content: "";
    display: block;
    clear: both;
}

.rangeGroup .useful,.rangeGroup .range,.rangeGroup .finishButton{
    float:left;
}

.rangeGroup .range{
    line-height: 50px;
    margin:0 48px;
}

.rangeGroup .finishButton{
    line-height: 50px;
}

.rangeGroup .finishButton:hover{
    opacity: 0.7;
}

.rangeGroup .finishButton button{
    padding:12px 28px;
    color:#ffffff;
    background-color: #5FA027;
    font-size: 15px;
}

.nontest {
    margin-bottom: 92px;
}

.nontest_text {
    display: table-cell;
    width: 1241px;
    height: 376px;
    background-color: white;
    vertical-align: middle;
}

.nontest p {
    text-align: center;
}


@media screen and (max-width: 768px) {
    .content-header {
        padding: 0;
    }

    .learning_page .mainTitle_wrapper {
        margin: 5px 0 0 0;
    }

    .learning_page .page-header {
        color: #333333
    }

    .sp_none {
        display: none;
    }

    .before_learning {
        display: block;
        width: 100%;
        margin-top: 0;
    }

    .task_status {
        display: flex;
        width: 100%;
        margin-bottom: 20px;
    }

    .task_status table {
        width: 50%;
        height: 103px;
    }

    .task_status table tr th {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 35px;
        background-color: #C2D4DC;
        font-size: 16px;
        font-weight: normal;
        text-align: center;
        vertical-align: middle;
    }

    .task_status table tr td {
        display: block;
        width: 100%;
        min-height: 75px;
        padding: 8px;
        background-color: white;
        font-size: 16px;
        text-align: center;
        vertical-align: middle;
    }

    .task_status table:nth-child(odd) {
        margin-bottom: 0;
    }

    .task_status table tr td span {
        line-height: 54px;
    }

    .exam_start_button {
        display: block;
        width: 102px;
        height: 32px;
        margin: 4px auto 0 auto;
    }

    .learning_point {
        width: 100%;
        height: 100%;
        margin-right: 3%;
        padding: 8px 20px 20px 20px;
        background-color: #C2D4DC;
    }

    .task_detail_box {
        display: block;
        width: 100%;
        margin-bottom: 32px;
        padding: 24px 0 0 0;
    }

    .task_detail_box .plus{
        position:absolute;
        right:-10px;
        width:40px;
        height: 40px;
        border-radius: 50%;
        color: #333333;
        background-color: #ffffff;
        font-size:25px;
        text-align: center;
    }

    .detailTitle {
        margin: 40px 0 0 0;
    }

    .task_detail_box div {
        display: block;
        width: 100%;
    }

    .task_detail_box_left{
        margin-right:0;
        padding-bottom:10px;
    }

    .task_detail_box_right {
        margin-left:0;
    }

    .task_detail_box div:last-child {
        margin-bottom: 0;
    }

    .rangeGroup .useful,.rangeGroup .range,.rangeGroup .finishButton{
        float:none;
        text-align: center;
        justify-content: center;
    }


    .group_tabpanel thead {
        background-color: #2A5E72;
    }

    .group_tabpanel thead tr th {
        height: 45px;
        color: #FFFFFF;
        font-weight: normal;
        vertical-align: middle;
    }

    .group_tabpanel tbody tr td {
        height: 45px;
        color: #333333;
        font-size: 14px;
        vertical-align: middle;
    }


    .round_Unparticipated {
        background-color: #989898;
    !important;
        color: #000000;
    }

    .round_Participated {
        background-color: #FFA54B;
    !important;
        color: white;
    }

    .round_non-display {
        background-color: white;
    !important;
        color: #000000;
        border: 1px solid #d5d5d5;

    }

    .round_Unparticipated, .round_Participated, .round_non-display {
        display: block;
        /* position:absolute; */
        position: relative;
        width: 60px;
        height: 60px;
        text-align: center;
        border-radius: 50%;
        font-weight: normal;
        /* top:50%;
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%); */
    }

    .round_up {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateY(-50%) translateX(-50%);
        width: 100%;
        font-size: 12px;
    }

    .round_Unparticipated .round_down, .round_Participated .round_down, .round_non-display .round_down {
        position: absolute;
        font-size: 12px;
        top: 55%;
        left: 10%;
    }

    .flex-wrapper > p {
        width: 66%;
        height: 100%;
        margin: 0 0 0 12px;
        font-size: 14px;
        color: #333;
        font-weight: normal;
    }
}

.delete_test {
    padding: 4px 20px;
    border: none;
    background-color: #dd4b39;
    color: #fff;
}

/*markUpList*/
.markUpList {
    width: 100%;
    padding: 12px;
    background-color: white;
}

.markUpList ul {
    padding: 0;
    margin: 0;
}

.markUpList ul li {
    margin-bottom: 12px;
}

.markUpList ul li:last-child {
    margin: 0;
}