@charset "UTF-8";

.float-banner {
  -webkit-justify-content: space-between;
  justify-content: space-between;
  background-color: #fff
}

.float-banner__item {
  width: 49.86667%
}

.float-banner__item:not(:last-child) {
  margin-right: 0
}

.float-banner__anchor:before {
  width: 12px;
  height: 12px;
  right: 5.34759%
}

.float-banner__anchor-text.o-shop {
  width: 135px;
  margin-right: 10px
}

.float-banner__anchor-text.o-reserve {
  width: 129px
}

.cv-button {
  max-width: 94.2029%;
  display: block;
  margin: 0 auto
}

.cv-button__item {
  width: 100%
}

.cv-button__item:not(:last-child) {
  margin-right: 0;
  margin-bottom: 20px
}

.cv-button__anchor {
  height: 70px
}

.cv-button__anchor:before {
  right: 10px
}

.cv-button__anchor-text {
  display: inline-block;
  line-height: 1;
  margin-right: 3.75%
}

.cv-button__anchor-text.o-shop {
  width: 270px;
  margin-bottom: 0
}

.cv-button__anchor-text.o-reserve {
  width: 174px
}

.nav-list {
  width: 88.10145%;
  margin: 0 auto;
  display: block
}

.nav-list__item {
  width: 100%;
  display: block
}

.nav-list__item:not(:last-child) {
  margin-right: 0;
  margin-bottom: 15px
}

.grade-car__item {
  border-radius: 8px;
  padding: 20px 5.7971% 22px
}

.grade-car__item:not(:last-child) {
  margin-bottom: 20px
}

.grade-car__main {
  margin-bottom: 15px
}

.grade-car__caption {
  padding: 6px 10px;
  line-height: 1.5;
  letter-spacing: .05em
}

.grade-car__notice {
  margin-top: 10px
}

.footnote {
  background-color: #363636;
  padding: 40px 0 42px
}

.section__inner {
  width: 92%
}

.gread__inner {
  padding-top: 105px;
}

.pagetop {
  bottom: 100px
}

.float-bottom-conversion {
  height: auto
}

.x-trail__heading {
  background: transparent
}

.intro {
  /* background: url(../img/bg-xtrail_intro_sp.jpg) no-repeat center top; */
  background-size: cover;
  padding-bottom: 0;
  background-color: #08252F;
  position: relative;
  z-index: 2;
  padding: 0px 0 0px;
  }

.intro .nav {
  margin-bottom: 75px;
  -webkit-transform: translateY(-13.04348%);
  transform: translateY(6.04348%)
}

.intro__cv {
  margin-top: 40px
}

.charm {
  background-size: cover;
  padding: 66px 0 30px;
  background-color: #08252F;
  position: relative;
  z-index: 1;
}

.charm__back {
  position: relative;
  z-index: -1;
}


.charm {
  position: relative;
  background-color: #08252F;
  overflow: hidden;
  z-index: 0;
}

.charm__back {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.charm__back::before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw; 
  height: calc(12% + 800px);
  top: -400px; 
  background: url(../img/chramback_pc.png) no-repeat center top / cover;
  z-index: -1;
}


.charm__title {
  width: 68%;
  margin:0 auto 40px
}

.charm__image+.charm__image {
  margin-top: 50px
}

.charm__image {
  width: 100vw;
  margin-top: 34px;
}

.charm__cv {
  margin-top: 40px
}

.grade-sp {
  background: url(../img/bg-grade_sp-2.jpg) no-repeat center top;
  background-size: cover;
  padding: 0 0 110px;
  clip-path: polygon(0 0, 100% 2%, 100% 97%, 0% 100%);
}

.grade__title {
  width: 81.15942%;
  margin:0 auto 40px
}

.grade__title-wrap {
  margin: 0 auto 40px;
}

.grade__cv {
  margin-top: 40px
}

.campaign {
  background-size: cover;
  padding: 80px 0 40px;
  background: #08252F;
  clip-path: polygon(0 6%, 100% 0%, 100% 100%, 0% 100%);
  position: relative;
  top: -90px;
  margin-bottom: -60px;
}




.campaign__title-wrap-sp {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.campaign__title-wrap-sp::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -3rem;
  width: 108.5%;
  height: 197%;
  background: url(../img/title-bg-line_sp.png) no-repeat right bottom / contain;
  z-index: 0;
}

.campaign__title {
  position: relative;
  z-index: 1;
}

footer {
  margin-bottom: 70px;
}


.campaign__title {
  width: 85.21739%;
  margin: 0 auto 40px
}

.campaign__banner+.campaign__banner {
  margin-top: 20px
}

.campaign__cv {
  margin-top: 40px
}

main {
  background: #08252F;
}