/* ==============================
    main
============================== */

.main__list {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  pointer-events: none;
}

/* フキダシ */
.main__list > li {
  position: absolute;
  display: inline-block;
  background-color: var(--white);
  color: var(--black);
  border: 2px solid var(--black);
  box-shadow: 2px 2px 0px 0px var(--black);
  padding: 0.8rem 1.6rem;
  font-size: 3svh;
  pointer-events: auto;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
  perspective: 600px;
}

  .main__game  {top: 22%;left: 42%;}
  .main__about {top: 39%;left: 33%;}
  .main__prof  {top: 54%;right: 48%;}
  .main__goods {top: 67%;left: 31%;}


/* ▽の部分 */
.main__list > li::after {
  content: "";
  position: absolute;
  bottom: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 12px;
  background-image: url("../images/setup/triangle.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  filter: drop-shadow(2px 2px 0 var(--black));
  animation: bounceArrow 1.2s ease-in-out infinite;
}

/* ★▽アニメ */
@keyframes bounceArrow {
  0%, 100% {
    transform: translate(-50%, 0);
  }
  50% {
    transform: translate(-50%, 3px);
  }
}

/* ★mainmenuホバーアニメ */

/* 通常時 */
.main__list > li a {
  display: inline-block;
  overflow: hidden;              /* 上の影を隠す */
  color: transparent;            /* 本体は透明にして shadow だけ表示 */
  text-shadow:
    0 -1.3em 0 var(--black),     /* 上の影（隠れてる黒） */
    0 0 0 var(--black);          /* 本体位置の黒 */
  transition: text-shadow 0.35s ease;
}

/* ホバー時：背景オレンジ + 白文字回転 */
.main__list > li:hover {
  background-color: var(--orange);
  color: var(--white); /* これは a 以外の要素用（念のため） */
}

/* ホバー時：文字色・アニメ */
.main__list > li:hover a {
  text-shadow:
    0 0 0 var(--white),      /* 本体位置の白 */
    0 1.3em 0 var(--white);  /* 下に抜けていく白 */
  animation: textSlot 0.45s ease-out;
}

/* svg調整 */
.main__list > li a svg {
  margin-left: 6px;
}

.main__list > li a svg path {
  fill: var(--black);
  transition: fill 0.25s ease;
}
.main__list > li:hover a svg path {
  fill: var(--white);
}

/* 回転のアニメ */
@keyframes textSlot {
  0% {
    transform: rotateX(0deg);
  }
  25% {
    transform: rotateX(40deg);
  }
  50% {
    transform: rotateX(0deg);
  }
  75% {
    transform: rotateX(-25deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}


/* ////////////////////////////
    pc 769px～
//////////////////////////// */

@media screen and (min-width:769px) {

  /* フキダシ */
  .main__list > li {
    border: 3px solid var(--black);
    padding: 0.8rem 2.4rem;
    font-size: 3.2rem;
  }

  /* ▽の部分 */
  .main__list > li::after {
    bottom: -30px; /* 吹き出しの下に配置 */
    width: 40px;   /* SVGサイズに合わせる */
    height: 27px;
  }

  .main__game  { top: 39%;  left: 34%; }
  .main__about { top: 43%;  left: 11%; }
  .main__prof  { top: 56%;  right: 46%; }
  .main__goods { top: 53%;  left: 64%; }

}

/* ==============================
    scroll
============================== */

.scroll-indicator {
  position: fixed;
  left: 50%;
  bottom: 7px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 80px;
  z-index: 50;
  pointer-events: none;
}

.scroll-indicator__arrow {
  width: 20px;
  height: auto;
  pointer-events: none;
  color: var(--black);
  opacity: 1;
  transition: opacity 0.3s ease;
}

.scroll__txt.pctx {
  display: none;
}

.scroll__txt {
  pointer-events: none;
  transition: opacity 0.3s ease;
}


/* 下部←→ */
@keyframes arrowLeftNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(-6px); }
}
@keyframes arrowRightNudge {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(6px); }
}
.scroll-indicator__arrow--left {
  animation: arrowLeftNudge 1.2s ease-in-out infinite;
}
.scroll-indicator__arrow--right {
  animation: arrowRightNudge 1.2s ease-in-out infinite;
}

.scroll-indicator__arrow.is-hidden {
  opacity: 0;
}

.scroll__txt.is-hidden {
  opacity: 0;
}

@media screen and (min-width:769px) {

  .scroll__txt.pctx {
    display: inline-block;
  }
  .scroll__txt.sptx {
    display: none;
  }

}

/* ==============================
   Loading
============================== */

.loader {
  position: fixed;
  inset: 0;
  background-color: var(--orange);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.loader__inner {
  text-align: center;
}

/* ロゴコンテナ */
.loader__logo {
  position: relative;
  display: inline-block;
  width: 220px;
  aspect-ratio: 486 / 339;
}

.loader__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 奥 → 手前 */
.loader__back  { z-index: 1; }
.loader__door  { z-index: 2; }
.loader__frame { z-index: 3; }

/* □ドアの動き */
.loader__door {
  transform: translateX(0);
  transition: transform 0.8s steps(6, end);
}
.loader__door.is-open {
  transform: translateX(-30%);
}

/* □loadingバー */
.loader__bar-wrap {
  position: relative;
  width: 220px;
  height: 10px;
  border: 2px solid var(--white);
  background-color: var(--black);
  margin: 12px auto;
  overflow: hidden;
}
.loader__bar {
  width: 0;
  height: 100%;
  background-color: var(--orange);
  animation: loaderBarFill 2.4s steps(16, end) forwards;
}

@keyframes loaderBarFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* □loadingテキストアニメ*/
.loader__text {
  color: var(--white);
  font-size: 1.4rem;
  letter-spacing: 0.1em;
  line-height: 1rem;  /* フォントサイズと同じにしてもOK */
  height: 1rem;       /* ← 枠の高さも同じにして固定しちゃう */
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  animation: loadingTyping 1.6s steps(10, end) infinite;
}

/* success! 表示用：アニメ止めて、ちゃんと全部見せる */
.loader__text.is-success {
  animation: blinkSuccess 0.5s steps(10, end) infinite;
  overflow: visible;
  white-space: nowrap;  /* or normal どっちでもOK */
}
/* success! の点滅アニメーション */
@keyframes blinkSuccess {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}


/* 1文字ずつ増えて、全部出てから一気に消えるループ */
@keyframes loadingTyping {
  0% {
    width: 0ch;
    opacity: 1;
  }
  60% {
    width: 10ch;   /* "Loading..." は 10文字ぶん */
    opacity: 1;
  }
  70% {
    width: 10ch;   /* 少しだけ全表示のままキープ */
    opacity: 1;
  }
  71% {
    width: 10ch;
    opacity: 0;    /* ここでスッと消える */
  }
  100% {
    width: 0ch;
    opacity: 0;
  }
}


/* 背景を透明にして下のページを見せる */
.loader.loader--reveal {
  background-color: transparent;
  transition: background-color 0.4s ease;
}

/* ロゴやバーをフェードアウト */
.loader__inner.is-hidden {
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* 最後にローダーごと消す */
.loader.is-done {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

/* □main__list表示アニメ */
.main__list > li {
  opacity: 0;
  transform: translateY(-15px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 表示アニメーションON時 */
.main__list.is-visible > li {
  opacity: 1;
  transform: translateY(0);
}