@charset "UTF-8";

.animated-slide-up,
.animated-slide-up-order {
  opacity: 0;
  transform: translateY(20px);
  transition: .5s ease;
}
.animated-slide-up.is-active,
.animated-slide-up-group.is-active .animated-slide-up-order {
  opacity: 1;
  transform: none;
}

.animated-mv-text {
  opacity: 0;
  transform: translateY(20%);
  filter: blur(15px);
  transition: 1.5s cubic-bezier(0.85, 0, 0.15, 1);
}
.is-active .animated-mv-text {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.animated-mv-bg {
  filter: blur(15px);
  transform: scale(1.05);
  transition: 1s ease;
}
.is-active .animated-mv-bg {
  transform: scale(1);
  filter: blur(0);
}

/* mv lines */
.animated-mv-line1 {
  bottom: -28rem;
  right: 39rem;
  transition: .3s ease;
  transition-delay: .2s;
}
.mv-common.is-active .animated-mv-line1 {
  right: 29rem;
  bottom: 0;
}
.animated-mv-line2 {
  right: 56rem;
  top: -80rem;
  transition: .3s ease;
  transition-delay: .2s;
}
.mv-common.is-active .animated-mv-line2 {
  right: 19rem;
  top: 0;
}

.animated-single-mv-line1 {
  bottom: -28rem;
  right: -16.5rem;
  transition: .3s ease;
  transition-delay: .2s;
}
.product-single-mv.is-active .animated-single-mv-line1 {
  right: -3.5rem;
  bottom: 0;
}
.animated-single-mv-line2 {
  right: -16rem;
  top: -73rem;
  transition: .3s ease;
  transition-delay: .2s;
}
.product-single-mv.is-active .animated-single-mv-line2 {
  right: 10.5rem;
  top: 0;
}

.animated-basic-mv-line1 {
  bottom: -18.7rem;
  left: 18.8rem;
  transition: .3s ease;
  transition-delay: .2s;
}
.basic-mv-line.is-active .animated-basic-mv-line1 {
  left: 11.8rem;
  bottom: 0;
}
.animated-basic-mv-line2 {
  left: 19.5rem;
  top: -44rem;
  transition: .3s ease;
  transition-delay: .2s;
}
.basic-mv-line.is-active .animated-basic-mv-line2 {
  left: -1rem;
  top: 0;
}



/* PRODUCT lines */
.animated-lineup-line1 {
  top: -74%;
  right: -12rem;
  transition: .3s ease;
  transition-delay: .4s;
}
.photo.is-active .animated-lineup-line1 {
  top: 0;
  right: 12rem;
}
.animated-lineup-line2 {
  bottom: -26%;
  right: 0;
  transition: .3s ease;
  transition-delay: .6s;
}
.photo.is-active .animated-lineup-line2 {
  bottom: 0;
  right: 11.8rem;
}
.animated-lineup-line3 {
  top: -100%;
  right: 40rem;
  transition: .3s ease;
  transition-delay: .4s;
}
.photo.is-active .animated-lineup-line3 {
  top: 0;
  right: 8rem;
}
.animated-lineup-line4 {
  bottom: -35%;
  right: 26rem;
  transition: .3s ease;
  transition-delay: .6s;
}
.photo.is-active .animated-lineup-line4 {
  bottom: 0;
  right: 17rem;
}
.animated-lineup-line5 {
  top: -54%;
  left: 27rem;
  transition: .3s ease;
  transition-delay: .4s;
}
.photo.is-active .animated-lineup-line5 {
  top: 0;
  left: 9rem;
}
.animated-lineup-line6 {
  bottom: -54%;
  right: 26rem;
  transition: .3s ease;
  transition-delay: .6s;
}
.photo.is-active .animated-lineup-line6 {
  bottom: 0;
  right: 9rem;
}
.animated-lineup-line7 {
  top: -54%;
  right: 26rem;
  transition: .3s ease;
  transition-delay: .4s;
}
.photo.is-active .animated-lineup-line7 {
  top: 0;
  right: 9.2rem;
}
.animated-lineup-line8 {
  bottom: -46%;
  right: 30rem;
  transition: .3s ease;
  transition-delay: .6s;
}
.photo.is-active .animated-lineup-line8 {
  bottom: 0;
  right: 16rem;
}

/* PRODUCT customize */
.product-customize .bg > div img {
  transition: .3s ease;
  transition-delay: .2s;
}
.product-customize .bg01 img {
  transform: translate(-14rem, -14rem);
}
.product-customize.is-active .bg01 img {
  transform: translate(0, 0);
}
.product-customize .bg02 img {
  transform: translate(-14rem, 14rem);
}
.product-customize.is-active .bg02 img {
  transform: translate(0, 0);
}
.product-customize .bg03 img {
  transform: rotate(90deg);
}
.product-customize.is-active .bg03 img {
  transform: rotate(0);
}
.product-customize .bg04 img {
  transform: rotate(90deg);
}
.product-customize.is-active .bg04 img {
  transform: rotate(0);
}
.product-customize .bg05 img {
  transform: rotate(270deg);
}
.product-customize.is-active .bg05 img {
  transform: rotate(0);
}
.product-customize .bg06 img {
  transform: rotate(90deg);
}
.product-customize.is-active .bg06 img {
  transform: rotate(0);
}
.product-customize .bg07 img {
  transform: translate(14rem, -14rem);
}
.product-customize.is-active .bg07 img {
  transform: translate(0, 0);
}
.product-customize .bg08 img {
  transform: translate(-11rem, 11rem);
}
.product-customize.is-active .bg08 img {
  transform: translate(0, 0);
}
.product-customize .bg09 img {
  transform: translate(11rem, 11rem);
}
.product-customize.is-active .bg09 img {
  transform: translate(0, 0);
}

/* reasons bg line */
.bg-reasons-line1 {
  width: 1px;
  transition: .5s ease;
  transform-origin: top right;
  transition-delay: .2s;
}
.bg-reasons-line1.is-active {
  width: 100%;
}

.bg-reasons-line2 {
  width: 1px;
  transition: .5s ease;
  transform-origin: top left;
  transition-delay: .3s;
}
.bg-reasons-line2.is-active {
  width: 100%;
}

.bg-reasons-line3 {
  width: 1px;
  transition: .5s ease;
  transform-origin: top right;
  transition-delay: .3s;
}
.bg-reasons-line3.is-active {
  width: 100%;
}

.bg-reasons-line4 {
  width: 1px;
  transition: .5s ease;
  transform-origin: top left;
  transition-delay: .3s;
}
.bg-reasons-line4.is-active {
  width: 100%;
}

.bg-reasons-line5 {
  width: 1px;
  transition: .5s ease;
  transform-origin: top right;
  transition-delay: .3s;
}
.bg-reasons-line5.is-active {
  width: 100%;
}



/* /////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////////////////// */

@media screen and (max-width: 750px) {
  .sp-ani-none {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  /* mv lines */
  .animated-mv-line1 {
    bottom: -16rem;
    right: 8rem;
  }
  .mv-common.is-active .animated-mv-line1 {
    right: 0;
    bottom: 0;
  }
  .animated-mv-line2 {
    right: 24rem;
    top: -34rem;
  }
  .mv-common.is-active .animated-mv-line2 {
    right: 4rem;
    top: 0;
  }
  
  .animated-single-mv-line1 {
    bottom: -16rem;
    right: 6rem;
  }
  .product-single-mv.is-active .animated-single-mv-line1 {
    right: -1rem;
    bottom: 0;
  }
  .animated-single-mv-line2 {
    right: 20rem;
    top: -34rem;
  }
  .product-single-mv.is-active .animated-single-mv-line2 {
    right: 0;
    top: 0;
  }
  
  .animated-basic-mv-line1 {
    bottom: -10rem;
    left: auto;
    right: 9rem;
  }
  .basic-mv-line.is-active .animated-basic-mv-line1 {
    bottom: 0;
    left: auto;
    right: -1rem;
  }
  .animated-basic-mv-line2 {
    left: 14rem;
    top: -13rem;
  }
  .basic-mv-line.is-active .animated-basic-mv-line2 {
    left: 1rem;
    top: 0;
  }

  /* PRODUCT lines */
  .animated-lineup-line1 {
    top: -74%;
    right: -4.5rem;
  }
  .photo.is-active .animated-lineup-line1 {
    top: 0;
    right: 4.5rem;
  }
  .animated-lineup-line2 {
    bottom: -26%;
    right: 0;
  }
  .photo.is-active .animated-lineup-line2 {
    bottom: 0;
    right: 4.425rem;
  }
  .animated-lineup-line3 {
    top: -100%;
    right: 15rem;
  }
  .photo.is-active .animated-lineup-line3 {
    top: 0;
    right: 3rem;
  }
  .animated-lineup-line4 {
    bottom: -35%;
    right: 9.75rem;
  }
  .photo.is-active .animated-lineup-line4 {
    bottom: 0;
    right: 6.375rem;
  }
  .animated-lineup-line5 {
    top: -54%;
    left: 10.125rem;
  }
  .photo.is-active .animated-lineup-line5 {
    top: 0;
    left: 3.375rem;
  }
  .animated-lineup-line6 {
    bottom: -54%;
    right: 9.75rem;
  }
  .photo.is-active .animated-lineup-line6 {
    bottom: 0;
    right: 3.375rem;
  }
  .animated-lineup-line7 {
    top: -54%;
    right: 9.75rem;
  }
  .photo.is-active .animated-lineup-line7 {
    top: 0;
    right: 3.45rem;
  }
  .animated-lineup-line8 {
    bottom: -46%;
    right: 11.25rem;
  }
  .photo.is-active .animated-lineup-line8 {
    bottom: 0;
    right: 6rem;
  }

  /* PRODUCT customize */
  .product-customize .bg01 img {
    transform: translate(-10rem, -10rem);
  }
  .product-customize .bg07 img {
    transform: translate(5rem, -10rem);
  }
  .product-customize .bg10 img {
    transform: translate(-7rem, 7rem);
  }
  .product-customize.is-active .bg10 img {
    transform: translate(0, 0);
  }
}