.mainbanner {width: 100%;
background-size: cover;
    background-position: center center;
margin: 50px 0 15px 0;
height: 300px;}
 
.mainbanner h1 {
    padding-top: 150px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    text-align: center;
    font-size: 2.5rem;
    letter-spacing: 2px;
    margin-bottom: 0;
}



.bgnew {
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/6503147/bana-/new-joker-2.jpg);
}

.bgre {
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/ic4-a.wowma.net/mi/w/1280/h/1280/q/90/image.wowma.click/6503147/bana-/re_joker-3.jpg);
}

.bgranking {
  background-image: url(https://ic4-a.wowma.net/mi/w/1280/h/1280/q/90/bcimg1-a.wowma.net/plus/u6503147/pc/arrival/ranking.jpg);
}

.list h2{ font-size: 18px; font-family: 'Noto Sans JP', sans-serif; font-weight: bold; background: #000; color: #fff; padding: 10px;}
.list h3{ line-height: 150%;height: 65px;}
.arrivalbox {
    overflow: hidden;
	margin: 50px 15px;
}
/*ranking*/
.item_wrapper {
  list-style-type: none;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0 1vw 1vw;
}

.item_wrapper li {
  width: calc(100% / 2 - 2 * 1vw);
  margin: 1vw;
}

@media screen and (min-width: 425px) {
  .item_wrapper li {
    width: calc(100% / 4 - 2 * 1vw);
  }
}

@media screen and (min-width: 980px) {
  .item_wrapper li {
    width: calc(100% / 4 - 2 * 1vw);
  }
}

.item_wrapper img {
  vertical-align: bottom;
    width: 100%;
}

.rank{ margin-bottom: 100px;}

.rank li {
  counter-increment: rank;
  position: relative;
  overflow: hidden;
}

.rank li::before {
  content: "";
  background-color: #bf0000;
  display: block;
  width: 100%;
  height: 2.5rem;
  transform: rotate(-45deg);
  position: absolute;
  left: -50%;
  top: 0;
}

.rank li::after {
  content: counter(rank);
  color: white;
  font-size: .6rem;
  font-weight: 700;
  line-height: initial;
  text-align: center;
  width: 1.5em;
  position: absolute;
  left: .3em;
  top: .3em;
}

.ranking h2{font-size: 18px; font-family: 'Noto Sans JP', sans-serif; font-weight: bold; background: #000; color: #fff; padding: 10px; }
.ranking h3{ font-size: 14px; margin: 10px 0;}
.ranking span{ display: block; width: 100%; text-align: right;}
.ranking span::after{ content: "円(税込み)"; font-size: 70%;}


.slider_style {
	display:flex;
	flex-wrap:wrap;
}
.slider_style > div{ width: 25%; float: left; padding: 10px;}

@media screen and (min-width: 768px) {
  .rank li::after {
    font-size: .8rem;
  }
}


@media screen and (max-width: 480px) {
.mainbanner {height: 150px;}

    .mainbanner h1 {
    padding-top: 70px;
    font-family: 'Roboto', sans-serif;
    color: #fff;
    text-align: center;
    font-size: 2rem;
    letter-spacing: 2px;
    margin-bottom: 0;
}
    .list h2{ font-size: 12px;}
    .ranking h2{font-size: 12px;}
    .ranking h3{ font-size: 12px;}
    .ranking span{font-size: 12px;}
    .ranking li{ margin-bottom: 20px;}
    .rank li::before {height: 2rem;}
	
	.slider_style {
	flex-wrap:wrap;	
	}
.slider_style > div{height:250px;
width:50%}
    
}