@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;400&display=swap");
body {
  display: block;
  position: relative;
  background-color: #000; }

.main3 {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1; }

.main2 {
  display: block;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  flex: auto;
  /* .logo{
       width:200px;
       position: absolute;
       bottom:30px;
       margin-left: auto;
       margin-right: auto;
       left:0;
       right:0;
   }*/ }
  .main2 .mainLogo {
    display: none;
    width: 450px;
    height: 81px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto auto;
    background: url("../images/index/mainLogopc.png");
    background-size: 450px 81px;
    background-repeat: no-repeat;
    background-position: center center; }
    @media screen and (max-width: 575px) {
      .main2 .mainLogo {
        width: 92px;
        height: 91px;
        background: url("../images/index/mainLogosp.png");
        background-size: 92px 91px; } }

#movwaku {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden; }
  #movwaku #pcmov {
    display: block;
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    aspect-ratio: 1920/1080;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); }
    @media screen and (max-width: 576px) {
      #movwaku #pcmov {
        display: none; } }
  #movwaku #spmov {
    display: block;
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    aspect-ratio: 608/1080;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%); }
    @media screen and (min-width: 577px) {
      #movwaku #spmov {
        display: none; } }
  #movwaku .kuro {
    display: block;
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    top: 0;
    left: 0; }

.charmove {
  animation: moveframe 0.5s forwards; }

@keyframes moveframe {
  0% {
    top: 0; }
  100% {
    top: -100vh; } }
@media screen and (min-width: 576px) {
  .menu-trigger {
    display: none; }

  #menus {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: transparent;
    color: #fff; }
    #menus #menuList1 {
      position: absolute;
      display: none;
      top: 10px;
      left: 10px;
      width: calc(100% - 10px); }
      #menus #menuList1 .bkblk {
        display: none; }
      #menus #menuList1 li {
        display: block;
        width: auto;
        padding: 0.3em 0.5em; } }
      @media screen and (min-width: 576px) and (min-width: 768px) {
        #menus #menuList1 li {
          padding: 0.3em 0.8em; } }
@media screen and (min-width: 576px) {
      #menus #menuList1 ul {
        display: flex;
        width: auto; }
        #menus #menuList1 ul a {
          font-family: 'Hind', sans-serif;
          font-size: min(1.7vw, 20px);
          font-weight: 300;
          white-space: nowrap;
          display: block;
          padding: 0.5em;
          color: #fff; }
    #menus #menuList2 {
      position: absolute;
      display: none;
      bottom: 10px;
      left: 10px;
      width: calc(100% - 10px); }
      #menus #menuList2 #menuBtn {
        display: flex;
        width: auto; }
        #menus #menuList2 #menuBtn a {
          display: block;
          padding: 0.5em;
          color: #fff; } }
@media screen and (max-width: 575px) {
  #mbHead {
    background-color: transparent; } }