@charset "UTF-8";
:root {
  --color-red: #9e2a2b;
  --width-variable: 100vw;
}

@font-face {
  font-family: "VolvoNovum-R";
  src: url("font/Volvo Novum-Regular.otf");
  font-weight: normal;
  font-style: normal;
}
html {
  font-size: 62.5%;
}

body {
  color: #000;
  background-color: #fff;
  font-family: YakuHanJP_Noto, VolvoNovum-R, "Noto Sans JP", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "MS Pゴシック", sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.8;
}

.header *,
.content * {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.header h1, .header h2, .header h3, .header h4, .header p, .header li, .header dt, .header dd,
.content h1,
.content h2,
.content h3,
.content h4,
.content p,
.content li,
.content dt,
.content dd {
  text-align: center;
  font-feature-settings: "palt";
  font-size: 0;
  line-height: 0;
}
.header p,
.content p {
  text-align: left;
}
.header img,
.content img {
  vertical-align: bottom;
  width: 100%;
  height: auto;
}

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

.wrap {
  margin: 0 auto;
  padding: 0 5.33vw;
}

.inner {
  margin: 0 auto;
}

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

.fadeinout {
  transition: opacity ease-in-out 1s;
  opacity: 0;
}
.fadeinout.is-visible {
  opacity: 1;
}

.fixed-content {
  transition: opacity 0.3s cubic-bezier(0.01, 0.65, 0.38, 0.99);
  opacity: 0;
  text-align: center;
  z-index: 100;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  pointer-events: none;
}
.fixed-content a {
  display: inline-block;
}
.fixed-content img {
  width: 72vw;
  image-rendering: auto;
}
.fixed-content.visible {
  opacity: 1;
  pointer-events: all;
}

.header .logo {
  text-align: center;
  padding: 4vw 0;
}
.header .logo img {
  width: 33.33vw;
}

.content .intro h2 {
  padding-top: 21.47vw;
}
.content .intro h2 img {
  width: 81.47vw;
}
.content .intro .intro_txt01 {
  padding-top: 9.33vw;
}
.content .intro .intro_txt01 img {
  width: 87.07vw;
}
.content .intro .intro_txt02 {
  padding-top: 8.67vw;
}
.content .intro .intro_txt02 img {
  width: 88.67vw;
}
.content .campaign1 h3 {
  text-align: left;
  padding-top: 18.67vw;
}
.content .campaign1 h3 img {
  width: 89.33vw;
}
.content .campaign1 .campaign1_blk {
  padding-top: 7.87vw;
}
.content .campaign1 .campaign1_blk li + li {
  padding-top: 5.4vw;
}
.content .campaign1 .campaign1_txt01 {
  text-align: center;
  padding-top: 5.47vw;
}
.content .campaign1 .campaign1_txt01 img {
  width: 63.47vw;
}
.content .campaign2 {
  margin-top: 19.2vw;
}
.content .campaign2 h3 {
  text-align: left;
}
.content .campaign2 h3 img {
  width: 61.33vw;
}
.content .campaign2 .campaign2_blk {
  padding-top: 5.6vw;
}
.content .campaign2 .campaign2_blk .campaign2_txt {
  padding-top: 5.33vw;
}
.content .campaign2 .campaign2_blk .campaign2_txt img {
  width: 69.6vw;
}
.content .campaign3 {
  margin-top: 18.13vw;
}
.content .campaign3 h3 {
  text-align: left;
}
.content .campaign3 h3 img {
  width: 86.51vw;
}
.content .campaign3 .campaign3_txt01 {
  padding-top: 5.87vw;
}
.content .access {
  margin-top: 18.67vw;
}
.content .access h3 {
  text-align: left;
}
.content .access .access_blk {
  padding-top: 9.07vw;
}
.content .access .access_blk .access_img iframe {
  width: 100%;
  height: 53.07vw;
}
.content .access .access_blk .access_txt {
  padding-top: 6.8vw;
}
.content .access .access_blk .access_txt img {
  width: 81.07vw;
}
.content .access .access_cta {
  text-align: center;
  margin-top: 14.13vw;
}
.content .access .access_cta img {
  width: 72vw;
}
.content .cars {
  margin: 28.27vw 0 6.67vw;
}
.content .cars h2 img {
  width: 82.67vw;
}
.content .xc90 .car_blk h3,
.content .xc60 .car_blk h3,
.content .xc40 .car_blk h3 {
  background-color: var(--color-red);
  height: 48vw;
  padding-top: 8vw;
}
.content .xc90 .car_blk h3 img,
.content .xc60 .car_blk h3 img,
.content .xc40 .car_blk h3 img {
  width: 74.27vw;
}
.content .xc90 .car_blk .car_img,
.content .xc60 .car_blk .car_img,
.content .xc40 .car_blk .car_img {
  text-align: center;
  margin-top: -19.47vw;
}
.content .xc90 .car_blk .car_img img,
.content .xc60 .car_blk .car_img img,
.content .xc40 .car_blk .car_img img {
  width: 89.33vw;
}
.content .xc90 .xc_txt,
.content .xc60 .xc_txt,
.content .xc40 .xc_txt {
  text-align: center;
  padding-top: 7.07vw;
}
.content .xc90 .xc_txt .xc_anno,
.content .xc60 .xc_txt .xc_anno,
.content .xc40 .xc_txt .xc_anno {
  text-align: center;
  padding-top: 1.33vw;
}
.content .xc90 .xc_txt .xc_anno img,
.content .xc60 .xc_txt .xc_anno img,
.content .xc40 .xc_txt .xc_anno img {
  width: 32.93vw;
}
.content .xc60,
.content .xc40 {
  margin-top: 13.33vw;
}
.content .xc90 .xc90_txt01 img {
  width: 70.53vw;
}
.content .xc60 .car_blk h3 img {
  width: 75.07vw;
}
.content .xc60 .car_blk .car_img {
  margin-top: -18.13vw;
}
.content .xc60 .car_blk .car_img img {
  width: 86.67vw;
}
.content .xc60 .xc60_txt01 img {
  width: 70.53vw;
}
.content .xc40 .car_blk h3 img {
  width: 69.07vw;
}
.content .xc40 .xc40_txt01 img {
  width: 70.36vw;
}
.content .safety {
  margin-top: 26.67vw;
}
.content .safety h2 img {
  width: 39.2vw;
}
.content .safety .safety_blk {
  padding-top: 13.6vw;
}
.content .safety .safety_blk li .safety_txt {
  padding-top: 8.27vw;
}
.content .safety .safety_blk li.column01 .safety_txt img {
  width: 86.27vw;
}
.content .safety .safety_blk li.column02 .safety_txt img {
  width: 87.73vw;
}
.content .safety .safety_blk li.column03 .safety_txt img {
  width: 86.77vw;
}
.content .safety .safety_blk li + li {
  padding-top: 13.6vw;
}

@media (min-width: 768px) {
  a {
    transition: 0.3s;
  }
  a:hover {
    opacity: 0.8;
  }
  .pc-only {
    display: block !important;
  }
  .sp-only {
    display: none !important;
  }
  .wrap {
    width: min(100rem, 69.4vw);
    padding: 0;
  }
  .inner {
    max-width: 1400px;
  }
  .fixed-content {
    display: none;
  }
  .header .logo {
    padding: 50px 0;
  }
  .header .logo img {
    width: 26rem;
  }
  .content .intro h2 {
    text-align: left;
    padding-top: min(11.6rem, 8.1vw);
  }
  .content .intro h2 img {
    width: min(93.6rem, 65vw);
  }
  .content .intro .intro_txt01 {
    padding-top: min(3.4rem, 2.4vw);
  }
  .content .intro .intro_txt01 img {
    width: min(100rem, 69.4vw);
  }
  .content .intro .intro_txt02 {
    padding-top: 0;
  }
  .content .intro .intro_txt02 img {
    width: min(97.4rem, 67.6vw);
  }
  .content .campaign1 h3 {
    padding-top: min(12rem, 8.3vw);
  }
  .content .campaign1 h3 img {
    width: min(100rem, 69.4vw);
  }
  .content .campaign1 .campaign1_blk {
    padding-top: min(5.3rem, 3.7vw);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .content .campaign1 .campaign1_blk .img01 img,
  .content .campaign1 .campaign1_blk .img02 img,
  .content .campaign1 .campaign1_blk .img03 img {
    width: min(31.4rem, 21.8vw);
  }
  .content .campaign1 .campaign1_blk .img04,
  .content .campaign1 .campaign1_blk .img05 {
    padding-top: min(3.5rem, 2.4vw);
  }
  .content .campaign1 .campaign1_blk .img04 img,
  .content .campaign1 .campaign1_blk .img05 img {
    width: min(48.5rem, 33.7vw);
  }
  .content .campaign1 .campaign1_blk li + li {
    padding-top: 0;
  }
  .content .campaign1 .campaign1_txt01 {
    padding-top: min(2.5rem, 1.7vw);
  }
  .content .campaign1 .campaign1_txt01 img {
    width: min(33.4rem, 23.2vw);
  }
  .content .campaign2 {
    margin-top: min(8.3rem, 5.8vw);
  }
  .content .campaign2 h3 img {
    width: min(62.08rem, 43.1vw);
  }
  .content .campaign2 .campaign2_blk {
    padding-top: min(6rem, 4.2vw);
    display: flex;
  }
  .content .campaign2 .campaign2_blk .campaign2_img img {
    width: min(60rem, 41.7vw);
  }
  .content .campaign2 .campaign2_blk .campaign2_txt {
    padding-top: 0;
    padding-left: min(4rem, 2.8vw);
  }
  .content .campaign2 .campaign2_blk .campaign2_txt img {
    width: min(32.4rem, 22.5vw);
  }
  .content .campaign3 {
    margin-top: min(10rem, 6.9vw);
  }
  .content .campaign3 h3 img {
    width: min(93.5rem, 64.9vw);
  }
  .content .campaign3 .campaign3_txt01 {
    padding-top: min(4.1rem, 2.8vw);
  }
  .content .campaign3 .campaign3_txt01 img {
    width: min(100rem, 69.4vw);
  }
  .content .access {
    margin-top: min(10.6rem, 7.4vw);
  }
  .content .access h3 img {
    width: min(100rem, 69.4vw);
  }
  .content .access .access_blk {
    padding-top: min(1.9rem, 1.3vw);
    display: flex;
  }
  .content .access .access_blk .access_img iframe {
    width: min(60rem, 41.7vw);
    height: min(35.6rem, 24.7vw);
  }
  .content .access .access_blk .access_txt {
    padding-top: min(1rem, 0.7vw);
    padding-left: min(2rem, 1.4vw);
  }
  .content .access .access_blk .access_txt img {
    width: min(34.9rem, 24.2vw);
  }
  .content .access .access_cta {
    margin-top: min(10rem, 6.9vw);
  }
  .content .access .access_cta img {
    width: min(58rem, 40.3vw);
  }
  .content .cars {
    margin: min(22.2rem, 15.4vw) 0 min(4.2rem, 2.9vw);
  }
  .content .cars h2 img {
    width: min(54rem, 37.5vw);
  }
  .content .xc90 .car_blk h3,
  .content .xc60 .car_blk h3,
  .content .xc40 .car_blk h3 {
    height: min(36rem, 25vw);
    padding-top: min(8.4rem, 5.8vw);
  }
  .content .xc90 .car_blk h3 img,
  .content .xc60 .car_blk h3 img,
  .content .xc40 .car_blk h3 img {
    width: min(72.6rem, 50.4vw);
  }
  .content .xc90 .car_blk .car_img,
  .content .xc60 .car_blk .car_img,
  .content .xc40 .car_blk .car_img {
    margin-top: max(-19.4rem, -13.5vw);
  }
  .content .xc90 .car_blk .car_img img,
  .content .xc60 .car_blk .car_img img,
  .content .xc40 .car_blk .car_img img {
    width: min(73rem, 50.7vw);
  }
  .content .xc90 .xc_txt,
  .content .xc60 .xc_txt,
  .content .xc40 .xc_txt {
    text-align: left;
    padding-top: min(2.7rem, 1.9vw);
  }
  .content .xc90 .xc_txt .xc_anno,
  .content .xc60 .xc_txt .xc_anno,
  .content .xc40 .xc_txt .xc_anno {
    text-align: right;
    padding-top: 0;
    padding-right: min(3.8rem, 2.6vw);
  }
  .content .xc90 .xc_txt .xc_anno img,
  .content .xc60 .xc_txt .xc_anno img,
  .content .xc40 .xc_txt .xc_anno img {
    width: min(17.3rem, 12vw);
  }
  .content .xc60,
  .content .xc40 {
    margin-top: min(10.3rem, 7.2vw);
  }
  .content .xc90 .xc90_txt01 img {
    width: min(96.3rem, 66.9vw);
  }
  .content .xc60 .car_blk h3 img {
    width: min(73rem, 50.7vw);
  }
  .content .xc60 .xc60_txt01 img {
    width: min(94.9rem, 65.9vw);
  }
  .content .xc40 .car_blk h3 img {
    width: min(68.6rem, 47.6vw);
  }
  .content .xc40 .xc40_txt01 img {
    width: min(94.8rem, 65.8vw);
  }
  .content .safety {
    margin-top: min(14.3rem, 9.9vw);
  }
  .content .safety h2 img {
    width: min(24.9rem, 17.3vw);
  }
  .content .safety .safety_blk {
    padding-top: min(7.9rem, 5.5vw);
    display: flex;
    justify-content: space-between;
  }
  .content .safety .safety_blk li .safety_img img {
    width: min(31rem, 21.5vw);
  }
  .content .safety .safety_blk li .safety_txt {
    padding-top: min(2.5rem, 1.7vw);
  }
  .content .safety .safety_blk li.column01 .safety_txt img {
    width: min(30.4rem, 21.1vw);
  }
  .content .safety .safety_blk li.column02 .safety_txt img {
    width: min(30.5rem, 21.2vw);
  }
  .content .safety .safety_blk li.column03 .safety_txt img {
    width: min(29.9rem, 20.8vw);
  }
  .content .safety .safety_blk li + li {
    padding-top: 0;
  }
}
@media (min-width: 1425px) {
  :root {
    --width-variable: $size-content * 1px + 25px;
  }
}