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

	.rank p {
font-size: 28px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
margin-bottom: 0;
line-height: 30px;		
}
	.rank span{font-size: 23px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	}
	.rank span.box-caption{
font-size: 28px;
    font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    padding: 2px 0px 0px 0px;
    display: block;
    line-height: 32px;
    color: #5a7582;
    max-width: 100%;
    overflow: hidden;
    padding-top: 15px;
/*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: 92%;
  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: 100px;
    height: 80px;
    text-align: center;
    font-size: 23px;
    color: white;
    background: #ffca3d;
    font-size: 40px!important;
}

.ribbon01:after {
  content: '';
    position: absolute;
    left: 0;
    top: 99%;
    height: 0;
    width: 0;
    border-left: 50px solid #ffca3d;
    border-right: 50px solid #ffca3d;
    border-bottom: 14px 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: 50px;
}

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

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

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

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

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

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

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

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

.ribbon07:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 30px solid #eeb4bb;
  border-right: 30px solid #eeb4bb;
  border-bottom: 7px solid transparent;
}			
.yo-wrapper {
    overflow: hidden;
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding: 5px 0;
    width: 47%;
    box-sizing: border-box;
    text-align: left;
}
.yo0-1 {  
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 0px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #7396a7;
  background: #9bdeff;
  border: solid 2px #fff;	
  border-radius: 50% 0% 0% 50%;	
}
.yo0-2 {  
  display: inline-block;
  position: absolute;
  top: 70px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #7396a7;
  background: #9bdeff;
  border: solid 2px #fff;	
  border-radius: 50% 0% 0% 50%;	
}		
.yo1-1 {  
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 0px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #938829;
  background: #f7e758;
  border: solid 2px #fff;
  border-radius: 50% 0% 0% 50%;	
}
.yo1-2 {  
  display: inline-block;
  position: absolute;
  top: 70px;
  right: 0px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #938829;
  background: #f7e758;
  border: solid 2px #fff;
  border-radius: 50% 0% 0% 50%;	
}
.yo2-1 {  
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 02px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
font-size: 20px!important;
    font-weight: 700;
    color: #81a34d;
  background: #d0f990;
  border: solid 2px #fff;
  border-radius: 50% 0% 0% 50%;	
}
.yo2-2 {  
  display: inline-block;
  position: absolute;
  top: 70px;
  right: 02px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
font-size: 20px!important;
    font-weight: 700;
    color: #81a34d;
  background: #d0f990;
  border: solid 2px #fff;
  border-radius: 50% 0% 0% 50%;		
}				
.voice{
	position:relative;
	margin-top: -20px;
}
.voice-text1 {
    position: absolute;
    top: 140px;
    left: 230px;
    font-size: 30px;
    right: 48px;
}
.voice-text2 {
    position: absolute;
    top: 500px;
    left: 60px;
    font-size: 30px;
    right: 225px;
}
.voice-text3 {
    position: absolute;
    top: 130px;
    left: 235px;
    font-size: 30px;
    right: 50px;
}
.voice-text4 {
    position: absolute;
    top: 95px;
    left: 235px;
    font-size: 30px;
    right: 50px;
}
.voice-text5 {
    position: absolute;
    top: 97px;
    left: 235px;
    font-size: 30px;
    right: 50px;
}
.voice-text6 {
    position: absolute;
    top: 100px;
    left: 230px;
    font-size: 28px;
    right: 55px;
}		
}



/*PC表示*/
	@media screen and (min-width: 601px) {
	
.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: 16px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
margin-bottom: 0;
}
.rank span{font-size: 23px;
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
	}
.rank span.box-caption {
        font-size: 13px;
        font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
        padding: 2px 0px 0px 0px;
        display: block;
        line-height: 18px;
        color: #5a7582;
        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: 70%;
  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: 60px;
  height: 40px;	
  text-align: center;
  font-size: 23px;
  color: white;
  background: #ffca3d;
}

.ribbon01:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 30px solid #ffca3d;
  border-right: 30px solid #ffca3d;
  border-bottom: 7px solid transparent;
}	
.ribbonbox2 {
	margin: 0 auto;
	width: 90%;
	}		
.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: 40%;
  box-sizing: border-box;
  text-align: left;	
  }

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

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

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

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

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

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

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

.ribbon07:after {
  content: '';
  position: absolute;
  left: 0;
  top: 100%;
  height: 0;
  width: 0;
  border-left: 30px solid #eeb4bb;
  border-right: 30px solid #eeb4bb;
  border-bottom: 7px solid transparent;
}			
.yo-wrapper {
    overflow: hidden;
    display: inline-block;
    position: relative;
    vertical-align: top;
    padding: 5px 0;
    width: 40%;
    box-sizing: border-box;
    text-align: left;
}
.yo0-1 {  
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #7396a7;
  background: #B4E5FD;
  border: solid 2px #fff;	
  border-radius: 50%;	
}
.yo0-2 {  
  display: inline-block;
  position: absolute;
  top: 70px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #7396a7;
  background: #B4E5FD;
  border: solid 2px #fff;	
  border-radius: 50%;	
}		
.yo1-1 {  
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #938829;
  background: #D3CA79;
  border: solid 2px #fff;
  border-radius: 50%;	
}
.yo1-2 {  
  display: inline-block;
  position: absolute;
  top: 70px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
  font-size: 20px!important;
  font-weight: 700;
  color: #938829;
  background: #D3CA79;
  border: solid 2px #fff;
  border-radius: 50%;	
}
.yo2-1 {  
  display: inline-block;
  position: absolute;
  top: 5px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
font-size: 20px!important;
    font-weight: 700;
    color: #81a34d;
  background: #C9E1A4;
  border: solid 2px #fff;
  border-radius: 50%;	
}
.yo2-2 {  
  display: inline-block;
  position: absolute;
  top: 70px;
  right: 12px;
  margin: 0;
  padding: 4px 0;
  z-index: 2;
    width: 60px;
    height: 40px;	
  text-align: center;
font-size: 20px!important;
    font-weight: 700;
    color: #81a34d;
  background: #C9E1A4;
  border: solid 2px #fff;
  border-radius: 50%;	
}				
.voice{
	position:relative;
    margin-top: -15px;	
}
.voice-text1 {
    position: absolute;
    top: 110px;
    left: 190px;
    font-size: 25px;
    right: 55px;
}

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

.voice-text4 {
    position: absolute;
    top: 90px;
    left: 183px;
    font-size: 22px;
    right: 40px;
}
.voice-text5 {
    position: absolute;
    top: 80px;
    left: 195px;
    font-size: 22px;
    right: 60px;
}	
.voice-text6 {
    position: absolute;
    top: 80px;
    left: 190px;
    font-size: 22px;
    right: 55px;
}
			
}