/* Top */
html {
  overflow: hidden;
}

body {
  overflow: hidden;
}

.top {
  width: 100vw;
  height: 100dvh;
  background-repeat: no-repeat;
  background-position: top;
  cursor: grab;
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  touch-action: none;
  /* 横ドラッグを自前制御 */
  backface-visibility: hidden;
  /* 合成ヒント */
  contain: paint;
  /* 再描画の影響範囲を限定 */
}

.top:active {
  cursor: grabbing;
}

/* @media screen and (max-width: 767px) {
  .top {
    background-size: auto;
  }
} */

.top::after {
  content: "";
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: inherit;
  z-index: -1;
  filter: saturate(35%) brightness(60%);
  overflow: hidden;
}

.top:hover {
  filter: saturate(400%) brightness(180%);
  transition: 4s;
  transition-delay: 5s;
  transition-property: filter;
}

#top_leftside {
  transition: 0.8s ease-in;
}

/* 変更なし */
.topimg_cap {
  line-height: 35px;
  padding: 0 20px;
  position: fixed;
  bottom: 20px;
  bottom: max(20px,
      calc(20px + env(safe-area-inset-bottom, 0px)),
      calc(20px + var(--ios-bottom-gap, 0px)));
  right: clamp(16px, 2vw, 28px);
  z-index: 9999;
  overflow: visible;
}

.topimg_cap * {
  pointer-events: auto;
}

.topimg_cap {
  bottom: calc(20px + var(--ios-bottom-gap, 0px));
}

.message {
  font-size: 13px;
  letter-spacing: 1.3px;
  font-family: Orator Std, Rufina, ヒラギノ明朝 ProN W6, HiraMinProN-W6, HG明朝E, ＭＳ Ｐ明朝, MS PMincho;
  text-shadow: 0 0 6px black;
  overflow: hidden;
  color: #fff;
}

/* この overflow:hidden がクリップするので、子は“画面内で”動かす */
.smoothText {
  overflow: hidden;
  display: block;
}

/* 右位置：clampが効かないiOSでも確実に右寄せ */
.topimg_cap {
  right: 20px;
  /* フォールバック */
}



@supports (right: clamp(16px, 2vw, 28px)) {
  .topimg_cap {
    right: clamp(16px, 2vw, 28px);
  }
}

/* iOSでのレイヤ/コンポジットの不具合対策 */
.smoothTextTrigger {
  transform: translate3d(0, 60px, 0) skewY(12deg);
  transform-origin: left;
  display: block;
  will-change: transform, opacity;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* iOSの安全領域を足す（対応端末ではこちらが有効） */
@supports (bottom: calc(20px + env(safe-area-inset-bottom))) {
  .topimg_cap {
    bottom: calc(20px + env(safe-area-inset-bottom));
  }

  /* 古いWebKit向けの互換（iOS11初期系） */
  @supports (bottom: calc(20px + constant(safe-area-inset-bottom))) {
    .topimg_cap {
      bottom: calc(20px + constant(safe-area-inset-bottom));
    }
  }
}


/* 標準＋WebKit両方のkeyframesを用意（古めのiOS保険） */
@-webkit-keyframes cap-in {
  from {
    -webkit-transform: translate3d(0, 60px, 0) skewY(12deg);
  }

  to {
    -webkit-transform: translate3d(0, 0, 0) skewY(0);
  }
}

@keyframes cap-in {
  from {
    transform: translate3d(0, 60px, 0) skewY(12deg);
  }

  to {
    transform: translate3d(0, 0, 0) skewY(0);
  }
}

/* どちらのトリガーでも再生（既存どおり） */
.topimg_cap.is-ready .smoothTextTrigger,
.smoothTextTrigger.smoothTextAppear {
  -webkit-animation: cap-in 2.8s cubic-bezier(.22, .61, .36, 1) .15s forwards;
  animation: cap-in 2.8s cubic-bezier(.22, .61, .36, 1) .15s forwards;

}

/* すでに .is-dragging を使っていれば追記するだけでOK */
.is-dragging {
  cursor: grabbing !important;
}

.is-dragging .topimg_cap,
.is-dragging .topimg_cap * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
  /* ← これがSafari系に効く */
}

/* 万が一被さり要素があっても最前面に */
.topimg_cap {
  z-index: 2147483647;
}

/* 必要なら戻してOK */
@media (prefers-reduced-motion: reduce) {
  .topimg_cap.is-ready .smoothTextTrigger {
    animation: none;
    transform: translate3d(0, 0, 0) skewY(0);
  }
}

@media screen and (max-width: 912px) {
  .gn {
    position: fixed;
    padding: 20px 0;
    left: -50%;
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.7);
    transition: 0.3s;
    z-index: 100;
  }
}

.loader_cover {
  transition: all 0.2s !important;
}