/* アニメーション初期スタイル */
.screen.intro-screen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  z-index: 1000;
  color: white;
  background-color: rgba(0, 0, 0, 0);
}
#intro1{z-index: 5;}
#intro1.intro-screen {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0);
}
#intro1.slid {
  z-index: -1;
}
#intro2.slid{
  z-index: -1;
}
#intro2 {
  z-index: 3;
  color: black;
  background-color:rgba(255, 255, 255,0);
}

.cut-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2000;
  display: none;
  overflow: hidden;
}

.cut-line {
    position: absolute;
    top: 50%;
    left: -53%;
    width: 200%;
    height: 8px;
    background: white;
    transform: rotate(-45deg);
    opacity: 0;
}

.cut-line.animate {
  animation: slash 1s ease-in-out forwards;
}

@keyframes slash {
  0% {
    transform: rotate(-45deg) translateX(0);
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translateX(200%);
    opacity: 0;
  }
}

.fade-left, .fade-right,.fade-left2, .fade-right2 {
  position: fixed;
  top: 0;
  width: 50%;
  height: 100%;
  z-index: 1;
  opacity: 1;
}
.fade-left,.fade-left2{
  left: 0;
}
.fade-right, .fade-right2{
  right: 0;
}
.fade-left, .fade-right{
  z-index: 4;
}
.slid.fade-left ,.slid.fade-left2{
  z-index: 4;
  animation: fadeLeft 2s ease-out forwards;
}

.slid.fade-right ,.slid.fade-right2{
  z-index: 4;
  animation: fadeRight 2s ease-out forwards;
}

@keyframes fadeLeft {
  to {
    transform: translateX(-100%);
    opacity: 0;
  }
}

@keyframes fadeRight {
  to {
    transform: translateX(100%);
    opacity: 0;
  }
}