/*
 * ssaw-inline-optimized-v1.css
 * 現在のHTML内にあるカスタムCSSを、記述順を維持して統合したファイル。
 * ssaw-selected-option-total-css-v1 は v2 と重複するため除外。
 */

/* ===== ssaw-item-common-banner-v2 ===== */
/*
 * 商品ページの全商品共通バナー
 * テーマ設定で画像とURLを自由に変更できる汎用仕様
 */
#pageItem .ssaw-item-common-banner {
  box-sizing: border-box;
  width: calc(100% - 24px);
  margin: 20px auto 0;
  padding: 0;
}

#pageItem .ssaw-item-common-banner a {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  color: inherit;
  text-decoration: none;
}

#pageItem .ssaw-item-common-banner img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
}

/* PC版：SUPPORT枠に近い横幅へ揃える */
@media screen and (min-width: 768px) {
  #pageItem .ssaw-item-common-banner {
    width: calc(100% - 48px);
    max-width: 1000px;
    margin-top: 24px;
  }
}

/* モバイル版は現在の見え方を維持 */
@media screen and (max-width: 767px) {
  #pageItem .ssaw-item-common-banner {
    width: calc(100% - 24px);
    max-width: none;
    margin-top: 20px;
  }
}

/* ===== ssaw-review-icon-embedded-v1 ===== */
/*
 * Customer Reviewsの評価アイコン。
 * 外部CSS化後も参照先に依存しないよう、SVGを直接埋め込む。
 */
.ssaw-top-review-widget .ssaw-top-review-face.ico--good,
.ssaw-top-review-list .review01__iconImg.ico--good {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjRTY2QjczIi8+CjxjaXJjbGUgY3g9IjguNSIgY3k9IjkuMiIgcj0iMS4xNSIgZmlsbD0iI2ZmZiIvPgo8Y2lyY2xlIGN4PSIxNS41IiBjeT0iOS4yIiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Ik03LjUgMTMuMmMxLjEgMiAyLjYgMyA0LjUgM3MzLjQtMSA0LjUtMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPg==") !important;
}
.ssaw-top-review-widget .ssaw-top-review-face.ico--normal,
.ssaw-top-review-list .review01__iconImg.ico--normal {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjRTVCNjRGIi8+CjxjaXJjbGUgY3g9IjguNSIgY3k9IjkuMiIgcj0iMS4xNSIgZmlsbD0iI2ZmZiIvPgo8Y2lyY2xlIGN4PSIxNS41IiBjeT0iOS4yIiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Ik04IDE1aDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=") !important;
}
.ssaw-top-review-widget .ssaw-top-review-face.ico--bad,
.ssaw-top-review-list .review01__iconImg.ico--bad {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjNzNBOUM4Ii8+CjxjaXJjbGUgY3g9IjguNSIgY3k9IjkuMiIgcj0iMS4xNSIgZmlsbD0iI2ZmZiIvPgo8Y2lyY2xlIGN4PSIxNS41IiBjeT0iOS4yIiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Ik03LjUgMTZjMS4xLTIgMi42LTMgNC41LTNzMy40IDEgNC41IDMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=") !important;
}

/* ===== ssaw-review-icon-vars-v1 ===== */
:root {
  --ssaw-review-good-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjRTY2QjczIi8+CjxjaXJjbGUgY3g9IjguNSIgY3k9IjkuMiIgcj0iMS4xNSIgZmlsbD0iI2ZmZiIvPgo8Y2lyY2xlIGN4PSIxNS41IiBjeT0iOS4yIiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Ik03LjUgMTMuMmMxLjEgMiAyLjYgMyA0LjUgM3MzLjQtMSA0LjUtMyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjEuNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIi8+Cjwvc3ZnPg==");
  --ssaw-review-normal-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjRTVCNjRGIi8+CjxjaXJjbGUgY3g9IjguNSIgY3k9IjkuMiIgcj0iMS4xNSIgZmlsbD0iI2ZmZiIvPgo8Y2lyY2xlIGN4PSIxNS41IiBjeT0iOS4yIiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Ik04IDE1aDgiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=");
  --ssaw-review-bad-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+CjxjaXJjbGUgY3g9IjEyIiBjeT0iMTIiIHI9IjEwIiBmaWxsPSIjNzNBOUM4Ii8+CjxjaXJjbGUgY3g9IjguNSIgY3k9IjkuMiIgcj0iMS4xNSIgZmlsbD0iI2ZmZiIvPgo8Y2lyY2xlIGN4PSIxNS41IiBjeT0iOS4yIiByPSIxLjE1IiBmaWxsPSIjZmZmIi8+CjxwYXRoIGQ9Ik03LjUgMTZjMS4xLTIgMi42LTMgNC41LTNzMy40IDEgNC41IDMiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIxLjciIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPgo8L3N2Zz4=");
}

/* ===== ssaw-review-item-icon-fallback-v1 ===== */
/* 各レビュー行の評価アイコン。BASE側のクラス表記差にも対応。 */
.ssaw-top-review-list .review01__iconImg {
  display:block !important;
  width:22px !important;
  height:22px !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  flex:0 0 auto !important;
}

.ssaw-top-review-list .review01__iconImg[class*="good"] {
  background-image: var(--ssaw-review-good-icon) !important;
}

.ssaw-top-review-list .review01__iconImg[class*="normal"] {
  background-image: var(--ssaw-review-normal-icon) !important;
}

.ssaw-top-review-list .review01__iconImg[class*="bad"] {
  background-image: var(--ssaw-review-bad-icon) !important;
}

/* ===== ssaw-sidebar-bnpl-v1 ===== */
/* PC右側購入欄：Pay ID 3回あと払い案内 */
@media screen and (min-width: 1024px) {
  #pageItem #productCvBox .ssaw-sidebar-bnpl {
    box-sizing: border-box;
    width: 100%;
    margin: 6px 0 12px;
    padding: 0;
    overflow: hidden;
  }

  #pageItem #productCvBox .ssaw-sidebar-bnpl > * {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #pageItem #productCvBox .ssaw-sidebar-bnpl,
  #pageItem #productCvBox .ssaw-sidebar-bnpl p,
  #pageItem #productCvBox .ssaw-sidebar-bnpl span,
  #pageItem #productCvBox .ssaw-sidebar-bnpl a,
  #pageItem #productCvBox .ssaw-sidebar-bnpl div {
    font-size: 9px !important;
    line-height: 1.4 !important;
  }

  #pageItem #productCvBox .ssaw-sidebar-bnpl img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* 右側固定購入欄が存在しない画面では非表示 */
@media screen and (max-width: 1023px) {
  #pageItem .ssaw-sidebar-bnpl {
    display: none !important;
  }
}

/* ===== ssaw-hide-center-price-pc-v2 ===== */
/*
 * PC商品ページ：
 * 中央の価格を非表示にし、
 * 中央の商品タイトルを主見出しとして強調する。
 * 右側固定購入欄の商品名・価格には影響させない。
 */
@media screen and (min-width: 1024px) {
  #pageItem .product-data > p.item-price,
  #pageItem .product-data > .initial-price {
    display: none !important;
  }

  #pageItem .product-data > h1.item-ttl {
    display: block !important;
    margin: 0 0 26px !important;
    padding: 0 !important;

    color: #000030 !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
    letter-spacing: .025em !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ===== ssaw-payment-block-center-v3 ===== */
/*
 * 商品ページの支払い方法欄を、
 * PC右側購入バー・モバイル購入欄の両方で中央揃えにする。
 */

/* 枠全体を購入ボタンと同じ幅・位置に揃える */
#pageItem .product-cv-inner .ssaw-payment-details,
#pageItem .product-cv-box .ssaw-payment-details {
  position: relative !important;
  left: auto !important;
  right: auto !important;

  display: block !important;
  align-self: stretch !important;
  box-sizing: border-box !important;

  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;

  transform: none !important;
}

/* 見出し文字を枠の正確な中央へ配置 */
#pageItem .product-cv-inner .ssaw-payment-summary,
#pageItem .product-cv-box .ssaw-payment-summary {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  box-sizing: border-box !important;
  width: 100% !important;

  padding-left: 32px !important;
  padding-right: 32px !important;

  text-align: center !important;
  text-indent: 0 !important;
}

/* 右側の矢印は従来どおり右端に固定 */
#pageItem .product-cv-inner .ssaw-payment-summary::after,
#pageItem .product-cv-box .ssaw-payment-summary::after {
  position: absolute !important;
  right: 12px !important;
}

/* ===== ssaw-pc-purchase-top-align-v1 ===== */
@media screen and (min-width: 1024px) {
  #pageItem .product-cv-box {
    box-sizing: border-box !important;
    padding-top: 35px !important;
  }
}

/* ===== ssaw-top-main-visual-responsive-v1 ===== */
/*
 * ssaw TOPメインビジュアル
 * PC：16:9
 * タブレット：16:9
 * モバイル：1:1
 */

/* 共通設定 */
#pageIndex .top-mv {
  box-sizing: border-box !important;
  margin-left: auto !important;
  margin-right: auto !important;
  overflow: hidden !important;
}

#pageIndex #topMvSlider {
  width: 100% !important;
}

#pageIndex #topMvSlider .slick-list {
  width: 100% !important;
  overflow: hidden !important;
}

#pageIndex #topMvSlider .slick-track,
#pageIndex #topMvSlider .slick-slide,
#pageIndex #topMvSlider .slick-slide > div,
#pageIndex #topMvSlider .top-mv-box,
#pageIndex #topMvSlider .top-mv-box > a,
#pageIndex #topMvSlider .top-mv-box picture {
  height: 100% !important;
}

#pageIndex #topMvSlider .top-mv-box > a,
#pageIndex #topMvSlider .top-mv-box picture {
  display: block !important;
  width: 100% !important;
}

#pageIndex #topMvSlider .top-mv-box img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  object-fit: cover !important;
  object-position: center center !important;
}

/* PC：16:9、最大幅1180px */
@media screen and (min-width: 1024px) {
  #pageIndex .top-mv {
    width: min(calc(100% - 48px), 1180px) !important;
    max-width: 1180px !important;
  }

  #pageIndex #topMvSlider .slick-list {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* タブレット：16:9 */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #pageIndex .top-mv {
    width: 100% !important;
    max-width: none !important;
  }

  #pageIndex #topMvSlider .slick-list {
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }
}

/* モバイル：1:1、最大390px */
@media screen and (max-width: 767px) {
  #pageIndex .top-mv {
    width: min(100%, 390px) !important;
    max-width: 390px !important;
  }

  #pageIndex #topMvSlider .slick-list {
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/* ===== ssaw-mobile-mv-information-adjust-v2 ===== */
@media screen and (max-width: 767px) {

  /*
   * 固定ヘッダーの下からメイン画像を開始
   */
  #pageIndex .top-mv {
    margin-top: 48px !important;
  }

  /*
   * Information見出し横の「お知らせ」
   */
  #pageIndex .top-info > .ttl-h2 > span {
    margin-left: 6px !important;
    font-size: 8px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    vertical-align: middle !important;
  }

  /*
   * Informationの記事一覧
   */
  #pageIndex .top-info .top-info-list {
    margin-top: 14px !important;
  }

  /*
   * 日付と記事タイトルを横並びにする
   */
  #pageIndex .top-info .top-info-data {
    display: grid !important;
    grid-template-columns: 54px minmax(0, 1fr) !important;
    align-items: start !important;
    column-gap: 8px !important;

    margin: 0 0 4px !important;
    padding: 0 !important;
  }

  #pageIndex .top-info .top-info-data:last-child {
    margin-bottom: 0 !important;
  }

  /*
   * 更新日
   * 記事タイトルより少し強く表示
   */
  #pageIndex .top-info .top-info-data .date {
    margin: 0 !important;

    color: #000030 !important;
    font-size: 9.5px !important;
    font-weight: 600 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;

    white-space: nowrap !important;
  }

  /*
   * 記事タイトル
   * 太字を解除して読みやすくする
   */
  #pageIndex .top-info .top-info-data .ttl {
    margin: 0 !important;

    color: #000030 !important;
    font-size: 9.5px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
    letter-spacing: 0 !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }
}

/* ===== ssaw-pc-main-visual-impact-v6 ===== */
/*
 * ssaw PCメインビジュアル完成形
 *
 * ・ヘッダーは通常の配置位置を維持したまま上部に固定
 * ・ヘッダーとメインビジュアルを重ねない
 * ・ヘッダー上部と画像上部の不要な空白を削除
 * ・PC画像は16:9のまま、切り抜かず表示
 * ・次の商品が前の商品を押し出す横スライド
 * ・ドラッグ操作と矢印操作を維持
 * ・矢印は画像外側の白い余白へ配置
 * ・モバイル版には影響させない
 */
@media screen and (min-width: 1024px) {

  /*
   * お知らせバナーとヘッダーの間に生じる
   * 不要な空白を解除する。
   */
  body#pageIndex .app-info-wrap {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body#pageIndex .body-wrap,
  body#pageIndex main {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /*
   * ヘッダー
   *
   * stickyなのでページ内の通常位置を保持する。
   * fixedのようにメイン画像の上へ重ならない。
   * スクロール後は画面上部に固定される。
   */
  body#pageIndex #headNav {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;

    box-sizing: border-box !important;
    width: 100% !important;

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

    transform: none !important;
  }

  /*
   * ヘッダー内部の左右中央配置は
   * 元テーマの設定を維持する。
   * 上下の不要な余白だけを解除する。
   */
  body#pageIndex #headNav .head-wrap {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /*
   * メインビジュアル全体
   *
   * 左右64px以上の白い余白を確保し、
   * その余白へ矢印を配置する。
   */
  body#pageIndex .top-mv,
  body#pageIndex .top-mv.type-a,
  body#pageIndex .top-mv.type-b,
  body#pageIndex .top-mv.type-c {
    position: relative !important;

    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 1 !important;

    box-sizing: border-box !important;

width: min(calc(100% - 128px), 1360px) !important;
max-width: 1360px !important;
    min-width: 0 !important;

    margin: 0 auto 30px !important;
    padding: 0 !important;

    overflow: visible !important;

    background: transparent !important;

    transform: none !important;
  }

  /*
   * Slickスライダー本体
   */
  body#pageIndex #topMvSlider,
  body#pageIndex .top-mv .top-mv-slide,
  body#pageIndex .top-mv .slick-slider {
    position: relative !important;

    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

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

    overflow: visible !important;
  }

  /*
   * 実際に画像が見える範囲。
   * 16:9を固定する。
   */
  body#pageIndex #topMvSlider .slick-list {
    position: relative !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;

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

    overflow: hidden !important;

    cursor: grab !important;

    user-select: none !important;
    -webkit-user-select: none !important;

    touch-action: pan-y !important;
    overscroll-behavior-inline: contain !important;
  }

  body#pageIndex #topMvSlider .slick-list:active,
  body#pageIndex .top-mv.is-ssaw-dragging .slick-list {
    cursor: grabbing !important;
  }

  /*
   * スライドを横一列に並べる。
   */
  body#pageIndex #topMvSlider .slick-track {
    position: relative !important;

    display: flex !important;
    align-items: stretch !important;

    height: 100% !important;

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

    opacity: 1 !important;

    will-change: transform !important;
  }

  /*
   * 個々のスライド
   */
  body#pageIndex #topMvSlider .slick-slide {
    position: relative !important;

    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;

    box-sizing: border-box !important;

    height: 100% !important;
    min-height: 0 !important;

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

    opacity: 1 !important;
    visibility: visible !important;
  }

  body#pageIndex #topMvSlider .slick-slide > div {
    display: block !important;

    width: 100% !important;
    height: 100% !important;
  }

  /*
   * 16:9の画像枠
   */
  body#pageIndex .top-mv .top-mv-box {
    position: relative !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

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

    overflow: hidden !important;

    background: #fff !important;
  }

  body#pageIndex .top-mv .top-mv-box > a,
  body#pageIndex .top-mv .top-mv-box picture {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

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

  /*
   * 登録した16:9画像を切り抜かず表示する。
   */
  body#pageIndex .top-mv .top-mv-box img {
    display: block !important;

    box-sizing: border-box !important;

    width: 100% !important;
    height: 100% !important;
    max-width: none !important;

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

    object-fit: contain !important;
    object-position: center center !important;

    transform: none !important;

    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
  }

  /*
   * 下部の5個のドットは非表示。
   */
  body#pageIndex .top-mv .slick-dots {
    display: none !important;
  }

  /*
   * Slick標準矢印は使わない。
   * JavaScriptが生成するssaw専用矢印を使用する。
   */
  body#pageIndex #topMvSlider .slick-prev,
  body#pageIndex #topMvSlider .slick-next {
    display: none !important;
  }

  /*
   * 左右の矢印
   *
   * 画像の内側ではなく、
   * 左右の白い余白へ配置する。
   */
  body#pageIndex .top-mv .ssaw-mv-arrow {
    position: absolute !important;

    top: 50% !important;
    z-index: 20 !important;

    display: grid !important;
    place-items: center !important;

    box-sizing: border-box !important;

    width: 40px !important;
    height: 76px !important;

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

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    color: #b7bbc3 !important;

    opacity: 1 !important;

    cursor: pointer !important;

    transform: translateY(-50%) !important;

    transition: color .18s ease !important;
  }

  body#pageIndex .top-mv .ssaw-mv-arrow-prev {
    left: -54px !important;
  }

  body#pageIndex .top-mv .ssaw-mv-arrow-next {
    right: -54px !important;
  }

  /*
   * 細いグレーの矢印を描画する。
   */
  body#pageIndex .top-mv .ssaw-mv-arrow::before {
    content: "" !important;

    display: block !important;

    box-sizing: border-box !important;

    width: 13px !important;
    height: 13px !important;

    margin: 0 !important;

    border-top: 1.5px solid currentColor !important;
    border-right: 1.5px solid currentColor !important;

    background: transparent !important;
  }

  body#pageIndex .top-mv .ssaw-mv-arrow-prev::before {
    transform: rotate(-135deg) !important;
  }

  body#pageIndex .top-mv .ssaw-mv-arrow-next::before {
    transform: rotate(45deg) !important;
  }

  body#pageIndex .top-mv .ssaw-mv-arrow:hover,
  body#pageIndex .top-mv .ssaw-mv-arrow:focus-visible {
    color: #777d88 !important;
  }

  body#pageIndex .top-mv .ssaw-mv-arrow:focus-visible {
    outline: 1px solid rgba(0, 0, 48, .22) !important;
    outline-offset: 2px !important;
  }
}

/*
 * モバイル・タブレット版は
 * 現在完成している表示を変更しない。
 */
@media screen and (max-width: 1023px) {
  body#pageIndex .top-mv .ssaw-mv-arrow {
    display: none !important;
  }
}

/* ===== ssaw-pc-content-width-v1 ===== */
/*
 * TOPページのPCコンテンツ幅を拡大
 *
 * ・Information
 * ・Customer Reviews
 * ・Field Photo
 * ・RARE
 * ・Pick up
 * ・All Items
 *
 * 1024～1279px：All Items 4列
 * 1280px以上：All Items 5列
 * モバイル・タブレットには影響させない
 */
@media screen and (min-width: 1024px) {

  /*
   * テーマ標準の外側幅制限を解除
   */
  body#pageIndex main,
  body#pageIndex .top-contents-wrap,
  body#pageIndex .top-right-contents-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * 主要セクションの横幅を最大1240pxに統一
   */
  body#pageIndex .ssaw-top-info-review-row,
  body#pageIndex .top-rank,
  body#pageIndex .top-pickup,
  body#pageIndex .content-wrap {
    box-sizing: border-box !important;
    width: min(calc(100% - 64px), 1240px) !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
   * RARE・Pick upの内側にも拡大幅を反映
   */
  body#pageIndex .top-rank .slider-item-wrap,
  body#pageIndex .top-pickup .slider-item-wrap,
  body#pageIndex #topRankSlider,
  body#pageIndex #topPickSlider {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
  }

  /*
   * All Itemsの親枠
   */
  body#pageIndex .items-wrap {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * 1024～1279pxでは4列
   */
  body#pageIndex #itemsList {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    column-gap: 24px !important;
    row-gap: 42px !important;

    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;

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

    list-style: none !important;
  }

  /*
   * テーマ標準の列幅・余白を解除
   */
  body#pageIndex #itemsList > li {
    float: none !important;
    box-sizing: border-box !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

  body#pageIndex #itemsList > li > a,
  body#pageIndex #itemsList .items-img,
  body#pageIndex #itemsList .items-data {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
  }
}

/*
 * 1280px以上ではAll Itemsを5列にする
 */
@media screen and (min-width: 1280px) {
  body#pageIndex #itemsList {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}

/* ===== ssaw-pc-mega-menu-contained-v1 ===== */
@media screen and (min-width: 1024px) {

  /*
   * PC版のCATEGORY・BRANDS展開パネル
   * 実際のHTMLでは、.smは#headNavの直下にある
   */
  #headNav > .sm[data-p="i"],
  #headNav > .sm[data-p="b"] {
    box-sizing: border-box !important;

    /*
     * 共通コンテンツ幅と同じ最大1320px
     * 画面が狭い場合は左右24pxを確保
     */
    left: max(24px, calc((100vw - 1320px) / 2)) !important;
    right: auto !important;

    width: min(calc(100vw - 48px), 1320px) !important;
    max-width: 1320px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    /*
     * 画面下まで不必要に伸びないようにする
     */
    min-height: 0 !important;
    height: auto !important;
    max-height: min(560px, calc(100dvh - 120px)) !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    overscroll-behavior: contain !important;
  }

  /*
   * CATEGORY・BRANDSの内部要素
   */
  #headNav > .sm[data-p="i"] > #smi,
  #headNav > .sm[data-p="b"] > #smb,
  #headNav > .sm[data-p="i"] > #smi > section,
  #headNav > .sm[data-p="b"] > #smb > section {
    box-sizing: border-box !important;

    width: 100% !important;
    max-width: none !important;

    min-height: 0 !important;
    height: auto !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* ===== ssaw-pc-purchase-typography-v1 ===== */
/*
 * PC版商品ページ
 * 右側購入欄の文字サイズと視認性を調整
 */
@media screen and (min-width: 1024px) {

  /*
   * 商品名
   */
  body#pageItem #productCvBox .cvbox-item-ttl.item-ttl {
    margin-bottom: 9px !important;

    color: #000030 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: .01em !important;

    word-break: normal !important;
    overflow-wrap: anywhere !important;
  }

  /*
   * 商品価格
   */
  body#pageItem #productCvBox .cvbox-item-price.item-price,
  body#pageItem #productCvBox .cvbox-item-price.item-price .default,
  body#pageItem #productCvBox .cvbox-item-price.item-price .discount {
    color: #000000 !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    letter-spacing: .01em !important;
  }

  /*
   * 有料オプション選択後の合計金額
   */
  body#pageItem #productCvBox .ssaw-selected-option-total-amount {
    color: #000000 !important;
    font-size: 23px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
  }

  /*
   * 価格横の「税込」
   */
  body#pageItem #productCvBox .cvbox-item-price.item-price::after {
    margin-left: 5px !important;
    font-size: 10px !important;
    font-weight: 500 !important;
  }

  /*
   * Pay ID 3回あと払い案内
   */
  body#pageItem #productCvBox .ssaw-bnpl-sidebar,
  body#pageItem #productCvBox .ssaw-bnpl-sidebar p,
  body#pageItem #productCvBox .ssaw-bnpl-sidebar span,
  body#pageItem #productCvBox .ssaw-bnpl-sidebar a,
  body#pageItem #productCvBox .ssaw-bnpl-sidebar div {
    font-size: 11px !important;
    line-height: 1.5 !important;
  }

  /*
   * 配送・送料の見出し
   */
  body#pageItem #productCvBox .ssaw-shipping-sidebar-title {
    margin-bottom: 7px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.45 !important;
  }

  /*
   * 配送・送料の本文
   */
  body#pageItem #productCvBox .ssaw-shipping-sidebar-item {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: 1.65 !important;
  }

  /*
   * 「送料を確認する」リンク
   */
  body#pageItem #productCvBox .ssaw-shipping-sidebar-link {
    font-size: 11px !important;
    font-weight: 500 !important;
    line-height: inherit !important;
  }

  /*
   * 数量・商品オプションの項目名
   */
  body#pageItem #productCvBox label {
    font-size: 11px !important;
    line-height: 1.45 !important;
  }

  /*
   * 数量・商品オプションの選択枠
   */
  body#pageItem #productCvBox select {
    min-height: 31px !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
  }

  /*
   * カート・お気に入りなどのボタン
   */
  body#pageItem #productCvBox button,
  body#pageItem #productCvBox input[type="button"],
  body#pageItem #productCvBox input[type="submit"] {
    font-size: 12px !important;
  }

  /*
   * 支払い方法の折りたたみ見出し
   */
  body#pageItem #productCvBox .ssaw-payment-summary {
    font-size: 12px !important;
    font-weight: 700 !important;
  }

  /*
   * 支払い方法を開いた後の一覧
   */
  body#pageItem #productCvBox .payment-list,
  body#pageItem #productCvBox .payment-list li,
  body#pageItem #productCvBox .payment-guide,
  body#pageItem #productCvBox .payment-guide a {
    font-size: 11px !important;
    line-height: 1.6 !important;
  }
}

/* ===== ssaw-pc-top-content-wide-v2 ===== */
/*
 * PC版トップページのコンテンツ幅を拡大
 *
 * 画面幅を基準に最大1240pxまで広げる。
 * 1280px以上：All Items 5列
 * 1024～1279px：All Items 4列
 */
@media screen and (min-width: 1024px) {

  /*
   * テーマ側のmain幅制限を解除
   */
  body#pageIndex main {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /*
   * トップページのコンテンツ外枠
   *
   * 100%ではなく100vwを使用し、
   * 狭い親要素ではなくブラウザ幅を基準にする。
   */
  body#pageIndex .top-contents-wrap {
    position: relative !important;
    left: 50% !important;

    display: block !important;
    box-sizing: border-box !important;

    width: min(calc(100vw - 48px), 1320px) !important;
    max-width: none !important;

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

    transform: translateX(-50%) !important;
  }

  /*
   * テーマ標準の右側カラム幅を解除
   */
  body#pageIndex .top-right-contents-wrap {
    position: relative !important;
    left: auto !important;
    right: auto !important;

    display: block !important;
    float: none !important;
    flex: 0 0 100% !important;
    grid-column: 1 / -1 !important;

    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

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

    transform: none !important;
  }

  /*
   * Information、レビュー、商品セクションを
   * 拡大した外枠いっぱいに使用
   */
  body#pageIndex .ssaw-top-info-review-row,
  body#pageIndex .top-rank,
  body#pageIndex .top-pickup,
  body#pageIndex .content-wrap,
  body#pageIndex .items-wrap,
  body#pageIndex .slider-item-wrap {
    box-sizing: border-box !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * RARE・Pick upのスライダー幅
   */
  body#pageIndex #topRankSlider,
  body#pageIndex #topPickSlider {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  /*
   * All Items
   * 1024～1279pxでは4列
   */
  body#pageIndex #itemsList {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;

    box-sizing: border-box !important;
    width: 100% !important;
    max-width: none !important;

    column-gap: 24px !important;
    row-gap: 44px !important;

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

    list-style: none !important;
  }

  /*
   * 商品カードに設定されている
   * テーマ標準の固定幅を解除
   */
  body#pageIndex #itemsList > li {
    float: none !important;

    box-sizing: border-box !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

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

  body#pageIndex #itemsList > li > a,
  body#pageIndex #itemsList .items-img,
  body#pageIndex #itemsList .items-data {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/*
 * 画面幅1280px以上ではAll Itemsを5列にする
 */
@media screen and (min-width: 1280px) {
  body#pageIndex #itemsList {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}

/* ===== ssaw-selected-option-total-css-v2 ===== */
/* =========================================================
   有料オプション選択後の合計金額
   PC：右側の商品価格直下
   モバイル：数量欄の右側
========================================================= */

#pageItem .ssaw-selected-option-total {
  box-sizing: border-box;
  color: #000030;
}

#pageItem .ssaw-selected-option-total[hidden] {
  display: none !important;
}

#pageItem .ssaw-selected-option-total-main {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
}

#pageItem .ssaw-selected-option-total-label {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .025em;
  white-space: nowrap;
}

#pageItem .ssaw-selected-option-total-price {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3px;
  margin-left: auto;
  white-space: nowrap;
}

#pageItem .ssaw-selected-option-total-amount {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .01em;
}

#pageItem .ssaw-selected-option-total-tax {
  color: rgba(0, 0, 48, .68);
  font-size: 8px;
  font-weight: 500;
  line-height: 1;
}

#pageItem .ssaw-selected-option-total-breakdown {
  margin: 4px 0 0;
  color: rgba(0, 0, 48, .68);
  font-size: 9px;
  font-weight: 500;
  line-height: 1.45;
  text-align: right;
  white-space: nowrap;
}

/* =========================================================
   PC版
========================================================= */
@media screen and (min-width: 1024px) {
  #pageItem .ssaw-selected-option-total--mobile {
    display: none !important;
  }

  #pageItem .ssaw-selected-option-total--pc {
    width: 100%;
    margin: 9px 0 10px;
    padding: 9px 0 8px;
    border-top: 1px solid rgba(0, 0, 48, .16);
    border-bottom: 1px solid rgba(0, 0, 48, .16);
  }
}

/* =========================================================
   モバイル・タブレット版
========================================================= */
@media screen and (max-width: 1023px) {
  #pageItem .ssaw-selected-option-total--pc {
    display: none !important;
  }

  /*
   * BASEの数量入力欄を基準に、
   * 合計金額を右側へ固定する。
   */
  #pageItem .ssaw-mobile-total-host {
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 58px !important;
  }

  /*
   * 数量セレクトが横いっぱいに広がらないようにする。
   */
  #pageItem select[data-ssaw-quantity-select="1"] {
    width: auto !important;
    min-width: 54px !important;
    max-width: 90px !important;
  }

#pageItem .ssaw-selected-option-total--mobile {
  position: absolute !important;
  right: 0 !important;
  bottom: 6px !important;

  display: block;
  box-sizing: border-box;
  width: 142px;
  margin: 0;
  padding: 0;

  border: 0;
  background: transparent;

  text-align: right;
  pointer-events: none;
}

  #pageItem .ssaw-selected-option-total--mobile
  .ssaw-selected-option-total-main {
    display: block;
    width: 100%;
  }

#pageItem .ssaw-selected-option-total--mobile
.ssaw-selected-option-total-label {
  display: block;
  margin: 0 0 4px;

  color: rgba(0, 0, 48, .68);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
}

  #pageItem .ssaw-selected-option-total--mobile
  .ssaw-selected-option-total-price {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0;
  }

#pageItem .ssaw-selected-option-total--mobile
.ssaw-selected-option-total-amount {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.05;
}

#pageItem .ssaw-selected-option-total--mobile
.ssaw-selected-option-total-tax {
  font-size: 8px;
}

  /*
   * モバイルでは内訳を省略し、
   * カート付近を簡潔にする。
   */
  #pageItem .ssaw-selected-option-total--mobile
  .ssaw-selected-option-total-breakdown {
    display: none !important;
  }
}

/* ===== ssaw-mobile-tax-display-v1 ===== */
/* モバイル版：商品価格の右側に税込表記を追加 */
@media screen and (max-width: 767px) {
  #pageItem .product-data > .item-price {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
  }

  #pageItem .product-data > .item-price::after {
    content: "（税込）";
    display: inline-block !important;
    color: rgba(0, 0, 48, 0.68) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}