/* 固定ボタンの位置（右下）と前面化 */
.fixed_btn {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 3000;

  /* フェードは常時効かせる（0.4s） */
  transition: opacity 0.4s ease;

  /* transform は入退場は Vuetify が担当するため、ここでは固定（0） */
  transform: translateY(0);

  /* 見た目（四角・黒枠・白背景・アイコン黒）*/
  border: 1px solid #000 !important;
  background-color: #fff !important;
  border-radius: 0 !important;
  color: #000 !important; /* outlined の枠/アイコン色のベース */
  width: 48px;
  height: 48px;
}

/* 既存：フッター付近でフェードアウト中に少し下げる（なめらかに） */
.fixed_btn[data-fade="true"] {
  transform: translateY(6px); /* 3〜10px程度が自然 */
  /* transform のトランジションは data-fade 中だけ適用（入退場と競合しないように） */
  transition: opacity 0.4s ease, transform 0.25s ease;
}


/* 既存のクラス。フッター通知に併せてフェードを足すなら残してOK（時間は 0.4s に） */
.back-to-top {
  transition: opacity 0.4s ease;
}

/* Vuetify のスライド入退場の時間を 0.4s に上書き */
.v-slide-y-reverse-transition-enter-active,
.v-slide-y-reverse-transition-leave-active {
  transition-duration: 0.4s !important;
}

/* そのほか既存アニメはそのまま */
.vertical-bar-icon {
  width: 20px;
  height: 100px;
  animation: bounce 5s infinite;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes scrollAnimation {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.scroll {
  opacity: 0;
  animation-iteration-count: 1;
  animation: textFadeIn 5s ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 5s;
}
@keyframes textFadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

:root { --header-h: 80px; }
.section-anchor { height: 0; }