@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-nbox_black-bg {
  background-color: #231815;
}

/* 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: 0%;
    left: 7%;
    width: 86%;
    z-index: 2;
    overflow: hidden;
}
#lpwrap .new_n-box__img05 {
    position: absolute;
    top: 26%;
    left: 10%;
    width: 84%;
    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%;
  }
}


/* N-BOX専用スライダー
------------------------------------------------------*/
#lpwrap .nbox-slider {
  position: relative;
  padding-top: 0;
  margin-top: 0;
  overflow: hidden;
}

#lpwrap .nbox-slider .nbox-swiper {
  background-image: url("../image/03_new-nbox_top_02.jpg");
  background-size: cover;
  background-repeat: no-repeat;
padding-bottom: 25%;
}

#lpwrap .nbox-slider .swiper-slide {
  height: auto;
}

#lpwrap .nbox-slider .slide-image {
  display: block;
  width: 100%;
  height: auto;
}

#lpwrap .nbox-slider .swiper-button-prev {
  background-image: url("../image/slider_left.png");
  background-size: 100%;
  background-repeat: no-repeat;
  left: 2%;
}

#lpwrap .nbox-slider .swiper-button-next {
  background-image: url("../image/slider_right.png");
  background-size: 100%;
  background-repeat: no-repeat;
  right: 2%;
}

#lpwrap .nbox-slider .swiper-button-prev,
#lpwrap .nbox-slider .swiper-button-next {
  width: 10%;
  height: 0;
  max-width: 80px;
  padding-top: 10%;
  top: 38%;
}

#lpwrap .nbox-slider .swiper-pagination {
    bottom: 10%;
}

#lpwrap .nbox-slider .swiper-pagination-bullet {
    width: 1.2rem;
    height: 1.2rem;
}

@media screen and (max-width: 767px) {
  #lpwrap .nbox-slider .swiper-pagination-bullet {
    width: 0.5rem;
    height: 0.5rem;
  }
}

#lpwrap .nbox-slider .swiper-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet,
#lpwrap .nbox-slider .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 7px);
}


/* N-BOX 展示・試乗車アコーディオン
------------------------------------------------------*/
.new_n-box {
  position: relative;
}

.nbox_acc {
  overflow: visible;
}

.nbox_acc_head {
  position: relative;
}

#lpwrap .nbox_acc_head > img {
  display: block;
  width: 100%;
  height: auto;
}

#lpwrap .nbox_acc .accordion-header:hover {
  opacity: 1;
}


#lpwrap .new_n-box__btn01 img {
  display: block;
  width: 100%;
  height: auto;
}

#lpwrap .nbox_acc .accordion-content a {
  display: block;
  width: 85%;
  margin: 0 auto;
}

#lpwrap .nbox_acc .accordion-content a img {
  display: block;
  width: 100%;
  height: auto;
}
#lpwrap .nbox_acc_content {
  background-color: #e5e5e5;
}


/* N-BOX専用追従ボタン
------------------------------------------------------*/
#lpwrap .nbox-floating-btn {
  position: fixed;
  right: calc((100vw - 600px) / 2 + 15px);
  bottom: 5%;
  width: 128px;
  z-index: 10000;
}

#lpwrap .nbox-floating-btn img {
  display: block;
  width: 100%;
  height: auto;
}

@media screen and (max-width: 767px) {
  #lpwrap .nbox-floating-btn {
    right: 10px;
    bottom: 16%;
    width: 128px;
  }
}
/* 1199px以下 */
@media screen and (max-width: 1199px) {
  #lpwrap .nbox-floating-btn {
    bottom: 18%;
    width: 128px;
	}
}

/* フッター付近で追従ボタンを非表示 */
#lpwrap .nbox-floating-btn {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#lpwrap .nbox-floating-btn.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}