@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 a {
  text-decoration: underline;
}

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


/*各ページ*/

#monthly h3{
  font-size:34px;
  margin-bottom:-10px;
}

#monthly h3.race-title12{
margin-top:110px;
}

#monthly h3 span.small{
  font-size:80%;
}
#monthly h3 span.small2{
  font-size:90%;
}

#monthly h3 span.week{
  display: inline-block;
  background-color:#1e2188;
  clip-path: polygon(25% 0%, 74% 0, 100% 51%, 75% 100%, 25% 100%, 0 50%);
  font-size:24px;
  width:40px;
  color:#fff;
  text-align: center;
  line-height:34px;
  vertical-align:middle;
  margin-left:4px;
}

#monthly h3 span.race{
  display:inline-block;
  background:linear-gradient(180deg, #a84184 0%,#a84184 50%,#6e2954 50%, #6e2954 100%);
  border-radius: 40px;
  color:#fff;
  width:380px;
  font-size:26px;
  letter-spacing: 0.06em;
  text-align: center;
  margin-left:10px;
}

#monthly h3.race-title12 span.race{
background:linear-gradient(180deg,  #653281 0%, #653281 50%,#421f52 50%, #421f52 100%);
}

#monthly .prof-conteiner{
  display: flex;
  justify-content: space-between;
  flex-wrap:wrap; 
}

#monthly .box{
  position: relative;
  width:430px;
  border-radius:16px;
  height:470px;
  margin-top:40px;
}

#monthly .tei-1{background: linear-gradient(180deg, #d3d1d0 0%, #fff 30%);}
#monthly .tei-2{background: linear-gradient(180deg, #473a39 0%, #1b0c0a 30%); color:#fff;}
#monthly .tei-3{background: linear-gradient(180deg, #760004 0%, #b4030a 30%); color:#fff;}
#monthly .tei-4{background: linear-gradient(180deg, #131556 0%, #1e2188 30%); color:#fff;}
#monthly .tei-5{background: linear-gradient(180deg, #c4b200 0%, #eeda00 30%);}
#monthly .tei-6{background: linear-gradient(180deg, #005129 0%, #007f41 30%); color:#fff;}


#monthly .tei{
  font-family:sans-serif;
  width:70px;
  height:70px;
  text-align: center;
  line-height: 1em;
  font-weight:bold;
  margin-top:10px;
  margin-left:24px;
  background-image: url(img/trial_tei_back.png);
  background-position: 50% 100%;
  background-repeat: no-repeat;
}

#monthly .tei span{
  font-size:40px;
  display: block;
  line-height: 1em;
}

#monthly .toban{
  position: absolute;
  top:93px;
  left:64px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size:18px;
  font-style: italic;
  letter-spacing: 0.1em;
  }

#monthly .kana{
  position: absolute;
  bottom:192px;
  left:70px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size:12px;
  }

#monthly .name{
  position: absolute;
  top:90px;
  left:14px;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  font-size:38px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(46, 46, 46, 0.315);
  }

  #monthly .c-w{
    text-shadow: 2px 2px 4px rgba(209, 209, 209, 0.497);
  }

  .over-layer {
    position: absolute;
    top: 0;
    left: 0;
    background:linear-gradient(230deg,#DAAF08 0%, #FEE9A0 20%, #DAAF08 40%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);

  }

#monthly .money{
  z-index: 3;
  position: absolute;
  top:-9px;
  right:20px;
  height:42px;
  width:242px;
  font-size:30px;
  text-align: center;
  background:linear-gradient(230deg,#DAAF08 0%, #FEE9A0 20%, #DAAF08 40%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%);
  padding:2px 40px;
  clip-path: polygon(100% 0, 100% 20%, 98% 20%, 88% 100%,12% 100%, 2% 20%, 0 20%, 0 0);
  font-weight:bold;
  }

#monthly .money-img img{
  z-index:99;
  display: block;
  position: absolute;
  top:-4px;
  right:66px;
  }

  #monthly .money::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    border-left: 15px solid #3b0418;
    border-right: 0px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 0px solid transparent;
  }

  #monthly .money::before {
    position: absolute;
    content: '';
    top: 0;
    right: 0;
    border-right: 15px solid #3b0418;
    border-left: 0px solid transparent;
    border-top: 30px solid transparent;
    border-bottom: 0px solid transparent;
  }

#monthly .rank{
  z-index: 2;
  position: absolute;
  top:-4px;
  right:144px;
  background:linear-gradient(230deg,#DAAF08 0%,#FEE9A0 100%);
  height:72px;
  width:72px;
  clip-path: circle(50% at 50% 50%);
  }

#monthly .rank span{
  position: absolute; 
  left:20px;
  bottom:6px;
  letter-spacing: 0em;
  }  

#monthly .rank span span{
  display: inline-block;
  margin-top:120px;
  letter-spacing: 0em;
  font-size:70%;
  }

#monthly .photo{
  z-index: 1;
  position: absolute;
  top:0px;
  right:34px;
  width:284px;
  height:274px;
  border: 5px solid;
  border-image: linear-gradient(230deg, #B67B03 0%, #FEE9A0 20%, #DAAF08 40%,  #B67B03 70%, #FEE9A0 80%, #DAAF08 85%, #B67B03 100%) 1;
  }
  
#monthly .photo-4208{
  background-image:linear-gradient(0deg, #fff 0px, transparent 40px),url(img/trial_4208.jpg);
  background-size: 100% auto;
  }

#monthly .photo-4546{
  background-image:linear-gradient(0deg, #463d3b 0px, transparent 40px),url(img/trial_4546.jpg);
  background-size: 100% auto;
  }

#monthly .photo-4450{
  background-image:linear-gradient(0deg, #98080f 0px, transparent 40px),url(img/trial_4450.jpg);
  background-size: 100% auto;
  }

#monthly .photo-4387{
  background-image:linear-gradient(0deg, #232679 0px, transparent 40px),url(img/trial_4387.jpg);
  background-size: 100% auto;
  }

#monthly .photo-4627{
   background-image:linear-gradient(0deg, #dccb1f 0px, transparent 40px),url(img/trial_4627.jpg);
  background-size: 100% auto;
  }
#monthly .photo-4433{
  background-image:linear-gradient(0deg, #38996b 0px, transparent 40px),url(img/trial_4433.jpg);
  background-size: 100% auto;
  }

#monthly .photo-4502{
    background-image:linear-gradient(0deg, #fff 0px, transparent 40px),url(img/trial_4502.jpg);
    background-size: 100% auto;
    }
  
  #monthly .photo-4590{
    background-image:linear-gradient(0deg, #463d3b 0px, transparent 40px),url(img/trial_4590.jpg);
    background-size: 100% auto;
    }
  
  #monthly .photo-4123{
    background-image:linear-gradient(0deg, #98080f 0px, transparent 40px),url(img/trial_4123.jpg);
    background-size: 100% auto;
    }
  
  #monthly .photo-4961{
    background-image:linear-gradient(0deg, #232679 0px, transparent 40px),url(img/trial_4961.jpg);
    background-size: 100% auto;
    }
  
  #monthly .photo-4183{
     background-image:linear-gradient(0deg, #dccb1f 0px, transparent 40px),url(img/trial_4183.jpg);
    background-size: 100% auto;
    }
  #monthly .photo-3618{
    background-image:linear-gradient(0deg, #38996b 0px, transparent 40px),url(img/trial_3618.jpg);
    background-size: 100% auto;
    }


#monthly .data{
  position: absolute;
  top:292px;
  left:0;
  right:0;
  margin:auto;
  width:420px;
  font-weight:bold;
  }

#monthly .data span.data1{
  display: inline-block;
  background-color: #dcdddd;
  border-radius: 6px;
  padding:5px 10px 3px 10px;
  font-size:13px;
  }

#monthly .tei-2 span.data1{background-color: #4d4a4a;}
#monthly .tei-3 span.data1{background-color: #610003;}
#monthly .tei-4 span.data1{background-color: #101149;}
#monthly .tei-5 span.data1{background-color: #d7c500;}
#monthly .tei-6 span.data1{background-color: #004422;}

#monthly .data span.data1 span{
  font-size:80%;
  }

  #monthly .data span.data2{
   display: inline-block;
   background-color: #dcdddd;
   border-radius: 6px 0 0 6px;
   padding:3px 8px 2px 8px;
   margin-left:10px;
   margin-right:3px;
   font-size:15px;
   }

#monthly .tei-2 span.data2{background-color: #4d4a4a;}
#monthly .tei-3 span.data2{background-color: #610003;}
#monthly .tei-4 span.data2{background-color: #101149;}
#monthly .tei-5 span.data2{background-color: #d7c500;}
#monthly .tei-6 span.data2{background-color: #004422;}
   
   
#monthly .comment{
  position: absolute;
  bottom:0px;
  left:0px;
  min-height:120px;
  background: linear-gradient(180deg, #a84184 0%, #a84184 70%,#7c2f5f 100%);
  color:#fff;
  border-radius:0 0 16px 16px;
  padding:12px 22px;
  text-align:justify;
  letter-spacing: 0.01em;
  }

#monthly .race2 .comment{
    background: linear-gradient(180deg, #653281 0%, #653281 70%,#4a245d 100%);
    }


#monthly #mikata{
  margin-top:20px;
  font-size:12px;
  line-height: 1.6em;
}

#monthly #mikata span{
  display:inline-block;
  border: 1px solid #333;
  padding:2px 2px 0 2px;
  margin-left:12px;
  margin-right:2px;
  line-height:13px;
  }

  #monthly #mikata img{
    display: inline-block;
    height:10px;
    margin-right:1px;
    margin-top: -2px;
  }