input[type="checkbox"][name="term_and_conditions"], input[type="checkbox"][name="agree_privacy_policy"] {
    display: none; /* checkboxを非表示にする */
}

.agree_privacy_policy_label, .term_and_conditions_label {
    position: relative; /* ボックスの位置を指定する */
    padding: 0 0 0 60px; /* ボックス内側の余白を指定する */
    margin-left: -15px;
}
.agree_privacy_policy_label:hover:after, .term_and_conditions_label:hover:after {
    border-color: #0171bd; /* ボックスの境界線を実線で指定する */
}

.term_and_conditions_label:after,
.term_and_conditions_label:before,
.agree_privacy_policy_label:after,
.agree_privacy_policy_label:before {
    position: absolute; /* ボックスの位置を指定する */
    content: ""; /* ボックスのコンテンツ */
    display: block; /* ブロックレベル要素化する */
    top: 50%; /* 上部から配置の基準位置を決める */
}

.term_and_conditions_label:after,
.agree_privacy_policy_label:after {
    left: 15px; /* 左から配置の基準位置を決める */
    margin-top: -14px; /* チェック枠の位置 */
    width: 30px; /* ボックスの横幅を指定する */
    height: 30px; /* ボックスの高さを指定する */
    border: 2px solid #ccc; /* ボックスの境界線を実線で指定する */
    border-radius: 6px; /* ボックスの角丸を指定する */
}

.term_and_conditions_label:before,
.agree_privacy_policy_label:before {
    left: 15px; /* 左から配置の基準位置を決める */
    margin-top: -4px; /* チェックマークの位置 */
    margin-left: 12px; /* チェックマークの位置 */
    width: 6px; /* ボックスの横幅を指定する */
    height: 8px; /* ボックスの高さを指定する */
    border-right: 3px solid #0171bd; /* 境界線（右）のスタイルを指定する */
    border-bottom: 3px solid #0171bd; /* 境界線（下）のスタイルを指定する */
    transform: rotate(45deg); /* 要素を回転させる */
    opacity: 0; /* 要素を透過指定する */
}
input[type="checkbox"][name="term_and_conditions"]:checked + .term_and_conditions_label:before,
input[type="checkbox"][name="agree_privacy_policy"]:checked + .agree_privacy_policy_label:before {
    opacity: 1; /* 要素を表示する */
}