@charset "utf-8";

:root{
  --font-size--base: 10px;
  --font-size--note: 16px;
  --animation--button--jump: -10px;
  --width--contents: 500px;
  --max-width--modal: 500px;
  --min-width--modal: 500px;
}

/* ==============================
PC用
*/
.bg__pc{
  position: fixed;
  width: 100%;
  height: 100%;
  min-height: 1080px;
  top: 0;
  left: 0;
  background-image: url("../img/pc_bg.jpg");
  background-size: cover;
  background-position: center top;
}
.bg__pc:before{
  content: "";
  display: block;
  width: calc(var(--width--contents) + 10px);
  height: 100%;
  margin: auto;
  background-color: #fff;
  position: relative;
  z-index: 5;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.6);
}
.pc_logo{
  left: 0;
}
.pc_logo img{
  width: calc(253px * 1);
}
.pc_qr{
  right: 0;
}
.pc_qr img{
  width: calc(312px * 1);
}
.pc_logo, .pc_qr {
  position: absolute;
  width: calc((100% - var(--width--contents)) / 2);
  height: 100%;
  top: 0;
  z-index: 1;
  position: fixed;
  display: flex;
}
.side_area{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* ==============================
common
*/
html{
    font-size: var(--font-size--base);
    font-family: 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', sans-serif;
}
img, video{
  width: 100%;
}
a{
  font-size: 0;
}
a, :focus, .mission_item{
  outline: none;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
.dn{
  visibility: hidden;
}
.contents{
  width: var(--width--contents);
  overflow: hidden;
  margin: auto;
}
.contents:before{
  content: "";
  display: block;
  width: var(--width--contents);
  height: 100vh;
  background: url("../img/bg.jpg") center / 100% auto;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

section .content{
  position: relative;
}

.ttl__arrow{
  position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    margin-top: -6.4%;
}
.ttl__arrow > div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.ttl__arrow > div span{
  opacity: 0.5;
}
.ttl__arrow > div span:nth-child(1){
  width: 11.733%;
  animation: animation__arrow 2s 0s ease-in-out infinite forwards;
}
.ttl__arrow > div span:nth-child(2){
  width: 11.733%;
  margin: 1.6% 0 0 -4.6%;
  animation: animation__arrow 2s 0.5s ease-in-out infinite forwards;
}
.ttl__arrow > div span:nth-child(3){
  width: 9.333%;
  margin: 3% 0 0 -4.6%;
  animation: animation__arrow 2s 1s ease-in-out infinite forwards;
}
.ttl__arrow > div.ta__left{
  left: -9.4%;
}
.ttl__arrow > div.ta__right{
  left: initial;
  right: -9.4%;
  scale: -1 1;
}
@keyframes animation__arrow{
	0%   { opacity: 0.5; }
	10%  { opacity: 1;}
  30%  { opacity: 0.5;}
}
	



/* ==============================
animation
*/
.js_fade{
  transform: translateY(4rem);
  opacity: 0;
}
.js_fade.is-active{
  animation: animationjs_fadeIn 0.4s ease both;
}
@keyframes animationjs_fadeIn{
  100% { transform: translateY(0); opacity: 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; }
}


/* ==============================
information
*/
.information{
  position: relative;
  z-index: 2;
}
.info__play{
  width: 83.466%;
  margin: 0 auto -16.2%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}


/* ==============================
nav
*/
nav{
  padding-bottom: 25.333%;
  position: relative;
}
nav .content{
  display: flex;
  flex-wrap: wrap;
}
nav a:nth-child(1){
  width: 33.733%;
}
nav a:nth-child(2){
  width: calc(100% - (33.733% * 2));
}
nav a:nth-child(3){
  width: 33.733%;
}
nav .is-fixed{
  width: 100%;
  max-width: var(--width--contents);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
  z-index: 10;
}


/* ==============================
misshon item
*/
.mission_item{
  position: absolute;
  width: 13.466%;
  cursor: pointer;
}
.mission_item.--01{
  top: 0;
  right: 0;
  margin: 6% 3.6% 0 0;
}
.mission_item.--02{
  top: 0;
  right: 0;
  margin: 9% 25.6% 0 0;
}
.mission_item.--03{
  bottom: 0;
  right: 0;
  margin: 0 6% -4% 0;
}
.mission_item.--04{
  width: 14.265%;
  bottom: 0;
  left: 0;
  margin: 0 0 -16% 14.8% !important;
}
.mission_item.--05{
  bottom: 0;
  right: 0;
  margin: 0 9% 55% 0;
}
.mission_item.--06{
  top: 0;
  left: 0;
  margin: -19.6% 0 0 8%;
}
.mission_item:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  transform-origin: center;
  background: url("../img/white1.png") no-repeat center / 100% auto;
  pointer-events: none;
}
.mission_item.--hit:before,
.mission_item.--miss:before{
  content: "";
  display: block;
  width: calc(100% * 1.35);
  padding-bottom: calc(221.951% * 1.35);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  margin: 30% auto 0;
}
.mission_item.--hit:before{
  background: url("../img/item_hit.png") no-repeat center / 100% auto;
}
.mission_item.--miss:before{
  background: url("../img/item_miss.png") no-repeat center / 100% auto;
}
.mission_item.--play{
  pointer-events: none;
  transition: 0.5s;
}
.mission_item.--play.--hit:before, .mission_item.--play.--miss:before{
  transition: 0.5s;
  transition-delay: 1.5s;
  opacity: 1;
  margin: -10% auto 0;
}
.mission_item.--play:after{
  animation: animation__whiteout 1s 0.5s both ease-in-out;
}
.mission_item.--play.--escape{
  opacity: 0 !important;
}
@keyframes animation__whiteout{
	0%   { transform: translate(-50%, -50%) scale(0); }
  50%  { transform: translate(-50%, -50%) scale(3) }
  60%  { transform: translate(-50%, -50%) scale(3) }
  100% { transform: translate(-50%, -50%) scale(0) }
}
.mission_item.--play img{
  will-change: transform;
  animation: animation__play .15s 10 both linear;
}
@keyframes animation__play{
	0%   { scale: 1 1; }
  50%  { scale: 1 -1; }
  100% { scale: 1 1; }
}



/* ==============================
top
*/
#top .content{
  padding-bottom: 143.2%;
  background: url("../img/top/kv.jpg") no-repeat center / 100% auto;
}
#top h1{
  width: 97.6%;
  margin: auto;
}
#top .information{
  margin-top: 108.8%;
}


/* ==============================
mission
*/
#mission{
  margin-top: 41%;
}


/* ==============================
movie
*/
#movie{
  margin-bottom: 12%;
}
#movie h2{
  width: 42.933%;
  margin: 10.933% auto 0;
}
.movie__cm{
  position: relative;
  width: 94.4%;
  padding-bottom: 53.733%;
  background: #000;
  margin: -0.8% auto 0;
  z-index: 1;
  overflow: hidden;
}
.movie__cm:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: url("../img/movie/frame.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
}
.movie__cm video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.movie__sound{
  width: 42.8%;
  margin: 3% 2.8% 0 auto;
  cursor: pointer;
  position: relative;
}
.movie__sound.--on:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../img/movie/on.png") no-repeat center / 100% auto;
}
.movie__sound.--on img{
  opacity: 0;
}


/* ==============================
character
*/
#character h2{
  width: 69.2%;
  margin: 17.333% auto 0;
}
#character .ttl__arrow{
  margin-top: -8%;
}

.monster{
  position: relative;
  padding-bottom: 231.2%;
  margin-top: 9%;
  background: url("../img/character/monster/bg.png") no-repeat center / 100% auto;
}
.monster h3{
  width: 49.733%;
  margin: 7.6% 0 0 5%;
}
.monster .monster__text{
  width: 77.866%;
  margin: 10% auto 0;
}
.monster__nav{
  padding-top: 5%;
}
.mst__row{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.mst__row a{
  position: relative;
  margin: 0 0.1%;
}
.monster_nav_01{ width: 30.533%; }
.monster_nav_02{ width: 30.666%; }
.monster_nav_03{ width: 30.533%; }
.monster_01 .monster_nav_01,
.monster_02 .monster_nav_02,
.monster_03 .monster_nav_03{
  pointer-events: none;
}
.monster_01 .monster_nav_01:after{
  content: "";
  display: block;
  background: url("../img/character/monster/nav/c01_on.png") no-repeat center / 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.monster_02 .monster_nav_02:after{
  content: "";
  display: block;
  background: url("../img/character/monster/nav/c02_on.png") no-repeat center / 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.monster_03 .monster_nav_03:after{
  content: "";
  display: block;
  background: url("../img/character/monster/nav/c03_on.png") no-repeat center / 100% auto;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.msts{
  position: relative;
}
.msts > div{
  display: none;
}
.monster_01 .mst__01{ display: block; }
.monster_02 .mst__02{ display: block; }
.monster_03 .mst__03{ display: block; }
.mst__name{
  margin: 5% 0 0 3.6%;
  position: relative;
  z-index: 1;
}
.mst__movie{
  width: 41.2%;
  padding-bottom: 72.133%;
  position: relative;
  background: #000;
  margin: 4% 0 0 4.2%;
  overflow: hidden;
}
.mst__movie video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.mst__text{
  margin: 3% 0 0 3.4%;
}
.mst__movie:after{
  content: "";
  display: block;
  background: url("../img/character/monster/frame.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.monster__x{
  width: 83.466%;
  margin: 0 auto -9.4%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.mst__01:before{
  content: "";
  display: block;
  width: 99.866%;
  padding-bottom: 156.4%;
  background: url("../img/character/monster/01/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -1.4%;
}
.mst__01 .mst__name{
  width: 50.4%;
}
.mst__01 .mst__text{
  width: 93.2%;
}

.mst__02:before{
  content: "";
  display: block;
  width: 99.866%;
  padding-bottom: 156.4%;
  background: url("../img/character/monster/02/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -1.4%;
}
.mst__02 .mst__name{
  width: 55.866%;
}
.mst__02 .mst__text{
  width: 94%;
}

.mst__03:before{
  content: "";
  display: block;
  width: 99.866%;
  padding-bottom: 156.4%;
  background: url("../img/character/monster/03/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -1.4%;
}
.mst__03 .mst__name{
  width: 48%;
}
.mst__03 .mst__text{
  width: 91.333%;
}

.parson{
  position: relative;
  padding-bottom: 171.866%;
  margin-top: 23.466%;
  background: url("../img/character/parson/bg.png") no-repeat center / 100% auto;
}
.parson h3{
  width: 30.533%;
  margin: 9% 0 0 5%;
}
.parson__nav{
  width: 17.333%;
  margin: 11% 0 0 4.8%;
  position: relative;
  z-index: 2;
}
.parson__nav a{
  display: block;
  margin-bottom: 10.769%;
  position: relative;
}
.parson_01 .parson_nav_01,
.parson_02 .parson_nav_02,
.parson_03 .parson_nav_03,
.parson_04 .parson_nav_04{
  pointer-events: none;
}
.parson_01 .parson_nav_01:before,
.parson_02 .parson_nav_02:before,
.parson_03 .parson_nav_03:before,
.parson_04 .parson_nav_04:before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.parson_01 .parson_nav_01:before{ background: url("../img/character/parson/nav_01_on.png") no-repeat center / 100% auto; }
.parson_02 .parson_nav_02:before{ background: url("../img/character/parson/nav_02_on.png") no-repeat center / 100% auto; }
.parson_03 .parson_nav_03:before{ background: url("../img/character/parson/nav_03_on.png") no-repeat center / 100% auto; }
.parson_04 .parson_nav_04:before{ background: url("../img/character/parson/nav_04_on.png") no-repeat center / 100% auto; }
.psns{
  position: relative;
  margin: 9% 0 0 0;
}

.psns > div{ pointer-events: none; display: none; }
.parson_01 div.psn__01,
.parson_02 div.psn__02,
.parson_03 div.psn__03,
.parson_04 div.psn__04{
  display: block;
}
.psn__01:before{
  content: "";
  display: block;
  width: 98.133%;
  padding-bottom: 144.8%;
  background: url("../img/character/parson/01/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: -92.4% 0 0 0;
}
.psn__01 .psn__name{
  width: 30.933%;
  margin: -92.4% -2.2% 0 0;
  position: absolute;
  top: 0;
  right: 0;
}
.psn__01 .psn__text{
  width: 92.8%;
  margin: 0 0 0 4.4%;
}
.psn__02:before{
  content: "";
  display: block;
  width: 101.333%;
  padding-bottom: 144.8%;
  background: url("../img/character/parson/02/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: -91% -2% 0 0;
}
.psn__02 .psn__name{
  width: 30.666%;
  margin: -92.4% -2.2% 0 0;
  position: absolute;
  top: 0;
  right: 0;
}
.psn__02 .psn__text{
  width: 93.2%;
  margin: 0 0 0 4.4%;
}
.psn__03:before{
  content: "";
  display: block;
  width: 101.333%;
  padding-bottom: 152.266%;
  background: url("../img/character/parson/03/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: -90.6% -1.6% 0 0;
}
.psn__03 .psn__name{
  width: 30.666%;
  margin: -92.4% -2.2% 0 0;
  position: absolute;
  top: 0;
  right: 0;
}
.psn__03 .psn__text{
  width: 93.866%;
  margin: 0 0 0 4.4%;
}
.psn__04:before{
  content: "";
  display: block;
  width: 98.133%;
  padding-bottom: 155.733%;
  background: url("../img/character/parson/04/image.png") no-repeat center / 100% auto;
  position: absolute;
  top: 0;
  right: 0;
  margin: -92% -2.6% 0 0;
}
.psn__04 .psn__name{
  width: 28.933%;
  margin: -92.4% -2.2% 0 0;
  position: absolute;
  top: 0;
  right: 0;
}
.psn__04 .psn__text{
  width: 91.6%;
  margin: 0 0 0 4.4%;
}


.official{
  margin-top: 9.333%;
}
.official__text{
  width: 73.6%;
  margin: 0 auto;
}
.official__banner{
  width: 82.666%;
  margin: 6.933% auto 0;
}

#character .information{
  margin-top: 13.333%;
}


/* ==============================
event
*/
#event h2{
  width: 43.066%;
  margin: 36% auto 0;
}
#event .ttl__arrow{
  margin-top: -8%;
}
#event p{
  width: 84.266%;
  margin: 9.866% auto 0;
}
.events{
  margin-top: 5.333%;
}
.events div{
  width: 94.4%;
  margin: 0 auto 10.666%;
}
.events div:last-child{
  margin-bottom: 0;
}


/* ==============================
campaign
*/
#campaign h2{
  width: 68.133%;
  margin: 21.066% auto 0;
}
#campaign p{
  width: 51.466%;
  margin: 9.866% auto 0;
}
.campaigns{
  margin-top: 4%;
}
.campaigns > div{
  width: 94.4%;
  margin: auto;
  position: relative;
}
.campaigns > div a{
  display: block;
  width: 88.418%;
  margin: auto;
  position: absolute;
}
.campaigns > div.cp__01 a{
  bottom: 0;
  left: 0;
  right: 0;
  margin-bottom: 11.6%;
}
.campaigns > div{
  margin-bottom: 10.666%;
}
#campaign .information{
  margin-top: 13.866%;
}


/* ==============================
footer
*/
footer{
  position: relative;
  margin-top: 43.333%;
}
.pagetop{
  width: 16%;
  position: absolute;
  top: 0;
  right: 0;
  margin-top: -20%;
}
.notes{
  width: 69.733%;
  margin: auto;
}
.sns p{
  width: 70.533%;
  margin: 7.333% auto 0;
}
.sns__link{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6.133%;
}
.sns__link a{
  width: 41.6%;
  margin: 0 0.933% 0;
}
.footer__bottom{
  margin-top: 6%;
  background: url("../img/footer/bg.png") no-repeat top center / 100% auto;
}
.spec{
  width: 91.333%;
  margin: 0 auto 0;
  padding-top: 18%;
}
.support{
  margin-top: 9.066%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.support a{
  margin: 0 3.866%;
}
.support a:nth-child(1){
  width: 32.4%;
}
.support a:nth-child(2){
  width: 20.666%;
}
.copyright{
  margin-top: 8.533%;
  padding: 0 0 5%;
  text-align: center;
}
.copyright img{
  width: 77.866%;
}


/* ==============================
hidden area
*/
.hiddenArea{
  display: none;
}


/* ==============================
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;
}

/* mission clear */
.---modal-clear .modal__inWrap{
  padding-bottom: 15rem;
}
.---modal-clear .modal__content{
  width: 94.4%;
  padding: 0;
  background-color: initial;
}
.---modal-clear .modal__btn{
  width: 66.384%;
  position: absolute;
  top: 0;
  right: 0;
  margin: 66% 5% 0 0;
}
.---modal-clear .modal__btn a{
  display: block;
  margin-bottom: 8%;
}
.---modal-clear .modal__close_top{
  width: 10.310%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -2% -2% 0 0;
}
.---modal-clear .modal__close_bottom{
  width: 26.553%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -15%;
}

/* reward */
.---modal-reward .modal__inWrap{
  padding-bottom: 15rem;
}
.---modal-reward .modal__content{
  width: 94.4%;
  padding: 0;
  background-color: initial;
}
.---modal-reward .modal__close_top{
  width: 10.310%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -2% -2% 0 0;
}
.---modal-reward .modal__close_bottom{
  width: 26.553%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -15%;
}

/* notes */
.---modal-notes .modal__inWrap{
  padding: 10rem 0 16rem;
}
.---modal-notes .modal__content{
  width: 94.4%;
  padding: 0;
  border: solid 0.6rem #ffd35d;
  border-radius: 3rem;
  background-color: #000;
}
.---modal-notes .modal__close_top{
  width: 10.310%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -4% -3% 0 0;
}
.---modal-notes .modal__close_bottom{
  width: 26.553%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -17%;
}

.---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;
}
.note_text li a:hover{
	color: #00B3FF;
}