@charset "UTF-8";
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  background-color: #fff;
  overflow: hidden;
}

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

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

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

@keyframes powan-animation {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounce-zoom-effect {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

@keyframes scrollRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes scrollLeft {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ワイプアニメーション */
@keyframes wipe-reveal {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#loading-animation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 525px;
  height: 100%;
  z-index: 10000;
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

#loading-animation video {
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  object-fit: cover;
  object-position: 50% 50%;
}

@media (max-width: 475px) {
  #loading-animation video {
    object-fit: contain;
  }
}

.lp-container {
  opacity: 0;
  transition: opacity 0.5s ease-in;
}

body.is-loaded {
  overflow: auto;
}

body.is-loaded #loading-animation {
  opacity: 0;
  pointer-events: none;
}

body.is-loaded .lp-container {
  opacity: 1;
}

.lp-container {
  max-width: 525px;
  margin: 0 auto;
  background-color: #fff;
}

.lp-container main .container .parent {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.lp-container main .container .inner-element {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.lp-container main .container .fv {
  overflow: hidden;
}

.lp-container main .container .fv .parts00 {
  width: 82.4%;
  top: 6.5%;
}

.lp-container main .container .fv .parts00 .shine-wrapper {
  position: relative;
  line-height: 0;
}

.lp-container main .container .fv .parts00 .shine-wrapper .shine-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  mask-image: url("../img/parts00.webp");
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
  mask-position: center;
}

.lp-container main .container .fv .parts00 .shine-wrapper .shine-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 50%, rgba(255, 255, 255, 0) 100%);
  animation: shine 2.5s infinite;
  animation-delay: 2s;
}

.lp-container main .container .fv .parts01 {
  width: 84.2%;
  top: -5.6%;
}

.lp-container main .container .fv .parts02 {
  width: 84.2%;
  top: 21%;
}

.lp-container main .container .fv .parts03 {
  width: 84.2%;
  top: 48%;
}

.lp-container main .container .fv .fade-in-item {
  opacity: 0;
}

.lp-container main .container .fv .fade-in-item.is-visible {
  animation-name: powan-animation;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.lp-container main .container .fv .is-visible.fv .parts01.fade-in-item {
  animation-delay: 0.2s;
}

.lp-container main .container .fv .is-visible.fv .parts02.fade-in-item {
  animation-delay: 0.4s;
}

.lp-container main .container .fv .is-visible.fv .parts03.fade-in-item {
  animation-delay: 0.6s;
}

.lp-container main .container .fv .first-offer .btn01 {
  width: 79.3%;
  top: 58%;
  animation-name: bounce-zoom-effect;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}


.lp-container.is-v3 main .container .fv .first-offer .btn01 {
  top: 65%;
}

.lp-container.is-v4 main .container .fv .first-offer .btn01 {
  top: 60%;
}

.lp-container.is-v6 main .container .fv .first-offer .btn01 {
  top: 66.5%;
}

.lp-container.is-spring-cp main .container .fv .first-offer .btn01 {
  top: 55%;
}
.lp-container main .container .fv .first-offer .btn02 {
  width: 91%;
  top: 69%;
  animation-name: bounce-zoom-effect;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.lp-container.is-v5 main .container .fv .first-offer .btn02 {
  top: 65%;
}

.lp-container.is-v6 main .container .fv .first-offer .btn02 {
  top: 67%;
}


.lp-container main .container .solution .scrolle .slider-wrapper {
  width: 100%;
}

.lp-container main .container .solution .scrolle .inner-element {
  top: 30%;
}

.lp-container main .container .solution .scrolle .slider-container {
  overflow: hidden;
  width: 100%;
}

.lp-container main .container .solution .scrolle .slider-container:first-child {
  margin-bottom: 2.09%;
}

.lp-container main .container .solution .scrolle .slider-track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.lp-container main .container .solution .scrolle .slider-track img {
  height: 41.67vw;
  max-height: 13.5em;
  width: auto;
  padding: 0 .5rem;
  box-sizing: border-box;
}

.lp-container main .container .solution .scrolle .scroll-right {
  animation: scrollRight 40s linear infinite;
}

.lp-container main .container .solution .scrolle .scroll-left {
  animation: scrollLeft 40s linear infinite;
}

.lp-container main .container .solution .second-offer .btn02,
.lp-container main .container .review .second-offer .btn02 {
  width: 79.3%;
  top: 68%;
  animation-name: bounce-zoom-effect;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.lp-container.is-v3 main .container .solution .second-offer .btn02,
.lp-container.is-v3 main .container .review .second-offer .btn02 {
  top: 73%;
}

.lp-container.is-v4 main .container .solution .second-offer .btn02,
.lp-container.is-v4 main .container .review .second-offer .btn02 {
  top: 67%;
}

.lp-container main .container .solution .second-offer .btn02_v2,
.lp-container.is-v6 main .container .solution .second-offer .btn02_v2,
.lp-container main .container .review .second-offer .btn02_v2 {
  width: 79.3%;
  top: 78%;
  animation-name: bounce-zoom-effect;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.lp-container.is-v5 main .container .solution .second-offer .btn02_v2,
.lp-container.is-v5 main .container .review .second-offer .btn02_v2 {
  top: 82%;
}


.lp-container main .container .solution .second-offer .btn02_v5,
.lp-container main .container .review .second-offer .btn02_v5 {
  width: 85%;
  top: 81.5%;
  animation-name: bounce-zoom-effect;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.lp-container main .container .solution .benefit,
.lp-container main .container .review .benefit {
  margin-top: -1px;
}

.lp-container main .container .solution .benefit .lp09-2,
.lp-container main .container .review .benefit .lp09-2 {
  position: absolute;
  top: 30.5%;
  left: 7%;
  right: 0;
  margin: 0 auto;
  width: 81.2%;
  z-index: 3;
}

.lp-container.is-v3 main .container .solution .benefit .lp09-2,
.lp-container.is-v3 main .container .review .benefit .lp09-2 {
  top: 26.5%;
  left: 4%;
}

.lp-container.is-v4 main .container .solution .benefit .lp09-2,
.lp-container.is-v4 main .container .review .benefit .lp09-2 {
  top: 25.3%;
  left: 4%;
}

.lp-container main .container .solution .benefit .lp09-2_v2,
.lp-container main .container .review .benefit .lp09-2_v2 {
  position: absolute;
  top: 21%;
  left: 7%;
  right: 0;
  margin: 0 auto;
  width: 81.2%;
  z-index: 3;
}

.lp-container.is-v5 main .container .solution .benefit .lp09-2_v2,
.lp-container.is-v5 main .container .review .benefit .lp09-2_v2 {
  top: 22%;
  left: 2%;
}

.lp-container main .container .solution .benefit .lp09-3,
.lp-container main .container .review .benefit .lp09-3 {
    position: absolute;
    top: 36.5%;
    left: 3%;
    right: 0;
    margin: 0 auto;
    width: 81.2%;
    z-index: 3;
    animation-name: bounce-zoom-effect;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }

  .lp-container.is-spring-cp main .container .solution .benefit .lp09-3,
  .lp-container.is-spring-cp main .container .review .benefit .lp09-3{
    position: absolute;
    top: 34.5%;
  }
  
  
  .lp-container.is-v5 main .container .solution .benefit .lp09-3,
  .lp-container.is-v5 main .container .review .benefit .lp09-3,
  .lp-container.is-v6 main .container .solution .benefit .lp09-3,
  .lp-container.is-v6 main .container .review .benefit .lp09-3 {
    top: 41%;
  }
  
  .lp-container.is-v7 main .container .solution .benefit .lp09-3,
  .lp-container.is-v7 main .container .review .benefit .lp09-3 {
    top: 37%;
  }
  
  .lp-container main .container .solution .benefit .lp09-3_v2,
  .lp-container main .container .review .benefit .lp09-3_v2 {
    position: absolute;
    top: 80.5%;
    left: 1%;
    right: 0;
    margin: 0 auto;
    width: 81.2%;
    z-index: 3;
    animation-name: bounce-zoom-effect;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
  }


  .lp-container main .container .solution .benefit.is-visible .wipe-marker,
  .lp-container main .container .review .benefit.is-visible .wipe-marker {
    animation: wipe-reveal 1s ease-out forwards;
  }
  
  .lp-container main .container .solution .benefit.is-visible .price1,
  .lp-container main .container .review .benefit.is-visible .price1 {
    animation-delay: 0.1s;
  }
  
  .lp-container main .container .solution .benefit.is-visible .price2,
  .lp-container main .container .review .benefit.is-visible .price2 {
    animation-delay: 0.3s;
  }
  
  .lp-container main .container .solution .benefit.is-visible .marker-free,
  .lp-container main .container .review .benefit.is-visible .marker-free {
    animation-delay: 0.5s;
  }
  
  .lp-container main .container .solution .benefit.is-visible .marker-refund,
  .lp-container main .container .review .benefit.is-visible .marker-refund {
    animation-delay: 0.7s;
  }
  
  .lp-container main .container .solution .benefit.is-visible .marker-cancel,
  .lp-container main .container .review .benefit.is-visible .marker-cancel {
    animation-delay: 1s;
  }
  
  .lp-container main .container .solution .benefit .wipe-marker,
  .lp-container main .container .review .benefit .wipe-marker {
    background-color: #feff85;
    height: 2%;
    max-height: 24px;
    z-index: 2;
    position: absolute;
    transform-origin: left;
    transform: scaleX(0);
  }
  
  .lp-container main .container .solution .benefit .wipe-marker.is-visible,
  .lp-container main .container .review .benefit .wipe-marker.is-visible {
    animation: wipe-reveal 2s ease-out forwards;
  }
  
  .lp-container main .container .solution .benefit .price1,
  .lp-container main .container .review .benefit .price1 {
    width: 31.6%;
    top: 38.2%;
    left: 36.9%;
  }
  
  .lp-container main .container .solution .benefit .price1_v2,
  .lp-container main .container .review .benefit .price1_v2 {
    width: 31.6%;
    top: 27.5%;
    left: 36.9%;
  }
  
  .lp-container main .container .solution .benefit .price2,
  .lp-container main .container .review .benefit .price2 {
    width: 32%;
    top: 51.6%;
    left: 31.9%;
  }
  
  .lp-container main .container .solution .benefit .price2_v2,
  .lp-container main .container .review .benefit .price2_v2 {
    width: 32%;
    top: 57.0%;
    left: 31.9%;
  }
  
  .lp-container main .container .solution .benefit .marker-free,
  .lp-container main .container .review .benefit .marker-free {
    width: 30.4%;
    top: 63.45%;
    left: 26.6%;
  }
  
  .lp-container main .container .solution .benefit .marker-free_v2,
  .lp-container main .container .review .benefit .marker-free_v2 {
    width: 30.4%;
    top: 67.3%;
    left: 26.6%;
  }
  
  .lp-container main .container .solution .benefit .marker-refund,
  .lp-container main .container .review .benefit .marker-refund {
    width: 17.8%;
    top: 74.6%;
    left: 4.5%;
  }
  
  .lp-container main .container .solution .benefit .marker-refund_v2,
  .lp-container main .container .review .benefit .marker-refund_v2 {
    width: 17.8%;
    top: 76.4%;
    left: 4.5%;
  }
  
  .lp-container main .container .solution .benefit .marker-cancel,
  .lp-container main .container .review .benefit .marker-cancel {
    width: 53%;
    top: 89%;
    left: 9.8%;
  }
  
  .lp-container main .container .solution .benefit .marker-cancel_v2,
  .lp-container main .container .review .benefit .marker-cancel_v2 {
    width: 53%;
    top: 88%;
    left: 9.8%;
  }

.lp-container main .container .problem .mv01 {
  top: 56.5%;
  width: 75%;
}

.lp-container main .container .problem .parts04 {
  top: 23%;
  left: 7%;
  right: 100%;
  width: 42.5%;
}

.lp-container main .container .problem .parts05 {
  top: 47.5%;
  left: 50%;
  width: 36.5%;
}

.lp-container main .container .problem .parts06 {
  top: 64.5%;
  width: 50%;
  right: 100%;
}

.lp-container main .container .problem .fade-in-item1 {
  opacity: 0;
}

.lp-container main .container .problem .fade-in-item1.is-visible {
  animation-name: powan-animation;
  animation-duration: 0.6s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}


.lp-container main .container .qa .qa-container .qa-question-wrapper {
  margin: 0 auto;
  cursor: pointer;
  position: relative;
}

.lp-container main .container .qa .qa-container .qa-question-wrapper::after {
  content: '';
  position: absolute;
  top: 34%;
  right: 12%;
  width: 3.61%;
  border-bottom: 2px solid #888;
  border-right: 2px solid #888;
  margin-top: -7px;
  transform: rotate(45deg);
  transition: transform 0.3s ease-out;
}

.lp-container main .container .qa .qa-container .qa-question-wrapper:first-of-type::after {
  height: 30.5%;
}

.lp-container main .container .qa .qa-container .qa-question-wrapper:not(:first-of-type)::after {
  height: 24.5%;
}

.lp-container main .container .qa .qa-container .qa-question-wrapper.is-open::after {
  transform: rotate(-135deg);
  transition: transform 0.1s ease-in;
}

.lp-container main .container .qa .qa-container .qa-question-image {
  display: block;
  max-width: 100%;
  height: auto;
}

.lp-container main .container .qa .qa-container .qa-question-wrapper ~ .qa-question-wrapper {
  padding-top: 6%;
  margin-top: 7%;
}

.lp-container main .container .qa .qa-container .qa-answer {
  margin: 0 auto;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.lp-container main .container .qa .qa-container .qa-answer.is-open {
  max-height: 50rem;
  transition: max-height 0.3s ease-in;
}

.lp-container main .container .qa .qa-container .qa-answer:last-child {
  margin-bottom: 14%;
}

@keyframes furu-furu-soft {
  0%, 70%, 100% {
    transform: translateX(0);
  }
  75% {
    transform: translateX(-2px);
  }
  80% {
    transform: translateX(2px);
  }
  85% {
    transform: translateX(-2px);
  }
  90% {
    transform: translateX(2px);
  }
}

.lp-container .bnr_vitaconc {
  animation: furu-furu-soft 2s ease-in-out infinite;
}


/*# sourceMappingURL=style.css.map */

/* ▼LINK▼ 共通（PC基準） */
nav.link_list {
  margin: 30px 0;
  text-align: center;
}

nav.link_list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav.link_list li {
  display: inline-block;
  margin: 0 20px;
}

nav.link_list li a {
  color: #414141;
  text-decoration: none;
  white-space: nowrap;
  font-size: 14px; /* PCの標準サイズ */
}

/* ▼LINK▼ SP用（スマホのときだけ上書き） */
@media screen and (max-width: 750px) {
  nav.link_list {
    margin: calc((100vw / 375) * 15) 0;
  }

  nav.link_list li {
    margin: 0 calc((100vw / 375) * 10);
  }

  nav.link_list li a {
    font-size: calc((100vw / 375) * 12); /* SP版と同じ小ささ */
  }
}

/* ▼FOOTER▼ 共通（PC基準） */
footer {
  width: 100vw;
  margin-left: calc(50% - 50vw); /* ベタ塗りにするやつ */
  padding: 40px 0;
  color: #fff;
  background: #E99655;
}

footer .copy {
  text-align: center;
  font-weight: 400;
  line-height: 1.5;
}

footer .copy small {
  font-size: 3.2rem; /* PC側は今まで通り */
}

/* ▼FOOTER▼ SP用（スマホのときだけ上書き） */
@media screen and (max-width: 750px) {
  footer {
    padding: calc((100vw / 375) * 20) 0;
  }

  footer .copy small {
    font-size: calc((100vw / 375) * 16);
  }
}