.top {
  background-color: #000;
}
@media screen and (max-width: 768.98px) {
  .top {
    position: relative;
  }
}
.wrapper {
  overflow: hidden;
}
@media print, screen and (min-width: 769px) {
  .wrapper {
    min-width: 1200px;
    background-attachment: fixed;
    background-image: url("/img/bg-top_pc.jpg");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
  }
}
@media screen and (max-width: 768.98px) {
  .wrapper::before {
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: top center;
    background-image: url("/img/bg-top_sp.png");
    background-size: cover;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__wrapper {
    position: relative;
  }
}
.mv_bg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
@media screen and (max-width: 768.98px) {
  .mv_bg {
    top: 0;
  }
}
.visual__main {
  position: relative;
  box-sizing: border-box;
  max-width: 1600px;
  margin: 0 auto;
  height: 845px;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .visual__main {
    height: 1000px;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__main {
    position: absolute;
    height: 0;
    top: 0;
    width: 100%;
    padding-top: 151.875%;
  }
}
.visual__character {
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 768.98px) {
  .visual__character {
    top: 0;
  }
}
.visual__chara01,
.visual__chara02 {
  width: 50%;
  position: relative;
}
@media screen and (max-width: 768.98px) {
  .visual__chara01,
  .visual__chara02 {
    top: 0;
    position: absolute;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__chara01 {
    width: 50%;
    left: -18.4375%;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__chara02 {
    width: 50%;
    left: 50%;
  }
}
.mv_01 {
  position: absolute;
  top: -10px;
  right: 0;
}
@media screen and (max-width: 768.98px) {
  .mv_01 {
    top: 0;
    right: auto;
    width: 136.875%;
    margin-top: 33.33333333333333%;
  }
}
.mv_02 {
  position: absolute;
  top: -66px;
  left: 7px;
}
@media screen and (max-width: 768.98px) {
  .mv_02 {
    left: 0;
    top: 0;
    width: 147.08333333333334%;
    margin-top: 17.708333333333336%;
  }
}
.visual__effect {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 200px;
  width: 480px;
}
@media screen and (max-width: 768.98px) {
  .visual__effect {
    top: 0;
    width: 50%;
    margin-top: 50%;
  }
}
.mv_effect {
  width: 100%;
}
.top-shop-button {
  opacity: 0;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 20;
}
.top-shop-button a {
  display: inline-block;
}
@media screen and (max-width: 768.98px) {
  .top-shop-button {
    bottom: 10px;
    right: 10px;
    width: 100px;
  }
}
.top-shop-button img {
  filter: drop-shadow(0 0 10px #fff);
  animation: shadowAnimation 2s infinite alternate ease;
}
.visual__mv-logo {
  position: relative;
  z-index: 2;
  left: 50%;
  transform: translate(-49%, 0);
  margin-left: 5px;
  max-width: 382px;
}
@media print, screen and (min-width: 769px) {
  .visual__mv-logo {
    top: 350px;
  }
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .visual__mv-logo {
    top: 650px;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__mv-logo {
    position: absolute;
    width: 58.333333333333336%;
    bottom: 36.45833333333333%;
  }
}
.mv_logo_01 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  max-width: 382px;
}
.canvas_parent {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  max-width: 382px;
}
.txt_top-copy {
  opacity: 0;
  position: absolute;
  width: 194px;
  top: 108px;
  left: 21%;
  transform: translateX(-50%);
}
.txt_top-copy img {
  width: 100%;
}
@media screen and (max-width: 768.98px) {
  .txt_top-copy {
    width: 22.8125%;
    margin-top: 40.729166666666664%;
    z-index: 5;
    position: absolute;
    transform: translateX(0);
    left: 0;
    top: 0;
  }
}
.visual__parts {
  position: absolute;
  right: 20px;
  z-index: 5;
  opacity: 0;
  top: 25%;
}
.visual__parts img {
  width: 100%;
}
@media screen and (min-width: 769px) and (max-width: 1024px) {
  .visual__parts {
    top: 10%;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__parts {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    padding-top: 138.54166666666669%;
  }
}
@media screen and (max-width: 768.98px) {
  .new-top-wrap-video {
    position: static;
  }
}
@media screen and (max-width: 768.98px) {
  .new-top-video {
    width: 84vw;
    margin: 0 auto;
  }
}
.new-top-video__thumb {
  -o-object-fit: cover;
  object-fit: cover;
}
@media print, screen and (min-width: 769px) {
  .new-top-video__thumb {
    height: 225px;
  }
}
@media screen and (max-width: 768.98px) {
  .new-top-video__thumb {
    height: 47.2vw;
  }
}
.new-top-video span {
  pointer-events: none;
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 140px;
  transform: translate(-50%, -50%);
}
@media screen and (max-width: 768.98px) {
  .new-top-list {
    display: none;
  }
}
@media screen and (max-width: 768.98px) {
  #new-top {
    margin-top: 30px;
  }
}
#new-top .wrap-new-top {
  position: relative;
  width: 991px;
  height: 351px;
  margin: -35px auto 0;
  background-image: url("/img/new-top-bg.png");
  background-repeat: no-repeat;
  background-size: contain;
  box-sizing: border-box;
}
@media screen and (max-width: 768.98px) {
  #new-top .wrap-new-top {
    width: 82vw;
    height: 63.2vw;
    margin: 0 auto 40px;
    background-image: url("/img/new-top-bg-sp.png");
    background-size: contain;
    background-repeat: no-repeat;
  }
}
@media screen and (max-width: 768.98px) {
  #new-top .ttl {
    position: absolute;
    width: 132px;
    top: 0;
    left: 50%;
    margin: -25px 0 0 -65px;
  }
}
@media screen and (max-width: 768.98px) {
  #new-top .btn-wrap {
    flex-direction: column;
  }
}
#new-top .sns-wrap {
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  position: relative;
  z-index: 5;
}
@media print, screen and (min-width: 769px) {
  #new-top .sns-wrap {
    width: 706px;
    margin: 3.1vw auto 0vw auto;
  }
}
@media screen and (max-width: 768.98px) {
  #new-top .sns-wrap {
    margin: 31px auto 0px auto;
  }
}
@media print, screen and (min-width: 769px) {
  .visual__parts .visual__btn-list,
  .visual__parts .txt_spec,
  .visual__parts .visual__dl-list {
    display: none;
  }
}
@media print, screen and (min-width: 769px) {
  .visual__logo {
    display: none;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__logo {
    text-align: center;
    margin-top: 2.777777777777778%;
    position: absolute;
    top: 0;
    left: 3.125%;
    width: 32.29166666666667%;
    z-index: 10;
    opacity: 0;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__logo > img {
    display: block;
  }
}
@media screen and (max-width: 768.98px) {
  .visual__logo .txt_spec02 {
    margin-top: 2.777777777777778%;
    position: relative;
    left: 15%;
    width: 56.111111111111114%;
  }
}
.active .mv_effect {
  animation: mv_effect 0.3s linear 2.8s 1 backwards;
  opacity: 0;
}
.active .mv_logo_01,
.active .canvas_parent {
  animation: mv_logo 0.3s ease 3s 1 backwards;
}
.active .mv_bg {
  animation: mv_bg 0.5s linear 2.8s 1 backwards;
}
.active .mv_01 {
  animation: visual__chara01 2s ease 1s 1 backwards;
}
.active .mv_02 {
  animation: visual__chara02 2s ease 1s 1 backwards;
}
@media screen and (max-width: 768.98px) {
  .active .mv_bg {
    animation: mv_bg 0.5s ease 2.8s 1 backwards;
  }
  .active .mv_01 {
    animation: visual__chara01_sp 2s ease 1s 1 backwards;
  }
  .active .mv_02 {
    animation: visual__chara02_sp 2s ease 1s 1 backwards;
  }
}
.visual {
  visibility: hidden;
}
.visual .canvas_parent {
  opacity: 0;
}
.active {
  visibility: visible;
}
.active .canvas_parent {
  opacity: 1;
}
@-moz-keyframes shadowAnimation {
  0% {
    filter: drop-shadow(0 0 10px #fff);
  }
  100% {
    filter: drop-shadow(0 0 5px #fff);
  }
}
@-webkit-keyframes shadowAnimation {
  0% {
    filter: drop-shadow(0 0 10px #fff);
  }
  100% {
    filter: drop-shadow(0 0 5px #fff);
  }
}
@-o-keyframes shadowAnimation {
  0% {
    filter: drop-shadow(0 0 10px #fff);
  }
  100% {
    filter: drop-shadow(0 0 5px #fff);
  }
}
@keyframes shadowAnimation {
  0% {
    filter: drop-shadow(0 0 10px #fff);
  }
  100% {
    filter: drop-shadow(0 0 5px #fff);
  }
}
@-moz-keyframes mv_bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes mv_bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-o-keyframes mv_bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mv_bg {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes visual__chara01 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    right: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  60% {
    right: 40px;
  }
  80% {
    right: 300px;
  }
  90% {
    right: -20px;
  }
  95% {
    right: 10px;
  }
  100% {
    right: 0;
  }
}
@-webkit-keyframes visual__chara01 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    right: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  60% {
    right: 40px;
  }
  80% {
    right: 300px;
  }
  90% {
    right: -20px;
  }
  95% {
    right: 10px;
  }
  100% {
    right: 0;
  }
}
@-o-keyframes visual__chara01 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    right: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  60% {
    right: 40px;
  }
  80% {
    right: 300px;
  }
  90% {
    right: -20px;
  }
  95% {
    right: 10px;
  }
  100% {
    right: 0;
  }
}
@keyframes visual__chara01 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    right: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    right: 60px;
  }
  60% {
    right: 40px;
  }
  80% {
    right: 300px;
  }
  90% {
    right: -20px;
  }
  95% {
    right: 10px;
  }
  100% {
    right: 0;
  }
}
@-moz-keyframes visual__chara02 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    left: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  60% {
    left: 40px;
  }
  80% {
    left: 300px;
  }
  90% {
    left: -20px;
  }
  95% {
    left: 10px;
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes visual__chara02 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    left: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  60% {
    left: 40px;
  }
  80% {
    left: 300px;
  }
  90% {
    left: -20px;
  }
  95% {
    left: 10px;
  }
  100% {
    left: 0;
  }
}
@-o-keyframes visual__chara02 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    left: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  60% {
    left: 40px;
  }
  80% {
    left: 300px;
  }
  90% {
    left: -20px;
  }
  95% {
    left: 10px;
  }
  100% {
    left: 0;
  }
}
@keyframes visual__chara02 {
  0% {
    opacity: 0;
    transform: scale(1.8);
    left: 60px;
  }
  10% {
    transform: scale(0.8);
  }
  15% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  50% {
    opacity: 1;
    transform: scale(1);
    left: 60px;
  }
  60% {
    left: 40px;
  }
  80% {
    left: 300px;
  }
  90% {
    left: -20px;
  }
  95% {
    left: 10px;
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes visual__chara01_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(-10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(-10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  60% {
    transform: translateX(-2.083333333333333%);
  }
  80% {
    transform: translateX(-37.5%);
  }
  95% {
    transform: translateX(4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes visual__chara01_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(-10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(-10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  60% {
    transform: translateX(-2.083333333333333%);
  }
  80% {
    transform: translateX(-37.5%);
  }
  95% {
    transform: translateX(4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@-o-keyframes visual__chara01_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(-10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(-10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  60% {
    transform: translateX(-2.083333333333333%);
  }
  80% {
    transform: translateX(-37.5%);
  }
  95% {
    transform: translateX(4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@keyframes visual__chara01_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(-10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(-10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(-10.416666666666668%);
  }
  60% {
    transform: translateX(-2.083333333333333%);
  }
  80% {
    transform: translateX(-37.5%);
  }
  95% {
    transform: translateX(4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes visual__chara02_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  60% {
    transform: translateX(4.166666666666666%);
  }
  80% {
    transform: translateX(37.5%);
  }
  95% {
    transform: translateX(-4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@-webkit-keyframes visual__chara02_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  60% {
    transform: translateX(4.166666666666666%);
  }
  80% {
    transform: translateX(37.5%);
  }
  95% {
    transform: translateX(-4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@-o-keyframes visual__chara02_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  60% {
    transform: translateX(4.166666666666666%);
  }
  80% {
    transform: translateX(37.5%);
  }
  95% {
    transform: translateX(-4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@keyframes visual__chara02_sp {
  0% {
    opacity: 0;
    transform: scale(1.5) translateX(10.416666666666668%);
  }
  10% {
    transform: scale(0.8) translateX(10.416666666666668%);
  }
  15% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  50% {
    opacity: 1;
    transform: scale(1) translateX(10.416666666666668%);
  }
  60% {
    transform: translateX(4.166666666666666%);
  }
  80% {
    transform: translateX(37.5%);
  }
  95% {
    transform: translateX(-4.166666666666666%);
  }
  100% {
    left: 0;
  }
}
@-moz-keyframes mv_effect {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-webkit-keyframes mv_effect {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-o-keyframes mv_effect {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes mv_effect {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.8);
  }
}
@-moz-keyframes mv_logo {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  70% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes mv_logo {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  70% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes mv_logo {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  70% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
@keyframes mv_logo {
  0% {
    opacity: 0;
    transform: scale(1.8);
  }
  70% {
    transform: scale(0.8);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}