/* reset style */
body {
  margin: 0;
}

.lp-contents * {
  box-sizing: border-box;
  list-style: none;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

.lp-contents {
  font-size:10px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
  font-feature-settings: "palt";
  line-height: 1.5;
  hanging-punctuation: allow-end;
  overflow: hidden;
}

@media screen and ( max-width:750px){
  .lp-contents {
    font-size: 1.333vw;
	}
}

.lp-contents img,
.lp-contents video{
  display: block;
  height: auto;
  max-width: 100%;
}

.lp-contents a:hover,
.lp-contents a:hover{
  filter: brightness(1.1);
  transition: .2s;
}


/* ==================== animation ==================== */
.js-inview{
  opacity: 0;
}

.fadeInUp{
  animation-name: fadeInUp;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
  transform: translateY(20px);
}
@keyframes fadeInUp{
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeIn{
  animation-name: fadeIn;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.zoomUp{
  animation-name: zoomUp;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  opacity: 0;
}
@keyframes zoomUp {
  0% {
    transform: scale(0);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.blink{
  animation-name: blink;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
@keyframes blink {
  0% { opacity: 0; }
  33% { opacity: 1; }
  66%{ opacity: 0; }
  100% { opacity: 1; }
}

.fuwafuwa{
  animation-name: fuwafuwa;
  animation-duration: 2s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes fuwafuwa {
  0% { transform: translateY(0); }
  50% { transform: translateY(1.2em); }
  100%{ transform: translateY(0); }
}

.yurayura{
  animation-name: yurayura;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes yurayura {
  0% { transform: translateY(0); }
  10% { transform: translate(-0.5em, 0.5em); }
  20%{ transform: translateY(0); }
  30% { transform: translate(-0.5em, 0.5em); }
  40%{ transform: translateY(0); }
  50% { transform: translate(-0.5em, 0.5em); }
  60%,100%{ transform: translateY(0); }
}

/* collagen */
.collagen__wrap {
  opacity: 1;
}
.collagen__wrap img {
  transform: translateY(1em);
  opacity: 0;
}
.fadeUpCollagen img {
  opacity: 1;
  transform: translateY(0);
  transition-duration: 1s;
}
.collagen__bg {
  transition-delay: .5s;
}

/* btn */
.btn--animation {
  position: relative;
}

.btn--animation:after {
  content: '';
  position: absolute;
  top: -10em;
  left: -10em;
  width: 5em;
  height: 5em;
  background-image: linear-gradient(100deg,  rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 1) 100%, rgba(255, 255, 255, 0) 0%);
  animation-name: shiny;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}
@keyframes shiny {
  0% {
    transform: scale(0) rotate(25deg);
    opacity: 0;
  }
  50% {
    transform: scale(1) rotate(25deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(25deg);
    opacity: 0;
  }
}


/* ==================== common ==================== */
.main{
  margin: auto;
  max-width: 750px;
}

.com__position {
  position: relative;
}

.com__notes{
  margin: 0 auto 2em;
}

.com__notes p{
  margin-top: 1em;
  font-size: 1.8em;
  font-weight: 500;
}

/* ==================== header ==================== */
.lp-contents .header{
  margin: auto;
  display: flex;
  align-items: center;
  height: 8.3em;
}

.lp-contents .header__logo{
  margin: 0 0 0 3em;
  width: 12.9em;
}

/* ==================== mv ==================== */
.mv {
  overflow: hidden;
  position: relative;
}

.mv__maincopy--01 {
  position: absolute;
  top: 2.7em;
  right: 1em;
}

.mv__maincopy--01 img {
  width: 9.22em;
}

.mv__maincopy--02 {
  position: absolute;
  top: 2.8em;
  left: 1em;
}

.mv__maincopy--02 img {
  width: 9.36em;
}

.mv__info {
  margin: auto;
  width: 69.24em;
  position: absolute;
  bottom: 19em;
  left: 0;
  right: 0;
}

.mv .com__notes {
  padding: 0 2em;
}

.mv__cta--btn .com__notes {
  padding: 0;
}

.mv__cta--btn {
  width: 90%;
  margin: auto;
  margin-top: 2rem;
}

.mv__mov--ttl {
  width: 35%;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.mv__mov {
  display: block;
  width: 90%;
  height: 10rem;
  margin: auto;
  margin-bottom: 2rem;
}


@media screen and ( min-width:751px){
  .mv__mov {
    height: 20rem;
	}
}

/* ==================== offer ==================== */
.offer {
  position: relative;
  padding: 0 0 1em;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(226, 230, 223, 1));
}

.offer__image {
  width: 68.6em;
  margin: 2.4em auto 3em;
}

.offer__price {
  width: 68em;
  margin: -5em auto 1em;
}

.offer__hukidashi {
  width: 23.2em;
  position: absolute;
  top: 62em;
  right: 2em;
}

.offer__info {
  padding: 0 4em;
}

.offer__free {
  height: 4.8em;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  text-align: center;
}

.offer__free p {
  font-size: 3.25em;
  font-weight: bold;
  letter-spacing: 0.15em;
}

.offer__trialbtn{
  display: block;
  overflow: hidden;
  border-radius: 12em;
  margin: 0 auto 2.5em;
  width: 100%;
  transform: translateZ(0);/* for iOs bug */
}
.offer__webbtn {
  display: block;
  padding-bottom: 3em;
  width: 100%;
}

/* ==================== intro ==================== */
.intro__arrow {
  margin: auto;
  width: 2em;
}

.intro__collagen {
  margin-top: -10em;
}

.intro .com__notes {
  padding: 0 3em;
}

.intro .intro__collagen--parts01 {
  width: 4.7em;
  position: absolute;
  top: 7em;
  right: 15em;
}
.intro .intro__collagen--parts02 {
  width: 29.7em;
  position: absolute;
  top: 23em;
  left: -8em;
}
.intro .intro__collagen--parts03 {
  width: 3.4em;
  position: absolute;
  bottom: 6em;
  left: 12em;
}
.intro .intro__collagen--parts04 {
  width: 17.6em;
  position: absolute;
  top: 0em;
  right: -3em;
}
.intro .intro__collagen--parts05 {
  width: 2.27em;
  position: absolute;
  top: 0em;
  left: 7em;
}
.intro .intro__collagen--parts06 {
  width: 14.1em;
  position: absolute;
  top: -4em;
  left: -2em;
}
.intro .intro__collagen--parts07 {
  width: 4.7em;
  position: absolute;
  bottom: 1em;
  right: 9em;
}

/* ==================== step ==================== */
.step__02 {
  margin-top: -1px;
}

.step__movie {
  margin: auto;
  width: 63em;
  position: absolute;
  left: 4em;
  right: 0;
  filter: drop-shadow(0px 0px #000);
}
.step__movie01 {
  bottom: 0;
}
.step__movie02 {
  bottom: 20.5em;
}

.step .step__collagen--parts01 {
  width: 2.4em;
  position: absolute;
  top: 1em;
  left: 15em;
}
.step .step__collagen--parts02 {
  width: 9.6em;
  position: absolute;
  top: 3em;
  left: 6em;
  z-index: -1;
}
.step .step__collagen--parts03 {
  width: 4.86em;
  position: absolute;
  top: -3em;
  left: 17em;
}
.step .step__collagen--parts04 {
  width: 30.98em;
  position: absolute;
  top: -7em;
  right: -14em;
}
.step .step__collagen--parts05 {
  width: 19.6em;
  position: absolute;
  top: 0em;
  left: -7em;
}
.step .step__collagen--parts06 {
  width: 5.17em;
  position: absolute;
  top: 10em;
  right: 17em;
}
.step .step__collagen--parts07 {
  width: 1.96em;
  position: absolute;
  top: 16em;
  right: 13em;
}

/* ==================== care ==================== */
.care {
  padding: 15em 0 2em;
}

.care__ttl {
  width: 16.4em;
  position: absolute;
  top: 6em;
  right: 5em;
}

.care__arrow {
  margin: auto;
  width: 2em;
}

.care .care__collagen--parts01 {
  width: 11em;
  position: absolute;
  top: -5em;
  left: 21em;
}
.care .care__collagen--parts02 {
  width: 4.74em;
  position: absolute;
  top: 7em;
  left: 16em;
}

/* ==================== sugoi ==================== */
.sugoi--bg {
  background-image: url(../img/sugoi--bg.webp);
  background-size: cover;
  background-repeat: no-repeat;
}

.sugoi__movie {
  overflow: hidden;
}
.lp-contents .sugoi__movie video {
  width: 106em;
  clip-path: circle(34% at 50% 50%);
  max-width: unset !important;
  margin-left: -20%;
}

.sugoi .collagen__haigou01 {
  width: 19.73em;
  position: absolute;
  top: 9em;
  right: 6em;
  transition-delay: .8s;
}
.sugoi .collagen__haigou02 {
  width: 18.81em;
  position: absolute;
  top: 12.6em;
  left: 5em;
  transition-delay: 1s;
}
.sugoi .collagen__haigou03 {
  width: 19em;
  position: absolute;
  bottom: 6em;
  right: 12em;
  transition-delay: 1.2s;
}
.sugoi .sugoi__collagen--parts01 {
  width: 2.94em;
  position: absolute;
  top: 7em;
  right: 22em;
  transition-delay: 1.6s;
}
.sugoi .sugoi__collagen--parts02 {
  width: 6.23em;
  position: absolute;
  bottom: 14em;
  left: 13em;
  transition-delay: 1.8s;
}

.sugoi__parts {
  display: flex;
  justify-content: center;
  gap: 1.6em;
}
.sugoi__parts img {
  width: 28.3em;
}

.sugoi__arrow01 {
  margin: 1em auto -2em;
  width: 2em;
}

.sugoi__arrow02 {
  margin: auto;
  width: 8.66em;
}

.sugoi__txt--line {
  margin: auto;
  width: 64em;
  height: 1.2em;
  background-image: linear-gradient(90deg, #fff7d2, #dcc181);
  position: absolute;
  bottom: 4.8em;
  left: 2em;
  right: 0;
  z-index: -1;
}

/* ==================== instagram ==================== */
.instagram__message {
  margin: 5.2em auto 3.8em;
  width: 57.7em;
  position: relative;
}

.instagram__message--line {
  height: 1.2em;
  background-color: #e6d7c0;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  z-index: -1;
}
.instagram__message--line01 {
  width: 57.5em;
  bottom: 6.3em;
}
.instagram__message--line02 {
  width: 52.9em;
  bottom: -0.4em;
}

.instagram .com__notes {
  padding: 0 4.8em 1em;
}

/* ==================== nayami ==================== */
.nayami__arrow {
  width: 2em;
  margin: auto;
  position: absolute;
  bottom: 60em;
  left: 2em;
  right: 0;
}

.nayami__icon {
  width: 20em;
  position: absolute;
  mix-blend-mode: multiply;
}
.nayami__icon01 {
  top: 18em;
  left: 1em;
}
.nayami__icon02 {
  top: 28.5em;
  right: 2.8em;
  animation-delay: .2s;
}
.nayami__icon01--txt {
  width: 13.6em;
  position: absolute;
  top: 26em;
  left: 4.3em;
  animation-delay: .1s;
}
.nayami__icon02--txt {
  width: 12.6em;
  position: absolute;
  top: 36.2em;
  right: 6.4em;
  animation-delay: .3s;
}

.nayami05__message {
  width: 46.4em;
  margin: auto;
  position: absolute;
  bottom: 6em;
  left: 0;
  right: 0;
}

/* ==================== collagen ==================== */
.collagen__image {
  width: 65.1em;
  position: relative;
  overflow: hidden;
}
.collagen__image::before {
  background: #fff;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.imgWrap {
  opacity: 1;
}
.imgWrap::before {
  animation: imgWrap 1.5s cubic-bezier(0.4, 0, 0.2, .8) forwards;
}
@keyframes imgWrap {
  100% {
    transform: translateX(100%);
  }
}

.collagen__image01 {
  margin-bottom: 1em;
}

.collagen__image02 {
  margin-left: auto;
}

.collagen__image03 {
  width: 65.1em;
  margin: -10em auto -14em;
}

.collagen .collagen__haigou01 {
  width: 16.1em;
  position: absolute;
  top: 11em;
  right: 5em;
  transition-delay: .8s;
}
.collagen .collagen__haigou02 {
  width: 15.5em;
  position: absolute;
  top: 12.2em;
  left: 7em;
  transition-delay: 1s;
}
.collagen .collagen__haigou03 {
  width: 16em;
  position: absolute;
  bottom: 7em;
  right: 12em;
  transition-delay: 1.2s;
}

.collagen__movie--bg {
  padding-top: 1em;
}
.collagen__movie {
  margin: auto;
  position: absolute;
  top: 21em;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
}
.lp-contents .collagen__movie video {
  width: 48.4em;
  clip-path: circle(34% at 50% 50%);
  max-width: unset !important;
  margin-left: 17.9%;
}

.collagen__message {
  padding-bottom: 2em;
}

.collagen__message--line {
  margin: auto;
  width: 46em;
  height: 1em;
  background-image: linear-gradient(90deg, rgba(228, 192, 159, 1), rgba(167, 108, 73, 1));
  position: absolute;
  top: 7.2em;
  left: 0;
  right: 6em;
  z-index: -1;
}

.collagen .com__notes {
  padding: 0 3em 2em;
}

/* ==================== seibun ==================== */
.seibun__slider__area {
  padding: 4.5em 5.1em 1em;
  background-image: url("../img/seibun__slide--bg.webp");
}

.seibun__tap {
  margin: auto;
  width: 43em;
}
.seibun__arrow {
  margin: 1.6em auto;
  width: 8.66em;
}
.slider__seibun--btn {
  margin: 3em 0 4em;
}
.slider__seibun--btn .splide__list {
  flex-wrap: wrap;
  justify-content: center;
  gap: 1em;
}
.slider__seibun--btn .splide__slide {
  padding: 1.8em;
  width: 30.5em !important;
  background-color: #fff;
  border: #AE4E52 solid .2em;
  border-radius: 5em;
  cursor: pointer;
}
.slider__seibun--btn .splide__slide p {
  font-size: 3.8em;
  font-weight: 600;
  text-align: center;
}
.slider__seibun--btn .splide__slide.is-active {
  background-color: #AE4E52;
  color: #fff;
}
.slider__seibun--main .splide__slide img {
  width: 100%;
}
.slider__seibun--main .seibun__slidearrow {
  padding: 4px 0 0 0;
  width: 3em;
  height: 3em;
  background: transparent;
  background-color: #AE4E52;
  border: none;
  display: block;
  position: absolute;
  top: 45%;
  z-index: 2;
  cursor: pointer;
  outline: none;
  transition: .2s;
}
.slider__seibun--main .seibun__slidearrow::before {
  margin: auto;
  width: 1em;
  height: 1em;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  position: absolute;
  top: 1em;
  right: 0;
  left: 0;
  content: '';
}
.slider__seibun--main .seibun__slidearrow.seibun__slidearrow--prev {
  left: -1.5em;
}
.slider__seibun--main .seibun__slidearrow.seibun__slidearrow--next {
  right: -1.5em;
}
.slider__seibun--main .seibun__slidearrow.seibun__slidearrow--prev::before {
  transform: rotate(-135deg);
  left: 0.5em;
}
.slider__seibun--main .seibun__slidearrow.seibun__slidearrow--next::before {
  transform: rotate(45deg);
  right: 0.5em;
}

.slider__seibun--main .com__notes p {
  letter-spacing: -0.05em;
}

@media screen and (max-width: 750px) {
  .slider__seibun--main .seibun__slidearrow {
    width: 2.5em;
    height: 2.5em;
  }
  .slider__seibun--main .seibun__slidearrow::before {
    width: 0.8em;
    height: 0.8em;
    top: 0.8em;
  }
  .slider__seibun--main .seibun__slidearrow.seibun__slidearrow--prev {
    left: -1em;
  }
  .slider__seibun--main .seibun__slidearrow.seibun__slidearrow--next {
    right: -1em;
  }
}

/* ==================== howto ==================== */
.howto__icons {
  position: relative;
  opacity: 1;
}
.howto__icon {
  width: 18.2em;
  position: absolute;
  opacity: 0;
}
.fadeInUpIcon .howto__icon {
  opacity: 1;
  transition-duration:1s;
}
.howto__icon01 {
  top: 8.2em;
  left: 28.8em;
  transition-delay: .8s;
}
.howto__icon02 {
  top: 16.3em;
  right: 8.7em;
  transition-delay: 1s;
}
.howto__icon03 {
  top: 36em;
  right: 2.4em;
  transition-delay: 1.2s;
}
.howto__icon04 {
  bottom: 20.0em;
  right: 5.1em;
  transition-delay: 1.4s;
}
.howto__icon05 {
  bottom: 4em;
  right: 18.0em;
  transition-delay: 1.6s;
}
.howto__icon06 {
  bottom: 4em;
  left: 18.0em;
  transition-delay: 1.8s;
}
.howto__icon07 {
  bottom: 20.0em;
  left: 5.1em;
  transition-delay: 2s;
}
.howto__icon08 {
  top: 36em;
  left: 2.4em;
  transition-delay: 2.2s;
}
.howto__icon09 {
  top: 16.3em;
  left: 9.7em;
  transition-delay: 2.4s;
}

.howto__case {
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
}
.howto__case01 {
  width: 33.52em;
  bottom: 18em;
}
.howto__case02 {
  width: 47.89em;
  bottom: 13.8em;
}
.howto__case03 {
  width: 54.3em;
  bottom: 30em;
}

.howto__message__wrap {
  padding: 11em 0;
  position: relative;
}

.howto__message {
  width: 18.62em;
  position: absolute;
  top: 5.5em;
  right: 7em;
}

/* ==================== notes ==================== */
.notes {
  padding: 1em 3em 3em;
}
.notes dt,
.notes dd {
  font-size: 2.2em;
}

.notes dt {
  padding-top: 1.5em;
}

.notes .notes--border {
  margin: 2em 0;
  padding: 2em 0;
  border-top: #000 solid .2em;
}
.notes .notes--border p {
  font-size: 2em;
}
.notes .notes--border a {
  text-decoration: underline;
}


/* ==================== frictionless ==================== */

.frictionless_wrap {
  position: relative;
}

.frictionless_wrap .collagen__movie {
  top: initial;
  bottom: 64rem;
  transform: scale(1.8);
}

.frictionless_wrap .collagen__movie span {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 35.9%;
  top: 50%;
  left: 50.1%;
  z-index: 5;
}

.frictionless_img02_txt {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 42%;
  left: 50.1%;
  bottom: 48rem;
  z-index: 7;
}

@media screen and ( max-width:750px){
  .frictionless_wrap .collagen__movie {
    bottom: 32rem;
	}
  .frictionless_wrap .frictionless_img02_txt {
    bottom: 25rem;
	}
}