@charset "utf-8";
*{box-sizing:border-box;margin:0;padding:0}
    ul{margin:0;padding:0}
    li{list-style:none}
    img{display:block;width:100%;height:auto;max-width:100%}

    .viewport{overflow:hidden;position:relative;width:100%}
    .path-carousel{display:flex;position:relative}

    /* li は JS で高さを与える。初期は仮高さ 33vw → 調整後に上書き */
    .path-carousel li{position:absolute;width:33.333%;height:33vw;padding:2rem;transition:left var(--dur,600ms) cubic-bezier(.4,0,.2,1),transform var(--dur,600ms) cubic-bezier(.4,0,.2,1),opacity calc(var(--dur,600ms)/2);transform-origin:center;pointer-events:none}
    .path-carousel li img{border-radius: 10px;}

    /* 3 枚表示時のポジション */
    .carousel-pos-0{left:-33.333%;transform:scale(.7) perspective(600px) rotateY(50deg);opacity:0}
    .carousel-pos-1{left:0;transform:scale(.75) perspective(600px) rotateY(42deg);opacity:1}
    .carousel-pos-2{left:33.333%;transform:scale(1);opacity:1;z-index:2}
    .carousel-pos-3{left:66.666%;transform:scale(.75) perspective(600px) rotateY(-42deg);opacity:1}
    .carousel-pos-4{left:100%;transform:scale(.7) perspective(600px) rotateY(-50deg);opacity:0}

    /* 非表示スライド */
    .carousel-pos-5{left:100%;opacity:0;pointer-events:none}

    /* single-mode で上書き */
    .single-mode li{width:100%}
    .single-mode .carousel-pos-2{left:50%;transform:translateX(-50%)}    

    .no-anim{transition:none!important}

    button.carousel-nav{position:absolute;bottom:20px;padding:10px 20px;font-size:16px;border:none;border-radius:5px;cursor:pointer;background:#333;color:#fff;z-index:10}
    button.carousel-nav:hover{background:#555}
    .prev{left:40%}.next{right:40%}