チェックボックスの表示、非表示切替でチェックボックスの四角が表示されない

Question

前提・実現したいこと

詳細をクリックするとチェックボックスを表示にしてり、非表示にしようとしています。
チェックボックスを表示にする際にチェックボックスの文字は表示されるのですが四角されません。どうすれば解決できるのでしょうか？

該当のソースコード

    <div class="hidden_box">
        <input type="checkbox" id="label1" />
        <label for="label1">詳細</label>
        <div class="hidden_show"> 
            <!-- 非表示 -->
            <!--　チェックボックスにならない問題 -->
            <input type="checkbox" name="miseinen" value="1"> 未成年OK   
            <input type="checkbox" name="to10" value="1"> 〜10人  
            <input type="checkbox" name="to20" value="1"> 〜20人   
            <input type="checkbox" name="to50" value="1"> 〜50人
            <input type="checkbox" name="to100" value="1"> 〜100人
            <input type="checkbox" name="over100" value="1"> 100人以上
            <!-- ここまで -->
        </div>
    </div>

/*チェックは見えなくする*/
.hidden_box input{
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

Answer 1

こういうことでしょうか。

/*チェックは見えなくする*/
/*.hidden_box input*/
#label1 {
    display: none;
}