.accordion {
  position: relative;
  cursor: pointer;
}

.accordion-wrap {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s ease;
}

/* ▼アイコン本体部分 */
.accordion::before,
.accordion::after {
  content: "";
  position: absolute;
  top: 25px;
  right: 25px;
  width: 50px;
  height: 1px;
  background: #231815;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ▼閉じている時：＋（縦線は縦のまま） */
.accordion:not(.is-active)::before {
  transform: rotate(90deg);
  opacity: 1;
}

/* ▼開いている時：−（縦線が回転して横になる） */
.accordion.is-active::before {
  transform: rotate(0deg);
  opacity: 0; /* ← 最後に溶けるように消える */
}

@media screen and (max-width: 46em) {
  .accordion::before,
  .accordion::after {
    content: "";
    position: absolute;
    top: 25px;
    right: 25px;
    width: 25px;
    height: 1px;
    background: #231815;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
}