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

/* デスクトップ時はモバイルタイトルを非表示 */
div#contents-inner div#tutorial div#sheet-header .mobile-title {
    display: none;
}

/* デスクトップ時はモバイルヘッダー画像を非表示 */
div#contents-inner div#conversation div#sheet-header .mobile-header-img {
    display: none;
}

/* デスクトップ時はモバイルタイトルヘッダーを非表示 */
div#contents-inner div#conversation div#sheet-header .mobile-title-header {
    display: none;
}

/* デスクトップ時はモバイルクラス情報を非表示 */
div#contents-inner div#conversation div#sheet-header .mobile-class-info {
    display: none;
}

/* デスクトップとタブレット時はPC版を表示、スマホ版を非表示 */
div#sho6only_pc {
    display: block;
}

div#sho6only_sp {
    display: none;
}

@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 div.menulist {
        border-right: solid 1px #1E50A2 !important;
    }
    
    div#classmenu .menulist-long.small,
    div#classmenu div.menulist-end {
        border-right: solid 1px #1E50A2 !important;
    }
    
    div#classmenu div.menulist-long.small {
        height: 50px !important;
    }

    div#classmenu div.menulist-end {
        height: 45px !important;
    }
    
    div#contents-R div#contents-body div#contents-inner,
    div#contents-inner div#top,
    div#contents-inner div#anchor {
        width: 100%;
    }
    
    div#contents-inner div#top {
        background-size: contain;
        height: 90px;
    }
    
    div#contents-inner div#anchor {
        text-align: left;
        padding: 0;
    }
    
    div#contents-inner div#tutorial,
    div#contents-inner div#tutorial div#sheet-header,
    div#contents-inner div#tutorial div#sheet-body {
        width: 100%;
    }
    
    div#contents-inner div#tutorial div#sheet-header {
        width: 100%;
        background-image: none;
        background-color: #41bcde;
        color: white;
        font-size: 20px;
        padding: 15px;
        text-align: center;
        text-indent: 0;
        height: 100px;
    }
    
    div#contents-inner div#tutorial div#sheet-header .mobile-title {
        display: block;
    }
    
    div#contents-inner div#tutorial div#sheet-header .mobile-title .grade-label {
        background-color: white;
        color: #e80135;
        padding: 5px 15px;
        margin-right: 10px;
        border-radius: 3px;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }
    
    div#contents-inner div#tutorial div#sheet-body {
        margin: 0;
    }
    
    div#contents-inner div#tutorial div#sheet-body div.area {
        padding: 15px;
    }
    
    div#contents-inner div#tutorial div#sheet-body div.area p.tutorial,
    div#contents-inner div#tutorial div#sheet-body div.area div.detail.fullsize {
        width: 100%;
    }
    
    div#contents-inner div#sho6only {
        width: 100%;
        padding: 0;
    }
    
    div#sho6only_pc {
        display: none;
    }
    
    div#sho6only_sp {
        display: block;
    }
    
    div#sho6only-sheet-header {
        width: 100%;
        background-image: none;
        background-color: #df031c;
        color: white;
        font-size: 20px;
        padding: 15px;
        text-align: center;
        text-indent: 0;
        height: 100px;
    }
    
    div#sho6only-sheet-header .mobile-title .grade-label {
        background-color: white;
        color: #e80135;
        padding: 5px 15px;
        margin-right: 10px;
        border-radius: 3px;
        font-weight: bold;
        display: block;
        margin-bottom: 10px;
    }
    
    div#sho6only-sheet-body {
        margin: 0;
        border: 2px solid #e80135;
        padding: 0;
    }
    
    div#sho6only-sheet-body div.area {
        padding: 15px;
    }
    
    div#sho6only-sheet-body div.area p.tutorial,
    div#sho6only-sheet-body div.area p.course-info {
        width: 100%;
    }
    
    div#sho6only-sheet-body div.area p.course-info {
        margin: 5px 0;
        font-size: 16px;
        text-align: center;
    }
    
    div#sho6only-sheet-body div.area p.course-info.price-highlight {
        background-color: #fffecc;
        border: 2px solid #ef001c;
        padding: 10px;
        margin: 10px 0;
        font-weight: bold;
        text-align: center;
    }
    
    div#sho6only-sheet-body div.area p.course-info.price-highlight span.price-amount {
        font-size: 120%;
        color: #e80135;
    }
    
    div#sho6only-sheet-body div.area img.tutorial-heading-img {
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }
    
    div#sho6only-sheet-body div.area p.tutorial.special-text {
        color: #ee922d;
        font-weight: bold;
        text-align: left;
    }
    
    div#sho6only-sheet-body div.area p.tutorial.special-text span.highlight-text {
        font-size: 120%;
        color: #e80135;
    }
    
    div#sho6only-sheet-body div.area p.reference-note {
        color: #666;
        font-size: 16px;
        font-weight: bold;
        margin-top: 15px;
    }
    
    div#sho6only-sheet-body div.area p.reference-note a.reference-link {
        color: #009cdd;
        text-decoration: underline;
    }
    
    div#sho6only-sheet-body div.area p.reference-note a.reference-link:hover {
        text-decoration: underline;
    }
    
    div#sho6only-sheet-body div.area a img.bottom-image {
        width: 100%;
        height: auto;
        margin-top: 15px;
        display: block;
    }
    
    div#contents-inner div#conversation,
    div#contents-inner div#conversation div#sheet-header,
    div#contents-inner div#conversation div#sheet-header p.tutorial3 {
        width: 100%;
    }
    
    div#contents-inner div#conversation div#sheet-header {
        background-image: url('../img/sheet2-backimg_sp.jpg');
        background-repeat: no-repeat;
        background-position: bottom right;
        background-size: 50%;
        height: auto;
        padding: 15px;
        padding-bottom: 100px;
        border: 2px solid #0a8f64;
    }
    
    div#contents-inner div#conversation div#sheet-header .mobile-title-header {
        display: block;
        background-color: #0a8f64;
        color: white;
        font-size: 20px;
        text-align: center;
        padding: 15px 0;
        margin: -15px -15px 15px -15px;
    }
    
    div#contents-inner div#conversation div#sheet-header .mobile-title-header .title-label {
        background-color: white;
        color: #0a8f64;
        padding: 5px 15px;
        margin-left: 15px;
        margin-right: 15px;
        border-radius: 3px;
        font-weight: bold;
        display: block;
    }
    
    div#contents-inner div#conversation div#sheet-header .mobile-class-info {
        display: block;
        background-color: #fffecc;
        border: 2px solid #0a8f64;
        padding: 10px;
        margin: 10px 0;
        font-weight: bold;
        text-align: center;
        font-size: 16px;
    }
    
    div#contents-inner div#conversation div#sheet-header .mobile-header-img {
        display: block;
        width: 100%;
        height: auto;
        margin-bottom: 15px;
    }
}