@charset "UTF-8";

* {
        margin: 0;
        padding: 0;
}
body {
        font-size:0.9em;line-height:150%;margin-top:5px;color: #745028;
}
img {
        border: none;
        vertical-align: top;
}
a {
        color: #745028;
        text-decoration: none;
}
a:hover,
a:focus {
        text-decoration: none;
}

a:hover img {
	filter:alpha(opacity=75); /*IE*/
	-moz-opacity:0.75; /*FF*/
	opacity:0.75;
}

table {
        border-collapse: collapse;
}

th,td {
        font-size: 12px;
}


/* end contents04
-------------------------------------------------------------------- */

/*

li.rank01{
background: url("../img/no1.png") no-repeat 0 0;
}

li.rank02{
background: url("../img/no2.png") no-repeat 0 0;
	text-indent:-1;
}

li.rank03{
background: url("../img/no3.png") no-repeat 0 0;
}

li.rank04{
background: url(../img/no4.png) no-repeat 0 0;
}

li.rank05{
background: url(../img/no5.png) no-repeat 0 0;
}

li.rank06{
background: url(../img/no6.png) no-repeat 0 0;
}

li.rank07{
background: url(../img/no7.png) no-repeat 0 0;
}

li.rank08{
background: url(../img/no8.png) no-repeat 0 0;
}

li.rank09{
background: url(../img/no9.png) no-repeat 0 0;
}

li.rank10{
background: url(../img/no10.png) no-repeat 0 0;
}*/

/* 1.2.3位のランキングアイコン */
    #ranking li:nth-child(-n+3) a:before {
        font-size: 1rem;
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        position: absolute;
        text-align: center;
    }

    #ranking li:nth-child(n+4) a:before {
        font-size: 1rem;
        width: 20px;
        height: 20px;
        font-size: 0.8rem;
        line-height: 20px;
        color: #fff;
        position: absolute;
        text-align: center;
    }
        #ranking .rank01 a:before {
            content: "1";
            background-color: #d4ae29;
        }
        #ranking .rank02 a:before {
            content: "2";
            background-color: #7f7f7f;
        }
        #ranking .rank03 a:before {
            content: "3";
            background-color: #af6732;
        }
        #ranking .rank04 a:before {
            content: "4";
        }
        #ranking .rank05 a:before {
            content: "5";
        }
        #ranking .rank06 a:before {
            content: "6";
        }
        #ranking .rank07 a:before {
            content: "7";
        }
        #ranking .rank08 a:before {
            content: "8";
        }
        #ranking li:nth-child(n+4) a:before {
            background-color: #745028;
        }

#ranking{
	width: 100%;
	overflow: none;
}
#ranking ul{
	width:98%;
	text-align:center;
	padding-left:15px;
}
#ranking h3{
	margin-bottom:10px;
}
#ranking ul li{
	width:20%;
	float:left;
	list-style:none;
	margin-bottom:10px;
	margin-right:2%;
	padding-top:10px;
}
#ranking ul li:nth-child(4n){
	margin-right:0%;
}
#ranking ul li a {
	width:20%;
}
#ranking ul li img{
	width:100%;
}

#ranking ul li p.item_name {
    height: 1rem;
   margin: 5px auto 5px;
	text-align:left;
	 font-size:0.8rem;
	overflow:hidden;
    text-overflow: ellipsis;
    
}

#ranking ul li p.price {
    margin: 0;
    font-size:0.75rem;
    font-weight: bold;
    text-align:right;
}

.clear {
    clear: both;
}

.botton{display: none;}


/* ==========================================================================
アイフレームサイズ
========================================================================== */

@media (max-width: 900px){
	#ranking ul {
        width: 100%;
        padding: 5px 10px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;	
    }

/* 1.2.3位を3カラムに */
	#ranking ul li {
        width: calc(33% - 20px);
        margin-bottom: 1.1rem;
        position: relative;
        float: none;
        margin-right: 0;
        padding-top: -25px;
	}

/* 4位以下の幅を4カラムに*/
	#ranking ul li:nth-child(n+4) {
        width: calc(25% - 20px);
        margin-bottom: 1.1rem;
    }

/* 7位以下を非表示 */
    #ranking ul li:nth-child(n+8) {
        display: none;
    }

 }



/* ==========================================================================
スマホサイズ
========================================================================== */

@media (max-width: 590px){
	#ranking ul {
        width: 100%;
        padding: 5px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        box-sizing: border-box;	
    }

	#ranking ul li {
        width: calc(50% - 5px);
	    margin-top:0px;
}
	
#ranking ul li:nth-child(n+3) {
        width: calc(33% - 5px);
	margin-top:0px;

}
	
/* 5位以下を非表示 */
    #ranking ul li:nth-child(n+6) {
        display: block;
    }
	
#ranking ul li p.item_name {
	 font-size:0.7rem;
	margin: 5px auto 1px;
}

#ranking ul li p.price {
    margin: 0;
    font-size:0.75rem;
    font-weight: bold;
    text-align:right;
}
	
    #ranking li:nth-child(n+3) .price { 
	font-size:0.7rem;
	}

/* 1.2.3位のランキングアイコン */
    #ranking li:nth-child(-n+2) a:before {
        font-size: 1rem;
        width: 30px;
        height: 30px;
        line-height: 30px;
        color: #fff;
        position: absolute;
        text-align: center;
    }

    #ranking li:nth-child(n+3) a:before {
        font-size: 1rem;
        width: 20px;
        height: 20px;
        font-size: 0.8rem;
        line-height: 20px;
        color: #fff;
        position: absolute;
        text-align: center;
    }
        #ranking .rank01 a:before {
            content: "1";
            background-color: #d4ae29;
        }
        #ranking .rank02 a:before {
            content: "2";
            background-color: #7f7f7f;
        }
        #ranking .rank03 a:before {
            content: "3";
            background-color: #af6732;
        }
        #ranking .rank04 a:before {
            content: "4";
        }
        #ranking .rank05 a:before {
            content: "5";
        }
        #ranking .rank06 a:before {
            content: "6";
        }
        #ranking .rank07 a:before {
            content: "7";
        }
        #ranking .rank08 a:before {
            content: "8";
        }
        #ranking li:nth-child(n+4) a:before {
            background-color: #745028;
        }

/* タップの時に、PCアイコンが見えるのを消す */
        li.rank01,
        li.rank02,
        li.rank03,
        li.rank04,
        li.rank05,
        li.rank06,
        li.rank07,
        li.rank08,
        li.rank09,
        li.rank10 {
            background: none;
        }

	.botton{
    display: block;
	background: #f4efd8;
	text-align: center;
	padding: 5px;
	border-radius: 20px;
	margin: 0 20px;
	}

}