@charset "utf-8";

#rankingListWrap {
}

/* ==========================================================================
  outer
========================================================================== */
@media all and (min-width: 768px) {
	#listOuterWrap {
		display:table;
		width:100%;
		table-layout:fixed;
	}
	#listOuterWrap #outerLeft {
		display:table-cell;
		vertical-align:top;
		width: 260px;
	}
	#listOuterWrap #outerRight {
		display:table-cell;
		vertical-align:top;
		padding-left:10px;
	}
	#listOuterWrap #outerRight .rightInner {
		overflow:hidden;
		padding-bottom: 2px;
		padding-top: 2px;
	}
}

/* ==========================================================================
  rankingHeader
========================================================================== */
.rankingHeader {
	color:#FFF;
	margin-bottom:10px;
}
.rankingHeader .inner {
	padding:10px;
}
.rankingHeader .rankingTitle {
	font-size:22px;
	line-height:1.2;
	margin-bottom:25px;
	font-weight:bold;
}
.rankingTitle span {
	display:block;
}
.rankingHeader .periodWrap .title {
	padding-bottom:2px;
	margin-bottom:2px;
}

@media all and (max-width: 767px) {
	.rankingHeader .rankingTitle br,
	.rankingHeader .periodWrap br {
		display: none;
	}
}
@media all and (min-width: 768px) {
	.rankingHeader {
		width:100%;
		margin:0;
	}
	.rankingHeader .inner {
		padding:20px 15px;
	}
	.rankingTitle {
		text-align:center;
		font-size:26px !important;
		margin-bottom:20px;
	}
	.rankingTitle span {
		font-size:24px;
		margin-top:5px;
		line-height:1.3;
	}
	.periodWrap {
		text-align:center;
		font-size:16px;
	}
}


#prevRankWrap {
	display:none;
}
@media all and (min-width: 768px) {
	#prevRankWrap {
		display:block;
		margin-top:10px;
	}
	#prevRankWrap .title {
		text-align:center;
		font-weight:bold;
		padding: 8px 0;
		font-size: 18px;
		margin-bottom:10px;
	}
	#prevRankWrap > ul {
		height: 507px;
	}
	#prevRankWrap > .noDataBody{
		height: 507px;
		text-align:center;
	}
	#prevRankWrap > ul > li:last-child {
		border:none;
	}
	#prevRankWrap .inner {
		padding:7px;
	}
	#prevRankWrap .sepWrap {
		display:table;
		width:100%;
		table-layout:fixed;
	}
	#prevRankWrap .sepWrap > div {
		display:table-cell;
		width:50%;
		vertical-align:middle;
	}
	#prevRankWrap .sepWrap .left {
		line-height:1;
		font-size:16px;
	}
	#prevRankWrap .sepWrap .left p {
		letter-spacing: -1px;
		margin-top:3px;
	}
	#prevRankWrap .rank1 .sepWrap .left {
		font-size: 20px;
	}
	#prevRankWrap .rank2 .sepWrap .left {
		font-size: 20px;
	}
	#prevRankWrap .rank3 .sepWrap .left {
		font-size: 20px;
	}
	#prevRankWrap .rank1 .sepWrap .left p,
	#prevRankWrap .rank2 .sepWrap .left p,
	#prevRankWrap .rank3 .sepWrap .left p {
		font-size: 16px;
		font-weight: bold;
	}
	#prevRankWrap .sepWrap .left span {
		font-weight:bold;
	}
	#prevRankWrap .sepWrap .right {
		font-size: 14px;
		font-weight: bold;
		letter-spacing: -1px;
	}
	
	#prevRankWrap .sepWrap .left img {
		width:30px;
		vertical-align:bottom;
		margin-left:3px;
	}
	#prevRankWrap .linkBtnWrap a {
		display:block;
		text-align:center;
		text-decoration:none;
		font-size:12px;
		line-height:33px;
		font-weight:bold;
	}
	#prevRankWrap .linkBtnWrap li:first-child a {
		margin-bottom:4px;
	}
}

/* ==========================================================================
  rankingBoxWrap
========================================================================== */
.rankingBoxWrap {
	margin-bottom:10px;
}
.rankingBoxWrap .sepWrap {
	overflow:hidden;
}
.rankingBoxWrap .sepWrap .photo {
	float:left;
	width:50%;
}
.rankingBoxWrap .sepWrap .photo img {
	max-width:100%;
	max-height:100%;
	vertical-align:bottom;
}
.rankingBoxWrap .sepWrap .rankNumWrap {
	margin-left:52%;
	font-size:17px;
	font-weight:bold;
	line-height:1;
}
.rankingBoxWrap .sepWrap .rankNumWrap .crown {
	text-align:center;
}
.rankingBoxWrap .sepWrap .rankNumWrap .crown img {
	width:50px;
}
.rankingBoxWrap .sepWrap .rankNumWrap p {
	display:inline-block;
}
.rankingBoxWrap .sepWrap .rankNumWrap p img {
	width:15px;
}
.rankingBoxWrap.rank1 .sepWrap .rankNumWrap p img,
.rankingBoxWrap.rank2 .sepWrap .rankNumWrap p img,
.rankingBoxWrap.rank3 .sepWrap .rankNumWrap p img{
	width: 32px;
}
.rankingBoxWrap .sepWrap .rankNumWrap span {
	font-size:20px;
	margin:0 3px;
	font-family:"メイリオ",Meiryo,Verdana, Geneva, sans-serif;
}
.rankingBoxWrap .sepWrap .nameWrap {
	margin-left:52%;
}
.rankingBoxWrap .sepWrap .nameWrap .name {
	font-weight:bold;
}
.rankingBoxWrap .sepWrap .nameWrap .size {
	font-size:11px;
	margin-bottom:5px;
}
.rankingBoxWrap .sepWrap .linkBtnWrap {
	margin-left:52%;
}
.rankingBoxWrap .sepWrap .linkBtnWrap a {
	display:block;
	text-align:center;
	text-decoration:none;
	font-size:12px;
	line-height:33px;
	font-weight:bold;
}
.rankingBoxWrap .sepWrap .linkBtnWrap li:first-child a {
	margin-bottom:4px;
}
.rankingBoxWrap .inner {
	margin:3px;
}
.rankingBoxWrap.rank1 .sepWrap .rankNumWrap {
	text-align:center;
	font-size:20px;
}
.rankingBoxWrap.rank2 .sepWrap .rankNumWrap {
	text-align:center;
	font-size:20px;
}
.rankingBoxWrap.rank3 .sepWrap .rankNumWrap {
	text-align:center;
	font-size:20px;
}

@media all and (max-width: 767px) {

	.rankingBoxWrap .sepWrap .nameWrap{
		text-align:center;
	}
	.rankingBoxWrap .sepWrap .nameWrap .name{
		font-size: 15px;
	}
	.rankingBoxWrap .sepWrap .rankNumWrap p {
		display:block;
	}
	.rankingBoxWrap .sepWrap .rankNumWrap p span {
		font-size:25px;
	}
	.rankingBoxWrap .sepWrap .rankNumWrap .crown img {
		width: 42px;
	}
	.rankingBoxWrap.rank1 .sepWrap .rankNumWrap p img,
	.rankingBoxWrap.rank2 .sepWrap .rankNumWrap p img,
	.rankingBoxWrap.rank3 .sepWrap .rankNumWrap p img {
		width:12px;
	}
	.rankingBoxWrap.rank4 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank5 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank6 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank7 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank8 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank9 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank10 .sepWrap .rankNumWrap {
		margin-top:25px;
		margin-bottom:5px;
		font-size: 20px;
		text-align:center;
	}
	.rankingBoxWrap.rank4 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank5 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank6 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank7 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank8 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank9 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank10 .sepWrap .nameWrap .name {
		margin-bottom:5px;
	}

	.rankingBoxWrap.rank4 .sepWrap .nameWrap,
	.rankingBoxWrap.rank5 .sepWrap .nameWrap,
	.rankingBoxWrap.rank6 .sepWrap .nameWrap,
	.rankingBoxWrap.rank7 .sepWrap .nameWrap,
	.rankingBoxWrap.rank8 .sepWrap .nameWrap,
	.rankingBoxWrap.rank9 .sepWrap .nameWrap,
	.rankingBoxWrap.rank10 .sepWrap .nameWrap {
		margin-bottom:15px;
	}
	.rankingBoxWrap .sepWrap .linkBtnWrap a {
		line-height:40px;
	}
}

@media all and (min-width: 768px) {
	#rankingListWrap {
		overflow:hidden;
		margin-bottom:20px;
	}
	.rankingBoxWrap {
		background-color:#FFF;
		margin:0;
	}
	.rankingBoxWrap .sepWrap .photo {
		width:43%;
	}
	.rankingBoxWrap .sepWrap .infoWrap {
		float:right;
		width:55%;
	}
	.rankingBoxWrap .sepWrap .rankNumWrap,
	.rankingBoxWrap .sepWrap .nameWrap,
	.rankingBoxWrap .sepWrap .linkBtnWrap {
		margin-left:0;
	}

	.rankingBoxWrap.rank1 {
		margin:0 2px 15px;
	}
	.rankingBoxWrap.rank7 .inner{
		margin:7px;
	}
	.rankingBoxWrap.rank1::after {
		overflow:hidden;
	}
	.rankingBoxWrap.rank1 .sepWrap .photo {
		width:30%;
		height:290px;
	}
	.rankingBoxWrap.rank1 .sepWrap .infoWrap {
		width:69%;
	}
	.rankingBoxWrap.rank2 .sepWrap .photo,
	.rankingBoxWrap.rank3 .sepWrap .photo {
		width: 44%;
		height: 216px;
	}
	.rankingBoxWrap.rank2 .sepWrap .infoWrap,
	.rankingBoxWrap.rank3 .sepWrap .infoWrap {
		width:54%;
	}
	.rankingBoxWrap.rank4 .sepWrap .photo,
	.rankingBoxWrap.rank5 .sepWrap .photo,
	.rankingBoxWrap.rank6 .sepWrap .photo {
		height: 139px;
	}
	.rankingBoxWrap.rank7 .inner, 
	.rankingBoxWrap.rank8 .inner, 
	.rankingBoxWrap.rank9 .inner, 
	.rankingBoxWrap.rank10 .inner {
		margin: 2px;
	}
	.rankingBoxWrap.rank7 .sepWrap .photo,
	.rankingBoxWrap.rank8 .sepWrap .photo,
	.rankingBoxWrap.rank9 .sepWrap .photo,
	.rankingBoxWrap.rank10 .sepWrap .photo {
		width:43%;
		height:110px;
	}
	.rankingBoxWrap.rank7 .sepWrap .infoWrap,
	.rankingBoxWrap.rank8 .sepWrap .infoWrap,
	.rankingBoxWrap.rank9 .sepWrap .infoWrap,
	.rankingBoxWrap.rank10 .sepWrap .infoWrap {
		width:55%;
	}
	
	.rankingBoxWrap.rank2 {
		float:left;
		width: 338px;
		margin-left: 2px;
		margin-bottom:15px;
	}
	.rankingBoxWrap.rank3 {
		float:right;
		width: 338px;
		margin-right: 2px;
		margin-bottom:15px;
	}
	.rankingBoxWrap.rank3::after {
		overflow:hidden;
	}
	
	.rankingBoxWrap.rank1 .sepWrap .rankNumWrap {
		font-size:42px;
		line-height:1;
		margin-top:8px;
	}
	.rankingBoxWrap.rank2 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank3 .sepWrap .rankNumWrap {
		font-size:24px;
	}
	.rankingBoxWrap.rank1 .sepWrap .rankNumWrap p,
	.rankingBoxWrap.rank2 .sepWrap .rankNumWrap p,
	.rankingBoxWrap.rank3 .sepWrap .rankNumWrap p {
		display:block;
	}
	.rankingBoxWrap.rank1 .sepWrap .rankNumWrap p span {
		font-size:52px;
	}
	.rankingBoxWrap.rank2 .sepWrap .rankNumWrap p span,
	.rankingBoxWrap.rank3 .sepWrap .rankNumWrap p span {
		font-size:38px;
	}
	.rankingBoxWrap.rank2 .sepWrap .rankNumWrap .crown img,
	.rankingBoxWrap.rank3 .sepWrap .rankNumWrap .crown img {
		width:45px;
	}
	.rankingBoxWrap.rank1 .sepWrap .rankNumWrap .crown img {
		width:70px;
	}
	
	.rankingBoxWrap.rank1 p,
	.rankingBoxWrap.rank2 p,
	.rankingBoxWrap.rank3 p {
		display:inline-block !important;
	}
	.rankingBoxWrap.rank1 .sepWrap .rankNumWrap p img {
		width:35px;
	}
	
	.rankingBoxWrap.rank1 .sepWrap .nameWrap .name {
		font-size:36px;
		text-align:center;
	}
	.rankingBoxWrap.rank1 .sepWrap .nameWrap .size {
		text-align:center;
		font-size:28px;
	}
	.rankingBoxWrap.rank1 .sepWrap .linkBtnWrap a{
		margin-bottom:0 !important;
	}
	.rankingBoxWrap.rank2 .sepWrap .nameWrap .name,
	.rankingBoxWrap.rank3 .sepWrap .nameWrap .name {
		font-size:22px;
		text-align:center;
	}
	.rankingBoxWrap.rank2 .sepWrap .nameWrap .size,
	.rankingBoxWrap.rank3 .sepWrap .nameWrap .size {
		text-align:center;
		font-size:14px;
	}
	
	.rankingBoxWrap.rank4 {
		float:left;
		width:222px;
		margin-left:2px;
		margin-right:7px;
		margin-bottom:15px;
		text-align:center;
	}
	.rankingBoxWrap.rank5 {
		float:left;
		width:222px;
		margin-right:7px;
		margin-bottom:15px;
		text-align:center;
	}
	.rankingBoxWrap.rank6 {
		float:right;
		width:222px;
		margin-right:2px;
		margin-bottom:15px;
		text-align:center;
	}
	.rankingBoxWrap.rank4 .sepWrap .nameWrap .size,
	.rankingBoxWrap.rank5 .sepWrap .nameWrap .size,
	.rankingBoxWrap.rank6 .sepWrap .nameWrap .size {
		font-size:10px;
		text-align:center;
	}
	.rankingBoxWrap.rank6::after {
		overflow:hidden;
	}
	
	.rankingBoxWrap.rank4 .sepWrap .rankNumWrap p,
	.rankingBoxWrap.rank5 .sepWrap .rankNumWrap p,
	.rankingBoxWrap.rank6 .sepWrap .rankNumWrap p {
		display:block;
	}
	.rankingBoxWrap.rank4 .sepWrap .rankNumWrap p,
	.rankingBoxWrap.rank5 .sepWrap .rankNumWrap p,
	.rankingBoxWrap.rank6 .sepWrap .rankNumWrap p {
		margin-top:3px;
	}
	.rankingBoxWrap.rank4 .sepWrap .linkBtnWrap a,
	.rankingBoxWrap.rank5 .sepWrap .linkBtnWrap a,
	.rankingBoxWrap.rank6 .sepWrap .linkBtnWrap a{
		font-size: 11px;
		letter-spacing: -1px;
		line-height: 27px;
	}
	
	.rankingBoxWrap.rank7,
	.rankingBoxWrap.rank8,
	.rankingBoxWrap.rank9 {
		float: left;
		width: 161px;
		margin-right: 5px;
		text-align:center;
	}
	.rankingBoxWrap.rank7{
		margin-left:2px;
	}
	.rankingBoxWrap.rank10 {
		float: right;
		width: 178px;
		text-align:center;
		margin-right:2px;
	}
	.rankingBoxWrap.rank7 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank8 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank9 .sepWrap .rankNumWrap,
	.rankingBoxWrap.rank10 .sepWrap .rankNumWrap {
		letter-spacing: -1px;
	}
	.rankingBoxWrap.rank7 .sepWrap .rankNumWrap p span,
	.rankingBoxWrap.rank8 .sepWrap .rankNumWrap p span,
	.rankingBoxWrap.rank9 .sepWrap .rankNumWrap p span,
	.rankingBoxWrap.rank10 .sepWrap .rankNumWrap p span {
		font-size:16px;
	}

	.rankingBoxWrap.rank7 .sepWrap .linkBtnWrap::before {
		clear:both;
	}
	.rankingBoxWrap.rank7 .sepWrap .linkBtnWrap a,
	.rankingBoxWrap.rank8 .sepWrap .linkBtnWrap a,
	.rankingBoxWrap.rank9 .sepWrap .linkBtnWrap a,
	.rankingBoxWrap.rank10 .sepWrap .linkBtnWrap a {
		font-size: 11px;
		letter-spacing: -1px;
		line-height: 25px;
		margin-bottom:2px !important;
	}
	.rankingBoxWrap.rank7 .sepWrap .nameWrap,
	.rankingBoxWrap.rank8 .sepWrap .nameWrap,
	.rankingBoxWrap.rank9 .sepWrap .nameWrap,
	.rankingBoxWrap.rank10 .sepWrap .nameWrap {
		font-size:11px;
		letter-spacing: -1px;
	}
	.rankingBoxWrap.rank7 .sepWrap .nameWrap .size,
	.rankingBoxWrap.rank8 .sepWrap .nameWrap .size,
	.rankingBoxWrap.rank9 .sepWrap .nameWrap .size,
	.rankingBoxWrap.rank10 .sepWrap .nameWrap .size {
		font-size:10px;
		letter-spacing: -1px;
		margin-bottom: 3px;
		line-height: 1;
	}

	.rankingBoxWrap.rank1 {
		position:relative;
	}
	.rankingBoxWrap.rank1 .sepWrap .linkBtnWrap {
		position:absolute;
		bottom:4px;
		display:table;
		width:473px;
		border-spacing:5px;
		table-layout:fixed;
		margin:-6px;
	}
	.rankingBoxWrap.rank1 .sepWrap .linkBtnWrap li {
		display:table-cell;
		width:50%;
	}
}

/* ==========================================================================
  rankingTab
========================================================================== */
.rankingTab{
  display:table;
  border:1px solid #999;
  width:99%;
  table-layout:fixed;
  border-collapse:collapse;
  margin:5px 0.5%;
}
.rankingTab div{
  display:table-cell;
  text-align:center;
  font-size:14px;
  border:1px solid #999;
}
.rankingTab div.commonBtn{
  margin:0;
  width:auto;
  padding:0;
}
.rankingTab div.commonBtn a{
  font-size: 14px;
  width:100%;
  margin:0;
}
.rankingTab div.commonBtn a:hover{
  position:static;
}
.rankingTab div a{
  display:block;
  padding:5px 0;
  text-decoration:none;
}
@media screen and (max-width: 480px) {
  .rankingTab div{
    font-size:11px;
    line-height:18px;
  }
  .rankingTab div.commonBtn a{
    font-size:11px;
  }
}