@charset "UTF-8";

/* ==============
    Header
   ============== */

#header-container{
    height: auto;
    border-bottom: 1px solid #D6D6D6;
    background: #fff;
}

#header-container .logo{
    text-align: center;
}

#header-container .logo{
    display: block;
    overflow: hidden;
    width: 146px;
    height: 0;
    margin: 15px auto;
    padding: 40px 0 0;
    border: 0;
    background: url(../img/logo_sp@3x.png?12182) no-repeat left top;
    background-size: 146px 40px;
}


/* ==============
    Main
   ============== */

#main-container{
    min-height: calc(100vh - 50px);
    padding: 30px 0 0;
}

#main-container .wrapper{
    margin: 0 16px 30px;
}

#login .hx-ttl{
    background: transparent;
    text-align: center;
    color: #040404;
}

.dl-form{
    margin: 0 0 20px;
}

.dl-form dt{
    margin: 0 0 5px;
    font-weight: bold;
}

.dl-form dd{
    margin: 0 0 20px;
}

.dl-form dd input{
    width: 100%;
}

.pw-reminder{
    margin: 20px 0 0;
}

.login-txt{
    font-size: 13px; font-size: 1.3rem;
}

.btn-box{
    margin: 0;
}


/* ==========================================================================
    Media Queries
   ========================================================================== */

@media only screen and (min-width: 768px) {

    /* ==============
        WIDE: Header
       ============== */

       #header-container{
           margin: 20px 0 0;
       }

       #header-container .logo{
           width: 183px;
           padding: 50px 0 0;
           border: none;
           background: url(../img/logo_pc@3x.png?12182) no-repeat left top;
           background-size: 183px 50px;
       }

/* ==============
    WIDE: Main
   ============== */

    #main-container{
       min-height: calc(100vh - 80px);
       padding: 40px 0 0;
    }

    #main-container .wrapper{
       width: 480px;
       margin: 0 auto 40px;
    }

    .dl-form{
        margin: 0 0 40px;
    }



}