@charset "utf-8";
:root {
  --easingBounce: linear(0, -0.002 3%, -0.007 6.1%, -0.015 9.3%, -0.041 17.6%, -0.047 20.1%, -0.049 22.4%, -0.047 25.1%, -0.039 27.6%, -0.026 29.9%, -0.008 32.1%, 0.025 34.8%, 0.069 37.4%, 0.121 39.8%, 0.185 42.2%, 0.257 44.4%, 0.341 46.6%, 0.426 48.5%, 0.616 52.4%, 0.687 54.1%, 0.754 55.9%, 0.821 58%, 0.879 60.2%, 0.929 62.5%, 0.97 64.9%, 1.002 67.4%, 1.026 70.1%, 1.035 71.5%, 1.042 73%, 1.046 74.5%, 1.048 76.1%, 1.048 78.3%, 1.045 80.8%, 1.038 83.7%, 1.008 93.4%, 1.002 96.7%, 1);
  --media-size-sp: 750px;
}

#mainVisual {
  height: 100dvh;
  position: relative;
  background-color: #FFFFFF;
  z-index: -1;

  #mvLogoArea {
    width: 100%;
    height: 100%;
    display: grid;
    place-items: center;

    animation: 2s mvLogoFade 11s forwards;


    > div {
      display: flex;
      align-items: center;
      /*gap: 8dvh;*/
      gap: 4vw;
      animation: 1s mvLogoFilter 8s forwards;

      @media (max-width: 750px) {
        flex-direction: column;
        gap: 2dvh;
      }

      #mvMark {
        width: 26vw;
        height: 26vw;
        position: relative;
        /*//background-color: antiquewhite;*/

        animation: 1.5s markRotate 6.5s forwards ease-in-out;

        @media (max-width: 750px) {
          width: 60vw;
          height: 60vw;
        }

        > div {
          position: absolute;


          > span {
            display: block;
          }

          &:nth-of-type(1) {
            top: 0;
            left: 0;
            width: 68.5%;

            opacity: 0;

            animation: 6s markMove01 0s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.5s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.2s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(2) {
            top: 2%;
            left: 50%;
            width: 27%;

            opacity: 0;

            animation: 6s markMove02 0.05s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.5s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.2s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(3) {
            top: 16%;
            left: 67%;
            width: 29%;

            opacity: 0;

            animation: 6s markMove03 0.1s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.5s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.2s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(4) {
            top: 51%;
            left: 49%;
            width: 51%;

            opacity: 0;

            animation: 6s markMove04 0.15s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.5s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.2s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(5) {
            top: 68%;
            left: 32%;
            width: 53%;

            opacity: 0;

            animation: 6s markMove05 0.2s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.5s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.2s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(6) {
            top: 50%;
            left: 23%;
            width: 27%;

            opacity: 0;

            animation: 6s markMove06 0.25s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.1s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.3s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(7) {
            top: 34%;
            left: 5%;
            width: 29%;

            opacity: 0;

            animation: 6s markMove07 0.3s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.1s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.3s ease-in-out forwards alternate;
              }
            }
          }

          &:nth-of-type(8) {
            top: 25%;
            left: 0;
            width: 51%;

            opacity: 0;

            animation: 6s markMove08 0.35s forwards ease-in-out;

            & span {
              animation: 6.5s fuwafuwaHorizontal 0.5s ease-in-out forwards alternate;

              & img {
                animation: 6.5s fuwafuwaVertical 0.2s ease-in-out forwards alternate;
              }
            }
          }
        }
      }

      #mvLogo {
        /*width: 45dvh;*/
        width: 22.6vw;
        display: flex;
        flex-direction: column;
        /*gap: 2dvh;*/
        gap: 1vw;
        margin-top: 1vw;

        @media (max-width: 750px) {
          width: 38vw;
          gap: 0;
          margin-top: 2vw;
        }

        > div {


          & img {
            height: 100%;
          }

          /* &:nth-of-type(1) {
             font-size: 3.2dvh;
             margin-bottom: 2dvh;
             letter-spacing: 0.1em;
             opacity: 0;

             animation: 1.3s mvLogoWrapMove 6.8s forwards ease-in-out;
           }*/

          &:nth-of-type(1) {
            display: flex;
            /*height: 8dvh;*/
            height: 4vw;
            /*gap: 2.5dvh;*/
            gap: 1.24vw;
            position: relative;
            transform: translateY(3vw);

            /*animation: 1s mvLogoWrapMove 4.5s forwards ease-in-out;*/
            animation: 1.3s mvLogoWrapMove 6.8s forwards ease-in-out;

            @media (max-width: 750px) {
              height: 8vw;
              gap: 2vw;
              transform: translateY(0);
              /*animation: none;*/
              /*opacity: 1 !important;*/
            }

            > div {
              height: 100%;
              opacity: 0;

              flex-shrink: 0;

              &:nth-of-type(1) {
                animation: 6s mvLogoMove01 0.15s forwards ease-in-out;
              }

              &:nth-of-type(2) {
                animation: 6s mvLogoMove02 0.35s forwards ease-in-out;
              }

              &:nth-of-type(3) {
                animation: 6s mvLogoMove03 0.2s forwards ease-in-out;
              }

              &:nth-of-type(4) {
                animation: 6s mvLogoMove04 0.4s forwards ease-in-out;
              }

              &:nth-of-type(5) {
                animation: 6s mvLogoMove05 0.25s forwards ease-in-out;
              }

              &:nth-of-type(6) {
                animation: 6s mvLogoMove06 0.45s forwards ease-in-out;
              }

              &:nth-of-type(7) {
                animation: 6s mvLogoMove07 0.3s forwards ease-in-out;
              }


            }
          }

          &:nth-of-type(2) {
            height: 8dvh;
            opacity: 0;

            animation: 1.3s mvLogoWrapShow 6.8s forwards ease-in-out;

            @media (max-width: 750px) {
              height: 11vw;
            }
          }
        }


      }
    }
  }

  #mvBackArea {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    opacity: 0;

    animation: 2s mvBackImage 8s forwards;

    & img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
  }

  #mvBackConcept {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;

    opacity: 0;

    animation: 2s mvBackImage 11s forwards;

    & img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;

      @media (max-width: 750px) {
        object-fit: contain;
      }
    }
  }
}

#mainHeader {
  /*animation: 1s mainHeaderInvert 8s forwards;*/

  #headLogo,
  #headMenuButton {
    /*animation: 1s mainHeaderPartsInvert 8s forwards;*/
  }
}

@keyframes markMove01 {
  0% {
    transform: translate(228%, 140%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(228%, 140%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}


@keyframes markMove02 {
  0% {
    transform: translate(-120%, 120%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-120%, 120%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
}

@keyframes markMove03 {
  0% {
    transform: translate(131%, 83%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(131%, 83%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes markMove04 {
  0% {
    transform: translate(-130%, -225%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-130%, -225%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
}

@keyframes markMove05 {
  0% {
    transform: translate(-29%, -127%) rotate(-240deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-29%, -127%) rotate(-240deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);
    opacity: 1;
  }
}

@keyframes markMove06 {
  0% {
    transform: translate(376%, -64%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(376%, -64%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes markMove07 {
  0% {
    transform: translate(500%, -97%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(500%, -97%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes markMove08 {
  0% {
    transform: translate(120%, -80%) rotate(-270deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(120%, -80%) rotate(-270deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@media (max-width: 750px) {
  @keyframes markMove01 {
    0% {
      transform: translate(87%, 343%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(87%, 343%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);
      opacity: 1;
    }
  }

  @keyframes markMove02 {
    0% {
      transform: translate(-174%, 226%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-174%, 226%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);
      opacity: 1;
    }
  }

  @keyframes markMove03 {
    0% {
      transform: translate(27%, 68%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(27%, 68%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes markMove04 {
    0% {
      transform: translate(-86%, 65%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-86%, 65%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);
      opacity: 1;
    }
  }

  @keyframes markMove05 {
    0% {
      transform: translate(-79%, -178%) rotate(-240deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-79%, -178%) rotate(-240deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);
      opacity: 1;
    }
  }

  @keyframes markMove06 {
    0% {
      transform: translate(90%, -66%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(90%, -66%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes markMove07 {
    0% {
      transform: translate(158%, -170%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(158%, -170%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes markMove08 {
    0% {
      transform: translate(145%, -34%) rotate(-270deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(145%, -34%) rotate(-270deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }
}


@keyframes markRotate {

  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes fuwafuwaHorizontal {
  0% {
    transform: translateX(-1%);
  }
  20% {
    transform: translateX(1%);
  }
  40% {
    transform: translateX(-1%);
  }

  60% {
    transform: translateX(1%);
  }
  80% {
    transform: translateX(-1%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes fuwafuwaVertical {
  0% {
    transform: translateY(-1%);
  }
  20% {
    transform: translateY(1%);
  }
  40% {
    transform: translateY(-1%);
  }

  60% {
    transform: translateY(1%);
  }
  80% {
    transform: translateY(-1%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes mvBackImage {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes mvLogoFilter {
  0% {
    filter: brightness(1);
  }
  100% {
    filter: brightness(0) invert(1);
  }
}

@media (max-width: 750px) {
  @keyframes mainHeaderInvert {
    100% {
      background-color: transparent;
      border-bottom: none;
    }
  }
  @keyframes mainHeaderPartsInvert {
    100% {
      filter: brightness(0) invert(1);
      background-color: transparent;
    }
  }
}


@keyframes mvLogoWrapMove {
  /*0% {
    !*!/transform: translateY(8dvh);*!
  }
  100% {
    !*!/transform: translateY(0);*!
  }*/
  0% {
    /*opacity: 0;*/
    transform: translateY(3vw);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 750px) {
  @keyframes mvLogoWrapMove {
    /*0% {
      !*!/transform: translateY(8dvh);*!
    }
    100% {
      !*!/transform: translateY(0);*!
    }*/
    0% {
      /*opacity: 0;*/
      transform: translateY(0);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}
@keyframes mvLogoWrapShow {
  0% {
    opacity: 0;
    transform: translateY(-3dvh);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 750px) {
  @keyframes mvLogoWrapShow {
    0% {
      opacity: 0;
      transform: translateY(-3vw);
    }
    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

@keyframes mvLogoMove01 {
  0% {
    transform: translate(-201%, -162%) rotate(-378deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-201%, -162%) rotate(-378deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes mvLogoMove02 {
  0% {
    transform: translate(275%, 5%) rotate(-327deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(275%, 5%) rotate(-327deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes mvLogoMove03 {
  0% {
    transform: translate(-963%, 140%) rotate(-335deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-963%, 140%) rotate(-335deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes mvLogoMove04 {
  0% {
    transform: translate(-566%, 225%) rotate(-237deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-566%, 225%) rotate(-237deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes mvLogoMove05 {
  0% {
    transform: translate(228%, -193%) rotate(-308deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(228%, -193%) rotate(-308deg);
  }

  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes mvLogoMove06 {
  0% {
    transform: translate(-1386%, -221%) rotate(-441deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-1386%, -221%) rotate(-441deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@keyframes mvLogoMove07 {
  0% {
    transform: translate(-69%, 119%) rotate(-338deg);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    transform: translate(-69%, 119%) rotate(-338deg);
  }
  100% {
    transform: translate(0, 0) rotate(0);

    opacity: 1;
  }
}

@media (max-width: 750px) {
  @keyframes mvLogoMove01 {
    0% {
      transform: translate(-5vw, -71vw) rotate(-378deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-5vw, -71vw) rotate(-378deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes mvLogoMove02 {
    0% {
      transform: translate(38vw, 3vw) rotate(-327deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(38vw, 3vw) rotate(-327deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes mvLogoMove03 {
    0% {
      transform: translate(-2vw, -35vw) rotate(-335deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-2vw, -35vw) rotate(-335deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes mvLogoMove04 {
    0% {
      transform: translate(-566%, 225%) rotate(-237deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-566%, 225%) rotate(-237deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes mvLogoMove05 {
    0% {
      transform: translate(228%, -193%) rotate(-308deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(228%, -193%) rotate(-308deg);
    }

    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes mvLogoMove06 {
    0% {
      transform: translate(-31vw, -7vw) rotate(-441deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(-31vw, -7vw) rotate(-441deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

  @keyframes mvLogoMove07 {
    0% {
      transform: translate(5vw, -55vw) rotate(-338deg);
      opacity: 0;
    }
    30% {
      opacity: 1;
    }
    60% {
      transform: translate(5vw, -55vw) rotate(-338deg);
    }
    100% {
      transform: translate(0, 0) rotate(0);

      opacity: 1;
    }
  }

}

@keyframes mvLogoFade {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}