/* ----------------------------------------------------------------------
	
	馬場情報 2025.06 含水率グラフHTML化用CSS
	
---------------------------------------------------------------------- */

#moist_graph  .item_flex_list{
  display: flex !important;
}


#moist_graph .moist_graph_content{
  max-width: 270px;
  text-align: center;
  line-height: 1.3;
  font-size: 1.2rem;
  margin: 0 auto;
}

#moist_graph .moist_graph_content .note_list li{
  width: 100%;
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: right;
}

#moist_graph .moist_graph_content .mark{
  background: #E30000;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  -webkit- transform: translateY(-50%);
  z-index: 3;
  transition-delay: 1s, 250ms;
  transition-property: top;
  transition-timing-function: ease-in-out;
  transition-duration: 3s;
  transition-duration: 0.5s;
}

#moist_graph .moist_graph_content .mark:before{
  content: "";
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
}

#moist_graph .moist_graph_content .mark:after{
  content: "";
  position: absolute;
  font-weight: bold !important;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}

#moist_graph .moist_graph_content .mark.gm:after{ content: "G"; }
#moist_graph .moist_graph_content .mark.c4:after{ content: "4"; }

#moist_graph .moist_graph_content > table{
  border: 1px solid #ccc;
  width: 100%;
  table-layout: fixed;
  overflow: hidden;
  position: relative;
}

#moist_graph table{ background: #f7f7f7}

#moist_graph .moist_graph_content > table th,
#moist_graph .moist_graph_content > table td{
  text-align: center;
  vertical-align :middle;
  line-height: 1.3;
  font-size: 1.2rem;
  position: relative;
}

#moist_graph .moist_graph_content > table th.cap{ background: #e9f7f9 }
#moist_graph .moist_graph_content > table th.hard,
#moist_graph .moist_graph_content > table td.hard.contain:before,
#moist_graph .moist_graph_content > table td.hard.contain:after{ background: #bee3e6; }
#moist_graph .moist_graph_content > table th.wet,
#moist_graph .moist_graph_content > table td.wet.contain:before,
#moist_graph .moist_graph_content > table td.wet.contain:after{ background: #4c9fd8; color:#000 }
#moist_graph .moist_graph_content > table th.soft,
#moist_graph .moist_graph_content > table td.soft.contain:before,
#moist_graph .moist_graph_content > table td.soft.contain:after{ background: #0a61ae; color:#fff }
#moist_graph .moist_graph_content > table th.heavy,
#moist_graph .moist_graph_content > table td.heavy.contain:before,
#moist_graph .moist_graph_content > table td.heavy.contain:after{ background: #143260; color:#fff }


#moist_graph .moist_graph_content > table *{
  padding: 4px;
  font-weight: bold;
}

#moist_graph .moist_graph_content > table > caption{
  font-size: 1.5rem;
  border:1px solid #ccc;
  border-bottom: none;
}

#moist_graph .turf .moist_graph_content > table > caption{ background: #d9ebd1; }
#moist_graph .dirt .moist_graph_content > table > caption{ background: #efebe9; }


#moist_graph .moist_graph_content > table > thead > tr > th{
  border-right: 1px solid #ccc;
  font-size: 1.4rem;
}

#moist_graph .moist_graph_content > table > thead > tr > th > .time{
  font-size: 1rem;
  padding: 0;
  padding-top: 6px;
  display: block;
}

#moist_graph .moist_graph_content > table > thead > tr > td{
  border-bottom: 1px solid #ccc;
}

#moist_graph .moist_graph_content > table > thead > tr > td.location_name{
  text-align: left;
  padding-right: 22px;
}

#moist_graph .moist_graph_content > table > thead > tr > td.location_name > .mark{
  right:4px;
  left:auto;
}

#moist_graph .moist_graph_content > table > thead > tr:nth-child(3) {
  border-top: 1px solid #ccc;
}

#moist_graph .moist_graph_content > table > thead > tr.graph_head > th{
  padding: 2px;
  font-size: 1.2rem;
}

#moist_graph .moist_graph_content > table > thead > tr > th,
#moist_graph .moist_graph_content > table > tbody > tr > td{
  border-bottom: 1px dashed #ccc;
  border-right: 1px solid #ccc;
}

#moist_graph .moist_graph_content > table > thead > tr > th{
  border-bottom-style: solid;
  border-color: #ccc;
}
#moist_graph .turf .moist_graph_content > table.sc_4 > tbody > tr:nth-child(4n) > td,
#moist_graph .turf .moist_graph_content > table.sc_3 > tbody > tr:nth-child(3n) > td{
 // border-bottom-style: solid;
}

#moist_graph .moist_graph_content > table > thead > tr > th.cap,
#moist_graph .moist_graph_content > table > tbody > tr > th{
  border-right: 1px solid #ccc;
}

#moist_graph .moist_graph_content > table > tbody{
 // height: 300px;
  background-image: linear-gradient(0deg, #143260,#e9f7f9 );
  background-size: calc(100% / 5) 100%;
  background-repeat: repeat-y;
}
#moist_graph .moist_graph_content > table > tbody{
  background-image: linear-gradient(0deg,#bee3e6,#4c9fd8,#0a61ae,#143260);
}

#moist_graph .moist_graph_content > table > tbody{
  background-image: linear-gradient(0deg,#143260,#0a61ae,#4c9fd8,#bee3e6,#e9f7f9);
}

#moist_graph .moist_graph_content > table > tbody > tr > *{
  padding: 0;
  line-height: 1;
}

#moist_graph .moist_graph_content .contain:after{
  content: '';
  width: 22.63px;
  width: 16.97px;
  height: calc(100% + 2px);
  position: absolute;
  top:0;
  left: 50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  z-index:1;
  border-right:1px solid #84a9a8;
  border-left:1px solid #84a9a8;
  overflow:hidden;
}

#moist_graph .moist_graph_content .contain.end:before,
#moist_graph .moist_graph_content .contain.start:before{
  content: '';
  width: 16px;
  height: 16px;
  width: 12px;
  height: 12px;
  position: absolute;
  top: 4px;
  top: 3px;
  left: 50%;
  transform: translateX(-50%) rotateZ(45deg);
  -webkit- transform: translateX(-50%) rotateZ(45deg);
  border-top:1px solid #84a9a8;
  border-left:1px solid #84a9a8;
  z-index:2;
}

#moist_graph .moist_graph_content .contain.start:after{
  height: calc(100% - 11.31px + 1px);
  top: calc(11.31px + 1px);
  height: calc(100% - 8.485px + 1px);
  top: calc(8.485px + 1px);
}

#moist_graph .moist_graph_content .contain.end:before{
  transform: translateX(-50%) rotateZ(-135deg);
  -webkit- transform: translateX(-50%) rotateZ(-135deg);
  top: auto;
  bottom: 4px;
  bottom: 3px;
}

#moist_graph .moist_graph_content .contain.end:after{
  height: calc(100% - 11.31px - 1px);
  height: calc(100% - 8.485px - 1px);
}

#moist_graph .moist_graph_content > table td > .mark.gm{
  left : calc(50% - (22px + 2px));
}

#moist_graph .moist_graph_content > table td > .mark.c4{
  left : calc(50% + 2px);
}

@media screen and ( max-width : 639px ) {
  #moist_graph .moist_graph_content .mark{
    width: 17px !important;
    height: 17px !important;
  }

  #moist_graph .moist_graph_content > table td > .mark.gm{
    left : calc(50% - (17px + 1px));
  }
  
  #moist_graph .moist_graph_content > table td > .mark.c4{
    /* left : calc(50% + 1px); */
    left : calc(50%);
  }
}

#moist_graph .moist_graph_content > table > tbody > tr.title_middle > th{
  color:#000;
}

#moist_graph .moist_graph_content > table > tbody > tr.title_dark > th{
  color : #fff;
}


#moist_graph .item_flex_list.col2_moist > div {
  width: 50%;
  flex-basis: calc((100% - 40px) / 2);
  max-width: calc((100% - 40px) / 2);
  margin-bottom:0;
}

@media screen and ( max-width : 939px ) {

#moist_graph .item_flex_list.col2_moist > div {
  width: 50%;
  flex-basis: calc((100% - 30px) / 2);
  max-width: calc((100% - 30px) / 2);
}
}

@media screen and ( max-width : 639px ) {

#moist_graph .item_flex_list.col2_moist > div {
  width: 50%;
  flex-basis: calc(100% / 2);
  max-width: calc(100% / 2);
}

}
-webkit-keyframes fadeInDown{
0%{opacity:0;
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)}

to{opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)}

}

@keyframes fadeInDown{0%{opacity:0;
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)}

to{opacity:1;
-webkit-transform:translateZ(0);
transform:translateZ(0)}

}


#moist_graph .moist_graph_content .mark.is-animated{
-webkit-animation-duration:0.5s;
animation-duration:0.5s;
-webkit-animation-duration:0.5s;
animation-duration:0.5s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}

#moist_graph .moist_graph_content .mark.is-animated:last-child{
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
-webkit-animation-delay:0.2s;
animation-delay:0.2s;
}