.mv {
  position: relative;
}
:where(.mv) {
  .mv__image {
    width: 100vw;
  }
  .mv__simulator {
    position: absolute;
    right: calc(var(--vw) * 39);
    bottom: calc(var(--vw) * 35);
    width: calc(var(--vw) * 294);
    animation: pulse-scale 2.3s ease-in-out infinite;
  }
}
@keyframes pulse-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.faq {
  background: #F5F5F4;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: calc(var(--vw) * 51);
  border-radius: 50px  50px 0 0;
  @media screen and (max-width: 768px) {
    padding-top: calc(var(--vw) * 30);
    margin-bottom: calc(var(--vw) * 53);
  }
  @media screen and (min-width: 769px) {
    padding-bottom: calc(var(--vw) * 100);
    margin-bottom: calc(var(--vw) * 60);
  }
}
:where(.faq) {
  .faq__title-wrap {
    position: relative;
  }
  .faq__title--en {
    font-weight: 700;
    font-family: "Geologica", sans-serif;
    color: #FFF;
    font-size: calc(var(--rem) * 100);
    letter-spacing: 5px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 167);
      letter-spacing: 8.35px;
    }
  }
  .faq__title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1.15px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 1.35px;
    }
  }
  .faq__list {
    padding: 0 calc(var(--vw) * 21);
    @media screen and (min-width: 769px) {
      max-width: calc(var(--vw) * 1000);
    }
  }
  .faq__q {
    font-weight: bold;
    font-size: calc(var(--rem) * 13.5);
    letter-spacing: 0.675px;
    line-height: 26px;
    position: relative;
    cursor: pointer;
    padding: calc(var(--rem) * 29) calc(var(--rem) * 30) calc(var(--rem) * 29) calc(var(--rem) * 10);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 17);
      letter-spacing: 0.85px;
      line-height: 29px;
      padding: calc(var(--rem) * 30) 0;
    }
    &::after {
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto 0;
      content: "";
      background-image: url('../../images/icon_faq-close.svg');
      background-size: contain;
      width: 22px;
      height: 22px;
      display: inline-block;
      vertical-align: sub;
      @media screen and (min-width: 769px) {
        width: 25px;
        height: 25px;
      }
    }
  }

  .faq__a {
    font-size: calc(var(--rem) * 13.5);
    letter-spacing: 0.675x;
    line-height: 26px;
    height: 0;
    overflow: hidden;
    box-sizing: content-box;
    transition: height 0.4s ease, padding 0.4s ease;  
    padding-left: calc(var(--vw) * 10);
    padding-right: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 16);
      letter-spacing: 0.8px;
      padding-right: calc(var(--vw) * 52);
      line-height: 29px;
      padding-left: 0;
    }
  }
  .faq__item {
    overflow: hidden;
    border-bottom: 1.34px solid #D9D9D9;
    &.is-shown {
      .faq__a {
        height: auto;
        padding-bottom: calc(var(--vw) * 30);
      }
      .faq__q::after {
        background-image: url('../../images/icon_faq-open.svg');
      }
    }
  }
  .faq__item:last-child {
    border-bottom: none;
  }
  .faq__item-inner {
    @media screen and (min-width: 769px) {
      padding: 0 calc(var(--vw) * 50);
    }
  }
}

.problem {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  color: #FFF;
  font-weight: bold;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-image: url("../../images/bg_problem-sp.webp");
  padding: calc(var(--vw) * 52) 0 calc(var(--vw) * 85);
  margin-bottom: calc(var(--vw) * 30);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 50) 0 calc(var(--vw) * 100);
    background-image: url("../../images/bg_problem.webp");
    margin-bottom: calc(var(--vw) * 64);
  }
}
:where(.problem) {
  .problem__sub-text {
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    line-height: 26.4px;
    text-align: center;
    margin-bottom: calc(var(--vw) * 8);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
      margin-bottom: calc(var(--vw) * 15);
    }
  }
  .problem__text {
    font-size: calc(var(--rem) * 25);
    letter-spacing: 1.25px;
    margin-bottom: calc(var(--vw) * 14);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 35);
      letter-spacing: 1.75px;
      margin-bottom: calc(var(--vw) * 28);
    }
  }
  .problem__image {
    margin: 0 auto;
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1332);
    }
  }
}

.system {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(var(--vw) * 96);
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 72);
  }
}
:where(.system) {
  .system__logo {
    width: calc(var(--vw) * 63);
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 79);
      margin-bottom: calc(var(--vw) * 38);
    }
  }
  .system__bubble {
    width: calc(var(--vw) * 179);
    margin-bottom: calc(var(--vw) * 16);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 224);
      margin-bottom: calc(var(--vw) * 20);
    }
  }
  .system__lead {
    color: #249D83;
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1px;
    line-height: 35px;
    margin-bottom: calc(var(--vw) * 20);
    padding: 0 calc(var(--vw) * 21);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 30);
      letter-spacing: 1.5px;
      margin-bottom: calc(var(--vw) * 24);
    }
    .underline {
      background: linear-gradient(transparent 70%, #FFF100 70%);
    }
  }
  .system__text {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 0.65px;
    line-height: 23px;
    margin-bottom: calc(var(--vw) * 30);
    padding: 0 calc(var(--vw) * 21);
    @media screen and (min-width: 769px) {
      line-height: 29px;
      font-size: calc(var(--rem) * 14);
      letter-spacing: 0.7px;
      margin-bottom: calc(var(--vw) * 38);
    }
  }
  .system__graph {
    width: calc(var(--vw) * 350);
    margin-bottom: calc(var(--vw) * 40);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1208);
      margin-bottom: calc(var(--vw) * 60);
    }
  }
  .system__debt {
    font-weight: bold;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 0.65px;
    margin-bottom: calc(var(--vw) * 5);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      margin-bottom: calc(var(--vw) * 9);
    }
  }
  .system__text-image {
    width: calc(var(--vw) * 321);
    margin-bottom: calc(var(--vw) * 40);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 689);
      margin-bottom: calc(var(--vw) * 56);
    }
  }
  .system__image-debt {
    width: calc(var(--vw) * 369);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1206);
    }
  }
}

.achievement {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  background-image: url("../../images/bg_achievement-sp.webp");
  padding: calc(var(--vw) * 27) calc(var(--vw) * 8) calc(var(--vw) * 18);
  margin-bottom: calc(var(--vw) * 35);
  @media screen and (min-width: 769px) {
    padding: calc(var(--vw) * 31) 0 calc(var(--vw) * 81);
    margin-bottom: calc(var(--vw) * 108);
    background-image: url("../../images/bg_achievement.webp");
  }
}
:where(.achievement) {
  .achievement__title {
    width: calc(var(--vw) * 323);
    margin-bottom: calc(var(--vw) * 10);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 404);
      margin-bottom: calc(var(--vw) * 12);
    }
  }
  .achievement__text {
    color: #FFF;
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 20);
    letter-spacing: 1px;
    margin-bottom: calc(var(--vw) * 14);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 26);
      letter-spacing: 1.3px;
      margin-bottom: calc(var(--vw) * 34);
    }
  }
  .achievement__list {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    @media screen and (max-width: 768px) {
      column-gap: calc(var(--vw) * 10);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 19);
    }
  }
  .achievement__image {
    width: calc(var(--vw) * 183);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 331);
    }
  }
}

.service {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: calc(var(--vw) * 30);
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 59);
  }
}
:where(.service) {
  .service__title-en {
    position: absolute;
    font-weight: 700;
    color: rgba(62, 205, 150, 0.1);
    top: 0;
    left: -10px;
    font-size: calc(var(--rem) * 80);
    letter-spacing: 4px;
    line-height: 71px;
    @media screen and (min-width: 769px) {
      left: -30px;
      font-size: calc(var(--rem) * 167);
      letter-spacing: 8.35px;
      line-height: 109px;
    }
  }
  .service__text-wrap {
    @media screen and (min-width: 769px) {
      padding-top: calc(var(--vw) * 100);
    }
  }
  .service__description {
    display: flex;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      margin-bottom: calc(var(--vw) * 41);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 53);
      margin-bottom: calc(var(--vw) * 100);
      padding: 0 calc(var(--vw) * 20);
    }
  }
  .service__image {
    width: calc(var(--vw) * 338);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 523);
    }
  }
  .service__title {
    font-weight: bold;
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 0.9px;
      line-height: 33px;
      margin-bottom: calc(var(--vw) * 26);
      padding-left: calc(var(--vw) * 32);
      padding-top: calc(var(--vw) * 40);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 25);
      letter-spacing: 1.25px;
      line-height: 46px;
      margin-bottom: calc(var(--vw) * 22);
    }
  }
  .service__text {
    font-weight: bold;
    @media screen and (max-width: 768px) {
      padding-left: calc(var(--vw) * 50);
      font-size: calc(var(--rem) * 12);
      letter-spacing: 0.6px;
      line-height: 28px;
      padding-right: calc(var(--vw) * 41);
      margin-bottom: calc(var(--vw) * 40);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      line-height: 35px;
      padding-left: calc(var(--vw) * 30);
    }
  }
  .service__text-image {
    width: calc(var(--vw) * 323);
    margin-bottom: calc(var(--vw) * 13);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 896);
      margin-bottom: calc(var(--vw) * 20);
    }
  }
  .service__if {
    font-weight: bold;
    font-size: calc(var(--rem) * 16);
    letter-spacing: 0.8px;
    margin-bottom: calc(var(--vw) * 10);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      margin-bottom: calc(var(--vw) * 13);
    }
  }
  .service__if-text {
    text-align: center;
    font-weight: bold;
    font-size: calc(var(--rem) * 10);
    letter-spacing: 0.5px;
    margin-bottom: calc(var(--vw) * 17);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 13);
      letter-spacing: 1px;
      margin-bottom: calc(var(--vw) * 16);
      line-height: 23.5px;
    }
  }
  .service__graph {
    width: calc(var(--vw) * 376);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 746);
    }
  }
}

.voice {
  background: #4BC6AF;
  overflow: hidden;
  border-radius: 40px 40px 0 0;
  padding: calc(var(--vw) * 27) 0 calc(var(--vw) * 60);
  @media screen and (min-width: 769px) {
    border-radius: 50px 50px 0 0;
    padding: calc(var(--vw) * 52) 0 calc(var(--vw) * 110);
  }
}
:where(.voice) {
  .voice__title-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: calc(var(--vw) * 8);
    margin-bottom: calc(var(--vw) * 15);
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 20);
      margin-bottom: calc(var(--vw) * 36);
    }
  }
  .voice__icon {
    width: calc(var(--vw) * 32);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 40);
    }
  }
  .voice__title {
    font-weight: bold;
    color: #FFF;
    font-size: calc(var(--rem) * 21);
    letter-spacing: 1.05px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 1.35px;
    }
  }
  .swiper {
    overflow: visible !important;
  }
  .swiper-slide {
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 22);
    }
  }
  .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: -34px !important;
    @media screen and (min-width: 769px) {
      bottom: -54px !important;
    }
  }
  .swiper-pagination-bullet {
    opacity: 1 !important;
    background: #D9D9D9 !important;
    width: 14px !important;
    height: 14px !important;
    margin: 0 14px !important;
    @media screen and (min-width: 769px) {
      width: 17px !important;
      height: 17px !important;
      margin: 0 16px !important;
    }
  }
  .swiper-pagination-bullet-active {
    background: #FFF100 !important;
    width: 19px !important;
    height: 19px !important;
    @media screen and (min-width: 769px) {
      width: 26px !important;
      height: 26px !important;
    }
  }
}

.merit {
  background: #FBF8E7;
  @media screen and (max-width: 768px) {
    padding: calc(var(--vw) * 30) 0 calc(var(--vw) * 45);
  }
  @media screen and (min-width: 769px) {
    padding-bottom: calc(var(--vw) * 70);
  }
}
:where(.merit) {
  .merit__title-wrap {
    position: relative;
  }
  .merit__title-en {
    text-align: center;
    font-weight: 700;
    color: rgba(255, 241, 0, 0.31);
    font-size: calc(var(--rem) * 100);
    letter-spacing: 5px;
    @media screen and (max-width: 768px) {
      line-height: 104px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 167);
      letter-spacing: 8.35px;
    }
  }
  .merit__title {
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--rem) * 23);
    letter-spacing: 1.15px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 29);
      letter-spacing: 1.45px;
    }
  }
  .merit__graph {
    overflow-x: scroll;
    padding: 0 calc(var(--vw) * 11);
  }
  .merit__graph-image {
    width: calc(var(--vw) * 633);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 856);
      margin: 0 auto;
    }
  }
}

.cta {
  display: flex;
  flex-direction: column;
  margin-bottom: calc(var(--vw) * 57);
}
:where(.cta) {
  .cta__title {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 19);
    letter-spacing: 0.95px;
    margin-bottom: calc(var(--vw) * 24);
  }
  .cta__image {
    width: calc(var(--vw) * 481);
    margin: 0 auto;
  } 
  .cta__link {
    margin: 0 auto;
    cursor: pointer;
    transition: opacity 0.2s linear;
    &:hover {
      opacity: 0.6;
    }
  }
}

.simulator {
  position: relative;
  @media screen and (max-width: 768px) {
    margin: 0 calc(var(--vw) * 17) calc(var(--vw) * 92) calc(var(--vw) * 17);
    border: 5px solid #3BB898;
    border-radius: 12.6px;
  }
  @media screen and (min-width: 769px) {
    width: 777px;
    border-radius: 15.8px;
    border: 7.2px solid #3BB898;
    margin: 0 auto calc(var(--vw) * 44) auto;
  }
}
:where(.simulator) {
  .simulator__pig {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: calc(var(--vw) * 49);
    top: calc(var(--vw) * -48);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 37);
      top: calc(var(--vw) * -42);
    }
  }
  .simulator__title-wrap {
    background: #3BB898;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #FFF;
    font-weight: bold;
    padding: calc(var(--vw) * 30) 0 calc(var(--vw) * 12);
    gap: calc(var(--vw) * 2);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 13) 0 calc(var(--vw) * 17);
      gap: calc(var(--vw) * 5);
    }
  }
  .simulator__sub-title {
    font-size: calc(var(--rem) * 12);
    letter-spacing: 0.9px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
    }
  }
  .simulator__title {
    font-weight: bold;
    font-size: calc(var(--rem) * 18);
    letter-spacing: 0.6px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 23);
      letter-spacing: 1.15px;
    }
  }
  .simulator__content {
    background: #FFFFDD;
    border-radius: 0 0 12.6px 12.6px;
    padding: calc(var(--vw) * 17) calc(var(--vw) * 4) 0;
    @media screen and (min-width: 769px) {
      border-radius: 0 0 15.8px 15.8px;
      padding: calc(var(--vw) * 15) calc(var(--vw) * 14) 0;
    }
  }
  .question__title-wrap {
    display: flex;
    align-items: center;
    flex-direction: column;
    @media screen and (max-width: 768px) {
      gap: calc(var(--vw) * 4);
      margin-bottom: calc(var(--vw) * 15);
    }
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 17);
    }
  }
  .question__title-en {
    color: #3BB898;
    font-weight: bold;
    font-size: calc(var(--rem) * 9);
    letter-spacing: 0.45px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 11.5);
      letter-spacing: 0.575px;
    }
  }
  .question__title {
    font-weight: bold;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 0.9px;
    }
  }
  .question__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--vw) * 17);
    row-gap: calc(var(--vw) * 11);
    padding: calc(var(--vw) * 0) calc(var(--vw) * 10) calc(var(--vw) * 68) calc(var(--vw) * 10);
    @media screen and (min-width: 769px) {
      grid-template-columns: 1fr 1fr 1fr;
      column-gap: calc(var(--vw) * 25);
      row-gap: calc(var(--vw) * 13);
      padding: calc(var(--vw) * 0) calc(var(--vw) * 10) 55px calc(var(--vw) * 10);
    }
  }
  .question__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #FFF;
    font-weight: bold;
    color: #279292;
    text-align: center;
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    padding: calc(var(--vw) * 13) calc(var(--vw) * 5);
    border-radius: 9px;
    box-shadow: 0 3px 4px rgba(0, 0, 0, 0.3);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 18);
      letter-spacing: 0.9px;
      padding: calc(var(--vw) * 15);
      border-radius: 11.7px;
      height: 63px;
    }
    &::after {
      position: absolute;
      content: "";
      display: inline-block;
      width: calc(var(--vw) * 20);
      height: calc(var(--vw) * 20);
      background-image: url('../../images/icon_button-arrow.svg');
      background-position: center;
      background-size: contain;
      right: 8px;
      @media screen and (min-width: 769px) {
        width: 28px;
        height: 28px;
      }
    }
  }
  .swiper-pagination-bullet {
    background: #C8C8C8 !important;
    opacity: 1 !important;
    width: 8px !important;
    height: 8px !important;
    margin: 0 9px !important;
    @media screen and (min-width: 769px) {
      width: 10px !important;
      height: 10px !important;
      margin: 0 12px !important;
    }
  }
  .swiper-pagination-bullet-active {
    background: #4CCD9B !important;
    width: 16px !important;
    height: 16px !important;
    @media screen and (min-width: 769px) {
      width: 20px !important;
      height: 20px !important;
      margin: 0 12px !important;
    }
  }
  .swiper-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    bottom: calc(var(--vw) * 26) !important;
    @media screen and (min-width: 769px) {
      bottom: 14px !important;
    }
  }
  .swiper-slide.debt {
    .question__list {
      @media screen and (min-width: 769px) {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        column-gap: calc(var(--vw) * 18);
      }
    }
    .question__item {
      @media screen and (max-width: 768px) {
        height: 40px;
      }
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 15);
        letter-spacing: 0.75px;
      }
    }
  }
  .swiper-slide.people {
    .question__list {
      @media screen and (min-width: 769px) {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 63px 63px;
        padding: calc(var(--vw) * 0) 110px 55px 110px;
      }
    }
    .question__item {
      @media screen and (max-width: 768px) {
        height: 53px;
      }
    }
  }
  .swiper-slide.status {
    .question__list {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }
    .question__item {
      width: 47%;
      @media screen and (min-width: 769px) {
        width: 30%;
      }
    }
  }
  .swiper-slide.result {
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 10);
    }
  }
  .result__cta {
    @media screen and (min-width: 769px) {
      display: flex;
      justify-content: center;
      align-items: end;
      gap: 15px;
      margin-bottom: 21px;
    }
  }
  .result__cta-woman {
    @media screen and (min-width: 769px) {
      width: 87px;
    }
  }
  .result__cta-man {
    @media screen and (min-width: 769px) {
      width: 98px;
    }
  }
  .result__cta-image {
    margin: 0 auto;
    transition: opacity 0.2s linear;
    width: calc(var(--vw) * 306);
    @media screen and (min-width: 769px) {
      width: 427px;
    }
    &:hover {
      opacity: 0.6;
    }
  }
  .result__cta-people {
    @media screen and (max-width: 768px) {
      margin: 0 auto;
      width: calc(var(--vw) * 175);
    }
  }
  .result__image {
    @media screen and (max-width: 768px) {
      margin-bottom: calc(var(--vw) * 17);
    }
    @media screen and (min-width: 769px) {
      width: 614px;
      margin: 0 auto 10px auto;
    }
  }
  .result__text {
    color: #279292;
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 13);
    letter-spacing: 0.65px;
    line-height: 21px;
    @media screen and (max-width: 768px) {
      margin-bottom: calc(var(--vw) * 17);
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15.5);
      letter-spacing: 0.775px;
      line-height: 24px;
      margin-bottom: calc(var(--vw) * 5);
    }
  }
}

.support {
  margin-bottom: calc(var(--vw) * 46);
  @media screen and (min-width: 769px) {
    margin-bottom: calc(var(--vw) * 113);
  }
}
:where(.support) {
  .ng {
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom center;
    background-image: url("../../images/bg_ng-sp.webp");
    padding: calc(var(--vw) * 62) calc(var(--vw) * 22) calc(var(--vw) * 72);
    margin-bottom: calc(var(--vw) * 27);
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 23) 0 calc(var(--vw) * 87);
      background-image: url("../../images/bg_ng.webp");
      margin-bottom: calc(var(--vw) * 36);
    }
  }
  .ng__image {
    margin-bottom: calc(var(--vw) * 16);
    @media screen and (min-width: 769px) {
      margin: 0 auto;
      width: calc(var(--vw) * 1203);
      margin-bottom: calc(var(--vw) * 23);
    }
  }
  .ng__text-warp {
    display: flex;
    justify-content: center;
    @media screen and (min-width: 769px) {
      padding: 0 calc(var(--vw) * 15);
    }
  }
  .ng__text {
    font-weight: bold;
    color: #FFF;
    display: inline-block;
    @media screen and (max-width: 768px) {
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      line-height: 31px;
      text-align: center;
    }
    @media screen and (min-width: 769px) {
      padding: calc(var(--vw) * 12) calc(var(--vw) * 25);
      font-size: calc(var(--rem) * 22);
      letter-spacing: 1.1px;
      line-height: 40px;
      border: 2px solid #FFF;
    }
    .strong {
      color: #FFFF65;
    }
  }
  .reason {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: calc(var(--vw) * 54);
    @media screen and (min-width: 769px) {
      margin-bottom: calc(var(--vw) * 102);
    }
  }
  .reason__head {
    font-weight: bold;
    color: #FFF;
    background: #4BC6AF;
    border-radius: 8.6px;
    margin-bottom: calc(var(--vw) * 20);
    font-size: calc(var(--rem) * 14);
    letter-spacing: 0.7px;
    padding: calc(var(--vw) * 12) calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      border-radius: 12px;
      padding: calc(var(--vw) * 12) calc(var(--vw) * 25);
      font-size: calc(var(--rem) * 20);
      letter-spacing: 1px;
      padding: calc(var(--vw) * 17) calc(var(--vw) * 30);
      margin-bottom: calc(var(--vw) * 22);
    }
  }
  .reason__text {
    width: calc(var(--vw) * 315);
    margin-bottom: calc(var(--vw) * 30);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 961);
      margin-bottom: calc(var(--vw) * 39);
    }
  }
  .reason__point {
    display: flex;
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: calc(var(--vw) * 40);
    }
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 31);
    }
  }
  .reason__point-image {
    width: calc(var(--vw) * 330);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 380);
    }
  }
  .ok {
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
  }
  .ok__icon {
    width: calc(var(--vw) * 34);
    margin-bottom: calc(var(--vw) * 10);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 43);
      margin-bottom: calc(var(--vw) * 13);
    }
  }
  .ok__lead {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 18);
    letter-spacing: 0.9px;
    margin-bottom: calc(var(--vw) * 32);
    line-height: 30px;
    padding: 0 calc(var(--vw) * 21);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 28);
      letter-spacing: 1.4px;
      margin-bottom: calc(var(--vw) * 32);
      line-height: 48px;
    }
    .strong {
      color: #F47053;
    }
  }
  .ok__text {
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 12);
    letter-spacing: 0.6px;
    margin-bottom: calc(var(--vw) * 47);
    line-height: 28px;
    padding: 0 calc(var(--vw) * 21);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 0.75px;
      margin-bottom: calc(var(--vw) * 60);
      line-height: 35px;
    }
  }
}

.step {
  margin-bottom:  calc(var(--vw) * 30);
  @media screen and (min-width: 769px) {
    margin-bottom:  calc(var(--vw) * 88);
  }
}
:where(.step) {
  .step__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--vw) * 12);
    margin-bottom: calc(var(--vw) * 32);
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 16);
      margin-bottom: calc(var(--vw) * 38);
    }
  }
  .step__title-icon {
    width: calc(var(--vw) * 34);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 43);
    }
  }
  .step__title {
    font-weight: bold;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 1.35px;
    }
  }
  .step__image {
    margin: 0 auto;
    width: calc(var(--vw) * 274);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 1200);
    }
  }
}

.cta-bottom {
  margin-bottom:  calc(var(--vw) * 46);
  @media screen and (min-width: 769px) {
    margin-bottom:  calc(var(--vw) * 60);
  }
}
:where(.cta-bottom) {
  .cta-bottom__text {
    text-align: center;
    padding: 0 calc(var(--vw) * 10);
    font-weight: bold;
    text-align: center;
    font-size: calc(var(--rem) * 15);
    letter-spacing: 0.75px;
    margin-bottom: calc(var(--vw) * 17);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 24);
      letter-spacing: 1.2px;
      margin-bottom: calc(var(--vw) * 34);
    }
  }
  .cta-bottom__images {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    @media screen and (min-width: 769px) {
      gap: calc(var(--vw) * 23);
    }
  }
  .cta-bottom__people {
    @media screen and (max-width: 768px) {
      width: calc(var(--vw) * 200);
      margin: 0 auto calc(var(--vw) * 16) auto;
    }
  }
  .cta-bottom__link {
    cursor: pointer;
    transition: opacity 0.2s linear;
    &:hover {
      opacity: 0.6;
    }
  }
  .cta-bottom__image {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 595);
    }
  }
  .cta-bottom__woman {
    width: calc(var(--vw) * 150);
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 121);
    }
  }
  .cta-bottom__men {
    @media screen and (min-width: 769px) {
      width: calc(var(--vw) * 137);
    }
  }
}

.contact {
  background: #FFF;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
:where(.contact) {
  .contact__text-wrap {
    position: relative;
    margin-bottom: calc(var(--vw) * 25);
    @media screen and (max-width: 768px) {
      margin-bottom: calc(var(--vw) * 21);
    }
  }
  .contact__title {
    width: 100%;
    text-align: center;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: calc(var(--rem) * 21);
    letter-spacing: 2.1px;
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 27);
      letter-spacing: 2.7px;
    }
  }
  .contact__title-en {
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    color: rgba(62, 205, 150, 0.1);
    @media screen and (max-width: 768px) {
      line-height: 82px;
      font-size: calc(var(--rem) * 80);
      letter-spacing: 4px;
    }
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 167);
      letter-spacing: 8.35px;
      line-height: 160px;
    }
  }
  .contact__sub-text {
    text-align: center;
    font-weight: bold;
    line-height: 28px;
    font-size: calc(var(--rem) * 12);
    letter-spacing: 1.2px;
    margin-bottom: calc(var(--vw) * 46);
    @media screen and (min-width: 769px) {
      font-size: calc(var(--rem) * 15);
      letter-spacing: 1.5px;
      margin-bottom: calc(var(--vw) * 44);
    }
  }

  .contact__form {
    @media screen and (max-width: 768px) {
      width: 100%;
      padding: 0 calc(var(--vw) * 22);
    }
    @media screen and (min-width: 769px) {
      width: 790px;
      padding: 0 40px;
      box-sizing: border-box;
    }
  }
  :where(.contact__form) {
    select,input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]) {
      background: #EEEEEE;
      border: none;
      border-radius: 5px;
      padding: 5px;
      width: 100%;
      @media screen and (min-width: 769px) {
        padding: calc(var(--vw) * 7);
      }
    }
    input[type=radio] {
      position: relative;
      width: 23px;
      height: 23px;
      border: 2px solid #383637;
      border-radius: 50%;
      vertical-align: -2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      @media screen and (min-width: 769px) {
        width: 25px;
        height: 25px;
      }
    }
    input[type="radio"]:checked:before {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #383637;
      content: '';
      @media screen and (min-width: 769px) {
        width: 17px;
        height: 17px;
      }
    }
    input[type="checkbox"] {
      margin-right: 4px;
      position: relative;
      width: 17px;
      height: 17px;
      border-radius: 5px;
      border: 2px solid #383637;
      vertical-align: -5px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      @media screen and (min-width: 769px) {
        width: 22px;
        height: 22px;
      }
    }
    input[type="checkbox"]:checked::before {
      position: absolute;
      content: '';
      top: 0px;
      left: 4px;
      width: 6px;
      height: 10px;
      border-right: 3px solid #383637;
      border-bottom: 3px solid #383637;
      transform: rotate(44deg);
      @media screen and (min-width: 769px) {
        top: 1px;
        left: 5px;
        width: 8px;
        height: 12px;
      }
    }
    label {
      font-weight: 500;
      font-size: calc(var(--rem) * 12.8);
      letter-spacing: 0.64px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.8px;
      }
    }
    
    .form__key-and-value {
      display: grid;
      @media screen and (min-width: 769px) {
        gap: 15px;
        grid-template-columns: 247px 1fr;
      }
    }
    .form__key {
      font-weight: bold;
      display: flex;
      align-items: center;
      @media screen and (max-width: 768px) {
        gap: 16px;
        margin-bottom: 12px;
        font-size: calc(var(--rem) * 12.8);
        letter-spacing: 0.64px;
      }
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 21);
        font-size: calc(var(--rem) * 16);
        letter-spacing: 0.8px;
      }
      span {
        width: 42px;
        @media screen and (min-width: 769px) {
          width: 53px;
        }
      }
    }
    .form__key--must {
      color: #FFF;
      text-align: center;
      background: #FF705C;
      border-radius: 5px;
      font-size: calc(var(--rem) * 10);
      letter-spacing: 0.5px;
      padding: 2px 0;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 13);
        letter-spacing: 0.65px;
        padding: 2px 0;
      }
    }
    .form__name {
      display: flex;
      flex-direction: column;
      gap: 10px;
      @media screen and (min-width: 769px) {
        gap: calc(var(--vw) * 13);
      }
    }
    .form__name-input {
      p {
        display: flex;
        justify-content: space-between;
        gap: calc(var(--vw) * 5);
        @media screen and (min-width: 769px) {
          gap: calc(var(--vw) * 15);
        }
      }
      input {
        margin-top: 13px;
        @media screen and (min-width: 769px) {
          margin-top: calc(var(--vw) * 12);
        }
      }
    }
    .form__sex-radio {
      .wpcf7-list-item {
        display: flex;
        align-items: center;
        gap: 12px;
        @media screen and (min-width: 769px) {
          gap: calc(var(--vw) * 10);
        }
      }
      .wpcf7-form-control {
        display: flex;
        gap: 29px;
        @media screen and (min-width: 769px) {
          gap: calc(var(--vw) * 37);
        }
      }
    }
    .form__item + .form__item {
      margin-top: 16px;
      @media screen and (min-width: 769px) {
        margin-top: calc(var(--vw) * 34);
      }
    }
    .form__checkbox {
      .wpcf7-form-control {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        column-gap: 15px;
        row-gap: 5px;
        @media screen and (min-width: 769px) {
          grid-template-columns: 132px 132px 132px;
          column-gap: calc(var(--vw) * 48);
          row-gap: calc(var(--vw) * 20);
        }
      }
    }
    .form-submit {
      width: 100%;
      height: calc(var(--vw) * 65);
      display: flex;
      background-image: url(../../images/button_submit.webp);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      background-size: contain;
      background-color: transparent;
      border: none;
      text-indent: -9999px;
      cursor: pointer;
      transition: opacity 0.8s linear;
      margin: calc(var(--vw) * 29) auto 0 auto;
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 581);
        height: calc(var(--vw) * 116);
        margin-top: calc(var(--vw) * 61);
      }
      &:hover {
        opacity: 0.6;
      }
    }
    .wpcf7-list-item {
      margin: 0;
    }
    .wpcf7-form-control-wrap {
      > .wpcf7-not-valid-tip {
        display: none;
      }
    
      &.is-show {
        > .wpcf7-not-valid-tip {
          display: block;
        }
      }
    }
  }

  /* .contact__form {
    @media screen and (max-width: 768px) {
      padding: 0 calc(var(--vw) * 30);
    }
  } */
  /* form {
    input, textarea {
      width: 100%;
      margin-top: calc(var(--vw) * 4);
      border: 1px solid #283C35;
      padding: calc(var(--vw) * 4) calc(var(--vw) * 4);
      @media screen and (min-width: 769px) {
        width: calc(var(--vw) * 730);
        margin-top: calc(var(--vw) * 10);
        padding: calc(var(--vw) * 4) calc(var(--vw) * 4);
      }
    }
    p + p {
      margin-top: calc(var(--vw) * 5);
      @media screen and (min-width: 769px) {
        margin-top: calc(var(--vw) * 16);
      }
    }
    label {
      font-size: calc(var(--rem) * 14);
      letter-spacing: 1.4px;
      @media screen and (min-width: 769px) {
        font-size: calc(var(--rem) * 16);
        letter-spacing: 1.6px;
      }
    }
    input[type=submit] {
      background: #283C35;
      color: #FFF;
      cursor: pointer;
      font-size: calc(var(--rem) * 14);
      letter-spacing: 2.1px;
      padding: calc(var(--vw) * 20) 0;
      @media screen and (min-width: 769px) {
        padding: calc(var(--vw) * 23) 0;
        font-size: calc(var(--rem) * 16);
        letter-spacing: 2.4px;
      }
    }

  } */
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}