.mainvisual {
  background-image: url(../img/mv-sp.jpg);
}

h2 {
  width: 85.33%;
  min-width: 300px;
  margin: 0 auto 20px;
  font-size: 3rem;
  line-height: 1.33;
}

@media screen and (min-width: 768px) {
  .mainvisual {
    background-image: url(../img/mv-bg.jpg);
  }
  .mainvisual::before {
    display: block;
  }
  .mainvisual::after {
    background-image: url(../img/mv.jpg);
  }

  h1 {
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  }

  h2 {
    width: 1060px;
    font-size: 5rem;
    margin-bottom: 60px;
  }
}
.firstbox {
  overflow-x: hidden;
  overflow-y: visible;
  padding: 40px 0 35px;
}
.firstbox .textbox {
  width: 85.33%;
  min-width: 300px;
  margin: 0 auto;
}
.firstbox .textbox .text + .text {
  padding-top: 65px;
}
.firstbox .photobox {
  margin: 65px 0;
  position: relative;
}
.firstbox .photo {
  overflow: hidden;
}
.firstbox .box01 .text:nth-child(2) {
  background: url(../img/img01.svg) right 30px top no-repeat;
}
.firstbox .box01 .photobox {
  padding-bottom: 26.4%;
}
.firstbox .box01 .photobox::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -32px;
  top: -108px;
  background: url(../img/circle200.svg) 0 0 no-repeat;
  width: 200px;
  height: 200px;
}
.firstbox .box01 .photobox::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: -37px;
  bottom: -16px;
  background: url(../img/hexagon169.svg) 0 0 no-repeat;
  width: 169px;
  height: 185px;
}
.firstbox .box01 .photo:first-child {
  width: 69.33%;
  min-width: 260px;
  margin-left: auto;
  border-radius: 20px 0 0 20px;
}
.firstbox .box01 .photo:last-child {
  width: 49.06%;
  min-width: 184px;
  position: absolute;
  left: 4%;
  bottom: 0;
  border-radius: 10px;
}
.firstbox .box02 .text:nth-child(2) {
  background: url(../img/img02.svg) right 45px top no-repeat;
}
.firstbox .box02 .photobox::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -31px;
  top: -101px;
  background: url(../img/hexagon169.svg) 0 0 no-repeat;
  width: 169px;
  height: 185px;
}
.firstbox .box02 .photobox .photo {
  border-radius: 0 20px 20px 0;
  min-width: 300px;
  width: 80%;
}
.firstbox .box03 .text:nth-child(2) {
  background: url(../img/img03.svg) center 20px no-repeat;
}
.firstbox .box03 .photobox {
  padding-bottom: 26.4%;
}
.firstbox .box03 .photobox::before {
  content: "";
  position: absolute;
  z-index: -1;
  right: -67px;
  bottom: -70px;
  background: url(../img/circle200.svg) 0 0 no-repeat;
  width: 200px;
  height: 200px;
}
.firstbox .box03 .photobox::after {
  content: "";
  position: absolute;
  z-index: -1;
  right: 61px;
  bottom: 9px;
  background: url(../img/img04.svg) 0 0 no-repeat;
  width: 25px;
  height: 36px;
}
.firstbox .box03 .photo:first-child {
  width: 69.33%;
  min-width: 260px;
  margin-left: auto;
  border-radius: 20px 0 0 20px;
}
.firstbox .box03 .photo:last-child {
  width: 49.06%;
  min-width: 184px;
  position: absolute;
  left: 4%;
  bottom: 0;
  border-radius: 10px;
}
.firstbox .box04 .text:nth-child(2) {
  background: url(../img/img05.svg) center 20px no-repeat;
}
.firstbox .box04 .text:nth-child(3) {
  background: url(../img/img06.svg) right 19px top 20px no-repeat;
}
.firstbox .box04 .photobox .photo {
  border-radius: 20px 0 0 20px;
  margin-left: auto;
  min-width: 300px;
  width: 80%;
}
@media screen and (min-width: 768px) {
  .firstbox {
    padding: 96px 0 158px;
  }
  .firstbox [class^="box0"] {
    width: 1060px;
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    position: relative;
  }
  .firstbox .textbox {
    flex: 0 0 520px;
    width: auto;
    margin: 0;
    line-height: 2;
  }
  .firstbox .textbox .text:nth-child(n) {
    background-image: none;
  }
  .firstbox .photobox {
    flex: 0 0 460px;
    width: 460px;
    margin: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  .firstbox .photobox .photo + .photo {
    margin-top: 50px;
  }
  .firstbox .box01 .photobox {
    padding-bottom: 0;
  }
  .firstbox .box01 .photobox::before {
    display: none;
  }
  .firstbox .box01 .photobox::after {
    background-image: url(../img/hexagon368.svg);
    width: 368px;
    height: 402px;
    bottom: -122px;
    right: -183px;
  }
  .firstbox .box01 .photobox .photo:nth-child(n) {
    position: static;
    width: auto;
    border-radius: 20px;
  }
  .firstbox .box02 .textbox {
    flex: 0 0 100%;
  }
  .firstbox .box02 .text:first-child {
    width: 520px;
    padding-top: 65px;
    padding-bottom: 160px;
    background: url(../img/img01-pc.svg) center bottom 28px no-repeat;
  }
  .firstbox .box02 .text:nth-child(2) {
    width: 520px;
    margin-left: auto;
    padding: 0 0 192px;
    background-image: url(../img/img02-pc.svg);
    background-position: center bottom;
  }
  .firstbox .box02 .photobox {
    right: auto;
    top: auto;
    left: 0;
    bottom: 20px;
  }
  .firstbox .box02 .photobox::before {
    background-image: url(../img/hexagon368.svg);
    width: 368px;
    height: 402px;
    right: auto;
    left: -213px;
    top: -152px;
  }
  .firstbox .box02 .photobox .photo {
    width: auto;
    border-radius: 20px;
  }
  .firstbox .box03 {
    margin-top: 92px;
  }
  .firstbox .box03 .photobox {
    padding-bottom: 0;
  }
  .firstbox .box03 .photobox::before {
    background-image: url(../img/hexagon368.svg);
    width: 368px;
    height: 402px;
    right: -260px;
    bottom: -125px;
  }
  .firstbox .box03 .photobox::after {
    display: none;
  }
  .firstbox .box03 .photobox .photo:nth-child(n) {
    position: static;
    width: 400px;
    border-radius: 20px;
    margin-left: 20px;
    margin-right: auto;
  }
  .firstbox .box04 .textbox {
    flex-basis: 100%;
  }
  .firstbox .box04 .text:first-child {
    width: 520px;
    padding: 65px 0 190px;
    background: url(../img/img03-pc.svg) right 194px bottom 48px no-repeat;
  }
  .firstbox .box04 .text:nth-child(2) {
    width: 520px;
    padding-top: 0;
    margin-left: auto;
  }
  .firstbox .box04 .text:nth-child(3) {
    width: 520px;
    margin-left: auto;
  }
  .firstbox .box04 .photobox {
    right: auto;
    top: 380px;
    left: 0;
  }
  .firstbox .box04 .photobox .photo {
    width: auto;
    border-radius: 20px;
    margin-left: 0;
  }
}