body {
  margin: 0 auto;
  text-align: center;
}

.main_visual {
  max-width: 1677px;
  width: 100%;
}

.main_visual {
  height: 845px;
  background: url(../img/main_bg.png)no-repeat;
  overflow: hidden;
}

.main_visual img {
  max-width: 698px;
  width: 100%;
  margin-top: 50px;
}

.main_visual,
_:-ms-lang(x)::-ms-backdrop {
  z-index: 1;
}

#bubbleparticle,
_:-ms-lang(x)::-ms-backdrop {
  max-width: 1677px;
  width: 100% !important;
  height: 715px !important;
  background: linear-gradient(#0382cb, #0382cb) !important;
  z-index: -1;
  overflow: hidden;
}

@media screen and (max-width:1047px) {
  .main_visual {
    padding-top: 50.5253104%;
    max-width: 1047px;
    width: 100%;
    height: 529px;
    background: url(../img/main_bg_1047.png)no-repeat;
    overflow: hidden;
    margin: 0 auto;
  }

  .main_visual img {
    margin: -40.5253104% auto 0 auto;
    width: 90%;
  }
}

@media screen and (min-width:1030px) and (max-width:1046px) {
  .main_visual {
    padding-top: 50.7317073%;
    max-width: 1025px;
    width: 100%;
    height: 520px;
    background: url(../img/main_bg_tablet.png)no-repeat;
    overflow: hidden;
    margin: 0 auto;
  }

  .main_visual img {
    margin: -40.7317073% auto 0 auto;
    width: 43%;
  }
}

@media screen and (min-width:1023px) and (max-width:1029px) {
  .main_visual {
    padding-top: 50.7317073%;
    max-width: 1025px;
    width: 100%;
    height: 520px;
    background: url(../img/main_bg_tablet.png)no-repeat;
    overflow: hidden;
    margin: 0 auto 2.5em auto;
  }

  .main_visual img {
    margin: -47.7317073% auto 0 auto;
    width: 40%;
  }
}

@media screen and (min-width:1015px) and (max-width:1022px) {
  .main_visual {
    padding-top: 50.5253104%;
    max-width: 1047px;
    width: 100%;
    height: 529px;
    background: url(../img/main_bg_1047.png)no-repeat;
    overflow: hidden;
    margin: 0 auto;
  }

  .main_visual img {
    margin: -40.5253104% auto 0 auto;
    width: 43%;
  }
}

@media screen and (min-width:976px) and (max-width:1021px) {
  .main_visual {
    padding-top: 50.5253104%;
    max-width: 1047px;
    width: 100%;
    height: 529px;
    background: url(../img/main_bg_1047.png)no-repeat;
    overflow: hidden;
    margin: 0 auto;
  }

  .main_visual img {
    margin: -40.5253104% auto 0 auto;
    width: 43%;
  }
}

@media screen and (min-width: 701px) and (max-width: 975px) {
  .main_visual {
    padding-top: 50.5253104%;
    max-width: 1047px;
    width: 100%;
    height: 529px;
    background: url(../img/main_bg_1047.png)no-repeat;
    overflow: hidden;
    margin: 0 auto 1.7em auto;
  }

  .main_visual img {
    margin: -44.5253104% auto 0 auto;
    width: 45%;
  }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
  .main_visual {
    padding-top: 50.5253104%;
    max-width: 1047px;
    width: 100%;
    height: 529px;
    background: url(../img/main_bg_1047.png)no-repeat;
    overflow: hidden;
    margin: 0 auto;
  }

  .main_visual img {
    margin: -45.5253104% auto 0 auto;
    width: 60%;
  }
}


@media screen and (min-width:500px) and (max-width:640px) {
  .main_visual {
    padding-top: 64.375%;
    width: 100%;
    height: 515px;
    background: url(../img/main_bg_sp.png)no-repeat;
    overflow: hidden;
    margin: 0 auto;
  }

  .main_visual img {
    margin: -58.375% auto 0 auto;
    width: 63%;
  }
}

@media screen and (max-width:425px) {
  .main_visual {
    padding-top: 0;
    width: 100%;
    height: 274px;
    background: url(../img/main_bg_sp_425.png) no-repeat;
    overflow: hidden;
    margin: 0 auto 1em auto;
  }

  .main_visual img {
    margin: 5% auto;
    width: 50%;
  }
}

@media screen and (max-width:1100px) {
  #bubbleparticle {
    position: absolute;
    top: 0;
    left: 0;
    height: 446px !important;
    width: 1677px;
    overflow: hidden;
  }
}

@media screen and (max-width:425px) {
  #bubbleparticle {
    position: absolute;
    top: 0;
    left: 0;
    height: 446px !important;
    width: 1677px;
    overflow: hidden;
    display: none;
  }
}

@media screen and (max-width:375px) {
  .main_visual {
    padding-top: 0;
    width: 100%;
    height: 274px;
    background: url(../img/main_bg_sp_425.png) no-repeat;
    overflow: hidden;
    margin: 0 auto 1em auto;
  }

  .main_visual img {
    margin: 7% auto;
    width: 53%;
  }
}

@media screen and (max-width:320px) {
  .main_visual {
    padding-top: 0;
    width: 100%;
    height: 274px;
    background: url(../img/main_bg_sp_425.png) no-repeat;
    overflow: hidden;
    margin: 0 auto 1em auto;
  }

  .main_visual img {
    margin: 7% auto;
    width: 60%;
  }
}