#purpose {
  margin: 5vw auto;
}
#purpose ul {
  justify-content: space-between;
}
.no1,
.no2,
.no3 {
  background-position: left top;
  background-size: 20%;
  background-repeat: no-repeat;
  border: 3px solid #000;
  border-radius: 1.5vw;
  filter: drop-shadow(3px 3px 3px #555);
  background-color: #fff;
  text-align: center;
  width: 31%;
  height: 25vw;
  padding: 1vw;
}
.no1 {
  background-image: url(./no1.webp);
}
.no2 {
  background-image: url(./no2.webp);
}
.no3 {
  background-image: url(./no3.webp);
}

.no1_img {
  width: 30%;
  margin: 2.2vw auto 1.3vw auto;
  height: auto;
}

#purpose p {
  font-size: 1.4vw;
  margin-top: 1vw;
  font-weight: 500;
  letter-spacing: 0.1vw;
}

.target {
  width: 100%;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.target::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 20%;
}

.no1 .target::after {
  border-bottom: 1px solid #00a33e;
}
.no2 .target::after {
  border-bottom: 1px solid #e94709;
}
.no3 .target::after {
  border-bottom: 1px solid #ffd900;
}
/* Mobile View */
@media screen and (max-width: 768px) and (min-width: 480px) {
  .target {
    font-size: 3vw;
  }
  .no1,
  .no2,
  .no3 {
    height: 40vw;
    padding: 2vw;
  }
  #purpose p {
    font-size: 2vw;
    text-align: left;
  }
} /*END*/
/* モバイル用の調整（より厳密に制御したい場合） */
@media (max-width: 480px) {
  .no1,
  .no2,
  .no3 {
    width: 100%;
    height: auto;
    margin-bottom: 5vw;
    padding: 8vw;
    border: 1px solid #000;
  }
  .no1_img {
    width: 20vw;
    height: 18vw;
  }
  .no1 h2,
  .no2 h2,
  .no3 h2 {
    font-size: 6vw;
    line-height: 140%;
  }

  #purpose p {
    font-size: 4vw;
    text-align: left;
    letter-spacing: -0.1vw;
  }
} /*END*/