@charset "UTF-8";

       :root {
            --slider-pos: 50%; /* 初期位置 */
        }

        .comparison-container {
            position: relative;
            width: 100%;
            max-width: 800px;
            margin: 20px auto;
            aspect-ratio: 3 / 1; /* 画像の比率に合わせて調整 */
            overflow: hidden;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
            cursor: ew-resize;
        }

        /* 共通設定 */
        .image-common {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center;
            pointer-events: none;
        }

        /* 透過前画像 (下層) */
        .before-image {
            background-image: url('../ivybot-bg-remover/sample/assets/remove-bg-before.png');
            background-color: #f0f0f0;
        }

        /* 透過後画像 (上層) - 背景に格子模様を敷くのがポイント */
        .after-image {
            background-image: url('../ivybot-bg-remover/sample/assets/remove-bg-after.png');
            /* 透明を強調するためのチェック柄背景 */
            background-color: white;
            background-image: 
                url('../ivybot-bg-remover/sample/assets/remove-bg-after.png'),
                linear-gradient(45deg, #ccc 25%, transparent 25%), 
                linear-gradient(-45deg, #ccc 25%, transparent 25%), 
                linear-gradient(45deg, transparent 75%, #ccc 75%), 
                linear-gradient(-45deg, transparent 75%, #ccc 75%);
            background-size: cover, 20px 20px, 20px 20px, 20px 20px, 20px 20px;
            background-position: center, 0 0, 0 10px, 10px -10px, -10px 0px;
            
            /* スライダーの位置で切り抜き */
            clip-path: inset(0 0 0 var(--slider-pos));
        }

        /* スライダーの線とつまみ */
        .slider-line {
            position: absolute;
            top: 0;
            bottom: 0;
            left: var(--slider-pos);
            width: 4px;
            background: white;
            transform: translateX(-50%);
            z-index: 10;
        }

        .slider-button {
            position: absolute;
            top: 50%;
            left: var(--slider-pos);
            width: 40px;
            height: 40px;
            background: white;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translate(-50%, -50%);
            box-shadow: 0 2px 5px rgba(0,0,0,0.3);
            z-index: 11;
        }

        .slider-button::before, .slider-button::after {
            content: '';
            border: 6px solid transparent;
        }
        .slider-button::before { border-right-color: #555; margin-right: 4px; }
        .slider-button::after { border-left-color: #555; margin-left: 4px; }

        /* ラベル */
        .label {
            position: absolute;
            top: 10px;
            padding: 5px 12px;
            background: rgba(0,0,0,0.5);
            color: white;
            font-size: 12px;
            border-radius: 4px;
            z-index: 12;
        }
        .label-before { left: 10px; }
        .label-after { right: 10px; }