
h4{  margin-bottom:1rem; text-align:center; }

.txt_y{  color:#ffff00; }

/*  .howtoplay  */
.howtoplay{
  /*border:1px dashed #ff8800;*/
  padding:3rem 8rem;
  line-height:200%;
  background:url(../images/special2024/img_bg01-pc.png) 100% 100% / cover;
  background-position:bottom;
  background-repeat:no-repeat;
  width:100%;
  color:#ffffff;
}
.howtoplay ul{
  margin-top:1rem;
  margin-bottom:2rem;
  list-style-type: none;
  margin-left:2rem;
}
.howtoplay ul li:before {
  content: '★';
  margin-left:-2rem;
  color:#ffff00;
}

/*  .presentbox  */
.presentbox{
  /*border:1px dashed #00ff00;*/
  padding:2rem 2rem 2rem 0;
  display: flex;
  flex-flow: row wrap;
  line-height:150%;
  border-radius:1rem;
  background-color:#262626;
  color:#ffffff;
}

.presentbox .left{
  /*border:1px dashed #ff8800;*/
  flex-basis:40%;
  position: relative;
}
.presentbox .point{
  /*border:1px dashed #ff0000;*/
  font-size:2rem;
  line-height:100%;
}
.presentbox .point .pInner{
  /*border:1px dashed #00ff00;*/
  display:inline;
  position:absolute;
  margin-top:1.5rem;
}
.presentbox .point::before{
  content: "";
  display: inline-block;
  background: url(../images/special2024/img_present_A.png) 100% 100% / cover;
  background-repeat:no-repeat;
  height: 4rem;
  width: 10rem;
  margin-right:1.5rem;
}
.presentbox .item{
  /*border:1px dashed #0000ff;*/
  padding:2rem 2.5rem;
  font-size:2.5rem;
  line-height:130%;
}
.presentbox .number{
  /*border:1px dashed #ffff00;*/
  margin-top:1rem;
  padding:0 2.5rem;
  color:#ffff00;
  font-size:2rem;
  font-weight:700;
  position: absolute;
  bottom: 0;
}
.presentbox .number .num{
  font-size:3rem;
}

.presentB .point::before{
  background: url(../images/special2024/img_present_B.png) 100% 100% / cover;
  background-repeat:no-repeat;
}
.presentC .point::before{
  background: url(../images/special2024/img_present_C.png) 100% 100% / cover;
  background-repeat:no-repeat;
}
.presentD .point::before{
  background: url(../images/special2024/img_present_D.png) 100% 100% / cover;
  background-repeat:no-repeat;
}

.presentbox .right{
  /*border:1px dashed #00ffff;*/
  flex-basis:60%;
  position: relative;
}

.presentB .right .wrapper{
  display: flex;
  flex-flow: row wrap;
}
.presentB .right .wrapper div{
  flex-basis:48%;
  margin:0.3rem;
}

.presentbox .bottom{
  /*border:1px dashed #00ff00;*/
  flex-basis:100%;
  padding:2rem;
}
.presentbox .bottom a{
  display:inline;
  color:#ef0100;
  text-decoration:underline;
}

.presentbox .info{
  /*border:1px dashed #00ff00;*/
  flex-basis:100%;
  text-align:center;
  padding:2rem 0 0;
  margin-left:2rem;
  border-top:3px solid #000000;
}
.presentbox .info a{
  text-decoration:none;
  color:#ef0100;
  font-weight:700;
}

/* スクリーンサイズが767px以下の場合に適用 */
@media screen and (max-width: 767px) {
  
  .howtoplay{
    background:url(../images/special2024/img_bg01-sp.png) 100% 100% / cover;
  }
  
  .presentbox .point .pInner{
    /*border:1px dashed #00ff00;*/
    top:4.5rem;
    left:2rem;
  }
  
  .presentbox .item{
    margin-top:4rem;
  }
  
  .presentB .right .wrapper div{
    flex-basis:98%;
  }

}



