/* ----------------------------------------------------------------------
index page
-----------------------------------------------------------------------*/


/* ---------------------------------------------
itemlist area
-------------------------------------------------*/
#itemlist h2{ background: #460000; color: #fff; font-weight: bold; padding: 5px; font-size: 15px;}
#itemlist .itembox{ float:left; width:220px; border: #ccc 1px solid; padding: 5px; }
#itemlist .itembox dl dt{ float: left; width: 20px; text-align: center; }
#itemlist .itembox dl dd{ float: left; width: 190px; }
#itemlist .itembox li.btn{ background: #460000; color: #fff; font-weight: bold; float: left; width: 106px; text-align: center; padding: 3px 0; border-radius: 3px;transition:0.2s;}
#itemlist .itembox li.btn:hover{ opacity:0.8;}
#itemlist .itembox .photo img{transition:0.2s;}
#itemlist .itembox .photo img:hover{opacity:0.8;}
#itemlist .itembox .name{font-size:12px;margin-top: 10px;font-weight: bold;}

/* ----------------------
  #main_contents  
----------------------*/
#main_contents { width: 720px; float: left; }

/* ----------------------
ranking
-----------------------------*/
#ranking h3{ font-family: 'Noto Sans', sans-serif; font-family: 'Noto Serif', serif; transform: rotate(0.05deg);}
#ranking{ width: 720px; background: url(//img.e87.com/selection/rose/2017images/rank_bg_top.gif) no-repeat; height: 360px;}
#ranking h3{ text-align: center; padding-top: 25px; font-size: 25px; font-weight: bold;}
#ranking ul.top_rank li.no1 {float: left; width: 300px; padding: 10px 0 0 30px;}
#ranking ul.top_rank li.no1 p:first-child{float: left; width: 180px;}
#ranking ul.top_rank li.no1 p.img{float: left; width: 110px; margin-left: 5px;}
#ranking ul.top_rank li p span{ display: block; font-size: 11px; margin: 5px 0;}
#ranking ul.top_rank li p span img{ width:auto;}
#ranking ul.top_rank li{ width: 140px; float: left;}

#rank_list_box h3{ margin-bottom: 10px; text-align: center; color: #460000; }
#rank_list_box,
#rank_list_box_r{ height: auto; padding: 0px 25px; float: left; }
#rank_list_box_r{ width: 395px; background: #f6f0ee url(/img/usr/recommend_bg.png) no-repeat left center; padding-right: 15px; }
#rank_list_box ul li.rank_num{
  width: 100%;
  margin: 0 auto 4px auto;
  font-size: 18px;
  font-family: 'Noto Serif JP', serif;
  position: relative;
  height: auto;
  overflow: unset;
  height: 20px;
  line-height: 30px;
}
#rank_list_box li.rank_num.rank_1::before {
  content: '';
  background: url(//img.e87.com/img/icon/icon_rank_no1.gif) no-repeat;
  width: 25px;
  height: 22px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: -1px;
}
#rank_list_box li.rank_num.rank_2::before {
  content: '';
  background: url(//img.e87.com/img/icon/icon_rank_no2.gif) no-repeat;
  width: 25px;
  height: 22px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: -1px;
}
#rank_list_box li.rank_num.rank_3::before {
  content: '';
  background: url(//img.e87.com/img/icon/icon_rank_no3.gif) no-repeat;
  width: 25px;
  height: 22px;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: -1px;
}
#rank_list_box li.rank_num.rank_1,#rank_list_box li.rank_num.rank_2,#rank_list_box li.rank_num.rank_3{
  padding-left:1.65em;
}

/*ƒ‰ƒ“ƒLƒ“ƒOƒXƒ‰ƒCƒhÝ’è*/
#rank_list_box .bx-wrapper{ position: relative; margin: 10px; max-width: 650px !important; }
#rank_list_box .bx-wrapper ul li{ width: 180px !important;}
#rank_list_box .bx-prev,
#rank_list_box .bx-next{
position: absolute;
top: 35%;
display: block;
width: 20px;
height: 100px;
text-indent: -9999px;
}
#rank_list_box .bx-prev{ background: url(//img.e87.com/selection/rose/2017images/arrow_l.png) no-repeat; left: -25px; }
#rank_list_box .bx-next{ background: url(//img.e87.com/selection/rose/2017images/arrow_r.png) no-repeat; right: -25px; }
#rank_list_box > ul{ width: 430px; height: auto; overflow: hidden; }
#rank_list_box .bx-wrapper ul.rank_slider li ul{position: relative;}
#rank_list_box .rank_slider > li > ul > li:first-of-type{ font-size: 18px;font-weight: bold;}
#rank_list_box .rank_slider > li > ul > li:nth-of-type(2) a{ display: table-cell; width: 130px; height: 130px; vertical-align: middle; text-align: center; background: #fff; }
#rank_list_box .rank_slider > li > ul > li:nth-of-type(2) a img{ max-width: 180px; height: auto; border: #a97b7b 1px solid;}
#rank_list_box .rank_slider > li > ul > li:nth-of-type(3){ margin: 10px 0 20px; }
#rank_list_box .rank_slider > li > ul > li span{ font-size: 12px; }


/* ----------------------
ranking
-----------------------------*/
.etc_items h2{ background: #460000; color: #fff; font-weight: bold; padding: 5px; font-size: 15px; margin: 20px 0 10px 0;}
.etc_items dl{ float: left; width: 220px; }
.etc_items dl{ margin-left: 15px; }
.etc_items dl dd:nth-of-type(1),
.etc_items dl dd:nth-of-type(3){ font-weight: bold; padding: 10px 0;}
.etc_items dl dd.btn{
background: #460000;
color: #fff;
font-weight: bold;
text-align: center;
padding: 10px;
border-radius: 3px;
}


/* ----------------------
  pageup  
----------------------*/
.pageup{ margin: 10px 0; }
.pageup p{ padding:4px 18px 4px 0; background:url("/selection/rose/image/arw_up.jpg") no-repeat right center; float: right; }