/* フローティングメニュー１ */
.floating-menu-bottom-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 50px;
  /* PC用の左右余白 */
  box-sizing: border-box;
  z-index: 9999;
  background-color: transparent;
}

.floating-menu-bottom {
  display: flex;
  justify-content: center;
  max-width: 1340px;
  max-height: 74px;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.menu4-block {
  flex: 1 1 50%;
  max-width: 670px;
  max-height: 100px;
  height: auto;
}

.menu4-block img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 画像切替用 */
.pc-img {
  display: block;
}

.sp-img {
  display: none;
}

/* スマホ対応 */
@media screen and (max-width: 920px) {
  .floating-menu-bottom-wrapper {
    padding: 0;
    /* ← スマホ時は余白ゼロ */
  }

  .floating-menu-bottom {
    flex-direction: column;
    /* 上下に並べる */
    align-items: center;
    /* 中央寄せ */
    width: 100%;
    gap: 0;
  }

  .menu-block {
    width: 430px !important;
    /* 幅固定 */
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .menu-block img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 画像切替を強制 */
  .pc-img {
    display: none !important;
    visibility: hidden !important;
  }

  .sp-img {
    display: block !important;
    visibility: visible !important;
  }
}



/* フローティングメニュー ２ */
.floating-menu2 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 10px 20px;
  background: #fff;
  /* 背景色が必要なら設定 */
}

.menu2-container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu2-row {
  display: flex;
  width: 100%;
}

.menu2-item {
  flex: 1 1 25%;
  padding: 0 5px;
}

.menu2-item.wide {
  flex: 1 1 50%;
  padding: 0 5px;
}

.menu2-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

/* デフォルト：PCはPC画像だけ表示、SP画像は非表示 */
.floating-menu2 .pc-img {
  display: block !important;
  visibility: visible !important;
}

.floating-menu2 .sp-img {
  display: none !important;
  visibility: hidden !important;
}

/* スマホ対応（920px以下） */
@media (max-width: 920px) {
  .floating-menu2 .pc-img {
    display: none !important;
    visibility: hidden !important;
  }

  .floating-menu2 .sp-img {
    display: block !important;
    visibility: visible !important;
  }

  /* レイアウト変更 */
  .floating-menu2 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9999;
    padding: 0;
  }

  .menu2-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
    /* スマホ版では段間の隙間を除去 */
  }

  .menu2-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .menu2-item {
    flex: none !important;
    width: 430px;
    max-width: 100%;
    margin-bottom: 0;
    /* デフォルトはマージンなし */
    padding: 0;
    /* PC版のpaddingをリセット */
  }

  .menu2-item.wide {
    flex: none !important;
    width: 430px;
    max-width: 100%;
    margin-bottom: 0;
    padding: 0; /* PC版のpaddingをリセット */
  }

      /* 各段のアイテム間に隙間を設定 */
    .menu2-row .menu2-item:not(:last-child) {
      margin-bottom: 0px;
    }

    /* 1段目の最後のアイテム（4段目）にも隙間を追加して2段目との間を空ける */
    .menu2-row:first-child .menu2-item:last-child {
      margin-bottom: 0px;
    }

  .menu2-item img {
    width: 100%;
    height: auto;
  }
}





/* フローティングメニュー３  */
.floating-menu3 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  padding: 10px 20px;
  background: #fff;
  /* 必要に応じて背景色を追加 */
}

.menu3-container {
  width: 100%;
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu3-row {
  display: flex;
  width: 100%;
}

.menu3-item {
  flex: 1 1 33.33%;
  padding: 0 5px;
}

.menu3-item.wide {
  flex: 1 1 60%;
  padding: 0 5px;
}

.menu3-item img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 70px;
  object-fit: contain;
}

/* デフォルト：PCはPC画像だけ表示、SP画像は非表示 */
.floating-menu3 .pc-img {
  display: block !important;
  visibility: visible !important;
}

.floating-menu3 .sp-img {
  display: none !important;
  visibility: hidden !important;
}

/* スマホ対応 */
@media (max-width: 920px) {
  .floating-menu3 .pc-img {
    display: none !important;
    visibility: hidden !important;
  }

  .floating-menu3 .sp-img {
    display: block !important;
    visibility: visible !important;
  }

  /* レイアウト変更 */
  .floating-menu3 {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 9999;
    padding: 0;
  }

  .menu3-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 0;
    /* スマホ版では段間の隙間を除去 */
  }

  .menu3-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

    .menu3-item {
      flex: none !important;
      width: 430px;
      max-width: 100%;
      margin-bottom: 0;
      /* デフォルトはマージンなし */
      padding: 0;
      /* PC版のpaddingをリセット */
    }

    .menu3-item.wide {
      flex: none !important;
      width: 430px;
      max-width: 100%;
      margin-bottom: 0;
      padding: 0; /* PC版のpaddingをリセット */
    }

    /* CSS Gridを使用して順序を変更 */
    .menu3-container {
      display: grid !important;
      grid-template-rows: auto auto auto auto auto;
      gap: 0;
      align-items: center;
      justify-items: center;
    }

    /* 1段目の1番目と2番目 */
    .menu3-row:first-child .menu3-item:nth-child(1) {
      grid-row: 1;
    }

    .menu3-row:first-child .menu3-item:nth-child(2) {
      grid-row: 2;
    }

    /* 2段目を3番目と4番目に */
    .menu3-row:nth-child(2) .menu3-item:nth-child(1) {
      grid-row: 3;
    }

    .menu3-row:nth-child(2) .menu3-item:nth-child(2) {
      grid-row: 4;
    }

    /* 1段目の3番目（Needs Dive コミュニティ）を最後に */
    .menu3-row:first-child .menu3-item:nth-child(3) {
      grid-row: 5;
    }

    /* menu3-rowは表示しない */
    .menu3-row {
      display: contents;
    }

      /* 各段のアイテム間に隙間を設定 */
    .menu3-row .menu3-item:not(:last-child) {
      margin-bottom: 0px;
    }

    /* 1段目の最後のアイテム（3段目）にも隙間を追加して2段目との間を空ける */
    .menu3-row:first-child .menu3-item:last-child {
      margin-bottom: 0px;
    }

  .menu3-item img {
    width: 100%;
    height: auto;
  }
}



/* フローティングメニュー４ */
.floating-menu4-bottom-wrapper {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0 50px;
  box-sizing: border-box;
  z-index: 9999;
  background-color: transparent;
}

.floating-menu4-bottom {
  display: flex;
  justify-content: center;
  max-width: 1340px;
  max-height: 74px;
  margin: 0 auto;
  width: 100%;
  height: auto;
}

.menu4-block {
  flex: 1 1 50%;
  max-width: 670px;
  max-height: 100px;
  height: auto;
}

.menu4-block img {
  width: 100%;
  height: 100%;
  display: block;
}

/* 画像切替用 */
.pc-img {
  display: block;
}

.sp-img {
  display: none;
}

/* スマホ対応 */
@media screen and (max-width: 920px) {
  .floating-menu4-bottom-wrapper {
    padding: 0;
    /* ← スマホ時は余白ゼロ */
  }

  .floating-menu4-bottom {
    flex-direction: column;
    /* 上下に並べる */
    align-items: center;
    /* 中央寄せ */
    width: 100%;
    gap: 0;
  }

  .menu-block {
    width: 430px !important;
    /* 幅固定 */
    max-width: 100%;
    margin: 0;
    padding: 0;
  }

  .menu-block img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 画像切替を強制 */
  .pc-img {
    display: none !important;
    visibility: hidden !important;
  }

  .sp-img {
    display: block !important;
    visibility: visible !important;
  }
}