@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%}

.carousel-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}

.carousel-caption{
    position:absolute;left:50%;transform: translateX(-50%);bottom: 0;width:33.333%;
    display: flex;justify-content: center;align-items: center;
    background: #333;border-radius: 200px;
    color: #fff;text-align: center;font-size: clamp(16px,2vw,24px);font-weight: bold;white-space: nowrap;
    padding: clamp(.75rem, 2vw, 1rem);margin-top: clamp(1rem,2.5vw,2rem);
    opacity: 1;transition:opacity .3s ease;
}
.carousel-caption.hidden{opacity:0;}
.carousel-viewport:has(.single-mode) .carousel-caption{width: 92%;bottom: 20px;}

button.carousel-nav.prev {left: 26%;}
button.carousel-nav.next {right: 26%;}
button.carousel-nav {
    position:absolute;top: 40%;bottom: auto;transform: translateY(-50%);
	background: #333;border: 1px solid #333;border-radius: 50%;
	width: clamp(36px,5vw,60px);height: clamp(36px,5vw,60px);aspect-ratio: 1 / 1;
	padding: 0;
    display: flex;justify-content: center;align-items: center;
	transition: background .3s ease;cursor:pointer;z-index:10;
}
button.carousel-nav .arrow-icon {
	display: block;width: 14px;height: 16px;background: #fff;
	/* Chrome / Edge / Safari */
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2.404,15.452l10.678-6.165c.991-.572.991-2.002,0-2.574L2.404.548C1.413-.024.175.691.175,1.835v12.33c0,1.144,1.238,1.859,2.229,1.287Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
	/* Firefox */
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 16'%3E%3Cpath d='M2.404,15.452l10.678-6.165c.991-.572.991-2.002,0-2.574L2.404.548C1.413-.024.175.691.175,1.835v12.33c0,1.144,1.238,1.859,2.229,1.287Z' fill='%23fff'/%3E%3C/svg%3E") no-repeat;
	mask-type: alpha;  /* Safari バグ回避 */
	mask-size: 100% 100%;
	transition: background .3s ease;
}
button.carousel-nav.prev span {transform: rotate(180deg);}
button.carousel-nav:hover {background: transparent;}
button.carousel-nav:hover  .arrow-icon {background: #333;}

@media screen and (max-width: 560px) {
	/* カルーセル */
	.single-mode li {padding: 0 1rem;}
	button.carousel-nav {top: clamp(34%,28vw,40%);}
	button.carousel-nav.prev {left: 1%;}
	button.carousel-nav.next {right: 1%;}
}