/* ==========================
   画像が迫ってくるエリア
========================== */

.scene_wrap{
  position: relative;
  z-index: 100;
  height: 100vh;

  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    visibility .8s;
}

.scene_wrap.is-hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.scene{
  position: sticky;
  top: 0;

  width: 100%;
  height: 100vh;
  height: 100svh;
  overflow: hidden;

  perspective: 1500px;
  perspective-origin: center center;

  background: url(../img/main_bg_pc.webp);
  background-position: center;
  background-size: cover;
}
@media (max-width: 480px) {
.scene{
  background: url(../img/main_bg.webp);
  background-position: 45%;
  background-size: cover;
}
}

.images{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  transform-style: preserve-3d;
  pointer-events: none;
}

.image{
  position: absolute;

  max-width: 250px;
  width: 100%;
  left: 50%;
  top: 50%;

  border-radius: 20px;
  overflow: hidden;

  opacity: 0;

  backface-visibility: hidden;
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

.image img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* コピー */

.main_copy{
  position: absolute;
  z-index: 100;

  max-width: 490px;
  width: 60%;
  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.main_copy_box{
position: relative;
}
.main_copy_txt{
position: relative;
z-index: 2;

opacity: 0;
}
@keyframes  main_copy_txt{
  0%{
  transform: scale(3) rotate(-5deg);
  opacity: 0;
  }
  25%{
  transform: scale(0.5) rotate(5deg);
  opacity: 1;
  }
  28%{
  transform: scale(0.5) rotate(5deg);
  opacity: 1;
  }
  60%{
  transform: scale(1) rotate(0deg);
  opacity: 1;
  }
  100%{
  transform: scale(1) rotate(0deg);
  opacity: 1;
  }
}

.main_copy_bg{
position: absolute;
z-index: 1;
top: 0;

opacity: 0;
}
.main_copy.start .main_copy_txt{
  animation: main_copy_txt 1s forwards ease;
}

.main_copy.start .main_copy_bg{
  animation: main_copy_bg 1s forwards ease;
}
@keyframes  main_copy_bg{
  0%{
  transform: scale(0.2);
  opacity: 0;
  }
  18%{
  transform: scale(0) rotate(-10deg);
  opacity: 1;
  }
  60%{
  transform: scale(1.8) rotate(3deg);
  opacity: 1;
  }
  100%{
  transform: scale(1) rotate(0deg);
  opacity: 1;
  }
}

/* タイトル例 */

.main_copy h1{
  font-size: 42px;
  line-height: 1.2;
}

.main_copy p{
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.7;
}

/* ==========================
   SP
========================== */

@media screen and (max-width: 480px){

  .scene{
    max-height: 101vh;
  }

  .image{
    max-width: 150px;
  }

  .main_copy h1{
    font-size: 28px;
  }

  .main_copy p{
    margin-top: 15px;
    font-size: 14px;
  }
}


.arrow_img {
position: absolute;
max-width: 30px;
bottom: 18%;
left: 48%;

animation: arrow_img 2s infinite;
}

@keyframes arrow_img{
0%{
opacity: 0;
}
30%{
opacity: 1;
}
70%{
opacity: 1;
}
100%{
opacity: 0;
}
}
@media (max-width: 480px) {
.arrow_img {
    max-width: 40px;
    left: 43%;
}

  .main_copy{
  width: 87%;
}

h2.item_ttl{
  font-size: 6.25vw; /* 30px */
}

.item_box .label{
  flex: 0 0 20vw; /* 96px */
  font-size: 4.5833vw; /* 22px */
}

.item_box .sub{
  font-size: 3.5417vw; /* 17px */
  gap: 5.8333vw; /* 28px */
}

.item_box .date,
.item_box .venue{
  font-size: 5.2083vw; /* 25px */
}

.item_box .hall{
  font-size: 3.95vw; /* 19px */
}

.copy_txt{
  font-size: 4.5833vw; /* 22px */
}

}