@charset "UTF-8";
#liquid p{
  color: #2A2A2A;
}

body.is-fixed{
  overflow: hidden !important;
}

#bg.change {
  background-image: none;
  background-color: #000;
}

#bg.sub{
  height: 100vh;
}

.preorder-cloud{
  background: url(/wp-content/themes/kidora/assets/images/preorder-cloud.webp?v=1) center top -162px no-repeat;
}

.system-page{
  position: relative;
  text-align: center;
  overflow: hidden;
  padding: 133px 0 0;
}

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

.system-page .sec-title .text img {
  width: clamp(138px, 35.4vw, 176.6px);
}

.system-page .sec-title .desc{
  margin-top: 11px;
}

.system-page .sec-title .desc img {
  width: clamp(148px, 37.9vw, 189.44px);
}

.system-page .text01{
  margin-top: 11px;
}

.system-page .text01 img{
  width: clamp(354px, 94.3999vw, 453.12px);
}

.sticky-target{
  position: relative;
  top: calc(-1 * clamp(58.59px, 15.62vw, 75px));
}

.system-anchor{
  position: sticky;
  top: clamp(126.78px, 33.81vw, 162.288px);
  left: 0;
  margin-top: clamp(40px, 10.67vw, 51.2px);
  width: clamp(375px, 100vw, 480px);
  height: clamp(79px, 21.0667vw, 101.12px);
  z-index: 100;
}

.system-anchor .anchor .anchor01::before,
.system-anchor .anchor .anchor02::before,
.system-anchor .anchor .anchor03::before,
.system-anchor .anchor .anchor04::before,
.system-anchor .anchor .anchor05::before,
.system-anchor .anchor .anchor06::before{
  position: absolute;
  top: -600px;
  left: 0;
  width: 100%;
  height: 600px;
  background-color: rgb(0, 0, 0, 0.8);
  z-index: 10;
  opacity: 0;
  transition: opacity .1s ease;
  content: '';
}

.system-anchor .anchor.active .anchor01::before,
.system-anchor .anchor.active .anchor02::before,
.system-anchor .anchor.active .anchor03::before,
.system-anchor .anchor.active .anchor04::before,
.system-anchor .anchor.active .anchor05::before,
.system-anchor .anchor.active .anchor06::before{
  opacity: 1;
}

.system-anchor .anchor img{
  width: clamp(375px, 100vw, 480px);
}

.system-anchor .anchor .anchor01,
.system-anchor .anchor .anchor02,
.system-anchor .anchor .anchor03,
.system-anchor .anchor .anchor04,
.system-anchor .anchor .anchor05,
.system-anchor .anchor .anchor06{
  display: none;
}

.system-anchor .link .link01,
.system-anchor .link .link02,
.system-anchor .link .link03,
.system-anchor .link .link04,
.system-anchor .link .link05{
  display: inline-block;
  position: absolute;
  top: 0;
  width: clamp(75px, 20vw, 96px);
  height: 100%;
}

.system-anchor .link .link01{
  left: 0;
}

.system-anchor .link .link02{
  left: clamp(75px, 20vw, 96px);
}

.system-anchor .link .link03{
  left: clamp(150px, 40vw, 192px);
}

.system-anchor .link .link04{
  left: clamp(225px, 60vw, 288px);
}

.system-anchor .link .link05{
  left: clamp(300px, 80vw, 384px);
}

.system-anchor .link .link01 span,
.system-anchor .link .link02 span,
.system-anchor .link .link03 span,
.system-anchor .link .link04 span,
.system-anchor .link .link05 span{
  display: none;
}

.system-step01,
.system-step02,
.system-step03,
.system-step04,
.system-step05{
  text-align: center;
}

.system-step02,
.system-step03,
.system-step04,
.system-step05{
  margin: 20px 0 0;
}

#system01,
#system02,
#system03,
#system04,
#system05{
  position: relative;
  top: calc(-1 * clamp(214.84px, 57.29vw, 275px));
}

.system-step01 .title,
.system-step02 .title,
.system-step04 .title,
.system-step05 .title{
  position: relative;
  padding: clamp(56.25px, 15vw, 72px) 0 0;
}

.system-step01 ul{
  margin-top: clamp(20px, 5.33vw, 25.6px);
  padding: 0 clamp(16px, 4.267vw, 20.48px);
}

.system-step02 ul,
.system-step03 ul{
  margin-top: clamp(17px, 4.53vw, 21.76px);
  padding: 0 clamp(16px, 4.267vw, 20.48px);  
}

.system-step04 ul,
.system-step05 ul{
  margin-top: clamp(18px, 4.8vw, 23.04px);
  padding: 0 clamp(16px, 4.267vw, 20.48px);  
}

.system-step01 ul li+li,
.system-step02 ul li+li,
.system-step03 ul li+li,
.system-step04 ul li+li,
.system-step05 ul li+li{
  margin-top: clamp(20px, 5.33vw, 25.6px);
}

.system-step01 ul .image img,
.system-step01 ul .text img,
.system-step02 ul .image img,
.system-step02 ul .text img,
.system-step03 ul .image img,
.system-step03 ul .text img,
.system-step04 ul .image img,
.system-step04 ul .text img,
.system-step05 ul .image img,
.system-step05 ul .text img{
  width: 100%;
}

.system01 .system-slide,
.system02 .system-slide,
.system04 .system-slide{
  position: relative;
  margin: 25px clamp(14.55px , 3.73vw , 18.62px) 0;
}

.system01 .system-slide img,
.system02 .system-slide img,
.system04 .system-slide img{
  width: 100%;
}

.system-step01{
  margin-top: 29px;
  background: url(/wp-content/themes/kidora/assets/images/system/system-step01-bg.png) top center / 100% auto no-repeat;
}

.system-step01 .title img{
  width: clamp(256px, 65.6vw, 327.68px);
}

.system-step02{
  margin-top: clamp(44px, 11.73vw, 56.32px);
  background: url(/wp-content/themes/kidora/assets/images/system/system-step02-bg.png) top center / 100% auto no-repeat;
}

.system-step02 .title img{
  width: clamp(230px, 61.333vw, 294.4px);
}

.system-step03{
  margin-top: clamp(44px, 11.73vw, 56.32px);
  background: url(/wp-content/themes/kidora/assets/images/system/system-step03-bg.png) top center / 100% auto no-repeat;
}

.system-step03 .subtitle{
  height: clamp(74.35px, 19.8267vw, 95.17px);
  padding: clamp(56px, 14.83vw, 71.68px) 0 0;
}

.system-step03 .subtitle img{
  width: clamp(332px, 88.53vw, 424.96px);
}

.system-step03 .title{
  margin-top: clamp(7px, 0.1867vw, 8.96px);
}

.system-step03 .title img{
  width: clamp(274px, 73.067vw, 350.72px);
}

.system-step04{
  margin-top: clamp(44px, 11.73vw, 56.32px);
  background: url(/wp-content/themes/kidora/assets/images/system/system-step04-bg.png) top center / 100% auto no-repeat;
}

.system-step04 .title img{
  width: clamp(343px, 91.467vw, 439.04px);
}

.system-step05{
  margin-top: clamp(44px, 11.73vw, 56.32px);
  background: url(/wp-content/themes/kidora/assets/images/system/system-step05-bg.png) top center / 100% auto no-repeat;
}

.system-step05 .title img{
  width: clamp(280px, 74.667vw, 358.4px);
}



.system-movie{
  margin: 61px auto 0;
  padding: clamp(30px, 8vw, 38.4px) clamp(12px, 3.2vw, 15.36px) clamp(39px, 10.4vw, 49.92px);
  text-align: center;
  background: url(/wp-content/themes/kidora/assets/images/system/system-movie-bg.png) center center / calc(100% - 24px) 100% no-repeat;
}

.system-movie .text{
  position: relative;
}

.system-movie .text img{
  width: clamp(62px, 16.53vw, 79.36px);
}

.system-movie .desc{
  position: relative;
  margin-top: clamp(9px, 2.4vw, 11.52px);
}

.system-movie .desc img{
  width: clamp(307px, 81.8667vw, 392.96px);
}

.system-movie .image{
  display: inline-block;
  margin-top: clamp(14px, 3.733vw, 17.92px);
}

.system-movie .image img{
  width: clamp(327px, 87.2vw, 418.56px);
}