.header{
  background: #b34900;
  height:100%;
  text-align: center;
  color: #fff;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.body {
  background-color: white;
}

* {
  margin: 0px;
  padding: 0px;
}

.fv {
  background-image: url(./img/fv.png);
  background-size: cover;
  height: 0;
  padding-top: 80%;
  width: 100%;
}
@media (max-width: 767px) {
  .fv {
    background-image: url(./img/fv-sp.png);
    padding-top: 106.2%;
  }
}

.cta1 {
  background-image: url(./img/cta1-2.png);
  background-size: cover;
  cursor: pointer;
  height: 0;
  padding-top: 15.6%;
  width: 100%;
}
@media (max-width: 767px) {
  .cta1 {
    background-image: url(./img/cta1-sp-2.png);
    padding-top: 26%;
  }
}

.cta1:hover {
  opacity: 0.8;
}

.main-content1 {
  width: 100%;
  position: relative;
}

.main-contents1-img {
  width: 100%;
}

@media (min-width: 768px) {
  .main-contents1-img-sp {
    display: none;
  }
}

@media (max-width: 768px) {
  .main-contents1-img-sp {
    display: block;
    width: 100%;
  }
  .main-contents1-img {
    display: none;
  }
}

.wrapper {
  margin: 0 auto;
  width: 65%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media (max-width: 768px) {
  .wrapper {
    width: 90%;
  }
}

.movie-wrap {
  position: relative;
  padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/
  height: 0;
  overflow: hidden;
}

.movie-wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.main-content2 {
  background-image: url(./img/main-content2.png);
  background-size: cover;
  height: 0;
  padding-top: 232%;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content2 {
    background-image: url(./img/main-content2-sp.png);
    padding-top: 353%;
  }
}

.main-content3 {
  background-image: url(./img/main-content3.png);
  background-size: cover;
  height: 0;
  padding-top: 239%;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content3 {
    background-image: url(./img/main-content3-sp.png);
    padding-top: 448%;
  }
}

.main-content4 {
  background-image: url(./img/main-content4.png);
  background-size: cover;
  height: 0;
  padding-top: 197%;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content4 {
    background-image: url(./img/main-content4-sp.png);
    padding-top: 362%;
  }
}

.promise {
  background-image: url(./img/promise.png);
  background-size: cover;
  height: 0;
  padding-top: 42.1%;
  width: 100%;
}

@media (max-width: 768px) {
  .promise {
    background-image: url(./img/promise-sp.png);
    padding-top: 67.8%;
  }
}

.cta2 {
  background-image: url(./img/cta2-5.png);
  background-size: cover;
  cursor: pointer;
  height: 0;
  padding-top: 46.9%;
  width: 100%;
}

@media (max-width: 768px) {
  .cta2 {
    background-image: url(./img/cta2-sp-4.png);
    padding-top: 84.5%;
  }
}

.cta2:hover {
  opacity: 0.8;
}

.main-content5-1 {
  background-image: url(./img/main-content5-1.png);
  background-size: cover;
  height: 0;
  padding-top: 116%;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content5-1 {
    background-image: url(./img/main-content5-1-sp.png);
    padding-top: 159%;
  }
}

.main-content5-2 {
  background-image: url(./img/main-content5-2.png);
  background-size: cover;
  height: 0;
  padding-top: 153%;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content5-2 {
    background-image: url(./img/main-content5-2-sp.png);
    padding-top: 252%;
  }
}

.main-content6 {
  background-image: url(./img/main-content6-3.png);
  background-size: cover;
  height: 0;
  padding-top: 291%;
  width: 100%;
}

@media (max-width: 768px) {
  .main-content6 {
    background-image: url(./img/main-content6-sp.png);
    padding-top: 169%;
  }
}

@media (max-width: 768px) {
  .main-content7-sp {
    background-image: url(./img/main-content7-sp-3.png);
    background-size: cover;
    height: 0;
    padding-top: 333%;
    width: 100%;
  }
}