@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  transition: 0.2s;
  -webkit-tap-highlight-color: transparent;
}

html {
  font-family: YakuHanJP, "Noto Serif JP", serif;
  overflow-x: hidden;
}

img {
  max-width: 100%;
}

@media screen and (max-width: 767px) {
  .pc {
    display: none;
  }
}

@media screen and (min-width: 767px) {
  .sp {
    display: none;
  }
}

#mv {
  position: relative;
  z-index: 999;
}
#mv::before {
  content: "";
  background: url(./img/about_ribbon.webp) no-repeat center center/contain;
  width: 100%;
  height: 12.29vw;
  position: absolute;
  bottom: -4.4vw;
  left: 0;
}
@media screen and (max-width: 767px) {
  #mv::before {
    background: url(./img/sp_about_ribbon.webp) no-repeat center bottom/contain;
    height: 20vw;
    bottom: -2vw;
  }
}
#mv .step01_spot {
  display: none !important;
}
#mv.step01 .step01_spot {
  display: block !important;
}
#mv.step01 .inner {
  filter: brightness(0.4);
}
#mv.step01 .inner .chara_list {
  filter: brightness(0.5);
}
#mv.step02 .step01_spot {
  display: none !important;
}
#mv.step02 .inner {
  filter: brightness(1);
}
#mv.step02 .inner .chara_list {
  filter: brightness(1);
}
#mv .inner {
  filter: brightness(0.2);
  background: url(./img/mv_bg.webp) no-repeat bottom center/cover;
  position: relative;
  overflow: hidden;
  padding-bottom: 28vw;
  z-index: -9;
}
@media screen and (max-width: 767px) {
  #mv .inner {
    background: url(./img/sp_mv_bg.webp) no-repeat bottom center/cover;
    padding-bottom: 110vw;
  }
}
#mv .inner::before {
  content: "";
  background: url(./img/mv_stage.webp) no-repeat top center/contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #mv .inner::before {
    width: 355%;
    height: 355%;
  }
}
#mv .inner .logo_list {
  filter: blur(10px);
  transform: translateY(30%) rotateY(360deg);
  opacity: 0;
  transition: 1.2s;
  transition-delay: 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50vw;
  margin: 0 auto;
  position: relative;
  z-index: 9;
  margin-top: 1vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .logo_list {
    width: 87%;
    margin-top: 4vw;
  }
}
#mv .inner .logo_list.on {
  opacity: 1;
  filter: blur(0px);
  transform: translateX(0%) rotateY(0);
}
#mv .inner .logo_list li {
  filter: drop-shadow(0px 0px 30px #fff);
}
#mv .inner .logo_list li:nth-child(1) {
  width: 52%;
}
#mv .inner .logo_list li:nth-child(2) {
  width: 48%;
}
#mv .inner .chara_list {
  filter: brightness(0.4);
  height: 32.29vw;
  position: relative;
  margin-top: -4vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list {
    height: 140vw;
  }
}
#mv .inner .chara_list li {
  width: 17.39vw;
  position: absolute;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li {
    width: 38.85vw;
  }
}
#mv .inner .chara_list li:nth-child(1) {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 4;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(1) {
    bottom: 25%;
  }
}
#mv .inner .chara_list li:nth-child(2) {
  bottom: 5%;
  left: 37%;
  transform: translateX(-50%);
  z-index: 3;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(2) {
    bottom: 30%;
    left: 20%;
  }
}
#mv .inner .chara_list li:nth-child(3) {
  bottom: 5%;
  left: 64.5%;
  transform: translateX(-50%);
  z-index: 3;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(3) {
    bottom: 30%;
    left: 82%;
  }
}
#mv .inner .chara_list li:nth-child(4) {
  bottom: 13%;
  left: 24%;
  transform: translateX(-50%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(4) {
    bottom: 55%;
    left: 67%;
  }
}
#mv .inner .chara_list li:nth-child(5) {
  bottom: 13%;
  left: 76%;
  transform: translateX(-50%);
  z-index: 2;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(5) {
    bottom: -3%;
    left: 33%;
    z-index: 9;
  }
}
#mv .inner .chara_list li:nth-child(6) {
  bottom: 20%;
  left: 12%;
  transform: translateX(-50%);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(6) {
    bottom: 55%;
    left: 33%;
  }
}
#mv .inner .chara_list li:nth-child(7) {
  bottom: 20%;
  left: 88.5%;
  transform: translateX(-50%);
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #mv .inner .chara_list li:nth-child(7) {
    bottom: -3%;
    left: 68%;
    z-index: 9;
  }
}
#mv .inner h1 {
  width: 59.37vw;
  margin: 0 auto;
  z-index: 1;
  position: absolute;
  bottom: 11vw;
  left: 50%;
  transform: translateX(-50%) translateY(10%);
  opacity: 0;
  filter: blur(10px);
  transition: 1s;
}
#mv .inner h1.on {
  opacity: 1;
  filter: blur(0);
  transform: translateX(-50%);
}
@media screen and (max-width: 767px) {
  #mv .inner h1 {
    width: 80%;
    bottom: 29vw;
  }
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list::before {
    content: "";
    background: url(./img/sp_stage_spot.webp) no-repeat center center/contain;
    width: 111.68vw;
    height: 16.12vw;
    position: absolute;
    left: 50%;
    bottom: 90vw;
    transform: translateX(-50%);
  }
}
#mv .inner .ribbon_list li {
  z-index: 2;
  animation-fill-mode: both;
  transition: 3s;
  transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);
}
#mv .inner .ribbon_list li:nth-child(1) {
  background: url(./img/mv_ribbon01.webp) no-repeat center center/contain;
  width: 44.16vw;
  height: 22.23vw;
  position: absolute;
  left: -18vw;
  top: -17vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list li:nth-child(1) {
    background: url(./img/sp_mv_ribbon01.webp) no-repeat center center/contain;
    width: 80.8vw;
    height: 61.6vw;
    left: -50vw;
    top: -50vw;
  }
}
#mv .inner .ribbon_list li:nth-child(2) {
  background: url(./img/mv_ribbon02.webp) no-repeat center center/contain;
  width: 37.26vw;
  height: 28.14vw;
  position: absolute;
  right: -15vw;
  top: -23vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list li:nth-child(2) {
    background: url(./img/sp_mv_ribbon02.webp) no-repeat center center/contain;
    width: 87.8vw;
    height: 71.2vw;
    right: -80vw;
    top: -40vw;
  }
}
#mv .inner .ribbon_list li:nth-child(3) {
  background: url(./img/mv_ribbon03.webp) no-repeat center center/contain;
  width: 13.85vw;
  height: 18.12vw;
  position: absolute;
  left: -18vw;
  top: 51vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list li:nth-child(3) {
    width: 31.1vw;
    height: 37.1vw;
    left: -40vw;
    top: 200vw;
  }
}
#mv .inner .ribbon_list li:nth-child(4) {
  background: url(./img/mv_ribbon04.webp) no-repeat center center/contain;
  width: 10.88vw;
  height: 16.97vw;
  position: absolute;
  right: -12vw;
  top: 48vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list li:nth-child(4) {
    width: 25.1vw;
    height: 34.1vw;
    right: -40vw;
    top: 200vw;
  }
}
#mv .inner .ribbon_list.on li:nth-child(1) {
  left: -8vw;
  top: -5vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list.on li:nth-child(1) {
    left: -30vw;
    top: -15vw;
  }
}
#mv .inner .ribbon_list.on li:nth-child(2) {
  right: -5vw;
  top: -13vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list.on li:nth-child(2) {
    right: -34vw;
    top: -15vw;
  }
}
#mv .inner .ribbon_list.on li:nth-child(3) {
  left: -3vw;
  top: 41vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list.on li:nth-child(3) {
    left: -13vw;
    top: 141vw;
  }
}
#mv .inner .ribbon_list.on li:nth-child(4) {
  right: -2vw;
  top: 38vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .ribbon_list.on li:nth-child(4) {
    right: -8vw;
    top: 138vw;
  }
}
#mv .inner .ribbon_list.on li:nth-child(1) {
  animation: float_ribbon 9s infinite alternate ease-in-out;
  animation-delay: -13s;
}
#mv .inner .ribbon_list.on li:nth-child(2) {
  animation: float_ribbon 9s infinite alternate ease-in-out;
  animation-delay: -7s;
}
#mv .inner .ribbon_list.on li:nth-child(3) {
  animation: float_ribbon 6s infinite alternate ease-in-out;
  animation-delay: -8s;
}
#mv .inner .ribbon_list.on li:nth-child(4) {
  animation: float_ribbon 6s infinite alternate ease-in-out;
  animation-delay: -10s;
}
#mv .inner .ribbon_list.on li:nth-child(5) {
  animation: float_ribbon 8s infinite alternate ease-in-out;
  animation-delay: -6s;
}
#mv .inner .kiakira li {
  background: url(./img/mv_kira01.webp) no-repeat center center/contain;
  width: 6vw;
  height: 7vw;
  position: absolute;
  z-index: -1;
  opacity: 0;
  animation-fill-mode: both;
}
@media screen and (min-width: 767px) {
  #mv .inner .kiakira li:nth-child(1) {
    width: 6vw;
    height: 6vw;
    top: 36%;
    left: 94%;
    animation: twinkle_star 2.7s infinite ease-in-out;
    animation-delay: -5s;
  }
  #mv .inner .kiakira li:nth-child(2) {
    width: 6vw;
    height: 6vw;
    top: 20%;
    left: 90%;
    animation: twinkle_star 3.7s infinite ease-in-out;
    animation-delay: -0.8s;
  }
  #mv .inner .kiakira li:nth-child(3) {
    width: 7vw;
    height: 7vw;
    top: 21%;
    left: 2%;
    animation: twinkle_star 3.1s infinite ease-in-out;
    animation-delay: -4.5s;
  }
  #mv .inner .kiakira li:nth-child(4) {
    width: 6vw;
    height: 6vw;
    top: 43%;
    left: 54%;
    animation: twinkle_star 3.8s infinite ease-in-out;
    animation-delay: -0.1s;
  }
  #mv .inner .kiakira li:nth-child(5) {
    width: 5vw;
    height: 5vw;
    top: 65%;
    left: 54%;
    animation: twinkle_star 4.5s infinite ease-in-out;
    animation-delay: -4.4s;
  }
  #mv .inner .kiakira li:nth-child(6) {
    width: 8vw;
    height: 8vw;
    top: 76%;
    left: 96%;
    animation: twinkle_star 3.9s infinite ease-in-out;
    animation-delay: -2.1s;
  }
  #mv .inner .kiakira li:nth-child(7) {
    width: 4vw;
    height: 4vw;
    top: 3%;
    left: 93%;
    animation: twinkle_star 2.8s infinite ease-in-out;
    animation-delay: -2.9s;
  }
  #mv .inner .kiakira li:nth-child(8) {
    width: 7vw;
    height: 7vw;
    top: 18%;
    left: 50%;
    animation: twinkle_star 4.2s infinite ease-in-out;
    animation-delay: -4.3s;
  }
  #mv .inner .kiakira li:nth-child(9) {
    width: 8vw;
    height: 8vw;
    top: 11%;
    left: 94%;
    animation: twinkle_star 3.3s infinite ease-in-out;
    animation-delay: -1.2s;
  }
  #mv .inner .kiakira li:nth-child(10) {
    width: 6vw;
    height: 6vw;
    top: 10%;
    left: 88%;
    animation: twinkle_star 2.1s infinite ease-in-out;
    animation-delay: -1s;
  }
  #mv .inner .kiakira li:nth-child(11) {
    width: 6vw;
    height: 6vw;
    top: 65%;
    left: 90%;
    animation: twinkle_star 4.1s infinite ease-in-out;
    animation-delay: -0.7s;
  }
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(1) {
    width: 11vw;
    height: 11vw;
    top: 31%;
    left: 1%;
    animation: twinkle_star 1.7s infinite ease-in-out;
    animation-delay: -2.1s;
  }
  #mv .inner .kiakira li:nth-child(2) {
    width: 18vw;
    height: 18vw;
    top: 98%;
    left: 93%;
    animation: twinkle_star 3.2s infinite ease-in-out;
    animation-delay: -4.4s;
  }
  #mv .inner .kiakira li:nth-child(3) {
    width: 27vw;
    height: 27vw;
    top: 59%;
    left: 36%;
    animation: twinkle_star 2.4s infinite ease-in-out;
    animation-delay: -1.1s;
  }
  #mv .inner .kiakira li:nth-child(4) {
    width: 25vw;
    height: 25vw;
    top: 42%;
    left: 89%;
    animation: twinkle_star 4s infinite ease-in-out;
    animation-delay: -3.3s;
  }
  #mv .inner .kiakira li:nth-child(5) {
    width: 24vw;
    height: 24vw;
    top: 40%;
    left: 100%;
    animation: twinkle_star 2.8s infinite ease-in-out;
    animation-delay: -4.9s;
  }
  #mv .inner .kiakira li:nth-child(6) {
    width: 30vw;
    height: 30vw;
    top: 89%;
    left: 8%;
    animation: twinkle_star 3.4s infinite ease-in-out;
    animation-delay: -0.8s;
  }
  #mv .inner .kiakira li:nth-child(7) {
    width: 20vw;
    height: 20vw;
    top: 96%;
    left: 7%;
    animation: twinkle_star 2.2s infinite ease-in-out;
    animation-delay: -2.9s;
  }
  #mv .inner .kiakira li:nth-child(8) {
    width: 28vw;
    height: 28vw;
    top: 21%;
    left: 37%;
    animation: twinkle_star 2.7s infinite ease-in-out;
    animation-delay: -0.4s;
  }
  #mv .inner .kiakira li:nth-child(9) {
    width: 21vw;
    height: 21vw;
    top: 7%;
    left: 54%;
    animation: twinkle_star 1.6s infinite ease-in-out;
    animation-delay: -2.2s;
  }
  #mv .inner .kiakira li:nth-child(10) {
    width: 19vw;
    height: 19vw;
    top: 96%;
    left: 30%;
    animation: twinkle_star 3.9s infinite ease-in-out;
    animation-delay: -1s;
  }
  #mv .inner .kiakira li:nth-child(11) {
    width: 14vw;
    height: 14vw;
    top: 94%;
    left: 20%;
    animation: twinkle_star 4.5s infinite ease-in-out;
    animation-delay: -2.2s;
  }
}
#mv .inner .kiakira li:nth-child(1) {
  top: -1vw;
  left: 7vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(1) {
    top: 54vw;
    left: -3vw;
  }
}
#mv .inner .kiakira li:nth-child(2) {
  top: 10vw;
  left: 10vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(2) {
    left: -5vw;
  }
}
#mv .inner .kiakira li:nth-child(3) {
  top: 21vw;
  left: 0vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(3) {
    top: 40vw;
  }
}
#mv .inner .kiakira li:nth-child(4) {
  top: 38vw;
  left: 9vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(4) {
    left: -3vw;
    top: 123vw;
  }
}
#mv .inner .kiakira li:nth-child(5) {
  top: 48vw;
  left: 0vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(5) {
    top: 145vw;
    left: -5vw;
  }
}
#mv .inner .kiakira li:nth-child(6) {
  background-image: url(./img/mv_kira02.webp);
  top: 44vw;
  left: 9vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(6) {
    left: 0;
    top: 200vw;
  }
}
#mv .inner .kiakira li:nth-child(7) {
  top: 55vw;
  left: 6vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(7) {
    top: 238vw;
    left: 25vw;
  }
}
#mv .inner .kiakira li:nth-child(8) {
  top: 13vw;
  left: 30vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(8) {
    top: 25vw;
  }
}
#mv .inner .kiakira li:nth-child(9) {
  top: 43vw;
  left: 30vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(9) {
    left: -9vw;
    top: 85vw;
  }
}
#mv .inner .kiakira li:nth-child(10) {
  background-image: url(./img/mv_kira02.webp);
  top: 50vw;
  left: 20vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(10) {
    top: 180vw;
  }
}
#mv .inner .kiakira li:nth-child(11) {
  top: 60vw;
  left: 27vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira li:nth-child(11) {
    top: 210vw;
    left: -7vw;
  }
}
#mv .inner .kiakira.kirakira_left {
  opacity: 0;
}
#mv .inner .kiakira.kirakira_left.on {
  opacity: 1;
}
#mv .inner .kiakira.kirakira_right {
  opacity: 0;
}
#mv .inner .kiakira.kirakira_right.on {
  opacity: 1;
}
#mv .inner .kiakira.kirakira_right li {
  left: auto;
}
#mv .inner .kiakira.kirakira_right li:nth-child(1) {
  right: 7vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(1) {
    right: -3vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(2) {
  right: 10vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(2) {
    right: -5vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(3) {
  right: 0vw;
}
#mv .inner .kiakira.kirakira_right li:nth-child(4) {
  right: 9vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(4) {
    right: -4vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(5) {
  right: 0vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(5) {
    right: -5vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(6) {
  right: 9vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(6) {
    right: 0vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(7) {
  right: 6vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(7) {
    right: 25vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(8) {
  right: 30vw;
}
#mv .inner .kiakira.kirakira_right li:nth-child(9) {
  right: 30vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(9) {
    right: -9vw;
  }
}
#mv .inner .kiakira.kirakira_right li:nth-child(10) {
  right: 20vw;
}
#mv .inner .kiakira.kirakira_right li:nth-child(11) {
  right: 27vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .kiakira.kirakira_right li:nth-child(11) {
    right: -7vw;
  }
}
#mv .inner .top_spot {
  opacity: 0;
  z-index: -1;
}
#mv .inner .top_spot .light__spotlight {
  top: -80vw;
}
@media screen and (max-width: 767px) {
  #mv .inner .top_spot .light__spotlight {
    top: -350vw;
  }
}
#mv .inner .top_spot.on {
  opacity: 1;
}
#mv .inner .spot_lights_up {
  opacity: 0;
}
#mv .inner .spot_lights_up.on {
  opacity: 1;
}
#mv .inner .spot_lights_up {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  --source-width: 2.5%;
  --beam-spread: 15%;
  z-index: -1;
}
@media screen and (max-width: 767px) {
  #mv .inner .spot_lights_up {
    --source-width: 8%;
    --beam-spread: 15%;
  }
}
#mv .inner .spot_lights_up li {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(rgba(255, 255, 251, 0), rgba(255, 255, 251, 0.5));
  pointer-events: none;
  clip-path: polygon(calc(var(--x-pos) - var(--source-width)) 100%, calc(var(--x-pos) + var(--source-width)) 100%, calc(var(--x-pos) + var(--source-width) + var(--beam-spread)) 0%, calc(var(--x-pos) - var(--source-width) - var(--beam-spread)) 0%);
}
@media screen and (max-width: 767px) {
  #mv .inner .spot_lights_up li {
    height: 65%;
  }
}
#mv .inner .spot_lights_up li:nth-child(1), #mv .inner .spot_lights_up li:nth-child(6) {
  top: -32%;
}
@media screen and (max-width: 767px) {
  #mv .inner .spot_lights_up li:nth-child(1), #mv .inner .spot_lights_up li:nth-child(6) {
    display: none;
  }
}
#mv .inner .spot_lights_up li:nth-child(2), #mv .inner .spot_lights_up li:nth-child(5) {
  top: -14%;
}
@media screen and (max-width: 767px) {
  #mv .inner .spot_lights_up li:nth-child(2), #mv .inner .spot_lights_up li:nth-child(5) {
    display: none;
  }
}
#mv .inner .spot_lights_up li:nth-child(3), #mv .inner .spot_lights_up li:nth-child(4) {
  top: -5%;
}
@media screen and (max-width: 767px) {
  #mv .inner .spot_lights_up li:nth-child(3), #mv .inner .spot_lights_up li:nth-child(4) {
    display: none;
  }
}
#mv .light {
  position: relative;
}
#mv .light__spotlights {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
#mv .light__spotlight {
  position: absolute;
  z-index: 1;
  width: 100vw;
  top: -32vw;
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight {
    top: -100vw;
  }
}
#mv .light__spotlight .light__triangle {
  width: 100vw;
  height: 75vw;
  /* 三角形が下にいくにつれフェード */
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0));
  filter: alpha(opacity=20);
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight .light__triangle {
    height: 160vh;
  }
}
#mv .light__circle {
  position: absolute;
  bottom: -50px;
  width: 100%;
  height: 100px;
  transform: translate3d(0, 0, 0);
  filter: blur(6px);
}
@media screen and (max-width: 767px) {
  #mv .light__circle {
    display: none;
  }
}
#mv .light__circle::before, #mv .light__circle::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4980392157);
}
#mv .light__circle::before {
  top: -50%;
  opacity: 0.2;
}
#mv .light__circle::after {
  bottom: -50%;
  opacity: 0.35;
}
#mv .light {
  /* =========================================
     1本目のスポットライト
  ========================================= */
}
#mv .light__spotlight--1 {
  /* 追加：スマホ時だけ横幅を1.6倍に太くする */
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight--1 {
    transform: scaleX(1.6);
    transform-origin: 10% 0;
  }
}
#mv .light__spotlight--1 .light__triangle {
  clip-path: polygon(10% 0%, -5% 100%, 25% 100%);
}
#mv .light__spotlight--1 .light__circle::before {
  clip-path: ellipse(15% 50px at 10% 100%);
}
#mv .light__spotlight--1 .light__circle::after {
  clip-path: ellipse(15% 50px at 10% 0%);
}
#mv .light.is-show .light__spotlight--1 {
  opacity: 1;
  filter: none;
  transition: opacity 1000ms ease;
}
#mv .light.is-show .light__spotlight--1 .light__triangle {
  animation: triangle1 5400ms ease-in-out infinite 200ms;
}
#mv .light.is-show .light__spotlight--1 .light__circle::before {
  animation: circle1_before 5400ms ease-in-out infinite 200ms;
}
#mv .light.is-show .light__spotlight--1 .light__circle::after {
  animation: circle1_after 5400ms ease-in-out infinite 200ms;
}
#mv .light {
  /* =========================================
     2本目のスポットライト
  ========================================= */
}
#mv .light__spotlight--2 {
  /* 追加：スマホ時だけ横幅を1.6倍に太くする */
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight--2 {
    transform: scaleX(1.6);
    transform-origin: 30% 0;
  }
}
#mv .light__spotlight--2 .light__triangle {
  clip-path: polygon(30% 0%, 15% 100%, 45% 100%);
}
#mv .light__spotlight--2 .light__circle::before {
  clip-path: ellipse(15% 50px at 30% 100%);
}
#mv .light__spotlight--2 .light__circle::after {
  clip-path: ellipse(15% 50px at 30% 0%);
}
#mv .light.is-show .light__spotlight--2 {
  opacity: 1;
  filter: none;
  transition: opacity 1000ms ease;
  transition-delay: 200ms;
}
#mv .light.is-show .light__spotlight--2 .light__triangle {
  animation: triangle2 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--2 .light__circle::before {
  animation: circle2_before 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--2 .light__circle::after {
  animation: circle2_after 5400ms ease-in-out infinite;
}
#mv .light {
  /* =========================================
     3本目のスポットライト
  ========================================= */
}
#mv .light__spotlight--3 {
  /* 追加：スマホ時だけ横幅を1.6倍に太くする */
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight--3 {
    transform: scaleX(1.6);
    transform-origin: 50% 0;
  }
}
#mv .light__spotlight--3 .light__triangle {
  clip-path: polygon(50% 0%, 35% 100%, 65% 100%);
}
#mv .light__spotlight--3 .light__circle::before {
  clip-path: ellipse(15% 50px at 50% 100%);
}
#mv .light__spotlight--3 .light__circle::after {
  clip-path: ellipse(15% 50px at 50% 0%);
}
#mv .light.is-show .light__spotlight--3 {
  opacity: 1;
  filter: none;
  transition: opacity 1000ms ease;
  transition-delay: 400ms;
}
#mv .light.is-show .light__spotlight--3 .light__triangle {
  animation: triangle3 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--3 .light__circle::before {
  animation: circle3_before 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--3 .light__circle::after {
  animation: circle3_after 5400ms ease-in-out infinite;
}
#mv .light {
  /* =========================================
     4本目のスポットライト
  ========================================= */
}
#mv .light__spotlight--4 {
  /* 追加：スマホ時だけ横幅を1.6倍に太くする */
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight--4 {
    transform: scaleX(1.6);
    transform-origin: 70% 0;
  }
}
#mv .light__spotlight--4 .light__triangle {
  clip-path: polygon(70% 0%, 55% 100%, 85% 100%);
}
#mv .light__spotlight--4 .light__circle::before {
  clip-path: ellipse(15% 50px at 70% 100%);
}
#mv .light__spotlight--4 .light__circle::after {
  clip-path: ellipse(15% 50px at 70% 0%);
}
#mv .light.is-show .light__spotlight--4 {
  opacity: 1;
  filter: none;
  transition: opacity 1000ms ease;
  transition-delay: 600ms;
}
#mv .light.is-show .light__spotlight--4 .light__triangle {
  animation: triangle4 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--4 .light__circle::before {
  animation: circle4_before 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--4 .light__circle::after {
  animation: circle4_after 5400ms ease-in-out infinite;
}
#mv .light {
  /* =========================================
     5本目のスポットライト
  ========================================= */
}
#mv .light__spotlight--5 {
  /* 追加：スマホ時だけ横幅を1.6倍に太くする */
}
@media screen and (max-width: 767px) {
  #mv .light__spotlight--5 {
    transform: scaleX(1.6);
    transform-origin: 90% 0;
  }
}
#mv .light__spotlight--5 .light__triangle {
  clip-path: polygon(90% 0%, 75% 100%, 105% 100%);
}
#mv .light__spotlight--5 .light__circle::before {
  clip-path: ellipse(15% 50px at 90% 100%);
}
#mv .light__spotlight--5 .light__circle::after {
  clip-path: ellipse(15% 50px at 90% 0%);
}
#mv .light.is-show .light__spotlight--5 {
  opacity: 1;
  filter: none;
  transition: opacity 1000ms ease;
  transition-delay: 800ms;
}
#mv .light.is-show .light__spotlight--5 .light__triangle {
  animation: triangle5 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--5 .light__circle::before {
  animation: circle5_before 5400ms ease-in-out infinite;
}
#mv .light.is-show .light__spotlight--5 .light__circle::after {
  animation: circle5_after 5400ms ease-in-out infinite;
}
#mv {
  /* =========================================
     Keyframes
  ========================================= */
}
@keyframes triangle1 {
  0%, 44%, 100% {
    clip-path: polygon(10% 0%, -5% 100%, 25% 100%);
  }
  11% {
    clip-path: polygon(10% 0%, -25% 100%, 5% 100%);
  }
  22% {
    clip-path: polygon(10% 0%, 25% 100%, 55% 100%);
  }
  33% {
    clip-path: polygon(10% 0%, -15% 100%, 15% 100%);
  }
}
@keyframes circle1_before {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 10% 100%);
  }
  11% {
    clip-path: ellipse(15% 50px at -10% 100%);
  }
  22% {
    clip-path: ellipse(15% 50px at 40% 100%);
  }
  33% {
    clip-path: ellipse(15% 50px at 0% 100%);
  }
}
@keyframes circle1_after {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 10% 0%);
  }
  11% {
    clip-path: ellipse(15% 50px at -10% 0%);
  }
  22% {
    clip-path: ellipse(15% 50px at 40% 0%);
  }
  33% {
    clip-path: ellipse(15% 50px at 0% 0%);
  }
}
@keyframes triangle2 {
  0%, 44%, 100% {
    clip-path: polygon(30% 0%, 15% 100%, 45% 100%);
  }
  11% {
    clip-path: polygon(30% 0%, -5% 100%, 25% 100%);
  }
  22% {
    clip-path: polygon(30% 0%, 45% 100%, 75% 100%);
  }
  33% {
    clip-path: polygon(30% 0%, 5% 100%, 35% 100%);
  }
}
@keyframes circle2_before {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 30% 100%);
  }
  11% {
    clip-path: ellipse(15% 50px at 10% 100%);
  }
  22% {
    clip-path: ellipse(15% 50px at 60% 100%);
  }
  33% {
    clip-path: ellipse(15% 50px at 20% 100%);
  }
}
@keyframes circle2_after {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 30% 0%);
  }
  11% {
    clip-path: ellipse(15% 50px at 10% 0%);
  }
  22% {
    clip-path: ellipse(15% 50px at 60% 0%);
  }
  33% {
    clip-path: ellipse(15% 50px at 20% 0%);
  }
}
@keyframes triangle3 {
  0%, 44%, 100% {
    clip-path: polygon(50% 0%, 35% 100%, 65% 100%);
  }
  11% {
    clip-path: polygon(50% 0%, 5% 100%, 35% 100%);
  }
  22% {
    clip-path: polygon(50% 0%, 65% 100%, 95% 100%);
  }
  33% {
    clip-path: polygon(50% 0%, 35% 100%, 65% 100%);
  }
}
@keyframes circle3_before {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 50% 100%);
  }
  11% {
    clip-path: ellipse(15% 50px at 20% 100%);
  }
  22% {
    clip-path: ellipse(15% 50px at 80% 100%);
  }
  33% {
    clip-path: ellipse(15% 50px at 50% 100%);
  }
}
@keyframes circle3_after {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 50% 0%);
  }
  11% {
    clip-path: ellipse(15% 50px at 20% 0%);
  }
  22% {
    clip-path: ellipse(15% 50px at 80% 0%);
  }
  33% {
    clip-path: ellipse(15% 50px at 50% 0%);
  }
}
@keyframes triangle4 {
  0%, 44%, 100% {
    clip-path: polygon(70% 0%, 55% 100%, 85% 100%);
  }
  11% {
    clip-path: polygon(70% 0%, 75% 100%, 105% 100%);
  }
  22% {
    clip-path: polygon(70% 0%, 25% 100%, 55% 100%);
  }
  33% {
    clip-path: polygon(70% 0%, 65% 100%, 95% 100%);
  }
}
@keyframes circle4_before {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 70% 100%);
  }
  11% {
    clip-path: ellipse(15% 50px at 90% 100%);
  }
  22% {
    clip-path: ellipse(15% 50px at 40% 100%);
  }
  33% {
    clip-path: ellipse(15% 50px at 80% 100%);
  }
}
@keyframes circle4_after {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 70% 0%);
  }
  11% {
    clip-path: ellipse(15% 50px at 90% 0%);
  }
  22% {
    clip-path: ellipse(15% 50px at 40% 0%);
  }
  33% {
    clip-path: ellipse(15% 50px at 80% 0%);
  }
}
@keyframes triangle5 {
  0%, 44%, 100% {
    clip-path: polygon(90% 0%, 75% 100%, 105% 100%);
  }
  11% {
    clip-path: polygon(90% 0%, 95% 100%, 125% 100%);
  }
  22% {
    clip-path: polygon(90% 0%, 45% 100%, 75% 100%);
  }
  33% {
    clip-path: polygon(90% 0%, 85% 100%, 115% 100%);
  }
}
@keyframes circle5_before {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 90% 100%);
  }
  11% {
    clip-path: ellipse(15% 50px at 110% 100%);
  }
  22% {
    clip-path: ellipse(15% 50px at 60% 100%);
  }
  33% {
    clip-path: ellipse(15% 50px at 100% 100%);
  }
}
@keyframes circle5_after {
  0%, 44%, 100% {
    clip-path: ellipse(15% 50px at 90% 0%);
  }
  11% {
    clip-path: ellipse(15% 50px at 110% 0%);
  }
  22% {
    clip-path: ellipse(15% 50px at 60% 0%);
  }
  33% {
    clip-path: ellipse(15% 50px at 100% 0%);
  }
}

.bg_stripe {
  position: relative;
  margin-top: -7vw;
  z-index: 0;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .bg_stripe {
    margin-top: -20vw;
  }
}
.bg_stripe .bg_inner {
  background: url(./img/bg.webp) no-repeat center center/cover;
  padding: 15vw 0;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner {
    padding: 30vw 0;
  }
}
.bg_stripe .bg_inner #about .inner {
  background: url(./img/about_bg.webp) no-repeat center center/70%;
  padding: 12vw 0 8vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about .inner {
    background: url(./img/sp_about_bg.webp) no-repeat center center/110%;
    padding: 40vw 0 30vw;
  }
}
.bg_stripe .bg_inner #about .inner::before {
  content: "";
  background: url(./img/about_ribbon01.webp) no-repeat center center/contain;
  width: 31.87vw;
  height: 23.12vw;
  position: absolute;
  top: -4vw;
  left: 8vw;
  opacity: 0;
  filter: blur(10px);
  transition: 1s;
  animation: float_ribbon 10s infinite alternate ease-in-out;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about .inner::before {
    width: 65vw;
    height: 55vw;
    top: -54vw;
    left: -30vw;
  }
}
.bg_stripe .bg_inner #about .inner::after {
  content: "";
  background: url(./img/about_ribbon02.webp) no-repeat center center/contain;
  width: 22.29vw;
  height: 25.41vw;
  position: absolute;
  bottom: -4vw;
  right: 8vw;
  opacity: 0;
  filter: blur(10px);
  transition: 1s;
  animation: float_ribbon 10s infinite reverse ease-in-out;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about .inner::after {
    width: 55vw;
    height: 60vw;
    right: -50vw;
    bottom: -30vw;
  }
}
.bg_stripe .bg_inner #about .inner h2 {
  transition: 0.8s;
  opacity: 0;
  filter: blur(10px);
  width: 40vw;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about .inner h2 {
    width: 70%;
  }
}
.bg_stripe .bg_inner #about .inner p {
  transition: 0.8s;
  transition-delay: 0.3s;
  opacity: 0;
  filter: blur(10px);
  font-size: 1.45vw;
  font-weight: 700;
  color: #9e7e2c;
  text-align: center;
  line-height: 2.5;
}
.bg_stripe .bg_inner #about .inner p span {
  background-image: radial-gradient(circle, #9e7e2c 0.15vw, transparent 0.15vw);
  background-size: 1vw 0.3vw;
  background-position: bottom left;
  background-repeat: repeat-x;
  padding-bottom: 0.5em;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about .inner p {
    font-weight: 900;
    font-size: 4vw;
  }
  .bg_stripe .bg_inner #about .inner p span {
    background-image: radial-gradient(circle, #9e7e2c 0.35vw, transparent 0.35vw);
    background-size: 3vw 1.2vw;
  }
}
.bg_stripe .bg_inner #about.on .inner::before {
  opacity: 1;
  filter: blur(0);
  top: -1vw;
  left: 4vw;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about.on .inner::before {
    top: -24vw;
    left: -10vw;
  }
}
.bg_stripe .bg_inner #about.on .inner::after {
  opacity: 1;
  filter: blur(0);
  bottom: -1vw;
  right: 4vw;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #about.on .inner::after {
    right: -20vw;
    bottom: -10vw;
  }
}
.bg_stripe .bg_inner #about.on .inner h2,
.bg_stripe .bg_inner #about.on .inner p {
  opacity: 1;
  filter: blur(0);
}
.bg_stripe .bg_inner #illust {
  overflow: hidden;
  z-index: 1;
  margin-top: 8vw;
  position: relative;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust {
    margin-top: 30vw;
  }
}
.bg_stripe .bg_inner #illust.on::before {
  left: -5vw;
  animation: 3s brightness ease infinite;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust.on::before {
    left: -33vw;
    top: 0vw;
  }
}
.bg_stripe .bg_inner #illust.on::after {
  right: -5vw;
  animation: 3s brightness ease infinite;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust.on::after {
    right: -33vw;
    top: 0vw;
  }
}
.bg_stripe .bg_inner #illust.on .inner h2 {
  opacity: 1;
  transform: translateY(0%);
  filter: blur(0px);
}
.bg_stripe .bg_inner #illust.on .inner .illust_container #illust_slider_inner h3 {
  opacity: 1;
  transform: translateX(-50%);
  filter: blur(0px);
}
.bg_stripe .bg_inner #illust.on .inner .illust_container #illust_slider_inner .illust_slider {
  transform: translateY(0);
  opacity: 1;
}
.bg_stripe .bg_inner #illust.on .inner .illust_container #illust_slider_inner .illust_slider::before {
  opacity: 1;
}
.bg_stripe .bg_inner #illust.on.bright #illust_slider_inner .slider_option {
  transform: translateY(0%);
  filter: blur(0px);
  opacity: 1;
}
.bg_stripe .bg_inner #illust.on.bright .illust_slider_li.li_active img {
  filter: brightness(1);
}
.bg_stripe .bg_inner #illust::before {
  content: "";
  background: url(./img/illust_kirakira.webp) no-repeat center center/contain;
  width: 40%;
  height: 100%;
  position: absolute;
  left: 10vw;
  top: 0;
  transition: 1s;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust::before {
    background: url(./img/sp_illust_kirakira.webp) no-repeat center center/contain;
    width: 50%;
    left: 0vw;
    top: -33vw;
  }
}
.bg_stripe .bg_inner #illust::after {
  content: "";
  background: url(./img/illust_kirakira.webp) no-repeat center center/contain;
  transform: scale(-1, 1);
  width: 40%;
  height: 100%;
  position: absolute;
  right: 10vw;
  top: 0;
  transition: 1s;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust::after {
    background: url(./img/sp_illust_kirakira.webp) no-repeat center center/contain;
    width: 50%;
    right: 0vw;
    top: -33vw;
  }
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust {
    padding-top: 0;
  }
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .inner {
    overflow: hidden;
    position: relative;
  }
}
.bg_stripe .bg_inner #illust .inner h2 {
  width: 49.47vw;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10%);
  filter: blur(10px);
  transition: 1s;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .inner h2 {
    width: 80%;
  }
}
.bg_stripe .bg_inner #illust .illust_container {
  transition: opacity 0.6s ease-out, transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275), visibility 0.8s;
  position: relative;
  z-index: 3;
}
.bg_stripe .bg_inner #illust .illust_container #illust_slider_inner {
  width: 100%;
  max-width: 80vw;
  background: url(./img/illust_stage.webp) no-repeat center center/87%;
  margin: 0 auto;
  margin-top: 8vw;
  position: relative;
  height: 49.74vw;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container #illust_slider_inner {
    max-width: 100vw;
    background: url(./img/sp_illust_stage.webp) no-repeat center 30%/95%;
    max-width: none;
    margin-top: 11.682vw;
    height: 155.467vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container #illust_slider_inner h3 {
  width: 38.69vw;
  position: absolute;
  top: -6vw;
  left: 50%;
  transform: translateX(-50%) translateY(10%);
  z-index: 999999999;
  transition: 1s;
  opacity: 0;
  filter: blur(10px);
  transition: 1s;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container #illust_slider_inner h3 {
    width: 70%;
  }
}
.bg_stripe .bg_inner #illust .illust_container .main_area {
  position: relative;
  width: 100%;
  height: 68%;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .main_area {
    width: 119%;
    height: 60%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
  }
}
.bg_stripe .bg_inner #illust .illust_container .illust_slider {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateY(-5vw);
  opacity: 0;
  transition: 1s;
}
.bg_stripe .bg_inner #illust .illust_container .illust_slider::before {
  content: "";
  position: absolute;
  top: -3vw;
  left: 50%;
  transform: translateX(-50%);
  width: 40vw;
  height: 120%;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0% 100%);
  filter: blur(10px);
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 999;
  transition: 1s;
  transition-delay: 1s;
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .illust_slider::before {
    width: 75vw;
    height: 95%;
    top: -5%;
    clip-path: polygon(35% 0, 65% 0, 100% 100%, 0% 100%);
  }
}
.bg_stripe .bg_inner #illust .illust_container .illust_slider_li {
  position: absolute;
  height: 24.479vw;
  width: auto;
  top: 50%;
  left: 50%;
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.6s;
  will-change: transform;
}
.bg_stripe .bg_inner #illust .illust_container .illust_slider_li img {
  transition: 1s;
  filter: brightness(0.4);
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .illust_slider_li {
    height: 70.093vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container .illust_slider_li.li_active {
  z-index: 999999 !important;
}
.bg_stripe .bg_inner #illust .illust_container .illust_slider_li img {
  height: 100%;
  width: auto;
  object-fit: contain;
  display: block;
  transform-origin: bottom;
}
.bg_stripe .bg_inner #illust .illust_container #illust_name_slider {
  width: 34.21vw;
  height: 9.37vw;
  position: relative;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container #illust_name_slider {
    width: 61.252vw;
    height: 20vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container .illust_name_slider_li {
  width: 100%;
  height: 100%;
  transition: 0.3s;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(20%);
  z-index: 0;
  display: flex;
  justify-content: center;
  padding: 0.781vw;
  opacity: 0;
  pointer-events: none;
}
.bg_stripe .bg_inner #illust .illust_container .illust_name_slider_li.name_active {
  transform: translateX(-50%);
  opacity: 1;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .illust_name_slider_li {
    font-size: 5.374vw;
    padding: 2.336vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider {
  display: none;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0vw 3vw;
    width: 100%;
    margin-top: 2vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider .illust_thumb_slider_li {
  display: flex;
  width: 20vw;
  cursor: pointer;
  transition: 0.3s;
  position: relative;
  filter: brightness(0.5) contrast(70%);
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider::after {
  content: "";
  display: block;
  width: 100%;
  order: 0;
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider .illust_thumb_slider_li:nth-child(-n+3) {
  order: 1;
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider::before {
  content: "";
  flex-basis: 100%;
  width: 100%;
  order: 2;
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider .illust_thumb_slider_li:nth-child(n+4) {
  order: 3;
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider .thumb_active {
  opacity: 1;
  transform: scale(1.1);
  filter: none;
}
.bg_stripe .bg_inner #illust .illust_container #illust_thumb_slider .thumb_active::before {
  opacity: 1;
}
.bg_stripe .bg_inner #illust .illust_container .slider_option {
  position: relative;
  width: 96%;
  margin: 0 auto;
  margin-top: -2.5vw;
  z-index: 99999999;
  transition: 1s;
  transform: translateY(30%);
  filter: blur(10px);
  opacity: 0;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .slider_option {
    width: 85%;
    margin-top: -20.5vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container .nav_btn {
  position: absolute;
  top: -200%;
  transform: translateY(-50%);
  z-index: 1000;
  width: 5.052vw;
  height: 5.156vw;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s;
}
.bg_stripe .bg_inner #illust .illust_container .nav_btn::before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(./img/arrow.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .nav_btn {
    top: -120%;
    width: 10.551vw;
    height: 10.019vw;
  }
}
@media screen and (min-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .nav_btn:hover {
    transform: translateY(-50%) scale(1.1);
  }
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .nav_btn:active {
    transform: translateY(-50%) scale(1.1);
  }
}
.bg_stripe .bg_inner #illust .illust_container .nav_btn.prev {
  left: 0;
}
.bg_stripe .bg_inner #illust .illust_container .nav_btn.prev::before {
  transform: scale(-1, 1);
}
.bg_stripe .bg_inner #illust .illust_container .nav_btn.next {
  right: 0;
}
.bg_stripe .bg_inner #illust .illust_container .slider_deco li {
  width: 18vw;
  position: absolute;
  z-index: 9999999;
  bottom: 13vw;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #illust .illust_container .slider_deco li {
    width: 25vw;
    bottom: 75vw;
  }
}
.bg_stripe .bg_inner #illust .illust_container .slider_deco li:nth-child(1) {
  left: 2vw;
}
.bg_stripe .bg_inner #illust .illust_container .slider_deco li:nth-child(2) {
  right: 2vw;
}
.bg_stripe .bg_inner #illust .illust_container .slider_deco.active li:nth-child(1) {
  animation: flower 0.5s ease forwards;
}
.bg_stripe .bg_inner #illust .illust_container .slider_deco.active li:nth-child(2) {
  animation: flower 0.5s ease forwards;
}
.bg_stripe .bg_inner #coming_soon {
  position: relative;
  z-index: 9;
  text-align: center;
  opacity: 0;
  filter: blur(10px);
  transition: 1s;
  transform: translateY(100%);
}
.bg_stripe .bg_inner #coming_soon.on {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0%);
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #coming_soon {
    margin-top: 10vw;
  }
}
.bg_stripe .bg_inner #coming_soon img {
  width: 57.29vw;
}
@media screen and (max-width: 767px) {
  .bg_stripe .bg_inner #coming_soon img {
    width: 80%;
  }
}
.bg_stripe .footer_spot {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  pointer-events: none;
  z-index: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.bg_stripe .footer_spot li {
  position: absolute;
  bottom: -5%;
  width: 25vw;
  height: 110%;
  background: linear-gradient(to top, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 100%);
  clip-path: polygon(0% 0%, 100% 0%, 52% 100%, 48% 100%);
  filter: blur(15px);
  mix-blend-mode: overlay;
  transform-origin: bottom center;
}
@media screen and (max-width: 767px) {
  .bg_stripe .footer_spot li {
    width: 60vw;
  }
}
.bg_stripe .footer_spot li {
  animation: searchlight_sweep 5s infinite alternate ease-in-out;
}
.bg_stripe .footer_spot li:nth-child(1) {
  animation-duration: 3s;
  animation-delay: -2s;
}
.bg_stripe .footer_spot li:nth-child(2) {
  animation-duration: 4s;
  animation-delay: -2s;
}
.bg_stripe .footer_spot li:nth-child(3) {
  animation-duration: 4s;
  animation-delay: -3s;
}
.bg_stripe .footer_spot li:nth-child(4) {
  animation-duration: 4s;
  animation-delay: -15s;
}
.bg_stripe .footer_spot li:nth-child(5) {
  animation-duration: 3s;
  animation-delay: -14s;
}

footer {
  background: url(./img/footer_bg.webp) no-repeat center top/cover;
  text-align: center;
  margin-top: -7vw;
  padding-top: 12vw;
  padding-bottom: 4.5vw;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  footer {
    background: url(./img/sp_footer_bg.webp) no-repeat center top/cover;
    font-size: 2.804vw;
    margin-top: -20vw;
    padding-top: 35vw;
    padding-bottom: 12vw;
  }
}
footer::before {
  content: "";
  background: url(./img/footer_ribbon.webp) no-repeat center center/contain;
  width: 100%;
  height: 12.29vw;
  position: absolute;
  top: -2vw;
  left: 0;
}
@media screen and (max-width: 767px) {
  footer::before {
    background: url(./img/sp_footer_ribbon.webp) no-repeat center center/contain;
    height: 34vw;
    top: -3vw;
  }
}
footer .x_btn {
  width: 20vw;
  height: 3.06vw;
  margin: 0 auto;
  position: relative;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 2vw;
  transition: 0.2s;
}
@media screen and (min-width: 767px) {
  footer .x_btn:hover {
    transform: scale(1.02);
  }
  footer .x_btn:hover::before {
    animation: brightness 0.8s ease-in-out infinite;
  }
  footer .x_btn:hover a::after {
    animation: brightness 0.8s ease-in-out infinite;
  }
  footer .x_btn:hover a span::before, footer .x_btn:hover a span::after {
    animation: brightness 0.8s 0.2s ease-in-out infinite;
  }
}
@media screen and (max-width: 767px) {
  footer .x_btn {
    width: 50vw;
    height: 7.65vw;
    margin-bottom: 4vw;
  }
}
footer .x_btn::before {
  content: "";
  width: 1.66vw;
  height: 1.66vw;
  background: url(./img/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 60%;
  left: -10%;
  animation: star 3s ease-in-out infinite;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  footer .x_btn::before {
    width: 5.06vw;
    height: 5.06vw;
    left: -13%;
  }
}
footer .x_btn::after {
  content: "";
  width: 20.31vw;
  height: 4.06vw;
  background: url(./img/x_frame.webp) no-repeat center center/contain;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 2;
}
@media screen and (max-width: 767px) {
  footer .x_btn::after {
    width: 51vw;
    height: 10.15vw;
    top: 43%;
  }
}
footer .x_btn a {
  width: 96%;
  height: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50px;
  position: relative;
  z-index: 1;
  background: linear-gradient(to right, #b58f2e, #d8c492, #bc932c, #dcc488);
}
footer .x_btn a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  background: linear-gradient(to right, #dcc488, #dcc488, #d8c492, #dcc488);
  transition: opacity 0.5s ease-in-out;
  z-index: 0;
  border-radius: 50px;
}
@media screen and (min-width: 767px) {
  footer .x_btn a:hover::before {
    opacity: 1;
  }
}
footer .x_btn a::after {
  content: "";
  width: 1.66vw;
  height: 1.66vw;
  background: url(./img/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 60%;
  right: -12%;
  animation: star 3s ease-in-out 1s infinite reverse;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  footer .x_btn a::after {
    width: 5.06vw;
    height: 5.06vw;
    right: -14%;
  }
}
footer .x_btn a span {
  display: block;
  width: 85%;
  position: relative;
  z-index: 1;
}
footer .x_btn a span img {
  width: 90%;
  height: auto;
  vertical-align: middle;
}
footer .x_btn a span::before {
  content: "";
  width: 1.3vw;
  height: 1.3vw;
  background: url(./img/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 0%;
  right: -30%;
  animation: star 3s ease-in-out 1.5s infinite;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  footer .x_btn a span::before {
    width: 4.06vw;
    height: 4.06vw;
    top: -10%;
  }
}
footer .x_btn a span::after {
  content: "";
  width: 1.3vw;
  height: 1.3vw;
  background: url(./img/x_star.webp) no-repeat center center/contain;
  position: absolute;
  top: 0%;
  left: -30%;
  animation: star 3s ease-in-out 0.5s infinite reverse;
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  footer .x_btn a span::after {
    width: 4.06vw;
    height: 4.06vw;
    top: -10%;
  }
}
footer p {
  margin-top: 2vw;
  font-size: 0.83vw;
  color: #9e7e2c;
  font-weight: 900;
}
@media screen and (max-width: 767px) {
  footer p {
    font-size: 2.4vw;
  }
}
footer p:first-of-type {
  margin-bottom: 0.833vw;
}
@media screen and (max-width: 767px) {
  footer p:first-of-type {
    margin-bottom: 3.972vw;
  }
}
footer .logo_ap {
  width: 8.59vw;
  margin: 0 auto;
  margin-top: 1.302vw;
}
@media screen and (max-width: 767px) {
  footer .logo_ap {
    width: 21.729vw;
    margin-top: 4.673vw;
  }
}
footer .logo_ap a {
  display: block;
  transition: all 0.4s;
}
@media screen and (min-width: 767px) {
  footer .logo_ap a:hover {
    opacity: 0.6;
  }
}
footer .btn_top {
  width: 8.854vw;
  height: 6.146vw;
  position: absolute;
  top: 13.969vw;
  right: 12.917vw;
}
@media screen and (max-width: 767px) {
  footer .btn_top {
    width: 17.318vw;
    height: 9.346vw;
    top: 17vw;
    right: 4.5vw;
  }
}
footer .btn_top a {
  display: block;
  position: relative;
}
footer .btn_top a::before {
  content: "";
  width: 13.375vw;
  height: 5.506vw;
  background-image: url(./img/totop_top.webp);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  top: -3.956vw;
  left: 0.04vw;
  transition: all 0.4s;
}
@media screen and (max-width: 767px) {
  footer .btn_top a::before {
    width: 20.252vw;
    height: 10.841vw;
    top: -7vw;
    left: 0vw;
    animation: btn-top 1s ease infinite alternate-reverse;
  }
}
@media screen and (min-width: 767px) {
  footer .btn_top a:hover::before {
    transform: translateY(-15%);
  }
}

/* =========================================
   アニメーション定義
========================================= */
@keyframes twinkle_star {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }
  50% {
    opacity: 1;
    transform: scale(1) rotate(180deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(360deg);
  }
}
@keyframes float_ribbon {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(4px, -6px);
  }
  50% {
    transform: translate(-1px, 4px);
  }
  75% {
    transform: translate(-6px, -1px);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes flower {
  0%, 100% {
    transform: rotate(0deg);
  }
  35% {
    transform: rotate(3deg) scale(0.9);
  }
  65% {
    transform: rotate(-3deg);
  }
}
@keyframes searchlight_sweep {
  0% {
    left: var(--start);
    transform: translateX(-50%) rotate(-15deg);
  }
  100% {
    left: var(--end);
    transform: translateX(-50%) rotate(15deg);
  }
}
@keyframes btn-top {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-30%);
  }
}
@keyframes brightness {
  0%, 100% {
    filter: drop-shadow(0px 0px 10px #fefcdf) brightness(1.2);
  }
  50% {
    filter: none;
  }
}
@keyframes btn-top {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(-30%);
  }
}/*# sourceMappingURL=style.css.map */