@media only screen and (max-width: 1200px) {
    ul.video_clip_list {
        padding: 5px;
        width: 100%;
    }
    ul.video_clip_list>li {
        width: calc(50% - 10px);
        margin: 5px;
    }
    ul.video_clip_list li>p {
        padding: 0 5px;
        line-height: 30px;
        font-size: 15px;
    }
}

/* Mobile */
@media only screen and (max-width: 420px) {
    .video_panel_button {
        margin: 0 auto;
        padding: 0 20px;
    }
    .video_panel_button>button {
        border-radius: 14px;
        width: 41px;
        height: 35px;
    }
    .video_panel_button>button>img {
        width: 22px;
        height: 22px;
        vertical-align: middle;
    }
    .video_panel_button>div {
        margin: 33px auto !important;
        width: unset !important;
        height: 30px !important;
        line-height: 30px !important;
    }
    .video_panel_button>div>p {
        font-size: 50px;
    }
    .video_panel_button>div>p:not(:empty)::before {
        left: calc(50% - 50px);
        bottom: -20%;
        font-size: 17px;
    }

    #edu_panel {
        background-color: #FFFDCA;
    }
    #edu_day_panel,
    #edu_song_panel {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100%;
        font-size: 16px;
        background-position: top center;
        background-size: 480px;
    }
    #edu_day_panel>ul:nth-of-type(1),
    #edu_song_panel>ul:nth-of-type(1) {
        justify-content: center;
        padding-top: 78px;
    }
    #edu_day_panel>ul:nth-of-type(2),
    #edu_song_panel>ul:nth-of-type(2) {
        display: none;
    }
    #edu_day_panel>ul:nth-of-type(3),
    #edu_song_panel>ul:nth-of-type(3) {
        margin-top: 10px;
        padding-bottom: 15px;
    }
    #edu_day_panel>ul:first-child>li,
    #edu_song_panel>ul:first-child>li {
        position: relative;
        display: flex;
        align-items: flex-end;
        margin: 1px;
        width: calc(20vw - 3px * 2);
        height: calc((20vw - 3px * 2)/4*3);
        line-height: calc((20vw - 3px * 2)/4*3);
    }
    #edu_day_panel>ul:first-child>li>*,
    #edu_song_panel>ul:first-child>li>* {
        display: none;
    }
    #edu_day_panel>ul:nth-of-type(3) ul>li,
    #edu_song_panel>ul:nth-of-type(3) ul>li {
        margin: 1px;
        width: calc(20vw - 3px * 2);
        height: 51px;
        line-height: 51px;
    }
    label.watched::after {
        zoom: 0.5;
    }
    #edu_day_panel>ul:nth-of-type(1)>li:last-child label,
    #edu_song_panel>ul:nth-of-type(1)>li:last-child label {
        width: 100%;
        height: 28px;
        line-height: 28px;
        font-size: 12px;
    }
    #edu_day_panel>ul:nth-of-type(3)>li:first-child>ul>li,
    #edu_song_panel>ul:nth-of-type(3)>li:first-child>ul>li {
        margin: 1px;
        font-size: 16px;
        height: 23px;
        line-height: 23px;
    }
    #edu_song_panel>ul:nth-of-type(3) label {
        padding: 3px;
        font-size: 14px !important;
        line-height: 14px !important;
    }

    input[name="edu"]:checked ~ article>.video_panel_button>div {
        width: 70% !important;
    }
    input[name="edu"]:checked ~ article>.video_panel_button>div>p {
        font-size: 14px;
    }
    #video_view {
        width: 100%;
    }
    #video_view>div {
        margin: 0 5px;
        width: calc(100% - 5px * 2);
        padding-top: calc((100% - 5px * 2) / 16 * 9);
    }

    #clip_panel {
        margin-top: 22px;
        padding-top: 25px;
        min-width: unset;
        min-height: 120px;
    }
}

/* Tablet */
@media only screen and (max-width: 1200px) and (min-width: 420px) {
    #edu_panel.class,
    #video_panel.class {
        zoom: 0.6;
    }
    #video_panel>#video_view {
        width: calc(100vh * (16 / 9) * 1.4);
        max-width: 98%;
    }
    #clip_panel,
    #clip_panel>.video_clip_list {
        padding: 2%;
        width: 100%;
        min-width: unset;
        justify-content: space-between;
    }
    #edu_day_panel>ul:first-child>li>*,
    #edu_song_panel>ul:first-child>li>* {
        display: none;
    }
}