@charset "UTF-8";
#mv{
  position: relative;
  width: 100%;
  background: url(/assets/images/bg.png) center top / 100% auto no-repeat;
}

#mv::before{
  position: absolute;
  top: clamp(212.812px, 56.75vw, 240px);
  left: 0;
  width: 100%;
  height: clamp(375px, 100vw, 420px);
  background: url(/assets/images/mv-image01.webp) center top /  cover no-repeat;
  z-index: -1;
  content: '';
}

#mv .logo{
  width: 100%;
  padding-top: clamp(75px, 20vw, 84px);
}

#mv .logo img{
  width: 100%;
}

#mv .movie{
  position: relative;
  width: 100%;
  height: clamp(375px, 100vw, 420px);
  margin-top: calc(clamp(22px, 5.86vw, 24.64px) * -1);
  background-color: #aecd72;
  z-index: -1;
  overflow: hidden;
}

#mv video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: clamp(375px, 100vw, 420px);
  object-fit: cover;
  object-position: center;
  transform: translate(-50%, -50%);
}

.top-pre-order {
  position: relative;
  width: 100%;
  padding: clamp(30px, 8vw, 33.6px) 0 clamp(54px, 14.4vw, 60.48px);
  background: url(/assets/images/bg-wood.webp) center center / 375px auto repeat;
}

.top-pre-order::before {
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  top: 0;
  background: url(/assets/images/bg-top-pre-order-upper.png) center center / cover no-repeat;
}

.top-pre-order .news-block{
  position: relative;
  width: calc(100% - clamp(24px, 6.4vw, 26.88px));
  margin: 0 auto;
  padding: clamp(14px, 3.73vw, 15.68px)  clamp(15.18px, 4.408vw, 17px) clamp(35px, 9.334vw, 39.2px);
  background: url(/assets/images/bg-news-block.png) center center / 100% auto repeat;
}

.top-pre-order .news-block::before,
.top-pre-order .news-block::after{
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  content: '';
}

.top-pre-order .news-block::before{
  top: -3px;
  background: url(/assets/images/bg-news-block-upper.png) center center / cover no-repeat;
}

.top-pre-order .news-block::after{
  bottom: -3px;
  background: url(/assets/images/bg-news-block-lower.png) center center / cover no-repeat;
}

.top-pre-order .news-block .inner{
  display: flex;
  justify-content: center;
}

.top-pre-order .news-block .inner p{
  color: #fff;
  font-size: clamp(18px, 4.8vw, 20.16px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
  text-align: center;
}

.top-pre-order .news-block .inner p strong{
  color: #FDFF01;
}

.top-pre-order .news-block .inner img{
  width: clamp(90px, 24vw, 100.8px);
}

.top-pre-order .news-block .link{
  position: absolute;
  left: 50%;
  bottom: calc(clamp(42px, 11.2vw, 47.04px) * -1);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.top-pre-order .news-block .link a{
  position: relative;
  display: inline-block;
  width: clamp(136px, 36.2667vw, 152.32px);
  height: clamp(37px, 9.867vw, 41.44px);
  /* background: url(/assets/images/article-btn.png) center center / contain no-repeat,
              url(/assets/images/article-btn_hover.png) center center / 0 no-repeat; */
}

.top-pre-order .news-block .link a img{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

.top-pre-order .news-block .link a img:last-of-type {
  opacity: 0;
}

.top-pre-order .news-block .link a:hover img.hover{
  opacity: 1;
}

.top-pre-order .news-block .link a:hover img:not(.hover){
  opacity: 0;
}

.top-pre-order .news-block .link a span{
  display: none;
}


.pop-up{
  position: fixed;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 10px 0 0;
  /* bottom: 10px; */
  bottom: 0;
  left: 50%;
  text-align: right;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 10;
  pointer-events: none;
}


.pop-up a{
  position: relative;
  display: inline-block;
  width: clamp(120.5px, 32.1vw, 135px);
  height: clamp(133.9px, 36.267vw, 150px);
  left: clamp(122px, 32.5vw, 136.64px);
  transition: left .4s ease-out;
  animation: huwahuwa 2s ease-in-out infinite;
  pointer-events: auto;
}

.pop-up.active a{
  left: 0;
}

.pop-up a img{
  width: 100%;
}

@keyframes huwahuwa {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0);
  }
}


#about{
  position: relative;
  padding-bottom: clamp(67px, 17.867vw, 75.04px);
  background: url(/assets/images/bg-parchment.webp) center center / 375px auto repeat;
}

#about::before,
#about::after{
  position: absolute;
  left: 0;
  width: 100%;
  content: '';
  pointer-events: none;
}

#about::before{
  top: calc(-1 *  clamp(14px, 3.7333vw, 15.68px));
  height: clamp(14px, 3.7333vw, 15.68px);
  background: url(/assets/images/bg-parchment-upper.png) bottom center / 100% auto no-repeat;
}

#about::after{
  bottom: calc(-1 *  clamp(14px, 3.7333vw, 15.68px));
  height: clamp(14px, 3.7333vw, 15.68px);
  background: url(/assets/images/bg-parchment-lower.png) top center / 100% auto no-repeat;
}

#about .deco.top{
  top: 12px;
}

#about .deco.bottom{
  bottom: 12px;
}

#about .sec-title{
  position: relative;
  padding-top: 20px;
}

#about .sec-title img{
  width: 100%;
}

#about>.text{
  margin-top: -21px;
  margin-top: calc(clamp(18.75px, 5vw ,21px)* -1);
  text-align: center;
}

#about>.text img{
  width: clamp(307px, 81.867vw, 343.84px);
}

#about #create{
  width: calc(100% - clamp(24px, 6.4vw, 26.88px));
  margin: clamp(19px, 5.067vw, 21.28px) auto 0;
  padding: clamp(37px, 9.867vw, 41.44px) 0 clamp(34px, 9.067vw, 38.08px);
  background: url(/assets/images/bg-create.png) center center / 100% 100% no-repeat;
}

#about #battle{
  width: calc(100% - clamp(24px, 6.4vw, 26.88px));
  margin: clamp(15px, 4vw, 16.8px)  auto 0;
  padding: clamp(43px, 11.467vw, 48.16px) 0 clamp(32.14px, 8.57vw, 36px);
  background: url(/assets/images/bg-battle.png) center center / 100% 100% no-repeat;
}

#about #create .title,
#about #battle .title{
  display: flex;
  justify-content: center;
  align-items: center;
  column-gap: clamp(16.07px, 4.286vw, 18px);
}

#about #create .title  .icon img{
  width: clamp(81px, 21.6vw, 90.72px);
}

#about #battle .title  .icon img{
  width: clamp(75px, 20vw, 84px);
}

#about #create .title  .desc img{
  width: clamp(178px, 47.467vw, 199.36px);
}

#about #battle .title  .desc img{
  width: clamp(105.65px, 28.17vw, 118.33px);
}

#about #create .text{
  margin-top: clamp(19px, 5.067vw, 21.28px);
  text-align: center;
}

#about #battle .text{
  margin-top: clamp(22.3px, 5.95vw, 25px);
  text-align: center;
}

#about #create .text img,
#about #battle .text img{
  width: clamp(285px, 76vw, 319.2px); 
}

#about #create .link,
#about #battle .link{
  padding: 0 clamp(22px, 5.867vw, 24.64px);
  text-align: center;
}

#about #create .link{
  margin-top: clamp(18px, 4.8vw, 20.16px);
}

#about #battle .link{
  margin-top: clamp(19.64px, 5.24vw, 22px);
}

#about #create .link a,
#about #battle .link a{
  display: inline-block;
  position: relative;
}

#about #create .link a::before,
#about #battle .link a::before{
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(54px, 14.4vw, 60.48px);
  height: clamp(53px, 14.13vw, 59.36px);
  transform: translate(-50%, -50%);
  background: url(/assets/images/movie-btn.webp) center center / 100% auto no-repeat,
              url(/assets/images/movie-btn_hover.png) center center / 0 no-repeat;
  content: '';
}

#about #create .link a:hover::before,
#about #battle .link a:hover::before{
  background-size: 0, 100% auto;
}

#about #create .link img,
#about #battle .link img{
  width: 100%;
  /* width: clamp(307px, 81.87vw, 343.84px); */
}



#media{
  padding-top: clamp(4px, 1.0vw, 4.48px);
  padding-bottom: clamp(58px, 15.467vw, 64.96px);
}

#media .sec-title{
  position: relative;
}

#media .sec-title img{
  width: 100%;
}

#media .media-block{
  position: relative;
  width: calc(100% - clamp(24px, 6.4vw, 26.88px));
  margin: clamp(27.67px, 7.38vw, 31px) auto 0;
  padding: clamp(14px, 3.73vw, 15.68px)  clamp(15.18px, 4.408vw, 17px) clamp(35px, 9.334vw, 39.2px);
  background: url(/assets/images/bg-article.png) center center / contain repeat-y;
}

#media .media-block+.media-block{
  margin: clamp(42.86px, 11.42vw, 48px) auto 0;
}

#media .media-block::before,
#media .media-block::after{
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  content: '';
}

#media .media-block::before{
  top: -3px;
  background: url(/assets/images/bg-article-upper.png) center center / cover no-repeat;
}

#media .media-block::after{
  bottom: -3px;
  background: url(/assets/images/bg-article-lower.png) center center / cover no-repeat;
}

#media .media-block .tag{
  display: flex;
  align-items: center;
  column-gap: clamp(5px, 1.333vw, 5.6px);
}

#media .media-block .tag p{
  padding: clamp(2px, 0.53vw, 2.24px) clamp(7px, 1.8667vw, 7.84px);
  border-radius: 8px;
  background-color: #00C3FF;
  letter-spacing: -0.04em;
  font-size: clamp(14px, 3.73vw, 15.68px);
  font-weight: 700;
}

#media .media-block .inner{
  display: flex;
  margin-top: clamp(13px, 3.467vw, 14.56px);
  padding-left: clamp(2px, 0.53vw, 2.24px);
  padding-right: clamp(4.46px, 1.33vw, 5px);
  column-gap: clamp(12px, 3.2vw, 13.44px);
}

#media .media-block .inner p{
  color: #fff;
  font-size: clamp(16px, 4.2667vw, 17.92px);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -0.02em;
}

#media .media-block .inner img{
  width: clamp(90px, 24vw, 100.8px);
}

#media .media-block .link{
  position: absolute;
  left: 50%;
  bottom: calc(clamp(42px, 11.2vw, 47.04px) * -1);
  transform: translate(-50%, -50%);
  z-index: 1;
}

#media .media-block .link a{
  position: relative;
  display: inline-block;
  width: clamp(136px, 36.2667vw, 152.32px);
  height: clamp(37px, 9.867vw, 41.44px);
  /* background: url(/assets/images/article-btn.png) center center / contain no-repeat,
              url(/assets/images/article-btn_hover.png) center center / 0 no-repeat; */
}

#media .media-block .link a img{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}

#media .media-block .link a img:last-of-type {
  opacity: 0;
}

#media .media-block .link a:hover img.hover{
  opacity: 1;
}

#media .media-block .link a:hover img:not(.hover){
  opacity: 0;
}

#media .media-block .link a span{
  display: none;
}

/* #media .media-block .link a:hover{
  background-size: 0, 100% auto;
} */



#news{
  position: relative;
  padding-bottom: clamp(34px, 9.0667vw, 38.08px);
  background: url(/assets/images/bg-news.png) center center / 269px auto repeat;
}

#news::before,
#news::after{
  position: absolute;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
}

#news::before{
  top: -10px;
  background: url(/assets/images/bg-news-upper.png) center center / cover no-repeat;
}

#news::after{
  bottom: -10px;
  background: url(/assets/images/bg-news-lower.png) center center / cover no-repeat;
}

#news .monster01{
  position: absolute;
  top: 17px;
  left: 8px;
  width: clamp(117px, 31.2vw, 131.04px);
  height: clamp(129px, 34.4vw, 144.48px);
  background: url(/assets/images/news-monster01.png) center center / contain no-repeat;
}

#news .monster02{
  position: absolute;
  top: 5px;
  right: 8px;
  width: clamp(111px, 29.60vw, 124.32px);
  height: clamp(116px, 30.93vw, 129.92px);
  background: url(/assets/images/news-monster02.png) center center / contain no-repeat;
}

#news .sec-title{
  padding-top: 49px;
}

#news .sec-title img{
  width: clamp(375px, 100vw, 420px);
}

#news .embed{
  position: relative;
  width: 85.5%;
  margin: clamp(22px, 5.8667vw, 24.64px) auto 0;
}

#news iframe::-webkit-scrollbar{
  display: none;
}

#news .twitter-timeline {
  overflow: scroll;
  height: 410px;
}


#news .twitter-btn{
  margin: 22px auto 0;
  text-align: center;
}

#news .twitter-btn a{
  position: relative;
  display: inline-block;
  width: clamp(303px, 80.8vw, 339.36px);
  height: clamp(68px, 18.13vw, 76.16px);
  background: url(/assets/images/follow-btn.png) center center / 100% auto no-repeat,
              url(/assets/images/follow-btn_hover.png) center center / 0 no-repeat;
}

#news .twitter-btn a span{
  display: none;
}

#news .twitter-btn a:hover{
  background-size: 0, 100% auto;
}




.explain {
  position: relative;
  margin-top: 50px;
  background: url(/assets/images/bg-parchment.webp) center center / 375px auto repeat;
}

.explain::before,
.explain::after{
  position: absolute;
  left: 0;
  width: 100%;
  height: 14px;
  content: '';
}

.explain::before{
  top: -14px;
  background: url(/assets/images/bg-parchment-upper.png) center center / cover no-repeat;
}

.explain::after{
  bottom: -14px;
  background: url(/assets/images/bg-parchment-lower.png) center center / cover no-repeat;
}

.explain .wrap {
  padding: clamp(20px, 5.33vw, 22.4px) clamp(15px, 4vw, 16.8px) clamp(42px, 11.2vw, 47.04px);
}

.explain .logo-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 clamp(4px, 1.0667vw, 4.48px);
  /* column-gap: clamp(11px, 2.93vw, 12.32px); */
}

.explain .icon img {
  width: clamp(97px, 25.6vw, 107.52px);
}

.explain .logo img {
  width: clamp(228px, 60.8vw, 255.36px);
}

.explain ul {
  margin: clamp(25px, 6.67vw, 28px) 0 0;
  padding: 0;
}

.explain ul li {
  display: flex;
  align-items: center;
  padding: clamp(7.2px, 1.919vw, 8.06px) 0;
  border-radius: 9px;
  background-color: #451A0066;
  font-weight: 700;
}

.explain ul li+li {
  margin-top: 4px;
}

.explain ul li h3,
.explain ul li p {
  color: #FFF0DE;
  font-size: clamp(15px, 4vw, 16.8px);
  line-height: 1.33333;
}

.explain ul li h3 {
  min-width: clamp(92px, 24.53vw, 103.04px);
  padding-left: clamp(17px, 5.18vw, 21.744px);
}

.explain ul li p{
  margin: 0 0 0 20px;
}

.explain .deco{
  bottom: 12px;
}


.bottom-pre-order {
  width: 100%;
  margin-top: 27px;
  text-align: center;
  background: url(/assets/images/bg-preorder02.png) center top / 100% auto no-repeat ;
}

/* .bottom-pre-order p{
  padding-top: clamp(54px, 15vw, 63px);
} */

.bottom-pre-order p img {
  width: 100%;
  height: auto;
}

.bottom-pre-order .buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: clamp(7px, 1.8667vw, 7.84px) clamp(16px, 4.2667vw, 17.92px) 0;
  column-gap: clamp(12px, 3.2vw, 13.44px) ;
  row-gap: clamp(11px, 2.933vw , 12.32px);
}

.bottom-pre-order .buttons a {
  position: relative;
  display: inline-block;
}

.bottom-pre-order .buttons .apple img {
  width: clamp(148px, 39.4667vw, 165.76px);
  /* width: 100%; */
  height: auto;
}

.bottom-pre-order .buttons .googleplay img {
  width: clamp(183px, 48.8vw, 204.96px);
  /* width: 100%; */
  height: auto;
}

.bottom-pre-order .buttons a.preorder {
width: clamp(165px, 44vw, 184.8px);
/* width: 100%; */
height: clamp(63px, 16.8vw, 70.56px);
background: url(/assets/images/preorder.png) center center / 100% auto no-repeat,
url(/assets/images/preorder_hover.png) center center / 0 no-repeat;
}

.bottom-pre-order .buttons a.preorder:hover{
background-size: 0, 100% auto;
}

.bottom-pre-order .buttons a.preorder span{
  display: none;
}



#campaign{
  margin-top: clamp(40px, 10.667vw, 44.8px);
}

#campaign .sec-title{
  width: calc(100% - clamp(40px, 10.667vw, 44.8px));
  margin: 0 auto;
  text-align: center;
}

#campaign .sec-title img{
  /* width: clamp(343px, 91.49vw, 384.16px); */
  width: 100%;
}

#campaign .text{
  margin: clamp(13.39px, 3.57vw, 15px) auto 0;
  text-align: center;
}

#campaign .text p{
  color: #FFF0DE;
  font-size: clamp(18px, 4.8vw, 20.16px);
  font-weight: 700;
  line-height: 1.5; 
}

#campaign .campaign-items{
  margin:  clamp(15px, 4vw, 16.8px) auto 0;
  padding: 0 clamp(16px, 4.2667vw, 17.92px);
  text-align: center;
}

#campaign .campaign-items .campaign-item+.campaign-item{
  margin-top: 6px;
}

#campaign .campaign-items .campaign-item{
  position: relative;
}

#campaign .campaign-items .campaign-item img{
  /* width: clamp(343px, 87.72vw, 384.16px); */
  width: 100%;
}

#campaign .campaign-items .campaign-item.achieve::before{
  position: absolute;
  top: 0;
  left: 50%;
  /* width: clamp(343px, 87.72vw, 384.16px); */
  width: 100%;
  height: 100%;
  transform: translateX(-50%);
  content: '';
}

#campaign .campaign-items .campaign-item.achieve01::before{
  background: url(/assets/images/achieve01.png) center center / contain no-repeat;
}

#campaign .campaign-items .campaign-item.achieve02::before{
  background: url(/assets/images/achieve02.png) center center / contain no-repeat;
}

#campaign .campaign-items .campaign-item.achieve03::before{
  background: url(/assets/images/achieve03.png) center center / contain no-repeat;
}

#campaign .campaign-items .campaign-item.achieve04::before{
  background: url(/assets/images/achieve04.png) center center / contain no-repeat;
}

#campaign .campaign-items .campaign-item.achieve05::before{
  background: url(/assets/images/achieve05.png) center center / contain no-repeat;
}

#campaign .campaign-items .campaign-item.achieve06::before{
  background: url(/assets/images/achieve06.png) center center / contain no-repeat;
}

#campaign .campaign-items .campaign-item.achieve07::before{
  background: url(/assets/images/achieve07.png) center center / contain no-repeat;
}