/* Support page: render bullet symbol via CSS instead of hardcoded text. */
.support-dot-list {
  list-style: none;
  padding-left: 0;
  margin: 0 0 1.2em 0;
}

.support-dot-list li {
  position: relative;
  padding-left: 1.2em;
}

.support-dot-list li:before {
  content: "・";
  position: absolute;
  left: 0;
}
/* Responsive tables used by the life page */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #d26f43 #f2f2f2;
}

.table-scroll::-webkit-scrollbar {
  height: 8px;
}

.table-scroll::-webkit-scrollbar-track {
  background: #f2f2f2;
  border-radius: 999px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: #d26f43;
  border-radius: 999px;
}

.table-scroll > .table {
  margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  .table-scroll::before {
    content: "\2194 \5DE6\53F3\306B\30B9\30AF\30ED\30FC\30EB\3067\304D\307E\3059";
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    color: #8a4b00;
    background: #fff3cd;
    border: 1px solid #f2d58a;
    border-radius: 4px;
    padding: 3px 8px;
    text-align: right;
    margin: 0 0 6px;
    white-space: nowrap;
    transition: opacity 0.25s ease;
  }

  .table-scroll::after {
    content: "";
    position: absolute;
    top: 24px;
    right: 0;
    width: 32px;
    height: calc(100% - 24px);
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0));
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  .table-scroll.scrolled::before,
  .table-scroll.scrolled::after {
    opacity: 0;
  }

  .table-scroll > .table {
    width: 560px;
    max-width: none;
  }
}