@charset "UTF-8";
/*********************************/
/*          MainVisual           */
/*********************************/
.mv {
  background-image: url("../img/01_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mv__inner {
  padding-top: 10vw;
  padding-bottom: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv__inner {
    padding-top: 60px;
    padding-bottom: 40px;
  }
}
.mv__body {
  position: relative;
}
.mv__img {
  max-width: 50.5vw;
  width: 100%;
  margin-right: 2.5vw;
  margin-left: auto;
  margin-top: 4.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv__img {
    max-width: 303px;
    margin-right: 15px;
    margin-top: 28px;
  }
}
.mv__catch {
  position: absolute;
  top: 3.3333333333vw;
  left: 15vw;
  max-width: 25.6666666667vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv__catch {
    top: 20px;
    left: 90px;
    max-width: 154px;
  }
}
.mv__text {
  position: absolute;
  bottom: 11.6666666667vw;
  left: 3.3333333333vw;
  max-width: 11.6666666667vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv__text {
    bottom: 70px;
    left: 20px;
    max-width: 70px;
  }
}
.mv__attention {
  position: absolute;
  bottom: 0vw;
  left: 0vw;
  font-size: 2.3333333333vw;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1025px) {
  .mv__attention {
    font-size: 14px;
    bottom: 0px;
    left: 0px;
  }
}
.mv__coupon {
  position: relative;
  margin-top: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .mv__coupon {
    margin-top: 20px;
  }
}
.mv__coupon p {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: 4.3333333333vw;
  line-height: 1;
  top: 46.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv__coupon p {
    font-size: 24px;
    top: 280px;
  }
}
.mv__coupon p span {
  font-family: "Geologica", sans-serif;
  font-weight: 400;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1025px) {
  .mv__coupon p span {
    font-size: 30px;
  }
}
.mv__coupon p span span {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  line-height: 1;
  font-size: 4.8333333333vw;
}
@media screen and (min-width: 1025px) {
  .mv__coupon p span span {
    font-size: 29px;
  }
}

/*       MVパターン変更用CSS       */
/*********************************/
/*       ver02       */
/*********************************/
.mv02 {
  background-image: url("../img/02/01_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mv02__inner {
  position: relative;
  padding-top: 5vw;
  padding-bottom: 5vw;
}
@media screen and (min-width: 1025px) {
  .mv02__inner {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}
.mv02__title {
  max-width: 31.8333333333vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv02__title {
    max-width: 191px;
  }
}
.mv02__body {
  position: relative;
}
.mv02__img {
  position: absolute;
  top: -18.3333333333vw;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: 43.5vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv02__img {
    max-width: 261px;
    top: -110px;
  }
}
.mv02__catch {
  position: absolute;
  top: 7.5vw;
  right: 6.6666666667vw;
  max-width: 22.3333333333vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv02__catch {
    top: 45px;
    right: 40px;
    max-width: 134px;
  }
}
.mv02__text {
  max-width: 13.1666666667vw;
  width: 100%;
  padding-top: 10.8333333333vw;
  margin-left: 9.1666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv02__text {
    max-width: 79px;
    padding-top: 65px;
    margin-left: 55px;
  }
}
.mv02__components {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 11.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv02__components {
    margin-top: 70px;
  }
}
.mv02__component {
  max-width: 28.1666666667vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv02__component {
    max-width: 169px;
  }
}
.mv02__attention {
  max-width: 88.3333333333vw;
  width: 100%;
  margin-top: 1.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv02__attention {
    max-width: 530px;
    margin-top: 10px;
  }
}
.mv02__coupon {
  position: relative;
  margin-top: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .mv02__coupon {
    margin-top: 20px;
  }
}
.mv02__coupon p {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: 4.3333333333vw;
  line-height: 1;
  top: 46.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv02__coupon p {
    font-size: 24px;
    top: 280px;
  }
}
.mv02__coupon p span {
  font-family: "Geologica", sans-serif;
  font-weight: 400;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1025px) {
  .mv02__coupon p span {
    font-size: 30px;
  }
}
.mv02__coupon p span span {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  line-height: 1;
  font-size: 4.8333333333vw;
}
@media screen and (min-width: 1025px) {
  .mv02__coupon p span span {
    font-size: 29px;
  }
}

/*       ver03       */
/*********************************/
.mv03 {
  background-image: url("../img/03/01_bg.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mv03__inner {
  position: relative;
  padding-top: 6.6666666667vw;
  padding-bottom: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv03__inner {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}
.mv03__title {
  max-width: 23vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv03__title {
    max-width: 138px;
  }
}
.mv03__body {
  position: relative;
}
.mv03__img {
  position: absolute;
  top: -21.6666666667vw;
  left: 0;
  right: 0;
  margin-inline: auto;
  max-width: 45.1666666667vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv03__img {
    max-width: 271px;
    top: -130px;
  }
}
.mv03__catch {
  position: absolute;
  top: 7.5vw;
  right: 11.6666666667vw;
  max-width: 16vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv03__catch {
    top: 45px;
    right: 70px;
    max-width: 96px;
  }
}
.mv03__text {
  max-width: 21.6666666667vw;
  width: 100%;
  padding-top: 6.6666666667vw;
  margin-left: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv03__text {
    max-width: 130px;
    padding-top: 40px;
    margin-left: 40px;
  }
}
.mv03__component {
  position: absolute;
  max-width: 25.5vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .mv03__component {
    max-width: 153px;
  }
}
.mv03__component.mv03__component--01 {
  top: 29.1666666667vw;
  right: 6.6666666667vw;
  z-index: 3;
}
@media screen and (min-width: 1025px) {
  .mv03__component.mv03__component--01 {
    top: 175px;
    right: 40px;
  }
}
.mv03__component.mv03__component--02 {
  top: 48.3333333333vw;
  right: -3.3333333333vw;
  z-index: 2;
}
@media screen and (min-width: 1025px) {
  .mv03__component.mv03__component--02 {
    top: 290px;
    right: -20px;
  }
}
.mv03__component.mv03__component--03 {
  bottom: 8.3333333333vw;
  right: 6.6666666667vw;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .mv03__component.mv03__component--03 {
    bottom: 50px;
    right: 40px;
  }
}
.mv03__attention {
  max-width: 91.3333333333vw;
  width: 100%;
  margin-top: 15vw;
}
@media screen and (min-width: 1025px) {
  .mv03__attention {
    max-width: 548px;
    margin-top: 90px;
  }
}
.mv03__coupon {
  position: relative;
  margin-top: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .mv03__coupon {
    margin-top: 20px;
  }
}
.mv03__coupon p {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: 4.3333333333vw;
  line-height: 1;
  top: 46.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .mv03__coupon p {
    font-size: 24px;
    top: 280px;
  }
}
.mv03__coupon p span {
  font-family: "Geologica", sans-serif;
  font-weight: 400;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1025px) {
  .mv03__coupon p span {
    font-size: 30px;
  }
}
.mv03__coupon p span span {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  line-height: 1;
  font-size: 4.8333333333vw;
}
@media screen and (min-width: 1025px) {
  .mv03__coupon p span span {
    font-size: 29px;
  }
}

/*********************************/
/*          ACHIEVEMENT          */
/*********************************/
.achievement {
  background-image: url(../img/02_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 150vw;
  padding-top: 13.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .achievement {
    padding-top: 80px;
    height: 900px;
  }
}

.achievement__title {
  max-width: 67.1666666667vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .achievement__title {
    max-width: 403px;
  }
}

.achievement__img {
  max-width: 70vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .achievement__img {
    max-width: 420px;
    margin-top: 20px;
  }
}

/*********************************/
/*             PROBLEM           */
/*********************************/
.problem {
  background-image: url(../img/03_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 16.6666666667vw;
  height: 150vw;
}
@media screen and (min-width: 1025px) {
  .problem {
    padding-top: 100px;
    height: 900px;
  }
}

.problem__title {
  max-width: 76.6666666667vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .problem__title {
    max-width: 460px;
  }
}

.problem__list {
  position: relative;
  margin-top: 8.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .problem__list {
    margin-top: 52px;
  }
}

.problem__item {
  position: absolute;
}

.problem__item--01 {
  max-width: 50.3333333333vw;
  width: 100%;
  top: 0;
  left: 7.5vw;
}
@media screen and (min-width: 1025px) {
  .problem__item--01 {
    max-width: 302px;
    top: 0;
    left: 45px;
  }
}

.problem__item--02 {
  max-width: 46.3333333333vw;
  width: 100%;
  top: 14.6666666667vw;
  right: 5vw;
}
@media screen and (min-width: 1025px) {
  .problem__item--02 {
    max-width: 278px;
    top: 88px;
    right: 30px;
  }
}

.problem__item--03 {
  max-width: 46.6666666667vw;
  width: 100%;
  top: 27.1666666667vw;
  left: 4.1666666667vw;
}
@media screen and (min-width: 1025px) {
  .problem__item--03 {
    max-width: 280px;
    top: 163px;
    left: 25px;
  }
}

.problem__item--04 {
  max-width: 52.6666666667vw;
  width: 100%;
  top: 44vw;
  right: 4.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .problem__item--04 {
    max-width: 316px;
    top: 264px;
    right: 28px;
  }
}

.cause {
  padding-top: 11.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .cause {
    padding-top: 70px;
  }
}

.cause__title {
  max-width: 76.6666666667vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .cause__title {
    max-width: 460px;
  }
}

.cause__text {
  max-width: 78.3333333333vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 10vw;
}
@media screen and (min-width: 1025px) {
  .cause__text {
    max-width: 470px;
    margin-top: 60px;
  }
}

.solution__top {
  margin-top: 10.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .solution__top {
    margin-top: 62px;
  }
}

.solution__top {
  background-image: url(../img/05_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-bottom: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .solution__top {
    padding-bottom: 40px;
  }
}

.solution__title01 {
  max-width: 75.1666666667vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .solution__title01 {
    margin-top: 40px;
    max-width: 451px;
  }
}

.solution__list {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.solution__item {
  position: absolute;
  top: 0;
  left: 10vw;
  max-width: 43vw;
  width: 100%;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .solution__item {
    max-width: 258px;
    left: 60px;
  }
}

.solution__item:last-child {
  left: auto;
  right: 10vw;
  z-index: 0;
}
@media screen and (min-width: 1025px) {
  .solution__item:last-child {
    left: auto;
    right: 60px;
  }
}

.solution__title02 img {
  max-width: 71vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 51.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .solution__title02 img {
    margin-top: 310px;
    max-width: 426px;
  }
}

.solution__bottom {
  position: relative;
  background-image: url(../img/06_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 25vw;
  padding-bottom: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .solution__bottom {
    padding-top: 150px;
    padding-bottom: 20px;
  }
}

.solution__bubble {
  position: absolute;
  top: -5vw;
  left: 2.5vw;
  max-width: 19.6666666667vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .solution__bubble {
    max-width: 118px;
    top: -30px;
    left: 15px;
  }
}

.solution__bubble img {
  mix-blend-mode: color-dodge;
  opacity: 0.8;
}

.solution__bottom-inner {
  position: relative;
}

.solution__product {
  max-width: 16.6666666667vw;
  width: 100%;
  margin-left: auto;
  margin-right: 7.5vw;
}
@media screen and (min-width: 1025px) {
  .solution__product {
    max-width: 100px;
    margin-right: 45px;
  }
}

.solution__merit {
  max-width: 29.5vw;
  width: 100%;
  position: absolute;
}
@media screen and (min-width: 1025px) {
  .solution__merit {
    max-width: 177px;
  }
}

.solution__merit--01 {
  top: 2.5vw;
  left: 17.1666666667vw;
}
@media screen and (min-width: 1025px) {
  .solution__merit--01 {
    top: 15px;
    left: 103px;
  }
}

.solution__merit--02 {
  bottom: 0vw;
  left: 1.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .solution__merit--02 {
    bottom: 0px;
    left: 10px;
  }
}

.solution__merit--03 {
  bottom: 0vw;
  left: 32.5vw;
}
@media screen and (min-width: 1025px) {
  .solution__merit--03 {
    bottom: 0px;
    left: 195px;
  }
}

.solution__attentions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 3vw;
  row-gap: 1.3333333333vw;
  margin-top: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .solution__attentions {
    margin-top: 20px;
    column-gap: 18px;
    row-gap: 8px;
  }
}

.solution__attention {
  color: #646061;
  font-size: 1.9166666667vw;
  letter-spacing: 0.025em;
}
@media screen and (min-width: 1025px) {
  .solution__attention {
    font-size: 11.5px;
  }
}

.point {
  position: relative;
  overflow: hidden;
}

.point::before {
  content: "";
  position: absolute;
  top: 16.6666666667vw;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/07_bg.png);
  background-repeat: repeat;
  z-index: 0;
}
@media screen and (min-width: 1025px) {
  .point::before {
    top: 100px;
  }
}

.point__item {
  position: relative;
  margin-top: 5vw;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .point__item {
    margin-top: 30px;
  }
}

.point__item:first-child {
  margin-top: 1.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .point__item:first-child {
    margin-top: 10px;
  }
}

.point__body {
  padding-top: 5vw;
  padding-bottom: 5vw;
}
@media screen and (min-width: 1025px) {
  .point__body {
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

.point__text {
  font-size: 3.3333333333vw;
  padding-top: 5vw;
  letter-spacing: 0.05em;
  line-height: 1.6;
}
@media screen and (min-width: 1025px) {
  .point__text {
    padding-top: 30px;
    font-size: 20px;
  }
}

.point__attention {
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .point__attention {
    margin-top: 40px;
  }
}

.introduction {
  background-image: url(../img/08_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 11vw;
  padding-bottom: 16.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .introduction {
    padding-top: 66px;
    padding-bottom: 100px;
  }
}

.introduction__title {
  max-width: 75vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .introduction__title {
    max-width: 450px;
  }
}

.introduction__text {
  font-size: 2.6666666667vw;
  line-height: 1.4;
  letter-spacing: 0.05em;
}
@media screen and (min-width: 1025px) {
  .introduction__text {
    font-size: 16px;
  }
}

.ba {
  background-color: #f4eae3;
}

.ba__inner {
  position: relative;
  padding-top: 12vw;
  padding-bottom: 9vw;
}
@media screen and (min-width: 1025px) {
  .ba__inner {
    padding-top: 72px;
    padding-bottom: 54px;
  }
}

.ba__title01 {
  max-width: 73.3333333333vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .ba__title01 {
    max-width: 440px;
  }
}

.ba__text {
  margin-top: 6.6666666667vw;
  text-align: center;
  font-weight: 400;
  font-size: 3vw;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 1025px) {
  .ba__text {
    margin-top: 40px;
    font-size: 18px;
  }
}

.ba__img01 {
  margin-top: 10vw;
}
@media screen and (min-width: 1025px) {
  .ba__img01 {
    margin-top: 60px;
  }
}

.ba__title02 {
  position: relative;
  max-width: 69.1666666667vw;
  width: 100%;
  margin-top: 6.6666666667vw;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .ba__title02 {
    max-width: 415px;
    margin-top: 40px;
  }
}

.ba__img02 {
  margin-top: 10vw;
}
@media screen and (min-width: 1025px) {
  .ba__img02 {
    margin-top: 60px;
  }
}

.ba__img03 {
  max-width: 81.6666666667vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .ba__img03 {
    max-width: 490px;
    margin-top: 40px;
  }
}

.ba__attention {
  text-align: center;
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .ba__attention {
    margin-top: 40px;
  }
}

.ba__flower {
  position: absolute;
}

.ba__flower--top-top {
  top: -6.6666666667vw;
  left: 0vw;
  max-width: 30.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .ba__flower--top-top {
    top: -40px;
    left: 0;
    max-width: 184px;
  }
}

.ba__flower--top-bottom {
  top: 30vw;
  right: 0vw;
  max-width: 16.8333333333vw;
}
@media screen and (min-width: 1025px) {
  .ba__flower--top-bottom {
    top: 180px;
    right: 0;
    max-width: 101px;
  }
}

.ba__flower--middle-top {
  top: 154.1666666667vw;
  right: -5vw;
  max-width: 18.1666666667vw;
}
@media screen and (min-width: 1025px) {
  .ba__flower--middle-top {
    top: 925px;
    right: -30px;
    max-width: 109px;
  }
}

.ba__flower--middle-bottom {
  top: 195vw;
  left: 0vw;
  max-width: 16.8333333333vw;
}
@media screen and (min-width: 1025px) {
  .ba__flower--middle-bottom {
    top: 1170px;
    left: 0;
    max-width: 101px;
  }
}

.compare {
  position: relative;
  background-image: url(../img/10_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 13.3333333333vw;
  padding-bottom: 10vw;
  background-color: #000;
  overflow: visible;
}
@media screen and (min-width: 1025px) {
  .compare {
    padding-top: 80px;
    padding-bottom: 60px;
  }
}

.compare__bubble {
  position: absolute;
}

.compare__bubble--top {
  width: 16.1666666667vw;
  top: -18.3333333333vw;
  left: 0vw;
}
@media screen and (min-width: 1025px) {
  .compare__bubble--top {
    width: 97px;
    top: -110px;
    left: 0px;
  }
}

.compare__bubble--bottom {
  max-width: 26vw;
  bottom: 0vw;
  right: -2.5vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .compare__bubble--bottom {
    max-width: 156px;
    bottom: 0px;
    right: 15px;
  }
}

.compare__bubble img {
  display: block;
  mix-blend-mode: color-dodge;
  opacity: 0.8;
}

.compare__title {
  max-width: 90vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .compare__title {
    max-width: 540px;
  }
}

.compare__text {
  text-align: center;
  margin-top: 6.6666666667vw;
  letter-spacing: -0.05em;
}
@media screen and (min-width: 1025px) {
  .compare__text {
    margin-top: 40px;
  }
}

.compare__img {
  max-width: 90vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 10vw;
}
@media screen and (min-width: 1025px) {
  .compare__img {
    max-width: 540px;
    margin-top: 60px;
  }
}

.compare__attention {
  margin-top: 6.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .compare__attention {
    margin-top: 40px;
  }
}

.image__list {
  background-image: url(../img/11_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 20vw;
  padding-bottom: 13.3333333333vw;
  margin-top: -18.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .image__list {
    padding-top: 120px;
    padding-bottom: 80px;
    margin-top: -110px;
  }
}

.image__item {
  margin-top: 4.1666666667vw;
}
@media screen and (min-width: 1025px) {
  .image__item {
    margin-top: 25px;
  }
}

.voice {
  background-image: url(../img/12_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.voice__inner {
  padding-top: 8.3333333333vw;
  padding-bottom: 13.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .voice__inner {
    padding-top: 50px;
    padding-bottom: 80px;
  }
}

.voice__title {
  max-width: 75.8333333333vw;
  width: 100%;
  margin-inline: auto;
  padding-left: 4.1666666667vw;
}
@media screen and (min-width: 1025px) {
  .voice__title {
    max-width: 455px;
    padding-left: 25px;
  }
}

.voice__list {
  margin-top: 13.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .voice__list {
    margin-top: 80px;
  }
}

.voice__item {
  margin-top: 5vw;
}
@media screen and (min-width: 1025px) {
  .voice__item {
    margin-top: 30px;
  }
}

.concept {
  background-image: url(../img/14_bg.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 13.3333333333vw;
  padding-bottom: 13.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .concept {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.concept__logo {
  max-width: 20vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .concept__logo {
    max-width: 120px;
  }
}

.concept__title {
  max-width: 83.3333333333vw;
  width: 100%;
  margin-inline: auto;
  margin-top: 10vw;
}
@media screen and (min-width: 1025px) {
  .concept__title {
    max-width: 500px;
    margin-top: 60px;
  }
}

.concept__img {
  margin-top: 10vw;
}
@media screen and (min-width: 1025px) {
  .concept__img {
    margin-top: 60px;
  }
}

.concept__text {
  margin-top: 10vw;
  line-height: 1.9;
}
@media screen and (min-width: 1025px) {
  .concept__text {
    margin-top: 60px;
  }
}

.concept__btn {
  max-width: 53.3333333333vw;
  width: 100%;
  margin-top: 13.3333333333vw;
  border-radius: 7.3333333333vw;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .concept__btn {
    max-width: 320px;
    margin-top: 80px;
    border-radius: 44px;
  }
}

.concept__btn a {
  display: flex;
  align-items: center;
  gap: 6vw;
  color: #17470b;
  background-color: #fff;
  border-radius: 7.3333333333vw;
  font-size: 3.6666666667vw;
  padding: 4.1666666667vw 5vw 4.3333333333vw 6.6666666667vw;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: 0.3s;
  border: 2px solid #17470b;
  line-height: 1;
}
@media screen and (min-width: 1025px) {
  .concept__btn a {
    gap: 36px;
    padding: 25px 30px 26px 40px;
    font-size: 22px;
    border-radius: 44px;
  }
}

.concept__btn a:hover {
  background-color: #17470b;
  color: #fff;
}

.concept__btn a svg {
  width: 4.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .concept__btn a svg {
    width: 26px;
  }
}

.concept__btn a svg path {
  transition: 0.3s;
}

.concept__btn a:hover svg path {
  fill: #fff;
}

.product {
  position: relative;
  background-color: #e0e0e0;
}

.product::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 81.8333333333vw;
  background-image: url(../img/15_bg_01.png);
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1025px) {
  .product::before {
    height: 491px;
  }
}

.product::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 81.1666666667vw;
  background-image: url(../img/15_bg_02.png);
  background-size: contain;
  background-position: 0 0;
  background-repeat: no-repeat;
}
@media screen and (min-width: 1025px) {
  .product::after {
    height: 487px;
  }
}

.product__leaf {
  position: absolute;
  z-index: 10;
}

.product__leaf--01 {
  max-width: 22.6666666667vw;
  width: 100%;
  top: -19.6666666667vw;
  left: 0vw;
}
@media screen and (min-width: 1025px) {
  .product__leaf--01 {
    max-width: 136px;
    top: -118px;
  }
}

.product__leaf--02 {
  max-width: 21.6666666667vw;
  width: 100%;
  bottom: -35vw;
  right: 0vw;
}
@media screen and (min-width: 1025px) {
  .product__leaf--02 {
    max-width: 130px;
    bottom: -210px;
  }
}

.product__inner {
  position: relative;
  padding-top: 13.3333333333vw;
  padding-bottom: 13.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .product__inner {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}

.product__title {
  max-width: 52.6666666667vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .product__title {
    max-width: 316px;
  }
}

.product__list {
  margin-top: 13.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .product__list {
    margin-top: 80px;
  }
}

.product__item {
  position: relative;
  margin-top: 3.3333333333vw;
  z-index: 1;
}
@media screen and (min-width: 1025px) {
  .product__item {
    margin-top: 20px;
  }
}

.cta {
  background-image: url(../img/16_bg.png);
  background-size: cover;
  background-position: bottom;
  background-repeat: no-repeat;
  padding-top: 13.3333333333vw;
  padding-bottom: 8.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .cta {
    padding-top: 80px;
    padding-bottom: 50px;
  }
}

.cta__title {
  max-width: 88.3333333333vw;
  width: 100%;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .cta__title {
    max-width: 530px;
  }
}

.cta__text {
  margin-top: 6.6666666667vw;
  text-align: center;
}
@media screen and (min-width: 1025px) {
  .cta__text {
    margin-top: 40px;
  }
}

.cta__body {
  margin-top: 7.3333333333vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 3.3333333333vw;
}
@media screen and (min-width: 1025px) {
  .cta__body {
    margin-top: 44px;
    padding-right: 20px;
  }
}

.cta__info {
  max-width: 60vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .cta__info {
    max-width: 360px;
  }
}

.cta__img {
  max-width: 20.3333333333vw;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .cta__img {
    max-width: 122px;
  }
}

.cta__bottom {
  margin-top: 6.6666666667vw;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 1025px) {
  .cta__bottom {
    margin-top: 40px;
  }
}

.cta__bottom p {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  color: #fff;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 500;
  font-size: 4.3333333333vw;
  line-height: 1;
  top: 46.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .cta__bottom p {
    font-size: 24px;
    top: 280px;
  }
}
.cta__bottom p span {
  font-family: "Geologica", sans-serif;
  font-weight: 400;
  font-size: 5vw;
  line-height: 1;
  letter-spacing: 0.1em;
}
@media screen and (min-width: 1025px) {
  .cta__bottom p span {
    font-size: 30px;
  }
}
.cta__bottom p span span {
  font-family: "Roboto Slab", serif;
  font-weight: 500;
  line-height: 1;
  font-size: 4.8333333333vw;
}
@media screen and (min-width: 1025px) {
  .cta__bottom p span span {
    font-size: 29px;
  }
}

.cta__btnArea {
  max-width: 60vw;
  width: 100%;
  margin-top: 4.3333333333vw;
  border-radius: 8.1666666667vw;
  margin-inline: auto;
}
@media screen and (min-width: 1025px) {
  .cta__btnArea {
    max-width: 360px;
    margin-top: 26px;
    border-radius: 49px;
  }
}

.cta__buyBtn {
  display: flex;
  align-items: center;
  gap: 3vw;
  color: #fff;
  background-color: #17470b;
  border-radius: 8.1666666667vw;
  font-size: 4vw;
  padding: 5vw 5.8333333333vw 5.1666666667vw 10.3333333333vw;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: 0.3s;
  border: 2px solid #17470b;
}
@media screen and (min-width: 1025px) {
  .cta__buyBtn {
    gap: 18px;
    padding: 30px 35px 31px 62px;
    font-size: 24px;
    border-radius: 49px;
  }
}

.cta__buyBtn:hover {
  background-color: #fff;
  color: #17470b;
}

.cta__buyBtn svg {
  width: 4.8333333333vw;
  height: 5vw;
}
@media screen and (min-width: 1025px) {
  .cta__buyBtn svg {
    width: 29px;
    height: 30px;
  }
}

.cta__buyBtn svg path {
  transition: 0.3s;
}

.cta__buyBtn:hover svg path {
  fill: #17470b;
}

.cta__buyBtn:hover svg path:last-child {
  fill: none;
  stroke: #17470b;
}

.floating {
  display: none;
  position: fixed;
  bottom: 3.3333333333vw;
  left: 0;
  z-index: 100;
  width: 100%;
}
@media screen and (min-width: 1025px) {
  .floating {
    bottom: 20px;
  }
}

.floating__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.6666666667vw;
}
@media screen and (min-width: 1025px) {
  .floating__inner {
    gap: 10px;
  }
}

.floating__link {
  display: flex;
  align-items: center;
  gap: 6vw;
  color: #fff;
  background-color: #17470b;
  border-radius: 8.1666666667vw;
  font-size: 4.5vw;
  padding: 4vw 12.6666666667vw 4vw 12.8333333333vw;
  text-decoration: none;
  letter-spacing: 0.1em;
  transition: 0.3s;
  border: 2px solid #17470b;
}

.floating__link:hover {
  background-color: #fff;
  color: #17470b;
}

.floating__link svg {
  width: 4.8333333333vw;
  height: 5vw;
}

.floating__link svg path {
  transition: 0.3s;
}

.floating__link:hover svg path {
  fill: #17470b;
}

.floating__link:hover svg path:last-child {
  fill: none;
  stroke: #17470b;
}

.floating__sns {
  max-width: 15.6666666667vw;
  width: 100%;
}

.floating__sns a {
  transition: 0.3s;
}

.floating__sns a:hover {
  opacity: 0.8;
}

.back-movie {
  position: fixed;
  top: 0;
  left: 0;
  width: calc(50% - 300px);
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

.back-movie video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.back-img {
  position: fixed;
  top: 0;
  right: 0;
  width: 660px;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}
@media screen and (min-width: 1920px) {
  .back-img {
    width: calc(50% - 300px);
  }
}

.back-img__top {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
}

.back-img__bottom {
  position: absolute;
  bottom: 0;
  right: 0;
  width: auto;
}/*# sourceMappingURL=top.css.map */