@charset "UTF-8";

.flex{
   display: -webkit-box;/*--- Androidブラウザ用 ---*/
   display: flex; 
}
/*--------- アイコン ---------*/
.icon_01{
   position: relative;
   padding: 0 0 0 18px;
   vertical-align: middle;
}
.icon_01:before{
    position: absolute;
    top: -1px;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
    left: 4px;
    box-sizing: border-box;
    width: 6px;
    height: 6px;
    border: 6px solid transparent;
}
/*--------- 見出し ---------*/
.catalog-rank h1{
  font-weight:  bold;
  font-size: 120%;
  color:  #fff;
  padding: 10px 10px 10px 56px;
  line-height: 1.4;
  background:url(../images/img_trophy.png) no-repeat 8px center, #d20e00;
  background-size:43px;
}
.catalog-rank h2{
  text-align:  center;
  font-size: 130%;
  font-weight:  bold;
  margin-bottom: 30px;?
}
.catalog-rank h3{
  text-align:  center;
  font-size: 128%;
  font-weight:  bold;
  margin: 30px 0 15px;
  background: url(../images/img_bk.gif);
  color:#fff;
  padding: 10px 0;
}

/*--------- ページ内btn ---------*/
.page_btn{
  width: 96%;
  margin: 20px auto 30px;
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.page_btn li{
      width: 32%;
}
.page_btn li a{
   border: 1px solid #8d6b2d;
   display:  block;
   text-align: center;
   color: #2d2d2d;
   padding: 10px 0;
   box-sizing:  border-box;
   font-size: 110%;
}
.page_btn li a:before{
   border-left: 8px solid #83632a;
   left: 5px;
}
.page_btn li.on a{
  background: url(../images/img_bk.gif);
  color:#fff;
}
.page_btn li.on a:before{
	  border-left: 8px solid #fff;
}
.area_lnk{
   flex-wrap:wrap;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   margin: 10px 10px -30px;
}
.area_lnk li{
	width: 50%;
	margin-bottom: 18px;
	font-size: 116%;
}
.area_lnk li:before{
   border-top: 8px solid #83632a;
   top:5px;
}
/*--------- ranking_list---------*/
.ranking_list{
  margin: 0 10px;
}
.ranking_list li{
  border: 1px solid #d6d6d6;
  padding: 10px;
  margin-bottom: 15px;
}
.rank_1st,.rank_2st,.rank_3st{
  background-repeat:no-repeat;
  background-position: center 0;
  background-size:  contain;
  text-align:  center;
  padding-top: 6px;
  margin: -6px 6px 0 0;
  width: 34px;
  height: 52px;
  display:  inline-block;
  float: left;
  font-size: 80%;
  color: #fff;
}
.rank_1st{ background-image: url(../images/img_1st.gif);}
.rank_2st{ background-image: url(../images/img_2st.gif);}
.rank_3st{ background-image: url(../images/img_3st.gif);}

.rank_{
        font-size: 80%;
	background: #fdad00;
	color: #fff;
	width: 24px;
	height: 24px;
	text-align:  center;
	vertical-align:  middle;
	padding: 3px 0 0;
	margin: -2px 6px 0 0;
	display: block;
	float: left;
}

.ranking_list .name{
  font-size: 126%;
  font-weight:  bold;
  margin: 6px 0;
  line-height: 1.2;
}
.ranking_list .name a{
	display:  block;
	margin-left: 30px;
}
.ranking_list .img{text-align: center;}

.ranking_list .img img{
  width: 80%;
  max-width:400px;
}
.ranking_list .descrip{
	margin-top:10px;
	line-height: 1.3;
}
.ranking_list .descrip dl{
  margin-bottom: 5px;
}
.ranking_list .descrip dl dt{
font-size:90%;
  background: #ececec;
  padding: 2px 6px;
  margin-right: 5px;
  min-width: 56px;
  height: 24px;
}
.ranking_list .descrip dl dd{margin-top: 2px;}

.ranking_list .name + .descrip p{margin: -10px 0 0 30px;}

.ranking_list .txt{
 margin-top:10px;
 line-height: 1.2;
}
.pageCap li {
	padding-left: 2em;
	margin-right: 10px;
	font-size: 80%;
	line-height: 1.3em;
	text-indent: -1em;
}
.backnumber p{
	background: #e3d55d;
	font-weight:  bold;
	padding: 12px 10px;
	margin-top: 20px;
	font-size: 116%;
}
.backnumber ul{
   flex-wrap:wrap;
   -webkit-justify-content: space-between;
   justify-content: space-between;
   margin: 10px 10px 0;
}
.backnumber ul li{
	width: 50%;
	margin-bottom: 18px;
}
.backnumber ul li:before{
   border-left: 8px solid #83632a;
   top:0;
}
/*--------- #aside .box---------*/
#aside .box{
	margin:0;
}
#aside .box .title{
	border-top: 6px solid #e3d55d;
	border-bottom: 1px solid #d4d4d4;
	font-weight:  bold;
	padding: 14px 10px;
	font-size: 116%;
}
#aside .box .title + p { margin: 14px 10px;}

#aside .box .btn-search{
      width:90%;
      margin:0 auto;
}
#aside .box .btn-search a{
	color:#fff;
}
#aside .box .btn-search a:before{
	 border-left: 8px solid #fff;
}
#aside .box  .infoList li{
	padding: 8px 3.03%;
}