@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  max-width: 100vw;
}

body {
  font-family: "Noto Sans JP", sans-serif;
  line-height: 33px;
  font-size: 18px;
  font-weight: 400;
  background-color: #fffcf8;
  color: #141414;
  overflow-x: hidden;
  max-width: 100vw;
}

.wrapper {
  width: 90%;
  max-width: 1280px;
  margin: 0 auto;
}

.hero-bg {
  height: 2000px;
}
@media only screen and (max-width: 1350px) {
  .hero-bg {
    height: 1950px;
  }
}
@media only screen and (max-width: 1250px) {
  .hero-bg {
    height: 1850px;
  }
}
@media only screen and (max-width: 1150px) {
  .hero-bg {
    height: 1750px;
  }
}
@media only screen and (max-width: 1050px) {
  .hero-bg {
    height: 1650px;
  }
}
@media only screen and (max-width: 950px) {
  .hero-bg {
    height: 1500px;
  }
}
@media only screen and (max-width: 850px) {
  .hero-bg {
    height: 1400px;
  }
}
@media only screen and (max-width: 750px) {
  .hero-bg {
    height: 1350px;
  }
}

.hero-top {
  width: 100%;
  position: absolute;
  top: -160px;
  left: 0;
  right: 0;
}
@media only screen and (max-width: 700px) {
  .hero-top {
    top: -140px;
  }
}
@media only screen and (max-width: 650px) {
  .hero-top {
    top: -120px;
  }
}
@media only screen and (max-width: 600px) {
  .hero-top {
    top: -100px;
  }
}
@media only screen and (max-width: 550px) {
  .hero-top {
    top: -80px;
  }
}
@media only screen and (max-width: 500px) {
  .hero-top {
    top: -60px;
  }
}
@media only screen and (max-width: 450px) {
  .hero-top {
    top: -40px;
  }
}
@media only screen and (max-width: 400px) {
  .hero-top {
    top: -20px;
  }
}
@media only screen and (max-width: 350px) {
  .hero-top {
    top: 0;
  }
}

.hero-bottom {
  width: 100%;
  position: absolute;
  bottom: 0px;
  left: 0;
  right: 0;
}

@media only screen and (max-width: 750px) {
  .header-hero {
    background-image: url("../images/bg800@2x.png");
    background-size: cover;
    background-position: bottom;
    background-repeat: no-repeat;
  }
}
@media only screen and (max-width: 650px) {
  .header-hero {
    background-image: url("../images/bg700@2x.png");
  }
}
@media only screen and (max-width: 550px) {
  .header-hero {
    background-image: url("../images/bg600@2x.png");
  }
}
@media only screen and (max-width: 450px) {
  .header-hero {
    background-image: url("../images/bg500@2x.png");
  }
}
@media only screen and (max-width: 350px) {
  .header-hero {
    background-image: url("../images/bg400@2x.png");
  }
}