.motion-acc {
  --rose: #da1b54;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.motion-acc-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.motion-acc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  margin: 0;
  padding: var(--space-3);
  border: 0;
  border-bottom: 2px solid #edecec;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.motion-acc-item.is-open .motion-acc-head {
  border-bottom-color: var(--rose);
}

.motion-acc-main {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-width: 0;
}

.motion-acc-sticker {
  flex: none;
  width: 40.5px;
  height: 40.5px;
  object-fit: contain;
}

.motion-acc-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.motion-acc-name,
.motion-acc-desc {
  font-family: var(--sans);
  line-height: normal;
}

.motion-acc-name {
  color: var(--slate);
  font-size: var(--text-sm);
  font-weight: 900;
  letter-spacing: 0.16px;
}

.motion-acc-item.is-open .motion-acc-name { color: var(--rose); }

.motion-acc-desc {
  color: var(--slate);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.12px;
}

.motion-acc-toggle {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--rose);
}

.motion-acc-plus,
.motion-acc-minus {
  position: absolute;
  inset: 0;
  background: currentColor;
  transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.motion-acc-plus {
  opacity: 1;
  mask: url("/images/icon-plus.svg") center / contain no-repeat;
  -webkit-mask: url("/images/icon-plus.svg") center / contain no-repeat;
}

.motion-acc-minus {
  opacity: 0;
  mask: url("/images/icon-minus.svg") center / contain no-repeat;
  -webkit-mask: url("/images/icon-minus.svg") center / contain no-repeat;
}

.motion-acc-item.is-open .motion-acc-plus { opacity: 0; }

.motion-acc-item.is-open .motion-acc-minus { opacity: 1; }

.motion-acc-clip {
  height: 0;
  overflow: hidden;
}

.motion-acc-item.is-open > .motion-acc-clip { height: auto; }

.motion-acc-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-10);
  color: var(--slate);
  font-size: var(--text-sm);
  line-height: 1.5;
  opacity: 0;
}

.motion-acc-item.is-open > .motion-acc-clip > .motion-acc-panel { opacity: 1; }

.motion-acc-title {
  margin: 0;
  color: var(--blue);
  font-family: var(--sora);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.1;
}

.motion-acc-panel strong {
  color: var(--rose);
  font-weight: 700;
}

.motion-acc-date {
  padding: var(--space-6);
  border-radius: 20px;
  background: #efe9e5;
  color: var(--blue);
}

.motion-acc-num {
  margin: 0;
  font-family: var(--sora);
  font-size: var(--text-sm);
  font-weight: 700;
}

.motion-acc-num span {
  display: block;
  color: var(--rose);
  font-size: var(--text-4xl);
  line-height: 1;
}

.motion-acc-years {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.motion-acc-years span {
  display: block;
  color: var(--rose);
  font-weight: 700;
}

.stage.is-reduced .motion-acc-plus,
.stage.is-reduced .motion-acc-minus {
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .motion-acc-plus,
  .motion-acc-minus { transition: none; }
}

@media (max-width: 1023px) {
  .subnav[data-motion="accordion"] > .subnav-item > .subnav-panel {
    min-height: 0;
    padding-top: 0;
    overflow-anchor: none;
  }

  .subnav[data-motion="accordion"] > .subnav-item > .subnav-panel > :first-child {
    padding-top: var(--space-10);
  }

  .subnav[data-motion="accordion"] > .subnav-item > .subnav-panel[hidden] {
    display: block !important;
    height: 0;
    overflow: hidden;
    visibility: hidden;
  }

  .subnav[data-motion="accordion"] .subnav-toggle::before,
  .subnav[data-motion="accordion"] .subnav-toggle::after {
    content: "";
    position: absolute;
    top: 0;
    right: auto;
    bottom: auto;
    left: 0;
    width: 24px;
    height: 24px;
    background: currentColor;
    transition: opacity 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .subnav[data-motion="accordion"] .subnav-toggle::before {
    opacity: 1;
    mask: url("/images/icon-plus.svg") center / contain no-repeat;
    -webkit-mask: url("/images/icon-plus.svg") center / contain no-repeat;
  }

  .subnav[data-motion="accordion"] .subnav-toggle::after {
    opacity: 0;
    mask: url("/images/icon-minus.svg") center / contain no-repeat;
    -webkit-mask: url("/images/icon-minus.svg") center / contain no-repeat;
  }

  .subnav[data-motion="accordion"] .subnav-head[aria-expanded="true"] .subnav-toggle::before {
    opacity: 0;
    mask-image: url("/images/icon-plus.svg");
    -webkit-mask-image: url("/images/icon-plus.svg");
  }

  .subnav[data-motion="accordion"] .subnav-head[aria-expanded="true"] .subnav-toggle::after {
    opacity: 1;
  }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .subnav[data-motion="accordion"] > .subnav-item > .subnav-panel[hidden] {
    display: none !important;
    height: auto;
    overflow: visible;
    visibility: visible;
  }

  .subnav[data-motion="accordion"] .subnav-toggle::before,
  .subnav[data-motion="accordion"] .subnav-toggle::after {
    transition: none;
  }
}

.subnav.is-reduced > .subnav-item > .subnav-panel[hidden] {
  display: none !important;
}

.subnav.is-reduced .subnav-toggle::before,
.subnav.is-reduced .subnav-toggle::after {
  transition: none;
}