@charset "utf-8";

/*-------------------------------------
　基本設定
---------------------------------------*/

.tab-recommend {
  background: url(./img/tab-recommend-bk.webp);
  background-size: cover;
  background-position: center;
}


/*-------------------------------------
　クーポン
---------------------------------------*/
.ryzen_coupon .gwcoupon {
  color: #fff;
  position: absolute;
  top: -15px;
  left: -5px;
  width: 98%;
}
.ryzen_coupon .gwcoupon-bottom {
  padding: 10px 15px;
}
.ryzen_coupon .gwcoupon-code {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.ryzen_coupon .gwcoupon-code-txt {
  width: 100%;
  font-size: 17px;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 2px;
}
.ryzen_coupon .gwcoupon-code-txt span {
  font-size: 1.4em;
}
.ryzen_coupon .gwcoupon-code-body {
  width: 71.6%;
  padding: 4px;
  background: #fff;
  color: #484848;
  font-size: 14px;
  text-align: center;
}
.ryzen_coupon .gwcoupon-code-body:before {
  content: "クーポンコード：";
}
.ryzen_coupon .gwcoupon-code .gwcoupon-code-btn {
  padding: 4px;
  font-size: 14px;
  flex: 1;
  text-align: center;
  transition: 0.3s;
	background: #002060;
}
.ryzen_coupon .gwcoupon-code-btn.gwcopied {
  filter: brightness(150%);
}
.gwcoupon-30000 {
  background: #c6216e;
}
.gwcoupon-20000 {
  background: #c67a21;
}
.gwcoupon-10000 {
  background: #c6c421;
}
.gwcoupon-7000 {
  background: #21c624;
}
.gwcoupon-5000 {
  background: #21c68a;
}
.gwcoupon-3000 {
  background: #21bcc6;
}
.gwcoupon-2000 {
  background: #4761d6;
}
.gwcoupon-1000 {
  background: #00a2e6;
}
.ryzen_coupon .tab-box3-li {
  position: relative;
  padding-top: 70px;	
}
@media screen and (min-width: 768px) and (max-width: 1010px) {
  .ryzen_coupon .tab-box3-li:nth-of-type(n+3) {
    margin-top: 30px;
  }
}
@media screen and (max-width: 767px) {
  .ryzen_coupon .gwcoupon-bottom {
    padding: 2vw 3vw;
  }
  .ryzen_coupon .gwcoupon-code-txt {
    font-size: 5vw;
    margin-bottom: 4px;
  }
  .ryzen_coupon .gwcoupon-code-body, .ryzen_coupon .gwcoupon-code .gwcoupon-code-btn {
    font-size: 3.6vw;
    padding: 6px 4px;
  }
  .ryzen_coupon .tab-box3-li {
    padding-top: 15vw;
  }
  .ryzen_coupon .tab-box3-li:nth-of-type(n+2) {
    margin-top: 30px;
  }
}