/* hero */
@media (min-width: 768px) {
  .hero-section > .container {
    grid-template-areas:
      "heading images"
      "points images"
      "present images";
    grid-template-rows: 1fr auto auto;
    padding-top: min(55px, 4.55vw);
  }
}
.hero-section .hero-title {
  margin-top: 0;
}
@media (min-width: 768px) {
  .hero-section .hero-images::before {
    --hero-images-bottom: min(3.31vw, 40px);
    --hero-images-height: min(41.74vw, 505px);
  }
}
@media (min-width: 768px) {
  .point-lists {
    margin-top: min(40px, 3.31vw);
  }
}
@media (min-width: 768px) {
  .point-lists > li {
    --point-lists-min-height: min(140px, 11.57vw);

    padding-inline: min(var(--space-15), 1.05vw);
  }
}
@media (max-width: 767px) {
  .point-lists > li {
    padding-inline: 45px 15px;
  }
}

/* present-area */
.present-area {
  --present-area-border-width: 3px;
  --present-area-display: flex;

  display: var(--present-area-display);
  align-items: center;
  border-radius: var(--radius-8);
  border: var(--present-area-border-width) solid var(--color-category-primary);
  position: relative;
  background-color: var(--color-white);
  margin-top: min(2.07vw, 25px);
}
@media (max-width: 767px) {
  .present-area {
    --present-area-border-width: 2px;
    --present-area-display: block;
  }
}
.present-area > .title {
  --present-area-title-font-size: min(1.49vw, var(--font-size-18));
  --present-area-title-border-radius: calc(var(--radius-8) - 3px);
  --present-area-title-border-left-radius: var(--present-area-title-border-radius);

  color: var(--color-white);
  font-size: var(--present-area-title-font-size);
  text-align: center;
  font-weight: 700;
  height: 100%;
  background-color: var(--color-category-secondary);
  padding-inline: min(1.65vw, 20px);
  padding-block: min(1.65vw, 20px);
  flex-shrink: 0;
  border-top-left-radius: var(--present-area-title-border-radius);
  border-bottom-left-radius: var(--present-area-title-border-left-radius);
}
@media (max-width: 767px) {
  .present-area > .title {
    --present-area-title-font-size: var(--font-size-14);
    --present-area-title-border-left-radius: 0;

    border-top-right-radius: var(--present-area-title-border-radius);
  }
}
.present-area > .text {
  --present-area-text-font-size: min(1.49vw, var(--font-size-18));
  font-size: var(--present-area-text-font-size);
  font-weight: 700;
  padding-inline: min(1.6vw, 20px) min(8.9vw, 119px);
  line-height: 1.75;
}
@media (max-width: 767px) {
  .present-area > .text {
    --present-area-text-font-size: var(--font-size-12);
    padding: 8px 20px;
  }
}
.present-area > .text > .small {
  --present-area-small-font-size: min(1.32vw, var(--font-size-16));
  font-size: var(--present-area-small-font-size);
}
@media (max-width: 767px) {
  .present-area > .text > .small {
    --present-area-small-font-size: var(--font-size-12);
  }
}
.present-area > img {
  --present-area-image-top: max(-1.24vw, -15px);
  --present-area-image-right: min(2.07vw, 25px);
  --present-area-image-width: min(5.54vw, 67px);

  position: absolute;
  top: var(--present-area-image-top);
  right: var(--present-area-image-right);
  transform: rotate(7deg);
  width: var(--present-area-image-width);
  height: auto;
}
@media (max-width: 767px) {
  .present-area > img {
    --present-area-image-top: 10px;
    --present-area-image-right: 15px;
    --present-area-image-width: 47px;
  }
}

/* lead-section */
@media (max-width: 767px) {
  .lead-section .title {
    font-size: var(--font-size-22);
  }
}

/* book-introduction */
@media (max-width: 767px) {
  .book-introduction p {
    font-size: var(--font-size-14);
  }
}