@charset "UTF-8";

#mv {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  width: 100%;
  height: 100svh;
  min-height: 700px;
  z-index: 10;
  pointer-events: none;
}

#mv::after {
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 400px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
  pointer-events: none;
}

#spine-linear {
  position: absolute;
  opacity: 0;
  filter: blur(10px);
  width: 200vh;
  height: 120svh;
  min-height: 700px;
  z-index: 50;
  top: -30%;
  left: 50%;
  transform: translate(-50%, 0);
  pointer-events: none;
}

#spine-schwarz {
  display: none;
  position: absolute;
  opacity: 0;
  filter: blur(10px);
  width: 200vh;
  height: 110svh;
  min-height: 700px;
  z-index: 50;
  top: -11%;
  left: 62%;
  transform: translate(-50%, 0);
  pointer-events: none;
}

#spine-magnus {
  display: none;
  position: absolute;
  opacity: 0;
  filter: blur(10px);
  width: 200vh;
  height: 120svh;
  min-height: 700px;
  z-index: 50;
  top: -33%;
  left: 71%;
  transform: translate(-50%, 0);
  pointer-events: none;
}

#mv .logo {
  will-change: transform;
  position: absolute;
  pointer-events: none;
  top: 52%;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
  z-index: 100;
}

#mv .logo img {
  position: relative;
  width: clamp(320px, 85.33333333333334vw, 410px);
  height: auto;
}

#mv>img {
  will-change: transform;
  pointer-events: none;
}

#mv .cloud01 {
  top: -500px;
  left: 365px;
}

#mv .cloud02 {
  z-index: 70;
  top: -105px;
  left: -2970px;
}

#mv .cloud03 {
  top: -230px;
  left: 150px;
}

#mv .cloud04 {
  top: -230px;
  left: 370px;
}

/* 登録ボタン */
.register-btn {
  position: fixed;
  display: block;
  z-index: 100;
  bottom: 190px;
  right: calc(50% - 240px);

}

.register-btn figure img {
  width: 100%;
  height: 100%;
}

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


.pop-up a{
  position: relative;
  display: inline-block;
  width: clamp(124px, 33.06666666666666vw, 158px);
  height: clamp(124px, 33.06666666666666vw, 158px);
  pointer-events: auto;
}

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

@media screen and (max-width: 480px) {
  .pop-up {
    bottom: 23svh;
  }
}


/* 事前受付固定エリア */

.pre-order {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  text-align: center;
  width: 100%;
  max-width: 480px;
  padding: 81px 0 12px;
  margin-top: 10px;
  background: url(/wp-content/themes/kidora/assets/images/top/button-bg.webp) center center no-repeat;
  /* background-size: 100% 100%; */
  background-size: cover;
}

.pre-order p {
  margin: 0;
}

.pre-order p img {
  width: clamp(171px, 45.6vw, 219px);
  height: auto;
}

.pre-order .buttons {
  display: flex;
  justify-content: center;
  padding-top: 7.6px;
}

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

.pre-order .buttons a+a {
  margin-left: 11px;
}

.pre-order .buttons .apple img {
  width: clamp(148px, 39.46vw, 190px);
  height: auto;
}

.pre-order .buttons .googleplay img {
  width: clamp(183px, 48.8vw, 233px);
  height: auto;
}

/* 雲を囲うDIV */

.cloud-wrap {
  position: relative;
  overflow: hidden;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-cloud-wrap.webp);
  background-size: cover;
}

.cloud-wrap::after {
  position: absolute;
  display: block;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 400px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

.cloud-wrap::before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-cloud-wrap.webp) center top;
  background-size: cover;
}

.cloud-wrap>img {
  pointer-events: none;
}

.cloud-wrap .cloud01 {
  z-index: 10;
  top: -50px;
  left: -200px;
}

.cloud-wrap .cloud02 {
  top: -50px;
  left: -200px;
}

.cloud-wrap .cloud03 {
  top: -170px;
  left: -200px;
}

.cloud-wrap .cloud04 {
  top: -200px;
  left: -185px;
}

.cloud-wrap .cloud05 {
  top: 0;
  left: -150px;
}

.cloud-wrap .cloud06 {
  top: 265px;
  left: -240px;
}

.cloud-wrap .cloud07 {
  top: 700px;
  left: -200px;
}

.cloud-wrap .cloud08 {
  top: 500px;
  left: -200px;
}

.cloud-wrap .cloud09 {
  top: 200px;
  left: -200px;
}

.cloud-wrap .cloud10 {
  top: 400px;
  left: -100px;
}

.cloud-wrap .cloud11 {
  top: 550px;
  left: -230px;
}

.cloud-wrap .cloud12 {
  top: 600px;
  left: -100px;
}

.cloud-wrap .cloud13 {
  bottom: 280px;
  left: -100px;
}

.cloud-wrap .cloud14 {
  z-index: 10;
  bottom: -10px;
  left: -190px;
}

.cloud-wrap .cloud15 {
  z-index: 10;
  bottom: -500px;
  left: -540px;
}

.cloud-wrap .cloud16 {
  z-index: 10;
  bottom: -260px;
  left: -435px;
}

.cloud-wrap .cloud17 {
  bottom: -190px;
  left: -420px;
}

.cloud-wrap .cloud18 {
  bottom: -310px;
  left: -510px;
}

.bottom-cloud-wrap {
  position: relative;
  overflow: hidden;
  background-size: cover;
}

.bottom-bg {
  position: relative;
  width: 100%;
  height: 378px;
  background: url(/wp-content/themes/kidora/assets/images/top/bottom-middle-bg.webp) center top no-repeat;
  background-size: cover;
}

.bottom-bg::before {
  position: absolute;
  display: block;
  content: "";
  top: -212px;
  left: 0;
  width: 100%;
  height: 212px;
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, #aabcc8 100%);
}

.bottom-bg::after {
  position: absolute;
  display: block;
  content: "";
  bottom: -212px;
  left: 0;
  width: 100%;
  height: 212px;
  background: linear-gradient(#e7eded 100%, rgba(255, 255, 255, 0) 0);
}


.bottom-bg img {
  position: absolute;
  width: 100%;
  left: 0;
  pointer-events: none;
  z-index: 100;
}

.bottom-bg .bottom-cloud01 {
  bottom: 145px;
}

.bottom-bg .bottom-cloud02 {
  bottom: -617px;
}

.bottom-bg .bottom-cloud03 {
  bottom: -623px;
}

/* System */

#system {
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 36px 0 80px;
}

#system .sec-title {
  position: relative;
  z-index: 100;
}

#system .sec-title .text img {
  width: clamp(139px, 37.0667vw, 177.92px);
}

#system .sec-title .desc img {
  width: clamp(148px, 39.467vw, 190px);
}

#system .txt01 {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 100;
  margin-top: 10px;
}

#system .txt01 .text-mask {
  position: absolute;
  width: 100%;
  height: 100%;
  mask-image: url("/wp-content/themes/kidora/assets/images/top/system-text01-musk.png");
  /*マスクレイヤーとして使用する画像*/
  mask-repeat: no-repeat;
  mask-size: auto 100%;
  -webkit-mask-image: url("/wp-content/themes/kidora/assets/images/top/system-text01-musk.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: auto 100%;
  z-index: 100;
}

#system .txt01 .text-mask .light {
  width: 20%;
  height: 100%;
  position: absolute;
  top: 0;
  left: -150%;
  background-color: #fff;
  opacity: 1;
  transform: rotate(-148deg) scale(2.2);
  pointer-events: none;
  opacity: 1;
}

#system .txt01 .text-mask .light01 {
  width: 10%;
  background-color: transparent;
}

#system .txt01 img {
  position: relative;
  width: clamp(350px, 93.333vw, 448px);
  overflow: hidden;
}

#system .video-area {
  position: relative;
  z-index: 100;
  overflow: hidden;
  width: clamp(363px, 97vw, 466px);
  height: clamp(179px, 50vw, 240px);
  margin: 5px auto 0;
  background: url(/wp-content/themes/kidora/assets/images/top/video-frame.png) center center no-repeat;
  background-size: contain;
}

#system .video-area video {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 95.6%;
  height: 85.8%;
  object-fit: cover;
  border-radius: clamp(21px, 5.6000000000000005vw, 23px);
}

#system .txt02 {
  position: relative;
  z-index: 100;
  margin-top: 12px;
}

#system .txt02 img {
  width: clamp(369px, 98.4vw, 472px);
  height: auto;
  animation: sparkle 1s ease-in-out infinite;
}

#system .system-btn {
  position: relative;
  z-index: 100;
  width: clamp(269px, 71.733vw, 344px);
  height: clamp(60px, 16vw, 76.8px);
  margin: 17px auto 0;
  border-radius: 4px;
}

#system .system-btn a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: url(/wp-content/themes/kidora/assets/images/top/system-btn-bg.png) center center no-repeat;
  background-size: 105.8%;
}

#system .system-btn a>img {
  width: clamp(151px, 40.2667vw, 193px);
  height: auto;
}


/* Story */

#story {
  position: relative;
  overflow: hidden;
  padding-bottom: 140px;
}

#story .sec-title {
  position: relative;
  z-index: 100;
}

#story .sec-title .text img {
  width: clamp(112px, 29.8667vw, 143.36px);
}

#story .sec-title .desc img {
  width: clamp(135px, 36vw, 172px);
}

#story .story-text {
  position: relative;
  z-index: 100;
}

#story .story-text .left {
  padding-top: 44.6px;
}

#story .story-text .left img {
  width: auto;
  height: clamp(315px, 84vw, 403.2px);
}

#story .story-text .right {}

#story .story-text .right img {
  width: auto;
}

#story .story-text .right .img01 {
  position: absolute;
  top: -3%;
  right: 3%;
  height: clamp(485.05px, 129.33333333333331vw, 620.8px);
}

#story .story-text .right .img02 {
  position: absolute;
  top: -7%;
  right: -2%;
  height: clamp(258px, 68.8vw, 330px);
}

#story .story-link {
  position: relative;
  z-index: 100;
  padding-left: 20px;
  margin-top: 22px;
}

#story .story-link a {
  display: flex;
  align-items: center;
}

#story .story-link p {
  margin: 0;
  font-size: 0.625em;
}

#story .story-link p img {
  width: clamp(100px, 26.67vw, 128px);
}

#story .story-link .icon {
  width: clamp(28px, 7.467vw, 39px);
  height: clamp(28px, 7.467vw, 39px);
  margin-left: 9px;
  background: url(/wp-content/themes/kidora/assets/images/top/icon-storylink.svg) center center no-repeat;
  background-size: cover;
  border-radius: 50%;
}

/* Character */

#character {
  position: relative;
  z-index: 100;
  overflow: hidden;
  padding-bottom: 80px;
}

#character .sec-title {}

#character .sec-title .text img {
  width: clamp(196px, 52.2667vw, 250.88px);
}

#character .sec-title .desc img {
  width: clamp(107px, 28.533vw, 136.95px);
}

#character .character-link {
  padding-left: 20px;
  margin-top: 28px;
}

#character .character-link a {
  display: flex;
  align-items: center;
}

#character .character-link p {
  margin: 0;
  font-size: 0.625em;
}

#character .character-link p img {
  width: clamp(134px, 35.734vw, 172px);
}

#character .character-link .icon {
  width: clamp(28px, 7.467vw, 39px);
  height: clamp(28px, 7.467vw, 39px);
  margin-left: 9px;
  background: url(/wp-content/themes/kidora/assets/images/top/icon-characterlink.svg) center center no-repeat;
  background-size: cover;
}

/* 黒い部分背景 */

.black-cloud-wrap {
  position: relative;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-black-cloud.webp) center center no-repeat;
  background-size: cover;
}

/* Movie */

#movie {
  position: relative;
  padding: 44px 0 80px;
}

#movie .sec-title {}

#movie .sec-title .text img {
  width: clamp(112px, 29.8667vw, 143.36px);
}

#movie .sec-title .desc img {
  width: clamp(106px, 28.2667vw, 136px);
}

#movie ul {
  padding: 0 24px;
  margin: 28px 0 0;
}

#movie ul li {
  text-align: center;
}

#movie ul li+li {
  margin-top: 30px;
}

#movie ul li .image {
  position: relative;
  display: block;
  width: 100%;
  height: clamp(184px, 49.067vw, 236px);
  background: center center no-repeat;
  background-size: cover;
  border-radius: 8px;
}

#movie ul li .image::before {
  position: absolute;
  display: block;
  content: "";
  z-index: 10;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  background: url(/wp-content/themes/kidora/assets/images/top/icon-movie.svg) center center no-repeat;
  background-size: cover;
}

#movie ul li .image::after {
  position: absolute;
  display: block;
  content: "";
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #000;
  opacity: .2;
}

#movie ul li>p {
  margin: 8px 0 0;
  color: #fff;
  font-size: clamp(13px, 3.4666666666666663vw, 16px);
}

#movie ul .interview .image {
  background-image: url(/wp-content/themes/kidora/assets/images/top/img-movie01.jpg?v=1);
}

#movie ul .promotion .image {
  background-image: url(/wp-content/themes/kidora/assets/images/top/img-movie02.webp?v=1);
}

#movie ul .scene .image {
  background-image: url(/wp-content/themes/kidora/assets/images/top/img-movie03.png?v=1);
}

#movie ul .understand .image {
  background-image: url(/wp-content/themes/kidora/assets/images/top/img-movie04.webp?v=1);
}

#movie .movie-btn {
  width: clamp(269px, 71.733vw, 344px);
  height: clamp(60px, 16vw, 77px);
  margin: 32px auto 0;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-movie-button.png) center center no-repeat;
  background-size: 106% 130%;
  border-radius: 4px;
}

#movie .movie-btn a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 40px;
  background: url(/wp-content/themes/kidora/assets/images/icon-youtube.svg) center left 10% no-repeat;
  background-size: 32px;
}

#movie .movie-btn a img {
  width: clamp(179px, 47.733vw, 229px);
}

/* Creator */

#creator {
  position: relative;
  padding: 0 24px 80px;
}

#creator .sec-title {}

#creator .sec-title .text img {
  width: clamp(155px, 41.33vw, 198.4px);
}

#creator .sec-title .desc img {
  width: clamp(106px, 28.267vw, 136px);
}

#creator .image {
  margin-top: 28px;
}

#creator .image img {
  width: 100%;
}

#creator>p {
  color: #fff;
}

#creator>p:first-of-type {
  text-align: center;
  margin: 21px 0 0;
  font-size: clamp(19px, 5.07vw, 24px);
  font-weight: 700;
}

#creator>p:last-of-type {
  margin: 15px 0 0;
  font-size: clamp(13px, 3.47vw, 17px);
  color: rgba(255, 255, 255, .7);
}

#creator .creator-btn {
  width: clamp(269px, 71.733vw, 344px);
  height: clamp(60px, 16vw, 77px);
  margin: 32px auto 0;
  border-radius: 4px;
}

#creator .creator-btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-creator-button.png) center center no-repeat;
  background-size: 105.8%;
}

#creator .creator-btn a img {
  width: clamp(128px, 34.133vw, 164px);
}

/* Twitter埋め込みエリア */

.twitter-area {
  position: relative;
  z-index: 200;
  text-align: center;
  margin: 52px 24px 0;
  padding: 34px 20px 0;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-twitter.png) center top no-repeat;
  background-size: cover;
}

.twitter-area .twitter-button {
  margin-top: 16px;
}

.twitter-area .twitter-button a {
  display: block;
  text-decoration: none;
  text-align: center;
  width: clamp(224px, 59.73333333333334vw, 287px);
  line-height: clamp(40px, 10.666666666666668vw, 51px);
  margin: 0 auto;
  padding-left: 26px;
  border-radius: clamp(22px, 5.866666666666666vw, 81px);
  background: url(/wp-content/themes/kidora/assets/images/icon-x.png) center left 10% no-repeat #000;
  background-size: clamp(13.51px, 3.6026666666666665vw, 20px);
  color: #fff;
  font-size: clamp(13px, 3.4666666666666663vw, 16.64px);
}

.twitter-area .embed {
  margin-top: 21px;
  overflow: hidden;
}

.twitter-area .embed iframe {
  width: 100%;
  max-width: 400px;
}

.twitter-area .twitter-timeline {
  overflow: scroll;
  height: 329px;
}

.twitter-area h3 {
  font-size: 10px;
}

.twitter-area h3 img {
  /* width: clamp(211px, 56.267vw, 270px); */
  /* width: 236px; */
  width: clamp(236px, 62.93333333333333vw, 302.08px);
}

/* Explain */

.explain {
  position: relative;
  z-index: 100;
  /* padding-top: clamp(209px, 50.4vw, 262px); */
  /* padding-top: 378px; */
}

.explain .wrap {
  position: relative;
  z-index: 170;
  padding: 33px 28px 38px;
  margin: 0 20px 0;
  background: url(/wp-content/themes/kidora/assets/images/top/bg-explain.png) center center no-repeat;
  background-size: 100% 100%;
}

.explain .logo-area {
  display: flex;
  align-items: center;
}

.explain .icon img {
  width: clamp(80px, 21.333333333333336vw, 102.4px);
}

.explain .logo {
  margin-left: 18px;
}

.explain .logo img {
  width: clamp(181.77px, 48.8vw, 234.23px);
}

.explain ul {
  margin: 24px 0 0;
  padding: 0;
}

.explain ul li {
  display: flex;
  align-items: center;
  font-weight: 700;
}

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

.explain ul li h3 {
  position: relative;
  min-width: clamp(60px, 20.533333333333335vw, 98.55px);
  padding-left: clamp(17px, 4.53vw, 21.744px);
  color: #E2C78B;
  font-size: clamp(12px, 3.2vw, 15.36px);
}

.explain ul li h3::before {
  position: absolute;
  display: block;
  content: "";
  width: 13px;
  height: 13px;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  background: url(/wp-content/themes/kidora/assets/images/top/explain-decoration.svg) center center no-repeat;
  background-size: cover;
}

.explain ul li p {
  margin: 0 0 0 20px;
  color: #fff;
  font-size: clamp(12px, 3.2vw, 15.36px);
}

.explain .battleship-area {
  /* display: flex; */
  display: none;
  top: 20px;
  width: 100%;
}

.explain .battleship-area img {
  position: absolute;
  display: block;
  height: auto;
  width: clamp(204px, 54.4vw, 261.12px);
}

.explain .battleship-area .battleship01 img {
  top: 10%;
  left: 0;
  width: clamp(78px, 20.8vw, 99.84px);
  z-index: 100;
  transform: translateX(-150%);
}

/* .explain .battleship-area .battleship02 img {
  top: 8%;
  right: 0;
  width: clamp(252px, 67.2vw, 322.56px);
} */

.explain .battleship-area .battleship03 img {
  top: 24%;
  right: 0;
  width: clamp(138px, 36.8vw, 176.36px);
  z-index: 200;
  transform: translateX(150%);
}

.explain .battleship-area .battleship04 img {
  top: 5%;
  left: 0;
  width: clamp(17px, 4.533333333333333vw, 21.76px);
  z-index: 90;
  transform: translateX(-400%);
}

.explain .explain-cloud01,
.explain .explain-cloud02 {
  position: absolute;
  pointer-events: none;
  top: -600px;
  left: 60%;
  opacity: .6;
  display: block;
  z-index: 150;
}

/* 雲のオブジェ */
.obj {
  position: absolute;
}

/* twitter-spinner */

.spinner-anime {
  position: relative;
  height: 329px;
}

.spinner-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.fulfilling-bouncing-circle-spinner,
.fulfilling-bouncing-circle-spinner * {
  box-sizing: border-box;
}

.fulfilling-bouncing-circle-spinner {
  height: 40px;
  width: 40px;
  position: relative;
  animation: fulfilling-bouncing-circle-spinner-animation infinite 4000ms ease;
}

.fulfilling-bouncing-circle-spinner .orbit {
  height: 40px;
  width: 40px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  border: calc(60px * 0.03) solid #FFFC00;
  animation: fulfilling-bouncing-circle-spinner-orbit-animation infinite 4000ms ease;
}

.fulfilling-bouncing-circle-spinner .circle {
  height: 40px;
  width: 40px;
  color: #FFFC00;
  display: block;
  border-radius: 50%;
  position: relative;
  border: calc(60px * 0.1) solid #FFFC00;
  animation: fulfilling-bouncing-circle-spinner-circle-animation infinite 4000ms ease;
  transform: rotate(0deg) scale(1);
}

@keyframes fulfilling-bouncing-circle-spinner-animation {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes fulfilling-bouncing-circle-spinner-orbit-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1);
  }

  62.5% {
    transform: scale(0.8);
  }

  75% {
    transform: scale(1);
  }

  87.5% {
    transform: scale(0.8);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes fulfilling-bouncing-circle-spinner-circle-animation {
  0% {
    transform: scale(1);
    border-color: transparent;
    border-top-color: inherit;
  }

  16.7% {
    border-color: transparent;
    border-top-color: initial;
    border-right-color: initial;
  }

  33.4% {
    border-color: transparent;
    border-top-color: inherit;
    border-right-color: inherit;
    border-bottom-color: inherit;
  }

  50% {
    border-color: inherit;
    transform: scale(1);
  }

  62.5% {
    border-color: inherit;
    transform: scale(1.4);
  }

  75% {
    border-color: inherit;
    transform: scale(1);
    opacity: 1;
  }

  87.5% {
    border-color: inherit;
    transform: scale(1.4);
  }

  100% {
    border-color: transparent;
    border-top-color: inherit;
    transform: scale(1);
  }
}