body {
    grid-template-columns: 1fr minmax(auto, 900px) 1fr;
  }
  body.wide {
    grid-template-columns: 1fr minmax(0, 1260px) 1fr;
    main {
      padding-bottom: 0;
    }
  }
  section {
    max-height: calc(100vh - 14rem - 6em);
    overflow: auto;
    padding: 0;
    border: 1px solid #abc;
  }
  .annotate {
    text-align:right;
    margin-top:-1.5em;
    font-size:90%;
  }
  table {
    min-width: 800px;
    border: hidden;
    margin: 0 !important;
  }
  :is(tbody, tfoot) tr:hover {
    background-color: #def;
  }
  tbody tr:hover th:first-child {
    background-color: #cdf;
  }
  thead {
    position: sticky;
    top: 0;
    z-index: 11;
    background: #abc;
    user-select: none;
  }
  thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 12;
  }
  thead th {
    font-size: 90%;
    background-color: #cef;
    white-space: nowrap;
  }
  thead th:not(.not-sort):hover {
    background-color: #cdf;
    cursor: pointer;
  }
  thead th.selected {
    background-color: #fdc;
  }
  tbody, tfoot {
    font-family: 'Muli',"BIZ UDPゴシック","BIZ UDPGothic","ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN","HiraKakuProN-W3","Meiryo UI",sans-serif;
    text-align: right;
  }
  :is(tbody, tfoot) th:first-child > span {
    display: inline-block;
  }
  :is(tbody, tfoot) th:first-child {
    position: sticky;
    left: 0;
    z-index: 10;
    background-color: #dff;
    font-size: 90%;
  }
  tfoot td:not(.left) {
    padding-left: 0 !important;
  }
  tbody {
    counter-set: order;
  }
  tbody tr {
    counter-increment: order;
  }
  tbody tr th {
    text-wrap: nowrap;
  }
  tbody tr th.order::before {
    content: counter(order);
  }
  thead:has(tr th:first-child.selected)
  + tbody tr th.order::before {
    content: attr(data-order) ;
  }
  tr td:not(.left) {
    white-space: nowrap;
  }
  tr td.left {
    padding: 0px 5px;
  }
  .left {
    text-align: left;
    font-size: 85%;
    text-wrap: nowrap;
    
    > div:has(span) {
      width: fit-content;
      padding: 2px 0;
      line-height:1;
      text-align-last: right;
    }
  }
  .left > :is(span,small),
  .left > div > :is(span,small) {
    display: inline-block;
  }
  .left > span:not(:first-child),
  .left > div > span:not(:first-child) {
    margin-left: 10px;
  }
  table:not(:has(.bold)) .left > span:nth-child(1) { font-weight: bold; }
  table:not(:has(.bold)) .left > span:nth-child(n + 3) { font-size: 85%; }
  table:not(:has(.bold)) .left > div > span:nth-child(1) { font-weight: bold; }
  table:not(:has(.bold)) .left > div > span:nth-child(n + 3) { font-size: 85%; }
  .left small {
    margin-left: .1em;
    font-size: 90%;
    color: #69b;
  }
  td.percent {
    font-size: 90%;
  }
  td.people::after {
    content: '人';
    margin-left: .1em;
    font-size: 80%;
  }
  td.percent::after {
    content: '%';
    margin-left: .1em;
    font-size: 80%;
  }
  td:has(.bar),
  td:has(.gender-bar) {
    position: relative;
    z-index: 1;
  }
  td .bar,
  td .gender-bar {
    position: absolute;
    z-index: -1;
  }
  td .bar {
    inset: 0 auto 0 0;
    background-color: #02f2;
  }
  td .gender-bar.m {
    inset: 0 auto 0 0;
    background-color: #07f2;
  }
  td .gender-bar.f {
    inset: 0 0 0 auto;
    background-color: #f002;
  }
  td.breed {
    position: relative;
    &::after {
      content: '%';
      font-size: 80%;
    }
  }
  td.error {
    background-color: #0002;
  }
  @media screen and (max-width:900px){
    body {
      grid-template-rows: max-content 1fr max-content;
    }
    main {
      grid-column: 1 / 4;
      grid-row: 2 / 4;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;
    }
    main h1 {
      font-size: 120%;
    }
    section {
      max-height: calc(100vh - 12vw - 6rem - 6em);
    }
    .annotate {
      margin-top: 0;
    }
    col:first-child {
      width: 9em !important;
    }
    :is(tbody, tfoot) th:first-child {
      font-size: 80%;
    }
  }