/* common
-------------------------*/

p {
  margin-bottom: 0;
  font-size: 1.1rem;
}

a {
  text-decoration: none;
}

section {
  width: 96%;
  margin: 0 auto;
}

section + section {
  margin-top: 0;
}

h2 {
  margin: 0 auto;
  color: var(--Dark_Sub_Color);
  font-size: 2rem;
  text-align: center;
}

.tab_group {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 2rem auto;
}

.tab_group li {
  width: 30%;
  height: 3rem;
  margin: 0 2rem;
  padding: .4rem;
  background: #eee;
  font-size: 1.4rem;
  text-align: center;
  cursor: pointer;
}

.tab_group li.tab_active {
  background: var(--Main_Color);
  color: #fff;
}

.tab_group li:hover {
  opacity: .7;
}



@media screen and (orientation: portrait) and (max-width: 767px){

  p {
    font-size: 1rem;
  }
  
  h2 {
    font-size: 1.4rem;
  }
  
  .tab_group {
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 96%;
  }
  
  .tab_group li {
    width: 48%;
    margin: 0 .1rem;
    padding: .7rem;
    font-size: 1rem;
  }

}


/* table layout
-------------------------*/

.tableLayout {
  overflow-y: scroll;
  height: 50rem;
  margin: 1rem auto 3rem auto;
}

.tableLayout table {
  table-layout: fixed;
  position: relative;
  overflow: auto;
  box-sizing: border-box;
  width: 84rem;
  margin: 0 auto;
  outline: 2px solid var(--Dark_Sub_Color);
  font-size: .8rem;
  line-height: 1.2;
  text-align: center;
}

.tableLayout table thead tr th {
  position: sticky;
  top: -1px;
  z-index: 2;
  padding: .5rem;
  outline: 1px solid #fff;
  background-color: var(--Dark_Sub_Color);
  color: #fff;
  text-align: center;
  word-wrap: break-word;
}

.tableLayout table tbody tr th,
.tableLayout table thead tr th:first-child {
  position: sticky;
  left: -1px;
  z-index: 2;
  width: 4rem;
  padding-left: .2rem;
  outline: 1px solid #fff;
  background-color: var(--Dark_Sub_Color);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  word-wrap: break-word;
}

.tableLayout table thead tr th:first-child {
  top: 0;
  left: -1px;
  z-index: 3;
}

.tableLayout table td {
  overflow-wrap: break-word;
  width: 20rem;
  height: 3rem;
  padding: .2rem;
  border: 1px solid var(--Dark_Sub_Color);
  background: #fff;
  text-align: left;
  vertical-align: middle;
  cursor: move;
}

.tableLayout table tr.sat th {
  color: #f0f8ff;
}

.tableLayout table tr.sun th {
  color: #fefafe;
}

.tableLayout table tr.past th {
  color: #eee;
}

.tableLayout table tr.sat td {
  background: #f0f8ff;
}

.tableLayout table tr.sun td {
  background: #fefafe;
}

.tableLayout table tr.past td {
  background: #eee;
}

.tableLayout table tr td li {
  padding: .3rem;
}

.tableLayout table tr td li span {
  padding: .1rem;
  color: #fff;
}

.tableLayout table tr td li span.junior {
  background-color: #00f;
}

.tableLayout table tr td li span.high {
  background-color: #f00;
}

.tableLayout table tr td li span.parent {
  background-color: #999;
}


@media all and (-ms-high-contrast:none) {

  .tableLayout table th {
    left: auto!important;
    background-clip: padding-box !important;
  }

  .tableLayout table td {
    background-clip: padding-box !important;
  }

}

@supports (-ms-ime-align:auto) {

  .tableLayout table td,
  .tableLayout table th {
    background-clip: padding-box !important;
  }

  .tableLayout table thead th {
    border-top: none !important;
  }

  .tableLayout table {
    position: relative;
    z-index: index 10;
  }

}

@-moz-document url-prefix() {

  .tableLayout table td,
  .tableLayout table th {
    background-clip: padding-box !important;
  }

}


@media screen and (orientation: portrait) and (max-width: 767px){

  .tableLayout {
    height: 60vh;
    margin-top: 0;
  }
  
}



/* ScrollHint
-------------------------*/
.scroll-hint-icon {
  top: calc(50% - 45px -2rem);
  left: calc(50% - 80px -2rem);
  width: 160px;
  height: 90px;
}

.scroll-hint-text {
  font-size: .75rem;
}