@media (width < 720px) {
  body#hyperfit24 .mv__pagetitle .en {
    font-size: 3.8rem;
    line-height: 105.2632%;
  }
}
@media (720px <= width) {
  body#hyperfit24 .mv__pagetitle .en {
    line-height: 1;
  }
}

.lead {
  margin-top: -5rem;
  position: relative;
  z-index: 2;
  text-align: center;
}
.lead img {
  width: 100%;
}
@media (720px <= width) {
  .lead {
    margin-top: 10.7rem;
    position: relative;
  }
  .lead img {
    max-width: 192rem;
  }
}

.point {
  background: url(../images/hyperfit24/point_bg_sp.webp) center top/100% auto no-repeat;
  margin-top: calc(-60 / var(--spSize) * 100vw);
  padding-top: 14rem;
  padding-left: 2rem;
  padding-right: 2rem;
  padding-bottom: 12rem;
  position: relative;
}
@media (720px <= width) {
  .point {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}
@media (1024px <= width) {
  .point {
    background: url(../images/hyperfit24/point_bg.webp) center top no-repeat;
    background-image: -webkit-image-set(url(../images/hyperfit24/point_bg.webp) 1x, url(../images/hyperfit24/point_bg@2x.webp) 2x);
    background-image: image-set(url(../images/hyperfit24/point_bg.webp) 1x, url(../images/hyperfit24/point_bg@2x.webp) 2x);
    margin-top: -28rem;
    padding-top: 34.6rem;
    padding-left: max(50% - 75rem, 10rem);
    padding-right: max(50% - 75rem, 10rem);
    padding-bottom: 35.3rem;
  }
}
.point::after {
  content: "";
  width: 100%;
  aspect-ratio: 375/64;
  background-color: #fff;
  position: absolute;
  bottom: -2px;
  left: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 calc(100% - 4px));
}
@media (1024px <= width) {
  .point::after {
    aspect-ratio: 1920/275;
  }
}
.point__title .logo {
  width: 16.5rem;
  margin: 0 auto;
}
@media (720px <= width) {
  .point__title .logo {
    width: 40.1rem;
  }
}
.point__title .lbl {
  text-align: center;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  margin-top: 1rem;
}
.point__title .lbl::first-letter {
  font-size: 4.2rem;
  font-weight: 800;
  color: var(--clr-yellow);
}
@media (720px <= width) {
  .point__title .lbl {
    font-size: 6.8rem;
    margin-top: 2rem;
  }
  .point__title .lbl::first-letter {
    font-size: 9.4rem;
  }
}
.point__items {
  display: grid;
  gap: 6rem;
  margin-top: 4rem;
}
@media (720px <= width) {
  .point__items {
    margin-top: 10rem;
  }
}
@media (1024px <= width) {
  .point__items .item {
    display: grid;
    gap: 8.6666666667%;
    align-items: center;
  }
  .point__items .item:nth-child(odd) {
    grid-template-columns: 50% 41.3333333333%;
  }
  .point__items .item:nth-child(odd) .item__img {
    order: 2;
  }
  .point__items .item:nth-child(even) {
    grid-template-columns: 41.3333333333% 50%;
  }
}
.point__items .item__img img {
  width: 100%;
}
.point__items .item__textbox {
  margin-top: 4rem;
}
.point__items .item__header {
  display: grid;
  grid-template-columns: 4.5rem auto;
  gap: 1.8rem;
  align-items: center;
}
@media (720px <= width) {
  .point__items .item__header {
    grid-template-columns: 9.6rem auto;
    gap: 3.5rem;
  }
}
.point__items .item__header .lbl {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 145.4545%;
  color: #fff;
  display: grid;
  gap: 0.5rem;
}
.point__items .item__header .lbl .frame {
  display: contents;
}
@media (720px <= width) {
  .point__items .item__header .lbl .frame {
    display: block;
  }
  .point__items .item__header .lbl .frame div {
    display: contents;
  }
}
.point__items .item__header .lbl div {
  background: linear-gradient(90deg, #0091a1 0%, #003853 100%);
  justify-self: start;
  padding: 0.5rem;
  line-height: 2.2rem;
}
@media (720px <= width) {
  .point__items .item__header .lbl div {
    font-size: 4rem;
    line-height: 1;
    padding: 1rem;
  }
}
.point__items .item__body {
  margin-top: 2rem;
  font-size: 1.6rem;
  line-height: 175%;
  color: #fff;
}
@media (720px <= width) {
  .point__items .item__body {
    margin-top: 4rem;
    font-size: 2rem;
    line-height: 1.8;
  }
}

.features {
  padding: 6rem 2rem;
}
@media (720px <= width) {
  .features {
    padding: 5.7rem max(50% - 75rem, 6rem) 10rem;
  }
}
.features__title {
  text-align: center;
}
.features__title img {
  width: 31rem;
}
@media (720px <= width) {
  .features__title img {
    width: 70rem;
  }
}
.features__title .lbl {
  margin-top: 2rem;
  font-size: 3rem;
  font-weight: 700;
  line-height: 100%;
  color: #011d53;
}
@media (720px <= width) {
  .features__title .lbl {
    margin-top: 4rem;
    font-size: 6.8rem;
  }
}
.features__body {
  margin-top: 4rem;
  display: grid;
  gap: 3rem;
}
@media (720px <= width) {
  .features__body {
    margin-top: 8rem;
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
  }
}
.features__caution {
  margin-top: 1.5rem;
  font-size: 1.4rem;
  line-height: 120%;
}
@media (720px <= width) {
  .features__caution {
    margin-top: 3rem;
    font-size: 1.6rem;
  }
}

.lineup {
  padding: 12rem 2rem 10rem;
  background-color: var(--clr-bg);
  position: relative;
}
@media (720px <= width) {
  .lineup {
    padding: 35rem max(50% - 75rem, 6rem) 20rem;
  }
}
.lineup::before {
  content: "";
  width: 100%;
  aspect-ratio: 375/60;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
@media (720px <= width) {
  .lineup::before {
    aspect-ratio: 1920/275;
  }
}
.lineup__title {
  text-align: center;
  display: grid;
  gap: 2rem;
  align-items: center;
}
@media (720px <= width) {
  .lineup__title {
    gap: 4rem;
  }
}
.lineup__title .en {
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  color: #011d53;
}
@media (720px <= width) {
  .lineup__title .en {
    font-size: 4rem;
  }
}
.lineup__title .ja {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  color: #011d53;
}
@media (720px <= width) {
  .lineup__title .ja {
    font-size: 6.8rem;
  }
}
.lineup__body {
  margin-top: 4rem;
}
@media (720px <= width) {
  .lineup__body {
    margin-top: 8rem;
  }
}
@media (720px <= width) {
  .lineup .text {
    text-align: center;
  }
}
.lineup .text p {
  font-size: 1.6rem;
  line-height: 175%;
}
@media (720px <= width) {
  .lineup .text p {
    font-size: 2rem;
    line-height: 1.8;
  }
}
.lineup .logos {
  margin-top: 2rem;
}
@media (720px <= width) {
  .lineup .logos {
    margin-top: 4rem;
    text-align: center;
  }
}
.lineup .lineups {
  margin-top: 8rem;
  display: grid;
  gap: 5rem;
}
@media (720px <= width) {
  .lineup .lineups {
    margin-top: 10rem;
    grid-template-columns: repeat(3, 1fr);
    gap: 5rem 1.5rem;
  }
}
.lineup .lineups .item figcaption {
  margin-top: 2rem;
}
@media (720px <= width) {
  .lineup .lineups .item figcaption {
    margin-top: 3rem;
  }
}
.lineup .lineups .item .ja {
  font-size: 2rem;
  font-weight: 700;
  line-height: 160%;
}
@media (720px <= width) {
  .lineup .lineups .item .ja {
    font-size: 2.8rem;
    line-height: 1;
  }
}
.lineup .lineups .item .en {
  margin-top: 1rem;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--clr-main);
}
@media (720px <= width) {
  .lineup .lineups .item .en {
    margin-top: 1.5rem;
    font-size: 1.6rem;
  }
}