.wrap40{
  position: relative; height: 50vh;
}
.pn40{
  display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}
.active40{
  display: flex;
}
.pn41,.pn44{ background: #346c9c; }
.pn42,.pn45{ background: #b1c3cb; }
.pn43,.pn46{ background: #595757; }

/*  */
.top {
  position: relative;
  overflow: hidden;
  height: 100vh;
  background-color: #f0f0f0; /* 背景色を追加して要素が見えるように */
}

.top40 {
  position: relative;
  width: 100%;
  height: 600%; /* 6個のtop01に対して100% * 6 */
}

.top01 {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 3rem;
  background-color: #ccc; /* 背景色を追加して要素が見えるように */
  opacity: 0; /* 初期状態では非表示 */
}

.top01 span {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}