body,
html {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

body {
  overflow: hidden;
}
.navbar_fv {
  position: fixed;
  z-index: 2;
  left: 8%;
  img {
    width: 5vw;
    max-width: 170px;
  }
}
.btn_pop {
  top: 69%;
  left: 31%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 10px;
  width: 87px;
  height: 100px;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}
.item1:hover .mi5 {
  display: inline;
  top: 60%;
  left: 35%;
  transform: translateX(-50%);
}
.item1img {
  width: 10vw !important;
}

.item5:hover .mi5 {
  display: inline;
  top: 60%;
  left: 45%;
  transform: translateX(-50%);
}


.btn_pop2 {
  top: 66%;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 10px;
  width: 87px;
  height: 100px;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}

.btn_pop6 {
  top: 70%;
  left: 48%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 10px;
  width: 87px;
  height: 100px;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}

.item2:hover .mi5 {
  display: inline;
  top: 40%;
  left: 50%;
  transform: translateX(-50%);
}
.item2img {
  width: 20vw !important;
}
.item3img{
    width: 15vw !important;
}
.item4img{
      width: 20vw !important;
}

.btn_pop3 {
  top: 69%;
  left: 27%;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 10px;
  width: 87px;
  height: 100px;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}

.btn_pop5 {
  top: 69%;
  right: 28%;
  display: block;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 10px;
  width: 87px;
  height: 100px;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}

.btn_pop7{
    top: 69%;
  right: 20%;
  display: block;
  transform: translateX(-50%);
  position: absolute;
  border-radius: 10px;
  width: 87px;
  height: 100px;
  overflow: hidden;
  background: transparent;
  border: none;
  cursor: pointer;
}

.item3:hover .mi5 {
  display: inline;
  top: 60%;
  left: 27%;
  transform: translateX(-50%);
}
.item4:hover .mi5 {
  display: inline;
  top: 59%;
  left: 27%;
  transform: translateX(-50%);
}

.mi5 {
  display: none;
  position: absolute;
  z-index: 5;
}
.fv_cont {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.top-page {
  max-width: 2000px;
  position: relative;
  margin: 0 auto;
}

.btn_coupon {
  width: 10vw;
  display: block;
  height: 15px;
  margin: 5px 0;
}

#buttonA,
#buttonB,
#toPageA,
#toPageB {
  position: fixed;
  z-index: 6;
  img {
    width: 100%;
    height: auto;
  }
}
img{
  vertical-align:top;
}

#buttonA {
  height: auto;
  left: 0;
  top: 0;
  width: 7.65vw;
}

#buttonB,
#toPageB {
  height: auto;
  right: 0;
  top: 0;
  width: 7.5vw;
}

.wrap {
  margin: 0 auto;
  position: relative;
  width: 100%;
}
.scale-wrapper {
  width: 100%;
  height: 100%;

  transform-origin: top left; /* 左上基準でスケーリング */
  transition: transform 0.3s ease; /* スムーズなスケーリング */
}
.be_cont {
  max-width: 40vw;
  margin: 0 auto;
  padding-right: calc(10 / 1920 * 100%);
  padding-top: calc(235 / 1920 * 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  img {
    width: 100%;
    height: auto;
  }
}

.fu_cont {
  height: auto;
  max-width: 33vw;
  margin: 0 auto;
  padding-right: calc(20 / 1920 * 100%);
  padding-top: calc(235 / 1920 * 100%);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  img {
    width: 100%;
    height: auto;
  }
}

img {
  width: 100%;
  height: auto;
}

.tab-content {
  width: 100%;
  max-width: 55vw;
  margin: 0 auto;
}

.page {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  width: 100%;
  height: 100%;
  transform: translateX(100%); /* 画面外に初期位置を設定 */
  transition: transform 0.8s ease, opacity 0.8s ease; /* ふわっと感を出すために遅めのアニメーション */
}

/* スライドイン（右から左） */
.show-right {
  transform: translateX(0); /* 画面内にスライドイン */
}

/* スライドアウト（左へ） */
.hide-left {
  transform: translateX(-100%); /* 画面外にスライドアウト */
}

/* スライドイン（左から右） */
.show-left {
  transform: translateX(0); /* 画面内にスライドイン */
}

/* スライドアウト（右へ） */
.hide-right {
  transform: translateX(100%); /* 画面外にスライドアウト */
}

.allpage {
  overflow: hidden;
}

.pageA {
  background: url(./img/bg_beginner.png) 0 0 no-repeat;
  background-size: contain;
  height: auto;
  max-width: 2000px;
  width: 100vw;
}
.pageB {
  background: url(./img/bg_fu.png) 0 0 no-repeat;
  background-size: contain;
  max-width: 2300px;
  background-position: top right;
  width: 100vw;
}

.fo_bottom {
  width: 100%;
  padding-top: 10px;
}

.header {
  position: absolute;
  left: 50%;
  margin-left: 37vw;
  top: 5px;
}

.headerB {
  position: absolute;
  left: 50%;
  margin-left: 43vw;
  top: 5px;
}

.close {
  img {
    width: 7vw;
    max-width: 80px;
  }
}

.tabs {
  display: flex;
  margin-top: 5px;
  width: 700px;
  justify-content: space-around;
}

.tab {
  height: 5vw;
  width: 5vw;
  cursor: pointer;
  transition: background-color 0.3s;
}

.be_tab1 {
  background-image: url("./img/be_tab1_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.be_tab2 {
  background-image: url("./img/be_tab2_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.be_tab3 {
  background-image: url("./img/be_tab3_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.be_tab4 {
  background-image: url("./img/be_tab4_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.be_tab5 {
  background-image: url("./img/be_tab5_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.be_tab6 {
  background-image: url("./img/be_tab6_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}

.be_tab1.active {
  background-image: url("./img/be_tab1_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 6vw;
}
.be_tab2.active {
  background-image: url("./img/be_tab2_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 6vw;
}
.be_tab3.active {
  background-image: url("./img/be_tab3_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 6vw;
}
.be_tab4.active {
  background-image: url("./img/be_tab4_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 6vw;
}
.be_tab5.active {
  background-image: url("./img/be_tab5_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 6vw;
}
.be_tab6.active {
  background-image: url("./img/be_tab6_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 6vw;
}

.fu_tab1 {
  background-image: url("./img/fu_tab1_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.fu_tab2 {
  background-image: url("./img/fu_tab2_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.fu_tab3 {
  background-image: url("./img/fu_tab3_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.fu_tab4 {
  background-image: url("./img/fu_tab4_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}
.fu_tab5 {
  background-image: url("./img/fu_tab5_off.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
}

.fu_tab1.active {
  background-image: url("./img/fu_tab1_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 5.8vw;
}
.fu_tab2.active {
  background-image: url("./img/fu_tab2_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 5.8vw;
}
.fu_tab3.active {
  background-image: url("./img/fu_tab3_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 5.8vw;
}
.fu_tab4.active {
  background-image: url("./img/fu_tab4_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 5.8vw;
}
.fu_tab5.active {
  background-image: url("./img/fu_tab5_on.png"); /* アクティブ時の背景画像 */
  background-size: contain; /* 画像をタブ全体に表示 */
  background-repeat: no-repeat;
  height: 5.8vw;
}

.tab-content {
  display: none;
  margin-top: 5px;
}

.tab-content.active {
  display: block;
}

button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

@media screen and (min-width: 769px) {
  .tab-content {
    margin-top: 10px;
  }
  .btn_coupon {
    margin: 1.25vw 0;
    height: 2vh;
  }
  .tabs {
    margin-top: 50px;
  }
  .pageA {
    background-size: contain;
  }
  .pageB {
    background-size: contain;
    width: 100vw;
    height: 500px;
  }
  #toPageA {
    width: 0;
  }
  .fu_cont {
    height: 200px;
    max-width: 40vw;
  }
  body {
    overflow-x: hidden;
    overflow-y: auto;
  }
}