.boxes_glossary .box:not(:last-child) {
  border-bottom: 1px solid var(--baseBorderColor);
}
.boxes_glossary .box .head {
  padding: var(--space2) var(--space2);
  box-sizing: border-box;
  transition: var(--animationDuration) background;
}
.boxes_glossary .box .head .word {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  font-weight: 800;
}
.boxes_glossary .box .head .yomi {
  margin-top: calc(var(--space1) / 2);
  font-size: var(--fontSize_ss);
}
.boxes_glossary .box .body {
  padding-left: var(--space2);
  padding-right: var(--space2);
}
.boxes_glossary .box .body .text {
  font-size: var(--fontSize_s);
}
.boxes_glossary .box.active .head {
  background: var(--listBorderColor);
}
.boxes_glossary .box.active .body {
  padding-bottom: var(--space4);
}
.boxes_glossary .box:not(.active) .head .yomi {
  display: none;
}

@media (min-width: 768px) {
  .glossary_group {
    flex-direction: row;
    display: flex;
    --headWidth:120px;
    --gapWidth:var(--space2);
    --bodyWidth:calc( 100% - ( var(--headWidth) + var(--gapWidth) ) ) ;
    grid-gap: var(--gapWidth);
  }
  .glossary_group > .head {
    width: var(--headWidth);
    padding-top: calc(var(--space1) * 1.8);
    position: relative;
  }
  .glossary_group > .head > * {
    position: sticky;
    top: 0;
  }
  .glossary_group > .body {
    width: var(--bodyWidth);
  }
}