/*
Theme Name: Lightning Child
Theme URI: 
Template: lightning
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/* =====================================================
  メインビジュアル左側 固定ナビゲーション（Scroll誘導）
  対象：Lightningテーマ / トップMV
   ===================================================== */

/* MV全体の基準（absolute配置の基点） */
.mv-wrap {
  position: relative;
}

/* -----------------------------------------------------
  左側固定ユニット本体
  ・MVの左側に縦配置
  ・上下中央に配置
----------------------------------------------------- */
.mv-side {
  position: absolute;
  left: -52px;
  /* ←ここで左右調整 */
  top: 65%;
  transform: translateY(-50%);
  z-index: 9999;
  pointer-events: none;
}

/* 中身を縦方向に整列 */
.mv-side__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  /* 各要素の縦間隔 */
}

/* -----------------------------------------------------
  縦書き英文コピー
----------------------------------------------------- */
.mv-side__copy {
  writing-mode: vertical-rl;
  /* 縦書き（右→左） */
  text-orientation: mixed;
  letter-spacing: 0.14em;
  font-size: 12px;
  color: #fff;
  opacity: 0.9;
  pointer-events: auto;
}

/* -----------------------------------------------------
  Scroll誘導リンク全体
----------------------------------------------------- */
.mv-side__scroll {
  writing-mode: vertical-rl;
  /* Scrollも縦書き */
  text-decoration: none;
  color: #fff;
  opacity: 0.9;
  pointer-events: auto;
}

/* Scroll文字 */
.mv-side__scrollText {
  font-size: 14px;
  letter-spacing: 0.2em;
  position: relative;
  /* 矢印配置の基準 */
  display: inline-block;
  padding-bottom: 14px;
  /* 矢印分の余白 */
}

/* Scroll文字の下に表示する矢印 */
.mv-side__scrollText::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 7px;
  height: 7px;
  transform: translateX(-50%) rotate(45deg);
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  opacity: 0.9;
}

/* -----------------------------------------------------
  縦ライン（Scroll誘導用）
----------------------------------------------------- */
.mv-side__scrollLine {
  display: inline-block;
  width: 1px;
  height: 64px;
  /* 線の長さ */
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.9);
  position: relative;
  /* 丸アニメの基準 */
  overflow: visible;
  /* 丸が端で切れないように */
}

/* 縦ライン上を上下する丸（スクロール誘導） */
.mv-side__scrollLine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 8px;
  height: 8px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #fff;
  animation: mvDot 1.6s ease-in-out infinite;
}

/* 丸の上下アニメーション */
@keyframes mvDot {
  0% {
    top: 0;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    top: calc(100% - 8px);
    opacity: 0;
  }
}

/* -----------------------------------------------------
スマホでは非表示（邪魔にならないように）
----------------------------------------------------- */
@media (max-width: 767px) {
  .mv-side {
    display: none;
  }
}