@media screen and (max-width:3000px){

.bg01{background:url("../img/bg001_LL.jpg") no-repeat;background-size:cover;aspect-ratio:3000/1688;}
.bg02{background:url("../img/bg002_LL.jpg") no-repeat;background-size:cover;aspect-ratio:3000/1688;}
.bg03{background:url("../img/bg003_LL.jpg") no-repeat;background-size:cover;aspect-ratio:3000/1688;}
.bg04{background:url("../img/bg004_LL.jpg") no-repeat;background-size:cover;aspect-ratio:3000/1688;}
.bg05{background:url("../img/bg005_LL.jpg") no-repeat;background-size:cover;aspect-ratio:3000/1688;}

.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);
}

}

@media screen and (max-width:767px){
.bg01{background:url("../img/bg001_s.jpg") no-repeat;background-size:cover;aspect-ratio:800/1000;}
.bg02{background:url("../img/bg002_s.jpg") no-repeat;background-size:cover;aspect-ratio:800/1000;}
.bg03{background:url("../img/bg003_s.jpg") no-repeat;background-size:cover;aspect-ratio:800/1000;}
.bg04{background:url("../img/bg004_s.jpg") no-repeat;background-size:cover;aspect-ratio:800/1000;}
.bg05{background:url("../img/bg005_s.jpg") no-repeat;background-size:cover;aspect-ratio:800/1000;}

.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: 50vh;
  /*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);
}

}