【JavaScript不要！CSSだけで高機能UI】CSSだけでアコーディオンBOX

これまでもこのようなCSSで閉じ開きできるBOXはありました。
ですが、それは

<label for="ID">●●●</label><input type="checkbox" id="ID">
～～～後続のHTML～～～

こんな感じで、ID指定しなくてはなりませんでした。
そして、

input:checked + 後続要素 { スタイルシート }

というような感じで、CSSを書いて、inputのあとに要素が来なければなりませんでした。
ID指定するのは、多数使用する場合にどうしてもめんどくさいというか、管理が大変になりますし、IDかぶりがあった場合に予想外の箇所が動いたりします。

ですが、今回ご紹介する :has() 疑似クラスを使用したアコーディオンBOXは、IDの指定も必要ないですし、ちょっとした滑らかなアニメーションも実装しております。

※このアコーディオンBOX、下記サービスでブロック化させていただきます。

HTML と CSS のコードを以下にご紹介いたします。
コピペで使用できます。ご自由に改修していただいてもOKです。
サイト制作の一助になれば、幸いです。