@charset "UTF-8";

h2{
  text-align: center;
  color: white;
  font-family: serif;
}


.container{
  position: relative;
  width: 100%;
  height: 60vh;
}

.triangle{
width: 100%;
  height: 100%;
 position: fixed;
 overflow: hidden;
 
}

.band{
  background:rgb(41, 37, 37);
   clip-path: polygon(0 0, 0 100%,20% 100%, 40% 0);
   
}

.IDC{
    background: rgb(123, 123, 122);
 clip-path: polygon(20% 100%,80% 100%,60% 0,40% 0);
 z-index: 1000;
}

.dance{
   background: rgb(134, 138, 134);
  clip-path: polygon(100% 0, 100% 100%, 80% 100%,60% 0);
  z-index: 1000;
}



.bandtitle{
  color: rgb(255, 255, 255);
  font-family: serif;
  z-index: 200;
 
 
  border-radius: 30%;
   writing-mode: vertical-rl; /* 縦書きで右から左へ */
  text-orientation: upright; /* 文字を正立させる */
  position: absolute;
  top: 3vh;
  left: 10vw;
  font-size: 30px;
  z-index: 100000;
}

.IDCtitle{
   color: rgb(255, 255, 255);
  font-family: serif;
  z-index: 200;
 
 
  border-radius: 30%;
   writing-mode: vertical-rl; /* 縦書きで右から左へ */
  text-orientation: upright; /* 文字を正立させる */
  position: absolute;
  top: 20vh;
  left: 40vw;
  font-size: 15vw;
  z-index: 100000;
}

.dancetitle{
     color: rgb(255, 255, 255);
  font-family: serif;
  z-index: 200;
 
 
  border-radius: 30%;
   writing-mode: vertical-rl; /* 縦書きで右から左へ */
  text-orientation: upright; /* 文字を正立させる */
  position: absolute;
  top: 3vh;
  right: 5vw;
  font-size: 15vw;
  z-index: 100000;
}

.bandSlideshow, .IDCslideshow, .danceslideshow {
  position: absolute;
  width: 100%;
  height: 100%;      /* 親と合わせる */
  overflow: hidden;
  top: 0;
}
.bandSlideshow img,
.IDCslideshow img,
.danceslideshow img {
  position: absolute; top:0; left:0;
  width: 100%; height: 100%;
  object-fit: cover;
}


.bands{
    top: 0;
  left: 0;
}


.slide{
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;

}

.slide.active{
  opacity: 1;
}

.IDCslide{
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;

}

.IDCslide.active{
  opacity: 1;
}

.danceslide{
  position: absolute;
  top: 0;
  left: 0vw;
  width: auto;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s;

}

.danceslide.active{
  opacity: 1;
}