@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap");
@import url("https://use.typekit.net/mwo6hse.css");
/*========= waveを描画するエリア設定 ===============*/
#wavy-line {
  position: fixed;
  top: 90px;
  left: -10vw;
  width: 00%;
  height: 240px;
  margin-left: -2vw;
  transform: translateY(-50px) translateX(-100vw);
  transition: 6s;
  opacity: 0;
  animation: wavyFadeIn .5s 1 linear forwards;
  z-index: -1;
  /*
      @include mq($break_sp){
          transform: translateY(-50px) translateX(-300vw);
  
          &.index {
              transform: translateY(0) translateX(-300vw);
          }
          &.active {
              transform: translateY(-50px) translateX(-202vw);
              &.index {
                  transform: translateY(0) translateX(-202vw);
              }
          }
      }
  
   */
}
#wavy-line.index {
  transform: translateY(0) translateX(-100vw);
}
#wavy-line.active {
  left: 0;
  width: 100%;
  transform: translateY(-50px) translateX(-2vw);
}
#wavy-line.active.index {
  transform: translateY(0) translateX(-2vw);
}
#wavy-line.fade {
  animation: wavyFadeOut 1s 1 linear forwards;
}
@media only screen and (max-width: 767px) {
  #wavy-line {
    top: 30px;
    height: 40vw;
  }
}

@keyframes wavyFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes wavyFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
.wave {
  width: 1040px;
  height: 240px;
  position: absolute;
  top: 0;
  right: 20vw;
  left: inherit;
}
@media only screen and (max-width: 767px) {
  .wave {
    width: 90vw;
    height: 40vw;
  }
}

#canvasContainer {
  height: 17.35vw;
  position: relative;
}
@media only screen and (max-width: 767px) {
  #canvasContainer {
    height: 20vw;
  }
}

@media only screen and (max-width: 767px) {
  #waveCanvas1 {
    top: 50%;
  }
}

#waveTipText {
  position: absolute;
  font-size: 24px;
  font-weight: bold;
  color: black;
  top: 50%;
  left: 1045px;
  width: 26px;
  height: 26px;
  /*
  transform: translateY(-8%);
   */
}
#waveTipText img {
  width: 100%;
  vertical-align: top;
}
@media only screen and (max-width: 767px) {
  #waveTipText {
    left: 100%;
    width: 18px;
    height: 18px;
  }
}

@media only screen and (min-width: 1300px) {
  .wave {
    right: initial;
    left: 0;
  }
}
.wave canvas {
  position: absolute;
  bottom: 50%;
  transform: translateY(50%);
  left: 0;
  width: 100%;
  /*
  min-width: 1040px;
   */
}
@media only screen and (max-width: 767px) {
  .index .wave canvas {
    height: 25vw;
  }
}

.wave canvas#waveCanvas1 {
  /*
  width: 90%;
   */
  bottom: inherit;
  transform: none;
}

.wave canvas#waveCanvas2 {
  transform: translateY(55%);
}

.wave canvas#waveCanvas3 {
  transform: translateY(65%);
}

.wave canvas#waveCanvas4 {
  transform: translateY(40%) rotate(0deg);
}

.wave canvas#waveCanvas5 {
  transform: translateY(65%) rotate(-3deg);
}

.wave canvas#waveCanvas6 {
  transform: translateY(45%) rotate(1deg);
}

.wave canvas#waveCanvas7 {
  transform: translateY(65%) rotate(0deg);
}

.wave canvas#waveCanvas8 {
  transform: translateY(70%) rotate(4deg);
}

@keyframes waveAnimation1 {
  /*
    0% { width: 90%; }
   49% { width: 95%; }
  100% { width: 90%; }
   */
}
@keyframes waveAnimation2 {
  0% {
    width: 86%;
  }
  49% {
    width: 91%;
  }
  100% {
    width: 86%;
  }
}
@keyframes waveAnimation3 {
  0% {
    width: 98%;
  }
  49% {
    width: 93%;
  }
  100% {
    width: 98%;
  }
}
@keyframes waveAnimation4 {
  0% {
    width: 80%;
  }
  49% {
    width: 89%;
  }
  100% {
    width: 80%;
  }
}
@keyframes waveAnimation5 {
  0% {
    width: 75%;
  }
  49% {
    width: 79%;
  }
  100% {
    width: 75%;
  }
}
@keyframes waveAnimation6 {
  0% {
    width: 94%;
  }
  49% {
    width: 85%;
  }
  100% {
    width: 94%;
  }
}
@keyframes waveAnimation7 {
  0% {
    width: 94%;
  }
  49% {
    width: 97%;
  }
  100% {
    width: 94%;
  }
}
@keyframes waveAnimation8 {
  0% {
    width: 92%;
  }
  49% {
    width: 88%;
  }
  100% {
    width: 92%;
  }
}
#waveCanvas1 {
  animation: waveAnimation1 5s linear infinite;
}

#waveTipImage {
  animation: waveAnimation1_img 5s linear infinite;
}

#waveCanvas2 {
  animation: waveAnimation2 5s linear infinite;
}

#waveCanvas3 {
  animation: waveAnimation3 5s linear infinite;
}

#waveCanvas4 {
  animation: waveAnimation4 5s linear infinite;
}

#waveCanvas5 {
  animation: waveAnimation5 5s linear infinite;
}

#waveCanvas6 {
  animation: waveAnimation6 5s linear infinite;
}

#waveCanvas7 {
  animation: waveAnimation7 5s linear infinite;
}

#waveCanvas8 {
  animation: waveAnimation8 5s linear infinite;
}

/* 波線全体を上下に動かす */
.wave-moving {
  transition: 8s;
}

@keyframes moveWave {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}