/* 元データのremをリニューアルに合わせて変更 */
h1 {
  margin-bottom: 3.2rem;
}

.hero_1_p_text {
  font-size: 1.52rem;
  margin-bottom: 3.2rem;
}

.hero_1_P_btn {
  font-size: 1.44rem;
}

.color_name {
  margin-top: 0.8rem;
}

.hero_4_p {
  font-size: 1.6rem;
}

.color_dots {
  margin-top: 1.6rem;
  gap: 1.6rem;
}

@media screen and (max-width: 768px) {
  h1 {
    margin-bottom: 2.4rem;
  }

  .hero_1_img {
    margin: 0 auto 3.2rem;
  }

  .hero_1_p_text {
    font-size: 1.52rem;
    margin-bottom: 2.4rem;
  }

  .hero_1_P_btn {
    font-size: 1.44rem;
    margin: 1.6rem 0;
  }

  .hero_2_p {
    font-size: 1.52rem;
  }

  .hero_2 img {
    margin: 0 auto 3.2rem;
  }

  .hero_4_p {
    margin-top: 3.2rem;
    font-size: 1.52rem;
  }

  @media (min-width: 769px) {
    .header .mv {
      grid-template-columns: minmax(35.2rem, 1fr);
    }
  }
}

@media (min-width: 769px) and (max-width: 1023px) {
  .header .mv {
    grid-template-columns: minmax(35.2rem, 50%) 1fr;
  }
}

@media (max-width: 768px) {
  .hero_2 img {
    margin: 0 auto 2.4rem;
  }
}

/* rem調整 */

.l-body__container > header {
  margin-top: 13rem;
}
@media screen and (max-width: 1023px) {
  .l-body__container > header {
    margin-top: 4rem;
  }
}