<form>
  <div class="header">当社を知ったきっかけ</div>
  <div class="check-list">
    <div class="check-item">
      <input type="checkbox" id="search" name="search"/>
      <label for="search">インターネット検索</label>
     </div>
     <div class="check-item">
      <input type="checkbox" id="ad" name="ad"/>
      <label for="ad">WEB広告</label>
    </div>
    <div class="check-item">
      <input type="checkbox" id="sns" name="sns"/>
      <label for="sns">SNS</label>
    </div>
    <div class="check-item">
      <input type="checkbox" id="other" name="other"/>
      <label for="other">その他</label>
    </div>
  </div>
</form>

.header {
  margin-bottom: 10px;
  font-weight: 700;
}

.check-list {
  display: flex;
  flex-direction: column;
}

.check-item {
  display: flex;
  padding: 3px;
  column-gap: 10px;
  margin-top: 10px;
}

.check-item:has(:checked) label {
  background-color: #DEFFFD;
  font-weight: 700;
}

label {
  padding: 3px;
}

input {
  width: 20px;
}