@charset "UTF-8";

/* ==========================================================================
   Intro
========================================================================== */
#intro {
  padding-top: 60px;
  margin-top: -60px;
  overflow: hidden;
}
#intro .clip {
  height: 100%;
}
#intro .imgBox {
  padding-top: 7em;
  position: relative;
}
#intro .en_label {
  flex: 0 0 100%;
  font-family: var(--font1);
  font-size: 4.4rem;
  line-height: 1;
  letter-spacing: .16em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--border1);
  opacity: .2;
  margin: 1rem 0 -6rem;
  position: absolute;
  top: 3.5rem;
  z-index: 10;
}
#intro .images {
  margin: 0 -1.5%;
  position: relative;
}
#intro .images .clip {
  clip-path: inset(0 0 0 round 50px 0 50px 0);
  width: 100%;
  height: 52vw;
}
#intro .images .clip.img_1,
#intro .images .clip.img_3 {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-102%, 20%);
}
#intro .images .clip.img_3 {
  transform: translate(102%, -20%);
}
@media (min-width: 576px) {
  #intro .imgBox {
    padding-top: 7.5em;
  }
  #intro .images .clip {
    height: 16rem;
  }
}
@media (min-width: 768px) {
  #intro {
    padding-top: 90px;
  }
  #intro .en_label {
    font-size: 5rem;
  }
  #intro .images .clip {
    height: 20rem;
  }
}
@media (min-width: 992px) {
  #intro .imgBox {
    padding-top: 9.5em;
  }
  #intro .en_label {
    font-size: 7rem;
  }
  #intro .images .clip {
    clip-path: inset(0 0 0 round 92px 0 114px 0);
    height: 29rem;
  }
}
@media (min-width: 1200px) {
  #intro .imgBox {
    padding-top: 10.5em;
  }
  #intro .en_label {
    font-size: 8.875rem;
  }
}

/* ==========================================================================
   Stars
========================================================================== */
@media (min-width: 768px) {
  #stars .clip {
    height: 100%;
  }
}