#contents {
  z-index: 0;
  font-size: 16px;
}
.page-txt {
  margin: 30px 0 0;
  height: 2000px;
}
#modal-open {
  color: #cc0000;
}
/* ƒ‚[ƒ_ƒ‹ ƒRƒ“ƒeƒ“ƒcƒGƒŠƒA */
:root {
  --bgm-dark: rgba(0,0,0,0.7);
  --bgm-button-text: #fff;
  --bgm-button-back: #fff;
  --bgm-on: var(--color-base_solid_paint);
  --bgm-off: #d03f54;
  
}
#bgmalert-main,
#bgmalert-main * ,
#bgmalert-main *::before {
  transition: .2s all ease;
  box-sizing: content-box;
}
#bgmalert-main {
	display: none;
	margin: 0;
	position:fixed;
	z-index: 2;
	padding: 20px 30px;
	background-color: var(--bgm-dark);
	border-radius: 5px;
	color: var(--bgm-button-text);
	box-shadow: 0px 0px 20px rgb(255 255 255 / 30%);
	text-align: center;
}
#bgmalert-main::before {
  content: "";
  background-color: var(--bgm-dark);
  background-repeat: no-repeat;
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xe2ZpbGw6I2ZmZjt9LmNscy0ye2ZpbGw6bm9uZTt9PC9zdHlsZT48L2RlZnM+PGc+PGcgaWQ9IkMiPjxwYXRoIGNsYXNzPSJjbHMtMSIgZD0iTTU3LjQ0MywyNi44ODY5YTcuNSw3LjUsMCwxLDAtMTQuODg2LDBsMi45NDU2LDM0LjA4NzJjMCwuMDA4OS0uMDAyNi4wMTctLjAwMjYuMDI1OWE0LjUsNC41LDAsMCwwLDksMGMwLS4wMDg5LS4wMDI2LS4wMTctLjAwMjYtLjAyNTlaIi8+PHJlY3QgY2xhc3M9ImNscy0yIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxjaXJjbGUgY2xhc3M9ImNscy0xIiBjeD0iNTAiIGN5PSI3NS41IiByPSI2Ii8+PC9nPjwvZz48L3N2Zz4=');
  width: 3em;
  height: 3em;
  position: absolute;
  top: -55px;
  left: calc(50% - 1.5em);
  display: inline-flex;
  border-radius: 1.5em;
  box-shadow: 0px 0px 10px rgb(255 255 255 / 30%);
}
#bgmalert-main .bgmtext {}
#bgmalert-main .bgmtext::before {
  content: "";
  display: inline-block;
  width: 1em;
  height: 1.2em;
  margin-right: 0.5em;
  vertical-align: middle;
  vertical-align: bottom;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxODYuMTIxOSAxOTMuOTMyMyI+PGRlZnM+PHN0eWxlPi5lNjNlNjJkNS0xY2Y2LTQxMDQtOTZmMC03ZGVlNDEyYjE2NWJ7ZmlsbDojZmZmZmZmO308L3N0eWxlPjwvZGVmcz48ZyBpZD0iYjlmZGQyYjctMmQ4Yi00NjczLWJmYTMtZDE1ODU4ZGI4MjliIj48ZyBpZD0iYTcxN2RjMjUtM2ZjNi00ZGNhLWI5MDItOWY1Y2ExNTk0N2JjIj48cGF0aCBjbGFzcz0iZTYzZTYyZDUtMWNmNi00MTA0LTk2ZjAtN2RlZTQxMmIxNjViIiBkPSJNMTg2LjEsMTI3Ljg1NDZoMFYwTDE3MS4yNjM5LDIuMjcwNmgwTDU5LjcxNzIsMTkuMzQxOFYxMjIuNjUxMmMtMTMuMjgxNi02Ljg1MjgtMzIuMTM2NS0yLjg4NTUtNDUuNzIxOSwxMC43LTE2LjA4LDE2LjA4LTE4LjY4NzUsMzkuNTQ0OC01LjgyMzIsNTIuNDA5MXMzNi4zMjg2LDEwLjI1NzIsNTIuNDA5MS01LjgyMzJjOS41NjMtOS41NjMsMTQuMzYtMjEuNzM3MiwxMy45NzIzLTMyLjc0MDZoMFYzMi4wOGw5Ni43MS0xNC44MDA2djg2LjAzYy0xMy4yODE2LTYuODUyOC0zMi4xMzY1LTIuODg1NC00NS43MjE5LDEwLjctMTYuMDgsMTYuMDgtMTguNjg3NiwzOS41NDQ4LTUuODIzMiw1Mi40MDkxczM2LjMyODcsMTAuMjU3MSw1Mi40MDkxLTUuODIzMkMxODEuNjkwOSwxNTEuMDMyMiwxODYuNDg3NiwxMzguODU4LDE4Ni4xLDEyNy44NTQ2WiIvPjwvZz48L2c+PC9zdmc+');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#bgmalert-main button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 150%;
  margin-top: 20px;
  border: 3px solid rgba(0,0,0,0.6);
  width: 100px;
  height: 100px;
  border-radius: 5px;
  font-weight: 700;
  position: relative;
  cursor: pointer;
  color: var(--bgm-button-text);
  overflow: hidden;
  padding: 0;
  border-radius: 53px;
}
#bgmalert-main button:active {
  transform: scale(0.95);
  transition: none;
}
#bgmalert-main button:hover {
  border-color: var(--bgm-button-back);
}
#bgmalert-main button.bgmon {
  margin-right: 20px;
  background-color: var(--bgm-on);
}
#bgmalert-main button.bgmoff {
  background-color: var(--bgm-off);
}
#bgmalert-main button::before {
  content: "";
  display: flex;
  width: 100px;
  height: 100px;
  background-repeat: no-repeat;
  justify-content: center;
  align-items: center;
  background-position: center center;
  background-size: 70px;
  opacity: 0;
  position: absolute;
  top: -100%;
}
#bgmalert-main button.bgmon::before {
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMXtzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbWl0ZXJsaW1pdDoxMDtzdHJva2Utd2lkdGg6MTBweDtmaWxsLXJ1bGU6ZXZlbm9kZDt9PC9zdHlsZT48L2RlZnM+PGc+PGcgaWQ9IkMiPjxwb2x5bGluZSBjbGFzcz0iY2xzLTEiIHBvaW50cz0iODEuNTYyIDI5LjY3MiA0Mi42NzIgNjguNTYyIDIwLjA1NSA0NS45NDUiLz48cmVjdCBjbGFzcz0iY2xzLTIiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIi8+PC9nPjwvZz48L3N2Zz4=');
}
#bgmalert-main button.bgmoff::before {
  background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIj48ZGVmcz48c3R5bGU+LmNscy0xLC5jbHMtMntmaWxsOm5vbmU7fS5jbHMtMntzdHJva2U6I2ZmZjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLXdpZHRoOjEwcHg7fTwvc3R5bGU+PC9kZWZzPjxnIGRhdGEtbmFtZT0iIj48ZyBpZD0iQyI+PHJlY3QgY2xhc3M9ImNscy0xIiB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIvPjxsaW5lIGNsYXNzPSJjbHMtMiIgeDE9IjI2IiB5MT0iNzQiIHgyPSI3NCIgeTI9IjI2Ii8+PGxpbmUgY2xhc3M9ImNscy0yIiB4MT0iMjYiIHkxPSIyNiIgeDI9Ijc0IiB5Mj0iNzQiLz48L2c+PC9nPjwvc3ZnPg==');
}
#bgmalert-main button:hover::before {
  top: 0;
  opacity: 1;
}
#bgmalert-main button span {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  position: absolute;
}
#bgmalert-main button:hover span {
  top: 100%;
}

/* ƒ‚[ƒ_ƒ‹ ”wŒiƒGƒŠƒA */
#bgmalert-bg {
	display:none;
	width:100%;
	height:100%;
	background-color: rgba(0,0,0,0.5);
	position:fixed;
	top:0;
	left:0;
	z-index: 1;
}

#bgmarea {
	position: absolute;
	left: 10px;
	bottom: 10px;
	border-radius: 30px;
	vertical-align:middle;
  overflow: hidden;
  color: #fff;
}

#bgmarea:hover{
  opacity: 0.5;
}
#bgmaudio{
    opacity: 0.8;
}
#bgmarea .bgmonoff{
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 13px;
	font-weight: 700;
	background-color: rgba(0,0,0,0.5);
}


#bgmarea img {
  width: 1.5em;
  height: 1.5em;
  display: inline-block;
  /* margin-right: 0.5em; */
}