html, body {
  height: 100%;
  margin: 0;
  background: #2e3350 ;
}
img {
  outline: none;
}

img:focus {
  outline: none;
}
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 共通スタイル（DOMにはクラスだけ付ける） */
.fade-abs {
  position: absolute;
  opacity: 0;
  color: #fff;
  font: 24px/1.4 system-ui, sans-serif;
}
/* 位置例（必要なら自由に追加） */
.pos-1 {
  top: 15%;
  left: 15%;
}
.pos-2 {
  top: 35%;
  left: 35%;
}
.pos-3 {
  top: 55%;
  left: 55%;
}
.pos-4 {
  top: 30%;
  left: 70%;
}
main {
  position: relative;
  width: 100%;
  height: 100vh;
}
.layer00 {
  position: relative;
  display: flex;
  width: 100%;
  height: 100vh; /* 全画面にしたい場合 */
  background: linear-gradient(to right, #671917 50%, #2e3350 50%);
}
.layer02 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 1;
}
.layer03 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 2;
}
.layer02 .layer_center, .layer03 .layer_center {
  width: 80%;
  max-width: 1832px;
}
.layer01 {
  position: absolute;
  width: 100%;
  height: 100vh;
  left: 0;
  top: 0;
  display: flex;
  background: rgba(7, 7, 7, 1.00);
  justify-content: center;
  align-items: center;
  z-index: 5;
}
.layer01 .layer_center {
  width: 80%;
  max-width: 1700px;
}
.layer01 img, .layer02 img, .layer03 img {
  width: 100%;
}
@media screen and (max-width: 800px) {
  .layer00 {
    background: linear-gradient(to bottom, #671917 50%, #2e3350  50%);
  }
  .layer02 {
    align-items: center;
  }
  .layer03 {
    align-items: center;
  }
  .layer02 .layer_center, .layer03 .layer_center {
    width: 95%;
  }
}