@charset "UTF-8";

/* ────────────── PC表示（縦並び）────────────── */
.anchor-container {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 150px;
  height: auto;
  background: #000;
  opacity: 0.7;
  font-size: 12px;
  z-index: 1000;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 0 0 20px;
}

.nav-line {
  position: absolute;
  left: 16px;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #9dd5ff;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    #d76182 8%,
    #9dd5ff 45%,
    #d76182 100%,
    transparent 45%,
    transparent 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 200%;
  background-position: 0 0;
  pointer-events: none;
}

.nav-line-highlight {
  position: absolute;
  left: 16px;
  top: 0;
  width: 2px;
  height: 0;
  background-image: linear-gradient(
    to bottom,
    transparent 0%,
    #d76182 8%,
    #9dd5ff 45%,
    transparent 45%,
    transparent 100%
  );
  transition: height 0.8s ease-in-out;
  pointer-events: none;
}
.nav-line-highlight.active {
  animation: blink 1s ease-in-out 3;
}
@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.anchor-container section {
  height: 100vh;
  padding: 50px;
  box-sizing: border-box;
  color: #f7e3f4;
}

.anchor {
  position: relative;
  margin: 20px 0 0 28px;
  cursor: pointer;
  pointer-events: auto;
}

.nav-block {
  position: relative;
  padding: 10px 0 0 10px; /* glowと同じに揃える */
  border-radius: 0px; /* glowと同じに揃える */
  box-shadow: 0 0 0px 0px transparent; /* 初期状態でも影の領域を確保 */
  background-color: transparent;
  border: 1px solid transparent;
}

.nav-block .title,
.nav-block .details {
  transition: color 0.8s ease-in-out;
  color: #f7e3f4;
}

.title-wrap {
  position: relative;
}

.title {
  position: relative;
  width: 200px;
  margin: 0;
  padding: 0 0 10px 0px;
  line-height: 1.2;
}

/* 擬似要素でSVG表示（PC表示：統一） */
.title::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 20px;
  width: 100px;
  height: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154.75 31.67'><g><circle fill='%23d76182' cx='9.87' cy='21.8' r='9.87'/><line stroke='%23d76182' x1='12.01' y1='20.84' x2='36.74' y2='1'/><line stroke='%23d76182' x1='36.64' y1='1.12' x2='153.75' y2='1.12'/></g></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
  transform-origin: center center;
}

/* glow状態（ラインと同期） */
.nav-block.glow-bg {
  background-color: rgba(255, 192, 203, 0.2); /* 優しいピンクの光 */
  box-shadow: 0 0 0px 0px rgba(255, 192, 203, 0.5); /* ふわっと広がる光 */
  border-radius: 0px;
  padding: 10px 0 0 10px;
}
.nav-block.glow .title,
.nav-block.glow .details {
  color: #9dd5ff !important;
}

.nav-block.glow .title::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154.75 31.67'><g><circle fill='%239dd5ff' cx='9.87' cy='21.8' r='9.87'/><line stroke='%239dd5ff' x1='12.01' y1='20.84' x2='36.74' y2='1'/><line stroke='%239dd5ff' x1='36.64' y1='1.12' x2='153.75' y2='1.12'/></g></svg>");
}

/* active状態（白に点滅） */
.anchor.active .nav-block .title,
.anchor.active .nav-block .details {
  color: #ffffff !important;
  animation: blink 1s ease-in-out 3;
}

.anchor.active .nav-block .title::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 154.75 31.67'><g><circle fill='%23ffffff' cx='9.87' cy='21.8' r='9.87'/><line stroke='%23ffffff' x1='12.01' y1='20.84' x2='36.74' y2='1'/><line stroke='%23ffffff' x1='36.64' y1='1.12' x2='153.75' y2='1.12'/></g></svg>");
}

/* スマホ表示（横並び＋反転） */
@media (max-width: 768px) {
  .anchor-container {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 32px;
    z-index: 1000;
    flex-wrap: wrap;
    height: 15vh;
    align-content: flex-start;
  }

  .nav-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background-image: linear-gradient(to right, #d76182, #9dd5ff);
    z-index: -1;
    pointer-events: none;
  }
  .nav-block {
    padding: 0 0 0 0;
  }
  .nav-block.glow {
    padding: 0 0 0 0;
    background-color: rgba(255, 192, 203, 0.1); /* 優しいピンクの光 */
    box-shadow: 0 0 10px 5px rgba(255, 192, 203, 0.1); /* ふわっと広がる光 */
    border-radius: 50px;
  }
  .anchor {
    position: relative;
    width: 48px;
    text-align: center;
    margin: 0 10px;
  }

  .anchor:nth-of-type(odd) {
    transform: translateY(5px) scale(1);
  }

  .anchor:nth-of-type(even) {
    transform: translate(50px, -5px) rotate(0deg);
  }

  .title {
    font-size: 12px;
    width: auto;
    padding: 0;
  }

  .anchor:nth-of-type(odd) .title {
    text-align: left;
    padding: 0 0 1em 2em;
  }

  .anchor:nth-of-type(even) .title {
    text-align: right;
    padding: 0 0 0 0.5em;
  }

  /* 擬似要素位置調整と反転（偶数のみ） */
  .anchor:nth-of-type(odd) .title::before {
    top: 70%;
    left: 0;
    width: 80px;
    height: 50px;
  }

  .anchor:nth-of-type(even) .title::before {
    top: -55px;
    left: -10px;
    width: 80px;
    height: 50px;
    transform: rotate(180deg) scaleX(-1);
    transform-origin: left center;
  }

  .details {
    display: none;
    font-size: 10px;
    margin-top: 2px;
    margin: 1em 0 0 1em;
  }

  .nav-line-highlight {
    display: none;
  }
}

/* 星屑アニメーション */
.star {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 179, 234, 1),
    rgba(194, 237, 255, 1)
  );
  border-radius: 50%;
  pointer-events: none;
  /* 初期状態：要素中心に小さく */
  transform: translate(-50%, -50%) scale(var(--start-scale, 1));
  will-change: transform, opacity;
  /* star-fly を必ず動かす */
  animation: star-fly var(--dur, 1.5s) ease-out var(--delay, 0s) forwards;
}

@keyframes star-fly {
  0% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(var(--start-scale, 1));
  }
  100% {
    opacity: 0;
    /* --dx, --dy で与えた方向・距離に飛んでいく */
    transform: translate(var(--dx), var(--dy)) scale(0);
  }
}

@keyframes spinEffect {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* transform-origin は必ず要素の中心に */
.anchor-details {
  transform-origin: center center;
}

/* spin クラスをつけた瞬間に一回転し、終わったら最終状態をキープ */
.anchor-details.spin {
  animation-name: spinEffect;
  animation-duration: 0.8s; /* ※お好みで調整可 */
  animation-timing-function: linear; /* 一定速度 */
  animation-iteration-count: 1; /* １回だけ */
  animation-fill-mode: forwards; /* 終了後もrotate(360deg)を維持 */
}