.wrap {
    color: #333;
}

/* ログイン・登録ボタン */
.link_btn_bg {
    display: inline-block;
    width: 100%;
    height: auto;
    color: #333;
    font-size: 16px;
    padding: 10px 0;
    margin: 10px 0 20px 0;
    text-align: center;
}
.link_btn.login {
    display: inline-block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin:10px 10px;
    color: #fff;
    background-color: #009900;
    border: 3px solid #003300;
    border-radius: 3px;
    transition: .0s;
    cursor:pointer;
    font-size: 16px;
    text-decoration: none;
}
.link_btn.login:hover{
    background-color: #006600;
}
.link_btn.regist {
    display: inline-block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin:10px 10px;
    color: #fff;
    background-color: #006DBB;
    border: 3px solid #003300;
    border-radius: 3px;
    transition: .0s;
    cursor:pointer;
    font-size: 16px;
    text-decoration: none;
}
.link_btn.regist:hover {
    background-color: #003366;
}


/* フォームセレクト */
.midashi {
    display: inline-block;
    width: 100%;
    height: auto;
    background-color: #005691;
    color: #fff;
    font-size: 18px;
    padding: 10px 0;
    margin: 0 0 10px 0;
    text-align: center;
}
.midashi.login {
    background-color: #009900;
}
.select_bg {
    display: inline-block;
    width: 100%;
    height: 40px;
    color: #333;
    font-size: 16px;
    padding: 10px 0;
    margin: 10px 0 20px 0;
    text-align: center;
}
.select_btn {
    display: inline-block;
    width: 250px;
    height: 40px;
    line-height: 40px;
    margin:0 10px;
    color: #666;
    background:#fff;
    border:3px solid #666;
    border-radius: 3px;
    transition: .0s;
    cursor:pointer;
    font-size: 16px;
}
.select_btn:hover {
    color: #006DBB;
    border:3px solid #006DBB;
}
.select_btn.select {
    color: #cc0000;
    border:3px solid #cc0000;
    background-color: #FFFFF3;
}
@media screen and (min-device-width : 0px) and (max-device-width : 419.9px) {
    .select_btn {
        width: 170px;
        margin: 0;
    }
}


/* ログインフォーム */
.set_login_form_bg {
    display: inline-block;
    width: 100%;
    min-height: 400px;
    height: auto;
    position: relative;
    background-color: #fff;
    border: 3px solid #009900;
    box-sizing: border-box;
    padding: 20px 0;
    margin: 0 0 30px 0;
    text-align: center;
}
.set_login_form_bg.google {
    display: inline-block;
}
.set_login_form_bg.google .g_id_signin div {
    display: inline-block;
}
.set_login_form_bg.mail {
    display: none;
}
.set_login_form_bg .login_form {
    display: inline-block;
    width: 400px;
    height: auto;
}
.form_head {
    text-align: center;
    font-size: 16px;
    margin: 10px 0 5px 0;
}
.form_text {
    width: 300px;
    height: 40px;
    margin: 0 0 20px 0;
}
.set_login_form_bg .login_form .login_btn {
    display: inline-block;
    width: 300px;
    height: 40px;
    background-color: #009900;
    border: 2px solid #003300;
    border-radius: 5px;
    margin: 10px 0;
    text-align: center;
    color: #fff;
    font-size: 20px;
    cursor:pointer;
}
.set_login_form_bg .login_form .login_btn:hover {
    background-color: #006600;
}
@media screen and (min-device-width : 0px) and (max-device-width : 419.9px) {
    .set_login_form_bg .login_form {
        width: 100%;
    }
}


/* 新規登録フォーム */
.set_regist_form_bg {
    display: inline-block;
    width: 100%;
    min-height: 400px;
    height: auto;
    position: relative;
    background-color: #fff;
    border: 3px solid #006DBB;
    box-sizing: border-box;
    padding: 20px 0;
    margin: 0 0 30px 0;
    text-align: center;
}
.set_regist_form_bg.google {
    display: inline-block;
}
.set_regist_form_bg.google .g_id_signin div {
    display: inline-block;
}
.set_regist_form_bg.mail {
    display: none;
}
.set_regist_form_bg .regist_form {
    display: inline-block;
    width: 80%;
    height: auto;
}
.form_head {
    text-align: center;
    font-size: 16px;
    margin: 10px 0 5px 0;
}
.form_text {
    width: 300px;
    height: 40px;
    margin: 0 0 20px 0;
}
.set_regist_form_bg .regist_form .regist_btn {
    display: inline-block;
    width: 300px;
    height: 40px;
    background-color: #006DBB;
    border: 2px solid #003300;
    border-radius: 5px;
    margin: 10px 0;
    text-align: center;
    color: #fff;
    font-size: 20px;
    cursor:pointer;
}
.set_regist_form_bg .regist_form .regist_btn:hover {
    background-color: #003366;
}


/* キャラクター作成フォーム */
.reg_char_bg {
    display: inline-block;
    width: 100%;
    min-height: 400px;
    height: auto;
    position: relative;
    background-color: #fff;
    border: 3px solid #006DBB;
    box-sizing: border-box;
    padding: 20px 0;
    margin: 0 0 30px 0;
    text-align: center;
}
.reg_char_bg .regist_form {
    display: inline-block;
    width: 80%;
    height: auto;
}
.reg_char_bg .regist_form .regist_btn {
    display: inline-block;
    width: 300px;
    height: 40px;
    background-color: #006DBB;
    border: 2px solid #003300;
    border-radius: 5px;
    margin: 10px 0;
    text-align: center;
    color: #fff;
    font-size: 16;
    cursor:pointer;
}
.reg_char_bg .regist_form .regist_btn:hover {
    background-color: #003366;
}
.reg_char_bg .regist_form.cancel .regist_btn {
    background-color: #999;
    border: 2px solid #000;
    color: #fff;
}
.reg_char_bg .regist_form.cancel .regist_btn:hover {
    background-color: #666;
}

.reg_char_bg .radio_label {
    display: inline-block;
    padding: 3px 10px;
    margin: 10px 5px;
    border-radius: 4px;
    background:#fff;
    border:2px solid #666;
    box-sizing: border-box;
    color: #666;
    cursor:pointer;
}
.reg_char_bg .radio_label:hover {
    color: #ff0000;
    border:2px solid #ff0000;
    background:#FDFFDB;
    box-sizing: border-box;
}
.reg_char_bg input[type=radio].input_radio_data {
    display: none;
}
.reg_char_bg input:checked + label {
    color: #ff0000;
    border:2px solid #ff0000;
    background:#FDFFDB;
    box-sizing: border-box;
}
.radio_label img {
    width: 100px;
    height: 100px;
}

.job_info {
    display: none;
    color: #333;
    background:#eee;
    padding: 5px 5px;
    margin: 5px 0px;
}
.job_param {
    display: none;
    color: #00B3C0;
    background:#fff;
    padding: 5px 5px;
    margin: 5px 0px;
    font-weight: bold;
}
#job_info_warrior, #job_param_warrior {
    display: inline-block;
}

.reg_char_bg .data_head {
    text-align: center;
    font-size: 16px;
    margin: 10px 0;
    background:#333;
    padding: 5px 0px;
    color: #fff;
}
.reg_char_bg .data_text {
    
}
.reg_char_bg .data_text img {
    width: 100px;
    height: 100px;
}

@media screen and (min-device-width : 0px) and (max-device-width : 419.9px) {
    .set_regist_form_bg .regist_form {
        width: 100%;
    }
}