@media screen and (max-width: 820px) { 
        div#contents-R div#contents-footer {
        width: 720px;
        margin: 0 22px;
    }
}

@media screen and (max-width: 768px) { 
    div#contents-R div#contents-footer {
        width: 720px;
        margin: 0 3px;
    }
}


/* スマホ閲覧時のレスポンシブスタイル */
@media screen and (max-width: 600px) {
    div#classmenu .menulist-ro, div#classmenu div.menulist, div#classmenu .menulist-long.small, div#classmenu div.menulist-end {
        border-right: solid 1px #1E50A2 !important;
    }
    
    div#classmenu div.menulist-end {
        height: 45px !important;
    }
    
    div#contents-R div#contents-body div#contents-inner {
        width: 100%;
    }
    
    div#contents-R div#highgrade-top {
        width: 100%;
        height: 200px;
        padding: 50px 0 0 0;
        aspect-ratio: 531 / 102;
        background: url(../img/img01_sp.jpg) no-repeat 0 0;
        background-size: contain;
    }
    
    div#contents-R div#highgrade-top ul#anchor li.anchorlist {
        margin-left: 0;
    }
    
    div#sheet02 {
        width: 100%;
    }
    
    div#sheet02 div.sheet-header03 {
        width: 100%;
        background-image: none;
        background-color: #41bcde;
        color: white;
        font-size: 20px;
        padding: 15px;
        text-align: center;
        text-indent: 0;
        height: 83px;
    }
    
    div#sheet02 div.sheet-header03 .grade-label {
        background-color: white;
        color: #e80135;
        padding: 5px 15px;
        margin-right: 10px;
        border-radius: 3px;
        font-weight: bold;
    }
    
    div#sheet02 div.sheet-header03 .mobile-break::before {
        content: "\A";
        white-space: pre;
    }
    
    div#sheet02 div.sheet-header02 {
        width: 100%;
        background-image: none;
        background-color: #41bcde;
        color: white;
        font-size: 20px;
        padding: 15px;
        text-align: center;
        text-indent: 0;
        height: 58px;
    }
    
    div#sheet02 div.sheet-header02 .grade-label {
        background-color: white;
        color: #e80135;
        padding: 5px 15px;
        margin-right: 10px;
        border-radius: 3px;
        font-weight: bold;
    }
    
    div#sheet02 div.sheet-contents-frame {
        width: 100%;
        padding: 0;
    }
    
    div#sheet02 div.sheet-contents {
        width: 100%;
    }
    
    div#sheet02 div.sheet-contents .mobile-break-sentence::before {
        content: "\A";
        white-space: pre;
    }
    
    div#sheet02 div.sheet-contents p.sentenceTop {
        text-align: center;
    }
    
    div#sheet02 div.sheet-contents p.sentenceWeek {
        text-align: center;
    }
    
    div#sheet02 div.sheet-contents .mobile-break-week::before {
        content: "\A";
        white-space: pre;
    }
    
    div#sheet02 div.sheet-contents .mobile-break-content::before {
        content: "\A";
        white-space: pre;
    }
    
    div#sheet04 {
        width: 100%;
    }
    
    div#sheet04 div.sheet-header05 {
        width: 100%;
        background-image: none;
        background-color: #98c22e;
        color: white;
        font-size: 20px;
        padding: 15px;
        text-align: center;
        text-indent: 0;
        height: 110px;
    }
    
    div#sheet04 div.sheet-header05 .grade-label {
        background-color: white;
        color: #e80135;
        padding: 5px 15px;
        margin-right: 10px;
        border-radius: 3px;
        font-weight: bold;
    }
    
    div#sheet04 div.sheet-header05 .mobile-break-premium::before {
        content: "\A";
        white-space: pre;
    }
    
    div#sheet04 div.sheet-header05 .mobile-break-challenge::before {
        content: "\A";
        white-space: pre;
    }
    
    div#sheet04 div.sheet-contents-frame {
        width: 100%;
        padding: 0;
    }
    
    div#sheet04 div.sheet-contents {
        width: 100%;
    }
    
    div#sheet03 {
        width: 100%;
    }
    
    div#sheet03 div.sheet-header04 {
        width: 100%;
    }
    
    div#sheet03 div.sheet-contents-frame {
        width: 100%;
    }
    
    div#sheet03 div.sheet-contents {
        width: 100%;
    }
    
    div#sheet03 div.sheet-contents-frame {
        padding: 0;
    }
    
    div#sheet03 div.sheet-header04 {
        width: 100%;
        background-image: none;
        background-color: #e24965;
        color: white;
        font-size: 20px;
        text-align: center;
        text-indent: 0;
        height: 58px;
        line-height: 58px;
        font-weight: bold;
    }
    
    table.absence td:first-child {
        vertical-align: top;
    }
    
    .timetable-header-mobile {
        display: none;
    }
    
    table.timetable th {
        display: none;
    }
    
    table.timetable td {
        white-space: nowrap;
    }
    
    .timetable-header-mobile {
        display: block;
        font-size: 20px;
        font-weight: bold;
        margin: 10px 0;
    }
}