/* デフォルトでスクロール案内を非表示 */
div.pricelist .scroll-notice {
    display: none;
}

@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) {
    /* スマホ: contents-inner div#topのスタイル設定 */
    div#contents-R div#contents-body div#contents-inner {
        width: 100%;
    }
    div#contents-inner div#top {
        aspect-ratio: 710 / 150;
        height: auto;
        background-size: cover;
        width: 100%;
    }
    
    /* スマホ: priceintroのスタイル設定 */
    div#contents-inner div#priceintro {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    
    div#contents-inner div#priceintro img {
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-bottom: 10px;
    }
    
    /* スマホ: anchorのスタイル設定 */
    div#contents-inner div#anchor {
        width: 100%;
        text-align: left;
    }
    
    /* スマホ: pricelistのスタイル設定 */
    div#contents-inner div.pricelist {
        width: 100%;
        padding: 0 0 20px;
    }
    
    /* スマホ: スクロール案内の表示設定 */
    div#contents-inner div.pricelist .scroll-notice {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 10px;
        font-size: 13px;
    }
    
    div#contents-inner div.pricelist .scroll-notice .triangle-left,
    div#contents-inner div.pricelist .scroll-notice .triangle-right {
        color: #666;
        margin: 0 8px;
    }
    
    div#contents-inner div.pricelist .scroll-notice .scroll-text {
        color: #333;
    }
    
    div#contents-inner div.pricelist table {
        width: 100%;
        min-width: 100%;
        white-space: nowrap;
        display: block;
        overflow-x: auto;
        overflow-y: hidden;
    }
    
    /* スマホ: テーブルセルのパディング設定 */
    div#contents-inner div.pricelist tr.schoolyear0 th,
    div#contents-inner div.pricelist tr.schoolyear1 td,
    div#contents-inner div.pricelist tr.schoolyear2 td {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    /* スマホ: コース案内テキストの改行設定 */
    div#contents-inner div.pricelist .course-notice .mobile-break::before {
        content: "\A";
        white-space: pre;
    }
    
    /* スマホ: courceセクションのスタイル設定 */
    div#contents-inner div#cource {
        width: 100%;
    }
    
    div#contents-inner div#cource div#sheet-header {
        width: 100%;
        background: url(../img/sheet1-header.jpg) no-repeat left -20px top;
    }
    
    div#contents-inner div#cource div#sheet-body {
        width: 100%;
        margin: 0;
    }
    
    div#contents-inner div#cource div#sheet-body div.list {
        width: 100%;
        padding: 0px 10px 0 15px;
    }
    
    div.indivi-link {
        width: 100%;
    }
    
    div.indivi-link a {
        width: 100%;
    }
    
    div.indivi-link a.vicinty-btn {
        background: url(../img/link03_sp.jpg) no-repeat left top;
        background-size: contain;
    }
    
    div.indivi-link a.vicinty-btn:hover {
        background: url(../img/link03_sp.jpg) no-repeat left top;
        background-size: contain;
    }
    
    /* スマホ: 「詳しくはコチラ」リンクを画像の下に配置 */
    div#contents-inner div#cource div#sheet-body div.list.has-detail-link {
        display: flex;
        flex-direction: column;
    }
    
    div#contents-inner div#cource div#sheet-body div.list.has-detail-link img {
        order: 1;
        max-width: 200px;
    }
    
    div#contents-inner div#cource div#sheet-body div.list.has-detail-link span {
        order: 2;
        margin-top: 0px;
        margin-bottom: 10px;
        line-height: 1;
        font-size: 14px !important;
    }
    
    div#contents-inner div#cource div#sheet-body div.list.has-detail-link p {
        order: 3;
    }
    
    div#contents-inner div#cource div#sheet-body div.list-title.has-detail-link {
        display: flex;
        flex-direction: column;
    }
    
    div#contents-inner div#cource div#sheet-body div.list-title.has-detail-link img {
        order: 1;
        max-width: 306px;
    }
    
    div#contents-inner div#cource div#sheet-body div.list-title.has-detail-link span {
        order: 2;
        margin-top: 0px;
        margin-bottom: 10px;
        line-height: 1;
        font-size: 14px !important;
    }
    
    /* スマホ: list-titleの幅を100%に設定 */
    div#contents-inner div#cource div#sheet-body div.list-title {
        width: 100%;
    }
}