/*---アイテムランキング---*/
/*DOM*/
.cmp-ranking .DefaultContents {
  margin-bottom: 15px;
}
.cmp-ranking .ExpandContents {
  margin-bottom: 5px;
}
.cmp-ranking ul.RankingList,
.cmp-ranking ul.MoreRankingList,
.cmp-ranking ul.RankingList-No1 {
  position: relative;
  display: flex;
  overflow: hidden;
  width: 100%;
  list-style: none;
  flex-wrap: wrap;
}
.cmp-ranking ul.RankingList-No1 {
  margin-bottom: 15px;
}
.cmp-ranking .ExpandContents {
  display: none;
}
/*---*/
/*各アイテムリスト*/
.cmp-ranking ul.RankingList > li,
.cmp-ranking ul.MoreRankingList > li,
.cmp-ranking ul.RankingList-No1 > li {
  max-width: 32%;
  margin-right: 2%;
  margin-bottom: 10px;
  flex-basis: 32%;
}
.cmp-ranking ul.RankingList > li {
  margin-bottom: 0;
}
.cmp-ranking ul.RankingList > li:nth-child(3n),
.cmp-ranking ul.MoreRankingList > li:nth-child(3n),
.cmp-ranking ul.RankingList-No1 > li:nth-child(3n) {
  margin-right: 0;
}
.cmp-ranking ul.RankingList-No1 > li[id^="RankingList_Item_K"],
.cmp-ranking ul.RankingList-No1 > li[id^="RankingList_Item_L_Sizel"] {
  position: relative;
  margin-bottom: 25px;
}
.cmp-ranking ul.RankingList > li a,
.cmp-ranking ul.MoreRankingList > li a,
.cmp-ranking ul.RankingList-No1 > li a {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.cmp-ranking .ItemSummaryCard {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1 0 auto;
}
.cmp-ranking .ItemSummaryCard_ImageBlock {
  position: relative;
}
.cmp-ranking .ItemSummaryCard_Image {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.cmp-ranking .ItemSummaryCard_Image:before {
  display: block;
  padding-top: 100%;
  content: "";
}
.cmp-ranking .ItemSummaryCard_Image img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  min-width: 100%;
  height: auto;
  min-height: 100%;
  max-height: 100%;
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
}
.cmp-ranking .ItemSummaryCard_Title {
  font-size: 10px;
  line-height: 1.4;
  margin-bottom: auto;
  padding: 1px 5px;
  overflow: hidden;
  /*width:100%;*/
}
.cmp-ranking .ItemSummaryCard_Title span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cmp-ranking .ItemSummaryCard_Price {
  font-size: 10px;
  line-height: 1.3;
  padding: 1px 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.cmp-ranking .ItemSummaryCard_Price span {
  font-size: 12px;
  font-weight: bold;
}
.cmp-ranking .ItemSummaryCard_Price span.SalePrice {
  color: #ff5c5a;
}
/*クーポンラベル*/
.cmp-ranking .ItemSummaryCard_Label {
  display: block;
  position: absolute;
  bottom: 0;
  left: 2px;
  font-size: 10px;
  line-height: 11px;
}
.cmp-ranking .ItemSummaryCard_Label p {
  display: inline-block;
  padding: 1px 2px;
  background-color: #5ac2f3;
  border-radius: 0;
  opacity: 0.8;
  color: #fff;
}
.cmp-ranking .ItemSummaryCard_Label.CpLabel p {
  background-color: #0e8bb8cc;
  color: #fff;
}
.cmp-ranking .ItemSummaryCard_Label.SLLabel p {
  background-color: #ff5c5acc;
  color: #fff;
}
#CPLabelRankingContents .cmp-title {
  display: flex;
  justify-content: space-between;
}
#CPLabelRankingContents .cmp-title a.CPDetailsLink {
  color: #a6a6a6;
  font-size: 13px;
}
#CPLabelRankingContents .cmp-title a span {
  margin: 30px 15px 0 15px;
  color: #a6a6a6;
}
#CPLabelRankingContents .cmp-title a span:after {
  content: "\e844";
  font-family: feather;
  font-size: 13px;
  color: inherit;
}
.cmp-ranking #RankingList_Item_CPLabel ul.RankingList > li {
  margin-bottom: 10px;
}
.cmp-ranking #RankingList_Item_CPLabel ul.RankingList > li:nth-last-child(1),
.cmp-ranking #RankingList_Item_CPLabel ul.RankingList > li:nth-last-child(2),
.cmp-ranking #RankingList_Item_CPLabel ul.RankingList > li:nth-last-child(3) {
  margin-bottom: 0;
}
.cmp-ranking div[id^="RankingList_Item_Healthcare"] ul.RankingList > li {
  margin-bottom: 10px;
}
.cmp-ranking .ItemSummaryCard_ImageLabel {
  position: absolute;
  bottom: 0;
  left: 0;
}
.cmp-ranking .ItemLabelList {
  display: flex;
  flex-direction: column;
  list-style: none;
  align-items: flex-start;
}
.cmp-ranking .ItemLabelList_Item.As-Coupon {
  font-size: 10px;
  line-height: 1;
  display: inline-block;
  padding: 3px 5px;
  color: #fff;
  background-color: #5ac2f3;
  opacity: 0.8;
  color: #fff;
}
/*-------------*/
/*-------------*/
/*もっとみるボタン*/
.cmp-ranking .ExpandButton {
  margin: 0 15px 30px;
}
.cmp-ranking .ExpandButton button {
  display: block;
  width: 100%;
  padding: 14px 15px;
  border: 1px solid #444;
  border-radius: 3px;
  background: #fff;
  color: inherit;
  font-size: 12px;
  text-decoration: none;
}
.cmp-ranking .ExpandButton button:after {
  content: "\e8b1";
  font-family: "feather";
  float: right;
  color: #444;
  font-size: 16px;
}
.cmp-ranking .ExpandButton.isOpen button:after {
  content: "\e897";
  font-family: "feather";
}
.cmp-ranking div[id^="RankingList_Item_Healthcare"] .ExpandContents {
  display: block;
}
.WhiteArea div:last-child .cmp-ranking .ExpandButton {
  margin-bottom: 15px;
}
.WhiteArea
  div:last-child
  .cmp-ranking
  div[id*="RankingList_Item_Cosme_beauty"]
  .ExpandButton {
  margin-bottom: 30px;
}
/*-------------*/

/*タイトル*/
.cmp-ranking .ItemSummaryCard_Header {
  margin-bottom: 2px;
  padding: 5px 0;
  text-align: center;
  font-size: 12px;
  background: #e7e7e7;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/*-------*/

/*ランクアイコン*/
.cmp-ranking .ItemSummaryCard_Rank {
  position: absolute;
  display: inline-block;
  top: 0;
  left: 0;
}
.cmp-ranking .ItemSummaryCard_Rank:before {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 30px;
  height: 38px;
  z-index: 1;
}
.cmp-ranking .ItemSummaryCard_Rank.rank1:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_01.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank2:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_02.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank3:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_03.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank4:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_04.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank5:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_05.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank6:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_06.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank7:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_07.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank8:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_08.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank9:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_09.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank10:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_10.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank11:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_11.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank12:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_12.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank13:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_13.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank14:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_14.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank.rank15:before {
  background: url("https://voi.0101.co.jp/voi/content/dam/01/renew/common/image/rank_15.svg")
    no-repeat;
}
.cmp-ranking .ItemSummaryCard_Rank span {
  display: none;
}
/*------------*/

/*各種ラベル*/
.cmp-ranking .ItemSummaryCard_Image .SpTxtLabel {
  position: absolute;
  display: block;
  bottom: 0;
  left: 2px;
  font-size: 10px;
  line-height: 11px;
}
.cmp-ranking .ItemSummaryCard_Image .SpTxtLabel .SpTxt {
  display: inline-block;
  border-radius: 0;
  padding: 1px 2px;
}
.cmp-ranking .ItemSummaryCard_Image .SpTxtLabel .CpTxt {
  background-color: #5ac2f3;
  opacity: 0.8;
  color: #fff;
}
/*---------*/

/*テキストリンク*/
.cmp-ranking .ExpandMoreLink {
  padding-right: 15px;
  margin-bottom: 15px;
  text-align: right;
}
.cmp-ranking ul.RankingList-No1 .ExpandMoreLink {
  position: absolute;
  bottom: -25px;
  width: 100%;
  line-height: 25px;
  padding-right: 0;
  margin-bottom: 0;
  text-align: center;
  z-index: 1;
}
.cmp-ranking .ExpandMoreLink a,
.cmp-ranking ul.RankingList-No1 .ExpandMoreLink a {
  color: #a6a6a6;
  font-size: 13px;
}
.cmp-ranking .ExpandMoreLink a span:after,
.cmp-ranking ul.RankingList-No1 .ExpandMoreLink a span:after {
  content: "\e844";
  font-family: feather;
  font-size: 13px;
  color: inherit;
}
/*------------*/
/*---------------------*/

/*---ブランドランキング---*/
.AccordionContents .cmp-ranking .cmp-title p {
  display: flex;
  border-left: 1px solid #ccc;
  padding-left: 20px;
}
.cmp-ranking.BrandrankContents .cmp-title p a {
  padding-left: 40px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  flex: 0 1 auto;
  width: 100%;
  margin: auto;
}
.cmp-ranking.BrandrankContents .cmp-title span {
  margin: 0;
  top: 1px;
}
.cmp-ranking.BrandrankContents li:nth-child(4),
.cmp-ranking.BrandrankContents li:nth-child(5),
.cmp-ranking.BrandrankContents li:nth-child(6),
.cmp-ranking.BrandrankContents li:nth-child(7),
.cmp-ranking.BrandrankContents li:nth-child(8),
.cmp-ranking.BrandrankContents li:nth-child(9),
.cmp-ranking.BrandrankContents li:nth-child(10) {
  display: block;
  float: left;
  width: 50%;
}
/*---------------------*/

/*---コーディネートランキング---*/
.cmp-ranking > div[id*="_Coordinate"] .ItemSummaryCard_Image:before {
  padding-top: 120%;
}
/*--------------------------*/

/*---パネル表示パターン---*/
.PanelrankContents {
  margin-right: -15px;
}
.PanelrankContents.cmp-ranking .DefaultContents,
.PanelrankContents.cmp-ranking .ExpandContents {
  margin: 0;
}
.PanelrankContents.cmp-ranking ul.RankingList > li,
.PanelrankContents.cmp-ranking ul.MoreRankingList > li {
  margin-bottom: 10px;
}
.PanelrankContents.cmp-ranking .DefaultContents ul.RankingList > li {
  max-width: calc(49% + -7.5px);
  margin-right: 2%;
  flex-basis: calc(49% + -7.5px);
}
.PanelrankContents.cmp-ranking .ExpandContents ul.MoreRankingList > li {
  max-width: calc(32% + -5px);
  margin-right: 2%;
  flex-basis: calc(32% + -5px);
}
.PanelrankContents.cmp-ranking
  .DefaultContents
  ul.RankingList
  > li:nth-child(2n),
.PanelrankContents.cmp-ranking
  .ExpandContents
  ul.MoreRankingList
  > li:nth-child(3n) {
  margin-right: 0;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard {
  box-shadow: 2px 2px 5px #aaa;
  border: 1px solid #ccc;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard_Title {
  font-size: 12px;
  margin: 1px 0 5px;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard_Title.Brand_Name {
  margin: 1px 0 auto;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard_Title.Item_Name {
  margin: 0 0 auto;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard_Price {
  margin: 0 0 5px;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard_Rank {
  display: none;
}
.PanelrankContents.cmp-ranking .ItemSummaryCard_Rank:before {
  content: none;
}
.PanelrankContents.cmp-ranking .ExpandButton {
  margin: 15px 0 0;
  width: calc(100% + -15px);
}
/*---------------------*/

/*---ランダム配列パターン---*/
.RandomrankContents {
}
.RandomrankContents.cmp-ranking .DefaultContents,
.RandomrankContents.cmp-ranking .ExpandContents {
  display: block;
  width: 100%;
  margin: 0 0 0 1%;
  padding: 0;
  overflow: hidden;
}
.RandomrankContents.cmp-ranking .DefaultContents ul.RankingList,
.RandomrankContents.cmp-ranking .ExpandContents ul.MoreRankingList {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}
.RandomrankContents.cmp-ranking .DefaultContents ul.RankingList li,
.RandomrankContents.cmp-ranking .ExpandContents ul.MoreRankingList li {
  width: 23%;
  max-width: inherit;
  margin: 0 2% 2% 0;
  float: left;
  box-shadow: 2px 2px 5px #aaa;
}
.RandomrankContents.cmp-ranking
  .DefaultContents
  ul.RankingList
  li:nth-of-type(1) {
  width: 48%;
}
.RandomrankContents.cmp-ranking
  .DefaultContents
  ul.RankingList
  li:nth-of-type(6) {
  width: 48%;
  float: right;
}
.RandomrankContents.cmp-ranking
  .ExpandContents
  ul.MoreRankingList
  li:nth-of-type(1),
.RandomrankContents.cmp-ranking
  .ExpandContents
  ul.MoreRankingList
  li:nth-of-type(2),
.RandomrankContents.cmp-ranking
  .ExpandContents
  ul.MoreRankingList
  li:nth-of-type(3) {
  width: 31.33%;
}
.RandomrankContents.cmp-ranking
  .ExpandContents
  ul.MoreRankingList
  li:nth-of-type(4),
.RandomrankContents.cmp-ranking
  .ExpandContents
  ul.MoreRankingList
  li:nth-of-type(5) {
  width: 48%;
}
.RandomrankContents.cmp-ranking .DefaultContents ul.RankingList img,
.RandomrankContents.cmp-ranking .ExpandContents ul.MoreRankingList img {
  width: 100%;
  border: 1px solid #ccc;
  vertical-align: bottom;
}
/*-----------------------*/

/*---スライドパターン---*/
.SliderankContents {
}
.SliderankContents.cmp-ranking > div {
  position: relative;
  overflow: hidden;
}
.SliderankContents.cmp-ranking .DefaultContents {
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
}
.SliderankContents.cmp-ranking .DefaultContents ul.RankingList {
  max-width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  overflow: visible;
}
.SliderankContents.cmp-ranking .DefaultContents ul.RankingList > li {
  min-width: 29%;
  margin-bottom: 10px;
}
.SliderankContents.cmp-ranking
  .DefaultContents
  ul.RankingList
  > li:nth-child(3n) {
  margin-right: 2%;
}
/*--------------------*/