@charset "utf-8";
:root{
  --ranking-gap: 60px;
}
#ranking img{
  max-width: 100%;
}
#ranking p{
  line-height: 1.6;
}
#ranking sub{
  bottom: 0;
  display: block;
  line-height: 1;
}
#ranking p+sub{
  margin-top: calc(var(--ranking-gap) / 6);
}
#ranking section+section{
  margin-top: var(--ranking-gap);
}
#ranking section:last-child{
  margin-bottom: var(--ranking-gap);
}
#ranking table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-right: 1px solid #c8c8c8;
  border-bottom: 1px solid #c8c8c8;
}
#ranking table thead th{
  width: 33.3%;
  padding: 0 calc(var(--ranking-gap) / 3);
}
#ranking table thead tr:first-child th{
  padding: calc(var(--ranking-gap) / 3) calc(var(--ranking-gap) / 3) 0 calc(var(--ranking-gap) / 3 + 4em);
  position: relative;
}
#ranking table thead tr:last-child th{
  padding: 0 calc(var(--ranking-gap) / 3) calc(var(--ranking-gap) / 3) calc(var(--ranking-gap) / 3);
}
#ranking table tbody td{
  padding: calc(var(--ranking-gap) / 3);
}
#ranking table .c-button--primary-blue{
  width: 100%;
}
#ranking table thead{
  border-top: 1px solid #c8c8c8;
  border-left: 1px solid #c8c8c8;
}
#ranking table thead th{
  border-left: 1px solid #c8c8c8;
}
#ranking table tbody td{
  border-top: 1px solid #c8c8c8;
  border-left: 1px solid #c8c8c8;
}
#ranking table tbody tr:nth-child(odd) td{
  background: #f6f6f6;
}
#ranking table tbody td sub{
  margin-bottom: calc(var(--ranking-gap) / 6);
}
#ranking table .icon-ranking {
  font-size: 28px;
  font-weight: bold;
  color: #fff;
}
#ranking table .icon-ranking {
  --f: 0.5em;
  --r: .8em;
  border-inline: .5em solid #0000;
  padding: 0.5em 0.5em calc(var(--r) + .2em);
  clip-path: polygon(0 0, 100% 0, 100% 100%, calc(100% - 0.5em) 100%, 50% calc(100% - var(--r)), 0.5em 100%, 0 100%);
  background: #2699dc padding-box;
  position: absolute;
  left: calc(var(--ranking-gap) / 3 - 0.5em);
  top: 0;
}
#ranking table .icon-ranking--1 {
  background: #e2cc3a padding-box;
}
#ranking table .icon-ranking--2 {
  background: #bababa padding-box;
}
#ranking table .icon-ranking--3 {
  background: #e2a15c padding-box;
}
#ranking table .item-img{
  width: 100%;
  margin-top: calc(var(--ranking-gap) / 3);
  display: block;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1/1;
  background: #f6f6f6;
}
#ranking table h2{
  margin-top: calc(var(--ranking-gap) / 3);
  font-size: 24px;
}
#ranking table .price-wrapper{
  margin-top: calc(var(--ranking-gap) / 3);
}
#ranking table .dosparatokka{
  font-size: 1em;
  font-weight: 400;
  display: block;
  bottom: 0;
  line-height: 1;
}
#ranking table .price{
  color: #e43344;
  font-size: 36px;
}
#ranking table .en,#ranking table .taxkara{
  color: #e43344;
}
#ranking table thead .c-button--primary-blue{
  margin-top: calc(var(--ranking-gap) / 3);
}
#ranking table .review-in-recommend__link{
  display: flex;
  align-items: baseline;
  gap:0.5em;
}
#ranking table .review-in-recommend__link img{
  height: 1em;
}
@media screen and (max-width:767px){
  :root{
    --ranking-gap: 16vw;
  }
  #ranking .u-pc-width{
    width: 92vw;
    margin: 0 auto;
  }
  #ranking .sp-fade{
    position: relative;
  }
  #ranking .sp-fade:after{
    content: "";
    display: block;
    width:16vw;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
    position: absolute;
    top: 0;
    right: -1px;
    z-index: 1;
  }
  #ranking .scroll-sp-horizontal{
    overflow-x:auto;
  }
  #ranking table{
    width: 220vw;
    margin-right: 16vw;
  }
}

/*スクトップパソコンページへの導線*/

:root {
  --p-all-model-gap: 15px;
}

.p-all-model__link-category {
  width: 50%;
  margin: calc(var(--p-all-model-gap)* 2) auto 0 auto;
}

@media screen and (max-width: 1040px) {
  .p-all-model__link-category {
    width: 100%;
  }
}