/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* スマホ */
/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
@media screen and (max-width: 480px) {
    /*----------------------------------------------------
    OD固定ページの内の基本レイアウト
----------------------------------------------------*/
    section.online_page .online-lp-wrapper {
        width: 100%;
    }
    section.online_page .online-lp-wrapper .online-design-list-wrapper,
    section.online_page .online-lp-wrapper h4.headline {
        margin: 0 10px;
    }

    /*----------------------------------------------------
    オンラインデザインテンプレートの場合
----------------------------------------------------*/
    section.online_page .content-box {
        padding: 0px;
    }

    /*----------------------------------------------------
    オンラインデザイン一覧
----------------------------------------------------*/
    .online-design-box .wrap {
        width: 47%;
        margin-bottom: 15px;
    }
    .online-design-box .wrap .meta a {
        width: 35%;
    }

    /*----------------------------------------------------
    入稿画面
----------------------------------------------------*/
    /* モーダル画面 */
    #onlineDesingModalBody .draft-confirm-image {
        width: 100%;
    }
    #onlineDesingModalBody .draft-list .thumbnail {
        height: 180px;
    }
    #onlineDesingModalBody .draft-confirm .thumbnail {
        height: 300px;
    }

    /*----------------------------------------------------
    フロント、テンプレートデザイン編集のモーダル
----------------------------------------------------*/
    #onlineDesingModalBody #online_panel_slider > .panel-main .left {
        width: 100%;
    }
    #onlineDesingModalBody #online_panel_slider > .panel-main .right {
        width: 100%;
        margin: 10px 0 0 0;
    }
    #onlineDesingModalBody .left .slider_content .box {
        width: 100%;
    }
    /* 出力ページ */
    #onlineDesingModalBody .bottom dl.info dd .page-list li {
        width: 100%;
    }
}

/* ===================================================================
CSS information(タブレット版)
=================================================================== */
@media only screen and (min-width: 767px) and (max-width: 1280px) {
    /*----------------------------------------------------
    OD固定ページの内の基本レイアウト
----------------------------------------------------*/
    section.online_page .online-lp-wrapper {
        width: 100%;
    }
}