/* Self-hosted @font-face — Jost (49KB, preloaded → swap不要) */ @font-face { font-family: 'Jost'; font-style: normal; font-weight: 300 600; font-display: optional; src: url(/template/rsn-r4-jost-variable-3f54f524331a.woff2) format('woff2'); } /* Self-hosted @font-face — Noto Sans JP (4MB, preloaded → optional) */ @font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 300 700; font-display: optional; src: url(/template/rsn-r4-noto-sans-jp-variable-622139950afc.woff2) format('woff2'); } #product-main-float{--color-primary: #1A1A1A; --color-primary-dark: #000000; --color-primary-darker: #000000; --color-primary-light: #333333; --color-primary-lighter: #555555; --color-secondary: #666666; --color-secondary-dark: #555555; --color-secondary-darker: #444444; --color-secondary-light: #999999; --color-secondary-lighter: #CCCCCC; --t-header-language-text: #C4AD90; --color-tertiary: #1A1A1A; --color-tertiary-dark: #111111; --color-tertiary-darker: #000000; --color-tertiary-light: #333333; --color-tertiary-lighter: #555555; --color-accent-gold: #8B7355; --color-accent-gold-light: #A89070; --color-accent-gold-dark: #6B563F; --color-bg-default: #FFFFFF; --color-bg-warm: #F8F8F8; --color-bg-beige: #F2F2F2; --color-bg-beige-deep: #E8E8E8; --color-bg-dark: #1A1A1A; --color-bg-dark-warm: #222222; --color-bg-dark-accent: #2A2A2A; --color-neutral-50: #FAFAFA; --color-neutral-100: #F5F5F5; --color-neutral-200: #E8E8E8; --color-neutral-300: #D0D0D0; --color-neutral-400: #AAAAAA; --color-neutral-500: #888888; --color-neutral-600: #666666; --color-neutral-700: #444444; --color-neutral-800: #333333; --color-neutral-900: #1A1A1A; --color-link: #333333; --color-link-hover: #1A1A1A; --color-link-visited: #555555; --color-cta: #1A1A1A; --color-cta-hover: #333333; --color-cta-active: #000000; --color-cta-text: #FFFFFF; --color-focus-ring: rgba(26, 26, 26, 0.3); --color-success: #5C7A45; --color-success-bg: #F5F7F2; --color-error: #8B3A3A; --color-error-bg: #FDF6F5; --color-warning: #9B7530; --color-warning-bg: #FDFBF5; --color-info: #3D4A5C; --color-info-bg: #F2F5F8; --color-surface-success: var(--color-success-bg); --color-surface-error: var(--color-error-bg); --color-surface-warning: var(--color-warning-bg); --color-surface-info: var(--color-info-bg); --color-text-primary: #1A1A1A; --color-text-secondary: #555555; --color-text-tertiary: #767676; --color-text-inverse: #FFFFFF; --color-text-on-beige: #333333; --color-border: #D0D0D0; --color-border-light: #E0E0E0; --color-border-dark: #AAAAAA; --color-badge-new: var(--color-success); --color-badge-used: var(--color-primary); --color-badge-antique: var(--color-tertiary-dark); --color-badge-pricedown: var(--color-error); --color-header-bg: #1A1A1A; --color-header-bg-hover: #2A2A2A; --color-footer-bg: #1A1A1A; --color-nav-bg: #222222; --color-nav-bg-active: #333333; --color-nav-text: #CCCCCC; --color-nav-text-hover: #FFFFFF; --color-cta-bridge: #333333; --color-cta-bridge-hover: #1A1A1A; --font-heading: 'Jost', 'Montserrat', 'Helvetica Neue', 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif; --font-body: 'Jost', 'Montserrat', 'Helvetica Neue', 'Helvetica', 'Arial', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'メイリオ', Meiryo, sans-serif; --font-display: 'Jost', 'Montserrat', 'Helvetica Neue', 'Noto Serif JP', 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif; --font-en-sans: 'Jost', 'Montserrat', 'Helvetica Neue', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Courier New', Courier, monospace; --text-xs: 0.75rem; --text-xxs: 10px; --text-sm: 0.875rem; --text-base: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --text-5xl: 3.75rem; --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.6; --leading-relaxed: 1.8; --leading-loose: 2.0; --tracking-tight: -0.02em; --tracking-normal: 0em; --tracking-wide: 0.05em; --tracking-wider: 0.1em; --tracking-widest: 0.2em; --bp-sm: 576px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --container-max: 1200px; --container-narrow: 800px; --container-wide: 1400px; --grid-columns: 12; --grid-gutter: 24px; --grid-gutter-sm: 16px; --space-0: 0; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-20: 5rem; --space-24: 6rem; --space-32: 8rem; --section-gap: var(--space-20); --section-gap-lg: var(--space-32); --radius-none: 0; --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; --shadow-none: none; --shadow-xs: 0 1px 2px rgba(42, 32, 24, 0.04); --shadow-sm: 0 1px 3px rgba(42, 32, 24, 0.06), 0 1px 2px rgba(42, 32, 24, 0.04); --shadow-md: 0 4px 6px rgba(42, 32, 24, 0.06), 0 2px 4px rgba(42, 32, 24, 0.04); --shadow-lg: 0 10px 15px rgba(42, 32, 24, 0.06), 0 4px 6px rgba(42, 32, 24, 0.04); --shadow-xl: 0 20px 25px rgba(42, 32, 24, 0.08), 0 10px 10px rgba(42, 32, 24, 0.04); --shadow-inner: inset 0 2px 4px rgba(42, 32, 24, 0.04); --transition-fast: 150ms ease; --transition-normal: 250ms ease; --transition-slow: 400ms ease; --transition-spring: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-bg: 1040; --z-modal: 1050; --z-tooltip: 1060;} :where(#product-main-float) .site-header *, :where(#product-main-float) .site-header ::after, :where(#product-main-float) .site-header ::before{font-family: inherit !important; font-style: inherit !important;} :where(#product-main-float) .site-header *{font-weight: inherit;} :where(#product-main-float) .site-header *{font-size: inherit;} :where(#product-main-float) .site-header *, :where(#product-main-float) .site-header ::after, :where(#product-main-float) .site-header ::before{margin: 0px; padding: 0px;} header:where(#product-main-float) .site-header{transition: 0.4s cubic-bezier(0.16, 1, 0.3, 1);} header:where(#product-main-float) .site-header{background: var(--color-legacy-header, #1A1A1A); color: rgb(232, 223, 208); position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; font-family: var(--font-body) !important; font-size: 16px !important; line-height: 1.6 !important;} @media (max-width: 768px){:where(#product-main-float) .site-header.scrolled .site-header__top{padding: 4px 10px !important; min-height: 40px !important;} :where(#product-main-float) .site-header.scrolled .site-header__nav{max-height: 0px !important; opacity: 0 !important; min-height: 0px !important; padding: 0px !important; border-top-color: transparent !important; height: 0px !important; overflow: hidden !important;} :where(#product-main-float) .site-header.scrolled-up .site-header__top{padding: 4px 10px !important; min-height: 40px !important;} :where(#product-main-float) .site-header.scrolled-up .site-header__nav{max-height: 38px !important; opacity: 1 !important; min-height: 38px !important; overflow: visible !important;} } :where(#product-main-float) .site-header.scrolled .site-header__cta svg, :where(#product-main-float) .site-header.scrolled-up .site-header__cta svg{display: none;} :where(#product-main-float) .site-header.scrolled .site-header__utility{max-height: 0px; opacity: 0; padding-top: 0px; padding-bottom: 0px; min-height: 0px;} :where(#product-main-float) .site-header.scrolled-up .site-header__utility{max-height: 34px; opacity: 1;} @media (max-width: 768px){:where(#product-main-float) .site-header.scrolled-up .site-header__utility{max-height: 28px;} } :where(#product-main-float) .site-header.scrolled .site-header__nav{max-height: 0px; opacity: 0; border-top-color: transparent; min-height: 0px; height: 0px; padding: 0px; overflow: hidden;} :where(#product-main-float) .site-header.scrolled .site-header__cta{max-height: 0px; opacity: 0; padding-top: 0px; padding-bottom: 0px; border-color: transparent; color: transparent; pointer-events: none;} :where(#product-main-float) .site-header.scrolled-up .site-header__nav{max-height: 42px; opacity: 1; border-top-color: rgba(255, 255, 255, 0.08); min-height: 40px; overflow: visible;} :where(#product-main-float) .site-header.scrolled-up .site-header__cta{max-height: 0px; opacity: 0; padding-top: 0px; padding-bottom: 0px; border-color: transparent; color: transparent; pointer-events: none;} @media (max-width: 768px){:where(#product-main-float) .site-header{padding: 0px;} } #product-main-float{--t-header-bg: #FFFFFF; --t-header-text: #333333; --t-logo-color: #1A1A1A; --t-accent: #1A1A1A; --t-nav-bg: #F8F8F8; --t-nav-border: #E0E0E0; --t-nav-text: #555555; --t-nav-text-hover: #1A1A1A; --t-nav-accent: #1A1A1A; --t-icon-color: #444444; --t-icon-opacity: .85; --t-utility-bg: linear-gradient(90deg, #1A1A1A 0%, #2A2A2A 100%); --t-utility-border: rgba(255,255,255,.08); --t-utility-text: var(--t-header-language-text); --t-utility-link: var(--t-header-language-text); --t-utility-strong: var(--t-header-language-text); --t-utility-icon: var(--t-header-language-text); --t-search-bg: #F5F5F5; --t-search-border: #D0D0D0; --t-search-text: #333; --t-search-placeholder: #999; --t-cta-border: #1A1A1A; --t-cta-text: #1A1A1A; --t-menu-bg: #FFFFFF; --t-menu-text: #333333; --t-menu-border: #E0E0E0; --t-menu-group-text: #999; --t-menu-link-text: #333; --t-menu-link-border: #F0F0F0; --t-menu-search-border: #D0D0D0; --t-menu-search-bg: #F8F8F8; --t-badge-bg: #1A1A1A; --t-header-shadow: 0 1px 4px rgba(0,0,0,.06); --t-fv-overlay: linear-gradient(90deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,.3) 35%,rgba(0,0,0,.08) 65%,transparent 100%); --t-fv-overlay-sp: linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.3) 55%,transparent 100%); --t-fv-tag: #FFFFFF; --t-fv-title: #FFFFFF; --t-fv-subtitle: rgba(255,255,255,.8); --t-pcard-bg: #FFFFFF; --t-pcard-border: #F0F0F0; --t-pcard-name: #333; --t-pcard-price: #1A1A1A; --t-pcard-brand: #666666; --t-products-border-left: #E0E0E0; --t-products-bg: #FAFAFA; --t-anniversary-text: #999; --t-anniversary-num: #333333; --t-store-info-text: #777; --t-detail-search-bg: #F0F0F0; --t-detail-search-border: #D0D0D0; --t-detail-search-text: #555; --t-icon-label-text: #777;} :where(#product-main-float) .site-header.scrolled .site-header__top{padding: 4px 24px !important; min-height: 40px !important;} :where(#product-main-float) .site-header.scrolled .site-header__center{margin: 0px 24px !important;} :where(#product-main-float) .site-header.scrolled-up .site-header__top{padding: 4px 24px !important; min-height: 40px !important;} :where(#product-main-float) .site-header.scrolled-up .site-header__center{margin: 0px 24px !important;} @media (max-width: 768px){:where(#product-main-float) .site-header.scrolled .site-header__top{padding: 4px 10px !important; min-height: 40px !important;} :where(#product-main-float) .site-header.scrolled .site-header__center{margin: 0px 8px !important;} :where(#product-main-float) .site-header.scrolled-up .site-header__top{padding: 4px 10px !important; min-height: 40px !important;} :where(#product-main-float) .site-header.scrolled-up .site-header__center{margin: 0px 8px !important;} } :where(#product-main-float) .site-header{font-family: Jost, Montserrat, "Helvetica Neue", "Noto Sans JP", sans-serif !important;} :where(#product-main-float) .site-header{background: var(--t-header-bg) !important; color: var(--t-header-text) !important; box-shadow: var(--t-header-shadow) !important;} body[data-theme="white"] :where(#product-main-float) .site-header{background: rgb(255, 255, 255) !important; color: rgb(51, 51, 51) !important; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px !important;} body[data-theme="gray"] :where(#product-main-float) .site-header{background: rgb(240, 240, 240) !important; color: rgb(51, 51, 51) !important; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px !important;} body[data-theme="dark"] :where(#product-main-float) .site-header{background: rgb(17, 17, 17) !important; color: rgb(224, 224, 224) !important; box-shadow: none !important;} :where(#product-main-float) .site-header a:focus, :where(#product-main-float) .site-header a:hover{text-decoration: none !important;} @media screen and (min-width: 769px){html body :where(#product-main-float) .site-header form.site-header__search div.poplink > div.poplink_search{overflow-x: auto !important; scrollbar-width: thin !important; scrollbar-color: rgb(143, 143, 143) rgb(232, 232, 232) !important; scrollbar-gutter: stable !important; padding-bottom: 22px !important;} html body :where(#product-main-float) .site-header form.site-header__search div.poplink > div.poplink_search::-webkit-scrollbar{display: block !important; width: auto !important; height: 10px !important;} html body :where(#product-main-float) .site-header form.site-header__search div.poplink > div.poplink_search::-webkit-scrollbar-track{background: rgb(232, 232, 232) !important; border-radius: 5px !important;} html body :where(#product-main-float) .site-header form.site-header__search div.poplink > div.poplink_search::-webkit-scrollbar-thumb{background: rgb(143, 143, 143) !important; border: 2px solid rgb(232, 232, 232) !important; border-radius: 5px !important;} } /* CLS prevention: header must be fixed from FIRST paint to avoid static→fixed shift */ header.site-header { position: fixed !important; top: 0; left: 0; width: 100%; z-index: 1000; } body { padding-top: 144px !important; } @media screen and (max-width: 768px) { body { padding-top: 87px !important; } } #wrapper > header { min-height: auto !important; height: auto !important; } /* Product detail only: keep the compact header collapsed when scrolling back up. The shared renewal logic still manages the scrolled/scrolled-up classes, while menu/search/header structure and the first-paint fixed-header CLS guard stay intact. */ header.site-header.scrolled-up .site-header__utility { max-height: 0 !important; opacity: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } header.site-header.scrolled-up .site-header__nav { max-height: 0 !important; opacity: 0 !important; border-top-color: transparent !important; min-height: 0 !important; height: 0 !important; padding: 0 !important; overflow: hidden !important; } #main-column { width: 100% !important; max-width: 1200px !important; float: none !important; margin: 0 auto !important; } #contents { width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; float: none !important; } html { min-height: 100vh; } body { display: flex !important; flex-direction: column !important; height: auto !important; min-height: 100vh !important; } #wrapper { flex: 1 0 auto !important; } footer { flex-shrink: 0 !important; padding-top: 40px !important; } footer .rasin-footer { padding-top: 48px !important; } #product-main-float { background: transparent !important; } #product-main-float .toggle-wrap { background: transparent !important; } #contents{font-family:NotoSansJP,sans-serif;font-size:13px;line-height:26px;} /** * rasin-detail-cro.css — 商品詳細ページ CRO スタイル恒久版 * * Origin: cro_all_debug.js v7.9.0 のインラインCSS部分を抽出・PC対応追加 * Version: 2.0.0 — PC 2カラムレイアウト保護対応 * * 設計原則: * - SP (≤768px): モバイルファーストのCRO UI（カードオーバーレイ、横スクロール等） * - PC (≥769px): 本番の2カラムレイアウト（左:画像 / 右:pi_cart）を壊さない * - CRO要素（信頼バッジ・会員カード等）のスタイルはPC/SP共通 * - ヘッダー・ロゴには一切干渉しない */ /* ============================================= CLS Prevention: Webフォント フォールバックメトリクス調整 Jost / Noto Sans JP のシステムフォントフォールバック時の メトリクスを近似し、font-display:swap 時のリフロー幅を最小化。 Lighthouse layout-shifts で table.price が CLS 0.165 を占める 根本原因がWebフォントswapであるため、ここで対処。 ============================================= */ @font-face { font-family: 'Jost Fallback'; src: local('Arial'); size-adjust: 100.8%; ascent-override: 100%; descent-override: 22%; } @font-face { font-family: 'Noto Sans JP Fallback'; src: local('Hiragino Kaku Gothic ProN'), local('Yu Gothic'), local('Meiryo'); size-adjust: 101%; ascent-override: 108%; descent-override: 19%; } /* ============================================= CLS Prevention: 画像サイズ固定 Lighthouse layout-shifts で原因「メディア要素に明示的な サイズが含まれていません」と報告された画像に対し、 CSSで固定サイズを指定。SSRテンプレート変更不要。 ============================================= */ /* loan_title.png — 480x40 実測値 */ .loan-panel_ttl img { width: 480px !important; height: 40px !important; max-width: 100% !important; } /* order_shop_500x100.webp — 500x100 */ a#backorder img { width: 500px !important; height: 100px !important; max-width: 100% !important; } /* tag_icon.png — 14x15 実測値 */ a.ttl_icon img { width: 14px !important; height: 15px !important; } /* award_500x100.jpg — CSS上書き防止 */ section.award img { width: 500px !important; height: 100px !important; max-width: 100% !important; aspect-ratio: 5 / 1 !important; } /* wish button — display:none だがサイズ予約 */ img#wish-button-pc-cart-side { width: 71px !important; height: 60px !important; } /* ─── CLS Prevention: #pi_cart スペース事前確保 ─────────── CRO JS（DOMContentLoaded）がDOM注入する前に、 render-blocking CSSで最終高さ分のスペースを確保。 CRO完了後（cro-layout-ready付与）に min-height を解除。 これにより section#itemDetail-wrap 以下の要素シフトを防止。 */ body:not(.cro-loaded) #pi_cart { min-height: 760px !important; } /* ─── CLS Prevention: #footer_float 初期非表示 ─────────── ShopServe stock要素。CRO JS実行前の位置計算が不安定で footer_float の位置変動が CLS 0.04〜0.10 を生む。 CRO完了まで非表示にし、最終レイアウトで表示。 */ body:not(.cro-loaded) #footer_float { display: none !important; } /* ─── CLS Prevention: below-fold セクションの content-visibility ─── section.spec / section.imgNotion は below-the-fold のため、 content-visibility: auto でレンダリングをスキップ。 シフトしてもCLS計算に含まれない。 */ section.spec, section.imgNotion { content-visibility: auto; contain-intrinsic-size: auto 500px; } /* ============================================= CRO Full-Page Skeleton Placeholder (CLS Prevention) SSR → CRO JS DOM操作完了までの中間描画状態で： - 左カラム: 画像未ロードの空白エリア → シマーアニメーション - 右カラム: CRO未注入の空白エリア → 各セクションのスケルトン h1 と 価格はSSR実データを即表示（LCP維持・ハイブリッド型） body:not(.cro-layout-ready) → CRO JS DOM操作完了で一括消去 body:not(.cro-loaded) → 2200ms後にSS遅延要素の予約を消去 ============================================= */ @keyframes cro-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } } @media screen and (min-width: 769px) { /* ─── 左カラム: 画像エリアのシマー ───────────────── aspect-ratio: 1/1 で正方形確保済み（L1233）。 画像ロード完了前の白い空白にシマーを表示。 */ body:not(.cro-layout-ready) .itemThumb-main { background: linear-gradient(90deg, #f8f8f8 25%, #f0f0f0 37%, #f8f8f8 63%) !important; background-size: 400px 100% !important; animation: cro-shimmer 1.4s ease infinite !important; } /* ─── 右カラム: ブランド名スケルトン（h1の上） ───── CROが「🏷 ロレックス」等のブランドラベルを .icons の後方（h1の前）に挿入する。 SSR状態では .icons 内の ico_itemType が display:none で高さ0。 ブランド名挿入による h1 下方シフトを防止。 */ body:not(.cro-layout-ready) #pi_cart > .icons { min-height: 22px !important; display: block !important; } body:not(.cro-layout-ready) #pi_cart > .icons::after { content: '' !important; display: block !important; width: 100px !important; height: 14px !important; margin-top: 2px !important; background: #ebebeb !important; border-radius: 3px !important; } /* ─── 右カラム: バッジ行スケルトン（h1の後） ──────── CROがバッジ行（返品OK / 取寄せOK / 在庫店舗 / 中古）を h1 の直後に注入する。 h1::after でスケルトンブロック4個を表示し、 バッジ注入によるコンテンツ下方シフトを防止。 ※ h1 のフォント継承を font-size:0 でリセット */ body:not(.cro-loaded) #pi_cart:not(:has(> .badgeArea)) > h1::after { content: '' !important; display: block !important; margin-top: 12px !important; height: 34px !important; width: 100% !important; font-size: 0 !important; line-height: 0 !important; background: linear-gradient(#e8f5e9, #e8f5e9) 0 0 / 68px 26px no-repeat, linear-gradient(#e8f5e9, #e8f5e9) 76px 0 / 72px 26px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 156px 0 / 116px 26px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 280px 0 / 42px 26px no-repeat !important; border-radius: 14px !important; } /* ─── 右カラム: 価格以降の全体スケルトン ───────────── table.price::after で以下を一括カバー: ① ポイント行（CROが再配置） ② 信頼バッジ4個（CRO注入） ③ 会員限定カード（CRO注入） ④ 買取参考価格カード（CRO注入） ⑤ CTAボタン群（CRO注入） ※ SSR価格テキスト自体はスケルトンの上に表示（LCP維持） */ /* ─── table.price: Webフォントswap containment（確定版）─── Jost + Noto Sans JP の多段swapによるリフローを table.price 内部に封じ込め、外部要素への波及を防止。 ※ での contain は部分的だが CLS 0.165 → ~0.04 に削減する実績。 ※ v25: contain完全削除 → CLS 0.25 悪化 ※ v29: pi_cartのみ → CLS 0.27 悪化 ※ v30: 二重封じ込め → CLS 0.20（pi_cart containが逆効果） ※ 結論: table.price 単独 contain が最適（CLS ~0.17）*/ body:not(.cro-loaded) #pi_cart:not(:has(> .ttl_icon))::before { content: '' !important; display: block !important; width: 160px !important; height: 16px !important; margin: 0 0 4px !important; background: #ebebeb !important; border-radius: 3px !important; } body:not(.cro-loaded) #pi_cart > .ttl_icon { color: transparent !important; overflow: hidden !important; background: linear-gradient(#ebebeb, #ebebeb) 0 1px / 160px 16px no-repeat !important; border-radius: 3px !important; } body:not(.cro-loaded) #pi_cart > .ttl_icon * { visibility: hidden !important; } body:not(.cro-loaded) #pi_cart > h1 { color: transparent !important; text-shadow: none !important; background: linear-gradient(#e8e8e8, #e8e8e8) 0 6px / 520px 18px no-repeat !important; border-radius: 4px !important; } body:not(.cro-loaded) #pi_cart > .badgeArea { overflow: hidden !important; background: linear-gradient(#e8f5e9, #e8f5e9) 0 4px / 68px 26px no-repeat, linear-gradient(#e8f5e9, #e8f5e9) 76px 4px / 72px 26px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 156px 4px / 116px 26px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 280px 4px / 42px 26px no-repeat !important; border-radius: 14px !important; } body:not(.cro-loaded) #pi_cart > .badgeArea > * { visibility: hidden !important; } body:not(.cro-loaded) #pi_cart table.price { min-height: 355px !important; contain: layout style !important; background: linear-gradient(#e8e8e8, #e8e8e8) 0 6px / 230px 36px no-repeat, linear-gradient(#dcfce7, #dcfce7) right 2px top 2px / 140px 63px no-repeat, linear-gradient(#fef3c7, #fef3c7) 0 70px / 220px 16px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 0 104px / 120px 14px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 136px 104px / 100px 14px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 252px 104px / 120px 14px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 388px 104px / 80px 14px no-repeat, linear-gradient(#faf6ee, #faf6ee) 0 138px / 100% 145px no-repeat, linear-gradient(#e0e0e0, #e0e0e0) 0 294px / 100% 46px no-repeat !important; } body:not(.cro-loaded) #pi_cart table.price tr.price td > * { visibility: hidden !important; } /* taxFreeSet is moved asynchronously and can escape the direct-child rule above. */ body:not(.cro-loaded) .taxFreeSet { visibility: hidden !important; } body:not(.cro-loaded) #pi_cart > .shipping-link { color: transparent !important; background: linear-gradient(#d9d9d9, #d9d9d9) 0 0 / 93px 32px no-repeat !important; border-radius: 4px !important; overflow: hidden !important; } body:not(.cro-loaded) #pi_cart > .shipping-link * { visibility: hidden !important; } body:not(.cro-loaded) #pi_cart > .forOverSea { color: transparent !important; overflow: hidden !important; background: linear-gradient(#f1dede, #f1dede) 0 0 / 100% 48px no-repeat, linear-gradient(#f6eeee, #f6eeee) 0 60px / 100% 90px no-repeat !important; } body:not(.cro-loaded) #pi_cart > .forOverSea * { visibility: hidden !important; } table.price { contain: layout style !important; } body:not(.cro-loaded) #pi_cart table.price::after { content: none !important; display: none !important; } /* ─── CRO Layout Ready: 全スケルトン一括消去 ──────── */ body.cro-layout-ready .itemThumb-main { animation: none !important; } body.cro-layout-ready #pi_cart > .icons { min-height: auto !important; } body.cro-layout-ready #pi_cart > .icons::after { display: none !important; } body.cro-layout-ready #pi_cart > h1::after { display: none !important; } body.cro-layout-ready #pi_cart table.price::after { display: none !important; } /* ─── SS遅延生成要素のスペースリザベーション ───────── .ttl_icon: SS JSが DOMContentLoaded後に h1 直前に挿入するアイコン行。 .badgeArea: SS JSが生成するコンディションバッジ。 .item_title_inner: 追従バー内の商品名エリア。 2200ms以上遅延出現するため cro-loaded（遅延タイマー）で制御。 */ body:not(.cro-loaded) .item_title_inner { min-height: 28px !important; } body:not(.cro-loaded) #pi_cart .badgeArea, body:not(.cro-loaded) #pi_cart .ttl_icon { min-height: 24px !important; } } /* ============================================= 共通: FV最適化（PC/SP共通で安全に非表示にできるもの） ============================================= */ #campaign_banner { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; } .loan48-topbanner, .sp_top_contents_bnr { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; } #page-top2 { display: none !important; margin: 0 !important; padding: 0 !important; } #main-column > section:nth-child(1) { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; overflow: hidden !important; } /* ============================================= 共通: CRO要素スタイル（JS動的注入される要素） PC/SP両方で使われるため、グローバルに定義 ============================================= */ /* --- 信頼バッジ --- */ #cro-01-trust-badges { margin: 12px 0 8px !important; padding: 0 !important; } #cro-01-trust-badges .cro-tb-list { display: flex !important; flex-direction: row !important; gap: 8px !important; } #cro-01-trust-badges .cro-tb-item { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; color: #444 !important; line-height: 1.3 !important; font-weight: 500 !important; } #cro-01-trust-badges .cro-tb-item.cro-tb-points { color: #996515 !important; font-weight: 600 !important; } /* Points badge inline with selling_price */ .cro-points-inline { display: inline-flex !important; align-items: center !important; gap: 6px !important; font-size: 12px !important; font-weight: 600 !important; color: #996515 !important; font-family: 'Noto Sans JP', sans-serif !important; margin-top: 4px !important; line-height: 1.3 !important; } .cro-points-inline .cro-tb-icon { width: 22px !important; height: 22px !important; border-radius: 50% !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } #cro-01-trust-badges .cro-tb-icon { width: 26px !important; height: 26px !important; border-radius: 50% !important; background: #f1f5f9 !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } /* --- 会員限定カード --- */ #cro-member-card { background: #faf6ee !important; border: none !important; border-radius: 12px !important; padding: 16px 14px !important; margin: 12px 0 !important; } #cro-member-card .cro-mc-top { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 6px !important; } #cro-member-card .cro-mc-label { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: #b8860b !important; color: #fff !important; font-size: 11px !important; font-weight: 700 !important; padding: 4px 10px !important; border-radius: 20px !important; } #cro-member-card .cro-mc-badge { display: inline-flex !important; align-items: baseline !important; gap: 2px !important; } #cro-member-card .cro-mc-pct { font-size: 32px !important; font-weight: 900 !important; color: #b8860b !important; line-height: 1 !important; } #cro-member-card .cro-mc-off { font-size: 14px !important; font-weight: 800 !important; color: #b8860b !important; } #cro-member-card .cro-mc-price { font-size: 26px !important; font-weight: 900 !important; color: #111 !important; margin: 0 !important; letter-spacing: -0.5px !important; } #cro-member-card .cro-mc-price span { font-size: 10px !important; color: #666 !important; font-weight: 400 !important; margin-left: 2px !important; } #cro-member-card .cro-mc-save { font-size: 11px !important; color: #b8860b !important; font-weight: 700 !important; margin: 4px 0 0 !important; } #cro-member-card .cro-mc-note { font-size: 10px !important; color: #78716c !important; margin: 6px 0 0 !important; line-height: 1.4 !important; } /* --- CTA: 黒ベース・4px角丸 --- */ .cro-cta-row { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 14px 0 6px !important; } .cro-cta-row .cro-reserve-btn { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; background: transparent !important; border: 1.5px solid #1a1a1a !important; border-radius: 4px !important; color: #1a1a1a !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; padding: 0 14px !important; white-space: nowrap !important; box-sizing: border-box !important; min-height: 52px !important; } .cro-cta-row .cro-cart-wrap { flex: 1 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .cro-cta-row .cro-native-cart-btn { width: 100% !important; min-height: 52px !important; border: none !important; background: #1a1a1a !important; color: #fff !important; font-size: 15px !important; font-weight: 700 !important; border-radius: 4px !important; cursor: pointer !important; letter-spacing: 0.5px !important; box-shadow: none !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; } .cro-cta-row input[type="image"] { display: none !important; } .cro-cta-row #cartButton { display: contents !important; } .cro-store-loan-badge { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; align-self: flex-start !important; margin-top: 6px !important; padding: 6px 10px !important; border: 1px solid #d9dde5 !important; border-radius: 6px !important; background: #f7f8fa !important; color: #4b5563 !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.35 !important; white-space: nowrap !important; box-sizing: border-box !important; } .cro-store-loan-badge > svg { width: 14px !important; height: 14px !important; stroke-width: 1.7 !important; } .cartArea { display: none !important; } .reserveArea { display: none !important; } .paymentArea { display: none !important; } /* --- Loan-Price --- */ #Loan-Price { text-align: center !important; margin: 4px 0 !important; font-size: 12px !important; color: #999 !important; padding: 0 !important; line-height: 1.8 !important; } #Loan-Price .cro-loan-amount { display: inline-flex !important; align-items: center !important; gap: 4px !important; background: #1a1a1a !important; color: #fff !important; font-size: 15px !important; font-weight: 800 !important; padding: 6px 14px !important; border-radius: 4px !important; margin: 0 4px !important; letter-spacing: 0.3px !important; } /* --- ローンティーザー --- */ #cro-07-loan-teaser { background: #fafafa !important; border: 1px solid #e5e7eb !important; border-radius: 4px !important; padding: 10px 14px !important; margin: 10px 0 !important; text-align: center !important; cursor: pointer !important; } #cro-07-loan-teaser .cro-t-line1 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; font-size: 12px !important; color: #1a1a1a !important; font-weight: 700 !important; margin-bottom: 2px !important; } #cro-07-loan-teaser .cro-t-line2 { display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; font-size: 10px !important; color: #888 !important; font-weight: 500 !important; } /* --- 決済手段テキスト / マイクロコピー --- */ #cro-payment-text { text-align: center !important; margin: 4px 0 !important; font-size: 10px !important; color: #999 !important; line-height: 1.6 !important; } #cro-cart-microcopy { text-align: center !important; margin: 8px 0 4px !important; } #cro-cart-microcopy p { font-size: 11px !important; color: #666 !important; margin: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; flex-wrap: wrap !important; font-weight: 500 !important; } .cro-new-item .Selling-Price_inner { padding: 16px 0 12px 0 !important; } /* --- Currency popup --- */ #open-currency-popup { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-size: 11px !important; margin: 6px 0 !important; padding: 4px 10px !important; border: 1px solid #d1d5db !important; border-radius: 4px !important; background: #f9fafb !important; color: #374151 !important; text-decoration: none !important; cursor: pointer !important; line-height: 1 !important; } #open-currency-popup .cro-globe-icon { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } .currency-popup-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; z-index: 2147483647 !important; background: rgba(0,0,0,0.5) !important; } .currency-popup-content { position: relative !important; z-index: 2147483647 !important; background: #fff !important; max-height: 85vh !important; overflow-y: auto !important; padding: 16px !important; padding-bottom: 20px !important; box-sizing: border-box !important; } .currency-popup-content .country_rate_content h2 { font-size: 16px !important; font-weight: 700 !important; margin: 0 0 12px !important; color: #111 !important; } .currency-popup-content .country_rate_content h2 small { font-size: 11px !important; color: #888 !important; font-weight: 400 !important; } .currency-popup-content ul.cots { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 4px 16px !important; padding: 0 !important; margin: 0 0 8px !important; list-style: none !important; } .currency-popup-content ul.cots li.c { display: flex !important; align-items: center !important; gap: 6px !important; font-size: 13px !important; padding: 5px 4px !important; min-width: 0 !important; border-bottom: 1px solid #f3f4f6 !important; } .currency-popup-content ul.cots li.c .img { flex-shrink: 0 !important; width: 22px !important; display: flex !important; align-items: center !important; } .currency-popup-content ul.cots li.c .img img { width: 22px !important; height: 15px !important; object-fit: cover !important; border-radius: 2px !important; border: 1px solid #e5e7eb !important; } .currency-popup-content ul.cots li.c .rate { font-size: 12px !important; font-weight: 500 !important; color: #111 !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; } .currency-popup-content .des { font-size: 10px !important; color: #999 !important; line-height: 1.4 !important; margin-top: 8px !important; } .currency-popup-content .popup-close { position: absolute !important; top: 8px !important; right: 12px !important; font-size: 24px !important; cursor: pointer !important; color: #999 !important; z-index: 10 !important; } .jp-currency-link::before { display: none !important; } /* --- Currency conversion: overseas IP direct-insert version (.country_rate) --- */ /* SS's prod-kawase-rate-pc.js inserts this div after .priceArea-bottom for overseas IP visitors. */ /* Premium UI: GINZA RASIN brand aesthetic (Jost numbers, gold accent, warm card) */ .country_rate:not(.popup-mode) { background: #faf9f7 !important; border: 1px solid #e8e5e0 !important; border-radius: 8px !important; padding: 20px 24px !important; margin: 16px 0 !important; box-sizing: border-box !important; max-width: 100% !important; overflow: hidden !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; } .country_rate:not(.popup-mode) .country_rate_content h2 { font-family: 'Jost', 'Montserrat', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; margin: 0 0 14px !important; padding-bottom: 10px !important; border-bottom: 1px solid #e8e5e0 !important; color: #8B6F38 !important; } .country_rate:not(.popup-mode) .country_rate_content h2 small { font-size: 10px !important; color: #aaa !important; font-weight: 400 !important; letter-spacing: 0.04em !important; text-transform: none !important; } .country_rate:not(.popup-mode) ul.cots { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 24px !important; padding: 0 !important; margin: 0 0 8px !important; list-style: none !important; } .country_rate:not(.popup-mode) ul.cots li.c { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 13px !important; padding: 7px 4px !important; min-width: 0 !important; border-bottom: 1px solid #f0ede8 !important; width: auto !important; margin: 0 !important; float: none !important; font-family: 'Noto Sans JP', sans-serif !important; } .country_rate:not(.popup-mode) ul.cots li.c .img { flex-shrink: 0 !important; width: 24px !important; display: flex !important; align-items: center !important; } .country_rate:not(.popup-mode) ul.cots li.c .img img { width: 24px !important; height: 16px !important; object-fit: cover !important; border-radius: 2px !important; border: 1px solid #e8e5e0 !important; box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important; } .country_rate:not(.popup-mode) ul.cots li.c .rate { font-family: 'Jost', 'Montserrat', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #1A1A1A !important; white-space: nowrap !important; font-variant-numeric: tabular-nums !important; letter-spacing: 0.02em !important; } .country_rate:not(.popup-mode) .more-currencies-wrapper { display: none !important; margin: 0 !important; padding: 0 !important; } .country_rate:not(.popup-mode) .more-currencies-wrapper.is-expanded { display: block !important; } .country_rate:not(.popup-mode) .des { font-size: 10px !important; color: #aaa !important; line-height: 1.5 !important; margin-top: 10px !important; font-family: 'Noto Sans JP', sans-serif !important; } .country_rate:not(.popup-mode) .timestamp.des { display: block !important; margin-top: 4px !important; color: #bbb !important; } .country_rate:not(.popup-mode) .btn-toggle-currency { display: inline-flex !important; align-items: center !important; gap: 4px !important; font-family: 'Noto Sans JP', sans-serif !important; font-size: 11px !important; font-weight: 500 !important; margin: 8px 0 4px !important; padding: 5px 14px !important; border: 1px solid #d4cfc8 !important; border-radius: 4px !important; background: #fff !important; color: #666 !important; cursor: pointer !important; line-height: 1 !important; letter-spacing: 0.02em !important; transition: background 0.15s, color 0.15s, border-color 0.15s !important; } .country_rate:not(.popup-mode) .btn-toggle-currency:hover { background: #f5f3f0 !important; color: #8B6F38 !important; border-color: #c4b99a !important; } .country_rate:not(.popup-mode) .btn-toggle-currency svg { vertical-align: middle !important; flex-shrink: 0 !important; } /* Japan IP collapsed state: show only toggle button, hide contents */ .country_rate:not(.popup-mode) .btn-toggle-currency.is-hidden { display: none !important; } .country_rate.country_rate--collapsed:not(.popup-mode) .country_rate_content h2, .country_rate.country_rate--collapsed:not(.popup-mode) ul.cots, .country_rate.country_rate--collapsed:not(.popup-mode) .more-currencies-wrapper, .country_rate.country_rate--collapsed:not(.popup-mode) .des, .country_rate.country_rate--collapsed:not(.popup-mode) .timestamp.des { display: none !important; } .country_rate.country_rate--collapsed:not(.popup-mode) { padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } .country_rate.country_rate--collapsed:not(.popup-mode) .btn-toggle-currency { margin: 12px 0 !important; padding: 8px 16px !important; font-size: 12px !important; border: 1px solid #e8e5e0 !important; border-radius: 8px !important; background: #faf9f7 !important; color: #8B6F38 !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; width: 100% !important; justify-content: center !important; box-sizing: border-box !important; } .country_rate.country_rate--collapsed:not(.popup-mode) .btn-toggle-currency:hover { background: #f5f3f0 !important; border-color: #c4b99a !important; } a.memberRegistration.sp_only { display: none !important; } /* --- 買取参考価格カード: Premium UI --- */ /* prod-kawase-rate-pc.js or SS native inserts .rePurchasePriceArea after member card */ /* Design ref: kaitori-ginza.com/teigaku5/ — clean, minimal, trust-focused */ .rePurchasePriceArea { margin: 12px 0 !important; padding: 0 !important; border: none !important; background: none !important; box-shadow: none !important; } .rePurchasePriceArea .rePurchaseLink { display: flex !important; align-items: center !important; gap: 14px !important; padding: 14px 20px !important; background: #faf9f7 !important; border: 1px solid #e8e5e0 !important; border-radius: 8px !important; text-decoration: none !important; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important; box-shadow: 0 1px 4px rgba(0,0,0,0.04) !important; } .rePurchasePriceArea .rePurchaseLink:hover { background: #f5f3f0 !important; border-color: #c4b99a !important; box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; } .rePurchasePriceArea .rePurchaseIcon { flex-shrink: 0 !important; width: 36px !important; height: 36px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #fff !important; border-radius: 50% !important; border: 1px solid #e8e5e0 !important; } .rePurchasePriceArea .rePurchaseIcon img { width: 20px !important; height: 20px !important; object-fit: contain !important; } .rePurchasePriceArea .rePurchasePriceSet { font-family: 'Noto Sans JP', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; color: #1A1A1A !important; margin: 0 !important; letter-spacing: 0.02em !important; } .rePurchasePriceArea .rePurchasePriceSet .yen { font-family: 'Jost', 'Montserrat', sans-serif !important; font-weight: 500 !important; color: #8B6F38 !important; } .rePurchasePriceArea .rePurchasePriceSet .rePurchasePrice { font-family: 'Jost', 'Montserrat', sans-serif !important; font-size: 18px !important; font-weight: 600 !important; color: #8B6F38 !important; letter-spacing: 0.02em !important; font-variant-numeric: tabular-nums !important; } .rePurchasePriceArea .rePurchaseCTA { font-family: 'Noto Sans JP', sans-serif !important; font-size: 10px !important; margin: 3px 0 0 !important; font-weight: 500 !important; letter-spacing: 0.02em !important; display: inline-flex !important; align-items: center !important; gap: 4px !important; background: #8B6F38 !important; color: #fff !important; padding: 3px 10px !important; border-radius: 20px !important; } /* --- インラインCTA（メンバーカード / 買取価格カード下） --- */ .cro-inline-cta { display: flex !important; align-items: flex-start !important; gap: 8px !important; margin: 10px 0 6px !important; flex-wrap: nowrap !important; } .cro-inline-cta.is-unavailable { align-items: stretch !important; flex-wrap: wrap !important; } .cro-inline-cta .cro-ic-cart-stack { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; } .cro-inline-cta .cro-ic-cart { width: 100% !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 12px 12px !important; background: #1a1a1a !important; color: #fff !important; border: none !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 700 !important; font-family: 'Noto Sans JP', sans-serif !important; cursor: pointer !important; transition: background .15s !important; white-space: nowrap !important; } .cro-inline-cta .cro-ic-cart:hover { background: #333 !important; } .cro-inline-cta .cro-ic-reserve { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; padding: 8px 12px !important; background: transparent !important; color: #1a1a1a !important; border: 1.5px solid #d4cfc8 !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; font-family: 'Noto Sans JP', sans-serif !important; text-decoration: none !important; cursor: pointer !important; transition: border-color .15s, background .15s !important; white-space: nowrap !important; } .cro-inline-cta .cro-ic-reserve:hover { background: #f5f3f0 !important; border-color: #b8b3a9 !important; } .cro-inline-cta .cro-ic-heart { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; overflow: hidden !important; background: #fff !important; border: 1px solid #d8d8d8 !important; border-radius: 50% !important; cursor: pointer !important; transition: border-color .15s, background-color .15s !important; padding: 0 !important; line-height: 1 !important; } .cro-inline-cta .cro-ic-heart svg { width: 20px !important; height: 20px !important; } .cro-inline-cta .cro-ic-heart:hover { border-color: #e11d48 !important; } .cro-inline-cta .cro-ic-heart.is-wished { border-color: #e11d48 !important; } /* ステータスバッジ（商談中/SOLD OUT） */ .cro-inline-cta .cro-ic-status { flex: 1 !important; text-align: center !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: 0.5px !important; padding: 10px 12px !important; background: #f0eeeb !important; color: #999 !important; border: none !important; border-radius: 6px !important; font-family: 'Noto Sans JP', sans-serif !important; cursor: default !important; user-select: none !important; } /* 関連商品への手動導線（RSN_EC-70） */ .cro-inline-cta .cro-ic-related { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 38px !important; padding: 8px 14px !important; background: #fff !important; color: #1B3A6B !important; border: 1.5px solid #1B3A6B !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 700 !important; font-family: 'Noto Sans JP', sans-serif !important; text-decoration: none !important; cursor: pointer !important; transition: background .15s, color .15s !important; white-space: nowrap !important; } .cro-inline-cta .cro-ic-related:hover { background: #f4f7fb !important; } /* 再入荷お知らせリンク */ .cro-inline-cta .cro-ic-restock { display: inline-flex !important; align-items: center !important; gap: 4px !important; padding: 8px 14px !important; background: #fef9e7 !important; color: #92400e !important; border: 1.5px solid #fbbf24 !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; font-family: 'Noto Sans JP', sans-serif !important; text-decoration: none !important; cursor: pointer !important; transition: background .15s !important; white-space: nowrap !important; } .cro-inline-cta .cro-ic-restock:hover { background: #fef3c7 !important; } /* --- コンディションモーダル --- */ #cro-04-modal-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; background: rgba(0,0,0,0.5) !important; z-index: 9999999 !important; display: none !important; align-items: center !important; justify-content: center !important; padding: 20px !important; box-sizing: border-box !important; } #cro-04-modal-overlay.active { display: flex !important; } #cro-04-modal-overlay .cro-modal { background: #fff !important; border-radius: 16px !important; padding: 20px !important; max-width: 340px !important; width: 100% !important; max-height: 80vh !important; overflow-y: auto !important; box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important; } #cro-04-modal-overlay .cro-modal-close { float: right !important; font-size: 20px !important; cursor: pointer !important; color: #999 !important; background: none !important; border: none !important; line-height: 1 !important; padding: 0 4px !important; } .cro-condition-card { margin: 6px 0 !important; padding: 8px 12px !important; background: #f8f9fa !important; border: none !important; border-radius: 8px !important; font-size: 12px !important; line-height: 1.5 !important; color: #333 !important; } .cro-condition-card strong { display: block !important; margin-bottom: 2px !important; } /* --- Condition rank: hidden until data review is complete (RSN_EC-130 #6) --- */ #cro-04-condition-card, .cro-condition-card, .cro-condition-link { display: none !important; } .cro-condition-link { display: inline-block !important; font-size: 11px !important; color: #555 !important; text-decoration: underline !important; cursor: pointer !important; margin-top: 2px !important; } /* ============================================================= 共通: PC画像ギャラリー（jQuery UI Dialog）z-index修正 + ライトUI ShopServeネイティブの #dialog は jQuery UI Dialog (modal:true) で実装。 デフォルト z-index ≈ 100 → CROの #footer_float (z-index:9999) に隠れるため 最大値で強制的に最前面に持ってくる。 ※ jQuery UI の内部レイアウト（float, padding等）には干渉しない ============================================================= */ /* --- z-index修正: ダイアログ本体 + オーバーレイ --- */ .ui-widget-overlay { z-index: 2147483646 !important; background: rgba(0,0,0,0.55) !important; opacity: 1 !important; } .ui-dialog { z-index: 2147483647 !important; background: #fff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; box-shadow: 0 8px 40px rgba(0,0,0,0.25) !important; } /* --- タイトルバー --- */ .ui-dialog .ui-dialog-titlebar { background: #f8f8f8 !important; border-bottom: 1px solid #e8e8e8 !important; border-radius: 8px 8px 0 0 !important; padding: 10px 16px !important; } .ui-dialog .ui-dialog-titlebar .ui-dialog-title { color: #333 !important; font-family: 'Noto Sans JP', sans-serif !important; font-size: 13px !important; font-weight: 500 !important; } /* --- 閉じるボタン --- */ .ui-dialog .ui-dialog-titlebar-close { position: absolute !important; top: 50% !important; right: 10px !important; margin-top: -14px !important; width: 28px !important; height: 28px !important; background: #eee !important; border: 1px solid #ccc !important; border-radius: 50% !important; cursor: pointer !important; padding: 0 !important; overflow: hidden !important; } .ui-dialog .ui-dialog-titlebar-close:hover { background: #ddd !important; } /* 閉じるボタン内「close」テキスト非表示 */ .ui-dialog .ui-dialog-titlebar-close .ui-button-text { display: none !important; } .ui-dialog .ui-dialog-titlebar-close .ui-icon { background-image: none !important; text-indent: 0 !important; margin: 0 !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .ui-dialog .ui-dialog-titlebar-close .ui-icon::before { content: '' !important; display: block !important; width: 14px !important; height: 14px !important; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") center/contain no-repeat !important; } /* --- コンテンツエリア（jQuery UIレイアウトを尊重） --- */ .ui-dialog .ui-dialog-content { background: #fff !important; } /* --- サムネイルエリア: ボーダー水色→グレー + 中央寄せ + サイズ拡大 --- */ .ui-dialog .fl_thumbnail, .ui-widget-content .fl_thumbnail { background: #f9f9f9 !important; border: 1px solid #ddd !important; border-top: none !important; border-bottom: none !important; border-right: none !important; border-left: 1px solid #ddd !important; border-color: #ddd !important; display: flex !important; flex-direction: column !important; align-items: center !important; padding: 8px 10px !important; gap: 6px !important; overflow-y: auto !important; } .ui-dialog .fl_t_item { cursor: pointer !important; border: 2px solid transparent !important; border-radius: 4px !important; overflow: hidden !important; transition: border-color 0.15s ease !important; width: 72px !important; height: 72px !important; flex-shrink: 0 !important; } .ui-dialog .fl_t_item .fl_t_img { width: 100% !important; height: 100% !important; background-size: cover !important; } .ui-dialog .fl_t_item:hover { border-color: #999 !important; } .ui-dialog .fl_t_item.fl_img_selected { border-color: #333 !important; } /* --- メイン画像エリア --- */ .ui-dialog .fl_main { background: #fff !important; } /* --- 前後ナビゲーション矢印: PNG→SVGシェブロンに置換 --- */ /* #thum_prev, #thum_next は IMG 要素のため、 object-position で元画像を画面外に飛ばし overflow:hidden で消す。 SVG は background-image で描画する */ .ui-dialog #thum_prev, .ui-dialog #thum_next { width: 36px !important; height: 36px !important; background-color: rgba(255,255,255,0.9) !important; border: 1px solid #ddd !important; border-radius: 50% !important; cursor: pointer !important; transition: background-color 0.15s ease, box-shadow 0.15s ease !important; box-shadow: 0 1px 4px rgba(0,0,0,0.1) !important; /* IMG元画像を非表示 */ object-position: -9999px -9999px !important; overflow: hidden !important; padding: 0 !important; } .ui-dialog #thum_prev:hover, .ui-dialog #thum_next:hover { background-color: #fff !important; box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important; } /* 左矢印シェブロン */ .ui-dialog #thum_prev { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18l-6-6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; } /* 右矢印シェブロン */ .ui-dialog #thum_next { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 18px 18px !important; } /* --- 共通: 非表示要素 --- */ .earnPoints { display: none !important; } .priceArea-bottom { display: none !important; } table.price tr.rg_price { display: none !important; } #pi_cart table.price, #pi_cart table.price > tbody, #pi_cart table.price tr.price { display: block !important; width: 100% !important; box-sizing: border-box !important; } #pi_cart table.price tr.price th { display: none !important; } #pi_cart table.price tr.price td { width: 100% !important; box-sizing: border-box !important; } /* --- 共通: 追従バー CRO注入要素 --- */ .cro-float-cart-btn { flex: 1 !important; background: #1a1a1a !important; color: #fff !important; font-weight: 700 !important; font-size: 14px !important; border-radius: 4px !important; min-height: 48px !important; box-shadow: none !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; position: relative !important; z-index: 2 !important; letter-spacing: 0.5px !important; } .cro-float-reserve { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; list-style: none !important; background: transparent !important; border: 1.5px solid #1a1a1a !important; border-radius: 4px !important; padding: 0 14px !important; min-height: 48px !important; font-size: 12px !important; font-weight: 600 !important; color: #1a1a1a !important; text-decoration: none !important; white-space: nowrap !important; } /* --- 共通: taxin（税込）上付き文字修正 --- */ /* SSネイティブ item-page.css が position:absolute + font-size:18px !important で上書きするため、 メディアクエリ外で高詳細度セレクタを使い全プロパティを強制オーバーライド */ body section#itemDetail-wrap table.price td .selling_price+span.taxin, body #pi_cart table.price td span.taxin, span.taxin { font-size: 11px !important; color: #999 !important; font-weight: normal !important; position: static !important; display: inline !important; vertical-align: baseline !important; margin-left: 2px !important; } /* ============================================================= SP専用（≤768px）: モバイルファースト CRO UI ============================================================= */ @media screen and (max-width: 768px) { /* --- パララックス風: JS position:fixed 方式の下準備 --- */ /* overflow解除不要。JSで .itemThumb-wrap を fixed にし、商品情報以降がスライドアップ */ #wrapper { background: #fff !important; /* fixed画像がwrapper下部で透けないようにする */ } #contents section { padding-bottom: 0 !important; /* ShopServeデフォルトの5pxを打ち消し。固定ギャラリーが隙間から見えるのを防止 */ } .guideArea__ttlAndLink { background: #fff !important; padding-bottom: 4em !important; } header, #header_new_20250505 { position: relative !important; z-index: 100 !important; } /* --- ナビ/検索バー非表示 --- */ #header_new_20250505 .sp_only nav { display: none !important; } #header_new_20250505 .sp_only .gsearch-header { display: none !important; } .gsearch-header.floating:not(#cro-nav-panel .gsearch-header) { position: static !important; top: auto !important; } #header_new_20250505 .sp_only .gsearch-header.floating { position: static !important; } /* --- パンくず: 1行横スクロール --- */ #bread-crumb { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; white-space: nowrap !important; background: #fafafa !important; padding: 5px 10px !important; margin: 0 !important; border-bottom: 1px solid #eee !important; align-items: center !important; position: relative !important; z-index: 20 !important; } #bread-crumb::-webkit-scrollbar { display: none !important; } #bread-crumb > nav { display: contents !important; } #bread-crumb > nav > ol { display: contents !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #bread-crumb > nav > ol > li { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 10px !important; color: #999 !important; line-height: 1.3 !important; } #bread-crumb > nav > ol > li a { color: #555 !important; text-decoration: underline !important; text-underline-offset: 2px !important; text-decoration-color: #ccc !important; font-size: 10px !important; } /* --- メイン画像: JSで position:fixed 制御 --- */ #cro-parallax-spacer { display: block !important; width: 100% !important; height: 0 !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; background: transparent !important; } body #itemDetail-cont .itemThumb-wrap .itemThumb-main, .itemThumb-main { position: relative !important; z-index: 1 !important; background: #f5f5f5 !important; width: 100% !important; max-width: 100vw !important; min-height: 0 !important; margin: 0 !important; overflow: hidden !important; box-sizing: border-box !important; transform: translateZ(0) !important; } body #itemDetail-cont .itemThumb-wrap .itemThumb-main > a, .itemThumb-main > a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } body #itemDetail-cont .itemThumb-wrap .itemThumb-main .mainImg, .itemThumb-main .mainImg { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin: 0 !important; object-fit: contain !important; } body #itemDetail-cont .itemThumb-wrap .itemThumb-main.cro-parallax-fixed, .itemThumb-main.cro-parallax-fixed { position: fixed !important; top: 0 !important; z-index: 1 !important; margin: 0 !important; box-shadow: none !important; } body #itemDetail-cont .itemThumb-wrap .itemThumb-main.cro-parallax-fixed .mainImg, .itemThumb-main.cro-parallax-fixed .mainImg { width: 100% !important; height: 100% !important; object-fit: contain !important; } /* --- TaxFree / taxin --- */ .taxFreeSet { font-size: 13px !important; line-height: 1.4 !important; margin: 4px 0 !important; padding: 6px 10px !important; background: #f0fdf4 !important; border: 1px solid #bbf7d0 !important; border-radius: 6px !important; } .taxFreeSet-ttl { font-size: 12px !important; font-weight: 700 !important; color: #16a34a !important; margin: 0 0 2px !important; letter-spacing: 0.5px !important; } .taxFreePrice { font-size: 16px !important; font-weight: 800 !important; color: #15803d !important; margin: 0 !important; } .taxFreePrice span { font-size: 10px !important; } span.taxin { font-size: 10px !important; } /* --- サムネイル: 横スクロール（パララックス風ではrelative） --- */ .itemThumb-wrap { float: none !important; display: block !important; width: 100% !important; max-width: 100vw !important; overflow-x: clip !important; overflow-y: visible !important; position: relative !important; z-index: 2 !important; background: transparent !important; margin: 0 !important; box-sizing: border-box !important; } body #itemDetail-cont .itemThumb-wrap.cro-parallax-fixed, .itemThumb-wrap.cro-parallax-fixed { position: fixed !important; z-index: 1 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; transform: translateZ(0) !important; will-change: transform !important; } body #itemDetail-cont .itemThumb-wrap.cro-parallax-fixed .itemThumb-main, .itemThumb-wrap.cro-parallax-fixed .itemThumb-main { position: relative !important; z-index: 1 !important; } body #itemDetail-cont .itemThumb-wrap.cro-parallax-fixed .itemThumb, .itemThumb-wrap.cro-parallax-fixed .itemThumb { position: relative !important; z-index: 1 !important; } body #itemDetail-cont .itemThumb-main + .itemThumb, .itemThumb-main + .itemThumb { margin-top: 0 !important; } .itemThumb { width: 100% !important; max-width: 100vw !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; position: relative !important; z-index: 2 !important; background: #fff !important; box-shadow: 0 -1px 0 rgba(0,0,0,0.04) !important; } .itemThumb::-webkit-scrollbar { display: none !important; } .itemThumb ul { display: flex !important; flex-wrap: nowrap !important; gap: 4px !important; padding: 6px 8px !important; margin: 0 !important; width: max-content !important; } .itemThumb ul li { flex-shrink: 0 !important; width: 56px !important; height: 56px !important; list-style: none !important; border: 1px solid #e0e0e0 !important; border-radius: 4px !important; overflow: hidden !important; } .itemThumb ul li img { width: 100% !important; height: 100% !important; object-fit: cover !important; } /* --- pi_cart: SP全幅カードオーバーレイ（パララックス風スライドアップ） --- */ .shopping_form { max-width: 100vw !important; overflow: visible !important; box-sizing: border-box !important; position: relative !important; z-index: 2 !important; } #pi_cart.itemOutline { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; overflow: visible !important; } #itemDetail-cont .itemOutline { margin: 0 !important; padding: 16px 14px 0 !important; } #pi_cart.itemOutline { background: #fff !important; border-radius: 20px 20px 0 0 !important; clear: both !important; float: none !important; display: block !important; margin: 0 !important; padding-top: 24px !important; position: relative !important; z-index: 10 !important; box-shadow: 0 -6px 24px rgba(0,0,0,0.08) !important; } body:not(.cro-loaded) #pi_cart:not(:has(> .ttl_icon))::before { content: '' !important; display: block !important; width: 140px !important; height: 26px !important; margin: 0 0 5px !important; background: linear-gradient(#ebebeb, #ebebeb) 0 5px / 140px 16px no-repeat !important; border-radius: 3px !important; } body:not(.cro-loaded) #pi_cart > .ttl_icon { color: transparent !important; overflow: hidden !important; background: linear-gradient(#ebebeb, #ebebeb) 0 5px / 140px 16px no-repeat !important; border-radius: 3px !important; } body:not(.cro-loaded) #pi_cart > .ttl_icon * { visibility: hidden !important; } body:not(.cro-loaded) #pi_cart > h1 { color: transparent !important; text-shadow: none !important; background: linear-gradient(#e8e8e8, #e8e8e8) 0 4px / 330px 20px no-repeat, linear-gradient(#e8e8e8, #e8e8e8) 0 38px / 260px 20px no-repeat !important; border-radius: 4px !important; } body:not(.cro-loaded) #pi_cart:not(:has(> .badgeArea)) > h1::after { content: '' !important; display: block !important; height: 33px !important; margin-top: 10px !important; background: linear-gradient(#e8f5e9, #e8f5e9) 0 2px / 92px 24px no-repeat, linear-gradient(#e8f5e9, #e8f5e9) 102px 2px / 72px 24px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 184px 2px / 78px 24px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 272px 2px / 90px 24px no-repeat !important; border-radius: 12px !important; } body:not(.cro-loaded) #pi_cart > .badgeArea { overflow: hidden !important; background: linear-gradient(#e8f5e9, #e8f5e9) 0 2px / 92px 24px no-repeat, linear-gradient(#e8f5e9, #e8f5e9) 102px 2px / 72px 24px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 184px 2px / 78px 24px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 272px 2px / 90px 24px no-repeat !important; border-radius: 12px !important; } body:not(.cro-loaded) #pi_cart > .badgeArea > * { visibility: hidden !important; } body:not(.cro-loaded) #pi_cart.itemOutline { min-height: 1020px !important; } #pi_cart.itemOutline::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% - 1px) !important; height: 200vh !important; min-height: 1600px !important; background: #fff !important; z-index: -1 !important; pointer-events: none !important; } body #main-column > #itemDetail-wrap ~ section, body #main-column > #itemDetail-wrap ~ div:not(#footer_float):not(#product-main-float), body .subDesc1, body .subDesc2 { position: relative !important; z-index: 10 !important; background: #fff !important; box-shadow: 0 0 0 100vmax #fff !important; clip-path: inset(0 -100vmax) !important; isolation: isolate !important; } /* subDesc1_bottom: clip-pathの下辺を広げてfooterまでの隙間をbox-shadowの白で埋める */ body #main-column > #itemDetail-wrap ~ section.subDesc1_bottom { clip-path: inset(0 -100vmax -200px) !important; } /* footerは#wrapperの外（bodyの直接子）— 元デザインの最暗色で隙間を埋める */ body > footer, #footer_new_20250505 { position: relative !important; z-index: 10 !important; background-color: #0a0a0a !important; /* rasin-footer gradient の開始色 */ } footer.rasin-footer { position: relative !important; z-index: 10 !important; margin-top: 0 !important; /* margin部分は背景が塗られないため0に */ } #pi_cart h1 { font-size: 15px !important; font-weight: 800 !important; color: #111 !important; line-height: 1.5 !important; margin: 0 0 6px !important; letter-spacing: -0.3px !important; } /* --- badgeArea: 横スクロール --- */ .badgeArea { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; gap: 5px !important; margin: 2px 0 !important; padding: 2px 0 !important; } .badgeArea::-webkit-scrollbar { display: none !important; } .badgeArea li { flex-shrink: 0 !important; white-space: nowrap !important; font-size: 10px !important; padding: 3px 8px !important; border-radius: 20px !important; line-height: 1.3 !important; font-weight: 600 !important; } .badgeArea .badge--black { display: none !important; } .badgeArea .badge--gray { display: none !important; } .badgeArea .badge--green { display: none !important; } /* --- 価格テーブル --- */ table.price { max-width: 100% !important; width: 100% !important; border-collapse: collapse !important; margin: 16px 0 10px !important; padding: 4px 0 !important; } body:not(.cro-loaded) #pi_cart table.price { min-height: 458px !important; background: linear-gradient(#e8e8e8, #e8e8e8) 0 6px / 220px 34px no-repeat, linear-gradient(#dcfce7, #dcfce7) 0 54px / 145px 40px no-repeat, linear-gradient(#fef3c7, #fef3c7) 0 104px / 220px 16px no-repeat, linear-gradient(#f5f5f5, #f5f5f5) 0 132px / 100% 110px no-repeat, linear-gradient(#faf6ee, #faf6ee) 0 258px / 100% 145px no-repeat, linear-gradient(#e0e0e0, #e0e0e0) 0 418px / 100% 46px no-repeat !important; } body:not(.cro-loaded) #pi_cart table.price tr.price td > * { visibility: hidden !important; } /* Keep TAX FREE aligned with the rest of the price skeleton on SP too. */ body:not(.cro-loaded) .taxFreeSet { visibility: hidden !important; } table.price tr.price td { padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; width: 100% !important; } .cro-price-main-row { display: inline-flex !important; align-items: baseline !important; gap: 4px !important; } body #pi_cart .selling_price { font-size: clamp(22px,6.5vw,32px) !important; font-weight: 900 !important; color: #111 !important; letter-spacing: -0.5px !important; font-variant-numeric: tabular-nums !important; display: inline !important; white-space: nowrap !important; } body section#itemDetail-wrap table.price td .selling_price+span.taxin, #pi_cart table.price td span.taxin, table.price span.taxin { font-size: 10px !important; /* SP: smaller relative to clamp(22px,6.5vw,32px) selling price */ } table.price .taxFreeSet { display: flex !important; align-items: center !important; gap: 6px !important; background: #f0fdf4 !important; border: 1.5px solid #86efac !important; border-radius: 6px !important; padding: 4px 10px !important; margin: 4px 0 0 !important; vertical-align: middle !important; min-width: 0 !important; width: fit-content !important; } table.price .taxFreeSet-ttl { font-size: 10px !important; font-weight: 700 !important; color: #16a34a !important; margin: 0 !important; letter-spacing: 0.3px !important; } table.price .taxFreePrice { font-size: clamp(13px,3.5vw,16px) !important; color: #15803d !important; font-weight: 800 !important; margin: 0 !important; white-space: nowrap !important; } table.price .taxFreePrice span { font-size: 9px !important; } /* SP: price-area reading order. */ table.price tr.price td > .cro-price-main-row { order: 1 !important; } table.price tr.price td > .taxFreeSet { order: 2 !important; } table.price tr.price td > .cro-points-inline { order: 3 !important; } table.price tr.price td > #cro-01-trust-badges { order: 4 !important; width: 100% !important; box-sizing: border-box !important; } table.price tr.price td > #cro-member-card { order: 5 !important; width: 100% !important; box-sizing: border-box !important; } table.price tr.price td > .cro-inline-cta { order: 6 !important; width: 100% !important; box-sizing: border-box !important; } /* SP: ポイントバッジ — 幅いっぱい1行表示 */ .cro-points-inline { display: flex !important; width: 100% !important; margin-top: 13px !important; font-size: 11px !important; align-items: center !important; } .cro-points-inline .cro-tb-icon { width: 18px !important; height: 18px !important; } /* SP: 信頼バッジ — 4項目を1行表示 */ #cro-01-trust-badges { margin: 13px 0 4px !important; } #cro-01-trust-badges .cro-tb-list { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; justify-content: space-between !important; gap: 8px !important; } #cro-01-trust-badges .cro-tb-item { width: auto !important; min-width: 0 !important; flex: 0 1 auto !important; white-space: nowrap !important; font-size: 9px !important; gap: 2px !important; line-height: 1.3 !important; } #cro-01-trust-badges .cro-tb-icon { width: 14px !important; height: 14px !important; } /* SP: グレー情報エリアの横幅拡大・間隔調整 */ .informationArea--gray .informationArea_contact { width: 46% !important; } .informationArea_guide { width: 25% !important; } .informationArea_member { width: 25% !important; } /* SP: 真贋保証エリアの左右マージン調整 */ .warrantyArea { /* margin-left: 10px !important; */ /* margin-right: 10px !important; */ } .authenticityArea p { padding: .3em 1em 1em!important; } .authenticityArea h2 { padding: 0.2em 0 0 0.6em; } /* --- お気に入り: ハートSVG --- */ [class*="sps-wishArea"] { position: absolute !important; top: 12px !important; right: 12px !important; z-index: 20 !important; background: rgba(255,255,255,0.92) !important; border: 1px solid #e0e0e0 !important; border-radius: 50% !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; padding: 0 !important; margin: 0 !important; backdrop-filter: blur(4px) !important; -webkit-backdrop-filter: blur(4px) !important; } [class*="sps-wishArea"] a { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; } [class*="sps-wishArea"] img { display: none !important; } [class*="sps-wishArea"] .cro-heart-icon { display: flex !important; align-items: center !important; justify-content: center !important; } /* --- 追従バー --- */ #footer_float:has(.footer-float-right2:not(.js-dn)), #footer_float:has(.footer-float-right3:not(.js-dn)) { background: #000 !important; padding: 8px 12px !important; box-sizing: border-box !important; } #footer_float:has(.footer-float-right2:not(.js-dn)) > a.openbutton, #footer_float:has(.footer-float-right3:not(.js-dn)) > a.openbutton { display: none !important; } #footer_float_inner:has(.footer-float-right2:not(.js-dn)), #footer_float_inner:has(.footer-float-right3:not(.js-dn)) { display: flex !important; align-items: center !important; width: 100% !important; background: transparent !important; } #footer_float .footer_float_width { padding: 0 !important; box-sizing: border-box !important; width: 100% !important; } .footer_float_width:has(.footer-float-right2:not(.js-dn)) > :not(.footer-float-right2), .footer_float_width:has(.footer-float-right3:not(.js-dn)) > :not(.footer-float-right3) { display: none !important; } .footer_float_width:has(.footer-float-right2:not(.js-dn)), .footer_float_width:has(.footer-float-right3:not(.js-dn)) { display: flex !important; align-items: center !important; justify-content: center !important; } #footer_float .footer_float_result, .footer_float_result { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px 10px !important; padding: 8px 12px !important; margin: 0 !important; list-style: none !important; background: rgba(255,255,255,0.96) !important; border-top: none !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.06) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; border-radius: 0 !important; width: 100% !important; position: relative !important; } #footer_float:has(.cro-unavailable-float) { background: rgba(255,255,255,0.98) !important; padding: 8px 12px !important; box-shadow: 0 -4px 20px rgba(0,0,0,0.08) !important; } #footer_float:has(.footer-float-right2.cro-negotiating-float:not(.js-dn)) { background: #fff !important; box-shadow: 0 -4px 18px rgba(0,0,0,0.08) !important; } #footer_float_inner:has(.footer-float-right2.cro-negotiating-float:not(.js-dn)), .footer_float_width:has(.footer-float-right2.cro-negotiating-float:not(.js-dn)) { background: transparent !important; box-shadow: none !important; } .cro-unavailable-float { background: #fff !important; gap: 8px !important; min-height: 72px !important; } .cro-unavailable-float.cro-negotiating-float { gap: 0 !important; min-height: 44px !important; } .cro-unavail-top { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; } .cro-unavail-price { display: flex !important; align-items: baseline !important; gap: 4px !important; min-width: 0 !important; flex-wrap: wrap !important; } .cro-unavail-selling { font-family: 'Jost', 'Montserrat', sans-serif !important; font-size: 18px !important; font-weight: 800 !important; color: #111 !important; white-space: nowrap !important; } .cro-unavail-taxin, .cro-unavail-loan { font-size: 10px !important; color: #666 !important; white-space: nowrap !important; } .cro-unavail-loan b { color: #111 !important; font-weight: 700 !important; } .cro-unavail-heart { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; flex: 0 0 36px !important; border: 1.5px solid #e5e7eb !important; border-radius: 50% !important; background: #fff !important; padding: 0 !important; } .cro-unavail-status { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 36px !important; border: 1.5px solid #1B3A6B !important; border-radius: 8px !important; color: #1B3A6B !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: 0.08em !important; } .cro-negotiating-float .cro-unavail-status { min-height: 44px !important; border: none !important; } /* SP追従バー: 価格表示 */ .cro-sp-float-price { display: flex !important; align-items: baseline !important; gap: 4px !important; width: 100% !important; list-style: none !important; padding: 0 !important; margin: 0 !important; font-family: 'Noto Sans JP', sans-serif !important; } .cro-sp-float-selling { font-family: 'Jost', 'Montserrat', sans-serif !important; font-size: 18px !important; font-weight: 700 !important; color: #1A1A1A !important; letter-spacing: -0.5px !important; } .cro-sp-float-taxin { font-size: 10px !important; color: #888 !important; } .cro-sp-float-loan { font-size: 10px !important; color: #888 !important; margin-left: 6px !important; } .cro-sp-float-loan b { font-weight: 700 !important; color: #1A1A1A !important; font-family: 'Jost', 'Montserrat', sans-serif !important; } /* SP追従バー: ローン特典テキスト */ .cro-sp-float-benefit { display: block !important; width: 100% !important; list-style: none !important; padding: 0 !important; margin: 0 !important; font-size: 10px !important; color: #16a34a !important; font-weight: 600 !important; font-family: 'Noto Sans JP', sans-serif !important; line-height: 1.3 !important; } /* SP追従バー: ハートボタン */ .cro-sp-float-heart-wrap { list-style: none !important; padding: 0 !important; margin: 0 !important; position: absolute !important; top: 6px !important; right: 8px !important; z-index: 10 !important; } .cro-sp-float-heart { display: flex !important; align-items: center !important; justify-content: center !important; width: 36px !important; height: 36px !important; border: 1.5px solid #e0e0e0 !important; border-radius: 50% !important; background: #fff !important; cursor: pointer !important; padding: 0 !important; -webkit-appearance: none !important; transition: border-color 0.15s !important; box-shadow: 0 1px 4px rgba(0,0,0,0.08) !important; } .cro-sp-float-heart:active { border-color: #e11d48 !important; } li.footer-float-cart { flex: 1 !important; display: flex !important; align-items: center !important; padding: 0 !important; list-style: none !important; } #product-main-float .footer_float_result .footer-float-cart, li.footer-float-cart { background: transparent !important; } #product-main-float .footer_float_result .footer-float-cart::before, li.footer-float-cart::before { display: none !important; content: none !important; background: transparent !important; } li.footer-float-cart .cart_text, li.footer-float-cart input[type="submit"], li.footer-float-cart img, li.footer-float-cart > a { display: none !important; } #footer_float { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; box-sizing: border-box !important; transition: transform .35s cubic-bezier(.4,0,.2,1) !important; } #footer_float.cro-footer-closed { transform: translateY(calc(100% - 32px)) !important; } .footer_float_result { width: 100% !important; box-sizing: border-box !important; } #footer_float_inner, #footer_float_inner.toggle, #footer_float_inner.toggle.close { transition: none !important; transform: none !important; height: auto !important; max-height: none !important; width: 100% !important; opacity: 1 !important; overflow: visible !important; padding: 0 !important; background: #fff !important; /* Fix #7: prevent SS native rgba(0,0,0,0.9) black bg */ } a.openbutton.switch-btn.sp_only { font-size: 0 !important; line-height: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 32px !important; padding: 0 !important; background: #1a1a1a !important; border-radius: 0 !important; position: relative !important; z-index: 10 !important; margin: 0 !important; border: none !important; } #product-main-float .footer_float_result .footer-float-cart, #footer_float .footer_float_result .footer-float-cart { background: transparent !important; } #product-main-float .footer_float_result .footer-float-cart::before, #footer_float .footer_float_result .footer-float-cart::before { display: none !important; background: transparent !important; content: none !important; } /* SOLD OUT / 商談中 */ .footer-float-right2:not(.js-dn), .footer-float-right3:not(.js-dn) { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 16px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; flex: 1 !important; min-height: 48px !important; margin: 0 !important; } .footer-float-right2:not(.js-dn) { background: #fff !important; border: 1.5px solid #1B3A6B !important; margin: 8px 0 !important; } .footer-float-right3:not(.js-dn) { background: rgba(153,153,153,0.1) !important; border: 1.5px solid #999 !important; } .footer-float-right2:not(.js-dn) p, .footer-float-right3:not(.js-dn) p { display: block !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 1px !important; line-height: 1 !important; border: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; text-align: center !important; background: none !important; } .footer-float-right2:not(.js-dn) p { color: #1B3A6B !important; } .footer-float-right3:not(.js-dn) p { color: #999 !important; } /* SS\u30cd\u30a4\u30c6\u30a3\u30d6\u8ffd\u5f93\u8981\u7d20: CRO\u3068\u91cd\u8907\u3059\u308b\u305f\u3081\u975e\u8868\u793a */ .footer_float_inner1, .footer_float_inner2 { display: none !important; } } /* end SP */ /* ============================================================= PC専用（≥769px）: 2カラムレイアウト保護 + PC最適化 ============================================================= */ @media screen and (min-width: 769px) { /* PC: 2カラム幅を明示保護（item-page.css と同等） */ #itemDetail-cont { width: 1048px !important; } #itemDetail-cont .itemOutline { width: 520px !important; } /* --- PC: メイン画像 aspect-ratio 強制（CLS防止） --- ShopServe SSRは に width/height 属性を出力しない。 画像ロード前の高さ=0→ロード後500px+ へのリフローが巨大CLS。 aspect-ratio: 1/1 で正方形スペースを事前予約。 */ body #itemDetail-cont .itemThumb-main, .itemThumb-main { aspect-ratio: 1 / 1 !important; width: 100% !important; max-width: 500px !important; overflow: hidden !important; } body #itemDetail-cont .itemThumb-main .mainImg, .itemThumb-main .mainImg { aspect-ratio: 1 / 1 !important; width: 100% !important; height: auto !important; object-fit: contain !important; } /* --- PC: サムネイル行の高さ予約（CLS防止） --- サムネイル画像ロード前に行高=0→68pxへのシフトを防止 */ body #itemDetail-cont .itemThumb-main + .itemThumb, .itemThumb-main + .itemThumb { min-height: 68px !important; } /* PC: pi_cart はカード装飾なし */ #pi_cart.itemOutline { border-radius: 0 !important; box-shadow: none !important; background: transparent !important; } body:not(.cro-loaded) #pi_cart.itemOutline { min-height: 820px !important; } /* PC: h1は本番のサイズを尊重 */ #pi_cart h1 { font-size: 18px !important; font-weight: 700 !important; line-height: 1.6 !important; } /* PC: 独立ポイント行の下に信頼バッジ4項目を1行表示 */ #cro-01-trust-badges .cro-tb-list { display: grid !important; grid-template-columns: repeat(4, auto) !important; align-items: center !important; justify-content: space-between !important; gap: 4px !important; } #cro-01-trust-badges .cro-tb-item { min-width: 0 !important; width: auto !important; flex: 0 1 auto !important; gap: 4px !important; font-size: 12px !important; line-height: 1.3 !important; white-space: nowrap !important; } #cro-01-trust-badges .cro-tb-icon { width: 20px !important; height: 20px !important; } #cro-01-trust-badges .cro-tb-icon svg { width: 18px !important; height: 18px !important; } /* PC: コンディションモーダルをワイドに */ #cro-04-modal-overlay .cro-modal { max-width: 480px !important; } /* PC: badgeArea は折り返し表示 + 重複バッジ非表示（greenは残す） */ .badgeArea { flex-wrap: wrap !important; overflow-x: visible !important; } .badgeArea .badge--black { display: none !important; } .badgeArea .badge--gray { display: none !important; } /* PC: 価格は固定サイズ SSR初期から28px/900を無条件適用。Webフォントswap時のメトリクス計算基準を 安定化し、フォントサイズ変更→swap の二段階リフローを排除。 フォントスタックに 'Jost Fallback' を挿入し swap 時のメトリクス差を最小化。 ※ 以前は body.cro-layout-ready 条件だったが CLS 0.165 の主因がswapなので無条件化 */ #pi_cart .selling_price { font-size: 28px !important; font-weight: 900 !important; font-family: 'Jost', 'Jost Fallback', 'Montserrat', sans-serif !important; } /* PC: 価格エリア2カラム — 左(価格+ポイント) / 右(TAX FREE) ※ body.cro-layout-ready 条件: CRO JSが .cro-price-main-row 等の gridコンテナ子要素を注入した後にgridを有効化。 SSR初期描画の table-cell レイアウトを維持し、 grid変換による65px上方リフロー（CLS）を防止 */ table.price { width: 100% !important; } table.price tr.price { width: 100% !important; } body.cro-layout-ready table.price tr.price td { display: grid !important; grid-template-columns: 1fr auto !important; grid-template-rows: auto auto !important; align-items: start !important; gap: 0 !important; width: 100% !important; } /* 左上: 価格+税込 */ table.price tr.price td .cro-price-main-row { grid-column: 1 !important; grid-row: 1 !important; white-space: nowrap !important; } /* 左下: 信頼バッジ列がない場合だけ独立ポイント表示を配置 */ table.price tr.price td > .cro-points-inline { grid-column: 1 !important; grid-row: 2 !important; width: auto !important; margin-top: 4px !important; gap: 7px !important; font-size: 14px !important; line-height: 1.35 !important; white-space: nowrap !important; } table.price tr.price td > .cro-points-inline .cro-tb-icon { width: 26px !important; height: 26px !important; } table.price tr.price td > .cro-points-inline .cro-tb-icon svg { width: 16px !important; height: 16px !important; } /* 右: TAX FREE（1-2行をまたぐ・右端寄せ） */ table.price tr.price td .taxFreeSet { grid-column: 2 !important; grid-row: 1 / 3 !important; align-self: center !important; justify-self: end !important; margin: 0 !important; white-space: nowrap !important; } /* PC: TAX FREE enlarged */ .taxFreeSet { font-size: 14px !important; line-height: 1.4 !important; padding: 8px 12px !important; background: #f0fdf4 !important; border: 1.5px solid #86efac !important; border-radius: 6px !important; } .taxFreeSet-ttl { font-size: 13px !important; font-weight: 700 !important; color: #16a34a !important; margin: 0 0 2px !important; } .taxFreePrice { font-size: 18px !important; font-weight: 800 !important; color: #15803d !important; margin: 0 !important; white-space: nowrap !important; } .taxFreePrice span { font-size: 11px !important; } /* PC: price-area reading order. Member price belongs below the four trust merits. */ body.cro-layout-ready table.price tr.price td #cro-01-trust-badges { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; margin: 12px 0 0 !important; } body.cro-layout-ready table.price tr.price td #cro-member-card { grid-column: 1 / -1 !important; grid-row: 4 !important; width: 100% !important; max-width: none !important; margin: 12px 0 0 !important; } body.cro-layout-ready table.price tr.price td .cro-inline-cta { grid-column: 1 / -1 !important; grid-row: 5 !important; width: 100% !important; } /* PC: footer_float_inner background → 黒テーマ化 */ #footer_float_inner, #footer_float_inner.toggle, #footer_float_inner.toggle.close { background: rgba(255,255,255,0.97) !important; transition: none !important; transform: none !important; height: auto !important; max-height: none !important; opacity: 1 !important; overflow: visible !important; padding: 0 !important; width: 100% !important; } /* PC: footer_float → fixed追従 */ #footer_float { position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; z-index: 9999 !important; box-sizing: border-box !important; box-shadow: 0 -2px 12px rgba(0,0,0,0.08) !important; } /* PC: SSネイティブの商品名・画像テーブルを非表示 */ .footer_float_inner1, .footer_float_inner2 { display: none !important; } /* PC: footer_float_width レイアウト */ #footer_float .footer_float_width { padding: 0 !important; box-sizing: border-box !important; width: 100% !important; max-width: 1048px !important; margin: 0 auto !important; } /* PC: openbutton 非表示 */ a.openbutton.switch-btn.sp_only { display: none !important; } /* PC: taxin size relative to 28px selling price */ body section#itemDetail-wrap table.price td .selling_price+span.taxin, body #pi_cart table.price td span.taxin { font-size: 13px !important; } /* PC: 追従バー — SP用 footer_float_result を非表示 */ .footer_float_result { display: none !important; } /* PC: footer-float-right1 — 価格情報+CROボタンの親 */ .footer-float-right1 { display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 10px 24px !important; width: 100% !important; box-sizing: border-box !important; gap: 20px !important; } /* PC: 商談中/SOLD OUT */ .footer-float-right2:not(.js-dn), .footer-float-right3:not(.js-dn) { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; padding: 14px 16px !important; border-radius: 8px !important; width: 100% !important; box-sizing: border-box !important; min-height: 48px !important; margin: 0 !important; } .footer-float-right2:not(.js-dn) { background: #fff !important; border: 1.5px solid #1B3A6B !important; margin: 8px 0 !important; } .footer-float-right3:not(.js-dn) { background: rgba(153,153,153,0.08) !important; border: 1.5px solid #999 !important; } .footer-float-right2:not(.js-dn) p, .footer-float-right3:not(.js-dn) p { display: block !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: 1px !important; line-height: 1 !important; border: none !important; padding: 0 !important; margin: 0 !important; width: auto !important; text-align: center !important; background: none !important; } .footer-float-right2:not(.js-dn) p { color: #1B3A6B !important; } .footer-float-right3:not(.js-dn) p { color: #999 !important; } /* 商談中/SOLD OUT時: CROボタンコンテナ・価格情報非表示 */ .footer_float_width:has(.footer-float-right2:not(.js-dn)) .cro-pc-float-btns, .footer_float_width:has(.footer-float-right3:not(.js-dn)) .cro-pc-float-btns { display: none !important; } .footer_float_width:has(.footer-float-right2:not(.js-dn)) .cro-pc-float-price, .footer_float_width:has(.footer-float-right3:not(.js-dn)) .cro-pc-float-price { display: none !important; } .footer_float_width:has(.footer-float-right2:not(.js-dn)) .footer-float-right1, .footer_float_width:has(.footer-float-right3:not(.js-dn)) .footer-float-right1 { display: none !important; } .footer_float_width:has(.footer-float-right2:not(.js-dn)), .footer_float_width:has(.footer-float-right3:not(.js-dn)) { display: flex !important; align-items: center !important; justify-content: center !important; padding: 8px 20px !important; } /* PC: 追従バー — CROボタンコンテナ */ .cro-pc-float-btns { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 10px !important; flex-shrink: 0 !important; } /* PC: 追従バー — お気に入り */ .cro-pc-float-btns + [class*="wishArea"], [class*="sps-wishArea"] { display: flex !important; align-items: center !important; justify-content: center !important; } /* PC: 追従バー — 店舗取寄ボタン */ .cro-pc-float-btns .cro-float-reserve { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 0 20px !important; min-height: 44px !important; background: transparent !important; border: 1.5px solid #1a1a1a !important; border-radius: 6px !important; color: #1a1a1a !important; font-size: 13px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; } /* PC: 追従バー — カートボタン */ .cro-pc-float-btns .cro-float-cart-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 0 28px !important; min-height: 44px !important; background: #1a1a1a !important; color: #fff !important; border: none !important; border-radius: 6px !important; font-size: 14px !important; font-weight: 700 !important; cursor: pointer !important; white-space: nowrap !important; letter-spacing: 0.5px !important; } /* PC: 追従バー — 左エリア（商品名+価格） */ .cro-pc-float-left { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 2px !important; min-width: 0 !important; flex: 1 !important; } /* PC: 追従バー — 商品名 */ .cro-pc-float-name { font-size: 12px !important; font-weight: 500 !important; color: #666 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 480px !important; line-height: 1.3 !important; } /* PC: 追従バー — 価格情報エリア */ .cro-pc-float-price { display: flex !important; align-items: baseline !important; gap: 4px !important; flex-wrap: nowrap !important; min-width: 0 !important; } .cro-pc-float-selling { font-size: 20px !important; font-weight: 900 !important; color: #1a1a1a !important; letter-spacing: 0.5px !important; white-space: nowrap !important; } .cro-pc-float-taxin { font-size: 11px !important; color: #888 !important; font-weight: 400 !important; margin-right: 8px !important; } .cro-pc-float-loan { font-size: 12px !important; color: #555 !important; white-space: nowrap !important; } .cro-pc-float-loan b { font-weight: 700 !important; color: #1a1a1a !important; font-size: 13px !important; } /* PC: 追従バー — お気に入りハート */ .cro-pc-float-heart { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; background: transparent !important; border: 1.5px solid #e0e0e0 !important; border-radius: 50% !important; cursor: pointer !important; flex-shrink: 0 !important; transition: border-color 0.2s, background-color 0.15s !important; } .cro-pc-float-heart:hover { border-color: #e11d48 !important; } /* Sold-out/negotiating: hide left area */ .footer_float_width:has(.footer-float-right2:not(.js-dn)) .cro-pc-float-left, .footer_float_width:has(.footer-float-right3:not(.js-dn)) .cro-pc-float-left { display: none !important; } /* PC: sticky bar — loan benefit text (3rd line) */ .cro-pc-float-benefit { font-size: 11px !important; color: #16a34a !important; font-weight: 600 !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 480px !important; line-height: 1.3 !important; } /* ===== CRO Skeleton: 追従バー初期高さ確保 ===== */ body:not(.cro-loaded) #footer_float .footer_float_width { min-height: 64px !important; } body:not(.cro-loaded) #footer_float .footer-float-right1 { min-height: 64px !important; } } /* end PC */ /* RSN_EC-139: WEB限定品は店舗取寄導線を出さない。問い合わせコードとは独立。 */ body.cro-web-exclusive .cro-reserve-btn, body.cro-web-exclusive .cro-ic-reserve, body.cro-web-exclusive .cro-float-reserve, body.cro-web-exclusive #cro-store-loan-badge, body.cro-web-exclusive .cro-store-loan-badge { display: none !important; } /* 公開補足証拠に一致した既存LIだけを再表示する。黒バッジ全体は再表示しない。 stage 1 PCは既存のWEB限定表示だけを維持し、非WEB商品のPC復旧はstage 2で有効化する。 */ body.cro-ec139-detail-policy-enabled #pi_cart .badgeArea > li.badge.badge--black[data-rsn-inquiry-code="1"], body:not(.cro-ec139-detail-policy-enabled).cro-web-exclusive #pi_cart .badgeArea > li.badge.badge--black[data-rsn-inquiry-code="1"] { display: list-item !important; } /* loanMode=none（ベルトまたはパンくず証拠不一致）は、ネイティブ/CRO双方のローン表示を出さない。 */ body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none #Loan-Price, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none .loan-benefit-text, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none .loanSimulationLink, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none #cro-07-loan-teaser, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none #cro-store-loan-badge, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none .cro-store-loan-badge, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none [data-cro-loan-monthly="1"], body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none .cro-unavail-loan, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none .cro-sp-float-loan, body.cro-ec139-detail-policy-enabled.cro-ec139-loan-none .cro-pc-float-loan { display: none !important; } /* 有金利分類では、SS側の無金利特典コピーを追従バーへ複製しない。 */ body.cro-ec139-detail-policy-enabled.cro-ec139-loan-interest .loan-benefit-text { display: none !important; } @media screen and (max-width: 768px) { body.cro-ec139-detail-policy-enabled #cro-01-trust-badges .cro-tb-list { flex-wrap: wrap !important; justify-content: flex-start !important; } } @media screen and (min-width: 769px) { body.cro-ec139-detail-policy-enabled #cro-01-trust-badges .cro-tb-list { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-start !important; gap: 10px !important; } } /* EC139: preserve native product metadata and the native in-page simulator. */ #pi_cart .badgeArea > li:not(.badge--black):not(.js-dn):not([data-rsn-badge-empty="1"]):not([data-rsn-badge-state="hidden"]) { display: list-item !important; } #pi_cart .badgeArea { margin-bottom: 12px !important; } #pi_cart:not(:has(.cro-points-inline)) .earnPoints { display: block !important; } body:not(.cro-loaded) #pi_cart .earnPoints, body:not(.cro-loaded) #pi_cart .cro-points-inline { visibility: hidden !important; } .loan-simulatorArea { scroll-margin-top: 160px; } body.cro-ec139-loan-none .loan-simulatorArea { display: none !important; } /* EC139 additional UI: renewal-style monochrome line icons for trust signals. */ body.cro-ec139-detail-policy-enabled #cro-01-trust-badges .cro-tb-item:not(.cro-tb-points) .cro-tb-icon { width: 18px !important; height: 18px !important; border-radius: 0 !important; background: transparent !important; } body.cro-ec139-detail-policy-enabled #cro-01-trust-badges .cro-tb-item:not(.cro-tb-points) .cro-tb-icon svg { width: 17px !important; height: 17px !important; stroke: #7d838c !important; stroke-width: 1.6 !important; } body.cro-ec139-detail-policy-enabled .cro-pc-float-heart { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; border-radius: 50% !important; } @media (max-width: 768px) { #pi_cart .badgeArea { margin-bottom: 8px !important; } .cro-store-loan-badge { font-size: 10px !important; padding: 5px 8px !important; } } @media (min-width: 769px) { #pi_cart .cro-cta-row { flex-wrap: nowrap !important; align-items: flex-start !important; } #pi_cart .cro-cta-row > .cro-cart-wrap { order: 0 !important; } #pi_cart .cro-cta-row > [class*="sps-wishArea"] { flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; margin: 0 !important; border-radius: 50% !important; order: 1 !important; } #pi_cart .cro-cta-row > div:not(.cro-cart-wrap) { flex: 1; min-width: 0; } #pi_cart .cro-cta-row > .cro-reserve-btn { order: 2 !important; } #pi_cart .cro-inline-cta { flex-wrap: nowrap !important; } #pi_cart .cro-ic-heart { flex: 0 0 44px !important; order: 1 !important; } #pi_cart .cro-ic-cart-stack, #pi_cart .cro-ic-cart, #pi_cart .cro-ic-status { order: 0 !important; } #pi_cart .cro-ic-reserve, #pi_cart .cro-ic-related, #pi_cart .cro-ic-restock { order: 2 !important; } } /* ======================================================================== RSN_EC-139追加: badgeArea / favorite controls renewal normalization 商品条件はJSとShopServe標準DOMの正本で判定し、ここでは表示形状と意味別色だけを統一する。 ======================================================================== */ #pi_cart .badgeArea { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; margin: 4px 0 6px !important; padding: 0 !important; list-style: none !important; overflow: visible !important; } #pi_cart .badgeArea > li[data-rsn-badge-role] { display: list-item !important; flex: 0 1 auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 24px !important; box-sizing: border-box !important; margin: 0 !important; padding: 4px 8px !important; border: 1px solid #d0d0d0 !important; border-radius: 4px !important; background: #fff !important; color: #1a1a1a !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.3 !important; white-space: normal !important; overflow-wrap: anywhere !important; word-break: break-word !important; } /* 商品状態の差は文言と価格直下の信頼訴求で伝える。役割ごとの左線・色分けは使わない。 */ #pi_cart .badgeArea > li[data-rsn-badge-state="hidden"], #pi_cart .badgeArea > li[data-rsn-badge-empty="1"], #pi_cart .badgeArea > li.js-dn, #pi_cart .badgeArea > li[data-rsn-badge-role="inquiry"]:not([data-rsn-inquiry-code="1"]) { display: none !important; } /* native / inline / PC-SP追従の全ハートを同じ円形寸法へ固定する。hoverで拡大しない。 */ .cro-ic-heart, .cro-sp-float-heart, .cro-pc-float-heart, .cro-unavail-heart, #pi_cart [class*="sps-wishArea"] > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; max-width: 44px !important; max-height: 44px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; overflow: hidden !important; border: 1px solid #d0d0d0 !important; border-radius: 50% !important; background: #fff !important; padding: 0 !important; line-height: 1 !important; transform: none !important; transition: border-color .15s, background-color .15s !important; } .cro-ic-heart:hover, .cro-sp-float-heart:hover, .cro-pc-float-heart:hover, .cro-unavail-heart:hover, #pi_cart [class*="sps-wishArea"] > a:hover, .cro-ic-heart:active, .cro-sp-float-heart:active, .cro-pc-float-heart:active, .cro-unavail-heart:active { border-color: #8b3a3a !important; transform: none !important; } .cro-ic-heart[aria-pressed="true"], .cro-sp-float-heart[aria-pressed="true"], .cro-pc-float-heart[aria-pressed="true"], .cro-unavail-heart[aria-pressed="true"], #pi_cart [class*="sps-wishArea"] > a[aria-pressed="true"] { border-color: #8b3a3a !important; } .cro-ic-heart svg, .cro-sp-float-heart svg, .cro-pc-float-heart svg, .cro-unavail-heart svg, #pi_cart [class*="sps-wishArea"] .cro-heart-icon, #pi_cart [class*="sps-wishArea"] .cro-heart-icon svg { display: block !important; width: 20px !important; height: 20px !important; flex: 0 0 20px !important; pointer-events: none !important; } @media (max-width: 768px) { #pi_cart .badgeArea { gap: 4px !important; margin: 2px 0 6px !important; } #pi_cart .badgeArea > li[data-rsn-badge-role] { min-height: 24px !important; padding: 4px 7px !important; } .cro-sp-float-heart-wrap { top: 4px !important; right: 8px !important; } } /* EC201 visual refinement — shared verbatim by STG and Console projection. * Load after the adopted detail CSS and EC201 layout parity CSS. * Only presentation changes. Existing state classes, values and controls are used. */ /* The official item-page CSS leaves a 20px desktop margin above this row. * Both surfaces use this complete one-row definition after the old parity CSS. * Every original breadcrumb link and its DOM order is preserved. */ body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 0 !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 38px !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 12px !important; background: #fafafa !important; border-bottom: 1px solid #e7e7e7 !important; color: #666 !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 11px !important; line-height: 16px !important; white-space: nowrap !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; touch-action: pan-x; } body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb::-webkit-scrollbar { display: none; } body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb > nav, body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb > nav > ol { display: contents !important; margin: 0 !important; padding: 0 !important; list-style: none !important; white-space: nowrap !important; } body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb > nav > ol > li { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; float: none !important; margin-block: 0 !important; padding-block: 0 !important; color: #888 !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 16px !important; white-space: nowrap !important; } body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb > nav > ol > li a { color: #555 !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 11px !important; font-weight: 400 !important; line-height: 16px !important; white-space: nowrap !important; text-decoration: underline !important; text-decoration-color: #ccc !important; text-underline-offset: 2px !important; } body:has(#pi_cart, #rsn-201-display-pi_cart) #bread-crumb [aria-current="page"] { flex: 0 0 auto !important; padding-inline: 12px !important; color: #1a1a1a !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 11px !important; font-weight: 600 !important; line-height: 16px !important; white-space: nowrap !important; } /* The native #pi_cart rules do not match the Console projection's prefixed ID. * Keep both surfaces on the existing brand's numeric sans family. */ :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .selling_price { color: #1a1a1a !important; font-family: 'Jost', 'Jost Fallback', 'Montserrat', 'Noto Sans JP', sans-serif !important; font-size: 28px !important; font-weight: 600 !important; font-variant-numeric: lining-nums tabular-nums !important; font-feature-settings: 'lnum' 1, 'tnum' 1 !important; letter-spacing: -.02em !important; line-height: 1.2 !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-mc-price { font-family: 'Jost', 'Jost Fallback', 'Montserrat', 'Noto Sans JP', sans-serif !important; font-weight: 600 !important; font-variant-numeric: lining-nums tabular-nums !important; font-feature-settings: 'lnum' 1, 'tnum' 1 !important; letter-spacing: -.02em !important; } /* Stock is classified by the adopted source JS. Status is a static, full-width * first row; the original related/restock/favorite actions remain below it. */ :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable { display: grid !important; grid-template-columns: minmax(0, 1fr) 44px !important; align-items: center !important; gap: 4px 12px !important; width: 100% !important; box-sizing: border-box !important; margin-block: 12px 6px !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable .cro-ic-status { grid-column: 1 / -1 !important; grid-row: 1 !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 3px !important; width: 100% !important; min-height: 66px !important; box-sizing: border-box !important; padding: 12px 16px !important; background: #f3f2f0 !important; border: 1px solid #e2dfda !important; border-radius: 6px !important; box-shadow: none !important; color: #4a4a4a !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 15px !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: .05em !important; text-align: center !important; cursor: default !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta:is(.is-negotiating, .is-soldout) .cro-ic-status::after { content: '現在ご購入いただけません'; color: #666 !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: .02em !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable :is(.cro-ic-related, .cro-ic-restock) { grid-column: 1 !important; grid-row: 2 !important; display: inline-flex !important; justify-content: flex-start !important; align-items: center !important; gap: 4px !important; min-width: 0 !important; min-height: 44px !important; box-sizing: border-box !important; padding: 8px 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; color: #4a4a4a !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; text-decoration: underline !important; text-decoration-color: #aaa !important; text-underline-offset: 3px !important; white-space: nowrap !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable .cro-ic-heart { grid-column: -2 / -1 !important; grid-row: 2 !important; justify-self: end !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable:has(.cro-ic-restock) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable .cro-ic-restock { grid-column: 2 !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable :is(.cro-ic-related, .cro-ic-restock):hover { background: transparent !important; color: #1a1a1a !important; text-decoration-color: currentColor !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable :is(.cro-ic-related, .cro-ic-restock):focus-visible { outline: 2px solid #8b7444 !important; outline-offset: 3px !important; } /* Match the floating unavailable label using the same source-owned state. * js-dn continues to control visibility; no active-state selection is added. */ :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.footer-float-right2, .footer-float-right3):not(.js-dn) { border-width: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.footer-float-right2, .footer-float-right3):not(.js-dn) > :is(p, .cro-unavail-status) { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 2px !important; width: 100% !important; min-height: 56px !important; box-sizing: border-box !important; padding: 8px 12px !important; margin: 0 !important; background: #f3f2f0 !important; border: 1px solid #e2dfda !important; border-radius: 6px !important; color: #4a4a4a !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .05em !important; cursor: default !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.footer-float-right2, .footer-float-right3):not(.js-dn) > :is(p, .cro-unavail-status)::after { content: '現在ご購入いただけません'; color: #666 !important; font-size: 10px !important; font-weight: 400 !important; letter-spacing: .02em !important; } /* The adopted PC source sets SOLD OUT color inline with !important. * Paint that static label legibly without changing the source color value, * state selection, negotiating blue, or any control and handler. */ :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .footer-float-right3:not(.js-dn) > :is(p, .cro-unavail-status) { -webkit-text-fill-color: #4a4a4a !important; } @media (max-width: 768px) { :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .selling_price { font-size: clamp(22px, 7vw, 30px) !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable { column-gap: 8px !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable :is(.cro-ic-related, .cro-ic-restock) { font-size: 11px !important; } } /* Only nodes marked from a strict known-zero SOLD OUT price are suppressed. * The same marker is used by the native complement and Console layout. */ :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart, body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) [data-rsn-layout-zero-price="1"] { display: none !important; } /* Latest CTA priority: real related action first, native restock action second. */ :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart, body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.cro-inline-cta.is-unavailable, .cro-unavail-actions) :is(.cro-ic-related, .cro-ic-restock) { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 46px !important; box-sizing: border-box !important; padding: 10px 12px !important; gap: 5px !important; border: 1px solid transparent !important; border-radius: 6px !important; box-shadow: none !important; font-family: 'Noto Sans JP', 'Hiragino Sans', sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; cursor: pointer !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart, body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.cro-inline-cta.is-unavailable, .cro-unavail-actions) .cro-ic-related { background: #1a1a1a !important; color: #fff !important; border-color: #1a1a1a !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart, body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.cro-inline-cta.is-unavailable, .cro-unavail-actions) .cro-ic-restock { background: #f3efe7 !important; color: #4a3d29 !important; border-color: #b8a684 !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart, body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.cro-inline-cta.is-unavailable, .cro-unavail-actions) .cro-ic-related:hover { background: #333 !important; color: #fff !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart, body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.cro-inline-cta.is-unavailable, .cro-unavail-actions) .cro-ic-restock:hover { background: #e9e1d3 !important; color: #4a3d29 !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; flex: 2 1 520px !important; gap: 8px !important; width: 100% !important; max-width: 640px !important; min-width: 0 !important; align-items: center !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions:not(:has(.cro-ic-restock)) { grid-template-columns: minmax(0, 1fr) !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.footer-float-right2, .footer-float-right3):not(.js-dn) > :is(p, .cro-unavail-status) { flex: 1 1 180px !important; width: auto !important; min-width: 140px !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-top:has(.cro-unavail-price[data-rsn-layout-zero-price="1"]) { display: none !important; } @media (max-width: 768px) { :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable:has(.cro-ic-restock) { grid-template-columns: minmax(0, 1fr) 44px !important; gap: 8px !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable:has(.cro-ic-restock) .cro-ic-related { grid-column: 1 / -1 !important; grid-row: 2 !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable:has(.cro-ic-restock) .cro-ic-restock { grid-column: 1 !important; grid-row: 3 !important; } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart) .cro-inline-cta.is-unavailable:has(.cro-ic-restock) .cro-ic-heart { grid-column: 2 !important; grid-row: 3 !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions { flex: 0 0 auto !important; max-width: none !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions:has(.cro-unavail-heart) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) :is(.footer-float-right2, .footer-float-right3):not(.js-dn) > :is(p, .cro-unavail-status) { flex: 0 0 auto !important; width: 100% !important; min-height: 44px !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions :is(.cro-ic-related, .cro-ic-restock) { font-size: 11px !important; padding-inline: 8px !important; } } :is(body:not([data-rsn-product-layout="201"]) #pi_cart, #rsn-201-display-pi_cart):has(.cro-inline-cta.is-unavailable .cro-ic-restock) > a.arrivalAnnounceBtn { display: none !important; } @media (max-width: 360px) { :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions:has(.cro-unavail-heart) { grid-template-columns: minmax(0, 1fr) 44px !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions:has(.cro-unavail-heart) .cro-ic-related { grid-column: 1 / -1 !important; grid-row: 1 !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions:has(.cro-unavail-heart) .cro-ic-restock { grid-column: 1 !important; grid-row: 2 !important; } :is(body:not([data-rsn-product-layout="201"]) #footer_float, #rsn-201-display-footer_float) .cro-unavail-actions:has(.cro-unavail-heart) .cro-unavail-heart { grid-column: 2 !important; grid-row: 2 !important; } } /* EC201: the open native drawer owns the screen. Preserve float layout/state * and restore the existing active branch automatically when the drawer closes. */ body:has(#pi_cart, #rsn-201-display-pi_cart):has(#site-menu.open) :is(#footer_float, #rsn-201-display-footer_float, #product-main-float), body:has(#pi_cart, #rsn-201-display-pi_cart):has(#site-menu.open) :is(#footer_float, #rsn-201-display-footer_float, #product-main-float) * { visibility: hidden !important; pointer-events: none !important; } :root{--rsn-ec201-css-unit:ec201-34bc4c9d33d7d3b1;}