@charset "UTF-8";
#wrapper {
  overflow: clip;
}

#racer {
  padding-top: 3rem;
  padding-bottom: 5rem;
}
#racer .come {
  font-size: 2rem;
  font-weight: bold;
  width: 172rem;
  margin: 0 auto 3rem auto;
}

h2 {
  background: #FFF;
  line-height: 2em;
  border-radius: 100vmax;
  width: 172rem;
  margin: 0 auto 3rem auto;
  text-align: center;
  font-size: 3rem;
  font-family: "RocknRoll One", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #FFF;
  filter: drop-shadow(0 0.3rem 0.6rem rgba(0, 0, 0, 0.16));
  background: linear-gradient(to right, #FC4276, #7896FF);
}

table {
  width: 172rem;
  margin: 0 auto;
  border: 0.1rem solid #66858f;
  border-collapse: collapse;
}

table thead {
  background: #66858f;
  height: 8rem;
  color: #FFF;
  font-weight: bold;
  font-size: 2rem;
}

.col1 {
  width: 10.5rem;
}

.col5 {
  width: 10.5rem;
}

.col6 {
  width: 10rem;
}

.col7 {
  width: 10rem;
}

.col8 {
  width: 28rem;
}

.col9 {
  width: 6rem;
}

th.active {
  background: #FC4276 !important;
  color: #120240;
}

table td, table th {
  border: 0.1rem solid #66858f;
  vertical-align: middle;
  text-align: center;
  line-height: 1.8em;
}

table th {
  background: #2D77C1;
}

table th.small {
  font-size: 1.8rem;
}

table th.zen {
  background: #01176D;
}

table th.maru {
  background: #015F6D;
}

table td {
  border-bottom: none;
  border-top: none;
  font-size: 2rem;
}

table tr td {
  height: 5rem;
}

table tr:nth-child(odd) td {
  background: #FFF;
}

table tr:nth-child(even) td {
  background: #f1f5f8;
}

table tr td:nth-child(1) {
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
}

table tr td:nth-child(2) {
  font-size: 2.4rem;
  font-weight: bold;
}

table tr td:nth-child(2) span {
  font-size: 1.6rem;
  margin-right: 2rem;
}

table tr td:nth-child(2) span:nth-child(2) {
  margin: 0;
}

table tr td:nth-child(n+5) {
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
}

table tr td.a1 {
  color: #D72A00;
}

table tr td.a2 {
  color: #db8500;
}

table tr td.b1 {
  color: #77AF4B;
}

table tr td.b2 {
  color: #407DCD;
}

table tr td:nth-child(4) {
  font-weight: bold;
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
}

table tr td:nth-child(n+5) {
  font-family: "Roboto", sans-serif;
  font-size: 2.4rem;
}

table tr:nth-child(odd) td.active {
  background: #FFE1CC !important;
}

table tr:nth-child(even) td.active {
  background: #E6CBB8 !important;
}

table tr.off td:nth-child(1) {
  background: #666 !important;
  border-bottom: 0.1rem solid #999;
  font-weight: normal !important;
}

table tr.off td:nth-child(4) {
  background: #CCC !important;
  border-bottom: 0.1rem solid #EEE;
  font-weight: normal;
  font-size: 1.8rem;
}

table tr td:nth-child(9) span {
  padding: 0 0.3rem;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
}

table tr td:nth-child(10) span {
  font-family: "Roboto", sans-serif;
  padding: 0 1rem;
}

table tr td a {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 3rem;
  text-decoration: underline;
  color: #000;
}

table th a.sort {
  display: inline-block;
  color: #FFF;
  background: #000;
  width: 2.4rem;
  font-size: 1.4rem;
  height: 2.4rem;
  margin-right: 0.3rem;
  text-align: center;
  line-height: 2.4rem;
  text-decoration: none;
}

table tr:nth-child(odd) td.active {
  background: #f9e7ec !important;
}

table tr:nth-child(even) td.active {
  background: #ffd2de !important;
}

p.setsu {
  position: relative;
  background: rgb(255, 255, 255);
  border-radius: 0.3rem;
  color: #000;
  padding: 0.1rem 1rem;
  width: calc(100% - 4rem);
  margin: 0 auto;
  font-size: 1.4rem;
}

p.setsu {
  line-height: 1.2em;
}

span.d {
  color: #FC9B56;
}

span.j {
  color: #2387CB;
}

span.y {
  color: #F53D3D;
}

table tr td:nth-child(11) {
  text-align: left;
  padding-left: 2rem;
}

table tr td:nth-child(11) span {
  padding: 0 0.3rem;
  font-weight: bold;
  font-family: "Roboto", sans-serif;
}

table td.ip {
  background: url(../images/grade_ippan.svg) center center no-repeat #4B5C6D !important;
}

table td.sg {
  background: url(../images/grade_sg.svg) center center no-repeat #F54D4D !important;
}

table td.g1 {
  background: url(../images/grade_g1.svg) center center no-repeat #F0BB1C !important;
}

table td.g2 {
  background: url(../images/grade_g2.svg) center center no-repeat #77AF4B !important;
}

table td.g3 {
  background: url(../images/grade_g3.svg) center center no-repeat #407DCD !important;
}

table td.ip,
table td.sg,
table td.g1,
table td.g2,
table td.g3 {
  background-size: auto 2.2rem !important;
  border-bottom: 0.1rem solid #999;
}

.racer_bx .come {
  position: absolute;
  top: 3rem;
  right: 1.5rem;
  text-align: right;
  line-height: 1.5em;
}

table tr td.blank {
  font-weight: normal;
  text-align: center;
}

/***********************************************************************
ミディアムデバイス (スマートフォン) のスタイル
**********************************************************************/
@media (max-width: 750px) {
  h2 {
    width: 65rem;
    font-size: 4rem;
  }
  #racer .come {
    width: 65rem;
    margin: 0 auto 2rem auto;
  }
  .scroll {
    overflow-x: scroll;
    padding-bottom: 1.5rem;
    -webkit-overflow-scrolling: touch;
  }
  .scroll::-webkit-scrollbar {
    height: 1rem;
  }
  .scroll::-webkit-scrollbar-thumb {
    background: #FC4276;
    border-radius: 0.5rem;
  }
  #list {
    min-width: 172rem;
  }
  #list thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
  }
  #list thead tr:nth-child(2) th {
    position: sticky;
  }
  /* 登録番号 */
  #list tr:nth-child(1) th:nth-child(1),
  #list td:nth-child(1) {
    position: sticky;
    left: 0;
    z-index: 5;
  }
  /* 選手名 */
  #list tr:nth-child(1) th:nth-child(2),
  #list tr:nth-child(1) th.col2,
  #list td:nth-child(2) {
    position: sticky;
    left: 10rem; /* ←1列目の幅分 */
    z-index: 5;
  }
  #list tr:nth-child(odd) td:nth-child(2) {
    background: #E6FFA2 !important;
  }
  #list tr:nth-child(even) td:nth-child(2) {
    background: #dbf78d !important;
  }
  .scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  #list thead tr th {
    z-index: auto;
  }
  /* クローンthead */
  .clone-thead {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    overflow: hidden;
  }
  /* 幅ズレ防止 */
  .clone-thead table {
    border-collapse: collapse;
  }
  /* スマホだけ有効 */
}
@media (max-width: 750px) and (min-width: 769px) {
  .clone-thead {
    display: none !important;
  }
}
@media (max-width: 750px) {
  table tr td {
    height: 6rem;
  }
  table td {
    font-size: 2.4rem;
  }
  #list, table {
    min-width: 158rem;
    width: 158rem;
  }
  .col5 {
    width: 12rem;
  }
  table tr td:nth-child(n+5),
  table tr td:nth-child(4) {
    font-size: 2.8rem;
  }
  table tr td:nth-child(2) {
    font-size: 2.8rem;
  }
  table p.setsu {
    display: none;
  }
  .clone-thead table {
    will-change: transform;
  }
  p.setsu {
    font-size: 2.4rem;
    line-height: 2em;
    width: 65rem;
    border-radius: 0.3rem;
    text-align: center;
    font-weight: bold;
    margin-bottom: 3rem;
  }
}
/***********************************************************************
ラージデバイス (デスクトップ) のスタイル
**********************************************************************/
@media (min-width: 751px) {
  #list thead th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  /* 1行目 */
  #list thead tr:nth-child(1) th {
    position: sticky;
    top: 0;
    z-index: 2;
  }
  /* 2行目 */
  #list thead tr:nth-child(2) th {
    position: sticky;
    top: 3.7rem; /* ←1行目の高さ分ずらす */
    z-index: 2;
  }
}/*# sourceMappingURL=racer.css.map */