@charset "utf-8";

html, body {
    height: 100%;
}

body {
    background: #fff;
    margin: 0;
}

.visual {
    background-image: url(../images/visual.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: auto;
    position: relative;
    width: 100%;
    height: 100%;
}

.visual .mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.visual .txt {
    font-size: 0;
    line-height: 1;
    position: absolute;
    top: 110px;
    left: 130px;
}

.visual .line {
  display: block;
  font-family: "Josefin Sans";
  font-size: 80px;
  font-weight: bold;
}

.visual .line + .line {
  margin-top: 15px;
}

.visual .letter {
  display: inline-block;
  padding-top: 5px;
}

.visual .large {
  font-size: 100px;
}

.visual .mask.normal {
    color: #00cce1;
    -webkit-clip-path: polygon(0 0, 350px 0, 350px 460px, 0 460px);
    clip-path: polygon(0 0, 350px 0, 350px 460px, 0 460px);
}

.visual .mask.burn {
  color: #004156;
  -webkit-clip-path: polygon(350px 0, 862px 0, 862px 460px, 350px 460px);
  clip-path: polygon(350px 0, 862px 0, 862px 460px, 350px 460px);
}

.mask.burn {
  mix-blend-mode: color-burn;
}

.visual .line,
.visual .letter {
  opacity: 0;
}

.visual.is-visible .line {
  opacity: 1;
}
.visual.is-visible .letter {
  animation: slideIn .8s cubic-bezier(0,1.2,.13,1.5) forwards;
}

@keyframes slideIn {
  0% {
    opacity: 0;
    transform: translate3d(-100px,0,0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}