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

/* アコーディオンコントロール */
.accordion_control {
  --accordion-open-close-animation-duration-ms: 300ms;
  margin: 0;
  padding: 0;
}

/* サマリ */
.accordion_control > .summary {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  width: 100%;
  align-items: center;
  cursor: pointer;
}
.accordion_control > .summary > .title {
  display: block;
  flex: 1;
  padding: 4px;
  font-weight: normal;
  transition: font-weight var(--accordion-open-close-animation-duration-ms) ease;
}
.accordion_control[data-open="true"] > .summary > .title {
  font-weight: bold;
}
.accordion_control > .summary > .toggle {
  --toggle-border-width: 16px;
  --toggle-border-height: 2px;
  --toggle-border-color: var(--color-black);
  display: block;
  position: relative;
  flex: 0;
  padding: 0 20px;
}
.accordion_control > .summary > .toggle::before {
  content: "";
  position: absolute;
  display: block;
  left: calc(50% - var(--toggle-border-width) / 2);
  width: var(--toggle-border-width);
  height: var(--toggle-border-height);
  background-color: var(--toggle-border-color);
}
.accordion_control > .summary > .toggle::after {
  content: "";
  position: absolute;
  display: block;
  rotate: 90deg;
  left: calc(50% - var(--toggle-border-width) / 2);
  width: var(--toggle-border-width);
  height: var(--toggle-border-height);
  background-color: var(--toggle-border-color);
  transition: rotate var(--accordion-open-close-animation-duration-ms) ease;
}
.accordion_control[data-open="true"] > .summary > .toggle::after {
  rotate: 0deg;
}

/* 詳細 */
.accordion_control > .detail {
  display: grid;
  grid-template-rows: 0fr;
  pointer-events: none;
  transition: grid-template-rows var(--accordion-open-close-animation-duration-ms) ease;
}
.accordion_control[data-open="true"] > .detail {
  pointer-events: auto;
  grid-template-rows: 1fr;
}

/* コンテンツ */
.accordion_control > .detail > .contents {
  overflow: hidden;
}

/* SP */
@media screen and (max-width: 768px) {
}