@charset "UTF-8";


/*================================================
 *  ani
 ================================================*/
/* fadeUp */
.fadeLeft,
.fadeLeft-end {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.8s ease;
}

.fadeLeft.started,
.started .fadeLeft-end {
  opacity: 1;
  transform: translateX(0px);
}

/* fadeUp */
.fadeRight {
  opacity: 0;
  transform: translate(20px);
  transition: all 0.8s ease;
}

.fadeRight.started {
  opacity: 1;
  transform: translateX(0px);
}

/* fadeUp */
.fadeUp {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.started .fadeUp,
.fadeUp.started {
  opacity: 1;
  transform: translateY(0px);
}

/* fadeUp */
.fadeIn {
  opacity: 0;
  transition: all 0.8s ease;
}

.started .fadeIn,
.fadeIn.started {
  opacity: 1;
}

/* zoom */
.zoom img,
.zoom02 img,
.zoom03 img,
.zoom04 img,
.zoom05 img,
.zoom06 img,
.zoom07 img,
.zoom08 img,
.zoom09 img,
.zoom10 img,
.zoom11 img,
.zoom12 img,
.zoom13 img,
.zoom14 img,
.zoom15 img,
.zoom13-end img,
.zoom14-end img,
.zoom15-end img {
  opacity: 0;
  transform: scale(0) translateY(1rem) rotate(0);
  will-change: opacity, transform;

  /* クラスが外れた時にも効かせるため、通常状態にtransitionを書く */
  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(0.34, 1.63, 0.64, 1);
}

.started .zoom img,
.zoom.started img,
.zoom02.started img,
.zoom03.started img,
.zoom04.started img,
.zoom05.started img,
.zoom06.started img,
.zoom07.started img,
.zoom08.started img,
.zoom09.started img,
.zoom10.started img,
.zoom11.started img,
.zoom12.started img,
.zoom13.started img,
.zoom14.started img,
.zoom15.started img,
.started .zoom13-end img,
.started .zoom14-end img,
.started .zoom15-end img {
  -webkit-transition: .8s .2s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .2s cubic-bezier(0.34, 1.63, 0.64, 1);
  -webkit-transition-property: opacity, -webkit-transform;
  transition-property: opacity, transform, -webkit-transform;
  opacity: 1;
  -webkit-transform: scale(1) translateY(0) rotate(0);
  transform: scale(1) translateY(0) rotate(0);
}

.zoom02.started img {
  -webkit-transition: .8s .3s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .3s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom03.started img {
  -webkit-transition: .8s .4s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .4s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom04.started img {
  -webkit-transition: .8s .5s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .5s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom05.started img {
  -webkit-transition: .8s .6s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .6s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom06.started img {
  -webkit-transition: .8s .7s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .7s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom07.started img {
  -webkit-transition: .8s .8s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .8s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom08.started img {
  -webkit-transition: .8s .9s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s .9s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom09.started img {
  -webkit-transition: .8s 1.0s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.0s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom10.started img {
  -webkit-transition: .8s 1.1s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.1s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom11.started img {
  -webkit-transition: .8s 1.2s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.2s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom12.started img {
  -webkit-transition: .8s 1.3s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.3s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom13.started img,
.started .zoom13-end img {
  -webkit-transition: .8s 1.4s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.4s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom14.started img,
.started .zoom14-end img {
  -webkit-transition: .8s 1.5s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.5s cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom15.started img,
.started .zoom15-end img {
  -webkit-transition: .8s 1.6s cubic-bezier(0.34, 1.63, 0.64, 1);
  transition: .8s 1.6s cubic-bezier(0.34, 1.63, 0.64, 1);
}



@keyframes buruburu {
  0% {
    transform: translate(4px, 0px);
  }

  5% {
    transform: translate(-4px, 0px);
  }

  10% {
    transform: translate(4px, 0px);
  }

  15% {
    transform: translate(-4px, 0px);
  }

  20% {
    transform: translate(4px, 0px);
  }

  25% {
    transform: translate(-4px, 0px);
  }

  30% {
    transform: translate(0px, 0px);
  }
}




/* obi */
.obi {
  position: relative;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}


.obi::before {
  content: "";
  position: absolute;
  inset: 0;
  /* background-color: var(--color-primary); */
  z-index: -1;
  transition: width 0.6s ease;
  height: 100%;
  width: 0;
}

.started .obi::before {
  width: 100%;
}

.obi span {
  position: relative;
  transition: width 0.6s ease .4s;
  overflow: hidden;
  width: 0;
  display: block;
  white-space: nowrap;
}

.started .obi span {
  width: 100%;
}



/* mask */
.mask {
  display: inline-block;
  overflow: hidden;
}

.mask .txt {
  display: block;
  clip-path: inset(0 120% 0 0);
  transition: clip-path .8s ease .2s;
  white-space: nowrap;
}

.mask.started .txt {
  clip-path: inset(0 0 0 0);
}

.mask .txt span {
  display: block;
}




/* patan */
.patan {
  /* width: 100%;
  height: 100%; */
  transition: transform .8s ease-out;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  position: relative;

  transform: rotateY(-180deg);
  position: relative;

}


.started .patan {
  transform: rotateY(0);
}

.patan2 {
  width: 100%;
  height: 100%;
  transition: transform .8s ease-out;
  transform-style: preserve-3d;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: rotateY(0deg);
  position: relative;
  background: var(--color-black);
  position: absolute;
  top: 0;
  left: 0;
}


.started .patan2 {
  transform: rotateY(180deg);
}



.delay02 {
  transition-delay: 0.2s;
}


.delay03 {
  transition-delay: 0.3s;
}


.delay04 {
  transition-delay: 0.4s;
}

.delay06 {
  transition-delay: 0.6s;
}

.delay20 {
  transition-delay: 2s;
}

@media screen and (max-width:767px) {

  .delay04-pc,
  .delay02-pc,
  .delay03-pc {
    transition-delay: unset;
  }

  .delay02-sp {
    transition-delay: 0.2s;
  }

  .delay03-sp {
    transition-delay: 0.3s;
  }

  .delay05-sp {
    transition-delay: 0.5s;
  }
}