#challenge{
  > *{max-width:980px !important;}
  #event{max-width:650px !important; margin:0 auto;}
  .date{
    position:relative;
    width:calc(100% - 180px);
    max-width:480px !important;
    height:80px;
    color:#ffd1b8;
    background-image:url(../img/event/challenge/common/title_pat.png);
    background-size:auto 100%;
    background-repeat:repeat-x;
    font-size:clamp(1rem, 0.773rem + 1.14vw, 1.625rem);/*26-16*/
    margin:0 auto 40px;
    &::before,&::after{display:block; content:""; position:absolute; top:0; width:80px; height:80px; background-size:100% 100%; z-index:2;}
    &::before{background-image:url(../img/event/challenge/common/title_left.png); left:-80px;}
    &::after{background-image:url(../img/event/challenge/common/title_right.png); right:-80px;}
    > p{
      display:flex;
      position:absolute;
      top:0;
      left:calc(50% - 50vw);
      width:100vw;
      height:100%;
      justify-content:center;
      align-items:center;
      z-index:3;
    }
  }
  .frame{
    text-align:center;
    & + h2{margin-top:100px;}
  }
  .box{
    > strong{display:block; color:#fac51b; font-family:"Yuji Syuku", serif; font-weight:normal; font-size:clamp(1.125rem, 0.852rem + 1.36vw, 1.875rem);/*30-18*/}
    > img{display:block; margin:0 auto;}
    > .pic{max-width:400px;}
    > p{font-size:clamp(0.813rem, 0.699rem + 0.57vw, 1.125rem) !important;/*18-13*/}
  }
  .step > .box:not(:last-child)::after{
    background-image:url(../img/event/challenge/common/arrow.png) !important;
    filter:drop-shadow(0 0 3px #000) drop-shadow(0 0 5px #000);
    transform:translateZ(0);
  }
}

@media screen and (max-width:800px){#challenge .frame + h2{margin-top:50px;}}
@media screen and (max-width:480px){#challenge .frame + h2{margin-top:30px;}}
@media screen and (max-width:420px){
  #challenge .date{
    width:calc(100% - 120px); height:60px; margin:0 auto 20px;
    &::before,&::after{width:60px; height:60px;}
    &::before{left:-60px;}
    &::after{right:-60px;}
  }
}