@charset "utf-8";

/* .contents {
  background: url(../ch31/img/bg.jpg) no-repeat center top;
  background-size: 100% auto;
  height: calc(2160px / 2);
} */
.chara_name {
  margin-top: calc(108 / 1920 * 100vw);
}

.chara_pic1 {
  position: absolute;
  width: calc(349 / 1920 * 100vw);
  top: calc(501 / 1920 * 100vw);
  left: calc(362 / 1920 * 100vw);
}

.chara_pic2 {
  position: absolute;
  width: calc(298.5 / 1920 * 100vw);
  top: calc(-110 / 1920 * 100vw);
  right: calc(36.5 / 1920 * 100vw);
}

@media screen and (min-width: 0px) and (max-width: 800px) {
  .modal {
    /* background: url(../ch31/img/bg.jpg) no-repeat center top;
    background-size: 100% auto; */
    margin-top: 0;
  }
  .chara_info_in {
    width: 100%;
    padding: 0;
  }

  .chara_name {
    position: relative;
    top: 0 !important;
    left: calc(50 / 640 * 100vw);
    margin-top: calc(27 / 640 * 100vw);
  }

  .chara_txt {
    position: relative;
    top: auto !important;
    bottom: 0 !important;
    width: 92%;
    left: calc(50 / 640 * 100vw);
    padding-top: calc(11 / 640 * 100vw);
  }

  .chara_pic1 {
    position: relative;
    width: calc(406.5 / 640 * 100vw);
    top: auto;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: calc(40 / 640 * 100vw);
  }

  .chara_pic2 {
    position: relative;
    width: calc(254.5 / 640 * 100vw);
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding-top: calc(11 / 640 * 100vw);
  }

  .ch_all_btn {
    z-index: 1;
  }
}