@charset "UTF-8";

body {
  font-family:"MS Pゴシック", sans-serif;
}

img {
  min-width: 30px;
}

.akshar-500 {
  font-family: "Akshar", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.container {
  max-width: 750px;
  width: 80vw;
  margin: auto;
  overflow: hidden;
}

.hero img, .hero video {
  position: relative;
  z-index: 10;
}

.offerbtn--bottom {
  position: fixed;
  bottom: 0;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  max-width: 750px;
  z-index: 10;
  width: 100%;
}
.offerbtn--bottom img {
  max-width: 750px;
  width: 80vw;
}

.offerbtn--bottom.active {
  opacity: 1;
  visibility: visible;
}
.hot-topic {
  position: relative;
  overflow: hidden;
}
.hot-topic-image {
  position: absolute;
  z-index: 1;
}

.hot-topic-image--1 {
  top: 0;
  right: 0;
  width: 34%;
  margin: auto;
}
.hot-topic-image--2 {
  bottom: 5%;
  left: 3%;
  width: 28%;
  margin: auto;
}

.hot-topic-image--3 {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 75%;
  margin: auto;
}

.hot-topic-scroll-images {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  height: 50%;
}

.thanks-to-you {
  position: relative;
}
.thanks-to-you-image {
  position: absolute;
}
.thanks-to-you-image--1 {
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
}
.thanks-to-you-image--1.active {
  visibility: visible;
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.prizes {
  position: relative;
}
.prize-list {
  position: absolute;
  display: flex;
  align-items: center;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 1;
  margin-left: 10%;
}
.prize {
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.prize.active {
  opacity: 1;
  visibility: visible;
  animation-name: fadeUpAnime;
  animation-duration: var(--fadein-delay, 1s);
  animation-fill-mode: forwards;
}
.prize.--overlap {
  margin-left: -13%;
}
.prize.prize--1 {
  transition: 0s;
}
.prize.prize--2 {
  transition: 0s;
}
.prize.prize--3 {
  transition: 0s;
}

/* scroll animation */
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0);
  }
    to {
    transform: translateX(-100%);
  }
}
@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }
    to {
    transform: translateX(0%);
  }
}

.scroll-infinity__wrap {
  display: flex;
  overflow: hidden;
}
.scroll-infinity__list {
  display: flex;
  list-style: none;
  padding: 0
}
.scroll-infinity__list.--left {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}
.scroll-infinity__list.--right {
  animation :infinity-scroll-right 20s infinite linear 0.5s both;
}
.scroll-infinity__item {
  width: 120vw;
}
.scroll-infinity__item>img {
  width: 100%;
}

.sales-volume {
  overflow: hidden;
  position: relative;
}
.sales-volume-animation-image {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  margin: auto;
}
.sales-volume-animation-image--1 {
  bottom: 4%;
  width: 180%;
}
.sales-volume-animation-image--2 img {
  width: 100%;
  margin: auto;
}

.vitamin {
  position: relative;
}
.vitamin-message {
  position: absolute;
  transition: .3s;
  opacity: 0;
  visibility: hidden;
  width: 36%;
}
.vitamin-message.active {
  opacity: 1;
  visibility: visible;
  animation-name: fadeUpAnime;
  animation-duration: var(--fadein-delay, 1s);
  animation-fill-mode: forwards;
}
.vitamin-message--1 {
  top: 5%;
  left: 13%;
}
.vitamin-message--2 {
  top: 8%;
  left: 46%;
}
.offer {
  position: relative;
}
.offer-package {
  position: absolute;
  top: .4%;
  left: 4%;
  width: 24.5%;
}
.offer-package img {
  width: 100%;
}
.timer {
  position: relative;
}
.timer-bottom {
  position: absolute;
  bottom: 1%;
  left: 0;
  right: 0;
}
.timer-bottom-image {
  width: 100%;
}
.timer-bottom-image img {
  width: 90%;
  margin: auto;
}
.discount {
  position: relative;
}
.discount-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.discount-button {
  position: absolute;
  bottom: 6%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.summer {
  position: relative;
}
.summer-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.summer-button {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.nt5 {
  position: relative;
}
.nt5-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.nt5-button {
  position: absolute;
  bottom: 5%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.lulurun {
  position: relative;
}
.lulurun-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.lulurun-button {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.mediheal {
  position: relative;
}
.mediheal-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.mediheal-button {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.nanoa {
  position: relative;
}
.nanoa-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.nanoa-button {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.newtra {
  position: relative;
}
.newtra-circle {
  position: absolute;
  width: 40%;
  top: 34%;
  right: -5%;
}
.newtra-button {
  position: absolute;
  bottom: 4%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.money-back-guarantee {
  position: relative;
}
.money-back-guarantee-circle {
  position: absolute;
  top: 3%;
  left: 3%;
  right: 3%;
}
.money-back-guarantee-circle img {
  width: 100%;
}
.money-back-guarantee-text {
  position: absolute;
  top: 58%;
  left: 10%;
  right: 10%;
}

.influencer {
  position: relative;
  overflow: hidden;
}
.follower-count {
  position: absolute;
  top: 11%;
  left: 0;
  font-size: clamp(16px, 20.8vw, 189px);
  width: 37%;
}

.influencer-name {
  position: absolute;
}
.influencer-name img {
  transform: translateX(-150%);
}
.influencer-name.active img {
  animation-name: moveRight;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.influencer-name--1 {
  top: 37%;
  left: 4%;
  width: 60%;
}
.influencer-name--2 {
  top: 44.5%;
  right: 0;
  width: 70%;
}
.influencer-name--3 {
  top: 68%;
  left: 0;
  right: 0;
  width: 88%;
  margin: auto;
}
.influencer-name--3 video {
  width: 100%;
}


.sns {
  position: relative;
}

.sns-images {
  position: absolute;
  top: 36%;
  max-width: 750px;
  width: 100%;
  overflow: hidden;
  z-index: 1;
}
.swiper-slide img {
  width: 100%;
}

.new-standard {
  position: relative;
  overflow: hidden;
}
.new-standard-image {
  position: absolute;
}
.new-standard-image--1 {
  top: 0;

}

.new-standard-image--2 {
  top: 10%;
}
.new-standard-image--3 {
  top: 40%;
  left: 10%;
  width: 70%;
  opacity: 0;
  visibility: hidden;
}
.new-standard-image--3.active {
  visibility: visible;
  animation-name: fadeUpAnime;
  animation-duration: var(--animation-duration, 1s);
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.how-select {
  position: relative;
  overflow: hidden;
}
.how-select-image {
  width: 32%;
  position: absolute;
}
.how-select-image--1 {
  top: 30%;
  right: -5%;
}
.how-select-image--2 {
  top: 40%;
  left: -1%;
}
.how-select-image--3 {
  top: 70%;
  left: 0%;
}
.how-select-image--4 {
  top: 66%;
  right: -5%;
}

.doctor-advice {
  position: relative;
}
.doctor-advice-image {
  position: absolute;
  top: 22%;
  overflow: hidden;
  width: 8%;
}
.doctor-advice-image--1 {
  right: 20%;
}
.doctor-advice-image--2 {
  right: 30%;
}
.doctor-advice-image img {
  transform: translateY(-110%);
}
.doctor-advice-image.active img {
  animation-name: moveDown;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.liposome {
  position: relative;
}
.liposome-image {
  position: absolute;
  visibility: hidden;
  opacity: 0;
  width: 40%;
}
.liposome-image.active {
  opacity: 1;
  visibility: visible;
  animation-name: fadeUpAnime;
  animation-duration: var(--animation-delay, 1s);
  animation-fill-mode: forwards;
}
.liposome-image--1 {
  top: 20%;
  right: 10%;
}
.liposome-image--2 {
  top: 40%;
  left: 10%;
}
.liposome-image--3 {
  top: 60%;
  right: 0;
}

.liposome-wave {
  position: absolute;
  top: 14%;
  left: 9%;
  overflow: hidden;
  width: 50%;
}
.liposome-wave img {
  transform: translateX(-101%);
}
.liposome-wave.active img {
  animation-name: moveRight;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.liposome-plus {
  position: relative;
}
.liposome-plus-image {
  position: absolute;
  opacity: 0;
  visibility: hidden;
}
.liposome-plus-image.active {
  visibility: visible;
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.liposome-plus-image--1 {
  top: 5%;
  left: 0;
  right: 0;
  width: 95%;
  margin: auto;
}
.liposome-plus-image--2 {
  top: 12%;
  left: 0;
  right: 0;
  width: 15%;
  margin: auto;
}
.liposome-plus-image--3 {
  top: 18%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
}

.absorptance {
  position: relative;
  overflow: hidden;
}
.absorptance-image {
  position: absolute;
}
.absorptance-image--1 {
  top: -10%;
  left: -40%;
  width: 60%;
}
.absorptance-image--2 {
  top: 45%;
  right: -10%;
  width: 30%;
}

.absorptance-phospholipid-image {
  position: absolute;
  top: 54%;
  left: 0;
  right: 0;
  width: 60%;
  margin: auto;
  visibility: hidden;
  opacity: 0;
}
.absorptance-phospholipid-image.active {
  animation-name: fadeUpAnime;
  animation-duration: var(--fadein-delay, 1.5s);
  animation-fill-mode: forwards;

  visibility: visible;
  opacity: 1;
}
.absorptance-vitamin-image {
  position: absolute;
  top: 54%;
  left: 0;
  right: 0;
  width: 60%;
  margin: auto;
}
.absorptance-text-image {
  position: absolute;
  top: 55%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}

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

.capsule-image {
  position: absolute;
}

.capsule-image--1 {
  top: 5%;
  left: 0;
  width: 50%;
}
.capsule-image--2 {
  top: 54%;
  left: 0;
  right: 0;
  margin: auto;
  width: 95%;
}
.capsule-image--2 video {
  width: 100%;
}
.capsule-image--3 {
  top: 35.1%;
  left: 21%;
  width: 2.4%;
}
.capsule-image--3 img {
  width: 100%;
  min-width: 1px;
}

.more-info {
  position: relative;
}

.more-info-image {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.more-info-image.active {
  visibility: visible;
  animation-name: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.more-info-image--1 {
  top: 12%;
  left: 12%;
  width: 50%;
}
.more-info-image--2 {
  top: 17%;
  left: 50%;
  width: 30%;
}
.more-info-image--3 {
  top: 20%;
  left: 62%;
  width: 34%;
}
.more-info-image--4 {
  top: 55%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.more-info-image--4 video {
  width: 100%;
}

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

.fresh-image {
  position: absolute;
}

.fresh-image--1 {
  top: 20%;
  left: 5%;
  width: 24%;
}

.fresh-image--2 {
  top: 4.4%;
  right: 0;
  visibility: hidden;
  opacity: 0;
  width: 80%;
}
.fresh-image--2.active {
  visibility: visible;
  animation: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.fresh-image--2.active img {
  animation: moveLeft;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.fresh-image--3 {
  bottom: 0;
  right: -5%;
  width: 40%;
}
.fresh-image--4 {
  bottom: -2%;
}

.difference {
  position: relative;
}

.difference-image {
  position: absolute;
  width: 28%;
}
.difference-image--1 {
  top: 50%;
  right: 0;
}
.difference-image--2 {
  top: 38%;
  right: 0;
}

.keep {
  position: relative;
}
.keep-image {
  position: absolute;
}
.keep-image--1 {
  bottom: -3%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
}
.keep-image--1 img {
  width: 100%;
}

.half {
  position: relative;
}
.half-image {
  position: absolute;
}

.half-image--1 {
  top: 26%;
  right: 0;
  width: 30%;
}

.timing {
  position: relative;
}
.timing-image {
  position: absolute;
}
.timing-image--1 {
  bottom: 5%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
}
.timing-image--2 {
  bottom: 5%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  overflow: hidden;
}
.timing-image--2 img {
  transform: translateX(-101%);
}
.timing-image--2.active img {
  animation-name: moveRight;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.keep-vitamin {
  position: relative;
}

.keep-vitamin-image {
  position: absolute;
}
.keep-vitamin-image img {
  width: 100%;
}
.keep-vitamin-image--1 {
  top: 0;
  left: 0;
  right: 0;
}

.keep-vitamin-image--2 {
  bottom: 1.2%;
  left: 0;
  right: 0;
}

.only {
  position: relative;
  overflow: hidden;
}
.only-image {
  position: absolute;
}
.only-image img {
  width: 100%;
}
.only-image--1 {
  top: -10%;
  left: -10%;
  width: 50%;
}
.only-image--2 {
  top: 20%;
  right: 0%;
  width: 30%;
}
.only-image--3 {
  top: 38%;
  left: 5%;
  width: 26%;
}
.only-image--4 {
  top: 54%;
  left: 0;
  right: 0;
  width: 60%;
  margin: auto;
  visibility: hidden;
  opacity: 0;
}
.only-image--4.active {
  visibility: visible;
  opacity: 1;
}
.only-image--5 {
  top: 5%;
  left: 0;
  right: 0;
  width: 54%;
  margin: auto;
  /* visibility: hidden;
  opacity: 0; */
}
/* .only-image--5.active {
  visibility: visible;
  animation: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
} */

.high-quality-vitamin-c {
  position: relative;
}
.high-quality-vitamin-c-image {
  position: absolute;
}
.high-quality-vitamin-c-image--1 {
  top: 72%;
  left: 1%;
  width: 54%;
}
.high-quality-vitamin-c-image--1 img {
  width: 100%;
}
.high-quality-vitamin-c-image--2 {
  top: 20%;
  left: 0;
  right: 0;
  width: 90%;
  margin: auto;
}
.high-quality-vitamin-c-image--2 video {
  width: 100%;
}

.component {
  position: relative;
}
.component-images {
  position: absolute;
  top: 32%;
  width: 90%;
  left: 0;
  right: 0;
  margin: auto;
  display: flex;
  flex-wrap: wrap;
}
.component-image {
  margin: 2%;
  width: calc(50% - 4%);
  visibility: hidden;
  opacity: 0;
}
.component-image.active {
  visibility: visible;
  animation: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.point1 {
  position: relative;
}

.point1-image {
  position: absolute;
}
.point1-image img {
  width: 100%;
}
.point1-image--1 {
  top: 0;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
}
.point1-image--2 {
  top: 6%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
}
.point1-image--3 {
  bottom: 0;
  right: 10%;
  width: 45%;
}

.point1-bottom {
  position: relative;
}
.point1-bottom-image {
  position: absolute;
  overflow: hidden;
}
.point1-bottom-image img {
  transform: translate(100%, -100%);
}
.point1-bottom-image--1 {
  top: 27%;
  left: 8%;
  width: 22%;
}
.point1-bottom-image--2 {
  top: 36%;
  left: 39%;
  width: 22%;
}
.point1-bottom-image--3 {
  top: 27%;
  left: 69%;
  width: 22%;
}
.point1-bottom-image.active img {
  animation-name: moveRightTopToBottomBown;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.point2 {
  position: relative;
  overflow: hidden;
}
.point2-image {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}
.point2-image img {
  width: 100%;
}
.point2-image.active {
  visibility: visible;
  animation: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.point2-image.active.--left img {
  animation: moveLeft;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.point2-image.active.--right img {
  animation: moveRight;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.point2-image--1 {
  top: 26%;
  right: 5%;
  width: 45%;
}
.point2-image--2 {
  top: 54%;
  left: 3%;
  width: 40%;
}
.point2-line-image {
  position: absolute;
  top: 85%;
  left: 12%;
  width: 47%;
  overflow: hidden;
}

.point2-line-image img {
  transform: translateX(-100%);
}
.point2-line-image.active img {
  animation: moveRight;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.point3 {
  position: relative;
  overflow: hidden;
}
.point3-image {
  position: absolute;
}
.point3-image--1 {
  top: 68%;
  left: 0;
  right: 0;
  width: 80%;
  margin: auto;
  visibility: hidden;
  opacity: 0;
}
.point3-image--1.active {
  visibility: visible;
  animation: fadeUpAnime;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}


.result1 {
  position: relative;
}
.result1-image {
  position: absolute;
  width: 10%;
  overflow: hidden;
}
.result1-image--1 {
  top: 0;
  left: 25%;
}
.result1-image--2 {
  top: 10%;
  left: 10%;
}
.result1-image img {
  transform: translateY(-100%);
}
.result1-image.active img {
  animation-name: moveDown;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.result2 {
  position: relative;
}
.result2-image {
  position: absolute;
  width: 10%;
  overflow: hidden;
}
.result2-image--1 {
  top: 0;
  right: 10%;
}
.result2-image--2 {
  top: 0%;
  right: 25%;
}
.result2-image img {
  transform: translateY(-100%);
}
.result2-image.active img {
  animation-name: moveDown;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.result3 {
  position: relative;
}
.result3-image {
  position: absolute;

  visibility: hidden;
  opacity: 0;
}
.result3-image img {
  width: 100%;
}
.result3-image.active {
  visibility: visible;
  animation: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.result3-image--1 {
  top: 45%;
  left: 60%;
  width: 32%;
}
.result3-image--2 {
  top: 58%;
  left: 60%;
  width: 32%;
}
.result3-image--3 {
  top: 71%;
  left: 63%;
  width: 26%;
}
.result3-image--4 {
  top: 82%;
  left: 57%;
  width: 38%;
}

.scene {
  position: relative;
  overflow: hidden;
}
.scene-image {
  position: absolute;
  width: 60%;
}
.scene-image--1 {
  top: 31%;
  right: 0;
  transform: translateX(100%);
}
.scene-image--1.active {
  animation: moveLeft;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.scene-image--2 {
  top: 52%;
  left: 6%;
  transform: translateX(-120%);
}
.scene-image--2.active {
  animation: moveRight;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.scene-image--3 {
  top: 71%;
  right: 0;
  transform: translateX(100%);
}
.scene-image--3.active {
  animation: moveLeft;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.scene-image--4 {
  top: 91%;
  left: 6%;
  transform: translateX(-120%);
}
.scene-image--4.active {
  animation: moveRight;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

.howto {
  position: relative;
}
.howto-image {
  position: absolute;
}
.howto-image--1 {
  top: 28%;
  right: 5%;
  width: 40%;
  visibility: hidden;
  opacity: 0;
}
.howto-image--1.active {
  visibility: visible;
  animation: fadeInAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}
.howto-image--2 {
  top: 38%;
  right: 30%;
  width: 38%;
}
.howto-image--3 {
  top: 60%;
  left: 10%;
  width: 76%;
  overflow: hidden;
}
.howto-image--3 img {
  transform: translateX(-100%);
}
.howto-image--3.active img {
  animation: moveRight;
  animation-duration: .5s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

/* odometer */
.odometer-inside {
  display: flex;
  align-items: center;
  justify-content: end;
  background: linear-gradient(180deg, #513BDC, #C23EA0 40%, #FE696E);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.odometer-digit-spacer {
  display: none;
}
.odometer-value.odometer-first-value:not(.odometer-last-value) {
  display: none;
}

#salesVolumeFadeUp {
  transition: transform 1s;
  transition-timing-function: cubic-bezier(.165,.84,.44,1);
  transform: translate3d(0,120%,0);
}
#salesVolumeFadeUp.--completed {
  transform: translate3d(0,0,0);
}

/* floationg animation */
@keyframes floating {
  to {
    translate: 0 var(--distance, -2rem)
  }
}

.--floating-animation {
  animation: floating var(--animation-duration, .5s) var(--animation-delay, 0s) ease-in-out infinite alternate;
}

/* fadeIn animation */
@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


/* fadeUp animation */
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(100px);
  }

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

/* blink */
.blinking {
  animation: blink .7s ease-in-out infinite alternate;
}
@keyframes blink {
  0% { opacity: 0; }
  40% { opacity: 1; }
  100% { opacity: 1; }
}

/* reflection */
@keyframes reflection {
  0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
  80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
  100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

.reflection {
  display: inline-block;
  position: relative;
  overflow: hidden;
}
.reflection:after {
  content: "";
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflection 2s ease-in-out infinite;
}

/* mochimochi */
.mochimochi {
  animation: mochimochi 1.5s infinite;
}

@keyframes mochimochi {
  0% {
    transform: scale(1, 0.8);
  }
  20% {
    transform: scale(0.8, 1.1);
  }
}

/* puyopuyo */
.puyopuyo {
  animation: puyopuyo 1.5s infinite;
}

@keyframes puyopuyo {
  0% {
    transform: scale(1);
  }
  50%{
    transform: scale(.8);
  }
  100% {
    transform: scale(1);
  }
}

/* buruburu */
.buruburu {
  animation: buruburu 1.5s linear infinite;
  scale: 1;
}
@keyframes buruburu{
  0%{transform:translateX(0)}
  7%{transform:translateX(-10px)}
  14%{transform:translateX(10px)}
  20%{transform:translateX(-10px)}
  32%{transform:translateX(10px)}
  40%{transform:translateX(0px)}
 }

 /* rotate */
 .rotate {
  animation: rotate var(--animation-duration, 4s) linear infinite;
 }
 @keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

@keyframes blurAnime{
  from {
    filter: blur(0);
    transform: scale(1);
  }

  to {
    filter: blur(10px);
    transform: scale(1.1);
  }
}

.blur-light {
  animation-name: blurLightAnime;
  animation-duration: 1s;
  animation-delay: var(--animation-delay, .5s);
  animation-fill-mode: forwards;
}

@keyframes blurLightAnime{
  from {
    filter: blur(0);
    transform: scale(1);
  }

  to {
    filter: blur(4px);
    transform: scale(1.1);
  }
}

@keyframes moveDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes moveRight {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes moveLeft {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes moveRightTopToBottomBown {
  from {
    transform: translate(100%, -100%);
  }
  to {
    transform: translate(0, 0);
  }
}

/*背景色が伸びて出現 共通*/
.bgextend {
  animation-name: bgextendAnimeBase;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  position: relative;
  overflow: hidden;
  opacity: 0;
}

@keyframes bgextendAnimeBase {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/*中の要素*/
.bgappear {
  animation-name: bgextendAnimeSecond;
  animation-duration: 1s;
  animation-delay: 0.6s;
  animation-fill-mode: forwards;
  opacity: 0;
}

@keyframes bgextendAnimeSecond {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/*--------- 左から --------*/
.bgLRextend::before {
  animation-name: bgLRextendAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #fff;
}
@keyframes bgLRextendAnime{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

/* SP */
@media (max-width: 767px){
  .container {
    width: 100%;
    /* margin: auto; */
  }
  .offerbtn--bottom img {
    width: 100%;
  }
  .scroll-infinity__item {
    width: 190vw;
  }

  .hot-topic-image--3 {
    width: 70%;
  }


  /* .hot-topic-image.hot-topic-image--1 img {
    width: 35vw;
  }

  .hot-topic-image.hot-topic-image--2 img {
    width: 30vw;
  }

  .hot-topic-image.hot-topic-image--3 img {
    width: 76vw;
  }

  .sales-volume-animation-image {
    margin-top: -42vw;
  } */

  .follower-count {
    position: absolute;
    top: 11%;
    left: 0;
    font-size: 25vw;
  }
}
/* ---------- フッター ---------- */
.footer-text {
  text-align: center;
  font-size: 0.9rem;
}
a:-webkit-any-link {
  color: -webkit-link;
  cursor: pointer;
  text-decoration: underline;
}