/* ----------------------------------------------- */
/* front page */
main.front {
  /* padding: 10rem 8rem 2rem 0; */
}

main.front .top-cover {
  position: relative;
  /* margin-bottom: 3rem; */
  /* aspect-ratio: 1920 / 1124; */
  aspect-ratio: 1920 / 840;
  @media (width <= 1024px) {
    /* aspect-ratio: 2 / 0.9; */
  }
  @media (width <= 768px) {
    aspect-ratio: 375 / 280;
  }
}
main.front .fixed-img-wrap {
  position: fixed;
  inset: 0;
  overflow: hidden; /* はみ出しをカット */
  z-index: -1;
  /* aspect-ratio: 1920 / 1124; */
  aspect-ratio: 1920 / 840;
  @media (width <= 1024px) {
    /* aspect-ratio: 2 / 0.9; */
  }
  @media (width <= 768px) {
    aspect-ratio: 375 / 280;
  }
}
main.front .top-cover picture {
  display: block;
  width: 100%;
  height: 100%;
}
main.front .top-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* object-position: bottom center; */
  object-position: center center;
  /* position: fixed; */
  /* z-index: -1; */
  @media (width <= 768px) {
    object-position: bottom center;
  }
}

main.front h1 {
  position: absolute;
  display: inline-block;
  left: 0;
  bottom: 10%;
  /* font-size: clamp(1rem, 3.2vw ,2.4rem); */
  font-size: max(28px, 3vw);
  font-weight: 700;
  line-height: 1.5;
  color: #fff;
  background-image: linear-gradient(170deg, var(--wp--preset--color--main), var(--wp--preset--color--sub));
  padding: .125em 1.5em .125em 1em;
  border-radius: 0 9999px 9999px 0;
  /* margin-bottom: 3rem; */
  transform: translateX(-50%);
  opacity: 0;
  animation: slideIn 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  animation-delay: 0.25s;

  @media (width <= 768px) {
    max-width: 90%;
    bottom: 10%;
    font-size: max(20px, 5.2vw);
    padding: .625em 1.5em .625em 1em;
    animation-duration: 1.5s;
    animation-delay: 0.5s;
  }
}
@keyframes slideIn {
  0% {
    transform: translateX(-50%);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

main.front h2 {
  color: var(--wp--preset--color--main);
  font-size: 3.2rem;
  font-size: clamp(2rem, 4vw ,3.2rem);
  font-weight: 700;
  line-height: 1;
  margin-block-end: 0 !important;
}

main.front .sp-reverse {
  @media (width < 782px) {
    flex-direction: column-reverse;
  }
}