@charset "utf-8";

:root {
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.989rem + 5.68vw, 60px);

  --gap-sec: clamp(30px, 1.307rem + 2.42vw, 50px);

  --color-red: #e43344;
  --color-blue: #004da1;
  --color-dark: #333;
  --color-pale-blue:#e2f5fb;
  --color-light-blue:#00a2e6;
}

/*----------------------
共通
----------------------*/
.style-gamer-bottom{
  width:100%;
  position:relative;
  text-align:center;
}

.style-gamer-bottom .cont-section {
  width:100%;
  position:relative;
  padding: var(--gap-sec) 0;
  overflow: hidden;
}
.--bkg-gray{
  background:#f3f3f3;
}

.style-gamer-bottom .contents-inner {
  width: calc(100% - 30px);
  max-width: 1140px;
  margin: auto;
  text-align: left;
}

.style-gamer-bottom .c-headline__h2 {
  -webkit-transform: skewX(0);
  transform: skewX(0);
  font-size: clamp(20px, 1.068rem + 0.91vw, 28px);
  text-align: left;
  transform: revert;
  color: var(--color-dark);
  letter-spacing: 0.05em;
  display: block;
  font-weight: 700;
  margin: 0 0 var(--gap-s) 0 !important;
  line-height: 1.25;
  font-style: normal;
}

/*------------------------------------------
形状から選ぶ・グラフィック性能から選ぶ
------------------------------------------*/
.select-list{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap: var(--gap-s);
}
.select-list .c-button{
  width:100%;
  font-size:clamp(14px, 0.761rem + 0.48vw, 18px);
  height: clamp(30px, 1.591rem + 1.21vw, 40px);
}
.select-list li a{
  width:100%;
  height:100%;
  border: 1px solid #a3a3a3;
  background:#fff;
  padding: clamp(10px, 0.341rem + 1.21vw, 20px);
  border-radius: 2px;
  display:flex;
  align-items: center;
  gap:20px;

}
.select-list li a:hover{
  border: 1px solid var(--color-light-blue);
  filter: drop-shadow(5px 5px 5px rgba(0, 162, 230, 0.1));
}
.select-list-cont{
  width: calc(60% - 20px);
  display:flex;
  flex-direction: column;
  gap:10px;
}
.select-list-img{
  width: 40%;
  height: 100%;
  display:flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
}

.select-list-img img{
  width: 100%;
  height: auto;
  object-fit: contain;
}
.select-list-ttl{
  font-weight:700;
  color:var(--color-dark);
  font-size: clamp(18px, 0.989rem + 0.68vw, 24px);
}

@media screen and (max-width: 767px) {
  .select-list{
    grid-template-columns: repeat(1,1fr);
  }
  .select-list-cont{
    gap:5px;
  }
}

/*------------------------------------------
ランキング用
------------------------------------------*/
.ranking-head {
  display: flex;
  justify-content: space-between;
}

.update-date {
  display: flex;
  align-items: center;
  white-space: nowrap;
  text-align: right;
  font-size:clamp(14px, 0.818rem + 0.24vw, 16px);
}

@media screen and (max-width: 767px) {
  .ranking-head {
    flex-direction: column;
    margin-bottom: var(--gap-m);
  }
}


/*--------------------------------
もっと見る
---------------------------------*/
.more-link {
  width: 100%;
  max-width: 600px;
  margin: var(--gap-m) auto 0 auto;
}

.more-link .c-button {
  width: 100%;
  font-size: clamp(14px, 0.83rem + 0.23vw, 16px);
  font-weight: 700;
  height: auto;
  min-height: 50px;
  padding: 0.5em 0;
  text-align: center;
}

.more-link .c-button span {
  line-height: 1.2;
}


/*------------------------------------------
キャンペーン調整
------------------------------------------*/
.style-gamer-bottom .p-gaming-pc-sub__campaign-section {
  max-width: 1380px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 0 120px !important;
}

@media screen and (max-width:767px) {
  .style-gamer-bottom .p-gaming-pc-sub__campaign-section {
    padding: 10px 10px !important;
  }
}



/*------------------------------------------
上部検索結果下余白つぶし
------------------------------------------*/
@media screen and (min-width: 768px), print {
  .p-products-all-item {
      padding-bottom: 0;
  }
}