@charset "utf-8";

/*共通*/

.button--arrowRight {
  box-sizing: border-box;
}

#monthly {
  width: 900px;
  margin: 0px auto 0 auto;
  padding: 0px;
  font-size:16px;
}
#monthly p {
  line-height: 1.6;
  letter-spacing:0.05em;
  text-indent:1em;
  margin-bottom:0.6em;
}
#monthly p.ketujyo {
  margin-bottom:10px;
  text-align:left;
  text-indent:0;
}
#monthly .midashi{
  width:900px;
}

#monthly table {
  border-collapse:collapse;
}

#monthly br.clear {
  clear: both;}

#monthly .cf:before,
.cf:after {
    content: " ";
    display: table;
}

#monthly .cf:after {
    clear: both;
}

#monthly .cf {
    *zoom: 1;
}

#monthly a {
  text-decoration: underline;
}

#monthly a:hover {
  text-decoration: none;
}


/*各ページ*/

#monthly .racer-container{
  display:flex;
  justify-content:space-between;
  margin-bottom:20px;
  }

#monthly .racer-item{
  min-width:440px;
  min-height:420px;
  position:relative;
  }

#monthly .racer1{background-image:url(img/dream_back1.jpg);}
#monthly .racer2{background-image:url(img/dream_back2.jpg);}
#monthly .racer3{background-image:url(img/dream_back3.jpg);}
#monthly .racer4{background-image:url(img/dream_back4.jpg);}
#monthly .racer5{background-image:url(img/dream_back5.jpg);}
#monthly .racer6{background-image:url(img/dream_back6.jpg);}

#monthly .racer-item p.name{
  position:absolute;
  top:136px;
  right:12px;
  font-size:10px;
  color:#666769;
  font-weight:bold;
  }
  
#monthly .racer-item p.name span{
  font-size:20px;
  font-weight:bold;
  display:inline-block;
  margin-right:0.6em;
  letter-spacing:-0.06em;
  color:#3E3F42;
  font-family:'arial black';
  }

#monthly .racer-item div.one{
  position:absolute;
  display:inline-block;
  font-size:10px;
  color:#3E3F42;
  font-weight:bold;
  line-height:1.4em;
  transform:scale(1, 1.2);
  text-shadow: -1px -1px 1px #fff, -1px 1px 1px #fff, 1px -1px 1px #fff, 1px 1px 1px #fff;
  }

#monthly .racer1 div.one{top:74px; left:224px;}
#monthly .racer2 div.one{top:190px; left:200px;}
#monthly .racer3 div.one{top:210px; left:190px;}
#monthly .racer4 div.one{top:180px; left:194px;}
#monthly .racer5 div.one{top:194px; left:256px;}
#monthly .racer6 div.one{top:180px; left:200px;}

#monthly .racer-item div.one span{
  display:block;
  font-size:16px;
  font-weight:normal;
  transform:scale(1.1,0.8);
  color:#fff;
  text-shadow: 0px 2px 1px #3E3F42, -1px -1px 1px #3E3F42, -1px 1px 1px #3E3F42, 1px -1px 1px #3E3F42, 1px 1px 1px #3E3F42;
  }

#monthly .racer-item div.one span small{
  font-size:11px;
  }
 
 #monthly .seiseki-container{
  display:flex;
  justify-content:space-between;
  }
 
#monthly .racer-item div.seiseki-container{
  /* border:1px solid red; */
  position:absolute;
  bottom:10px;
  right:10px;
  width:330px;
  height:90px;
  }
  
#monthly .racer-item div.seiseki-container span{
  display:block;
  font-size:14px;
  color: #3E3F42;
  font-weight: bold;
  line-height:1.4em;
  text-shadow: -1px -1px 0px #fff, -1px 1px 0px #fff, 1px -1px 0px #fff, 1px 1px 0px #fff;
  }
  
#monthly .racer-item div.seiseki-container table.area{
  border:1px solid #000;
  background-color:#fff;
  width:154px;
  font-size:11px;
  margin-bottom:4px;
  }
  
#monthly .racer-item div.seiseki-container table.area td{
  border-right:1px solid #000;
  }
  
#monthly .racer-item div.seiseki-container table.area th,td{
  text-align:center;
  }

#monthly .racer-item div.seiseki-container table.area th:first-of-type{
  background-color:#CAE7AB;
  }

#monthly .racer-item div.seiseki-container table.area th:last-of-type{
  background-color:#9FD6ED;
  }
  

#monthly .racer-item div.seiseki-container table.average{
  margin-bottom:1px;
  background-color:#fff;
  width:154px;
  font-size:11px;
  border:1px solid #000;
  border-radius: 4px;
  border-collapse: separate;
  }
  
#monthly .racer-item div.seiseki-container table.average th{
  text-align:center;
  border-right:1px solid #000;
  font-weight:normal;
  }
  
#monthly .racer1 div.seiseki-container table.average th{background-color:#DFE0E0;}
#monthly .racer2 div.seiseki-container table.average th{background-color:#a09c9d;}
#monthly .racer3 div.seiseki-container table.average th{background-color:#debeb1;}
#monthly .racer4 div.seiseki-container table.average th{background-color:#b1c0e7;}
#monthly .racer5 div.seiseki-container table.average th{background-color:#f3e5b6;}
#monthly .racer6 div.seiseki-container table.average th{background-color:#b2cec2;}
 
#monthly .racer-item div.seiseki-container table.average td{
  text-align:right;
  }
  
#monthly .racer-item div.seiseki-container table.average tr th:first-child {
  border-radius: 4px 0 0 4px;
}

#monthly .racer2 div.seiseki-container div.seiseki-item:first-child {margin-top:-20px;}
#monthly .racer5 div.seiseki-container div.seiseki-item:first-child {margin-top:-20px;}
#monthly .racer6 div.seiseki-container div.seiseki-item:first-child {margin-top:-20px;}

#monthly .racer-item div.seiseki-container div.seiseki-item:last-child {
  font-size:12px;
  position:relative;
  min-width:174px;
}

#monthly .racer-item div.seiseki-container div.seiseki-item p {
  width:170px;
  position:absolute;
  bottom:0;
  margin-bottom: -8px;
  margin-left: 8px;
  color: #fff;
  text-indent:0;
}

#monthly .racer1 div.seiseki-container div.seiseki-item p {
  text-shadow: -1px -1px 0px #9D9D9F, -1px 1px 0px #9D9D9F, 1px -1px 0px #9D9D9F, 1px 1px 0px #9D9D9F;
}
#monthly .racer2 div.seiseki-container div.seiseki-item p {
  text-shadow: -1px -1px 0px #000000, -1px 1px 0px #000000, 1px -1px 0px #000000, 1px 1px 0px #000000;
}
#monthly .racer3 div.seiseki-container div.seiseki-item p {
  text-shadow: -1px -1px 0px #C8242B, -1px 1px 0px #C8242B, 1px -1px 0px #C8242B, 1px 1px 0px #C8242B;
}
#monthly .racer4 div.seiseki-container div.seiseki-item p {
  text-shadow: -1px -1px 0px #0072BB, -1px 1px 0px #0072BB, 1px -1px 0px #0072BB, 1px 1px 0px #0072BB;
}
#monthly .racer5 div.seiseki-container div.seiseki-item p {
  text-shadow: -1px -1px 0px #FCB815, -1px 1px 0px #FCB815, 1px -1px 0px #FCB815, 1px 1px 0px #FCB815;
}
#monthly .racer6 div.seiseki-container div.seiseki-item p {
  text-shadow: -1px -1px 0px #00854A, -1px 1px 0px #00854A, 1px -1px 0px #00854A, 1px 1px 0px #00854A;
}

#monthly p.memo{
  text-align:right;
  font-size:12px;
  }