/* ----------------------------------
ui-slider
-------------------------------- */
/*
.ui-slider.ui-slider--gallery{
--slider-columns:1;
--slider-gap:2rem;
}
*/

.ui-slider{
position:relative;
width:100%;
margin:0 auto;
min-width:0;
overflow:hidden;
}

.ui-slider__wrap{
position:relative;
width:100%;
min-width:0;
overflow:hidden;
}


.ui-slider__track{
display:flex;
gap:var(--slider-gap);
overflow-x:auto;
margin:0;
padding:0;
scroll-snap-type:x mandatory;
scroll-behavior:smooth;
-webkit-overflow-scrolling:touch;
scrollbar-width:none;
-ms-overflow-style:none;
cursor:grab;
}

/* 最初のitem */
.ui-slider__item:first-child{
margin-left:auto;
}

/* 最後のitem */
.ui-slider__item:last-child{
margin-right:auto;
}


.ui-slider__track::-webkit-scrollbar{
display:none;
}

.ui-slider__track.is-dragging{
cursor:grabbing;
scroll-snap-type:none;
scroll-behavior:auto;
}

.ui-slider__item{
flex:0 0 calc(
(100% - (var(--slider-gap) * (var(--slider-columns) - 1))) / var(--slider-columns)
);
min-width:0;
scroll-snap-align:start;
}


/* ----------------------------------
画像スライダー 
-------------------------------- */
.ui-slider__figure{
margin:0;
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
z-index:1;
}

.ui-slider__figure img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}

/* カード */
.ui-slider__card{
display:block;
height:100%;
overflow:hidden;
text-decoration:none;
color:inherit;
background:#fff;
box-shadow:0 2rem 3rem rgba(0,0,0,.09);
transition:transform .3s ease;
}

.ui-slider__card:hover{
transform:translateY(-5px);
}

.ui-slider__card img{
display:block;
width:100%;
object-fit:cover;
}


/* ----------------------------------
arrows
-------------------------------- */
.ui-slider__arrow{
position:absolute;
top:50%;
transform:translateY(-50%);
width:4.1rem;
height:4.1rem;
border:0;
border-radius:50%;
background:rgba(255,255,255,.6);
backdrop-filter:blur(8px);
-webkit-backdrop-filter:blur(8px);
box-shadow:0 4px 20px rgba(0,0,0,.12);
cursor:pointer;
z-index:10;
transition:.3s ease;
}

.ui-slider__arrow:hover{
transform:translateY(-50%) scale(1.1);
}

.ui-slider__arrow--prev{
left:1rem;
}

.ui-slider__arrow--next{
right:1rem;
}

.ui-slider__arrow{
display:flex;
align-items:center;
justify-content:center;
}

.ui-slider__arrow::after{
content:"";
display:block;
width:2.3rem;
height:2.3rem;
background-repeat:no-repeat;
background-position:center;
background-size:contain;
}

.ui-slider__arrow--prev::after{
background-image:url('/2026-image/common/chevron_left.svg');
}

.ui-slider__arrow--next::after{
background-image:url('/2026-image/common/chevron_right.svg');
}

.ui-slider__arrow.is-hide{
opacity:0;
visibility:hidden;
pointer-events:none;
}

@media (max-width:600px){
.ui-slider__arrow{
width:4rem;
height:4rem;
}

}

/* ----------------------------------
pagination
-------------------------------- */
.ui-slider__pagination{
position:absolute;
z-index:10;
bottom:1rem;
margin:0 auto;
left:0;
right:0;
display:flex;
justify-content:center;
gap:.8rem;
}

.ui-slider__dot{
width:.8rem;
height:.8rem;
padding:0;
border:0;
border-radius:50%;
background:#D8DCE1;
cursor:pointer;
transition:.3s ease;
}

.ui-slider__dot.is-active{
width:2.4rem;
border-radius:999px;
background:#2F343A;
}


/* SP */
@media (max-width:800px){
.ui-slider--card{
--slider-columns:2;
}
}

@media (max-width:600px){
.ui-slider,
.ui-slider--card,
.ui-slider--gallery{
--slider-columns:1;
}

.ui-slider__track{
--slider-gap:1.2rem;
/* padding-bottom:3rem; */
}


.ui-slider__card h3{
padding:1.2rem;
font-size:1.5rem;
}

.ui-slider__card p{
padding:0 1.2rem 1.4rem;
font-size:1.2rem;
}
}


/* ----------------------------------
thumbnail
-------------------------------- */
.ui-slider__thumbnail{
display:flex;
flex-wrap:nowrap;
gap:.5rem;
margin-top:1.5rem;

width:0;
min-width:100%;
max-width:100%;

overflow-x:auto;
overflow-y:hidden;

scroll-behavior:smooth;
scrollbar-width:none;
-ms-overflow-style:none;
}

.ui-slider__thumbnail::-webkit-scrollbar{
display:none;
}

.ui-slider__thumbnail-item{
position:relative;
flex:0 0 7rem;
width:7rem;
min-width:7rem;
max-width:7rem;
overflow:hidden;
padding:0;
border:1px solid transparent;
cursor:pointer;
opacity:.5;
transition:.3s;
}


/* 正方形 */
.ui-slider__thumbnail-item::before{
content:"";
display:block;
padding-top:100%;
}

.ui-slider__thumbnail-item img{
position:absolute;
inset:0;
display:block;
width:100%;
height:100%;
object-fit:cover;
}

.ui-slider__thumbnail-item.is-active{
opacity:1;
border-color:var(--color-gray1);
}