@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 {
background-image:url(img/dream_back.png);
 background-size: contain;
}

	
	
#monthly h3{	
 display: inline-block;
 width: 510px;
	filter: drop-shadow(0px 3px 5px #666);
	      font-size: 50px;
      font-weight: bold;
      font-family: "Noto Sans JP", sans-serif;
      stroke-mode: outside;
      margin-left:10px;
      height:100px;
      letter-spacing:0.06em;
      stroke-linejoin: round;
}


#monthly h4 {
 display: inline-block;
 width: 340px;
 font-size: 28px;
 vertical-align:middle;
       height:60px;
       margin-top:-30px;
 
}

#monthly h4 span.tue{
 display: inline-block;
background: #4c5159;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  color: #fff;
  font-size: 18px;
  text-align: center;
  line-height:31px;
  padding:2px 2px 0 2px;
  margin:-6px 10px auto 4px;
   vertical-align:middle;
  }
  
  #monthly h4 span.big{
   font-size: 34px;
  }

#monthly .racer-container {
  display: flex;
  justify-content:space-around;
}

#monthly .race-waku{
position: relative;
width:280px;
}

#monthly .race-waku .winner{
position: absolute;
top:-50px;
right:0px;
    width: 180px;
    height: 46px; 
    font-size:11px;
    text-align:center;
    font-weight:bold;
    color:#231916;
}

#monthly .race-waku .winner span{
display:block;
 font-size:13px;
 margin-top:-0.4em;
}


#monthly .race-waku .winner::before {
 content: "";
 display: block;
 width: 33px;
 height: 21px;
 margin:0 auto;
 background-image:url(img/dream_winner.png);
 background-size: contain;
 background-repeat: no-repeat;
 vertical-align: middle;
}

#monthly .race-waku .circle {
position: absolute;
top:-50px;
left:0px;
    width: 110px;
    height: 110px; 
    background-color: pink;
    border-radius: 50%;
        margin: 0 auto;
    text-align: center;
    background: linear-gradient(-45deg, #fff 0%, #fff 50%, #dcdddd 50%, #dcdddd 100%);
    z-index:1;
}

#monthly #racer2 .circle{color:#fff; background: linear-gradient(-45deg, #231916 0%, #231916 50%, #3f3b3a 50%, #3f3b3a 100%);}
#monthly #racer3 .circle{color:#fff; background: linear-gradient(-45deg, #d1131c 0%, #d1131c 50%, #b41018 50%, #b41018 100%);}
#monthly #racer4 .circle{color:#fff; background: linear-gradient(-45deg, #1e2188 0%, #1e2188 50%, #171a6c 50%, #171a6c 100%);}
#monthly #racer5 .circle{color:#231916; background: linear-gradient(-45deg, #ffe200 0%, #ffe200 50%, #dcc300 50%, #dcc300 100%);}
#monthly #racer6 .circle{color:#fff; background: linear-gradient(-45deg, #007f41 0%, #007f41 50%, #006e38 50%, #006e38 100%);}


#monthly .race-waku .circle::before {
	content: "";
	width: 90px;
	height: 90px;
	position: absolute;
	top: 10px;
	left: 10px;
	border-radius: 50%;
	box-sizing: border-box;
    background: linear-gradient(-45deg, #dcdddd 0%, #dcdddd 50%, #fff 50%, #fff 100%);
}

#monthly #racer2 .circle::before{background: linear-gradient(-45deg, #3f3b3a 0%, #3f3b3a 50%, #231916 50%, #231916 100%);}
#monthly #racer3 .circle::before{background: linear-gradient(-45deg, #b41018 0%, #b41018 50%, #d1131c 50%, #d1131c 100%);}
#monthly #racer4 .circle::before{background: linear-gradient(-45deg, #171a6c 0%, #171a6c 50%, #1e2188 50%, #1e2188 100%);}
#monthly #racer5 .circle::before{background: linear-gradient(-45deg, #dcc300 0%, #dcc300 50%, #ffe200 50%, #ffe200 100%);}
#monthly #racer6 .circle::before{background: linear-gradient(-45deg, #006e38 0%, #006e38 50%, #007f41 50%, #007f41 100%);}


#monthly .race-waku .circle > span {
  position: relative;
  z-index: 2;
  font-weight:bold;
}

.circle span.boat {
 display:block;
 font-size:68px;
 transform: scale(0.8, 1);
 font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
 margin-bottom:-26px;
}

#monthly .race-waku .pofile{
background-color:#fff;
width:100%;
min-height:440px;
margin-top:50px;
/*background-image:url(img/dream_4190.jpg);*/
/*background-repeat: no-repeat;*/
/*background-position: top 46px left 10px;*/
  position: relative;
}

#monthly .race-waku .pofile img{
	position: absolute;
	top:44px;
	left:10px;
  mask-image: url("img/dream_mask.png");
  mask-repeat: no-repeat;
  mask-position: 0 0;
  mask-size: 100%;
  /* Chrome, Safari用 */
  -webkit-mask-image: url("img/dream_mask.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: 0 0;
  -webkit-mask-size: 100%;
}


#monthly #racer2 .pofile{background-color:#231916;color:#fff;}
#monthly #racer3 .pofile{background-color:#d1131c;color:#fff;}
#monthly #racer4 .pofile{background-color:#1e2188;color:#fff;}
#monthly #racer5 .pofile{background-color:#ffe200;color:#231916;}
#monthly #racer6 .pofile{background-color:#007f41;color:#fff;}

#monthly .race-waku .pofile::before{
content: "";
 display: block;
 width: 100%;
 height: 140px;
 background:  linear-gradient(0deg, transparent 30%, #ffffff 100%);
 position: absolute;
 top: 0;
 left: 0;
}

#monthly #racer2 .pofile::before{ background:linear-gradient(0deg, transparent 30%, #231916 100%);}
#monthly #racer3 .pofile::before{ background:linear-gradient(0deg, transparent 30%, #d1131c 100%);}
#monthly #racer4 .pofile::before{ background:linear-gradient(0deg, transparent 30%, #1e2188 100%);}
#monthly #racer5 .pofile::before{ background:linear-gradient(0deg, transparent 30%, #ffe200 100%);}
#monthly #racer6 .pofile::before{ background:linear-gradient(0deg, transparent 30%, #007f41 100%);}

#monthly .race-waku .syoritu{
 	width: 120px;
	height: 34px;
	position: absolute;
	top: 6px;
	right: 10px;
	font-size:40px;
	line-height:34px;
	vertical-align: middle;
	font-style: italic;
    font-family:"Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
text-align:right;
}

#monthly .race-waku .syoritu::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  	position: absolute;
	top: 8px;
	right: 84px;
  background: linear-gradient(45deg, transparent 50%, #666666 100%);
  transform:rotate(45deg);
  vertical-align: middle;
}

#monthly #racer3 .syoritu::before {background: linear-gradient(45deg, transparent 50%, #fff 100%);}
#monthly #racer4 .syoritu::before {background: linear-gradient(45deg, transparent 50%, #fff 100%);}
#monthly #racer6 .syoritu::before {background: linear-gradient(45deg, transparent 50%, #fff 100%);}

#monthly .race-waku .syoritu span{
  display: inline-block;
  width:14px;
  font-size:15px;
  line-height:1em;
  font-weight:bold;
  margin-top:0px;
  margin-left:-28px;
  margin-right:22px;
  vertical-align: middle;
  font-style: normal;
}

#monthly .race-waku .name-plate{
 	position: absolute;
 	left:10px;
	bottom: 0px;
	 width:260px;
}

#monthly .race-waku .name-plate .number{
  width:200px;
  margin:0 auto;
text-align:center;
font-size:46px;
letter-spacing:0.1em;
line-height:1.2em;
 transform: scale(0.8, 1);
 font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

#monthly .race-waku .name-plate .kana{
display:block;
width:200px;
font-size:11px;
margin:0 auto;
text-align:center;
}

#monthly .race-waku .name-plate .name{
display:block;
width:200px;
font-size:40px;
margin:0 auto;
text-align:center;
text-shadow: 2px 2px 4px #666;
}

#monthly #racer4 .name-plate .name{text-shadow: 2px 2px 4px #333;}
#monthly #racer6 .name-plate .name{text-shadow: 2px 2px 4px #333;}

#monthly .race-waku .name-plate .other{
display:block;
width:260px;
margin:0 auto 6px auto;
text-align:center;
border-top:1px solid #333;
line-height:30px;
}

#monthly #racer2 .name-plate .other{border-top:1px solid #fff;}
#monthly #racer3 .name-plate .other{border-top:1px solid #fff;}
#monthly #racer4 .name-plate .other{border-top:1px solid #fff;}
#monthly #racer6 .name-plate .other{border-top:1px solid #fff;}

#monthly .race-waku .name-plate .other span{
display:inline-block;
border-left:1px dashed #333;
border-right:1px dashed #333;
width:90px;
margin:0 30px;
}

#monthly #racer2 .name-plate .other span{border-left:1px dashed #fff; border-right:1px dashed #fff;}
#monthly #racer3 .name-plate .other span{border-left:1px dashed #fff; border-right:1px dashed #fff;}
#monthly #racer4 .name-plate .other span{border-left:1px dashed #fff; border-right:1px dashed #fff;}
#monthly #racer6 .name-plate .other span{border-left:1px dashed #fff; border-right:1px dashed #fff;}

#monthly .race-waku .text{
background-color: rgba(255,255,255,0.5);
margin-top:-20px;
padding-top:40px;
padding-bottom:10px;
margin-bottom:30px;
}


#monthly .race-waku .text p{
width:260px;
margin:0px auto 26px auto;
text-align: justify;
font-weight:bold;
}

#monthly .race-waku .course {
margin:0 auto 20px auto;
width:260px;
}

#monthly .race-waku .course-title{
 font-size:16px;
}

#monthly .race-waku .course-title span{
 display:block;
 font-size:12px;
 margin-left:12px;
 margin-top:-0.4em;
}


#monthly .race-waku .course-title::before {
content: "";
 display:inline-block;
 width: 16px;
 height: 16px;
 background-image:url(img/dream_course_icon.png);
 vertical-align: middle;
 margin-right:4px;
}


#monthly .race-waku .course table{
width:100%;
font-size:12px;
border:1px;
border-radius: 10px;
    border-spacing: 0;
    border-collapse: separate;
    border: none;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    overflow: hidden;
}





#monthly .race-waku .course table th{
border-left:1px solid #fff;
background-color:#4d4398;
color:#fff;
text-align:center;
font-weight:normal;
font-size:11px;
line-height:16px;
padding-top:2px;
}

#monthly .race-waku .course table tr{
border-bottom:1px solid #333;
}

#monthly .race-waku .course table td{
border-left:1px dashed #333;
border-bottom:1px solid #333;
text-align:center;
background-color:#fff;
}

#monthly .race-waku .course table .line td{
background-color:#f6f3ea;
}

#monthly .race-waku .course table .line:last-child td{
border-bottom:0px;
}



#monthly .race-waku .course table th:first-child{
border-left:none;
}

#monthly .race-waku .course table td:first-child{
border-left:none;
}

#monthly .race-waku .course table tr:last-child{
border-bottom:none;
}


#monthly .race-waku .course table td.one{color:#333; background-color:#d3d4d4;}
#monthly .race-waku .course table td.two{color:#fff; background-color:#231916;}
#monthly .race-waku .course table td.three{color:#fff; background-color:#d1131c;}
#monthly .race-waku .course table td.four{color:#fff; background-color:#1e2188;}
#monthly .race-waku .course table td.five{color:#333; background-color:#ffe200;}
#monthly .race-waku .course table td.six{color:#fff; background-color:#007f41;}