/*横スクロールするアニメーション */

.carousel {
        margin: 5px auto;
        width: 100%;
        border: 0px solid red;
        display: flex;
        /* スクロールバーではなく、はみ出しを隠す */
        overflow: hidden; 
        gap: 0; /* group間の隙間はpadding等で調整 */
	animation: fadeIn 8s ease-out forwards;
  }

  /* 1. アニメーションの動きを定義する */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

    .group {
        display: inline-flex;
        align-items: center;
        justify-content: flex-start;
        gap: 1em;
        /* アニメーション時間を少し調整し、linearで滑らかに */
	animation: spin 20s infinite linear; 
	padding-right: 1em;
	/* 親のflexの影響を受けないよう固定 */
	flex-shrink: 0;
	width : max-content;
    }

    .card{
	flex : 0 0 200px;
	width : 200px;
	height : 200px;
	padding : 5px 5px;
	font-size : 3rem;
	border-radius : .2em;
	text-align : center;
	align-content : center;
    }

      .group img{
      object-fit : cover;
      width : 100%;
      height : 100%;
      }
      
    @keyframes spin {
        from {
            transform: translateX(0);
        }
        to {
            /* 100%ではなく、自分自身の幅分だけ左に移動 */
            transform: translateX(-100%);
        }
    }