.bg1{background:url("../img/01_L.jpg") no-repeat;background-size:cover;}
.bg2{background:url("../img/02_L.jpg") no-repeat;background-size:cover;}
.bg3{background:url("../img/03_L.jpg") no-repeat;background-size:cover;}
.bg4{background:url("../img/04_L.jpg") no-repeat;background-size:cover;}

.bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 背景を後ろに配置 */
}

.bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none; /* 背景レイヤーが操作を妨げないように */
}

/* オーバーレイの追加 */
.bg-layer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); /* 黒の半透明オーバーレイ (30% 不透明度) */
  pointer-events: none; /* オーバーレイが操作を妨げないように */
}

/* 必要に応じてオーバーレイの色や不透明度を変更できます */
.bg-layer::before {padding:8% 0;
  background-color: rgba(255, 255, 255, 0.2); /* 白の半透明オーバーレイ (20% 不透明度) */
}

/* アクティブな背景を表示 */
.bg-layer.active {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* セクションのスタイル */
.my-section {
  min-height: 110vh;
  /*padding: 100px 0px;*/
  /*display: flex;
  flex-direction: column;*/
  /*justify-content: center;
  align-items: center;*/
  position: relative;
}

.my-section:nth-child(odd) {
  background: rgba(255, 255, 255, 0.0);
}

.my-section:nth-child(even) {
  background: rgba(255, 255, 255, 0.0);
}