@charset "UTF-8";
  body {text-align: center;-webkit-overflow-scrolling: touch; background-color: #fff; overflow: hidden;}
  header {box-shadow: 0px 2px 10px rgb(0 0 0 / 10%);}
  .wrapper {height: 100vh; position:relative;  margin: 0 auto; background: url("./images/bg.png") repeat-x left bottom;}
  .stage {display: none; width: 1440px; height: 813px; position:relative; z-index:10;  transform-origin: left center; margin: 0 auto;}
  .image0 {left: 0; top: 0; z-index: 1;}
  .image1 {left: -2px; top: -4px; z-index: 10; position: absolute;}
  .image2 {left: 394px; top: 224px; z-index: 60; position: absolute; opacity: 0;}
  .image3_1 {left: 358px; top: -200px; z-index: 1000; position: absolute;}
  .image3_2 {left: 626px; top: -200px; z-index: 1000; position: absolute;}
  .image3_3 {left: 932px; top: -200px; z-index: 1000; position: absolute;}
  .image3_4 {left: 120px; top: 36px; z-index: 1000; position: absolute;}
  .image3_1 img {width: 172px;}
  .image3_2 img {width: 244px;}
  .image3_3 img {width: 244px;}
  .image4 {left: 723px; top: 434px; z-index: 60; position: absolute;}
  .image5 {left: 898px; top: 466px; z-index: 61; position: absolute;}
  .image6 {left: 883px; top: 180px; z-index: 61; position: absolute;}
  .image7 {left: 1082px; top: 308px; z-index: 61; position: absolute;}
  .wave1 {left: 445px; top: 454px; z-index: 61; position: absolute;}
  .wave2 {left: 594px; top: 385px; z-index: 61; position: absolute;}
  .wave3 {left: 725px; top: 430px; z-index: 61; position: absolute;}
  .wave4 {left: 383px; top: 184px; z-index: 61; position: absolute;}
  .wave5 {left: 732px; top: 620px; z-index: 61; position: absolute;}
  .wave6 {left: 802px; top: 573px; z-index: 61; position: absolute;}
  .wave7 {left: 1055px; top: 255px; z-index: 61; position: absolute;}
  
  .wave1 img, .wave2 img, .wave3 img, .wave4 img, .wave5 img, .wave6 img, .wave7 img {position: absolute; left: 0; top: 0;}
  .wave3 img {width: 36px;}
  .wave4 img {width: 30px; transform: rotate(26deg);}
  .wave5 img {width: 38px; transform: rotate(24deg);}
  .wave6 img {width: 36px; transform: rotate(-22deg);}
  .wave7 img {width: 38px; transform: rotate(50deg);}





  .signboard__link {position: relative;}
  .main {width: 1440px;}

  .image2{
    animation-name: animation2;
    animation-duration: 6s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

  .signboard__link:hover{
    animation-name: animation3_hover;
    animation-duration: 0.6s;
    animation-delay: 0s;
    animation-fill-mode: forwards;
  }

  .image3_1{
    animation-name: animation3_1;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .image3_2{
    animation-name: animation3_2;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .image3_3{
    animation-name: animation3_3;
    animation-duration: 1s;
    animation-delay: 1s;
    animation-fill-mode: forwards;
  }
  .image5{
    animation-name: animation5;
    animation-duration: 5s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .image6{
    animation-name: animation6;
    animation-duration: 7s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
  .image7{
    animation-name: animation7;
    animation-duration: 8s;
    animation-delay: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }

@keyframes animation2{
    0%{top: 224px; opacity: 0;}
    30%{top: 224px; opacity: 0;}
    30.1%{top: 224px; opacity: 0;}
    44%{top: 210px; opacity: 1;}
    95.1%{top: 210px; opacity: 1;}
    100%{top: 210px; opacity: 0;}
}

@keyframes animation3_hover{
    0%{top: 0px;}
    50%{top: -6px;}
    100%{top: 0px;}
}

@keyframes animation3_1{
    0%{top: -200px;}
    30%{top: 34px;}
    70%{top: 22px;}
    100%{top: 34px; height: 100%;}
}
@keyframes animation3_2{
    0%{top: -200px;}
    30%{top: 266px;}
    70%{top: 254px;}
    100%{top: 266px; height: 100%;}
}
@keyframes animation3_3{
    0%{top: -200px;}
    30%{top: 34px;}
    70%{top: 22px;}
    100%{top: 34px; height: 100%;}
}
@keyframes animation5{
    0%{top: 466px;}
    25%{top: 466px;}
    25.1%{top: 466px;}
    50%{top: 482px;}
    50.1%{top: 482px;}
    75%{top: 482px;}
    75.1%{top: 482px;}
    100%{top: 466px;}
}
@keyframes animation6{
    0%{top: 180px;}
    25%{top: 180px;}
    25.1%{top: 180px;}
    50%{top: 215px;}
    50.1%{top: 215px;}
    75%{top: 215px;}
    75.1%{top: 215px;}
    100%{top: 180px;}
}
@keyframes animation7{
    0%{left: 1082px; top: 308px;}
    25%{left: 1082px; top: 308px;}
    25.1%{left: 1082px; top: 308px;}
    50%{left: 1152px; top: 282px;}
    50.1%{left: 1152px; top: 282px;}
    75%{left: 1152px; top: 282px;}
    75.1%{left: 1152px; top: 282px;}
    100%{left: 1082px; top: 308px;}
}