@charset "utf-8";
/* CSS Document */

@media screen and (min-width: 769px) {
/* PC用のスタイル記述 */


.pc { display:block}
.nonpc { display:none}
.rank_list1{
    margin:10px 0 0;
    border:1px solid #CCCCCC;
}
.rank_image1{
    width:230px;
    padding: 20px 0px 20px 7px;
    float:left;

}
.rank_image1 .thumbnail{
    width:155px;
    text-align:center;
}
.rank_b_name1
{
	background-color:#003586;
	color:#FFFFFF;
	padding:7px;
	margin:0 0 5px;
	font-size: 85%;
}
.rank_b_name1 a,
.rank_b_name2 a
{
	color:#FFFFFF;
	text-decoration: none;
}

.rank_b_name1 a:hover,
.rank_b_name2 a:hover
{ text-decoration:underline;}

.rank_b_name1 img,
.rank_b_name2 img
{
    margin-left:10px;
}
.rank_b_name1 .b_name
{
    width:540px;
}

.detail_link{
	width:150px;
	text-align:center;
	margin-top: 2px;
}
.detail_link a{
	display:block;
	background-color:#FFF;
	color: #003585;
	text-decoration: none;
	font-size: 85%;
	-moz-border-radius: 5px;
	border-radius: 5px;

	}

.detail_link a:hover{opacity: 0.7;
filter: alpha(opacity=70);
text-decoration:none;}

.rank_detail1
{
	float:right;
	width:750px;
	padding:5px;
}
.rank_detail1 table,
.rank_detail2 table
{
	width:100%;
	border:1px solid #CCCCCC;
	border-collapse:collapse;
	font-size: 85%;
}
.rank_detail1 table td,
.rank_detail1 table th,
.rank_detail2 table td,
.rank_detail2 table th
{
    padding:5px;
    border:1px solid #CCCCCC;
    text-align:left;
}
.rank_detail1 table td
{
    width:251px;
}
.rank_detail1 table th
{
    width:88px;
    background-color:#D5E3F9;
    color:#003836;
    border:1px solid #CCCCCC;
}

.rank_list2{
    margin:10px 0 0;
    border:1px solid #CCCCCC;
    width:465px;
}
.rank_b_name2
{
	background-color:#003586;
	color:#FFFFFF;
	padding:7px;
	margin:0 0 5px;
	font-size: 80%;
}
.rank_image2{
	float:left;
	padding-right: 0px;
	padding-left: 0px;
	margin-right: 5px;
	padding-top: 5px;
}
.rank_image2 img {
	width: 50px;
}

.rank_detail2
{
	float:right;
	width:400px;
	padding:5px;
	height: 200px;
}
.rank_detail2 table td
{
    width:124px;
}
.rank_detail2 table td.cols3
{
    width:328px;
}
.rank_detail2 table th
{
    width:78px;
    background-color:#D5E3F9;
    color:#003836;
    border:1px solid #CCCCCC;
}
	}


@media screen and (max-width: 768px) {
/* スマートフォン用のスタイル記述 */

.pc { display:none}
.nonpc { display: block}

.rank_list1{
	margin:10px;
	border:1px solid #CCCCCC;
	padding: 5px;
}
.rank_image1 {
	position: relative;
	float:left;
	width:30%;
	margin-right:10px;
	margin-bottom:10px;
}
.rank_image1 .rank {
	position: absolute;
}

.rank img{ width:40px;}
.rank_b_name1 {
	float: right;
	width: 65%;

}

.rank_b_name1 img{ width:80px; margin-left:10px;}

.rank_b_name1 a{
	color:#003586;	
	text-decoration:none;
	font-size: 120%;
	font-weight: bold;
	
}

.detail_link{
	width:9em;
	text-align:center;
	margin-top: 10px;
	margin-right:10px;
}
.detail_link a{
	display:block;
	background-color:#FFF;
	color: #FFF;
	text-decoration: none;
	font-size: 80%;
	-moz-border-radius: 5px;
	border-radius: 5px;
	background-color:#003586;
	padding-top: 5px;
	padding-bottom: 5px;
	}

.detail_link a:hover{opacity: 0.7;
filter: alpha(opacity=70);
text-decoration:none;}


.rank_detail1 table,
.rank_detail2 table
{
	width:100%;
	border:1px solid #CCCCCC;
	border-collapse:collapse;
	font-size: 85%;
	margin-top:10px;
}
.rank_detail1 table td,
.rank_detail1 table th,
.rank_detail2 table td,
.rank_detail2 table th
{
    padding:5px;
    border:1px solid #CCCCCC;
    text-align:left;
}
.rank_detail1 table td
{
   
}
.rank_detail1 table th,
.rank_detail2 table th
{
    width:20%;
    background-color:#D5E3F9;
    color:#003836;
    border:1px solid #CCCCCC;
	
}
.rank {
	float: left;
}

.rank_list2 {
	float: none;
	margin: 10px;
	padding: 5px;
	border: 1px solid #CCC;
}

.rank_detail2
{
	
}
.rank_detail2 table td
{
    
}
.rank_detail2 table td.cols3
{
   
}
.rank_detail2 table th
{
    
    background-color:#D5E3F9;
    color:#003836;
    border:1px solid #CCCCCC;
}

.rank_detail2 a{ color:#003586; text-decoration:none; font-weight:bold;}
.rank_detail2 img { width:80px; margin-left:10px;}
.rankup {
	float: left;
	width: 80px;
	margin-right:10px;
}

}