@charset "UTF-8";
/* CSS Document */
:root {
  --color-black: #170707;
  --color-gray: #dad8d8;
  --color-lightgray: #f0efef;
  --color-red: #A91E23;
  --color-lineup: #e2e0dc;
}

.pc-only {
  display: none !important;
}

.inner {
  width: 100%;
  padding: 0 2rem;
}

html {
  font-size: 62.5%;
}

@font-face {
  font-family: "VolvoNovum";
  src: url("font/Volvo Novum-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "VolvoNovum";
  src: url("font/Volvo Novum-Medium.otf");
  font-weight: bold;
  font-style: normal;
}
@font-face {
  font-family: "VolvoNovum";
  src: url("font/Volvo Novum-MediumItalic.otf");
  font-weight: normal;
  font-style: italic;
}
@font-face {
  font-family: "VolvoNovum";
  src: url("font/Volvo Novum-BoldItalic.otf");
  font-weight: bold;
  font-style: italic;
}
body {
  font-size: 1.6rem;
  font-family: YakuHanJP_Noto, VolvoNovum, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  background-color: #fff;
  color: #000;
  line-height: 1.8;
  font-weight: 400;
}

p {
  line-height: 1.8;
  font-feature-settings: "palt";
}

h1,
h2,
h3,
h4,
h5 {
  font-weight: 400;
  line-height: 1.6;
}

h3 {
  margin: 0 auto;
}

.fade {
  opacity: 0;
  transform: translate(0, 5rem);
  transition: 1s cubic-bezier(0.01, 0.65, 0.38, 0.99);
}
.fade.active {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fadeOut {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
a {
  transition: 0.3s;
}
a:hover {
  opacity: 0.8;
}

picture {
  display: block;
  font-size: 0;
}

img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

.main h1, .main h2, .main h3, .main div,
.header h1,
.header h2,
.header h3,
.header div {
  text-align: center;
  margin: 0 auto;
  padding: 0;
  line-height: 1;
}

.btn img {
  width: 56.43vw;
}

.header h1 {
  padding-top: 12.63vw;
}
.header h1 img {
  width: 67.73vw;
}
.header h2 {
  padding-top: 7.37vw;
}
.header h2 img {
  width: 63.93vw;
}
.header .header__txt-01 {
  padding-top: 8.56vw;
}
.header .header__txt-01 img {
  width: 76.84vw;
}
.header .btn {
  padding-top: 16.44vw;
  padding-bottom: 12.53vw;
}

.fixed-content {
  display: block;
  position: fixed;
  width: 80%;
  top: auto;
  bottom: 1rem;
  right: auto;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  max-width: 40rem;
}
.fixed-content.hidden {
  animation: fade 0.2s ease-in-out forwards;
  pointer-events: none; /* 重要 */
}
.fixed-content.visible {
  animation: fadeOut 0.2s ease-in-out forwards;
  pointer-events: all; /* 重要 */
}

.feature {
  padding: 0 5.48vw;
}
.feature .wrap > h2 {
  padding-top: 15.84vw;
}
.feature .wrap .feature__img-01 {
  padding-top: 5.97vw;
}
.feature .wrap > h3 {
  padding-top: 4.8vw;
}
.feature .wrap .feature__flex {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7.33vw 0;
  width: 100%;
  padding-top: 14vw;
}
.feature .wrap .feature__flex .feature__flex__txt {
  text-align: left;
  width: calc(100% - 46.67vw);
}
.feature .wrap .feature__flex .feature__flex__img {
  width: 46.67vw;
}
.feature .wrap .feature__flex .feature__flex__img img {
  width: 46.67vw;
}
.feature .wrap .feature__txt-01 {
  text-align: left;
  padding-top: 13.99vw;
}
.feature .wrap .feature__txt-02 {
  padding-top: 4.13vw;
}
.feature .wrap .eco > h3 {
  padding-top: 2vw;
}
.feature .wrap .eco .eco__car-01 {
  text-align: left;
  padding-top: 4.47vw;
}
.feature .wrap .eco .eco__car-02 {
  text-align: left;
  padding-top: 2.27vw;
}
.feature .wrap .eco .eco__car-03 {
  padding-top: 3.05vw;
}
.feature .wrap .eco .eco__ico {
  padding-top: 5.07vw;
}
.feature .wrap .eco .eco__ico img {
  width: 3.23vw;
}
.feature .wrap .eco .eco__org-01 {
  text-align: left;
  padding-top: 4vw;
}
.feature .wrap .eco .eco__org-02 {
  text-align: left;
  padding-top: 5.47vw;
}
.feature .wrap .eco .eco__org-03 {
  text-align: left;
  padding-top: 3.2vw;
  padding-bottom: 12.8vw;
}

.xc60.feature {
  background-color: var(--color-black);
  color: #fff;
}
.xc60.feature .wrap > h2 img {
  width: 66.73vw;
}
.xc60.feature .wrap > h3 img {
  width: 73.16vw;
}
.xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(1) img {
  width: 38.99vw;
}
.xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) {
  padding-left: 4.88vw;
}
.xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) img {
  width: 36.33vw;
}
.xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(5) img {
  width: 37.49vw;
}
.xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(8) {
  padding-left: 7.33vw;
}
.xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(8) img {
  width: 34.77vw;
}
.xc60.feature .wrap .feature__txt-01 img {
  width: 69.24vw;
}
.xc60.feature .wrap .eco .eco__car-01 img {
  width: 88.39vw;
}
.xc60.feature .wrap .eco .eco__car-02 img {
  width: 63.47vw;
}
.xc60.feature .wrap .eco .eco__org-01 img {
  width: 79.51vw;
}
.xc60.feature .wrap .eco .eco__org-03 img {
  width: 88.21vw;
}

.xc90.feature {
  background-color: var(--color-gray);
  color: #fff;
}
.xc90.feature .wrap > h2 img {
  width: 69.2vw;
}
.xc90.feature .wrap > h3 img {
  width: 82.93vw;
}
.xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(1) img {
  width: 41.01vw;
}
.xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) {
  padding-left: 5.28vw;
}
.xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) img {
  width: 37.2vw;
}
.xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(5) img {
  width: 39.56vw;
}
.xc90.feature .wrap .feature__txt-01 img {
  width: 69.31vw;
}
.xc90.feature .wrap .eco .eco__car-01 img {
  width: 88.35vw;
}
.xc90.feature .wrap .eco .eco__car-02 img {
  width: 62.37vw;
}
.xc90.feature .wrap .eco .eco__org-01 img {
  width: 79.45vw;
}
.xc90.feature .wrap .eco .eco__org-03 img {
  width: 88.21vw;
}

.xc40.feature {
  background-color: var(--color-lightgray);
}
.xc40.feature .wrap > h2 img {
  width: 63.91vw;
}
.xc40.feature .wrap > h3 img {
  width: 76.64vw;
}
.xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(1) img {
  width: 40.17vw;
}
.xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) {
  padding-left: 1.49vw;
}
.xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) img {
  width: 40.81vw;
}
.xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(5) img {
  width: 40.95vw;
}
.xc40.feature .wrap .feature__txt-01 img {
  width: 66.75vw;
}
.xc40.feature .wrap .feature__txt-02 {
  padding-bottom: 12.67vw;
}

.offer {
  padding-bottom: 9.87vw;
}
.offer .wrap > h2 {
  padding-top: 6.93vw;
}
.offer .wrap > h2 img {
  width: 62.23vw;
}
.offer .wrap .offer__txt-01 {
  padding-top: 3.6vw;
}
.offer .wrap .offer__txt-01 img {
  width: 66.37vw;
}
.offer .wrap .btn {
  padding-top: 10.4vw;
}
.offer .wrap .offer__txt-02 {
  padding-top: 15.87vw;
}
.offer .wrap .offer__txt-02 img {
  width: 78.99vw;
}
.offer .wrap .offer__area {
  margin: 6.67vw 5.36vw 0;
  padding: 3.89vw 0 7.19vw;
  border: var(--color-red) solid 1px;
}
.offer .wrap .offer__area .offer__txt-03 img {
  width: 60.44vw;
}
.offer .wrap .offer__area .offer__txt-04 {
  padding-top: 4.4vw;
}
.offer .wrap .offer__area .offer__txt-04 img {
  width: 65.35vw;
}
.offer .wrap .offer__area .offer__txt-05 {
  padding-top: 5.6vw;
}
.offer .wrap .offer__area .offer__txt-05 img {
  width: 84.77vw;
}

.lineup {
  padding: 10.13vw 0 13.33vw;
  background-color: var(--color-lineup);
}
.lineup .wrap > h2 {
  padding-bottom: 5.73vw;
}
.lineup .wrap > h2 img {
  width: 49.33vw;
}
.lineup .wrap .lineup__list {
  padding: 0 5.8vw;
}
.lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__price {
  padding-top: 6.67vw;
}
.lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__spec {
  padding-top: 3.6vw;
}
.lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__support {
  padding-top: 1.73vw;
}
.lineup .wrap .lineup__list .lineup__list__item + .lineup__list__item {
  position: relative;
  padding-top: 21.47vw;
}
.lineup .wrap .lineup__list .lineup__list__item + .lineup__list__item::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 11.47vw;
  height: 1px;
  background-color: #241915;
}
.lineup .wrap .lineup__list.xc40 .lineup__list__item .lineup__list__item__price img {
  width: 81.89vw;
}
.lineup .wrap .lineup__list.xc60 .lineup__list__item .lineup__list__item__price img {
  width: 83.81vw;
}
.lineup .wrap .lineup__list.xc90 .lineup__list__item .lineup__list__item__price img {
  width: 83.68vw;
}
.lineup .wrap .lineup__txt-01 {
  padding-top: 10.53vw;
}
.lineup .wrap .lineup__txt-01 img {
  width: 54.56vw;
}

.anno {
  margin-top: 4rem;
}
.anno p {
  font-size: 1.2rem;
}

/*----------------------------------------------タブレット／ブレイクポイント-------------------------------------------*/
/*-------------------------------------------PC／ブレイクポイント-------------------------------------------*/
@media screen and (min-width: 768px) {
  .pc-only {
    display: block !important;
  }
  .sp-only {
    display: none !important;
  }
  .header .mv img {
    width: 100vw;
    max-width: none;
  }
  .header h1 {
    padding-top: 66px;
  }
  .header h1 img {
    width: 406px;
  }
  .header h2 {
    padding: 31px 20px 0;
  }
  .header h2 img {
    width: 869px;
  }
  .header .header__txt-01 {
    padding-top: 29px;
  }
  .header .header__txt-01 img {
    width: 461px;
  }
  .header .btn {
    padding-top: 102px;
    padding-bottom: 109px;
  }
  .header .btn a {
    display: inline-block;
  }
  .header .btn img {
    width: 341.96px;
  }
  .wrap {
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
  }
  .fixed-content {
    display: none;
  }
  .feature {
    padding: 0;
  }
  .feature .wrap > h2 {
    padding-top: 111.22px;
  }
  .feature .wrap .feature__img-01 {
    padding-top: 71.38px;
  }
  .feature .wrap .feature__img-01 img {
    width: 996px;
  }
  .feature .wrap > h3 {
    padding-top: 78.02px;
  }
  .feature .wrap .feature__flex {
    width: 650.72px;
    gap: 34.86px 0;
    padding-top: 92.96px;
  }
  .feature .wrap .feature__flex .feature__flex__txt {
    width: calc(100% - 303.78px);
  }
  .feature .wrap .feature__flex .feature__flex__img {
    width: 303.78px;
  }
  .feature .wrap .feature__flex .feature__flex__img img {
    width: 303.78px;
  }
  .feature .wrap .feature__txt-01 {
    width: 650.72px;
    margin: 0 auto;
    padding-top: 81.34px;
  }
  .feature .wrap .feature__txt-02 {
    width: 650.72px;
    margin: 0 auto;
    padding-top: 61.42px;
  }
  .feature .wrap .feature__txt-02 img {
    width: 650.72px;
  }
  .feature .wrap .eco {
    width: 655.7px;
    margin: 0 auto;
  }
  .feature .wrap .eco > h3 {
    padding-top: 79.68px;
  }
  .feature .wrap .eco > h3 img {
    width: 100%;
  }
  .feature .wrap .eco .eco__car-01 {
    padding-top: 38.18px;
  }
  .feature .wrap .eco .eco__car-02 {
    padding-top: 26.56px;
  }
  .feature .wrap .eco .eco__car-03 {
    padding-top: 23.24px;
  }
  .feature .wrap .eco .eco__car-03 img {
    width: 100%;
  }
  .feature .wrap .eco .eco__ico {
    padding-top: 18.26px;
  }
  .feature .wrap .eco .eco__ico img {
    width: 23.24px;
  }
  .feature .wrap .eco .eco__org-01 {
    padding-top: 21.58px;
  }
  .feature .wrap .eco .eco__org-02 {
    padding-top: 21.58px;
  }
  .feature .wrap .eco .eco__org-02 img {
    width: 100%;
  }
  .feature .wrap .eco .eco__org-03 {
    padding-top: 23.24px;
    padding-bottom: 109.56px;
  }
  .xc60.feature .wrap > h2 img {
    width: 428.28px;
  }
  .xc60.feature .wrap > h3 img {
    width: 605.9px;
  }
  .xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(1) img {
    width: 270.58px;
  }
  .xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) {
    padding-left: 53.12px;
  }
  .xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) img {
    width: 252.32px;
  }
  .xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(5) img {
    width: 260.62px;
  }
  .xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(8) {
    padding-left: 53.12px;
  }
  .xc60.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(8) img {
    width: 242.36px;
  }
  .xc60.feature .wrap .feature__txt-01 img {
    width: 614.2px;
  }
  .xc60.feature .wrap .eco .eco__car-01 img {
    width: 610.88px;
  }
  .xc60.feature .wrap .eco .eco__car-02 img {
    width: 466.46px;
  }
  .xc60.feature .wrap .eco .eco__org-01 img {
    width: 557.76px;
  }
  .xc60.feature .wrap .eco .eco__org-03 img {
    width: 652.38px;
  }
  .xc90.feature .wrap > h2 img {
    width: 444.88px;
  }
  .xc90.feature .wrap > h3 img {
    width: 687.24px;
  }
  .xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(1) img {
    width: 317.06px;
  }
  .xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) {
    padding-left: 53.12px;
  }
  .xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) img {
    width: 258.96px;
  }
  .xc90.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(5) img {
    width: 308.76px;
  }
  .xc90.feature .wrap .feature__txt-01 img {
    width: 615.86px;
  }
  .xc90.feature .wrap .eco .eco__car-01 img {
    width: 610.88px;
  }
  .xc90.feature .wrap .eco .eco__car-02 img {
    width: 456.5px;
  }
  .xc90.feature .wrap .eco .eco__org-01 img {
    width: 557.76px;
  }
  .xc90.feature .wrap .eco .eco__org-03 img {
    width: 652.38px;
  }
  .xc40.feature .wrap > h2 img {
    width: 410.02px;
  }
  .xc40.feature .wrap > h3 img {
    width: 650.72px;
  }
  .xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(1) img {
    width: 298.8px;
  }
  .xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) {
    padding-left: 51.46px;
  }
  .xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(4) img {
    width: 292.16px;
  }
  .xc40.feature .wrap .feature__flex .feature__flex__txt:nth-of-type(5) img {
    width: 318.72px;
  }
  .xc40.feature .wrap .feature__txt-01 img {
    width: 592.62px;
  }
  .xc40.feature .wrap .feature__txt-02 {
    padding-bottom: 149.4px;
  }
  .offer {
    padding: 0 33.2px 109.56px;
  }
  .offer .wrap > h2 {
    padding-top: 107.9px;
  }
  .offer .wrap > h2 img {
    width: 678.94px;
  }
  .offer .wrap .offer__txt-01 {
    text-align: left;
    width: 675.62px;
    margin: 0 auto;
    padding-top: 41.5px;
  }
  .offer .wrap .offer__txt-01 img {
    width: 473.1px;
  }
  .offer .wrap .btn {
    padding-top: 81.34px;
  }
  .offer .wrap .btn a {
    display: inline-block;
  }
  .offer .wrap .btn img {
    width: 341.96px;
  }
  .offer .wrap .offer__txt-02 {
    padding-top: 131.14px;
  }
  .offer .wrap .offer__txt-02 img {
    width: 662.34px;
  }
  .offer .wrap .offer__area {
    max-width: 972.76px;
    margin: 33.2px auto 0;
    padding: 64.74px 33.2px 83px;
  }
  .offer .wrap .offer__area .offer__txt-03 img {
    width: 483.06px;
  }
  .offer .wrap .offer__area .offer__txt-04 {
    padding-top: 43.16px;
  }
  .offer .wrap .offer__area .offer__txt-04 img {
    width: 305.44px;
  }
  .offer .wrap .offer__area .offer__txt-05 {
    padding-top: 46.48px;
  }
  .offer .wrap .offer__area .offer__txt-05 img {
    width: 727.08px;
  }
  .lineup {
    padding: 34.86px 53.12px 26.56px;
  }
  .lineup .wrap {
    width: auto;
    max-width: 1472.42px;
  }
  .lineup .wrap > h2 {
    padding-bottom: 54.78px;
  }
  .lineup .wrap > h2 img {
    width: 419.98px;
  }
  .lineup .wrap .lineup__list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-content: center;
    max-width: 1472.42px;
    margin: 0 auto;
    gap: 0 7.2153325817vw;
    padding: 0;
  }
  .lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__price {
    padding-top: 2.2547914318vw;
    height: 16.2344983089vw;
  }
  .lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__spec {
    padding-top: 0;
  }
  .lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__support {
    padding-top: 23.24px;
  }
  .lineup .wrap .lineup__list .lineup__list__item img {
    width: auto;
    max-width: 100%;
  }
  .lineup .wrap .lineup__list .lineup__list__item + .lineup__list__item {
    position: relative;
    padding-top: 0;
  }
  .lineup .wrap .lineup__list .lineup__list__item + .lineup__list__item::before {
    content: "";
    position: absolute;
    right: auto;
    left: -3.6076662909vw;
    top: 0;
    bottom: 0;
    height: auto;
    width: 1px;
    background-color: #241915;
  }
  .lineup .wrap .lineup__list.xc40 .lineup__list__item .lineup__list__item__price img {
    width: 418.32px;
  }
  .lineup .wrap .lineup__list.xc60 .lineup__list__item .lineup__list__item__price img {
    width: 426.62px;
  }
  .lineup .wrap .lineup__list.xc90 .lineup__list__item .lineup__list__item__price img {
    width: 426.62px;
  }
  .lineup .wrap .lineup__txt-01 {
    padding-top: 68.06px;
  }
  .lineup .wrap .lineup__txt-01 img {
    width: 481.4px;
  }
  .anno {
    width: 960px;
    margin: 6rem auto 0;
  }
  .cta__link {
    margin: calc(var(--width-variable) / 7.5) auto 0;
  }
  .cta__link img {
    width: calc(var(--width-variable) / 1.388);
  }
  .fade {
    opacity: 0;
    transform: translate(0, 5rem);
    transition: 1s cubic-bezier(0.01, 0.65, 0.38, 0.99);
  }
  .fade.active {
    opacity: 1;
    transform: translate(0, 0);
  }
  /*----------------------------------------------------------------------------------------------------------------*/
  /*
    .hero__wrap {
      background-image: url(../img/hero-bg-sp.webp);
      height: calc(var(--width-variable) / 0.75);
    }

    .hero__title {
     width: calc(var(--width-variable) / 1.25); 
     top: calc(var(--width-variable) / 4.545);
     left: 50%;
     transform: translateX(-50%);
    }
  */
}
@media (min-width: 1472px) {
  .lineup .wrap .lineup__list {
    gap: 0 106.24px;
  }
  .lineup .wrap .lineup__list .lineup__list__item .lineup__list__item__price {
    padding-top: 33.2px;
    height: 239.04px;
  }
  .lineup .wrap .lineup__list .lineup__list__item + .lineup__list__item::before {
    left: -53.12px;
  }
}