#bg{
display: none;
}

.sp{
display: none;
}

main{
margin-top: 0px;
width: 790px;
}

a{
color: #00c;
}

main article{
  width: 100%;
  background-image:url(/images/18/partner-flame-lower_sp-1.png);
  background-repeat: no-repeat;
  background-position: center bottom;
  padding-bottom: 80px;
}

main article header{
  background-image:url(/images/18/partner-flame-upper_sp-1.png);
  background-repeat: no-repeat;
  background-position: center top;
  padding-top: 80px;
}

main article header h1 a{

    text-decoration: none;
    font-size: 1rem;
    line-height: 1.5;
    display: block;
}


main article .body{
display: flex;
}


main article .head{
width: 40%;
}


main article .head ul{
display: flex;
padding: 10px 0;
justify-content: space-between;
}

main article .rec li a{
border: solid 1px #000;
border-radius: 50px;
text-decoration: none;
padding: 10px 20px;
line-height: 1;
font-size: .9rem;
}


main article .rec li:nth-of-type(1) a{border-color:#E43A61;color: #E43A61;}
main article .rec li:nth-of-type(2) a{border-color:#71BEEF;color: #71BEEF;}
main .info{
width: 60%;
padding: 0 10px;
padding-right: 0;
}

main .info dl *{
display: inline-block;
font-size: .8rem;
}

main .info dl{  
}

main .data{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}

main .data dl{
  width: 50%;
}

main .intro{
padding: 10px;
background: #fcfcfc;
border: solid 1px #ddd;
}

main .intro p{
font-size: .8rem;
white-space: pre-line;
}

.rank{
display: flex;
flex-wrap:wrap;
justify-content: space-between;
}
.rank li{
width: 50%;
}
.rank li:nth-of-type(n+3){
width: calc(100% / 3);
}




@media (max-width: 767px){
  body{
    padding-top: 0 !important;
  }
  #h{
    display: none;
  }
  body{
    background: #000;
  }
  main{
    width: 100%;
    padding-top: 0 !important;
    padding: 0;
  }
  
  #spNavi{
    display: none;
  }
  
  main article{
    background: #FFFFE8;
    padding: 10px;
  }

  main article header{
    text-align: center;
    background-size: 150%;
  }
  main article header h1,
  main article header p{
    text-align: left;
  }
  main article .body{
    display: block;
  }
  
  main .rec{
    gap:10px;
    margin-bottom: 20px;
  }
  main article .rec li a{
    font-size: .8rem;
  }
  main article .head ul{
    justify-content: center;
  }
  
  main article .head{
    width: 100%;
    overflow-x: hidden;
  }
  
  main article .rankWrap{
    width: 100%;
    overflow-x: scroll;
  }
  main article .rank{
    width: 150vw;
    flex-wrap: nowrap;
    justify-content: flex-start !important;
  }
  main article .rank li{
    width: calc(150vw / 5) !important;
  }
  .sp{
    display: block;
  }
  
  main article .info{
    display: flex;
    width: 100%;
  }
  main article .info h2{
    width: 35%;
    margin-right: 20px;
  }
  
  main article .info .data{
    display: block;
  }
  main article .info .data dl{
    width: 100%;
  }
  main article .info .intro{
    display: none;
  }
}