<div class="Accordion">
  <label class="Accordion-header">
    <input type="checkbox" hidden>素早い茶色の狐はのろまな犬を飛び越える
  </label>
  <div class="Accordion-content">
    <div class="Accordion-content__inner">
      <p>The quick brown fox jumps over the lazy dog.</p>
      <p>The quick brown fox jumps over the lazy dog.</p>
      <p>The quick brown fox jumps over the lazy dog.</p>
      <p>The quick brown fox jumps over the lazy dog.</p>
      <p>The quick brown fox jumps over the lazy dog.</p>
    </div>
  </div>
</div>

/* ------------------------- */
body {
  display: grid;
  place-content: start;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  padding: 1rem;
  margin: auto;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 18px;
  line-height: 1.75;
}
p {
  & + & {
    margin-top: 0.5em;
  }
}
/* ------------------------- */

.Accordion {
  &:has(.Accordion-header input:checked) {
    .Accordion-header {
      &::before {
        list-style-type: disclosure-open;
      }
    }
    .Accordion-content {
      grid-template-rows: 1fr; /* required */
    }
  }
}

.Accordion-header {
  display: flex;
  align-items: center;
  padding: 1rem;
  font-weight: 700;
  background: #eee;

  &::before {
    content: "";
    display: list-item;
    // counter-increment: list-item 0;
    list-style: disclosure-closed inside;
  }
}

.Accordion-content {
  display: grid; /* required */
  grid-template-rows: 0fr; /* required */
  transition: grid-template-rows 0.3s ease-in-out; /* required */
  padding: 1rem;
}

.Accordion-content__inner {
  overflow: hidden; /* required */
}