@charset "UTF-8" ;
.row-slider {
    display: flex;
    background-color: none;
    /* background-color: #efefef; */
    overflow: hidden;
    border-radius: 20px;
}

.row-slider-list1 {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    animation: slideShow 30s infinite linear;
    list-style: none;
    border-radius: 50px;
}

.row-slider-list2 {
    display: flex;
    margin: 0;
    padding: 0;
    align-items: center;
    animation: slideShow 30s infinite linear;
    list-style: none;
    border-radius: 20%;
}
/* 共通設定：枠を丸く切り抜く */
.row-slider-item, 
.row-slider-item-yokonaga {
    overflow: hidden;    /* 必須：画像のはみ出しをカット */
    border-radius: 20px; /* お好みの丸み（px指定がおすすめ） */
    margin-right: 20px;  /* 画像同士のスキマ */
}

/* 個別のサイズ設定 */
.row-slider-item {
    width: 336px;   /*スマホ版なら　width: 202px; 　くらい？*/
    height: 252px;
}

.row-slider-item-yokonaga {
    width: 539px;
    height: 252px;
}

/* 画像の設定 */
.row-slider-item img,
.row-slider-item-yokonaga img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 枠いっぱいに表示 */
    display: block;
}
/*
.row-slider-item {
    width: 300px;
    height: 175px;
    border-radius: 10%;
}
.row-slider-item-yokonaga {
    width: 800px;
    height: 250px;
    border-radius: 10%;
    /* padding: 0 2rem ; */

/* }

.row-slider-item img {
    width: 100%;
    height: 100%; */
    /* background: transparent; 背景を透明に */
    /* object-fit: cover;      念のため。サイズを維持する */
    /* margin: 0 5rem; */
    /* padding: 0 2rem; */
/* } */

.row-slider:hover .row-slider-list {
    animation-play-state: paused;
}

@keyframes slideShow {
    100% {
        transform: translateX(-100%);
    }

    0% {
        transform: translateX(0%);
    }
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }

}