.sp-2 {
  width: 35%;
  left: 25%;
  top: 17%;
}
.sp-2 > img {
  left: 0;
  top: 12%;
}

.pointer-1 {
  left: 50%;
}

.pointer-2 {
  left: 55%;
  top: 25%;
}

.pointer-3,
.pointer-4 {
  left: 55%;
  top: 30%;
}

.letter {
  height: 80%;
}

.noticefrom,
.noticedate,
.noticesubject,
.noticedscp,
.noticepub {
  position: absolute;
  font-size: 2vw;
  background-color: #fff;
  color: #595959;
  padding: 2%;
  border-radius: 0.5em;
}

.noticefrom,
.noticedate,
.noticepub {
  left: 78%;
}

.noticefrom {
  top: 15%;
}

.noticedate {
  top: 29%;
}

.noticepub {
  top: 76%;
  width: 17%;
}

.noticesubject,
.noticedscp {
  left: 3%;
  width: 20%;
}

.noticesubject {
  top: 35%;
}

.noticedscp {
  top: 50%;
}

.noticefrom::before,
.noticefrom::after,
.noticedate::before,
.noticedate::after,
.noticesubject::before,
.noticesubject::after,
.noticedscp::before,
.noticedscp::after,
.noticepub::before,
.noticepub::after {
  content: '';
  position: absolute;
  top: 50%;
}

.noticefrom::before,
.noticedate::before,
.noticesubject::before,
.noticedscp::before,
.noticepub::before {
  --dash-line-width: 110%;
  width: var(--dash-line-width);
  left: calc(-1 * var(--dash-line-width));
  border-top: var(--highlight-border-width) solid var(--highlight-border-color);
}

.noticesubject::before,
.noticedscp::before {
  --dash-line-width: 40%;
  left: unset;
  right: calc(-1 * var(--dash-line-width));
}

.noticefrom::after,
.noticedate::after,
.noticesubject::after,
.noticedscp::after,
.noticepub::after {
  border: var(--highlight-border-width) solid var(--highlight-border-color);
}

.noticefrom::after {
  width: 120%;
  height: 110%;
  top: 15%;
  left: -230%;
}

.noticedate::before {
  --dash-line-width: 40%;
}

.noticedate::after {
  width: 110%;
  height: 60%;
  left: -150%;
  top: 20%;
}

.noticepub::before {
  --dash-line-width: 40%;
}

.noticepub::after {
  width: 90%;
  height: 110%;
  left: -130%;
  top: 0;
}

.noticesubject::after {
  width: 150%;
  height: 50%;
  right: -190%;
  top: 38%;
}

.noticedscp::after {
  width: 201%;
  height: 18vw;
  right: -241%;
  top: -25%;
}

.item > p {
  height: 20%;
}

.img-container {
  height: 80%;
}

.img2.img-big {
  height: 55%;
}
.img1.img-sm {
  height: 65%;
}
.img3.img-big {
  height: 70%;
}
.img2.img-lg {
  height: 75%;
}

@media (min-aspect-ratio: 4/3) {
  .noticefrom,
  .noticedate,
  .noticesubject,
  .noticedscp,
  .noticepub {
    font-size: 2.5vh;
  }

  .noticefrom {
    width: 15.5%;
  }
  .noticedscp::after {
    height: 27vh;
    top: -3.5vh;
  }
}

@media screen and (min-width: 1280px) and (max-width: 1440px) {
  .noticedscp::after {
    height: 25.5vh;
  }
}