@charset "UTF-8";

  :root {
    //--- define ---
    --font-size: 12pt;
    --border-color: silver;
    --cell-fg: black;
    --cell-bg: white;
    --header-bg: #F0F0F0;
    --header-fg: #090909;
    --header-border-color: gray;

    --selected-cell-fg: white;
    --selected-cell-bg: cyan;
    --input-border-color: blue;
  }
  
html {
  max-width: 1280px;
  height: 100vh;
}

body {
 max-width: 1040px;
 height: 100vh;
 width: 100%;
 margin: auto;
   font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
} 

h1 {
 font-size:        120%;
 background-color: #aaeeaa;
 color:            #3333cc;
 border-bottom:    solid 1px #cacaff;
 border-right:     solid 1px #cacaff;
 text-align:       center;
 margin: 0;
}

h2 {
 font-size:        120%;
 background-color: #dfefff;
 color: var(--header-fg);
 border-bottom:    solid 1px #cacaff;
 border-right:     solid 1px #cacaff;
 text-align:       center;
 margin: 0;
}


  .tableBase {
    position: relative;
    height:100vh;
  }
  .scrollBox {
    position: relative;
    width:100%;
    height:calc(100vh - 100px);
    max-height:100vh;
    max-width:1040px;
    overflow: scroll;
    border: 1px solid var(--border-color, silver);
  }

  .tbl {
    width:1024px;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    height: 100vh;
  }
  .tbl thead {
    position: sticky;
    top: 0;
    z-index:2;
  }
  .tbl th, .tbl td {
    position: relative;
    padding: 0 10px 0 10px;
    border-top: 1px solid var(--cell-bg, white);
    border-left: 1px solid var(--cell-bg, white);
    border-right: 1px solid var(--border-color, silver);
    border-bottom: 1px solid var(--border-color, silver);
    font-size: var(--font-size, 12pt);
  }
  .tbl th {
    color: var(--header-fg);
    background-color: var(--header-bg);
    border-top-color: var(--header-bg);
    border-left-color: var(--header-bg);
    border-right-color: var(--header-border-color);
    border-bottom-color: var(--header-border-color);
  }
  .tbl td {
    color: var(--cell-fg, black);
    background-color: var(--cell-bg, white);
    text-align: right;
  }
  .tbl colgroup col:nth-child(1)  {width:  30px;}
  .tbl colgroup col:nth-child(2)  {width: 170px;}
  .tbl colgroup col:nth-child(3)  {width:  58px;}
  .tbl colgroup col:nth-child(4)  {width:  58px;}
  .tbl colgroup col:nth-child(5)  {width:  58px;}
  .tbl colgroup col:nth-child(6)  {width:  58px;}
  .tbl colgroup col:nth-child(7)  {width:  58px;}
  .tbl colgroup col:nth-child(8)  {width:  58px;}
  .tbl colgroup col:nth-child(9)  {width:  58px;}
  .tbl colgroup col:nth-child(10) {width:  58px;}
  .tbl colgroup col:nth-child(11) {width:  58px;}

  .tbl th:nth-child(1), .tbl td:nth-child(1) {
    position: sticky;
    left: 0px;
    z-index: 1;
    color: var(--header-fg);
    background-color: var(--header-bg);
    text-align:center;
    border-top-color: var(--header-bg);
    border-left-color: var(--header-bg);
  }
  
@media (min-width: 600px) {
  .tbl th:nth-child(2), .tbl td:nth-child(2) {
    position: sticky;
    left: 40px;
    z-index: 1;
    color: var(--header-fg);
    background-color: var(--header-bg);
    border-top-color: var(--header-bg);
    border-left-color: var(--header-bg);
  }

/*  
  .tbl th:nth-child(3), .tbl td:nth-child(3) {
    position: sticky;
    left: 140px;
    z-index: 1;
    color: var(--header-fg);
    background-color: var(--header-bg);
    border-top-color: var(--header-bg);
    border-left-color: var(--header-bg);
  }
*/
}

  .count-rowid {counter-reset: rowid 0;}
  .count-rowid tr {counter-increment: rowid 1;}
  .count-rowid td:nth-child(1) span.rowid::after {content: counter(rowid); color:gray;}

.place_name {
    text-align: left;
  }