.wp-block-details summary {
  background: var(--wp--preset--color--color-background-subtler);
  padding-top: var(--wp--preset--spacing--sm);
  padding-bottom: var(--wp--preset--spacing--sm);
  padding-left: var(--wp--preset--spacing--md);
  /* 枠のPadding + アイコンの幅 + テキストまでのPadding; 矢印アイコンがafter要素であるため通常の方法ではテキストまでのPaddingが取れないため*/
  padding-right: calc(
    var(--wp--preset--spacing--md) +
    32px +
    var(--wp--preset--spacing--md)
  );
  border: 1px solid var(--wp--preset--color--color-border-subtle);

  color: var(--wp--preset--color--color-text-default);
  font-size: var(--wp--preset--font-size--md);
  font-weight: 600;
  line-height: var(--wp--preset--line-height--md);
  letter-spacing: 0.48px;

  display: block;
  cursor: pointer;
  list-style: none;

  position: relative;
}

.wp-block-details summary:hover {
  background: var(--wp--preset--color--color-background-brand-subtler);
  color: var(--wp--preset--color--color-brand-20);
}

.wp-block-details summary::after {
  content: url("../images/icons/angle-down.svg");
  position: absolute;
  top: 50%;
  right: var(--wp--preset--spacing--md);
  margin-top: calc(var(--wp--preset--spacing--xs) * -2);
  width: 32px;
  height: 32px;
}

.wp-block-details[open] summary::after {
  content: url("../images/icons/angle-up.svg");
}

.wp-block-details[open]::details-content {
  border-right: 1px solid var(--wp--preset--color--color-border-subtle);
  border-bottom: 1px solid var(--wp--preset--color--color-border-subtle);
  border-left: 1px solid var(--wp--preset--color--color-border-subtle);
  padding: var(--wp--preset--spacing--lg);
}

.wp-block-details {
  margin-block: var(--spacing-xl);
}

@media (max-width: 576px) {
  .wp-block-details {
    margin-block: var(--spacing-lg);
  }
}