@charset "UTF-8";
/* Scss Document */
/* ------------------------------------------------------------------------------
  Icon
------------------------------------------------------------------------------ */
.ionicons {
  font-family: "Ionicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@font-face {
  font-family: "Ionicons";
  font-style: normal;
  font-weight: normal;
  src: local("Ionicons"), url(https://unpkg.com/ionicons@4.5.10-0/dist/fonts/ionicons.woff2) format("woff2");
}
/* カート回り共通要素 */
input[type=checkbox],
input[type=radio] {
  display: none;
}

#kv .link-btn-cart-lg,
#kv .link-btn-cart-md,
#kv .link-btn-cart-sm {
  background: #007CCF;
  color: #fff;
  display: block;
  margin: 20px auto 10px;
  width: 80%;
}

#kv .link-btn-cart-lg::before,
#kv .link-btn-cart-md::before,
#kv .link-btn-cart-sm::before {
  color: #fff;
}

.price .pricebox::after {
  content: "円";
}

.postage::before {
  content: "送料";
}

.postage::after {
  content: "円｜";
}

/**/
.bd_radius {
  border-radius: 15px;
}

.pay-diff {
  color: #000;
}

.purchase-box, .purchase_left {
  padding: 2em;
}

.purchase_wrap {
  margin: 0 0 1em 0;
}

.purchase-box, .purchase_left {
  padding: 2em;
}

.purchase-box [class*=col-].border-btm::after {
  margin: 1em 0 2em;
}

.payment_name, .shipping, .delivery_charge {
  color: #222;
}

.info-payment::after {
  font-family: "Ionicons";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.info-payment {
  cursor: default;
  position: relative;
}

.info-payment::after {
  content: "\f30a";
  font-size: 1.8em;
  color: #BCBCBC;
  vertical-align: sub;
  margin-left: 0.2em;
}

.info-payment::before {
  opacity: 0;
  pointer-events: none;
  content: "ソースネクストeポイントは、1ポイント1円で使えるお得なポイントサービスです。Gポイント社のGポイントと交換すれば、航空会社のマイルや、スーパー・コンビニなどで使える他社のポイントへ交換できます。";
  color: rgba(0, 0, 0, 0.86);
  background: #fff;
  box-shadow: 0px 0px 8px #ccc;
  padding: 1em;
  width: 200px;
  position: absolute;
  bottom: 2rem;
  left: -16rem;
  transition: 300ms;
  transition-delay: 300ms;
}

.info-payment:hover::before {
  opacity: 1;
}

.purchase_left {
  text-align: center;
  display: flex;
  flex-direction: column;
  width: 100%;
  margin: 0 !important;
}

.purchase_left-img {
  height: auto !important;
  width: 100%;
  margin: 0 auto;
}

@media screen and (max-width: 559px) {
  .purchase_left-img {
    height: 300px;
    width: 100%;
  }
}
.purchase_img {
  margin: 0 auto;
  width: auto;
  background-color: #fff;
  border-radius: 8px;
}

@media screen and (max-width: 559px) {
  .purchase_img {
    width: 100%;
  }
}
.purchase_img img {
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 0.1rem;
}

.purchase_thumb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 30px 0 0;
  position: relative;
  padding: 0;
}

.purchase_wrap + .purchase_wrap {
  margin-top: 4rem;
}

.purchase_wrap .pay-diff {
  margin: 0 !important;
}
.purchase_wrap .pay-diff a {
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}
.purchase_wrap .pay-diff a span {
  font-size: 2.5rem;
  color: #BCBCBC;
  margin: 0 0 0 0.5rem;
}

/*カートSwiper*/
.slider-thumbnail .swiper-wrapper {
  display: flex;
  justify-content: center;
  margin: 10px 0 0;
}
.slider-thumbnail .swiper-wrapper .swiper-slide {
  background-color: #fff;
  border-radius: 8px;
  width: calc(25% - 10px) !important;
  padding: 0.1rem;
  margin: 0 5px;
}
.slider-thumbnail .swiper-wrapper .swiper-slide img {
  width: 100%;
}