:checkedを使用してフローティングバナーを閉じたい

実現したいこと

前提

HTMLとCSSでフローティングバナーを作成しようとしています。
左下に画像の固定、×ボタンの実装まではできたものの画像を非表示にすることができません。
javaはまだ勉強していないので可能ならば:checkedを使用して、×ボタン押下→画像非表示を実現したいです。
コードに誤りがあるか見ていただけますと幸いです。

該当のソースコード（HTML）

HTML

1<div class="taikenbatu"> 2　<input type="checkbox" id="batu"> 3　<label for="batu"> 4　　<span class="batu"></span> 5　</label> 6　<div class="taikenbn" id="taikenbn"> 7　　<a href="html/taiken.html"><img src="images/taiken.png" alt=""></a> 8　</div> 9</div>

該当のソースコード（CSS）

CSS

1.taikenbatu{2 z-index: 999;3}4 5.taikenbn{6 position: fixed;7 bottom: 0;8 left: 0;9 padding: 0;10 margin: 0;11 text-align: left;12 z-index: 999;13}14 15.taikenbn img{16 width: 40vw;17 height: auto;18 margin: 0 auto;19}20 21.batu{22 display: inline-block;23 width: 8vw;24 height: 8vw;25 position: fixed;26 bottom: 19vw;27 left: 0.5vw;28 padding: 0;29 margin: 0;30 text-align: left;31 z-index: 999;32 background-color: #fff;33 border-radius: 8vw;34}35 36.batu::before, .batu::after { /* 共通設定 */37 position: absolute;38 content: "";39 top: 50%;40 left: 50%;41 width: 3px; /* 棒の幅（太さ） */42 height: 5vw; /* 棒の高さ */43 background: #333;44 border-radius: 3px;45}46 47.batu::before {48 transform: translate(-50%,-50%) rotate(45deg);49}50 51.batu::after {52 transform: translate(-50%,-50%) rotate(-45deg);53}54 55.taikenbatu input[type="checkbox"]{56 display: block;57 width: 8vw;58 height: 8vw;59 position: fixed;60 bottom: 0;61 right: 0;62}63 64.taikenbatu input[type="checkbox"]:checked ~ #taikenbn{65 display: none;66}

試したこと

①id=taienbnの付与をimgにしてみた
→変わらず
②コードの順番を書き換えてみた
→変わらず
③CSSの65行目に!importantを追加
→変わらず

補足情報（FW/ツールのバージョンなど）

・visual studio codeを使用してローカル環境で作成中
・PCファーストで作成したものをスマートフォン対応させるために作成（PC用SP用で別のCSSを読み込ませる）