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

.title::before{
	content: '';
	display: inline-block;
	width: 50px;
	height: 50px;
	background: url(/img/icon_ranking.svg) no-repeat center top / contain;
	vertical-align: middle;
	padding: 0 30px 0 0;
	margin: -5px 0 0;
}

#number{
	overflow:hidden;
	margin:0 0 2%;
}

#number ul{
	text-align: center;
	margin:4% 0;
}

#number li{
	display: inline-block;
	width:30%;
	font-size:0.88rem;
}

#number .select {
    margin: 0 10px;
    display:inline-block;
    width:260px;
}

#detail{
	text-align: center;
}

#detail ol{
}

#detail li{
	overflow:hidden;
	float:left;
	width:610px;
	margin:0 0 2%;
	padding:40px;
	text-align: left;
}

#detail .thum{
	width:240px;
}

#detail .thum a{
}

#detail .thum a img{
	width:100%;
	transition: 0.5s;
}

#detail .thum a:hover img{
	filter:Alpha(opacity=40) ;
	opacity:0.4 ;
	-moz-opacity:0.4;
}

#detail .thumr{
	width:340px;
}

#detail h3{
	margin:0 0 2%
}

.icon{
	display: inline-block;
	width: 40px;
	height: 40px;
	text-align: center;
	color: #FFF;
	margin: 0 10px 0 0;
	font-size:1.33rem;
	line-height:1.8em;
	background-color: #FF7F00;
}

.comment{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size:0.88rem;
}

.price{
	margin: 5% 0 0;
}

.shop{
}

.shop a{
	color: #4e2600;
	font-size: 0.88rem;
}

#detail li.rank_01{
	width:calc(100% - 80px);
}

#detail li.rank_01 .thum{
	width:360px;
}

#detail li.rank_01 h3{
	font-size:1.33rem;
}

#detail li.rank_01 .thumr{
	width:calc(100% - 400px);
}

.rank_01 .icon{
	background-color: #B28500;
}

.rank_02 .icon{
	background-color: #999999;
}

.rank_03 .icon{
	background-color: #D93600;
}

.rank_01 .comment{
	overflow: inherit;
	white-space: inherit;
}

.button {
    width:auto;
    padding: 15px 120px;
}


/* =============================================================================
   Device
   ========================================================================== */

@media screen and (max-width: 768px) {
	#container .container{
		width: 100%;
	}
	.title::before {
		height: 20px;
		width: 20px;
		padding: 0 20px 0 0;
	}
	#number{
		padding: 0 2%;
	}
	#number ul {
		text-align: left;
	}
	#number li{
		width: 100%;
		margin: 0;
		font-size: 0.78rem;
		display: block;
		padding: 2% 5%;
	}
	#number .select {
		width: calc(100% - 10%);
		margin: 0;
	}
	.icon {
		width: 20px;
		height: 20px;
		font-size: 0.88rem;
		line-height: 1.5em;
	}
	.comment{
		font-size: 0.78rem;	
		text-align: justify;
    	text-justify: inter-ideograph;
		overflow: inherit;
		white-space: inherit;
	}
	#detail li{
		padding: 8% 2%;
		width: auto;
		margin: 0;
		border-bottom: 1px solid #DDD;
	}
	#detail li:last-child{
		border: none;
	}
	#detail .thum{
		width: 30%;
	}
	#detail .thumr{
		width: 66%;
	}
	#detail li.rank_01{
		width: auto;
		padding-top: 0;
	}
	#detail li.rank_01 .thum{
		width: 100%;
		margin: 0 0 2%;
	}
	#detail li.rank_01 .thumr {
		width: auto;
	}
	#detail li.rank_01 h3 {
		font-size: 1rem;
	}	
}