body {
  font-family:
    "Zen Kaku Gothic New",
    -apple-system,
    BlinkMacSystemFont,
    "Helvetica Neue",
    Arial,
    sans-serif;
  font-weight: 400;
    margin: 0;
}

.font-en {
  font-family:
    "Hanken Grotesk",
    "Zen Kaku Gothic New",
    sans-serif;
  letter-spacing: .04em;
  font-weight: 300;
font-style: italic;
}


/* =====================
  Scroll Reveal (base)
===================== */
.reveal{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
  will-change: opacity, transform;
}

.reveal.is-in{
  opacity: 1;
  transform: translateY(0);
}

/* ちょい強め（画像とかカード向け） */
.reveal--up-lg{
  transform: translateY(22px);
}

/* 左→右（小物やラベル向け） */
.reveal--left{
  transform: translateX(-14px);
}
.reveal--right{
  transform: translateX(14px);
}

/* まとめて入れる時の遅延（stagger用） */
.reveal{
  transition-delay: var(--d, 0ms);
}

/* ユーザーが動きを減らす設定の場合は無効化 */
@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Lenis導入時の体感アップ */
body::before,
body::after{
  transform: translateZ(0);
  backface-visibility: hidden;
}

.fv__slide img{
  transform: translateZ(0) scale(1);
}
.fv__slide.is-active img{
  transform: translateZ(0) scale(1.1);
}


/* 画面遷移用のオーバーレイ（新しい画面のイメージ） */
.pageTransition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  background: linear-gradient(90deg, rgb(135 155 165 / 100%) 0%, rgba(73, 84, 139, 1) 100%); /* サイトのトーンに合わせて調整 */
  opacity: 0;
  transform: translateY(100%); /* 下の外からスタート */
}

/* 進むとき：右 → 中央（覆う） */
body.is-page-leave-forward .pageTransition {
  animation: pageForwardLeave 0.6s ease forwards;
}

/* 進んだ先のページで：中央 → 左に抜けていく */
body.is-page-enter-forward .pageTransition {
  animation: pageForwardEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 戻るとき：左 → 中央（覆う） */
body.is-page-leave-back .pageTransition {
  animation: pageBackLeave 0.6s ease forwards;
}

/* 戻った先のページで：中央 → 右に抜けていく */
body.is-page-enter-back .pageTransition {
  animation: pageBackEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes pageForwardLeave {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageForwardEnter {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}

@keyframes pageBackLeave {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pageBackEnter {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}


/* Shuffle 選択トースト ---------------------------------------- */
.shuffleToast {
  position: fixed;
  left: 50%;
  top: 16px;                         /* ← 上に固定 */
  transform: translate(-50%, -120%);  /* ← 画面の上の外側からスタート */
  z-index: 11000;                     /* 他UIより前に出す */
  pointer-events: none;
  opacity: 0;
  transition:
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.4s ease;
}

.shuffleToast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);      /* ← 画面内にスッと降りてくる */
}


.shuffleToast__inner {
  min-width: 260px;
  max-width: calc(100% - 32px);
  margin: 0 auto;
  padding: 10px 16px;
  border-radius: 999px;
  background: linear-gradient(90deg, #727C7F 4.12%, #0E1015 74.01%, #727C7F 101.03%), #FFF;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FCFAF8;
  font-size: 13px;
}

.shuffleToast__thumb {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
  background: #15151a;
}

.shuffleToast__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shuffleToast__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.shuffleToast__label {
  font-size: 11px;
  letter-spacing: 0.08em;
  opacity: 0.7;
}

.shuffleToast__title {
  font-size: 14px;
  font-weight: 500;
  margin: 0;
}

.shuffleToast__meta {
  font-size: 11px;
  opacity: 0.75;
  margin: 0;
}

/* サムネを overlay のベースにする */
.sheetItem__thumb {
  position: relative;
  overflow: hidden;
}

/* 黒30%オーバーレイ（デフォルトは非表示） */
.sheetItem__thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

/* wav.gif（デフォルト非表示） */
.sheetItem__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/common/wav.gif");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* ★ 現在のページ（＝再生中）だけ overlay ＋ wav を表示 */
.sheetItem--active .sheetItem__thumb::before,
.sheetItem--active .sheetItem__thumb::after {
  opacity: 1;
}