Webサイトでよくある「Q&A」をアコーディオン形式で作りたい

Question

前提・実現したいこと

Webサイトでよくある「Q&A」でアコーディオン形式（Qをクリックすると、下にAが出現する）を作りたいと思っています。

発生している問題・エラーメッセージ

inputやlabelなどを使い大体はできましたが、１つだけどうしてもできないことがあります。

それが、『Qをクリックしたあとで、Qの背景（box）の色を変える』というものです。
例えば、何もしないままだと白の背景のQが、クリックと同時にAが出現、かつ同時にQの背景が白から青に変化するといったものです。
今回下に記載したコードの場合でいうと、最初に白（#fff）の状態の背景を、クリックしたあとで水色（#4d9ecb）になるようにしたいです。

jqueryなどを使うと簡単にできるのでしょうか？
できればCSSだけで実装したいです。できない場合はjqueryでどのように書けばいいのか教えていただきたいです。

該当のソースコード

以下のようにかきました。

【HTML】

        <div class="box_qa_contents">
          <input id="acd-check1" class="acd-check" type="checkbox">
          <label class="acd-label" for="acd-check1">ここに質問内容が入ります。</label>
          <div class="acd-content">
            <p>ここに回答が入ります。ここに回答が入ります。</p>
          </div>
        </div>

【CSS】
.acd-check {
display: none;
}

.acd-label {
background: #fff;
color: #4d9ecb;
display: block;
padding: 0.8em 0em 0.8em 1.5em;
position: relative;
border-radius: 0.2em 0.2em 0em 0em;
border: 2px solid #4d9ecb;
text-align: left;
font-size: 1.15em;
}

.acd-label:after {
background-image: url("../images/+.png");
background-repeat: no-repeat;
display: block;
padding-top: 6em;
padding-right: 3em;
position: absolute;
right: 0.3em;
top: 0.55em;
content: '';
}

.acd-content{
border: 4px solid #4d9ecb;
border-radius: 0em 0em 0.2em 0.2em;
background-color: #fff;
color: #000;
text-align: left;
opacity: 0;
padding: 1em 2em 0em 1.5em;
visibility: hidden;
transition: .5s;
}

.acd-check:checked+.acd-label:after {
content: '';
background-image: url("../images/_.png");
background-repeat: no-repeat;
display: block;
padding-top: 6em;
padding-right: 3em;
position: absolute;
right: 0.3em;
top: 0.55em;
}

.acd-check:checked+.acd-label+.acd-content {
height: 100px;
opacity: 1;
visibility: visible;
}

試したこと

ここに問題に対して試したことを記載してください。

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

ここにより詳細な情報を記載してください。

Comments

[K_3578]

ソースコードはMarkdown記法で提示しましょう。
参考質問:https://teratail.com/questions/238564

Answer 1

.acd-check:checked + .acd-label {
  background-color: #4d9ecb;
  color: #fff;
}

隣接兄弟結合子 - CSS: カスケーディングスタイルシート | MDN