<p class="input1 mB12"><input class="cInput1" type="serial" name="apply_serial" id="apply_serial" size="30" maxlength="14" placeholder="enter serial code here"><a href="#" id="jsSendSerial" class="jsBtnNextScene cBtn1 disabled" data-applyurl="/apply/emlogin.php">次へ</a></p>



					<p id="checkPolicy" class="mB36"><label><input class="cCheckbox1" type="checkbox">利用規約に同意</label><a href="#" id="jsApply" class="cBtn1 jsAgreeStatus disabled">次へ</a></p>

.cInput1,.cInput2 {
    padding:0 20px;
    height:100px;
    background:white;
    border:6px solid black;
    font-size:42px;
    vertical-align: top;
    width:496px;
}
.cInput2{
    width: 100%;
}

.cBtn1 {
    display:inline-block;
    width:170px;
    background:black;
    line-height:100px;
    text-decoration:none;
    text-align:center;
    color:#fff;
    font-size:18px;
    // font-weight:bold;
    vertical-align: top;
    // &:hover {
    //     background:#fff;
    //     color:black;
    // }
    &.disabled {
        cursor:default;
        pointer-events:none;
        filter: grayscale(75%) opacity(50%);
    }
}

.cRadio1 {
    margin-right:58px;
    width:0px;
    height:46px;
    position:relative;
    cursor:pointer;
    vertical-align:text-bottom;
    &:before,
    &:after {
        content:'';
        display:inline-block;
        position:absolute;
        left:0px;
    }
    &:before {
        width:46px;
        height:46px;
        top:9px;
        border:6px solid black;
        border-radius: 100%;
    }
    //チェックアイコン
    &:after {
        width:22px;
        height:22px;
        top:21px; left: 12px;
        background:gray;
        border-radius: 100%;
        transform:scale(0);
        transition: transform .2s ease;
    }
    &:checked:after {
        // display:block;
        transform:scale(1);
    }
}

.cCheckbox1 {
    margin-right:58px;
    width:0px;
    height:30px;
    position:relative;
    cursor:pointer;
    vertical-align:text-bottom;
    &:before,
    &:after {
        content:'';
        display:inline-block;
        position:absolute;
        left:0px;
    }
    &:before {
        width:30px;
        height:30px;
        top:7px;
        border:2px solid black;
        background:gray;
    }
    //チェックアイコン
    &:after {
        width:0px;
        height:25px;
        left: 10px;
        top:19px;
        overflow: hidden;
        // background:url(../images/common/ico_check.png) no-repeat left top;
        transition: width .3s;
        content:'✓';

        // display:none;
    }
    &:checked:after {
        width:25px;
        // display:block;
    }
}

        //注意事項確認まで選択させない
        $('#checkPolicy').find('.cCheckbox1').on('click', function(){
            if($(this).prop('checked')){
                $('.jsAgreeStatus').removeClass('disabled');
            }else{
                $('.jsAgreeStatus').addClass('disabled');
            }
        });
        //シリアル入力制御
        $('#apply_serial').on('keypress', function(){
            var result = insertSpace(this);
                console.log(result);
            (result >=13)?$('#jsSendSerial').removeClass('disabled'): $('#jsSendSerial').addClass('disabled');

        }).on('keyup', function(e){
            if(e.keyCode == 46 || e.keyCode == 8){ //del backspace→消しているのでボタンはおせないように
                if($(this).val().length < 14){
                    $('#jsSendSerial').addClass('disabled');
                }

            }else if(e.keyCode == 9|| e.keyCode == 13){
                var result = insertSpace(this);
                (result >=13)?$('#jsSendSerial').removeClass('disabled'): $('#jsSendSerial').addClass('disabled');
            }
        });

        // //チェックボックス択一
        // $('.jsMmStatus').on('click', function() {
        //     if ($(this).prop('checked')){
        //         $('.jsMmStatus').prop('checked', false);
        //         $(this).prop('checked', true);
        //     }
        // });
    // };

    //シリアルを入力中に4桁ごとにセパレーターを入れる
    var insertSpace = function(e) {
        if($(e).val()=='') return;
        var newVal, val;
        val = $(e).val().replace(/\x20/g, "");
        // newVal = val.replace(/(\d{4})/g, "$1 ");
        newVal = val.replace(/(.{4})/g, "$1 ");
        $(e).val(newVal);
        return newVal.length;
    };