.rollup_control *,
*::before,
*::after {
  box-sizing: border-box;
}

/* ロールアップコントロール */
.rollup_control {
  --rollup-switch-height: 24px;
  --rollup-switch-mark-width: 14px;
  --rollup-switch-mark-height: 14px;
  --rollup-switch-mark-border-width: 2px;
  --rollup-switch-mark-close-angle: 225deg;
  --rollup-switch-mark-open-angle: 45deg;

  display: grid;
  grid-template-rows: 0fr max-content;
  transition: grid-template-rows 300ms ease;
}
.rollup_control[data-open="true"] {
  grid-template-rows: 1fr max-content;
}

/* コンテンツ */
.rollup_control > .contents {
  overflow: hidden;
  pointer-events: none;
}
.rollup_control[data-open="true"] > .contents {
  pointer-events: auto;
}

/* 折り畳み */
.rollup_control > .switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--rollup-switch-height);
  cursor: pointer;
}
.rollup_control > .switch::before {
  content: "";
  display: block;
  width: var(--rollup-switch-mark-width);
  height: var(--rollup-switch-mark-height);
  border-left: var(--rollup-switch-mark-border-width) solid var(--color-black);
  border-top: var(--rollup-switch-mark-border-width) solid var(--color-black);
  transform: translateY(-0%) rotate(var(--rollup-switch-mark-close-angle));
  transition: transform 300ms ease;
}
.rollup_control[data-open="true"] > .switch::before {
  transform: translateY(50%) rotate(var(--rollup-switch-mark-open-angle));
}