/* vol */
:root {
  --volume-theme: #f1668d;
}

.txt-vol {
  color: var(--volume-theme);
}

.bg-vol {
  background-color: var(--volume-theme);
}

.bg-gray {
  background-color: #f2f2f2;
}

/* mainpage */
/* obj */
.obj01 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-30%);
}

.obj02 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-30%);
}

.obj03 {
  position: absolute;
  top: 0;
  right: -50px;
  transform: translateY(-80%);
}

.obj04 {
  position: absolute;
  top: 0;
  right: -50px;
  transform: translateY(-70%);
  z-index: 1;
}

.obj01 img,
.obj02 img,
.obj03 img,
.obj04 img {
  animation: shake 3s linear infinite alternate;
}

@media screen and (max-width: 1440px) {
  .obj01 {width: 170px;}
  .obj02 {width: 170px;}
  .obj03 {width: 250px;}
  .obj04 {width: 170px;}
}

@media screen and (max-width: 1024px) {
  .obj01 {width: 170px;}
  .obj02 {width: 170px;}
  .obj03 {display: none;}
  .obj04 {width: 170px;}
}

@media screen and (max-width: 768px) {
  .obj01 {width: 120px;}
  .obj02 {width: 100px;}
  .obj04 {width: 100px;}
}

/* section00 */
.sec00 .intro {
  max-width: 550px;
  word-break: keep-all;
  text-wrap: balance;
}

@media screen and (max-width: 1024px) {
  .sec00 .intro {
    max-width: none;
  }
}

.heart_mark button {
  width: 100%;
  height: 100%;
  cursor: pointer;
  z-index: 1;
}

.heart_mark img {
  width: 100%;
  transition: opacity 1s;
  opacity: 0;
}

.heart_mark.on img {
  opacity: 1;
}

.heart_mark:nth-of-type(1) {
  width: 10%;
  top: auto;
  left: 2%;
  bottom: 41%;
  /* border: 1px solid red; */
}

.heart_mark:nth-of-type(2) {
  width: 10%;
  top: auto;
  left: 27%;
  bottom: 7%;
  /* border: 1px solid blue; */
}

.heart_mark:nth-of-type(3) {
  width: 11%;
  top: 71%;
  left: 85%;
  /* border: 1px solid yellow; */
}

.heart_mark:nth-of-type(4) {
  width: 10%;
  top: 31%;
  left: 59%;
  /* border: 1px solid green; */
}

.heart_mark:nth-of-type(5) {
  width: 9%;
  top: 54%;
  left: 34%;
  /* border: 1px solid pink; */
}

.msg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  z-index: 5;
}

.msg img {
  width: 50%;
  max-width: 360px;
}

.game_frame {
  max-width: 100%;
  margin-inline: auto;
}

.game_frame>img {
  width: 100%;
}

header.on .wrap {
  padding-right: var(--scrollbar-width, 0);
}

/* popup */
.popup {
  accent-color: #000;
  width: 100%;
  height: 100%;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  z-index: 110;
}

.popup * {
  color: #fff;
}

.popup img {
  max-width: 100%;
}

.popup.on {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow-y: auto;
}

.popup .banner_wrap {
  width: 600px;
  max-width: 90%;
  height: max-content;
}

.popup .banner_wrap.event {
  width: 960px;
}

.popup .check_wrap {
  margin-top: 5px;
  font-size: 16px;
}

.popup .check_wrap,
.popup .close_btn {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 10px;
  color: #fff;
}

.popup .close_btn {
  margin-bottom: 1em;
}

.popup .close_btn i {
  font-size: 40px;
}

.popup .check_wrap * {
  cursor: pointer;
  line-height: 1;
}

.popup input[type="checkbox"] {
  width: 1em;
  height: 1em;
  padding-inline: 0;
  cursor: pointer;
  border: 1px solid var(--text-base);
}

@media (max-width: 1200px) and (orientation: landscape) {
	.popup.on {
    padding-block: 30px;
    align-items: start;
  }
}