/* =========================================================
   共通スタイル（トップページ／動画ページ 共通）
   ※ スマホ表示をメインに想定しています
========================================================= */

/* ページ全体のリセット（ブラウザごとの余白の違いをなくす） */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* padding や border を含めてサイズ計算する */
}

html, body {
  height: 100%;
  background-color: #fff; /* 動画の余白部分を目立たせない黒背景 */
  font-family: "Hiragino Sans", "Yu Gothic", sans-serif;
  color: #2c2c2c;
  font-weight: Bold;
}

/* =========================================================
   トップページ用
========================================================= */
.top-wrapper-bg {
  /* background-image:  url("../images/gaisen-zakura-01.jpg"); */
  /* background-size:cover; */
  /* min-height:100%; */
}
.top-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  gap: 40px;
}

/* 見出しとボタンをまとめて乗せる、薄い水色の角丸パネル */
.top-panel {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  padding: 36px 24px;
  background-color: #e3f4fb;
  border-radius: 24px;
}

.top-title {
  font-size: 1.6rem;
  text-align: center;
  letter-spacing: 0.05em;
}

/* リンクボタンを縦に並べるリスト */
.video-link-list {
  list-style: none;
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 各動画へのリンクボタン */
.video-link-button {
  display: block;
  width: 100%;
  padding: 18px 16px;
  text-align: center;
  text-decoration: none;
  color: #fff;
  background-color: #206dc4;
  border: 1px solid #303174;
  border-radius: 10px;
  font-size: 1.30rem;
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* タップ・クリック時の反応（スマホでも指を離す前に色が変わる） */
.video-link-button:active {
  background-color: #6b9cf5;
  transform: scale(0.98);
}

/* =========================================================
   動画ページ用
========================================================= */

.video-wrapper {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 動画を画面に収める枠。720×1280（9:16）の比率を保つ */
.video-frame {
  position: relative;
  width: 100%;
  max-width: 480px; /* PCで開いた時に横に伸びすぎないようにする上限 */
  aspect-ratio: 9 / 16; /* 720×1280 と同じ比率を維持 */
  background-color: #000000;
}

.video-frame video {
  width: 100%;
  height: 100%;
  /* 書き出されたMP4自体が1280×720の横長で、実際の縦長コンテンツは
     中央にのみ配置され左右に黒帯が入っている。
     object-fit: cover により黒帯部分だけを切り取り、
     実際の絵を枠いっぱいの最大サイズで表示する。 */
  object-fit: cover;
  display: block;
}

/* 再生前オーバーレイ（音声つきで再生を始めるための「▶ 再生する」ボタン） */
.start-overlay {
  position: absolute;
  inset: 0; /* top/right/bottom/left すべて0 = 動画枠いっぱいに広げる */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background-color: rgba(0, 0, 0, 0.55); /* 動画のサムネイルが透けて見える半透明の黒 */
  border: none;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

/* 再生ボタンの三角アイコン部分（丸で囲む） */
.start-overlay__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  font-size: 2rem;
  background-color: rgba(255, 255, 255, 0.15);
  border: 2px solid #ffffff;
  border-radius: 50%;
  /* ▶ は中心に対して少し右に見えるため、視覚的に中央へ寄せる */
  padding-left: 6px;
}

.start-overlay__label {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

/* JavaScript側で is-hidden クラスが付くと、再生開始と同時にフェードして消える */
.start-overlay.is-hidden {
  opacity: 0;
  pointer-events: none; /* 消えた後はタップを受け付けない（下の動画の操作を邪魔しない） */
}

/* 動画終了後に表示される操作ボタン群（もう一度見る／前の動画／次の動画） */
.post-video-controls {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translate(-50%, 10px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  opacity: 0; /* 最初は非表示 */
  pointer-events: none; /* 非表示の間はタップを受け付けない */
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* JavaScript側で is-visible クラスが付くと表示される */
.post-video-controls.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}

/* 「前の動画」「次の動画へ」を横に並べる行 */
.nav-buttons {
  display: flex;
  gap: 14px;
}

.replay-button,
.prev-button,
.next-button {
  padding: 14px 28px;
  font-size: 1rem;
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px; /* 楕円形のボタン */
  cursor: pointer;
  white-space: nowrap;
}

/* 「もう一度見る」は前へ／次へと区別できるよう控えめな配色に */
.replay-button {
  background-color: rgba(81, 80, 80, 0.617);
}

/* トップページに戻る小さいリンク（動画枠の一番下、左右中央に配置） */
.back-to-top {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  color: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 6px 12px;
  border-radius: 6px;

  /* display: none; */

}

/* =========================================================
   読み込み中の表示
   ・回線が遅いとき、動画のデータ待ちの間だけ画面に重なって出る
   ・JavaScript側で is-visible クラスが付いたときだけ表示される
========================================================= */
.loading-indicator {
  position: absolute;
  inset: 0; /* 動画枠いっぱいに広げる */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background-color: rgba(0, 0, 0, 0.55);
  color: #ffffff;
  opacity: 0;          /* 最初は非表示 */
  pointer-events: none; /* 表示中もタップは下の要素に通す（「一覧へ」を押せるように） */
  transition: opacity 0.3s ease;
  z-index: 1;
}

.loading-indicator.is-visible {
  opacity: 1;
}

/* くるくる回る輪。「止まっていない＝処理は進んでいる」と伝えるための目印 */
.loading-indicator__spinner {
  width: 54px;
  height: 54px;
  border: 4px solid rgba(255, 255, 255, 0.25);
  border-top-color: #ffffff; /* 上側だけ白くすることで、回転が目で分かるようにする */
  border-radius: 50%;
  animation: loading-spin 0.9s linear infinite;
}

@keyframes loading-spin {
  to {
    transform: rotate(360deg);
  }
}

.loading-indicator__label {
  font-size: 1.05rem;
  letter-spacing: 0.05em;
}

/* 端末側で「動きを減らす」設定をしている方には、ゆっくり回す */
@media (prefers-reduced-motion: reduce) {
  .loading-indicator__spinner {
    animation-duration: 2.4s;
  }
}