/** @format */

@charset "UTF-8";

img {
  max-width: 100%;
}
.pc {
  display: block;
}
.sp {
  display: none;
}
.top_wrapper img {
  width: 100%;
}
.top_wrapper {
  position: relative;
  height: auto;
  padding-bottom: calc(100% * 650 / 1000);
  background: url(../images/bg_maintitle_pc.webp);
  background-size: contain;
  background-position: top 0 right 5vw;
  background-repeat: no-repeat;

  max-width: 1000px;
  max-height: 800px;
  margin: 0 auto;
}
.top_read {
  position: absolute;
  width: 5.45%;
  top: 1%;
  right: 3%;
}
.top_read2 {
  position: absolute;
  width: 23%;
  top: 2%;
  left: 1.5%;
}
.top_read3 {
  position: absolute;
  width: 6%;
  top: 2%;
  left: 26%;
}

.top_ttl {
  position: absolute;
  width: 42%;
  /* width: calc(100vw / 1000px); */
  top: 44%;
  /* bottom: 56vh; */
  left: 1%;
}

.top_author {
  position: absolute;
  width: 32%;
  top: 68%;
  /* bottom: 42vh; */
  left: 1%;
}

/*******************************************************/
/*******************************************************/
/*******************************************************/
/*******************************************************/
/*******************************************************/
/********************************tablet*********************/

@media (max-width: 1024px) {
  .top_wrapper {
    position: relative;
    height: auto;
    padding-bottom: calc(100% * 650 / 900);
    background: url(../images/bg_maintitle_pc.webp);
    background-size: contain;
    background-position: top 0 right 5vw;
    background-repeat: no-repeat;

    max-width: 900px;
    max-height: 700px;
    margin: 0 auto;
  }
  .top_read {
    position: absolute;
    width: 5.45%;
    top: 1%;
    right: 3%;
  }
  .top_read2 {
    position: absolute;
    width: 22%;
    top: 2%;
    left: 1.5%;
  }
  .top_read3 {
    position: absolute;
    width: 5%;
    top: 2%;
    left: 24%;
  }

  .top_ttl {
    position: absolute;
    width: 45%;
    /* width: calc(100vw / 1000px); */
    top: 42%;
    /* bottom: 56vh; */
    left: 1%;
  }

  .top_author {
    position: absolute;
    width: 32%;
    top: 68%;
    /* bottom: 42vh; */
    left: 1%;
  }
}

/*******************************************************/
/*******************************************************/
/*******************************************************/
/*******************************************************/
/*******************************************************/
/********************************SP*********************/

@media (max-width: 750px) {
  .pc {
    display: none;
  }
  .sp {
    display: block;
  }

  .top_wrapper {
    position: relative;
    height: auto;
    padding-bottom: calc(100% * 1230 / 750);
    background: url(../images/bg_maintitle.webp) no-repeat;
    background-size: 145%;
    background-position: top 0 right -22vw;
  }
  .top_read {
    position: absolute;
    width: 10.6%;
    top: 1%;
    right: -0.3%;
  }
  .top_read2 {
    position: absolute;
    width: 30%;
    top: 0%;
    left: -1%;
  }
  .top_read3 {
    position: absolute;
    width: 12%;
    top: 2%;
    left: 76%;
  }

  .top_ttl {
    position: absolute;
    width: 77%;
    top: 56%;
    left: 2%;
  }

  .top_author {
    position: absolute;
    width: 62%;
    top: 77%;
    left: 2%;
  }
}