@charset "UTF-8";

/* ランキング一覧ページ用の上書き */
.p-ranking .productList__point {
  position: static !important;
}

/* ブラウザのデフォルトスタイルの初期化や基本的なスタイル（全体の背景や基本となるタイポグラフィなど）を定義。 */

/*-------------- カテゴリ項目 --------------*/
.p-category .p-catekoumoku {
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.p-category .p-catekoumoku li a {
  text-align: center;
  display: block;
  background-color: #eeeeee;
  min-width: 192px;
  box-sizing: border-box;
  padding: 10px 10px;
  border-radius: 20px;
  margin: 0 5px 20px;
  font-size: 18px;
}

.p-category .p-catekoumoku li a {
        font-weight: 900;
 }

.rankcap{
  font-size: .8em;
  text-align: center;
  margin: -3em 0 3em;
}

.category-item-1 a {
    background-color: #c6de8a!important;
}
.category-item-2 a {
    background-color: #87bce6!important;
}
.category-item-3 a {
    background-color: #f3a7b5!important;
}
.category-item-4 a {
    background-color: #ceb0d3!important;
}
.category-item-5 a {
    background-color: #8dc992!important;
}
.category-item-6 a {
    background-color: #d5cf73!important;
}
.category-item-7 a {
    background-color: #fac67a!important;
}
.category-item-8 a {
    background-color: #89ccbc!important;
}
.category-item-9 a {
    background-color: #eee553!important;
}

/*---------------------------------------*/

/*-------------- ランキング --------------*/

.p-ranking{
	font-size: 1em;
	margin-top: 30px;
	text-align: left;
	max-width: 1100px;
}

.p-ranking span {
  font-size: 1.3em;
}

/*---タイトル---*/

.ranking__title-1{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #c6de8a;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-2{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #87bce6;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-3{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #f3a7b5;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-4{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #ceb0d3;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-5{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #8dc992;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-6{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #d5cf73;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-7{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #fac67a;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-8{
  font-size: 1.5em;
  font-weight: 600;
  border-bottom: 5px solid #89ccbc;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-9{
  font-size: 1.6em;
  font-weight: 700;
  border-bottom: 5px solid #eee553;
  margin-bottom: 3px;
  text-align: left;
  letter-spacing: 0.05em;
}

.ranking__title-1::before,
.ranking__title-2::before,
.ranking__title-3::before,
.ranking__title-4::before,
.ranking__title-5::before,
.ranking__title-6::before,
.ranking__title-7::before,
.ranking__title-8::before,
.ranking__title-9::before {
  content: url(../img/ranking.png);
  vertical-align: middle;
  padding-right: 5px;
}

/*------------*/

/*---アイテム---*/

.p-caterank__box{
  background-color: #f6f6f6;
  box-sizing: border-box;
  padding: 30px 20px 10px;
  margin: 0 0 50px;
}

section.p-ranking.l-section>img {
    position: absolute;
    margin-top: -5em;
    transform: rotate(-5deg);
    animation: fadeInLeft .8s ease 1s 1 normal backwards;

}

section.p-ranking.l-section>img {
    width: 240px;
}

.p-caterank__box .p-rankitem__box--inner {
  max-width: 1024px;
  margin: 0 auto;
}

 .p-caterank__box .c-flex {
  -webkit-justify-content: space-evenly;
  -ms-flex-pack: justify;
  justify-content: space-evenly;
  flex-wrap: wrap;
}

.p-caterank__box .l-section__6cl--list {
  background-color: #fff;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 10px;
  position: relative;
  width: 18%;
  margin: 5px 0;
}

.p-caterank__box .l-section__6cl--list::before {
  content: "4";
  font-size: 18px;
  width: 25px;
  color: #fff;
  display: block;
  text-align: center;
  height: 25px;
  line-height: 23px;
  border-radius: 50%;
  background-color: #b3ccdc;
}

.p-caterank__box .l-section__6cl--list:nth-of-type(1)::before {
  content: "1";
  background-color: #fce046;
}

.p-caterank__box .l-section__6cl--list:nth-of-type(2)::before {
  content: "2";
  background-color: #a1a19b;
}
.p-caterank__box .l-section__6cl--list:nth-of-type(3):before {
    content: "3";
    background-color: #82785b
}

.p-caterank__box .l-section__6cl--list:nth-of-type(5):before {
    content: "5";
}
.p-caterank__box .p-rank__img {
  margin-bottom: 5px;
}

.p-caterank__box .p-item__title {
  font-size: 12px;
  width: 100%;
  text-align: left;
  font-weight: 700;
  border: none;
  margin: 0;
}

.p-cateitem_all {
  margin: 20px 0 0;
  text-align: center;
}

.p-cateitem_all .category--1 a {
  background-color: #c6de8a;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--2 a {
  background-color: #87bce6;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--3 a {
  background-color: #f3a7b5;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--4 a {
  background-color: #ceb0d3;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--5 a {
  background-color: #8dc992;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--6 a {
  background-color: #d5cf73;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--7 a {
  background-color: #fac67a;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--8 a {
  background-color: #89ccbc;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all .category--9 a {
  background-color: #eee553;
  padding: 5px 0;
  font-weight: 600;
}

.p-cateitem_all a {
  display: block;
  /* width: 250px; */
  width: 300px;
  margin: 0 auto 15px;
  position: relative;
  padding: 10px 0;
  font-size: 16px;
  text-align: center;
  border-radius: 30px;
}
.p-cateitem_all a::before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
    border-top-width: 0px;
    border-top-style: none;
    border-top-color: currentcolor;
    border-left-width: 0px;
    border-left-style: none;
    border-left-color: currentcolor;
  border-top: solid 2px #000;
  border-left: solid 2px #000;
  -webkit-transform: rotate(45deg);
  transform: rotate(135deg);
  position: absolute;
  top: 50%;
  right: 20px;
  margin-top: -4px;
}



@media screen and (max-width: 767px) { 
  .l-section {
    width: 98%;
	margin: 0 auto;
  }
  .l-section__wrap {
    max-width: 100%;
	margin: 0;
  }
  .p-category .p-catekoumoku li a {
    text-align: center;
    display: block;
    background-color: #eeeeee;
    min-width: 170px;
    box-sizing: border-box;
    padding: 10px 10px;
    border-radius: 20px;
    margin: 0 5px 20px;
    font-size: 14px;
  }	
  .p-caterank__box {
    border-radius: inherit;
 	width: 100%;
  }
  .p-rankitem__box--inner {
    width: 100%;
    overflow-x: scroll;
    padding-bottom: 20px;
  }
 .c-flex.l-section__6cl {
    justify-content: start;
	width: 400%;
  }
 .p-caterank__box .c-flex{
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }
 .p-caterank__box .l-section__6cl--list {
    width: 14.6%;
    margin: 0 10px 0 0; 
  }
	
.p-rankitem__box--inner::-webkit-scrollbar {
  height: 14px; /* スクロールバーの高さ */
}
 
.p-rankitem__box--inner::-webkit-scrollbar-thumb {
  background: #bbb; /* ツマミの色 */
  border-radius: 7px; /* ツマミ両端の丸み */
}
 
.p-rankitem__box--inner::-webkit-scrollbar-track {
  background: #eee; /* トラックの色 */
  border-radius: 7px; /* トラック両端の丸み */
}	
}