@charset "UTF-8";

/* スマホ、タブレット用 */
#andcouture_lp .wrap {
    width: 100%;
    height: auto;

}

#andcouture_lp .content {
      width: 100%;
/*    height: 9500px;*/
    height: auto;
    position: relative;/* absolute; */
    top: auto;/* 76%; */
    background-color:#9b918b;
    flex: 1;
}
#andcouture_lp .SeptemberLOOK {
    max-width: 100%;
    margin: 0 0 15px 0;
}

/* 画像スライダー */
#andcouture_lp .slide {
    position: relative;
    width: 100%;
    font-display: block;
    display: block;
    background-color:#9b918b;
}
#andcouture_lp .item {
     width: 100%;
    position: absolute;
    animation: img-change 8s infinite;
    opacity: 0;
}
#andcouture_lp .item:nth-child(1) {
    animation-delay: 0s;
}
#andcouture_lp .item:nth-child(2) {
    animation-delay: 4s;
}

@keyframes img-change {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  40% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* フェードイン */
.layout{
    display: flex;
}

/* その場でフェードイン */
.fadein {
    opacity: 0;
    /* 1s でアニメーションスピードを管理 */
    animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 下から上にフェードインアニメーション */
#andcouture_lp .fade-in-up {
	background-color: #9b918b;
    animation: fadeInUp linear; /* アニメーション設定 */
    animation-timeline: view(); /* スクロールと連動 */
    animation-range: entry 10% cover 35%;
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(6rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-slider {
    width: 100%;
    overflow: hidden;
    }

    .scroll-slider-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    }

    .scroll-slide {
    width: 33.333%;
    flex-shrink: 0;
    }

    .scroll-slide img {
    display: block;
    width: 100%;
    height: auto;
    }

/*PC用*/
@media screen and (min-width:650px){
    #andcouture_lp .wrap {
        max-width: 500px;
        width: 100%;
        margin: 0 auto;
      }
    #andcouture_lp .content {
        width: 500px;
        position: relative; /* absolute; */
        top: auto; /* 887px; */
		background-color: #9b918b;
        height: auto;
    }
    #andcouture_lp .SeptemberLOOK {
        max-width: 500px;
        margin: 0 0 18px 0;
    }
  
      /* 画像スライダー */
     #andcouture_lp .slide {
        position: relative;
      }
      #andcouture_lp .item {
        width: 500px;
        position: absolute;
      }
      #andcouture_lp .item-right {
        width: 480px;
        position: absolute;
        padding-top: 83px;
    }

    .scroll-slider {
    width: 100%;
    overflow: hidden;
    }

    .scroll-slider-track {
    display: flex;
    width: 300%;
    transform: translateX(0);
    }

    .scroll-slide {
    width: 33.333%;
    flex-shrink: 0;
    }

    .scroll-slide img {
    display: block;
    width: 100%;
    height: auto;
    }

}