@charset "utf-8";


.rankThumbBox img{
	width: 100%;
	height: auto;
}


/* --------------------------------------------------
	PC
-------------------------------------------------- */
@media screen and (min-width:641px){
	.mainTtl{
		font-size: 2em;
		font-weight: bold;
		line-height: 1.2em;
	}

	.lpRankingList{
		margin: 50px 0;
	}

	.lpRankingList li{
		display: flex;
		align-items: center;
		padding: 20px 0;
		border-bottom: 1px solid #666;
	}
	.rankingNum{
		width: 80px;
		margin-right: 20px;
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
	}
	.rankingNum img{
		width: 100%;
		height: auto;
	}
	.lpRankingList li a{
		width: calc(100% - 100px);
		display: flex;
		gap: 20px;
		align-items: center;
		text-decoration: none;
	}
	.lpRankingList li .rankThumbBox{
		width: 30%;
		min-width: 30%;
		max-width: 30%;
	}
	.lpRankingList li:nth-of-type(-n+3) .rankThumbBox{
		width: 40%;
		min-width: 40%;
		max-width: 40%;
	}
	
	.rankTitle{
		font-size: 1.4em;
		text-decoration: underline;
	}
	.rankCast{
		margin-top: 10px;	
	}
}

/* --------------------------------------------------
	スマホ
-------------------------------------------------- */
@media screen and (max-width:640px){
	.mainTtl{
		font-size: 1.5em;
		font-weight: bold;
		line-height: 1.2em;
	}

	.lpRankingList{
		margin: 30px 0;
	}

	.lpRankingList li{
		display: flex;
		padding: 20px 0;
		border-bottom: 1px solid #666;
	}
	.rankingNum{
		width: 50px;
		margin-right: 15px;
		text-align: center;
		font-weight: bold;
		font-size: 1.2em;
	}
	.rankingNum img{
		width: 100%;
		height: auto;
	}
	.lpRankingList li a{
		width: calc(100% - 65px);
		gap: 10px;
		align-items: center;
		text-decoration: none;
	}
	.lpRankingList li .rankThumbBox{
		width: 50%;
		margin-bottom: 1em;	
	}
	.lpRankingList li:nth-of-type(-n+3) .rankThumbBox{
		width: 100%;
	}
	
	.rankTitle{
		font-size: 1.4em;
		text-decoration: underline;
	}
	.rankCast{
		margin-top: 10px;
		
	}

}