.vertical-scrollbar {
  position: absolute;
  overflow: hidden;
  box-sizing: border-box;
  border: 1px solid hsla(0, 0%, 39.2%, 0.4);
  z-index: 101;
  background-color: #fff;

  right: 0;
}

.vertical-scrollbar .overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
}

.vertical-scrollbar .slider {
  width: 100%;
  background: hsla(0, 0%, 39.2%, 0.4);
  position: absolute;
}

.vertical-scrollbar:hover .slider {
  width: 100%;
  background: hsla(0, 0%, 39.2%, 0.7);
}

.right-to-left-vertical-writing .vertical-scrollbar {
  /* bottom: 0; */
  left: 0;
  right: unset;
}

.vertical-scrollbar-container {
  position: absolute;
  overflow: scroll;
  box-sizing: border-box;
  border: 1px solid hsla(0, 0%, 39.2%, 0.4);
  z-index: 101;
  background-color: #fff;

  right: 0;
}

.right-to-left-vertical-writing .vertical-scrollbar-container {
  bottom: 0;
  right: unset;
}

.vertical-scrollbar-container::-webkit-scrollbar {
  background: transparent;
}

.vertical-scrollbar-container::-webkit-scrollbar-corner {
  display: none;
}

/* スクロールバー上下左右末端のボタン */
.vertical-scrollbar-container::-webkit-scrollbar-button {
  /* width:10px;
  height:10px;
  background:#666; */
  display: none;
}

.vertical-scrollbar-container::-webkit-scrollbar-thumb {
  background: hsla(0, 0%, 39.2%, 0.4);
}

.vertical-scrollbar-container:hover::-webkit-scrollbar-thumb {
  /* background: hsla(0, 0%, 39.2%, 0.4); */
  background: hsla(0, 0%, 39.2%, 0.7);
}

.vertical-scrollbar-container:hover::-webkit-scrollbar {
  background: transparent;
}