@charset "utf-8";

:root{
  --font-size: 10px;
  --font-size--note: 16px;
  --width--contents: 500px;
  --max-width--modal: 500px;
  --min-width--modal: 500px;
  --size-ajust: calc(500 / 750);
}


/* ==================================================
base
================================================== */
html{
  font-size: var(--font-size);
  font-family: sans-serif;
}
img, video{
  width: 100%;
}
a{
  display: block;
}
a, :focus{
  outline: none; -webkit-tap-highlight-color:rgba(0,0,0,0);
}
#wrapper{
  background: #000000;
}
#contents{
  width: var(--width--contents);
  overflow: hidden;
  margin: auto;
  background: #000000;
  position: relative;
}
section{
  position: relative;
}
.content{
  position: relative;
}

.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.no-event{
  pointer-events: none;
}


/* ==================================================
pc
================================================== */
.pcbg{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  background-color: #000000;
  background-image: url("../img/pc_bg.png");
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
}
.pcbg:before{
  content: "";
  display: block;
  width: calc(var(--width--contents) + 8px);
  height: 100%;
  margin: auto;
  background: #fff;
  position: relative;
  z-index: 5;
}
.pcbg:after{
  content: "";
  display: block;
  width: 100%;
  max-width: 1920px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-image: url("../img/pc_bg_title.png");
  background-repeat: no-repeat;
  background-size: auto 96%;
  background-position: min(0px, calc((100vw - 1920px) / 20)) center;
  pointer-events: none;
}
.pcbg-side{
  position: absolute;
  width: calc((100% - var(--width--contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
  transition: 0.2s;
}
.pcbg-side.--left{ position: absolute; top: 0; left: 0; }
.pcbg-side.--right{ position: absolute; top: 0; right: 0; }

.pcbg-left-logo{
  width: calc(20vw * 0.9);
  max-width: calc(384px * 0.9);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-right-qr{
  width: calc(14.895vw * 0.9);
  max-width: calc(286px * 0.9);
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcbg-wrap{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.pcbg-wrap:before{
  content: "";
  display: block;
  width: 50%;
  height: 302px;
  margin: 0 auto 0;
  position: absolute;
  bottom: 0;
  left: 0;
  background: url("../img/pc_bg_dot_left.png") no-repeat bottom right -104px / 654px auto;
  pointer-events: none;
}
.pcbg-wrap:after{
  content: "";
  display: block;
  width: 50%;
  height: 323px;
  margin: 0 auto 0;
  position: absolute;
  top: 0;
  right: 0;
  background: url("../img/pc_bg_dot_right.png") no-repeat bottom left -119px / 654px auto;
  pointer-events: none;
}
@media screen and (max-width: 1100px){
  .pcbg-side.--scale{
    opacity: 0;
  }
}



/* ==================================================
animation
================================================== */
.fade-view{ opacity: 0; }

/* left→right, right→left */
.fade-view.--slide-l2r, .fade-view.--slide-r2l{
  transition: 0.3s;
}
.fade-view.--slide-l2r{ transform: translate( -2rem, 0 ); }
.fade-view.--slide-r2l{ transform: translate( 2rem, 0 ); }

/* fade blur */
.fade-view.--blur{ transition: 0.5s; filter: blur(1rem); }


.fade-view.is-view{
  opacity: 1;
  transform: translate( 0, 0 );
  filter: blur(0);
}



.fade-vote-title{
  opacity: 0;
  filter: blur(1rem);
  transition: 0.3s;
}
.fade-vote-title.is-view{
  opacity: 1;
  transform: translate( 0, 0 );
  filter: blur(0);
}

.fade-vote-pop{
  scale: 0;
}
.fade-vote-pop.is-view{
  animation: animation-pop 0.1s ease both;
}
@keyframes animation-pop{
  0% { scale: 0; }
  80% { scale: 1.1; }
  90% { scale: 0.9; }
  95% { scale: 1.05; }
  100% { scale: 1; }
}


.animation_jump{
  display: block;
  animation: animation__jump 5s 1s ease infinite;
}
@keyframes animation__jump{
  0% { translate: 0 0; }
  3.5% { translate: 0 -1.5rem; }
  7% { translate: 0 0; }
  10.5% { translate: 0 -1.5rem; }
  14% { translate: 0 0; }
  100% { translate: 0 0; }
}


/* ==================================================
ad
================================================== */
.ad.--top{
  margin-top: 8.4%;
}
.ad.--campaign01{
  margin-top: 1.6%;
}
.ad.--campaign02{
  margin-top: 1.066%;
}
.ad-link{
  width: 85.333%;
  margin: -16.6% auto 0;
}



/* ==================================================
top
================================================== */
.top-bg{
  background: url("../img/top/kv.png") no-repeat top center / 100% auto, url("../img/top/bg.png") no-repeat top 69.4rem center / 100% auto;
  padding: 0.8% 0 4.266% 0;
}
.top-logo{
  width: 33.2%;
  margin: 0 0 0 0;
}
.top-catch{
  width: 16.266%;
  margin: -9.4% 2.4% 0 auto;
}
.top-vote{
  width: 39.2%;
  margin: 4% -39.2% 0 auto;
  opacity: 0;
  animation: animation-in 0.3s 1s ease both;
}
@keyframes animation-in{
  0% { margin: 4% -39.2% 0 auto; opacity: 0; }
  100% { margin: 4% 0 0 auto; opacity: 1; }
}
.top-nav{
  margin-top: 2.6%;
}
.top-nav nav{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}
.top-nav nav a{
  width: calc(100% / 3);
}




/* ==================================================
vote
================================================== */
.vote-bg{
  padding: 4.933% 0 4.133%;
  background: url("../img/vote/bg_top.png") no-repeat top 2rem right / 11.733% auto, url("../img/vote/bg_bottom.png") no-repeat bottom right / 55.2% auto;
}
.vote-title{
  width: 82.133%;
  margin: 0 0 0 2.666%;
}
.vote-title.is-view img{
  transform: translate(0, 0);
  opacity: 1;
}
.vote-frame{
  padding-bottom: 191.733%;
  background: url("../img/vote/frame.png") no-repeat top center / 100% auto;
  position: relative;
  margin: -8.4% 0 0;
}
.vote-frame:before, .vote-frame:after{
  content: "";
  display: block;
  position: absolute;
  pointer-events: none;
}
.vote-frame:before{
  width: 27.2%;
  padding-bottom: 62.666%;
  background: url("../img/vote/chara_left.png") no-repeat top center / 100% auto;
  top: 0;
  left: 0;
  margin-top: 8.533%;
}
.vote-frame:after{
  width: 24.266%;
  padding-bottom: 53.333%;
  background: url("../img/vote/chara_right.png") no-repeat top center / 100% auto;
  top: 0;
  right: 0;
  margin-top: 17.866%;
}
.vote-logo{
  width: 65.733%;
  margin: 15.066% auto 0;
  position: relative;
  z-index: 2;
}
.vote-pop{
  width: 37.066%;
  margin: -5.4% 0.8% 0 0;
  position: absolute;
  top: 0;
  right: 0;
}
.vote-item{
  width: 96.266%;
  margin: -0.8% 0 0 0.6%;
  position: relative;
  z-index: 2;
}
.vote-border{
  width: 100%;
  padding-bottom: 11.6%;
  border-top: solid 0.4rem #ff9999;
  border-bottom: solid 0.4rem #ff9999;
  margin: 5.733% 0 0;
  background-color: #000;
  background-image: url("../img/vote/border_text.png");
  background-size: 88.266% auto;
  background-repeat: repeat-x;
  background-position: 0 52%;
  animation: animation-border 10s linear infinite;
}
@keyframes animation-border{
  0% { background-position: 0 52%; }
  100% { background-position: -753% 52%; }
}
.vote-theme{
  width: 94.8%;
  margin: 0% 0 0 3.6%;
}
.vote-link{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 2.6%;
}
.vote-link a{
  width: 49.066%;
  margin: 0 -0.2% 0;
}
.vote-atn{
  width: 93.466%;
  margin: 2.4% auto 0;
  position: relative;
}
.vote-atn:after{
  content: "";
  display: block;
  width: 10.984%;
  padding-bottom: 11.126%;
  background: url("../img/vote/icon_atn.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 50%;
  left: -2%;
  transform: translate(0, -50%);
}




/* ==================================================
update
================================================== */
.update-bg{
  background: url("../img/update/bg.png") no-repeat top center / 100% auto;
}
.update-title{
  width: 95.066%;
  margin: 0 0 0 1.733%;
}
.update-frame{
  padding-bottom: 602.666%;
  background: url("../img/update/frame.png") no-repeat top center / 100% auto;
  position: relative;
  margin: -33.2% 0 0;
  position: relative;
}
/* check1 */
.update-frame:before{
  content: "";
  display: block;
  width: 20.933%;
  padding-bottom: 24.266%;
  background: url("../img/update/check01/icon.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 34.7% 0 0;
}
.update-check01-cap{
  width: 73.333%;
  margin: 22.4% 0 0 25.066%;
  position: relative;
}
.update-check01-type{
  position: relative;
  margin-top: 1.3%;
  padding-bottom: 140.266%;
}
.update-check01-type-image{
  width: 60%;
  margin: 0 0 0 auto;
  position: relative;
  z-index: 2;
}
.update-check01-type-pv{
  width: 59.333%;
  padding-bottom: 104.133%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 4.133% 0 0 5.066%;
  background: #000;
  overflow: hidden;
}
.update-check01-type-pv video{
  width: 96%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.update-check01-type-pv:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/update/check01/type/frame_pv.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}
.update-check01-type-text{
  width: 92.4%;
  margin: 2.666% auto 0;
}
.update-check01-add{
  position: relative;
  padding-bottom: 180%;
  margin-top: -2%;
}
.update-check01-add-nav{
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}
.update-check01-add-nav a{
  position: relative;
}
.update-check01-add-nav a:nth-child(1){
  width: 49.866%;
}
.update-check01-add-nav a:nth-child(2){
  width: calc(100% - 49.866%);
}
.--active01 .update-check01-add-nav a:nth-child(1),
.--active02 .update-check01-add-nav a:nth-child(2){
  pointer-events: none;
}
.--active02 .update-check01-add-nav a:nth-child(1):after,
.--active02 .update-check01-add-nav a:nth-child(2):after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
}
.--active02 .update-check01-add-nav a img{
  opacity: 0;
}
.--active02 .update-check01-add-nav a:nth-child(1):after{
  background: url("../img/update/check01/add/right/tab_off.png") no-repeat bottom center / 100% auto;
}
.--active02 .update-check01-add-nav a:nth-child(2):after{
  background: url("../img/update/check01/add/right/tab_on.png") no-repeat bottom center / 100% auto;
}
.update-check01-add.--active01 .update-check01-add-nav a:nth-child(1){
  pointer-events: none;
}
.update-check01-add-monsters{
  padding-bottom: 151%;
  position: relative;
}

.update-check01-add-monster{
  padding: 8.266% 0 0 0;
}
.monster-pv{
  width: 46.8%;
  padding-bottom: 81.2%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 29.733% 1.333% 0 0;
  background: #000;
  overflow: hidden;
}
.monster-pv:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/update/check01/add/frame_pv.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}

.update-check01-add .update-check01-add-monsters{
  display: none;
}
.update-check01-add.--active01 .update-check01-add-monsters.--list01,
.update-check01-add.--active02 .update-check01-add-monsters.--list02{
  display: block;
}
.monster-pv video{
  position: absolute;
  width: 96%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* list01 */
.update-check01-add-monsters.--list01 .inner:after{
  content: "";
  display: block;
  width: 21.333%;
  padding-bottom: 11.466%;
  background: url("../img/update/check01/add/left/label.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: 27.4% 0 0;
  pointer-events: none;
}
.update-check01-add-monsters.--list01{
  background: url("../img/update/check01/add/left/bg.png") no-repeat top center / 100% auto;
}
.update-check01-add-monsters.--list01 .monster-name{
  width: 63.333%;
  margin: 0 auto 0;
  position: relative;
}
.update-check01-add-monsters.--list01 .monster-name:before{
  content: "";
  display: block;
  width: 143.789%;
  padding-bottom: 126.526%;
  background: url("../img/update/check01/add/left/eff_kira.png") no-repeat top center / 100% auto;
  position: absolute;
  top: -12.9%;
  left: -20.3%;
  pointer-events: none;
}
.update-check01-add-monsters.--list01 .monster-image{
  width: 58.666%;
  margin: 5.2% 0 0 0;
  position: relative;
  z-index: 2;
}
.update-check01-add-monsters.--list01 .monster-text{
  width: 90.266%;
  margin: 5.333% auto 0;
}
/* list02 */
.update-check01-add-monsters.--list02{
  background: url("../img/update/check01/add/right/bg.png") no-repeat top center / 100% auto;
}
.update-check01-add-monsters.--list02 .monster-name{
  width: 49.866%;
  margin: 0 auto 0;
  position: relative;
}
.update-check01-add-monsters.--list02 .monster-name:before{
  content: "";
  display: block;
  width: 158.556%;
  padding-bottom: 35.294%;
  background: url("../img/update/check01/add/right/eff_kira.png") no-repeat top center / 100% auto;
  position: absolute;
  top: -17%;
  left: -27.4%;
  pointer-events: none;
}
.update-check01-add-monsters.--list02 .monster-image{
  width: 57.066%;
  margin: -0.6% 0 0 0;
  position: relative;
  z-index: 2;
}
.update-check01-add-monsters.--list02 .monster-text{
  width: 90.133%;
  margin: 5.333% auto 0;
}

/* check2 */
.update-check02{
  position: relative;
  margin-top: 3%;
}
.update-check02:before{
  content: "";
  display: block;
  width: 20.933%;
  padding-bottom: 24.266%;
  background: url("../img/update/check02/icon.png") no-repeat top center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 5.6% 0 0;
}
.update-check02-cap{
  width: 70.666%;
  margin: 0 0 0 24.666%;
  position: relative;
}
.update-check02-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 9.066%;
}
.update-check02-nav a{
  width: 30.666%;
  margin: 0 0.666%;
}
.update-check02-lists{
  margin: 6.933% 0 0;
  padding-bottom: 142.533%;
  position: relative;
}
.update-check02-lists > div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
  filter: blur(0.05rem);
}
.update-check02.--active01 .update-check02-list01,
.update-check02.--active02 .update-check02-list02,
.update-check02.--active03 .update-check02-list03{
  opacity: 1;
  filter: blur(0);
}
.update-check02-nav a{
  position: relative;
}
.update-check02.--active01 .update-check02-nav a:nth-child(1),
.update-check02.--active02 .update-check02-nav a:nth-child(2),
.update-check02.--active03 .update-check02-nav a:nth-child(3){
  pointer-events: none;  
}
.update-check02 .update-check02-nav a:nth-child(1):after,
.update-check02 .update-check02-nav a:nth-child(2):after,
.update-check02 .update-check02-nav a:nth-child(3):after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.update-check02.--active01 .update-check02-nav a:nth-child(1):after{
  background: url("../img/update/check02/nav_01.png") no-repeat bottom center / 100% auto;
}
.update-check02.--active02 .update-check02-nav a:nth-child(2):after{
  background: url("../img/update/check02/nav_02.png") no-repeat bottom center / 100% auto;
}
.update-check02.--active03 .update-check02-nav a:nth-child(3):after{
  background: url("../img/update/check02/nav_03.png") no-repeat bottom center / 100% auto;
}





/* ==================================================
campaign
================================================== */
.campaign-bg{
  background: url("../img/campaign/bg.png") no-repeat top center / 100% auto, url("../img/campaign/bg2.png") no-repeat top 75.5% center / 100% auto;
}
.campaign-title{
  width: 98.266%;
  margin: 5.866% 0 0 1.6%;
}
/* ingame */
.campaign-ingame{
  padding-bottom: 247.6%;
  position: relative;
  background: url("../img/campaign/ingame/bg.png") no-repeat top center / 100% auto;
  margin: -16.2% 0 0;
}
.campaign-ingame-cap{
  width: 84.8%;
  margin: 7.333% 0 0 1.2%;
}
.campaign-ingame-lists{
  margin-top: -6%;
}
.campaign-ingame-list{
  width: 97.6%;
}
.campaign-ingame-list.--right{
  margin: 0 0 0 auto;
}
.campaign-ingame-list.--left{
  margin: 0 auto 0 0;
}
.campaign-ingame-list:not(:last-child){
  margin-bottom: 4%;
}
/* sns */
.campaign-sns{
  padding-bottom: 151.066%;
  position: relative;
  background: url("../img/campaign/sns/bg.png") no-repeat top center / 100% auto;
  margin: 8.533% 0 0;
}
.campaign-sns-cap{
  width: 97.2%;
  margin: 2% 0 0 0;
}
.campaign-sns-lists{
  margin-top: -15.6%;
}
.campaign-sns-list{
  width: 97.6%;
}
.campaign-sns-list.--right{
  margin: 0 0 0 auto;
}
.campaign-sns-list.--left{
  margin: 0 auto 0 0;
}
.campaign-sns-list:not(:last-child){
  margin-bottom: 4%;
}
.campaign-sns-list a{
  position: absolute;
  width: 89.645%;
  top: 64%;
  left: 4%;
}



/* ==================================================
footer
================================================== */
footer .content{
  padding:21.066% 0 5.333%;
}
.footer-pagetop{
  width: 25.066%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -13% 0 0 0;
}
.footer-notes{
  width: 77.066%;
  margin: 0 auto 0;
}
.footer-sns{
  margin: 7.4% 0 0;
}
.footer-sns-text{
  width: 49.2%;
  margin: auto;
}
.footer-sns-link{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 4% 0 0;
}
.footer-sns-link a{
  width: 46.666%;
  margin: 0 0.866%;
}
footer hr{
  border: none;
  width: 76.266%;
  padding-bottom: 0.8%;
  background: url("../img/footer/hr.png") no-repeat top center / 100% auto;
  margin: 8% auto 0;
}
.footer-spec{
  width: 91.733%;
  margin: 10.266% auto 0;
}
.footer-support{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 10.933% 0 0;
}
.footer-support a{
  margin: 0 3.8%;
}
.footer-support-policy{
  width: 32.4%;
}
.footer-support-contact{
  width: 20.666%;
}
.fooeter-copyright{
  width: 51.6%;
  margin: 10% auto 0;
}




/* ==================================================
modal
================================================== */
.snlib--modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.8);
  overflow: auto;
  display: none;
  opacity: 0;
  z-index: 99999;
}
.snlib--modal .modal__outWrap{
  display: table;
  width: 100%;
  height: 100%;
}
.snlib--modal .modal__inWrap{
  display: table-cell;
  width: 100%;
  height: 100%;
  margin: 0 auto 0;    
  padding: 5rem 0 5rem;
  text-align: center;
  vertical-align: middle;
}
.snlib--modal .modal__content{
  width: 93.333%;
  max-width: var(--max-width--modal);
  min-width: var(--min-width--modal);
  background-color: #fff;
  box-sizing: border-box;
  text-align: initial;
  margin: auto;
  position: relative;
  padding: 2rem;
}

/* notes */
.---modal-notes .modal__inWrap{
  padding: 10rem 0 20rem;
}
.---modal-notes .modal__content{
  width: 94.4%;
  padding: 0;
  border: solid 0.6rem #6714cd;
  border-radius: 3rem;
  background-color: #662686;
}
.---modal-notes .modal__close_bottom{
  width: 41.666%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -25%;
}

.---modal-notes .modal__main{
  padding: 10% 7% 7%;
}
.note_title{
  width: 31.857%;
  margin: auto;
}
.note_text, .note_text a{
  font-size: var(--font-size--note);
  line-height: calc(var(--font-size--note) * 1.5);
  margin-top: 10%;
  color: #fff;
}
.note_text li{
	line-height: 200%;
	padding-left: 1em;
	transform: rotate(0.03deg);
}
.note_text li:before {
	display: inline-block;
	content: "・";
	width: 1em;
	margin-left: -1em;
	color: #fff;
}
.note_text li.no_dot:not(.indent){
  padding-left: 0;
}
.note_text li.no_dot.indent{
  text-indent: -1em;
}
.note_text li.no_dot:before {
	display: inline-block;
	content: "";
	width: auto;
	margin-left: 0;
}
.note_text li.no_indent{
  padding-left: 0em;
}
.note_text li.tl{
	padding-left: 0;  
}
.note_text li.tl:before {
	display: inline-block;
	content: "";
	width: 0;
	margin-left: 0;
}
.note_text li .in li:before {
	display: inline-block;
	content: "";
	width: 0;
	margin-left: 0;
}
.note_text li.mg {
	margin:5% 0 0 ;
  padding-left: 0;
}
.note_text li.mg:first-child {
	margin:0 0 0 ;
}
.note_text li a{
	color: #ffd35d;
  display: inline;
}
.note_text li a:hover{
	color: #00B3FF;
}