/* ============ Layout / Stage ============ */
    .liver-slider-component {
        position: relative;
        padding: 0 1rem;
        margin-top: 250px;
        top: 70px;
    }

    /* タイトル画像のレスポンシブ対応 */
    .title_liver {
        text-align: center;
        padding: 0 1rem;
        margin-bottom: 0;
    }
    .title_liver img {
        max-width: 100%;
        height: auto;
    }

    .revolver-stage {
        position: relative;
        height: 400px;
        /* 上半分の見せたい高さ */
        overflow: visible;
        /* 下へ“逃がす”ので隠さない */
        margin-top: 0;
        /* 上・左右は表示しつつ、下方向のはみ出しのみ隠す */
        clip-path: inset(-200% -200% 0 -200%);
    }
    @media (min-width: 768px){
      .revolver-stage {
        position: relative;
        height: 500px;
        /* 上半分の見せたい高さ */
        overflow: visible;
        /* 下へ“逃がす”ので隠さない */
        margin-top: 0;
        /* 上・左右は表示しつつ、下方向のはみ出しのみ隠す */
        clip-path: inset(-200% -200% 0 -200%);
    }
}
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* 横スク保険 */

    .liver-slider {
        position: relative;
        perspective: 1200px;
    }

    #liverSlider {
        position: relative;
        transform-style: preserve-3d;
    }

    /* ============ Cards ============ */
    .top-liver-card-link {
        position: absolute;
        top: 50%;
        left: 50%;
        transform-origin: center center;
    }

    .top-liver-card {
        position: relative;
        width: 16rem;
        /* 320px */
        background: #fff;
        border-radius: 1.25rem;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
        overflow: hidden;
        isolation: isolate;
        /* 視差＆追従光の土台 */
        transform-style: preserve-3d;
        will-change: transform, box-shadow;
        transition: transform 180ms ease, box-shadow 180ms ease;
        --mx: 50%;
        --my: 50%;
    }
    @media (min-width: 768px){
 .top-liver-card {
        position: relative;
        width: 20rem;
        /* 320px */
        background: #fff;
        border-radius: 1.25rem;
        box-shadow: 0 14px 28px rgba(0, 0, 0, .08);
        overflow: hidden;
        isolation: isolate;
        /* 視差＆追従光の土台 */
        transform-style: preserve-3d;
        will-change: transform, box-shadow;
        transition: transform 180ms ease, box-shadow 180ms ease;
        --mx: 50%;
        --my: 50%;
    }
}
    .top-liver-card-image-wrapper {
        position: relative;
        aspect-ratio: 3/4;
        background: #e5e7eb;
        overflow: hidden;
    }

    .liver-card-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transform: translateZ(0);
        will-change: transform;
        transition: transform 180ms ease;
        image-rendering: auto;
    }

    .top-liver-card-info {
        padding: 0.75rem 1rem 1rem;
        transform: translateZ(0);
        will-change: transform;
        transition: transform 180ms ease;
    }

    .top-liver-card-name {
        font-size: 1.075rem;
        font-weight: 700;
        color: #111827;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* 追従グロー */
    .top-liver-card::after {
        content: "";
        position: absolute;
        inset: -2px;
        border-radius: 1rem;
        pointer-events: none;
        background: radial-gradient(360px 360px at var(--mx) var(--my),
                rgba(34, 197, 94, .36), transparent 60%);
        mix-blend-mode: screen;
        opacity: .7;
        transition: opacity 160ms ease;
    }

    .top-liver-card:hover::after {
        opacity: .9;
    }

    /* バッジ */
    .liver-badge {
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 2;
        font-size: 12px;
        font-weight: 700;
        color: #fff;
        padding: 4px 8px;
        border-radius: 999px;
        letter-spacing: .02em;
        background: #64748b;
    }

    .badge--17live {
        background: #ff3366;
    }

    .badge--iriam {
        background: #00c2ff;
    }

    .badge--tiktok {
        background: #111;
    }

    .badge--youtube {
        background: #e11d48;
    }

    /* ナビ */
    .liver-slider-nav {
        position: absolute;
        top: 45%;
        transform: translateY(-50%);
        background: #fff;
        border: none;
        border-radius: 999px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
        cursor: pointer;
        opacity: 0;
        transition: opacity .2s ease, transform .2s ease;
    }
    @media (min-width: 768px){
     .liver-slider-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: #fff;
        border: none;
        border-radius: 999px;
        width: 40px;
        height: 40px;
        display: grid;
        place-items: center;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .12);
        cursor: pointer;
        opacity: 0;
        transition: opacity .2s ease, transform .2s ease;
    }
}

    .revolver-stage:hover .liver-slider-nav {
        opacity: 1;
    }

    .liver-slider-nav:hover {
        transform: translateY(-50%) scale(1.06);
    }

    .liver-slider-nav.prev {
        left: -6px;
    }

    .liver-slider-nav.next {
        right: -6px;
    }

    /* 低速環境 */
    @media (prefers-reduced-motion: reduce) {

        .top-liver-card,
        .liver-card-image,
        .top-liver-card-info {
            transition: none !important;
        }

        .liver-slider-nav {
            transition: none !important;
        }
    }


    /* 横スク防止は維持でOK */
    html,
    body {
        max-width: 100%;
        overflow-x: hidden;
    }