/* タブレット・スマホ閲覧時 */
@media screen and (max-width: 948px) {
    div#contents-L,
    div#contents-R {
        padding-left: 0;
    }
    
    /* タブレットのみ: contents-Lの幅設定 */
    div#contents div#contents-L {
        width: calc(100% - 7px) !important;
        margin: 0 auto !important;
        max-width: 720px;
    }
    
    /* タブレット: その他のコンテンツ要素の中央配置 */
    #contents-header,
    #contents-body,
    #contents-inner {
        margin: 0 auto;
    }
    
    /* classmenuのレスポンシブ対応 */
    div#classmenu {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        justify-content: space-between;
        box-sizing: border-box;
    }
    
    div#classmenu .menutop {
        width: 25%;
        margin: 0;
        order: -1;
        padding: 5px 0px 20px 10px !important;
        box-sizing: border-box;
        border-right: solid 1px #1E50A2;
    }
    
    /* タブレット: 4列x2行 */
    div#classmenu .menulist-ro,
    div#classmenu .menulist-long {
        width: 25%;
        margin: 0;
        box-sizing: border-box;
        display: block;
        border-right: solid 1px #1E50A2;
    }
    
    div#classmenu .menulist,
    div#classmenu .menulist-end {
        width: 25%;
        margin: 0;
        box-sizing: border-box;
        display: block;
        height: 40px;
        border-right: solid 1px #1E50A2;
    }
    
    /* タブレット: 特定要素の高さ設定 */
    div#classmenu .menulist-long,
    div#classmenu .menulist.second,
    div#classmenu .menulist-end {
        height: 45px !important;
    }
    
    div#classmenu .menulist.second {
        height: 45px !important;
    }
    
    .boder-r-none {
        border-right: none !important;
    }
    
    /* タブレット・スマホ: ホバー効果 */
    div#classmenu div a:hover {
        background-color: transparent;
        color: #1E50A2;
    }
}

@media screen and (max-width: 600px) {
    div#contents-L,
    div#contents-R {
        padding-left: 0;
    }
    
    /* スマホ: contents-Lの幅設定 */
    div#contents div#contents-L {
        width: 100% !important;
    }
    
    /* classmenuのレスポンシブ対応 */
    div#classmenu {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0;
        justify-content: space-between;
        box-sizing: border-box;
        margin-bottom: 30px;
    }
    
    div#classmenu .menutop {
        width: 50%;
        margin: 0;
        order: -1;
        padding: 5px 0px 20px 10px;
        box-sizing: border-box;
        border-right: solid 1px #1E50A2;
    }
    
    /* スマホ: 2列x4行 */
    div#classmenu .menulist-ro,
    div#classmenu .menulist,
    div#classmenu .menulist-long,
    div#classmenu .menulist-end {
        width: 50%;
        margin: 0;
        box-sizing: border-box;
        display: block;
        border-right: solid 1px #1E50A2;
    }
    
    /* スマホ: menulist-long.smallの右ボーダーを削除 */
    div#classmenu .menulist-long.small {
        border-right: none !important;
    }
    
    /* スマホ: menulist-roの右ボーダーを削除 */
    div#classmenu .menulist-ro {
        border-right: none !important;
    }
    
    /* スマホ: 高さとaタグ幅の設定 */
    div#classmenu .menulist-long {
        height: 50px !important;
    }
    
    div#classmenu .menutop,
    div#classmenu .menulist-ro,
    div#classmenu .menulist,
    div#classmenu .menulist-end {
        height: 30px !important;
    }
    
    div#classmenu .menulist-ro a,
    div#classmenu .menulist a,
    div#classmenu .menulist-long a,
    div#classmenu .menulist-end a {
        width: 100%;
        display: block;
    }
    
    /* スマホ: contents-headerとcontents-footerを非表示 */
    div#contents-R div#contents-header,
    div#contents-R div#contents-footer {
        display: none;
    }
    
    /* スマホ: contents-bodyのスタイル設定 */
    div#contents-R div#contents-body {
        width: 100%;
        padding: 0;
        background-image: none;
    }
}