@charset "utf-8";

/* レスポンシブ表示で、サイドナビのログイン・マイページ・ご利用方法を画面上部に持ってくるCSS */

#side-kouza-login-area{
    display: none;
}

/* スクリーンサイズが横幅980px以下の場合 */
@media only screen and (max-width: 980px) {

    /*side-kouza-login-areaを画面上部に持ってくる*/
    #container{
        width: auto;
        display:-webkit-box;
        display: -webkit-flex;
        display:-ms-flexbox;
        display: flex;
        -webkit-flex-wrap:wrap;
        -ms-flex-wrap:wrap;
        flex-wrap: wrap;
    }
    #side-kouza-login-area{
        order: 1;
        display: block;
    }
    #content{
        order: 2;
    }
    #side-kouza{
        order: 3;
    }


    /*マイページ・ご利用方法のボタン色変え*/
    p#my-page-button-sp {
        background: #60aef4;
        border: 2px solid #60aef4;
        border-bottom: 4px solid #4074a3;
    }
    p#my-page-button-sp a{
        color: #FFF;
    }
    p#use-button-sp {
        background: #4ebe74;
        border: 2px solid #4ebe74;
        border-bottom: 4px solid #368651;
    }
    p#use-button-sp a{
        color: #FFF;
    }

    /*ボタンのレイアウト調整*/
    p#login-button-sp,
    p#touroku-button-sp,
    p#my-page-button-sp,
    p#use-button-sp,
    p#logout-button-sp{
        width: 100%;
        margin: 0;
    }
    #login-button-sp-div,
    #my-page-button-sp-div{
        float: left;
        width: 48%;
        margin-bottom: 2px;
        padding: 2px;
    }
    #touroku-button-sp-div,
    #use-button-sp-div{
        float: right;
        width: 48%;
        margin-bottom: 2px;
        padding: 2px;
    }
    #logout-button-sp-div{
        margin-bottom: 2px;
        padding: 2px;
    }



}

/* スクリーンサイズが横幅450px以下の場合 */
@media only screen and (max-width: 450px) {

    /*ボタンのレイアウト調整*/
    #login-button-sp-div,
    #my-page-button-sp-div,
    #touroku-button-sp-div,
    #use-button-sp-div,
    #logout-button-sp-div{
        float: none;
        width: 98%;
        margin-bottom: 1px;
        padding: 2px;
    }

}