Edit in JSFiddle

<form action="">
      <input
        type="radio"
        name="sort"
        class="all"
        id="all"
        value="ぜんぶ"
        checked
      /><label for="all">ぜんぶ</label>
      <input
        type="radio"
        name="sort"
        class="fruit"
        id="fruit"
        value="くだもの"
      /><label for="fruit">くだもの</label>
      <input
        type="radio"
        name="sort"
        class="animal"
        id="animal"
        value="どうぶつ"
      /><label for="animal">どうぶつ</label>
      <input
        type="radio"
        name="sort"
        class="weather"
        id="weather"
        value="てんき"
      /><label for="weather">てんき</label>
      <div class="deck">
        <div class="card areaA">りんご</div>
        <div class="card areaB">くじら</div>
        <div class="card areaC">あめ</div>
        <div class="card areaA">ぶどう</div>
        <div class="card areaA">ばなな</div>
        <div class="card areaB">らいおん</div>
        <div class="card areaC">はれ</div>
        <div class="card areaC">くもり</div>
      </div>
    </form>

      .card {
        display: none;
      }
      input[type="radio"].all:checked ~ .deck .card {
        display: block;
      }
      input[type="radio"].fruit:checked ~ .deck .areaA {
        display: block;
      }
      input[type="radio"].animal:checked ~ .deck .areaB {
        display: block;
      }
      input[type="radio"].weather:checked ~ .deck .areaC {
        display: block;
      }
      .deck {
        margin-top: 1em;
        padding: 1em;
        border: 1px solid red;
      }