/* ==========================================================
   gpw-cta-enhance.css
   /choice/ アフィリエイトCTA改善(施策1・2・3・4・6)用の追加CSS。
   既存の gpw-* コンポーネントのスタイルは変更せず、上書きと追加のみ。
   ========================================================== */

/* ---- 施策1: ランキングカードのCTAをボタン化 ---------------- */
.gpw-rank-link{
  display:block;
  text-align:center;
  background:#1f6fb2;
  color:#fff !important;
  border-radius:999px;
  padding:10px 18px;
  font-size:14px;
  font-weight:800;
  text-decoration:none !important;
  margin-top:10px;
  transition:background .15s ease, transform .15s ease;
}
.gpw-rank-link:hover{
  background:#185a92;
  color:#fff !important;
  transform:translateY(-1px);
}
/* カード全体をクリック可能にするJSと連動 */
.gpw-rank-card{cursor:pointer;transition:border-color .15s ease, box-shadow .15s ease;}
.gpw-rank-card:hover{border-color:#1f6fb2;box-shadow:0 8px 22px -14px rgba(31,111,178,.55);}

/* ---- 施策6: 内部リンクの全幅ボタンをテキストリンクへ格下げ -- */
/* 既存ルールが background/color に !important を使っているため同様に上書きする */
.gpw-rank-cta{
  display:block;
  background:none !important;
  color:#2f80c4 !important;
  border-radius:0;
  padding:6px 0;
  font-size:13.5px;
  font-weight:600;
  text-align:center;
  text-decoration:underline;
  box-shadow:none;
}
.gpw-rank-cta:hover{background:none !important;color:#185a92 !important;}

/* ---- 施策2・3: 追加で挿入するおすすめ実機カードの器 -------- */
.gpw-x-models{margin-top:14px;}
.gpw-x-models .gpw-models-hd small{display:block;font-weight:400;opacity:.75;}
.gpw-x-note{
  margin-top:8px;
  font-size:12px;
  color:#5b6472;
}
/* 診断前デフォルト表示(診断すると差し替わる) */
.gpw-default-reco{margin-top:12px;}
/* 文脈に合わせてイチオシ帯の文言を上書き(既存の #gpw-tools a.gpw-mcard.best::before より強く) */
#gpw-tools .gpw-default-reco a.gpw-mcard.best::before{content:'★いま人気のイチオシ' !important;}
#gpw-tools #gpwBudgetReco a.gpw-mcard.best::before{content:'★この予算のイチオシ' !important;}
/* アコーディオン内・タイトル別・予算の挿入カードは少し詰める */
.gpw-acc-reco .gpw-mcard,
.gpw-game-reco .gpw-mcard,
#gpwBudgetReco .gpw-mcard{margin-top:8px;}
.gpw-game-reco{margin-top:10px;}

/* ---- 施策4: BTOメーカー表の公式サイトボタン ---------------- */
.gpw-official-link{
  display:inline-block;
  background:#1f6fb2;
  color:#fff !important;
  border-radius:999px;
  padding:5px 12px;
  font-size:11.5px;
  font-weight:800;
  text-decoration:none !important;
  margin-top:6px;
  white-space:nowrap;
}
.gpw-official-link:hover{background:#185a92;color:#fff !important;}

/* ---- モバイル調整 ---------------------------------------- */
@media (max-width:600px){
  .gpw-rank-link{font-size:13.5px;padding:11px 14px;}
}

/* ---- 予算シミュレーターのスライダーを全幅に ----------------
   既存の #gpw-tools input{width:auto} リセットに勝つため
   ID2つのセレクタで指定 */
#gpw-tools input#gpwRange{
  width:100%;
  display:block;
  accent-color:#1f6fb2;
  cursor:pointer;
  margin:4px 0 2px;
}