.cover_confetti {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 20000;
}

button {
  cursor: pointer;
}

.main_header {
  position: relative;
  width: 100%;
  height: 51.7vw;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(../img/kv/kv_bg.jpg);
  box-shadow: 0px 0px 1vw rgba(0, 0, 0, 0.3);
}

.main_kv {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.main_kv:before, .main_kv:after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  z-index: 110;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  pointer-events: none;
}

.main_kv:before {
  top: 0;
  height: 20vw;
  background-image: url(../img/kv/kv_balloon_top.png), url(../img/kv/kv_flag.png);
}

.main_kv:after {
  top: 28.3vw;
  height: 18.7vw;
  background-image: url(../img/kv/kv_balloon_bottom.png);
}

.main_kv .main_kv-logo {
  position: absolute;
  top: 0;
  padding: 25% 0 0;
  width: 100%;
  text-align: center;
  z-index: 131;
}

.main_kv .main_kv-logo img {
  display: inline-block;
  width: 25%;
}

.main_kv .main_kv_chara-left,
.main_kv .main_kv_chara-right {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
}

.main_kv .main_kv_chara-left li,
.main_kv .main_kv_chara-right li {
  position: absolute;
  top: 3vw;
  width: 21vw;
  height: 30.65vw;
  transition: all 1000ms ease-out;
  transform-origin: center center;
  opacity: 0;
}

.main_kv .main_kv_chara-left li .front,
.main_kv .main_kv_chara-right li .front {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(0deg);
  transition: ease-out 0.5s transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  background-image: url(../img/kv/card_front.png);
}

.main_kv .main_kv_chara-left li .front img,
.main_kv .main_kv_chara-right li .front img {
  width: 100%;
  padding: 0.8vw 1vw;
  box-sizing: border-box;
}

.main_kv .main_kv_chara-left li .back,
.main_kv .main_kv_chara-right li .back {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateY(-180deg);
  transition: ease-out 0.5s transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center top;
  background-image: url(../img/kv/card_back_base.png);
}

.main_kv .main_kv_chara-left li .back img,
.main_kv .main_kv_chara-right li .back img {
  width: 100%;
  padding: 0.8vw 1vw;
  box-sizing: border-box;
}

.main_kv .main_kv_chara-left li img,
.main_kv .main_kv_chara-right li img {
  width: 100%;
}

@-webkit-keyframes card_flip_front_left {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(180deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

@keyframes card_flip_front_left {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(180deg);
  }
  100% {
    transform: perspective(1000px) rotateY(360deg);
  }
}

@-webkit-keyframes card_flip_back_left {
  0% {
    transform: perspective(1000px) rotateY(-180deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(180deg);
  }
}

@keyframes card_flip_back_left {
  0% {
    transform: perspective(1000px) rotateY(-180deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(0deg);
  }
  100% {
    transform: perspective(1000px) rotateY(180deg);
  }
}

@-webkit-keyframes ready_to_show_left {
  0% {
    transform: translate(-34.4vw, 9.4vw) scale(0.86);
  }
  700% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes ready_to_show_left {
  0% {
    transform: translate(-34.4vw, 9.4vw) scale(0.86);
  }
  700% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}

@-webkit-keyframes show_to_hide_left {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0;
    transform: translate(0, 0) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate(-70vw, 9.4vw) scale(1);
  }
}

@keyframes show_to_hide_left {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0;
    transform: translate(0, 0) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate(-70vw, 9.4vw) scale(1);
  }
}

@-webkit-keyframes card_flip_front_right {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(-180deg);
  }
  100% {
    transform: perspective(1000px) rotateY(-360deg);
  }
}

@keyframes card_flip_front_right {
  0% {
    transform: perspective(1000px) rotateY(0deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(-180deg);
  }
  100% {
    transform: perspective(1000px) rotateY(-360deg);
  }
}

@-webkit-keyframes card_flip_back_right {
  0% {
    transform: perspective(1000px) rotateY(-180deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(-360deg);
  }
  100% {
    transform: perspective(1000px) rotateY(-540deg);
  }
}

@keyframes card_flip_back_right {
  0% {
    transform: perspective(1000px) rotateY(-180deg);
  }
  40%, 60% {
    transform: perspective(500px) rotateY(-360deg);
  }
  100% {
    transform: perspective(1000px) rotateY(-540deg);
  }
}

@-webkit-keyframes show_to_hide_right {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0;
    transform: translate(0, 0) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate(70vw, 9.4vw) scale(1);
  }
}

@keyframes show_to_hide_right {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  50% {
    opacity: 0;
    transform: translate(0, 0) scale(0.86);
  }
  100% {
    opacity: 0;
    transform: translate(70vw, 9.4vw) scale(1);
  }
}

.main_kv .main_kv_chara-left {
  left: 0;
}

.main_kv .main_kv_chara-left li {
  right: -0.2vw;
  transform: translate(-70vw, 9.4vw) scale(0.86);
  opacity: 0;
  will-change: animation, transform, opacity;
}

.main_kv .main_kv_chara-left li[data-state="show"] {
  transform: translate(0, 0);
  opacity: 1;
  z-index: 110;
}

.main_kv .main_kv_chara-left li[data-state="show"] .front {
  -webkit-animation: card_flip_front_left 2000ms ease-out 1000ms 1 forwards;
  animation: card_flip_front_left 2000ms ease-out 1000ms 1 forwards;
}

.main_kv .main_kv_chara-left li[data-state="show"] .back {
  -webkit-animation: card_flip_back_left 2000ms ease-out 1000ms 1 forwards;
  animation: card_flip_back_left 2000ms ease-out 1000ms 1 forwards;
}

.main_kv .main_kv_chara-left li[data-state="ready"] {
  transform: translate(-34.4vw, 9.4vw) scale(0.86);
  opacity: .5;
  z-index: 108;
}

.main_kv .main_kv_chara-left li[data-state="hide"] {
  transform: translate(0, 0) scale(0.86);
  opacity: 0;
  z-index: 106;
}

.main_kv .main_kv_chara-left li[data-state="out"] {
  transform: translate(-70vw, 9.4vw) scale(0.86);
  opacity: 0;
  z-index: 105;
}

.main_kv .main_kv_chara-right {
  right: 0;
}

.main_kv .main_kv_chara-right li {
  left: -0.2vw;
  transform: translate(70vw, 9.4vw) scale(0.86);
  opacity: 0;
  will-change: animation, transform, opacity;
}

.main_kv .main_kv_chara-right li[data-state="show"] {
  transform: translate(0, 0);
  opacity: 1;
  z-index: 110;
}

.main_kv .main_kv_chara-right li[data-state="show"] .front {
  -webkit-animation: card_flip_front_right 2000ms ease-out 1000ms 1 forwards;
  animation: card_flip_front_right 2000ms ease-out 1000ms 1 forwards;
}

.main_kv .main_kv_chara-right li[data-state="show"] .back {
  -webkit-animation: card_flip_back_right 2000ms ease-out 1000ms 1 forwards;
  animation: card_flip_back_right 2000ms ease-out 1000ms 1 forwards;
}

.main_kv .main_kv_chara-right li[data-state="ready"] {
  transform: translate(34.4vw, 9.4vw) scale(0.86);
  opacity: .5;
  z-index: 108;
}

.main_kv .main_kv_chara-right li[data-state="hide"] {
  transform: translate(0, 0) scale(0.86);
  z-index: 106;
}

.main_kv .main_kv_chara-right li[data-state="out"] {
  transform: translate(70vw, 9.4vw) scale(0.86);
  opacity: 0;
  z-index: 105;
}

.main_kv .main_kv_chara_btn {
  position: absolute;
  top: 14.4vw;
  left: 25%;
  width: 50%;
  z-index: 140;
}

.main_kv .main_kv_chara_btn .main_kv_chara_btn-left,
.main_kv .main_kv_chara_btn .main_kv_chara_btn-right {
  position: absolute;
  top: 0;
  width: 4vw;
  height: auto;
  font-size: 0;
}

.main_kv .main_kv_chara_btn .main_kv_chara_btn-left button,
.main_kv .main_kv_chara_btn .main_kv_chara_btn-right button {
  width: 100%;
  height: auto;
}

.main_kv .main_kv_chara_btn .main_kv_chara_btn-left button img,
.main_kv .main_kv_chara_btn .main_kv_chara_btn-right button img {
  width: 100%;
}

.main_kv .main_kv_chara_btn .main_kv_chara_btn-left {
  left: 0;
}

.main_kv .main_kv_chara_btn .main_kv_chara_btn-right {
  right: 0;
}

.main_kv .main_kv-bn {
  position: absolute;
  bottom: 5vw;
  left: 29%;
  width: 42%;
  font-size: 0;
  text-align: center;
  z-index: 130;
}

.main_kv .main_kv-bn li {
  display: inline-block;
  width: 48%;
}

.main_kv .main_kv-bn li:last-child {
  margin: 0 0 0 4%;
}

.main_kv .main_kv-bn li a {
  display: inline-block;
  width: 100%;
  transition: all 300ms ease-out;
}

.main_kv .main_kv-bn li a:hover {
  transform: scale(0.99);
}

.main_kv .main_kv-bn li a img {
  width: 100%;
}

.main_kv .main_kv-badge {
  position: absolute;
  top: 1.9vw;
  left: 15.5vw;
  width: 12.6vw;
  height: 13vw;
  z-index: 132;
}

.main_kv .main_kv-badge a {
  display: inline-block;
  width: 100%;
  height: 100%;
  font-size: 0;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url(../img/kv/btn_kv_ptcp.png);
}

.main_menu .main_menu_wrap {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 14vw;
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-image: url(../img/kv/menu_bg.png);
  z-index: 120;
}

.main_menu .main_menu_wrap .main_menu_list {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4.4vw;
  font-size: 0;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.main_menu .main_menu_wrap .main_menu_list li {
  display: inline-block;
  margin: 0 1.4vw;
  height: 100%;
}

.main_menu .main_menu_wrap .main_menu_list li:nth-child(1) {
  width: 6.66vw;
}

.main_menu .main_menu_wrap .main_menu_list li:nth-child(2) {
  width: 9.98vw;
}

.main_menu .main_menu_wrap .main_menu_list li:nth-child(3) {
  width: 8.44vw;
}

.main_menu .main_menu_wrap .main_menu_list li:nth-child(4) {
  width: 14.93vw;
}

.main_menu .main_menu_wrap .main_menu_list li a {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 1vw;
  width: 100%;
  height: 100%;
}

.main_menu .main_menu_wrap .main_menu_list li a img {
  display: inline-block;
  width: 100%;
}

.main_menu .main_menu-sns {
  position: absolute;
  top: 1.6vw;
  right: 2.6vw;
  width: 7.4vw;
  height: 3vw;
  font-size: 0;
  z-index: 132;
}

.main_menu .main_menu-sns li {
  display: inline-block;
  margin: 0 8%;
  width: 34%;
}

.main_menu .main_menu-sns li button {
  display: inline-block;
  width: 100%;
}

.main_menu .main_menu-sns li button img {
  width: 100%;
}

.main_menu-btn {
  display: none;
}

@media screen and (max-width: 768px) {
  .cover_confetti {
    width: 100vw;
    height: 100vh;
  }
  .cover_confetti canvas {
    width: 100vw;
    height: 100vh;
  }
  .main_header {
    height: 208vw;
    background-image: url(../img/kv/sp/kv_bg.jpg);
    box-shadow: 0px 0px 2vw rgba(0, 0, 0, 0.3);
  }
  .main_header[data-state="badge_hide"] {
    height: 168vw;
  }
  .main_kv {
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center bottom;
    background-image: url(../img/kv/sp/menu_bg.png);
  }
  .main_kv:before {
    top: 0;
    height: 1400vw;
    background-position: center 24vw, center top;
    background-image: url(../img/kv/sp/kv_balloon.png), url(../img/kv/sp/kv_flag.png);
    z-index: 0;
  }
  .main_kv:after {
    top: 0;
    height: 0;
    background-image: none;
  }
  .main_kv .main_kv-logo {
    top: 1.2vw;
    padding: 0;
  }
  .main_kv .main_kv-logo img {
    width: 53vw;
  }
  .main_kv .main_kv_chara-left li,
  .main_kv .main_kv_chara-right li {
    width: 50vw;
    height: 72.65vw;
    transition: all 600ms ease-out;
  }
  .main_kv .main_kv_chara-left li .front img,
  .main_kv .main_kv_chara-right li .front img {
    padding: 2.16vw 2.5vw 0;
  }
  .main_kv .main_kv_chara-left {
    top: 31vw;
    left: 5.8vw;
  }
  .main_kv .main_kv_chara-left li[data-state="show"] {
    transform: translate(0, 0) rotate(-10deg);
  }
  .main_kv .main_kv_chara-left li[data-state="ready"] {
    transform: translate(-50vw, 9.4vw) scale(0.86);
    opacity: 0;
  }
  .main_kv .main_kv_chara-left li[data-state="hide"] {
    transform: translate(0, 0) rotate(-10deg) scale(0.9);
    -webkit-animation: none;
    animation: none;
    opacity: 0;
  }
  .main_kv .main_kv_chara-right {
    top: 59vw;
    right: 5.8vw;
  }
  .main_kv .main_kv_chara-right li[data-state="show"] {
    transform: translate(0, 0) rotate(10deg);
  }
  .main_kv .main_kv_chara-right li[data-state="ready"] {
    transform: translate(50vw, 9.4vw) scale(0.86);
    opacity: 0;
  }
  .main_kv .main_kv_chara-right li[data-state="hide"] {
    transform: translate(0, 0) rotate(10deg) scale(0.9);
    -webkit-animation: none;
    animation: none;
    opacity: 0;
  }
  .main_kv .main_kv_chara_btn {
    top: 136vw;
    left: 0;
    right: 0;
    margin: auto;
    width: 17vw;
  }
  .main_kv .main_kv_chara_btn .main_kv_chara_btn-left,
  .main_kv .main_kv_chara_btn .main_kv_chara_btn-right {
    width: 7vw;
  }
  .main_kv .main_kv-bn {
    bottom: 1vw;
    left: 3vw;
    width: 94vw;
    height: 15vw;
  }
  .main_kv .main_kv-bn li:last-child {
    margin: 0 0 0 2.4vw;
  }
  .main_kv .main_kv-badge {
    top: 148.9vw;
    left: 4vw;
    width: 92vw;
    height: 38vw;
  }
  .main_kv .main_kv-badge a {
    background-image: url(../img/kv/sp/btn_kv_ptcp.png);
  }
  .main_menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 40000;
    transition: all 400ms ease-out;
    transform: translateX(100%);
  }
  .main_menu[data-state="open"] {
    transform: translateX(0%);
  }
  .main_menu .main_menu_wrap {
    top: 0;
    height: 110vw;
    background-image: none;
    z-index: 10120;
  }
  .main_menu .main_menu_wrap .main_menu_list {
    display: block;
    top: 30vw;
    height: 80vw;
  }
  .main_menu .main_menu_wrap .main_menu_list li {
    display: block;
    margin: 0 0 10vw;
    height: 10vw;
  }
  .main_menu .main_menu_wrap .main_menu_list li:nth-child(1), .main_menu .main_menu_wrap .main_menu_list li:nth-child(2), .main_menu .main_menu_wrap .main_menu_list li:nth-child(3), .main_menu .main_menu_wrap .main_menu_list li:nth-child(4) {
    width: 100vw;
  }
  .main_menu .main_menu_wrap .main_menu_list li:nth-child(1) a img, .main_menu .main_menu_wrap .main_menu_list li:nth-child(2) a img, .main_menu .main_menu_wrap .main_menu_list li:nth-child(3) a img, .main_menu .main_menu_wrap .main_menu_list li:nth-child(4) a img {
    width: auto;
    height: 42%;
  }
  .main_menu .main_menu-sns {
    top: 130vw;
    left: 38%;
    width: 24%;
    z-index: 10122;
  }
  .main_menu-btn {
    display: block;
    position: fixed;
    top: 1vw;
    right: 1vw;
    width: 13vw;
    height: 13vw;
    font-size: 0;
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
    background-image: url(../img/kv/sp/menu_btn.png);
    z-index: 40140;
  }
  .main_menu-btn[data-state="open"] {
    background-position: right top;
  }
}