/* ============================================================
   比較ピックアップツール - フロントエンドCSS v1.0.0
   .lead-compare スコープ / Tealカラー準拠
   ============================================================ */

.lead-compare{margin:24px auto 16px;max-width:720px}
.lead-compare *{box-sizing:border-box}

/* ── タイトル ── */
.lead-compare__title{text-align:center;font-size:13px;font-weight:700;color:#555;margin:0 0 2px}

/* ── グリッド ── */
.lead-compare__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:14px 0}

/* ── カード ── */
.lead-compare__card{border:1.5px solid #e0e0e0;border-radius:10px;overflow:visible;background:#fff;position:relative;display:flex;flex-direction:column}
.lead-compare__card--center{border:2px solid #0A9298;transform:scale(1.03);box-shadow:0 6px 20px rgba(10,146,152,.15);z-index:2}

/* ── バッジ ── */
.lead-compare__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);padding:3px 14px;border-radius:10px;font-size:11px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.1);white-space:nowrap;z-index:3}
.lead-compare__badge--teal{background:#0A9298;color:#fff}
.lead-compare__badge--amber{background:#fff8e1;color:#b8860b;border:1px solid #ffe082}
.lead-compare__badge--pink{background:#fff0f5;color:#d61a5e;border:1px solid #ffb8cf}

/* ── ヘッダー ── */
.lead-compare__header{padding:12px 6px;text-align:center;background:#fafafa;border-bottom:1px solid #eee;border-radius:10px 10px 0 0}
.lead-compare__logo{width:60px;height:60px;object-fit:contain;border-radius:8px;border:1px solid #eee;margin:0 auto 6px;display:block}
.lead-compare__name{font-size:12px;font-weight:700;line-height:1.3;color:#333}

/* ── ボディ ── */
.lead-compare__body{padding:10px 8px;flex:1;display:flex;flex-direction:column}
.lead-compare__item{padding:8px 0;border-bottom:1px solid #f0f0f0;text-align:center;flex:1}
.lead-compare__item:last-of-type{border-bottom:none}
.lead-compare__label{font-size:10px;color:#e53935;font-weight:600;margin-bottom:3px}
.lead-compare__value{font-size:11px;font-weight:700;line-height:1.5}
.lead-compare__value small{font-size:9px;font-weight:400;color:#888;display:block}
.lead-compare__price{color:#e53935;font-size:16px;font-weight:800}

/* ── サムネイル ── */
.lead-compare__thumb{padding:6px 0 4px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px}
.lead-compare__thumb-label{font-size:9px;color:#0A9298;font-weight:600;letter-spacing:.02em;line-height:1}
.lead-compare__thumb-wrap{position:relative;display:inline-block;cursor:pointer;border-radius:8px;overflow:hidden;border:1px solid #e0e0e0;box-shadow:0 2px 6px rgba(0,0,0,.08);transition:box-shadow .2s;width:56px;height:56px}
.lead-compare__thumb-wrap:hover{box-shadow:0 4px 12px rgba(0,0,0,.15)}
.lead-compare__thumb-img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lead-compare__thumb-overlay{position:absolute;inset:0;background:rgba(0,0,0,.25);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s}
.lead-compare__thumb-wrap:hover .lead-compare__thumb-overlay{opacity:1}
.lead-compare__thumb-overlay span{font-size:16px}

/* ── CTA ── */
.lead-compare__detail{display:block;text-align:center;font-size:12px;color:#fff!important;text-decoration:none!important;padding:10px 6px;background:#ff4444;border-radius:6px;font-weight:700;margin-top:auto;transition:opacity .2s;cursor:pointer}
.lead-compare__detail:hover{opacity:.85}

/* ── フッター ── */
.lead-compare__more{text-align:center;margin:16px 0 0}
.lead-compare__more a{color:#0A9298;font-size:13px;font-weight:600;text-decoration:none;border-bottom:1px dashed #0A9298}
.lead-compare__note{font-size:10px;color:#999;text-align:center;margin:8px 0 0;line-height:1.6}

/* ── プレースホルダー / 遅延読込 ── */
.lead-compare__placeholder{display:flex;align-items:center;justify-content:center;min-height:300px;background:#fafafa;border:1px solid #e0e0e0;border-radius:10px;color:#999;font-size:13px;text-align:center;line-height:1.6;flex-direction:column;gap:10px}
.lead-compare__placeholder.is-hidden{display:none}
.lead-compare__placeholder-spinner{width:28px;height:28px;border:3px solid #e0e0e0;border-top:3px solid #0A9298;border-radius:50%;animation:lcSpin .8s linear infinite}
@keyframes lcSpin{to{transform:rotate(360deg)}}
.lead-compare__content.is-lazy-hidden{display:none}

/* ── モーダル ── */
.lc-modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.75);z-index:999999;align-items:center;justify-content:center;padding:16px}
.lc-modal.is-open{display:flex}
.lc-modal__inner{position:relative;max-width:min(600px,90vw);width:100%;max-height:85vh;background:#fff;border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
.lc-modal__close{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:32px;height:32px;background:#f5f5f5;border:1px solid #ddd;border-radius:50%;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#555;line-height:1;-webkit-tap-highlight-color:transparent;transition:background .2s}
.lc-modal__close:hover{background:#eee}
.lc-modal__viewport{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;background:#f5f5f5}
.lc-modal__slide{width:100%;display:block}
.lc-modal__slide.is-hidden{display:none}
@keyframes lcFadeIn{from{opacity:.3}to{opacity:1}}
.lc-modal__slide:not(.is-hidden){animation:lcFadeIn .25s ease}
.lc-modal__controls{display:flex;align-items:center;justify-content:center;padding:10px 16px;border-top:1px solid #eee;flex-shrink:0;position:relative}
.lc-modal__nav{display:flex;align-items:center;gap:20px}
.lc-modal__arrow{width:32px;height:32px;border:1px solid #ddd;border-radius:50%;background:#fff;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;color:#555;transition:background .2s;-webkit-tap-highlight-color:transparent;line-height:1}
.lc-modal__arrow:hover{background:#f0f0f0}
.lc-modal__counter{font-size:13px;color:#666;font-weight:500;min-width:48px;text-align:center;letter-spacing:.05em}
.lc-modal__thumbs{display:flex;justify-content:center;gap:8px;padding:6px 16px 14px;flex-shrink:0}
.lc-modal__thumb-item{width:48px;height:48px;border-radius:4px;overflow:hidden;border:2px solid transparent;cursor:pointer;opacity:.45;transition:all .2s}
.lc-modal__thumb-item.is-active{border-color:#e53935;opacity:1}
.lc-modal__thumb-item img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}

/* ── モバイル ── */
@media(max-width:480px){
.lead-compare__grid{gap:4px;padding:14px 0}
.lead-compare__card--center{transform:scale(1.02)}
.lead-compare__badge{font-size:9px;padding:2px 10px;top:-9px}
.lead-compare__header{padding:8px 3px}
.lead-compare__logo{width:40px;height:40px}
.lead-compare__name{font-size:10px}
.lead-compare__body{padding:6px 4px}
.lead-compare__item{padding:5px 0}
.lead-compare__label{font-size:9px;margin-bottom:1px}
.lead-compare__value{font-size:9px}
.lead-compare__value small{font-size:8px}
.lead-compare__price{font-size:13px}
.lead-compare__thumb-label{font-size:8px}
.lead-compare__thumb-wrap{width:40px;height:40px;border-radius:6px}
.lead-compare__thumb-overlay span{font-size:12px}
.lead-compare__detail{font-size:10px;padding:7px 3px;border-radius:5px}
.lead-compare__more a{font-size:11px}
.lead-compare__placeholder{min-height:220px}
.lc-modal__inner{max-width:95vw}
.lc-modal__controls{padding:8px 12px}
.lc-modal__arrow{width:28px;height:28px;font-size:16px}
.lc-modal__close{width:28px;height:28px;font-size:14px;left:12px}
.lc-modal__counter{font-size:11px;min-width:40px}
.lc-modal__thumbs{gap:6px;padding:4px 12px 10px}
.lc-modal__thumb-item{width:40px;height:40px}
}