html {
  font-size: 15px;
  --a-delay: 0s;
}

@media (max-width: 750px) {
  html {
    font-size: 2vw;
  }
}

* {
  margin: 0;
}

img,
video,
input
{
  display: block;
  width: 100%;
}

/* layout */
.l-container {
  width: 100%;
  max-width: 750px;
  background-color: #FFF;
  margin: auto;
}

.l-section {
  position: relative;
  overflow: hidden;
  z-index: 2;
}

/* utilities */
.u-absolute-tl {
  position: absolute;
  top: var(--top, 0);
  left: var(--left, 0);
  width: var(--width, 100%);
}

.u-absolute-tr {
  position: absolute;
  top: var(--top, 0);
  right: var(--right, 0);
  width: var(--width, 100%);
}

.u-absolute-center {
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: var(--top, 0);
  width: var(--width, 100%);
}

/* animation */
/* blink */
.a-blink {
  animation-name: blink-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes blink-animation {
  0% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

/* reflection */
.a-reflection {
  display: inline-block;
  position: relative;
  overflow: hidden;
  clip-path: var(--ref-clip-path, circle(50% at 50% 50%))
}

.active .a-reflection:after,
.a-reflection.active:after {
  content: "";
  position: absolute;
  height: 24%;
  width: 100%;
  top: -11%;
  left: -30%;
  background-color: #fff;
  opacity: 0;
  transform: translate(0, 0) rotate(-45deg);
  animation-name: reflection-animation;
  animation-duration: var(--a-duration, 2s);
  animation-delay: var(--a-delay, 1s);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-iteration-count: var(--a-iteration-count, 1);
}

@keyframes reflection-animation {
  40% {

  }
  50% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 0;
  }

  65% {
    opacity: 0;
  }

  70% {
    opacity: .4;
  }

  90% {
    opacity: 0;
  }

  100% {
    transform: translate(70%, 380%) rotate(-45deg);
    opacity: 0;
  }
}

/* reflection */
.a-reflection-square {
  display: inline-block;
  position: relative;
  overflow: hidden;
}

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

@keyframes reflection-square-animation {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }

  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }

  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }

  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

/* puyopuyo */
.a-puyopuyo {
  animation-name: puyopuyo-animation;
  animation-duration: var(--a-duration, 1.5s);
  animation-delay: var(--a-delay, 1s);
  animation-iteration-count: infinite;
}

@keyframes puyopuyo-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(.8);
  }

  100% {
    transform: scale(1);
  }
}

/* fade in */
.a-fade-in {
  opacity: 0;
  visibility: hidden;
}

.active .a-fade-in,
.active.a-fade-in {
  animation-name: fade-in-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
  visibility: visible;
}

@keyframes fade-in-animation {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/* fade up */
.a-fade-up {
  opacity: 0;
  visibility: hidden;
}

.active .a-fade-up,
.active.a-fade-up {
  animation-name: fade-up-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
  visibility: visible;
}

@keyframes fade-up-animation {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* zoom */
.active .a-zoom,
.a-zoom.active {
  animation-name: zoom-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
}

@keyframes zoom-animation {
  from {
    transform: scale(1);
  }

  to {
    transform: scale(1.5);
  }
}

/* banner down */
.a-banner-down {
  clip-path: inset(0% 0% 100% 0%);
}

.active .a-banner-down,
.a-banner-down.active {
  animation-name: banner-down-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
}

@keyframes banner-down-animation {
  from {
    clip-path: inset(0% 0% 100% 0%);
  }

  to {
    clip-path: inset(0%);
  }
}

/* banner up */
.a-banner-up {
  clip-path: inset(100% 0% 0% 0%);
}

.active .a-banner-up,
.a-banner-up.active {
  animation-name: banner-up-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
}

@keyframes banner-up-animation {
  from {
    clip-path: inset(100% 0% 0% 0%);
  }

  to {
    clip-path: inset(0%);
  }
}

/* banner left to right */
.a-banner-l-to-r {
  clip-path: inset(0% 100% 0% 0%);
}

.active .a-banner-l-to-r,
.a-banner-l-to-r.active {
  animation-name: banner-l-to-r-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
}

@keyframes banner-l-to-r-animation {
  from {
    clip-path: inset(0% 100% 0% 0%);
  }

  to {
    clip-path: inset(0%);
  }
}

/* banner right to left */
.a-banner-r-to-l {
  clip-path: inset(0% 100% 0% 0%);
}

.active .a-banner-r-to-l,
.a-banner-r-to-l.active {
  animation-name: banner-r-to-l-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, 1s);
  animation-fill-mode: forwards;
}

@keyframes banner-r-to-l-animation {
  from {
    clip-path: inset(0% 0% 0% 100%);
  }

  to {
    clip-path: inset(0%);
  }
}

/* move left */
.a-move-left {
  transform: translateX(var(--a-transform-from, 120%));
}

.active .a-move-left,
.a-move-left.active {
  animation-name: move-left-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, .5s);
  animation-fill-mode: forwards;
}

@keyframes move-left-animation {
  from {
    transform: translateX(var(--a-transform-from, 120%));
  }

  to {
    transform: translateX(0);
  }
}

/* move right */
.a-move-right {
  transform: translateX(var(--a-transform-from, -120%));
}

.active .a-move-right,
.a-move-right.active {
  animation-name: move-right-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, .5s);
  animation-fill-mode: forwards;
}

@keyframes move-right-animation {
  from {
    transform: translateX(var(--a-transform-from, -120%));
  }

  to {
    transform: translateX(0);
  }
}

/* move up + rotate */
.a-move-up-rotate {
  transform: translateY(var(--a-transform-from, 120%));
}

.active .a-move-up-rotate,
.a-move-up-rotate.active {
  animation-name: move-up-rotate-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, .5s);
  animation-fill-mode: forwards;
}

@keyframes move-up-rotate-animation {
  from {
    transform: translateY(var(--a-transform-from, 120%)) rotate(-45deg);
  }

  to {
    transform: translateY(0) rotate(0);
  }
}

/* rotate front and back */
.active .a-rotate-f-b,
.a-rotate-f-b.active {
  animation-name: rotate-f-b-animation;
  animation-duration: var(--a-duration, 1s);
  animation-delay: var(--a-delay, .5s);
  animation-fill-mode: forwards;
}

@keyframes rotate-f-b-animation {
  0% {
    transform: scale(1, 1)
  }

  50% {
    transform: scale(-1, 1);
  }

  100% {
    transform: scale(1, 1);
  }
}

/* draw line animation */
.a-draw-line {
  fill: none;
  stroke: #FFF;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
  stroke-dasharray: 700;
  stroke-dashoffset: 700 !important;
  transition: 2s;
}
.a-draw-line.active {
  stroke-dashoffset: 0 !important;
}

/* scroll infinity */
.a-scroll-infinity-wrapper {
  display: flex;
  overflow: hidden;
}

.a-scroll-infinity-list {
  display: flex;
  list-style: none;
  padding: 0;
}

.a-scroll-infinity-list.--right {
  animation: infinity-scroll-right 20s infinite linear 0.5s both;
}
.a-scroll-infinity-list.--left {
  animation: infinity-scroll-left 20s infinite linear 0.5s both;
}

.a-scroll-infinity-item {
  width: 80rem;
}

@keyframes infinity-scroll-right {
  from {
    transform: translateX(-100%);
  }

  to {
    transform: translateX(0%);
  }
}
@keyframes infinity-scroll-left {
  from {
    transform: translateX(0%);
  }

  to {
    transform: translateX(-100%);
  }
}

/* insta-slider */
.p-insta-slider .slick-slide, .p-insta-slider .slick-slide.slick-cloned {
  width: 24.7rem;
  margin-left: 2rem;
  margin-right: 2rem;
  opacity: 1 !important;
}
.p-insta-slider .slick-slide:not(.slick-center) {
  width: 24rem;
  margin-top: .1%;
  opacity: .6 !important;
}
.p-insta-slider .slick-dots {
  bottom: inherit;
  top: 55.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-insta-slider .slick-dots li {
  margin: 0 2%;
}
.p-insta-slider .slick-dots li button:before {
  color: #C6021B;
  font-size: 1.2rem;
}
.p-insta-slider .slick-dots li.slick-active button:before {
  color: #C6021B;
}

/* faq-slider */
.p-faq-slider .slick-slide {
  width: 38rem;
  margin: 0 1rem;
}
.p-faq-slider .slick-dots {
  bottom: inherit;
  top: 45.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-faq-slider .slick-dots li {
  margin: 0 2%;
}
.p-faq-slider .slick-dots li button:before {
  color: #000;
  font-size: 1.2rem;
}
.p-faq-slider .slick-dots li.slick-active button:before {
  color: #EE7EA6;
}
.p-faq-slider .slide-arrow {
  cursor: pointer;
  width: 4rem;
  position: absolute;
  z-index: 10;
  top: 45%;
}
.p-faq-slider .slide-arrow.prev-arrow {
  left: 6%;
}
.p-faq-slider .slide-arrow.next-arrow {
  right: 6%;
}

/* case-slider */
.p-case-slider .slick-slide {
  width: 40rem;
  margin: 0 .8rem;
}
.p-case-slider .slick-dots {
  bottom: inherit;
  top: 41.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-case-slider .slick-dots li {
  margin: 0 2%;
}
.p-case-slider .slick-dots li button:before {
  color: #FFF;
  font-size: 1.2rem;
}
.p-case-slider .slick-dots li.slick-active button:before {
  color: #EE7EA6;
}
.p-case-slider .slide-arrow {
  cursor: pointer;
  width: 4rem;
  position: absolute;
  z-index: 10;
  top: 45%;
}
.p-case-slider .slide-arrow.prev-arrow {
  left: 4%;
}
.p-case-slider .slide-arrow.next-arrow {
  right: 4%;
}

/* p-toneup-slider */
.p-toneup-slider .slick-slide {
  width: 30rem;
  margin: 0 1rem;
}
.p-toneup-slider .slick-dots {
  bottom: inherit;
  top: 37.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-toneup-slider .slick-dots li {
  margin: 0 2%;
}
.p-toneup-slider .slick-dots li button:before {
  color: #000;
  font-size: 1.2rem;
}
.p-toneup-slider .slick-dots li.slick-active button:before {
  color: #EE7EA6;
}
.p-toneup-slider .slide-arrow {
  cursor: pointer;
  width: 4rem;
  position: absolute;
  z-index: 10;
  top: 45%;
}
.p-toneup-slider .slide-arrow.prev-arrow {
  left: 14%;
}
.p-toneup-slider .slide-arrow.next-arrow {
  right: 14%;
}

/* p-case2-slider */
.p-case2-slider .slick-slide {
  width: 40rem;
  margin: 0 1rem;
}
.p-case2-slider .slick-dots {
  bottom: inherit;
  top: 35.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-case2-slider .slick-dots li {
  margin: 0 2%;
}
.p-case2-slider .slick-dots li button:before {
  color: #FFF;
  font-size: 1.2rem;
}
.p-case2-slider .slick-dots li.slick-active button:before {
  color: #EE7EA6;
}
.p-case2-slider .slide-arrow {
  cursor: pointer;
  width: 4rem;
  position: absolute;
  z-index: 10;
  top: 45%;
}
.p-case2-slider .slide-arrow.prev-arrow {
  left: 4%;
}
.p-case2-slider .slide-arrow.next-arrow {
  right: 4%;
}

/* p-toneup2-slider */
.p-toneup2-slider .slick-slide {
  width: 32rem;
  margin: 0 1rem;
}
.p-toneup2-slider .slick-dots {
  bottom: inherit;
  top: 40.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.p-toneup2-slider .slick-dots li {
  margin: 0 2%;
}
.p-toneup2-slider .slick-dots li button:before {
  color: #000;
  font-size: 1.2rem;
}
.p-toneup2-slider .slick-dots li.slick-active button:before {
  color: #EE7EA6;
}
.p-toneup2-slider .slide-arrow {
  cursor: pointer;
  width: 4rem;
  position: absolute;
  z-index: 10;
  top: 45%;
}
.p-toneup2-slider .slide-arrow.prev-arrow {
  left: 12%;
}
.p-toneup2-slider .slide-arrow.next-arrow {
  right: 12%;
}

/* odometer */
.odometer-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--odometer-bg, #000);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  font-family: "Oswald", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.odometer-digit-spacer {
  display: none;
}
.odometer-value.odometer-first-value:not(.odometer-last-value) {
  display: none;
}