/* 背景レイヤー */
.op__bg {
  position: fixed;
  inset: 0;
  background: #000;
  transition: background-color 2000ms ease;
  z-index: 0;
}

/* 前景レイヤー */
.op__fg {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transition: opacity 1500ms ease;
}

.op__fg.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* テキスト */
.op__text {
  line-height: 1.6;
  letter-spacing: .02em;
  opacity: 0;
  transition: opacity 1500ms ease;
  will-change: opacity, transform;
  white-space: nowrap;
  word-break: keep-all;
  overflow: hidden;
  font-size: clamp(20px, 3.5vw, 56px);
  display: inline-block;
  transform-origin: center center;
  text-align: center;
  color: #fff;
  font-family: 'Noto Serif JP', serif;
}

.op__text.is-visible { opacity: 1; }

.s40 { font-size: clamp(28px, 5.5vw, 96px); }
.s46 { font-size: clamp(32px, 6.2vw, 110px); }
.s80 { font-size: clamp(40px, 10vw, 180px); }

/* ボタン全体 */
.op__buttons {
  position: fixed;
  bottom: 35px;
  left: 50%; /* 中央に配置 */
  transform: translateX(-50%); /* 中央揃え */
  display: flex;
  gap: 12px;
  z-index: 20;
}

.op__buttons button {
  border: none;
  cursor: pointer;
  font-family: sans-serif;
}

/* SKIPボタン */
#opSkip {
  padding: 6px 20px;
  font-size: 14px;
  border-radius: 9999px;
  color: #fff;
  background: #B90606;
  z-index: 100; /* 他の要素の上に表示されるように */
}

/* 音声関連のボタンやスタイルは削除 */
.sound-btn {
  display: none; /* 音声ボタンは表示しない */
}

.sound-btn img {
  display: none; /* 音声ボタン画像を非表示 */
}

@media (max-width: 640px){
  #opSkip {
    padding: 4px 15px;
    font-size: 14px;
  }
}