@charset "UTF-8";
#miraiCmsSet {
  padding-top: 0;
}
#miraiCmsSet header {
  top: -100px;
  animation: topHeader 0.5s forwards 2s cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
#miraiCmsSet #topHeader {
  width: 100%;
  padding-top: 100px;
  background-color: #BE0007;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader {
    padding-top: 16vw;
  }
}
#miraiCmsSet #topHeader #topSplash {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  z-index: 100;
  overflow: clip;
}
#miraiCmsSet #topHeader #topSplash video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
#miraiCmsSet #topHeader > div {
  aspect-ratio: 16/9;
  position: relative;
  overflow: clip;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div {
    aspect-ratio: 22/29;
  }
}
#miraiCmsSet #topHeader > div #topBackCross {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#miraiCmsSet #topHeader > div #topBackCross > div {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, rgba(209, 71, 77, 0.5) 0.08vw, transparent 0.08vw), linear-gradient(rgba(209, 71, 77, 0.5) 0.08vw, transparent 0.08vw);
  background-size: 5.5555% 5.5555vw;
  background-position: -0.08vw -0.12vw;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topBackCross > div {
    background-size: 9.0909% 9.0909vw;
    background-image: linear-gradient(90deg, rgba(209, 71, 77, 0.5) 2px, transparent 2px), linear-gradient(rgba(209, 71, 77, 0.5) 2px, transparent 2px);
    background-position: -1px -1px;
  }
}
#miraiCmsSet #topHeader > div #topFood {
  position: absolute;
  height: 57%;
  width: 100%;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 42%);
  z-index: 4;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topFood {
    height: 40%;
  }
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap {
  height: 100%;
  opacity: 0;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide {
  height: 100%;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide {
  text-align: center;
  height: 100%;
  display: flex;
  justify-content: center;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide > div {
  height: 100%;
  position: relative;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide > div div {
  height: 100%;
  mix-blend-mode: darken;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide > div div img {
  width: auto;
  height: 100%;
  position: relative;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide > div div:nth-of-type(n+2) {
  position: absolute;
  top: 0;
  left: 0;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide.swiper-slide-active > div div {
  opacity: 1;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide.swiper-slide-active > div div.gritchR {
  animation: 2.5s glitch1 1s infinite;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide.swiper-slide-active > div div.gritchG {
  animation: 2.5s glitch2 1s infinite;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide.swiper-slide-active > div div.gritchG {
  animation: 2.5s glitch3 1s infinite;
}
#miraiCmsSet #topHeader > div #topFood #topFoodWrap #topFoodSlide .swiper-slide.swiper-slide-active > div img {
  /*     &:nth-of-type(1) {
         animation: topGritchInR 20s linear;
       }

       &:nth-of-type(2) {
         animation: topGritchInG 20s linear;
       }

       &:nth-of-type(3) {
         animation: topGritchInB 20s linear;
       }*/
}
#miraiCmsSet #topHeader > div #topBackMecha {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
  opacity: 0;
}
#miraiCmsSet #topHeader > div #topBackMecha video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: clip;
  object-fit: cover;
  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));
}
#miraiCmsSet #topHeader > div #topTitle {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topTitle {
    width: 100%;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}
#miraiCmsSet #topHeader > div #topTitle > div {
  position: relative;
}
#miraiCmsSet #topHeader > div #topTitle > div img {
  position: relative;
  left: -50vw;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topTitle > div img {
    left: -100vw;
  }
}
#miraiCmsSet #topHeader > div #topTitle > span {
  grid-column-start: 1;
  grid-column-end: 10;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topTitle > span {
    grid-column-end: 12;
  }
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(1) {
  z-index: 19;
  animation-delay: 8.1s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(1) img {
  animation-delay: 0.85s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(2) {
  z-index: 18;
  animation-delay: 8.2s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(2) img {
  animation-delay: 0.95s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(3) {
  z-index: 17;
  animation-delay: 8.3s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(3) img {
  animation-delay: 1.05s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(4) {
  z-index: 16;
  animation-delay: 8.4s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(4) img {
  animation-delay: 1.15s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(5) {
  z-index: 15;
  animation-delay: 8.5s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(5) img {
  animation-delay: 1.25s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(6) {
  z-index: 14;
  animation-delay: 8.6s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(6) img {
  animation-delay: 1.35s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(7) {
  z-index: 13;
  animation-delay: 8.7s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(7) img {
  animation-delay: 1.45s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(8) {
  z-index: 12;
  animation-delay: 8.8s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(8) img {
  animation-delay: 1.55s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(9) {
  z-index: 11;
  animation-delay: 8.9s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(9) img {
  animation-delay: 1.65s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(10) {
  z-index: 10;
  animation-delay: 9s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(10) img {
  animation-delay: 1.25s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(11) {
  z-index: 9;
  animation-delay: 9.1s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(11) img {
  animation-delay: 1.35s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(12) {
  z-index: 8;
  animation-delay: 9.2s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(12) img {
  animation-delay: 1.45s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(13) {
  z-index: 7;
  animation-delay: 9.3s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(13) img {
  animation-delay: 1.55s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(14) {
  z-index: 6;
  animation-delay: 9.4s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(14) img {
  animation-delay: 1.65s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(15) {
  z-index: 5;
  animation-delay: 9.5s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(15) img {
  animation-delay: 1.75s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(16) {
  z-index: 4;
  animation-delay: 9.6s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(16) img {
  animation-delay: 1.85s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(17) {
  z-index: 3;
  animation-delay: 9.7s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(17) img {
  animation-delay: 1.7s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(18) {
  z-index: 2;
  animation-delay: 9.8s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(18) img {
  animation-delay: 1.8s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(19) {
  z-index: 1;
  animation-delay: 9.9s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(19) img {
  animation-delay: 1.9s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(20) {
  z-index: 0;
  animation-delay: 10s;
}
#miraiCmsSet #topHeader > div #topTitle > div:nth-of-type(20) img {
  animation-delay: 2s;
}
#miraiCmsSet #topHeader > div #topMark {
  position: absolute;
  top: 0;
  right: 0;
  width: 11.1111111111%;
  z-index: 1;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topMark {
    width: 9.0909090909%;
  }
}
#miraiCmsSet #topHeader > div #topMark div {
  width: 50%;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topMark div {
    width: 100%;
  }
}
#miraiCmsSet #topHeader > div #topMark div:nth-of-type(1) {
  margin-left: auto;
  animation-delay: 0.1s;
}
#miraiCmsSet #topHeader > div #topMark div:nth-of-type(2) {
  margin-right: auto;
  animation-delay: 0.2s;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topMark div:nth-of-type(2) {
    display: none;
  }
}
#miraiCmsSet #topHeader > div #topLogo {
  position: absolute;
  bottom: 5%;
  left: 0;
  height: 26%;
  width: 100%;
  overflow: clip;
  z-index: 5;
  text-align: center;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  #miraiCmsSet #topHeader > div #topLogo {
    height: 18%;
    bottom: 19%;
  }
}
#miraiCmsSet #topHeader > div #topLogo .glitch {
  height: 100%;
  background: url(../img/start/logo.svg) no-repeat center center/auto 100%;
}
#miraiCmsSet #topHeader > div #topLogo img {
  width: auto;
  height: 100%;
}
#miraiCmsSet #topHeader > div #topLogo h1 {
  visibility: hidden;
}
#miraiCmsSet #topHeader.is-loaded #topSplash {
  animation: 0.5s topSplash 0s forwards ease-in-out;
}
#miraiCmsSet #topHeader.is-loaded #topLogo {
  animation: topLogo 1s forwards 0.5s cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
#miraiCmsSet #topHeader.is-loaded #topBackCross {
  animation: topBackCross 0.5s forwards 0.5s ease-in-out;
}
#miraiCmsSet #topHeader.is-loaded #topBackCross > div {
  animation: topBackCrossMove 15s infinite 4.5s ease-in-out;
}
#miraiCmsSet #topHeader.is-loaded #topFoodWrap {
  animation: topFood 0.5s forwards 1s cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
#miraiCmsSet #topHeader.is-loaded #topFoodWrap2 {
  animation: topFood 0.5s forwards 1s cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
#miraiCmsSet #topHeader.is-loaded #topBackMecha {
  animation: topBackMecha 3s forwards 0.5s ease-in-out;
}
#miraiCmsSet #topHeader.is-loaded #topTitle > div {
  animation: topTitleWait 6s infinite cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
#miraiCmsSet #topHeader.is-loaded #topTitle > div img {
  animation: topTitle 0.5s forwards cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
#miraiCmsSet #topHeader.is-loaded #topMark {
  animation: 1s topMark 2s forwards ease-in-out;
}
#miraiCmsSet #topHeader.is-loaded #topMark > div {
  animation: topTitleWait 4s infinite cubic-bezier(0.3, 0.8, 0.3, 1.3);
}
@keyframes topSplash {
  0% {
    opacity: 1;
  }
  90% {
    filter: blur(10rem);
  }
  100% {
    opacity: 0;
    visibility: visible;
    pointer-events: none;
  }
}
@keyframes topHeaderLogoMask {
  0% {
    right: 0;
    opacity: 1;
  }
  99.9% {
    right: -150%;
    opacity: 1;
  }
  100% {
    right: -150%;
    opacity: 0;
    visibility: visible;
    pointer-events: none;
  }
}
@keyframes topLogo {
  0% {
    opacity: 0;
    filter: blur(8rem);
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes topHeaderLogo {
  0% {
    filter: blur(0);
  }
  30% {
    filter: blur(0);
  }
  50% {
    filter: blur(1rem);
  }
  70% {
    filter: blur(0);
  }
  100% {
    top: unset;
    transform: translate(-50%, 0);
    bottom: 5%;
    filter: blur(0);
  }
}
@keyframes topHeaderLogoImg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes topHeaderLogoVideo {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes particleMoveX {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(1rem);
  }
  100% {
    transform: translateX(-1rem);
  }
}
@keyframes particleMoveY {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(1rem);
  }
  100% {
    transform: translateY(-1rem);
  }
}
@keyframes topBackCross {
  0% {
    opacity: 0;
    transform: scale(10);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes topBackCrossMove {
  0% {
    background-position: -0.08vw -0.12vw;
  }
  5% {
    background-position: 5.4755555556vw -0.12vw;
  }
  50% {
    background-position: 5.4755555556vw -0.12vw;
  }
  55% {
    background-position: 5.4755555556vw 5.4355555556vw;
  }
  100% {
    background-position: 5.4755555556vw 5.4355555556vw;
  }
}
@media screen and (max-width: 767px) {
  @keyframes topBackCrossMove {
    0% {
      background-position: -1px -1px;
    }
    5% {
      background-position: calc(9.0909090909vw - 1px) -1px;
    }
    50% {
      background-position: calc(9.0909090909vw - 1px) -1px;
    }
    55% {
      background-position: calc(9.0909090909vw - 1px) calc(9.0909090909vw - 1px);
    }
    100% {
      background-position: calc(9.0909090909vw - 1px) calc(9.0909090909vw - 1px);
    }
  }
}
@keyframes topFood {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes topTitle {
  0% {
    left: -50vw;
    transform: rotate(-90deg);
  }
  /*    @include mobile {
        0% {
          left: -100vw;
        }
      }*/
  100% {
    left: 0;
    transform: rotate(0deg);
  }
}
@media screen and (max-width: 767px) {
  @keyframes topTitle {
    0% {
      left: -100vw;
      transform: rotate(-90deg);
    }
    100% {
      left: 0;
      transform: rotate(0deg);
    }
  }
}
@keyframes topTitleWait {
  0% {
    transform: rotate(30deg);
  }
  5% {
    transform: rotate(0deg);
  }
}
@keyframes topHeader {
  0% {
    top: -100px;
  }
  100% {
    top: 0;
  }
}
@keyframes topBackMecha {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes topBackMechaFlash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}
@keyframes topMark {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes topSlideIn {
  0% {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  }
  20% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  80% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  100% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
  }
}

@keyframes topGritchInR {
  0% {
    transform: translate(10%, 0);
  }
  0.1%, 30.1%, 60.1% {
    transform: translate(10%, 0);
  }
  0.2%, 30.2%, 60.2% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes topGritchInG {
  0% {
    transform: translate(-10%, 0);
  }
  0.1%, 30.1%, 60.1% {
    transform: translate(-10%, 0);
  }
  0.2%, 30.2%, 60.2% {
    transform: translate(0, 0);
  }
  1.5%, 31.5%, 61.5% {
    transform: translate(0, 0);
  }
  1.6%, 31.6%, 61.6% {
    transform: translate(20%, 0);
  }
  1.9%, 31.9%, 61.9% {
    transform: translate(20%, 0);
  }
  2%, 32%, 62% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
body {
  margin: 0;
}

.glitch {
  background-size: 0;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.glitch::before, .glitch::after,
.glitch .channel {
  background: inherit;
  background-size: auto 100%;
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}
.glitch::before {
  animation: glitch-before 1.5s linear infinite alternate both;
  content: "";
}
@keyframes glitch-before {
  0% {
    clip-path: polygon(0% 17.9786581631%, 100% 17.9786581631%, 100% 21.9703312345%, 0% 21.9703312345%);
    transform: translate(2.4147086188%, 0.1859929991%);
  }
  1% {
    clip-path: polygon(0% 81.9570194239%, 100% 81.9570194239%, 100% 87.4501145852%, 0% 87.4501145852%);
    transform: translate(6.2091149504%, -0.2938760927%);
  }
  2% {
    clip-path: polygon(0% 57.1943892484%, 100% 57.1943892484%, 100% 60.6136493221%, 0% 60.6136493221%);
    transform: translate(-6.6424580531%, 0.2935205224%);
  }
  3%, 100% {
    clip-path: none;
    transform: none;
  }
}
.glitch::after {
  animation: glitch-after 1.5s linear infinite alternate both;
  content: "";
}
@keyframes glitch-after {
  0% {
    clip-path: polygon(0% 75.940010605%, 100% 75.940010605%, 100% 81.2002221343%, 0% 81.2002221343%);
    transform: translate(-0.0405123348%, 0.3191125206%);
  }
  1% {
    clip-path: polygon(0% 83.1141499737%, 100% 83.1141499737%, 100% 92.5943226322%, 0% 92.5943226322%);
    transform: translate(-2.1705660812%, 0.1502533006%);
  }
  2% {
    clip-path: polygon(0% 81.6063602856%, 100% 81.6063602856%, 100% 85.0332091027%, 0% 85.0332091027%);
    transform: translate(-4.9963500717%, -0.2309268481%);
  }
  3%, 100% {
    clip-path: none;
    transform: none;
  }
}
.glitch .channel {
  mix-blend-mode: screen;
}
.glitch .channel::before {
  bottom: 0;
  content: "";
  display: block;
  mix-blend-mode: multiply;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}
.glitch .r {
  animation: rgb-shift-r 1.5s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-r {
  0% {
    transform: translate(0.2066983208%, 0.2820171463%);
  }
  1% {
    transform: translate(-1.9030725783%, -0.2318698714%);
  }
  2% {
    transform: translate(0.0426772836%, -0.108920618%);
  }
  3%, 100% {
    transform: none;
  }
}
.glitch .g {
  animation: rgb-shift-g 1.5s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-g {
  0% {
    transform: translate(-1.5094416479%, -0.1437138038%);
  }
  1% {
    transform: translate(-1.1471011885%, -0.1713857383%);
  }
  2% {
    transform: translate(0.011885588%, -0.1436003969%);
  }
  3%, 100% {
    transform: none;
  }
}
.glitch .b {
  animation: rgb-shift-b 1.5s steps(1, jump-end) infinite alternate both;
}
@keyframes rgb-shift-b {
  0% {
    transform: translate(-1.0865215149%, -0.27213303%);
  }
  1% {
    transform: translate(0.4539468832%, -0.0451307506%);
  }
  2% {
    transform: translate(1.8827495892%, -0.1101739482%);
  }
  3%, 100% {
    transform: none;
  }
}

:root {
  --glitch-width: 100vw;
  --glitch-height: 114vh;
  --gap-horizontal: 10px;
  --gap-vertical: 5px;
}

.glitch__wrap {
  position: relative;
  width: 100%;
  height: var(--glitch-height);
  overflow: hidden;
}

.glitch {
  width: var(--glitch-width);
  height: var(--glitch-height);
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
}
.glitch__img {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateZ(0);
  width: var(--glitch-width);
  height: 100%;
}
.glitch__img:not(:first-child) {
  opacity: 0;
}
.glitch__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/*スライドがアクティブになった時、アニメーションを発火する*/
.swiper-slide-active .glitch__img {
  height: 100%;
  animation-delay: 0.5s;
  animation-duration: 5s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
.swiper-slide-active .glitch__img:first-child {
  animation: none;
}
.swiper-slide-active .glitch__img:nth-child(2) {
  animation-name: glitch-anim-1;
}
.swiper-slide-active .glitch__img:nth-child(3) {
  animation-name: glitch-anim-2;
}
.swiper-slide-active .glitch__img:nth-child(4) {
  animation-name: glitch-anim-3;
}
.swiper-slide-active .glitch__img:nth-child(5) {
  animation-name: glitch-anim-flash;
  background-blend-mode: overlay;
}
.swiper-slide-active .glitch__img:nth-child(6) {
  /*他のアニメーションと動作の間隔を変える*/
  animation: glitch-anim-colors 1.5s 0.6s infinite;
  mix-blend-mode: hard-light;
}
.swiper-slide-active .glitch__img img {
  height: 100%;
}

@keyframes glitch-anim-1 {
  0% {
    /* 変換元: polygon(0 2%, 100% 2%, 100% 5%, 0 5%) */
    clip-path: polygon(2% 0, 5% 0, 5% 100%, 2% 100%);
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }
  2% {
    /* 変換元: polygon(0 15%, 100% 15%, 100% 15%, 0 15%) */
    clip-path: polygon(15% 0, 15% 0, 15% 100%, 15% 100%);
  }
  4% {
    /* 変換元: polygon(0 10%, 100% 10%, 100% 20%, 0 20%) */
    clip-path: polygon(10% 0, 20% 0, 20% 100%, 10% 100%);
  }
  6% {
    /* 変換元: polygon(0 1%, 100% 1%, 100% 2%, 0 2%) */
    clip-path: polygon(1% 0, 2% 0, 2% 100%, 1% 100%);
  }
  8% {
    /* 変換元: polygon(0 33%, 100% 33%, 100% 33%, 0 33%) */
    clip-path: polygon(33% 0, 33% 0, 33% 100%, 33% 100%);
  }
  10% {
    /* 変換元: polygon(0 44%, 100% 44%, 100% 44%, 0 44%) */
    clip-path: polygon(44% 0, 44% 0, 44% 100%, 44% 100%);
  }
  12% {
    /* 変換元: polygon(0 50%, 100% 50%, 100% 20%, 0 20%) */
    /* Y軸が減少しているので、X軸の順序を維持（50%から20%へ）*/
    clip-path: polygon(50% 0, 20% 0, 20% 100%, 50% 100%);
  }
  14% {
    /* 変換元: polygon(0 70%, 100% 70%, 100% 70%, 0 70%) */
    clip-path: polygon(70% 0, 70% 0, 70% 100%, 70% 100%);
  }
  16% {
    /* 変換元: polygon(0 80%, 100% 80%, 100% 80%, 0 80%) */
    clip-path: polygon(80% 0, 80% 0, 80% 100%, 80% 100%);
  }
  18% {
    /* 変換元: polygon(0 50%, 100% 50%, 100% 55%, 0 55%) */
    clip-path: polygon(50% 0, 55% 0, 55% 100%, 50% 100%);
  }
  20% {
    /* 変換元: polygon(0 70%, 100% 70%, 100% 80%, 0 80%) */
    clip-path: polygon(70% 0, 80% 0, 80% 100%, 70% 100%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(var(--gap-horizontal), 0, 0);
  }
  22%, to {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
    transform: translateZ(0);
  }
}
@keyframes glitch-anim-2 {
  0% {
    /* 変換元: polygon(0 25%, 100% 25%, 100% 30%, 0 30%) */
    clip-path: polygon(25% 0, 30% 0, 30% 100%, 25% 100%);
    opacity: 1;
    transform: translate3d(calc(var(--gap-horizontal) * -1), 0, 0);
  }
  3% {
    /* 変換元: polygon(0 3%, 100% 3%, 100% 3%, 0 3%) */
    clip-path: polygon(3% 0, 3% 0, 3% 100%, 3% 100%);
  }
  5% {
    /* 変換元: polygon(0 5%, 100% 5%, 100% 20%, 0 20%) */
    clip-path: polygon(5% 0, 20% 0, 20% 100%, 5% 100%);
  }
  7% {
    /* 変換元: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) */
    clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
  }
  9% {
    /* 変換元: polygon(0 40%, 100% 40%, 100% 40%, 0 40%) */
    clip-path: polygon(40% 0, 40% 0, 40% 100%, 40% 100%);
  }
  11% {
    /* 変換元: polygon(0 52%, 100% 52%, 100% 59%, 0 59%) */
    clip-path: polygon(52% 0, 59% 0, 59% 100%, 52% 100%);
  }
  13% {
    /* 変換元: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) */
    clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
  }
  15% {
    /* 変換元: polygon(0 75%, 100% 75%, 100% 75%, 0 75%) */
    clip-path: polygon(75% 0, 75% 0, 75% 100%, 75% 100%);
  }
  17% {
    /* 変換元: polygon(0 65%, 100% 65%, 100% 40%, 0 40%) */
    /* Y軸が減少しているので、X軸の順序を維持（65%から40%へ）*/
    clip-path: polygon(65% 0, 40% 0, 40% 100%, 65% 100%);
  }
  19% {
    /* 変換元: polygon(0 45%, 100% 45%, 100% 50%, 0 50%) */
    clip-path: polygon(45% 0, 50% 0, 50% 100%, 45% 100%);
  }
  20% {
    /* 変換元: polygon(0 14%, 100% 14%, 100% 33%, 0 33%) */
    clip-path: polygon(14% 0, 33% 0, 33% 100%, 14% 100%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(calc(var(--gap-horizontal) * -1), 0, 0);
  }
  22%, to {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
    transform: translateZ(0);
  }
}
@keyframes glitch-anim-3 {
  0% {
    /* 変換元: polygon(0 1%, 100% 1%, 100% 3%, 0 3%) */
    clip-path: polygon(1% 0, 3% 0, 3% 100%, 1% 100%);
    opacity: 1;
    transform: translate3d(0, calc(var(--gap-vertical) * -1), 0) scale3d(-1, -1, 1);
  }
  1.5% {
    /* 変換元: polygon(0 10%, 100% 10%, 100% 9%, 0 9%) */
    /* Y軸が減少しているので、X軸の順序を維持（10%から9%へ）*/
    clip-path: polygon(10% 0, 9% 0, 9% 100%, 10% 100%);
  }
  2% {
    /* 変換元: polygon(0 5%, 100% 5%, 100% 6%, 0 6%) */
    clip-path: polygon(5% 0, 6% 0, 6% 100%, 5% 100%);
  }
  2.5% {
    /* 変換元: polygon(0 20%, 100% 20%, 100% 20%, 0 20%) */
    clip-path: polygon(20% 0, 20% 0, 20% 100%, 20% 100%);
  }
  3% {
    /* 変換元: polygon(0 10%, 100% 10%, 100% 10%, 0 10%) */
    clip-path: polygon(10% 0, 10% 0, 10% 100%, 10% 100%);
  }
  5% {
    /* 変換元: polygon(0 30%, 100% 30%, 100% 25%, 0 25%) */
    /* Y軸が減少しているので、X軸の順序を維持（30%から25%へ）*/
    clip-path: polygon(30% 0, 25% 0, 25% 100%, 30% 100%);
  }
  5.5% {
    /* 変換元: polygon(0 15%, 100% 15%, 100% 16%, 0 16%) */
    clip-path: polygon(15% 0, 16% 0, 16% 100%, 15% 100%);
  }
  7% {
    /* 変換元: polygon(0 40%, 100% 40%, 100% 39%, 0 39%) */
    /* Y軸が減少しているので、X軸の順序を維持（40%から39%へ）*/
    clip-path: polygon(40% 0, 39% 0, 39% 100%, 40% 100%);
  }
  8% {
    /* 変換元: polygon(0 20%, 100% 20%, 100% 21%, 0 21%) */
    clip-path: polygon(20% 0, 21% 0, 21% 100%, 20% 100%);
  }
  9% {
    /* 変換元: polygon(0 60%, 100% 60%, 100% 55%, 0 55%) */
    /* Y軸が減少しているので、X軸の順序を維持（60%から55%へ）*/
    clip-path: polygon(60% 0, 55% 0, 55% 100%, 60% 100%);
  }
  10.5% {
    /* 変換元: polygon(0 30%, 100% 30%, 100% 31%, 0 31%) */
    clip-path: polygon(30% 0, 31% 0, 31% 100%, 30% 100%);
  }
  11% {
    /* 変換元: polygon(0 70%, 100% 70%, 100% 69%, 0 69%) */
    /* Y軸が減少しているので、X軸の順序を維持（70%から69%へ）*/
    clip-path: polygon(70% 0, 69% 0, 69% 100%, 70% 100%);
  }
  13% {
    /* 変換元: polygon(0 40%, 100% 40%, 100% 41%, 0 41%) */
    clip-path: polygon(40% 0, 41% 0, 41% 100%, 40% 100%);
  }
  14% {
    /* 変換元: polygon(0 80%, 100% 80%, 100% 75%, 0 75%) */
    /* Y軸が減少しているので、X軸の順序を維持（80%から75%へ）*/
    clip-path: polygon(80% 0, 75% 0, 75% 100%, 80% 100%);
  }
  14.5% {
    /* 変換元: polygon(0 50%, 100% 50%, 100% 51%, 0 51%) */
    clip-path: polygon(50% 0, 51% 0, 51% 100%, 50% 100%);
  }
  15% {
    /* 変換元: polygon(0 90%, 100% 90%, 100% 90%, 0 90%) */
    clip-path: polygon(90% 0, 90% 0, 90% 100%, 90% 100%);
  }
  16% {
    /* 変換元: polygon(0 60%, 100% 60%, 100% 60%, 0 60%) */
    clip-path: polygon(60% 0, 60% 0, 60% 100%, 60% 100%);
  }
  18% {
    /* 変換元: polygon(0 100%, 100% 100%, 100% 99%, 0 99%) */
    /* Y軸が減少しているので、X軸の順序を維持（100%から99%へ）*/
    clip-path: polygon(100% 0, 99% 0, 99% 100%, 100% 100%);
  }
  20% {
    /* 変換元: polygon(0 70%, 100% 70%, 100% 71%, 0 71%) */
    clip-path: polygon(70% 0, 71% 0, 71% 100%, 70% 100%);
  }
  21.9% {
    opacity: 1;
    transform: translate3d(0, calc(var(--gap-vertical) * -1), 0) scale3d(-1, -1, 1);
  }
  22%, to {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    opacity: 0;
    transform: translateZ(0);
  }
}
@keyframes glitch-anim-flash {
  0%, 5% {
    opacity: 0.2;
    transform: translate3d(-2%, var(--gap-vertical), 0);
  }
  5.5%, 80% {
    opacity: 0;
    transform: translate3d(2%, var(--gap-vertical), 0);
  }
  80.5%, 81% {
    opacity: 0.2;
    transform: translate3d(2%, var(--gap-vertical), 0);
  }
  81.5%, to {
    opacity: 0;
    transform: translate3d(-2%, var(--gap-vertical), 0);
  }
}
@keyframes glitch-anim-colors {
  0%, 90% {
    opacity: 0;
    translate: 0 0;
    filter: hue-rotate(0deg);
  }
  0.5%, 90.5% {
    opacity: 0.5;
    translate: 25px 0;
  }
  1%, 91% {
    translate: -25px 0;
  }
  1.5%, 91.5% {
    translate: 15px 0;
  }
  2.5%, 92.5% {
    opacity: 0.5;
    translate: 5px 0;
  }
  5%, 95% {
    translate: -25px 0;
  }
  6%, 96% {
    translate: -50px 0;
  }
  7%, 97% {
    translate: 0 -20px;
  }
  8%, 98% {
    translate: -60px -20px;
  }
  8.1%, 98.1% {
    translate: 0 0;
  }
  10%, 100% {
    opacity: 0;
    translate: 0 0;
    filter: hue-rotate(360deg);
  }
}
/*Keyframes*/
@keyframes glitch1 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: skew(-0.5deg, -0.9deg);
    opacity: 0.75;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: skew(0.8deg, -0.1deg);
    opacity: 0.75;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: skew(-1deg, 0.2deg);
    opacity: 0.75;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: skew(0.4deg, 1deg);
    opacity: 0.75;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes glitch2 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: translate(-4px, -6px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: translate(-10px, -4px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: translate(-10px, -2px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: translate(-4px, -12px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}
@keyframes glitch3 {
  0% {
    transform: none;
    opacity: 1;
  }
  7% {
    transform: translate(4px, 6px);
    opacity: 0.5;
  }
  10% {
    transform: none;
    opacity: 1;
  }
  27% {
    transform: none;
    opacity: 1;
  }
  30% {
    transform: translate(10px, 4px);
    opacity: 0.5;
  }
  35% {
    transform: none;
    opacity: 1;
  }
  52% {
    transform: none;
    opacity: 1;
  }
  55% {
    transform: translate(10px, 2px);
    opacity: 0.5;
  }
  50% {
    transform: none;
    opacity: 1;
  }
  72% {
    transform: none;
    opacity: 1;
  }
  75% {
    transform: translate(4px, 8px);
    opacity: 0.5;
  }
  80% {
    transform: none;
    opacity: 1;
  }
  100% {
    transform: none;
    opacity: 1;
  }
}

/*# sourceMappingURL=start.css.map */