@charset "utf-8";
/*------------------------  animation.css  ------------------------*/



/*-----  main-visual  -----*/
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.title-logo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transform-origin: center center;
}
.title-logo .title,
.title-logo .main-visual,
.title-logo img {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto;
}
.is-open .title-logo {
  visibility: visible;
  animation: logoAppear 0.9s cubic-bezier(0.175, 0.885, 0.32, 1.27) 1.55s forwards;
}

@keyframes logoAppear {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.sweet-potato {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 569px;
  display: flex;
  justify-content: center;
  opacity: 0;
}
.sweet-potato-inner {
  display: contents;
}
.is-ready .sweet-potato {
  opacity: 1;
  transition: opacity 0.35s ease;
}

.potato-half {
  position: relative;
  overflow: hidden;
  background-repeat: no-repeat;
  background-size: cover;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.potato-left {
  background-image: url(../images/main_visual_left_pc.png);
  width: 619px;
  height: 569px;
  top: -15px;
  right: -120px;
  transform: rotate(5deg);
}
.potato-right {
  background-image: url(../images/main_visual_right_pc.png);
  width: 327px;
  height: 381px;
  top: 25px;
  left: -150px;
  transform: rotate(-43deg);
}
.is-open .potato-left {
  animation: splitLeft 5.4s linear 0.4s forwards;
}
.is-open .potato-right {
  animation: splitRight 5.4s linear 0.4s forwards;
}

/* 先にパカッと割れ、そのあとゆっくり左右にはける */
@keyframes splitLeft {
  0% {
    transform: rotate(5deg) translate(0, 0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  16% {
    transform: rotate(-10deg) translate(-80px, 10px);
    animation-timing-function: cubic-bezier(0.18, 0.5, 0.2, 1);
  }
  100% {
    transform: rotate(-10deg) translate(-39vw, 110px);
  }
}
@keyframes splitRight {
  0% {
    transform: rotate(-43deg) translate(0, 0);
    animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
  }
  16% {
    transform: rotate(10deg) translate(80px, 12px);
    animation-timing-function: cubic-bezier(0.18, 0.5, 0.2, 1);
  }
  100% {
    transform: rotate(10deg) translate(30vw, 120px);
  }
}

@media screen and (max-width: 1023px) and (min-width: 801px) {
  .main-visual-wrap {
    height: 380px;
  }

  .potato-left {
    width: 360px;
    height: 332px;
    top: 110px;
    left: auto;
    right: -40px;
  }
  .potato-right {
    width: 195px;
    height: 208px;
    top: 133px;
    right: auto;
    left: -140px;
  }
  
  @keyframes splitLeft {
    0% {
      transform: rotate(5deg) translate(0, 0);
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
    }
    16% {
      transform: rotate(-10deg) translate(-55px, 8px);
      animation-timing-function: cubic-bezier(0.18, 0.5, 0.2, 1);
    }
    100% {
      transform: rotate(-10deg) translate(-33vw, 50px);
    }
  }
  @keyframes splitRight {
    0% {
      transform: rotate(-43deg) translate(0, 0);
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
    }
    16% {
      transform: rotate(10deg) translate(55px, 10px);
      animation-timing-function: cubic-bezier(0.18, 0.5, 0.2, 1);
    }
    100% {
      transform: rotate(10deg) translate(38vw, 65px);
    }
  }
}



@media screen and (max-width: 800px) {
  .sweet-potato {
    inset: auto;
    width: 100%;
    height: 275px;
  }
  .sweet-potato-inner {
    display: contents;
  }

  .title-logo .title {
    width: 90%;
  }
  .title-logo img {
    max-height: 100%;
    object-fit: contain;
  }

  .potato-left {
    background-image: url(../images/main_visual_left_sp.png);
    width: 190px;
    height: 175px;
    top: 55px;
    left: auto;
    right: -20px;
    margin-right: 0;
  }
  .potato-right {
    background-image: url(../images/main_visual_right_sp.png);
    width: 105px;
    height: 122px;
    top: 65px;
    right: auto;
    left: -70px;
    margin-left: 0;
  }
  
  @keyframes splitLeft {
    0% {
      transform: rotate(5deg) translate(0, 0);
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
    }
    16% {
      transform: rotate(-10deg) translate(-24px, 6px);
      animation-timing-function: cubic-bezier(0.18, 0.5, 0.2, 1);
    }
    100% {
      transform: rotate(-10deg) translate(-32vw, 60px);
    }
  }
  @keyframes splitRight {
    0% {
      transform: rotate(-43deg) translate(0, 0);
      animation-timing-function: cubic-bezier(0.2, 0.8, 0.25, 1);
    }
    16% {
      transform: rotate(10deg) translate(24px, 8px);
      animation-timing-function: cubic-bezier(0.18, 0.5, 0.2, 1);
    }
    100% {
      transform: rotate(10deg) translate(38vw, 62px);
    }
  }
}