body {
  background-color: #170827;
  color: #FFFEF1;
  font-family: "noto-sans-cjk-jp", "tt-zhihei-chs-variable", "Yu Gothic", sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
}
body:after {
  position: fixed;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  content: "";
  background: linear-gradient(#170827, 40%, #281238);
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
  background: none;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(255, 254, 241, 0.7);
  border-radius: 4px;
}

.fade {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 99999;
  background-color: #170827;
}

.fade_out {
  display: none;
}

a.inactive {
  pointer-events: none;
}

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

.pc_tab {
  display: initial;
}
@media screen and (max-width: 768px) {
  .pc_tab {
    display: none;
  }
}

.tab_sp {
  display: none;
}
@media screen and (max-width: 1024px) {
  .tab_sp {
    display: initial;
  }
}

.tab_only {
  display: none;
}
@media screen and (max-width: 1024px) {
  .tab_only {
    display: initial;
  }
}
@media screen and (max-width: 768px) {
  .tab_only {
    display: none;
  }
}

.sp_only {
  display: none;
}
@media screen and (max-width: 768px) {
  .sp_only {
    display: initial;
  }
}

.bgimg {
  pointer-events: none;
}

.flicker {
  animation: flicker_movement 5s linear infinite;
}
@keyframes flicker_movement {
  0% {
    opacity: 1;
  }
  4% {
    opacity: 0.9;
  }
  6% {
    opacity: 0.85;
  }
  8% {
    opacity: 0.95;
  }
  10% {
    opacity: 0.9;
  }
  11% {
    opacity: 0.922;
  }
  12% {
    opacity: 0.9;
  }
  14% {
    opacity: 0.95;
  }
  16% {
    opacity: 0.98;
  }
  17% {
    opacity: 0.9;
  }
  19% {
    opacity: 0.93;
  }
  20% {
    opacity: 0.99;
  }
  24% {
    opacity: 1;
  }
  26% {
    opacity: 0.94;
  }
  28% {
    opacity: 0.98;
  }
  37% {
    opacity: 0.93;
  }
  38% {
    opacity: 0.85;
  }
  39% {
    opacity: 0.96;
  }
  42% {
    opacity: 1;
  }
  44% {
    opacity: 0.97;
  }
  46% {
    opacity: 0.94;
  }
  56% {
    opacity: 0.9;
  }
  58% {
    opacity: 0.9;
  }
  60% {
    opacity: 0.99;
  }
  68% {
    opacity: 1;
  }
  70% {
    opacity: 0.9;
  }
  72% {
    opacity: 0.95;
  }
  93% {
    opacity: 0.93;
  }
  95% {
    opacity: 0.95;
  }
  97% {
    opacity: 0.93;
  }
  100% {
    opacity: 1;
  }
}

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
body::-webkit-scrollbar {
  display: none;
}

.load {
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  background-color: #170827;
}
.load_logo {
  position: fixed;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.load_logo img {
  width: 30vw;
  position: relative;
  top: -10vh;
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  .load_logo img {
    width: 70vw;
  }
}

#load_bar {
  position: absolute;
  z-index: 99999;
  width: 100vw;
  height: 0.3vh;
  bottom: 20vh;
}

.intro_text, .intro_ruby {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200vh;
  margin: 3% auto 0;
  position: fixed;
}
.intro text {
  fill: #FFFEF1;
  font-family: "tt-zhihei-chs-variable", "Yu Gothic", sans-serif;
  font-size: 280%;
  font-weight: 500;
  letter-spacing: 0.3vw;
  line-height: 1;
  text-align: center;
  animation: text_movement 3s ease-in-out 6s both;
  backface-visibility: hidden;
}
.intro #intro_path_main, .intro #intro_path_ruby {
  border: 0px;
  fill: none;
  stroke: none;
}
.intro_text {
  left: calc(50vw - 100vh);
  bottom: 25vh;
}
@media screen and (max-width: 1024px) {
  .intro_text {
    display: none;
  }
}
.intro_text_sp {
  display: none;
  width: 100vw;
  height: 70vh;
  writing-mode: vertical-rl;
  font-family: "tt-zhihei-chs-variable", "Yu Gothic", sans-serif;
  font-size: 300%;
  font-weight: 500;
  letter-spacing: 0.5vw;
  line-height: 1;
  margin-top: 0;
  animation: text_movement_sp 3s ease-in-out 6s both;
  backface-visibility: hidden;
}
@media screen and (max-width: 768px) {
  .intro_text_sp {
    font-size: 180%;
    font-weight: 500;
    letter-spacing: 0.5vw;
    line-height: 1;
  }
}
.intro_text_sp_01 {
  margin: 10vh 0 0 5vw;
}
@media screen and (max-width: 768px) {
  .intro_text_sp_01 {
    margin: 5vh 0 0 8vw;
  }
}
.intro_text_sp_02 {
  margin-top: 32vh;
}
@media screen and (max-width: 1024px) {
  .intro_text_sp {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
  }
}
.intro_ruby {
  left: calc(50vw - 100vh);
  bottom: 32vh;
}
.intro_ruby text {
  font-size: 150%;
  font-weight: 400;
  letter-spacing: 0.3vw;
  line-height: 1;
}
@media screen and (max-width: 1024px) {
  .intro_ruby {
    display: none;
  }
}
@keyframes text_movement {
  0% {
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes text_movement_sp {
  0% {
    opacity: 1;
    transform: translateY(3vh);
  }
  40% {
    opacity: 0;
    transform: translateY(-12vh);
  }
  100% {
    opacity: 0;
    transform: translateY(-12vh);
  }
}
.intro_about {
  width: 20vw;
  position: fixed;
  height: 100vh;
  right: -20vw;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  animation: about_movement 2s ease-in-out 7s both;
  backface-visibility: hidden;
}
@media screen and (max-width: 1024px) {
  .intro_about {
    width: 60vw;
    right: 10vw;
    margin: 0 auto;
    justify-content: end;
    bottom: 10vh;
    animation: about_movement_sp 2s ease-in-out 7s both;
    padding-top: 0;
  }
}
@media screen and (max-width: 768px) {
  .intro_about {
    width: 70vw;
  }
}
@keyframes about_movement {
  from {
    opacity: 0;
    right: -20vw;
  }
  30% {
    opacity: 0;
    right: -20vw;
  }
  to {
    opacity: 1;
    right: 8vw;
  }
}
@keyframes about_movement_sp {
  from {
    opacity: 0;
    transform: translateX(10vw);
  }
  30% {
    opacity: 0;
    transform: translateX(10vw);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.intro_about_text p {
  font-size: 1vw;
  font-weight: 100;
  letter-spacing: 0.2vw;
  line-height: 2.5;
  text-align: left;
  position: relative;
  z-index: 99;
}
@media screen and (max-width: 1024px) {
  .intro_about_text p {
    font-size: 2vw;
    font-weight: 100;
    letter-spacing: 0.5vw;
    line-height: 2.5;
  }
}
@media screen and (max-width: 768px) {
  .intro_about_text p {
    font-size: 2.8vw;
    font-weight: 100;
    letter-spacing: 0.5vw;
    line-height: 2.5;
  }
}
.intro_about a {
  text-decoration: none;
  color: #FFFEF1;
  font-family: "tt-zhihei-chs-variable", "Yu Gothic", sans-serif;
  font-size: 1.5vw;
  font-weight: 700;
  letter-spacing: 1.5vw;
  line-height: 1;
  text-indent: 1.5vw;
  text-align: center;
  display: block;
}
@media screen and (max-width: 1024px) {
  .intro_about a {
    font-size: 2vw;
    font-weight: 700;
    letter-spacing: 2.5vw;
    line-height: 1;
    text-indent: 2vw;
  }
}
@media screen and (max-width: 768px) {
  .intro_about a {
    font-size: 3vw;
    font-weight: 700;
    letter-spacing: 2.5vw;
    line-height: 1;
    text-indent: 3vw;
  }
}
.intro_about_btn {
  position: relative;
  margin-top: 8vh;
  transition: transform 0.5s ease-in-out;
  backface-visibility: hidden;
}
.intro_about_btn .hover_on {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}
.intro_about_btn:hover .hover_on {
  opacity: 1;
}
@media screen and (max-width: 1024px) {
  .intro_about_btn:hover .hover_on {
    opacity: 0;
  }
}
@media screen and (max-width: 1024px) {
  .intro_about_btn {
    margin-top: 3vh;
  }
}
.intro_about_btn:hover {
  transform: scale(1.1);
}
.intro_about_btn_bg {
  position: relative;
  top: -9vw;
  left: -18vw;
}
@media screen and (max-width: 1024px) {
  .intro_about_btn_bg {
    top: -12vw;
    left: -23vw;
  }
}
@media screen and (max-width: 768px) {
  .intro_about_btn_bg {
    top: -14.5vw;
    left: -25vw;
  }
}
.intro_about_btn_bg img {
  z-index: -1;
  width: 36vw;
  pointer-events: none;
  position: absolute;
}
@media screen and (max-width: 1024px) {
  .intro_about_btn_bg img {
    width: 46vw;
  }
}
@media screen and (max-width: 768px) {
  .intro_about_btn_bg img {
    width: 55vw;
  }
}
.intro_about_btn_text {
  padding: 1.8vw 7vw;
  position: absolute;
  top: -0.5vw;
  left: -12vw;
  width: 10vw;
}
@media screen and (max-width: 1024px) {
  .intro_about_btn_text {
    top: -0.8vw;
    left: -14.5vw;
    width: 15vw;
  }
}
@media screen and (max-width: 768px) {
  .intro_about_btn_text {
    width: 20vw;
  }
}

.intro_kv {
  transform: rotate(17deg);
  position: fixed;
  animation: kv_movement 3s ease-in-out 6s both;
  backface-visibility: hidden;
}
@media screen and (max-width: 1024px) {
  .intro_kv {
    animation: kv_movement_tab 3s ease-in-out 6s both;
  }
}
@media screen and (max-width: 768px) {
  .intro_kv {
    animation: kv_movement_sp 3s ease-in-out 6s both;
  }
}
.intro_kv img {
  width: 200vh;
  height: auto;
  pointer-events: none;
}
@media screen and (max-width: 1024px) {
  .intro_kv img {
    width: 120vh;
    animation: kv_movement_tab_img 3s ease-in-out 6s both;
  }
}
@media screen and (max-width: 768px) {
  .intro_kv img {
    width: 120vh;
    animation: kv_movement_sp_img 3s ease-in-out 6s both;
  }
}

@keyframes kv_movement {
  from {
    transform: rotate(17deg);
    left: calc(50vw - 100vh);
    bottom: -128vh;
  }
  to {
    transform: rotate(0deg);
    left: calc(25vw - 100vh);
    bottom: -70vh;
  }
}
@keyframes kv_movement_tab {
  from {
    transform: rotate(17deg);
    left: calc(50vw - 55vh);
    bottom: -63.8vh;
  }
  to {
    transform: rotate(0deg);
    left: calc(50vw - 65vh);
    bottom: 15.5vh;
  }
}
@keyframes kv_movement_sp {
  from {
    transform: rotate(17deg);
    left: calc(50vw - 46vh);
    bottom: -54.5vh;
  }
  to {
    transform: rotate(0deg);
    left: calc(50vw - 52vh);
    bottom: 30vh;
  }
}
@keyframes kv_movement_tab_img {
  from {
    width: 120vh;
  }
  to {
    width: 100vh;
  }
}
@keyframes kv_movement_sp_img {
  from {
    width: 120vh;
  }
  to {
    width: 85vh;
  }
}
@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}
.index_shine {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: transparent;
  overflow: hidden;
  pointer-events: none;
}
.index_shine span {
  width: 20vmin;
  height: 20vmin;
  border-radius: 20vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 35;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  backface-visibility: hidden;
}
.index_shine span:nth-child(0) {
  color: rgba(153, 51, 255, 0.1);
  top: 14%;
  left: 32%;
  animation-duration: 146s;
  animation-delay: -101s;
  transform-origin: -9vw -15vh;
  box-shadow: 50vmin 0 6.3169675386vmin currentColor;
}
.index_shine span:nth-child(1) {
  color: rgba(51, 255, 255, 0.15);
  top: 27%;
  left: 41%;
  animation-duration: 41s;
  animation-delay: -141s;
  transform-origin: 14vw 16vh;
  box-shadow: 50vmin 0 6.4017918331vmin currentColor;
}
.index_shine span:nth-child(2) {
  color: rgba(255, 189, 102, 0.15);
  top: 57%;
  left: 28%;
  animation-duration: 130s;
  animation-delay: -66s;
  transform-origin: -17vw 9vh;
  box-shadow: 50vmin 0 6.6031721632vmin currentColor;
}
.index_shine span:nth-child(3) {
  color: rgba(255, 189, 102, 0.1);
  top: 60%;
  left: 86%;
  animation-duration: 134s;
  animation-delay: -129s;
  transform-origin: 11vw 3vh;
  box-shadow: 50vmin 0 7.2306081968vmin currentColor;
}
.index_shine span:nth-child(4) {
  color: rgba(255, 102, 255, 0.1);
  top: 11%;
  left: 51%;
  animation-duration: 25s;
  animation-delay: -7s;
  transform-origin: 25vw 4vh;
  box-shadow: -50vmin 0 6.5163241826vmin currentColor;
}
.index_shine span:nth-child(5) {
  color: rgba(255, 252, 136, 0.15);
  top: 44%;
  left: 24%;
  animation-duration: 75s;
  animation-delay: -96s;
  transform-origin: -9vw -10vh;
  box-shadow: 50vmin 0 6.9233225249vmin currentColor;
}
.index_shine span:nth-child(6) {
  color: rgba(51, 255, 255, 0.1);
  top: 73%;
  left: 70%;
  animation-duration: 6s;
  animation-delay: -101s;
  transform-origin: -21vw -16vh;
  box-shadow: 50vmin 0 6.5869746713vmin currentColor;
}
.index_shine span:nth-child(7) {
  color: rgba(153, 255, 51, 0.15);
  top: 89%;
  left: 57%;
  animation-duration: 51s;
  animation-delay: -127s;
  transform-origin: -24vw 2vh;
  box-shadow: 50vmin 0 6.6431484088vmin currentColor;
}
.index_shine span:nth-child(8) {
  color: rgba(255, 102, 255, 0.15);
  top: 99%;
  left: 32%;
  animation-duration: 33s;
  animation-delay: -123s;
  transform-origin: -15vw -16vh;
  box-shadow: 50vmin 0 6.7129307285vmin currentColor;
}
.index_shine span:nth-child(9) {
  color: rgba(255, 102, 255, 0.1);
  top: 29%;
  left: 55%;
  animation-duration: 126s;
  animation-delay: -52s;
  transform-origin: 12vw -24vh;
  box-shadow: -50vmin 0 6.9722027813vmin currentColor;
}
.index_shine span:nth-child(10) {
  color: rgba(255, 252, 136, 0.1);
  top: 42%;
  left: 15%;
  animation-duration: 151s;
  animation-delay: -59s;
  transform-origin: -8vw 16vh;
  box-shadow: 50vmin 0 6.7793657895vmin currentColor;
}
.index_shine span:nth-child(11) {
  color: rgba(51, 255, 255, 0.1);
  top: 82%;
  left: 68%;
  animation-duration: 49s;
  animation-delay: -85s;
  transform-origin: -2vw -7vh;
  box-shadow: 50vmin 0 6.6137642217vmin currentColor;
}
.index_shine span:nth-child(12) {
  color: rgba(255, 189, 102, 0.1);
  top: 28%;
  left: 41%;
  animation-duration: 123s;
  animation-delay: -15s;
  transform-origin: 3vw 16vh;
  box-shadow: 50vmin 0 6.9705524332vmin currentColor;
}
.index_shine span:nth-child(13) {
  color: rgba(255, 102, 102, 0.1);
  top: 49%;
  left: 94%;
  animation-duration: 34s;
  animation-delay: -76s;
  transform-origin: -16vw 17vh;
  box-shadow: 50vmin 0 6.7538613648vmin currentColor;
}
.index_shine span:nth-child(14) {
  color: rgba(153, 255, 51, 0.1);
  top: 29%;
  left: 57%;
  animation-duration: 152s;
  animation-delay: -125s;
  transform-origin: 1vw 11vh;
  box-shadow: 50vmin 0 6.7100965101vmin currentColor;
}
.index_shine span:nth-child(15) {
  color: rgba(255, 189, 102, 0.1);
  top: 94%;
  left: 26%;
  animation-duration: 77s;
  animation-delay: -42s;
  transform-origin: 13vw 16vh;
  box-shadow: 50vmin 0 6.9108865093vmin currentColor;
}
.index_shine span:nth-child(16) {
  color: rgba(255, 102, 102, 0.15);
  top: 39%;
  left: 29%;
  animation-duration: 84s;
  animation-delay: -128s;
  transform-origin: 5vw -17vh;
  box-shadow: 50vmin 0 6.61407303vmin currentColor;
}
.index_shine span:nth-child(17) {
  color: rgba(153, 255, 51, 0.1);
  top: 47%;
  left: 13%;
  animation-duration: 15s;
  animation-delay: -51s;
  transform-origin: 7vw -2vh;
  box-shadow: -50vmin 0 7.009544978vmin currentColor;
}
.index_shine span:nth-child(18) {
  color: rgba(153, 51, 255, 0.1);
  top: 58%;
  left: 26%;
  animation-duration: 67s;
  animation-delay: -58s;
  transform-origin: -4vw 21vh;
  box-shadow: 50vmin 0 6.3440646637vmin currentColor;
}
.index_shine span:nth-child(19) {
  color: rgba(255, 252, 136, 0.1);
  top: 2%;
  left: 66%;
  animation-duration: 114s;
  animation-delay: -117s;
  transform-origin: 6vw 7vh;
  box-shadow: 50vmin 0 7.2056372116vmin currentColor;
}
.index_shine span:nth-child(20) {
  color: rgba(255, 102, 102, 0.1);
  top: 98%;
  left: 20%;
  animation-duration: 155s;
  animation-delay: -122s;
  transform-origin: 14vw -17vh;
  box-shadow: -50vmin 0 6.6073602119vmin currentColor;
}
.index_shine span:nth-child(21) {
  color: rgba(153, 51, 255, 0.1);
  top: 1%;
  left: 7%;
  animation-duration: 118s;
  animation-delay: -71s;
  transform-origin: -21vw -15vh;
  box-shadow: -50vmin 0 6.9361835179vmin currentColor;
}
.index_shine span:nth-child(22) {
  color: rgba(255, 252, 136, 0.1);
  top: 53%;
  left: 41%;
  animation-duration: 42s;
  animation-delay: -62s;
  transform-origin: -2vw 14vh;
  box-shadow: 50vmin 0 7.0801801039vmin currentColor;
}
.index_shine span:nth-child(23) {
  color: rgba(255, 255, 255, 0.1);
  top: 9%;
  left: 5%;
  animation-duration: 152s;
  animation-delay: -115s;
  transform-origin: 22vw -16vh;
  box-shadow: -50vmin 0 6.596798491vmin currentColor;
}
.index_shine span:nth-child(24) {
  color: rgba(51, 255, 255, 0.1);
  top: 31%;
  left: 31%;
  animation-duration: 129s;
  animation-delay: -65s;
  transform-origin: 0vw 2vh;
  box-shadow: 50vmin 0 7.236305721vmin currentColor;
}
.index_shine span:nth-child(25) {
  color: rgba(255, 102, 102, 0.1);
  top: 87%;
  left: 51%;
  animation-duration: 78s;
  animation-delay: -105s;
  transform-origin: 19vw -14vh;
  box-shadow: 50vmin 0 6.6388229782vmin currentColor;
}
.index_shine span:nth-child(26) {
  color: rgba(153, 255, 51, 0.1);
  top: 74%;
  left: 97%;
  animation-duration: 33s;
  animation-delay: -105s;
  transform-origin: 15vw 11vh;
  box-shadow: 50vmin 0 7.0667378505vmin currentColor;
}
.index_shine span:nth-child(27) {
  color: rgba(255, 102, 255, 0.1);
  top: 53%;
  left: 2%;
  animation-duration: 88s;
  animation-delay: -97s;
  transform-origin: 25vw -14vh;
  box-shadow: -50vmin 0 6.5770102284vmin currentColor;
}
.index_shine span:nth-child(28) {
  color: rgba(153, 51, 255, 0.1);
  top: 15%;
  left: 41%;
  animation-duration: 135s;
  animation-delay: -31s;
  transform-origin: 19vw 23vh;
  box-shadow: -50vmin 0 6.2794047787vmin currentColor;
}
.index_shine span:nth-child(29) {
  color: rgba(255, 255, 255, 0.1);
  top: 15%;
  left: 18%;
  animation-duration: 153s;
  animation-delay: -107s;
  transform-origin: -22vw 2vh;
  box-shadow: 50vmin 0 6.6684492779vmin currentColor;
}/*# sourceMappingURL=index.css.map */