@charset "UTF-8";

/**********************
// style.css
**********************/
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese);


html {
  font-size: 62.5%;
  /* 16px(default) * 62.5% = 10px */
}

@media screen and (max-width:749px) {
  html {
    font-size: 1.33vw;
    /* 10px / 750px = 1.33% */
  }
}

body {
  color: #333;
  font-size: 1.6rem;
  font-family: 'YuGo*', "游ゴシック", "Yu Gothic", "游ゴシック体", YuGothic, -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, 'Noto Sans JP', sans-serif;
  font-feature-settings: 'palt';
  letter-spacing: 0.1em;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

a {
  display: block;
  transition: .2s;
}

a:hover,
button:hover {
  filter: brightness(1.1);
}

/* 重ねる画像 */
.item {
  position: absolute;
}

.contents {
  position: relative;
  max-width: 750px;
  left: 0;
  right: 0;
  margin: auto;
}

/* cta */
.cta {
  position: sticky;
  top: calc(100vh - 13rem);
  left: 0;
  right: 0;
  margin: auto;
  width: 56.5rem;
  z-index: 999;

  transition: 0.6s;
  opacity: 0;
  filter: blur(4px);
}

@media screen and (max-width:750px) {
  .cta {
    top: 90%;
  }
}

.cta.active {
  opacity: 1;
  filter: blur(0);
}

/* fv */
.fv {
  max-height: 1099px;
  margin-top: -10rem;
}

.fv_bg {
  animation: show_time 1.5s both;
  animation-delay: 0.8s;
}

@keyframes show_time {
  0% {
    opacity: 0;
    filter: blur(15px);
    transition: 1s;
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.fv_logo {
  width: 29rem;
  top: 5.7rem;
  left: 4.6rem;

  animation: show_time_logo 1.5s both;
  animation-delay: 0.5s;
}

@keyframes show_time_logo {
  0% {
    opacity: 0;
    /* filter: blur(15px); */
    transition: 1s;
  }
  100% {
    opacity: 1;
    /* filter: blur(0); */
  }
}

.fv_txt {
  width: 18.4rem;
  top: 20.3rem;
  left: 9rem;

  animation: show_time_txt 0.8s both;
  animation-delay: 1.1s;
}

@keyframes show_time_txt {
  0% {
    opacity: 0;
    filter: blur(10px);
    transition: 1s;
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

.point_wrapper img {
  width: 17rem;
}

.fv_point1 {
  bottom: 18.6rem;
  right: 12rem;

  animation: show_time_point 1.7s both;
  animation-delay: 1.7s;
}

.fv_point2 {
  bottom: 2rem;
  right: 21.5rem;

  animation: show_time_point 1.7s both;
  animation-delay: 2s;
}

.fv_point3 {
  bottom: 2rem;
  right: 2.4rem;

  animation: show_time_point 1.7s both;
  animation-delay: 2.3s;
}

@keyframes show_time_point {
  0% {
    opacity: 0;
    transform: translateY(-30px);
   }
  50%{
    opacity: 1;
    transform: translateY(0);
  }
}

/* makuake */
.btn {
  bottom: 8rem;
  width: 56.5rem;
  left: 0;
  right: 0;
  margin: auto;
}
.makuake_btn {
  bottom: 8rem;
}

/* お悩み */
.onayami {
  overflow: hidden;
}

.onayami_wrapper img {
  width: 40.9rem;
  opacity: 0;
}

.onayami_1 {
  top: 24.1rem;
}

.onayami_3 {
  bottom: 15rem;
}

.onayami_1.active,
.onayami_3.active {
  animation: slideIn 1s forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(-64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.onayami_2 {
  top: 57rem;
  right: 0;
}

.onayami_2.active {
  animation: slideIn2 2.5s forwards;
}

@keyframes slideIn2 {
  0% {
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* kaiketu */
.kaiketu_txt {
  top: -4rem;
  width: 40.2rem;
  left: 0;
  right: 0;
  margin: 0 auto;
  opacity: 0;
}

.kaiketu_txt.active {
  animation: slideIn3 1.3s forwards;
}

@keyframes slideIn3 {
  0% {
    transform: translateY(-64px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* point */
.flex {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contents_point_wrapper {
  top: 30rem;
  gap: 2.5rem;
  opacity: 0;
}

.contents_point_wrapper.active {
  animation: show_time_point2 1.7s forwards;
}

@keyframes show_time_point2 {
  0% {
    transform: translateY(-30px);
   }
  100%{
    opacity: 1;
    transform: translateY(0);
  }
}


/* result */
.result_txt {
  width: 31rem;
  bottom: 3rem;
  right: 4.8rem;
  opacity: 0;
}

.result_txt.active {
  animation: show_time_txt 1.5s forwards;
}


/* makuake_2 */
.makuake_btn2 {
  bottom: 4.4rem;
}


/* kodawari */
.kodawari_wrapper {
  flex-wrap:wrap;
  top: 29rem;
  gap: 2.9rem; 
}


.kodawari_wrapper img {
  width: 18.8rem;
  opacity: 0;
}

.kodawari_wrapper img.active {
  animation: show_time_point2 1.5s forwards;
}


/* type */
.type_point img {
  width: 66.8rem;
  left: 0;
  right: 0;
  margin: 0 auto;
}

.type_ver2_img {
  bottom: 13.8rem;
}

.type_ver2_img2 {
  bottom: 7.5rem;
}

.type_ver2_img.active, 
.type_ver2_img2.active {
  animation: zoomIn 0.8s forwards;
}

@keyframes zoomIn {
  0%{
    transform: rotateX(0deg);
   }
  100%{
    transform: rotateX(360deg);
    }
}


/* makuake_3 */
.makuake_btn3 {
  bottom: 4rem;
}


/* フッター */
.last_offer_footer {
  font-size: 2.6rem;
  text-align: center;
  margin: 5rem 0;
}