/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jul 08 2026 | 12:12:36 */
/* =======================================================
   Rinker 統合カスタマイズ (完全版：マイクロコピー動的置換 ＋ ABテスト対応)
   修正：background-clip標準プロパティ追加 / will-change / reduced-motion / @keyframes pulse追加
   ======================================================= */

/* クレジット表記を非表示 */
.credit-box { display: none !important; }

/* --- 1. ベース & 画像 & タイトル --- */
div.yyi-rinker-contents {
    margin: 40px 0 !important;
    display: flex !important;
    justify-content: center !important;
}
div.yyi-rinker-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 480px !important;
    background: #ffffff !important;
    border: 1px solid #f0f0f5 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 36px rgba(0,0,0,0.06) !important;
    padding: 32px 24px !important;
    box-sizing: border-box !important;
    /* 描画コスト削減 */
    contain: layout style !important;
}

div.yyi-rinker-image {
    width: 100% !important;
    margin: 0 0 24px 0 !important;
    display: flex !important;
    justify-content: center !important;
}
div.yyi-rinker-image img {
    max-width: 100% !important;
    max-height: 200px !important;
    object-fit: contain !important;
    box-shadow: none !important;
}
.yyi-rinker-images-arrow,
.yyi-rinker-images-arrow-left,
.yyi-rinker-images-arrow-right,
.yyi-rinker-slider-prev,
.yyi-rinker-slider-next,
.yyi-rinker-slider-dots,
div.yyi-rinker-detail { display: none !important; }

div.yyi-rinker-info {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
div.yyi-rinker-title {
    margin-bottom: 24px !important;
    text-align: center !important;
    width: 100% !important;
}
div.yyi-rinker-title a {
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    background: linear-gradient(90deg, #1A56DB 0%, #9333EA 50%, #EA580C 100%) !important;
    -webkit-background-clip: text !important;
    /* ★修正：Firefoxで文字が消える問題を解消（標準プロパティを追加） */
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    /* Firefox用フォールバック（-webkit-text-fill-colorを解釈しないため） */
    color: transparent !important;
    display: inline-block !important;
}

/* --- 2. 在庫ありバッジ --- */
.rinker-stock-badge {
    display: inline-flex !important;
    align-items: center !important;
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    padding: 4px 14px !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    margin: -12px auto 20px auto !important;
    letter-spacing: 0.05em !important;
}
.rinker-stock-badge i {
    margin-right: 6px !important;
    font-size: 12px !important;
}

/* --- 3. ソーシャルプルーフ（〇人が閲覧中 ＆ ハイライト装飾） --- */
.yyi-rinker-social-proof {
    display: block !important;
    background: #fffafa !important;
    border: 1px solid #ffe4e6 !important;
    border-radius: 12px !important;
    padding: 20px 16px !important;
    margin: 0 0 24px 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: inset 0 2px 10px rgba(225, 29, 72, 0.02) !important;
}
.social-proof-stats {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin-bottom: 16px !important;
}
.live-pulse {
    display: block !important;
    width: 10px !important;
    height: 10px !important;
    background-color: #e11d48 !important;
    border-radius: 50% !important;
    /* ★修正：GPUレイヤーに昇格してアニメーションを滑らかに */
    will-change: transform !important;
    animation: live-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite !important;
}
@keyframes live-ping {
    0%   { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(225, 29, 72, 0.7); }
    70%  { transform: scale(1);    box-shadow: 0 0 0 8px rgba(225, 29, 72, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0   rgba(225, 29, 72, 0); }
}
/* ★修正：「動きを減らす」設定（iOS省電力モード等）では点滅を止める */
@media (prefers-reduced-motion: reduce) {
    .live-pulse { animation: none !important; opacity: 0.7 !important; }
}

.social-proof-number {
    color: #ffffff !important;
    background: #e11d48 !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    padding: 3px 10px !important;
    border-radius: 6px !important;
    margin: 0 4px !important;
    box-shadow: 0 2px 6px rgba(225, 29, 72, 0.25) !important;
    display: inline-block !important;
}
.social-proof-message {
    background: #ffffff !important;
    border: 1px dashed #fecdd3 !important;
    border-radius: 8px !important;
    padding: 14px 12px !important;
    font-size: 13.5px !important;
    color: #374151 !important;
    text-align: center !important;
    line-height: 1.6 !important;
}
.sp-highlight {
    color: #be123c !important;
    font-weight: 800 !important;
    background: linear-gradient(transparent 60%, #ffe4e6 60%) !important;
    padding: 0 2px !important;
    display: inline !important;
}

/* --- 4. ちぐさのチャットプロモ枠 --- */
.rinker-promo-chat {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 20px 0 !important;
    padding: 16px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
    border: 1px dashed #cbd5e1 !important;
}
.chat-avatar {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    width: 50px !important;
}
.chat-avatar img {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
    border: 2px solid #ffffff !important;
}
.chat-name {
    font-size: 10px !important;
    color: #64748b !important;
    margin-top: 6px !important;
    font-weight: 700 !important;
}
.chat-bubble {
    position: relative !important;
    background: #ffffff !important;
    padding: 14px 16px !important;
    border-radius: 0 12px 12px 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    border: 1px solid #e2e8f0 !important;
    font-size: 13px !important;
    color: #334155 !important;
    line-height: 1.6 !important;
    font-weight: 600 !important;
    width: 100% !important;
}
/*
 * ★修正：before の border-color をCSS変数に変更。
 * 元コードの #ffffff 固定では吹き出し三角形がダークモードで白くなる。
 * ただしこのサイトがライトモード固定であれば #ffffff のままでも可。
 */
.chat-bubble::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -8px !important;
    width: 0 !important;
    height: 0 !important;
    border-style: solid !important;
    border-width: 0 8px 10px 0 !important;
    border-color: transparent #ffffff transparent transparent !important;
}
.chat-bubble .highlight {
    color: #db2777 !important;
    background: linear-gradient(transparent 60%, #fbcfe8 60%) !important;
    padding: 0 2px !important;
    display: inline !important;
}

/* --- 5. ボタンとマイクロコピー --- */
ul.yyi-rinker-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
ul.yyi-rinker-links li {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* SANGOのデフォルトマイクロコピーを強制非表示（JSで生成したものだけを表示） */
ul.yyi-rinker-links li > span:not(.kaolig-micro-copy),
ul.yyi-rinker-links li > div:not(.kaolig-micro-copy) { display: none !important; }

/* JS生成のマイクロコピー */
.kaolig-micro-copy {
    display: block !important;
    font-size: 11.5px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    letter-spacing: 0.05em !important;
    text-align: center !important;
    transition: opacity 0.2s ease !important;
    opacity: 0.9 !important;
}
.micro-amazon  { color: #d97706 !important; }
.micro-rakuten { color: #be123c !important; }
.micro-yahoo   { color: #0369a1 !important; }

/* ボタン本体 */
ul.yyi-rinker-links li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 54px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    z-index: 1 !important;
    /* ★追加：ホバーアニメーション用にGPUレイヤーへ */
    will-change: transform !important;
}
li.amazonlink a  { background: linear-gradient(135deg, #FF9900, #FFB84D) !important; }
li.rakutenlink a { background: linear-gradient(135deg, #BF0000, #E60000) !important; }
li.yahoolink a   { background: linear-gradient(135deg, #0073C6, #009AD6) !important; }
ul.yyi-rinker-links li a::before,
ul.yyi-rinker-links li a::after {
    display: none !important;
    content: none !important;
    animation: none !important;
}

/* ホバー & アクティブ（マウス操作のデバイスのみ） */
@media (hover: hover) and (pointer: fine) {
    ul.yyi-rinker-links li:hover a {
        transform: translateY(-2px) !important;
        box-shadow: 0 6px 16px rgba(0,0,0,0.12) !important;
        opacity: 0.95 !important;
    }
    ul.yyi-rinker-links li:hover .kaolig-micro-copy { opacity: 1 !important; }
}
ul.yyi-rinker-links li:active a {
    transform: translateY(1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
    transition: transform 0.05s, box-shadow 0.05s !important;
}

/* ★修正：テストモードバッジの @keyframes pulse が元コードに未定義だった */
@keyframes pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(219, 39, 119, 0.4); }
    50%       { box-shadow: 0 4px 20px rgba(219, 39, 119, 0.8); }
}
@media (prefers-reduced-motion: reduce) {
    @keyframes pulse {
        0%, 100% { opacity: 1; }
    }
}

/* --- 6. スマホ用レスポンシブ --- */
@media screen and (max-width: 600px) {
    div.yyi-rinker-box        { padding: 24px 16px !important; border-radius: 16px !important; }
    div.yyi-rinker-title a    { font-size: 16px !important; }
    .yyi-rinker-social-proof  { padding: 16px 12px !important; margin: 0 0 20px 0 !important; }
    .social-proof-stats       { font-size: 14px !important; gap: 6px !important; }
    .social-proof-number      { font-size: 15px !important; }
    .social-proof-message     { font-size: 13px !important; padding: 12px 10px !important; }
    .rinker-promo-chat        { padding: 12px !important; gap: 8px !important; margin-bottom: 16px !important; }
    .chat-bubble              { font-size: 12px !important; padding: 12px !important; }
    .chat-avatar              { width: 44px !important; }
    .chat-avatar img          { width: 38px !important; height: 38px !important; }
    ul.yyi-rinker-links li a  { height: 50px !important; font-size: 14px !important; }
    .kaolig-micro-copy        { font-size: 10px !important; }
}