@media screen and (max-width: 767px) {
    #app input, #app select {
        margin-bottom: 10px;    
    }
    #app input, #app textarea, #app select {
        width: 100%;
    }
    #app .input-group > .input-group-addon {
        font-size: 10px;
    }
    #app .input-group > input {
        margin-bottom: 0;
    }
    #app .checkbox-inline > input, #app .radio-inline > input {
        width: auto;
    }
    
    #app .register_input, #app .register_confirm {
        padding-bottom: 98px;
    }
    #app #main_title {
        display: none;
    }

    #app #main_sp_title {
        margin:20px 15px 0;
        font-weight: bold;
        font-size: 16px;
        color:#5e5e5e;
        display:inline-block;
        line-height:1;
        vertical-align:bottom;
    }

    #app #register_navbar {
        bottom:30px;
    }

    #app #register_navbar #draft_button {
        margin-bottom: 10px;
    }

    #app #register_navbar #confirm_button {
        margin-bottom: 10px;
    }

    #app #app_footer {
        background-color:#fff;
        width: 100%;
        position:fixed;
        bottom:0;
    }

    #app #app_footer > p {
        padding: 2%;
        font-size: 10px;
        margin: 0;
        text-align: center;
    }

    #app #tab_study_abroad_content .study_btn {
        margin: 50px auto;
    }
    #app #tab_study_abroad_content .study_btn > a {
        font-size: 10px;
    }

    #app #tab_study_abroad_content .input-group.setting_ua1,
    #app #tab_study_abroad_content .input-group.setting_ua2 {
        width:  auto;
    }

    #app .container {
        display: flex;
        align-items: flex-end;
    }

    .tobitate-logo {
        margin-bottom:0;
        max-width: 124px;
    }
    .mext-logo {
        margin:0 0 0 20px;
        max-width: 126px;
    }
    .tobitate-logo img,
    .mext-logo img {
        width: 100%;
    }
}

@media screen and (min-width: 768px) {
    #app .register_input {
        padding-bottom: 150px;
    }
    #app .register_confirm {
        padding-bottom: 100px;
    }

    #app #main_title {
        margin:0 0 5px 30px;
        font-weight: bold;
        font-size: 20px;
        color:#5e5e5e;
        display:inline-block;
        line-height:1;
        vertical-align:bottom;
    }
    #app #main_sp_title {
        display: none;
    }

    #app #register_navbar {
        bottom:30px;
        min-width: 1500px;
    }
    
    #app #app_footer {
        padding:10px 0;
        background-color:#fff;
        width: 100%;
        position:fixed;
        bottom:0;
    }
    
    #app #app_footer > p {
        margin-bottom:0;
        margin-left:30px;
        font-size: 10px;
    }

    #app #tab_study_abroad_content .study_btn {
        width: 50%;
        margin: 50px auto;
    }

    #app #tab_study_abroad_content .input-group.setting_ua1 {
        width:  30%;
    }

    #app #tab_study_abroad_content .input-group.setting_ua2 {
        width:  35%;
    }

    #app #tab_study_abroad_content .pc_pr45, #app #tab_solving_problems .pc_pr45 {
        padding-right: 45px;
    }
    .tobitate-logo {
        margin-bottom:0;
        display:inline-block;
    }
    .mext-logo {
        float:right;
        padding:11px 0; 
        margin: 0;
    }
}