html, body {
  margin: 0;
  padding: 0;
}
#kv {
  position: fixed;
  width: 100%;
  height: 100vh;
  height: 100svh;
  top: 0;
  left: 0;
  background-color:#F5F5F5;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.5s;
}
#kv .kv-layout {
  padding: 0 40px;
}
#kv .kv-section {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}
#kv .kv-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 768px) {
  #kv .kv-layout {
    padding: 0 20px;
  }
}
#kv canvas {
  overflow: hidden;
}

/**
  * Guide
  */
#kv .guide {
  pointer-events: none;
}
#kv .guide .items {
  position: relative;
  width: 100%;
  height: 100%;
}
#kv .guide .item-v {
  position: absolute;
  width: 1px;
  height: 100%;
  background-color: #777;
  top: 0;
}
#kv .guide .item-v.center {
  left: 50%;
  transform: translateX(-50%);
}
#kv .guide .item-v.left {
  left: 40px;
}
#kv .guide .item-v.right {
  right: 40px;
}
#kv .guide .item-h {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #777;
  left: 0;
}
#kv .guide .item-h.center {
  top: 50%;
  transform: translateY(-50%);
}

/**
  * Splash
  */
#kv .splash {
  background-color: transparent;
  transition: background-color 0.5s, height 1.0s, opacity 0.5s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

#kv .splash .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 278.19px;
  height: auto;
  aspect-ratio: 278.19/41.69;
  transition: opacity 0.5s;
}
#kv .splash .image svg {
  width: 100%;
  height: 100%;
}
#kv[data-splash-state="show"] .splash,
#kv[data-splash-state="logo-hide"] .splash,
#kv[data-splash-state="line"] .splash {
  background-color: #D02F2F;
}

#kv[data-splash-state="line"] .splash {
  height: 10px;
}
@media screen and (max-width: 768px) {
  #kv[data-splash-state="line"] .splash {
    height: 8px;
  }
}

#kv[data-splash-state="line"] .splash .image,
#kv[data-splash-state="logo-hide"] .splash .image {
  opacity: 0;
}

#kv[data-splash-state="hidden"] .splash,
body[data-is-revisit="true"] #kv .splash {
  height: 10px;
  opacity: 0;
  pointer-events: none;
}
body[data-is-revisit="true"] #kv .splash {
  transition: none;
}
#kv[data-splash-state="hidden"] .splash .image,
body[data-is-revisit="true"] #kv .splash .image {
  transition: none;
  opacity: 0;
}
@media screen and (max-width: 768px) {
  #kv .splash .image {
    width: 220px;
  }
}

/**
  * Copy
  */
#kv .copy .copy-text {
  aspect-ratio: 600/47;
  max-width: 600px;
  width: auto;
  height: 47px;
}
#kv .copy svg .b {
  fill: #191919;
  opacity: 0;
  transform: translateY(47px);
}
#kv .copy svg .c {
  fill: none;
  opacity: 0;
}
#kv .copy .lines {
  position: absolute;
  display: grid;
  grid-row-gap: 12px;
  top: calc(50% - 80px);
  transform: translateY(-50%);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1), top 1s cubic-bezier(0.77, 0, 0.175, 1);
}

/*
#kv[data-copy-state="show"] .copy svg .b,
#kv[data-copy-state="up"] .copy svg .b,
#kv[data-copy-state="show"] .copy svg .c,
#kv[data-copy-state="up"] .copy svg .c,
#kv[data-copy-state="show"] .copy svg .b,
#kv[data-copy-state="up"] .copy svg .b,
#kv[data-copy-state="show"] .copy svg g,
#kv[data-copy-state="up"] .copy svg g,
body[data-is-revisit="true"] #kv .copy svg .b,
body[data-is-revisit="true"] #kv .copy svg .c,
body[data-is-revisit="true"] #kv .copy svg g {
  transform: translateY(0) rotate(0deg) !important;
  opacity: 1;
}
*/

#kv[data-copy-state="up"] .copy .lines,
body[data-is-revisit="true"] #kv .copy .lines {
  top: 148px;
  transform: translateY(0);
}
body[data-is-revisit="true"] #kv .copy .lines {
  transition: none !important;
}

@media (max-width: 768px) {
  #kv .copy .lines {
    top: calc(50% - 80px);
  }
  #kv[data-copy-state="up"] .copy .lines,
  body[data-is-revisit="true"] #kv .copy .lines {
    top: 102px;
    transform: translateY(0);
  }
  body[data-is-revisit="true"] #kv .copy .lines {
    transition: none;
  } 
}

/**
  * Line Infinity
  */
#kv .line-infinity {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
#kv .line-infinity__wrap {
  display: flex;
  flex-wrap: nowrap;
}

/*
@media screen and (max-width: 768px) {
  #kv .line-infinity__wrap[data-color="green"] {
    transform: translate(0, -3vh) rotate(-10deg);
  }
}
*/

#kv .line-infinity__list {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
  flex-grow: 1;
  flex-shrink: 1;
  margin-inline: calc(-50%-50vw);
}

#kv .line-infinity__item {
  display: block;
  flex-grow: 1;
  /*
  aspect-ratio: 1366/150;
  */
  height: auto;
  transform: scale(1.004, 1);
}

@keyframes infinity-scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes line-infinity__list--right {
  0% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(0%);
  }
}
#kv .line-infinity__wrap[data-color="green"] {
  transform: translate(0, 3vh) rotate(-6deg);
}
#kv .line-infinity__wrap[data-color="yellow"] {
  transform: translate(0, 7vh) rotate(1deg);
}
#kv .line-infinity__item.long {
  aspect-ratio: 683/150;
  width: 120vw;
}
#kv .line-infinity__item.short {
  aspect-ratio: 683/90;
  width: 100vw;
}
@media screen and (max-width: 768px) {
  #kv .line-infinity__wrap[data-color="green"] {
    transform: translate(0, 0) rotate(-9deg);
  }
  #kv .line-infinity__item.long {
    width: 160vw;
    transform: translateX(-30vw) scale(1.004, 1);
  }
  #kv .line-infinity__item.short {
    width: 140vw;
  }
}

#kv .line-infinity__canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  pointer-events: none;
}

#kv .line-infinity {
  --easing: cubic-bezier(0.77, 0, 0.175, 1);
  --delay: 0s;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 1s, transform 1.5s var(--easing); /*, transform 1.5s var(--easing); */
  transform-origin: 0 0;
  transition-delay: var(--delay);
  will-change: transform;
  /*
  mask-size: 200% 100%;
  mask-image: linear-gradient(to right, transparent 50%, #000 50%);
  mask-position: 200% 0;
  */
}
#kv .line-infinity.green {
  transform: translate3d(-100%, 30%, 0);
}
#kv .line-infinity.yellow {
  transform: translate3d(-100%, -30%, 0);
}
@media screen and (max-width: 768px) {
#kv .line-infinity.yellow {
  transform: translate3d(-100%, -10%, 0);
}
}
#kv[data-line-infinity-state="show"] .line-infinity,
body[data-is-revisit="true"] #kv .line-infinity {
  opacity: 1;
  /*
  mask-position: 100% 0;
  */
  transform: translate3d(0, 0, 0);
}
body[data-is-revisit="true"] #kv .line-infinity {
  transition: none;
  transition-delay: 0s;
}
#kv .line-infinity__list--right.fast,
#kv .line-infinity__list--right.slow {
  transform: translateX(-200%);
  backface-visibility: hidden;
  flex-shrink: 0;
}

#kv[data-line-infinity-state="show"] .line-infinity__list--right.fast,
body[data-is-revisit="true"] #kv .line-infinity__list--right.fast {
  animation: line-infinity__list--right 16s infinite linear 0s both;
}

#kv[data-line-infinity-state="show"] .line-infinity__list--right.slow,
body[data-is-revisit="true"] #kv .line-infinity__list--right.slow {
  animation: line-infinity__list--right 22s infinite linear 0s both;
}
@media screen and (max-width: 768px) {
  #kv[data-line-infinity-state="show"] .line-infinity__list--right.fast,
  body[data-is-revisit="true"] #kv .line-infinity__list--right.fast {
    animation: line-infinity__list--right 14s infinite linear 0s both;
  }

  #kv[data-line-infinity-state="show"] .line-infinity__list--right.slow,
  body[data-is-revisit="true"] #kv .line-infinity__list--right.slow {
    animation: line-infinity__list--right 18s infinite linear 0s both;
  }
}

/**
  * Line Canvas
  */
#kv .line-canvas {
  transform: translateX(-100%);
  transition: transform 1.8s cubic-bezier(.45,.06,.08,1.01);
}
#kv[data-line-canvas-state="show"] .line-canvas,
body[data-is-revisit="true"] #kv .line-canvas {
  transform: translateX(0);
}
body[data-is-revisit="true"] #kv .line-canvas {
  transition: none;
}
.infinity-lines-and-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  transition: transform 3s ease;
}
#kv[data-copy-state="up"] .infinity-lines-and-canvas,
body[data-is-revisit="true"] #kv .infinity-lines-and-canvas {
  transform: translateY(-80px);
}
body[data-is-revisit="true"] #kv .infinity-lines-and-canvas {
  transition: none;
}

@media screen and (max-width: 768px) {
  #kv[data-copy-state="up"] .infinity-lines-and-canvas,
  body[data-is-revisit="true"] #kv .infinity-lines-and-canvas {
    transform: translateY(-13vh);
  }
}

/**
  * Particles
  */
#kv .particles .items {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#kv .particles .items .inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
#kv .particles .item {
  width: 60px;
  height: 60px;
  position: absolute;
  border-radius: 50%;
  translate: (-50%, -50%);
}
/* Particles:state */
#kv .particles {
  overflow:visible;
  opacity: 0;
}
#kv[data-particles-state="show"] .particles,
body[data-is-revisit="true"] #kv .particles {
  opacity: 1;
}
/**
  * Skip
  */
#kv .skip-button {
  position: absolute;
  width: 110px;
  height: 30px;
  bottom: 40px;
  right: 40px;
  z-index: 150;
  cursor: pointer;
  pointer-events: all;
  display: block;
  transition: opacity 0.2s;
}
#kv .skip-button svg .color {
  transition: fill 0.5s;
}
#kv .skip-button svg .arrow {
  transition: translate 0.5s;
}
@media screen and (max-width: 768px) {
  #kv .skip-button {
    right: 20px;
  }
}
#kv[data-state="loaded"] .skip-button,
body[data-is-revisit="true"] #kv .skip-button {
  opacity: 0;
  pointer-events: none;
}

#kv .skip-button:hover svg .color {
  fill: #D02F2F;
}
#kv .skip-button:hover svg .arrow {
  translate: 2px 0;
}


@media (max-width: 768px) {
  #kv .sp-hidden {
    display: none;
  }
  #kv .copy .copy-text {
    height: 32px;
  }
}
@media (min-width: 769px) {
  #kv .pc-hidden {
    display: none;
  }
}