/* ==================================================
   SWELL用 楽天・Amazon商品カード

   名前空間：
   .swl-rkpc[data-swl-rkpc="v1"]

   SWELLや他プラグインのCSSと衝突しないよう、
   すべてのセレクターをカード内に限定しています。
================================================== */

/* 基本リセット */

.swl-rkpc[data-swl-rkpc="v1"],
.swl-rkpc[data-swl-rkpc="v1"] * {
  box-sizing: border-box;
}

.swl-rkpc[data-swl-rkpc="v1"] {
  --swl-rkpc-key-size: 1.25rem;

  isolation: isolate;

  display: grid;
  grid-template-columns: minmax(180px, 30%) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 28px);
  align-items: center;

  width: 100%;
  max-width: 900px;
  margin: 24px auto !important;
  padding: clamp(16px, 3vw, 24px) !important;

  color: #262626;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);

  font-family: inherit;
  font-style: normal;
  letter-spacing: normal;
  text-align: left;
}

/* SWELLの段落・定義リスト余白をリセット */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__title,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__description,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__price,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-label,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-value {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

/* ==================================================
   商品画像
================================================== */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__media {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 !important;
  padding: 0 !important;

  color: #262626 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  text-decoration: none !important;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__image {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* SWELLやプラグインが外部リンクアイコンを追加する場合に無効化 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__media::before,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__media::after {
  display: none !important;
  content: none !important;
}

/* ==================================================
   商品情報
================================================== */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__content {
  min-width: 0;
  margin: 0;
  padding: 0;
}

/* 商品名 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__title {
  display: block;

  margin: 0 0 10px !important;
  padding: 0 !important;

  color: #262626 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-size: var(--swl-rkpc-key-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;
  text-align: left !important;
}

/* SWELLの見出し風疑似要素を無効化 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__title::before,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__title::after {
  display: none !important;
  content: none !important;
}

/* 商品説明 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__description {
  margin: 0 !important;
  padding: 0 !important;

  color: #666 !important;
  background: transparent !important;

  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.8 !important;
  text-align: left !important;
}

/* ==================================================
   評価・価格エリア
================================================== */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__commerce {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 18px;
  align-items: center;

  margin: 18px 0 !important;
  padding: 12px 0 !important;

  background: transparent !important;
  border-top: 1px solid #e5e7eb;
  border-right: 0;
  border-bottom: 1px solid #e5e7eb;
  border-left: 0;
}

/* 評価 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
  margin: 0;
  padding: 0;

  color: #262626;
  font-size: var(--swl-rkpc-key-size);
  line-height: 1.5;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__star {
  color: #e59a00 !important;
  font-size: inherit;
  line-height: 1;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-average {
  color: #262626 !important;
  font-size: inherit;
  font-weight: 700 !important;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-max {
  color: #666 !important;
  font-size: inherit;
  font-weight: 400;
  white-space: nowrap;
}

/* レビュー件数リンク */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-link {
  display: inline !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #a70000 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;

  font-size: var(--swl-rkpc-key-size) !important;
  font-weight: 700 !important;
  line-height: 1.5 !important;

  text-decoration: underline !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 3px !important;
  white-space: nowrap;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-link:hover {
  color: #770000 !important;
  opacity: 1 !important;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-link::before,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-link::after {
  display: none !important;
  content: none !important;
}

/* 価格 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__price-area {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: flex-end;

  min-width: 0;
  margin: 0;
  padding: 0;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__price {
  margin: 0 !important;
  padding: 0 !important;

  color: #c83b33 !important;
  background: transparent !important;

  font-size: var(--swl-rkpc-key-size) !important;
  font-weight: 400;
  line-height: 1.5 !important;
  white-space: nowrap;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__price strong {
  color: inherit !important;
  font-size: inherit;
  font-weight: 700 !important;
}

/* 送料 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shipping {
  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 4px 10px;

  color: #9f241e !important;
  background: #fff1f0 !important;
  border: 1px solid #ffd2cf !important;
  border-radius: 999px;
  box-shadow: none !important;

  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
}

/* ==================================================
   ショップ情報
================================================== */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop {
  display: block;

  margin: 0 0 16px !important;
  padding: 0 !important;

  color: #555 !important;
  background: transparent !important;
  border: 0 !important;

  font-size: 13px;
  line-height: 1.6;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 8px;

  margin: 0;
  padding: 0;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-row + .swl-rkpc__shop-row {
  margin-top: 6px;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-label {
  margin: 0 !important;

  color: #555 !important;
  font-weight: 700 !important;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-value {
  min-width: 0;
  margin: 0 !important;

  color: #555 !important;
  font-weight: 400;
  overflow-wrap: anywhere;
}

/* ==================================================
   楽天・Amazonボタン
================================================== */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin: 0;
  padding: 0;
}

/* SWELLのリンク・ボタン装飾をリセット */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button {
  display: flex !important;
  align-items: center;
  justify-content: center;

  width: 100% !important;
  min-width: 0;
  min-height: 44px;
  margin: 0 !important;
  padding: 7px 20px !important;

  border: 0 !important;
  border-radius: 9px !important;
  box-shadow: none !important;

  font-family: inherit !important;
  font-size: 1.05rem !important;
  font-style: normal !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: normal !important;
  text-align: center !important;
  text-decoration: none !important;

  opacity: 1 !important;
  cursor: pointer;

  transition:
    filter 0.16s ease,
    transform 0.16s ease,
    box-shadow 0.16s ease;
}

/* 楽天市場 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button--rakuten {
  color: #fff !important;
  background: #bf0000 !important;
}

/* Amazon */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button--amazon {
  color: #191919 !important;
  background: #ff9900 !important;
}

/* SWELLの外部リンクアイコン・ボタン装飾を無効化 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button::before,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button::after {
  display: none !important;
  content: none !important;
}

/* ホバー */

@media (hover: hover) {
  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button:hover {
    filter: brightness(0.92);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14) !important;
    opacity: 1 !important;
  }
}

/* キーボード操作 */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__media:focus-visible,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review-link:focus-visible,
.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button:focus-visible {
  outline: 3px solid #2463eb !important;
  outline-offset: 3px;
}

/* ==================================================
   スマートフォン
================================================== */

@media (max-width: 640px) {
  .swl-rkpc[data-swl-rkpc="v1"] {
    --swl-rkpc-key-size: 1rem;

    grid-template-columns: 1fr;
    gap: 9px;

    margin: 18px auto !important;
    padding: 8px 14px 14px !important;

    border-radius: 11px;
  }

  /* 画像上下の余白を縮小 */

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__media {
    width: min(100%, 220px);
    margin-inline: auto !important;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__title {
    margin-bottom: 7px !important;
  }

  /* 評価を左、価格を右に維持 */

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__commerce {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;

    margin: 10px 0 12px !important;
    padding: 10px 0 !important;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__review,
  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__price-area {
    gap: 4px;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shipping {
    padding: 3px 7px;
    font-size: 0.72rem;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-row {
    grid-template-columns: 1fr;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-value {
    margin-top: 2px !important;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__actions {
    grid-template-columns: 1fr;
  }
}

/* ==================================================
   アニメーション軽減設定
================================================== */

@media (prefers-reduced-motion: reduce) {
  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__button {
    transition: none;
  }
}

/* ==================================================
   ショップ情報をPC・スマホともに2列表示
================================================== */

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop {
  display: block !important;

  margin: 0 0 16px !important;
  padding: 0 !important;

  color: #555 !important;
  background: transparent !important;
  border: 0 !important;

  font-size: 13px;
  line-height: 1.6;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-row {
  display: grid !important;

  /*
   * 左列：項目名
   * 右列：ショップ情報
   */
  grid-template-columns:
    clamp(96px, 28vw, 112px)
    minmax(0, 1fr) !important;

  column-gap: 10px;
  row-gap: 0;
  align-items: start;

  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.swl-rkpc[data-swl-rkpc="v1"]
.swl-rkpc__shop-row
+ .swl-rkpc__shop-row {
  margin-top: 7px !important;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-label {
  display: block;

  margin: 0 !important;
  padding: 0 !important;

  color: #555 !important;
  background: transparent !important;
  border: 0 !important;

  font-weight: 700 !important;
  line-height: 1.6;
}

.swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-value {
  display: block;

  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;

  color: #555 !important;
  background: transparent !important;
  border: 0 !important;

  font-weight: 400;
  line-height: 1.6;
  overflow-wrap: anywhere;
}

/* スマホでも2列を維持 */

@media (max-width: 640px) {
  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-row {
    grid-template-columns:
      96px
      minmax(0, 1fr) !important;

    column-gap: 8px;
  }

  .swl-rkpc[data-swl-rkpc="v1"] .swl-rkpc__shop-value {
    margin-top: 0 !important;
  }
}