@charset "UTF-8";
/*--------------------------------------------------------
縦スワイプ閲覧（1スライドを画面内に収める）
--------------------------------------------------------*/
html,
body {
  height: 100vh;
  height: 100dvh;
  min-height: 0; /* base.css の body{min-height:100vh} を打ち消す（アドレスバー分の余白を防ぐ） */
  overflow: hidden; /* ページ本体はスクロールさせない。スクロールは .swipe-container のみ */
}

/* 縦並びスクロール＋スナップ */
.swipe-container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: none; /* Firefox */
}
.swipe-container::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* 1画面＝1スライド。横スクロールは出さない（overflow:hidden） */
.swipe-slide {
  flex: 0 0 100%;
  width: 100vw;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/*
  各スライドの中身は「高さが画面（100dvh）を超えない幅」に制限する。
  幅 = min(100%, 100dvh / 中身の縦横比) とすることで、
  縦長でも必ず1画面に収まり縦スクロールが発生しない。
*/
/* .swipe-slide > .fv,
.swipe-slide > .last,
.swipe-slide > .manga-page {
  width: min(100%, calc(100vh / var(--ar)));
  width: min(100%, calc(100dvh / var(--ar)));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
} */

/* 中身の縦横比（高さ / 幅） */
.swipe-slide > .manga-page {
  --ar: calc(1100 / 760);
  margin: 0;
}
/*
  FV・last：合成画像（複数画像＋ボタン＋帯）なので、実測アスペクト比（h/w）で
  高さ基準に画面内へ収める。--fv-zoom / --last-zoom = 1 で全体表示（見切れゼロ）、
  値を上げると拡大して余白を詰める（はみ出した分は上下/左右が見切れる）。
*/
.swipe-slide > .fv {
  --ar: calc(812 / 512); /* 実測比 ≒1.585 */
  --fv-zoom: 1;
  width: min(100%, calc(100vh / var(--ar)));
  width: min(100%, calc(100dvh / var(--ar)));
  transform: scale(var(--fv-zoom));
}
.swipe-slide > .last {
  --ar: calc(910 / 512); /* 実測比 ≒1.776 */
  --last-zoom: 1;
  width: min(100%, calc(100vh / var(--ar)));
  width: min(100%, calc(100dvh / var(--ar)));
  transform: scale(var(--last-zoom));
}

/* スライド内の画像はすべてコンテナ幅に合わせる */
.swipe-slide img {
  width: 100%;
  height: auto;
}

/*
  漫画スライド：まず画像全体が収まるサイズ（切れなし＝contain相当）にして、
  そこから一定倍率だけ拡大して余白を軽減する。
  どの端末アスペクトでも「はみ出し（見切れ）＝各辺 約6%まで」に統一される。
  ※ 余白をもっと詰めたい → --manga-zoom を大きく（見切れ増）／
    見切れを減らしたい → 小さく（余白増。1 で見切れゼロ＝全体表示）
*/
.swipe-slide > .manga-page {
  --manga-zoom: 1;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.swipe-slide > .manga-page img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  transform: scale(var(--manga-zoom));
}

/* FVの重なり画像（帯）は親（.relative）の左上に重ねる */
.swipe-slide .co_f_03 {
  top: 0;
  left: 0;
  width: 100%;
}

/*--------------------------------------------------------
スワイプ進捗バー（上部固定）
--------------------------------------------------------*/
.swipe-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: rgba(0, 0, 0, 0.08);
  z-index: 10000;
}
.swipe-progress__bar {
  display: block;
  width: 100%;
  height: 100%;
  background: #0E6AF8;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.1s linear;
}

/*--------------------------------------------------------
スワイプ誘導
--------------------------------------------------------*/
.swipe-hint {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); /* 画面中央 */
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 9px 18px 8px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  pointer-events: none; /* 下のコンテンツを操作可能に */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  opacity: 1; /* 最初から表示 */
  transition: opacity 0.5s ease;
}
/* 指が動く軌道（サイズ固定してピルが伸縮しないように） */
.swipe-hint__track {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 56px;
}
.swipe-hint__hand {
  width: 39px;
  height: 39px;
  display: block;
  /* 下から現れて上へ動いて消える＝「上へスワイプ」 */
  animation: swipeHand 1.8s ease-in-out infinite;
  will-change: transform, opacity;
}
.swipe-hint__text {
  font-size: 1.95rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1;
}
.swipe-hint.is-hidden {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* 指のジェスチャー：下→上へスライドしながらフェード */
@keyframes swipeHand {
  0%   { transform: translateY(16px);  opacity: 0; }
  20%  { transform: translateY(11px);  opacity: 1; }
  75%  { transform: translateY(-15px); opacity: 1; }
  100% { transform: translateY(-21px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .swipe-hint__hand { animation: none; }
}