@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{
  width:900px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-family:serif;
  font-weight:bold;
  color:#1f1411;
}

#monthly .racer_left{
  border:1px solid #333;
  width:430px;
  min-height:380px;
  position:relative;
  mix-blend-mode: multiply;
  border:8px oridge #1f1411;
  border-style: ridge;
  border-width:6px;
  border-image: linear-gradient(45deg, #c2b150 0%, #c2b150 10%,#fff 14%, #ffc500 40%, #c2b150 60%,#e2e7c2 66%,#c2b150 80%, #ffc500 100%);
  box-shadow: 0px 2px 2px 2px #dcdcdc;
  box-shadow: 0px 1px 1px 1px rgb(131, 139, 43);
  border-image-slice: 1;
  margin-top:20px;
}

#monthly .racer_right{
  border:1px solid #333;
  width:430px;
  min-height:380px;
  position:relative;
  mix-blend-mode: multiply;
  border:8px oridge #1f1411;
  border-style: ridge;
  border-width:6px;
  border-image: linear-gradient(45deg, #c2b150 0%, #c2b150 10%,#fff 14%, #ffc500 40%, #c2b150 60%,#e2e7c2 66%,#c2b150 80%, #ffc500 100%);
  box-shadow: 0px 2px 2px 2px #dcdcdc;
  box-shadow: 0px 1px 1px 1px rgb(131, 139, 43);
  border-image-slice: 1;
  margin-top:20px;
}


#monthly .racer_left{
  background:#fff;
}

#monthly .racer1{
  background-image:url(img/dream_back1.png);
}

#monthly .racer2{
  background-image:url(img/dream_back2.png);
}

#monthly .racer3{
  background-image:url(img/dream_back3.png);
}

#monthly .racer4{
  background-image:url(img/dream_back4.png);
}

#monthly .racer5{
  background-image:url(img/dream_back5.png);
}

#monthly .racer6{
  background-image:url(img/dream_back6.png);
}

#monthly .racer_photo{
  background-image:url(img/dream_racer1.png);
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:3;
}

#monthly .racer_right .racer_photo{
  background-image:url(img/dream_racer1.png);
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
  z-index:3;
}


#monthly .racer2 .racer_photo{
  background-image:url(img/dream_racer2.png);
}

#monthly .racer3 .racer_photo{
  background-image:url(img/dream_racer3.png);
}

#monthly .racer4 .racer_photo{
  background-image:url(img/dream_racer4.png);
}

#monthly .racer5 .racer_photo{
  background-image:url(img/dream_racer5.png);
}

#monthly .racer6 .racer_photo{
  background-image:url(img/dream_racer6.png);
}


#monthly .win{
  font-size:43px;
  position:absolute;
  width:300px;
  top:20px;
  right:-12px;
  text-align: right;
  letter-spacing: -0.02em;
  transform: scale(0.9, 1);
  transform-origin: top left;
  line-height:1.1em;
  z-index:1;
  text-shadow: 
  0.2px 0.2px 1px, 
  -0.2px 0.2px 0px,
  0px 0.2px 0px,
  -0.2px 0px 1px;
  mix-blend-mode: multiply;
}

#monthly .racer1 .win{
  mix-blend-mode: multiply;
  opacity: 0.66;
  }

#monthly .racer3 .win{
  mix-blend-mode: multiply;
  transform: scale(0.98, 1);
  opacity: 0.5;
  right:8px;
  }

#monthly .racer5 .win{
  width:430px;
  right:-24px;
    mix-blend-mode: multiply;
    opacity: 0.9;
    color:#e68301;
  }

#monthly .racer_right .win{
  position:absolute;
  width:300px;
  top:20px;
  left:16px;
  text-align: left;
}

#monthly .racer2 .win{
  mix-blend-mode: normal;
  color:#e3e1e0;
  opacity: 1;
  letter-spacing: 0em;
  transform: scale(0.98, 1);
  }

#monthly .racer4 .win{
    mix-blend-mode: multiply;
    opacity: 0.9;
    transform: scale(0.96, 1);
    color:#00407e;
  }

  #monthly .racer4 span{
    letter-spacing:-0.12em;
  }

#monthly .racer6 .win{
  width:440px;
  left:10px;
    mix-blend-mode: multiply;
    opacity: 0.9;
    transform: scale(1, 1);
    color:#005a24;
  }

  #monthly .racer6 span{
    letter-spacing:-0.16em;
  }


#monthly .sibu{
  font-size:30px;
  color:#333;
  position:absolute;
  width:260px;
  top:170px;
  right:4px;
  letter-spacing:0.6em;
  line-height:40px;
  text-align: right;
  padding-top:4px;
  background: linear-gradient(to right,transparent,#7c7a7b);
  z-index:2;
}

#monthly .racer_right .sibu{
  position:absolute;
  width:260px;
  top:170px;
  left:4px;
  text-align: left;
  padding-left:16px;
  background: linear-gradient(to left,transparent,#fff);
}

#monthly .racer3 .sibu,
#monthly .racer5 .sibu{
  background: linear-gradient(to right,transparent,#fff);
}



#monthly .waku{
  font-size:20px;
  position:absolute;
  width:90px;
  height:34px;
  bottom:86px;
  left:4px;
  text-align: left;
  z-index:4;
  background: linear-gradient(to left,#fff 74%,transparent 100%);
  padding-left:26px;
  line-height:36px;
  }

#monthly .racer2 .waku{
  color:#fff;
  background: linear-gradient(to left,#231916 74%,transparent 100%);
}

#monthly .racer3 .waku{
  color:#fff;
  background: linear-gradient(to left,#e60013 74%,transparent 100%);
}

#monthly .racer4 .waku{
  color:#fff;
  background: linear-gradient(to left,#004ea2 74%,transparent 100%);
}

#monthly .racer5 .waku{
  background: linear-gradient(to left,#fff100 74%,transparent 100%);
}

#monthly .racer6 .waku{
  color:#fff;
  background: linear-gradient(to left,#008442 74%,transparent 100%);
}

#monthly .toban{
font-size:18px;
width: 70px;
height:45px;
position:absolute;
bottom:80px;
left:90px;
text-align: left;
z-index:5;
text-shadow:
1px 1px #fff,
-1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff,
1px 0px 0 #fff,
0px 1px 0 #fff,
-1px 0px 0 #fff,
0px -1px 0 #fff;
background-image:url(img/dream_cloud1.png);
background-repeat:no-repeat;
background-size:contain;
line-height:46px;
padding-left:12px;
padding-top:3px;
}

#monthly .racer2 .toban{
  background-image:url(img/dream_cloud2.png);
}

#monthly .racer3 .toban{
  background-image:url(img/dream_cloud3.png);
}

#monthly .racer4 .toban{
  background-image:url(img/dream_cloud4.png);
}

#monthly .racer5 .toban{
  background-image:url(img/dream_cloud5.png);
}

#monthly .racer6 .toban{
  background-image:url(img/dream_cloud6.png);
}


#monthly .name{
  font-size:46px;
  color:#333;
  position:absolute;
  width: 240px;
  bottom:66px;
  right:10px;
  text-align: left;
  text-align:right;
  text-shadow:
1px 1px #fff,
-1px 1px 6px #fff,
-1px -1px 6px #fff,
1px -1px 6px #fff,
1px 0px 6px #fff,
0px 1px 6px #fff,
-1px 0px 6px #fff,
0px -1px 6px #fff;
  z-index:6;
  }

#monthly .text{
  font-size:18px;
  color:#fff;
  position:absolute;
  width: 380px;
  bottom:4px;
  text-align: left;
  font-family:sans-serif;
  font-weight:normal;
  padding:6px 30px 6px 30px;
  background: linear-gradient(to right,transparent 0%,#1f1411 16%,#1f1411 84%,transparent 100%);
  z-index:7;
  }

#monthly p.memo{
  width:900px;
  text-align: center;
}