@charset "utf-8";
/* =============================================================

  General CSS

============================================================= */

/* -------------------------------

  Opening Animation
  
------------------------------- */

body {
  position: relative;
}

#openingAnime,
#underOpeningAnime {
  position: absolute;
  inset: 0;
  color: #FFFFFF;
  text-align: center;
  z-index: 5
}

#openingAnime {
  background-color: #E60040;
  overflow-x: hidden;
}

#underOpeningAnime {
  display: contents;
}

#openingAnime > .inner,
#underOpeningAnime > .inner {
  position: relative;
  display: contents;
  width: 100%;
  height: 100%;
}

#openingAnime > .inner > hgroup,
#underOpeningAnime > .inner > hgroup {
  width: 100%;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  position: absolute;
  top: clamp(5.6rem, 2.5702rem + 10.3581vw, 15rem);
}

#openingAnime hgroup > h1:first-child,
#underOpeningAnime hgroup > h1:first-child {
  font-family: "ヒラギノ明朝 ProN W3","Hiragino Mincho ProN","ＭＳ Ｐ明朝","MS PMincho";
  font-size: clamp(0.875rem, -0.6563rem + 5.8333vw, 3.5rem);
  font-weight: normal;
  letter-spacing: 0.1em;
  margin-bottom: 1em;
}

[src$="/main-title-logo.svg"] {
  width: clamp(20rem, -9.1667rem + 111.1111vw, 70rem);
}
[src$="/logo.svg"] {
  width: clamp(16.75rem, -3.6667rem + 77.7778vw, 51.75rem);
}

#top > div.visual-wrapper {
  background-color: lightgray;
  width: 100%;
  aspect-ratio: 25/14;
  font-size: 6em;
  color:white;
  text-align:center;
  position:relative;
  overflow:hidden;
}

#top .topvisual.pc {
  display: grid;
}
#top .topvisual.sp {
  display: none;
}
#top .topvisual {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  gap: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

#top .topvisual::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  background-color: #00000070;
}

#top .topvisual > div {
  position: relative;
  aspect-ratio: 25/14;
}

#top .topvisual #img4 { grid-area: 1 / 3 / 3 / 5; }
#top .topvisual #img5 { grid-area: 3 / 1 / 5 / 3; }

#top .topvisual span {
  will-change: opacity;
  position: absolute;
  inset: 0;
  background-size: cover;
  background-color: #E60040;
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
.topvisual span.active { animation: fadeOut 1.5s ease 0.3s both; }

.decoration01 {
  position: absolute;
  left: 8%;
  bottom: -5%;
  zoom: 0.7;
}

.decoration02 {
  position: absolute;
  left: 18%;
  top: 10%;
  zoom: 0.8;
}

.decoration03 {
  position: absolute;
  right: 14%;
  top: 10%;
  zoom: 1.2;
}

.decoration04 {
  position: absolute;
  left: 50%;
  top: 18%;
  zoom: 0.7;
}

.decoration05 {
  position: absolute;
  right: 14%;
  bottom: 4%;
  zoom: 0.7;
}

.decoration06 {
  position: absolute;
  left: 40%;
  bottom: 20%;
  zoom: 0.8;
}

.decoration07 {
  display: none;
  position: absolute;
  right: 40%;
  bottom: 40%;
  zoom: 0.8;
}

.decoration08 {
  display: none;
  position: absolute;
  left: 12%;
  bottom: 52%;
  zoom: 0.8;
}

@media screen and (min-width: 1280px) {
  .decoration01 { bottom: 12%; }
  .decoration05 { bottom: 20%; }
  .decoration06 {
    bottom: 30%;
  }
  .decoration07 { display: block; }
  .decoration08 { display: block; }
}

@media screen and (max-width: 468px) {
  #openingAnime > .inner > hgroup,
  #underOpeningAnime > .inner > hgroup {
    top: 11.5rem;
  }
  #top .topvisual.pc {
    display: none;
  }
  #top .topvisual.sp {
    display: grid;
  }
  #top > div.visual-wrapper {
    aspect-ratio: 25/28;
  }
  #top .topvisual {
    grid-template: auto auto auto auto/ 1fr 1fr;
  }
  #top .topvisual #img4,
  #top .topvisual #img5 { grid-area: auto; }
  #top .topvisual #img2 { grid-area: 2 / 1 / 4 / 3; }
  .decoration01,
  .decoration04,
  .decoration05 { zoom: 0.5; }
  .decoration02,
  .decoration03,
  .decoration06 { zoom: 0.6; }
  
  .decoration04 { top: 24%; }
  .decoration06 { bottom: 34%; }
  .decoration05 { bottom: 16%; }
}

[class^="decoration"] > img {
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

.anime-shake {
  animation: shake 5s infinite;
  transform: rotate(20deg);
}

.anime-shake2 {
  animation: shake2 6s infinite;
  transform: rotate(10deg);
}

.anime-shake3 {
  animation: shake 7s infinite;
  transform: rotate(20deg);
}

@keyframes shake {
    0% { transform: rotate(20deg); }
    50% { transform: translateY(80px) rotateY(180deg) rotate(-60deg) scale(1.2);  }
    100% { transform: rotate(20deg); }
}

@keyframes shake2 {
    0% { transform: translateY(-20px) rotateY(180deg) rotate(-60deg) scale(1.2); }
    50% { transform: translateY(60px) rotate(20deg); }
    100% { transform: translateY(-20px) rotateY(180deg) rotate(-60deg) scale(1.2); }
}