@charset "UTF-8";

.soundBtn , .soundBtn2 {
  width: 295px;
	height: 40px;
	margin: 0 auto 0;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	cursor: pointer;
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 8888;
}

.soundBtn {
  background: url(../../img/common/pc/sound01_on.svg) no-repeat;
	background-size: contain;
}
.soundBtn2 {
  background: url(../../img/common/pc/sound02_on.svg) no-repeat;
	background-size: contain;
}

.soundBtn.clicked {
  background: url(../../img/common/pc/sound01_off.svg) no-repeat;
  background-size: contain;
}
.soundBtn2.clicked {
  background: url(../../img/common/pc/sound02_off.svg) no-repeat;
  background-size: contain;
}

/* Responsive Note PC Only */
@media screen and (max-width: 1477px) and (min-width: 751px) {
  .soundBtn , .soundBtn2 {
    width: 285px;
  }
}

@media screen and (max-width: 750px) {
	.soundBtn , .soundBtn2  {
		margin: 0 0 0;
		width: 20%;
		height: 10%;
		background: url(../../img/common/sp/sound_on.svg) no-repeat;
		background-size: 100%;
		position: absolute;
		top: 20px;
		right: 2.5%;
	}
	.soundBtn.clicked , .soundBtn2.clicked {
		background: url(../../img/common/sp/sound_off.svg) no-repeat;
		background-size: 100%;
	}


}

.modal_off {
  display: none;
  -webkit-transition-duration: 0.4s !important;
  transition-duration: 0.4s !important;
}

.modal_on {
  display: block;
  -webkit-transition-duration: 0.4s !important;
  transition-duration: 0.4s !important;
}

.youtube {
  width: 300px;
  margin: 30px auto;
}

.youtube img {
  width: 100%;
}

#modal-content {
	width: 80%;
	max-width: 1000px;
	margin: 0;
	padding: 0;
	background: transparent;
	position: fixed;
  z-index: 99999;
  display: none;
}

#modal-content .inner {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

#modal-content .close {
  width: 40px;
  height: 40px;
  position: absolute;
  top: -44px;
  right: 0;
  cursor: pointer;
}

#modal-content .close::before, #modal-content .close::after {
  width: 40px;
  height: 2px;
  background: #fff;
  position: absolute;
  z-index: 20;
  top: 19px;
}

#modal-content .close::before {
  content: "";
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#modal-content .close::after {
  content: "";
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#modal-content .inner #player {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

#modal-overlay {
  z-index: 20000;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}