@charset "UTF-8";

/* ========================================
   共通
======================================== */

#andcouture_lp .wrap {
    width: 100%;
    height: auto;
}

#andcouture_lp .content {
    width: 100%;
    height: auto;
    position: relative;
    top: auto;
    background-color: #DEDEE9;
    flex: 1;
}

/* 通常画像 */
#andcouture_lp .TAIONCOLLABORATION {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ========================================
   通常スライダー
======================================== */

.slide-wrap.slide-margin {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}

#andcouture_lp .slide-wrap {
    overflow: hidden;
    position: relative;
}


/* ========================================
   スマホ専用
======================================== */

@media screen and (max-width: 649px) {

    #andcouture_lp .slide-wrap {
        container-type: inline-size;
    }

    #andcouture_lp .slide-wrap .slide-track {
        display: flex;
        width: max-content;
        gap: 0;
        margin: 0;
        padding: 0;

        animation: mobile-seamless 12s linear infinite;
        will-change: transform;
    }

    #andcouture_lp .slide-wrap .slide-track img {
        display: block;

        width: 100cqw;
        flex: 0 0 100cqw;
        max-width: none;
        height: auto;

        margin: 0;
        padding: 0;
        border: 0;
    }
}


/* スマホ：右から左へ無限ループ */

@keyframes mobile-seamless {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}


/* ========================================
   スクロールスライダー
======================================== */

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

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

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

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

#andcouture_lp .slider-background .scroll-slider-track {
    display: flex;
    width: 300%;

    margin: 0;
    padding: 0;

    transform: translateX(0);
}

#andcouture_lp .slider-background .scroll-slide {
    width: 33.333333%;
    flex-shrink: 0;
}

#andcouture_lp .slider-background .scroll-slide img {
    display: block;
    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;
}

/* 指定したスライダーだけ左寄せ */
.slide-wrap.slide-left {
  width: 85%;
  margin-left: 0;
  margin-right: auto;
}

/* 指定したスライダーだけ右寄せ */
.slide-wrap.slide-right {
  width: 85%;
  margin-left: auto;
  margin-right: 0;
}

/* 画像下の余白 */
#andcouture_lp .mb20 {
    margin-bottom: 20px;
}

#andcouture_lp .mb125 {
    margin-bottom: 125px;
}

#andcouture_lp .mb100 {
    margin-bottom: 100px;
}

/* ========================================
   TAION COLLABORATION
   FADE IN + SNOW EFFECT
======================================== */


/* FADE IN */

#andcouture_lp .fadein,
#andcouture_lp .fade-in-up {
  opacity: 0;
  visibility: visible;
  animation: none !important;
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
  will-change: opacity, transform;
}

/* FADE IN NORMAL */

#andcouture_lp .fadein {
  transform: translate3d(0, 0, 0);
}

#andcouture_lp .fadein.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* FADE IN UP */

#andcouture_lp .fade-in-up {
  transform: translate3d(0, 35px, 0);
}

#andcouture_lp .fade-in-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* SNOW ZONE */

#andcouture_lp .snow-zone {
  position: relative;
  width: 100%;
}

/* FIXED SNOW LAYER */

#andcouture_lp_snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 100;
  visibility: hidden;
}

/* SNOW PARTICLES */

#andcouture_lp_snow .snowflake {
  position: absolute;
  top: -20px;
  display: block;

  width: var(--snow-size);
  height: var(--snow-size);

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);

  filter: blur(0.8px);

  animation:
  taion-snowfall
  var(--snow-duration)
  ease-in-out
  var(--snow-delay)
  infinite;

  will-change: transform;
}

/* NATURAL SNOWFALL */

@keyframes taion-snowfall {

  0% {
    transform: translate3d(
      0,
      -20px,
      0
    );
  }

  25% {
    transform: translate3d(
      var(--snow-sway),
      25dvh,
      0
    );
  }

  50% {
    transform: translate3d(
      0,
      50dvh,
      0
    );
  }

  75% {
    transform: translate3d(
      calc(var(--snow-sway) * -1),
      75dvh,
      0
    );
  }

  100% {
    transform: translate3d(
      0,
      105dvh,
      0
    );
  }

}

/* SMARTPHONE */

@media screen and (max-width: 767px) {

  #andcouture_lp .fade-in-up {
    transform: translate3d(0, 25px, 0);
  }

  #andcouture_lp .fade-in-up.is-visible {
    transform: translate3d(0, 0, 0);
  }

  #andcouture_lp_snow .snowflake {
    filter: blur(1px);
  }

  #andcouture_lp_snow .snowflake.crystal {
    filter: none;
  }

}

/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  #andcouture_lp .fadein,
  #andcouture_lp .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none !important;
  }

  #andcouture_lp_snow {
    display: none;
  }

}


/* ========================================
   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;
        top: auto;
        height: auto;
    }

    #andcouture_lp .TAIONCOLLABORATION {
        width: 100%;
        max-width: 500px;
        height: auto;

        margin: 0;
        padding: 0;

        display: block;
    }

    /* 通常スライダー */

    .slide-wrap {
        width: 100%;
        overflow: hidden;
        position: relative;
    }

    .slide-track {
        display: flex;
        width: 400%;

        animation: infinite-slide 12s linear infinite;
        will-change: transform;
    }

    .slide-track img {
        width: 25%;
        height: auto;

        display: block;
        flex-shrink: 0;
    }


    /* PC：無限スライド */

    @keyframes infinite-slide {

        0% {
            transform: translateX(0);
        }

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


    /* 指定したスライダーだけ左右に余白 */

    .slide-wrap.slide-margin {
        width: 90%;
        margin-left: auto;
        margin-right: auto;
    }

    /* ========================================
        スクロールスライダー
    ======================================== */

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

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

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

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

/* 指定したスライダーだけ左寄せ */
.slide-wrap.slide-left {
  width: 85%;
  margin-left: 0;
  margin-right: auto;
}

/* 指定したスライダーだけ右寄せ */
.slide-wrap.slide-right {
  width: 85%;
  margin-left: auto;
  margin-right: 0;
}

/* 特定の画像の下に余白を追加 */
#andcouture_lp .image-margin {
    margin-bottom: 100px;
}

/* 画像下の余白 */
#andcouture_lp .mb20 {
    margin-bottom: 20px;
}

#andcouture_lp .mb125 {
    margin-bottom: 125px;
}

#andcouture_lp .mb100 {
    margin-bottom: 100px;
}

/* ========================================
   TAION COLLABORATION
   FADE IN + SNOW EFFECT
======================================== */


/* FADE IN */

#andcouture_lp .fadein,
#andcouture_lp .fade-in-up {
  opacity: 0;
  visibility: visible;
  animation: none !important;
  transition:
    opacity 1.2s ease,
    transform 1.2s ease;
  will-change: opacity, transform;
}

/* FADE IN NORMAL */

#andcouture_lp .fadein {
  transform: translate3d(0, 0, 0);
}

#andcouture_lp .fadein.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* FADE IN UP */

#andcouture_lp .fade-in-up {
  transform: translate3d(0, 35px, 0);
}

#andcouture_lp .fade-in-up.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}


/* SNOW ZONE */

#andcouture_lp .snow-zone {
  position: relative;
  width: 100%;
}

/* FIXED SNOW LAYER */

#andcouture_lp_snow {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  pointer-events: none;
  z-index: 100;
  visibility: hidden;
}

/* SNOW PARTICLES */

#andcouture_lp_snow .snowflake {
  position: absolute;
  top: -20px;
  display: block;

  width: var(--snow-size);
  height: var(--snow-size);

  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);

  filter: blur(0.8px);

  animation:
  taion-snowfall
  var(--snow-duration)
  ease-in-out
  var(--snow-delay)
  infinite;

  will-change: transform;
}

/* NATURAL SNOWFALL */

@keyframes taion-snowfall {

  0% {
    transform: translate3d(
      0,
      -20px,
      0
    );
  }

  25% {
    transform: translate3d(
      var(--snow-sway),
      25dvh,
      0
    );
  }

  50% {
    transform: translate3d(
      0,
      50dvh,
      0
    );
  }

  75% {
    transform: translate3d(
      calc(var(--snow-sway) * -1),
      75dvh,
      0
    );
  }

  100% {
    transform: translate3d(
      0,
      105dvh,
      0
    );
  }

}

/* SMARTPHONE */

@media screen and (max-width: 767px) {

  #andcouture_lp .fade-in-up {
    transform: translate3d(0, 25px, 0);
  }

  #andcouture_lp .fade-in-up.is-visible {
    transform: translate3d(0, 0, 0);
  }

  #andcouture_lp_snow .snowflake {
    filter: blur(1px);
  }

  #andcouture_lp_snow .snowflake.crystal {
    filter: none;
  }

}


/* REDUCED MOTION */

@media (prefers-reduced-motion: reduce) {

  #andcouture_lp .fadein,
  #andcouture_lp .fade-in-up {
    opacity: 1;
    transform: none;
    transition: none;
    animation: none !important;
  }

  #andcouture_lp_snow {
    display: none;
  }

}

}