@charset "utf-8";

/*---------------------------
共通パーツ
---------------------------*/
html {
  scroll-behavior: smooth;
}

/*
#ranking-game{
  font-family: "Roboto, Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
}
*/

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

/* SPサイズ調整 */
.u-pcs-hide{
  display:block;
}
.u-sps-hide{
  display:none;
}
@media screen and (max-width: 428px) {
  .u-pcs-hide{
    display:none;
  }
  .u-sps-hide{
    display:block;
  }
}
/*------------------------------------------
共通レイアウト
------------------------------------------*/
.bkg-gray{
  background:#f6f6f6;
}
.contents-block{
  position:relative;
  display:block;
  padding:var(--gap-l) 0;
  width:100%;
  overflow: hidden;
  text-align:center;
}
.contents-sub-block{
  position:relative;
  width:100%;
}
.contents-sub-block + .contents-sub-block{
  margin-top:var(--gap-l);
}

.contents-block-inner{
  position:relative;
  display:block;
  margin:auto;
  width:calc(100% - 30px);
  max-width:1140px;
}
.contents-block-inner img{
  width:100%;
  object-fit: contain;
}

.contents-block-inner p{
  line-height:1.6;
}

/*----------
タイトルブロック
-----------*/
.contents-title{
  display:block;
  position:relative;
  margin-bottom:var(--gap-m);
}
.contents-title .title-sub{
  display:block;
  font-weight:700;
  color:#e43344;
  margin-bottom:5px;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  letter-spacing:0.1em;
}
.contents-title h1{
  font-weight:700;
  font-size:clamp(24px, 1.227rem + 1.36vw, 36px);
  margin-bottom:var(--gap-s);
}

#ranking-list__wrapper h2,
.contents-title h2{
  font-weight:700;
  font-size:clamp(18px, 0.898rem + 1.14vw, 28px);
  line-height:1.2;
  width:fit-content;
  padding-bottom:5px;
  border-bottom:2px solid #ffd001;
  transform: skewX(0);
  margin:0 auto var(--gap-s) auto;
}
.contents-title .lead-txt{
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
}

#ranking-list__wrapper h2{
  margin-bottom:var(--gap-m);
}
/*------------------------------------------
トップ
block-kv
------------------------------------------*/
.block-kv{
  position:relative;
  width:100%;
  text-align:center;
}
.kv-area{
  margin:auto;
  width: 100%;
  display:flex;
  background: url(../images/kv-bg-pc.webp) no-repeat 50% 50% / cover;
}

.kv-img{
  margin:auto;
  padding:60px 0;
  width: calc(100% - 30px);
  text-align:left;
  max-width:1140px;
}
.kv-img img{
  margin:0;
  width: 40%;
}

@media screen and (max-width: 767px) {
  .kv-img{
    margin:auto;
    padding:0;
    width: 100%;
  }
  .kv-img img{
    width: 100%;
  }
}
/*----------
トップ
-----------*/
.block-top{
  margin:var(--gap-m) auto;
}


/*----------
ゲーミングPCとは？
-----------*/
.block-about{
  margin:var(--gap-m) auto;
  width:100%;
}
.block-about summary{
  position:relative;
  margin:auto;
  width:100%;
  max-width:500px;
  list-style: none;
  font-weight:700;
  color:#004da1;
  border:1px solid #999;
  padding:10px;
  border-radius:2px;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  letter-spacing:0.1em;
}
.block-about summary::-webkit-details-marker {
  display: none;
}
.block-about summary:hover{
  cursor: pointer;
  background:#ccc;
}
.block-about summary::after{
  position: absolute;
  top: calc(50% - 4px);
  right: 25px;
  width: 8px;
  height: 8px;
  border-right: 2px solid;
  border-bottom: 2px solid;
  border-color: #004da1;
  content: '';
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
.block-about[open] summary::after {
  top: calc(50% - 2px);
  transform: rotate(-135deg);
  transition: 0.3s all;
}

.block-about .detail {
  padding:var(--gap-m);
  background:#f6f6f6;
  border-radius:10px;
}

.block-about .detail p{
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
}

@media screen and (max-width: 767px) {
  .block-about .detail p{
    text-align:left;
  }
}

/*----------
更新日・SNS
-----------*/
.block-update{
  display:flex;
  gap:5px;
  width:100%;
  justify-content:space-between;
  align-items: center;
}
.update-date{
  display:flex;
}
@media screen and (max-width: 767px) {
  .block-update{
    flex-direction: column;
  }
}

/*------------------------------------------
ランキング
block-ranking
------------------------------------------*/
.ranking-wrap{
  width:100%;
  display: block;
  position: relative;
}
.movie-btn {
  margin:10px auto 0 auto;
  width:100%;
  max-width:500px;
}
.movie-btn .c-button--primary-blue {
  background-color: #001e60;
  width:100%;
  height: auto;
  padding: 11px;
  font-size: 15px;
  line-height: 1;
  gap: 2px;
  position: relative;
}

.movie-btn .c-button--primary-blue:hover {
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

.movie-btn .c-button--primary-blue::after,
.movie-btn .c-button--primary-blue::before {
  display: none;
}

.movie-btn .c-button--primary-blue p {
  position: relative;
}

.movie-btn .c-button--primary-blue p::before {
  z-index: 1;
  position: absolute;
  left: -30px;
  top: 6px;
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent #f6f6f6;
}

.movie-btn .c-button--primary-blue p::after {
  z-index: auto;
  position: absolute;
  left: -38px;
  top: 0;
  width: 24px;
  height: 24px;
  border: 1px solid #f6f6f6;
  content: "";
  border-radius: 2rem;
}


/*ムービーモーダル*/
body.modal-open {
  overflow: hidden;
}
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 99;
  justify-content: center;
  align-items: center;
}
.modal-content {
  position: relative;
  width: 95%;
  max-width: 800px;
  background-color: #000;
  border-radius: 8px;
  overflow: visible;
}
.modal-content .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  aspect-ratio: 16/9;
  height: 0;
  overflow: hidden;
  background-color: #000;
}
.modal-content iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.close-btn {
  position: absolute;
  top: -30px;
  right: 0px;
  font-size: 30px;
  color: white;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 999;
}

.contents-block-inner .review-in-recommend__star{
  width:auto !important;
}

.p-gaming-pc-ranking__reccomend__card {
  display:flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  text-align: left;
}

.p-gaming-pc-ranking__reccomend__card__img {
  width: 100% !important;
  margin: auto;
}
.p-gaming-pc-ranking__reccomend__list ul li .p-gaming-pc-ranking__reccomend__card::after {
  width: 42px !important;
  height: 35px !important;
}

@media screen and (max-width: 767px) {
  .ranking-wrap{
    overflow-x: scroll;
  }
  .p-gaming-pc-ranking__reccomend__list ul li.c-panel-no-arrow,
  .p-gaming-pc-ranking__reccomend__list ul li.c-panel-arrow {
     margin-left: 0 !important;
     margin-top: 0 !important;
  }
  .p-gaming-pc-ranking__reccomend__list > ul {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: fit-content !important;
  }
  .p-gaming-pc-ranking__reccomend__list > ul > li {
    width: 274px !important;
  }
}


/*------------------------------------------
ゲーミングPCはゲームから選ぶのがおすすめ
block-select
------------------------------------------*/
input[name="tab"] {
  display: none;
}

.tab-wrap{
  width:100%;
  display:flex;
  flex-wrap:wrap;
}
.tab-wrap label{
  display:block;
  width:50%;
  border:1px solid #ccc;
  background:#f6f6f6;
  padding:20px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.tab-wrap label h3{
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
  font-weight:700;
  letter-spacing: 0.1em;
  color:#484848;
  width:fit-content;
  padding-bottom:5px;
  border-bottom:2px solid #f6f6f6;
  text-align:center;
  margin:auto;
}

/* 選択タブ */
input[name="tab"]:checked + label {
  border-bottom: 1px solid #fff;
  background:#fff;
}
input[name="tab"]:checked + label h3{
  color:#484848;
  border-bottom:2px solid #004da1;
}

/* 内容 */

.tab-content {
  display: none;
  padding: var(--gap-m);
  border-top: none;
  width: 100%;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.tab-content p{
  text-align:left;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
}
.tab-content .btn-tab-btm{
  margin:var(--gap-m) auto 0 auto;
  width:100%;
  max-width:500px;
}
.tab-content .btn-tab-btm .c-button--primary-blue{
  width:100%;
}

/* 選択されたタブの内容だけ表示 */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

@media screen and (max-width: 767px) {
  .block-select p{
    text-align:left;
  }
  .tab-content .btn-tab-btm .c-button--primary-blue{
    font-size: 14px;
  }
}


/*------------------------------------------
最新トレンド
gaming-trend
------------------------------------------*/
.trend-list{
  display:grid;
  gap:var(--gap-m);
  grid-template-columns: repeat(2,1fr);
}
.trend-list li{
  border:2px solid #004da1;
  padding:20px;
  background:#fff;
  border-radius:10px;
}
.trend-list .trend-tltle{
  color:#004da1;
  margin-bottom:var(--gap-s);
  font-weight:700;
  font-size:clamp(14px, 0.784rem + 0.45vw, 18px);
}


@media screen and (max-width: 767px) {
  .trend-list{
    grid-template-columns: repeat(1,1fr);
  }
  .trend-cont{
    text-align:left;
  }
}

/*------------------------------------------
よくあるご質問
block-faq
------------------------------------------*/
.faq-list {
  display:grid;
  gap:var(--gap-m);
  grid-template-columns: repeat(2,1fr);
	counter-reset: listnum; 
	list-style: none; 
}
.list-item {
  width: 100%;
  height: 100%;
}

.list-item details {
  line-height: 1.5;
  text-align:left;
  border: 1px solid #ececec;
  box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, .1);
  transition: transform .2s;
  position: relative;
}
.list-item details summary {
  position:relative;
  cursor: pointer;
  padding: 20px 15px;
}
.list-item-body {
  padding: 5px 15px 20px 15px;
}

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


/*------------------------------------------
ドスパラのゲーミングPCはこちら
block-lineup
------------------------------------------*/
.select-pc-category {
  display: flex;
  width:100%;
  gap: var(--gap-m);
  justify-content: center;
}

.select-pc-category li {
  width: calc((100% - (var(--gap-m) * 2)) / 3);
  background: #fff;
  border: 1px solid #ececec;
  box-shadow: 3.5px 3.5px 0 0 rgba(72, 72, 72, .1);
  transition: transform .2s;
}

.select-pc-category li a {
  padding: 10px;
  height: 100%;
  padding: 10px;
  transition: box-shadow .2s;
  display: flex;
  gap:10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.select-pc-category li a:hover {
  box-shadow: 0 0 4px 0 rgb(0 162 230 / 70%);
  transform: translate(0, -1px);
}
.select-pc-category .c-panel-arrow {
  position: relative;
}
.select-pc-category .c-panel-arrow::before {
  right: 7px;
  bottom: 6px;
  width: 8px;
  height: 8px;
  z-index: 1;
  position: absolute;
}
.select-pc-category .lineup-img{
  width: 70%;
  margin:auto;
}
.select-pc-category .lineup-txt-ttl {
  font-weight:700;
  line-height:1.2;
}
.select-pc-category .lineup-txt-cont {
  margin-top:10px;
}


@media screen and (max-width: 767px) {
  .select-pc-category {
    flex-direction: column;
    overflow: hidden;
    flex-wrap: wrap;
    padding-bottom:5px;
  }
  .select-pc-category li {
    width: 100%;
  }
  .select-pc-category li a {
    flex-direction:row;
    padding: 0px 10px;
  }
  .select-pc-category .lineup-img{
    width: 30%;
    margin:auto;
  }
  .select-pc-category .lineup-txt {
    width: calc(70% - 10px);
    padding: 10px 0;
    text-align:left;
  }
  .select-pc-category .lineup-txt-cont {
    margin-top:0;
    font-size:12px;
  }

}

/*------------------------------------------
おすすめPCランキング一覧
block-link-ranking
------------------------------------------*/
.block-link .ranking-list-link{
  display:none;
}

/*------------------------------------------
ゲーミングPC 関連記事・特集
block-link-article
------------------------------------------*/
.article-link-list{
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-m);
}

.article-link-list li .c-button--primary-blue{
  width:100%;
}
@media screen and (max-width: 767px) {
  .article-link-list{
    grid-template-columns: repeat(1, 1fr);
  }
}