@charset "UTF-8";

/*================================================
 *  sticky
 ================================================*/



/*================================================
 *  ani mv
 ================================================*/

.mv_zoom img {
  opacity: 0;
  transform: scale(0) translateY(1rem) rotate(0);
  will-change: opacity, transform;

  transition-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(0.34, 1.63, 0.64, 1);
}

.started .mv_zoom 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);
}

.z01.mv_zoom 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);
}

.z02.mv_zoom 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);
}

.z03.mv_zoom 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);
}

.z04.mv_zoom 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);
}



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

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


.mv_fadeIn {
  opacity: 0;
  transition: all 0.8s ease;
}

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



.mv_fadeLeft {
  opacity: 0;
  transform: translateX(-20px);
  transition: all 0.8s ease;
}

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


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

.mv_mask .txt {
  display: block;
  clip-path: inset(0 0 100% 0);
  transition: clip-path .8s ease .3s;
  white-space: nowrap;

  will-change: clip-path;
  transform: translateZ(0);
}

.mv_mask02 .txt {
  transition: clip-path .8s ease 4s;
}

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

.mv_mask .txt span {
  display: block;
}








/*================================================
 *  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,
.zoom span,
.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-property: opacity, transform;
  transition-duration: .8s;
  transition-timing-function: cubic-bezier(0.34, 1.63, 0.64, 1);
}

.zoom.started span,
/* .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;
  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 {
  overflow: hidden;
  width: fit-content;
  display: block;
}

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

.mask .txt.ja {
  transition: clip-path 2s ease .8s;
}

.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);
}



/* pop-in */
.pop-in-Left span,
.pop-in-Left img {
  transform: translate(-100%) scale(.8) rotate(0deg);
  animation: 1s steps(6, end) both popOutLeft;
  display: block;
}

.started .pop-in-Left span,
.started .pop-in-Left img {
  animation: 1s steps(6, end) both popInLeft;
}

@keyframes popInLeft {

  0% {
    transform: translate(-100%) scale(.8) rotate(0deg);
  }

  100% {
    transform: translate(0) scale(1) rotate(0);
  }
}

@keyframes popOutLeft {
  0% {
    transform: translate(0) scale(1) rotate(0);
  }

  100% {
    transform: translate(-100%) scale(.8) rotate(0deg);
  }
}

.pop-in-Right span,
.pop-in-Right img {
  transform: translate(100%) scale(.8) rotate(0deg);
  animation: 1s steps(6, end) both popOutRight;
  display: block;
}

.started .pop-in-Right span,
.started .pop-in-Right img {
  animation: 1s steps(6, end) both popInRight;
}

@keyframes popInRight {

  0% {
    transform: translate(100%) scale(.8) rotate(0deg);
  }

  100% {
    transform: translate(0) scale(1) rotate(0);
  }
}

@keyframes popOutRight {
  0% {
    transform: translate(0) scale(1) rotate(0);
  }

  100% {
    transform: translate(100%) scale(.8) rotate(0deg);
  }
}

.a-delay02 {
  animation-delay: .2s !important;
}

.a-delay1 {
  animation-delay: 1s !important;
}




.delay01 {
  transition-delay: 0.1s;
}

.delay02 {
  transition-delay: 0.2s;
}


.delay03 {
  transition-delay: 0.3s;
}


.delay04 {
  transition-delay: 0.4s;
}

.delay05 {
  transition-delay: 0.5s;
}

.delay06 {
  transition-delay: 0.6s;
}

.delay07 {
  transition-delay: 0.7s;
}

.delay08 {
  transition-delay: 0.8s;
}

.delay10 {
  transition-delay: 1s;
}

.delay12 {
  transition-delay: 1.2s;
}

.delay16 {
  transition-delay: 1.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;
  }
}