@charset "UTF-8";
/* CSS Document */

/* NEW N-BOX LP style */

a,
.accordion-header,
.close-btn,
#page-top img {
  transition: .5s;
}

a:hover,
.accordion-header:hover,
.close-btn:hover,
#page-top img:hover {
  opacity: 0.7;
}

/* 汎用 fade up
------------------------------------------------------*/
.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}


/* new_n-box
------------------------------------------------------*/
.new_n-box {
  position: relative;
}

#lpwrap .new_n-box__txt01 {
    position: absolute;
    bottom: 16.3%;
    left: 11.4%;
    width: 79.35%;
    z-index: 2;
}
#lpwrap .new_n-box__txt02 {
    position: absolute;
    top: 6.4%;
    left: 36.9%;
    width: 28%;
    z-index: 2;
}
#lpwrap .new_n-box__img01 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 2;
  transition-delay: 0.2s;
}

#lpwrap .new_n-box__txt03 {
	position: absolute;
    top: 5.75%;
    right: 9.92%;
    width: 8.69%;
    z-index: 3;
	transition-delay: 0.6s;
}

#lpwrap .new_n-box__img02 {
    position: absolute;
    top: 37%;
    left: 36.75%;
    width: 36.95%;
    z-index: 2;
	transition-delay: 1s;
}

#lpwrap .new_n-box__txt04 {
    position: absolute;
    top: 37%;
    left: 9.29%;
    width: 19%;
    z-index: 2;
	transition-delay: 1.4s;
}
#lpwrap .new_n-box__img03 {
    position: absolute;
    top: 0;
    left: 5.8%;
    width: 87.95%;
	z-index: 2;
}
#lpwrap .new_n-box__img04 {
    position: absolute;
    top: 0;
    left: 5.65%;
    width: 87.88%;
    z-index: 2;
	overflow: hidden;
}
#lpwrap .new_n-box__btn01 {
  position: absolute;
  top: 8.55%;
  left: 2.5%;
  width: 91%;
  z-index: 2;
  overflow: hidden;
}
#lpwrap .new_n-box__img05 {
    position: absolute;
    top: 11.5%;
    left: 11.65%;
    width: 78.4%;
    z-index: 2;
    display: block;
}

/* キラッと光るアニメーション */
.kira {
  position: relative;
  display: block;
  overflow: hidden;
}

.kira::after {
  position: absolute;
  top: -200%;
  left: -150%;
  content: "";
  height: 500%;
  width: 70px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.2),
    rgba(255, 255, 255, 0)
  );
  transform: rotate(50deg);
  animation: 2s shine infinite linear;
  pointer-events: none;
}

@keyframes shine {
  0% {
    left: -100%;
  }
  20% {
    left: 150%;
  }
  100% {
    left: 150%;
  }
}