input[type="checkbox"] {
    /*display: none;*/ /*元のチェックボックスは非表示*/
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
    input[type="checkbox"]:not(:checked),
    input[type="checkbox"]:checked {
        position: absolute;
        /*left: -9999px;*/
    }

        input[type="checkbox"]:not(:checked) + label,
        input[type="checkbox"]:checked + label {
            display: flex; /* Flexbox 化 */
            align-items: center; /* 上下中央寄せ */
            box-sizing: border-box;
            height: 25px;
            position: relative;
            padding-left: 25px; /*Labelをチェックボックス分右へ*/
            cursor: pointer;
            font-weight: 400; /*Label文字の太さ*/
            font-size: 12pt; /*Label文字サイズ*/
            color: #000000; /*Label文字カラー*/
        }

            /* checkbox aspect */
            input[type="checkbox"]:not(:checked) + label:before,
            input[type="checkbox"]:checked + label:before {
                content: '';
                position: absolute;
                left: 0;
                top: 50%; /* 親(label)の中心に合わせる */
                transform: translateY(-50%); /* 高さの半分だけ上に戻す */
                width: 16px;
                height: 16px;
                border: 2px solid #cccccc;
                background: #ffffff;
                border-radius: 4px;
                box-shadow: inset 0 1px 3px rgba(0,0,0,.1);
            }
            /* checked mark aspect */
            input[type="checkbox"]:not(:checked) + label:after,
            input[type="checkbox"]:checked + label:after {
                content: '\2713\0020';
                position: absolute;
                top: 50%; /* 親(label)中央に配置 */
                left: 0.1em;
                transform: translateY(-50%) scale(0); /* scale用に中央基準 */
                font-size: 1.3em;
                line-height: 1;
                color: #000000;
                transition: opacity 0.2s, transform 0.2s;
            }
            /* checked mark aspect changes */
            input[type="checkbox"]:not(:checked) + label:after {
                opacity: 0;
                transform: scale(0);
            }

            input[type="checkbox"]:checked + label:after {
                opacity: 1;
                transform: translateY(-50%) scale(1);
            }
    /* disabled checkbox */
    input[type="checkbox"]:disabled:not(:checked) + label:before,
    input[type="checkbox"]:disabled:checked + label:before {
        box-shadow: none;
        border-color: #bbbbbb;
        background-color: #dddddd;
    }

    input[type="checkbox"]:disabled:checked + label:after {
        color: #999999;
    }

    input[type="checkbox"]:disabled + label {
        color: #aaaaaa;
    }

/*hover時のcheckbox枠色 */
label:hover:before {
    border: 2px solid #4778d9 !important;
}

/*hover時のラベル文字色*/
input[type="checkbox"]:hover + label {
    color: #4778d9;
}