@charset "UTF-8";
@media screen and (max-width: 750px) {
    .firstviewBg {
        width: 100%;
        transform: unset;
        padding-top: 12vw;
    }
}
#disaster {
  background-color: #a8d8f0;
  padding: 150px 0 120px;
}
@media only screen and (max-width: 750px) {
  #disaster {
    padding: 8vw 0 5.3333333333vw;
  }
}
#disaster .wrap {
  text-align: center;
}
#disaster .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 65px auto 0;
}
@media only screen and (max-width: 750px) {
  #disaster .container {
    justify-content: center;
    width: 80.8%;
    margin-top: 6.6666666667vw;
  }
}
#disaster .container .text {
  padding: 30px 0 0;
}
@media only screen and (min-width: 751px) {
  #disaster .container .text {
    max-width: 47.2%;
  }
}
@media only screen and (max-width: 750px) {
  #disaster .container .text {
    padding-top: 0;
  }
}
#disaster .container .text p {
  font-size: 20px;
  text-align: left;
  letter-spacing: 0.025em;
  line-height: 1.75;
}
@media only screen and (max-width: 750px) {
  #disaster .container .text p {
    font-size: 3.2vw;
    text-align: center;
  }
}
#disaster .container .text p:not(:first-of-type) {
  margin-top: 1.75em;
}
@media only screen and (max-width: 750px) {
  #disaster .container .text .image {
    width: 100%;
    margin-top: 6vw;
  }
}
#disaster .container .image {
  width: 52.8%;
}
#disaster .image02 {
  max-width: 809px;
  margin: 60px auto 0;
}
@media only screen and (max-width: 750px) {
  #disaster .image02 {
    width: 72.4%;
    margin-top: 5.3333333333vw;
  }
}
#disaster .box {
  text-align: left;
  margin-top: 75px;
}
@media only screen and (max-width: 750px) {
  #disaster .box {
    margin-top: 9.3333333333vw;
  }
  #disaster .box + .box {
    margin-top: 5.3333333333vw;
  }
}
@media only screen and (min-width: 751px) {
  #disaster .box:nth-of-type(even) .box__container {
    flex-direction: row-reverse;
  }
}
#disaster .box .heading {
  max-width: 985px;
  margin: 0 auto 45px;
}
@media only screen and (max-width: 750px) {
  #disaster .box .heading {
    max-width: 79.0666666667vw;
    margin-bottom: 2.6666666667vw;
  }
}
#disaster .box__container {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
}
@media only screen and (max-width: 750px) {
  #disaster .box__container {
    flex-direction: column-reverse;
  }
}
#disaster .box__container--01 .image {
  width: 50%;
}
@media only screen and (max-width: 750px) {
  #disaster .box__container--01 .image {
    width: 83.3333333333%;
    margin: 0 auto;
  }
}
#disaster .box__container--01 .text {
  width: 47.2%;
  padding: 30px 0 0;
}
@media only screen and (max-width: 750px) {
  #disaster .box__container--01 .text {
    width: 80%;
    margin: 0 auto;
    padding-top: 0;
  }
}
#disaster .box__container--02 .image {
  width: 46.3%;
}
#disaster .box__container--02 .text {
  width: 50.9%;
}
@media only screen and (max-width: 750px) {
  #disaster .box__container--02 .text {
    width: 80%;
    margin: 0 auto;
    padding-top: 0;
  }
  #disaster .box__container--02 .text .image {
    width: 100%;
    margin-top: 5.3333333333vw;
  }
}
#disaster .box .text p {
  font-size: 20px;
  font-feature-settings: "palt";
}
@media only screen and (max-width: 750px) {
  #disaster .box .text p {
    font-size: 3.2vw;
  }
}
#disaster .box .text p .mark {
  font-size: 14px;
}
@media only screen and (max-width: 750px) {
  #disaster .box .text p .mark {
    font-size: 2.1333333333vw;
  }
}
#disaster .box .notes {
  margin-top: 35px;
}
@media only screen and (max-width: 750px) {
  #disaster .box .notes {
    margin-top: 4vw;
  }
}
#disaster .box .notes p {
  font-size: 14px;
  font-feature-settings: "palt";
  margin-top: 0;
}
@media only screen and (max-width: 750px) {
  #disaster .box .notes p {
    font-size: 2.4vw;
  }
}
#disaster .box .notes p + p {
  margin-top: unset;
}

#recommend {
  position: relative;
  background-image: url(../img/wave-bg-top_08.png), url(../img/wave-bg-top_02.png), url(/_prm/common/inc/lp304/img/product/img03_04.webp);
  background-repeat: repeat-x, repeat-x, no-repeat;
  background-color: #fff;
  background-position: center top, center bottom, center top;
  background-size: auto 50px, auto 50px,cover;
  height: 485px;
}
@media only screen and (max-width: 750px) {
  #recommend {
    background-image: url(../img/wave-bg-top_08.png), url(../img/wave-bg-top_02.png), url(/_prm/common/inc/lp304/img/product/img03_04.webp);
    background-size: auto 6.6666666667vw, auto 6.6666666667vw, 100% auto;
    background-position: right top -2.6666666667vw, right bottom, center top;
    height: 53.3333333333vw;
  }
}
#recommend .wrap {
  text-align: center;
  padding: 55px 0 0 10px;
}
@media only screen and (max-width: 750px) {
  #recommend .wrap {
    padding: 5vw 0 0 9.6vw;
    text-align: center;
  }
}
#recommend .hl-01 {
  font-size: 35px;
  line-height: 1.1;
  text-shadow: 0 0 27.42px rgba(255, 255, 255, 33.58);
}
@media only screen and (max-width: 750px) {
  #recommend .hl-01 {
    font-size: 4.6666666667vw;
    text-shadow: 0 0 1.656vw rgba(0, 0, 0, 0.1);
  }
}