@charset "utf-8";
/* @import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap"); */
:root {
  /* 全体背景 */
  --bgColor: #2c1b1c;
  /* --overlay: rgba(44, 27, 28, 0.9); */
  --overlay: rgba(27, 11, 1, 0.9);
  /* ポップアップ背景 */
  --popupBg: #000;
  /* ポップアップ枠 */
  --popupBorder: #52322c;
  /* ポップアップ文章 */
  --popupText: #c99b7a;
  /* ボタン背景 */
  --buttonBg: rgb(43, 43, 43);
  /* ボタン内枠 */
  --buttonInner: #000;
  /* ONボタン外枠 */
  --buttonOnOuter: rgba(140, 105, 93, 0.7);
  /* OFFボタン外枠 */
  --buttonOffOuter: rgba(88, 87, 87, 0.5);
}
/* === ピクセルボタン === */
.bgm-toggle {
  position: fixed;
  right: 0px;
  bottom: 200px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 43, 43, 0.5);
  border: 4px solid var(--buttonOffOuter);
  box-shadow: 0 0 0 2px #000 inset, 2px 2px 0 #000;
  image-rendering: pixelated;
  cursor: pointer;
  transition: all 0.15s ease;
  z-index: 10;
}
.bgm-toggle.on {
  border-color: var(--buttonOnOuter);
  box-shadow: 0 0 4px #875703, 0 0 0 2px #000 inset;
}

/* === アイコン部分 === */
.icon {
  width: 1.5em;
  height: 1.5em;
  transition: color 0.3s ease;
  margin-bottom: 0.75em;
  position: relative;
}
.icon::after {
  position: absolute;
  display: block;
  content: "";
  background-color: #ff4500; /* 色を少し調整しました */
  transform: rotateZ(-45deg) scaleX(1);
  top: 0px;
  right: 0px;
  width: 30px;
  height: 2px;
  transition: transform 0.3s ease-in-out;
  transform-origin: right center; /* 変形の基点を右端中央に設定 */
}
.icon.on::after {
  /* 右上に向かって縮むようにscaleXを0にする */
  transform: rotateZ(-45deg) scaleX(0);
}

.icon img {
  width: 100%;
  height: auto;
  vertical-align: initial;
}

/* .bgm-toggle.on .icon {
  color: rgb(135, 87, 3);
} */

/* === 小さなピクセルアニメーション === */
.dot-bar {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
}

.dot {
  width: 3px;
  height: 3px;
  background: #777;
}

.dot.active {
  background: #fff;
}

audio {
  display: none;
}