﻿/* 仮登録時画面の共通CSS */

@media screen and (max-width:320px) {
    .cont_logo-size230 {
        height: 41px !important;
        margin: 13px 0 0 5px !important;
    }
}


@media screen and (max-width:950px) {

    /* --------------------------
        メニュー展開時の背景固定 
       -------------------------- */
    html.is-fixed,
    html.is-fixed body {
        overflow: hidden;
    }

    /* ----------
        ヘッダー 
       ---------- */
    .cont_header {
        background: #FFF;
        height: 70px;
        padding: 0;
        position: fixed;
        width: 100%;
        z-index: 3;
    }

    .page_title {
        display: none;
    }

    .cont_logo-size230 {
        height: 47px;
        margin: 11px 0 0 5px;
    }

    .headerPadding {
        padding-top: 70px;
    }

    /* --------------
        メニュー制御
       -------------- */

    /* PCメニュー非表示 */
    #gMenu-pc {
        display: none;
    }

    /* SPメニュー表示 */
    #gMenu-sp {
        display: block;
    }

    /* ボタンのスタイル */
    .gMenu_menuBtn,
    .gMenu_logout {
        display: block;
        justify-content: center;
        padding-top: 10px;
        position: fixed;
        text-align: center;
        transition: all .2s linear;
    }

    /* メニューボタン */
    .gMenu_menuBtn {
        background: url(../img/icon/menu_30.png) center no-repeat;
        background-size: 30px;
        color: #56BF56;
        height: 50px;
        top: 0;
        right: 0;
        width: 60px;
        z-index: 3;
    }

    .menuTxt {
        display: block;
        font-size: 14px;
        left: 6px;
        position: absolute;
        top: 45px;
        transition: all .1s linear;
    }

    .gMenu_menuBtn img {
        margin-bottom: 2px;
    }

    /* 閉じるボタンのスタイル */
    .gMenu_menuBtn.is-close {
        background: url(../img/icon/close.png) no-repeat;
        background-size: 50px;
        top: 5px;
        right: 0px;
        transition: all .1s .2s linear;
        z-index: 4;
    }

    .menuTxt.is-close {
        font-size: 0px;
        left: 0;
        top: 55px;
    }

        .menuTxt.is-close:before {
            display: none;
            transition: all .2s .3s linear;
        }

    /* ログアウトボタン */
    .gMenu_logout {
        background: #56BF56;
        color: #FFF;
        font-size: 12px;
        height: 70px;
        right: 58px;
        top: 0;
        width: 60px;
    }

        .gMenu_logout img {
            margin-bottom: 6px;
        }

    .gMenu_logoutLink {
        height: 70px;
        width: 60px;
    }


    /* 展開メニューのスタイル */
    .gMenu_menuArea {
        align-items: end;
        background: #FFF;
        display: flex;
        flex-direction: column;
        font-size: 18px;
        height: 100vh;
        opacity: 0.9;
        overflow-x: scroll;
        position: fixed;
        right: 0;
        top: 0;
        transform: translateX(100vw);
        transition: all .3s .1s linear;
        width: 85vw;
        z-index: 3;
    }

    #gMenu_mask {
        display: none;
        transition: all .3s;
    }

        #gMenu_mask.is-active {
            display: block;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #FFF;
            opacity: 0.8;
            z-index: 2;
            cursor: pointer;
        }

    /* メニューを閉じる */
    .gMenu_menuArea.is-active {
        transform: translateX(0);
        transition: all .2s linear;
    }

    .gMenuHeader {
        background: #56BF56;
        border-bottom: 1px solid #FFF;
        height: 170px;
        width: 100%;
    }

    /* メニューリストのスタイル */
    .gMenu_list {
        border-bottom: 1px solid #EBEBEB;
        box-sizing: border-box;
        height: auto;
        padding: 20px 0;
        width: 100%;
    }

        .gMenu_list:first-child {
            border-top: 1px solid #FFF;
        }

    .menuArea_header {
        line-height: 200px;
    }

    .gMenu_margin {
        margin-bottom: 120px;
    }

    /* サイトロゴ */
    .siteLogo {
        align-items: center;
        position: relative;
        display: flex;
        justify-content: center;
        left: 50%;
        padding: 20px 0;
        transform: translateX(-50%);
        z-index: 4;
    }

    .title {
        background: #B8F3BE;
        color: #002E05;
        padding: 10px 0 10px 20px;
        text-align: left;
    }

    .link {
        line-height: 30px;
        padding-left: 15px;
        text-align: left;
    }

        .link img {
            margin-right: 5px;
        }

    .del {
        margin-left: 0 !important;
    }

    /* ------------
        コンテンツ
       ------------ */
    /* 表示領域 */
    .contents,
    .contents_multi{
        margin: 20px auto 10px auto;
        padding: 10px 20px;
        width: calc(100vw - 40px);
    }

        .contents > h2 {
            display: none;
        }

    .contMult_txt {
        font-size: 15px;
        margin: 10px 0;
    }

    .contMult_txt.-center {
        text-align: left !important;
        font-size: 15px;
    }

    .temp_inqNum ,
    .cont_box {
        width: 100%;
    }

    .cont_box {
        margin-bottom: 20px;
        padding: 15px 14px;
    }

    .cont_box-title {
        font-size: 17px;
        line-height: 1.7;
    }

    .spTxtLeft {
        text-align: left;
    }

    .cont_txt br {
        display: none;
    }

    .cont_txt-sp {
        font-size: 14px;
    }

    .cont_box p {
        padding: 0;
        text-indent: initial;
    }


    /* --------------------
        ステップバー
       -------------------- */
    .temp_proce-pc {
        display: none;
    }

    .temp_proce-sp {
        display: block;
        margin-bottom: 20px;
    }

    .progressbar {
        position: relative;
        margin: 0;
        padding: 0;
        display: flex;
    }

        .progressbar li {
            position: relative;
            list-style-type: none;
            text-align: center;
            text-transform: uppercase;
            width: 33.333%;
            color: #999999;
            counter-increment: steps;
            font-size: 10px;
        }

            .progressbar li:before {
                display: block;
                width: 20px;
                height: 20px;
                margin: 5px auto;
                content: '';
                line-height: 20px;
                font-size: 12px;
                text-align: center;
                border-radius: 50%;
                background-color: #F5F5F5;
                content: counter(steps);
            }

            .progressbar li:after {
                position: absolute;
                z-index: -1;
                top: 15px;
                left: -50%;
                width: 100%;
                height: 2px;
                content: '';
                background-color: #F5F5F5;
            }

            .progressbar li:first-child:after {
                content: none;
            }

            .progressbar li.active {
                color: #00C614;
            }

            .progressbar li.complete {
                color: #71d400;
                background: #FFF !important;
            }

            .progressbar li.active:before {
                background-color: #00C614;
                color: #FFF;
            }
            .progressbar li.complete:before {
                background-color: #71d400;
                color: #FFF;
            }

                .progressbar li.active:after,
                .progressbar li.complete:after {
                    background-color: #00C614;
                }



    /* --------------------
        ページトップボタン
       -------------------- */
    #pageTop {
        align-items: center;
        background: #00C614 url(../img/icon/top.png) center no-repeat;
        background-size: 30px;
        bottom: 5px;
        display: flex;
        height: 40px;
        justify-content: center;
        position: fixed;
        right: 0px;
        width: 40px;
        z-index: 1;
    }

        #pageTop:hover {
            background: #00C614 url(../img/icon/top.png) center no-repeat;
            background-size: 30px;
        }

    /* ----------
        フッター 
       ---------- */
    footer {
        background: none;
        height: 100%;
        margin-bottom: 10px;
        padding: 0;
    }

    .cont_footer-pc {
        display: none;
    }

    .footer_copyrights {
        color: #002E05;
    }
}
