html {
  overflow-x: hidden;
}

main {
  background: url(../../assets/img/kanji/kanji_bg.png);
  position: relative;
}
main::before {
  content: "";
  display: block;
  width: 100vw;
  height: calc(143 / 1400 * 100vw);
  background: url(../../assets/img/kanji/dec_top.png) no-repeat center center;
  background-size: contain;
  position: relative;
  margin: 0 auto;
  top: 70px;
}
main::after {
  content: "";
  display: block;
  width: calc(480/1400*100vw);
  height: calc(143 / 1400 * 100vw);
  background: url(../../assets/img/kanji/dec_bottom.png) no-repeat center center;
  background-size: contain;
  position: absolute;
  bottom: 94px;
  right: 90px;
}
/* ---top----*/
.p-top__inner {
  background: url(../../assets/img/kanji/top/bg_top.png) no-repeat;
  width: 100%;
  background-size: contain;
}
.p-top__inner::after {
  background: url(../../assets/img/kanji/top/bg_bottom.png) no-repeat;
  width: 100%;
  content: "";
  background-size: cover;
  height: calc(166 / 1400 * 100vw);
  display: block;
}

.p-top__inner h3 {
  text-align: center;
  font-size: 20px;
  line-height: 2;
  font-weight: 900;
}
.p-top__contents {
  padding: 110px 0 255px;
  max-width: 1095px;
  margin: 0 auto;
}
.p-top__contents--img {
  width: calc(564 / 1400 * 100vw);
  margin: 71px auto 30px;
}
.p-top__contents ul {
  display: flex;
  justify-content: center;
  gap: 115px;
}
.p-top__contents ul li {
  width: calc(490 / 1400 * 100vw);
}
@media screen and (max-width: 768px) {
  .p-top {
    margin-top: 60px;
  }
  .p-top__inner {
    background: url(../../assets/img/kanji/top/bg_top_sp.png) no-repeat;
    width: 100%;
    background-size: 80%;
  }
  .p-top__inner::after {
    background: url(../../assets/img/kanji/top/bg_bottom_sp.png) no-repeat;
    width: 100%;
    content: "";
    background-size: cover;
    height: calc(138 / 375 * 100vw);
    display: block;
  }
  .p-top__inner h3 {
    line-height: 1.8;
  }

  .p-top__contents {
    padding: 93px 0 72.5px;
  }
  .p-top__contents ul {
    flex-direction: column;
    gap: 35px;
  }
  .p-top__contents ul li {
    width: calc(355 / 375 * 100vw);
    margin: 0 auto;
  }
  .p-top__contents--img {
    width: calc(352 / 375 * 100vw);
    margin: 50px auto 35px;
  }
}
.kanji_section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 1;
}
.kanji__inner {
  margin: 30px 0 0;
}
.kanji__main {
  max-width: 1100px;
  margin: 0 auto;
}
.kanji_ttl {
  display: flex;
  gap: 23px;
  position: relative;
}
.kanji_ttl img {
  width: 437px;
}
.kanji__txt img {
  width: 569px;
}
.kanji_wrapper {
  height: 315px;
}
.kanji_contents {
  height: 315px;
  max-width: 987px;
  margin: 0 auto;
}
.kanji__attention {
  width: 193px;
  margin: calc(40 / 1400 * 100vw) 0 30px auto;
}
.kanji_contents ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 96px;
  margin-top: 60px;
}

.kanji_contents li {
  position: relative;
  width: calc(120 / 1400 * 100vw); /* 画像サイズに合わせる */
  cursor: pointer;
  display: flex;
  justify-content: center;
  height: 315px;
}
.kanji,
.hiragana {
  width: 100%;
  position: absolute;
  transition: opacity 0.5s ease-in-out;
}
/* 漢字の初期状態 */
.kanji img {
  opacity: 1;
}

/* ひらがなの初期状態（非表示） */
.hiragana img {
  opacity: 0;
  transform: rotateX(0deg);
  transition: opacity 0.5s ease-in-out, transform 1s ease-in-out;
}

/* 漢字をクリックしたら入れ替わる */
.show-hiragana .kanji img {
  opacity: 0;
}
.show-hiragana .hiragana img {
  opacity: 1;
  transform: rotateY(360deg); /* 縦に2回転 */
}

/* MVの初期状態（画面外に配置） */
.mv {
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
  /* top: calc(100vh - 117px); */
  position: absolute;
  width: 102px;
}

/* MVがスライドイン */
.slide-in {
  opacity: 1;
  transform: translateX(0);
}
.kanji_btn {
  margin: calc(60 / 1400 * 100vw) auto calc(30 / 1400 * 100vw);
}
/* ボタンのスタイル */
.kanji_btn ul {
  display: flex;
  list-style: none;
  padding: 0;
  gap: 30px;
  justify-content: center;
  height: auto;
  align-items: center;
}
#all-btn {
  cursor: pointer;
  width: 220px;
}
.kanji_top {
  width: 271px;
}
#next-btn {
  display: none;
  width: 270px;
}
.kanji__rail {
  position: relative;
  width: 100vw;
  background: url(../../assets/img/kanji/rail.png) repeat-x;
  height: 117px;
  background-size: contain;
  margin-top: 30px;
}
@media screen and (max-width: 768px) {
  main {
    background: url(../../assets/img/kanji/kanji_bg_sp.png);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    background-size: cover;
    top: 66px;
  }
  main::before {
    height: 1468px;
    background: url(../../assets/img/kanji/kanji_bg_sp.png);
    background-size: cover;
    top: 60px;
  }
  main::after {
    content: "";
    width: calc(288 / 375 * 100vw);
    height: calc(73 / 375 * 100vw);
    background: url(../../assets/img/kanji/dec_bottom.png) no-repeat center center;
    background-size: contain;
    bottom: 127px;
    right: 0px;
}
  .kanji__main {
    margin: 0 auto 60px;
  }
  .kanji_section {
    height: auto;
    z-index: 1;
  }

  .kanji__inner {
    position: static;
    transform: unset;
    margin: 0;
  }
  .kanji_ttl {
    display: block;
  }
  .kanji_ttl img {
    width: calc(298 / 375 * 100vw);
    margin: calc(49 / 375 * 100vw) auto calc(31 / 375 * 100vw);
  }
  .kanji_wrapper {
    width: calc(252 / 375 * 100vw);
    margin: 0 auto;
    height: calc(802 / 375 * 100vw);
  }
  .mv {
    transform: unset;
  }
  .kanji_contents ul {
    flex-wrap: wrap;
    gap: calc(46 / 375 * 100vw) 0px;
    justify-content: space-between;
    height: auto;
    margin-top: 54px;
  }
  .kanji_contents li {
    height: calc(236 / 375 * 100vw);
    width: calc(90 / 375 * 100vw);
  }
  .kanji_btn {
    margin: calc(75 / 375 * 100vw) 0 0;
  }
  .kanji_btn ul {
    flex-direction: column;
    align-items: center;
  }
  .kanji_btn li {
    width: calc(239 / 375 * 100vw);
  }
  .kanji_btn .kanji_top {
    width: calc(298 / 375 * 100vw);
  }
  .kanji_btn #next-btn {
    width: calc(239 / 375 * 100vw);
  }

  .kanji__rail {
    background: url(../../assets/img/kanji/rail_sp.png) repeat-x;
    height: calc(138 / 375 * 100vw);
    background-size: contain;
  }
  .kanji__rail .mv {
    bottom: 100px;
  }
}

.mv {
  position: absolute;
  bottom: 60px; /* railの一番下から配置 */
  left: 0; /* 必要に応じてJSで動かす */
  width: 102px;
  opacity: 0;
  transform: translateX(100%);
  transition: transform 0.6s ease-out, opacity 0.6s ease-out;
}

.slide-in {
  opacity: 1;
  transform: translateX(0);
}

@media screen and (max-width:500px) {
  .mv {
    width: 64px;
  }
  
}