.common-tm-box {
    text-align: center;
    padding: 3%;
    margin: 10% auto 13rem auto;
}

.course-list, .lesson-list {
    display: flex;
    flex-wrap: wrap;
}

.course-box {
    width: 20%;
    margin: 2.5%;
    box-shadow: 0 3px 5px 0 rgba(242, 243, 248, 1);
    background-color: #ffffff;
    position: relative;
    padding-bottom: 2%;
}

.course-box p {
    text-align: left;
    padding: 0 6%;
}

.course-box a {
    color: #152129;
}

.course-box-bottom {
    color: #67A7CC;
    margin-bottom: 3%;
    position: absolute;
    bottom: 0;
    width: 100%;
}

.course-img {
    margin-top: 3%;
    width: 90%;
    height: 11rem;
    object-fit:cover;
}

.test-icon, .course-test-icon {
    margin-left: 1.5rem;
    color: #67A7CC;
}

.plus-mark {
    margin-left: 1rem;
    color: #67A7CC;
}

.lesson-title {
    margin: 2% auto;
    padding: 0 1%;
    width: 80%;
}

.lesson-title h3 {
    display: flex;
    align-items: center;
    margin: 0;
    color: #67A7CC;
}

.lesson-list {
    width: 80%;
    margin: 0 auto;
}

.lesson-content-center {
    margin: 1%;
    width: 40%;
    text-align: left;
}

.lesson-content-center h2 {
    margin: 3% 0 2% 0;
}

.lesson-box {
    display: flex;
    box-shadow: 0 3px 5px 0 rgba(242, 243, 248, 1);
    background-color: #ffffff;
    width: 100%;
    position: relative;
}
.time-box {
    justify-content: initial !important;
}

.lesson-thumbnail {
    width: 25%;
    text-align: left;
}

video:hover {
    cursor: pointer;
}

.lesson-img {
    margin: 3%;
    width: 90%;
    height: 11rem;
    object-fit:cover;
}

.course-head {
    width: 80%;
    margin: 0 auto;
}

.course-head-top {
    height: 10rem;
    color: #ffffff;
    text-align:center;
    padding: 1% 0;
    display: flex;
}

.course-head-title {
    width: 90%;
    margin-left: 10%;
}

.lesson-detail-box {
    width: 90%;
    margin: 0 auto;
}

.lesson-detail-top {
    padding: 1% 0;
    display: flex;
    justify-content: center;
    background-color: #67A7CC;
}

.lesson-detail-title {
    color: #ffffff;
    text-align:center;
    height: 10rem;
}

.course-head-image {
    display: flex;
    align-items: flex-end;
}

.course-head-bottom {
    display: flex;
    box-shadow: 0 3px 5px 0 rgba(242, 243, 248, 1);
    height: 5rem;
    justify-content: space-between;
}

.course-head-bottom div {
    justify-content: initial;
    margin: 2%;
}

.lesson-mark {
    border-radius: 5rem;
    border: solid 1px #67A7CC;
    padding: 0.2rem 0.5rem;
    width: 7rem;
}

.test-mark {
    border-radius: 5rem;
    border: solid 1px #EEAE7F;
    padding: 0.2rem 0.5rem;
    width: 7rem;
}

.lesson-content-right {
    width: 35%;
}

#lesson-open-create, #test-open-create {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
}

.lesson-content-right div {
    text-align: right;
    margin-right: 3%;
}

.lesson-point {
    color: #67A7CC;
    font-size: 2vw;
}

.lesson-detail-bottom .top-content {
    justify-content: space-between;
    margin: 0 5%;
    padding-top: 2%;
}

.btn-complete {
    background-color: #ffffff;
    color: #67A7CC;
    border: solid 1px #67A7CC;
    width: 25%;
    height: 3em;
    border-radius: 0.3rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 1vw;
    margin: 0 auto;
}

.btn-complete:hover {
    cursor: pointer;
}

.mr-1 {
    margin-right: 1%;
}

.mr-3 {
    margin-right: 3%;
}

.mr-8 {
    margin-right: 8%;
}

/*レッスン詳細テキスト*/
.text-content {
    text-align: left !important;
    width: 90%;
    margin: 5% auto;
}
.text-content h1, .text-content h2 {
    margin: 10% 0 2% 0;
    padding: 0 0.5em;
    border-left: solid 0.8rem #67A7CC;
}

.text-content h3, .text-content h4 {
    margin: 2% 0 1% 0;
    padding: 0 0.5em;
    border-left: solid 0.8rem #A4CAE0;
}


.text-content h5, .text-content h6 {
    margin: 5% 0 1% 0;
    padding: 0 0.5em;
    border-left: solid 0.8rem #F0F6FA;
}

.text-content p {
    margin: 0;
    padding: 0;
}

.text-content ul {
    margin: 0;
    padding-left: 2%;
}

.text-content li {
    list-style: initial;
}

.text-content img {
    width: 70%;
}

blockquote {
    border-left: 5px solid #C6C8C9;
    margin-left: 0;
    padding-left: 1%;
}

.text-content table {
    width: 80%;
    border-collapse: collapse;
    font-size: 1vw;
}

.text-content table th {
    background-color: #E1EDF5;
    color: #67A7CC;
    border: solid 1px #67A7CC;
    text-align: center;
    height: 3rem;
}

.text-content table td {
    text-align: left;
    border: solid 1px #67A7CC;
    background-color: #ffffff;
}

/*レッスン、テスト詳細演習・問題*/
.question-content, .task-content {
    border: solid 1px #67A7CC;
    width: 90%;
    margin: 0 auto;
    border-radius: 2rem;
}

.task-content {
    margin-bottom: 5%;
    margin-top: 5%;
}

.task-top, .question-top {
    background-color: #F5F8FA;
    border-radius: 2rem 2rem 0 0;
    height: 5rem;
    padding: 1% 0;
    display: flex;
    justify-content: center;
}

.answer-question-top {
    background-color: #F5F8FA;
    border-radius: 1rem 1rem 0 0;
    height: 5rem;
    padding: 1% 0;
    display: flex;
    justify-content: center;
}

.question-top .item-center span, .task-top .item-center span {
    font-size: 2vw;
    font-weight: bold;
}

.question-bottom, .task-bottom {
    text-align: left !important;
    margin-left: 3%;
}

.question-bottom-box {
    margin-bottom: 5%;
}

.question-bottom-box h4 {
    margin-bottom: 0;
}

.question-bottom-box p {
    margin-top: 0;
}

.question-select .radio-label {
    margin-right: 5%;
    padding-left: 5%;
}

.question-select {
    flex-wrap: wrap;
}

.task-answer-contents {
    border: dashed 1px #152129;
    border-radius: 1rem;
    padding: 1%;
    width: 90%;
    margin: 3% auto;
}

.task-answer-contents:hover {
    cursor: pointer;
}

.task-answer-top {
    display: flex;
    justify-content: space-between;
}

#lessonAnswerDialog {
    width: 50%;
    border: none;
    padding: 0 0 3% 0;
    border-radius: 1rem;
}

.collect-contents {
    width: 90%;
    margin-bottom: 5%;
}

#answer-result {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

#answer-result p {
    margin-right: 3%;
}

#test-question-content {
    margin-top: 5%;
}

#test-question-top {
    display: block;
    text-align: center;
}

#test-text {
    color: #67A7CC;
}

/*コースカラー*/
.course-color-1, .course-color-7, .course-color-13 {
    background-color: #F1CB82;
}

.course-color-2, .course-color-9, .course-color-14 {
    background-color: #E17979;
}

.course-color-3,.course-color-10, .course-color-15 {
    background: #82C19F;
}

.course-color-4, .course-color-11 {
    background: #67A7CC;
}

.course-color-5, .course-color-8 {
    background: #9A82C1;
}

.course-color-6, .course-color-12 {
    background: #EEAE7F;
}


/*タブレット横*/
@media screen and (max-width: 1200px) {
    .common-tm-box {
        margin: 10% auto 28rem auto;
    }

    .course-box {
        width: 30%;
        margin: 1%;
    }

    .course-head {
        width: 90%;
    }

    .lesson-title {
        width: 90%;
    }

    .lesson-thumbnail {
        width: 40%;
    }

    .btn-complete {
        width: 40%;
        font-size: 1.5vw;
    }

    .question-bottom .radio-box {
        display:flex;
        flex-flow: column;
    }

    .question-select .radio-label {
        padding-left: 11%;
        margin-top: 1%;
    }

    .lesson-img {
        width: 90%;
    }
}

/*タブレット縦*/
@media screen and (max-width: 960px) {
    .course-box {
        width: 40%;
        margin: 5%;
        padding-bottom: 2%;
    }

    .lesson-thumbnail {
        width: 55%;
    }

    .btn-complete {
        width: 65%;
        font-size: 2vw;
    }

    .login-lesson-img {
        width: 90%;
    }

    .lesson-btn-box {
        margin-top: 2rem;
    }

    .question-bottom-box p {
        margin-bottom: 0;
    }
}

/*スマートフォン*/
@media screen and (max-width: 520px){
    .course-box {
        width: 80%;
        margin: 10%;
        padding-bottom: 10%;
    }

    .course-list, .lesson-list {
        display: block;
    }

    .lesson-content-center h2 {
        font-size: 3.5vw;
    }

    .lesson-point {
        color: #67A7CC;
        font-size: 4vw;
    }

    .question-top .item-center span, .task-top .item-center span {
        font-size: 4vw;
        font-weight: bold;
    }

    .lesson-detail-bottom .top-content span, .lesson-btn-box .btn-complete {
        font-size: 3vw;
    }

    .lesson-detail-title {
        height: 7rem;
    }

    .lesson-detail-title h2 {
        font-size: 4vw;
    }

    .lesson-detail-title h1 {
        font-size: 5vw;
    }

    .course-head, .lesson-title {
        width: 90%;
    }

    .course-head-title h1 {
        font-size: 5vw;
    }

    .course-head-title p {
        font-size: 3vw;
    }

    .lesson-content-right div {
        margin-right: 8%;
    }

    .lesson-btn-box .btn-primary, .lesson-btn-box .btn-complete {
        width: 90%;
    }

    .lesson-thumbnail {
        width: 56%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .course-img {
        height: 12rem;
    }

    .lesson-img {
        height: 5rem;
        width: 95%;
    }

    .login-lesson-img {
        width: 90%;
    }

    .lesson-mark {
        display: none;
    }

    .test-mark {
        display: none;
    }

    .lesson-box {
        padding-bottom: 1%;
    }

    #lessonAnswerDialog {
        width: 95%;
    }

    #lesson-open-create, #test-open-create {
        bottom: 0.3rem;
        right: 0.2rem;
    }

    .question-select {
        width: 88%;
    }

    .question-select .radio-label {
        padding-left: 13%;
        word-break: keep-all;
        overflow-wrap: break-word;
        width: 100%;
        white-space: initial;
        font-size: 3.5vw;
        margin-top: 2%;
    }

    .plus-mark, .test-icon {
        margin-left: 0.2rem;
    }

    .course-head-bottom div {
        line-height: 4rem;
    }

    .common-tm-box .icon-img {
        width: 1rem;
    }

    .time-box, .lesson-point-box {
        font-size: 3vw;
    }

    .lesson-point-box {
        font-size: 2.5vw;
        white-space: nowrap;
    }

    .lesson-checkbox img {
        width: 2rem;
    }

    .lesson-btn-box {
        margin-top: 0;
    }

    .text-content h1, .text-content h2 {
        font-size: 5vw;
        margin: 15% 0 2% 0;
    }

    .text-content h3, .text-content h4 {
        font-size: 4vw;
        margin: 5% 0 1% 0;
    }


    .text-content h5, .text-content h6 {
        font-size: 3vw;
    }

    .text-content p, .text-content li {
        font-size: 3.5vw;
    }

    .question-bottom-box {
        margin-bottom: 10%;
    }
}