@charset "utf-8";

/*!
 * "LINE Seed" licensed under the SIL Open Font License
 * https://seed.line.me/index_jp.html
 * https://scripts.sil.org/OFL
 * © LY Corporation
*/

@font-face {
  font-family: 'LINESeedJP_Rg';
  src: url('../font/LINESeedJP_OTF_Rg.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Eb';
  src: url('../font/LINESeedJP_OTF_Eb.woff') format('woff');
}
@font-face {
  font-family: 'LINESeedJP_Bd';
  src: url('../font/LINESeedJP_OTF_Bd.woff') format('woff');
}


:root{
  --font-size: 10px;
  --font-size-ajust: 500 / 750;
  --width-contents: 500px;
  --max-width-modal: 500px;
  --min-width-modal: 500px;
}


html{
  font-size: var(--font-size);
  font-family: LINESeedJP_Rg, sans-serif;
  color: #fff;
}
img, video{
  width: 100%;
}
a{
  display: block;
}
section{
  position: relative;
}

.wrapper{
  min-height: 100vh;
  background-color: #000;
}
.contents{
  width: var(--width-contents);
  margin: auto;
  overflow: hidden;
  background-color: #000;
  position: relative;
  z-index: 1;
}
.inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.dn{
  display: none;
}
.db{
  display: block;
}



/* --------------------------------------------------

pc only

-------------------------------------------------- */
.pcBg{
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url("../img/pc_bg.png") no-repeat center center / 1508px 100%;
}
.pcBg .--inner{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pcBg .--side{
  width: calc((100% - var(--width-contents)) / 2);
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 1;
  display: flex;
}
.pcBg .--side.--left{ left: 0; }
.pcBg .--side.--right{ right: 0; }
.pcBg:before{
  content: "";
  display: block;
  width: calc(var(--width-contents) + 6px);
  height: 100%;
  margin: auto;
  background-color: #7100bf;
  position: relative;
  z-index: 5;
  box-shadow: 0px 0px 20px 0px rgba(86, 0, 192, 1);
}
.pcBg__sideArea{
  transition: 0.2s;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.pcBg__sideL img{
  width: 25.781vw;
  max-width: calc(495px * 1);
}
.pcBg__sideR img{
  width: 16.562vw;
  max-width: calc(318px * 1);
}
@media screen and (max-width: 1100px){
  .pcBg__sideArea{
    opacity: 0;
  }
}



/* --------------------------------------------------

common

-------------------------------------------------- */
/* title */
h2{
  width: 93.066%;
  margin: 0 auto 0;
  position: relative;
}


/* button */
.button-normal{
  width: 89.333%;
}

.no-link{
  pointer-events: none;
}

.animation-hb{
  animation: animation--heartbeat 4s ease-in-out infinite;
  position: relative;
}
@keyframes animation--heartbeat{
  0% { scale: 1; }
  4% { scale: 1.075; }
  8% { scale: 1; }
  12% { scale: 1.075; }
  16% { scale: 1; }
  100% { scale: 1; }
}

/* cm */
.collab-text{
  width: 97.066%;
  margin: 0 0 0 2.8%;
}
.collab-link{
  margin: 2% auto 0;
}


/* --------------------------------------------------

animation

-------------------------------------------------- */
.js_fade{
  transform: translateY(4rem);
  opacity: 0;
}
.js_fade.is-active{
  animation: animationjs_fadeIn 0.5s ease both;
}
@keyframes animationjs_fadeIn{
  0% { filter: blur(1rem); }
  100% { filter: blur(0rem); transform: translateY(0); opacity: 1; }
}


/* --------------------------------------------------

top

-------------------------------------------------- */
.top-kv{
  background: url("../img/top/bg.jpg") no-repeat top center / 100% auto;
}
.top-logo{
  width: 91.733%;
  margin: 0 auto 0;
}
.top-collab{
  margin-top: 97%;
}

.nav-wrap{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: end;
  margin-top: -3%;
}
.nav-pop{
  width: 95.066%;
  margin: 3% auto 0;
}
.nav-wrap a:nth-child(odd){
  width: 24.933%;
}
.nav-wrap a:nth-child(even){
  width: 25.066%;
}



/* --------------------------------------------------

stroy

-------------------------------------------------- */
.story-bg{
    background: url("../img/story/bg.png") no-repeat bottom center / 100% auto;
}
.story-title{
  padding-top: 10.4%;
}
.story-text{
  width: 97.733%;
  margin: 8% auto 0;
  padding-bottom: 8.4%;
}



/* --------------------------------------------------

character

-------------------------------------------------- */
.character-bg{
  padding: 2.933% 0 14.133%;
}
.character-bg:before{
  content: "";
  display: block;
  width: 100%;
  padding-bottom: 173.866%;
  background: url("../img/character/bg.png") no-repeat center top / 100% auto;
  position: absolute;
  top: 0;
  left: 0;
  margin: 16% 0 0;
  pointer-events: none;
}

/* monster */
.monster{
  padding: 0 0 5.333%;
  position: relative;
}
.monster h3{
  width: 92.4%;
  margin: 6.4% auto 0;
}
.monster-nav{
  margin-top: 5.333%;
}
.monster-nav-row{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
}
.monster-nav a{
  position: relative;
}
.monster-nav a.active{
  pointer-events: none;
}
.monster-nav a.active:after{
  content: "";  
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.monster-nav a.active img{
  opacity: 0;
}
.monster-nav-01 { width: 46%; margin-left: 2.933%; }
.monster-nav-02 { width: 45.333%; margin-right: 2.933%; }
.monster-nav-01.active:after{
  background: url("../img/character/monster/nav_01_on.png") no-repeat center / 100% auto;
}
.monster-nav-02.active:after{
  background: url("../img/character/monster/nav_02_on.png") no-repeat center / 100% auto;
}
.monster-list{
  margin-top: 8.266%;
  padding-bottom: 149.733%;
  position: relative;
}
.monster-list > div{
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
}
.monster-list > div.active{
  opacity: 1;
  pointer-events: initial;
}
.monster-detail{
  margin: 0 0 0 auto;
}
.monster-movie{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 48.533%;
  margin: 0 0 9% 3%;
  padding-bottom: 85.466%;
  background: #000;
  overflow: hidden;
}
.monster-movie:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  border: solid 0.3rem #f2d179;
  position: absolute;
  top: 0;
  left: 0;
}
.monster-movie video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.monster-share{
  margin-top: -7%;
}
.monster-share-item{
  width: 96.4%;
}
.monster-share-atn{
  width: 93.866%;
  margin: 2.666% auto 0;
}
.monster-share-x{
  margin: 3.733% auto 0;
}


/* parson */
.parson{
  background: url("../img/character/bg.png") no-repeat center top / 100% auto;
  padding: 9.066% 0 0;
}
.parson h3{
  width: 67.466%;
  margin: 0 auto 0;
}
.parson-nav{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 6.4%;
}
.parson-nav a{
  width: 16%;
  margin: 0 1%;
  position: relative;
}
.parson-nav a.active{
  pointer-events: none;
}
.parson-nav a.active:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.parson-nav a.active img{
  opacity: 0;
}
.parson-nav-01.active{
  background: url("../img/character/parson/nav_01_on.png") no-repeat center / 100% auto;
}
.parson-nav-02.active{
  background: url("../img/character/parson/nav_02_on.png") no-repeat center / 100% auto;
}
.parson-nav-03.active{
  background: url("../img/character/parson/nav_03_on.png") no-repeat center / 100% auto;
}
.parson-nav-04.active{
  background: url("../img/character/parson/nav_04_on.png") no-repeat center / 100% auto;
}
.parson-nav-05.active{
  background: url("../img/character/parson/nav_05_on.png") no-repeat center / 100% auto;
}
.parson-list{
  margin-top: 10.666%;
  position: relative;
}
.parson-list-wrap{
  padding-bottom: 180.4%;
  position: relative;
}
.parson-list-wrap > div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: 0.4s;
  pointer-events: none;
}
.parson-list-wrap > div.active{
  opacity: 1;
  pointer-events: initial;
}
.parson-arrow{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.parson-arrow > div{
  position: absolute;
  top: 0;
  width: 5.333%;
  visibility: visible;
  cursor: pointer;
}
.parson-arrow-prev, .parson-arrow-next{
  margin: 46% 2.933% 0;
}
.parson-arrow-prev{
  left: 0;
}
.parson-arrow-next{
  scale: -1 1;
  right: 0;
}



/* --------------------------------------------------

event

-------------------------------------------------- */
.event-bg{
  padding: 0 0 13.866%;
}
.event-text{
  width: 79.066%;
  margin: 4.933% auto 0;
}
.event-list{
  margin-top: 4.666%;
}
.event-list > div:nth-child(2){
  margin-top: 4.666%;
}



/* --------------------------------------------------

campaign

-------------------------------------------------- */
.campaign-bg{
  padding: 0 0 8.933%;
}
.campaign-text{
  width: 49.733%;
  margin: 4.933% auto 0;
}
.campaign-list{
  margin-top: 5.333%;
}
.campaign-list > div{
  position: relative;
}
.campaign-list > div:not(:first-child){
  margin-top: 4.266%;
}
.campaign-link{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto 9.866%;
}
.campaign-link.cp-pos-row2{
  margin: 0 auto 21.733%;
}




/* --------------------------------------------------

footer

-------------------------------------------------- */
footer .content{
  padding-bottom: 4.266%;
}
.pagetop{
  width: 17.333%;
  margin: 0 5.333% 0 auto;
}
.notes{
  margin: 7.333% auto 0;
}
.sns{
  margin-top: 12.4%;
}
.sns p{
  width: 56%;
  margin: auto;
}
.sns-link{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.sns-link a{
  width: 42%;
  margin: 4.266% 1.466% 0;
}
.spec{
  width: 91.733%;
  margin: 9.2% auto 0;
}
.corp-link{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10.666%;
}
.corp-link a{
  font-size: calc(2.4rem * var(--font-size-ajust));
  margin: 0 3.8%;
  padding-bottom: 1%;
  border-bottom: solid 0.1rem #fff;
  font-family: LINESeedJP_Bd, sans-serif;
}
.copyright{
  margin-top: 8.4%;
  font-size: calc(1.6rem * var(--font-size-ajust));
  text-align: center;
  line-height: 1.5;
}



/* --------------------------------------------------

thanks

-------------------------------------------------- */
.page-thanks{
  min-height: 100vh;
  background: url("../img/thanks/bg.png") #000 no-repeat top calc(11rem * var(--font-size-ajust)) center / 100% auto;
  position: relative;
}
.page-thanks .content{
  padding: 7.733% 0 6.4%;
}
.thanks-text{
  width: 78.4%;
  margin: auto;
}
.thanks-reward{
  margin-top: 80.6%;
}
.thanks-reward a{
  margin: auto;
}
.thanks-reward-atn{
  width: 67.333%;
  margin: 3.2% auto 0;
}
.thanks-return{
  margin: 4% auto 0;
  padding-bottom: 14%;
}
.page-thanks .copyright{
  position: absolute;
  bottom: 0;
  margin-bottom: 4.266%;
  width: 100%;
}



/* --------------------------------------------------

modal

-------------------------------------------------- */
.snlib--modal{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.9);
  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 16rem;
}
.---modal-notes .modal__content{
  width: 94.4%;
  padding: 0;
  border: solid 0.6rem #5a158c;
  background-color: #000;
}
.---modal-notes .modal__close_top{
  width: 10.310%;
  position: absolute;
  top: 0;
  right: 0;
  margin: -2rem -2rem 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: calc(2.4rem * var(--font-size-ajust));
  line-height: calc(calc(2.4rem * var(--font-size-ajust)) * 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;
}


/* reward */
.---modal-reward .modal__content{
  width: 94.4%;
  padding: 0;
}
.---modal-reward .modal__close_bottom{
  width: 26.553%;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0 auto -17%;
}