@charset "utf-8";
/* CSS Document */
/*SMP表示*/
	@media screen and (max-width: 759px) {
	
	.rank {
font-size: 10px;
line-height: 1.5;
font-size: 11px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
margin: 20px auto 0;
overflow-x: hidden;
}

	.rank p {
font-size: 25px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
margin-bottom: 0;
}
	.rank span{
		padding-top: 5px;
		font-size: 15px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	}
.rank span.box-caption {
    font-size: 12px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    padding: 10px 0px 0px 0px;
    display: block;
    line-height: 13px;
    color: #555555;
    max-width: 100%;
    overflow: hidden;
    text-align: left;
}
/*text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;	*/
		


.rankitem{
			
padding: 0 8px;			
			
		}		
		
	/*-- rannkigリボン  --*/
.rankbox {
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
overflow:hidden;
padding-top: 0px 0px 5px 0px;
text-align:center;
width: 100%;
	}

.ribbon01-wrapper {  
  overflow:hidden;	
  position: relative;
  vertical-align: top;	
  padding: 2px 0;
  width: 93%;
  text-align: left;
  box-sizing: border-box;
 margin: 0 auto;
  }

.ribbon01 {  
  display: inline-block;  
  position: absolute;
  top: 0;
  left: 5px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
  width: 30px;
  height: 30px;	
  text-align: center;
  font-size: 14px;
  color: white;
  background: #ffca3d;
}

.ribbon01:after {
  content: '';
  position: absolute;
  left: 0;
  top: 98%;
  height: 0;
  width: 0;
  border-left: 15px solid #ffca3d;
  border-right: 15px solid #ffca3d;
  border-bottom: 7px solid transparent;
}	
.rankbox2 {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	overflow:hidden;
	padding-top: 10px 0px 0px 0px;
	text-align:center;
	width : 100%;
	}
.ribbonbox2 {
    margin-top: 0px;
	padding-bottom: 0px!important;
}

.ribbon02-wrapper {  
  overflow:hidden;		
  display: inline-block; 
  position: relative;
  vertical-align: top;
  padding: 5px 0;
  width: 40%;
  box-sizing: border-box;
  text-align: left;	
  }

.ribbon02 {  
  display: inline-block;
  position: absolute;
  top: 0;
  left: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 30px;
    height: 30px;	
  text-align: center;
  font-size: 14px;
  color: white;
  background: #8E8E8E;
}

.ribbon02:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 15px solid #8E8E8E;
  border-right: 15px solid #8E8E8E;
  border-bottom: 7px solid transparent;
}	
.ribbon03-wrapper {  
  overflow:hidden;		
  display: inline-block; 
  position: relative;
  vertical-align: top;
  padding: 5px 0;
  width: 48%;
  box-sizing: border-box;
  text-align: left;	
  }

.ribbon03 {  
  display: inline-block;
  position: absolute;
  top: 0;
  left: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 30px;
    height: 30px;	
  text-align: center;
  font-size: 14px;
  color: white;
  background: #bb9269;
}

.ribbon03:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 15px solid #bb9269;
  border-right: 15px solid #bb9269;
  border-bottom: 7px solid transparent;
}	
.ribbon04-wrapper {  
  overflow:hidden;		
  display: inline-block; 
  position: relative;
  vertical-align: top;
  padding: 5px 0;
  width: 48%;
  box-sizing: border-box;
  text-align: left;	
  }

.ribbon04 {  
  display: inline-block;
  position: absolute;
  top: 0;
  left: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 30px;
    height: 30px;	
  text-align: center;
  font-size: 14px;
  color: white;
  background: #eeb4bb;
}

.ribbon04:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 15px solid #eeb4bb;
  border-right: 15px solid #eeb4bb;
  border-bottom: 7px solid transparent;
}		

.voice{
	position:relative;
	margin-top: -20px;
}
.voice-text1 {
    position: absolute;
    top: 90px;
    left: 230px;
    font-size: 30px;
    right: 48px;
}
.voice-text2 {
    position: absolute;
    top: 460px;
    left: 60px;
    font-size: 30px;
    right: 225px;
}
.voice-text3 {
    position: absolute;
    top: 115px;
    left: 235px;
    font-size: 30px;
    right: 50px;
}
.voice-text4 {
    position: absolute;
    top: 98px;
    left: 235px;
    font-size: 30px;
    right: 50px;
}
.voice-text5 {
    position: absolute;
    top: 115px;
    left: 235px;
    font-size: 30px;
    right: 50px;
}


	}

/*PC表示*/
	@media screen and (min-width: 760px) {
	
.rank {
 font-size: 10px;
		line-height: 1.5;
		font-size: 11px;
 font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
		margin: 0 auto;
		overflow-x: hidden;
	padding-top: 20px;
}

.rank p {
font-size: 18px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
margin-bottom: 0;
}
.rank span{font-size: 18px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	}
.rank span.box-caption {
    font-size: 14px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    padding: 5px 0px 0px 5px;
    display: block;
    line-height: 18px;
    text-align: left;
    color: #555555;
    max-width: 100%;
    overflow: hidden;

/*text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;	*/
		
	}
.rankitem{
			
 padding: 0 10px;			
			
		}
	/*-- rannkigリボン  --*/
.rankbox {
	 font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	overflow:hidden;
	padding-top: 0px 0px 5px 0px;
	text-align:center;
	width: 100%;
	}

.ribbon01-wrapper {  
  overflow:hidden;	
  position: relative;
  vertical-align: top;	
  padding: 2px 0;
  width: 100%;
  text-align: left;
  box-sizing: border-box;
 margin: 0 auto;
  }

.ribbon01 {  
  display: inline-block;  
  position: absolute;
  top: 0;
  left: 5px;
    margin: 0;
    padding: 4px 0;
    z-index: 2;
    width: 50px;
    height: 45px;
  text-align: center;
  font-size: 18px;
  color: #dbc071;
  background: #ffffff;
}

.ribbon01:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 25px solid #ffffff;
  border-right: 25px solid #ffffff;
  border-bottom: 7px solid transparent;
}	
.ribbonbox2 {
	margin-top: 15px;
	}		
.rankbox2 {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	overflow:hidden;
	padding-top: 10px 0px 0px 0px;
	text-align:center;
	width : 100%;
	}

.ribbon02-wrapper {  
  overflow:hidden;		
  display: inline-block; 
  position: relative;
  vertical-align: top;
  padding: 5px 0;
  width: 49.5%;
  box-sizing: border-box;
  text-align: left;	
  }

.ribbon02 {  
  display: inline-block;
  position: absolute;
  top: 0;
  left: 15px;
  margin: 0;
  padding: 4px 0;
    z-index: 2;
    width: 50px;
    height: 45px;	
  text-align: center;
  font-size: 14px;
  color: #bdb1b1;
  background: #ffffff;
}

.ribbon02:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 25px solid #ffffff;
  border-right: 25px solid #ffffff;
  border-bottom: 7px solid transparent;
}	
.ribbon03-wrapper {  
  overflow:hidden;		
  display: inline-block; 
  position: relative;
  vertical-align: top;
  padding: 5px 0;
  width: 49.5%;
  box-sizing: border-box;
  text-align: left;	
  }

.ribbon03 {  
  display: inline-block;
  position: absolute;
  top: 0;
  left: 15px;
  margin: 0;
  padding: 4px 0;
    z-index: 2;
    width: 50px;
    height: 45px;
  text-align: center;
  font-size: 14px;
  color: #c38d87;
  background: #ffffff;
}

.ribbon03:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 25px solid #ffffff;
  border-right: 25px solid #ffffff;
  border-bottom: 7px solid transparent;
}	
.ribbon04-wrapper {  
  overflow:hidden;		
  display: inline-block; 
  position: relative;
  vertical-align: top;
  padding: 5px 0;
  width: 49.5%;
  box-sizing: border-box;
  text-align: left;	
  }

.ribbon04 {  
  display: inline-block;
  position: absolute;
  top: 0;
  left: 15px;
  margin: 0;
  padding: 4px 0;
    z-index: 2;
    width: 50px;
    height: 45px;	
  text-align: center;
  font-size: 14px;
  color: #a5c6d6;
  background: #ffffff;
}

.ribbon04:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 25px solid #ffffff;
  border-right: 25px solid #ffffff;
  border-bottom: 7px solid transparent;
}		

.voice{
	position:relative;
    margin-top: -15px;	
}
.voice-text1 {
    position: absolute;
    top: 75px;
    left: 190px;
    font-size: 25px;
    right: 55px;
}

.voice-text2 {
    position: absolute;
    top: 363px;
    left: 60px;
    font-size: 25px;
    right: 180px;
}
.voice-text3 {
    position: absolute;
    top: 70px;
    left: 195px;
    font-size: 25px;
    right: 60px;
}

.voice-text4 {
    position: absolute;
    top: 80px;
    left: 180px;
    font-size: 25px;
    right: 40px;
}
.voice-text5 {
    position: absolute;
    top: 90px;
    left: 195px;
    font-size: 25px;
    right: 60px;
}		
}