:root {
            --bg-color: #f0f4f8;
            --card-bg: #ffffff;
            --text-color: #334155;
            
            /* 各スライドのテーマカラー */
            --color-1: #ef4444; /* レッド */
            --color-2: #3b82f6; /* ブルー */
            --color-3: #333; /* ブラック */
        }

        .products-item{
            width: 70%;
        }

        .align-c{
            text-align: center;
        }


        .wrap_body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }

        /* スライダーの外枠 */
        .slider-wrapper {
            z-index: -1;
            width: 100%;
            text-align: center;
            padding:0;
            margin: 0;
        }

        /* ラジオボタンは非表示 */
        input[type="radio"] {
            display: none;
        }

        /* スライドを表示する窓 */
        .view-window {
            width: 90%;
            overflow: hidden;
            margin: 0 0 0 0;
            padding: 0;
        }

        /* 横に並ぶスライドのレール */
        .slide-rail {
            display: flex;
            height: fit-content;
            width: 300%; /* スライド3枚分 */
            transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
        }

        /* 各スライドの内容 */
        .slide {
            width: 33.333%;
            box-sizing: border-box;
            text-align: center;
        }


        /* --- ナビゲーション（色付き丸ボタン） --- */
        .nav-dots {
            display: flex;
            /*justify-content: center;*/
            gap: 20px;
        }

        .dot {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            cursor: pointer;
            border: 3px solid #e2e8f0;
            transition: all 0.3s ease;
            position: relative;
        }

        /* 各ドットの個別カラー */
        .dot-1 { background-color: var(--color-1); }
        .dot-2 { background-color: var(--color-2); }
        .dot-3 { background-color: var(--color-3); }

        /* ホバー時の効果 */
        .dot:hover {
            transform: scale(1.2);
        }

        /* --- ロジック：切り替えの仕組み --- */

        /* 1枚目選択時 */
        #s1:checked ~ .view-window .slide-rail { transform: translateX(0); }
        #s1:checked ~ .nav-dots label[for="s1"] {
            border-color: var(--color-1);
            transform: scale(1.3);
            box-shadow: 0 0 10px rgba(239, 68, 68, 0.4);
        }

        /* 2枚目選択時 */
        #s2:checked ~ .view-window .slide-rail { transform: translateX(-33.333%); }
        #s2:checked ~ .nav-dots label[for="s2"] {
            border-color: var(--color-2);
            transform: scale(1.3);
            box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
        }

        /* 3枚目選択時 */
        #s3:checked ~ .view-window .slide-rail { transform: translateX(-66.666%); }
        #s3:checked ~ .nav-dots label[for="s3"] {
            border-color: var(--color-3);
            transform: scale(1.3);
            box-shadow: 0 0 10px rgba(16, 185, 129, 0.4);
        }

        /* スライド内のテキスト色も連動させる場合 */
        #s1:checked ~ .view-window .slide-1 h3 { color: var(--color-1); }
        #s2:checked ~ .view-window .slide-2 h3 { color: var(--color-2); }
        #s3:checked ~ .view-window .slide-3 h3 { color: var(--color-3); }