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

#gallery2{
    transition : 0.5s ease-in;
    height : 200px;
    border-radius : 10px;
}

.carousel {
        margin: 5px auto;
        width: 100%;
	height : fit-content;
        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;
  }
}

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

.carousel-card{
    flex : 0 0 200px;
    width : min-content;
    height : 100%;
    max-height : 200px;
    font-size : 3rem;
    text-align : center;
    align-content : center;
}

.carousel-group img{
    object-fit : cover;
    width : auto;
    max-width : none; /*tailwind css 対策 */
    height : 200px;
    border : skyblue solid 1px;
    border-radius : 10px;
}

@keyframes caroulse-left {
    /* 🌟変更：translateX を translate3d に書き換える🌟 */
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@media screen and (max-width : 414px){
     #gallery2{
	  display : none;
     }
 }