@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:#fffbf4;
    flex: 1;
}
#andcouture_lp .JulyLOOK {
    max-width: 100%;
    margin: 0 0 15px 0;
}

/* 画像スライダー */
#andcouture_lp .slide {
    position: relative;
    width: 100%;
    font-display: block;
    display: block;
    background-color:#fffbf4;
}
#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;
  }
}

#andcouture_lp .stay1 {
    padding-top: 157%;
}
#andcouture_lp .stay2{
    padding-top: 0.5%;
}

/* 画像ループ */
#andcouture_lp .slider{
    width: 100%;
    margin: 0 auto;
    height: 500px;
}
#andcouture_lp .slider img{
    height: 500px;
}

/* フェードイン */
.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: #fffbf4;
    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);
  }
}

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

.change-area{
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* 1枚目：下に置く画像 */
.base-photo{
  width: 100%;
}

/* 2枚目：重ねる場所 */
.switch-photo{
  position: absolute;
  top: 5%;
  left: 50%;
  width: 85%;
  transform: translateX(-50%);
}

/* 2枚目の切り替え画像 */
.switch-img{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
}

/* 切り替え */
.img01{
  animation: fade1 6s infinite;
}

.img02{
  animation: fade2 6s infinite;
}

@keyframes fade1{
  0%,45%{ opacity: 1; }
  50%,100%{ opacity: 0; }
}

@keyframes fade2{
  0%,45%{ opacity: 0; }
  50%,100%{ opacity: 1; }
}

/*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: #fffbf4;
        height: auto;
    }
    #andcouture_lp .JulyLOOK {
        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;
    }
     #andcouture_lp .stay1 {
        padding-top: 150%;
      }
    #andcouture_lp .stay2{
        padding-top: 0.5%;
    }
    
    
    /* 画像ループ */
    #andcouture_lp .slider{
        width:100%;
    }
    
     
	.img{
    max-width: 100%;
    height: auto;
    display: block;
    }

    .change-area{
    position: relative;
    width: 100%;
    margin: 0 auto;
    }

    /* 1枚目：下に置く画像 */
    .base-photo{
    width: 100%;
    }

    /* 2枚目：重ねる場所 */
    .switch-photo{
    position: absolute;
    top: 5%;
    left: 50%;
    width: 85%;
    transform: translateX(-50%);
    }

    /* 2枚目の切り替え画像 */
    .switch-img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    opacity: 0;
    }

    /* 切り替え */
    .img01{
    animation: fade1 6s infinite;
    }

    .img02{
    animation: fade2 6s infinite;
    }

    @keyframes fade1{
    0%,45%{ opacity: 1; }
    50%,100%{ opacity: 0; }
    }

    @keyframes fade2{
    0%,45%{ opacity: 0; }
    50%,100%{ opacity: 1; }
    }

}