@charset "utf-8";

#page-all{
  width: 100%;
  overflow: hidden;
}

section{
  width: 100%;
  position: relative;
  color: #fff;
  background: rgba(0,0,0,0);
}

.container{
  width: 100%;
  height: 100%;
  position: relative;
  padding:8% 0;
}

.floor{
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  z-index: 1;
  padding:24px;
}

.floor h3{
  margin-bottom: 24px;
}

.floor-title{
  width: 100%;
  max-width: 461px;
  margin: 0 auto 5%;
}

.title-line{
  width: 90%;
  height: 2px;
  position: absolute !important;
  margin: 0;
	font-weight: bold;
	background: #524d81;
	white-space: nowrap;
	overflow: hidden;
  z-index: 0;
  opacity: 1;
}

.bg-scr{
  background: url("../img/bg_scr.png") no-repeat bottom;
  background-size:contain;
  background-attachment: fixed;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 0;
}

@media screen and (max-width: 1024px) {
  .floor{
    padding:5% 2%;
  }

}

@media screen and (max-width: 768px) {
  .floor-title{
    max-width: 320px;
  }
}


@media screen and (max-width: 480px) {

  
}
/*-------------------------------
main
--------------------------------*/
.main{
  width: 100%;
  height: 100%;
  /*max-height: 960px;*/
  position: relative;
  overflow: hidden;
}

.mv_box{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  border: 20px solid #fff948;
}

.mv_logo{
  width: 90%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 640px;
  z-index: 1;
  transition:1s;
  animation:dropshadow 5s linear infinite alternate;
}

.mv_logo.mvanime{
  top: 5%;
  transform: translate(-50%, 0);
}

@keyframes dropshadow{
  0%{ filter: drop-shadow(0 0 10px #1a0e00);}
  100%{ filter: drop-shadow(0 0 30px #1a0e00);}
}

.mv_text_box{
  width: 100%;
  max-width: 640px;
  position: absolute;
  bottom: 40%;
  left: 50%;
  transform: translate(-50%,0);
  z-index: 1;
  transition:1s;
}

.mv_text_box.mvanime{
  bottom:10%;
  transform: translate(-50%,0);
}
.mv_text01,
.mv_text02,
.mv_text03{
  width: 90%;
  opacity: 0;
  padding:10px;
  margin: 0 auto;
}

.mv_text02{
  padding:0;
}

.mv_text01{
  max-width: 320px;
  margin: 0 auto;
}
.mv_text01.mvanime{
  opacity: 1;
  animation:mv_scale 1s ease forwards;
}

@keyframes mv_scale{
  0%{transform: scale(100, 100);}
  50%{transform: scale(1,1);}
  90%{opacity: 1;transform: scale(1,1);width: 100%;}
  100%{opacity: 0;transform: scale(.5, .5);width: 0;height: 0}
}
.mv_text02{margin: 0 auto 10px;}
.mv_text02.mvanime{
  opacity: 1;
  animation:mv_scale2 .5s ease forwards;
}
.mv_text02 img{animation:dropshadow2 5s linear infinite alternate;}

@keyframes mv_scale2{
  0%{transform: scale(0, 0);}
  100%{transform: scale(1, 1);}
}
@keyframes dropshadow2{
  0%{ filter: drop-shadow(0 0 5px #b52e26) drop-shadow(0 0 5px #b52e26);}
  100%{ filter: drop-shadow(0 0 15px #b52e26) drop-shadow(0 0 15px #b52e26) drop-shadow(0 0 15px #b52e26);}
}

.mv_text03.mvanime{
  opacity: 1;
  animation:mv_clip-path .5s ease forwards;
  filter: drop-shadow(0 0 5px #000) drop-shadow(0 0 5px #000);
}
.mv_text03 img{}

@keyframes mv_clip-path{
  0%{clip-path: inset(100% 0 0 0);}
  100%{clip-path: inset(0);}
}

@media screen and (max-width: 1440px) {

}

@media screen and (max-width: 1024px) {

}

@media screen and (max-width: 640px) {
  .mv_text02{margin: 0 auto;}
}

/*-------------------------------
store
--------------------------------*/
.mv_store{
  position: absolute;
  width: 100%;
  bottom:0;
  left: 50%;
  transform:translate(-50%, 0);
  z-index: 1;
  transition:.5s;
  background: rgba(0,0,0,.5);
  clip-path: inset(100% 0 0 0);
}
.mv_store .store-link{
  max-width: 640px;
  margin: 0 auto;
}
.mv_store.mvanime{
  animation:mv_clip-path .5s ease forwards;
}

@keyframes mv_clip-path{
  0%{clip-path: inset(100% 0 0 0);}
  100%{clip-path: inset(0);}
}


/*-------------------------------
news
--------------------------------*/
#news{
  background: #000;
}

.news-box{
  display: flex;
}

.news-box-l{
  width: 55%;
  max-width: 640px;
}

.news-box-r{
  width: 45%;
  max-width: 540px;
}

.news-box .floor-title{
 margin: 0 auto 8px; 
}

/*---news---*/
.news-list{
  border-top:1px solid #999;
  padding:32px 0 0;
}

.news-list,.news-btn{
  margin-right:10%;
}

.news-list a{
  margin:0 0 32px;
  display: block;
}
.news-list a span{
  font-size: 80%;
  display: block;
  color:#999;
}

/*#news .news-list a:nth-child(n+6){
  display: none;
}*/

/*---twitter---*/
.tw-box{
  border: 1px solid #fff;
  position: relative;
  padding:3px;
}

.tw-box::before,.tw-box::after{
  content: "";
  position: absolute;
}

.tw-box::before{
  border-bottom: 25px solid transparent;
  border-left: 25px solid #fff;
  top:0;
  left:0;
}

.tw-box::after{
  border-top: 25px solid transparent;
  border-right: 25px solid #fff;
  bottom:0;
  right:0;
}

.tw-box-sub{
  border: 1px solid #fff;
  padding:16px;
  width: 100%;
  height: 660px;
  margin: 0 auto;
  overflow: hidden;
}

@media screen and (max-width: 640px) {
  .news-box{display: block;}
  .news-box-l{width: 100%;}
  .news-box-r{
    width: 80%;
    margin: 0 auto;
  }
  .news-list{margin: 0 auto;}
  
  .news-btn{margin: 0 auto 6vh;}
  
  .news-list a{
    width: 80%;
    margin: 0 auto 4vh;
  }
}


/*-------------------------------
STORY
--------------------------------*/
#story{
  background:url("../img/story_bg.jpg") no-repeat top center;
  background-size:cover;
  background-attachment: fixed;
  z-index: 3;
}

#story .container{
  background: rgba(50,4,27,.75);
  padding:15% 0;
}



.story-box{
  max-width: 768px;
  text-align: center;
  position: relative;
}

.story-box .floor-title{
  position: absolute;
  top: -17%;
  left:50%;
  transform:translate(-50%,0);
}

.story-text{
  padding: 5%;
}

.story-text p{
  line-height: 2;
}

.story-head, .story-foot {
    position: relative;
}

.story-head:before,
.story-head:after,
.story-foot:before,
.story-foot:after{
  content: "";
  position: absolute;
  width: 91px;
  height: 91px;
}
.story-head:before{
  background: url(../img/floor_parts_l_t.png) no-repeat;
  background-size: cover;
  /*top:0;
  left:0;*/
}
.story-head:after{
  background: url(../img/floor_parts_r_t.png) no-repeat;
  background-size: cover;
  top:0;
  right:0;
}
.story-foot:before{
  background: url(../img/floor_parts_l_b.png) no-repeat;
  background-size: cover;
  bottom:0;
  left:0;
}
.story-foot:after{
  background: url(../img/floor_parts_r_b.png) no-repeat;
  background-size: cover;
  bottom:0;
  right:0;
}

.story-box-bg{
  width: 100%;
  height: 100vh;
  max-height: 680px;
  position: absolute!important;
  top: 50%;
  left: 0;
  transform:translate(0,-50%);
  z-index: -1;
  background: rgba(0,0,0,.9)
}


.story-chara{
  width: 42vw;
  max-width: 771px;
  position: absolute;
  top: 50%;
  right:5%;
  transform:translate(0,-50%);
  z-index: 1;
}

.story-floor-foot{
  width: 100%;
  height: 100%;
  max-height: 95px;
  position: absolute;
  bottom:0;
  left:0;
  background: url(../img/story_foot.png) no-repeat center;
  background-size: cover;
}

@media screen and (max-width: 1440px) {
  .story-chara{
    width: 36vw;
    max-width: 640px;
    right:3%;
  }
}

@media screen and (max-width: 1024px) {
  #story .container{
    overflow: hidden;
  }
  .story-box{
    margin: 0 auto;
  }
  .story-chara{
    width: 100%;
    max-width: 640px;
    right:inherit;
    left:50%;
    transform:translate(-50%,-50%);
    z-index:-1;
  }
  .story-box-bg{
    max-height: inherit;
    background: rgba(0,0,0,.75);
  }
}

@media screen and (max-width: 768px) {
  .story-box .floor-title{
    top: -9%;
  }
  
  .story-head:before,
  .story-head:after,
  .story-foot:before,
  .story-foot:after{
    width: 48px;
    height: 48px;
  }
}

@media screen and (max-width: 640px) {
  .story-text{padding:8%;}
  .story-text p{
    text-align: left;
  }
  
  .story-box .floor-title{
    top: -5%;
  }
  
  .story-box-bg{
    top:0;
    left:0;
    transform:none;
    height: 140vh;
  }
  
  
}
/*-------------------------------
SYSTEM
--------------------------------*/
#system{
  /*background: linear-gradient(rgba(17,14,32,1) 50%, rgba(39,34,67,1) 50%);*/
  background: #000;
}

#system .container{
  position: relative;
}

#system .floor{
  position: relative;
  z-index: 1;
}


.system-box{
  display: flex;
  margin: 0 0 8%;
  flex-direction: row;
}

.system-box:nth-of-type(2n){
  flex-direction: row-reverse;
}

.system-img{
  width: 52%;
  max-width: 640px;
}
.system-text{
  width: 48%;
  position: relative;
}

.system-text div{
  position: absolute;
  top: 50%;
  left: 0;
  transform:translate(0,-50%);
  padding:8%;
}

.system-text p{
  margin-bottom:10px; 
}
.system-bg{
  background: url("../img/system_bg.png") no-repeat center;
  background-size:contain;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 50%;
  left: 0;
  transform:translate(0,-50%);
  z-index: 0;
}

@media screen and (max-width: 768px) {
  .system-bg{
    background-attachment: fixed;
    opacity: .5;
    top: 0;
    transform:none;
  }
}

@media screen and (max-width: 640px) {
  .system-box{
    display: block;
  }
  .system-img{
    width: 100%;
  }
  .system-text{
    width: 100%;  }
  .system-text div{
    position:static;
    top: inherit;
    left: inherit;
    transform:none;
    padding:2vh 0 4vh;
  }
}

/*-------------------------------
CHARA
--------------------------------*/
#chara{
  background: linear-gradient(rgba(28,2,39,.85) 50%, rgba(20,2,11,.85) 100%);
}

#chara .title-line{right:-35vw;}
#chara .container{
  z-index: 1
}

.chara-box-main{
  width: 100%;
  position: relative;
}

.chara-list{
  width: 100%;
  position: relative;
  padding:20px;
  background: rgba(20,2,11,.75);
}

.chara-box{
  width: 100%;
  height: 100%;
  min-height: 800px;
  border: 1px solid #fff;
  position: relative;
  padding: 5%;
}
.chara-box::before,
.chara-box::after{
  content: "";
  position: absolute;
  width: 91px;
  height: 91px;
}

.chara-box:before{
  background: url(../img/floor_parts_l_t.png) no-repeat;
  background-size: cover;
  top:5px;
  left:5px;
}
.chara-box:after{
  background: url(../img/floor_parts_r_b.png) no-repeat;
  background-size: cover;
  bottom:5px;
  right:5px;
}


.chara-text{
  width: 100%;
}
.chara-text p{
  width: 60%;
  padding: 48px 24px;
  line-height: 2;
  position: relative;
  z-index: 1;
}


.chara-name{
  border-bottom: 2px solid #fff;
  display: flex;
  padding:0 24px 8px;
  align-items:flex-end;
  position: relative;
}

.chara-name::before{
  content: "";
  width: 100%;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom:-8px;
  left: 0;
}


.chara-name h3{
  margin: 0;
  font-size: 3.2rem;
}

.chara-name p{
  padding: 0 0 0 24px
}


.chara-img{
  width: 50%;
  max-width: 500px;
  position: absolute;
  top:50%;
  right:0;
  transform:translate(0,-50%);
}

@media screen and (max-width: 768px) {
  .chara-box::before,
  .chara-box::after{
    width: 45px;
    height: 45px;
  }
}

@media screen and (max-width: 640px) {
  .chara-list{
    padding:10px;
  }
  
  .chara-name{
    display: block;
    padding: 0 0 8px 24px;
  }
  .chara-name h3{font-size: 2.4rem;}
  .chara-name p{margin: 0; text-align: right;}
  .chara-text{
    position: relative;
    z-index: 1;
    margin: -20% 0 0;
    background: rgba(0,0,0,.5);
  }
  
  .chara02 .chara-text,
  .chara03 .chara-text{margin: 0;}
  
  .chara-text p{
    width: 100%;
    padding: 4%;
  }
  
  .chara-img{
    width: 100%;
    max-width: 560px;
    margin: 20px auto;
    position: static;
    top:inherit;
    right:inherit;
    transform:none;
  }
  
  
}

/*-------------------------------
swiper
--------------------------------*/
.slider-thumbnail{
  margin: -1% 0 1%;
  z-index: 10!important;
}
.slider-thumbnail .swiper-wrapper{
  flex-wrap: wrap;
  justify-content:center;
}

.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc(100% / 10);/*--サムネ表示数の数値を入れる--*/
  margin-bottom: 10px;
}

.slider-thumbnail .swiper-slide:hover{
  opacity: 1;
  cursor:pointer!important;
}

.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1!important;
}

.swiper-container .swiper-slide {
  opacity: 0!important;
  transition: opacity .5s;
}
.swiper-container .swiper-slide.swiper-slide-active {
  opacity: 1!important;
}

.swiper-button-next,
.swiper-button-prev{
  width: 40px!important;
  height: 40px!important;
  top:65%!important;
  color:#fff!important;
}

.swiper-button-next:after,
.swiper-button-prev:after{
  font-size: 0!important;
}


@media screen and (max-width: 768px) {
  .swiper-button-next{right:0!important;}
  .swiper-button-prev{left:0!important;}
}

@media screen and (max-width: 640px) {
  .slider-thumbnail .swiper-slide img{
    width: 100%!important;
  }
  
  .swiper-button-next,
  .swiper-button-prev{
    top:35%!important;
  }
  .slider-thumbnail .swiper-wrapper{
    flex-wrap:nowrap!important;
    justify-content:flex-start;
  }
}
@media screen and (max-width: 480px) {
  .swiper-button-next,
  .swiper-button-prev{
    top:20%!important;
  }
}

/*-------------------------------
Gallery
--------------------------------*/

#gallery{
  background:url("../img/gallery_bg.jpg") no-repeat top center;
  background-size:cover;
  background-attachment: fixed;
}


#gallery .container{
  background: rgba(0,0,0,.9);
}

#gallery .floor{
  z-index: 1;
  position: relative;
}

#gallery .bg-scr{z-index:0;}

.gallery-box{
  display: flex;
  flex-wrap:wrap;
}


.gallery-img{
  width: 50%;
  height: 100%;
  max-width: 592px;
  max-height: 333px;
  padding:0 2%;
  margin: 0 0 10%;
}

.img-title{
  text-align: center;
  margin: 4% 0 0;
  position: relative;
}



.img-title-line{
  width: 50%;
  border-bottom: 1px solid #c549ff;
  position: relative;
  margin: 20px auto 0;
}

.img-title-line::before{
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top:50%;
  left: 50%;
  transform:translate(-50%,-50%) rotate(45deg);
  background: #c549ff;
}

@media screen and (max-width: 640px) {
  .gallery-img{
    width: 100%;
    margin: 0 0 8vh;
  }
  .img-title{margin: 1vh 0 0}

}

/*-------------------------------
product
--------------------------------*/
#product{
  background: rgba(50,4,27,.9);
}

#product .container{
  z-index: 1;
}

#product .container::before,
#product .container::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  max-width: 516px;
  max-height: 807px;
  z-index: 999;
}


#product .container::before{
  background: url("../img/product_bg_parts_l.png") no-repeat left bottom;
  background-size:contain;
  bottom:0;
  left:0;
}

#product .container::after{
  background: url("../img/product_bg_parts_r.png") no-repeat right bottom;
  background-size:contain;
  bottom:0;
  right:0;
}


#product .bg-scr{z-index:0;}


.product-floor{
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
}

.product-floor .img-title-line{
  /*width: 100%;*/
  margin: 16px auto;
  max-width: 180px
}

.pro-text{
  margin: 0 0 8%;
  padding:0 1%;
}


.pro-text-box{
  display: flex;
  justify-content: center;
}

.pro-text-box .pro-text{
  width: calc(100% / 3);
}

@media screen and (max-width: 1024px) {
  #product .container::before,
  #product .container::after{
    max-height: 640px;
  }
}

@media screen and (max-width: 768px) {
  #product .container::before,
  #product .container::after{
    max-height: 320px;
  }
  
  #product .container::before{
    left:-2%;
  }
  
  #product .container::after{
    right:-2%;
  } 
}

@media screen and (max-width: 640px) {
  .pro-text{
    margin: 0 0 10%;
  }
  .pro-text-box{display: block;}
  .pro-text-box .pro-text{
    width: 100%;
  }
  .product-floor .img-title-line{
    margin: 8px auto;
  }

}

/*-------------------------------
SCROLL Banner
--------------------------------*/
.scroll{
  position: fixed;
  opacity: 0;
  z-index: -1;
  bottom:-5vh;
  left: 0;
  width: 100%;
  padding:2px 0;
  background: rgba(0,0,0,.8);
  transition: all 0.2s ease;
}

.scroll.head768{
  opacity: 1;
  z-index: 998;
  bottom:0;
}

.scroll .floor{
  max-width: 640px;
  padding: 8px;
}

.scroll .store-link{
  flex-wrap: nowrap;
}

/*--------------------
parts
---------------------*/
.bg-parts{
  position: absolute;
  z-index: 10;
}

.bg-parts.large{
  width: 28vw;
  height: 28vw;
  max-width: 610px;
  max-height: 610px;
}

.bg-parts.medium{
  width: 23vw;
  height: 23vw;
  max-width: 432px;
  max-height: 432px;
}

.bg-parts.small{
  width: 13vw;
  height: 13vw;
  max-width: 240px;
  max-height: 240px;
}

.parts01,.parts02{
  position: absolute;
}
.parts01{
  background: url("../img/bg_parts01.svg") no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  top:0;
  left:0;
}
.parts02{
  background: url("../img/bg_parts02.svg") no-repeat;
  background-size: cover;
  width: 60%;
  height: 60%;
  top:20%;
  left:20%;
}

#story .bg-parts.large{
  top:-26%;
  left:-18%;
}

#story .bg-parts.small{
  bottom:-8%;
  right:-5%;
}

#system .bg-parts.large{
  bottom:-12%;
  left:-15%;
}

#gallery .bg-parts.medium{
  top:-15%;
  right:-10%;
}

#gallery .bg-parts.large{
  bottom:-20%;
  left:-15%;
}

#gallery .bg-parts.small{
  bottom:-9%;
  right:-5%;
}

@media screen and (max-width: 1440px) {
  #story .bg-parts.large{
    top:-18%;
    left:-20%;
  }
  #gallery .bg-parts.medium {
    top: -12%;
    right: -13%;
  }
}

@media screen and (max-width: 768px) {
  #story .bg-parts.large{
    top:-12%;
    left:-20%;
  }
}

@media screen and (max-width: 640px) {
  .bg-parts.large{
    width: 35vw;
    height: 35vw;
  }
  
  .bg-parts.small {
    width: 25vw;
    height: 25vw;
  }
  
  #story .bg-parts.large{
    top:-7%;
    left:-20%;
  }
  
  #story .bg-parts.small {
    bottom: -5%;
    right: -13%;
}
  
  #system .bg-parts.large{
    bottom:-5%;
    left: -22%;
  }
  
  #gallery .bg-parts.medium{
    top:-3%;
  }
  #gallery .bg-parts.large{
    bottom:-4%;
    left: -20%;
  }
  #gallery .bg-parts.small{
    bottom:-3%;
    right: -12%;
  }
}