/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media (max-width: 768px) {
	
.rank-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 5px 20px;	
}

.ranking-box-rank1 img{
	width: 100%;
	max-width: 450px;
	margin-bottom: 10px;
}


.ranking-box-rank1{
	width: 100%;
	margin: 0 5px 20px;
	text-align: left;	
}

.ranking-box img{
	width: 100%;
	max-width: 450px;
	margin-bottom: 10px;
	margin-top: 1.8em;
}
.ranking-box{
	width: 47%;
	margin: 0 5px 20px;
	text-align: left;	
}

.ranking-box img{
	width: 100%;
	max-width: 450px;
	margin-bottom: 10px;
}

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

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

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

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

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

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

/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/

@media only screen and (min-width: 769px) {
	
   
.rank-wrap{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 0 20px 30px;
}
.ranking-box-rank1 img{
	width: 100%;
	max-width: 450px;
	margin-bottom: 10px;
}
	
.ranking-box-rank1{
	width: 18%;
	margin: 0 5px 20px;
	text-align: left;
}

.ranking-box img{
	width: 100%;
	max-width: 450px;
	margin-bottom: 10px;
	margin-top: 1.8em;
}
	
.ranking-box{
	width: 18%;
	margin: 0 5px 20px;
	text-align: left;
}

.ranking-box img{
	width: 100%;
	max-width: 450px;
	margin-bottom: 10px;
}
	
.rankmark1{
  counter-increment: rank;
  position: relative;
  overflow: hidden;
}

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

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


.rank1{
  content: "";
  background-color: #BEA161;
  display: block;
  width: 100%;
  height: 3.5rem;
  transform: rotate(-45deg);
  position: absolute;
  left: -50%;
  top: 0;
}

.rank2{
  content: "";
  background-color: #ABABAA;
  display: block;
  width: 100%;
  height: 3.5rem;
  transform: rotate(-45deg);
  position: absolute;
  left: -50%;
  top: 0;
}
	
.rank3{
  content: "";
  background-color: #A18C7C;
  display: block;
  width: 100%;
  height: 3.5rem;
  transform: rotate(-45deg);
  position: absolute;
  left: -50%;
  top: 0;
}	
    
}